h2 {
      font-size: clamp(2rem, 3vw, 2.5rem);
      margin-bottom: 24px;
      font-weight: bold;
      color: #2c3e50;
    }

    .highlight-text {
      color: var(--primary);
    }

    h2 span {
      opacity: 0;
      display: inline-block;
      animation: fadeInUp 1s forwards;
    }

    h2 span:nth-child(1) { animation-delay: 0s; }
    h2 span:nth-child(2) { animation-delay: 0.5s; }
    h2 span:nth-child(3) { animation-delay: 1s; }
    h2 span:nth-child(4) { animation-delay: 1.5s; }
    h2 span:nth-child(5) { animation-delay: 2s; }
    h2 span:nth-child(6) { animation-delay: 2.5s; }
    h2 span:nth-child(7) { animation-delay: 3s; }
    h2 span:nth-child(8) { animation-delay: 3.5s; }
    h2 span:nth-child(9) { animation-delay: 4.0s; }
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
   .typing {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1s ease;
}

.typing.visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.step {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp 0.5s ease forwards;
}

/* Animation delays */
.step-1 { animation-delay: 0.5s; }
.step-2 { animation-delay: 1s; }
.step-3 { animation-delay: 1.5s; }
.step-4 { animation-delay: 2s; }
.step-5 { animation-delay: 2.5s; }
.step-6 { animation-delay: 3s; }
.step-7 { animation-delay: 3.5s; }
.step-8 { animation-delay: 4s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}