/*
Theme Name: Klikmistrz
Description: Autorski motyw agencji Klikmistrz. Bez Elementora i bez zaleznosci od motywu nadrzednego. Uklad oparty na poziomych paskach sekcji i indeksach zamiast kafelkow.
Author: Mamy Strategie
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Text Domain: klikmistrz
*/

:root{
  --ink:#131a26; --ink-2:#1a2333;
  --paper:#edefec; --paper-2:#f7f8f6; --white:#fff;
  --sygnal:#ffb400; --sygnal-2:#ff8a00;
  --tekst:#131a26; --tekst-jasny:#f2f4f1;
  --muted:#6b7686; --muted-ciemny:#8b97a8;
  --linia-c:rgba(255,255,255,.14); --linia-j:rgba(19,26,38,.14);
  --max:1280px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--tekst);
  font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;font-size:16px;
  line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Archivo',system-ui,sans-serif;font-weight:800;
  letter-spacing:-.025em;line-height:1.06;text-wrap:balance;margin:0}
a{color:inherit}
img{max-width:100%;height:auto}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
:focus-visible{outline:2px solid var(--sygnal);outline-offset:3px}
.tylko-czytnik{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

.etyk{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}

/* ---------- naglowek ---------- */
.naglowek{position:sticky;top:0;z-index:60;background:var(--ink);
  border-bottom:1px solid var(--linia-c)}
.hdr{display:flex;align-items:center;gap:40px;height:74px}
.logo{font-family:'Archivo',sans-serif;font-weight:900;font-size:21px;letter-spacing:-.03em;
  color:var(--tekst-jasny);text-decoration:none}
.logo b{color:var(--sygnal)}
.menu{display:flex;gap:26px;margin-left:auto;list-style:none;padding:0;margin-block:0}
.menu a{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#cfd6e0;text-decoration:none;padding:6px 0;display:block;
  border-bottom:1px solid transparent}
.menu a:hover,.menu .current-menu-item>a{color:var(--sygnal);border-bottom-color:var(--sygnal)}
.cta{background:var(--sygnal);color:#131a26;font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  padding:12px 20px;text-decoration:none;white-space:nowrap;border:0;cursor:pointer}
.cta:hover{background:var(--sygnal-2)}
.przelacznik{display:none;background:none;border:1px solid var(--linia-c);color:#cfd6e0;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;padding:10px 14px;margin-left:auto;cursor:pointer}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:var(--tekst-jasny);padding:96px 0 0}
.hero h1{font-size:clamp(38px,6.2vw,82px);font-weight:900;margin:26px 0 0;max-width:15ch}
.hero h1 .sy{color:var(--sygnal)}
.hero .wstep{color:#b9c3d0;font-size:18px;max-width:62ch;margin:24px 0 0}
.liczby{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:70px;
  background:var(--linia-c);border-top:1px solid var(--linia-c)}
.liczby div{background:var(--ink);padding:22px 20px 24px}
.liczby b{display:block;font-family:'Archivo',sans-serif;font-size:30px;font-weight:900;
  color:var(--sygnal);letter-spacing:-.02em;line-height:1}
.liczby span{display:block;margin-top:7px;font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:#8b97a8}
.pasek{background:var(--ink-2);border-top:1px solid var(--linia-c)}
.pasek .wrap{display:flex;gap:40px;align-items:center;justify-content:space-between;
  padding-top:26px;padding-bottom:26px}
.pasek p{margin:0;color:#c3ccd8;font-size:15px;max-width:64ch}
.pasek b{color:var(--sygnal);font-weight:600}
.pasek a{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sygnal);text-decoration:none;white-space:nowrap}

/* ---------- sekcje ---------- */
.sekcja{padding:92px 0}
.ciemna{background:var(--ink);color:var(--tekst-jasny)}
.szyna{display:flex;align-items:center;gap:16px;border-top:2px solid var(--tekst);
  padding-top:14px;margin-bottom:38px}
.ciemna .szyna{border-top-color:var(--sygnal)}
.szyna .nr{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;
  background:var(--tekst);color:var(--paper);padding:4px 9px;letter-spacing:.08em}
.ciemna .szyna .nr{background:var(--sygnal);color:var(--ink)}
.szyna .etyk{color:var(--tekst)}
.ciemna .szyna .etyk{color:var(--sygnal)}
.szyna p{font-size:13.5px;line-height:1.5;color:var(--muted);margin:0 0 0 auto;
  max-width:46ch;text-align:right}
.ciemna .szyna p{color:var(--muted-ciemny)}
h2{font-size:clamp(28px,3.8vw,50px)}
.lead{font-size:17.5px;color:var(--muted);max-width:62ch;margin:20px 0 0}
.ciemna .lead{color:#b9c3d0}

/* ---------- indeks (uslugi, wpisy, hasla) ---------- */
.indeks{margin-top:8px;border-top:1px solid var(--linia-j)}
.ciemna .indeks{border-top-color:var(--linia-c)}
.poz{display:grid;grid-template-columns:52px minmax(190px,1.1fr) 2fr 40px;gap:24px;
  align-items:baseline;padding:22px 0;border-bottom:1px solid var(--linia-j);
  text-decoration:none;transition:padding-left .18s,background .18s}
.ciemna .poz{border-bottom-color:var(--linia-c)}
.poz:hover{padding-left:14px;background:linear-gradient(90deg,rgba(255,180,0,.10),transparent 60%)}
.poz .nr{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted)}
.poz:hover .nr{color:var(--sygnal-2)}
.poz h3{font-size:clamp(19px,2.1vw,27px);margin:0;font-weight:800;letter-spacing:-.02em}
.poz p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.5}
.poz .strz{font-family:'IBM Plex Mono',monospace;font-size:17px;color:var(--linia-j);
  text-align:right;transition:color .18s,transform .18s;display:block}
.poz:hover .strz{color:var(--sygnal-2);transform:translateX(5px)}

/* ---------- proces ---------- */
.proces{display:grid;grid-template-columns:repeat(4,1fr);margin-top:10px;
  border-top:1px solid var(--linia-c)}
.krok{padding:28px 24px 0;border-right:1px solid var(--linia-c)}
.krok:last-child{border-right:0}
.krok .nr{font-family:'Archivo',sans-serif;font-size:38px;font-weight:900;
  color:var(--sygnal);line-height:1}
.krok h3{font-size:17px;margin:14px 0 8px;color:var(--tekst-jasny)}
.krok p{font-size:14px;color:#aab5c3;margin:0;line-height:1.55}

/* ---------- miasta ---------- */
.miasta{columns:5;column-gap:24px;margin-top:10px}
.miasta a{display:block;font-size:14.5px;text-decoration:none;padding:7px 0;
  border-bottom:1px solid var(--linia-j);color:var(--tekst);break-inside:avoid}
.miasta a:hover{color:var(--sygnal-2)}
.miasta a span{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted);
  float:right;padding-top:3px}

/* ---------- tresc artykulu ---------- */
.tresc{max-width:74ch;font-size:17px}
.tresc h2{font-size:clamp(24px,2.7vw,34px);margin:44px 0 14px}
.tresc h3{font-size:21px;margin:32px 0 10px}
.tresc p{margin:0 0 18px}
.tresc ul,.tresc ol{margin:0 0 20px;padding-left:22px}
.tresc li{margin-bottom:8px}
.tresc a{color:var(--tekst);text-decoration:none;border-bottom:1px solid var(--sygnal)}
.tresc a:hover{background:rgba(255,180,0,.16)}
.tresc blockquote{margin:26px 0;padding:4px 0 4px 22px;border-left:3px solid var(--sygnal);
  color:var(--muted);font-size:18px}
.tresc table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px}
.tresc th,.tresc td{border:1px solid var(--linia-j);padding:10px 12px;text-align:left}
.tresc th{background:var(--paper);font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.przewijaj{overflow-x:auto}
.lead-paragraph{font-size:19px;color:var(--tekst)}

/* ---------- FAQ ---------- */
details{border-bottom:1px solid var(--linia-j)}
summary{cursor:pointer;list-style:none;padding:19px 44px 19px 0;position:relative;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:17.5px}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;
  margin-top:-6px;
  background:linear-gradient(var(--sygnal-2),var(--sygnal-2)) center/13px 1.5px no-repeat,
             linear-gradient(var(--sygnal-2),var(--sygnal-2)) center/1.5px 13px no-repeat}
details[open] summary::after{
  background:linear-gradient(var(--sygnal-2),var(--sygnal-2)) center/13px 1.5px no-repeat}
details>*:not(summary){margin:0 0 20px;color:var(--muted);max-width:76ch;font-size:15px}

/* ---------- formularz ---------- */
.formularz{margin-top:40px;max-width:820px}
.pola{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px}
.formularz label{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sygnal)}
.formularz input,.formularz select,.formularz textarea{width:100%;margin-top:8px;
  background:transparent;color:var(--tekst-jasny);border:0;
  border-bottom:1px solid var(--linia-c);padding:10px 0;
  font-family:'IBM Plex Sans',sans-serif;font-size:15.5px;letter-spacing:0;
  text-transform:none}
.formularz input::placeholder,.formularz textarea::placeholder{color:#5d6878}
.formularz input:focus,.formularz select:focus,.formularz textarea:focus{
  outline:none;border-bottom-color:var(--sygnal)}
.formularz select option{background:var(--ink-2);color:var(--tekst-jasny)}
.formularz .szeroka{margin-top:22px}
.formularz textarea{resize:vertical}
.formularz .zgoda{display:flex;gap:12px;align-items:flex-start;margin-top:26px;
  font-family:'IBM Plex Sans',sans-serif;font-size:13.5px;letter-spacing:0;
  text-transform:none;color:#aab5c3}
.formularz .zgoda input{width:17px;height:17px;margin:2px 0 0;flex:0 0 auto}
.formularz .zgoda a{color:var(--sygnal)}
.pulapka{position:absolute;left:-9999px}
.wyslij{display:inline-block;margin-top:26px;font-size:12px}
.pod-formularzem{font-size:13.5px;color:#8b97a8;margin:18px 0 0}
.pod-formularzem a{color:var(--sygnal)}
.komunikat{margin-top:26px;padding:14px 18px;border-left:3px solid var(--sygnal);
  background:rgba(255,180,0,.10);color:var(--tekst-jasny);font-size:15px}

/* ---------- fakty (usluga / miasto) ---------- */
.fakty{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  background:var(--linia-j);border:1px solid var(--linia-j);margin:34px 0}
.fakty div{background:var(--paper-2);padding:18px 20px}
.fakty dt{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin:0}
.fakty dd{margin:6px 0 0;font-weight:600;font-size:16px}

/* ---------- linkowanie wewnetrzne ---------- */
.powiazane{border-top:2px solid var(--tekst);padding-top:22px;margin-top:64px}
.powiazane h2{font-size:20px;margin-bottom:16px}
.chmurka{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chmurka a{display:inline-block;padding:7px 13px;border:1px solid var(--linia-j);
  font-size:14px;text-decoration:none;background:var(--paper-2)}
.chmurka a:hover{border-color:var(--sygnal);background:var(--white)}

/* ---------- stopka ---------- */
.stopka{background:var(--ink);color:#aab5c3;padding:72px 0 34px;font-size:14px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.stopka h4{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sygnal);margin:0 0 16px;font-weight:500}
.stopka ul{list-style:none;margin:0;padding:0}
.stopka li{padding:5px 0}
.stopka a{text-decoration:none}
.stopka a:hover{color:var(--sygnal)}
.grupa{margin-top:18px;padding-top:14px;border-top:1px solid var(--linia-c);
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#8b97a8;max-width:34ch}
.grupa a{color:var(--sygnal);border-bottom:1px solid transparent}
.grupa a:hover{border-bottom-color:var(--sygnal)}
.fdol{border-top:1px solid var(--linia-c);margin-top:44px;padding-top:22px;
  display:flex;justify-content:space-between;gap:20px;font-size:12.5px;color:#7d8898}

/* ---------- stronicowanie ---------- */
.strony{display:flex;gap:8px;flex-wrap:wrap;margin-top:44px}
.strony .page-numbers{padding:9px 14px;border:1px solid var(--linia-j);text-decoration:none;
  font-family:'IBM Plex Mono',monospace;font-size:13px}
.strony .current{background:var(--tekst);color:var(--paper);border-color:var(--tekst)}

@media(max-width:1000px){
  .menu{display:none}
  .menu.otwarte{display:flex;position:absolute;top:74px;left:0;right:0;background:var(--ink);
    flex-direction:column;gap:0;padding:8px 32px 22px;border-bottom:1px solid var(--linia-c)}
  .menu.otwarte li{border-top:1px solid var(--linia-c)}
  .menu.otwarte a{padding:14px 0}
  .przelacznik{display:block}
  .hdr .cta{display:none}
  .liczby{grid-template-columns:1fr 1fr}
  .szyna{flex-wrap:wrap}
  .szyna p{margin-left:0;text-align:left;max-width:100%;flex:1 0 100%;margin-top:10px}
  .proces{grid-template-columns:1fr 1fr}
  .krok{border-bottom:1px solid var(--linia-c);padding-bottom:24px}
  .miasta{columns:2}
  .fgrid,.pola{grid-template-columns:1fr}
  .pasek .wrap{flex-direction:column;align-items:flex-start;gap:16px}
}
@media(max-width:560px){
  .wrap{padding:0 20px}
  .sekcja{padding:64px 0}
  .hero{padding-top:56px}
  .liczby{grid-template-columns:1fr}
  .proces,.miasta{grid-template-columns:1fr;columns:1}
  .krok{border-right:0}
  .poz{grid-template-columns:36px 1fr;gap:6px 14px}
  .poz p{grid-column:2}
  .poz .strz{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* ---------- cennik: karty pakietow ---------- */
.pakiety{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linia-j);
  border:1px solid var(--linia-j);margin-top:10px}
.pakiet{background:var(--paper-2);padding:30px 24px 28px;position:relative;
  display:flex;flex-direction:column}
.pakiet.wyrozniony{background:var(--ink);color:var(--tekst-jasny)}
.wstazka{position:absolute;top:0;left:0;background:var(--sygnal);color:var(--ink);
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;padding:5px 11px}
.pakiet.wyrozniony h2{margin-top:22px}
.pakiet h2{font-size:26px;margin:0 0 8px}
.pakiet .dla{font-size:13.5px;color:var(--muted);margin:0 0 20px;min-height:3.2em;line-height:1.45}
.pakiet.wyrozniony .dla{color:var(--muted-ciemny)}
.pakiet .cena{margin:0 0 20px;padding-bottom:20px;border-bottom:1px solid var(--linia-j)}
.pakiet.wyrozniony .cena{border-bottom-color:var(--linia-c)}
.pakiet .cena strong{display:block;font-family:'Archivo',sans-serif;font-size:34px;
  font-weight:900;letter-spacing:-.03em;line-height:1}
.pakiet.wyrozniony .cena strong{color:var(--sygnal)}
.pakiet .cena span{display:block;margin-top:6px;font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.warunki{margin:0 0 18px}
.warunki div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;
  border-bottom:1px dotted var(--linia-j)}
.pakiet.wyrozniony .warunki div{border-bottom-color:var(--linia-c)}
.warunki dt{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:0}
.warunki dd{margin:0;font-size:13.5px;font-weight:600;text-align:right}
.ptaszki{list-style:none;margin:0 0 24px;padding:0;font-size:14px;flex:1}
.ptaszki li{position:relative;padding:5px 0 5px 24px;line-height:1.45}
.ptaszki li::before{content:"";position:absolute;left:0;top:12px;width:11px;height:6px;
  border-left:2px solid var(--sygnal-2);border-bottom:2px solid var(--sygnal-2);
  transform:rotate(-45deg)}
.pakiet.wyrozniony .ptaszki li::before{border-color:var(--sygnal)}
.ptaszki.jasne li::before{border-color:var(--sygnal)}
.pakiet .cta{text-align:center}
.minusy{list-style:none;margin:0 0 18px;padding:0;font-size:14px}
.minusy li{position:relative;padding:5px 0 5px 24px;line-height:1.45;color:#aab5c3}
.minusy li::before{content:"";position:absolute;left:0;top:15px;width:11px;height:2px;
  background:var(--muted-ciemny)}
.dwie-kolumny{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:34px}
.dwie-kolumny h3{font-size:19px;margin:0 0 14px}
.uwaga{font-size:13.5px;color:var(--muted-ciemny);border-left:2px solid var(--sygnal);
  padding-left:14px;margin:0}
@media(max-width:1100px){.pakiety{grid-template-columns:1fr 1fr}
  .enterprise{grid-template-columns:1fr;gap:22px}}
@media(max-width:700px){.pakiety,.dwie-kolumny{grid-template-columns:1fr}
  .pakiet .dla{min-height:0}}

/* ---------- cennik: pas Enterprise ---------- */
.enterprise{display:grid;grid-template-columns:1fr auto;gap:44px;align-items:center;
  background:var(--ink);color:var(--tekst-jasny);padding:34px 34px;margin-top:1px;
  border:1px solid var(--linia-j)}
.enterprise .etyk{color:var(--sygnal)}
.enterprise h3{font-size:26px;margin:10px 0 10px}
.enterprise p{margin:0;color:#aab5c3;font-size:15px;max-width:68ch}
.enterprise-akcja{text-align:right;white-space:nowrap}
.enterprise-akcja strong{display:block;font-family:'Archivo',sans-serif;font-size:22px;
  font-weight:900;color:var(--sygnal);margin-bottom:14px;letter-spacing:-.02em}
@media(max-width:700px){.enterprise{padding:26px 22px}
  .enterprise-akcja{text-align:left}}

/* ---------- karty wpisow blogowych ---------- */
.karty{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linia-j);
  border:1px solid var(--linia-j);margin-top:10px}
.karta{background:var(--paper-2);display:flex;flex-direction:column}
.karta:hover{background:var(--white)}
.karta-obraz{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--ink-2)}
.karta-obraz img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease}
.karta:hover .karta-obraz img{transform:scale(1.04)}
.brak-obrazu{display:block;width:100%;height:100%;
  background:linear-gradient(135deg,var(--ink) 0%,var(--ink-2) 100%)}
.karta-tresc{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.karta-tresc h3{font-size:20px;margin:10px 0 10px;letter-spacing:-.02em;line-height:1.2}
.karta-tresc h3 a{text-decoration:none}
.karta-tresc h3 a:hover{color:var(--sygnal-2)}
.karta-tresc p{margin:0 0 18px;font-size:14.5px;color:var(--muted);line-height:1.5;flex:1}
.czytaj{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;border-bottom:1px solid var(--sygnal);align-self:flex-start;
  padding-bottom:2px}

/* ---------- obrazek wiodacy wpisu ----------
   Trzymany w siatce strony, nie na cala szerokosc okna. Na szerokim monitorze
   pelna szerokosc zamieniala zdjecie w waski pas z przypadkowym kadrem. */
.pas-obrazu{background:var(--paper);padding-top:44px}
.obraz-wiodacy{margin:0}
.obraz-wiodacy img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  background:var(--ink-2)}
.obraz-wiodacy figcaption{padding:12px 0 0;font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pas-obrazu + .sekcja{padding-top:44px}
@media(max-width:1000px){.karty{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.karty{grid-template-columns:1fr}}

/* ---------- megamenu ----------
   Panel na calej szerokosci, otwierany klikiem i najechaniem. Klik jest wazny:
   na tablecie i przy nawigacji klawiatura samo najechanie nie wystarcza. */
.nawigacja{margin-left:auto}
.menu{display:flex;gap:26px;list-style:none;padding:0;margin:0;align-items:center}
.menu>li{position:static}
.menu a,.mega-przycisk{font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:#cfd6e0;text-decoration:none;
  padding:26px 0;display:block;border:0;background:none;cursor:pointer;line-height:1}
.menu>li>a:hover,.mega-przycisk:hover,.mega-przycisk[aria-expanded="true"]{color:var(--sygnal)}
.mega-przycisk::after{content:"";display:inline-block;width:5px;height:5px;margin-left:8px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .18s}
.mega-przycisk[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-2px)}

.mega{position:absolute;left:0;right:0;top:100%;background:var(--ink-2);
  border-top:1px solid var(--linia-c);border-bottom:2px solid var(--sygnal);
  box-shadow:0 18px 40px rgba(0,0,0,.35);z-index:70}
.mega[hidden]{display:none}
.mega-siatka{display:grid;grid-template-columns:1fr 1fr 0.9fr;gap:44px;
  padding-top:34px;padding-bottom:34px}
.mega-kol .etyk{display:block;color:var(--sygnal);margin-bottom:16px}
.mega-kol ul{list-style:none;margin:0;padding:0}
.mega-kol li{border-top:1px solid var(--linia-c)}
.mega-kol li:first-child{border-top:0}
.mega-kol li a{display:block;padding:11px 0;text-transform:none;letter-spacing:0;
  font-family:'IBM Plex Sans',sans-serif;font-size:15px;color:#dbe2ea}
.mega-kol li a strong{display:block;font-family:'Archivo',sans-serif;font-weight:700;
  font-size:16px;letter-spacing:-.01em}
.mega-kol li a span{display:block;font-size:13px;color:#8b97a8;margin-top:3px;line-height:1.4}
.mega-kol li a:hover strong{color:var(--sygnal)}
.mega-miasta{columns:2;column-gap:28px}
.mega-miasta li{break-inside:avoid}
.mega-promo{background:var(--ink);padding:24px;border:1px solid var(--linia-c)}
.mega-promo p{color:#aab5c3;font-size:14px;margin:0 0 18px;line-height:1.5}
.mega-drobne{margin-top:18px !important;border-top:1px solid var(--linia-c);padding-top:6px !important}
.mega-drobne li a{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;padding:8px 0}
.cta-naglowek{margin-left:26px}

@media(max-width:1180px){
  .menu{gap:18px}
  .cta-naglowek{display:none}
}
/* Na telefonie megamenu upraszcza sie do zwyklej listy odnosnikow.
   Opisy pod pozycjami i kafle promocyjne sa tu tylko balastem - wydluzaja
   menu na kilka ekranow i utrudniaja trafienie w pozycje. */
@media(max-width:1000px){
  .nawigacja{display:none;position:absolute;top:74px;left:0;right:0;background:var(--ink);
    border-bottom:1px solid var(--linia-c);max-height:calc(100vh - 74px);overflow-y:auto}
  .nawigacja.otwarte{display:block}
  .menu{flex-direction:column;align-items:stretch;gap:0;padding:0 20px 22px}
  .menu>li{border-top:1px solid var(--linia-c)}
  .menu>li>a,.mega-przycisk{padding:16px 0;width:100%;text-align:left}
  .mega{position:static;box-shadow:none;border-bottom:0;background:transparent}
  .mega-siatka{grid-template-columns:1fr;gap:0;padding:0 0 10px}
  .mega .wrap{padding:0}

  /* zostaja same nazwy */
  .mega-kol li a span{display:none}
  .mega-kol li a strong{font-size:15px;font-weight:600}
  .mega-kol li a{padding:12px 0 12px 14px;border-left:2px solid var(--linia-c)}
  .mega-kol li a:hover{border-left-color:var(--sygnal)}
  .mega-kol .etyk{margin:14px 0 6px;font-size:10.5px}
  .mega-kol li{border-top:0}
  .mega-miasta{columns:2;column-gap:16px}

  /* kafel promocyjny znika - na telefonie liczy sie droga do celu */
  .mega-promo{display:none}
  .mega-drobne{display:block;margin-top:8px !important;border-top:0;padding-top:0 !important}
}

/* ---------- FAQ ---------- */
.faq-skroty{display:flex;flex-wrap:wrap;gap:1px;margin-top:56px;background:var(--linia-c);
  border-top:1px solid var(--linia-c)}
.faq-skroty a{flex:1 1 200px;background:var(--ink);padding:16px 18px;text-decoration:none;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:#cfd6e0;display:flex;justify-content:space-between;
  align-items:center;gap:10px}
.faq-skroty a:hover{color:var(--sygnal);background:var(--ink-2)}
.faq-skroty a span{color:var(--sygnal);font-weight:500}
.sekcja.jasna-sekcja{background:var(--paper-2);border-top:1px solid var(--linia-j);
  border-bottom:1px solid var(--linia-j)}
.faq-lista{border-top:1px solid var(--linia-j)}
.faq-lista details{border-bottom:1px solid var(--linia-j)}
.faq-lista .faq-answer{max-width:82ch}

/* ---------- strona uslugi: uklad z przyklejonym spisem ---------- */
.uklad-tresci{display:grid;grid-template-columns:250px 1fr;gap:56px;align-items:start}
.uklad-tresci .tresc{max-width:none}
.spis{position:sticky;top:100px}
.spis .etyk{display:block;margin-bottom:14px;color:var(--tekst)}
.spis ol{list-style:none;counter-reset:s;margin:0;padding:0;
  border-top:1px solid var(--linia-j)}
.spis li{counter-increment:s;border-bottom:1px solid var(--linia-j)}
.spis li a{display:block;padding:10px 0 10px 26px;position:relative;font-size:14px;
  text-decoration:none;color:var(--muted);line-height:1.4}
.spis li a::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:10px;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--sygnal-2)}
.spis li a:hover{color:var(--tekst)}
.spis-cta{margin-top:24px;padding:20px;background:var(--ink);color:var(--tekst-jasny)}
.spis-cta p{font-size:14px;color:#aab5c3;margin:0 0 14px;line-height:1.45}

/* ---------- kafle pozostalych uslug ---------- */
.kafle-uslug{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linia-j);
  border:1px solid var(--linia-j);margin-top:10px}
.kafel-uslugi{background:var(--paper-2);padding:26px 24px 28px;text-decoration:none;
  display:flex;flex-direction:column;transition:background .18s}
.kafel-uslugi:hover{background:var(--white)}
.kafel-uslugi h3{font-size:21px;margin:0 0 10px;letter-spacing:-.02em}
.kafel-uslugi:hover h3{color:var(--sygnal-2)}
.kafel-uslugi p{font-size:14px;color:var(--muted);margin:0 0 16px;line-height:1.5;flex:1}

@media(max-width:1000px){
  .uklad-tresci{grid-template-columns:1fr;gap:28px}
  .spis{position:static;border-left:2px solid var(--sygnal);padding-left:16px}
  .spis-cta{display:none}
  .kafle-uslug{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){.kafle-uslug{grid-template-columns:1fr}}

/* ---------- metryka wpisu blogowego ---------- */
.metryka-wpisu{margin-top:22px;font-family:'IBM Plex Mono',monospace;font-size:12px;
  letter-spacing:.04em;text-transform:uppercase;color:#8b97a6;display:flex;gap:10px;flex-wrap:wrap}
.metryka-wpisu span{color:#5d6875}

/* Przy dlugich tekstach spis musi sie sam przewijac, inaczej przy
   kilkunastu sekcjach wychodzi poza ekran i konca nie widac. */
.spis ol{max-height:calc(100vh - 260px);overflow-y:auto}
.spis ol::-webkit-scrollbar{width:3px}
.spis ol::-webkit-scrollbar-thumb{background:var(--linia-j)}

/* Kotwica pod przyklejonym naglowkiem - bez tego klikniecie w spis
   chowa tytul sekcji za gornym paskiem. */
.tresc h2[id]{scroll-margin-top:96px}
@media(max-width:1000px){.spis ol{max-height:none;overflow:visible}}