/* ==========================================================================
   1. USTAWIENIA GŁÓWNE I ZMIENNE
   ========================================================================== */
:root {
    --primary: #FF9C00;       /* Główny pomarańcz */
    --primary-dark: #e65c00;  /* Ciemniejszy pomarańcz */
    --text-dark: #333333;     /* Ciemny tekst */
    --text-light: #666666;    /* Jasny tekst */
    --bg-light: #F9F9F9;      /* Jasne tło sekcji */
    --white: #FFFFFF;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden;}

body { 
    margin: 0; 
    padding: 0; 
    font-family: 'Poppins', sans-serif; 
    color: var(--text-dark); 
    line-height: 1.6; 
    background-color: var(--white); 
    overflow-x: hidden; 
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }
img { max-width: 100%; height: auto; }

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


/* ==========================================================================
   2. HEADER (NAGŁÓWEK) I NAWIGACJA
   ========================================================================== */
header {
    background: transparent;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    height: 80px;
    display: flex;
    align-items: center;
    transition: all 0.4s ease;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Logo */
.logo-img img {
    height: 50px;
    width: auto;
    filter: brightness(0) invert(1); /* Logo białe na start */
    transition: 0.3s;
}

/* Menu PC */
#nav-menu ul {
    display: flex;
    list-style: none;
    gap: 30px;
    margin: 0; padding: 0;
}

#nav-menu .nav-link {
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    font-size: 15px;
    transition: 0.3s;
}

#nav-menu .nav-link:hover { color: var(--primary); }

/* Przycisk Sklepu */
.btn-shop-nav {
    text-decoration: none;
    padding: 10px 20px;
    border: 2px solid #fff;
    color: #fff;
    border-radius: 50px;
    font-weight: 600;
    transition: 0.3s;
}
.btn-shop-nav:hover { background: #fff; color: var(--primary); }

/* Hamburger (PC: ukryty) */
#hamburger { display: none; }


/* --- HEADER: Stan Przewinięty / Otwarte Menu --- */
header.scrolled, 
header.nav-open {
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

header.scrolled .nav-link, header.nav-open .nav-link { color: #333 !important; }
header.scrolled .logo-img img, header.nav-open .logo-img img { filter: none; }
header.scrolled .btn-shop-nav, header.nav-open .btn-shop-nav {
    background: var(--primary); border-color: var(--primary); color: #fff;
}
header.scrolled #hamburger, header.nav-open #hamburger { color: #333; }


/* --- MENU MOBILNE --- */
@media (max-width: 768px) {
    #hamburger {
        display: block;
        font-size: 28px;
        cursor: pointer;
        color: #fff;
        z-index: 1100;
    }

    #nav-menu {
        position: fixed;
        top: 80px;
        right: -100%;
        width: 100%;
        height: calc(100vh - 80px);
        background: #fff;
        flex-direction: column;
        align-items: center;
        padding-top: 40px;
        transition: 0.3s ease-in-out;
        display: flex;
    }

    #nav-menu.active { right: 0; }

    #nav-menu ul { flex-direction: column; width: 100%; gap: 0; }
    #nav-menu li { width: 100%; text-align: center; border-bottom: 1px solid #eee; }
    
    #nav-menu .nav-link {
        display: block;
        padding: 20px 0;
        color: #333;
        font-size: 18px;
    }

    .btn-shop-nav {
        display: block;
        width: 80%; margin: 20px auto; text-align: center;
        background: var(--primary); color: #fff; border: none;
    }
}


/* ==========================================================================
   3. HERO I SLIDER (STRONA GŁÓWNA)
   ========================================================================== */
.hero-slider {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    margin-top: 0;
    background-color: #000;
}

.slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center; 
    opacity: 0;
    transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1), transform 6s linear; 
    transform: scale(1);
    z-index: 1;
    display: block;
}

.slide.active { opacity: 1; z-index: 2; transform: scale(1.05); }

.hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.8), rgba(0,0,0,0.3));
    z-index: 1;
}

.slide-content {
    position: absolute;
    z-index: 3;
    bottom: 10%;     
    left: 10%; 
    text-align: left; 
    max-width: 900px;
    padding-right: 20px;
}

.slide-content h1 {
    color: var(--white);
    font-size: 4rem; 
    font-weight: 800;
    margin-bottom: 25px;
    line-height: 1.1;
    text-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
}

.slide-content h1::before {
    content: '';
    position: absolute;
    top: -25px; 
    left: 0;
    width: 100px;
    height: 6px;
    background-color: var(--primary);
    border-radius: 3px;
    opacity: 0;
    transform: translateX(-30px);
    transition: all 1s cubic-bezier(0.2, 1, 0.3, 1);
}

.slide-content h2 {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 45px;
    letter-spacing: 2px;
    max-width: 600px;
    line-height: 1.5;
}

/* Animacje Slajdów */
.slide-content h1, .slide-content h2, .slide-content .btn {
    opacity: 0; transform: translate(-30px, 30px); transition: all 1s cubic-bezier(0.2, 1, 0.3, 1);
}
.slide.active .slide-content h1, 
.slide.active .slide-content h2, 
.slide.active .slide-content .btn {
    opacity: 1; transform: translate(0, 0);
}
.slide.active .slide-content h1::before {
    opacity: 1; transform: translateX(0); transition-delay: 0.5s;
}
.slide.active .slide-content h1 { transition-delay: 0.5s; }
.slide.active .slide-content h2 { transition-delay: 0.7s; }
.slide.active .slide-content .btn { transition-delay: 0.9s; }

/* Strzałki */
.arrow {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.1); backdrop-filter: blur(5px);
    color: white; border: 1px solid rgba(255,255,255,0.2);
    font-size: 24px; width: 50px; height: 50px; border-radius: 50%;
    cursor: pointer; z-index: 10; transition: 0.4s ease;
    display: flex; align-items: center; justify-content: center;
}
.arrow:hover { background-color: var(--primary); border-color: var(--primary); transform: translateY(-50%) scale(1.1); }
.prev { left: 30px; }
.next { right: 30px; }

@media (max-width: 768px) {
    .slide { display: flex; align-items: center; justify-content: center; }
    .slide-content { position: relative; bottom: auto; left: auto; width: 100%; text-align: center; }
    .slide-content h1 { font-size: 2.2rem; }
    .slide-content h2 { font-size: 1rem; }
    .slide-content h1::before { left: 50%; transform: translateX(-50%); }
    .slide.active .slide-content h1::before { transform: translateX(-50%); }
    .arrow { width: 35px; height: 35px; font-size: 16px; }
    .prev { left: 10px; } .next { right: 10px; }
}


/* ==========================================================================
   4. ELEMENTY OGÓLNE (PRZYCISKI, SEKCJE)
   ========================================================================== */
.btn { display: inline-block; padding: 15px 35px; font-size: 16px; font-weight: 600; border-radius: 5px; margin: 10px; }
.btn-primary { background-color: var(--primary); color: var(--white); border: 2px solid var(--primary); }
.hero .btn-primary:hover { background-color: var(--primary-dark); border-color: var(--primary-dark); color: var(--white); }

.btn-outline { background-color: transparent; color: var(--white); border: 2px solid var(--white); }
.btn-outline:hover { background-color: var(--white); color: var(--primary); }

.section-title {font-size: 2.5rem; font-weight: 700; margin-bottom: 15px; color: var(--text-dark); position: relative; display: inline-block;}
.section-title::after {content: ''; display: block; width: 60px; height: 4px; background: var(--primary); margin: 15px auto 0; border-radius: 2px;}
.section {padding: 80px 0;}

@media (max-width: 768px) {
    .section {padding: 40px 0 !important;}
    .section-title { font-size: 24px !important; line-height: 1.3 !important; text-align: center !important;}
    .section-title::after { margin-left: auto !important; margin-right: auto !important;}
}


/* ==========================================================================
   5. SEKCJE: O NAS & OFERTA (HOME)
   ========================================================================== */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about-text h2 { margin-bottom: 20px; line-height: 1.2; }
.about-text p { color: var(--text-light); margin-bottom: 15px; font-size: 1.05rem; }
.about-img img { width: 100%; border-radius: 15px; box-shadow: 0 15px 40px rgba(0,0,0,0.1); object-fit: cover; }

.bg-light { background-color: #f9f9f9; }
.section-header { text-align: center; margin-bottom: 60px; }
.section-header p { color: var(--text-light); font-size: 1.1rem; }

.offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }

.offer-card {
    background: var(--white); padding: 40px 30px; border-radius: 15px;
    text-align: center; text-decoration: none; color: inherit;
    transition: all 0.4s ease; border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); display: block; 
    opacity: 0; transform: translateY(30px);
}
.offer-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); border-color: var(--primary); }
.offer-card.visible { opacity: 1; transform: translateY(0); }

.icon-box {
    width: 80px; height: 80px; background: rgba(255, 156, 0, 0.1);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 25px; transition: 0.4s;
}
.icon-box i { font-size: 32px; color: var(--primary); transition: 0.4s; }
.offer-card:hover .icon-box { background: var(--primary); }
.offer-card:hover .icon-box i { color: var(--white); }
.offer-card h3 { font-size: 1.3rem; font-weight: 600; margin-bottom: 15px; color: var(--text-dark); }
.offer-card p { font-size: 0.95rem; color: var(--text-light); line-height: 1.6; }

.shop-cta { background-color: var(--primary); color: var(--white); text-align: center; padding: 60px 0; }
.btn-white { background: var(--white); color: var(--primary); padding: 15px 40px; border-radius: 50px; font-weight: 700; font-size: 1.1rem; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.btn-white:hover { transform: scale(1.05); }

.features-list { margin-top: 30px; }
.feature-item { display: flex; align-items: flex-start; margin-bottom: 20px; }
.feature-item i { color: var(--primary); font-size: 20px; margin-right: 15px; margin-top: 5px; }

@media (max-width: 768px) {
    .about-grid { grid-template-columns: 1fr; }
    .about-img img { max-width: 80%; margin: 0 auto 30px; }
}


/* ==========================================================================
   6. PODSTRONA OFERTA (SIATKA KAFELKÓW)
   ========================================================================== */
.oferta-container { max-width: 1200px; margin: 20px auto; padding: 0 20px; }
.oferta-naglowek { text-align: center; margin-bottom: 50px; max-width: 800px; margin: 0 auto 50px; }
.oferta-naglowek h1 { font-size: 36px; color: #333; margin-bottom: 15px; }
.oferta-naglowek p { color: #666; font-size: 18px; line-height: 1.6; }

.oferta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; padding-bottom: 50px; }

.usluga-karta {
    background-color: #fff; padding: 40px 30px; border-radius: 15px;
    text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
    transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid #eee;
}
.usluga-karta:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); border-color: #ff9c00; }

.ikona-tlo {
    width: 80px; height: 80px; background-color: #ff9c00; border-radius: 50%;
    display: flex; justify-content: center; align-items: center; margin: 0 auto 25px;
    transition: background-color 0.3s;
}
.usluga-karta:hover .ikona-tlo { background-color: #d2d2d2; }
.ikona-tlo i { font-size: 32px; color: #fff; }
.usluga-karta h3 { font-size: 22px; margin-bottom: 15px; color: #333; }
.usluga-karta p { color: #777; line-height: 1.6; font-size: 15px; }

.oferta-cta { background-color: #f9f9f9; text-align: center; padding: 60px 20px; margin-top: 60px; border-radius: 15px; border: 1px solid #eee; }
.oferta-cta h2 { margin-top: 0; color: #333; font-size: 28px; }
.btn-cta {
    display: inline-block; background-color: #ff9c00; color: #fff; padding: 15px 40px;
    border-radius: 50px; text-decoration: none; font-weight: bold; font-size: 16px;
    transition: transform 0.3s, background-color 0.3s; box-shadow: 0 5px 15px rgba(0,123,255, 0.3);
}
.btn-cta:hover { background-color: #d2d2d2; transform: translateY(-3px); }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeInUp 0.8s ease-out forwards; }
.fade-in-up { opacity: 0; animation: fadeInUp 0.8s ease-out forwards; }
.usluga-karta:nth-child(1) { animation-delay: 0.1s; }
.usluga-karta:nth-child(2) { animation-delay: 0.2s; }
.usluga-karta:nth-child(3) { animation-delay: 0.3s; }
.usluga-karta:nth-child(4) { animation-delay: 0.4s; }
.usluga-karta:nth-child(5) { animation-delay: 0.5s; }
.usluga-karta:nth-child(6) { animation-delay: 0.6s; }


/* ==========================================================================
   7. PAGE HERO (MNIEJSZE BANERY PODSTRON)
   ========================================================================== */
.page-hero {
    position: relative; height: 350px; 
    background-size: cover; background-position: center; background-attachment: scroll;
    display: flex; align-items: center; justify-content: center; text-align: center;
    color: #ffffff; margin-top: -80px; padding-top: 80px; 
}
.page-hero::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 1;
}
.page-hero-content { position: relative; z-index: 2; padding: 0 20px; }
.page-hero h1 { font-size: 3rem; font-weight: 700; margin-bottom: 10px; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.breadcrumb { font-size: 1rem; opacity: 0.9; text-transform: uppercase; letter-spacing: 1px; }
.breadcrumb span { color: var(--primary); font-weight: bold; margin: 0 5px; }

@media (max-width: 768px) {
    .page-hero { height: 250px; }
    .page-hero h1 { font-size: 1.8rem; }
}


/* ==========================================================================
   8. PODSTRONA KONTAKT (FORMULARZ)
   ========================================================================== */
.kontakt-container {
    max-width: 1000px; margin: 0 auto 50px; width: 100%; padding: 0 20px;
    display: flex; flex-wrap: wrap; gap: 50px;
}
.kontakt-info { flex: 1; min-width: 300px; padding-top: 20px; }
.kontakt-formularz {
    flex: 1.5; min-width: 300px; background-color: #f9f9f9; padding: 30px;
    border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.kontakt-container h2 { margin-top: 0; margin-bottom: 20px; color: #333; font-size: 28px; }

.info-item { display: flex; align-items: center; margin-bottom: 25px; }
.info-item i { font-size: 24px; color: #FF9C00; margin-right: 20px; width: 30px; text-align: center; }
.info-item h3 { margin: 0 0 5px 0; font-size: 18px; color: #555; }
.info-item p { margin: 0; color: #777; line-height: 1.4; }
.info-item a { color: #777; text-decoration: none; transition: 0.3s; }
.info-item a:hover { color: #FF9C00; }

.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: bold; color: #444; }
.form-group input, .form-group textarea {
    width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 5px;
    font-size: 16px; font-family: inherit; transition: border-color 0.3s;
}
.form-group input:focus, .form-group textarea:focus { border-color: #ff9c00; outline: none; }

.btn-wyslij {
    background-color: #FF9C00; color: white; border: none; padding: 15px 30px;
    font-size: 16px; border-radius: 50px; cursor: pointer; font-weight: bold;
    transition: background-color 0.3s, transform 0.2s; width: 100%;
}
.btn-wyslij:hover { background-color: #FF9C11; transform: translateY(-2px); }

/* Komunikaty formularza */
.alert-success { background-color: #d4edda; color: #155724; padding: 15px; border-radius: 5px; margin-bottom: 20px; border: 1px solid #c3e6cb; }
.alert-error { background-color: #f8d7da; color: #721c24; padding: 15px; border-radius: 5px; margin-bottom: 20px; border: 1px solid #f5c6cb; }
#success-message { text-align: center; color: var(--white); animation: fadeIn 0.5s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 768px) {
    .kontakt-container { gap: 30px; padding: 0 15px; }
}


/* ==========================================================================
   9. LOGO SLIDER (ZAUFALI NAM)
   ========================================================================== */
.sekcja-zaufali { padding: 60px 0; background-color: #f9f9f9; overflow: hidden; }
.sekcja-zaufali h2 { text-align: center; margin-bottom: 40px; }

.logo-slider {
    position: relative; width: 100%; height: 100px; display: flex; align-items: center;
    overflow: hidden; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.logo-slide-track { display: flex; align-items: center; width: max-content; animation: scroll 30s linear infinite; }
.logo-slide-track img {
    height: 90px; width: auto; margin: 0 60px; filter: grayscale(100%); opacity: 0.6;
    transition: all 0.3s ease; cursor: pointer;
}
.logo-slide-track img:hover { filter: grayscale(0%); opacity: 1; transform: scale(1.1); }
.logo-slider:hover .logo-slide-track { animation-play-state: paused; }

@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

@media (max-width: 768px) {
    .sekcja-zaufali { padding: 40px 0; }
    .logo-slider { height: 80px; }
    .logo-slide-track img { height: 50px; margin: 0 20px; }
    .logo-slide-track { animation: scroll 20s linear infinite; }
}


/* ==========================================================================
   10. STOPKA I PASEK SOCIAL (FOOTER)
   ========================================================================== */
/* Social Bar */
.top-bar { background-color: #222; color: #fff; padding: 8px 0; font-family: sans-serif; font-size: 14px; }
.social-kontener { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: flex-end; align-items: center; }
.social-tekst { margin-right: 15px; color: #ccc; font-weight: 300; }
.social-link { color: #fff; margin-left: 15px; text-decoration: none; font-size: 16px; transition: color 0.3s ease; }
.social-link.facebook:hover { color: #1877F2; }
.social-link.instagram:hover { color: #E4405F; }
.social-link.youtube:hover { color: #FF0000; }
@media (max-width: 600px) { .social-kontener { justify-content: center; } .social-tekst { display: none; } }

/* Główny Footer */
#contact {
    background-color: #1a1a1a; color: #ffffff;
    padding-top: 60px; padding-bottom: 0; /* Brak paddingu na dole */
    font-family: sans-serif; position: relative;
}
.footer-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px; align-items: start; padding-bottom: 60px; /* Padding tu, zamiast w #contact */
}
.footer-col h4 { font-size: 1.25rem; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; color: #fff; }
.footer-col p { margin-bottom: 15px; line-height: 1.6; color: #ccc; }
.footer-col i { margin-right: 10px; color: var(--primary); width: 20px; text-align: center; }
.footer-col a { color: inherit; text-decoration: none; transition: color 0.3s ease; }
.footer-col a:hover { color: var(--primary); }
.shop-link { color: var(--primary) !important; font-weight: bold; font-size: 1.1rem; }
iframe { max-width: 100%; display: block; }

/* Copyright */
.copyright {
    text-align: center; border-top: 1px solid var(--primary);
    padding: 20px 0; color: #777; font-size: 0.9rem; background-color: #111111;
    margin-bottom: 0 !important; width: 100%;
}


/* ==========================================================================
   11. ELEMENTY PŁYWAJĄCE (PRZYCISK "W GÓRĘ" I COOKIES)
   ========================================================================== */
/* Przycisk "W górę" */
#przyciskGora {
    display: none; position: fixed; bottom: 20px; right: 20px; z-index: 9999;
    border: none; outline: none; background-color: var(--primary); color: white; cursor: pointer;
    width: 50px; height: 50px; border-radius: 50%; font-size: 18px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: all 0.3s ease;
}
#przyciskGora:hover { background-color: #333; transform: translateY(-3px); }

/* Baner Cookies */
.cookie-banner {
    position: fixed; bottom: 0; left: 0; width: 100%; z-index: 10000;
    background-color: #222; padding: 15px 20px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
    display: none; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap;
}
.cookie-tresc p { margin: 0; font-size: 14px; line-height: 1.5; color: #ddd; text-align: center; }
.cookie-tresc a { color: #fff; text-decoration: underline; }
.cookie-btn {
    background-color: var(--primary); color: white; border: none; padding: 10px 20px;
    border-radius: 50px; cursor: pointer; font-weight: 600; font-size: 14px;
    transition: background-color 0.3s; white-space: nowrap;
}
.cookie-btn:hover { background-color: #e65c00; transform: translateY(-2px); }

@media (max-width: 600px) {
    .cookie-banner { flex-direction: column; gap: 10px; padding-bottom: 20px; }
}
/* =========================================
   NOWOCZESNA SEKCJA CTA (Kontakt)
   ========================================= */

.shop-cta {
    background: linear-gradient(135deg, var(--primary) 0%, #ff8c00 100%); /* Ładny gradient */
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

/* Ozdobne kółka w tle (opcjonalnie) */
.shop-cta::before {
    content: '';
    position: absolute;
    top: -50px; right: -50px;
    width: 200px; height: 200px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}

/* Układ Grid (Lewa: Tekst, Prawa: Karta) */
.cta-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* --- LEWA STRONA (TEKST) --- */
.cta-text {
    color: #fff;
    text-align: left;
}

.cta-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.cta-text p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 15px;
    max-width: 90%;
}

.cta-features {
    margin-top: 30px;
}

.cta-feature {
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    margin-bottom: 10px;
    font-weight: 500;
}

.cta-feature i {
    margin-right: 12px;
    font-size: 1.2rem;
    color: rgba(255,255,255,0.8);
}

/* --- PRAWA STRONA (KARTA FORMULARZA) --- */
.cta-form-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 20px; /* Zaokrąglone rogi */
    box-shadow: 0 20px 50px rgba(0,0,0,0.15); /* Miękki cień */
    max-width: 500px;
    margin-left: auto; /* Dopycha do prawej */
}

/* Style pól formularza wewnątrz karty */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.input-group {
    position: relative;
}

/* Ikony wewnątrz pól */
.input-group i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 16px;
    pointer-events: none; /* Żeby można było klikać przez ikonę */
}

/* Pola tekstowe - szare tło */
.cta-form-card input,
.cta-form-card textarea {
    width: 100%;
    padding: 15px 15px 15px 45px; /* Padding z lewej na ikonę */
    background: #f4f6f8; /* Bardzo jasny szary */
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 15px;
    color: #333;
    font-family: 'Poppins', sans-serif;
    transition: 0.3s;
}

/* Textarea specyficznie */
.cta-form-card textarea {
    padding-top: 15px;
    top: 0;
    transform: none; /* Reset transformacji ikony */
    resize: vertical;
}
.input-group textarea + i { /* Nie używamy ikony w textarea, albo trzeba ją spozycjonować */
    top: 20px;
    transform: none;
}

/* Focus na pola */
.cta-form-card input:focus,
.cta-form-card textarea:focus {
    background: #fff;
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 4px rgba(255, 156, 0, 0.1);
}

/* Checkbox RODO */
.checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
}
.checkbox-row label {
    font-size: 13px;
    color: #777;
    cursor: pointer;
}
.checkbox-row a {
    color: var(--primary);
    font-weight: 600;
}
.checkbox-row input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    margin: 0; /* Reset */
    padding: 0; /* Reset */
}

/* Przycisk Wyślij */
.btn-submit {
    background: var(--primary);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 15px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 5px 15px rgba(255, 156, 0, 0.3);
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: 100%;
}

.btn-submit:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 156, 0, 0.4);
}

/* --- RESPONSYWNOŚĆ (MOBILE) --- */
@media (max-width: 900px) {
    .cta-layout {
        grid-template-columns: 1fr; /* Jeden pod drugim */
        gap: 40px;
    }

    .cta-text {
        text-align: center;
    }
    .cta-text p {
        margin: 0 auto 15px;
    }
    .cta-features {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .cta-form-card {
        margin: 0 auto; /* Wycentrowanie karty */
        width: 100%;
        padding: 30px 20px;
    }
}

@media (max-width: 768px) {
    #hamburger {
        display: block !important;
        position: relative;
        z-index: 2000; 
        cursor: pointer;
    }

    #nav-menu {
        z-index: 1999; 
    }

    #nav-menu.active {
        right: 0 !important;
        display: flex !important;
    }
    
    body.menu-open {
        overflow: hidden;
    }
}
/* =========================================
   FIX NAPRAWCZY MENU MOBILNEGO (Wklej na koniec)
   ========================================= */

@media (max-width: 768px) {
    
    /* 1. Wymuszenie pokazania Hamburgera */
    #hamburger {
        display: block !important;
        position: relative;
        z-index: 2000; /* Najwyższa warstwa, nad wszystkim */
    }

    /* 2. Naprawa kontenera Menu */
    #nav-menu {
        display: flex !important; /* Wymuszamy flex, żeby nie było 'none' */
        position: fixed !important;
        top: 80px !important;
        right: -100% !important; /* Domyślnie schowane */
        width: 100% !important;
        height: calc(100vh - 80px) !important;
        background-color: #ffffff !important;
        z-index: 1999 !important; /* Warstwa tuż pod hamburgerem */
        flex-direction: column;
        transition: right 0.3s ease-in-out;
    }

    /* 3. KLUCZOWE: Stan otwarty (.active) */
    #nav-menu.active {
        right: 0 !important; /* Wymuszenie wysunięcia */
    }

    /* 4. Kolor Hamburgera */
    /* Gdy menu jest otwarte, hamburger MUSI być ciemny, bo tło jest białe */
    header.nav-open #hamburger {
        color: #333333 !important;
    }
    
    /* 5. Kolor linków w menu mobilnym */
    #nav-menu .nav-link {
        color: #333333 !important; /* Ciemne linki na białym tle */
    }
}
/* ========================================================
   BANERY PODSTRON (SCALONE I UPORZĄDKOWANE)
   Tekst na dole + Poprawki Mobile
   ======================================================== */

/* 1. Ustawienia Ogólne (PC i Bazowe) */
.page-hero {
    display: flex !important;
    flex-direction: column !important;
    
    /* UKŁAD: Tekst na samym dole, wyśrodkowany */
    justify-content: flex-end !important; 
    align-items: center !important;
    
    /* Marginesy */
    padding-top: 100px !important;   /* Miejsce na nagłówek u góry */
    padding-bottom: 60px !important; /* Odstęp tekstu od dolnej krawędzi */
    
    /* Wysokość */
    height: auto !important;
    min-height: 350px; /* Gwarantowana wysokość, żeby było widać zdjęcie */
}

/* 2. Ukrycie Breadcrumbs (Start / Oferta...) - zgodnie z życzeniem */
.breadcrumb {
    display: none !important; 
}

/* 3. Styl Tytułu H1 */
.page-hero h1 {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2;
    text-shadow: 0 2px 15px rgba(0,0,0,0.7); /* Cień dla czytelności na tle */
}


/* --- WERSJA MOBILNA (Telefony) --- */
@media (max-width: 768px) {
    
    /* A. Korekta Banera na telefonie */
    .page-hero {
        min-height: 350px !important;     /* Zachowujemy wysokość zdjęcia */
        padding-bottom: 40px !important;  /* Mniejszy odstęp od dołu */
        padding-left: 15px;
        padding-right: 15px;
    }

    /* B. Mniejszy tekst H1 */
    .page-hero h1 {
        font-size: 28px !important;       /* Zmniejszona czcionka */
        text-align: center;
    }

    /* C. Zmniejszenie LOGO (żeby nie zajmowało pół ekranu) */
    .logo-img img {
        height: 50px !important; 
    }
    
    /* D. Niższy pasek MENU */
    header {
        height: 70px !important;
    }
}
/* ========================================================
   POWRÓT DO WERSJI PRZEZROCZYSTEJ + FIX MOBILNY
   ======================================================== */

@media (max-width: 768px) {
    
    /* 1. Header - NA WIERZCHU, ALE PRZEZROCZYSTY */
    header {
        position: fixed !important;
        top: 0;
        height: 80px !important;
        z-index: 2000 !important; /* Najważniejszy */
        background: transparent;  /* Domyślnie widać tło strony */
        transition: background 0.3s;
    }

    /* 2. Hamburger */
    #hamburger {
        display: block !important;
        position: relative;
        z-index: 2001 !important;
        color: #fff; /* Biały na start (bo tło ciemne) */
    }

    /* 3. Menu - Pod spodem, ale na cały ekran */
    #nav-menu {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;       
        right: -100% !important; 
        width: 100% !important;
        height: 100vh !important; /* Cały ekran */
        background-color: #ffffff !important;
        
        /* Odsunięcie linków w dół, żeby nie weszły pod logo */
        padding-top: 90px !important; 
        
        z-index: 1999 !important; /* Pod headerem */
        transition: right 0.3s ease-in-out !important;
    }

    #nav-menu.active {
        right: 0 !important;
    }

    /* 4. Linki w menu */
    #nav-menu li { width: 100%; text-align: center; border-bottom: 1px solid #f5f5f5; }
    #nav-menu a {
        color: #333 !important;
        font-size: 18px !important;
        display: block;
        padding: 20px 0;
    }

    /* ====================================================
       5. MAGICZNY FIX: CO SIĘ DZIEJE JAK OTWORZYSZ MENU?
       ==================================================== */
    
    /* Gdy menu otwarte -> Header robi się biały */
    header.nav-open {
        background-color: #ffffff !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    /* Gdy menu otwarte -> Hamburger robi się czarny */
    header.nav-open #hamburger {
        color: #333 !important;
    }

    /* Gdy menu otwarte -> Logo odzyskuje kolory (nie jest białe) */
    header.nav-open .logo-img img {
        filter: none !important;
    }
}