@media (max-width: 1024px) {
    .container { padding: 0 var(--spacing-lg); }
    h1 { font-size: var(--font-size-3xl); }
    h2 { font-size: var(--font-size-2xl); }
}

@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
    .show-mobile { display: block !important; }
    h1 { font-size: var(--font-size-2xl); }
    h2 { font-size: var(--font-size-xl); }
    .section { padding: var(--spacing-2xl) 0; }
    .grid { gap: var(--spacing-md); }
}

@media (max-width: 480px) {
    .container { padding: 0 var(--spacing-md); }
    h1 { font-size: var(--font-size-2xl); }
    .btn-lg { padding: 0.75rem 1.5rem; font-size: var(--font-size-base); }
}

@media (min-width: 1920px) {
    .container { max-width: 1400px; }
    :root { --font-size-4xl: 4.5rem; --font-size-5xl: 6rem; }
}