/* ── Pixel Interactive – Custom Styles ── */
/* Color Palette: Electric Playground */
/* Primary: #6d5dfc (Purple) | Secondary: #ff6b6b (Coral) | Accents: #ffd93d (Yellow), #00f5d4 (Cyan) */

/* Background */
.bg-pix {
  background: radial-gradient(ellipse at top left, #1a0b3e 0%, #0b0f1a 60%);
  min-height: 100vh;
}

/* Nav link hover */
.nav-link {
  color: #d1d5db;
  font-size: 0.9rem;
  transition: color 0.2s;
}
.nav-link:hover { color: #fff; }

/* Orbit Animation */
.orbit {
  position: absolute;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
  animation: orbit-spin 20s linear infinite;
}
.orbit:nth-child(2) { animation-duration: 30s; }
.orbit:nth-child(3) { animation-duration: 42s; }

@keyframes orbit-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.orbit-item {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(109, 93, 252, 0.25);
  backdrop-filter: blur(8px);
  padding: 10px 12px;
  border-radius: 9999px;
  border: 1px solid rgba(109,93,252,0.4);
  font-size: 1.1rem;
  box-shadow: 0 0 20px rgba(109,93,252,0.3);
}

/* Glow Button */
.btn-glow {
  background: linear-gradient(135deg, #6d5dfc, #7c6bfd);
  box-shadow: 0 0 25px rgba(109,93,252,0.6);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-glow:hover {
  background: linear-gradient(135deg, #7c6bfd, #8b7dfc);
  box-shadow: 0 0 40px rgba(109,93,252,0.9), 0 0 20px rgba(0,245,212,0.4);
  transform: translateY(-2px);
}

/* Card glass */
.card-glass {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-glass:hover {
  border-color: rgba(109,93,252,0.6);
  box-shadow: 0 8px 32px rgba(109,93,252,0.15);
  transform: translateY(-4px);
}

/* Section Fade-In */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stat counter */
.stat-number {
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #8b7dfc, #00f5d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

/* Form inputs */
.pix-input {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 0.5rem;
  color: #fff;
  padding: 0.65rem 1rem;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.pix-input::placeholder { color: rgba(255,255,255,0.35); }
.pix-input:focus {
  border-color: #00f5d4;
  box-shadow: 0 0 0 3px rgba(0,245,212,0.25);
}

/* Badge */
.badge {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge-new     { background: rgba(109,93,252,0.25); color: #a78bfa; border: 1px solid rgba(109,93,252,0.4); }
.badge-read    { background: rgba(59,130,246,0.25); color: #93c5fd; border: 1px solid rgba(59,130,246,0.4); }
.badge-replied { background: rgba(0,245,212,0.2); color: #6ee7b7; border: 1px solid rgba(0,245,212,0.4); }
.badge-archived{ background: rgba(107,114,128,0.25);color: #9ca3af; border: 1px solid rgba(107,114,128,0.4); }
.badge-pending   { background: rgba(255,217,61,0.25); color: #ffd93d; border: 1px solid rgba(255,217,61,0.5); }
.badge-confirmed { background: rgba(0,245,212,0.25); color: #6ee7b7; border: 1px solid rgba(0,245,212,0.5); }
.badge-cancelled { background: rgba(255,107,107,0.25);  color: #ff6b6b; border: 1px solid rgba(255,107,107,0.5); }
.badge-completed { background: rgba(109,93,252,0.25); color: #a78bfa; border: 1px solid rgba(109,93,252,0.5); }
.badge-demo       { background: rgba(255,217,61,0.25); color: #ffd93d; border: 1px solid rgba(255,217,61,0.5); }
.badge-production { background: rgba(0,245,212,0.25); color: #6ee7b7; border: 1px solid rgba(0,245,212,0.5); }
.badge-both       { background: rgba(109,93,252,0.25); color: #a78bfa; border: 1px solid rgba(109,93,252,0.5); }

/* Scroll to top button */
#scrollTop {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 2.5rem;
  height: 2.5rem;
  background: linear-gradient(135deg, #6d5dfc, #7c6bfd);
  border-radius: 9999px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
  box-shadow: 0 0 25px rgba(109,93,252,0.7);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#scrollTop.show { display: flex; }
#scrollTop:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 35px rgba(109,93,252,1), 0 0 15px rgba(0,245,212,0.5);
}

/* ── Playful Accent Utilities ─────────────────────────────────── */

/* Gradient text - Electric Playground */
.text-gradient-electric {
  background: linear-gradient(135deg, #6d5dfc, #00f5d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-coral {
  background: linear-gradient(135deg, #ff6b6b, #ffd93d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-sunny {
  background: linear-gradient(135deg, #ffd93d, #ffbe0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glow effects with different colors */
.glow-purple { box-shadow: 0 0 20px rgba(109,93,252,0.6); }
.glow-cyan   { box-shadow: 0 0 20px rgba(0,245,212,0.6); }
.glow-yellow { box-shadow: 0 0 20px rgba(255,217,61,0.6); }
.glow-coral  { box-shadow: 0 0 20px rgba(255,107,107,0.6); }

/* Animated gradient border */
.gradient-border {
  position: relative;
  background: linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.05)) padding-box,
              linear-gradient(135deg, #6d5dfc, #00f5d4, #ffd93d) border-box;
  border: 2px solid transparent;
  border-radius: 1rem;
}

/* Service type badges - vibrant & playful */
.badge-photobooth { 
  background: linear-gradient(135deg, rgba(109,93,252,0.3), rgba(109,93,252,0.1)); 
  color: #a78bfa; 
  border: 1px solid rgba(109,93,252,0.6);
}
.badge-minigame { 
  background: linear-gradient(135deg, rgba(255,217,61,0.3), rgba(255,217,61,0.1)); 
  color: #ffd93d; 
  border: 1px solid rgba(255,217,61,0.6);
}
.badge-ai { 
  background: linear-gradient(135deg, rgba(0,245,212,0.3), rgba(0,245,212,0.1)); 
  color: #6ee7b7; 
  border: 1px solid rgba(0,245,212,0.6);
}
.badge-custom { 
  background: linear-gradient(135deg, rgba(255,107,107,0.3), rgba(255,107,107,0.1)); 
  color: #ff6b6b; 
  border: 1px solid rgba(255,107,107,0.6);
}

/* Status indicators with glow */
.status-active::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #00f5d4;
  border-radius: 50%;
  margin-right: 6px;
  box-shadow: 0 0 10px #00f5d4;
}
.status-pending::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #ffd93d;
  border-radius: 50%;
  margin-right: 6px;
  box-shadow: 0 0 10px #ffd93d;
}