/* ── Reset & base ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #0a0a0a; margin: 0; }

/* ── Grain overlay ────────────────────────────── */
.grain::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.25;
}

/* ── Selection ────────────────────────────────── */
::selection { background: #00a2dc; color: #0a0a0a; }

/* ── Animations ───────────────────────────────── */
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.cursor-blink { animation: blink 1s step-end infinite; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.6s ease-out both; }

/* ── Link rows (bio page) ─────────────────────── */
.link-row {
  position: relative;
  cursor: pointer;
  display: block;
  width: 100%;
  overflow: hidden;
  text-align: left;
  border-bottom: 1px solid #26262380;
  padding: 1.5rem 0.85rem 1.5rem 0.85rem;
  background: var(--surface);
  transition: all 0.3s;
  outline: none;
}
@media (min-width: 768px) {
  .link-row { padding-top: 2rem; padding-bottom: 2rem; }
}
.link-row:hover,
.link-row:focus-visible {
  padding-left: 1.5rem;
  background: var(--hover-surface);
}
.link-row .glow-left {
  position: absolute;
  left: -40px;
  top: 50%;
  height: 7rem;
  width: 7rem;
  transform: translateY(-50%);
  border-radius: 9999px;
  filter: blur(24px);
  background: var(--glow);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.3s;
}
.link-row:hover .glow-left { opacity: 0.95; }
.link-row .glow-right {
  position: absolute;
  right: 2rem;
  top: 50%;
  height: 5rem;
  width: 5rem;
  transform: translateY(-50%);
  border-radius: 9999px;
  filter: blur(24px);
  background: var(--glow);
  opacity: 0.18;
  pointer-events: none;
  transition: opacity 0.3s;
}
.link-row:hover .glow-right { opacity: 0.32; }
.link-row .bg-image {
  position: absolute;
  inset: 0;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.1;
  pointer-events: none;
  transition: opacity 0.3s;
}
.link-row:hover .bg-image { opacity: 0.18; }
.link-row .row-num {
  transition: color 0.3s;
  color: #6b6b66;
}
.link-row:hover .row-num { color: #00a2dc; }
.link-row .row-arrow {
  transition: all 0.3s;
  color: #6b6b66;
  transform: translateX(0);
}
.link-row:hover .row-arrow {
  color: #00a2dc;
  transform: translateX(6px);
}

/* ── CTA button ───────────────────────────────── */
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2.5rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid;
  transition: all 0.3s;
  cursor: pointer;
}
.cta-btn--whatsapp {
  color: #34d399;
  border-color: #34d39940;
  background: #34d39908;
}
.cta-btn--whatsapp:hover {
  background: #34d39918;
  border-color: #34d39980;
  box-shadow: 0 0 30px #34d39920;
}
.cta-btn--hotmart {
  color: #ffd040;
  border-color: #ffd04040;
  background: #ffd04008;
}
.cta-btn--hotmart:hover {
  background: #ffd04018;
  border-color: #ffd04080;
  box-shadow: 0 0 30px #ffd04020;
}