body {
      font-family: 'Lexend Deca', sans-serif;
      transition: background 0.3s, color 0.3s;
}

    /* Начальное состояние для анимации появления блоков feature */
.feature {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    /* Класс для видимых блоков */
.feature.visible {
      opacity: 1;
      transform: translateY(0);
}

    /* Начальное состояние для анимации */
body.fade-in {
      opacity: 0;
      transition: opacity 0.7s ease-in-out;
}

    /* Когда класс removed, тело становится видимым */
body.fade-in.show {
      opacity: 1;
}
.typing-text {
        border-right: 2px solid #000000;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        display: inline-block;
}
    
    /* Мигающий курсор во время печати */
@keyframes blink-caret {
      0%, 100% { border-color: transparent; }
      50% { border-color: #0ea5e9; }
}
    
.typing-text.typing {
        animation: typing-cursor 0.7s infinite;
}
    
.dark .typing-text {
        animation: typing-cursor 0.7s infinite;
        border-right-color: #ffffff;
}
.service-card {
    background-color: white;
    color: #1e293b;
    border: 1px solid #d1d5db; /* gray-300 */
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

    /* Анимация появления при скролле */
    opacity: 0;
    transform: translateY(30px);
    transition:
      opacity 0.6s ease-out,
      transform 0.6s ease-out,
      box-shadow 0.3s ease,
      border-color 0.3s ease;
}

.service-card.visible {
    opacity: 1;
    transform: translateY(0);
}

  /* Hover-анимация */
.service-card:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: #0ea5e9; /* sky-500 */
    box-shadow: 0 12px 25px rgba(14, 165, 233, 0.25),
                0 6px 12px rgba(0, 0, 0, 0.08);
}

  /* Заголовок оживает */
.service-card h3 {
    transition: color 0.3s ease, transform 0.3s ease;
}
.service-card:hover h3 {
    color: #0284c7; /* sky-600 */
    transform: translateY(-2px);
}

  /* Текст плавно становится контрастнее */
.service-card p {
    transition: color 0.3s ease;
}
.service-card:hover p {
    color: #334155; /* slate-700 */
}

  /* --- Dark mode --- */
.dark .service-card {
    background-color: #1e293b; /* slate-800 */
    color: #f1f5f9; /* slate-100 */
    border: 1px solid #334155; /* slate-700 */
}

.dark .service-card:hover {
    border-color: #38bdf8; /* sky-400 */
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.4),
                0 0 30px rgba(56, 189, 248, 0.2);
}

.dark .service-card:hover h3 {
    color: #38bdf8;
}

.dark .service-card:hover p {
    color: #e2e8f0; /* slate-200 */
}


@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn {
  animation: fadeIn 0.8s forwards;
}
.delay-200 { animation-delay: 0.2s; }
.delay-400 { animation-delay: 0.4s; }
.delay-600 { animation-delay: 0.6s; }
.delay-800 { animation-delay: 0.8s; }