#cursor-dot,
#cursor-ring {
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  transform: translate(-50%, -50%);
  z-index: var(--z-cursor);
}

#cursor-dot {
  background: var(--cyan);
  border-radius: var(--radius-circle);
  height: var(--cursor-dot-size);
  transition: transform var(--cursor-transition-dot) linear;
  width: var(--cursor-dot-size);
}

#cursor-ring {
  border: 1.5px solid var(--cyan);
  border-radius: var(--radius-circle);
  height: var(--cursor-ring-size);
  opacity: 0.6;
  transition: width var(--cursor-transition-ring) var(--ease-out),
    height var(--cursor-transition-ring) var(--ease-out),
    border-color var(--cursor-transition-ring) var(--ease-out),
    background var(--cursor-transition-ring) var(--ease-out),
    opacity var(--cursor-transition-ring) var(--ease-out);
  width: var(--cursor-ring-size);
}

#cursor-ring.hovered {
  background: var(--cyan-dim);
  height: var(--cursor-ring-hover-size);
  width: var(--cursor-ring-hover-size);
}

#cursor-ring.card-hover {
  border-color: var(--violet);
}

body.cursor-hidden #cursor-dot,
body.cursor-hidden #cursor-ring {
  opacity: 0;
}

body.cursor-active a,
body.cursor-active button,
body.cursor-active .service-card,
body.cursor-active .job-card,
body.cursor-active .tech-tile,
body.cursor-active .pricing-card {
  cursor: none;
}

.btn-primary,
.btn-ghost,
.btn-whatsapp,
.btn-nav-cta,
.filter-btn {
  align-items: center;
  border-radius: var(--radius-pill);
  display: inline-flex;
  font-weight: var(--weight-bold);
  gap: var(--space-xs);
  justify-content: center;
  padding: 0.9rem 2rem;
  transition: all var(--duration-base) var(--ease-out);
}

.btn-primary {
  background: var(--grad-brand);
  border: var(--border-glow);
  box-shadow: var(--glow-cyan-sm);
  color: var(--white);
}

.btn-primary:hover {
  box-shadow: var(--glow-cyan-md);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  border: var(--border-glow);
  color: var(--cyan);
}

.btn-ghost:hover {
  background: var(--cyan-dim);
  transform: translateY(-2px);
}

.btn-whatsapp {
  background: var(--green-wa);
  border: var(--border-subtle);
  color: var(--white);
  padding: 1rem 2.4rem;
}

.btn-whatsapp:hover {
  box-shadow: 0 0 40px var(--wa-pulse-shadow);
  transform: scale(1.03);
}

.full {
  width: 100%;
}

.hero-label {
  align-items: center;
  background: var(--cyan-dim);
  border: var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--cyan);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: var(--size-label);
  gap: var(--space-xs);
  letter-spacing: var(--tracking-wide);
  padding: 0.55rem 1rem;
}

.label-dot,
.trust-dot {
  animation: pulseDot 2s ease-in-out infinite;
  background: var(--green-wa);
  border-radius: var(--radius-circle);
  height: 6px;
  width: 6px;
}

.hiring-dot {
  animation: pulseDot 2s ease-in-out infinite;
  background: var(--green-wa);
  border-radius: var(--radius-circle);
  display: inline-block;
  height: 6px;
  margin-left: var(--space-xs);
  width: 6px;
}

.whatsapp-float {
  align-items: center;
  background: var(--green-wa);
  border: var(--border-glow);
  border-radius: var(--radius-circle);
  bottom: var(--space-md);
  box-shadow: 0 0 0 0 var(--wa-pulse-shadow);
  color: var(--white);
  display: inline-flex;
  font-size: 1.5rem;
  height: 56px;
  justify-content: center;
  position: fixed;
  right: var(--space-md);
  width: 56px;
  z-index: var(--z-float);
  animation: waPulse 2s infinite;
}

.wa-tooltip {
  background: var(--bg-card);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--gray-100);
  font-size: var(--size-small);
  opacity: 0;
  padding: 0.4rem 0.6rem;
  position: absolute;
  right: 120%;
  transform: translateY(6px);
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.whatsapp-float:hover .wa-tooltip {
  opacity: 1;
  transform: translateY(0);
}