html {
  scroll-behavior: smooth;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-animate {
  animation: fade-up 0.8s ease-out both;
}

.product-card:focus-within {
  outline: 2px solid #ff6b00;
  outline-offset: 2px;
}

.ht-gradient-text {
  background: linear-gradient(135deg, #ff6b00 0%, #ff9a4d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}