:root{--s-bg:var(--bg);--s-bg2:var(--bg2);--s-karta:var(--karta);--s-linia:var(--linia);--s-tekst:var(--tekst);--s-tekst2:var(--tekst2);--s-tekst3:var(--tekst3);--s-akcent:var(--akcent);--s-na-akcencie:var(--bg);--s-fd:var(--fd);--s-ft:var(--ft);--s-fm:var(--fm);--s-r:var(--r);--s-wrap:var(--wrap);--s-pad:24px}
/* Sieć Szpalty - wspólne komponenty (pasek, stopka sieci, ramka „Mój projekt", moduł „Z sieci").
   Kolory i fonty bierze ze zmiennych --s-* mapowanych na paletę tytułu (siec.py: PALETY). */
.siec-w{max-width:var(--s-wrap);margin:0 auto;padding:0 var(--s-pad);box-sizing:border-box}
.siec-et{font:600 11px/1 var(--s-fm);letter-spacing:.09em;text-transform:uppercase}

/* pasek sieci (góra strony) */
.siec-pasek{background:color-mix(in srgb,var(--s-bg) 55%,#000);border-bottom:1px solid var(--s-linia);font:500 11px/1 var(--s-fm);letter-spacing:.06em;text-transform:uppercase;color:var(--s-tekst3);position:relative;z-index:60}
.siec-pasek .siec-w{display:flex;align-items:center;gap:20px;height:30px}
.siec-pasek .siec-et{color:var(--s-tekst2);white-space:nowrap}
.siec-lista{display:flex;align-items:center;gap:18px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;height:30px}
.siec-lista::-webkit-scrollbar{display:none}
.siec-lista a{display:inline-flex;align-items:center;gap:7px;color:var(--s-tekst3);text-decoration:none;white-space:nowrap;height:30px;transition:color .2s}
.siec-lista a i{width:6px;height:6px;border-radius:1px;background:var(--t);opacity:.75}
.siec-lista a:hover,.siec-lista a[aria-current]{color:var(--s-tekst)}
.siec-lista a[aria-current] i{opacity:1}
.siec-hub{margin-left:auto;color:var(--s-tekst3);text-decoration:none;white-space:nowrap}
a.siec-hub:hover{color:var(--s-tekst)}
@media (max-width:760px){.siec-hub{display:none}.siec-pasek .siec-et{display:none}.siec-pasek .siec-w{gap:14px}.siec-lista{gap:15px}}

/* wiersz sieci w stopce */
.siec-stopka{border-top:1px solid var(--s-linia);margin-top:28px;padding:24px 0 30px;font-family:var(--s-fd)}
.siec-stopka .siec-et{color:var(--s-tekst3);margin:0 0 14px}
.siec-stopka ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px 28px}
.siec-stopka li{margin:0;padding:0}
.siec-stopka li::before{content:none}
.siec-stopka a{text-decoration:none;color:inherit;display:block}
.siec-stopka b{display:block;font:700 15px/1.3 var(--s-fd);color:var(--s-tekst)}
.siec-stopka span{display:block;font:400 13px/1.45 var(--s-fd);color:var(--s-tekst3);margin-top:2px}
.siec-stopka a:hover b{text-decoration:underline;text-underline-offset:3px}
.siec-stopka .wk b{color:var(--s-tekst2)}
.siec-stopka .wk em{font:500 10px/1 var(--s-fm);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--s-tekst3);border:1px solid var(--s-linia);border-radius:5px;padding:3px 5px;display:inline-block;margin-top:6px}
.siec-stopka .siec-aut{font:400 12px/1.5 var(--s-fm);color:var(--s-tekst3);margin:18px 0 0}

/* ramka „Mój projekt" w tekście */
.siec-ramka{margin:36px 0;padding:22px 24px 20px;border:1px solid var(--s-linia);border-top:3px solid var(--s-akcent);border-radius:var(--s-r);background:var(--s-karta);font-family:var(--s-fd);color:var(--s-tekst)}
.siec-ramka .siec-ramka-g{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.siec-ramka .siec-et{color:var(--s-akcent)}
.siec-ramka .siec-st{font:500 11px/1.3 var(--s-fm);color:var(--s-tekst3);letter-spacing:.02em}
.siec-ramka p.siec-ramka-n{font:800 28px/1.05 var(--s-fd);letter-spacing:-.02em;margin:14px 0 8px;color:var(--s-tekst)}
.siec-ramka p.siec-ramka-z{font:400 16px/1.5 var(--s-fd);color:var(--s-tekst2);margin:0 0 14px;max-width:60ch}
.siec-ramka.siec-ramka ul{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:6px}
.siec-ramka.siec-ramka li{position:relative;margin:0;padding:0 0 0 16px;font:400 13px/1.45 var(--s-fm);color:var(--s-tekst2)}
.siec-ramka.siec-ramka li::before{content:'';position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:1px;background:var(--s-akcent)}
.siec-ramka a.siec-btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-radius:10px;background:var(--s-akcent);color:var(--s-na-akcencie);font:700 15px/1 var(--s-fd);text-decoration:none;border:0;transition:transform .15s,filter .2s}
.siec-ramka a.siec-btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.siec-ramka p.siec-ujaw{font:400 11.5px/1.5 var(--s-fm);color:var(--s-tekst3);margin:14px 0 0}
@media (max-width:640px){.siec-ramka{padding:18px 18px 16px}.siec-ramka p.siec-ramka-n{font-size:24px}.siec-ramka a.siec-btn{width:100%;justify-content:center}}

/* moduł „Z sieci" pod artykułem */
.siec-modul{padding:56px 0 60px;border-top:1px solid var(--s-linia);background:var(--s-bg);font-family:var(--s-fd);color:var(--s-tekst)}
.siec-mh{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.siec-mh .siec-et{color:var(--s-akcent)}
.siec-mh h2{font:800 clamp(28px,3.4vw,40px)/1.05 var(--s-fd);letter-spacing:-.02em;margin:10px 0 0;color:var(--s-tekst)}
.siec-mh p{font:500 12px/1.4 var(--s-fm);color:var(--s-tekst3);margin:0;letter-spacing:.03em}
.siec-siatka{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.siec-karta{display:flex;flex-direction:column;border:1px solid var(--s-linia);border-radius:var(--s-r);overflow:hidden;background:var(--s-karta);color:var(--s-tekst);text-decoration:none;transition:border-color .2s,transform .2s}
.siec-karta:hover{border-color:var(--s-tekst3);transform:translateY(-2px)}
.siec-ok{aspect-ratio:1200/630;background:var(--s-bg2);border-bottom:1px solid var(--s-linia)}
.siec-ok img{width:100%;height:100%;object-fit:contain;display:block}
.siec-kt{padding:16px 20px 22px}
.siec-tyt{display:inline-flex;align-items:center;gap:8px;font:600 11px/1 var(--s-fm);letter-spacing:.09em;text-transform:uppercase;color:var(--t)}
.siec-tyt i{width:7px;height:7px;border-radius:1px;background:var(--t)}
.siec-karta h3{font:700 19px/1.22 var(--s-fd);letter-spacing:-.01em;margin:10px 0 8px;color:var(--s-tekst)}
.siec-karta p{font:400 14.5px/1.5 var(--s-fd);color:var(--s-tekst2);margin:0}
@media (max-width:900px){.siec-siatka{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.siec-modul{padding:40px 0 44px}.siec-siatka{grid-template-columns:1fr;gap:14px}}