@media (max-width: 480px) {
    .hero-section {
        padding: var(--spacing-sm);
        margin: var(--spacing-xs);
    }

    .hero-section h1 {
        font-size: 1.5rem;
    }

    .hero-section p {
        font-size: 1rem;
    }

    .hero-section img {
        max-width: 100%;
        height: auto;
    }

    .hero-actions {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
}


.hero-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: var(--spacing-md);
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin: var(--spacing-sm);
    animation: fadeIn var(--transition-medium);
}

.hero-section h1 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-xs);
}

.hero-section img {
    max-width: 550px;
    height: auto;
    margin-bottom: var(--spacing-xs);
}

.hero-section p {
    font-size: var(--font-size-md);
    color: var(--color-muted);
    margin-bottom: var(--spacing-sm);
}

.hero-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: var(--spacing-sm);
    width: 100vw;
}

.cta-block {
    text-align: center;
    background: #eef6ff;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin: var(--spacing-md) auto;
    max-width: 600px;
}