.fuz-hero {
  @apply relative overflow-hidden text-center py-32 px-6;

  background: linear-gradient(
    to right,
    var(--fuz-hero-from),
    var(--fuz-hero-to)
  );
  color: var(--fuz-text);
}

.fuz-hero-bg {
  @apply absolute top-0 left-0 w-full h-full object-cover;
  opacity: 0.3;
}

.fuz-hero-inner {
  @apply relative max-w-7xl mx-auto;
  color: var(--fuz-text);
}

.fuz-hero-title {
  @apply text-5xl md:text-7xl font-extrabold leading-tight mb-6;
  color: var(--fuz-text);
}

.fuz-hero-subtitle {
  @apply text-xl md:text-4xl font-semibold mb-2 opacity-0;
  color: var(--fuz-text-subtle);

  /* Animacja główna */
  animation-name: fade-in;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards; 

  /* Opóźnienie zależne od numeru elementu */
  /* animation-delay: calc(var(--delay) * 0.3s); */
}

.fuz-hero-subline {
    @apply text-xl md:text-4xl font-semibold mb-2 opacity-0;
    color: var(--fuz-text-subtle);
    animation: fade-in 0.3s ease-out forwards;
    animation-delay: calc(var(--delay) * 0.4s);
}

.fuz-hero-description {
  @apply max-w-6xl mx-auto text-lg md:text-xl my-6 leading-relaxed;
  color: var(--fuz-text-subtle);
}

.fuz-hero-cta {
  @apply flex justify-center items-center flex-wrap gap-4 mt-8;
}

.fuz-hero-cta .btn-primary {
  background-color: var(--fuz-accent);
  color: white;
}

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