/* PlayNux — retro neon palette inspired by the official concept art */
:root,
:root:not([data-theme="light"]) {
  color-scheme: dark;
  --blue: #00d9ff;
  --blue-dark: #6d28d9;
  --cyan: #20e7ff;
  --cyan-light: #78f5ff;
  --magenta: #f20cc8;
  --purple: #7c3aed;
  --orange: #ff9f1c;
  --dark: #f7f9ff;
  --dark-800: #e6ebff;
  --dark-700: #c8d0ea;
  --dark-600: #98a4c7;
  --gray: #94a1c2;
  --gray-light: #c7d0ea;
  --gray-200: #28375e;
  --gray-100: #111831;
  --light: #05081a;
  --white: #f8faff;
  --success: #23e7a6;
  --warning: #ffad1f;
  --danger: #ff2cbf;
  --panel: #0c1329;
  --panel-high: #121c39;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.22);
  --shadow: 0 12px 30px rgba(0,0,0,.28);
  --shadow-md: 0 18px 45px rgba(0,0,0,.34);
  --shadow-lg: 0 28px 70px rgba(0,0,0,.42);
  --shadow-glow: 0 0 0 1px rgba(32,231,255,.18), 0 16px 40px rgba(0,217,255,.12), 0 0 34px rgba(242,12,200,.08);
}

html { background: #05081a; }
body {
  color: var(--dark);
  background-color: var(--light);
  background-image:
    radial-gradient(circle at 8% 12%, rgba(0,217,255,.09), transparent 28rem),
    radial-gradient(circle at 92% 28%, rgba(242,12,200,.08), transparent 30rem),
    radial-gradient(circle at 19px 31px, rgba(255,255,255,.18) 0 1px, transparent 1.5px),
    radial-gradient(circle at 73px 91px, rgba(32,231,255,.18) 0 1px, transparent 1.5px);
  background-size: auto, auto, 173px 137px, 251px 211px;
  background-attachment: fixed;
}
::selection { color: #06101e; background: var(--cyan); }
.circuit-bg::before {
  opacity: .3;
  background-image:
    radial-gradient(circle at 17px 23px, rgba(255,255,255,.28) 0 1px, transparent 1.5px),
    radial-gradient(circle at 91px 61px, rgba(32,231,255,.24) 0 1px, transparent 1.5px),
    radial-gradient(circle at 47px 109px, rgba(242,12,200,.2) 0 1px, transparent 1.5px);
  background-size: 149px 127px, 211px 173px, 263px 229px;
}

/* Temporary partner preview gate */
.site-locked .site-private { display: none !important; }
.site-unlocked .site-gate { display: none !important; }
.site-locked body { min-height: 100svh; }
.site-locked .hero { min-height: calc(100svh - var(--header-h)); }
.site-gate {
  width: min(100%, 240px);
  margin-top: 1.75rem;
}
.site-gate__label {
  margin-bottom: .65rem;
  color: var(--gray-light);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.site-gate__label i { margin-right: .35rem; color: var(--cyan); }
.site-gate__form { display: block; }
.site-gate__form input {
  width: 100%;
  min-width: 0;
  padding: .78rem 1rem;
  color: #fff;
  background: rgba(3,7,22,.78);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  outline: none;
  font: 600 1rem var(--font-body);
  letter-spacing: .18em;
  transition: var(--transition);
}
.site-gate__form input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,217,255,.1), 0 0 18px rgba(0,217,255,.08); }
.site-gate__form input[aria-invalid="true"] { border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(242,12,200,.09); }
.site-gate__message { margin-top: .55rem; color: var(--gray); font-size: .72rem; }
.site-gate__form.is-error { animation: gate-shake .32s ease-in-out; }
@keyframes gate-shake { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

/* Navigation */
.header {
  background: rgba(5,8,26,.86);
  border-bottom-color: rgba(32,231,255,.18);
  box-shadow: 0 8px 30px rgba(0,0,0,.26);
}
.header::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 4%, var(--cyan), var(--purple), var(--magenta), transparent 96%);
  opacity: .72;
}
.logo__wordmark { filter: drop-shadow(0 0 9px rgba(0,217,255,.2)) drop-shadow(0 0 13px rgba(242,12,200,.11)); }
.logo:hover .logo__wordmark { filter: drop-shadow(0 0 11px rgba(0,217,255,.34)) drop-shadow(0 0 17px rgba(242,12,200,.2)); }
.nav__link { color: var(--dark-700); }
.nav__link:hover,
.nav__link.active {
  color: var(--cyan-light);
  background: linear-gradient(135deg, rgba(0,217,255,.12), rgba(124,58,237,.12));
  box-shadow: inset 0 0 0 1px rgba(32,231,255,.12);
}
.btn-icon { color: var(--dark-700); }
.btn-icon:hover { color: var(--cyan); background: rgba(0,217,255,.1); box-shadow: 0 0 18px rgba(0,217,255,.13); }
.btn-icon .badge { color: #fff; background: linear-gradient(135deg, var(--magenta), var(--purple)); box-shadow: 0 0 12px rgba(242,12,200,.42); }
.burger span { background: var(--cyan-light); }

/* Buttons */
.btn--primary {
  color: #fff;
  background: linear-gradient(120deg, #00bdeb 0%, #3478ff 45%, #8b36e8 100%);
  box-shadow: 0 8px 24px rgba(0,189,235,.2), 0 0 20px rgba(139,54,232,.12);
}
.btn--primary:hover {
  color: #fff;
  background: linear-gradient(120deg, #22e7ff, #476cff 46%, #f20cc8);
  box-shadow: 0 12px 30px rgba(0,217,255,.28), 0 0 26px rgba(242,12,200,.18);
}
.btn--outline { color: var(--cyan); border-color: rgba(32,231,255,.58); background: rgba(0,217,255,.035); }
.btn--outline:hover { color: #07101f; border-color: var(--cyan); background: var(--cyan); box-shadow: 0 0 24px rgba(32,231,255,.28); }
.btn--cyan { color: #fff; background: linear-gradient(120deg, #00c7ea, #6838e8 55%, #e80cc8); box-shadow: 0 8px 26px rgba(124,58,237,.24); }
.btn--cyan:hover { background: linear-gradient(120deg, #21e8ff, #7948f4 55%, #ff28d2); box-shadow: 0 12px 32px rgba(242,12,200,.22); }

/* Hero and internal page headers */
.hero {
  background-image:
    linear-gradient(90deg, rgba(3,5,22,.82) 0%, rgba(4,6,25,.55) 42%, rgba(4,6,25,.12) 72%, rgba(4,6,25,.2) 100%),
    linear-gradient(0deg, rgba(4,4,24,.2), transparent 42%),
    url('../img/hero-retro-city-playnux.webp');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  border-bottom: 1px solid rgba(124,58,237,.28);
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: none;
  background: linear-gradient(to top, rgba(3,4,20,.26), transparent 42%);
  pointer-events: none;
}
.hero__grid-lines {
  opacity: .34;
  background-image:
    radial-gradient(circle at 23px 29px, rgba(255,255,255,.5) 0 1px, transparent 1.6px),
    radial-gradient(circle at 97px 67px, rgba(32,231,255,.42) 0 1px, transparent 1.7px),
    radial-gradient(circle at 61px 117px, rgba(242,12,200,.32) 0 1px, transparent 1.6px);
  background-size: 173px 137px, 239px 191px, 307px 251px;
}
.hero__glow { background: radial-gradient(circle, rgba(0,217,255,.2), rgba(124,58,237,.09) 38%, transparent 70%); }
.hero__badge { color: var(--cyan-light); background: rgba(0,217,255,.08); border-color: rgba(0,217,255,.35); box-shadow: 0 0 25px rgba(0,217,255,.09); }
.hero__title { color: #fff; text-shadow: 0 8px 35px rgba(0,0,0,.42); }
.hero__title span {
  color: transparent;
  background: linear-gradient(90deg, var(--cyan), #7384ff, var(--magenta));
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
}
.hero__image img { filter: drop-shadow(0 24px 38px rgba(0,0,0,.45)) drop-shadow(0 0 28px rgba(0,217,255,.12)); }
.hero__image { right: 0; width: clamp(300px, 32vw, 470px); }
.hero__content .hero__desc { max-width: 590px; margin-bottom: 0; }
.promo,
.page-hero,
.product-final-cta {
  background: radial-gradient(circle at 82% 24%, rgba(0,217,255,.16), transparent 24rem), radial-gradient(circle at 18% 90%, rgba(242,12,200,.15), transparent 28rem), linear-gradient(135deg, #05071c, #101039 58%, #18072d);
  border: 1px solid rgba(32,231,255,.16);
  box-shadow: 0 22px 55px rgba(0,0,0,.27), inset 0 1px rgba(255,255,255,.025);
}
.promo__title,
.page-hero__title,
.product-final-cta strong { color: #fff; }
.promo__glow { background: radial-gradient(circle, rgba(242,12,200,.2), transparent 70%); }
.page-hero__breadcrumb a { color: var(--cyan); }

/* Sections and reusable surfaces */
.section--gray { background: rgba(10,15,37,.74); border-block: 1px solid rgba(40,55,94,.38); }
.section__tag { color: var(--cyan); text-shadow: 0 0 13px rgba(0,217,255,.22); }
.section__tag::before { background: linear-gradient(90deg, var(--cyan), var(--magenta)); box-shadow: 0 0 10px rgba(0,217,255,.3); }
.section__title { color: #f8faff; letter-spacing: -.025em; }
.section__subtitle { color: var(--gray); }

.category-card,
.product-card,
.feature-card,
.filter-tab,
.stat-item,
.team-card,
.contact-info-card,
.form-group input,
.form-group select,
.form-group textarea,
.newsletter input,
.product-breadcrumb,
.product-gallery__zoom,
.product-gallery__thumb,
.product-purchase,
.quantity-control,
.shipping-calculator input,
.product-section-nav,
.product-benefit,
.product-social-card,
.product-specs__group,
.included-card,
.product-video-guide__card,
.review-score { background-color: var(--panel); }

.category-card,
.product-card,
.feature-card,
.stat-item,
.team-card,
.contact-info-card,
.product-purchase,
.product-benefit,
.product-social-card,
.product-specs__group,
.included-card,
.product-video-guide__card,
.review-score {
  background-image: linear-gradient(145deg, rgba(18,28,57,.96), rgba(8,14,34,.98));
  border-color: var(--gray-200);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 10px 30px rgba(0,0,0,.16);
}
.category-card::before { height: 2px; background: linear-gradient(90deg, var(--cyan), var(--purple), var(--magenta)); }
.category-card:hover,
.product-card:hover,
.feature-card:hover,
.team-card:hover,
.contact-info-card:hover { border-color: rgba(32,231,255,.44); box-shadow: var(--shadow-glow); }
.category-card__icon,
.feature-card__icon,
.contact-info-card__icon,
.product-benefit > i { color: var(--cyan); background: linear-gradient(135deg, rgba(0,217,255,.11), rgba(124,58,237,.13)); border: 1px solid rgba(32,231,255,.12); }
.category-card:hover .category-card__icon { color: #fff; background: linear-gradient(135deg, #00cbef, #7040e9 56%, #e711c6); box-shadow: 0 0 22px rgba(0,217,255,.19); }

/* Catalog */
.product-card { isolation: isolate; }
.product-card__img { background: radial-gradient(circle at 50% 46%, rgba(69,87,154,.18), transparent 48%), linear-gradient(145deg, #0a1026, #0e1731); border-bottom: 1px solid rgba(40,55,94,.72); }
.product-card__img::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .24;
  background-image: linear-gradient(rgba(0,217,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(124,58,237,.08) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 60%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 60%, transparent);
  pointer-events: none;
}
.product-card__img img { position: relative; z-index: 1; filter: drop-shadow(0 16px 18px rgba(0,0,0,.48)); }
.product-card__brand,
.product-card__price-current { color: var(--cyan); }
.product-card__price-current { text-shadow: 0 0 16px rgba(0,217,255,.2); }
.product-card__actions button { color: var(--dark-700); background: rgba(12,19,41,.94); border: 1px solid var(--gray-200); }
.product-card__actions button:hover { color: #fff; background: linear-gradient(135deg, var(--cyan), var(--purple)); border-color: transparent; }
.badge-new { color: #06101e; background: var(--cyan); box-shadow: 0 0 18px rgba(0,217,255,.28); }
.badge-sale { color: #fff; background: linear-gradient(135deg, #ef276f, var(--magenta)); box-shadow: 0 0 18px rgba(242,12,200,.22); }
.filter-tab { color: var(--dark-700); border-color: var(--gray-200); background: rgba(12,19,41,.82); }
.filter-tab:hover,
.filter-tab.active { color: #07101f; border-color: var(--cyan); background: linear-gradient(100deg, var(--cyan), #65d7ff); box-shadow: 0 0 20px rgba(0,217,255,.17); }
.compare-wrap { border-color: var(--gray-200); background: var(--panel); box-shadow: var(--shadow); }
.compare thead th { color: #fff; background: linear-gradient(90deg, #10183a, #182151); }
.compare tbody tr:hover { background: rgba(0,217,255,.04); }
.compare .highlight { color: var(--cyan); }

/* Forms and product details */
.form-group input,
.form-group select,
.form-group textarea,
.newsletter input,
.shipping-calculator input { color: var(--dark); border-color: var(--gray-200); background: rgba(7,12,30,.9); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.newsletter input:focus,
.shipping-calculator input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,217,255,.1), 0 0 20px rgba(0,217,255,.06); }
input::placeholder,
textarea::placeholder { color: #7180a5; }
.product-breadcrumb { border-color: var(--gray-200); background: rgba(8,13,32,.84); }
.product-breadcrumb a { color: var(--cyan); }
.product-purchase { box-shadow: var(--shadow-lg), inset 0 1px rgba(255,255,255,.025); }
.product-price { background: linear-gradient(135deg, rgba(0,217,255,.065), rgba(124,58,237,.075)); border: 1px solid rgba(32,231,255,.12); }
.product-price__current { color: var(--cyan); text-shadow: 0 0 18px rgba(0,217,255,.18); }
.product-price__saving { color: var(--success); background: rgba(35,231,166,.08); border: 1px solid rgba(35,231,166,.14); }
.product-option__choice { color: var(--dark); border-color: var(--cyan); background: linear-gradient(135deg, rgba(0,217,255,.07), rgba(124,58,237,.08)); box-shadow: 0 0 20px rgba(0,217,255,.05); }
.quantity-control { background: rgba(7,12,30,.9); }
.quantity-control button,
.quantity-control input { color: var(--dark); }
.product-favorite { color: var(--magenta); background: rgba(242,12,200,.035); }
.product-section-nav { border-color: var(--gray-200); background: rgba(5,8,26,.9); backdrop-filter: blur(14px); }
.product-section-nav a:hover { color: var(--cyan); border-color: var(--cyan); }
.product-specs__group h3 { color: var(--dark); background: rgba(17,24,49,.92); }
.review-domain { color: var(--cyan); }
.whatsapp-review img { border-color: rgba(32,231,255,.18); box-shadow: 0 28px 60px rgba(0,0,0,.42), 0 0 32px rgba(0,217,255,.06); }

/* Footer and feedback */
.footer {
  color: var(--gray);
  background: radial-gradient(circle at 18% 0%, rgba(0,217,255,.08), transparent 24rem), radial-gradient(circle at 82% 100%, rgba(242,12,200,.08), transparent 28rem), #030615;
  border-top: 1px solid rgba(32,231,255,.16);
}
.footer__brand,
.footer__heading { color: #fff; }
.footer__social a { color: var(--gray-light); border-color: rgba(32,231,255,.16); background: rgba(12,19,41,.62); }
.footer__social a:hover { color: #fff; border-color: var(--cyan); background: linear-gradient(135deg, var(--cyan), var(--purple), var(--magenta)); box-shadow: 0 0 22px rgba(0,217,255,.16); }
.footer__links a:hover { color: var(--cyan); text-shadow: 0 0 12px rgba(0,217,255,.2); }
.footer__grid { border-bottom-color: rgba(32,231,255,.1); }
.toast { color: #fff; background: linear-gradient(135deg, #111a38, #17103a); border: 1px solid rgba(32,231,255,.25); box-shadow: 0 18px 45px rgba(0,0,0,.42), 0 0 24px rgba(0,217,255,.1); }

@media (max-width: 980px) {
  .hero {
    background-image:
      linear-gradient(0deg, rgba(3,5,22,.76), rgba(3,5,22,.42) 58%, rgba(3,5,22,.2)),
      url('../img/hero-retro-city-playnux.webp');
    background-position: 63% bottom;
  }
  .hero > .container { flex-direction: column; text-align: center; }
  .hero__content .hero__desc { margin-inline: auto; }
  .hero__image { width: min(100%, 380px); margin-top: 1.5rem; }
}

@media (max-width: 720px) {
  .nav { background: rgba(5,8,26,.98); border-bottom-color: rgba(32,231,255,.2); }
  .hero__image { max-width: 340px; }
  .site-gate { margin-inline: auto; text-align: left; }
}