:root {
  --vx:        #9b4ff0;
  --vx-bright: #b865f7;
  --vx-dark:   #5b21b6;
  --vx-deep:   #2e1065;
  --vx-soft:   rgba(155, 79, 240, 0.13);
  --vx-glow:   rgba(155, 79, 240, 0.30);
}

::selection { background: var(--vx); color: var(--white); }

.eyebrow { color: var(--vx-bright); }
.eyebrow::before {
  background: var(--vx);
  box-shadow: 2px 2px 0 var(--vx-deep);
}

#skip-navigation-link { background: var(--vx); }

.loading-bar__fill {
  background-color: var(--vx);
  background-image: linear-gradient(90deg, var(--red), #d44aaa 50%, var(--vx));
}

/* Tint the header's shadow lip from CrabSMP red over to Verixen purple. */
#site-header::after {
  background-image: linear-gradient(180deg, rgba(155, 79, 240, 0.55), rgba(0, 0, 0, 0.65));
}

#site-header nav ul li > a:not(.header-cta).active {
  background: rgba(155, 79, 240, 0.12);
}
/* The marker under the current page is a ::after in main.css, not an inset
   shadow, so recolour that — otherwise this page shows a crab-red underline
   on a purple header. */
#site-header nav ul li > a:not(.header-cta)::after { background: var(--vx); }

@media (max-width: 1000px) {
  #site-header nav ul li > a:not(.header-cta).active {
    box-shadow: var(--bevel);
  }
}

.footer-link i { color: var(--vx-bright); }

/* Swap the separator's crab-red block for a Verixen one. */
.mc-sep span:nth-child(1) {
  background-image: none;
  background-color: var(--vx-dark);
}

.hero-section::after {
  background-color: var(--vx-deep);
  background-image: none;
  box-shadow: inset 0 2px 0 rgba(184, 101, 247, 0.35);
}

.vx-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.vx-hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../media/assets/background.jpg') center / cover no-repeat;
  filter: saturate(0.5) brightness(0.76) contrast(1.05);
  /* The over-scale and the parallax transform both live on the shared hero
     backdrop rule in main.css; setting one here would replace it. */
}

.vx-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, var(--vx-glow), transparent 70%),
    radial-gradient(ellipse 55% 45% at 85% 100%, rgba(91, 33, 182, 0.22), transparent 70%),
    linear-gradient(180deg, rgba(16, 15, 18, 0.18) 0%, rgba(16, 15, 18, 0.42) 60%, var(--bg) 100%);
}

.vx-hero-logo {
  width: clamp(240px, 36vw, 420px);
  height: auto;
  filter: drop-shadow(0 12px 30px var(--vx-glow));
}

.vx-hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}

.vx-stat {
  background-color: var(--panel);
  background-image:
    linear-gradient(rgba(34, 35, 41, 0.92), rgba(26, 27, 32, 0.95)),
    var(--tex-stone);
  background-size: auto, 32px 32px;
  image-rendering: pixelated;
  border: var(--border);
  border-top: 4px solid var(--vx);
  box-shadow: var(--shadow-card);
  padding: 18px 28px;
  min-width: 110px;
  text-align: center;
}

.vx-stat__value {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.72rem;
  line-height: 1.1;
  color: var(--vx-bright);
  letter-spacing: 1px;
}

.vx-stat__label {
  display: block;
  font-family: var(--font-ui);
  text-shadow: var(--txt-shadow-sm);
  font-size: 14px;
  color: var(--text-dim);
  margin-top: 6px;
  letter-spacing: 0.5px;
}

.vx-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  max-width: var(--shell);
  margin-inline: auto;
}

.vx-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 26px;
  background-color: var(--panel);
  background-image:
    linear-gradient(rgba(34, 35, 41, 0.92), rgba(26, 27, 32, 0.95)),
    var(--tex-stone);
  background-size: auto, 32px 32px;
  image-rendering: pixelated;
  border: var(--border);
  border-top: 4px solid var(--vx);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-move) var(--ease), box-shadow var(--dur-move) var(--ease), border-color var(--dur-move) var(--ease);
}

.vx-card:hover {
  transform: translateY(-6px);
  border-color: var(--vx-dark);
  box-shadow: var(--shadow-pop);
}

.vx-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  text-shadow: var(--txt-shadow-sm);
  font-size: 18px;
  line-height: 1.25;
  color: var(--white);
  letter-spacing: 0.5px;
}

.vx-card-text {
  font-size: 0.97rem;
  color: var(--text-dim);
  line-height: 1.7;
}

.chip--vx {
  color: #d8bdf9;
  background: var(--vx-soft);
  border-color: var(--vx-dark);
}

.vx-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  max-width: var(--shell);
  margin-inline: auto;
}

.vx-feature-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 30px 28px;
  background-color: var(--panel);
  background-image:
    linear-gradient(rgba(34, 35, 41, 0.92), rgba(26, 27, 32, 0.95)),
    var(--tex-stone);
  background-size: auto, 32px 32px;
  image-rendering: pixelated;
  border: var(--border);
  border-top: 4px solid var(--vx);
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: transform var(--dur-move) var(--ease), box-shadow var(--dur-move) var(--ease), border-color var(--dur-move) var(--ease);
}

.vx-feature-box:hover {
  transform: translateY(-6px);
  border-color: var(--vx-dark);
  box-shadow: var(--shadow-pop);
}

.vx-feature-box h3 {
  font-family: var(--font-ui);
  text-shadow: var(--txt-shadow-sm);
  font-size: 18px;
  line-height: 1.25;
  color: var(--white);
  letter-spacing: 0.5px;
}

.vx-feature-box p {
  font-size: 0.97rem;
  color: var(--text-dim);
  line-height: 1.7;
}

.vx-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  max-width: var(--shell);
  margin: clamp(40px, 6vw, 66px) auto 0;
}

.vx-shot {
  background-color: var(--panel);
  background-image:
    linear-gradient(rgba(34, 35, 41, 0.92), rgba(26, 27, 32, 0.95)),
    var(--tex-stone);
  background-size: auto, 32px 32px;
  image-rendering: pixelated;
  border: var(--border);
  border-top: 4px solid var(--vx);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-move) var(--ease), box-shadow var(--dur-move) var(--ease);
}

.vx-shot:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-pop);
}

.vx-shot > img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.vx-shot figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  font-family: var(--font-ui);
  text-shadow: var(--txt-shadow-sm);
  font-size: 14px;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  border-top: 2px solid var(--black);
}

.vx-price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  max-width: 760px;
  margin-inline: auto;
}

.vx-price-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 28px;
  background-color: var(--panel);
  background-image:
    linear-gradient(rgba(34, 35, 41, 0.92), rgba(26, 27, 32, 0.95)),
    var(--tex-stone);
  background-size: auto, 32px 32px;
  image-rendering: pixelated;
  border: var(--border);
  border-top: 4px solid var(--vx);
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: transform var(--dur-move) var(--ease), box-shadow var(--dur-move) var(--ease);
}

.vx-price-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-pop);
}

.vx-price-card--pro {
  border-top-color: var(--vx-bright);
  background: linear-gradient(180deg, var(--vx-soft), transparent 45%) var(--panel);
}

.vx-price-card > .mc-ico { margin-inline: auto; }

.vx-price-name {
  font-family: var(--font-ui);
  text-shadow: var(--txt-shadow-sm);
  font-size: 20px;
  color: var(--white);
  letter-spacing: 0.5px;
}

.vx-price-value {
  font-family: var(--font-mono);
  font-size: 2.03rem;
  line-height: 1;
  color: var(--vx-bright);
  letter-spacing: 1px;
}

.vx-price-per {
  font-size: 1.2rem;
  color: var(--text-dim);
}

.vx-price-card ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.vx-price-card li {
  font-size: 0.95rem;
  color: var(--text-dim);
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  line-height: 1.65;
}

.vx-price-card li:last-child { border-bottom: none; }

.vx-price-card .mc-btn { margin-top: auto; }

.vx-price-note {
  max-width: 620px;
  margin: 28px auto 0;
  font-size: 0.97rem;
  color: var(--text-dim);
  line-height: 1.7;
  text-align: center;
}

/* Re-skin the nine-slice buttons to Verixen purple. */
.mc-btn:not(.mc-btn--ghost),
.header-cta {
  --btn-face:       url('../media/ui/buttons/purple/unchecked.png');
  --btn-face-hover: url('../media/ui/buttons/purple/unchecked_hover.png');
  --btn-face-down:  url('../media/ui/buttons/purple/default.png');
}

.vx-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.vx-cta-logo {
  width: clamp(180px, 24vw, 260px);
  height: auto;
  filter: drop-shadow(0 8px 20px var(--vx-glow));
}

.vx-cta-text {
  font-size: 1.08rem;
  color: var(--text-dim);
  line-height: 1.8;
  max-width: 560px;
}

.vx-cta-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

@media (max-width: 720px) {
  .vx-card-grid    { grid-template-columns: 1fr; }
  .vx-feature-grid { grid-template-columns: 1fr; }
  .vx-price-grid   { grid-template-columns: 1fr; }

  .vx-stat {
    padding: 14px 20px;
    min-width: 90px;
  }
  .vx-stat__value { font-size: 1.7rem; }
}

@media (max-width: 480px) {
  .vx-hero-stats {
    flex-direction: column;
    align-items: center;
  }
  .vx-stat {
    width: 100%;
    max-width: 200px;
  }
  .vx-price-card { padding: 24px 20px; }
}