/* ============================================================
   COMPUTEX — GPU Technology & High-Performance Computing
   Custom brand overrides for the Computex GPU platform
   ============================================================ */

/* ---- Brand accent color: electric green (GPU/tech feel) ---- */
:root {
  --additional: #00e676;
  --additional-hover: #00c853;
}

/* ---- Project preview images (pinned scroll section) ---- */
.preview-image-1 {
  background-image: url(../img/gpu/gpu-hero.jpg);
  background-size: cover;
  background-position: center;
}
.preview-image-2 {
  background-image: url(../img/gpu/data-center.jpg);
  background-size: cover;
  background-position: center;
}
.preview-image-3 {
  background-image: url(../img/gpu/circuit-board.jpg);
  background-size: cover;
  background-position: center;
}
.preview-image-4 {
  background-image: url(../img/gpu/gpu-card.jpg);
  background-size: cover;
  background-position: center;
}
.preview-image-5 {
  background-image: url(../img/gpu/ai-chip.jpg);
  background-size: cover;
  background-position: center;
}

/* ---- Parallax divider images ---- */
.divider-image-4 {
  background-image: url(../img/gpu/server-room.jpg);
  background-size: cover;
  background-position: center;
}
.divider-image-5 {
  background-image: url(../img/gpu/gpu-wide.jpg);
  background-size: cover;
  background-position: center;
}

/* ---- Blog preview images ---- */
.blog-preview-image-1 {
  background-image: url(../img/gpu/gpu-cluster.jpg);
  background-size: cover;
  background-position: center;
}
.blog-preview-image-2 {
  background-image: url(../img/gpu/ai-chip.jpg);
  background-size: cover;
  background-position: center;
}
.blog-preview-image-3 {
  background-image: url(../img/gpu/tech-dark.jpg);
  background-size: cover;
  background-position: center;
}

/* ---- CTA promo background ---- */
.mxd-promo__bg {
  background-image: url(../img/gpu/gpu-wide.jpg);
  background-size: cover;
  background-position: center;
}

/* ---- Stats cards images ---- */
.mxd-stats-cards-image-1 img,
.mxd-stats-cards-image-2 img,
.mxd-stats-cards-image-3 img,
.mxd-stats-cards-image-4 img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* ---- Tech stack badge images ---- */
.mxd-tech-stack-cards__icon img {
  height: 40px;
  width: auto;
  object-fit: contain;
  filter: brightness(1.1);
}

/* ---- Loader: Computex brand dark ---- */
.loader {
  background-color: #0a0a0a;
}
.count__text,
.count__percent {
  color: #00e676;
}

/* ---- Logo text: uppercase tracking for brand feel ---- */
.mxd-logo__text {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ---- Hero headline: tighter tracking for tech brand ---- */
.hero-06-headline__title {
  letter-spacing: -0.02em;
}

/* ---- Capabilities list: hover accent ---- */
.mxd-cpb-list__item:hover .mxd-cpb-list__title {
  color: var(--additional);
  transition: color 0.25s ease;
}

/* ---- Stats counter numbers: accent color ---- */
.mxd-stats-number {
  color: var(--additional) !important;
}

/* ---- Footer: GPU brand dark bg ---- */
.mxd-footer {
  background-color: #0d0d0d;
}

/* ---- Accent button: GPU green ---- */
.btn-accent {
  background-color: var(--additional);
  border-color: var(--additional);
  color: #000;
}
.btn-accent:hover {
  background-color: var(--additional-hover);
  border-color: var(--additional-hover);
}

/* ---- Tag pills: GPU green tint ---- */
.tag-permanent {
  border-color: rgba(0, 230, 118, 0.35);
  color: rgba(0, 230, 118, 0.85);
}

/* ---- Rotating CTA button image ---- */
.btn-rotating__image {
  border-radius: 50%;
  object-fit: cover;
}

/* ---- Hero mark badge: GPU green dot ---- */
.mxd-hero__mark .mark-icon {
  background-color: var(--additional);
  box-shadow: 0 0 8px var(--additional);
}

/* ---- Section dividers: green glow on hover ---- */
.mxd-res-list__divider {
  transition: background-color 0.2s ease;
}
.mxd-res-list__item:hover .mxd-res-list__divider {
  background-color: var(--additional);
  opacity: 0.5;
}

/* ---- Blog preview hover overlay ---- */
.mxd-preview-hover {
  background: rgba(0, 230, 118, 0.08);
}

/* ---- Scrollbar: brand styling ---- */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
  background: var(--additional);
  border-radius: 2px;
}