.hero-title {
    color: #ffffff;
    font-size: clamp(2.1rem, 1.8rem + 1.5vw, 2.6rem);
    line-height: 1.12;
    font-weight: 700;
}

.hero-highlight {
    color: var(--thot-green-2);
}

.hero-enter-left {
    animation: heroEnterLeft 0.55s ease-out both;
}

.hero-enter-right {
    animation: heroEnterRight 0.55s ease-out 0.08s both;
}

@keyframes heroEnterLeft {
    from {
        transform: translateX(-12px);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes heroEnterRight {
    from {
        transform: translateX(12px);
    }

    to {
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-enter-left,
    .hero-enter-right {
        animation: none;
        transform: none;
    }
}