/* Fonts hosted off Tebex — https://s3.nanoscripts.cloud/tebex/fonts/ */
@font-face {
  font-family: "GTA Art Deco";
  src: url("https://s3.nanoscripts.cloud/tebex/fonts/GTAArtDeco-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GTA Art Deco";
  src: url("https://s3.nanoscripts.cloud/tebex/fonts/GTAArtDeco-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GTA Art Deco";
  src: url("https://s3.nanoscripts.cloud/tebex/fonts/GTAArtDeco-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GTA Art Deco Condensed";
  src: url("https://s3.nanoscripts.cloud/tebex/fonts/GTAArtDeco-Condensed-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Reservation Wide";
  src: url("https://s3.nanoscripts.cloud/tebex/fonts/Reservation%20Wide%20Black.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html {
  overflow-x: clip;
}

body {
  margin: 0;
  color: #fff;
  background: #0f121b;
  overflow-x: clip;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.page {
  min-height: 100vh;
  background: #0f121b;
  position: relative;
  max-width: 100vw;
  overflow-x: clip;
}

.page__orb {
  position: absolute;
  pointer-events: none;
  z-index: 10;
}

.page__orb--products-large {
  width: 196px;
  height: 26px;
  left: -60px;
  top: calc(100vh + 50px);
  transform: rotate(-88deg);
  background: #fa4039;
  border-radius: 9999px;
  filter: blur(75px);
}

.page__orb--products-small {
    width: 98px;
    height: 108px;
    left: -54px;
    top: calc(100vh - -8px);
    transform: rotate(-65deg);
    background: #ff0800ba;
    border-radius: 9999px;
    filter: blur(50px);
}

.page__hero-section {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.page__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  pointer-events: none;
}

.page__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: 95vh;
  padding: 100px 20px 40px;
}

/* Navbar styles now live in /navbar.css (shared across pages). */

.hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 550px;
  margin-top: 60px;
  padding-left: 75px;
  position: relative;
  z-index: 2;
}

.hero-visual {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 55%;
  pointer-events: none;
  z-index: 1;
}

.hero-visual__character {
  width: 100%;
  height: auto;
  object-fit: contain;
  margin-top: -60px;
}

.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 4px;
  background: radial-gradient(ellipse 243.75% 243.76% at 50% 50%, #fa4039 0%, rgba(148, 38, 34, 0) 100%);
  font-family: "GTA Art Deco", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.75);
}

.hero__tag-icon {
  width: 30px;
  height: 24px;
  object-fit: contain;
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero__headline {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: "Reservation Wide", sans-serif;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.12;
}

.hero__headline-white {
  color: #fff;
  line-height: 1;
}

.hero__headline-red {
  color: #fa4039;
  line-height: 0.8;
}

.hero__subtitle {
  margin: 0;
  max-width: 554px;
  font-family: "GTA Art Deco", sans-serif;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.4;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 12px 16px;
  border-radius: 150px;
  font-family: "GTA Art Deco", sans-serif;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.hero__btn:hover {
  opacity: 0.85;
}

.hero__btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.hero__btn--primary {
  color: #fff;
  background: radial-gradient(ellipse 93.58% 188.17% at 50.27% 100%, #fa4039 0%, #942622 100%);
}

.hero__btn--secondary {
  color: #fa4039;
  background: transparent;
  outline: 2px solid rgba(198, 212, 255, 0.25);
  outline-offset: -2px;
}

.hero__btn--secondary svg {
  width: 18px;
  height: 14px;
}

.stats-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 10px 60px;
  margin-top: auto;
  position: relative;
  z-index: 2;
}

.stats-bar__metrics {
  display: flex;
  align-items: flex-end;
  gap: 32px;
}

.stats-bar__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.stats-bar__value {
  font-family: "GTA Art Deco", sans-serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 500;
  color: #fff;
  line-height: 1;
}

.stats-bar__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "GTA Art Deco", sans-serif;
  font-size: clamp(16px, 1.8vw, 24px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
}

.stats-bar__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: drop-shadow(0 0 12px rgba(250, 64, 57, 0.75)) drop-shadow(0 0 24px rgba(250, 64, 57, 0.5));
}

.stats-bar__dot svg {
  width: 20px;
  height: 20px;
}

.stats-bar__divider {
  width: 3px;
  height: 26px;
  background: rgba(198, 212, 255, 0.25);
  flex-shrink: 0;
  align-self: center;
}

.stats-bar__socials {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stats-bar__socials-label {
  font-family: "GTA Art Deco", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}

.stats-bar__socials-icons {
  display: flex;
  align-items: center;
  gap: 7px;
}

.stats-bar__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 50%;
  outline: 1px solid rgba(198, 212, 255, 0.25);
  outline-offset: -1px;
  background: transparent;
  color: rgba(198, 212, 255, 0.25);
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.stats-bar__social:hover {
  opacity: 0.7;
}

.stats-bar__social svg {
  width: 20px;
  height: 20px;
}

.stats-bar__social--primary {
  outline: none;
  background: radial-gradient(ellipse 93.58% 188.17% at 50.27% 100%, #fa4039 0%, #942622 100%);
  color: #fff;
}

.stats-bar__social-line {
  width: 12px;
  height: 2px;
  background: rgba(198, 212, 255, 0.25);
  flex-shrink: 0;
}

.products {
  padding: 50px 20px 60px;
  position: relative;
  overflow: hidden;
}

.products__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  max-width: 1728px;
  margin: 0 auto 40px;
  padding: 0 32px;
  width: 100%;
}

.products__header-left {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.products__decoration {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.products__decoration span:nth-child(1) {
  width: 25px;
  height: 25px;
  background: #fa4039;
  border-radius: 5px;
}

.products__decoration span:nth-child(2) {
  width: 20px;
  height: 20px;
  background: rgba(250, 64, 57, 0.5);
  border-radius: 5px;
}

.products__decoration span:nth-child(3) {
  width: 15px;
  height: 15px;
  background: rgba(250, 64, 57, 0.25);
  border-radius: 5px;
}

.products__header-text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.products__title {
  margin: 0;
  font-family: "GTA Art Deco", sans-serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  color: #fff;
}

.products__subtitle {
  margin: 0;
  max-width: 55%;
  font-family: "GTA Art Deco", sans-serif;
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.4;
}

.products__view-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 12px 16px;
  border-radius: 150px;
  background: radial-gradient(ellipse 93.58% 188.17% at 50.27% 100%, #fa4039 0%, #942622 100%);
  font-family: "GTA Art Deco", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  flex-shrink: 0;
  /* Belt-and-braces: justify-content:space-between on the parent
   * already pushes this right; margin-left:auto guarantees it even
   * if the layout ever changes. */
  margin-left: auto;
  transition: opacity 0.15s ease;
}

.products__view-all:hover {
  opacity: 0.85;
}

.products__view-all svg {
  width: 14px;
  height: 14px;
}

.products__carousel {
  position: relative;
  width: 100%;
  overflow: visible;
}

.products__carousel::before,
.products__carousel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 200px;
  pointer-events: none;
  z-index: 2;
}

.products__carousel::before {
  left: 0;
  background: radial-gradient(ellipse 100% 200% at 0% 50%, rgba(15, 18, 27, 0.95) 0%, rgba(15, 18, 27, 0) 70%);
}

.products__carousel::after {
  right: 0;
  background: radial-gradient(ellipse 100% 200% at 100% 50%, rgba(15, 18, 27, 0.95) 0%, rgba(15, 18, 27, 0) 70%);
}

.products__track {
  display: flex;
  gap: 12px;
  padding: 0 96px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.products__track::-webkit-scrollbar {
  display: none;
}

/* ── Carousel nav arrows ──
 * Anchored to the carousel's left/right edges, vertically centred,
 * sit above the gradient fade pseudo-elements so they read clearly
 * even at the ends of the track. */
.products__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(15, 18, 27, 0.65);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, border-color 0.18s ease,
              transform 0.18s ease, opacity 0.18s ease;
}
.products__nav:hover {
  background: rgba(15, 18, 27, 0.85);
  border-color: rgba(255, 255, 255, 0.22);
}
.products__nav:active {
  transform: translateY(-50%) scale(0.94);
}
.products__nav[disabled] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.products__nav--prev { left: 32px; }
.products__nav--next { right: 32px; }
@media (max-width: 720px) {
  .products__nav { width: 38px; height: 38px; }
  .products__nav--prev { left: 12px; }
  .products__nav--next { right: 12px; }
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 320px;
  max-width: 457px;
  flex: 0 0 calc(25% - 9px);
  padding: 20px;
  border-radius: 12px;
  background: radial-gradient(ellipse 82.97% 82.97% at 50% 50%, rgba(217, 217, 217, 0.15) 0%, rgba(115, 115, 115, 0) 100%);
  overflow: hidden;
  scroll-snap-align: start;
}

.product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--asset-card-pattern) center / 100% auto no-repeat;
  opacity: 0.13;
  pointer-events: none;
}

.product-card__lines {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 101px;
  height: 25px;
  /* deco-line.svg inlined as URL-encoded data URI so the assets folder
     stays SVG-free (Tebex's uploader rejects .svg files). */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='101' height='25' viewBox='0 0 101 25'%3E%3Cpath fill='%23FA4039' fill-opacity='.15' d='M101 25H0l5-3h91z'/%3E%3Cpath fill='%23FA4039' d='M76 25H25l5-5h41z'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
  z-index: 1;
}

.product-card__lines--top {
  top: 0px;
  transform: translateX(-50%) rotate(180deg);
}

.product-card__lines--bottom {
  bottom: 0;
}

.product-card__glow {
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 120px;
  height: 120px;
  background: #fa4039;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.6;
  pointer-events: none;
}

.product-card__image {
  width: 100%;
  /* 16:9 to match the 1920x1080 source artwork — fixed 200px
   * height was squashing the image on narrow viewports. */
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
}

.product-card__title {
  margin: 0;
  font-family: "GTA Art Deco", sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #fff;
  line-height: 1.17;
}

.product-card__title a {
  color: inherit;
  text-decoration: none;
}

.product-card__title a:hover,
.product-card__title a:focus-visible {
  color: #fa4039;
}

.product-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.product-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 4px;
  background: rgba(198, 212, 255, 0.15);
  outline: 1px solid rgba(198, 212, 255, 0.15);
  outline-offset: -1px;
  font-family: "GTA Art Deco", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}

.product-card__tag svg,
.product-card__tag .product-card__tag-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

.product-card__footer {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
}

.product-card__price-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product-card__price-label {
  font-family: "GTA Art Deco", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
}

.product-card__price {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "GTA Art Deco", sans-serif;
  font-size: 32px;
  font-weight: 500;
  color: #fa4039;
}

.product-card__price svg,
.product-card__price .product-card__price-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}

/* Liquid-glass "Add to basket" button on the home-page featured
 * cards. Same language as `.card-add-btn` on /products and
 * `.product-info__add-btn` on the detail page: standalone
 * translate/scale (composes cleanly with the toss-flash keyframe),
 * top-bright / bottom-shadow inset rim, expanding red glow on
 * hover, and a small icon micro-bounce. */
.product-card__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  background: radial-gradient(ellipse 77.46% 320.85% at 50% 50%, #fa4039 0%, #942622 100%);
  box-shadow:
    0 6px 40px 0 rgba(250, 64, 57, 0.57),
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  font-family: "GTA Art Deco", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  text-decoration: none; /* it's an <a> on this page */
  /* Standalone properties so hover lift, press squish, and the
   * cardAddBtnFlash keyframe compose without fighting `transform`. */
  translate: 0 0;
  scale: 1;
  transition:
    translate 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    scale 0.15s ease,
    filter 0.2s ease,
    box-shadow 0.3s ease;
}

.product-card__btn:hover {
  translate: 0 -3px;
  filter: brightness(1.10) saturate(115%);
  box-shadow:
    0 14px 52px 0 rgba(250, 64, 57, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20);
}

.product-card__btn:active {
  translate: 0 0;
  scale: 0.97;
  filter: brightness(0.95);
  box-shadow:
    0 4px 24px 0 rgba(250, 64, 57, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  transition: translate 0.05s ease, scale 0.05s ease;
}

.product-card__btn svg {
  width: 20px;
  height: 20px;
  /* Standalone props so the hover scale/rotate compose with any
   * future transform rather than stomping on each other. */
  scale: 1;
  rotate: 0deg;
  transition:
    scale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    rotate 0.35s ease;
}

.product-card__btn:hover svg {
  scale: 1.15;
  rotate: -8deg;
}

/* Recoil flash on the button when the toss launches. Same key-
 * frame as on the /products card variant — kept under its own
 * name here so this stylesheet stays self-contained. */
.product-card__btn[data-tossing="true"] {
  animation: cardAddBtnFlash 0.42s ease;
}
@keyframes cardAddBtnFlash {
  0%   { filter: brightness(1)   saturate(100%); }
  30%  { filter: brightness(1.4) saturate(140%); }
  100% { filter: brightness(1)   saturate(100%); }
}

/* Squash-and-stretch played on the card thumbnail when the toss
 * ghost is launched, so the card visibly "flings" the item. */
@keyframes cardImageKick {
  0%   { scale: 1    1;    }
  20%  { scale: 1.04 0.94; }
  50%  { scale: 0.97 1.04; }
  100% { scale: 1    1;    }
}
.product-card__image[data-tossing="true"] {
  animation: cardImageKick 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Flying ghost — fixed-positioned thumbnail clone that travels
 * along an arc to the navbar cart pill. JS sets size/position via
 * getBoundingClientRect and animates the trajectory with the Web
 * Animations API. z-index sits above the navbar so the arc stays
 * visible the whole way. */
.product-toss-ghost {
  position: fixed;
  background-size: cover;
  background-position: center;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.4),
    0 0 60px rgba(250, 64, 57, 0.5),
    inset 0 0 0 2px rgba(255, 255, 255, 0.4);
  pointer-events: none;
  z-index: 2000;
  will-change: transform, opacity, border-radius;
}

.products__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 40px;
}

.products__dot {
  width: 9px;
  height: 9px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  cursor: pointer;
  border: 0;
  padding: 0;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.products__dot--active {
  background: #fa4039;
  box-shadow: 0 0 12px rgba(250, 64, 57, 0.75);
}

/* Reviews Section */
.reviews {
  position: relative;
  padding: 100px 20px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  overflow: visible;
}

.reviews::before {
  content: '';
  position: absolute;
  inset: -70px -40px;
  background: var(--asset-square-pattern) center / cover no-repeat;
  pointer-events: none;
  z-index: 0;
  height: 700px;
  mask-image: radial-gradient(ellipse 52% 58% at 50% 48%, black 0%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse 52% 58% at 50% 48%, black 0%, transparent 82%);
}

.reviews__decor {
  position: absolute;
  top: 50px;
  z-index: 1;
  pointer-events: none;
}

.reviews__decor--left {
  left: 220px;
  rotate: 42deg;
  top: 20px;
  animation: reviewsDecorFloat1 9s ease-in-out infinite;
}

.reviews__decor--right {
  right: 180px;
  width: 180px;
  top: -10px;
  animation: reviewsDecorFloat2 11s ease-in-out infinite;
}
.reviews__decor--right2 {
    rotate: 89deg;
    top: 200px;
    right: 320px;
    width: 140px;
    animation: reviewsDecorFloat3 13s ease-in-out infinite;
}

.reviews__decor-icon {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 60px rgba(250, 63, 57, 0.769));
}

/* Float + slow rotate. Standalone `rotate` / `translate` props
 * animate independently of `transform`, so each decor's existing
 * static rotation seed (42deg / 0deg / 89deg) sits inside the
 * keyframe range. Different durations + phases per variant so the
 * three icosahedrons drift out of sync and the cluster feels alive. */
@keyframes reviewsDecorFloat1 {
    0%, 100% { translate: 0 0;     rotate: 42deg;  }
    50%      { translate: 0 -18px; rotate: 72deg;  }
}
@keyframes reviewsDecorFloat2 {
    0%, 100% { translate: 0 0;     rotate: 0deg;   }
    50%      { translate: 0 -22px; rotate: -28deg; }
}
@keyframes reviewsDecorFloat3 {
    0%, 100% { translate: 0 0;     rotate: 89deg;  }
    50%      { translate: 0 -14px; rotate: 119deg; }
}

@media (prefers-reduced-motion: reduce) {
    .reviews__decor--left,
    .reviews__decor--right,
    .reviews__decor--right2 { animation: none; }
}

.reviews__header {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  max-width: 600px;
}

.reviews__glow {
  position: absolute;
  width: 296px;
  height: 26px;
  top: 74px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border-radius: 9999px;
  filter: blur(75px);
  pointer-events: none;
}

.reviews__dots {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.reviews__dot {
  background: #fa4039;
  border-radius: 5px;
}

.reviews__dot--small {
  width: 20px;
  height: 20px;
  opacity: 0.5;
}

.reviews__dot--large {
  width: 25px;
  height: 25px;
}

.reviews__title {
  margin: 0;
  color: white;
  font-size: 48px;
  font-family: 'GTA Art Deco', sans-serif;
  font-weight: 500;
  line-height: 0.8;
}

.reviews__subtitle {
  margin: 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 20px;
  font-family: 'GTA Art Deco', sans-serif;
  font-weight: 400;
}

.reviews__rating {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.reviews__score {
  color: #fa4039;
  font-size: 32px;
  font-family: 'GTA Art Deco', sans-serif;
  font-weight: 500;
  line-height: 28px;
}

.reviews__stars {
  display: flex;
  align-items: center;
  gap: 10px;
}

.reviews__stars svg {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 0 20px rgba(250, 64, 57, 0.8));
}

.reviews__count {
  margin: 0;
  font-size: 15px;
  font-family: 'GTA Art Deco', sans-serif;
  margin-top: 9px;
  font-weight: 400;
}

.reviews__count--muted {
  color: rgba(255, 255, 255, 0.25);
}

.reviews__count--white {
  color: white;
}

.reviews__carousel {
  position: relative;
  z-index: 2;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.reviews__carousel::-webkit-scrollbar {
  display: none;
}

.reviews__track {
  display: flex;
  gap: 12px;
  padding: 0 76px;
}

.review-card {
  position: relative;
  min-width: 320px;
  max-width: 457px;
  flex: 0 0 calc(25% - 9px);
  padding: 20px;
  background: radial-gradient(ellipse 82.97% 82.97% at 50% 50%, rgba(217, 217, 217, 0.15) 0%, rgba(115, 115, 115, 0) 100%);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.review-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--asset-review-pattern) left center / 45% auto no-repeat;
  opacity: 0.15;
  pointer-events: none;
}

.review-card__orb {
  position: absolute;
  width: 35px;
  height: 202px;
  border-radius: 9999px;
  pointer-events: none;
}

.review-card__orb--red {
  left: -53px;
  top: -37px;
  transform: rotate(-42deg);
  transform-origin: top left;
  background: #ff0800;
  filter: blur(50px);
}

.review-card__orb--white {
  left: -63px;
  top: 43px;
  transform: rotate(-42deg);
  transform-origin: top left;
  background: rgb(255, 255, 255);
  filter: blur(50px);
}

.review-card__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.review-card__top {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.review-card__avatar {
  position: relative;
  z-index: 2;
  width: 45px;
  height: 45px;
  border-radius: 10px;
  object-fit: cover;
}

.review-card__info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.review-card__name {
  margin: 0;
  color: white;
  font-size: 24px;
  font-family: 'GTA Art Deco', sans-serif;
  font-weight: 500;
  line-height: 28px;
}

.review-card__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 16px;
  font-family: 'GTA Art Deco', sans-serif;
  font-weight: 400;
}

.review-card__rating {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.review-card__stars {
  display: flex;
  align-items: center;
  gap: 4px;
}

.review-card__stars svg {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 0 12px rgba(250, 64, 57, 0.8));
}

.review-card__score {
  color: #fa4039;
  font-size: 24px;
  font-family: 'GTA Art Deco', sans-serif;
  font-weight: 500;
  line-height: 28px;
  text-shadow: 0 0 24px rgba(250, 64, 57, 0.72);
}

.review-card__divider {
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.1) 0,
    rgba(255, 255, 255, 0.1) 12px,
    transparent 12px,
    transparent 20px
  );
}

.review-card__footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.review-card__label {
  color: rgba(255, 255, 255, 0.55);
  font-size: 16px;
  font-family: 'GTA Art Deco', sans-serif;
  font-weight: 400;
  line-height: 28px;
}

.review-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.review-card__tag {
  padding: 6px 12px;
  background: rgba(198, 212, 255, 0.1);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 16px;
  font-family: 'GTA Art Deco', sans-serif;
  font-weight: 400;
}

/* Recent Payments */
.recent-payments {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  margin-bottom: 64px;
}

.recent-payments__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.recent-payments__line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.recent-payments__title {
  color: rgba(255, 255, 255, 0.45);
  font-size: 18px;
  font-family: 'GTA Art Deco', sans-serif;
  font-weight: 500;
  line-height: 28px;
  white-space: nowrap;
}

.recent-payments__track-wrapper {
  position: relative;
  width: 100%;
}

.recent-payments__track {
  position: relative;
  width: 100%;
  padding: 12px 16px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.02);
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.recent-payments__track::-webkit-scrollbar { display: none; }
.recent-payments__track.dragging,
.recent-payments__track:active { cursor: grabbing; }
.recent-payments__track.dragging .payment-card { pointer-events: none; }

.recent-payments__mask {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 665% at 50% 50%, transparent 0%, #0f121b 100%);
  pointer-events: none;
  z-index: 2;
}

.recent-payments__orb {
  position: absolute;
  width: 35px;
  height: 202px;
  border-radius: 9999px;
  pointer-events: none;
}

.recent-payments__orb--left-red {
  left: -64px;
  top: -66px;
  transform: rotate(-42deg);
  transform-origin: top left;
  background: #fa4039;
  filter: blur(50px);
}

.recent-payments__orb--left-white {
  left: -74px;
  top: 14px;
  transform: rotate(-42deg);
  transform-origin: top left;
  background: rgba(255, 255, 255, 0.61);
  filter: blur(50px);
}

.recent-payments__orb--right-red {
  right: -64px;
  bottom: -66px;
  transform: rotate(138deg);
  transform-origin: top left;
  background: #fa4039;
  filter: blur(50px);
}

.recent-payments__orb--right-white {
  right: -74px;
  bottom: 14px;
  transform: rotate(138deg);
  transform-origin: top left;
  background: rgba(255, 255, 255, 0.61);
  filter: blur(50px);
}

.payment-card {
  flex-shrink: 0;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 6px;
  outline: 1px solid rgba(255, 255, 255, 0.1);
  outline-offset: -1px;
}

.payment-card__avatar {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
}

.payment-card__info {
  display: flex;
  flex-direction: column;
}

.payment-card__name {
  color: white;
  font-size: 16px;
  font-family: 'GTA Art Deco', sans-serif;
  font-weight: 500;
  line-height: 28px;
}

.payment-card__products {
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  font-family: 'GTA Art Deco', sans-serif;
  font-weight: 400;
}

/* Relative-time line ("3 minutes ago") shown below the package
 * name when Tebex's payment data includes a `time` field. Same
 * font / size as the package line but dimmer. */
.payment-card__time {
  color: rgba(255, 255, 255, 0.30);
  font-size: 11px;
  font-family: 'GTA Art Deco', sans-serif;
  font-weight: 400;
  line-height: 1.2;
}

.payment-card__price {
  color: #fa4039;
  font-size: 16px;
  font-family: 'GTA Art Deco', sans-serif;
  font-weight: 500;
  line-height: 28px;
  white-space: nowrap;
}

/* Why Us Section */
.why-us {
  padding: 80px 96px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.why-us__header {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.why-us__dots {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 20px;
}

.why-us__dot {
  background: #fa4039;
  border-radius: 5px;
}

.why-us__dot--large {
  width: 25px;
  height: 25px;
}

.why-us__dot--medium {
  width: 20px;
  height: 20px;
  opacity: 0.5;
}

.why-us__dot--small {
  width: 15px;
  height: 15px;
  opacity: 0.25;
}

.why-us__header-text {
  display: flex;
  flex-direction: column;
}

.why-us__title {
  margin: 0;
  color: white;
  font-size: 48px;
  font-family: 'GTA Art Deco', sans-serif;
  font-weight: 500;
}

.why-us__subtitle {
  margin: 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 20px;
  font-family: 'GTA Art Deco', sans-serif;
  font-weight: 400;
  max-width: 600px;
}

.why-us__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.why-us__features {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feature-card {
  position: relative;
  padding: 20px;
  background: radial-gradient(ellipse 83% 83% at 50% 50%, rgba(217, 217, 217, 0.15) 0%, rgba(115, 115, 115, 0) 100%);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.feature-card__header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.feature-card__orb {
  position: absolute;
  width: 35px;
  height: 202px;
  border-radius: 9999px;
  pointer-events: none;
}

.feature-card__orb--blue {
  left: -53px;
  top: -37px;
  transform: rotate(-42deg);
  transform-origin: top left;
  background: rgba(198, 212, 255, 0.15);
  filter: blur(50px);
}

.feature-card__orb--white {
  left: -63px;
  top: 43px;
  transform: rotate(-42deg);
  transform-origin: top left;
  background: rgba(255, 255, 255, 0.61);
  filter: blur(50px);
}

.feature-card__icon {
  width: 71px;
  height: 71px;
  padding: 8px;
  background: radial-gradient(ellipse 118% 118% at 50% 50%, rgba(255, 255, 255, 0.15) 0%, rgba(153, 153, 153, 0) 100%);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.feature-card__icon svg {
  width: 32px;
  height: 32px;
}

.feature-card__title {
  margin: 0;
  color: white;
  font-size: 24px;
  font-family: 'GTA Art Deco', sans-serif;
  font-weight: 500;
  line-height: 28px;
}

.feature-card__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 16px;
  font-family: 'GTA Art Deco', sans-serif;
  font-weight: 400;
}

.why-us__visual {
  --faq-pattern-size: 100%;
  --faq-pattern-opacity: 0.3;
  position: relative;
  /* Fully transparent card body — the page's red glow + dark
   * gradient should read straight through. We rely on the
   * orbs / glows / texture / text-img layers below to give the
   * card its visual identity. */
  background: transparent;
  border-radius: 12px;
  overflow: hidden;
}

.why-us__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--asset-faq-pattern) center / auto 100% no-repeat;
  opacity: var(--faq-pattern-opacity);
  pointer-events: none;
  z-index: 1;
}

.why-us__visual-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Barely-there hint of the original FAQ artwork. We want the
   * page's own backdrop (red glow + dark gradient) to drive the
   * card's color, not this image. */
  /* opacity: 0.18; */
  mix-blend-mode: lighten;
}

.why-us__visual-text-img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  height: auto;
  z-index: 2;
}

.why-us__visual-texture-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
  opacity: 0.8;
}

.why-us__visual-border {
    position: absolute;
    left: 20px;
    top: 20px;
    right: 20px;
    bottom: 20px;
    /* Subtle glass outline — was a solid white border with
     * mix-blend-mode: overlay, which on the dark page bg rendered
     * almost pure white. A low-alpha rgba is calmer and reads as
     * a thin frame, not a hard rule. */
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 9px;
    pointer-events: none;
}

.why-us__visual-orb {
  position: absolute;
  border-radius: 9999px;
  pointer-events: none;
}

.why-us__visual-orb--red-bottom {
    width: 96px;
    height: 360px;
    left: 34px;
    bottom: -288px;
    background: #fd2e26;
    filter: blur(155px);
    opacity: 0.5;
}

.why-us__visual-orb--red-top {
  width: 96px;
  height: 360px;
  right: 100px;
  top: -251px;
  background: #be3b37;
  filter: blur(155px);
}

.why-us__visual-faq {
  position: absolute;
  font-size: 237px;
  font-family: 'Monument Extended', sans-serif;
  font-weight: 400;
  color: white;
  mix-blend-mode: overlay;
  pointer-events: none;
  white-space: nowrap;
}

.why-us__visual-faq--left {
  left: -123px;
  top: 546px;
  transform: rotate(-90deg);
  transform-origin: top left;
}

.why-us__visual-faq--right {
  left: auto;
  right: -200px;
  top: 293px;
  transform: rotate(90deg);
  transform-origin: top left;
}

.why-us__visual-glow {
  position: absolute;
  border-radius: 9999px;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.why-us__visual-glow--bottom-center {
  width: 358px;
  height: 61px;
  left: 50%;
  transform: translateX(-50%);
  bottom: -30px;
  background: white;
  filter: blur(74px);
}

.why-us__visual-glow--top-center {
    width: 245px;
    height: 507px;
    left: 37%;
    transform: translateX(-50%);
    top: -425px;
    background: white;
    filter: blur(52px);
    opacity: 0.4;
}

.why-us__visual-glow--mid-left {
  width: 358px;
  height: 61px;
  left: 122px;
  top: 571px;
  background: white;
  filter: blur(74px);
}

.why-us__visual-glow--red-left {
  width: 358px;
  height: 61px;
  left: -89px;
  top: 571px;
  background: #fa4039;
  filter: blur(74px);
}

.why-us__visual-glow--red-top {
  width: 89px;
  height: 201px;
  left: 91px;
  top: -117px;
  transform: rotate(20deg);
  transform-origin: top left;
  background: #fa4039;
  filter: blur(115px);
}

.why-us__visual-glow--red-bottom-right {
  width: 89px;
  height: 201px;
  right: 150px;
  bottom: 50px;
  transform: rotate(20deg);
  transform-origin: top left;
  background: #f1605b;
  filter: blur(115px);
}

.why-us__visual-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 635px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  z-index: 1;
}

.why-us__visual-title {
  font-size: 134px;
  font-family: 'Monument Extended', sans-serif;
  font-weight: 400;
  color: white;
  line-height: 1;
}

.why-us__visual-subtitle {
  font-size: 74px;
  font-family: 'Monument Extended', sans-serif;
  font-weight: 400;
  color: white;
  mix-blend-mode: overlay;
  line-height: 1;
}

.why-us__visual-text {
  margin-top: 20px;
  max-width: 413px;
  color: rgba(255, 255, 255, 0.2);
  font-size: 14px;
  font-family: 'GTA Art Deco', sans-serif;
  font-weight: 400;
}

/* FAQ Section */
.faq {
  /* z-index above the footer's overlap zone (footer.css gives the
   * footer a 260px negative margin-top so its city image fades up
   * into the page above; without our own positive z-index here,
   * the footer's bg layers paint over the FAQ card on the right
   * and cut it off with a visible horizontal seam). */
  position: relative;
  z-index: 1;
  padding: 80px 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

.faq::before {
  content: '';
  position: absolute;
  top: -150px;
  left: 0;
  right: 0;
  height: 555px;
  background: var(--asset-pattern2) center / cover no-repeat;
  opacity: 0.35;
  mask-image: radial-gradient(ellipse 45% 45% at 50% 50%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 45% 45% at 50% 50%, black 0%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}

.faq__header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  z-index: 1;
}

.faq__header-glow {
  position: absolute;
  width: 296px;
  height: 26px;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  background: #fa4039;
  border-radius: 9999px;
  filter: blur(75px);
  pointer-events: none;
}

.faq__dots {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.faq__dot {
  background: #fa4039;
  border-radius: 5px;
}

.faq__dot--small {
  width: 20px;
  height: 20px;
  opacity: 0.5;
}

.faq__dot--large {
  width: 25px;
  height: 25px;
}

.faq__title {
  margin: 0;
  color: white;
  font-size: 48px;
  font-family: 'GTA Art Deco', sans-serif;
  font-weight: 500;
}

.faq__subtitle {
  margin: 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 20px;
  font-family: 'GTA Art Deco', sans-serif;
  font-weight: 400;
  max-width: 600px;
}

.faq__content {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 24px;
  align-items: stretch;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.faq__search {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 8px 0 18px;
  background: rgba(115, 115, 115, 0.05);
  border-radius: 8px;
  outline: 1px solid rgba(255, 255, 255, 0.05);
  outline-offset: -1px;
}

.faq__search-input {
  flex: 1;
  height: 100%;
  background: transparent;
  border: none;
  color: white;
  font-size: 20px;
  font-family: 'GTA Art Deco', sans-serif;
  font-weight: 400;
}

.faq__search-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.faq__search-input:focus {
  outline: none;
}

.faq__search-btn {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(ellipse 159% 159% at 50% 50%, #fa4039 0%, rgba(148, 38, 34, 0) 100%);
  border: none;
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.75);
  cursor: pointer;
}

.faq__items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  position: relative;
  padding: 16px;
  background: radial-gradient(ellipse 50% 9917% at 50% 50%, rgba(115, 115, 115, 0) 0%, rgba(217, 217, 217, 0.1) 100%);
  border-radius: 8px;
  overflow: hidden;
}

.faq-item::before {
  content: '';
  position: absolute;
  width: 60px;
  height: 60px;
  left: -10px;
  top: -15px;
  background: #fa4039;
  border-radius: 9999px;
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
}

.faq-item::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  left: 5px;
  top: 25px;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 9999px;
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
}

.faq-item > * {
  position: relative;
  z-index: 1;
}

.faq-item__header {
  position: static;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.faq-item__header::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 220px;
  height: 220px;
  background: var(--asset-review-pattern) top right / auto 220px no-repeat;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

.faq-item__header:focus-visible {
  outline: 2px solid rgba(250, 64, 57, 0.5);
  outline-offset: 4px;
  border-radius: 4px;
}

.faq-item__icon {
  width: 40px;
  height: 40px;
  padding: 8px;
  background: radial-gradient(ellipse 118% 118% at 50% 50%, rgba(255, 255, 255, 0.15) 0%, rgba(153, 153, 153, 0) 100%);
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.faq-item__title {
  flex: 1;
  color: white;
  font-size: 18px;
  font-family: 'GTA Art Deco', sans-serif;
  font-weight: 400;
  line-height: 28px;
}

.faq-item__chevron {
  color: rgba(255, 255, 255, 0.45);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
  flex-shrink: 0;
}

.faq-item.is-open .faq-item__chevron {
  transform: rotate(180deg);
  color: white;
}

.faq-item__content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.is-open .faq-item__content {
  grid-template-rows: 1fr;
}

.faq-item__content-inner {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.25);
  font-size: 16px;
  font-family: 'GTA Art Deco', sans-serif;
  font-weight: 400;
  line-height: 20px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.35s ease 0.05s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.is-open .faq-item__content-inner {
  opacity: 1;
  transform: translateY(0);
}

.faq-item__content-inner p {
  margin: 16px 0 0 0;
}

/* Footer rules now live in /footer.css (shared across pages). */


@media (max-width: 1120px) {
  .hero-visual {
    width: 50%;
    opacity: 0.6;
  }

  .stats-bar {
    padding: 10px 20px;
    gap: 16px;
  }

  .stats-bar__metrics {
    gap: 20px;
  }

  .stats-bar__dot svg {
    width: 18px;
    height: 18px;
  }

  .stats-bar__divider {
    height: 20px;
  }

  .products__header {
    padding: 0 40px;
    flex-direction: column;
    gap: 24px;
  }

  .products__track {
    padding: 0 40px;
  }

  .product-card {
    flex: 0 0 calc(33.333% - 8px);
  }

  .reviews__decor-icon {
    width: 120px;
  }

  .reviews__track {
    padding: 0 40px;
  }

  .review-card {
    flex: 0 0 calc(33.333% - 8px);
  }

  .why-us {
    padding: 60px 40px;
  }

  .why-us__content {
    grid-template-columns: 1fr;
  }

  .why-us__visual-title {
    font-size: 100px;
  }

  .why-us__visual-subtitle {
    font-size: 50px;
  }

  .why-us__visual-faq {
    font-size: 180px;
  }

  .why-us__visual-content {
    width: 90%;
  }

  .faq {
    padding: 60px 40px;
    gap: 60px;
  }

  .faq__content {
    grid-template-columns: 1fr;
  }

  /* footer media queries moved to /footer.css */
}

@media (max-width: 768px) {
  /* Drop the desktop 100vh floor on mobile — without it, the hero
   * section sizes to content and the next section (featured
   * packages) sits flush below it instead of after a dead zone. */
  .page__hero-section,
  .page__content {
    min-height: 0;
  }
  .page__content {
    /* body { padding-top: var(--announce-h) } already adds the
     * announce-bar height, so this only needs to clear the mobile
     * navbar itself — keep it tight. */
    padding-top: 60px;
  }

  .hero {
    margin-top: 32px;
    padding-left: 0;
    gap: 20px;
  }

  .hero__tag {
    font-size: 16px;
    padding: 8px 10px;
  }

  .hero__tag-icon {
    width: 24px;
    height: 20px;
  }

  .hero__actions {
    width: 100%;
  }

  .hero__btn {
    flex: 1 1 0;
    min-width: 0;
    height: 50px;
    font-size: 16px;
  }

  .hero-visual {
    display: none;
  }

  .stats-bar {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 0;
    gap: 24px;
  }

  .stats-bar__metrics {
    width: 100%;
    flex-wrap: wrap;
    gap: 28px;
  }

  .stats-bar__divider {
    display: none;
  }

  .stats-bar__stat {
    min-width: 100px;
  }

  .stats-bar__dot svg {
    width: 16px;
    height: 16px;
  }

  .stats-bar__label {
    gap: 8px;
  }

  .stats-bar__socials {
    width: 100%;
    justify-content: space-between;
  }

  .products {
    padding: 60px 0 40px;
  }

  .products__header {
    padding: 0 20px;
  }

  .products__header-left {
    gap: 20px;
  }

  .products__decoration {
    display: none;
  }

  .products__track {
    padding: 0 20px;
  }

  .product-card {
    flex: 0 0 calc(50% - 6px);
    min-width: 280px;
  }

  .product-card__title {
    font-size: 20px;
  }

  .product-card__price {
    font-size: 28px;
  }

  .products__view-all {
    width: 100%;
    height: 50px;
    font-size: 16px;
  }

  .reviews {
    padding: 60px 16px 40px;
    gap: 32px;
  }

  .reviews__decor {
    display: none;
  }

  .reviews__title {
    font-size: 32px;
  }

  .reviews__subtitle {
    font-size: 16px;
  }

  .reviews__track {
    padding: 0 16px;
  }

  .review-card {
    flex: 0 0 calc(50% - 6px);
    min-width: 280px;
  }

  .why-us {
    padding: 50px 20px;
    gap: 32px;
  }

  .why-us__header {
    flex-direction: column;
    gap: 20px;
  }

  .why-us__dots {
    flex-direction: row;
    align-items: flex-end;
  }

  .why-us__title {
    font-size: 32px;
  }

  .why-us__subtitle {
    font-size: 16px;
  }


  .feature-card__title {
    font-size: 20px;
  }

  .feature-card__text {
    font-size: 14px;
  }

  .why-us__visual-title {
    font-size: 60px;
  }

  .why-us__visual-subtitle {
    font-size: 32px;
  }

  .why-us__visual-faq {
    font-size: 120px;
  }

  .why-us__visual-text {
    font-size: 12px;
    max-width: 300px;
  }

  .why-us__visual-border {
    left: 10px;
    top: 10px;
    right: 10px;
    bottom: 10px;
  }

  .review-card__name {
    font-size: 20px;
  }

  .review-card__text {
    font-size: 14px;
  }

  .payment-card__info {
    gap: 4px;
  }

  .payment-card__name {
    font-size: 14px;
    line-height: 1.2;
  }

  .payment-card__products {
    font-size: 11px;
  }

  .payment-card__price {
    font-size: 14px;
  }

  .faq {
    padding: 40px 24px;
    gap: 40px;
  }

  .faq__title {
    font-size: 36px;
  }

  .faq__subtitle {
    font-size: 16px;
  }

  .faq__search-input {
    font-size: 16px;
  }

  .faq-item__title {
    font-size: 16px;
    line-height: 24px;
  }

  /* footer media queries moved to /footer.css */
}

@media (max-width: 480px) {
  .page__content {
    padding-top: 56px;
  }

  .hero {
    margin-top: 24px;
    padding-left: 0;
    gap: 16px;
  }

  .hero__content {
    gap: 8px;
  }

  .hero__actions {
    flex-direction: column;
    gap: 12px;
  }

  .hero__btn {
    width: 100%;
    height: 48px;
    font-size: 15px;
  }

  .stats-bar {
    margin-top: 32px;
    padding: 20px 0;
  }

  .stats-bar__value {
    font-size: 28px;
    margin-bottom: 6px;
  }

  .stats-bar__label {
    font-size: 14px;
  }

  .stats-bar__social {
    width: 36px;
    height: 36px;
  }

  .stats-bar__social svg {
    width: 16px;
    height: 16px;
  }

  .stats-bar__social-line {
    width: 8px;
  }

  .stats-bar__socials-label {
    font-size: 12px;
  }

  .products {
    padding: 40px 0 30px;
  }

  .products__header {
    margin-bottom: 24px;
  }

  .products__header-text {
    gap: 0;
  }

  .product-card {
    flex: 0 0 85%;
    min-width: 260px;
  }

  .product-card__image {
    height: 160px;
  }

  .product-card__body {
    gap: 16px;
    margin-top: 16px;
  }

  .product-card__title {
    font-size: 18px;
  }

  .product-card__tag {
    font-size: 14px;
    padding: 4px 10px;
  }

  .product-card__footer {
    gap: 16px;
    margin-top: 16px;
  }

  .product-card__price {
    font-size: 24px;
  }

  .product-card__btn {
    height: 48px;
    font-size: 16px;
  }

  .products__pagination {
    margin-top: 24px;
  }

  .reviews {
    padding: 40px 12px 30px;
    gap: 24px;
  }

  .reviews__title {
    font-size: 24px;
  }

  .reviews__subtitle {
    font-size: 14px;
  }

  .reviews__score {
    font-size: 28px;
  }

  .reviews__stars svg {
    width: 40px;
    height: 40px;
  }

  .reviews__track {
    padding: 0 12px;
  }

  .review-card {
    flex: 0 0 85%;
    min-width: 260px;
  }

  .why-us {
    padding: 40px 16px;
  }

  .why-us__title {
    font-size: 24px;
  }

  .why-us__subtitle {
    font-size: 14px;
  }


  .feature-card__icon {
    width: 56px;
    height: 56px;
  }

  .feature-card__title {
    font-size: 18px;
  }

  .why-us__visual-title {
    font-size: 40px;
  }

  .why-us__visual-subtitle {
    font-size: 22px;
  }

  .why-us__visual-faq {
    font-size: 80px;
  }

  .why-us__visual-text {
    font-size: 11px;
    max-width: 250px;
  }

  .why-us__visual-glow,
  .why-us__visual-orb {
    display: none;
  }

  .review-card__name {
    font-size: 18px;
  }

  .recent-payments__header {
    padding: 0 12px;
  }

  .recent-payments__title {
    font-size: 14px;
  }

  .recent-payments__track {
    padding: 12px;
  }

  .faq {
    padding: 32px 16px;
    gap: 32px;
  }

  .faq__title {
    font-size: 28px;
  }

  .faq__subtitle {
    font-size: 14px;
  }

  .faq__search {
    height: 48px;
    padding: 0 6px 0 12px;
  }

  .faq__search-input {
    font-size: 14px;
  }

  .faq__search-btn {
    width: 36px;
    height: 36px;
  }

  .faq-item {
    padding: 12px;
  }

  .faq-item__icon {
    width: 32px;
    height: 32px;
    padding: 6px;
  }

  .faq-item__icon svg {
    width: 16px;
    height: 16px;
  }

  .faq-item__title {
    font-size: 14px;
    line-height: 20px;
  }

  .faq-item__content {
    font-size: 14px;
    line-height: 18px;
  }

  /* footer media queries moved to /footer.css */
}

/* Announcement-bar styles moved to /announce.css so every page
 * picks them up via layout.html (styles.css only loads on the
 * homepage). */