@media (max-width: 768px) {
    .hero {
        flex-direction: column-reverse;
        padding: 2rem 1.5rem;
        text-align: center;
        gap: 2rem;
    }
    .hero-title { font-size: 2.4rem; }
    .cta-buttons { justify-content: center; }
    .features { justify-content: center; }
    .hero-image { flex-basis: auto; }
}

@media (max-width: 640px) {
    .hero {
        padding: 2rem 1.5rem;
        gap: 2rem;
    }
    .hero-title { font-size: 2rem; }
    .subtitle { font-size: 1rem; }
    .features { gap: 1.5rem; }
}

@media (max-width: 480px) {
    .hero {
        padding: 1.5rem 1rem;
        gap: 1.5rem;
    }
    .hero-title { font-size: 1.6rem; }
    .subtitle { font-size: 0.9rem; }
    .cta-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
    }
    .cta-buttons .button,
    .cta-buttons a.button {
        text-align: center;
        padding: 0.6rem 1rem;
        font-size: 0.95rem;
    }
    .features {
        flex-direction: column;
        gap: 0.8rem;
        align-items: flex-start;
    }
    .feature { font-size: 0.9rem; }
    .hero-image { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero,
    .hero::before,
    .hero-title,
    .subtitle,
    .cta-buttons,
    .user-greeting,
    .username-gradient,
    .features,
    .feature,
    .hero-image,
    .illustration,
    .illustration-ring,
    .illustration-line,
    .illustration-dot {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .illustration-ring,
    .illustration-line {
        stroke-dashoffset: 0 !important;
    }
    .cta-buttons .button::before,
    .cta-buttons a.button::before,
    .btn-ripple-wave {
        display: none !important;
    }
}