.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 620ms ease-out, transform 620ms ease-out;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.cta-main {
  position: relative;
  isolation: isolate;
  box-shadow: 0 0 0 rgba(0, 209, 255, 0);
  animation: ctaPulse 2.4s ease-in-out infinite;
}

@keyframes ctaPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 209, 255, 0), 0 0 0 0 rgba(0, 209, 255, 0);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(0, 209, 255, 0.12), 0 0 36px rgba(0, 209, 255, 0.28);
  }
}

.card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    border-color: rgba(0, 209, 255, 0.3);
    box-shadow: 0 0 18px rgba(0, 209, 255, 0.1);
  }
}

@media (max-width: 639px) {
  h1 { letter-spacing: -0.02em; }
}