.zp-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:999px;
  padding:12px 18px;
  text-decoration:none;
  font-weight:860;
  letter-spacing:.14em;
  text-transform:uppercase;
  border:1px solid transparent;
  cursor:pointer;
  user-select:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,filter .18s ease;
  -webkit-tap-highlight-color:transparent;
  isolation:isolate;
}
.zp-btn__label{position:relative;z-index:2}
.zp-btn__fx{
  position:absolute;
  inset:-2px;
  border-radius:999px;
  opacity:0;
  z-index:1;
  background:var(--grad-sheen);
  transform:translateX(-120%) skewX(-18deg);
}

.zp-btn--primary{
  background:linear-gradient(180deg,rgba(240,255,107,.92),rgba(199,255,0,.76));
  color:rgba(8,10,8,.92);
  box-shadow:0 18px 70px rgba(0,0,0,.62),0 0 0 1px rgba(240,255,107,.20),0 0 44px rgba(199,255,0,.10);
}
.zp-btn--primary:hover{
  transform:translateY(-1px);
  filter:saturate(1.12);
}
.zp-btn--primary:active{transform:translateY(0)}
.zp-btn--primary:hover .zp-btn__fx{opacity:1;animation:zp-sheen .9s ease}

.zp-btn--ghost{
  background:rgba(16,21,20,.55);
  color:rgba(235,233,223,.86);
  border-color:rgba(235,241,228,.10);
}
.zp-btn--ghost:hover{
  transform:translateY(-1px);
  border-color:var(--zp-stroke-2);
  box-shadow:var(--shadow-neon);
}
.zp-btn--ghost:active{transform:translateY(0)}
.zp-btn--ghost:hover .zp-btn__fx{opacity:1;animation:zp-sheen .9s ease}

@media (prefers-reduced-motion:reduce){
  .zp-btn{transition:none}
  .zp-btn__fx{display:none}
}