/* ========================================= */
/* === USTAWIENIA GLOBALNE I ZMIENNE === */
/* ========================================= */
:root {
    --primary-red: #E31E24;
    --primary-dark: #363636;
    --footer-bg: #0e0e0e; 
    --light-bg: #f8f9fa;
    --text-white: #ffffff;
    --dev-green: #22c55b; 
    --border-radius: 6px;
    --transition: 0.3s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Roboto', sans-serif;
    color: var(--primary-dark);
    line-height: 1.6;
    background-color: #ffffff;
    overflow-x: hidden; /* Kluczowe dla responsywności */
    width: 100%;
    position: relative;
}

h1, h2, h3, h4, h5 { font-family: 'Montserrat', sans-serif; font-weight: 700; }
a { text-decoration: none; transition: var(--transition); }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 20px; 
    width: 100%;
}

.text-red { color: var(--primary-red); }
.text-white { color: var(--text-white); }
.section-pad { padding: 90px 0; }
.bg-dark { background-color: #151515; } 
.bg-light-grey { background-color: var(--light-bg); }
.bg-white { background-color: #fff; }
.mt-large { margin-top: 60px; }
.mt-medium { margin-top: 30px; }
.mb-medium { margin-bottom: 30px; }

/* ========================================= */
/* === HEADER I NAWIGACJA === */
/* ========================================= */
.top-bar { background: #fff; border-bottom: 1px solid #f0f0f0; padding: 10px 0; font-size: 13px; color: #555; }
.top-bar-content { display: flex; justify-content: space-between; }
.top-info span { margin-right: 20px; font-weight: 500; }
.top-socials a { color: #555; margin-left: 15px; font-size: 14px; }
.top-socials a:hover { color: var(--primary-red); }

.navbar { background: #fff; height: 85px; position: sticky; top: 0; z-index: 1000; box-shadow: 0 5px 20px rgba(0,0,0,0.08); }
.nav-container { display: flex; justify-content: space-between; align-items: center; height: 100%; }
.logo-img { height: 55px; width: auto; }

.nav-menu { display: flex; align-items: center; }
.nav-links { display: flex; margin-right: 35px; }
.nav-links li { margin-left: 30px; }
.nav-links a { color: #222; font-weight: 700; text-transform: uppercase; font-size: 14px; position: relative; padding-bottom: 5px; letter-spacing: 0.5px; }
.nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 2px; background-color: var(--primary-red); transition: 0.3s; }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a:hover, .nav-links a.active { color: var(--primary-red); }

.btn-quote { background-color: var(--primary-red); color: #fff; padding: 12px 28px; border-radius: 4px; font-weight: 700; font-size: 13px; box-shadow: 0 4px 15px rgba(227, 30, 36, 0.25); letter-spacing: 1px; }
.btn-quote:hover { background-color: #c9161b; transform: translateY(-2px); color: #fff; }

.hamburger { display: none; cursor: pointer; z-index: 2001; }
.bar { display: block; width: 25px; height: 3px; margin: 5px auto; transition: all 0.3s ease-in-out; background-color: #222; }

/* ========================================= */
/* === HERO SLIDER (Strona Główna) === */
/* ========================================= */
.hero-slider { height: calc(100vh - 120px); position: relative; color: #fff; }
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 1s; }
.slide.active { opacity: 1; }
.hero-content { text-align: center; z-index: 2; padding: 20px; max-width: 900px; }
.hero-content h1 { font-size: 4rem; letter-spacing: 2px; margin-bottom: 10px; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.hero-sub { font-size: 1.3rem; margin-bottom: 35px; font-weight: 400; letter-spacing: 1px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.btn-primary { padding: 14px 40px; background: var(--primary-red); color: white; text-transform: uppercase; font-weight: 700; border-radius: 4px; border: 2px solid var(--primary-red); font-size: 14px; letter-spacing: 1px; }
.btn-primary:hover { background: transparent; }
.slider-arrows { position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; padding: 0 40px; transform: translateY(-50%); z-index: 10; }
.arrow { color: rgba(255,255,255,0.7); font-size: 45px; cursor: pointer; transition: 0.3s; }
.arrow:hover { color: #fff; }

/* ========================================= */
/* === PAGE HEADER (Podstrony) === */
/* ========================================= */
.page-header { height: 400px; background-size: cover; background-position: center; background-attachment: fixed; position: relative; display: flex; align-items: center; justify-content: center; text-align: center; margin-top: 0; }
.header-content { z-index: 2; position: relative; }
.header-content h1 { color: #fff; font-size: 3.5rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 15px; text-shadow: 0 4px 10px rgba(0,0,0,0.5); }
.breadcrumbs { color: #ddd; font-size: 1rem; font-weight: 500; }
.breadcrumbs a { color: #fff; text-decoration: underline; }
.breadcrumbs i { margin: 0 10px; font-size: 0.8rem; }
.breadcrumbs .current { color: var(--primary-red); font-weight: 700; }

/* ========================================= */
/* === ELEMENTY SEKCJI === */
/* ========================================= */
.section-header { margin-bottom: 50px; }
.small-heading { font-size: 0.9rem; letter-spacing: 3px; display: block; margin-bottom: 10px; font-weight: 700; }
.section-title { font-size: 2.5rem; position: relative; display: inline-block; color: var(--primary-dark); }
.title-separator { width: 60px; height: 4px; background: var(--primary-red); margin: 20px auto 0; }
.title-separator-center { width: 60px; height: 4px; background: var(--primary-red); margin: 20px auto 0; }

/* ========================================= */
/* === SEKCJA O FIRMIE === */
/* ========================================= */
.about-wrapper { display: flex; align-items: center; gap: 60px; }
.about-content { flex: 1; }
.about-text-full { width: 100%; max-width: 900px; margin: 0 auto; text-align: center; }
.about-text-full .stats-row { justify-content: center; margin-top: 40px; }
.about-image { flex: 1; position: relative; }
.img-responsive { width: 100%; border-radius: 6px; box-shadow: 0 20px 50px rgba(0,0,0,0.15); }
.lead-text { font-size: 1.25rem; font-weight: 500; margin-bottom: 20px; color: #111; line-height: 1.5; }
.check-list li { margin-bottom: 12px; font-weight: 600; font-size: 15px; color: #333; display: flex; align-items: center; }
.check-list i { margin-right: 12px; }
.experience-badge { position: absolute; bottom: -25px; left: -25px; background: var(--primary-red); color: #fff; padding: 25px; border-radius: 4px; text-align: center; box-shadow: 0 10px 30px rgba(227, 30, 36, 0.4); min-width: 160px; }
.experience-badge .years { font-size: 2.8rem; font-weight: 800; display: block; line-height: 1; }
.experience-badge .text { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }

/* Liczniki i Statystyki */
.counters-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 80px; padding-top: 60px; border-top: 1px solid #eee; }
.counter-box { text-align: center; }
.counter-number { font-size: 3.2rem; font-weight: 800; color: var(--primary-red); font-family: 'Montserrat', sans-serif; line-height: 1; }
.plus { font-size: 3.2rem; font-weight: 800; color: var(--primary-red); }
.counter-box p { font-weight: 700; color: #444; text-transform: uppercase; font-size: 0.85rem; margin-top: 10px; letter-spacing: 0.5px; }
.stats-row { display: flex; gap: 40px; }
.stat-mini { display: flex; flex-direction: column; text-align: center; }
.stat-num { font-size: 2rem; font-weight: 800; font-family: 'Montserrat', sans-serif; }
.stat-label { font-size: 0.85rem; text-transform: uppercase; color: #555; font-weight: 600; }

/* Nowoczesna Karta O Firmie */
.modern-about-card { background: #fff; padding: 50px; border-radius: 8px; box-shadow: 0 15px 35px rgba(0,0,0,0.05); position: relative; overflow: hidden; border-top: 3px solid var(--primary-red); max-width: 1000px; margin: 0 auto; }
.lead-text-bold { font-size: 1.3rem; font-weight: 600; color: #222; margin-bottom: 20px; line-height: 1.5; }
.text-muted { color: #666; font-size: 1rem; line-height: 1.7; max-width: 800px; margin: 0 auto; }
.modern-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; padding-top: 40px; border-top: 1px solid #eee; }
.modern-stat-box { background: #f8f9fa; padding: 30px 20px; border-radius: 6px; text-align: center; transition: all 0.3s ease; border: 1px solid transparent; position: relative; top: 0; }
.modern-stat-box:hover { transform: translateY(-10px); box-shadow: 0 10px 25px rgba(227, 30, 36, 0.15); background: #fff; border-color: #eee; }
.stat-icon-circle { width: 60px; height: 60px; background: rgba(227, 30, 36, 0.1); color: var(--primary-red); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 20px; transition: 0.3s; }
.modern-stat-box:hover .stat-icon-circle { background: var(--primary-red); color: #fff; transform: rotateY(180deg); }
.stat-num-large { display: block; font-size: 2.5rem; font-weight: 800; font-family: 'Montserrat', sans-serif; line-height: 1; margin-bottom: 10px; }
.stat-label-modern { font-size: 0.9rem; text-transform: uppercase; font-weight: 700; color: #444; letter-spacing: 1px; }

/* ========================================= */
/* === CERTYFIKATY === */
/* ========================================= */
.cert-section { position: relative; overflow: hidden; }
.cert-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; }
.badge-icon { font-size: 3rem; color: var(--primary-red); margin-bottom: 20px; }
.certs-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.cert-item { text-align: center; }
.cert-red-frame { background: #fff; padding: 8px; border-radius: 4px; border: 3px solid var(--primary-red); box-shadow: 0 10px 30px rgba(0,0,0,0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; }
.cert-red-frame:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(227, 30, 36, 0.2); }
.cert-img { width: 100%; height: auto; display: block; border: 1px solid #eee; }
.cert-label-dark { margin-top: 15px; color: var(--primary-dark); font-weight: 700; font-size: 0.9rem; line-height: 1.4; }

/* ========================================= */
/* === SZCZEGÓŁOWA OFERTA (ZAKŁADKA OFERTA) === */
/* ========================================= */
.services-detailed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.service-card-detailed { background: #fff; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); overflow: hidden; transition: 0.3s; border-top: 4px solid var(--primary-red); height: 100%; display: flex; flex-direction: column; }
.service-card-detailed:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(227, 30, 36, 0.1); }
.sc-icon { background: #f4f4f4; padding: 30px 0; text-align: center; font-size: 3rem; color: var(--primary-red); border-bottom: 1px solid #eee; transition: 0.3s; }
.service-card-detailed:hover .sc-icon { background: var(--primary-red); color: #fff; }
.sc-content { padding: 30px; text-align: left; flex: 1; }
.sc-content h3 { font-size: 1.4rem; margin-bottom: 15px; color: var(--primary-dark); }
.sc-content p { color: #666; font-size: 0.95rem; margin-bottom: 20px; line-height: 1.6; }
.sc-list { margin-top: auto; border-top: 1px solid #f0f0f0; padding-top: 15px; }
.sc-list li { font-size: 0.9rem; color: #444; margin-bottom: 8px; display: flex; align-items: center; font-weight: 500; }
.sc-list i { margin-right: 10px; font-size: 0.8rem; }

/* ========================================= */
/* === GALERIA REALIZACJI === */
/* ========================================= */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.gallery-item { position: relative; border-radius: 6px; overflow: hidden; cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,0.1); background: #fff; aspect-ratio: 1 / 1; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; display: block; }
.gallery-item:hover img { transform: scale(1.1); }
.gallery-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(227, 30, 36, 0.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: 0.3s; }
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-overlay i { color: #fff; font-size: 2.5rem; }

/* ========================================= */
/* === STYL DLA HOME (OFFER, BENEFIT) === */
/* ========================================= */
.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.dark-card { background: #1f1f1f; padding: 45px 30px; border-radius: 6px; text-align: center; border-bottom: 3px solid transparent; transition: var(--transition); border: 1px solid #2a2a2a; }
.dark-card:hover { transform: translateY(-10px); border-bottom-color: var(--primary-red); background: #252525; }
.dark-card h3 { color: #fff; margin-bottom: 15px; font-size: 1.3rem; }
.dark-card p { color: #aaa; font-size: 0.95rem; line-height: 1.6; }
.icon-circle { width: 75px; height: 75px; background: #2a2a2a; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; color: var(--primary-red); font-size: 32px; transition: var(--transition); }
.dark-card:hover .icon-circle { background: var(--primary-red); color: #fff; }

.benefits-grid-box { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.benefit-box { background: #fff; padding: 40px 30px; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); text-align: left; border-bottom: 3px solid transparent; transition: 0.3s; }
.benefit-box:hover { transform: translateY(-10px); border-bottom-color: var(--primary-red); }
.ben-icon { font-size: 2.5rem; color: var(--primary-red); margin-bottom: 20px; width: 60px; height: 60px; background: rgba(227, 30, 36, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.benefit-box h3 { font-size: 1.3rem; margin-bottom: 15px; color: var(--primary-dark); }
.benefit-box p { color: #666; font-size: 0.95rem; line-height: 1.6; }

/* Tech Info */
.tech-info-section { padding: 80px 0 50px; background-color: #1a1a1a; border-top: 1px solid #333; color: #ddd; }
.tech-info-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; }
.tech-heading { font-size: 0.9rem; color: var(--primary-red); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 15px; display: block; }
.tech-subheading { font-size: 2rem; color: #fff; margin-bottom: 25px; line-height: 1.3; }
.tech-info-text p { margin-bottom: 20px; font-size: 1rem; color: #aaa; line-height: 1.7; text-align: justify; }
.tech-info-details { background: #222; padding: 40px; border-radius: 6px; border-left: 4px solid var(--primary-red); }
.detail-row { display: flex; gap: 20px; margin-bottom: 25px; align-items: flex-start; }
.detail-row i { font-size: 24px; margin-top: 5px; }
.detail-row h5 { color: #fff; font-size: 1.1rem; margin-bottom: 5px; }
.detail-row p { font-size: 0.9rem; color: #888; margin: 0; line-height: 1.5; }

/* ========================================= */
/* === TIMELINE I PROCES === */
/* ========================================= */
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; position: relative; }
.process-steps::before { content: ''; position: absolute; top: 40px; left: 12%; width: 76%; height: 2px; background: #ddd; z-index: 0; }
.step-item { position: relative; z-index: 1; text-align: center; background: var(--light-bg); padding: 15px; }
.step-icon { width: 85px; height: 85px; background: #fff; border: 2px solid var(--primary-red); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; font-size: 30px; color: var(--primary-red); position: relative; box-shadow: 0 5px 20px rgba(0,0,0,0.08); }
.step-number { position: absolute; top: -5px; right: -5px; background: #222; color: #fff; width: 28px; height: 28px; border-radius: 50%; font-size: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; border: 2px solid #fff; }
.step-item h4 { font-size: 1.2rem; margin-bottom: 10px; color: #222; }
.step-item p { font-size: 0.95rem; color: #666; line-height: 1.5; }

.timeline { position: relative; max-width: 1000px; margin: 60px auto 0; }
.timeline::after { content: ''; position: absolute; width: 2px; background-color: #eee; top: 0; bottom: 0; left: 50%; margin-left: -1px; }
.timeline-row { display: grid; grid-template-columns: 1fr 80px 1fr; align-items: center; margin-bottom: 50px; position: relative; z-index: 1; }
.timeline-icon { width: 60px; height: 60px; background-color: #fff; border: 3px solid var(--primary-red); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; font-size: 24px; color: var(--primary-red); box-shadow: 0 0 0 10px #fff; }
.timeline-content { padding: 20px 30px; background: #fff; border-radius: 6px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); border-bottom: 3px solid transparent; transition: 0.3s; }
.timeline-content:hover { transform: translateY(-5px); border-bottom-color: var(--primary-red); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.timeline-content h3 { font-size: 1.2rem; margin-bottom: 10px; color: var(--primary-dark); }
.timeline-content p { font-size: 0.95rem; color: #666; line-height: 1.5; margin: 0; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.faq-item { background: #fff; padding: 30px; border-radius: 6px; border-left: 4px solid var(--primary-red); box-shadow: 0 5px 15px rgba(0,0,0,0.03); transition: 0.3s; }
.faq-item:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.08); }
.faq-question { display: flex; align-items: center; margin-bottom: 15px; }
.faq-question i { font-size: 1.5rem; margin-right: 15px; }
.faq-question h4 { font-size: 1.1rem; margin: 0; color: var(--primary-dark); }
.faq-answer { color: #666; font-size: 0.95rem; line-height: 1.6; margin-left: 0; }

.cta-banner { padding: 80px 0; background-size: cover; background-position: center; background-attachment: fixed; text-align: center; position: relative; }
.btn-white { display: inline-block; background: #fff; color: var(--primary-red); padding: 15px 40px; font-weight: 700; border-radius: 4px; text-transform: uppercase; letter-spacing: 1px; margin-top: 25px; border: 2px solid #fff; transition: 0.3s; }
.btn-white:hover { background: transparent; color: #fff; }

/* ========================================= */
/* === KONTAKT I FORMULARZE === */
/* ========================================= */
.contact-grid-wrapper { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: start; }
.contact-cards { margin-top: 40px; display: flex; flex-direction: column; gap: 20px; }
.contact-card { background: #fff; padding: 25px; border-radius: 6px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); display: flex; align-items: center; border-left: 4px solid var(--primary-red); transition: 0.3s; }
.contact-card:hover { transform: translateX(10px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.cc-icon { width: 50px; height: 50px; background: #f8f9fa; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary-red); font-size: 20px; margin-right: 20px; flex-shrink: 0; }
.cc-content h5 { margin-bottom: 5px; font-size: 1.1rem; color: var(--primary-dark); }
.cc-content p { font-size: 0.95rem; color: #666; margin: 0; line-height: 1.5; }
.text-dark { color: #222; text-decoration: none; }

.modern-form { background: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 15px 40px rgba(0,0,0,0.08); }
.form-title { margin-bottom: 30px; font-size: 1.5rem; color: var(--primary-dark); border-bottom: 2px solid #f0f0f0; padding-bottom: 15px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { position: relative; margin-bottom: 25px; }
.full-width { grid-column: 1 / -1; }
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 4px; background: #fdfdfd; font-size: 1rem; outline: none; transition: 0.3s; font-family: inherit; appearance: none; }
.form-group textarea { resize: vertical; }
.form-group label { position: absolute; top: 14px; left: 15px; color: #999; font-size: 0.95rem; pointer-events: none; transition: 0.3s ease all; background: transparent; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus, .form-group input:not(:placeholder-shown), .form-group textarea:not(:placeholder-shown), .form-group select:valid { border-color: var(--primary-red); background: #fff; }
.form-group input:focus ~ label, .form-group textarea:focus ~ label, .form-group select:focus ~ label, .form-group input:not(:placeholder-shown) ~ label, .form-group textarea:not(:placeholder-shown) ~ label, .form-group select:valid ~ label { top: -10px; left: 10px; font-size: 0.8rem; color: var(--primary-red); background: #fff; padding: 0 5px; font-weight: 600; }
.form-group select { cursor: pointer; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23E31E24%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: right 15px top 50%; background-size: 12px auto; }
.input-file { display: none; }
.btn-file { position: relative !important; top: auto !important; left: auto !important; display: flex; align-items: center; justify-content: center; width: 100%; padding: 15px; background-color: #f8f9fa; border: 2px dashed #ccc; border-radius: 4px; cursor: pointer; color: #666 !important; font-size: 0.95rem !important; transition: 0.3s; pointer-events: auto !important; }
.btn-file:hover { border-color: var(--primary-red); background-color: #fff; color: var(--primary-red) !important; }
.btn-file i { font-size: 1.2rem; margin-right: 10px; }
.form-checkbox { display: flex; align-items: flex-start; margin-bottom: 25px; font-size: 0.85rem; color: #666; }
.form-checkbox input { width: auto; margin-right: 10px; margin-top: 3px; accent-color: var(--primary-red); }
.form-checkbox label { cursor: pointer; }
.btn-submit { width: 100%; background: var(--primary-red); color: #fff; border: none; padding: 15px; border-radius: 4px; font-weight: 700; cursor: pointer; font-size: 1rem; letter-spacing: 1px; transition: 0.3s; box-shadow: 0 4px 15px rgba(227, 30, 36, 0.2); }
.btn-submit:hover { background: #c9161b; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(227, 30, 36, 0.35); }
.map-section { width: 100%; line-height: 0; }

/* ========================================= */
/* === FOOTER I DODATKI === */
/* ========================================= */
.footer-styled { background-color: var(--footer-bg); color: #e0e0e0; padding-top: 90px; font-size: 15px; }
.footer-top-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 50px; }
.footer-logo-img { height: 50px; filter: brightness(0) invert(1); margin-bottom: 25px; }
.brand-desc { color: #888; margin-bottom: 30px; line-height: 1.7; font-size: 0.95rem; }
.footer-social-icons a { display: inline-flex; width: 45px; height: 45px; background: #1a1a1a; color: #fff; border-radius: 50%; align-items: center; justify-content: center; margin-right: 10px; transition: 0.3s; border: 1px solid #333; }
.footer-social-icons a:hover { background: var(--primary-red); border-color: var(--primary-red); transform: translateY(-3px); }
.footer-head { color: #fff; font-size: 1.1rem; margin-bottom: 35px; position: relative; padding-bottom: 12px; font-weight: 700; letter-spacing: 0.5px; }
.footer-head::after { content: ''; position: absolute; bottom: 0; left: 0; width: 35px; height: 3px; background: var(--primary-red); }
.clean-list li { margin-bottom: 16px; }
.clean-list a { color: #999; transition: 0.3s; display: inline-block; font-weight: 500; }
.clean-list a:hover { color: #fff; transform: translateX(5px); color: var(--primary-red); }
.contact-details li { display: flex; align-items: flex-start; margin-bottom: 25px; }
.icon-pop { color: var(--primary-red); margin-right: 18px; margin-top: 5px; font-size: 1.2rem; }
.contact-details strong { color: #fff; font-weight: 600; }
.contact-details a { color: #bbb; transition: 0.3s; }
.contact-details a:hover { color: var(--primary-red); }
.footer-divider { height: 1px; background: #222; margin: 60px 0 0; }
.footer-bottom-row { padding: 35px 0; display: flex; justify-content: space-between; align-items: center; color: #666; font-size: 0.9rem; }
.developer-signature { font-weight: 500; }
.dev-link { font-weight: 700; margin-left: 5px; text-decoration: none; }
.bracket { color: var(--dev-green); transition: var(--transition); font-weight: 800; font-size: 1.1em; }
.dev-name { color: #fff; transition: var(--transition); }
.dev-link:hover .bracket { color: #fff; }
.dev-link:hover .dev-name { color: var(--dev-green); text-shadow: 0 0 10px rgba(34, 197, 91, 0.4); }

.privacy-link-box { margin-top: 25px; display: inline-block; }
.privacy-policy-link { display: inline-flex; align-items: center; color: #fff; font-weight: 700; font-size: 1.1rem; text-decoration: none; padding-bottom: 8px; border-bottom: 2px solid var(--primary-red); transition: 0.3s; }
.privacy-policy-link i { margin-right: 10px; font-size: 1.2rem; }
.privacy-policy-link:hover { color: var(--primary-red); border-bottom-color: #fff; }
.privacy-content ul { list-style: disc; margin-left: 20px; margin-bottom: 20px; color: #666; }
.privacy-content li { margin-bottom: 10px; }

/* Lightbox Modal */
.modal { display: none; position: fixed; z-index: 9999; padding-top: 50px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.9); backdrop-filter: blur(5px); }
.modal-content { margin: auto; display: block; width: 80%; max-width: 900px; max-height: 85vh; object-fit: contain; border-radius: 4px; box-shadow: 0 0 20px rgba(255,255,255,0.1); animation: zoomIn 0.3s; }
@keyframes zoomIn { from {transform:scale(0)} to {transform:scale(1)} }
.close-modal { position: absolute; top: 20px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; cursor: pointer; z-index: 10000; }
.close-modal:hover { color: var(--primary-red); text-decoration: none; }
#caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; font-size: 1.1rem; font-family: 'Montserrat', sans-serif; }
.prev-gal, .next-gal { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 40px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; z-index: 10001; }
.next-gal { right: 0; border-radius: 3px 0 0 3px; }
.prev-gal { left: 0; border-radius: 3px 0 0 3px; }
.prev-gal:hover, .next-gal:hover { background-color: rgba(227, 30, 36, 0.8); color: white; }

.cookie-banner { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #1a1a1a; color: #fff; padding: 20px; z-index: 9999; box-shadow: 0 -5px 15px rgba(0,0,0,0.2); transform: translateY(100%); transition: transform 0.5s ease-in-out; }
.cookie-banner.show { transform: translateY(0); }
.cookie-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 0.9rem; line-height: 1.5; }
.btn-cookie { background: var(--primary-red); color: #fff; border: none; padding: 10px 25px; border-radius: 4px; cursor: pointer; font-weight: 700; white-space: nowrap; transition: 0.3s; }
.btn-cookie:hover { background: #c9161b; }

.floating-phone-right { position: fixed; bottom: 30px; right: 30px; width: 65px; height: 65px; background: var(--primary-red); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; z-index: 999; box-shadow: 0 5px 25px rgba(227, 30, 36, 0.5); }
.phone-ring { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--primary-red); animation: ring 1.5s infinite; }
@keyframes ring { 0% {transform: scale(1); opacity: 1;} 100% {transform: scale(1.6); opacity: 0;} }
.scroll-to-top-left { position: fixed; bottom: 30px; left: 30px; width: 45px; height: 45px; background: #222; color: #fff; border-radius: 4px; display: flex; align-items: center; justify-content: center; z-index: 999; opacity: 0; pointer-events: none; transition: 0.3s; border: 1px solid #333; }
.scroll-to-top-left:hover { background: var(--primary-red); border-color: var(--primary-red); }
.scroll-to-top-left.show { opacity: 1; pointer-events: all; }

/* ========================================= */
/* === LOGO CAROUSEL === */
/* ========================================= */
.logo-carousel { background-color: #ffffff; padding: 60px 0; overflow: hidden; position: relative; border-top: none; border-bottom: 1px solid #eee; }
.logo-carousel .slider { height: 100px; margin: auto; overflow: hidden; position: relative; width: 100%; display: flex; align-items: center; }
.logo-carousel .slide-track { display: flex; width: calc(250px * 12); animation: scroll 30s linear infinite; }
.logo-slide { height: 100px; width: 250px; display: flex; align-items: center; justify-content: center; padding: 0 30px; }
.logo-slide img { max-width: 100%; max-height: 50px; width: auto; filter: grayscale(100%); opacity: 0.6; transition: 0.3s; cursor: pointer; }
.logo-slide img:hover { filter: grayscale(0); opacity: 1; transform: scale(1.1); }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-250px * 6)); } }

/* ========================================= */
/* === RESPONSYWNOŚĆ (Media Queries) === */
/* ========================================= */

@media (max-width: 992px) {
    /* Ogólne */
    .offer-grid, .counters-container, .process-steps, .footer-top-grid, .tech-info-grid, 
    .cert-grid, .benefits-grid-box, .contact-grid-wrapper, .services-detailed-grid { 
        grid-template-columns: 1fr; gap: 40px; 
    }
    .about-wrapper { flex-direction: column; }
    .page-header { height: 300px; }
    .header-content h1 { font-size: 2.5rem; }
    .hero-content h1 { font-size: 3rem; }
    .section-title { font-size: 2rem; }
    
    /* Menu */
    .hamburger { display: block; }
    .hamburger.active .bar:nth-child(2) { opacity: 0; }
    .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    .nav-menu { position: fixed; left: -100%; top: 85px; gap: 0; flex-direction: column; background-color: #fff; width: 100%; height: calc(100vh - 85px); text-align: center; transition: 0.4s; box-shadow: 0 10px 10px rgba(0,0,0,0.1); padding-top: 40px; overflow-y: auto; }
    .nav-menu.active { left: 0; }
    .nav-links { flex-direction: column; margin: 0; width: 100%; }
    .nav-links li { margin: 20px 0; width: 100%; margin-left: 0; }
    .nav-links a { font-size: 1.5rem; }
    .btn-quote { margin-top: 30px; display: inline-block; font-size: 1.2rem; padding: 15px 40px; }

    .process-steps::before { display: none; }
    .slide-track { width: calc(250px * 12); }

    /* Timeline Mobile */
    .timeline { margin-top: 40px; }
    .timeline::after { left: 30px; }
    .timeline-row { display: flex; flex-direction: row; align-items: flex-start; margin-bottom: 40px; }
    .timeline-col.empty-col { display: none; }
    .timeline-col.icon-col { order: 1; flex: 0 0 60px; display: flex; justify-content: center; z-index: 2; }
    .timeline-col.content-col { order: 2; flex: 1; padding-left: 20px; width: calc(100% - 80px); }
    .timeline-content.text-right, .timeline-content.text-left { text-align: left; }
    .timeline-content { margin-top: 5px; padding: 20px; }
    .modern-form { padding: 30px 20px; }
}

@media (max-width: 768px) {
    /* Reset Gridów */
    .offer-grid, .process-steps, .counters-container, .footer-top-grid, .tech-info-grid, 
    .cert-grid, .benefits-grid-box, .faq-grid, .gallery-grid, .modern-stats-grid, 
    .services-detailed-grid, .form-grid { grid-template-columns: 1fr; gap: 30px; }

    .certs-wrapper { grid-template-columns: 1fr; max-width: 350px; margin: 0 auto; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .top-bar { display: none; }
    .footer-bottom-row { flex-direction: column; gap: 15px; text-align: center; }
    .hero-content h1 { font-size: 2.5rem; }
    
    .logo-carousel { padding: 40px 0; }
    .logo-slide { width: 180px; padding: 0 20px; }
    .logo-slide img { max-height: 40px; }
    .logo-carousel .slide-track { width: calc(180px * 12); }
    @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-180px * 6)); } }
    
    /* Cookies Mobile Fix */
    .cookie-banner { padding: 15px 10px; bottom: 0; left: 0; right: 0; width: 100%; max-width: 100vw; }
    .cookie-content { flex-direction: column; align-items: center; text-align: center; gap: 15px; }
    .cookie-content p { font-size: 0.85rem; margin: 0; }
    .btn-cookie { width: 100%; max-width: 300px; padding: 12px 0; margin: 0; }
    
    .stats-row { gap: 20px; flex-wrap: wrap; justify-content: center; }
    .prev-gal, .next-gal { font-size: 30px; padding: 10px; }
    .modal-content { width: 95%; }
}

@media (max-width: 480px) {
    .gallery-grid { grid-template-columns: 1fr; }
    .timeline-content h3 { font-size: 1.1rem; }
    .timeline-icon { width: 40px; height: 40px; font-size: 18px; }
    .timeline::after { left: 20px; }
    .timeline-col.icon-col { flex: 0 0 40px; }
    .timeline-col.content-col { padding-left: 15px; width: calc(100% - 55px); }
}