@keyframes rattl-wave {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}
.hero-bar { transform-origin: 50% 100%; animation: rattl-wave 1.1s ease-in-out infinite; }

@media (max-width: 1023px) {
  .home-hero-section > .absolute {
    overflow: hidden;
  }

  .home-hero-section > .absolute > div {
    width: min(800px, 100vw) !important;
    height: min(800px, 100vw) !important;
  }
}

@media (max-width: 767px) {
  #home {
    overflow-x: clip;
  }

  .home-hero-section {
    overflow-x: clip;
  }

  .home-hero-container {
    padding-top: 2.75rem !important;
    padding-bottom: 3.5rem !important;
  }

  .home-hero-grid {
    gap: 2.5rem !important;
    min-width: 0;
  }

  .home-hero-copy,
  #hero-demo-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .home-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .home-hero-copy > * {
    max-width: 100%;
  }

  [data-cms-key="hero_badge"] {
    white-space: normal;
  }

  [data-cms-key="hero_title"] {
    width: 100%;
    max-width: 21.5rem;
    font-size: clamp(2rem, 8.7vw, 2.55rem) !important;
    line-height: 1.16 !important;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  [data-cms-key="hero_description"] {
    width: 100%;
    max-width: 21.5rem;
    font-size: 1rem !important;
    line-height: 1.8 !important;
  }

  .home-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 21.5rem;
    gap: 0.75rem !important;
  }

  #hero-primary-link,
  #hero-secondary-link {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-inline: 1.25rem !important;
  }

  .home-hero-points {
    justify-content: center;
    width: 100%;
    max-width: 21.5rem;
    gap: 0.65rem 1rem !important;
  }

  #hero-demo-shell {
    margin-inline: 0 !important;
  }

  .hero-demo-glow {
    display: none !important;
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes ctaFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

@keyframes demoPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 24px 60px rgba(20, 184, 166, 0.14); }
  50% { transform: scale(1.015); box-shadow: 0 32px 80px rgba(20, 184, 166, 0.24); }
}

.demo-card-active {
  animation: demoPulse 1.2s ease-in-out 2;
  border-color: rgba(20, 184, 166, 0.5) !important;
}

.demo-badge-active {
  background: #dcfce7 !important;
  color: #047857 !important;
  border-color: #86efac !important;
}

.demo-feedback-active {
  background: #f0fdfa !important;
  border-color: #99f6e4 !important;
}