/* Qyon landing page — custom styles complementing Tailwind */

html {
  scroll-behavior: smooth;
}

body {
  padding-bottom: 0;
}

/* Hero grid background pattern */
.hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Pulsing CTA button to draw attention */
@keyframes ctaPulse {
  0%   { box-shadow: 0 0 0 0 rgba(6, 214, 160, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(6, 214, 160, 0); }
  100% { box-shadow: 0 0 0 0 rgba(6, 214, 160, 0); }
}
.cta-pulse {
  animation: ctaPulse 2.2s infinite;
}

/* Sticky mobile CTA spacing so content isn't hidden behind it */
@media (max-width: 639px) {
  body {
    padding-bottom: 72px;
  }
}

/* Smooth details/summary arrow + subtle transitions */
details summary::-webkit-details-marker {
  display: none;
}
details summary {
  list-style: none;
}

/* Form focus/success transitions */
#hero-form, #main-form, #hero-form-success, #main-form-success {
  transition: opacity 0.25s ease;
}

/* Card hover lift */
article.group {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
article.group:hover {
  transform: translateY(-4px);
}