/* ===== Propozycja premium (27.10.2026): menu z 4 grupami, strona główna marki, strony grup i rodzin =====
   Nakłada się na motyw 3 (Technika). Katalog z numerami części i karta produktu zostają bez zmian. */
html[data-motyw]{--p-tlo:#EEF1F5;--p-karta:#fff;--p-tusz:#0E1A26;--p-tekst:#3A4856;--p-szary:#6B7885;--p-linia:#D9E0E7;--p-granat:#0A2440;--p-akcent:#0A7BD1;--p-zdj:#E2E4E7;--p-ease:cubic-bezier(.22,.8,.22,1)}
html[data-motyw="3"] body{background-image:none}
.motywy{display:none!important}

/* ---------- nagłówek i menu z grupami ---------- */
.nag .menu{gap:2px}
.menu a,.menu .mm-btn,.nag .btn,.nag .lista-btn{white-space:nowrap}
@media (max-width:1500px){.nag .szukaj-btn>span{display:none}.nag .szukaj-btn{gap:8px;min-width:0;width:auto}.nag .lista-btn .t{display:none}.nag .wrap{gap:18px}.nag .menu{margin-left:4px}}
@media (max-width:1100px){.util .l a[data-t]{display:none}}
.menu .mm-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;font-size:14px;color:var(--light);transition:background .2s,color .2s}
.menu .mm-btn svg{width:10px;height:10px;transition:transform .3s var(--p-ease)}
.menu .mm-btn:hover,.menu .mm-btn.akt,.nag.mm-otw .mm-btn{color:var(--white);background:var(--graphite-2)}
.nag.mm-otw .mm-btn svg{transform:rotate(180deg)}
.mm-panel{position:absolute;left:0;right:0;top:100%;background:var(--p-karta);border-top:1px solid var(--p-linia);border-bottom:1px solid var(--p-linia);box-shadow:0 50px 90px -50px rgba(14,26,38,.45);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .28s var(--p-ease),transform .28s var(--p-ease),visibility 0s .28s}
.nag.mm-otw .mm-panel{opacity:1;visibility:visible;transform:none;transition:opacity .28s var(--p-ease),transform .28s var(--p-ease)}
.nag .mm-panel .wrap{height:auto;display:block}
.mm-siatka{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;padding:28px 0 22px}
.mm-kol a.g{display:block;color:var(--p-tusz)}
.mm-kol .obraz{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--p-zdj)}
.mm-kol .obraz img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--p-ease)}
.mm-kol a.g:hover .obraz img{transform:scale(1.05)}
.mm-kol .obraz span{position:absolute;left:10px;top:10px;font:500 10.5px var(--mono);letter-spacing:.12em;background:rgba(255,255,255,.88);border-radius:999px;padding:4px 9px;color:var(--p-tusz)}
.mm-kol h4{font-size:19px;font-weight:600;letter-spacing:-.01em;margin:13px 0 4px;display:flex;align-items:center;gap:8px}
.mm-kol h4 i{font-style:normal;color:var(--p-akcent);transition:transform .3s var(--p-ease)}
.mm-kol a.g:hover h4 i{transform:translateX(4px)}
.mm-kol p{font-size:13.5px;line-height:1.45;color:var(--p-szary);margin:0}
.mm-kol ul{list-style:none;margin:12px 0 0;padding:0}
.mm-kol li a{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:13.5px;color:var(--p-tekst);border-top:1px solid var(--p-linia);transition:color .2s,padding .25s var(--p-ease)}
.mm-kol li a:hover{color:var(--p-akcent);padding-left:4px}
.mm-kol li a span{font:500 11px var(--mono);color:var(--p-szary)}
.mm-kol li.wiecej a{color:var(--p-akcent);font-weight:600}
.mm-dol{display:flex;gap:26px;align-items:center;border-top:1px solid var(--p-linia);padding:14px 0 18px;font-size:13.5px;color:var(--p-tekst)}
.mm-dol a,.mm-dol button{display:inline-flex;align-items:center;gap:8px;color:var(--p-tekst);font-size:13.5px}
.mm-dol a:hover,.mm-dol button:hover{color:var(--p-akcent)}
.mm-dol .mono{margin-right:auto}

/* panel jednej grupy: duży kafel grupy + siatka rodzin z miniaturami */
.mm-grupa{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:44px;padding:28px 0 26px}
.mm-lewa{display:block;color:var(--p-tusz)}
.mm-lewa .obraz{position:relative;aspect-ratio:16/11;border-radius:16px;overflow:hidden;background:var(--p-zdj)}
.mm-lewa .obraz img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--p-ease)}
.mm-lewa:hover .obraz img{transform:scale(1.05)}
.mm-lewa .obraz span{position:absolute;left:12px;top:12px;font:500 10.5px var(--mono);letter-spacing:.12em;background:rgba(255,255,255,.9);border-radius:999px;padding:5px 10px}
.mm-lewa h4{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:16px 0 6px;display:flex;gap:8px;align-items:center}
.mm-lewa h4 i{font-style:normal;color:var(--p-akcent);transition:transform .3s var(--p-ease)}
.mm-lewa:hover h4 i{transform:translateX(4px)}
.mm-lewa p{font-size:14px;line-height:1.5;color:var(--p-szary);margin:0 0 10px}
.mm-lewa .stat{font:500 10.5px var(--mono);letter-spacing:.1em;color:var(--p-szary);text-transform:uppercase}
.mm-prawa>.mono{display:block;margin-bottom:12px}
.mm-rodz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 14px}
.mm-rodz a{display:flex;align-items:center;gap:12px;padding:6px;border-radius:12px;color:var(--p-tusz);transition:background .2s}
.mm-rodz a:hover{background:var(--p-tlo)}
.mm-rodz .mini{flex:none;width:58px;height:58px;border-radius:10px;background:radial-gradient(90% 90% at 50% 40%,#fff,#E6EBF0);display:grid;place-items:center;overflow:hidden}
.mm-rodz .mini img{max-width:78%;max-height:78%;object-fit:contain}
.mm-rodz .mini.foto img{max-width:none;max-height:none;width:100%;height:100%;object-fit:cover}
.mm-rodz .n b{display:block;font-size:14px;font-weight:600;line-height:1.25}
.mm-rodz .n small{display:block;font:500 10.5px var(--mono);letter-spacing:.06em;color:var(--p-szary);margin-top:2px}
.mm-rodz.gesto{gap:2px 14px}.mm-rodz.gesto .mini{width:44px;height:44px}.mm-rodz.gesto .n b{font-size:13.5px}
.mm-prawa .mm-dol{margin-top:16px;padding:14px 0 0}
.util .l a+a{margin-left:0}
.p-kroki{margin-top:60px}
.p-kroki>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.p-kroki>div>div{padding:26px;border-radius:22px;background:var(--p-karta);border:1px solid var(--p-linia)}
.p-kroki b{font:500 12px var(--mono);color:var(--p-akcent)}
.p-kroki h3{font-size:22px;font-weight:600;letter-spacing:-.01em;margin:14px 0 8px;color:var(--p-tusz)}
.p-kroki p{font-size:14.5px;line-height:1.55;color:var(--p-tekst);margin:0}

/* ---------- wspólne ---------- */
.p-sekcja{padding:clamp(72px,9vw,128px) 0}
.p-eb{font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--p-szary)}
.p-eb b{color:var(--p-akcent);font-weight:500}
.p-h2{font-size:clamp(38px,4.6vw,68px);line-height:1;letter-spacing:-.035em;font-weight:500;color:var(--p-tusz);margin:14px 0 0}
.p-h2 .serif{color:var(--p-akcent)}
.p-strzalka{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:var(--p-tusz)}
.p-strzalka i{font-style:normal;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--p-linia);transition:background .25s,color .25s,transform .35s var(--p-ease)}
.p-strzalka:hover i{background:var(--p-tusz);color:#fff;transform:translateX(3px)}
[data-pojaw]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--p-ease),transform .9s var(--p-ease)}
[data-pojaw].widac{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-pojaw]{opacity:1;transform:none;transition:none}}

/* ---------- strona główna: hero ---------- */
.p-hero{position:relative;padding:28px 0 34px;background:linear-gradient(180deg,#F5F7FA,var(--p-tlo))}
.p-hero .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:center;min-height:min(calc(100vh - 190px),700px)}
.p-hero .tekst{display:flex;flex-direction:column;justify-content:center;padding:30px 0}
.p-hero h1{font-size:clamp(60px,7.6vw,124px);line-height:.9;letter-spacing:-.045em;font-weight:500;color:var(--p-tusz);margin:22px 0 26px}
.p-hero h1 .serif{display:block;color:var(--p-akcent)}
.p-hero .lead{font-size:18px;line-height:1.55;color:var(--p-tekst);max-width:460px;margin:0}
.p-hero .akcje{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}
.p-hero .zakl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:auto;padding-top:44px}
.p-hero .zakl button{position:relative;text-align:left;padding:14px 0 0;color:var(--p-szary);font-size:13.5px;line-height:1.3;border-top:1px solid var(--p-linia);transition:color .3s}
.p-hero .zakl button b{display:block;font:500 10.5px var(--mono);letter-spacing:.14em;margin-bottom:4px}
.p-hero .zakl button::before{content:'';position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--p-akcent)}
.p-hero .zakl button.akt{color:var(--p-tusz)}
.p-hero .zakl button.akt::before{width:100%;transition:width var(--czas,6500ms) linear}
.p-hero .zakl button.stop::before{transition:none}
.p-hero .scena{position:relative;display:block;aspect-ratio:16/11;border-radius:30px;overflow:hidden;background:var(--p-zdj);box-shadow:0 60px 120px -70px rgba(14,26,38,.6)}
.p-hero .scena .s{position:absolute;inset:0;opacity:0;transition:opacity 1.3s var(--p-ease)}
.p-hero .scena .s.akt{opacity:1}
.p-hero .scena img{width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform 8s linear}
.p-hero .scena .s.akt img{transform:scale(1.05)}
.p-hero .scena .podpis{position:absolute;left:22px;bottom:22px;z-index:2;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-radius:999px;padding:8px 8px 8px 18px;font-size:14px;color:var(--p-tusz);box-shadow:0 20px 40px -24px rgba(14,26,38,.5)}
.p-hero .scena .podpis b{font:500 10.5px var(--mono);letter-spacing:.12em;color:var(--p-akcent)}
.p-hero .scena .podpis i{font-style:normal;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--p-tusz);color:#fff}

/* ---------- strona główna: zdanie o marce i liczby ---------- */
.p-marka{padding-top:clamp(56px,6vw,96px)}
.p-marka .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:end}
.p-marka .zdanie{font-size:clamp(30px,3.4vw,50px);line-height:1.12;letter-spacing:-.03em;color:var(--p-tusz);margin:16px 0 0;font-weight:500}
.p-marka .zdanie .serif{color:var(--p-akcent)}
.p-liczby{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--p-linia)}
.p-liczby div{padding:22px 18px 0 0}
.p-liczby b{display:block;font-size:clamp(36px,3.6vw,54px);font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--p-tusz)}
.p-liczby span{display:block;margin-top:8px;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--p-szary)}

/* ---------- strona główna: 4 grupy (naprzemiennie) ---------- */
.p-grupy .wrap>.naglowek-p{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:28px}
.p-gr{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4.5vw,72px);align-items:center;padding:48px 0;border-top:1px solid var(--p-linia)}
.p-gr.odwr{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.p-gr.odwr .obraz{order:2}
.p-gr .obraz{position:relative;display:block;aspect-ratio:16/10;border-radius:26px;overflow:hidden;background:var(--p-zdj)}
.p-gr .obraz img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--p-ease)}
.p-gr .obraz:hover img{transform:scale(1.045)}
.p-gr .obraz span{position:absolute;left:18px;top:18px;font:500 11px var(--mono);letter-spacing:.14em;background:rgba(255,255,255,.9);border-radius:999px;padding:6px 12px;color:var(--p-tusz)}
.p-gr .nr{font:500 12px var(--mono);letter-spacing:.14em;color:var(--p-szary)}
.p-gr h3{font-size:clamp(40px,4.2vw,62px);line-height:.98;letter-spacing:-.04em;font-weight:500;color:var(--p-tusz);margin:12px 0 16px}
.p-gr p{color:var(--p-tekst);font-size:16.5px;line-height:1.6;margin:0 0 20px;max-width:480px}
.p-gr .rodziny{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.p-gr .rodziny a{padding:8px 14px;border-radius:999px;border:1px solid var(--p-linia);background:var(--p-karta);font-size:13.5px;color:var(--p-tekst);transition:border-color .2s,color .2s}
.p-gr .rodziny a:hover{border-color:var(--p-akcent);color:var(--p-akcent)}
.p-gr .stat{font:500 11px var(--mono);letter-spacing:.1em;color:var(--p-szary);margin:-8px 0 22px}

/* ---------- strona główna: nowa seria AHA ---------- */
.p-seria{background:var(--p-granat);color:#fff;border-radius:34px;overflow:hidden;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.p-seria .tekst{padding:clamp(36px,5vw,72px)}
.p-seria .p-eb{color:rgba(255,255,255,.6)}.p-seria .p-eb b{color:#6CC3FF}
.p-seria h2{font-size:clamp(40px,4.4vw,66px);line-height:1;letter-spacing:-.04em;font-weight:500;margin:16px 0 18px}
.p-seria h2 .serif{color:#6CC3FF}
.p-seria p{color:rgba(255,255,255,.76);font-size:16.5px;line-height:1.6;max-width:440px}
.p-seria ul{list-style:none;margin:26px 0 34px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.p-seria li{padding:12px 0;border-top:1px solid rgba(255,255,255,.14);font-size:14.5px;color:rgba(255,255,255,.88)}
.p-seria li b{display:block;font:500 10.5px var(--mono);letter-spacing:.12em;color:rgba(255,255,255,.5);margin-bottom:3px;text-transform:uppercase}
.p-seria .obraz{position:relative;min-height:440px;background:#e2e4e7}
.p-seria .obraz img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- strona główna: dla profesjonalistów ---------- */
.p-pro{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:34px}
.p-pro a,.p-pro button{display:flex;flex-direction:column;gap:12px;text-align:left;padding:26px;border-radius:22px;background:var(--p-karta);border:1px solid var(--p-linia);min-height:220px;color:var(--p-tusz);transition:transform .4s var(--p-ease),box-shadow .4s var(--p-ease),border-color .3s}
.p-pro a:hover,.p-pro button:hover{transform:translateY(-4px);box-shadow:0 30px 60px -36px rgba(14,26,38,.45);border-color:transparent}
.p-pro svg{width:28px;height:28px;color:var(--p-akcent)}
.p-pro b{font-size:20px;font-weight:600;letter-spacing:-.01em;margin-top:auto}
.p-pro span{font-size:14px;line-height:1.5;color:var(--p-szary)}
.p-vodaro{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:14px;padding:20px 26px;border-radius:22px;border:1px dashed var(--p-linia);font-size:15px;color:var(--p-tekst)}
.p-vodaro a{color:var(--p-akcent);font-weight:600;white-space:nowrap}

/* ---------- strona grupy ---------- */
.p-okruszki{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--p-szary);display:flex;gap:10px;flex-wrap:wrap}
.p-okruszki a{color:var(--p-szary)}.p-okruszki a:hover{color:var(--p-akcent)}
.p-gnag{padding:44px 0 34px}
.p-gnag .wrap>div.uklad{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:end;margin-top:26px}
.p-gnag h1{font-size:clamp(54px,6.6vw,104px);line-height:.92;letter-spacing:-.045em;font-weight:500;color:var(--p-tusz);margin:14px 0 0}
.p-gnag h1 .serif{color:var(--p-akcent)}
.p-gnag p.lead{font-size:17px;line-height:1.6;color:var(--p-tekst);margin:0 0 22px}
.p-gnag .chipy{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.p-gnag .chipy span{font:500 11px var(--mono);letter-spacing:.1em;padding:7px 12px;border-radius:999px;background:var(--p-karta);border:1px solid var(--p-linia);color:var(--p-tekst)}
.p-gnag .akcje{display:flex;gap:10px;flex-wrap:wrap}
.p-gbaner{position:relative;aspect-ratio:2.35/1;max-height:600px;width:100%;border-radius:30px;overflow:hidden;background:var(--p-zdj)}
.p-gbaner img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.8s var(--p-ease)}
.p-gbaner.widac img{transform:none}
.p-gbaner.male{aspect-ratio:3.2/1}
.p-skok{position:sticky;top:68px;z-index:20;background:color-mix(in srgb,var(--p-tlo) 92%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--p-linia)}
.p-skok .wrap{display:flex;gap:6px;overflow-x:auto;padding:12px 0;scrollbar-width:none}
.p-skok a{flex:none;padding:7px 13px;border-radius:999px;font-size:13.5px;color:var(--p-tekst);white-space:nowrap;transition:background .2s,color .2s}
.p-skok a:hover{background:var(--p-karta);color:var(--p-tusz)}
.p-rodziny{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:30px}
.p-rodzina{display:flex;flex-direction:column;border-radius:24px;background:var(--p-karta);border:1px solid var(--p-linia);overflow:hidden;color:var(--p-tusz);transition:transform .45s var(--p-ease),box-shadow .45s var(--p-ease),border-color .3s}
.p-rodzina:hover{transform:translateY(-5px);box-shadow:0 40px 70px -42px rgba(14,26,38,.5);border-color:transparent}
.p-rodzina .obraz{position:relative;aspect-ratio:16/10;background:radial-gradient(90% 90% at 50% 40%,#fff,#E9EDF1);display:flex;align-items:center;justify-content:center;gap:4%;padding:8% 9%;overflow:hidden}
.p-rodzina .obraz.foto{padding:0}
.p-rodzina .obraz.foto img,.p-rodzina .obraz.foto img:only-child{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;filter:none}
.p-rodzina .obraz img{max-height:100%;max-width:34%;object-fit:contain;filter:drop-shadow(0 18px 18px rgba(14,26,38,.18));transition:transform .8s var(--p-ease)}
.p-rodzina .obraz img:only-child{max-width:62%}
.p-rodzina:hover .obraz img{transform:translateY(-4px) scale(1.03)}
.p-rodzina .obraz .nowe{position:absolute;left:14px;top:14px;font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;background:var(--p-akcent);color:#fff;border-radius:999px;padding:5px 10px}
.p-rodzina .t{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.p-rodzina h3{font-size:22px;line-height:1.15;letter-spacing:-.02em;font-weight:600;margin:0}
.p-rodzina .kody{font:500 11px var(--mono);letter-spacing:.06em;color:var(--p-szary);line-height:1.6}
.p-rodzina .dol{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:12px;border-top:1px solid var(--p-linia);font-size:13.5px;color:var(--p-tekst)}
.p-rodzina .dol i{font-style:normal;color:var(--p-akcent);transition:transform .3s var(--p-ease)}
.p-rodzina:hover .dol i{transform:translateX(4px)}

/* ---------- strona rodziny: produkty jak oferty ---------- */
.p-serie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:30px}
.p-seria-k{display:flex;flex-direction:column;border-radius:24px;background:var(--p-karta);border:1px solid var(--p-linia);overflow:hidden;cursor:pointer;color:var(--p-tusz);text-align:left;transition:transform .45s var(--p-ease),box-shadow .45s var(--p-ease),border-color .3s}
.p-seria-k:hover{transform:translateY(-5px);box-shadow:0 40px 70px -42px rgba(14,26,38,.5);border-color:transparent}
.p-seria-k .obraz{position:relative;aspect-ratio:4/3;overflow:hidden;background:radial-gradient(90% 90% at 50% 40%,#fff,#E9EDF1)}
.p-seria-k .obraz img{position:absolute;left:10%;top:9%;width:80%;height:82%;object-fit:contain;filter:drop-shadow(0 22px 22px rgba(14,26,38,.18));transition:transform .8s var(--p-ease)}
.p-seria-k:hover .obraz img{transform:scale(1.04)}
.p-seria-k .obraz img.male{left:27%;top:20%;width:46%;height:60%}
.p-rodzina .obraz img.male{max-width:22%;max-height:70%}
.p-seria-k .t{padding:18px 22px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.p-seria-k .kod{font:500 11.5px var(--mono);letter-spacing:.1em;color:var(--p-akcent)}
.p-seria-k h3{font-size:19px;line-height:1.25;letter-spacing:-.01em;font-weight:600;margin:0}
.p-seria-k .fakty{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.p-seria-k .fakty span{font-size:12.5px;padding:5px 10px;border-radius:999px;background:var(--p-tlo);color:var(--p-tekst)}
.p-seria-k .dol{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:14px;font-size:13.5px;font-weight:600}
.p-seria-k .dol i{font-style:normal;color:var(--p-akcent)}
.p-dalej{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:40px;padding:26px 30px;border-radius:24px;background:var(--p-karta);border:1px solid var(--p-linia)}
.p-dalej b{font-size:19px;font-weight:600;color:var(--p-tusz)}
.p-dalej span{display:block;font-size:14px;color:var(--p-szary);margin-top:4px}
.p-inne{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:26px}
.p-inne a{position:relative;display:block;border-radius:22px;overflow:hidden;aspect-ratio:16/10;background:var(--p-zdj);color:var(--p-tusz)}
.p-inne a img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--p-ease)}
.p-inne a:hover img{transform:scale(1.05)}
.p-inne a span{position:absolute;left:14px;bottom:14px;right:14px;display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-radius:14px;padding:12px 14px;font-weight:600;font-size:15px}
.p-inne a span small{font:500 10.5px var(--mono);letter-spacing:.12em;color:var(--p-szary)}

/* ---------- telefon ---------- */
.p-burger{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--p-linia);background:var(--p-karta);flex-direction:column;align-items:center;justify-content:center;gap:5px}
.p-burger span{display:block;width:16px;height:1.6px;background:var(--p-tusz);border-radius:2px;transition:transform .3s var(--p-ease)}
.nag.mm-otw .p-burger span:first-child{transform:translateY(3.3px) rotate(45deg)}
.nag.mm-otw .p-burger span:last-child{transform:translateY(-3.3px) rotate(-45deg)}
.mm-tel{display:none}
@media (max-width:1100px){
  .p-burger{display:flex}
  .nag .partner-btn{display:none}
  .mm-tel{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;border-top:1px solid var(--p-linia);padding:12px 0 18px}
  .mm-tel a{padding:10px 0;font-size:15px;color:var(--p-tusz);border-bottom:1px solid var(--p-linia)}
  .mm-siatka{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-pro{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-rodziny,.p-serie{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .p-hero .wrap,.p-marka .wrap,.p-gr,.p-gr.odwr,.p-seria,.p-gnag .wrap>div.uklad{grid-template-columns:minmax(0,1fr)}
  .p-gr.odwr .obraz{order:0}
  .p-hero .scena{aspect-ratio:4/3;border-radius:22px}
  .p-hero .scena .podpis{left:12px;bottom:12px;font-size:13px}
  .p-hero .tekst{padding:8px 0 0}
  .p-hero .zakl{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:28px}
  .p-rodziny,.p-serie,.p-inne{grid-template-columns:minmax(0,1fr)}
  .p-seria ul{grid-template-columns:minmax(0,1fr)}
  .p-seria .obraz{min-height:260px}
  .mm-panel{max-height:calc(100vh - 120px);overflow:auto}
  .mm-siatka{grid-template-columns:minmax(0,1fr)}
  .mm-kol .obraz{display:none}
  .p-vodaro{flex-direction:column;align-items:flex-start}
  .p-kroki>div{grid-template-columns:minmax(0,1fr)}
  .p-dalej{padding:22px}
}

/* ===== HERO „WOW” (27.10, wzór: showroom aut – u nas ujęcia zmieniają się same) ===== */
.p-wow{position:relative;height:calc(100svh - 104px);min-height:600px;max-height:1000px;overflow:hidden;background:#06121f;color:#fff;isolation:isolate}
.p-wow .sc{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.1s var(--p-ease),visibility 0s 1.1s}
.p-wow .sc.akt{opacity:1;visibility:visible;transition:opacity 1.1s var(--p-ease)}
.p-wow .sc .tlo{position:absolute;inset:0;z-index:-2;overflow:hidden}
.p-wow .sc video,.p-wow .sc .tlo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform 9s cubic-bezier(.2,.6,.2,1)}
.p-wow .w{display:inline-block;white-space:nowrap}
.p-wow .sc.akt video,.p-wow .sc.akt .tlo img{transform:scale(1)}
.p-wow .sc .cien{position:absolute;inset:0;z-index:-1;pointer-events:none}
.p-wow .sc.jasna{color:var(--p-tusz)}
.p-wow .sc.jasna .cien{background:linear-gradient(90deg,rgba(238,241,245,.92) 0%,rgba(238,241,245,.55) 26%,rgba(238,241,245,0) 48%),linear-gradient(0deg,rgba(238,241,245,.9) 0%,rgba(238,241,245,0) 30%)}
.p-wow .sc.ciemna .cien{background:radial-gradient(70% 70% at 50% 55%,rgba(4,14,26,.2),rgba(4,14,26,.75)),linear-gradient(0deg,rgba(4,14,26,.8),rgba(4,14,26,0) 40%)}
.p-wow .wrap{position:relative;height:100%}
/* tekst ujęcia: jedna kolumna po lewej (nadtytuł → nazwa → opis → przycisk → liczby), produkt na filmie po prawej */
.p-wow .kol{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;max-width:min(520px,40vw);padding-bottom:44px}
.p-wow .marka{font:500 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;opacity:0;transform:translateY(-8px);transition:opacity .8s .3s,transform .8s .3s var(--p-ease)}
.p-wow .marka b{color:var(--p-akcent);font-weight:500}
.p-wow .sc.akt .marka{opacity:1;transform:none}
/* wielka nazwa – litery wjeżdżają po kolei */
.p-wow .imie{margin:18px 0 0 -.04em;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(64px,7.4vw,124px);line-height:.95;letter-spacing:-.035em;white-space:nowrap}
.p-wow .imie .l{display:inline-block;opacity:0;transform:translateY(.35em) rotate(4deg);filter:blur(10px)}
.p-wow .sc.akt .imie .l{animation:p-litera 1.05s var(--p-ease) both;animation-delay:calc(var(--i) * 55ms + 250ms)}
@keyframes p-litera{to{opacity:1;transform:none;filter:blur(0)}}
.p-wow .opis{margin:20px 0 0;max-width:440px;font-size:16.5px;line-height:1.6;color:var(--p-tekst);opacity:0;transform:translateY(10px);transition:opacity .9s .7s,transform .9s .7s var(--p-ease)}
.p-wow .kol .akcje{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;margin-top:26px;opacity:0;transform:translateY(10px);transition:opacity .9s .9s,transform .9s .9s var(--p-ease)}
.p-wow .sc.akt .opis,.p-wow .sc.akt .kol .akcje{opacity:1;transform:none}
.p-wow .wiz{font:500 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--p-szary)}
/* liczby – pod przyciskiem, w tej samej kolumnie */
.p-wow .liczby-w{display:grid;grid-template-columns:repeat(3,minmax(110px,max-content));margin-top:34px}
.p-wow .liczby-w div{padding:13px 30px 0 0;border-top:1px solid rgba(127,140,155,.35);opacity:0;transform:translateY(14px);transition:opacity .8s,transform .8s var(--p-ease)}
.p-wow .sc.akt .liczby-w div{opacity:1;transform:none}
.p-wow .sc.akt .liczby-w div:nth-child(1){transition-delay:1.05s}.p-wow .sc.akt .liczby-w div:nth-child(2){transition-delay:1.2s}.p-wow .sc.akt .liczby-w div:nth-child(3){transition-delay:1.35s}
.p-wow .liczby-w b{display:block;font-size:clamp(22px,2.1vw,32px);font-weight:500;letter-spacing:-.03em;line-height:1.05;white-space:nowrap}
.p-wow .liczby-w span{display:block;margin-top:6px;font:500 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.7}
/* film produktu przesunięty w prawo, lewa krawędź łagodnie znika w jasnym tle – tekst nie nachodzi na produkt */
.p-wow .sc:not(.intro) video{object-position:var(--poz,50%) 50%}
.p-wow .sc:not(.intro) .tlo{left:26%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32%);mask-image:linear-gradient(90deg,transparent 0,#000 32%)}
.p-wow .sc.jasna:not(.intro) .cien{background:linear-gradient(90deg,rgba(238,241,245,.85) 0%,rgba(238,241,245,.45) 30%,rgba(238,241,245,0) 44%),linear-gradient(0deg,rgba(238,241,245,.75) 0%,rgba(238,241,245,0) 16%)}
/* wstęp – środek ekranu jak „Beyond the glass” */
.p-wow .wstep{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px}
.p-wow .wstep .p-eb{color:rgba(255,255,255,.7)}.p-wow .wstep .p-eb b{color:#6CC3FF}
.p-wow .wstep h1{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(70px,11vw,190px);line-height:.9;letter-spacing:-.03em;margin:22px 0 20px;color:#fff}
.p-wow .wstep h1 .l{display:inline-block;opacity:0;transform:translateY(.3em);filter:blur(12px)}
.p-wow .sc.akt .wstep h1 .l{animation:p-litera 1.2s var(--p-ease) both;animation-delay:calc(var(--i) * 45ms + 200ms)}
.p-wow .wstep p{max-width:560px;font-size:17px;line-height:1.6;color:rgba(255,255,255,.8);margin:0;opacity:0;transition:opacity 1s 1.1s}
.p-wow .sc.akt .wstep p{opacity:1}
.p-wow .wstep .akcje{display:flex;gap:10px;margin-top:28px;opacity:0;transition:opacity 1s 1.4s}
.p-wow .sc.akt .wstep .akcje{opacity:1}
html[data-motyw] .p-wow .wstep .btn{border-color:rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.08);backdrop-filter:blur(6px)}
html[data-motyw] .p-wow .wstep .btn:hover{background:rgba(255,255,255,.18)}
html[data-motyw] .p-wow .wstep .btn.bialy{background:#fff;color:var(--p-granat);border-color:#fff}
/* nawigacja ujęć – prawy dół */
.p-wow .nav{position:absolute;z-index:5;left:0;right:0;bottom:22px}
.p-wow .nav .wrap{display:flex;align-items:center;justify-content:flex-start;gap:16px;height:auto}
.p-wow .nav .licz{order:-1;text-align:left}
.p-wow .nav .licz{font:500 11px var(--mono);letter-spacing:.16em;min-width:62px;text-align:right}
.p-wow .nav .paski{display:flex;gap:6px}
.p-wow .nav .paski button{position:relative;width:46px;height:20px}
.p-wow .nav .paski button::before,.p-wow .nav .paski button::after{content:'';position:absolute;left:0;right:0;top:9px;height:2px;border-radius:2px;background:currentColor;opacity:.25}
.p-wow .nav .paski button::after{opacity:1;right:auto;width:0}
.p-wow .nav .paski button.byl::after{width:100%}
.p-wow .nav .paski button.akt::after{width:100%;transition:width var(--czas,7000ms) linear}
.p-wow .nav .paski button.stop::after{transition:none}
.p-wow .nav .pauza{width:32px;height:32px;border-radius:50%;border:1px solid currentColor;opacity:.6;display:grid;place-items:center;font-size:10px}
.p-wow .nav .pauza:hover{opacity:1}
.p-wow[data-ton="jasna"] .nav{color:var(--p-tusz)}
.p-wow[data-ton="ciemna"] .nav{color:#fff}
@media (max-width:820px){
  .p-wow{height:calc(100svh - 110px);min-height:580px}
  /* telefon: film u góry, pod nim kolumna tekstu */
  .p-wow .sc:not(.intro) .tlo{left:0;bottom:auto;height:58%;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
  .p-wow .sc video,.p-wow .sc .tlo img,.p-wow .sc:not(.intro) video{object-position:50% 40%}
  .p-wow .sc.jasna:not(.intro) .cien{background:linear-gradient(0deg,rgba(238,241,245,.96) 0%,rgba(238,241,245,.85) 34%,rgba(238,241,245,0) 52%)}
  .p-wow .kol{max-width:none;justify-content:flex-end;padding-bottom:70px}
  .p-wow .imie{font-size:clamp(54px,16vw,84px);margin-top:10px}
  .p-wow .opis{margin-top:10px;font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .p-wow .kol .akcje{margin-top:14px}
  .p-wow .kol .akcje .btn{height:42px;padding:0 16px;font-size:13.5px}
  .p-wow .liczby-w{margin-top:16px;width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}
  .p-wow .liczby-w div{padding:10px 10px 0 0}
  .p-wow .liczby-w b{font-size:16.5px;letter-spacing:-.01em}
  .p-wow .liczby-w span{font-size:8.5px;letter-spacing:.08em}
  .p-wow .wstep h1{font-size:clamp(56px,17vw,90px)}
  .p-wow .nav .paski button{width:28px}
}

/* ===== KOLORY I CIENIOWANIE TECHNIKA (27.10, nagranie Angeliki: jak na aquafilter-b2b.vercel.app) =====
   tokeny z index.html: --grad (akcent → akcent-2 → granat), --obw (obwódka w kolorze marki), --tint-a (jasny błękit), --ck/--ck2 (cienie) */
/* nagłówki: kursywa w gradiencie */
html[data-motyw] .p-h2 .serif,html[data-motyw] .p-gr h3 .serif,html[data-motyw] .p-gnag h1 .serif,html[data-motyw] .p-marka .zdanie .serif{background:linear-gradient(95deg,var(--akcent-2),var(--swiatlo));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
html[data-motyw] .p-eb b{color:var(--akcent)}
/* karty: biel → jasny błękit, cień, po najechaniu niebieska obwódka, poświata i pasek u góry */
html[data-motyw] .p-rodzina,html[data-motyw] .p-seria-k,html[data-motyw] .p-pro a,html[data-motyw] .p-pro button,html[data-motyw] .p-kroki>div>div,html[data-motyw] .p-dalej{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--graphite) 45%,color-mix(in srgb,var(--akcent) 9%,var(--graphite)));border:1px solid var(--line);box-shadow:0 1px 2px var(--ck),0 22px 48px -26px var(--ck2)}
html[data-motyw] .p-rodzina::before,html[data-motyw] .p-seria-k::before,html[data-motyw] .p-pro a::before,html[data-motyw] .p-pro button::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:3;background:linear-gradient(90deg,var(--swiatlo),var(--akcent-2),var(--glab));opacity:0;transition:opacity .3s}
html[data-motyw] .p-rodzina:hover,html[data-motyw] .p-seria-k:hover,html[data-motyw] .p-pro a:hover,html[data-motyw] .p-pro button:hover{border-color:var(--obw);box-shadow:0 2px 4px var(--ck),0 34px 64px -28px color-mix(in srgb,var(--akcent-2) 50%,transparent)}
html[data-motyw] .p-rodzina:hover::before,html[data-motyw] .p-seria-k:hover::before,html[data-motyw] .p-pro a:hover::before,html[data-motyw] .p-pro button:hover::before{opacity:1}
/* zaznaczenie po kliknięciu / klawiaturą */
html[data-motyw] .p-rodzina:active,html[data-motyw] .p-seria-k:active,html[data-motyw] .p-pro a:active,html[data-motyw] .p-pro button:active,html[data-motyw] .p-inne a:active{transform:translateY(-2px) scale(.99);border-color:var(--akcent);box-shadow:0 0 0 3px color-mix(in srgb,var(--akcent) 22%,transparent),0 24px 48px -26px color-mix(in srgb,var(--akcent-2) 60%,transparent)}
html[data-motyw] .p-rodzina:focus-visible,html[data-motyw] .p-seria-k:focus-visible,html[data-motyw] .p-pro a:focus-visible,html[data-motyw] .p-inne a:focus-visible,html[data-motyw] .p-gr .obraz:focus-visible{outline:3px solid color-mix(in srgb,var(--akcent) 45%,transparent);outline-offset:3px}
html[data-motyw] .p-seria-k.wybr{border-color:var(--akcent);box-shadow:0 0 0 3px color-mix(in srgb,var(--akcent) 22%,transparent),0 34px 64px -28px color-mix(in srgb,var(--akcent-2) 55%,transparent)}
html[data-motyw] .p-seria-k.wybr::before{opacity:1}
/* tła zdjęć w kartach: biały środek, błękitne brzegi */
html[data-motyw] .p-rodzina .obraz:not(.foto),html[data-motyw] .p-seria-k .obraz,html[data-motyw] .mm-rodz .mini:not(.foto){background:radial-gradient(80% 80% at 50% 40%,#fff 0,color-mix(in srgb,var(--akcent) 7%,#fff) 68%,color-mix(in srgb,var(--akcent) 15%,#fff) 100%)}
/* plakietki z kodem / numerem: gradient marki */
html[data-motyw] .p-gr .obraz span,html[data-motyw] .mm-kol .obraz span,html[data-motyw] .mm-lewa .obraz span,html[data-motyw] .p-rodzina .obraz .nowe{background:linear-gradient(135deg,var(--akcent-2),var(--glab));color:#fff;box-shadow:0 6px 14px -6px color-mix(in srgb,var(--akcent-2) 70%,transparent)}
html[data-motyw] .p-seria-k .kod,html[data-motyw] .p-gr .nr{color:var(--akcent-2)}
/* chipy rodzin i fakty */
html[data-motyw] .p-gr .rodziny a,html[data-motyw] .p-gnag .chipy span,html[data-motyw] .p-seria-k .fakty span{background:var(--tint-a);color:color-mix(in srgb,var(--akcent-2) 72%,var(--white));border:1px solid color-mix(in srgb,var(--akcent) 22%,transparent)}
html[data-motyw] .p-gr .rodziny a:hover{background:var(--grad);color:#fff;border-color:transparent}
/* kroki i ikony: kwadraty w gradiencie */
html[data-motyw] .p-kroki b{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--grad);color:#fff;box-shadow:0 10px 20px -10px color-mix(in srgb,var(--akcent-2) 80%,transparent)}
html[data-motyw] .p-pro svg{padding:9px;width:46px;height:46px;border-radius:14px;background:var(--tint-a);color:var(--akcent-2);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--akcent) 22%,transparent);transition:background .3s,color .3s}
html[data-motyw] .p-pro a:hover svg,html[data-motyw] .p-pro button:hover svg{background:var(--grad);color:#fff}
/* strzałka „Zobacz grupę” */
html[data-motyw] .p-strzalka i{border-color:var(--obw);color:var(--akcent-2)}
html[data-motyw] .p-strzalka:hover i{background:var(--grad);color:#fff;border-color:transparent}
/* pas liczb pod marką: granat → kolor marki (jak pasek liczb na B2B) */
html[data-motyw] .p-liczby{background:linear-gradient(100deg,var(--glab) 0%,var(--akcent-2) 62%,color-mix(in srgb,var(--swiatlo) 70%,var(--akcent-2)) 100%);border:0;border-radius:22px;overflow:hidden;position:relative}
html[data-motyw] .p-liczby::after{content:"";position:absolute;inset:0;background:radial-gradient(40% 120% at 85% 0,rgba(255,255,255,.18),transparent 60%);pointer-events:none}
html[data-motyw] .p-liczby div{padding:24px 24px 22px;border-left:1px solid rgba(255,255,255,.14)}
html[data-motyw] .p-liczby div:first-child{border-left:0}
html[data-motyw] .p-liczby b{color:#fff}
html[data-motyw] .p-liczby span{color:rgba(255,255,255,.72)}
/* sekcja nowej serii AHA: ciemny gradient z poświatą jak sekcja partnerska */
html[data-motyw] .p-seria{background:radial-gradient(55% 110% at 0 0,color-mix(in srgb,var(--swiatlo) 34%,transparent),transparent 62%),linear-gradient(135deg,var(--glab) 0%,color-mix(in srgb,var(--akcent-2) 80%,var(--glab)) 100%);box-shadow:0 40px 80px -40px color-mix(in srgb,var(--glab) 70%,transparent)}
html[data-motyw] .p-seria h2 .serif{background:linear-gradient(95deg,#fff,var(--swiatlo));-webkit-background-clip:text;background-clip:text;color:transparent}
/* pasek VODARO */
html[data-motyw] .p-vodaro{background:var(--tint-a);border:1px solid color-mix(in srgb,var(--akcent) 24%,transparent)}
/* menu: aktywna grupa i pozycje w panelu */
html[data-motyw] .menu a.akt{color:var(--akcent-2);background:var(--tint-a);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--akcent) 30%,transparent)}
html[data-motyw] .mm-rodz a:hover,html[data-motyw] .mm-kol li a:hover{background:var(--tint-a);color:var(--akcent-2);box-shadow:inset 3px 0 0 var(--akcent-2)}
html[data-motyw] .mm-kol li a:hover{padding-left:8px}
/* hero: aktywny pasek postępu i liczby w gradiencie */
html[data-motyw] .p-wow .nav .paski button::after{background:linear-gradient(90deg,var(--swiatlo),var(--akcent-2))}
html[data-motyw] .p-wow .marka b{color:var(--akcent)}
html[data-motyw] .p-wow .liczby-w div{border-top:2px solid transparent;border-image:linear-gradient(90deg,var(--akcent-2),color-mix(in srgb,var(--swiatlo) 40%,transparent)) 1}
html[data-motyw] .p-wow .liczby-w b{color:var(--akcent-2)}
/* inne grupy, zdjęcia grup */
html[data-motyw] .p-inne a{border:1px solid var(--line);box-shadow:0 1px 2px var(--ck),0 22px 48px -26px var(--ck2);transition:border-color .3s,box-shadow .3s}
html[data-motyw] .p-inne a:hover{border-color:var(--obw);box-shadow:0 2px 4px var(--ck),0 34px 64px -28px color-mix(in srgb,var(--akcent-2) 50%,transparent)}
html[data-motyw] .p-gr .obraz,html[data-motyw] .p-gbaner{box-shadow:0 1px 2px var(--ck),0 30px 60px -34px var(--ck2)}

/* ===== WSTĘP HERO: jasna woda + obracająca się kula ziemska z Łodzią (27.10) ===== */
.p-wow .sc.intro .cien{background:linear-gradient(90deg,rgba(244,248,252,.96) 0%,rgba(244,248,252,.78) 30%,rgba(244,248,252,.18) 58%,rgba(244,248,252,0) 72%),linear-gradient(0deg,rgba(214,232,247,.55),rgba(214,232,247,0) 40%)}
.p-wow .wstep-p{display:flex;align-items:center;height:100%}
.p-wow .wstep-p .tekst{position:relative;z-index:2;max-width:600px}
.p-wow .wstep-p h1{font-size:clamp(64px,8.2vw,132px);line-height:.9;letter-spacing:-.045em;font-weight:500;color:var(--p-tusz);margin:20px 0 22px}
.p-wow .wstep-p h1 .serif-g{display:block;font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.03em}
.p-wow .wstep-p h1 .l{display:inline-block;opacity:0;transform:translateY(.3em);filter:blur(12px)}
.p-wow .sc.akt .wstep-p h1 .l{animation:p-litera 1.15s var(--p-ease) both;animation-delay:calc(var(--i) * 48ms + 200ms)}
.p-wow .wstep-p h1 .serif-g .l{animation-delay:calc(var(--i) * 48ms + 520ms)!important}
.p-wow .wstep-p p{font-size:18px;line-height:1.6;color:var(--p-tekst);max-width:500px;margin:0;opacity:0;transition:opacity 1s 1.1s}
.p-wow .wstep-p .akcje{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px;opacity:0;transition:opacity 1s 1.35s}
.p-wow .wstep-p .odznaki{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px;opacity:0;transition:opacity 1s 1.6s}
.p-wow .sc.akt .wstep-p p,.p-wow .sc.akt .wstep-p .akcje,.p-wow .sc.akt .wstep-p .odznaki{opacity:1}
.p-wow .odznaki span{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;font-size:13px;color:color-mix(in srgb,var(--akcent-2) 72%,var(--white));background:rgba(255,255,255,.72);backdrop-filter:blur(8px);border:1px solid color-mix(in srgb,var(--akcent) 24%,transparent);box-shadow:0 10px 24px -16px var(--ck2)}
.p-wow .odznaki .flaga{width:18px;height:12px;border-radius:2px;background:linear-gradient(#fff 50%,#DC143C 50%);box-shadow:0 0 0 1px rgba(14,26,38,.18)}
.p-wow .odznaki b{font-weight:600;color:var(--akcent-2)}
.p-wow .glob-wow{position:absolute;z-index:1;top:50%;right:max(-2vw,calc((100vw - 1320px) / 2 - 60px));width:min(78vh,50vw);aspect-ratio:1;transform:translateY(-50%);pointer-events:none}
@media (max-width:820px){
  .p-wow .wstep-p{align-items:flex-start;padding-top:28px}
  .p-wow .wstep-p h1{font-size:clamp(52px,15vw,78px);margin:14px 0 14px}
  .p-wow .wstep-p p{font-size:15px}
  .p-wow .wstep-p .odznaki{display:none}
  .p-wow .glob-wow{top:auto;bottom:-6%;right:-18%;width:96vw;transform:none;opacity:.9}
  .p-wow .sc.intro .cien{background:linear-gradient(180deg,rgba(244,248,252,.95) 0%,rgba(244,248,252,.75) 48%,rgba(244,248,252,.05) 75%)}
}

/* ===== HERO PODSTRON GRUP (to samo ujęcie co na stronie głównej, zapętlone) ===== */
.p-wow.p-wow-g{height:min(calc(100svh - 104px),880px)}
.p-wow-g .marka a{color:inherit;opacity:.7}.p-wow-g .marka a:hover{opacity:1}
.p-wow-g .przewin{position:absolute;left:0;bottom:22px;font:500 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--p-szary);display:flex;align-items:center;gap:10px}
.p-wow-g .przewin i{display:block;width:1px;height:26px;background:linear-gradient(var(--akcent-2),transparent);animation:p-przewin 1.8s ease-in-out infinite}
@keyframes p-przewin{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.p-gbaner video{width:100%;height:100%;object-fit:cover}

/* poprawki 27.10: wyższy kadr filmu rodziny */
.p-gbaner.film{aspect-ratio:2.2/1;max-height:620px}
@media (max-width:820px){.p-gbaner.film{aspect-ratio:16/10}}

/* ===== 27.10 poprawki 3 (nagranie Angeliki 14:04): jedna pozycja menu z 4 grupami, ramki grup, tylko kolory Technika, hero w jednej kolumnie ===== */
/* kolory: bez granatu z wariantu „Głębia” – ciemny koniec gradientów to błękit Technika (#0B5CAD) */
html[data-motyw="3"]{--glab:#0B5CAD;--p-granat:#0B5CAD;--grad:linear-gradient(135deg,#1A8CE6 0%,#0A7BD1 42%,#0B5CAD 100%);--siatka-t:linear-gradient(rgba(10,123,209,.07) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(10,123,209,.07) 1px,transparent 1px) 0 0/40px 40px;--ramka:color-mix(in srgb,var(--akcent) 32%,var(--line))}

/* menu: przycisk „Cztery grupy, jeden standard” */
.menu .mm-btn{font-weight:500}
.menu .mm-btn:focus-visible{outline:2px solid color-mix(in srgb,var(--akcent) 55%,transparent);outline-offset:2px}
html[data-motyw] .menu .mm-btn.akt{color:var(--akcent-2);background:var(--tint-a);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--akcent) 30%,transparent)}
html[data-motyw] .nag.mm-otw .mm-btn{color:var(--akcent-2);background:var(--tint-a);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--akcent) 40%,transparent)}
/* panel: same 4 grupy */
.mm-gora{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0 0}
.mm-gora a{font-size:13.5px;font-weight:600;color:var(--akcent-2)}
.mm-gora a:hover{color:var(--akcent)}
.mm-grupy{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:16px 0 26px}
.mm-g{position:relative;display:flex;flex-direction:column;padding:10px;border-radius:22px;color:var(--p-tusz);background:linear-gradient(150deg,#fff 45%,color-mix(in srgb,var(--akcent) 8%,#fff));border:1.5px solid var(--ramka);box-shadow:0 1px 2px var(--ck),0 18px 40px -28px var(--ck2);transition:transform .4s var(--p-ease),box-shadow .4s var(--p-ease),border-color .3s,background .4s}
.mm-g .obraz{position:relative;display:block;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--p-zdj)}
.mm-g .obraz img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--p-ease)}
.mm-g .obraz>span{position:absolute;left:10px;top:10px;font:500 10px var(--mono);letter-spacing:.12em;border-radius:999px;padding:4px 9px;background:linear-gradient(135deg,var(--akcent),var(--akcent-2));color:#fff}
.mm-g .t{display:flex;flex-direction:column;gap:6px;padding:14px 8px 6px;flex:1}
.mm-g b{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.mm-g b .serif{font-weight:400;background:linear-gradient(95deg,var(--akcent-2),var(--swiatlo));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.mm-g small{font-size:13px;line-height:1.45;color:var(--p-szary)}
.mm-g .stat{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--akcent) 14%,var(--p-linia));font:500 10.5px var(--mono);letter-spacing:.08em;color:var(--p-szary)}
.mm-g .stat i{font-style:normal;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--ramka);color:var(--akcent-2);font-size:13px;transition:background .3s,color .3s,transform .3s var(--p-ease)}

/* ramka grupy – wspólna dla strony głównej, panelu menu i „Pozostałych grup”: po najechaniu mocny błękit */
.p-grupy .p-gr::before,.mm-g::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:2.5px;background:linear-gradient(135deg,var(--swiatlo),var(--akcent) 45%,var(--akcent-2));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s;pointer-events:none;z-index:3}
.p-grupy .p-gr:hover::before,.mm-g:hover::before,.mm-g:focus-visible::before{opacity:1}
.mm-g:hover,.mm-g:focus-visible{transform:translateY(-3px);border-color:transparent;background:linear-gradient(150deg,#fff 25%,color-mix(in srgb,var(--akcent) 16%,#fff));box-shadow:0 0 0 5px color-mix(in srgb,var(--akcent) 12%,transparent),0 30px 60px -30px color-mix(in srgb,var(--akcent-2) 65%,transparent)}
.mm-g:hover .obraz img{transform:scale(1.05)}
.mm-g:hover .stat i{background:var(--grad);color:#fff;border-color:transparent;transform:translateX(3px)}
.mm-g:active{transform:translateY(-1px) scale(.99)}

/* strona główna: każda z 4 grup w ramce */
.p-grupy .p-gr{position:relative;padding:20px;margin-top:20px;border:1.5px solid var(--ramka);border-radius:32px;background:linear-gradient(150deg,#fff 40%,color-mix(in srgb,var(--akcent) 8%,#fff));box-shadow:0 1px 2px var(--ck),0 26px 56px -34px var(--ck2);transition:opacity .9s var(--p-ease),transform .45s var(--p-ease),box-shadow .45s var(--p-ease),border-color .3s,background .45s}
.p-grupy .p-gr>div{padding:10px 22px 10px 8px}
.p-grupy .p-gr.odwr>div{padding:10px 8px 10px 22px}
.p-grupy .p-gr .obraz{border-radius:22px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--akcent) 12%,transparent)}
.p-grupy .p-gr:hover{transform:translateY(-4px);border-color:transparent;background:linear-gradient(150deg,#fff 22%,color-mix(in srgb,var(--akcent) 17%,#fff));box-shadow:0 0 0 6px color-mix(in srgb,var(--akcent) 11%,transparent),0 46px 90px -42px color-mix(in srgb,var(--akcent-2) 70%,transparent)}
.p-grupy .p-gr:hover .p-strzalka i{background:var(--grad);color:#fff;border-color:transparent;transform:translateX(3px)}
.p-grupy .p-gr:hover .obraz img{transform:scale(1.045)}
html[data-motyw] .p-grupy .p-gr:hover .rodziny a{border-color:color-mix(in srgb,var(--akcent) 40%,transparent)}
/* pozostałe grupy na podstronach: ta sama ramka i mocniejszy kolor po najechaniu */
html[data-motyw] .p-inne a{border:1.5px solid var(--ramka)}
html[data-motyw] .p-inne a:hover{border-color:var(--akcent);box-shadow:0 0 0 5px color-mix(in srgb,var(--akcent) 12%,transparent),0 34px 64px -28px color-mix(in srgb,var(--akcent-2) 65%,transparent)}
html[data-motyw] .p-inne a:hover span{color:var(--akcent-2)}

/* pas liczb pod marką: błękit Technika zamiast granatu */
html[data-motyw="3"] .p-liczby{background:linear-gradient(100deg,#0B5CAD 0%,#0A7BD1 58%,#2390EA 100%);box-shadow:0 24px 50px -30px rgba(10,123,209,.65)}
html[data-motyw="3"] .p-liczby::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/36px 36px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/36px 36px;pointer-events:none}
html[data-motyw="3"] .p-liczby span{color:rgba(255,255,255,.82)}
/* nowa seria AHA: jasna karta techniczna z siatką (jak hero „Technika”), błękitna ramka */
html[data-motyw="3"] .p-seria{color:var(--p-tusz);background:var(--siatka-t),linear-gradient(150deg,#fff 30%,color-mix(in srgb,var(--akcent) 10%,#fff));border:1.5px solid var(--ramka);box-shadow:0 1px 2px var(--ck),0 40px 80px -46px color-mix(in srgb,var(--akcent-2) 55%,transparent)}
html[data-motyw="3"] .p-seria .p-eb{color:var(--p-szary)}
html[data-motyw="3"] .p-seria .p-eb b{color:var(--akcent)}
html[data-motyw="3"] .p-seria h2 .serif{background:linear-gradient(95deg,var(--akcent-2),var(--swiatlo));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
html[data-motyw="3"] .p-seria p{color:var(--p-tekst)}
html[data-motyw="3"] .p-seria li{border-top:1px solid color-mix(in srgb,var(--akcent) 20%,var(--line));color:var(--p-tusz)}
html[data-motyw="3"] .p-seria li b{color:var(--akcent-2)}
html[data-motyw="3"] .p-seria .btn.bialy{background:var(--grad);color:#fff;border:1px solid color-mix(in srgb,var(--akcent-2) 60%,transparent)}
html[data-motyw="3"] .p-seria .btn.bialy:hover{background:var(--grad);background-position:100% 100%}
html[data-motyw="3"] .p-seria .obraz{border-left:1.5px solid var(--ramka)}
/* sekcja partnerska: jasny błękit Technika z siatką, bez granatu */
html[data-motyw="3"] .partner{background:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px) 0 0/44px 44px,radial-gradient(55% 110% at 100% 0,rgba(255,255,255,.24),transparent 62%),linear-gradient(135deg,#1A8CE6 0%,#0A7BD1 45%,#0B5CAD 100%);border:1px solid color-mix(in srgb,#0B5CAD 60%,transparent);box-shadow:0 40px 80px -42px rgba(10,123,209,.6)}
html[data-motyw="3"] .partner .mono{color:rgba(255,255,255,.8)}
html[data-motyw="3"] .partner h2 .serif{background:linear-gradient(95deg,#fff,#D4EBFF);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-motyw="3"] .partner .btn,html[data-motyw="3"] .partner .btn.bialy{background:#fff;color:var(--akcent-2)}
/* stopka: jasna jak strona Technika */
html[data-motyw="3"] .stopka{--white:#0E1A26;--black:#EEF1F5;--light:#1F2D3B;--gray:#73818F;--gray-2:#52606E;--line:#C6D1DC;--line-2:#DAE2EA;background:linear-gradient(180deg,#fff,#E7ECF2);color:#52606E;border-top:1px solid #DAE2EA}
html[data-motyw="3"] .stopka h5{color:var(--akcent-2)}
html[data-motyw="3"] .stopka a:hover{color:var(--akcent)}
/* tło hero, zanim wczyta się film – jasne zamiast granatowego */
.p-wow{background:linear-gradient(90deg,#EEF1F5,#E5E9ED)}

@media (max-width:1100px){
  .mm-grupy{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .mm-gora{padding-top:14px}
  .mm-gora a{display:none}
  .mm-grupy{grid-template-columns:minmax(0,1fr);gap:10px;padding:12px 0 16px}
  .mm-g{flex-direction:row;align-items:center;gap:12px;padding:8px}
  .mm-g .obraz{flex:none;width:96px;aspect-ratio:1}
  .mm-g .obraz>span{display:none}
  .mm-g .t{padding:2px 4px 2px 0;gap:3px}
  .mm-g b{font-size:17px}
  .mm-g small{display:none}
  .mm-g .stat{border-top:0;padding-top:2px}
  .p-grupy .p-gr{padding:12px;border-radius:24px}
  .p-grupy .p-gr>div,.p-grupy .p-gr.odwr>div{padding:6px 8px 10px}
  .p-grupy .p-gr .obraz{border-radius:16px}
  html[data-motyw="3"] .p-seria .obraz{border-left:0;border-top:1.5px solid var(--ramka)}
  .p-wow-g .przewin{display:none}
}

/* ===== 27.10 poprawki 4: czytelny pasek kontaktu u góry, zdjęcia Aquafilter w „Wsparciu”, czystsze przejście ujęć ===== */
html[data-motyw] .util{background:#fff;color:var(--p-tusz);font:500 13px var(--sans);letter-spacing:0;border-bottom:1px solid var(--p-linia)}
html[data-motyw] .util .wrap{height:40px}
.util .l{align-items:center;gap:22px}
.util .l a{color:var(--p-tekst);transition:color .2s}
.util .l a:hover{color:var(--akcent-2)}
.util .l a.kont{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--p-tusz)}
.util .l a.kont svg{width:15px;height:15px;color:var(--akcent)}
.util .kreska{width:1px;height:16px;background:var(--p-linia)}
.util .made{display:inline-flex;align-items:center;gap:8px;color:var(--p-tekst)}
.util .made .flaga{width:18px;height:12px;border-radius:2px;background:linear-gradient(#fff 50%,#DC143C 50%);box-shadow:0 0 0 1px rgba(14,26,38,.18)}
@media (max-width:1100px){.util .kreska{display:none}}
@media (max-width:760px){.util .made{display:none}.util .l a.kont:nth-child(2){font-size:12px}}
/* wsparcie: karty katalogów PDF w ramce grupy, zdjęcie na całą szerokość */
html[data-motyw] .pobierz a.foto{position:relative;padding:10px 10px 18px;gap:8px;border:1.5px solid var(--ramka);border-radius:22px;background:linear-gradient(150deg,#fff 45%,color-mix(in srgb,var(--akcent) 8%,#fff));box-shadow:0 1px 2px var(--ck),0 18px 40px -28px var(--ck2);transition:transform .4s var(--p-ease),box-shadow .4s var(--p-ease),border-color .3s,background .4s}
.pobierz a.foto .obraz{display:block;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--p-zdj);margin-bottom:6px}
.pobierz a.foto .obraz img{width:100%;height:100%;padding:0;border-radius:0;object-fit:cover;background:none;transition:transform .8s var(--p-ease)}
.pobierz a.foto small,.pobierz a.foto b,.pobierz a.foto .mono{padding:0 8px}
.pobierz a.foto .mono{color:var(--akcent-2)}
html[data-motyw] .pobierz a.foto:hover{transform:translateY(-3px);border-color:var(--akcent);background:linear-gradient(150deg,#fff 25%,color-mix(in srgb,var(--akcent) 16%,#fff));box-shadow:0 0 0 5px color-mix(in srgb,var(--akcent) 12%,transparent),0 30px 60px -30px color-mix(in srgb,var(--akcent-2) 65%,transparent)}
.pobierz a.foto:hover .obraz img{transform:scale(1.05)}
/* hero: tekst poprzedniego ujęcia znika szybko, film przenika się dalej – bez nakładania dwóch opisów */
.p-wow .sc .kol{transition:opacity .45s var(--p-ease)}
.p-wow .sc:not(.akt) .kol{opacity:0}

/* ===== 27.10 poprawki 5: nowa seria AHA – krótszy, mniejszy opis i węższa kolumna tekstu, zdjęcie w całości (produkty nie ucinają się na brzegach) ===== */
.p-seria{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.p-seria .tekst{padding:clamp(28px,3.4vw,50px)}
.p-seria h2{font-size:clamp(34px,3.4vw,52px);margin:12px 0 12px}
.p-seria p{font-size:15px;line-height:1.55;max-width:380px;margin:0}
.p-seria ul{margin:18px 0 24px;gap:0 20px}
.p-seria li{padding:8px 0;font-size:13.5px}
.p-seria li b{font-size:9.5px;margin-bottom:2px}
.p-seria .obraz{min-height:0;background:linear-gradient(180deg,#DBDFE2,#E3E5E9 50%,#D7DBDE)}
.p-seria .obraz img{object-fit:contain}
@media (max-width:820px){.p-seria{grid-template-columns:minmax(0,1fr)}.p-seria .obraz{aspect-ratio:1.79/1}}
/* baner rodziny ze zdjęciem od Aquafilter (np. AHB, systemy na cały dom): zdjęcie w całości, brzegi łagodnie przechodzą w tło */
.p-gbaner.male{aspect-ratio:2.4/1;background:linear-gradient(180deg,#DCE0E3,#E3E5E9 50%,#D8DCDF)}
.p-gbaner.male img,.p-gbaner.male.widac img{display:block;width:auto;max-width:100%;height:100%;margin:0 auto;object-fit:contain;transform:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent)}
@media (max-width:820px){.p-gbaner.male{aspect-ratio:1.79/1}.p-gbaner.male img{-webkit-mask-image:none;mask-image:none}}

/* ===== 27.10 poprawki 6: film z targów Big 5 Global (zmontowany bez ujęć z szyldem innej firmy) w bloku dla dystrybutorów ===== */
html[data-motyw] .p-partner-film{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,4vw,56px);align-items:center;padding:clamp(28px,4vw,56px)}
.p-partner-film .t p{max-width:460px}
.p-partner-film .film{position:relative;margin:0;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#0B5CAD;border:1px solid rgba(255,255,255,.35);box-shadow:0 30px 60px -30px rgba(4,30,70,.6)}
.p-partner-film .film video{width:100%;height:100%;object-fit:cover;display:block}
.p-partner-film figcaption{position:absolute;left:12px;bottom:12px;font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(10,60,120,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:999px;padding:6px 11px}
@media (max-width:820px){html[data-motyw] .p-partner-film{grid-template-columns:minmax(0,1fr);padding:26px}}
/* pasek kontaktu na wąskim telefonie: numer i e-mail w jednej linii */
.util .l a.kont{white-space:nowrap}
@media (max-width:420px){.util .l{gap:12px}.util .l a.kont{font-size:12px}.util .l a.kont svg{display:none}}