/*
Theme Name: FHU Adrian
Author: 
Description: Landing page dla FHU Adrian.
Version: 1.0
*/

:root{
  --navy:#0e2431; --green:#16855b; --green2:#0d6b49; --cream:#f4f1e8;
  --text:#20313a; --muted:#61727a; --white:#fff; --line:#dfe6e3;
  --shadow:0 18px 50px rgba(14,36,49,.10); --radius:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:#fff;line-height:1.6}
a{color:inherit;text-decoration:none}
.container{width:min(1120px,92%);margin:auto}
.top{background:var(--navy);color:#dce8e9;font-size:14px}
.top .container{display:flex;justify-content:space-between;gap:20px;padding:9px 0}
header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid #edf1ef}
nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.logo{font-weight:900;font-size:24px;letter-spacing:-.5px;color:var(--navy)}
.logo span{color:var(--green)}
.navlinks{display:flex;align-items:center;gap:28px;font-weight:700;font-size:15px}
.navlinks a:hover{color:var(--green)}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:12px;padding:13px 20px;font-weight:800;cursor:pointer;transition:.2s}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 8px 22px rgba(22,133,91,.22)}
.btn-primary:hover{background:var(--green2);transform:translateY(-1px)}
.btn-light{background:#fff;color:var(--navy)}
.hero{background:linear-gradient(135deg,#edf7f2 0%,#fff 58%,#eef3ef 100%);padding:76px 0 72px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:55px}
.eyebrow{display:inline-block;background:#d9efe6;color:var(--green2);padding:7px 12px;border-radius:999px;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.7px}
.eyebrow-dark{display:inline-block!important;padding:7px 12px!important;border-radius:999px!important;font-weight:900!important;font-size:13px!important;text-transform:uppercase!important;letter-spacing:.7px!important;background:rgba(39,174,96,.15)!important;color:#2ecc71!important;margin:0 0 20px 0!important;}
h1{font-size:clamp(42px,6vw,72px);line-height:1.02;letter-spacing:-2.8px;margin:18px 0 20px;color:var(--navy)}
h1 span{color:var(--green)}
.lead{font-size:19px;color:var(--muted);max-width:650px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:28px;color:#52666e;font-weight:700;font-size:14px}
.visual{position:relative}
.bin-scene{background:var(--navy);border-radius:32px;padding:28px;min-height:410px;box-shadow:var(--shadow);display:flex;align-items:end;justify-content:center;overflow:hidden}
.bin{width:155px;height:245px;border-radius:16px 16px 22px 22px;position:relative;box-shadow:0 20px 35px rgba(0,0,0,.25);margin:0 -9px;transform:rotate(-2deg)}
.bin:nth-child(2){height:275px;transform:translateY(-18px)}
.bin:nth-child(3){transform:rotate(2deg)}
.bin:before{content:"";position:absolute;left:-7px;right:-7px;top:-20px;height:29px;border-radius:8px;background:#263c45}
.bin:after{content:"";position:absolute;left:14px;right:14px;top:34px;height:12px;border-radius:8px;background:rgba(255,255,255,.15)}
.bin .wheel{position:absolute;bottom:-10px;width:29px;height:29px;background:#162a33;border-radius:50%;border:5px solid #314750}
.bin .wheel.left{left:18px}.bin .wheel.right{right:18px}
.green{background:#197a57}.yellow{background:#d6a62b}.blue{background:#3577a8}
.badge{position:absolute;right:-12px;top:20px;background:#fff;border:1px solid var(--line);padding:13px 16px;border-radius:14px;box-shadow:var(--shadow);font-weight:900}
section{padding:78px 0}
.section-head{text-align:center;max-width:750px;margin:0 auto 42px}
.section-head h2{font-size:38px;line-height:1.1;letter-spacing:-1.2px;margin:10px 0;color:var(--navy)}
.section-head p{color:var(--muted);font-size:17px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:0 8px 25px rgba(14,36,49,.05)}
.icon{width:48px;height:48px;border-radius:14px;background:#e3f2ec;display:grid;place-items:center;font-size:24px;margin-bottom:18px}
.card h3{margin:0 0 8px;color:var(--navy);font-size:20px}
.card p{margin:0;color:var(--muted)}
.range{background:var(--cream)}
.range-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.range-item{background:#fff;border-radius:16px;padding:22px;text-align:center;border:1px solid #e5e2d8}
.range-item strong{display:block;font-size:26px;color:var(--navy)}
.range-item span{color:var(--muted);font-size:14px}
.colors{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.color{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);padding:9px 14px;border-radius:999px;font-weight:700}
.dot{width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.12)}
.offer{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.offer h2{font-size:42px;line-height:1.08;color:var(--navy);margin:0 0 16px}
.checklist{display:grid;gap:12px;margin:24px 0}
.check{display:flex;gap:10px;align-items:flex-start}
.check b{color:var(--green);font-size:20px;line-height:1}
.quote{background:var(--navy);color:#fff;border-radius:28px;padding:36px;box-shadow:var(--shadow)}
.quote h3{font-size:28px;margin:0 0 8px}
.quote p{color:#c6d4d8}

form{display:grid;gap:10px;margin-top:18px}
input,textarea,select{width:100%;padding:10px 14px;border-radius:8px;border:1px solid #49606a;background:#18303d;color:#fff;font-family:inherit;font-size:14px}
textarea{min-height:80px;resize:vertical}


input::placeholder,textarea::placeholder{color:#9eb0b7}
footer{background:#091b24;color:#b9c8cc;padding:38px 0}
.small{font-size:13px;color:#8fa3aa}

@media(max-width:850px){
  .navlinks{display:none}.hero-grid,.offer{grid-template-columns:1fr}.cards{grid-template-columns:1fr}.range-grid{grid-template-columns:repeat(2,1fr)}
  .hero{padding-top:50px}.bin-scene{min-height:330px}.footer-grid{flex-direction:column;align-items:flex-start}
}
@media(max-width:500px){.range-grid{grid-template-columns:1fr 1fr}.bin{width:100px;height:190px}.bin:nth-child(2){height:220px}}

/* --- Style komunikatów formularza */
.wpcf7 form .wpcf7-response-output {
    margin: 20px 0 0 0;
    padding: 15px;
    border-radius: 11px;
    border: none;
    text-align: center;
    font-weight: 600;
    color: #fff;
}
/* Komunikat o sukcesie (zielony) */
.wpcf7 form.sent .wpcf7-response-output {
    background: var(--green); 
}
/* Komunikat o błędzie (czerwony) */
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output {
    background: #cc3333; 
}
/* Ostrzeżenie pod konkretnym, źle wypełnionym polem */
.wpcf7-not-valid-tip {
    color: #ff6b6b;
    font-size: 13px;
    margin-top: 4px;
    display: block;
}
/* --- Ukrycie domyślnego komunikatu sukcesu CF7 --- */
.wpcf7 form.sent .wpcf7-response-output {
    display: none !important;
}

/* --- Wygląd wyskakującego okienka (Pop-up) --- */
#custom-cf7-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(14, 36, 49, 0.85); /* Ciemne, półprzezroczyste tło dopasowane do granatu strony */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

#custom-cf7-modal.show {
    opacity: 1;
    visibility: visible;
}

.cf7-modal-content {
    background: #fff;
    padding: 40px 30px;
    border-radius: 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

#custom-cf7-modal.show .cf7-modal-content {
    transform: translateY(0);
}

.cf7-modal-content h3 {
    margin: 0 0 10px;
    color: var(--green);
    font-size: 26px;
}

.cf7-modal-content p {
    color: var(--muted);
    margin: 0;
    font-size: 16px;
}

/* --- Animowany pasek postępu (odliczanie) --- */
.cf7-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 6px;
    background: var(--green);
    width: 100%;
}

#custom-cf7-modal.show .cf7-progress-bar {
    animation: countdown 2s linear forwards;
}

@keyframes countdown {
    from { width: 100%; }
    to { width: 0%; }
}

/* --- Wygląd klikalnych kafelków --- */
.range-item.clickable {
    cursor: pointer;
    transition: all 0.3s ease;
}
.range-item.clickable:hover {
    border-color: var(--green);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(22,133,91,.08);
}
.range-item.clickable.active {
    background: var(--green);
    border-color: var(--green);
}
.range-item.clickable.active strong,
.range-item.clickable.active span {
    color: #fff; /* Po kliknięciu tekst zmienia się na biały */
}

/* --- Rozsuwany panel --- */
.range-details-wrapper {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: all 0.4s ease-out;
    background: #f7faf8;
    border-radius: 16px;
}
.range-details-wrapper.open {
    max-height: 800px;
    opacity: 1;
    padding: 30px;
    margin-top: 20px;
    border: 1px solid #dcede5;
}

/* --- Poszczególne szufladki --- */
.range-pane {
    display: none;
    animation: fadeInPane 0.5s ease forwards;
}
.range-pane.active-pane {
    display: block;
}

@keyframes fadeInPane {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- WNĘTRZE SZUFLADKI (Tekst po lewej, zdjęcia po prawej) --- */
.pane-content-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 40px;
    align-items: center;
}

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

.pane-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 8px;
    color: var(--muted);
}

.pane-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--green);
    font-weight: bold;
}

/* --- EFEKT PRZENIKANIA ZDJĘĆ --- */
.image-transition-box {
    position: relative;
    width: 100%;
    height: 320px;
    max-width: 400px;
    margin-left: auto;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    cursor: pointer;
}

/* Oba zdjęcia zajmują 100% miejsca i leżą w tym samym punkcie */
.image-transition-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease-in-out;
}

/* Pierwsze zdjęcie na spodzie */
.img-zdj1 { 
    z-index: 1; 
}

/* Drugie zdjęcie u góry, domyślnie niewidoczne (przezroczyste) */
.img-zdj2 { 
    z-index: 2; 
    opacity: 0; 
}

/* Magia: po najechaniu myszką, górne zdjęcie staje się widoczne */
.image-transition-box:hover .img-zdj2 {
    opacity: 1; 
}

/* Czarny pasek z podpowiedzią na dole obrazka */
.hover-hint {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    z-index: 3;
    pointer-events: none;
}

/* Wersja na telefony (jedno pod drugim) */
@media (max-width: 768px) {
    .pane-content-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .image-transition-box {
        margin-left: 0;
    }
}

/* ============================================== */
/*             STYL STOPKI                        */
/* ============================================== */

.site-footer {
    position: relative;
    color: #fff;
    overflow: hidden;
    padding: 80px 0 0 0;
}

/* Kontener trzymający mapę na samym spodzie */
.footer-map-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
}

/* Warstwa ściągająca kolory (czarno-biała mapa po lewej) */
.footer-grayscale-zone {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2;
    backdrop-filter: grayscale(100%);
    -webkit-mask-image: linear-gradient(to right, black 35%, transparent 65%);
    mask-image: linear-gradient(to right, black 35%, transparent 65%);
    pointer-events: none; /* Pozwala "przeklikać" się do mapy */
}

/* Warstwa zaciemniająca (łagodne przejście z ciemnego granatu/czerni do przezroczystości) */
.footer-dark-zone {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 3;
    background: linear-gradient(to right, rgba(17, 24, 39, 0.98) 0%, rgba(17, 24, 39, 0.85) 45%, rgba(17, 24, 39, 0) 100%);
    pointer-events: none;
}

/* Główny układ treści na stopce */
.footer-content-grid {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 40px;
    padding-bottom: 60px;
}

/* Ograniczenie szerokości tekstu, żeby nie wjeżdżał na kolorową mapę */
.footer-info {
    max-width: 420px;
}

.footer-logo {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 5px;
}

.company-owner {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--green, #27ae60);
    margin-bottom: 25px;
    font-weight: 600;
}

.company-desc {
    font-size: 14px;
    line-height: 1.7;
    color: #9ca3af; /* Szary tekst */
    margin-bottom: 35px;
}

/* Układ dla smartfonów (Mapa i tła) */
@media (max-width: 768px) {
    .footer-content-grid { grid-template-columns: 1fr; }
    .footer-map-spacer { display: none; }
    
    /* Wyłączamy maskę czarno-białą, żeby cała mapa pod spodem była szara i przygaszona */
    .footer-grayscale-zone {
        -webkit-mask-image: none;
        mask-image: none;
    }
    .footer-dark-zone {
        /* Jednolite ciemne tło na całości, by tekst był czytelny na telefonie */
        background: rgba(17, 24, 39, 0.92);
    }
}

/* --- DANE KONTAKTOWE W STOPCE --- */
.footer-grid { display:flex; justify-content:space-between; gap:30px; align-items:center; }
.footer-contact { margin-top: 40px; }

.footer-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #9ca3af;
    font-weight: 700;
    margin-bottom: 8px;
}

.footer-value {
    display: block !important;
    font-size: 19px !important;
    color: #fff !important;
    font-weight: 400 !important;
    margin-bottom: 25px !important;
    line-height: 1.4 !important; 
}

.footer-value .address-line {
    display: block;
    margin-bottom: 8px;
}

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

.footer-value a:hover {
    color: #2ecc71;
}

/* --- LINK: POKAŻ TRASĘ DOJAZDU --- */
.footer-value .route-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    color: #2ecc71;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: opacity 0.3s ease;
}

.footer-value .route-link:hover {
    color: #27ae60;
    opacity: 0.8;
}

/* --- NIP I REGON --- */
.footer-legal {
    margin-top: 10px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,.05);
    font-size: 11px;
    color: #6b7280;
    display: flex;
    gap: 20px;
    letter-spacing: .5px;
}

/* --- PASEK PRAWA AUTORSKIE --- */
.footer-bottom {
    position: relative;
    z-index: 4;
    background: rgba(17, 24, 39, 0.95);
    padding: 20px 0;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.05);
    font-size: 13px;
    color: #9ca3af;
}

/* ============================================== */
/*           STYLE WYCIĘTE Z HTML (STOPKA)        */
/* ============================================== */

/* --- USTAWIENIA MAPY --- */
.custom-footer-map {
  position: absolute;
  top: -10%; 
  left: 0;
  width: 120%; 
  height: 120%; 
  z-index: 1;
  pointer-events: none; 
}

/* --- GŁÓWNY KONTENER --- */
.footer-grid-container {
  position: relative; 
  z-index: 3; 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 40px; 
  padding-bottom: 50px; 
  pointer-events: none;
}

/* --- LEWA KOLUMNA --- */
.footer-content-left {
  pointer-events: auto; 
  max-width: 420px;
  text-align: left !important; 
}
.footer-content-left * {
  text-align: left !important; 
}

.footer-hero-title {
  font-size: 42px !important; 
  font-weight: 800 !important; 
  line-height: 1.1 !important; 
  margin: 0 0 35px 0 !important;
  letter-spacing: -1px !important;
}

.title-white {
  color: #ffffff !important; 
  display: block !important;
}

.title-green {
  color: #27ae60 !important; 
  display: block !important;
}

/* --- USTAWIENIA (TELEFON) --- */
@media (max-width: 768px) {
  .custom-footer-map {
    width: 150%; 
    height: 100%;
    top: 0;
    left: 15%; 
  }
  .footer-grid-container {
    grid-template-columns: 1fr; 
  }
  .mobile-dark-overlay {
    background: linear-gradient(to right, rgba(17, 24, 39, 1) 0%, rgba(17, 24, 39, 0.95) 60%, rgba(17, 24, 39, 0) 100%) !important;
  }
  .footer-hero-title {
    font-size: 34px !important; 
  }
}