.hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: var(--color-white);
    padding: var(--space-3xl) 0;
    text-align: center;
}

.hero__title {
    font-size: var(--fs-hero);
    margin-bottom: var(--space-md);
}

.hero__subtitle {
    font-size: var(--fs-xl);
    margin-bottom: var(--space-xl);
    opacity: 0.9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero__image {
    width: 100%;
    max-width: 900px;
    height: 450px;
    margin: var(--space-xl) auto 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .hero__image {
        height: 250px;
    }
}