/* =========================================================
   ZYNN STORE V13 — WALLET IMAGE + SERVICE ICON FIX
   Fokus: saldo lebih proporsional, background saldo tajam,
   ikon Nomor Virtual/Suntik Sosmed tidak terlihat kotak.
   Load paling akhir.
   ========================================================= */

:root{
  --z13-cyan:#47eaff;
  --z13-purple:#9b62ff;
  --z13-dark:#050b1d;
}

/* ===== SALDO / WALLET CARD — DESKTOP ===== */
.wallet-card,
.cyber-balance-card{
  overflow:hidden!important;
  isolation:isolate!important;
  background:
    linear-gradient(90deg,
      rgba(3,10,25,.96) 0%,
      rgba(4,13,31,.90) 34%,
      rgba(5,16,40,.54) 62%,
      rgba(5,18,46,.24) 100%),
    url('../cyber-v4/wallet-neon-wave-v14-sharp.png') center right / cover no-repeat!important;
  border:1px solid rgba(71,234,255,.24)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.10)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Matikan layer lama yang bikin foto buram/ketutup */
.wallet-card::before,
.wallet-card::after,
.cyber-balance-card::before,
.cyber-balance-card::after{
  content:none!important;
  display:none!important;
  opacity:0!important;
  background:none!important;
  filter:none!important;
  animation:none!important;
}

.wallet-card > *,
.cyber-balance-card > *{
  position:relative!important;
  z-index:2!important;
}

.wallet-balance-value{
  font-family:'Rajdhani','Inter',system-ui,sans-serif!important;
  font-size:clamp(38px,4.2vw,54px)!important;
  line-height:.98!important;
  letter-spacing:.015em!important;
  margin:8px 0 20px!important;
  text-shadow:0 0 22px rgba(71,234,255,.24)!important;
}

.cyber-balance-card strong{
  font-family:'Rajdhani','Inter',system-ui,sans-serif!important;
  font-size:clamp(30px,3vw,40px)!important;
  line-height:1!important;
  letter-spacing:.015em!important;
  margin:6px 0 10px!important;
  text-shadow:0 0 22px rgba(71,234,255,.24)!important;
}

.wallet-card .wallet-top,
.wallet-card .wallet-balance-label,
.wallet-card .wallet-actions,
.cyber-balance-card .cyber-chip,
.cyber-balance-card h3,
.cyber-balance-card p,
.cyber-balance-card .cyber-actions,
.cyber-balance-card .cyber-quick-grid{
  max-width:470px!important;
}

.wallet-card .wallet-badge,
.cyber-chip{
  background:rgba(5,16,38,.55)!important;
  border-color:rgba(71,234,255,.30)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 24px rgba(71,234,255,.10)!important;
  backdrop-filter:none!important;
}

.wallet-actions{max-width:440px!important;}
.wallet-btn,.cyber-actions a{
  min-height:50px!important;
  border-radius:17px!important;
}

/* ===== NOMOR VIRTUAL + SUNTIK SOSMED — SERVICE BOX ===== */
.ds-service-row{
  align-items:stretch!important;
}

.ds-service-box{
  position:relative!important;
  overflow:hidden!important;
  border-radius:22px!important;
  background:
    linear-gradient(145deg,rgba(9,25,57,.88),rgba(4,10,26,.96))!important;
  border:1px solid rgba(71,234,255,.20)!important;
  box-shadow:0 18px 54px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08)!important;
}

.ds-service-box::before{
  content:""!important;
  position:absolute!important;
  inset:-1px!important;
  border-radius:inherit!important;
  background:radial-gradient(circle at 18% 18%,rgba(71,234,255,.20),transparent 34%),radial-gradient(circle at 86% 86%,rgba(155,98,255,.14),transparent 38%)!important;
  pointer-events:none!important;
  z-index:0!important;
}

.ds-service-box > *{position:relative!important;z-index:1!important;}

.ds-service-icon{
  width:62px!important;
  height:62px!important;
  min-width:62px!important;
  border-radius:22px!important;
  overflow:hidden!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  background:linear-gradient(135deg,rgba(71,234,255,.18),rgba(155,98,255,.18))!important;
  border:1px solid rgba(71,234,255,.30)!important;
  box-shadow:0 0 24px rgba(71,234,255,.12)!important;
}

.ds-service-icon img{
  width:48px!important;
  height:48px!important;
  max-width:48px!important;
  max-height:48px!important;
  object-fit:cover!important;
  border-radius:16px!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:drop-shadow(0 0 12px rgba(71,234,255,.30))!important;
  transform:none!important;
}

.ds-service-title{
  writing-mode:horizontal-tb!important;
  text-orientation:mixed!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  letter-spacing:.01em!important;
}

.ds-service-arrow{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  border-radius:999px!important;
  display:grid!important;
  place-items:center!important;
  background:rgba(71,234,255,.08)!important;
  border:1px solid rgba(71,234,255,.18)!important;
  line-height:1!important;
}

/* Foto produk lainnya lebih enak dilihat, bukan kotak mentah */
.ds-media{
  border-radius:22px 22px 0 0!important;
  background:radial-gradient(circle at 50% 20%,rgba(71,234,255,.10),transparent 44%),#050a17!important;
}
.ds-media img{
  border-radius:18px!important;
  box-shadow:0 0 24px rgba(71,234,255,.10)!important;
}

/* ===== MOBILE ===== */
@media(max-width:720px){
  .wallet-card{
    width:calc(100% - 24px)!important;
    max-width:430px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:20px!important;
    min-height:245px!important;
    border-radius:26px!important;
    background:
      linear-gradient(90deg,
        rgba(3,10,25,.96) 0%,
        rgba(4,13,31,.88) 46%,
        rgba(5,16,40,.50) 76%,
        rgba(5,18,46,.30) 100%),
      url('../cyber-v4/wallet-neon-wave-v14-sharp.png') center right / cover no-repeat!important;
  }

  .wallet-top{margin-bottom:18px!important;}
  .wallet-balance-label{font-size:12px!important;margin-bottom:6px!important;}
  .wallet-balance-value{
    font-size:34px!important;
    line-height:1!important;
    letter-spacing:.01em!important;
    margin:5px 0 18px!important;
  }
  .wallet-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    max-width:100%!important;
  }
  .wallet-btn{height:46px!important;min-height:46px!important;border-radius:16px!important;font-size:13px!important;}

  .ds-service-row{
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
    margin-bottom:26px!important;
  }
  .ds-service-box{
    min-height:126px!important;
    padding:13px!important;
    border-radius:22px!important;
    display:grid!important;
    grid-template-columns:52px 1fr!important;
    grid-template-rows:auto auto!important;
    align-items:center!important;
    gap:10px 10px!important;
  }
  .ds-service-icon{
    grid-column:1!important;
    grid-row:1 / span 2!important;
    width:52px!important;
    height:52px!important;
    min-width:52px!important;
    border-radius:18px!important;
  }
  .ds-service-icon img{
    width:42px!important;
    height:42px!important;
    max-width:42px!important;
    max-height:42px!important;
    border-radius:14px!important;
  }
  .ds-service-text{
    grid-column:2!important;
    grid-row:1!important;
    min-width:0!important;
  }
  .ds-service-title{
    font-size:12.5px!important;
    line-height:1.08!important;
    text-align:left!important;
  }
  .ds-service-text::after{
    display:block!important;
    font-size:10.2px!important;
    line-height:1.1!important;
    margin-top:5px!important;
  }
  .ds-service-arrow{
    grid-column:2!important;
    grid-row:2!important;
    justify-self:start!important;
    width:26px!important;
    height:26px!important;
    min-width:26px!important;
    font-size:20px!important;
    position:static!important;
    margin:0!important;
  }

  .ds-media img{
    object-fit:cover!important;
    border-radius:17px!important;
  }
}

@media(max-width:390px){
  .wallet-balance-value{font-size:31px!important;}
  .ds-service-box{
    min-height:118px!important;
    padding:11px!important;
    grid-template-columns:48px 1fr!important;
    gap:9px!important;
  }
  .ds-service-icon{width:48px!important;height:48px!important;min-width:48px!important;border-radius:17px!important;}
  .ds-service-icon img{width:38px!important;height:38px!important;max-width:38px!important;max-height:38px!important;border-radius:13px!important;}
  .ds-service-title{font-size:11.5px!important;}
}


/* ===== V14 sharp wallet fix ===== */
.wallet-card,
.cyber-balance-card{
  position:relative!important;
  background:url('../cyber-v4/wallet-neon-wave-v14-sharp.png') center right / cover no-repeat!important;
}
.wallet-card::before,
.cyber-balance-card::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(90deg,
    rgba(3,10,25,.96) 0%,
    rgba(4,13,31,.88) 28%,
    rgba(5,16,40,.48) 48%,
    rgba(5,18,46,.12) 70%,
    rgba(5,18,46,.02) 100%)!important;
  opacity:1!important;
  filter:none!important;
  animation:none!important;
  z-index:1!important;
  pointer-events:none!important;
}
.wallet-card::after,
.cyber-balance-card::after{content:none!important;display:none!important;}
.wallet-card > *, .cyber-balance-card > *{z-index:2!important;}
.wallet-card .wallet-top{
  position:relative!important;
  display:block!important;
  margin-bottom:16px!important;
  max-width:100%!important;
  padding-right:250px!important;
}
.wallet-card .wallet-top > div:first-child{max-width:420px!important;}
.wallet-card .wallet-badge{
  position:absolute!important;
  top:0!important;
  right:0!important;
  margin:0!important;
  max-width:none!important;
  white-space:nowrap!important;
}
.wallet-balance-label{margin-top:6px!important;}
.wallet-balance-value{
  font-size:clamp(28px,3.5vw,42px)!important;
  font-weight:800!important;
  letter-spacing:.005em!important;
  text-shadow:0 0 12px rgba(71,234,255,.16)!important;
}
.wallet-actions{max-width:450px!important;}
@media(max-width:720px){
  .wallet-card{
    background:url('../cyber-v4/wallet-neon-wave-v14-sharp.png') center right / cover no-repeat!important;
  }
  .wallet-card::before{
    background:linear-gradient(90deg,
      rgba(3,10,25,.96) 0%,
      rgba(4,13,31,.90) 44%,
      rgba(5,16,40,.42) 72%,
      rgba(5,18,46,.06) 100%)!important;
  }
  .wallet-card .wallet-top{
    padding-right:0!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:10px!important;
    margin-bottom:16px!important;
  }
  .wallet-card .wallet-top > div:first-child{max-width:calc(100% - 128px)!important;}
  .wallet-card .wallet-badge{
    position:static!important;
    justify-self:flex-end!important;
    align-self:flex-start!important;
    white-space:normal!important;
    text-align:right!important;
    max-width:120px!important;
    font-size:11px!important;
    line-height:1.15!important;
    padding:7px 10px!important;
  }
  .wallet-balance-value{font-size:32px!important;}
}
@media(min-width:721px){
  .wallet-card{min-height:300px!important;}
}


/* ===== V15 crisp wallet + badge top-right fix ===== */
.wallet-card,
.cyber-balance-card{
  position:relative!important;
  background:#050b1d!important;
  overflow:hidden!important;
}
.wallet-card::before,
.cyber-balance-card::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  background:url('../cyber-v4/wallet-neon-wave-v14-sharp.png') center right / cover no-repeat!important;
  filter:saturate(1.35) contrast(1.12) brightness(1.08)!important;
  opacity:1!important;
  z-index:0!important;
  pointer-events:none!important;
}
.wallet-card::after,
.cyber-balance-card::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(90deg,
    rgba(3,10,25,.97) 0%,
    rgba(4,13,31,.90) 24%,
    rgba(5,16,40,.48) 42%,
    rgba(5,18,46,.16) 58%,
    rgba(5,18,46,.02) 74%,
    rgba(5,18,46,0) 100%)!important;
  z-index:1!important;
  pointer-events:none!important;
}
.wallet-card > *, .cyber-balance-card > *{position:relative!important;z-index:2!important;}
.wallet-card .wallet-top{
  display:block!important;
  margin-bottom:14px!important;
  padding-right:0!important;
  max-width:60%!important;
}
.wallet-card .wallet-top > div:first-child{max-width:100%!important;}
.wallet-card .wallet-badge{
  position:absolute!important;
  top:22px!important;
  right:22px!important;
  margin:0!important;
  white-space:nowrap!important;
  text-align:center!important;
  max-width:none!important;
  z-index:3!important;
}
.wallet-balance-value{
  font-size:clamp(28px,3.4vw,40px)!important;
  font-weight:800!important;
  letter-spacing:0!important;
  text-shadow:0 0 10px rgba(71,234,255,.14)!important;
}
@media (max-width:720px){
  .wallet-card::before{
    background-position:65% center!important;
    filter:saturate(1.28) contrast(1.08) brightness(1.05)!important;
  }
  .wallet-card::after{
    background:linear-gradient(90deg,
      rgba(3,10,25,.97) 0%,
      rgba(4,13,31,.90) 38%,
      rgba(5,16,40,.44) 62%,
      rgba(5,18,46,.12) 78%,
      rgba(5,18,46,0) 100%)!important;
  }
  .wallet-card .wallet-top{
    max-width:calc(100% - 132px)!important;
    margin-bottom:14px!important;
  }
  .wallet-card .wallet-badge{
    top:14px!important;
    right:14px!important;
    max-width:118px!important;
    white-space:normal!important;
    text-align:right!important;
    font-size:10.5px!important;
    line-height:1.15!important;
    padding:7px 10px!important;
  }
  .wallet-balance-value{font-size:32px!important;}
}


/* ===== V17 mobile footer + clean APK title ===== */

/* Tampilkan footer desktop juga di HP, tapi kasih jarak supaya tidak ketutup bottom nav */
.zy-footer,
.footer,
.site-footer,
footer{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}

@media(max-width:720px){
  .zy-footer,
  .footer,
  .site-footer,
  footer{
    display:block!important;
    width:calc(100% - 24px)!important;
    max-width:430px!important;
    margin:38px auto 116px!important;
    padding:22px 18px!important;
    border-radius:24px!important;
    background:linear-gradient(145deg,rgba(7,17,42,.92),rgba(3,8,22,.96))!important;
    border:1px solid rgba(71,234,255,.18)!important;
    box-shadow:0 18px 55px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07)!important;
    overflow:hidden!important;
  }

  .zy-footer *,
  .footer *,
  .site-footer *,
  footer *{
    max-width:100%!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
  }

  .zy-footer .footer-grid,
  .footer .footer-grid,
  .site-footer .footer-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
  }
}

/* Hilangkan emoji/icon HP di judul APK Premium: judul jadi tulisan bersih */
.section h2,
.ds-section-title,
.section-title{
  display:flex!important;
  align-items:center!important;
  gap:0!important;
}

.section h2 .section-icon,
.section h2 i,
.section h2 svg,
.section h2 img,
.ds-section-title .section-icon,
.ds-section-title i,
.ds-section-title svg,
.ds-section-title img{
  display:none!important;
}

/* Kalau emoji dibuat sebagai text node/ikon dekoratif sebelum judul, sembunyikan dekorasi via pseudo/first child */
.section h2::before,
.ds-section-title::before{
  content:""!important;
  display:none!important;
}

/* Pastikan judul APK Premium hanya teks, tanpa ornament terlalu ramai */
.section h2,
.ds-section-title{
  padding-left:0!important;
  text-indent:0!important;
}


/* ===== V18 TRUE BADGE TOP-RIGHT FIX ===== */
/* Badge dipindah keluar dari wallet-top lewat HTML, lalu dikunci ke pojok kanan atas wallet-card */
body .wallet-card{
  position:relative!important;
}

body .wallet-card > .wallet-badge,
body .wallet-card .wallet-badge{
  position:absolute!important;
  top:26px!important;
  right:28px!important;
  left:auto!important;
  bottom:auto!important;
  transform:none!important;
  translate:none!important;
  margin:0!important;
  z-index:50!important;

  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  max-width:260px!important;
  white-space:nowrap!important;
  text-align:center!important;
  padding:10px 18px!important;
  border-radius:999px!important;
}

/* Area teks kiri jangan mengambil ruang badge */
body .wallet-card > .wallet-top{
  position:relative!important;
  display:block!important;
  max-width:48%!important;
  padding-right:0!important;
  margin-bottom:14px!important;
}

@media(max-width:720px){
  body .wallet-card > .wallet-badge,
  body .wallet-card .wallet-badge{
    top:16px!important;
    right:16px!important;
    max-width:118px!important;
    white-space:normal!important;
    text-align:right!important;
    line-height:1.12!important;
    padding:8px 10px!important;
    font-size:10.5px!important;
  }

  body .wallet-card > .wallet-top{
    max-width:54%!important;
    margin-bottom:14px!important;
  }
}


/* ===== V19 badge one-line fix ===== */
/* Paksa badge membership di saldo card tetap 1 baris, tidak kepotong */
body .wallet-card > .wallet-badge,
body .wallet-card .wallet-badge{
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
  text-align:center!important;
  max-width:none!important;
  width:auto!important;
  min-width:max-content!important;
  padding:9px 16px!important;
  font-size:12px!important;
  line-height:1!important;
}

@media(max-width:720px){
  body .wallet-card > .wallet-badge,
  body .wallet-card .wallet-badge{
    top:16px!important;
    right:14px!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    text-align:center!important;
    max-width:none!important;
    width:auto!important;
    min-width:max-content!important;
    padding:8px 12px!important;
    font-size:9.8px!important;
    line-height:1!important;
    letter-spacing:-.01em!important;
  }

  /* Beri ruang aman agar teks kiri tidak nabrak badge */
  body .wallet-card > .wallet-top{
    max-width:48%!important;
  }
}

@media(max-width:390px){
  body .wallet-card > .wallet-badge,
  body .wallet-card .wallet-badge{
    font-size:9.2px!important;
    padding:7px 10px!important;
    right:12px!important;
  }
}


/* ===== V20 neon polish for PC + HP ===== */
:root{
  --v20-cyan: rgba(71,234,255,.95);
  --v20-cyan-soft: rgba(71,234,255,.22);
  --v20-purple: rgba(155,98,255,.92);
  --v20-purple-soft: rgba(155,98,255,.20);
  --v20-blue-soft: rgba(38,128,255,.18);
}

/* Core shells */
.navbar,
.navbar-digital,
.search-wrapper,
.ds-search-wrap,
.banner-slider,
.wallet-card,
.cyber-balance-card,
.tab-switch,
.ds-tabs,
.card,
.ds-card,
.ds-service-box,
.cyber-stats-strip > *,
.zy-footer,
.zynn-bottom-nav{
  border-color: rgba(71,234,255,.24)!important;
  box-shadow:
    0 0 0 1px rgba(71,234,255,.08) inset,
    0 0 20px rgba(71,234,255,.10),
    0 0 44px rgba(155,98,255,.08)!important;
}

.navbar,
.navbar-digital{
  box-shadow:
    0 0 0 1px rgba(71,234,255,.10) inset,
    0 0 16px rgba(71,234,255,.10),
    0 0 34px rgba(155,98,255,.10)!important;
}
.brand-logo,.nav-logo{
  box-shadow:0 0 0 1px rgba(71,234,255,.22) inset,0 0 18px rgba(71,234,255,.20),0 0 30px rgba(155,98,255,.14)!important;
}
.nav-user-pill,.nav-login-btn,#navUserBtn{
  box-shadow:0 0 0 1px rgba(71,234,255,.18) inset,0 0 18px rgba(71,234,255,.14),0 0 26px rgba(155,98,255,.12)!important;
}

/* Search */
.search-wrapper,
.ds-search-wrap{
  background:linear-gradient(145deg,rgba(5,17,48,.92),rgba(4,11,31,.96))!important;
}
#searchInput,.ds-search{
  box-shadow: inset 0 0 0 1px rgba(71,234,255,.10), 0 0 20px rgba(71,234,255,.06)!important;
}
.search-wrapper i,.ds-search-wrap i,.search-wrapper .fa-solid,.ds-search-wrap .fa-solid{
  color:#3fe8ff!important;
  text-shadow:0 0 14px rgba(71,234,255,.50)!important;
}

/* Hero / wallet */
.banner-slider,
.wallet-card,
.cyber-balance-card{
  overflow:hidden!important;
}
.banner-slider::before,
.wallet-card::before,
.cyber-balance-card::before{
  box-shadow:none!important;
}
.wallet-card,
.cyber-balance-card{
  box-shadow:
    0 0 0 1px rgba(71,234,255,.12) inset,
    0 0 24px rgba(71,234,255,.10),
    0 0 55px rgba(155,98,255,.12)!important;
}
.wallet-balance-value,
.cyber-balance-card strong{
  text-shadow:0 0 10px rgba(255,255,255,.10),0 0 18px rgba(71,234,255,.18)!important;
}
.wallet-badge,
.cyber-chip{
  box-shadow:0 0 0 1px rgba(71,234,255,.18) inset,0 0 16px rgba(71,234,255,.12),0 0 18px rgba(155,98,255,.10)!important;
}
.wallet-btn,
.cyber-actions a,
.banner-item .wallet-btn,
.banner-item .btn,
.banner-item a[href],
.price-new{
  box-shadow:0 0 12px rgba(71,234,255,.14),0 0 26px rgba(155,98,255,.14)!important;
}
.wallet-btn.secondary,
.cyber-actions a.secondary{
  box-shadow:0 0 0 1px rgba(71,234,255,.12) inset,0 0 18px rgba(71,234,255,.08)!important;
}
.banner-arrow{
  box-shadow:0 0 0 1px rgba(71,234,255,.18) inset,0 0 18px rgba(71,234,255,.12),0 0 26px rgba(155,98,255,.10)!important;
}
.ref-hero-dots span,
.ref-hero-dots .active{
  box-shadow:0 0 10px rgba(71,234,255,.28),0 0 16px rgba(155,98,255,.16)!important;
}

/* Tabs and titles */
.tab-switch,
.ds-tabs{
  background:linear-gradient(145deg,rgba(8,19,48,.72),rgba(5,10,26,.88))!important;
}
.tab-btn,
.ds-tab{
  box-shadow: inset 0 0 0 1px rgba(71,234,255,.10)!important;
}
.tab-btn.active,
.ds-tab.active,
.tab-btn[aria-selected="true"],
.ds-tab[aria-selected="true"]{
  box-shadow:0 0 0 1px rgba(71,234,255,.24) inset,0 0 18px rgba(71,234,255,.16),0 0 26px rgba(155,98,255,.14)!important;
}
.section h2,
.ds-section-title{
  text-shadow:0 0 18px rgba(255,255,255,.06),0 0 22px rgba(71,234,255,.10)!important;
}

/* Product cards */
.card,
.ds-card{
  background:linear-gradient(180deg,rgba(6,18,46,.95),rgba(2,8,24,.98))!important;
}
.card::before,
.ds-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(circle at 18% 12%, rgba(71,234,255,.14), transparent 28%), radial-gradient(circle at 82% 14%, rgba(155,98,255,.14), transparent 26%);
  opacity:.95;
}
.card > *, .ds-card > *{position:relative; z-index:1;}
.card img,.ds-media img{
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,0 0 18px rgba(71,234,255,.10)!important;
}
.price-new,
.ds-price,
.ds-price strong{
  text-shadow:0 0 12px rgba(71,234,255,.12)!important;
}
.bestseller-badge,.flash-badge,.flash-timer{
  box-shadow:0 0 12px rgba(71,234,255,.14),0 0 18px rgba(155,98,255,.12)!important;
}

/* Services and stats */
.ds-service-box::before{
  opacity:1!important;
}
.ds-service-icon{
  box-shadow:0 0 0 1px rgba(71,234,255,.24) inset,0 0 18px rgba(71,234,255,.14),0 0 22px rgba(155,98,255,.12)!important;
}
.ds-service-arrow{
  box-shadow:0 0 0 1px rgba(71,234,255,.18) inset,0 0 12px rgba(71,234,255,.12)!important;
}
.cyber-stats-strip > *,
.cyber-stats-strip .card,
.cyber-stats-strip .item{
  background:linear-gradient(145deg,rgba(7,16,41,.82),rgba(3,8,20,.94))!important;
}
.cyber-stats-strip i,
.cyber-stats-strip .fa-solid,
.cyber-stats-strip .fa-regular{
  text-shadow:0 0 14px rgba(71,234,255,.40)!important;
}

/* Footer + bottom nav + cs */
.zy-footer{
  background:linear-gradient(145deg,rgba(8,19,48,.86),rgba(4,10,26,.96))!important;
}
.zynn-bottom-nav{
  box-shadow:0 0 0 1px rgba(71,234,255,.14) inset,0 0 18px rgba(71,234,255,.12),0 0 28px rgba(155,98,255,.14)!important;
}
.zynn-bottom-nav a.active,
.zynn-bottom-nav a[aria-current="page"]{
  box-shadow:0 0 0 1px rgba(71,234,255,.18) inset,0 0 16px rgba(71,234,255,.14),0 0 22px rgba(155,98,255,.12)!important;
}
#cs-pill,#cs-bubble,.cs-avatar{
  box-shadow:0 0 0 1px rgba(71,234,255,.16) inset,0 0 16px rgba(71,234,255,.14),0 0 28px rgba(155,98,255,.16)!important;
}
.cs-avatar{
  background:linear-gradient(145deg, rgba(71,234,255,.95), rgba(155,98,255,.95))!important;
}

/* Hover desktop only, smooth not chaotic */
@media (hover:hover) and (pointer:fine){
  .card:hover,
  .ds-card:hover,
  .ds-service-box:hover,
  .wallet-card:hover,
  .cyber-balance-card:hover,
  .navbar:hover,
  .navbar-digital:hover,
  .search-wrapper:hover,
  .ds-search-wrap:hover{
    box-shadow:
      0 0 0 1px rgba(71,234,255,.14) inset,
      0 0 26px rgba(71,234,255,.16),
      0 0 55px rgba(155,98,255,.16)!important;
  }
  .wallet-btn:hover,
  .cyber-actions a:hover,
  .tab-btn:hover,
  .ds-tab:hover,
  .banner-arrow:hover,
  .zynn-bottom-nav a:hover{
    filter:brightness(1.05)!important;
    box-shadow:0 0 16px rgba(71,234,255,.20),0 0 28px rgba(155,98,255,.18)!important;
  }
}

/* HP: keep the neon but slightly cleaner so it doesn't look messy */
@media(max-width:720px){
  .navbar,
  .navbar-digital,
  .search-wrapper,
  .ds-search-wrap,
  .banner-slider,
  .wallet-card,
  .tab-switch,
  .ds-tabs,
  .card,
  .ds-card,
  .ds-service-box,
  .zy-footer,
  .zynn-bottom-nav{
    box-shadow:
      0 0 0 1px rgba(71,234,255,.08) inset,
      0 0 14px rgba(71,234,255,.08),
      0 0 24px rgba(155,98,255,.08)!important;
  }
  .section h2,
  .ds-section-title{
    text-shadow:0 0 12px rgba(71,234,255,.08)!important;
  }
  .card::before,
  .ds-card::before{
    opacity:.78;
  }
  .wallet-btn,
  .cyber-actions a,
  .tab-btn.active,
  .ds-tab.active{
    box-shadow:0 0 10px rgba(71,234,255,.10),0 0 18px rgba(155,98,255,.10)!important;
  }
}


/* ===== V21 premium sharp neon reference styling ===== */
:root{
  --v21-cyan:#36e9ff;
  --v21-sky:#4fc8ff;
  --v21-purple:#9a63ff;
  --v21-magenta:#d04dff;
  --v21-red:#ff4a71;
  --v21-green:#16ec8e;
  --v21-deep:#030916;
  --v21-panel:#071326;
}

/* overall neon crispness */
.navbar,
.navbar-digital,
.search-wrapper,
.ds-search-wrap,
.banner-slider,
.wallet-card,
.cyber-balance-card,
.tab-switch,
.ds-tabs,
.card,
.ds-card,
.ds-service-box,
.zy-footer,
.zynn-bottom-nav{
  backdrop-filter: blur(8px)!important;
  -webkit-backdrop-filter: blur(8px)!important;
}

/* logo and top shell */
.navbar,
.navbar-digital{
  background:linear-gradient(90deg,rgba(4,15,38,.96),rgba(8,17,47,.96),rgba(19,13,51,.94))!important;
  border:1px solid rgba(54,233,255,.55)!important;
  box-shadow:
    0 0 0 1px rgba(54,233,255,.10) inset,
    0 0 18px rgba(54,233,255,.16),
    0 0 36px rgba(154,99,255,.14)!important;
}
.brand-logo,.nav-logo{
  border-color:rgba(54,233,255,.72)!important;
  box-shadow:0 0 18px rgba(54,233,255,.22),0 0 30px rgba(154,99,255,.14)!important;
}
.brand h1,.brand .nav-brand-text strong,.nav-brand-text strong{ text-shadow:0 0 14px rgba(255,255,255,.08),0 0 18px rgba(54,233,255,.12)!important; }
.nav-brand-text small,.brand small{ color:rgba(227,236,255,.72)!important; }
.nav-login-btn,.nav-user-pill,#navUserBtn{
  background:linear-gradient(135deg,rgba(10,19,44,.96),rgba(9,16,39,.96))!important;
  border:1.5px solid rgba(54,233,255,.72)!important;
  box-shadow:0 0 16px rgba(54,233,255,.18),0 0 26px rgba(154,99,255,.18), inset 0 0 16px rgba(154,99,255,.08)!important;
}

/* search like reference */
.search-wrapper,
.ds-search-wrap{
  background:linear-gradient(180deg,rgba(5,14,35,.96),rgba(4,11,28,.98))!important;
  border:1.5px solid rgba(54,233,255,.26)!important;
  box-shadow:inset 0 0 0 1px rgba(54,233,255,.08), 0 0 18px rgba(54,233,255,.12), 0 0 28px rgba(154,99,255,.08)!important;
}
.ds-search,
#searchInput{
  color:rgba(232,241,255,.92)!important;
}
.ds-search::placeholder,
#searchInput::placeholder{ color:rgba(198,210,232,.58)!important; }
.search-wrapper i,
.ds-search-wrap i,
.search-wrapper .fa-solid,
.ds-search-wrap .fa-solid{
  color:var(--v21-cyan)!important;
  text-shadow:0 0 16px rgba(54,233,255,.48)!important;
}

/* Hero / wallet more premium */
.wallet-card,
.cyber-balance-card,
.banner-slider{
  border:1.4px solid rgba(54,233,255,.30)!important;
  box-shadow:0 0 24px rgba(54,233,255,.12), 0 0 48px rgba(154,99,255,.10), inset 0 0 0 1px rgba(54,233,255,.06)!important;
}
.wallet-balance-value,
.cyber-balance-card strong{
  color:#fff!important;
  text-shadow:0 0 10px rgba(255,255,255,.10),0 0 24px rgba(54,233,255,.16)!important;
}
.wallet-btn,
.cyber-actions a,
.banner-item .wallet-btn,
.banner-item .btn,
.banner-item a[href]{
  border:none!important;
  background:linear-gradient(90deg,var(--v21-cyan), var(--v21-purple))!important;
  color:#041120!important;
  font-weight:800!important;
  box-shadow:0 0 14px rgba(54,233,255,.16),0 0 28px rgba(154,99,255,.18)!important;
}
.wallet-btn.secondary,
.cyber-actions a.secondary{
  background:linear-gradient(180deg,rgba(7,14,35,.84),rgba(7,12,30,.92))!important;
  color:#eef5ff!important;
  border:1.2px solid rgba(91,124,176,.40)!important;
  box-shadow:0 0 0 1px rgba(54,233,255,.08) inset,0 0 14px rgba(54,233,255,.08)!important;
}
.wallet-badge,.cyber-chip{
  background:linear-gradient(180deg,rgba(7,17,41,.92),rgba(4,10,25,.94))!important;
  border:1px solid rgba(54,233,255,.42)!important;
  color:#f5fbff!important;
}

/* TABS just like reference: active neon pill, inactive outlined dark pill */
.tab-switch,
.ds-tabs{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  padding:0!important;
}
.tab-btn,
.ds-tab{
  position:relative!important;
  border-radius:24px!important;
  min-height:64px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 22px!important;
  background:linear-gradient(180deg,rgba(7,14,34,.84),rgba(8,14,34,.94))!important;
  border:2px solid rgba(88,115,164,.34)!important;
  color:rgba(226,234,249,.78)!important;
  box-shadow: inset 0 0 0 1px rgba(54,233,255,.05), 0 0 14px rgba(54,233,255,.05)!important;
}
.tab-btn.active,
.ds-tab.active,
.tab-btn[aria-selected="true"],
.ds-tab[aria-selected="true"]{
  background:linear-gradient(90deg, #53e8ff 0%, #69bfff 48%, #ad63ff 100%)!important;
  color:#041120!important;
  border:1px solid rgba(175,228,255,.68)!important;
  box-shadow:0 0 18px rgba(54,233,255,.18),0 0 34px rgba(154,99,255,.18), inset 0 1px 0 rgba(255,255,255,.22)!important;
}
.tab-btn:not(.active):before,
.ds-tab:not(.active):before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(54,233,255,.08), inset 0 -22px 30px rgba(113,72,255,.06);
}

/* Section titles / links */
.section h2,
.ds-section-title{ color:#f8fbff!important; text-shadow:0 0 16px rgba(54,233,255,.10)!important; }
.section h2 + a,
.section .see-all,
.ds-section-title + a{ color:var(--v21-cyan)!important; text-shadow:0 0 10px rgba(54,233,255,.22)!important; }

/* Product cards: varied sharp neon like reference */
.card,
.ds-card{
  position:relative!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,rgba(6,13,33,.96),rgba(3,8,21,.99))!important;
  border:1.5px solid rgba(54,233,255,.22)!important;
  border-radius:28px!important;
  box-shadow:0 0 16px rgba(54,233,255,.08), inset 0 0 0 1px rgba(54,233,255,.04)!important;
}
.card::before,
.ds-card::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  background:radial-gradient(circle at 16% 10%, rgba(54,233,255,.12), transparent 30%), radial-gradient(circle at 84% 14%, rgba(154,99,255,.12), transparent 26%);
}
.card:nth-child(4n+1), .ds-card:nth-child(4n+1){ border-color:rgba(54,233,255,.38)!important; box-shadow:0 0 20px rgba(54,233,255,.10), inset 0 0 0 1px rgba(54,233,255,.04)!important; }
.card:nth-child(4n+2), .ds-card:nth-child(4n+2){ border-color:rgba(154,99,255,.38)!important; box-shadow:0 0 20px rgba(154,99,255,.12), inset 0 0 0 1px rgba(154,99,255,.04)!important; }
.card:nth-child(4n+3), .ds-card:nth-child(4n+3){ border-color:rgba(255,74,113,.38)!important; box-shadow:0 0 20px rgba(255,74,113,.10), inset 0 0 0 1px rgba(255,74,113,.04)!important; }
.card:nth-child(4n+4), .ds-card:nth-child(4n+4){ border-color:rgba(22,236,142,.34)!important; box-shadow:0 0 20px rgba(22,236,142,.10), inset 0 0 0 1px rgba(22,236,142,.04)!important; }
.card img,
.ds-media img{
  background:#fff!important;
  border-radius:24px!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 0 16px rgba(54,233,255,.08)!important;
}
.card .price-new,
.ds-price,
.ds-price strong{ font-weight:800!important; }
.card:nth-child(4n+1) .price-new, .ds-card:nth-child(4n+1) .ds-price{ color:#3ddaff!important; }
.card:nth-child(4n+2) .price-new, .ds-card:nth-child(4n+2) .ds-price{ color:#bc69ff!important; }
.card:nth-child(4n+3) .price-new, .ds-card:nth-child(4n+3) .ds-price{ color:#ff4d76!important; }
.card:nth-child(4n+4) .price-new, .ds-card:nth-child(4n+4) .ds-price{ color:#1de68b!important; }
.bestseller-badge,.flash-badge,.flash-timer{
  background:linear-gradient(90deg,rgba(74,222,255,.14),rgba(162,98,255,.16))!important;
  border:1px solid rgba(98,230,255,.26)!important;
  color:#dffbff!important;
}

/* service cards */
.ds-service-box{
  background:linear-gradient(145deg,rgba(9,21,50,.92),rgba(4,9,24,.96))!important;
  border:1.4px solid rgba(54,233,255,.20)!important;
  box-shadow:0 0 18px rgba(54,233,255,.08), 0 0 30px rgba(154,99,255,.06)!important;
}
.ds-service-icon{
  background:linear-gradient(135deg,rgba(74,222,255,.22),rgba(162,98,255,.22))!important;
}
.ds-service-title{ color:#fff!important; text-shadow:0 0 10px rgba(54,233,255,.08)!important; }
.ds-service-arrow{
  background:linear-gradient(135deg,rgba(16,29,63,.92),rgba(8,14,36,.96))!important;
  color:#5cecff!important;
}

/* bottom nav and support pill */
.zynn-bottom-nav{
  background:linear-gradient(180deg,rgba(8,17,43,.94),rgba(4,9,24,.98))!important;
  border:1px solid rgba(54,233,255,.18)!important;
}
.zynn-bottom-nav a.active,
.zynn-bottom-nav a[aria-current="page"]{
  background:linear-gradient(180deg,rgba(16,35,74,.86),rgba(8,22,54,.94))!important;
  box-shadow:0 0 18px rgba(54,233,255,.12), 0 0 24px rgba(154,99,255,.12)!important;
}
.cs-avatar,#cs-pill,#cs-bubble{ box-shadow:0 0 16px rgba(54,233,255,.16),0 0 30px rgba(154,99,255,.16)!important; }

/* smooth refined interactions */
.card,.ds-card,.wallet-btn,.cyber-actions a,.tab-btn,.ds-tab,.ds-service-box,.nav-login-btn,.nav-user-pill,.zynn-bottom-nav a,.search-wrapper,.ds-search-wrap,.wallet-card,.banner-arrow{ transition:all .26s ease!important; }
@media (hover:hover) and (pointer:fine){
  .card:hover,.ds-card:hover{ transform:translateY(-2px)!important; }
  .tab-btn:hover,.ds-tab:hover,.wallet-btn:hover,.cyber-actions a:hover{ filter:brightness(1.04)!important; transform:translateY(-1px)!important; }
}

/* mobile: keep style but slightly calmer */
@media(max-width:720px){
  .tab-btn,
  .ds-tab{ min-height:58px!important; border-radius:22px!important; font-size:15px!important; }
  .card,
  .ds-card,
  .wallet-card,
  .ds-service-box,
  .zynn-bottom-nav,
  .search-wrapper,
  .ds-search-wrap,
  .navbar,
  .navbar-digital{
    box-shadow:0 0 12px rgba(54,233,255,.08), 0 0 20px rgba(154,99,255,.08)!important;
  }
  .card:nth-child(4n+1), .ds-card:nth-child(4n+1),
  .card:nth-child(4n+2), .ds-card:nth-child(4n+2),
  .card:nth-child(4n+3), .ds-card:nth-child(4n+3),
  .card:nth-child(4n+4), .ds-card:nth-child(4n+4){ box-shadow:0 0 14px rgba(54,233,255,.06)!important; }
  .wallet-btn,
  .cyber-actions a{ box-shadow:0 0 12px rgba(54,233,255,.12),0 0 18px rgba(154,99,255,.12)!important; }
}


/* ===== V22 hard neon reference override ===== */
body .tab-switch{
  width:min(100%, 1120px)!important;
  margin:22px auto 26px!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:16px!important;
}
body .tab-switch .tab-btn{
  position:relative!important;
  min-height:74px!important;
  border-radius:26px!important;
  padding:0 26px!important;
  font-size:clamp(16px,1.2vw,19px)!important;
  font-weight:900!important;
  letter-spacing:-.025em!important;
  border:2px solid rgba(79,121,180,.32)!important;
  background:linear-gradient(180deg,rgba(7,14,34,.92),rgba(6,12,30,.98))!important;
  color:rgba(228,236,248,.82)!important;
  box-shadow:inset 0 0 0 1px rgba(54,233,255,.05), inset 0 -18px 24px rgba(93,73,255,.06), 0 0 18px rgba(54,233,255,.05)!important;
}
body .tab-switch .tab-btn.active{
  border:1px solid rgba(205,243,255,.82)!important;
  background:linear-gradient(90deg,#5beaff 0%, #6dc7ff 46%, #b466ff 100%)!important;
  color:#05111f!important;
  box-shadow:0 0 20px rgba(72,239,255,.26),0 0 36px rgba(166,101,255,.22), inset 0 1px 0 rgba(255,255,255,.35)!important;
}
body .tab-switch .tab-btn:not(.active)::before{
  content:""!important;position:absolute!important;inset:0!important;border-radius:inherit!important;pointer-events:none!important;
  box-shadow:inset 0 0 0 1px rgba(84,238,255,.08), inset 0 -24px 24px rgba(171,104,255,.06)!important;
}

body .section.category-section > h2{
  font-size:clamp(30px,2.4vw,42px)!important;
  font-weight:950!important;
  letter-spacing:-.04em!important;
  margin:10px 0 22px!important;
  color:#fbfdff!important;
  text-shadow:0 0 18px rgba(54,233,255,.08)!important;
}
body .section.category-section .grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;
  gap:22px!important;
}
body .section.category-section .grid .card{
  position:relative!important;
  min-height:338px!important;
  padding:18px 18px 94px!important;
  overflow:hidden!important;
  border-radius:28px!important;
  background:linear-gradient(180deg,rgba(4,14,34,.98),rgba(2,8,21,.99))!important;
  border:1.5px solid rgba(69,223,255,.22)!important;
  box-shadow:0 10px 34px rgba(0,0,0,.28), 0 0 22px rgba(54,233,255,.08), inset 0 0 0 1px rgba(54,233,255,.05)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
}
body .section.category-section .grid .card::before{
  content:attr(data-badge)!important;
  position:absolute!important;
  top:14px!important; left:14px!important;
  max-width:calc(100% - 28px)!important;
  padding:6px 10px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(92,227,255,.16),rgba(86,124,255,.12))!important;
  border:1px solid rgba(135,236,255,.22)!important;
  color:#dffbff!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:-.01em!important;
  z-index:3!important;
  box-shadow:0 0 14px rgba(54,233,255,.06)!important;
}
body .section.category-section .grid .card img{
  width:118px!important;
  height:118px!important;
  object-fit:contain!important;
  display:block!important;
  margin:38px auto 18px!important;
  padding:16px!important;
  border-radius:28px!important;
  background:#fff!important;
  box-shadow:0 14px 32px rgba(0,0,0,.20), 0 0 20px rgba(54,233,255,.08)!important;
}
body .section.category-section .grid .card span{
  display:block!important;
  padding:0!important;
  background:transparent!important;
  color:#fff!important;
  font-size:18px!important;
  font-weight:900!important;
  line-height:1.12!important;
  letter-spacing:-.03em!important;
  text-align:left!important;
  min-height:44px!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:initial!important;
}
body .section.category-section .grid .card span::after{
  content:attr(data-meta)!important;
  display:block!important;
  margin-top:8px!important;
  color:rgba(213,227,245,.78)!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1.25!important;
}
body .section.category-section .grid .card::after{
  content:attr(data-price)!important;
  position:absolute!important;
  left:16px!important; right:16px!important; bottom:16px!important;
  height:44px!important;
  border-radius:16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:15px!important;
  font-weight:900!important;
  letter-spacing:-.01em!important;
  color:#06111f!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 0 16px rgba(54,233,255,.18),0 0 26px rgba(154,99,255,.14)!important;
  background:linear-gradient(90deg,#58ebff 0%,#6cc4ff 48%,#b263ff 100%)!important;
}
/* stronger varied neon */
body .section.category-section .grid .card:nth-child(4n+1){border-color:rgba(65,235,255,.42)!important;box-shadow:0 0 0 1px rgba(65,235,255,.05) inset,0 0 20px rgba(65,235,255,.14)!important;}
body .section.category-section .grid .card:nth-child(4n+1)::after{background:linear-gradient(90deg,#53eaff 0%,#73caff 55%,#af63ff 100%)!important;}
body .section.category-section .grid .card:nth-child(4n+2){border-color:rgba(170,96,255,.42)!important;box-shadow:0 0 0 1px rgba(170,96,255,.05) inset,0 0 20px rgba(170,96,255,.14)!important;}
body .section.category-section .grid .card:nth-child(4n+2)::after{background:linear-gradient(90deg,#55ebff 0%,#8db5ff 48%,#c46fff 100%)!important;}
body .section.category-section .grid .card:nth-child(4n+3){border-color:rgba(255,88,128,.38)!important;box-shadow:0 0 0 1px rgba(255,88,128,.04) inset,0 0 20px rgba(255,88,128,.14)!important;}
body .section.category-section .grid .card:nth-child(4n+3)::after{background:linear-gradient(90deg,#54e7ff 0%,#8b72ff 42%,#ff62c9 100%)!important;color:#fff!important;}
body .section.category-section .grid .card:nth-child(4n+4){border-color:rgba(31,233,141,.34)!important;box-shadow:0 0 0 1px rgba(31,233,141,.04) inset,0 0 20px rgba(31,233,141,.12)!important;}
body .section.category-section .grid .card:nth-child(4n+4)::after{background:linear-gradient(90deg,#53ecff 0%,#69c9ff 42%,#a664ff 100%)!important;}
body .section.category-section .grid .card:hover{transform:translateY(-3px)!important;filter:brightness(1.03)!important;}

/* small screens - match phone reference closer */
@media (max-width: 720px){
  body .tab-switch{
    width:calc(100% - 24px)!important;
    gap:12px!important;
    margin:18px auto 20px!important;
  }
  body .tab-switch .tab-btn{
    min-height:58px!important;
    border-radius:22px!important;
    font-size:15px!important;
    padding:0 12px!important;
  }
  body .section.category-section{width:calc(100% - 24px)!important;padding-bottom:34px!important;}
  body .section.category-section > h2{font-size:28px!important;margin:8px 0 18px!important;}
  body .section.category-section .grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;
  }
  body .section.category-section .grid .card{
    min-height:262px!important;
    padding:14px 14px 72px!important;
    border-radius:24px!important;
  }
  body .section.category-section .grid .card::before{
    top:10px!important;left:10px!important;padding:5px 8px!important;font-size:9px!important;
  }
  body .section.category-section .grid .card img{
    width:88px!important;height:88px!important;margin:34px auto 14px!important;padding:12px!important;border-radius:22px!important;
  }
  body .section.category-section .grid .card span{
    font-size:14px!important;min-height:34px!important;
  }
  body .section.category-section .grid .card span::after{font-size:10.5px!important;margin-top:6px!important;}
  body .section.category-section .grid .card::after{
    left:12px!important;right:12px!important;bottom:12px!important;height:36px!important;border-radius:14px!important;font-size:12px!important;
  }
}


/* =========================================================
   V23 — MATCH GENERATED REFERENCE: CUBE TABS + HARD CARD GLOW
   Fokus: tombol APK Premium/Produk Lainnya seperti referensi,
   card APK bercahaya pinggirnya, tetap rapi di HP dan PC.
   ========================================================= */

:root{
  --v23-cyan:#41edff;
  --v23-blue:#4dbbff;
  --v23-purple:#a463ff;
  --v23-pink:#ff3fb1;
  --v23-red:#ff3672;
  --v23-green:#18f3aa;
  --v23-panel:#050d21;
}

/* ===== TAB APK PREMIUM / PRODUK LAINNYA — MIRIP REFERENSI ===== */
body .tab-switch,
body .ds-tabs{
  width:min(100% - 28px, 1120px)!important;
  margin:24px auto 28px!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:18px!important;
  background:transparent!important;
  border:0!important;
  padding:0!important;
  box-shadow:none!important;
}

body .tab-switch .tab-btn,
body .ds-tabs .ds-tab{
  position:relative!important;
  height:72px!important;
  min-height:72px!important;
  border-radius:26px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  padding:0 22px!important;
  font-size:20px!important;
  font-weight:850!important;
  letter-spacing:-.02em!important;
  overflow:hidden!important;
  isolation:isolate!important;
  transition:transform .22s ease, filter .22s ease, box-shadow .22s ease!important;
}

/* Cube / bag icons inside tabs */
body .tab-switch .tab-btn::before,
body .ds-tabs .ds-tab::before{
  font-family:"Font Awesome 6 Free"!important;
  font-weight:900!important;
  display:inline-grid!important;
  place-items:center!important;
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  font-size:22px!important;
  line-height:1!important;
  margin-right:2px!important;
  position:relative!important;
  z-index:2!important;
}
body .tab-switch .tab-btn:first-child::before,
body .ds-tabs .ds-tab:first-child::before{
  content:"\f1b2"!important; /* cube */
}
body .tab-switch .tab-btn:nth-child(2)::before,
body .ds-tabs .ds-tab:nth-child(2)::before{
  content:"\f290"!important; /* shopping bag */
}

/* active neon pill */
body .tab-switch .tab-btn.active,
body .ds-tabs .ds-tab.active,
body .tab-switch .tab-btn[aria-selected="true"],
body .ds-tabs .ds-tab[aria-selected="true"]{
  background:
    radial-gradient(circle at 16% 40%, rgba(255,255,255,.26), transparent 17%),
    linear-gradient(90deg,#54efff 0%,#55c9ff 38%,#806eff 68%,#b85cff 100%)!important;
  border:1.5px solid rgba(190,246,255,.92)!important;
  color:#071120!important;
  text-shadow:0 1px 0 rgba(255,255,255,.22)!important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.20) inset,
    0 0 22px rgba(65,237,255,.38),
    0 0 42px rgba(164,99,255,.30),
    0 16px 44px rgba(0,0,0,.32)!important;
}
body .tab-switch .tab-btn.active::before,
body .ds-tabs .ds-tab.active::before{
  color:#06203a!important;
  text-shadow:0 0 12px rgba(255,255,255,.28)!important;
}

/* inactive dark neon outline */
body .tab-switch .tab-btn:not(.active),
body .ds-tabs .ds-tab:not(.active){
  background:
    linear-gradient(180deg,rgba(9,17,40,.82),rgba(4,9,24,.96))!important;
  border:1.6px solid rgba(111,133,181,.42)!important;
  color:rgba(232,239,255,.66)!important;
  box-shadow:
    inset 0 0 0 1px rgba(65,237,255,.06),
    inset 0 -24px 28px rgba(164,99,255,.055),
    0 0 18px rgba(65,237,255,.08),
    0 0 30px rgba(164,99,255,.10)!important;
}
body .tab-switch .tab-btn:not(.active)::before,
body .ds-tabs .ds-tab:not(.active)::before{
  color:rgba(210,220,238,.68)!important;
  text-shadow:0 0 12px rgba(65,237,255,.14)!important;
}

/* glowing edge line on active pill */
body .tab-switch .tab-btn.active::after,
body .ds-tabs .ds-tab.active::after{
  content:""!important;
  position:absolute!important;
  inset:1px!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  background:linear-gradient(110deg,rgba(255,255,255,.24),transparent 25%,transparent 70%,rgba(255,255,255,.14))!important;
  z-index:1!important;
}

/* ===== SECTION TITLE LIKE REFERENCE ===== */
body .section.category-section > h2,
body .ds-section-title{
  display:block!important;
  position:relative!important;
  padding-left:52px!important;
  margin:12px 0 28px!important;
  color:#f8fbff!important;
  font-size:clamp(32px,2.7vw,46px)!important;
  line-height:1.02!important;
  font-weight:950!important;
  letter-spacing:-.045em!important;
  text-shadow:0 0 18px rgba(65,237,255,.14)!important;
}
body .section.category-section > h2::before,
body .ds-section-title::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:4px!important;
  top:4px!important;
  width:27px!important;
  height:27px!important;
  border-radius:7px!important;
  transform:rotate(45deg)!important;
  background:linear-gradient(135deg,#53efff,#675cff 55%,#b65cff)!important;
  box-shadow:
    0 0 16px rgba(65,237,255,.55),
    0 0 28px rgba(164,99,255,.34)!important;
}
body .section.category-section > h2::after{
  content:"Aplikasi premium pilihan terbaik untukmu"!important;
  display:block!important;
  margin-top:9px!important;
  color:rgba(226,236,250,.72)!important;
  font-size:clamp(15px,1.2vw,18px)!important;
  line-height:1.2!important;
  font-weight:500!important;
  letter-spacing:0!important;
  text-shadow:none!important;
}

/* ===== APK CARD GRID — STRONG GLOW EDGES ===== */
body .section.category-section .grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important;
  gap:24px!important;
}

body .section.category-section .grid .card[data-badge]{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  min-height:350px!important;
  padding:18px 22px 94px!important;
  border-radius:30px!important;
  background:
    radial-gradient(circle at 50% 14%,rgba(65,237,255,.10),transparent 34%),
    linear-gradient(180deg,rgba(6,16,40,.98),rgba(2,7,19,.99))!important;
  border:2px solid rgba(65,237,255,.46)!important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 18px rgba(65,237,255,.34),
    0 0 42px rgba(65,237,255,.16),
    0 18px 50px rgba(0,0,0,.34)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
}

/* card ambient neon overlay */
body .section.category-section .grid .card[data-badge]::selection{background:transparent!important;}
body .section.category-section .grid .card[data-badge] > *{
  position:relative!important;
  z-index:2!important;
}

/* badge at top */
body .section.category-section .grid .card[data-badge]::before{
  content:attr(data-badge)!important;
  position:absolute!important;
  top:16px!important;
  left:18px!important;
  z-index:4!important;
  width:auto!important;
  max-width:calc(100% - 36px)!important;
  height:auto!important;
  padding:7px 13px!important;
  border-radius:999px!important;
  background:rgba(5,17,39,.74)!important;
  border:1px solid rgba(175,237,255,.33)!important;
  color:#ecfbff!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:700!important;
  letter-spacing:-.01em!important;
  box-shadow:0 0 16px rgba(65,237,255,.18)!important;
}

/* hidden background shine layer */
body .section.category-section .grid .card[data-badge] .z-none{display:none!important;}

/* app icon */
body .section.category-section .grid .card[data-badge] img{
  width:124px!important;
  height:124px!important;
  object-fit:contain!important;
  display:block!important;
  margin:46px auto 22px!important;
  padding:17px!important;
  border-radius:30px!important;
  background:#fff!important;
  box-shadow:
    0 16px 36px rgba(0,0,0,.26),
    0 0 18px rgba(255,255,255,.06),
    0 0 24px rgba(65,237,255,.12)!important;
}

/* title and duration */
body .section.category-section .grid .card[data-badge] span{
  display:block!important;
  width:100%!important;
  min-height:50px!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  color:#fff!important;
  font-size:21px!important;
  line-height:1.04!important;
  font-weight:900!important;
  letter-spacing:-.045em!important;
  text-align:left!important;
  text-shadow:0 0 12px rgba(255,255,255,.08)!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
body .section.category-section .grid .card[data-badge] span::after{
  content:attr(data-meta)!important;
  display:block!important;
  margin-top:10px!important;
  color:rgba(229,238,250,.72)!important;
  font-size:14px!important;
  font-weight:500!important;
  line-height:1.25!important;
  letter-spacing:0!important;
  text-shadow:none!important;
}

/* price button */
body .section.category-section .grid .card[data-price]::after{
  content:attr(data-price)!important;
  position:absolute!important;
  z-index:5!important;
  left:20px!important;
  right:20px!important;
  bottom:20px!important;
  height:52px!important;
  border-radius:20px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:linear-gradient(90deg,#4deaff 0%,#62bdff 48%,#b65cff 100%)!important;
  color:#071120!important;
  font-size:18px!important;
  font-weight:900!important;
  letter-spacing:-.018em!important;
  text-shadow:0 1px 0 rgba(255,255,255,.25)!important;
  box-shadow:
    0 0 18px rgba(65,237,255,.30),
    0 0 34px rgba(182,92,255,.24),
    inset 0 1px 0 rgba(255,255,255,.24)!important;
}

/* per-card varied border glow like reference */
body .section.category-section .grid .card[data-badge]:nth-child(4n+1){
  border-color:rgba(48,232,255,.88)!important;
  box-shadow:0 0 0 1px rgba(48,232,255,.12) inset,0 0 22px rgba(48,232,255,.50),0 0 54px rgba(48,232,255,.22),0 18px 52px rgba(0,0,0,.35)!important;
}
body .section.category-section .grid .card[data-badge]:nth-child(4n+2){
  border-color:rgba(205,64,255,.90)!important;
  box-shadow:0 0 0 1px rgba(205,64,255,.12) inset,0 0 22px rgba(205,64,255,.48),0 0 54px rgba(148,74,255,.22),0 18px 52px rgba(0,0,0,.35)!important;
}
body .section.category-section .grid .card[data-badge]:nth-child(4n+3){
  border-color:rgba(32,242,166,.78)!important;
  box-shadow:0 0 0 1px rgba(32,242,166,.12) inset,0 0 22px rgba(32,242,166,.43),0 0 54px rgba(24,243,170,.18),0 18px 52px rgba(0,0,0,.35)!important;
}
body .section.category-section .grid .card[data-badge]:nth-child(4n+4){
  border-color:rgba(255,54,114,.86)!important;
  box-shadow:0 0 0 1px rgba(255,54,114,.12) inset,0 0 22px rgba(255,54,114,.45),0 0 54px rgba(255,63,177,.20),0 18px 52px rgba(0,0,0,.35)!important;
}

body .section.category-section .grid .card[data-badge]:nth-child(4n+3)::after{
  background:linear-gradient(90deg,#18f3aa 0%,#30d6ff 56%,#6b64ff 100%)!important;
  color:#fff!important;
}
body .section.category-section .grid .card[data-badge]:nth-child(4n+4)::after{
  background:linear-gradient(90deg,#ff2674 0%,#d948ff 54%,#9b63ff 100%)!important;
  color:#fff!important;
}

/* small PRO / PREMIUM pill after product title for first items */
body .section.category-section .grid .card[data-badge]:nth-child(1) span::before,
body .section.category-section .grid .card[data-badge]:nth-child(2) span::before,
body .section.category-section .grid .card[data-badge]:nth-child(3) span::before,
body .section.category-section .grid .card[data-badge]:nth-child(4) span::before{
  content:"PRO"!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin-left:8px!important;
  padding:4px 9px!important;
  border-radius:999px!important;
  vertical-align:middle!important;
  color:#70eeff!important;
  background:rgba(65,237,255,.10)!important;
  border:1px solid rgba(65,237,255,.25)!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:.02em!important;
}
body .section.category-section .grid .card[data-badge]:nth-child(4) span::before{
  content:"PREMIUM"!important;
  color:#ff72a2!important;
  background:rgba(255,54,114,.10)!important;
  border-color:rgba(255,54,114,.25)!important;
}

/* ===== MOBILE RESPONSIVE ===== */
@media(max-width:720px){
  body .tab-switch,
  body .ds-tabs{
    width:calc(100% - 24px)!important;
    gap:12px!important;
    margin:20px auto 24px!important;
  }
  body .tab-switch .tab-btn,
  body .ds-tabs .ds-tab{
    height:64px!important;
    min-height:64px!important;
    border-radius:22px!important;
    font-size:16px!important;
    gap:9px!important;
    padding:0 10px!important;
  }
  body .tab-switch .tab-btn::before,
  body .ds-tabs .ds-tab::before{
    width:22px!important;
    height:22px!important;
    min-width:22px!important;
    font-size:18px!important;
  }

  body .section.category-section{
    width:calc(100% - 24px)!important;
    padding-bottom:36px!important;
  }
  body .section.category-section > h2,
  body .ds-section-title{
    padding-left:42px!important;
    font-size:30px!important;
    margin:8px 0 22px!important;
  }
  body .section.category-section > h2::before,
  body .ds-section-title::before{
    width:22px!important;
    height:22px!important;
    left:4px!important;
    top:5px!important;
  }
  body .section.category-section > h2::after{
    font-size:14px!important;
    margin-top:7px!important;
  }
  body .section.category-section .grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px!important;
  }
  body .section.category-section .grid .card[data-badge]{
    min-height:286px!important;
    padding:14px 12px 74px!important;
    border-radius:24px!important;
    border-width:1.7px!important;
  }
  body .section.category-section .grid .card[data-badge]::before{
    top:10px!important;
    left:10px!important;
    padding:5px 8px!important;
    font-size:8.8px!important;
    max-width:calc(100% - 20px)!important;
  }
  body .section.category-section .grid .card[data-badge] img{
    width:92px!important;
    height:92px!important;
    margin:36px auto 15px!important;
    padding:12px!important;
    border-radius:22px!important;
  }
  body .section.category-section .grid .card[data-badge] span{
    min-height:37px!important;
    font-size:14.8px!important;
    line-height:1.08!important;
    letter-spacing:-.035em!important;
  }
  body .section.category-section .grid .card[data-badge] span::after{
    font-size:10.6px!important;
    margin-top:7px!important;
  }
  body .section.category-section .grid .card[data-price]::after{
    left:11px!important;
    right:11px!important;
    bottom:11px!important;
    height:40px!important;
    border-radius:15px!important;
    font-size:12.3px!important;
  }
  body .section.category-section .grid .card[data-badge]:nth-child(4n+1){
    box-shadow:0 0 16px rgba(48,232,255,.42),0 0 30px rgba(48,232,255,.18)!important;
  }
  body .section.category-section .grid .card[data-badge]:nth-child(4n+2){
    box-shadow:0 0 16px rgba(205,64,255,.40),0 0 30px rgba(148,74,255,.18)!important;
  }
  body .section.category-section .grid .card[data-badge]:nth-child(4n+3){
    box-shadow:0 0 16px rgba(32,242,166,.34),0 0 30px rgba(32,242,166,.14)!important;
  }
  body .section.category-section .grid .card[data-badge]:nth-child(4n+4){
    box-shadow:0 0 16px rgba(255,54,114,.36),0 0 30px rgba(255,54,114,.16)!important;
  }
}

@media(max-width:390px){
  body .tab-switch .tab-btn,
  body .ds-tabs .ds-tab{
    height:58px!important;
    min-height:58px!important;
    font-size:14px!important;
  }
  body .section.category-section .grid{
    gap:12px!important;
  }
  body .section.category-section .grid .card[data-badge]{
    min-height:266px!important;
  }
  body .section.category-section .grid .card[data-badge] img{
    width:84px!important;
    height:84px!important;
  }
  body .section.category-section .grid .card[data-price]::after{
    font-size:11px!important;
  }
}