/* =============================================
   MISTYOZ AI — peerx.css
   ============================================= */

/* Hero glow */
.peerx-glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 600px;
  background: radial-gradient(ellipse at top center,
    rgba(107, 141, 247, 0.08) 0%,
    transparent 62%);
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 640px) {
  .peerx-glow { width: 340px; height: 320px; }
}


/* =============================================
   PLATFORM PILLS
   ============================================= */
.platform-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border: 1px solid #1e1e1e;
  border-radius: 999px;
  font-size: 0.8rem;
  color: #888;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.platform-pill:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}


/* =============================================
   COMING SOON CARD
   ============================================= */
.peerx-coming-card {
  background: #080808;
}

.peerx-card-glow {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 480px;
  height: 380px;
  background: radial-gradient(ellipse at top right,
    rgba(107, 141, 247, 0.07) 0%,
    transparent 62%);
  pointer-events: none;
  z-index: 0;
}


/* =============================================
   PULSING DOT
   ============================================= */
.peerx-pulse {
  animation: peerx-pulse 2.4s ease-in-out infinite;
}

@keyframes peerx-pulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(107,141,247,0.5); }
  50%       { opacity: 0.6; box-shadow: 0 0 0 5px rgba(107,141,247,0); }
}