/*
Theme Name: VinylFloor Theme
Author: Monika
Description: Mój autorski motyw stworzony od zera.
Version: 1.0
*/
body {
    background-color: #1a1a1a;
    color: #f5f5f5;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    text-align: center;
    padding-top: 15vh;
}

h1 {
    color: #4facfe;
    font-size: 3rem;
    margin-bottom: 20px;
}

p {
    font-size: 1.2rem;
    color: #a1a1a1;
}/* --- WYGLĄD NAGŁÓWKA (HEADER) --- */
.site-header {
    background-color: #2c2c2c; /* Ciemny grafit */
    border-bottom: 4px solid #e67e22; /* Firmowy pomarańczowy z PDFa */
    padding: 15px 0;
}

.header-container {
    max-width: 1200px; /* Szerokość strony */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

/* Wygląd Logo */
.logo a {
    color: #ffffff;
    font-size: 26px;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 1px;
}

/* Wygląd Menu */
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 30px; /* Odstępy między linkami */
}

.main-navigation a {
    color: #f5f5f5;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s ease;
}

/* Kolor po najechaniu myszką */
.main-navigation a:hover {
    color: #e67e22; 
}

/* Flagi */
.language-flags {
    display: flex;
    gap: 15px;
    color: #ffffff;
    font-weight: bold;
    cursor: pointer;
}
/* --- POPRAWKA MENU --- */
.main-navigation a {
    white-space: nowrap; /* Wymusza tekst w jednej linii */
}

/* --- SEKCJA GŁÓWNA (HERO) --- */
.hero-section {
    position: relative;
    height: calc(100vh - 160px);
    background-image: url('podloga.png') !important;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ciemna powłoka nałożona na zdjęcie, żeby biały tekst był czytelny */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3) !important;
}

/* Teksty na środku */
.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 900px;
    padding: 40px;
}

.hero-content h1 {
    color: #ffffff;
    font-size: 42px;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero-content p {
    color: #cccccc;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.hero-highlight {
    color: #ffffff;
    font-size: 28px;
    margin-bottom: 40px;
}

.hero-highlight span {
    color: #e67e22; /* Twój firmowy pomarańcz */
}

/* Wygląd głównego przycisku */
.btn-primary {
    background-color: #e67e22;
    color: #ffffff;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 4px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: inline-block;
}

.btn-primary:hover {
    background-color: #d35400; /* Ciemniejszy pomarańcz przy najechaniu */
    transform: translateY(-2px); /* Delikatne uniesienie przycisku */
}

/* --- POP-UP FORMULARZ (MODAL) --- */
.modal-overlay {
    display: none; /* Domyślnie całkowicie ukryte */
    position: fixed;
    z-index: 9999; /* Zawsze na samej górze */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Mocno przyciemnione tło */
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: #2c2c2c;
    padding: 40px;
    border-radius: 6px;
    max-width: 450px;
    width: 90%;
    position: relative;
    border-top: 5px solid #e67e22; /* Pomarańczowy akcent u góry */
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.modal-content h2 {
    color: #e67e22;
    margin-top: 0;
    font-size: 24px;
}

.modal-content p {
    color: #cccccc;
    font-size: 15px;
    margin-bottom: 25px;
}

/* Przycisk zamykania (X) */
.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    color: #888888;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-modal:hover {
    color: #e67e22;
}
Pola tekstowe wewnątrz formularza */
.modal-content input {
    width: 100%;
    padding: 14px;
    margin-bottom: 15px;
    border: 1px solid #444444;
    border-radius: 4px;
    background-color: #1a1a1a;
    color: #ffffff;
    font-family: inherit;
    box-sizing: border-box;
}

.modal-content input:focus {
    outline: none;
    border-color: #e67e22; /* Podświetlenie na pomarańczowo po kliknięciu */
}

/* --- STOPKA (FOOTER) --- */
.site-footer {
    background-color: #e67e22; /* Firmowy pomarańcz */
    color: #1a1a1a; /* Ciemny tekst dla idealnego kontrastu */
    text-align: center;
    padding: 10px 15px;
    font-size: 12px;
    font-weight: 500;
}

.footer-container p {
    margin: 2px 0;
    color: #1a1a1a;
}

.footer-container a {
    color: #1a1a1a;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.footer-container a:hover {
    color: #ffffff; /* Link podświetla się na biało po najechaniu */
}

.copyright {
    font-size: 12px;
    margin-top: 5px !important;
    opacity: 0.8;
}

/* --- ZWYKŁE PODSTRONY (O NAS, CENNIK, KONTAKT) --- */
.page-content {
    padding: 60px 20px;
    background-color: #1a1a1a; /* Utrzymujemy mroczny, profesjonalny klimat */
    min-height: 60vh; /* Zapobiega "przyklejaniu się" stopki do góry na krótkich stronach */
}

/* Pojemnik na tekst - ogranicza szerokość dla lepszego czytania */
.container {
    max-width: 900px;
    margin: 0 auto;
    background-color: #242424; /* Delikatnie jaśniejsze tło dla samego tekstu */
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.page-title {
    color: #e67e22; /* Pomarańczowy tytuł strony */
    font-size: 32px;
    margin-top: 0;
    margin-bottom: 30px;
    text-transform: uppercase;
    text-align: center;
    border-bottom: 1px solid #444;
    padding-bottom: 20px;
}

.entry-content {
    font-size: 16px;
    line-height: 1.8;
    color: #d1d1d1;
    text-align: left;
}

.entry-content h2, 
.entry-content h3 {
    color: #ffffff;
    margin-top: 35px;
    margin-bottom: 15px;
}

.entry-content ul {
    margin-bottom: 20px;
}

.entry-content li {
    margin-bottom: 10px;
}

/* --- ROZWIJANE MENU (DROPDOWN) --- */

/* 1. Rodzic musi być "kotwicą" dla rozwijanego menu */
.main-navigation li {
    position: relative;
}

/* 2. Domyślnie całkowicie ukrywamy podmenu */
.main-navigation ul ul.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #2c2c2c;
    min-width: 300px; /* Zapewnia miejsce na długie nazwy usług */
    padding: 10px 0;
    box-shadow: 0 8px 25px rgba(0,0,0,0.6);
    border-top: 3px solid #e67e22; /* Firmowy pomarańcz */
    z-index: 9999;
}

/* 3. Pokazujemy podmenu, gdy myszka najedzie na zakładkę główną */
.main-navigation li:hover > ul.sub-menu {
    display: block;
}

/* 4. Wygląd poszczególnych linków w rozwijanym okienku */
.main-navigation ul ul.sub-menu li {
    width: 100%;
}

.main-navigation ul ul.sub-menu a {
    padding: 12px 20px;
    display: block;
    white-space: normal; /* Pozwala długim tekstom przejść do nowej linii */
    font-size: 14px;
    text-transform: none; /* Wyłącza duże litery dla lepszej czytelności */
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
}

.main-navigation ul ul.sub-menu a:hover {
    background-color: #3d3d3d; /* Jaśniejsze tło po najechaniu na konkretną usługę */
    color: #e67e22;
}

/* Odstęp dla logo, żeby nie stykało się z menu */
.site-branding {
    margin-right: 40px; 
}

/* Odstęp logo od menu nawigacyjnego */
.logo {
    margin-right: 40px !important;
}

/* Zmniejszenie odstępów między linkami w menu, aby uniknąć kolizji */
.main-navigation a {
    padding: 0 10px !important; /* Zmniejsza odstępy po bokach linków */
    font-size: 14px; /* Opcjonalnie: minimalnie mniejsza czcionka, by wszystko się zmieściło */
}

/* Odsunięcie menu od flag */
.main-navigation {
    margin-right: 20px;
}

.home-hero {
    padding: 100px 20px;
    background: #333; /* Ciemne tło jak na projekcie */
    color: #fff;
    text-align: center;
}
.btn-orange {
    display: inline-block;
    background: #e67e22;
    padding: 15px 30px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    margin-top: 20px;
}

/* --- ZDJĘCIE I TEKST OBOK SIEBIE (O NAS) --- */
.about-intro-split {
    display: flex;
    align-items: flex-start; 
    gap: 50px; 
    margin-bottom: 60px;
}

.about-intro-text {
    flex: 1.2; 
}

.about-intro-image {
    flex: 1; 
    position: relative;
    margin-top: 35px; /* NOWE: To wymusi idealne opuszczenie zdjęcia lekko w dół, niezależnie od tekstu! */
}

.about-intro-image img {
    width: 100%;
    height: 340px; /* NOWE: Mocniejsze skrócenie wysokości. Nie ma opcji, żeby gwiazdka to przetrwała. */
    object-fit: cover; 
    object-position: center top; /* ZMIANA: Każe przeglądarce trzymać się góry zdjęcia i odciąć cały dół. */
    border-radius: 8px; 
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5); 
    border-bottom: 4px solid #e67e22; 
    display: block;
}

/* --- KAFELKI O NAS --- */
.about-section {
    padding: 60px 20px;
    background-color: #1a1a1a;
    color: #ffffff;
}

.features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 30px;
    margin-top: 40px;
}

.feature-box {
    background-color: #222222;
    border-left: 4px solid #e67e22; 
    padding: 30px 25px;
    border-radius: 6px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.feature-icon {
    font-size: 35px;
    margin-bottom: 15px;
}

.feature-box h5 {
    color: #e67e22;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: 600;
}

.feature-box p {
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    color: #cccccc;
}

.about-cta {
    text-align: center;
    margin-top: 50px;
    padding-bottom: 20px;
}

/* --- DOSTOSOWANIE NA TELEFONY --- */
@media (max-width: 768px) {
    .about-intro-split {
        flex-direction: column;
    }
    
    .features-grid {
        grid-template-columns: 1fr; 
    }
}

/* --- ZAKŁADKA CENNIK --- */
.pricing-section {
    padding: 60px 20px;
    background-color: #1a1a1a;
    color: #ffffff;
}

.pricing-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px auto;
    font-size: 18px;
    line-height: 1.6;
    color: #cccccc;
    border-bottom: 1px solid #333333;
    padding-bottom: 30px;
}

.pricing-intro strong {
    color: #e67e22;
}

/* --- TWORZYMY DWIE KOLUMNY OBOK SIEBIE --- */
.pricing-content {
    display: flex;
    flex-direction: row; /* To wymusza układ lewa-prawa! */
    gap: 50px;
    align-items: flex-start;
}

.pricing-factors {
    flex: 1.2;
}

.factors-intro {
    margin-bottom: 30px;
    color: #aaaaaa;
}

.factors-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.factor-item {
    display: flex;
    flex-direction: row; /* Ikonka staje obok tekstu */
    align-items: flex-start;
    gap: 20px;
    background-color: #222222;
    padding: 20px;
    border-radius: 6px;
    border-left: 3px solid #555555;
    transition: border-color 0.3s ease;
    text-align: left; /* Zabezpiecza przed środkowaniem tekstu */
}

.factor-item:hover {
    border-color: #e67e22;
}

.factor-icon {
    font-size: 30px;
    line-height: 1;
}

.factor-text h5 {
    margin: 0 0 5px 0;
    color: #ffffff;
    font-size: 18px;
}

.factor-text p {
    margin: 0;
    color: #cccccc;
    font-size: 14px;
    line-height: 1.5;
}

.pricing-included {
    flex: 1;
}

/* --- ZDJĘCIE W CENNIKU (NAPRAWA ROZMIARU I GWIAZDKI) --- */
.pricing-image {
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
    border-bottom: 4px solid #e67e22;
}

.pricing-image img {
    width: 100%;
    height: 320px; /* <--- OTO FIX! Sztywna wysokość mocno zmniejszy zdjęcie */
    object-fit: cover; /* Idealnie wpasuje zdjęcie w ramy */
    object-position: center top; /* Schowa gwiazdkę AI na samym dole za ramką */
    display: block;
    border-radius: 8px 8px 0 0;
}

/* --- POMARAŃCZOWA RAMKA --- */
.included-box {
    background-color: #e67e22;
    color: #1a1a1a;
    padding: 40px 30px;
    border-radius: 8px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    text-align: left;
}

.included-box h4 {
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 22px;
    font-weight: bold;
    border-bottom: 2px solid #1a1a1a;
    padding-bottom: 15px;
}

.included-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.included-list li {
    margin-bottom: 15px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.check-icon {
    font-size: 18px;
}

.included-box .btn-primary {
    display: block;
    width: 100%;
    box-sizing: border-box; /* MAGIA: To powstrzymuje przycisk przed wylewaniem się na boki! */
    padding: 18px 20px; /* Wymusza ładną wysokość przycisku */
    background-color: #1a1a1a;
    color: #ffffff;
    border: none;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    border-radius: 6px; /* Pięknie zaokrągla rogi przycisku */
    margin-top: 20px; /* Robi ładny odstęp od listy powyżej */
    transition: background-color 0.3s ease;
}

.included-box .btn-primary:hover {
    background-color: #333333;
}

/* --- DOSTOSOWANIE NA TELEFONY --- */
@media (max-width: 900px) {
    .pricing-content {
        flex-direction: column;
    }
}

/* --- ZAKŁADKA REALIZACJE: SHOWCASE JEDNEGO ZDJĘCIA --- */
.portfolio-section {
    padding: 60px 20px;
    background-color: #1a1a1a;
    color: #ffffff;
}

.portfolio-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px auto;
    font-size: 18px;
    line-height: 1.6;
    color: #cccccc;
}

/* --- TWORZYMY UKŁAD SPLIT LEWA-PRAWA DLA JEDNEGO PROJEKTU --- */
.featured-project-split {
    display: flex;
    flex-direction: row;
    gap: 60px;
    align-items: center; /* Centruje opis względem wielkiego zdjęcia */
    margin-bottom: 70px;
}

.featured-project-image {
    flex: 2; /* Zdjęcie zajmuje więcej miejsca (66% szerokości) */
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    border-bottom: 4px solid #e67e22;
}

.featured-project-image img {
    width: 100%;
    height: 500px; /* Gigantyczna wysokość zdjęcia */
    object-fit: cover;
    object-position: center top; /*
    display: block;
    transition: transform 0.6s ease;
}

.featured-project-image:hover img {
    transform: scale(1.05); /* Subtelne przybliżenie */
}

/* Pomarańczowy tag w rogu zdjęcia */
.featured-project-tag {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: #e67e22;
    color: #1a1a1a;
    font-weight: bold;
    font-size: 12px;
    padding: 8px 15px;
    border-radius: 4px;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.featured-project-details {
    flex: 1; /* Opis zajmuje 33% szerokości */
}

.details-box {
    background-color: #222222;
    padding: 40px;
    border-radius: 8px;
    border-left: 4px solid #555555;
    transition: border-color 0.3s ease;
    text-align: left;
}

.details-box h4 {
    margin-top: 0;
    margin-bottom: 30px;
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid #333333;
    padding-bottom: 15px;
}

.details-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}

.details-list li {
    margin-bottom: 20px;
    font-size: 15px;
    color: #cccccc;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.orange-check {
    font-size: 16px;
    color: #e67e22; /* Ikonka pomarańczowa */
}

.pricing-cta {
    margin-top: 20px;
}

.included-box .btn-primary {
    display: block;
    width: 100%;
}

/* --- DOSTOSOWANIE NA TELEFONY --- */
@media (max-width: 1024px) {
    .featured-project-split {
        flex-direction: column;
    }
    
    .featured-project-image img {
        height: 350px; /* Zmniejszamy wysokość na mniejszych ekranach */
    }
}

/* --- ZAKŁADKA NASZE USŁUGI (TIMELINE) --- */
.services-section {
    padding: 60px 20px;
    background-color: #1a1a1a;
    color: #ffffff;
}

.services-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
    font-size: 18px;
    line-height: 1.6;
    color: #cccccc;
}

/* Główny kontener osi */
.timeline-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto 50px auto;
    padding: 20px 0;
}

/* Pionowa linia łącząca punkty */
.timeline-line {
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: #333333;
}

/* Pojedynczy element osi */
.timeline-item {
    position: relative;
    margin-bottom: 40px;
    padding-left: 80px;
    text-align: left;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

/* Okrągły znaczek z numerem kroku */
.timeline-badge {
    position: absolute;
    left: 12px;
    top: 15px;
    width: 40px;
    height: 40px;
    background-color: #222222;
    border: 3px solid #e67e22;
    color: #e67e22;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    z-index: 2;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.timeline-item:hover .timeline-badge {
    background-color: #e67e22;
    color: #1a1a1a;
    transform: scale(1.1);
}

/* Kafelki z opisem kroków */
.timeline-content {
    background-color: #222222;
    padding: 25px 30px;
    border-radius: 6px;
    border-left: 4px solid #555555;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.timeline-item:hover .timeline-content {
    border-color: #e67e22;
    transform: translateY(-2px);
}

.timeline-content h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
}

.timeline-content p {
    margin: 0;
    color: #cccccc;
    font-size: 15px;
    line-height: 1.6;
}

.services-cta {
    text-align: center;
    margin-top: 50px;
}

/* --- UKŁAD NAPRZEMIENNY PREMIUM (DLA EKRANÓW KOMPUTERÓW) --- */
@media (min-width: 769px) {
    .timeline-line {
        left: 50%;
        transform: translateX(-50%);
    }

    .timeline-item {
        width: 50%;
        padding-left: 0;
        margin-bottom: 60px;
    }

    /* Kroki parzyste (2 i 4) idą na prawą stronę */
    .timeline-item:nth-child(even) {
        margin-left: 50%;
        padding-left: 50px;
    }

    /* Kroki nieparzyste (1 i 3) idą na lewą stronę */
    .timeline-item:nth-child(odd) {
        margin-left: 0;
        padding-right: 50px;
        text-align: right;
    }
    
    /* Odwracamy pomarańczowy pasek dla lewej strony */
    .timeline-item:nth-child(odd) .timeline-content {
        border-left: none;
        border-right: 4px solid #555555;
    }
    
    .timeline-item:nth-child(odd):hover .timeline-content {
        border-right-color: #e67e22;
    }

    /* Centrowanie znaczków z numerami idealnie na środkowej linii */
    .timeline-item:nth-child(even) .timeline-badge {
        left: -22px;
    }

    .timeline-item:nth-child(odd) .timeline-badge {
        right: -22px;
        left: auto;
    }
}

/* --- ZAKŁADKA KONTAKT --- */
.contact-section {
    padding: 60px 20px;
    background-color: #1a1a1a;
    color: #ffffff;
}

.contact-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px auto;
    font-size: 18px;
    line-height: 1.6;
    color: #cccccc;
}

.contact-grid {
    display: flex;
    gap: 50px;
    align-items: stretch;
}

.contact-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-box {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: #222222;
    padding: 25px;
    border-radius: 6px;
    border-left: 4px solid #e67e22;
    transition: transform 0.3s ease;
}

.contact-box:hover {
    transform: translateX(10px); /* Fajny efekt: kafelek lekko odsuwa się w prawo po najechaniu */
}

.contact-icon {
    font-size: 35px;
}

.contact-info h5 {
    margin: 0 0 5px 0;
    color: #aaaaaa;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-info p {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
}

.contact-info a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info a:hover {
    color: #e67e22;
}

.contact-form-area {
    flex: 1;
}

.form-wrapper {
    background-color: #e67e22;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    color: #1a1a1a;
    height: 100%;
    box-sizing: border-box;
}

.form-wrapper h4 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: bold;
    border-bottom: 2px solid #1a1a1a;
    padding-bottom: 15px;
}

.btn-secondary:hover {
    background-color: #111 !important;
}

/* --- DOSTOSOWANIE NA TELEFONY --- */
@media (max-width: 768px) {
    .contact-grid {
        flex-direction: column;
    }
}

/* --- POPRAWKI DO KONTAKTU (IKONY I CZARNY TEKST) --- */
.contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-text-dark {
    color: #1a1a1a; /* Głęboka czerń */
    font-weight: 600; /* Wyraźne pogrubienie */
    font-size: 16px;
    line-height: 1.6;
}

/* --- ZAKŁADKA WEWNĘTRZNA: MONTAŻ LVT --- */
.service-detail-section {
    padding: 60px 20px;
    background-color: #1a1a1a;
    color: #ffffff;
}

.service-detail-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px auto;
    font-size: 18px;
    line-height: 1.6;
    color: #cccccc;
}

/* Duże zdjęcie - ukrywamy gwiazdkę AI na dole! */
.comparison-image-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 50px auto;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    border-bottom: 4px solid #e67e22;
}

.comparison-image-wrapper img {
    width: 100%;
    height: 480px; /* Sztywna wysokość odcina dół z gwiazdką */
    object-fit: cover;
    object-position: center top; /* Ustawia ostrość na górę i ucina sam dół */
    display: block;
}

/* Interaktywne karty porównawcze */
.comparison-cards {
    display: flex;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.comp-card {
    flex: 1;
    background-color: #222222;
    padding: 40px 30px;
    border-radius: 8px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top: 4px solid #333333;
}

.comp-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Kolorowe akcenty po najechaniu myszką */
.click-card:hover { border-top-color: #3498db; }
.glue-card:hover { border-top-color: #e67e22; }

.comp-icon {
    text-align: center;
    margin-bottom: 20px;
}

.comp-card h4 {
    text-align: center;
    color: #ffffff;
    font-size: 22px;
    margin-top: 0;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.comp-card h4 small {
    font-size: 14px;
    color: #aaaaaa;
    font-weight: normal;
}

.comp-card > p {
    text-align: center;
    color: #cccccc;
    font-size: 15px;
    margin-bottom: 30px;
    line-height: 1.5;
    min-height: 45px;
}

.comp-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comp-features li {
    margin-bottom: 15px;
    font-size: 15px;
    color: #dddddd;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.mt-50 { margin-top: 50px; }
.text-center { text-align: center; }

@media (max-width: 768px) {
    .comparison-cards {
        flex-direction: column;
    }
.comparison-image-wrapper img {
    width: 100%;
    height: auto; /* ZMIANA: Zdjęcie zachowuje naturalne proporcje i nie ucina tekstów na boki */
    margin-bottom: -38px; /* MAGIA: Odcina precyzyjnie 38 pikseli od samego dołu (idealnie na wielkość gwiazdki AI) */
    display: block;
}
}

/* --- ZAKŁADKA WEWNĘTRZNA: WYKŁADZINY PCV --- */
.wide-image-wrapper {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 50px auto;
    border-radius: 8px;
    overflow: hidden; /* Kluczowe do ukrycia gwiazdki */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    border-bottom: 4px solid #e67e22;
}

.wide-image-wrapper img {
    width: 107%;
    height: auto;
    margin-bottom: 0; /* SPRAWDZONY TRIK: Odcina precyzyjnie gwiazdkę AI z samego dołu! */
    display: block;
}

.pcv-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Automatycznie dzieli na 3 równe kolumny */
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.pcv-card {
    background-color: #222222;
    padding: 40px 30px;
    border-radius: 8px;
    text-align: center;
    border-bottom: 3px solid #333333;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.pcv-card:hover {
    transform: translateY(-8px);
    border-bottom-color: #e67e22; /* Podświetla dół karty na pomarańczowo */
}

.pcv-icon {
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pcv-card h4 {
    color: #ffffff;
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 15px;
}

.pcv-card p {
    color: #cccccc;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* --- ZAKŁADKA WEWNĘTRZNA: PRZYGOTOWANIE PODŁOŻA --- */
.prep-grid {
    display: flex;
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.prep-step {
    flex: 1;
    background-color: #222222;
    padding: 40px 30px;
    border-radius: 8px;
    position: relative;
    border-top: 4px solid #333333;
    transition: transform 0.3s ease, border-color 0.3s ease;
    overflow: hidden; /* Trzyma wielkie numery w ryzach */
}

.prep-step:hover {
    transform: translateY(-8px);
    border-top-color: #e67e22;
}

/* Wielkie, półprzezroczyste numery w tle */
.prep-number {
    font-size: 80px;
    font-weight: 900;
    color: rgba(230, 126, 34, 0.1); /* Bardzo delikatny, przezroczysty pomarańcz */
    position: absolute;
    top: -10px;
    right: 10px;
    line-height: 1;
    z-index: 1;
    transition: color 0.3s ease;
}

.prep-step:hover .prep-number {
    color: rgba(230, 126, 34, 0.25); /* Mocniejszy kolor po najechaniu */
}

.prep-step h4 {
    color: #ffffff;
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 15px;
    position: relative;
    z-index: 2; /* Tekst musi być nałożony NA numer */
}

.prep-step p {
    color: #cccccc;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    position: relative;
    z-index: 2; /* Tekst musi być nałożony NA numer */
}

@media (max-width: 768px) {
    .prep-grid {
        flex-direction: column;
    }
}

/* --- ZAKŁADKA WEWNĘTRZNA: PRACE WYKOŃCZENIOWE --- */
.finish-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.finish-card {
    background-color: #222222;
    padding: 35px 25px;
    border-radius: 8px;
    text-align: center;
    border-left: 3px solid #555555;
    transition: all 0.3s ease;
}

.finish-card:hover {
    background-color: #2a2a2a;
    border-left-color: #e67e22;
    transform: translateX(5px); /* Delikatne przesunięcie w prawo po najechaniu */
}

.finish-icon {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.finish-card h4 {
    color: #ffffff;
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 15px;
}

.finish-card p {
    color: #cccccc;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* --- UKRYCIE GWIAZDKI TYLKO DLA PRAC WYKOŃCZENIOWYCH --- */
#wykonczenie .wide-image-wrapper img {
    margin-bottom: -40px; /* Precyzyjnie odcina sam dół z gwiazdką */
}

/* --- STOPKA STRONY (FOOTER) --- */
.site-footer {
    background-color: #111111; /* Bardzo ciemny odcień szarości/czerni, ciemniejszy niż tło sekcji */
    color: #cccccc;
    padding: 70px 0 0 0;
    border-top: 4px solid #e67e22; /* Elegancki pomarańczowy pasek odcinający na górze stopki */
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 50px;
    margin-bottom: 50px;
}

.footer-logo {
    color: #ffffff;
    font-size: 28px;
    font-weight: 900;
    margin-top: 0;
    margin-bottom: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.footer-about {
    line-height: 1.6;
    font-size: 15px;
    margin: 0;
}

.footer-heading {
    color: #ffffff;
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

/* Subtelna pomarańczowa kreseczka pod nagłówkami kolumn */
.footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background-color: #e67e22;
}

.footer-links, .footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li, .footer-contact li {
    margin-bottom: 15px;
    font-size: 15px;
}

.footer-links a, .footer-contact a {
    color: #aaaaaa;
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.footer-links a:hover {
    color: #e67e22;
    padding-left: 5px; /* Magia: po najechaniu link lekko przesuwa się w prawo */
}

.footer-contact a:hover {
    color: #e67e22;
}

.footer-bottom {
    background-color: #080808; /* Niemal całkowita czerń na sam dół */
    padding: 20px 0;
    border-top: 1px solid #222222;
    font-size: 13px;
}

.footer-bottom-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.footer-bottom p {
    margin: 0;
    color: #777777;
}

.footer-privacy a {
    color: #777777;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-privacy a:hover {
    color: #e67e22;
}

@media (max-width: 768px) {
    .footer-bottom-container {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
}  

/* --- POPRAWKI DO STOPKI (WIDOCZNOŚĆ I IKONY) --- */
.footer-col {
    text-align: left !important; /* Wymusza eleganckie wyrównanie do lewej */
}

.footer-about {
    color: #dddddd !important; /* Jasny, bardzo czytelny szary */
    line-height: 1.8;
}

.text-orange {
    color: #e67e22; /* Soczysty pomarańcz */
}

.footer-contact li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px; /* Idealny odstęp ikony od tekstu */
}

.footer-contact li svg {
    flex-shrink: 0; /* Zabezpiecza ikonę przed odkształceniem */
}

/* --- PERFEKCYJNA HARMONIA KOLUMN STOPKI --- */
.footer-links, .footer-contact {
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
}

.footer-links li, .footer-contact li {
    margin-bottom: 14px !important; /* Identyczny, przyjemny dla oka odstęp w obu kolumnach */
    line-height: 1.5 !important;
    font-size: 15px !important;
}

/* --- PERFEKCYJNE WYŚRODKOWANIE I RÓWNE ODSTĘPY KOLUMN --- */
.footer-container {
    display: flex !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 50px !important;
    max-width: 1050px !important; /* Magia: zawężamy całość, żeby kolumny trzymały się środka ekranu */
    margin: 0 auto 50px auto !important; /* Centruje cały blok ze stopką */
}

.footer-col {
    flex: 1 !important; /* Wymusza dokładnie taką samą szerokość dla każdej z 3 kolumn */
    min-width: 250px !important;
}

/* --- OSTATECZNY UKŁAD STOPKI (MAKSYMALNIE ZMNIEJSZONA WYSOKOŚĆ) --- */
.site-footer {
    padding: 25px 0 0 0 !important; /* ŚCINA GÓRĘ: Drastycznie mniejszy odstęp nad kolumnami */
}

.footer-container {
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr !important; 
    gap: 30px !important; /* Minimalnie ciaśniej między kolumnami */
    max-width: 1100px !important;
    margin: 0 auto 5px auto !important; /* ŚCINA DÓŁ: Prawie całkowicie usuwa margines pod kolumnami */
}

/* Ścinamy puste miejsce pod nagłówkami i logo */
.footer-logo, .footer-heading {
    margin-bottom: 12px !important;
}

.footer-links, .footer-contact {
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
}

/* Ściskamy same linki i zmniejszamy delikatnie czcionkę, by była zgrabniejsza */
.footer-links li, .footer-contact li {
    margin-bottom: 8px !important; 
    line-height: 1.4 !important;
    font-size: 14px !important; 
}

/* Ścinamy grubość dolnego paska z prawami autorskimi */
.footer-bottom {
    padding: 10px 0 !important; 
}

@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr !important;
    }
}

/* --- ZAKŁADKA POLITYKA PRYWATNOŚCI --- */
.privacy-section {
    padding: 60px 20px 60px 20px !important;
    background-color: #1a1a1a;
    color: #cccccc;
}
.privacy-section .page-title {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.privacy-container {
    max-width: 900px; /* Celowo wąski układ, żeby tekst prawny dobrze się czytało */
    margin: 0 auto;
    background-color: #222222;
    padding: 50px;
    border-radius: 8px;
    border-top: 4px solid #e67e22;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.page-title {
    color: #ffffff;
    font-size: 28px;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
}

.privacy-intro {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 40px;
    text-align: justify;
    padding-bottom: 20px;
    border-bottom: 1px solid #333333;
}

.privacy-content h2 {
    color: #e67e22;
    font-size: 22px;
    margin-top: 40px;
    margin-bottom: 15px;
}

.privacy-content p, .privacy-content li {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 15px;
}

.privacy-content ul, .privacy-content ol {
    margin-left: 20px;
    margin-bottom: 25px;
}

.privacy-content li {
    margin-bottom: 10px;
}

.privacy-content strong {
    color: #ffffff;
}

@media (max-width: 768px) {
    .privacy-container {
        padding: 30px 20px;
    }
}

/* --- ZABEZPIECZENIE DLA WSZYSTKICH PODSTRON --- */
.site-main {
    padding-top: 80px !important; /* Dopasuj tę wartość do wysokości Twojego menu */
}

/* --- STYLE PRZYCISKÓW NA STRONIE GŁÓWNEJ --- */
.hero-buttons {
    margin-top: 30px;
    display: flex;
    gap: 20px;
    justify-content: center;
}

.btn-secondary {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    padding: 12px 30px !important;
    text-decoration: none !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
}

.btn-secondary:hover {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
}

/* --- EFEKT SZKŁA DLA GŁÓWNEGO BANERU --- */
.hero-content {
    background: rgba(26, 26, 26, 0.6) !important; /* Półprzezroczysta czerń */
    backdrop-filter: blur(10px) !important; /* Efekt rozmytego, szronionego szkła */
    -webkit-backdrop-filter: blur(10px) !important; /* Wsparcie dla Safari */
    border-radius: 15px !important; /* Eleganckie, zaokrąglone rogi */
    padding: 50px 40px !important; /* Więcej oddechu w środku */
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Bardzo subtelna, jasna ramka */
    box-shadow: 0 20px 40px rgba(0,0,0,0.4) !important; /* Cień nadający efekt 3D (lewitacji) */
    max-width: 800px;
    margin: 0 auto;
}
/* --- LUKSUZOWY UPGRADE SEKCJI GŁÓWNEJ (WOW!) --- */

/* 1. Tło sekcji (dodajemy płynną animację zoom) */
.hero-section {
    position: relative;
    overflow: hidden;
    transition: transform 0.5s ease-out; /* Baza dla efektu paralaksy */
}

/* 1. ODKRYWAMY PODŁOGĘ (Tylko delikatne przyciemnienie, zero rozmycia!) */
.hero-overlay {
    background: rgba(0, 0, 0, 0.3) !important; /* Subtelne przyciemnienie dla czytelności tekstu */
    backdrop-filter: none !important; /* Usuwamy to nieszczęsne rozmycie z całej strony! */
    -webkit-backdrop-filter: none !important;
}

/* 2. EFEKT SZKŁA TYLKO NA PANELU (Prawdziwy Glassmorphism) */
.hero-content {
    background: rgba(15, 15, 15, 0.5) !important; /* Półprzezroczysta, lekka czerń */
    backdrop-filter: blur(15px) !important; /* Szronione szkło działa TYLKO pod tym panelem! */
    -webkit-backdrop-filter: blur(15px) !important; /* Wsparcie dla Safari */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; /* Bardzo delikatna ramka szkła */
    border-radius: 20px !important; 
    padding: 60px !important;
    max-width: 850px;
    margin: 0 auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important; /* Cień nadający efekt lewitacji */
}

/* 4. Tytuł z fajerwerkami (Luksusowy gradient) */
.hero-title {
    font-size: 56px !important; /* Większy i bardziej dynamiczny */
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 50%, #e67e22 50%, #e67e22 100%) !important; /* Dwu-stopniowy gradient bieli i pomarańczu */
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important; /* Usuwamy stare, twarde cienie */
}

/* Korekta koloru pomarańczowego wewnątrz gradientu (musimy usunąć stary kolor) */
.hero-title .text-orange {
    color: inherit !important; /* Dziedziczy kolor z gradientu powyżej */
}

/* 5. Podtytuł (lżejszy) */
.hero-subtitle {
    font-size: 20px !important;
    margin-top: 25px !important;
    opacity: 0.9 !important;
    max-width: 700px;
}

/* 6. Przyciski z blaskiem */
.btn-primary {
    background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%) !important; /* Dynamiczny gradient pomarańczowy */
    border: none !important;
    box-shadow: 0 5px 15px rgba(230, 126, 34, 0.4) !important; /* Cień z kolorem, dający efekt blasku */
}

.btn-primary:hover {
    box-shadow: 0 8px 20px rgba(230, 126, 34, 0.6) !important;
}

/* 7. Animacja pojawiania się panelu po załadowaniu (Wow efekt) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-content {
    animation: fadeInUp 1s ease-out !important; /* Panel delikatnie wypływa */
}

/* 1. NISZCZYMY CZARNY KAFEL POD SPODEM (wymuszamy przezroczystość) */
.hero-container {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. PRAWDZIWE SZKŁO DLA PANELU (zmniejszamy czerń do minimum) */
.hero-content {
    background: rgba(0, 0, 0, 0.2) !important; /* Zaledwie 20% czerni - panel będzie niemal jak woda */
    backdrop-filter: blur(15px) !important; 
    -webkit-backdrop-filter: blur(15px) !important; 
    border: 1px solid rgba(255, 255, 255, 0.2) !important; /* Lekka, biała poświata na krawędziach */
    border-radius: 20px !important; 
    padding: 60px !important;
    max-width: 850px;
    margin: 0 auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important;
}

/* --- EFEKTY WOW I KINOWE ANIMACJE --- */

/* 1. KINOWE PRZYBLIŻENIE PODŁOGI (Zadziała, gdy ruszysz myszką po banerze) */
.hero-section {
    background-size: cover !important;
    background-position: center !important;
    transition: background-size 4s cubic-bezier(0.2, 0.8, 0.2, 1) !important; /* Bardzo powolne, luksusowe przejście */
}

 

/* 2. LEWITUJĄCY PANEL (Szklana tablica reaguje na kursor) */
.hero-content {
    transition: transform 0.5s ease-out, box-shadow 0.5s ease-out !important; /* Płynność ruchu panelu */
}

.hero-content:hover {
    transform: translateY(-15px) !important; /* Panel delikatnie unosi się do góry... */
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6) !important; /* ...i rzuca mocniejszy cień (efekt 3D) */
}

/* 3. EFEKTOWNE POJAWIENIE SIĘ PO WEJŚCIU NA STRONĘ */
@keyframes magicznyWjazd {
    0% { opacity: 0; transform: translateY(60px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.hero-content {
    animation: magicznyWjazd 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important; /* Wymuszenie długiej, eleganckiej animacji na start */
}

/* --- GLOBALNE TŁO ZE ZDJĘCIEM (EFEKT PARALAKSY) --- */

/* 1. Ustawienie tła dla całej strony z ciemnym filtrem */
/* --- GLOBALNE TŁO ZE ZDJĘCIEM (JASNE, BEZ FILTRU) --- */
body {
    background-image: url('podloga.png') !important; /* Czyste zdjęcie podłogi */
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important; /* Tło stoi nieruchomo */
    background-repeat: no-repeat !important;
}

/* 2. Usunięcie płaskiej czerni z głównych sekcji, by odsłonić podłogę */
.site-main,
.contact-section,
.privacy-section {
    background-color: transparent !important;
    background: transparent !important;
}

/* 3. Lekkie uszlachetnienie lewego panelu kontaktowego, by lepiej pasował do tła */
.contact-details {
    background: rgba(26, 26, 26, 0.6) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 30px;
}

/* --- USUNIĘCIE STAREGO FILTRU ZE STRONY GŁÓWNEJ --- */
.hero-section {
    background-image: none !important; /* Usuwamy podwójne tło */
    background-color: transparent !important;
}

.hero-overlay {
    display: none !important; /* Całkowicie wyłączamy starą, ciemną powłokę */
}

/* --- USUNIĘCIE CZARNEGO TŁA ZE WSZYSTKICH ZAKŁADEK --- */
.site-main > section {
    background-color: transparent !important;
    background: transparent !important;
}

/* --- GALERIA REALIZACJI: EFEKT WODOTRYSKU --- */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 40px;
    padding-bottom: 20px;
}

.portfolio-item {
    position: relative; /* WAŻNE: Trzyma nasz wyjeżdżający panel w ryzach */
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
    opacity: 0; /* Zaczynamy od niewidocznych zdjęć */
    animation: wodotrysk 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* Odpalenie fontanny */
    cursor: pointer;
    background-color: #111;
}

.portfolio-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

/* Luksusowy panel, który wyjeżdża z dołu po najechaniu myszką */
.portfolio-overlay {
    position: absolute; /* WAŻNE: Sprawia, że panel leży "na" zdjęciu */
    bottom: -100%; /* WAŻNE: Ukrywa panel poza kadrem przed najechaniem myszką */
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(243, 156, 18, 0.95), rgba(243, 156, 18, 0.6));
    padding: 15px 10px;
    color: #fff;
    transition: bottom 0.4s ease;
    text-align: center;
    box-sizing: border-box;
}

.portfolio-overlay h4 {
    margin: 0 0 6px 0;
    font-size: 14px; /* Zmniejszona czcionka dla długich nazw */
    font-weight: bold;
    text-transform: uppercase;
    color: #fff !important;
    line-height: 1.3;
}

.portfolio-overlay p {
    margin: 0;
    font-size: 12px;
    color: #fff !important;
    line-height: 1.4;
}

/* Co się dzieje, gdy najedziemy myszką */
.portfolio-item:hover img {
    transform: scale(1.1); /* Zoom zdjęcia */
}

.portfolio-item:hover .portfolio-overlay {
    bottom: 0; /* Wjazd pomarańczowej belki */
}

/* KLUCZOWA ANIMACJA - PRAWDZIWA FONTANNA I FAJERWERKI */
@keyframes wodotrysk {
    0% { 
        opacity: 0; 
        transform: translateY(200px) scale(0.3); /* Zaczynają głęboko i malutkie */
    }
    50% { 
        opacity: 1; 
        transform: translateY(-20px) scale(1.05); /* Wystrzał w górę i lekkie powiększenie! */
    }
    75% {
        transform: translateY(10px) scale(0.98); /* Opadanie po wystrzale */
    }
    100% { 
        opacity: 1; 
        transform: translateY(0) scale(1); /* Ustabilizowanie na miejscu */
    }
}

/* --- LIGHTBOX (POWIĘKSZANIE ZDJĘĆ) --- */
.vf-lightbox {
    display: none; 
    position: fixed; 
    z-index: 9999; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.95);
    align-items: center; 
    justify-content: center;
}

.vf-lightbox-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90%;
}

 .vf-lightbox-content {
    max-width: 100%; 
    max-height: 75vh; 
    border-radius: 8px;
    box-shadow: 0 0 40px rgba(243, 156, 18, 0.5); 
    transform: scale(0.5);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
    cursor: zoom-in;

    /* RECEPTA NA NIEBIESKI EKRAN: Blokada zaznaczania grafiki myszką */
    user-select: none;
    -webkit-user-select: none; /* Dla przeglądarek Safari / Chrome */
    -moz-user-select: none;    /* Dla przeglądarki Firefox */
}
    


.vf-lightbox-content.show {
    transform: scale(1);
    opacity: 1;
}

/* NOWE: Stan potężnego powiększenia po kliknięciu */
.vf-lightbox-content.show.zoomed {
    transform: scale(2.5); /* Powiększa zdjęcie o 250% */
    cursor: zoom-out; /* Kursor zamienia się w lupę z minusem */
}

.vf-lightbox-caption {
    margin-top: 20px;
    color: #fff;
    text-align: center;
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.vf-lightbox-caption strong {
    color: #f39c12; 
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 5px;
}

/* Krzyżyk i strzałki (dostały wyższy priorytet, żeby nie zniknęły pod powiększeniem) */
.vf-lightbox-close, .vf-lightbox-prev, .vf-lightbox-next {
    position: absolute; 
    color: #f39c12; 
    font-weight: bold; 
    cursor: pointer;
    transition: 0.3s;
    user-select: none;
    z-index: 10000; 
}

.vf-lightbox-close { top: 20px; right: 40px; font-size: 50px; }
.vf-lightbox-prev, .vf-lightbox-next { top: 50%; transform: translateY(-50%); font-size: 60px; padding: 20px; }
.vf-lightbox-prev { left: 20px; }
.vf-lightbox-next { right: 20px; }

.vf-lightbox-close:hover, .vf-lightbox-prev:hover, .vf-lightbox-next:hover { color: #fff; transform: scale(1.2); }
.vf-lightbox-prev:hover { transform: translateY(-50%) scale(1.2); }
.vf-lightbox-next:hover { transform: translateY(-50%) scale(1.2); }

/* --- ZWIĘKSZENIE ODSTĘPÓW W ROZWIJANYM MENU (DROPDOWN) --- */
.sub-menu li, 
.main-navigation ul ul li {
    margin-bottom: 10px !important; /* Odstęp między kolejnymi linijkami tekstu */
}

/* Likwidujemy margines dla ostatniej pozycji, żeby menu ładnie się kończyło */
.sub-menu li:last-child, 
.main-navigation ul ul li:last-child {
    margin-bottom: 0 !important;
}

/* Dodatkowy komfort kliknięcia (większa przestrzeń wokół tekstu) */
.sub-menu li a, 
.main-navigation ul ul li a {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    display: block;
}

/* Naprawa wystających kafelków osi czasu (Usługi) */
@media (min-width: 768px) {
    .timeline-container .timeline-content {
        max-width: 90% !important;
        box-sizing: border-box !important;
    }
}