/* Hero Section */
.hero {
    max-width: 1200px;
    margin: 60px auto 80px;
    padding: 60px 40px;
    text-align: center;
}

.hero h1 {
    font-size: 56px;
    font-weight: 700;
    color: #0F172A;
    letter-spacing: -0.025em;
    margin-bottom: 20px;
    line-height: 1.15;
    animation: fadeInUp 0.8s ease-out forwards, slideInScale 0.8s ease-out forwards;
    opacity: 0;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInScale {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(30px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.hero p {
    font-size: 18px;
    color: #64748B;
    max-width: 640px;
    margin: 0 auto;
    font-weight: 400;
    line-height: 1.7;
    animation: fadeInUp 0.8s ease-out 0.2s forwards;
    opacity: 0;
}

@media (max-width: 1024px) {
    .hero {
        margin: 40px auto 60px;
        padding: 48px 32px;
    }

    .hero h1 {
        font-size: 48px;
    }

    .hero p {
        font-size: 17px;
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 32px 20px;
        margin: 32px auto 48px;
    }

    .hero h1 {
        font-size: 32px;
        margin-bottom: 16px;
    }

    .hero p {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 24px 16px;
        margin: 24px auto 36px;
    }

    .hero h1 {
        font-size: 28px;
        margin-bottom: 12px;
    }

    .hero p {
        font-size: 14px;
    }
}