/* =========================================
   1. ГЛОБАЛЬНІ НАЛАШТУВАННЯ ТА СКИДАННЯ
========================================= */
*, *::before, *::after { box-sizing: border-box; }

:root {
    --primary-blue: #0057B7; 
    --primary-yellow: #FFDD00; 
    --dark: #1d1d1f; 
    --light: #f5f5f7; 
    --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--light); color: var(--dark); display: flex; flex-direction: column; min-height: 100vh; -webkit-font-smoothing: antialiased; padding-top: 106px; width: 100%; position: relative; }
body.no-scroll { overflow: hidden; height: 100vh; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; width: 100%; box-sizing: border-box; }
.main-content { flex: 1; padding: 0; }
.main-content.no-padding { padding: 0; }
.icon { display: inline-block; vertical-align: middle; transition: var(--transition); }

.text-center { text-align: center; }
.text-white { color: #ffffff !important; }
.text-light-gray { color: #d1d1d6 !important; }
.mt-50 { margin-top: 50px; }

/* Універсальні заголовки секцій */
.zones-header, .production-header { text-align: center; max-width: 750px; margin: 0 auto 60px; }
.section-subtitle { display: inline-block; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 15px; position: relative; padding-left: 50px; color: var(--primary-blue); }
.section-subtitle::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 35px; height: 2px; background: var(--primary-blue); }
.section-subtitle-light { color: var(--primary-yellow); }
.section-subtitle-light::before { background: var(--primary-yellow); }
.section-title { font-size: 42px; font-weight: 800; line-height: 1.2; margin: 0 0 20px 0; color: var(--dark); }
.section-desc { font-size: 18px; color: #555; line-height: 1.6; margin: 0; }

/* Універсальні кнопки */
.btn { display: inline-flex; justify-content: center; align-items: center; padding: 18px 36px; font-size: 16px; font-weight: 600; border-radius: 8px; text-decoration: none; transition: var(--transition); cursor: pointer; }
.btn-primary { background: var(--primary-blue); color: #fff; border: 2px solid var(--primary-blue); box-shadow: 0 4px 15px rgba(0, 87, 183, 0.4); }
.btn-primary:hover { background: #fff; color: var(--primary-blue); border-color: #fff; box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3); transform: translateY(-3px); }
.btn-outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.5); }
.btn-outline:hover { border-color: var(--primary-yellow); color: var(--primary-yellow); transform: translateY(-3px); }

/* =========================================
   2. TOP BAR
========================================= */
.top-bar { background: var(--dark); color: #f5f5f7; font-size: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.03); }
.top-bar-inner { display: flex; justify-content: space-between; align-items: center; }
.top-left, .top-right { display: flex; align-items: center; gap: 24px; }
.top-link { color: #a1a1a6; text-decoration: none; display: flex; align-items: center; gap: 6px; transition: var(--transition); }
.top-link .icon { color: #86868b; }
.top-link:hover { color: #fff; }
.top-link:hover .icon { color: var(--primary-blue); transform: translateY(-1px); }
.promo-link { color: var(--primary-yellow); }
.promo-link .icon { color: var(--primary-yellow); }
.promo-link:hover .icon { color: #ffeb3b; }
.top-phone { color: #fff; text-decoration: none; font-weight: 500; transition: var(--transition); }
.top-phone:hover { color: var(--primary-yellow); }

/* =========================================
   3. MAIN BAR
========================================= */
.header-wrapper { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; }
.main-bar { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(25px) saturate(200%); -webkit-backdrop-filter: blur(25px) saturate(200%); border-bottom: 1px solid rgba(0,0,0,0.03); width: 100%; transition: var(--transition); }
.main-bar.scrolled { background: rgba(255, 255, 255, 0.95); box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.main-bar.scrolled .main-bar-inner { height: 56px; }
.main-bar-inner { display: flex; justify-content: space-between; align-items: center; height: 68px; transition: height 0.3s ease; }
.logo { display: flex; align-items: center; height: 100%; transition: var(--transition); }
.logo-img { width: 110px; height: auto; max-height: none; display: block; image-rendering: -webkit-optimize-contrast; transition: var(--transition); }
.logo:hover { opacity: 0.8; transform: scale(1.02); }
.main-bar.scrolled .logo-img { width: 90px; }
.main-actions { display: flex; align-items: center; gap: 20px; }
.btn-search { background: none; border: none; color: var(--dark); cursor: pointer; padding: 0; display: flex; align-items: center; transition: var(--transition); }
.btn-search:hover { color: var(--primary-blue); transform: scale(1.1); }

/* =========================================
   4. ДЕСКТОПНЕ МЕНЮ
========================================= */
.main-nav { display: flex; flex: 1; justify-content: center; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 32px; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-link { text-decoration: none; color: var(--dark); font-weight: 500; font-size: 14px; padding: 24px 0; display: flex; align-items: center; gap: 5px; transition: var(--transition); opacity: 0.8; }
.nav-item:hover .nav-link { opacity: 1; color: var(--primary-blue); }
.arrow { font-size: 10px; opacity: 0.4; transition: transform 0.3s; }
.nav-item:hover .arrow { transform: rotate(180deg); opacity: 1; color: var(--primary-blue); }

.dropdown-menu { position: absolute; top: 100%; left: 0; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); min-width: 250px; box-shadow: 0 15px 45px rgba(0,0,0,0.1), 0 0 1px rgba(0,0,0,0.15); border-radius: 14px; padding: 12px; margin: 0; opacity: 0; visibility: hidden; transform: translateY(15px); transition: var(--transition); list-style: none; }
.nav-item:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(5px); }
.dropdown-divider { height: 1px; background-color: rgba(0, 0, 0, 0.1); margin: 10px 16px; }
.drop-link { display: block; padding: 10px 16px; text-decoration: none; color: var(--dark); font-size: 14px; font-weight: 400; border-radius: 8px; transition: var(--transition); }
.drop-link:hover { background: rgba(0, 87, 183, 0.05); color: var(--primary-blue); }

/* =========================================
   5. ПЕРЕМИКАЧ МОВ
========================================= */
.lang-switcher { display: flex; background: rgba(0,0,0,0.05); padding: 4px; border-radius: 10px; gap: 2px; flex-shrink: 0; transition: var(--transition); }
.lang-switcher:hover { box-shadow: 0 0 1px rgba(0, 87, 183, 0.3); border: 1px solid var(--primary-yellow); border-radius: 10px; }
.lang-btn { text-decoration: none; padding: 4px 10px; font-size: 12px; font-weight: 700; color: #86868b; border-radius: 6px; transition: var(--transition); }
.lang-btn.active { background: #fff; color: var(--primary-blue); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.lang-btn:hover:not(.active) { color: var(--primary-blue); }

/* =========================================
   6. МОБІЛЬНЕ МЕНЮ
========================================= */
.mobile-menu-toggle { display: none; background: none; border: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 0; z-index: 1001; }
.mobile-menu-toggle span { width: 24px; height: 2px; background: var(--dark); border-radius: 2px; transition: var(--transition); transform-origin: left center; }
.mobile-menu-toggle.open span { background: var(--primary-blue); }
.mobile-menu-toggle.open span:nth-child(1) { transform: rotate(45deg); width: 26px; }
.mobile-menu-toggle.open span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.open span:nth-child(3) { transform: rotate(-45deg); width: 26px; }

@media (max-width: 992px) {
    body { padding-top: 68px; } .top-bar { display: none; }
    .main-actions { gap: 15px; } .mobile-menu-toggle { display: flex; }
    .main-nav { position: fixed; top: 68px; left: -100%; width: 100%; height: calc(100vh - 68px); background: rgba(255, 255, 255, 0.98); display: block; overflow-y: auto; transition: left 0.4s ease; padding: 20px 30px; border-top: 1px solid rgba(0,0,0,0.05); }
    .main-nav.active { left: 0; }
    .nav-list { flex-direction: column; gap: 0; }
    .nav-item { flex-direction: column; align-items: flex-start; width: 100%; border-bottom: 1px solid rgba(0,0,0,0.05); }
    .nav-link { padding: 18px 0; width: 100%; justify-content: space-between; font-size: 16px; font-weight: 500; opacity: 1; }
    .dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; display: none; padding: 0 0 15px 10px; width: 100%; background: transparent; border-radius: 0; }
    .nav-item.open .dropdown-menu { display: block; animation: slideDown 0.3s ease forwards; }
    .nav-item.open .arrow { transform: rotate(180deg); color: var(--primary-blue); }
}
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* =========================================
   7. HERO SECTION
========================================= */
.hero-section { position: relative; min-height: 85svh; display: flex; align-items: center; overflow: hidden; margin-top: -106px; padding-top: 106px; }
.hero-bg-picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.hero-bg-img { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(18,18,19,0.9) 0%, rgba(18,18,19,0.6) 50%, rgba(18,18,19,0.2) 100%); z-index: 2; }
.hero-container { position: relative; z-index: 3; width: 100%; }
.hero-content { max-width: 700px; color: #fff; }
.hero-title { font-size: 52px; font-weight: 800; line-height: 1.15; margin: 0 0 25px 0; text-shadow: 0 4px 15px rgba(0,0,0,0.3); }
.hero-desc { font-size: 18px; line-height: 1.6; color: #d1d1d6; margin: 0 0 40px 0; max-width: 600px; }
.hero-buttons { display: flex; gap: 20px; flex-wrap: wrap; }
.btn-calc-scroll { cursor: pointer; }

@media (max-width: 992px) { .hero-title { font-size: 42px; } }
@media (max-width: 768px) { 
    .hero-section { 
        min-height: auto;
        margin-top: -68px; 
        padding-top: 120px;
        padding-bottom: 80px;
    } 
    .hero-overlay { background: linear-gradient(180deg, rgba(18,18,19,0.7) 0%, rgba(18,18,19,0.9) 100%); } 
    .hero-title { font-size: 32px; margin-bottom: 20px; } 
    .hero-desc { font-size: 16px; margin-bottom: 30px; } 
    .hero-buttons { flex-direction: column; width: 100%; gap: 15px; } 
    .btn { width: 100%; } 
}

/* =========================================
   8. ЗОНИ ОЧИСТКИ
========================================= */
.zones-parallax-section { padding: 100px 0; background: var(--light); position: relative; z-index: 10; }
.zones-cards-wrapper { position: relative; padding-bottom: 50px; display: flex; flex-direction: column; gap: 40px; }
.zone-card { position: sticky; transition: transform 0.3s ease; }
.card-1 { top: 110px; z-index: 1; } 
.card-2 { top: 130px; z-index: 2; } 
.card-3 { top: 150px; z-index: 3; } 
.card-4 { top: 170px; z-index: 4; }
.zone-card-inner { background: #fff; border-radius: 24px; box-shadow: 0 -10px 30px rgba(0,0,0,0.05); display: flex; overflow: hidden; min-height: 480px; border: 1px solid rgba(0,0,0,0.05); transition: transform 0.4s ease, box-shadow 0.4s ease; }
.zone-card:hover .zone-card-inner { box-shadow: 0 -15px 40px rgba(0,0,0,0.12); }
.card-2 .zone-card-inner { background: #fcfcfc; }
.card-3 .zone-card-inner { background: #fafafa; }
.card-4 .zone-card-inner { background: #f5f5f7; }
.zone-content-app { flex: 1; padding: 60px; display: flex; flex-direction: column; justify-content: center; position: relative; }
.zone-step { font-size: 16px; font-weight: 800; color: var(--primary-blue); background: rgba(0, 87, 183, 0.1); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; margin-bottom: 25px; }
.zone-content-app h3 { font-size: 32px; font-weight: 800; margin: 0 0 20px; color: var(--dark); }
.zone-content-app p { font-size: 16px; color: #555; line-height: 1.6; margin: 0 0 30px; max-width: 450px; }
.zone-btn { padding: 12px 24px; font-size: 14px; }
.zone-image-app { flex: 1; position: relative; overflow: hidden; background: #e2e2e2; }
.zone-image-app img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
.zone-card:hover .zone-image-app img { transform: scale(1.05); }

@media (max-width: 992px) { 
    .zone-card-inner { flex-direction: column; min-height: auto; } 
    .zone-content-app { padding: 40px; order: 2; } 
    .zone-content-app p { max-width: 100%; } 
    .zone-image-app { min-height: 350px; order: 1; } 
}

/* =========================================
   9. КАТАЛОГ
========================================= */
.catalog-teaser-section { padding: 100px 0; background: #ffffff; position: relative; z-index: 5; }
.catalog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.catalog-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 24px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); aspect-ratio: 3 / 4; text-decoration: none; transition: transform 0.4s ease, box-shadow 0.4s ease; }
.catalog-card-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.catalog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
.catalog-card::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%); z-index: 2; transition: height 0.4s ease; }
.catalog-card-info { position: relative; z-index: 3; padding: 25px; display: flex; flex-direction: column; align-items: flex-start; transform: translateY(10px); transition: transform 0.4s ease; }
.catalog-card-info h3 { font-size: 22px; font-weight: 700; margin: 0 0 8px 0; color: #ffffff; text-shadow: 0 2px 4px rgba(0,0,0,0.3); transition: color 0.3s ease; }
.catalog-link-text { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--primary-yellow); opacity: 0.8; transition: opacity 0.3s ease, color 0.3s ease; }
.catalog-link-text svg { transition: transform 0.3s; }
.catalog-action-wrapper { text-align: center; margin-top: 50px; }
.btn-catalog-outline { color: var(--dark); border-color: #d2d2d7; }

@media (hover: hover) {
    .catalog-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
    .catalog-card:hover .catalog-card-img img { transform: scale(1.08); }
    .catalog-card:hover::before { height: 80%; }
    .catalog-card:hover .catalog-card-info { transform: translateY(0); }
    .catalog-card:hover .catalog-card-info h3 { color: var(--primary-yellow); }
    .catalog-card:hover .catalog-link-text { opacity: 1; color: #fff; }
    .catalog-card:hover .catalog-link-text svg { transform: translateX(5px); }
}

@media (max-width: 1024px) { .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 768px) { 
    .catalog-teaser-section { padding: 60px 0; }
    .catalog-grid { grid-template-columns: 1fr; gap: 20px; } 
    .catalog-card { aspect-ratio: 16 / 10; }
    .catalog-card-info { transform: translateY(0); }
    .catalog-link-text { opacity: 1; color: #fff; }
}

/* =========================================
   10. ВИРОБНИЦТВО
========================================= */
.about-production-section { position: relative; padding: 120px 0; background: linear-gradient(135deg, var(--primary-blue) 0%, #003366 100%); }
.production-bg { display: none; }
.production-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at top right, rgba(255,255,255,0.1) 0%, transparent 50%); z-index: 2; pointer-events: none; }
.relative-container { position: relative; z-index: 3; }
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }

.feature-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 40px 30px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 0.3s ease, border-color 0.3s ease; }

@media (hover: hover) {
    .feature-card:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.2); border-color: rgba(255, 221, 0, 0.4); }
    .feature-card:hover .feature-icon { background: var(--primary-yellow); color: var(--dark); transform: scale(1.1) rotate(5deg); }
}

/* ЗМІНЕНО h4 на h3 для семантики (SEO) та підвищено яскравість тексту (color: #ffffff) для кращого контрасту за вимогою Google */
.feature-icon { width: 60px; height: 60px; background: rgba(255, 255, 255, 0.1); color: var(--primary-yellow); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease; }
.feature-card h3, .feature-card h4 { color: #fff; font-size: 20px; font-weight: 700; margin: 0 0 15px 0; }
.feature-card p { color: #ffffff; opacity: 0.95; font-size: 15px; line-height: 1.6; margin: 0; }

.about-production-section .btn-primary { background: #fff; color: var(--primary-blue); border-color: #fff; }
.about-production-section .btn-primary:hover { background: var(--primary-yellow); color: var(--dark); border-color: var(--primary-yellow); }

@media (max-width: 1024px) { .features-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } }

/* =========================================
   11. КЛІЄНТИ
========================================= */
.clients-section { padding: 100px 0; background: #ffffff; border-bottom: 1px solid rgba(0,0,0,0.05); }
.clients-header { margin-bottom: 40px; }
.clients-slider-wrap { width: 100%; overflow: hidden; position: relative; padding: 20px 0; }

.clients-slider-wrap::before, .clients-slider-wrap::after { content: ''; position: absolute; top: 0; width: 150px; height: 100%; z-index: 2; pointer-events: none; }
.clients-slider-wrap::before { left: 0; background: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0) 100%); }
.clients-slider-wrap::after { right: 0; background: linear-gradient(to left, #ffffff 0%, rgba(255,255,255,0) 100%); }

.clients-track { display: flex; align-items: center; gap: 60px; width: max-content; animation: scrollLogos 35s linear infinite; will-change: transform; }
@media (hover: hover) { .clients-slider-wrap:hover .clients-track { animation-play-state: paused; } }

.client-logo { width: 180px; height: 80px; display: flex; align-items: center; justify-content: center; filter: grayscale(100%) opacity(0.5); transition: filter 0.3s ease, transform 0.3s ease; }
.client-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (hover: hover) { .client-logo:hover { filter: grayscale(0%) opacity(1); transform: scale(1.1); } }

@keyframes scrollLogos { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-50% - 30px)); } }

/* =========================================
   12. FOOTER
========================================= */
.footer-main { background: var(--dark); color: #a1a1a6; padding: 70px 0 0 0; margin-top: auto; font-size: 14px; }
.footer-inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 30px; margin-bottom: 50px; text-align: center; align-items: start; }
.footer-col { display: flex; flex-direction: column; align-items: center; }
.footer-col-address { align-items: flex-start; text-align: left; }
.footer-title { color: #fff; font-size: 18px; font-weight: 700; margin: 0 0 25px 0; text-transform: uppercase; letter-spacing: 1px; }
.footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; }
.footer-list li { margin-bottom: 12px; }
.footer-col a { display: flex; align-items: center; justify-content: center; gap: 10px; color: #a1a1a6; text-decoration: none; transition: color 0.3s ease, transform 0.3s ease; }
.footer-col a:hover { color: var(--primary-yellow); transform: translateY(-2px); }
.address-block { text-align: left; margin-bottom: 20px; }
.address-block strong { display: block; color: #fff; font-weight: 600; margin-bottom: 5px; }
.address-block p { margin: 0; line-height: 1.5; }
.footer-map-link { display: block; margin-top: 20px; border-radius: 12px; overflow: hidden !important; position: relative; box-shadow: 0 4px 15px rgba(0,0,0,0.3); aspect-ratio: 16 / 9; max-width: 198px; width: 100%; background: var(--dark); border: 1px solid rgba(255,255,255,0.05); }
.footer-map-img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.9; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
.footer-map-link:hover .footer-map-img { transform: scale(1.15); }
.map-text { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(25, 25, 28, 0.85); backdrop-filter: blur(4px); color: var(--primary-yellow); padding: 10px; font-size: 12px; font-weight: 600; text-align: center; display: flex; justify-content: center; align-items: center; gap: 8px; transition: color 0.3s; border-bottom-left-radius: 11px; border-bottom-right-radius: 11px; }
.footer-map-link:hover .map-text { color: #fff; }
.contact-group { display: flex; flex-direction: column; align-items: center; }
.contact-group span { display: block; font-size: 12px; color: #86868b; margin-bottom: 12px; text-transform: uppercase; }
.phone-link { margin-bottom: 18px !important; }
.mt-20 { margin-top: 25px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.05); background: #151516; padding: 25px 0; }
.footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.social-links { display: flex; align-items: center; gap: 15px; }
.social-title { color: #86868b; margin-right: 10px; }
.social-links a { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background: rgba(255,255,255,0.05); color: #fff; border-radius: 50%; text-decoration: none; transition: transform 0.3s ease, background 0.3s ease; }
.social-links a:hover { background: var(--primary-blue); transform: translateY(-3px); }
.copyright { font-size: 12px; color: #86868b; font-weight: 500; letter-spacing: 0.5px; }

@media (max-width: 992px) { .footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 768px) { .footer-inner { grid-template-columns: 1fr; gap: 40px; } .footer-col-address { align-items: center; text-align: center; } .address-block { text-align: center; } .footer-bottom-inner { flex-direction: column; text-align: center; justify-content: center;} .social-links { justify-content: center; width: 100%; flex-wrap: wrap; } .social-title { width: 100%; margin-right: 0; margin-bottom: 10px; } }


/* =========================================
   13. ВІДЖЕТ ЧАТУ (ІЗОЛЬОВАНО)
========================================= */
.messenger-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background: rgba(18, 18, 19, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    z-index: 2000; opacity: 0; visibility: hidden; pointer-events: none; transition: 0.4s ease;
}
.messenger-overlay.active { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }

.chat-widget-container { position: fixed; bottom: 30px; right: 30px; z-index: 2001; }

.float-btn {
    width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
    display: flex; justify-content: center; align-items: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15); transition: 0.3s ease; text-decoration: none;
}
.float-btn:hover { transform: translateY(-5px) scale(1.05); }

.main-chat-btn { background: var(--primary-blue); color: #fff; position: relative; z-index: 3; }
.main-chat-btn.active { background: var(--dark); }
.main-chat-btn svg { pointer-events: none; }

.messenger-menu {
    position: absolute; bottom: 65px; right: 0;
    display: flex; flex-direction: column; gap: 12px;
    opacity: 0; visibility: hidden; pointer-events: none; transition: 0.3s ease; z-index: 2; padding-bottom: 10px;
}
.messenger-menu::after { content: ''; position: absolute; bottom: -20px; left: -20px; right: -20px; height: 35px; pointer-events: auto; }

.messenger-btn {
    position: relative; width: 44px; height: 44px; background: #1d1d1f; color: #fff;
    transform: translateY(20px) scale(0.5); transition: 0.3s ease;
}
.messenger-label {
    position: absolute; right: 56px; top: 50%; transform: translateY(-50%);
    background: #1d1d1f; color: #fff; padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase;
    opacity: 0; pointer-events: none; transition: 0.2s; white-space: nowrap;
}

.messenger-btn:hover .messenger-label,
.messenger-menu.active .messenger-label,
.chat-widget-container:hover .messenger-label { 
    opacity: 1; right: 52px; 
}

.messenger-btn.phone-call { background: #34c759; } 
.messenger-btn.whatsapp { background: #25D366; } 
.messenger-btn.telegram { background: #0088cc; } 
.messenger-btn.viber { background: #7360f2; }

@media (min-width: 992px) {
    .chat-widget-container:hover .messenger-menu { opacity: 1; visibility: visible; pointer-events: auto; }
    .chat-widget-container:hover .messenger-btn { transform: translateY(0) scale(1); }
    .chat-widget-container:hover .main-chat-btn { background: var(--dark); }
    .chat-widget-container:hover .icon-chat { display: none !important; }
    .chat-widget-container:hover .icon-close { display: block !important; }
}

.messenger-menu.active { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
.messenger-menu.active .messenger-btn { transform: translateY(0) scale(1) !important; }

/* =========================================
   13.5 КНОПКА ВГОРУ (ЗЛІВА ВІД ЧАТУ НА ПК)
========================================= */
.scroll-top-btn {
    position: fixed; bottom: 34px; right: 100px; z-index: 2000;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); color: var(--dark); border: 1px solid rgba(0,0,0,0.05);
    display: flex; justify-content: center; align-items: center; cursor: pointer;
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(20px) scale(0.8); transition: 0.3s ease;
}
.scroll-top-btn.visible {
    opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) scale(1) !important;
}
.scroll-top-btn:hover { background: #fff; transform: translateY(-5px); }

@media (max-width: 768px) { 
    .chat-widget-container { bottom: 20px; right: 20px; } 
    .scroll-top-btn { bottom: 20px; right: auto; left: 20px; } 
}


/* =========================================
   14. ПОШУКОВИЙ ОВЕРЛЕЙ
========================================= */
.search-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    z-index: 10000; display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transform: translateY(-20px);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease, visibility 0.4s ease;
}
.search-overlay.active { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.search-close { position: absolute; top: 30px; right: 40px; background: none; border: none; color: var(--dark); cursor: pointer; opacity: 0.5; transition: opacity 0.3s ease, transform 0.3s ease; }
.search-close:hover { opacity: 1; transform: rotate(90deg); }
.search-container { width: 100%; max-width: 800px; padding: 0 20px; }
.search-form { display: flex; align-items: center; border-bottom: 2px solid var(--primary-blue); padding-bottom: 10px; position: relative; }
.search-input { flex: 1; border: none; background: transparent; font-size: 32px; font-weight: 300; color: var(--dark); padding: 10px 20px 10px 0; outline: none; }
.search-input::placeholder { color: #a1a1a6; font-weight: 300; }
.search-submit { background: none; border: none; color: var(--primary-blue); cursor: pointer; transition: transform 0.3s ease; padding: 0 10px; }
.search-submit:hover { transform: scale(1.1); }
.search-hints { margin-top: 20px; font-size: 14px; color: #86868b; }
.search-hints span { margin-right: 10px; }
.search-hints a { color: var(--primary-blue); text-decoration: none; margin-right: 15px; opacity: 0.8; transition: opacity 0.3s ease; }
.search-hints a:hover { opacity: 1; text-decoration: underline; }

@media (max-width: 768px) { 
    .search-input { font-size: 24px; } 
    .search-close { top: 20px; right: 20px; } 
}

/* =========================================
   15. АНІМАЦІЇ ПРИ СКРОЛІ
========================================= */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); will-change: opacity, transform; }
.reveal.active { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.1s; } .delay-2 { transition-delay: 0.2s; } .delay-3 { transition-delay: 0.3s; } .delay-4 { transition-delay: 0.4s; }
@media (max-width: 768px) { .delay-1, .delay-2, .delay-3, .delay-4 { transition-delay: 0s; } }

/* =========================================
   16. 3D ДІОРАМА
========================================= */
.diorama-section { padding: 80px 0; background: #fff; }
.diorama-section.hide-mobile, .diorama-section.hide-desktop { display: none !important; }
@media (max-width: 768px) { .diorama-section.hide-mobile { display: none !important; } }
@media (min-width: 769px) { .diorama-section.hide-desktop { display: none !important; } }
.diorama-header { margin-bottom: 50px; }

.diorama-preview-wrapper {
    position: relative;
    width: 100%;
    height: 65svh; 
    min-height: 400px;
    max-height: 650px;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1d1d1f;
    border: 5px solid #fff;
    box-shadow: 0 15px 50px rgba(0, 102, 204, 0.15);
}
.diorama-preview-wrapper .preview-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
}
.diorama-preview-wrapper .diorama-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 2;
}
.diorama-preview-wrapper .preview-content {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 20px;
}
.diorama-preview-wrapper .preview-btn {
    pointer-events: none;
    transition: transform 0.3s ease;
    gap: 12px;
    padding: 18px 40px;
    border-radius: 50px;
}
.diorama-preview-wrapper:hover .preview-img { transform: scale(1.03); }
.diorama-preview-wrapper:hover .preview-btn { transform: scale(1.05); }

.diorama-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: rgba(18, 18, 19, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}
.diorama-modal.active { opacity: 1; visibility: visible; pointer-events: auto; }
.diorama-modal-content {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.diorama-iframe { width: 100%; height: 100%; border: none; background: transparent; }

.diorama-close {
    position: absolute;
    top: 25px;
    right: 30px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    width: 56px;
    height: 56px;
    color: #fff;
    cursor: pointer;
    z-index: 100001;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.diorama-close:hover {
    background: var(--primary-yellow);
    border-color: var(--primary-yellow);
    color: var(--dark);
    transform: rotate(90deg) scale(1.1);
}

@media (max-width: 768px) {
    .diorama-close { top: 15px; right: 15px; width: 44px; height: 44px; }
    .diorama-modal-content {
        padding-bottom: max(env(safe-area-inset-bottom, 0px), 20px);
        height: calc(100dvh - max(env(safe-area-inset-bottom, 0px), 20px));
    }
}

/* =========================================
   17. БЛОК КАЛЬКУЛЯТОРА
========================================= */
.calc-section { padding: 80px 0; background: #f4f4f6; clear: both; }
.calc-header { margin-bottom: 50px; }
.calc-iframe-wrapper {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    overflow: hidden;
    border: 1px solid #e5e5ea;
    width: 100%;
}
.calc-iframe {
    border: none;
    display: block;
    width: 100%;
    height: 1250px; 
}

/* =========================================
   18. ФІНАЛЬНИЙ ФІКС РИВКІВ ДЛЯ МОБІЛЬНИХ
========================================= */
@media (max-width: 768px) {
    .main-bar {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.98) !important;
    }
    .main-bar.scrolled {
        background: #ffffff !important;
    }

    .main-nav {
        will-change: transform, opacity;
        transform: translateZ(0);
    }
    
    .zone-card { position: relative !important; top: auto !important; margin-bottom: 20px; }
    .zones-cards-wrapper { gap: 0; padding-bottom: 20px; }
    .zones-parallax-section { padding: 60px 0; } 
    .zone-content-app { padding: 30px 20px; } 
    .zone-content-app h3 { font-size: 24px; } 
    .zone-image-app { min-height: 250px; } 
    .zone-step { margin-bottom: 15px; width: 38px; height: 38px; font-size: 14px; }

    .about-production-section { padding: 80px 0; } 
    .production-overlay { display: none !important; }
    .features-grid { grid-template-columns: 1fr; gap: 20px; } 
    .feature-card { 
        padding: 30px 20px; 
        background: #044389 !important; 
        backdrop-filter: none !important; 
        -webkit-backdrop-filter: none !important; 
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        box-shadow: none !important;
    } 

    .clients-section { padding: 50px 0; overflow: hidden; }
    .clients-header { margin-bottom: 20px; }

    .clients-track {
        display: flex !important;
        width: max-content !important;
        gap: 30px !important;
        padding: 10px 0 !important;
        animation: scrollLogos 45s linear infinite !important;
        overflow-x: visible !important;
        scroll-snap-type: none !important;
    }

    .clients-slider-wrap::before, .clients-slider-wrap::after {
        display: block !important;
        width: 50px !important;
    }

    .client-logo {
        width: 120px;
        height: 50px;
        flex-shrink: 0 !important;
        filter: grayscale(100%) opacity(0.6) !important;
    }

    .clients-track::-webkit-scrollbar { display: none; }
    .clients-track { -ms-overflow-style: none; scrollbar-width: none; }
}

/* =========================================
   19. СТОРІНКА АКЦІЙ
========================================= */
.promos-section { padding: 60px 0 100px; background: var(--light); min-height: 60vh; }
.promo-header { margin-bottom: 50px; }
.promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; }

.promo-card { 
    background: #fff; 
    border-radius: 16px; 
    overflow: hidden; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0,0,0,0.03);
}
.promo-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }

.promo-img-wrap { position: relative; height: 200px; background: #eee; overflow: hidden; }
.promo-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.no-image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #ccc; }

.promo-badge { 
    position: absolute; 
    top: 15px; right: 15px; 
    background: #ff3b30; color: #fff; 
    padding: 5px 12px; border-radius: 8px; 
    font-weight: 700; font-size: 14px; 
    box-shadow: 0 2px 10px rgba(255, 59, 48, 0.4);
}

.promo-body { padding: 25px; display: flex; flex-direction: column; flex: 1; }
.promo-title { font-size: 20px; font-weight: 700; color: var(--dark); margin: 0 0 10px 0; }
.promo-desc { font-size: 15px; color: #666; line-height: 1.5; margin: 0 0 20px 0; flex: 1; }

.promo-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 15px; border-top: 1px solid #eee; margin-top: auto; }
.promo-date { font-size: 13px; color: #888; font-weight: 500; display: flex; align-items: center; gap: 5px; }
.promo-btn { 
    text-decoration: none; padding: 8px 16px; 
    border-radius: 6px; font-size: 14px; font-weight: 600; transition: var(--transition);
}

.no-promos { text-align: center; padding: 50px; background: #fff; border-radius: 12px; color: #888; font-size: 18px; }

/* =========================================
   20. КАТАЛОГ ПРОДУКЦИИ
========================================= */
.catalog-page { padding: 60px 0 100px; background: var(--light); min-height: 60vh; }
.catalog-header { margin-bottom: 40px; }

.catalog-tabs-wrapper { margin-bottom: 50px; width: 100%; }
.catalog-tabs { 
    display: flex; flex-wrap: wrap; justify-content: center; 
    gap: 12px; list-style: none; padding: 0; margin: 0; 
}
.catalog-tab { 
    display: inline-flex; align-items: center; justify-content: center; 
    padding: 10px 22px; background: #fff; border: 1px solid #e5e5ea; 
    border-radius: 30px; font-size: 14px; font-weight: 600; color: #555; 
    text-decoration: none; white-space: nowrap; transition: var(--transition); 
    box-shadow: 0 2px 10px rgba(0,0,0,0.02); 
}
.catalog-tab:hover { 
    border-color: var(--primary-blue); color: var(--primary-blue); 
    transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0, 87, 183, 0.1); 
}
.catalog-tab.active { 
    background: var(--primary-blue); color: #fff; border-color: var(--primary-blue); 
    box-shadow: 0 4px 15px rgba(0, 87, 183, 0.3); transform: translateY(-2px); 
}

.super-category-title { 
    font-size: 32px; font-weight: 800; color: var(--primary-blue); 
    margin: 60px 0 30px; border-bottom: 2px solid rgba(0,87,183,0.1); padding-bottom: 10px; 
}
.super-category-title:first-child { margin-top: 0; }

.model-section { 
    margin-bottom: 50px; background: #fff; border-radius: 20px; 
    padding: 35px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.04); 
}
.model-header { margin-bottom: 25px; border-bottom: 1px dashed #eee; padding-bottom: 20px; }
.model-title { font-size: 24px; font-weight: 800; color: var(--dark); margin: 0 0 10px 0; }
.model-desc { font-size: 15px; color: #666; margin: 0; line-height: 1.5; }

.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 25px; }

.product-card { 
    background: #fff; border-radius: 16px; overflow: hidden; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.03);
    transition: transform 0.3s, box-shadow 0.3s; display: flex; flex-direction: column;
}
.product-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); border-color: rgba(0, 87, 183, 0.1); }

.product-img-wrap { 
    width: 100%; aspect-ratio: 1; background: #f9f9f9; 
    display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box;
}
.product-img-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.5s ease; }
.product-card:hover .product-img-wrap img { transform: scale(1.05); }

.product-info { padding: 25px; display: flex; flex-direction: column; flex: 1; }
.product-sku { font-size: 12px; color: #888; font-family: monospace; margin-bottom: 8px; }
.product-name { font-size: 16px; font-weight: 700; color: var(--dark); margin: 0 0 20px 0; line-height: 1.4; flex: 1; }

.product-price-block { display: flex; align-items: baseline; gap: 5px; margin-bottom: 4px; }
.product-price { font-size: 24px; font-weight: 800; color: var(--primary-blue); }
.product-unit { font-size: 14px; color: #666; font-weight: 500; }
.product-tax { font-size: 11px; color: #a1a1a6; font-weight: 600; text-transform: uppercase; }

@media (max-width: 768px) {
    .catalog-tabs { justify-content: flex-start; gap: 8px; }
    .catalog-tab { padding: 8px 16px; font-size: 13px; }
    .catalog-tabs-wrapper { margin-bottom: 30px; }
    .model-section { padding: 20px; border-radius: 16px; margin-bottom: 30px; }
    .model-title { font-size: 20px; }
    .super-category-title { font-size: 26px; margin: 40px 0 20px; }
}
@media (max-width: 576px) {
    .products-grid { grid-template-columns: 1fr; }
}

/* =========================================
   21. СТОРІНКА МОДЕЛІ (ЛЕНДІНГ) ТА КАРТКИ
========================================= */
.breadcrumbs { font-size: 13px; color: #888; margin-bottom: 25px; font-weight: 500; }
.breadcrumbs a { color: var(--primary-blue); text-decoration: none; transition: 0.2s; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs .divider { margin: 0 8px; color: #ccc; }
.breadcrumbs .current { color: var(--dark); }

.landing-title { font-size: 38px; font-weight: 800; color: var(--dark); margin: 0 0 35px 0; }

.model-landing { background: #fff; border-radius: 20px; padding: 40px; box-shadow: 0 5px 25px rgba(0,0,0,0.03); }
.model-top-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; margin-bottom: 40px; }
.model-desc-box { font-size: 16px; line-height: 1.7; color: #444; }
.model-desc-box p { margin-top: 0; }
.model-drawing { background: #f9f9f9; padding: 20px; border-radius: 16px; border: 1px solid #eee; display: flex; align-items: center; justify-content: center; }
.model-drawing img { max-width: 100%; height: auto; border-radius: 8px; mix-blend-mode: multiply; }

.model-chars { margin-bottom: 40px; background: #f4f6f9; padding: 30px; border-radius: 16px; border-left: 4px solid var(--primary-blue); }
.model-chars h3 { margin: 0 0 15px 0; font-size: 22px; color: var(--dark); }
.chars-content { font-size: 15px; color: #555; line-height: 1.8; }

.model-products-table { margin-bottom: 50px; }
.model-products-table h3 { margin: 0 0 25px 0; font-size: 26px; color: var(--dark); border-bottom: 2px solid #eee; padding-bottom: 10px; }

.model-gallery h3 { margin: 0 0 25px 0; font-size: 26px; color: var(--dark); border-bottom: 2px solid #eee; padding-bottom: 10px;}
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.gallery-item { aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.08); cursor: pointer; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
.gallery-item:hover img { transform: scale(1.08); }

.model-teaser-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; margin-bottom: 50px; }
.model-teaser-card { display: flex; flex-direction: column; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.04); text-decoration: none; border: 1px solid #f0f0f2; transition: 0.3s; }
.model-teaser-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); border-color: rgba(0,87,183,0.15); }
.teaser-img { height: 220px; background: #f9f9f9; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 20px;}
.teaser-img img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.teaser-info { padding: 25px; display: flex; flex-direction: column; flex: 1; }
.teaser-info h3 { margin: 0 0 10px 0; font-size: 22px; color: var(--dark); transition: color 0.3s; }
.model-teaser-card:hover .teaser-info h3 { color: var(--primary-blue); }
.teaser-info p { margin: 0 0 25px 0; color: #666; font-size: 15px; line-height: 1.5; flex: 1; }
.btn-more { display: inline-block; padding: 12px 20px; background: rgba(0,87,183,0.05); color: var(--primary-blue); border-radius: 8px; font-weight: 600; text-align: center; transition: 0.3s; }
.model-teaser-card:hover .btn-more { background: var(--primary-blue); color: #fff; }

@media(max-width: 768px){
    .model-top-grid { grid-template-columns: 1fr; gap: 20px; }
    .model-landing { padding: 20px; }
    .landing-title { font-size: 28px; }
    .model-teaser-grid { grid-template-columns: 1fr; }
}

/* =========================================
   22. ФІКСИ ШАПКИ ТА SEO SPANS
========================================= */
span.nav-link.dropdown-trigger {
    cursor: pointer;
    display: flex;
    align-items: center;
}

@media (max-width: 992px) {
    .top-bar { display: block !important; padding: 8px 0; }
    .top-bar-inner { flex-direction: column !important; gap: 8px; }
    .top-left { justify-content: space-between !important; width: 100%; padding: 0 10px; box-sizing: border-box; }
    .top-right { justify-content: center !important; width: 100%; }
    .top-link { font-size: 13px; }
    .top-phone { font-size: 14px; font-weight: 600; letter-spacing: 0.5px; }
    body { padding-top: 110px !important; }
    .main-nav { top: 110px !important; height: calc(100vh - 110px) !important; }
}

@media (max-width: 768px) {
    .hero-section { margin-top: -110px !important; padding-top: 130px !important; }
}