body { font-family: Arial, sans-serif; display: flex; justify-content: center; background: #f0f0f0; margin: 0; }
.container { width: 1000px; }

/* BANER */
#main-banner {
    width: 1000px; height: 250px;
    position: relative; overflow: hidden;
    background-size: cover; background-position: center;
}
.truck-overlay {
    position: absolute;
    width: 1000px; height: 250px;
    top: 0px; left: 0px; 
    background: url('truck.png') no-repeat center/contain;
    z-index: 2;
}
.light-overlay {
    position: absolute;
    width: 1000px; height: 250px;
    top: 0px; left: 0px; 
    background: url('track_flash_light.png') no-repeat center/contain;
    z-index: 3;
    display: none;
}
.light-overlay.lights-on { display: block; }

.language-switcher { position: absolute; bottom: -10px; left: 10px; z-index: 5; }

.lang-btn {
    opacity: 0.5;
    transition: opacity 0.3s ease-in-out;
    border: none;
    background: transparent;
    cursor: pointer;
}
.lang-btn.active-lang { opacity: 1; transform: scale(1.1); }
.lang-btn:hover { opacity: 0.8; }
.hidden { display: none; }

#light-toggle { 
    width: 48px;
    height: 48px;
    cursor: pointer;
    position: absolute;
    bottom: 5px;
    left: 150px;
    background: transparent;
    border: none;
}

/* ZAKŁADKI */
.tabs { 
    position: absolute;
    right: 0;
    bottom: 0;
    display: box;
    width: 320px;
    z-index: 10;	
}
.tab-link {
    pointer-events: none;
    padding: 15px 25px;	
    cursor: pointer;
    transition: 0.3s;	
    background: transparent;
    border: none;	
}

.click-mask {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: auto; 
    cursor: pointer;
    clip-path: polygon(8% 100%, 31% 20%, 90% 20%, 80% 100%);
    background: rgba(0,0,0,0);	
    z-index: 20;
}

.lang--pl, .lang--en {
    position: relative;
    z-index: 21;
    pointer-events: none;
}

.tab-link.active { 	
    font-weight: bold;	
    background-image: url('zakladki_active.png');	
}

#about {
    position: absolute; right: 170px; bottom: 0; width: 144px; height: 53px;
    background-image: url('zakladki.png'); z-index: 11;
}
#about.active, #offer.active, #contact.active {		
    background-image: url('zakladki_active.png');		
}
 
#offer {
    position: absolute; right: 80px; bottom: 0; width: 144px; height: 53px;
    background-image: url('zakladki.png'); z-index: 12;
}
#contact {
    position: absolute; right: -8px; bottom: 0; width: 144px; height: 53px;
    background-image: url('zakladki.png'); z-index: 13;
}

/* CONTENT */
#main-content {
    width: 1000px; height: 549px; position: relative; padding: 20px; 
    box-sizing: border-box;
    background: url('bg-main.png') no-repeat center center;
    background-size: cover;
    z-index: 3;	
}
#page-title {
    position: absolute; top: -10px; left: 20px;
    color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    font-size: 32px; text-transform: uppercase;
}
.content-wrapper { display: flex; margin-top: 60px; }
.company-info { width: 230px; margin-left: 50px; }

/* STOPKA */
#main-footer {
    width: 1000px; height: 140px; position: relative;     
    background: url('bg-footer.png') no-repeat center center;
    background-size: cover;
    color: #000;
    overflow: hidden; 
    z-index: 0;	
}
.slogan { padding: 20px; position: absolute; bottom: 14px; left: 430px; }
.counter { padding: 20px; position: absolute; bottom: -15px; left: 100px; }
.tractor-animation {
    position: absolute; bottom: -140px; right: 35px; width: 212px;
    transform: scale(0);
    transition: transform 1.5s ease-out;
    z-index: 2;
}
.tractor-animation.show { transform: scale(1); }

/* SYSTEM PANELI ORAZ WIDOCZNOŚCI WERSJI */
#content-panel { display: block; width: 600px; margin-left: 50px; }
.content-panel { display: none; }
.lang-en, .lang-ru { display: none; } 

/* =========================================
   ZARZĄDZANIE WERSJAMI (DESKTOP / MOBILE)
========================================= */
#mobile-site, #desktop-site { display: none; }

/* Wersja komputerowa wyzwalana z JS */
html.is-desktop #desktop-site { display: block; }

/* Wersja mobilna wyzwalana z JS */
html.is-mobile #mobile-site { 
    display: flex; 
    flex-direction: column;
    background: #f0f0f0;
    min-height: 100vh;
    font-family: sans-serif;
	font-size: 19px;
}

.m-header { 
    width: 677px; height: 220px; position: relative; overflow: hidden;
    background: url('m_bg-main.png') no-repeat center center;
    background-size: cover;
}       
.m-content {
    width: 677px;
    background: url('m_bg-main_repit.png') repeat-y center center;		
    position: relative;
    min-height: 600px; /* Aby traktor miał miejsce */
}
.m-footer { 
    width: 677px; height: 136px; position: relative; text-align: center;		
    font-size: 12px; background: url('m_bg-footer.png') no-repeat center center;
    background-size: cover; color: #000; overflow: hidden; z-index: 0;	
}
.m_truck-overlay {
    position: absolute; width: 409px; height: 194px; top: 15px; left: 100px; 
    background: url('m_truck.png') no-repeat center/contain; z-index: 2;
}
.m_light-overlay {
    position: absolute; width: 409px; height: 194px; top: 15px; left: 100px; 
    background: url('m_track_flash_light.png') no-repeat center/contain;
    z-index: 3; display: none;
}
.m_light-overlay.lights-on { display: block; }

.m_language-switcher { position: absolute; bottom: 10px; left: 10px; z-index: 5; }

#m_page-title {
    position: absolute; top: -70px; left: 15px; color: black; text-transform: uppercase;
}
#m_about {
    position: absolute; right: -40px; bottom: 130px; width: 183px; height: 62px;
    background-image: url('m_zakladki.png'); z-index: 11;		
}
#m_about.active { right: -20px; background-image: url('m_zakladki_active.png'); }
#m_offer.active { right: -20px; background-image: url('m_zakladki_active.png'); }
#m_contact.active { right: -20px; background-image: url('m_zakladki_active.png'); }
 
#m_offer {
    position: absolute; right: -40px; bottom: 80px; width: 183px; height: 62px;
    background-image: url('m_zakladki.png'); z-index: 12;
}
#m_contact {
    position: absolute; right: -40px; bottom: 30px; width: 183px; height: 62px;
    background-image: url('m_zakladki.png'); z-index: 13;
}