/* RESET I PODSTAWA */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #000; color: #fff; font-family: 'Montserrat', sans-serif; overflow-x: hidden; width: 100%; }

/* LOGO - PRZEŁĄCZANIE (PC vs Telefon) */
.desktop-only { display: block !important; }
.mobile-only { display: none !important; }

.main-logo { height: 110px; width: auto; }

/* NAWIGACJA */
.navbar { position: absolute; top: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px 60px; z-index: 100; }
.nav-links { list-style: none; display: flex; gap: 30px; }
.nav-links a { text-decoration: none; color: #fff; font-weight: 700; text-transform: uppercase; }

/* HERO SEKCJA */
.hero { height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; text-align: center; }
.video-bg { position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: -2; top: 0; left: 0; }
.overlay { position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: -1; top: 0; left: 0; }
.hero-content h1 { font-size: 4rem; font-weight: 800; margin-bottom: 20px; text-transform: uppercase; }
.btn-primary { background: #e63946; color: #fff; padding: 18px 45px; border-radius: 50px; text-decoration: none; font-weight: bold; display: inline-block; transition: 0.3s; }

/* WYPROSTOWANIE MÓZGU NA PC */
.about-section { padding: 100px 0; background: #0b0b0b; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.about-grid { 
    display: flex !important; 
    flex-direction: row !important; 
    align-items: center !important; 
    gap: 60px; 
}
.about-text, .about-video { flex: 1; }
.video-frame { border: 1px solid #333; border-radius: 20px; overflow: hidden; line-height: 0; }
.video-frame video { width: 100%; height: auto; display: block; }

/* SMARTFON - RESPONSYWNOŚĆ */
@media (max-width: 768px) {
    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; height: 75px !important; margin: 0 auto; }
    
    .navbar { flex-direction: column !important; padding: 15px !important; gap: 15px; }
    .nav-links { gap: 15px; }
    
    .hero-content h1 { font-size: 2.2rem !important; line-height: 1.2; padding: 0 10px; }
    .btn-primary { width: 90% !important; padding: 15px !important; }
    
    .about-grid { flex-direction: column !important; text-align: center; }
    .about-text, .about-video { width: 100% !important; }
}

footer { padding: 40px; text-align: center; border-top: 1px solid #222; color: #555; }