@media (max-width: 1024px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.footer-col:first-child {
grid-column: 1 / -1;
}
}

@media (max-width: 900px) {
.main-nav {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: var(--bg);
border-bottom: 1px solid var(--border);
box-shadow: var(--shadow-md);
flex-direction: column;
gap: 0;
padding: 8px 0;
}

.main-nav.open {
display: flex;
}

.nav-link {
padding: 14px 24px;
width: 100%;
border-bottom: 1px solid var(--border);
}

.nav-link::after {
display: none;
}

.nav-link:last-child {
border-bottom: none;
}

.nav-toggle {
display: block;
}

.hero-title {
font-size: 2.25rem;
}

.page-title {
font-size: 1.875rem;
}

.hero {
min-height: 400px;
}

.two-col {
grid-template-columns: 1fr;
gap: 32px;
}

.two-col-reverse .two-col-text {
order: 1;
}

.two-col-reverse .two-col-image {
order: 2;
}

.two-col-image {
max-width: 500px;
margin: 0 auto;
}

.section {
padding: 56px 0;
}

.section-title {
font-size: 1.625rem;
}

.section-intro {
font-size: 1rem;
margin-bottom: 36px;
}
}

@media (max-width: 768px) {
.topbar-right {
display: none;
}

.topbar-left {
gap: 16px;
}

.topbar-link {
font-size: 0.75rem;
}

.hero-content {
padding: 48px 24px;
}

.hero-title {
font-size: 1.875rem;
}

.hero-subtitle {
font-size: 1rem;
}

.hero-cta .btn {
width: 100%;
}

.page-header-content {
padding: 36px 24px;
}

.page-title {
font-size: 1.625rem;
}

.page-subtitle {
font-size: 0.9375rem;
}

.card-grid,
.card-grid-three {
grid-template-columns: 1fr;
}

.footer-grid {
grid-template-columns: 1fr;
gap: 28px;
}

.footer-col:first-child {
grid-column: auto;
}

.cookie-content {
flex-direction: column;
text-align: center;
gap: 16px;
}

.cookie-text {
justify-content: center;
flex-wrap: wrap;
}

.cookie-buttons {
width: 100%;
justify-content: center;
}

.cookie-buttons .btn {
flex: 1;
}
}

@media (max-width: 480px) {
.container {
padding: 0 16px;
}

.site-name {
font-size: 1rem;
}

.logo-img {
width: 32px;
height: 32px;
}

.hero {
min-height: 340px;
}

.hero-title {
font-size: 1.5rem;
}

.hero-subtitle {
font-size: 0.9375rem;
}

.section {
padding: 40px 0;
}

.section-title {
font-size: 1.375rem;
}

.card {
padding: 24px 20px;
}

.contact-form {
padding: 24px 20px;
}

.contact-item {
flex-direction: column;
gap: 8px;
}

.contact-icon {
width: 40px;
height: 40px;
}

.topbar-left {
gap: 12px;
}

.topbar-link {
font-size: 0.6875rem;
}
}

@media (min-width: 901px) {
.main-nav {
display: flex !important;
}
}