/* Kurex monochrome brand overrides */
:root {
  --bg: #080808;
  --bg-2: #0d0d0d;
  --bg-3: #141414;
  --primary: #d4d4d4;
  --primary-hover: #f5f5f5;
  --primary-rgb: 212, 212, 212;
  --primary-2: #8a8a8a;
  --primary-glow: rgba(212, 212, 212, 0.2);
  --primary-soft: rgba(212, 212, 212, 0.1);
  --link: #d4d4d4;
  --link-hover: #ffffff;
  --gradient: linear-gradient(135deg, #ffffff 0%, #d4d4d4 52%, #8a8a8a 100%);
  --gradient-text: linear-gradient(135deg, #ffffff 0%, #d4d4d4 55%, #8a8a8a 100%);
  --gradient-soft: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(163, 163, 163, 0.07));
}

a.kki95,
nav span.kki95 {
  color: #0b0b0b;
}

nav span.kki95 {
  background-color: #d4d4d4;
}

.lecg1::after {
  text-shadow: -1px 0 #737373;
}

.btn-primary {
  color: #0b0b0b;
}

/* Homepage accent palette: restore the source design's medium blue. */
[x-data="home"] {
  --primary: #00a4f0;
  --primary-hover: #0087d4;
  --primary-rgb: 0, 164, 240;
  --primary-2: #006bab;
  --primary-glow: rgba(0, 164, 240, 0.28);
  --primary-soft: rgba(0, 164, 240, 0.12);
  --link: #00a4f0;
  --link-hover: #2cc1ff;
  --gradient: linear-gradient(135deg, #75d5ff 0%, #00a4f0 52%, #006bab 100%);
  --gradient-text: linear-gradient(135deg, #75d5ff 0%, #00a4f0 55%, #006bab 100%);
  --gradient-soft: linear-gradient(135deg, rgba(44, 193, 255, 0.18), rgba(0, 107, 171, 0.08));
}

.page-products,
.page-pdp {
  --primary: #00a4f0;
  --primary-hover: #0087d4;
  --primary-rgb: 0, 164, 240;
  --primary-2: #006bab;
  --primary-glow: rgba(0, 164, 240, 0.28);
  --primary-soft: rgba(0, 164, 240, 0.12);
  --link: #00a4f0;
  --link-hover: #2cc1ff;
  --gradient: linear-gradient(135deg, #75d5ff 0%, #00a4f0 52%, #006bab 100%);
  --gradient-text: linear-gradient(135deg, #75d5ff 0%, #00a4f0 55%, #006bab 100%);
  --gradient-soft: linear-gradient(135deg, rgba(44, 193, 255, 0.18), rgba(0, 107, 171, 0.08));
}

[x-data="home"] .kki95 {
  background-color: #00a4f0;
}

[x-data="home"] .yokld,
[x-data="home"] .dqooc svg {
  color: #00a4f0;
}

[x-data="home"] .fuz1g {
  border-color: #00a4f0;
}

[x-data="home"] .sl9qy {
  background-color: rgba(138, 138, 138, 0.35);
}

[x-data="home"] .q8hq7 {
  --tw-gradient-from: #00a4f0 var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(0, 164, 240, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

[x-data="home"] .lecg1::after {
  color: #00a4f0;
  text-shadow: -1px 0 #006bab;
}

[x-data="home"] .w4b29:hover,
[x-data="home"] .jj9cz:hover {
  background-color: #0087d4;
}

[x-data="home"] .q0vkc:hover,
[x-data="home"] .ptn19:focus {
  border-color: #00a4f0;
}

[x-data="home"] .e2o9g:hover {
  background-color: #00a4f0;
}

/* Give the hero Discord action enough contrast against the dark background. */
[x-data="home"] a[href*="discord.com/invite/"] {
  color: #ffffff;
  background-color: #5865f2;
  box-shadow: 0 8px 24px rgba(88, 101, 242, 0.28);
}

[x-data="home"] a[href*="discord.com/invite/"]:hover {
  background-color: #4752c4;
  box-shadow: 0 10px 28px rgba(88, 101, 242, 0.38);
}

/* Keep the foreground KMBOX NET card above the overlapping MAKCU stack. */
[x-data="home"] .wtyq1.s5b2e:has(> .nyobh img[src$="kmbox-net.webp"]) {
  position: relative;
  z-index: 2;
}

[x-data="home"] .qbon9:has(img[src$="/makcu.png"]) {
  z-index: 1;
}

[x-data="home"] .qvl2l:hover,
[x-data="home"] .m4jx5:hover .lltll {
  color: #00a4f0;
}

/* Match the source homepage's layered Unique Features composition. */
.kurex-feature-stage {
  aspect-ratio: 719 / 466;
}

.kurex-feature-backdrop {
  opacity: 0.55;
  filter: none;
}

.kurex-feature-backdrop:hover {
  opacity: 1;
}

.kurex-feature-backdrop,
.ui-swiper .swiper-slide > div {
  background-color: #005a8d;
}

.ui-swiper .swiper-wrapper,
.ui-swiper .swiper-slide,
.ui-swiper .swiper-slide > div {
  height: 100%;
}

.ui-swiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #080808;
}

@media (min-width: 1024px) {
  .kurex-feature-stage {
    width: 452px;
    height: auto;
    max-width: 452px;
    max-height: none;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .kurex-feature-foreground {
    right: -8rem;
  }

  .kurex-feature-stage {
    width: 420px;
    height: auto;
    max-height: none;
  }
}