/* ============ Custom Styles for PersonifyUX Marketing Site ============ */

/* Smooth scroll */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

/* Hero gradient background */
.hero-gradient {
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(37, 99, 235, 0.06) 0%, transparent 70%);
}

/* Hero card entrance animation */
.hero-card {
  animation: hero-card-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.2s;
}

@keyframes hero-card-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Persona card hover lift */
.persona-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.persona-card:hover {
  transform: translateY(-4px);
}

/* Header shadow on scroll — handled by a tiny inline script if desired,
   but for a no-JS approach we rely on the static border */

/* Selection color */
::selection {
  background-color: rgba(37, 99, 235, 0.15);
  color: #111827;
}

/* Focus ring for accessibility */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
  border-radius: 4px;
}