/* --- Nagłówek strony -------------------------------------------------- */
.naglowek{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--c-linia)}
.naglowek__rzad{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);min-height:64px}
.znak{font-family:var(--font-naglowek);font-size:1.375rem;line-height:1;color:var(--c-marka);text-decoration:none;display:block}
.znak__podpis{display:block;font-family:var(--font-tekst);font-size:.6875rem;letter-spacing:.04em;color:var(--c-tekst-wyciszony);margin-top:3px}
.naglowek__akcje{display:flex;align-items:center;gap:var(--s-2)}
.menu-przycisk{background:none;border:0;padding:var(--s-1);cursor:pointer;color:var(--c-marka);display:flex}
.menu-przycisk svg{width:24px;height:24px}
.nawigacja{display:none}
.nawigacja--otwarta{display:block;position:absolute;inset-inline:0;top:100%;background:#fff;border-bottom:1px solid var(--c-linia);padding:var(--s-2) 0}
.nawigacja ul{list-style:none;margin:0;padding:0}
.nawigacja a{display:block;padding:var(--s-2) var(--margines-boczny);text-decoration:none;color:var(--c-tekst);border-bottom:1px solid var(--c-linia)}
.nawigacja a:last-child{border-bottom:0}
.jezyki{display:flex;gap:var(--s-1);font-size:var(--fs-etykieta);text-transform:uppercase;letter-spacing:.08em}
.jezyki a{text-decoration:none;color:var(--c-tekst-wyciszony)}
.jezyki a[aria-current]{color:var(--c-marka);font-weight:700}

/* --- Sekcja otwierająca ------------------------------------------------ */
.hero{padding-block:var(--s-8) var(--sekcja-odstep)}
.hero__tresc>*+*{margin-top:var(--s-3)}
.hero__opis{font-size:1.0625rem;color:var(--c-tekst-wyciszony);max-width:34rem}
.hero__mikrokopia{font-size:var(--fs-drobny);color:var(--c-tekst-wyciszony)}
.hero__obraz{position:relative;margin-top:var(--s-6);border-radius:var(--r-kafel);overflow:hidden;background:var(--c-tlo-techniczne);aspect-ratio:4/3}
.hero__obraz img{width:100%;height:100%;object-fit:cover}

/* --- Pasek zaufania ---------------------------------------------------- */
.zaufanie{border-block:1px solid var(--c-linia)}
.zaufanie ul{list-style:none;margin:0;padding:0}
.zaufanie li{padding:var(--s-3) 0;border-bottom:1px solid var(--c-linia);font-size:var(--fs-drobny);color:var(--c-tekst-wyciszony)}
.zaufanie li:last-child{border-bottom:0}
.zaufanie b{display:block;font-family:var(--font-naglowek);font-size:1.25rem;font-weight:400;color:var(--c-marka);margin-bottom:2px}

/* --- Zestawienie "jak jest zwykle / jak z Cadelie" --------------------- */
.zestawienie{display:grid;gap:var(--s-4);margin-top:var(--s-6)}
.zestawienie__blok{padding:var(--s-4);border-radius:var(--r-karta)}
.zestawienie__blok--przed{background:transparent;border:1px solid var(--c-linia)}
.zestawienie__blok--po{background:var(--c-bez)}
.zestawienie h3{margin:0 0 var(--s-2)}
.zestawienie ul{list-style:none;margin:0;padding:0}
.zestawienie li{padding:var(--s-1) 0;font-size:var(--fs-drobny);border-bottom:1px solid var(--c-linia)}
.zestawienie li:last-child{border-bottom:0}
.zestawienie__blok--przed li{color:var(--c-tekst-wyciszony)}

/* --- PROCES: element rozpoznawczy marki -------------------------------- */
.proces{text-align:center}
.proces__lista{list-style:none;margin:var(--s-8) 0 0;padding:0;position:relative}
.proces__krok{position:relative;padding-bottom:var(--s-8)}
.proces__krok:last-child{padding-bottom:0}
/* pionowa oś łącząca koła */
.proces__krok:not(:last-child)::after{
  content:"";position:absolute;left:50%;top:88px;width:1px;height:calc(100% - 88px);
  background:var(--c-linia);transform:translateX(-50%);
}
.proces__kolo{
  position:relative;z-index:2;width:88px;height:88px;margin:0 auto var(--s-3);
  border-radius:var(--r-kolo);background:#fff;border:1px solid var(--c-linia);
  display:flex;align-items:center;justify-content:center;
}
.proces__kolo svg{width:32px;height:32px;stroke:var(--c-marka);fill:none;stroke-width:1.5}
.proces__cyfra{
  position:absolute;top:0;font-family:var(--font-naglowek);font-size:6rem;line-height:1;
  color:var(--c-cyfra-widmo);z-index:0;pointer-events:none;user-select:none;font-weight:400;
}
.proces__krok:nth-child(odd) .proces__cyfra{left:calc(50% + 44px)}
.proces__krok:nth-child(even) .proces__cyfra{right:calc(50% + 44px)}
.proces__tytul{margin:0 0 var(--s-1)}
.proces__opis{font-size:var(--fs-drobny);color:var(--c-tekst-wyciszony);max-width:24rem;margin-inline:auto}
/* znacznik dnia — koduje model biznesowy */
.proces__znacznik{
  position:relative;width:auto;z-index:3;display:flex;align-items:center;gap:var(--s-2);
  margin:0 0 var(--s-8);color:var(--c-marka);
  font-size:var(--fs-etykieta);text-transform:uppercase;letter-spacing:.12em;font-weight:600;
}
.proces__znacznik::before,.proces__znacznik::after{content:"";flex:1;height:1px;background:var(--c-linia)}

/* --- Oferta wejściowa -------------------------------------------------- */
.zaproszenie{background:var(--c-bez);padding:var(--s-6) var(--s-4);border-radius:var(--r-karta)}
.zaproszenie h2{margin-bottom:var(--s-2)}
.zaproszenie p{color:var(--c-tekst-wyciszony);max-width:36rem}

/* --- Galeria realizacji ------------------------------------------------ */
.galeria{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-2)}
.kafel{text-decoration:none;display:block}
.kafel__obraz{aspect-ratio:1;background:var(--c-tlo-techniczne);border-radius:var(--r-kafel);overflow:hidden;position:relative}
.kafel__obraz img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.kafel:hover .kafel__obraz img{transform:scale(1.04)}
.kafel__pusty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.32);font-size:var(--fs-etykieta);text-transform:uppercase;letter-spacing:.12em;text-align:center;padding:var(--s-2)}
.kafel__nazwa{margin:var(--s-1) 0 0;font-size:var(--fs-drobny);color:var(--c-tekst)}
.kafel__typ{font-size:var(--fs-etykieta);text-transform:uppercase;letter-spacing:.1em;color:var(--c-tekst-wyciszony)}
.filtry{display:flex;gap:var(--s-1);overflow-x:auto;padding-bottom:var(--s-2);margin-bottom:var(--s-4);scrollbar-width:none}
.filtry::-webkit-scrollbar{display:none}
.filtr{flex:0 0 auto;padding:.5rem 1rem;border:1px solid var(--c-linia);border-radius:999px;background:#fff;color:var(--c-tekst-wyciszony);font-size:var(--fs-drobny);text-decoration:none;white-space:nowrap}
.filtr[aria-current]{background:var(--c-marka);border-color:var(--c-marka);color:#fff}

/* --- Karty oferty: bez wypełnienia i bez cienia ------------------------ */
.karty{display:grid;gap:var(--s-4);margin-top:var(--s-6)}
.karta{padding-top:var(--s-3);border-top:1px solid var(--c-linia)}
.karta svg{width:28px;height:28px;stroke:var(--c-marka);fill:none;stroke-width:1.5;margin-bottom:var(--s-2)}
.karta p{font-size:var(--fs-drobny);color:var(--c-tekst-wyciszony)}

/* --- Korzyści (ścieżki lekarz/technik) --------------------------------- */
.korzysci{list-style:none;margin:var(--s-6) 0 0;padding:0;display:grid;gap:var(--s-3)}
.korzysci li{display:flex;gap:var(--s-2);align-items:flex-start;padding-bottom:var(--s-3);border-bottom:1px solid var(--c-linia)}
.korzysci li:last-child{border-bottom:0}
.korzysci svg{flex:0 0 24px;width:24px;height:24px;stroke:var(--c-marka);fill:none;stroke-width:1.5;margin-top:2px}

/* --- Wybór odbiorcy ---------------------------------------------------- */
.wybor{display:grid;gap:var(--s-2);margin-top:var(--s-4)}
.wybor__pole{display:block;min-height:120px;padding:var(--s-3);border:1px solid var(--c-linia);border-radius:var(--r-karta);text-decoration:none;background:#fff;transition:border-color .2s ease}
.wybor__pole:hover{border-color:var(--c-marka)}
.wybor__pole svg{width:28px;height:28px;stroke:var(--c-marka);fill:none;stroke-width:1.5;margin-bottom:var(--s-2)}
.wybor__pole p{font-size:var(--fs-drobny);color:var(--c-tekst-wyciszony);margin:var(--s-1) 0 0}

/* --- Opinie ------------------------------------------------------------ */
.opinia{border:0;margin:0;padding:0}
.opinia blockquote{margin:0;font-family:var(--font-naglowek);font-size:1.375rem;line-height:1.45;color:var(--c-marka)}
.opinia figcaption{margin-top:var(--s-2);font-size:var(--fs-drobny);color:var(--c-tekst-wyciszony)}
.opinia+.opinia{margin-top:var(--s-6);padding-top:var(--s-6);border-top:1px solid var(--c-linia)}

/* --- FAQ --------------------------------------------------------------- */
.faq{margin-top:var(--s-6)}
.faq details{border-bottom:1px solid var(--c-linia)}
.faq summary{padding:var(--s-3) 0;cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:var(--s-2)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--c-marka);font-size:1.25rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{padding-bottom:var(--s-3);color:var(--c-tekst-wyciszony);font-size:var(--fs-drobny);margin:0}

/* --- Formularz --------------------------------------------------------- */
.pole{margin-bottom:var(--s-3)}
.pole label{display:block;font-size:var(--fs-drobny);font-weight:600;margin-bottom:var(--s-1)}
.pole input,.pole select,.pole textarea{
  width:100%;min-height:56px;padding:var(--s-2);border:1px solid var(--c-linia);
  border-radius:var(--r-pole);background:#fff;font:inherit;font-size:var(--fs-tekst);color:var(--c-tekst);
}
.pole textarea{min-height:120px;resize:vertical}
.pole input:focus,.pole select:focus,.pole textarea:focus{outline:2px solid var(--c-marka);outline-offset:0;border-color:var(--c-marka)}
.pole__podpowiedz{font-size:var(--fs-drobny);color:var(--c-tekst-wyciszony);margin-top:var(--s-1)}
.zgoda{display:flex;gap:var(--s-2);align-items:flex-start;font-size:var(--fs-drobny);color:var(--c-tekst-wyciszony);margin-bottom:var(--s-3)}
.zgoda input{width:20px;height:20px;min-height:0;flex:0 0 20px;margin-top:2px}
.odznaki{list-style:none;margin:var(--s-6) 0 0;padding:0;display:grid;gap:var(--s-2)}
.odznaki li{display:flex;gap:var(--s-2);align-items:center;font-size:var(--fs-drobny);color:var(--c-tekst-wyciszony)}
.odznaki svg{width:20px;height:20px;stroke:var(--c-marka);fill:none;stroke-width:1.5;flex:0 0 20px}

/* --- Stopka ------------------------------------------------------------ */
.stopka{background:var(--c-marka);color:rgba(255,255,255,.78);padding-block:var(--s-8)}
.stopka a{color:rgba(255,255,255,.78);text-decoration:none}
.stopka a:hover{color:#fff}
.stopka .znak{color:#fff}
.stopka .znak__podpis{color:rgba(255,255,255,.6)}
.stopka__kolumny{display:grid;gap:var(--s-6);margin-top:var(--s-6)}
.stopka ul{list-style:none;margin:0;padding:0}
.stopka li{padding:.35rem 0;font-size:var(--fs-drobny)}
.stopka__prawa{margin-top:var(--s-8);padding-top:var(--s-4);border-top:1px solid rgba(255,255,255,.18);font-size:var(--fs-etykieta)}

/* ======================= DESKTOP ======================================= */
@media (min-width:48rem){
  .zestawienie{grid-template-columns:1fr 1fr}
  .galeria{grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
  .karty{grid-template-columns:repeat(2,1fr)}
  .wybor{grid-template-columns:1fr 1fr}
  .stopka__kolumny{grid-template-columns:repeat(3,1fr)}
  .zaufanie ul{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
  .zaufanie li{border-bottom:0;border-left:1px solid var(--c-linia);padding:var(--s-2) var(--s-3)}
  .zaufanie li:first-child{border-left:0;padding-left:0}
}
@media (min-width:64rem){
  .menu-przycisk{display:none}
  .nawigacja{display:block;position:static;border:0;padding:0;background:none}
  .nawigacja ul{display:flex;gap:var(--s-3)}
  .nawigacja a{border:0;padding:0;font-size:var(--fs-drobny)}
  .hero__rzad{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:center}
  .hero__obraz{margin-top:0}
  .karty{grid-template-columns:repeat(4,1fr)}
  .korzysci{grid-template-columns:1fr 1fr;gap:var(--s-3) var(--s-6)}

  /* Oś procesu obraca się z pionowej na poziomą */
  .proces__lista{display:flex;align-items:flex-start;gap:0;margin-top:var(--s-12)}
  .proces__krok{flex:1;padding-bottom:0;padding-inline:var(--s-2)}
  .proces__krok:not(:last-child)::after{
    top:44px;left:calc(50% + 44px);width:calc(100% - 88px);height:1px;transform:none;
  }
  .proces__krok:nth-child(odd) .proces__cyfra,
  .proces__krok:nth-child(even) .proces__cyfra{
    left:50%;right:auto;transform:translateX(-50%);top:-40px;font-size:6.5rem;
  }
  /* Znacznik dnia: pionowa kreska w poprzek osi z podpisem u góry */
  .proces__znacznik{
    flex:0 0 auto;margin:0;padding:0;align-self:stretch;
    display:flex;flex-direction:column;align-items:center;gap:var(--s-2);
    writing-mode:horizontal-tb;text-align:center;width:96px;
  }
  .proces__znacznik::before{
    content:"";flex:0 0 auto;width:1px;height:88px;background:var(--c-marka);opacity:.4;order:2;
  }
  .proces__znacznik::after{display:none}
}