/* ─── BUTTONS — shared component (used in hero + cta) ───────────── */

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.75rem;
  position: relative;
  overflow: hidden;
  background-color: transparent;
  color: rgba(255,255,255,0.80);
  font-size: 0.85rem;
  border-radius: 10px;
  border: none;
  text-decoration: none;
  box-shadow:
    0 0 0 1.5px rgba(0,192,127,0.30),
    0 0 10px 1px rgba(0,192,127,0.08);
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease, color 0.2s;
  animation: btn-secondary-breathe 3.2s ease-in-out infinite;
}

.btn-secondary::before {
  content: '';
  position: absolute;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 55%,
    rgba(0, 192, 127, 0.25) 82%,
    rgba(0, 192, 127, 0.55) 100%
  );
  z-index: 0;
  animation: btn-spin-beam 3s linear infinite;
}

.btn-secondary::after {
  content: '';
  position: absolute;
  inset: 1.5px;
  background: rgba(10, 10, 10, 0.92);
  border-radius: 9px;
  z-index: 1;
  transition: background 0.4s ease;
}

.btn-secondary span,
.btn-secondary svg {
  position: relative;
  z-index: 10;
}

.btn-secondary:hover {
  color: #fff;
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 0 0 1.5px rgba(0,192,127,0.65),
    0 0 18px 4px rgba(0,192,127,0.20);
}

.btn-secondary:hover::after {
  background: linear-gradient(180deg, rgba(0,192,127,0.10), rgba(10,10,10,0.92));
}

@keyframes btn-secondary-breathe {
  0%,100% { box-shadow: 0 0 0 1.5px rgba(0,192,127,0.30), 0 0 10px 1px rgba(0,192,127,0.08); }
  50%      { box-shadow: 0 0 0 1.5px rgba(0,192,127,0.55), 0 0 16px 3px rgba(0,192,127,0.14); }
}

.btn-secondary svg { width: 15px; height: 15px; }

/* ─── BTN PRIMARY — BEAM ROTANTE INTERNO (tecnica ::before/::after) ── */

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1.05rem 2.4rem;
  position: relative;
  overflow: hidden;
  background-color: transparent;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  border-radius: 10px;
  border: none;
  text-decoration: none;
  box-shadow:
    0 0 0 1.5px rgba(0,192,127,0.55),
    0 0 14px 2px rgba(0,192,127,0.20),
    0 0 36px 5px rgba(0,192,127,0.09);
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease;
  animation: btn-glow-breathe 3.2s ease-in-out infinite;
}

/* figura conica rotante — riempie tutto il pulsante */
.btn-primary::before {
  content: '';
  position: absolute;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 50%,
    rgba(0, 192, 127, 0.4) 80%,
    #00c07f 100%
  );
  z-index: 0;
  animation: btn-spin-beam 3s linear infinite;
}

/* maschera scura interna — crea effetto bordo luminoso */
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 1.5px;
  background: linear-gradient(180deg, #141414, #0a0a0a);
  border-radius: 9px;
  z-index: 1;
  transition: background 0.4s ease;
}

/* svg e testo sopra la maschera */
.btn-primary svg,
.btn-primary span {
  position: relative;
  z-index: 10;
}

.btn-primary svg { width: 16px; height: 16px; flex-shrink: 0; }

@keyframes btn-spin-beam {
  0%   { transform: rotate(0deg);   }
  100% { transform: rotate(360deg); }
}

@keyframes btn-glow-breathe {
  0%,100% {
    box-shadow:
      0 0 0 1.5px rgba(0,192,127,0.55),
      0 0 14px 2px rgba(0,192,127,0.20),
      0 0 36px 5px rgba(0,192,127,0.09);
  }
  50% {
    box-shadow:
      0 0 0 1.5px rgba(0,192,127,0.85),
      0 0 22px 5px rgba(0,192,127,0.40),
      0 0 55px 10px rgba(0,192,127,0.18);
  }
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 0 0 1.5px rgba(0,192,127,0.90),
    0 0 28px 7px rgba(0,192,127,0.50),
    0 0 60px 12px rgba(0,192,127,0.22);
}

/* hover: interno diventa leggermente verde (glass effect) */
.btn-primary:hover::after {
  background: linear-gradient(180deg, rgba(0,192,127,0.15), #0a0a0a);
}

.btn-primary:active {
  transform: translateY(0) scale(0.972);
  transition-duration: 0.07s;
}