/* Motyw pradznatury — wygląd A „Pory roku” (z wersji pokazowej, zaakceptowanej przez klienta). Kroje: Epilogue (nagłówki), Libre Franklin (tekst). */

@font-face { font-family: "Epilogue"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/epilogue-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Epilogue"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/epilogue-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Epilogue"; font-style: italic; font-weight: 400 800; font-display: swap;
  src: url(fonts/epilogue-italic-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Epilogue"; font-style: italic; font-weight: 400 800; font-display: swap;
  src: url(fonts/epilogue-italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fonts/librefranklin-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fonts/librefranklin-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --papier: #ffffff;
  --papier-2: #e8f2dc;
  --karta: #ffffff;
  --tusz: #14210f;
  --tusz-2: #3e4d38;
  --butelka: #0d6002;
  --butelka-2: #118002;
  --butelka-3: #0a4801;
  --linia: #cfdcc4;
  /* lato */
  --lato: #f4b81c;
  --lato-c: #7a5200;
  --lato-t: #ffd75e;
  --lato-ton: rgba(255, 176, 30, .34);
  /* zima */
  --zima: #46aedb;
  --zima-c: #0c5a7c;
  --zima-t: #a3d8ef;
  --zima-ton: rgba(120, 190, 225, .55);
  /* cały rok */
  --rok: #8ac347;
  --rok-c: #118002;
  --rok-t: #b5dc7d;
  --rok-ton: rgba(138, 195, 71, .3);

  --akcent: var(--rok);
  --akcent-c: var(--rok-c);
  --akcent-t: var(--rok-t);

  --f-nag: "Epilogue", "Segoe UI", system-ui, sans-serif;
  --f-tekst: "Libre Franklin", "Segoe UI", system-ui, sans-serif;
  --szer: 1240px;
  --gut: 16px;
  --r: 18px;
  --r-m: 12px;
  --cien: 0 18px 40px -22px rgba(21, 35, 27, .38);
  --pas-h: 0px;
  --ixw-h: 0px;
}
:is([data-pora="lato"], .pora-lato) { --akcent: var(--lato); --akcent-c: var(--lato-c); --akcent-t: var(--lato-t); }
:is([data-pora="zima"], .pora-zima) { --akcent: var(--zima); --akcent-c: var(--zima-c); --akcent-t: var(--zima-t); }
:is([data-pora="rok"], .pora-rok) { --akcent: var(--rok); --akcent-c: var(--rok-c); --akcent-t: var(--rok-t); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0; background: var(--papier); color: var(--tusz);
  font: 400 16px/1.62 var(--f-tekst); overflow-x: hidden;
  transition: background-color .6s ease;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--butelka-2); text-underline-offset: 3px; }
a:hover { color: var(--butelka); }
h1, h2, h3, h4 { font-family: var(--f-nag); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 .5em; color: var(--butelka); text-wrap: balance; }
p { margin: 0 0 1em; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--zima-c); outline-offset: 3px; border-radius: 6px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: calc(var(--szer) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
@media (min-width: 700px) { :root { --gut: 32px; } body { font-size: 17px; } }

.skip { position: absolute; left: 12px; top: -80px; z-index: 1000; background: var(--butelka); color: #fff; padding: 12px 18px; border-radius: 10px; font-weight: 600; }
.skip:focus { top: 12px; color: #fff; }

.ik { width: 1.25em; height: 1.25em; flex: none; }
.ik-gw { width: 1em; height: 1em; }

/* ---------- przyciski i drobiazgi ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px;
  padding: .7em 1.35em; border-radius: 999px; border: 2px solid var(--butelka);
  background: var(--butelka); color: var(--papier); font: 700 .92rem/1.15 var(--f-nag); letter-spacing: .02em;
  text-decoration: none; cursor: pointer; transition: transform .2s ease, background-color .25s, color .25s, border-color .25s, box-shadow .25s;
}
.btn:hover { background: var(--butelka-3); border-color: var(--butelka-3); color: #fff; transform: translateY(-2px); box-shadow: var(--cien); }
.btn .ik { transition: transform .25s ease; }
.btn:hover .ik { transform: translateX(3px); }
.btn-akcent { background: var(--akcent); border-color: var(--akcent); color: var(--tusz); }
.btn-akcent:hover { background: var(--butelka); border-color: var(--butelka); color: var(--papier); }
.btn-jasny { background: transparent; color: var(--butelka); }
.btn-jasny:hover { background: var(--butelka); color: var(--papier); }
.btn-obrys { background: transparent; border-color: rgba(255, 255, 255, .5); color: var(--papier); }
.btn-obrys:hover { background: var(--papier); border-color: var(--papier); color: var(--butelka); }
.btn-duzy { min-height: 56px; padding: .8em 1.7em; font-size: 1rem; }
.btn-maly { min-height: 44px; padding: .5em 1.05em; font-size: .82rem; }
.lnk { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; font: 700 .9rem/1.2 var(--f-nag); color: var(--butelka); text-decoration: none; letter-spacing: .02em; border-bottom: 2px solid var(--akcent); }
.lnk:hover .ik { transform: translateX(3px); }
.lnk .ik { transition: transform .2s; }

.nad { display: inline-flex; align-items: center; gap: .5em; font: 700 .78rem/1.3 var(--f-nag); letter-spacing: .14em; text-transform: uppercase; color: var(--akcent-c); margin: 0 0 .9em; }
.h-sek { font-size: clamp(1.9rem, 4.2vw, 3.2rem); font-weight: 800; max-width: 22ch; }
.h-sek-m { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.lead { font-size: 1.12em; font-weight: 500; color: var(--tusz); line-height: 1.55; }
.lista { list-style: none; padding: 0; margin: 0 0 1.2em; display: grid; gap: .55em; }
.lista li { display: flex; gap: .65em; align-items: flex-start; }
.lista .ik { color: var(--akcent-c); margin-top: .2em; }
.b-h2 { font-size: clamp(1.45rem, 2.6vw, 2rem); margin-top: 1.4em; }
.b-h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); margin-top: 1.2em; }
.b-h4 { font-size: 1.08rem; margin-top: 1em; }
.b-img { margin: 1.6em 0; border-radius: var(--r); overflow: hidden; }
.b-img-logo { border-radius: 0; overflow: visible; max-width: 420px; }
.b-btn { margin-top: 1.4em; }
.cechy-l { list-style: none; padding: 0; margin: 1em 0 1.4em; display: grid; gap: 10px; }
.cechy-l li { background: var(--karta); border: 1px solid var(--linia); border-left: 4px solid var(--akcent); border-radius: var(--r-m); padding: 14px 16px; display: grid; gap: 2px; }
.cechy-l strong { font-family: var(--f-nag); color: var(--butelka); }
.cechy-l span { color: var(--tusz-2); }
.karta { background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r); padding: 20px; margin: 1.1em 0; display: grid; gap: 18px; }
.karta h3 { font-size: 1.2rem; }
.karta p { margin: 0; color: var(--tusz-2); }
.karta-img { border-radius: var(--r-m); overflow: hidden; }
.karta-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
@media (min-width: 700px) { .karta-z { grid-template-columns: 220px 1fr; align-items: start; } }

.gwiazdki { display: inline-flex; gap: 2px; color: #d99a00; }
.lupa { position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--butelka); display: grid; place-items: center; opacity: 0; transform: scale(.8); transition: .25s; }
a:hover > .lupa, a:focus-visible > .lupa { opacity: 1; transform: none; }

/* ---------- glify pór roku ---------- */
.glif { display: block; }
.glif-syg img { width: 100%; height: 100%; object-fit: contain; }
.glif-obrot { transform-origin: 100px 100px; animation: obrot 90s linear infinite; }
.glif-zima .glif-obrot { animation-duration: 140s; }
@keyframes obrot { to { transform: rotate(360deg); } }

/* ---------- nagłówek ---------- */
.nag { position: sticky; top: calc(-1 * var(--pas-h)); z-index: 50; background: var(--papier); }
.nag::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .9); z-index: -1; }
.nag-pas { display: none; background: var(--butelka); color: var(--papier); font-size: .84rem; }
.nag-pas a { color: var(--papier); text-decoration: none; display: inline-flex; align-items: center; gap: .45em; min-height: 36px; }
.nag-pas a:hover { color: var(--akcent); }
.nag-pas a[aria-current] { color: var(--akcent); }
.nag-pas-w { display: flex; align-items: center; gap: 26px; height: 36px; }
.nag-pory { display: inline-flex; gap: 6px; color: var(--akcent); }
.nag-pory .ik { width: 16px; height: 16px; }
.nag-opis { margin-right: auto; opacity: .8; }
@media (min-width: 900px) { :root { --pas-h: 36px; } .nag-pas { display: block; } }
.nag-w { display: flex; align-items: center; gap: 18px; height: 68px; }
@media (min-width: 900px) { .nag-w { height: 78px; } }
.nag-linia { height: 4px; background: linear-gradient(90deg, var(--zima) 0 33.3%, var(--rok) 33.3% 66.6%, var(--lato) 66.6%); position: relative; }
.nag-linia::after { content: ""; position: absolute; inset: 0; background: var(--akcent); opacity: .0; transition: opacity .5s; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--butelka); margin-right: auto; min-height: 44px; }
.logo-znak { width: 44px; height: 44px; object-fit: contain; }
.logo-t { display: grid; line-height: 1.05; }
.logo-t strong { font: 800 1.18rem/1 var(--f-nag); letter-spacing: -.02em; white-space: nowrap; }
.logo-t small { font: 600 .68rem/1.3 var(--f-tekst); letter-spacing: .14em; text-transform: uppercase; color: var(--tusz-2); margin-top: 3px; }
.nag-cta { display: none; white-space: nowrap; }
.burger {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; min-width: 46px; padding: 0 14px;
  border-radius: 999px; border: 2px solid var(--butelka); background: transparent; color: var(--butelka); font: 700 .9rem var(--f-nag); cursor: pointer;
}
.burger:hover { background: var(--butelka); color: var(--papier); }

.menu-lista { list-style: none; margin: 0; padding: 0; }
.menu-el {
  display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 12px; border: 0; background: none; cursor: pointer;
  font: 600 .95rem/1.2 var(--f-nag); color: var(--tusz); text-decoration: none; border-radius: 10px; position: relative; width: 100%; text-align: left;
}
.menu-el .ik { width: 18px; height: 18px; transition: transform .25s; }
.menu-el[aria-current], .menu-el.aktywny { color: var(--butelka); }
.menu-el[aria-current]::after, .menu-el.aktywny::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 3px; border-radius: 3px; background: var(--akcent); }
.pod-nag { display: flex; align-items: center; gap: .5em; font: 700 .78rem/1.3 var(--f-nag); letter-spacing: .14em; text-transform: uppercase; color: var(--rok-c); margin: 0 0 12px; }
.pod-pv { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pv-link { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 12px; text-decoration: none; color: var(--butelka); border-radius: var(--r-m); padding: 6px; transition: background-color .2s; }
.pv-link:hover, .pv-link[aria-current] { background: var(--rok-t); }
.pv-link-img { border-radius: 10px; overflow: hidden; aspect-ratio: 3/2; }
.pv-link-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.pv-link:hover img { transform: scale(1.06); }
.pv-link-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 700 .86rem/1.25 var(--f-nag); letter-spacing: .03em; }
.pod-pory { display: grid; gap: 12px; }
.pora-karta {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 14px; padding: 10px;
  border-radius: var(--r); background: var(--akcent-t); color: var(--butelka); text-decoration: none; transition: transform .25s, box-shadow .25s;
}
.pora-karta:hover { transform: translateY(-2px); box-shadow: var(--cien); color: var(--butelka); }
.pora-karta[aria-current] { outline: 2px solid var(--akcent-c); }
.pk-img { border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; position: relative; z-index: 1; }
.pk-img img { width: 100%; height: 100%; object-fit: cover; }
.pk-t { display: grid; gap: 4px; position: relative; z-index: 1; }
.pk-pora { display: inline-flex; align-items: center; gap: 6px; font: 700 .74rem/1.2 var(--f-nag); letter-spacing: .14em; text-transform: uppercase; color: var(--akcent-c); }
.pk-t strong { font: 800 1.2rem/1.1 var(--f-nag); letter-spacing: -.01em; }
.pk-btn { display: inline-flex; align-items: center; gap: 6px; font: 600 .85rem var(--f-tekst); color: var(--tusz-2); }
.pk-glif { position: absolute; right: -30px; top: -30px; width: 140px; height: 140px; color: var(--akcent-c); opacity: .14; }
.menu-dol { display: grid; gap: 10px; }
.menu-tel { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; font: 700 1.1rem var(--f-nag); color: var(--butelka); text-decoration: none; }
.menu-tyt { font: 800 1.1rem var(--f-nag); color: var(--butelka); }
.menu-zamknij { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 14px; border: 2px solid var(--linia); background: var(--karta); border-radius: 999px; font: 600 .9rem var(--f-nag); color: var(--butelka); cursor: pointer; }

/* menu — telefon i tablet (szuflada) */
@media (max-width: 1199.98px) {
  .menu {
    position: fixed; top: 0; right: 0; bottom: var(--ixw-h); width: min(430px, 92vw); z-index: 80;
    background: var(--papier); box-shadow: -20px 0 60px rgba(15, 44, 31, .3); overflow-y: auto; overscroll-behavior: contain;
    padding: 14px 18px 24px; display: flex; flex-direction: column; gap: 14px;
    transform: translateX(105%); visibility: hidden; transition: transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s .35s;
  }
  .menu-otwarte .menu { transform: none; visibility: visible; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
  .menu-tlo { position: fixed; inset: 0 0 var(--ixw-h); background: rgba(15, 44, 31, .45); z-index: 79; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
  .menu-otwarte .menu-tlo { opacity: 1; visibility: visible; transition: opacity .3s; }
  .menu-gora { display: flex; align-items: center; justify-content: space-between; padding-bottom: 6px; border-bottom: 1px solid var(--linia); }
  .menu-lista > li { border-bottom: 1px solid var(--linia); }
  .menu-el { font-size: 1.02rem; padding: 0 4px; }
  .menu-el[aria-current]::after, .menu-el.aktywny::after { left: 4px; right: auto; width: 28px; bottom: 4px; }
  .ma-pod > .menu-el .ik { margin-left: auto; }
  .ma-pod > .menu-el[aria-expanded="true"] .ik { transform: rotate(180deg); }
  .js .ma-pod > .pod { display: none; }
  .js .ma-pod.otwarte > .pod { display: block; }
  .js .ma-pod:not(.otwarte) > .pod img { display: none; }
  .pod { padding: 4px 0 14px; }
  /* bez JS: zwykła lista pod nagłówkiem */
  .nojs .menu { position: static; transform: none; visibility: visible; width: 100%; box-shadow: none; padding: 0; }
  .nojs .nag-w { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; }
  .nojs .burger, .nojs .menu-gora { display: none; }
}
/* menu — komputer */
@media (min-width: 1200px) {
  .burger, .menu-gora, .menu-dol, .menu-tylko-m, .menu-tlo { display: none; }
  .nag-cta { display: inline-flex; }
  .menu { order: 0; }
  .logo { margin-right: 18px; }
  .menu { margin-right: auto; }
  .menu-lista { display: flex; align-items: center; gap: 2px; }
  .menu-lista > li { position: relative; }
  .menu-el { width: auto; padding: 0 11px; font-size: .93rem; white-space: nowrap; }
  .menu-el:hover { color: var(--butelka); background: var(--papier-2); }
  .pod {
    position: absolute; top: calc(100% + 14px); left: -10px; z-index: 60; background: var(--karta); border-radius: 22px; padding: 20px;
    box-shadow: 0 30px 60px -20px rgba(15, 44, 31, .35), 0 0 0 1px var(--linia);
    opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .22s, transform .22s, visibility 0s .22s;
  }
  .pod::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
  .ma-pod:hover > .pod, .ma-pod:focus-within > .pod, .ma-pod.otwarte > .pod { opacity: 1; visibility: visible; transform: none; transition: opacity .22s, transform .22s; }
  .js .ma-pod.zamk > .pod { opacity: 0; visibility: hidden; }
  .ma-pod:hover > .menu-el .ik, .ma-pod.otwarte > .menu-el .ik { transform: rotate(180deg); }
  .ma-pod:not(.ma-pod-pory) > .pod { width: 640px; }
  .pod-pv { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .pv-link { grid-template-columns: 1fr; padding: 8px; }
  .pv-link-img { aspect-ratio: 4/3; }
  .ma-pod-pory > .pod { width: 620px; left: -120px; }
  .pod-pory { grid-template-columns: 1fr 1fr; }
  .pora-karta { grid-template-columns: 1fr; padding: 12px 12px 16px; }
}

/* ---------- pierwszy ekran: pory roku ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; color: var(--butelka); }
.hero-foto { position: absolute; inset: 0; z-index: -2; }
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 100%; transition: filter 1.1s ease; }
:is([data-pora="lato"], .pora-lato) .hero-img { filter: saturate(1.25) sepia(.18) brightness(1.03); }
:is([data-pora="zima"], .pora-zima) .hero-img { filter: saturate(.25) brightness(1.1) contrast(.95) hue-rotate(-10deg); }
:is([data-pora="rok"], .pora-rok) .hero-img { filter: saturate(1.05); }
.hero-ton { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.ton-lato { background: radial-gradient(120% 90% at 85% 0%, rgba(255, 196, 40, .55), transparent 60%), linear-gradient(180deg, rgba(255, 214, 120, .25), transparent); mix-blend-mode: multiply; }
.ton-zima { background: radial-gradient(120% 90% at 85% 0%, rgba(166, 216, 234, .85), transparent 65%), linear-gradient(180deg, rgba(200, 230, 245, .55), rgba(120, 180, 210, .25)); mix-blend-mode: normal; }
.ton-rok { background: linear-gradient(180deg, rgba(138, 195, 71, .12), transparent); }
:is([data-pora="lato"], .pora-lato) .ton-lato, :is([data-pora="zima"], .pora-zima) .ton-zima, :is([data-pora="rok"], .pora-rok) .ton-rok { opacity: 1; }
.hero-mgla { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .78) 38%, rgba(255, 255, 255, .25) 62%, rgba(255, 255, 255, 0) 78%); }
.hero-glify { position: absolute; z-index: -1; right: 5vw; top: 10px; width: min(480px, 60vw); aspect-ratio: 1; pointer-events: none; }
.hg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: scale(.85) rotate(-20deg); transition: opacity 1s ease, transform 1.2s ease; }
.hg.glif-lato { color: #d48f00; }
.hg.glif-zima { color: #2a7fa1; }
.hg.glif-rok { color: var(--rok-c); }
/* Sygnet z logo (liść z wtyczką) zamiast słońca — prośba klienta 17.10 */
.hero-sygnet { position: absolute; z-index: -1; right: 6vw; top: 24px; width: min(400px, 42vw); aspect-ratio: 1; pointer-events: none; opacity: .95;
  filter: drop-shadow(0 18px 30px rgba(13, 96, 2, .22)); }
.hero-sygnet img { width: 100%; height: 100%; object-fit: contain; }
@keyframes sygnet { 50% { transform: translateY(-12px) rotate(-3deg); } }
@media (min-width: 1280px) and (max-width: 1499px) { .hero-sygnet { width: 230px; right: 3vw; top: 40px; } }
@media (min-width: 761px) and (max-width: 1279px) { .hero-sygnet { width: 120px; right: 24px; top: 96px; } }
@media (max-width: 760px) { .hero-sygnet { width: 64px; right: 16px; top: 14px; } }
.wstep-g.wstep-syg { opacity: 1; } .wstep-syg img { width: 100%; height: 100%; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .hero-sygnet { animation: none; } }
:is([data-pora="lato"], .pora-lato) .hg.glif-lato, :is([data-pora="zima"], .pora-zima) .hg.glif-zima, :is([data-pora="rok"], .pora-rok) .hg.glif-rok { opacity: .42; transform: none; }
.hero-w { position: relative; padding-top: clamp(28px, 6vh, 64px); padding-bottom: clamp(110px, 34vw, 300px); display: flex; flex-direction: column; }
.pory { margin-top: 36px; }
@media (min-width: 1100px) { .hero-w { min-height: calc(100svh - 118px - var(--ixw-h)); padding-bottom: 32px; } .pory { margin-top: auto; } }
.hero-nad { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; font: 700 .76rem/1.3 var(--f-nag); letter-spacing: .16em; text-transform: uppercase; margin: 0 0 18px; color: var(--butelka-2); }
.hero-nad-l { width: 40px; height: 2px; background: var(--akcent-c); transition: background-color .8s; }
.hero-h1 { font-size: clamp(2.55rem, 8.6vw, 7.4rem); font-weight: 800; line-height: .94; letter-spacing: -.045em; max-width: 13ch; margin: 0 0 26px; color: var(--butelka); text-wrap: balance; }
.hero-h1 em { font-style: italic; font-weight: 700; color: var(--akcent-c); transition: color .8s; position: relative; }
.hero-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-bottom: 28px; }
.hero-ocena { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 0 6px; font-size: .9rem; color: var(--tusz); }
.hero-ocena strong { font: 800 1.05rem var(--f-nag); }
.hero-ocena > span:last-child { color: var(--tusz-2); }
.pory { display: grid; gap: 12px; background: rgba(255, 253, 248, .9); border-radius: 24px; padding: 10px; box-shadow: 0 24px 60px -30px rgba(15, 44, 31, .55); border: 1px solid rgba(255, 255, 255, .7); }
.pory-przel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--papier-2); border-radius: 18px; padding: 5px; }
.pory-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 8px 6px;
  border-radius: 14px; color: var(--tusz-2); text-decoration: none; font: 700 .86rem/1.1 var(--f-nag); transition: background-color .35s, color .35s, box-shadow .35s;
}
.pory-btn .ik { width: 26px; height: 26px; transition: transform .6s ease; }
.pory-btn:hover { color: var(--butelka); background: rgba(255, 255, 255, .6); }
.pory-btn:hover .ik { transform: rotate(45deg); }
.pory-btn[aria-current] { background: var(--karta); color: var(--butelka); box-shadow: 0 6px 18px -10px rgba(15, 44, 31, .5); }
.pory-btn[data-pora-btn="lato"][aria-current] .ik { color: #c68400; }
.pory-btn[data-pora-btn="zima"][aria-current] .ik { color: var(--zima-c); }
.pory-btn[data-pora-btn="rok"][aria-current] .ik { color: var(--rok-c); }
.pory-usl { min-height: 0; }
.pory-u { display: grid; grid-template-columns: 64px 1fr; gap: 12px 14px; align-items: center; padding: 4px 6px 6px; animation: wjazd .6s ease both; }
.pory-u[hidden] { display: none; }
@keyframes wjazd { from { opacity: 0; transform: translateY(8px); } }
.pory-kolo { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px var(--akcent); transition: box-shadow .6s; }
.pory-kolo img { width: 100%; height: 100%; object-fit: cover; }
.pory-u-h { font: 800 1.05rem/1.1 var(--f-nag); color: var(--butelka); margin: 0 0 4px; letter-spacing: .02em; }
.pory-u-p { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--tusz-2); }
.pory-u .btn { grid-column: 1 / -1; justify-self: start; background: var(--akcent); border-color: var(--akcent); color: var(--tusz); }
.pory-u .btn:hover { background: var(--butelka); border-color: var(--butelka); color: var(--papier); }
@media (min-width: 640px) {
  .pory-u { grid-template-columns: 76px 1fr auto; }
  .pory-kolo { width: 76px; height: 76px; }
  .pory-u .btn { grid-column: auto; }
  .pory-btn { flex-direction: row; gap: 10px; min-height: 64px; font-size: .95rem; }
}
@media (min-width: 1100px) {
  .pory { grid-template-columns: minmax(330px, 400px) 1fr; align-items: center; padding: 10px 12px 10px 10px; }
  .pory-btn { min-height: 72px; }
}

/* ---------- wstęp ---------- */
.wstep { padding: clamp(56px, 9vw, 120px) 0 clamp(20px, 4vw, 40px); }
.wstep-w { display: grid; gap: 24px; align-items: center; }
.wstep-g { width: 120px; height: 120px; color: var(--rok-c); opacity: .5; }
.wstep-t { font: 500 clamp(1.15rem, 1.9vw, 1.55rem)/1.5 var(--f-nag); letter-spacing: -.01em; color: var(--butelka); max-width: 60ch; margin: 0; }
@media (min-width: 900px) { .wstep-w { grid-template-columns: 220px 1fr; gap: 60px; } .wstep-g { width: 220px; height: 220px; } }

/* ---------- oś roku ---------- */
.os { padding: clamp(40px, 7vw, 90px) 0 clamp(40px, 6vw, 80px); }
.os-nag { display: grid; gap: 14px 60px; margin-bottom: 40px; }
@media (min-width: 900px) { .os-nag { grid-template-columns: 1.1fr 1fr; align-items: end; } }
.os-lead { color: var(--tusz-2); margin: 0; max-width: 56ch; }
.os-tabela { background: var(--karta); border: 1px solid var(--linia); border-radius: 26px; padding: 18px 16px 22px; display: grid; gap: 14px; box-shadow: var(--cien); }
.os-wiersz { display: grid; gap: 8px; }
@media (min-width: 760px) { .os-wiersz { grid-template-columns: 210px 1fr; align-items: center; gap: 18px; } .os-tabela { padding: 22px 28px 28px; } }
.os-tor { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); min-height: 30px; align-items: center; }
.os-wiersz:not(.os-skala) .os-tor { background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 12 - 1px), var(--linia) calc(100% / 12 - 1px) calc(100% / 12)); border-radius: 8px; min-height: 38px; }
.os-m { text-align: center; font: 700 .72rem var(--f-nag); color: var(--tusz-2); letter-spacing: .06em; text-transform: uppercase; border-left: 1px solid var(--linia); padding: 4px 0; }
.os-m:first-child { border-left: 0; }
.os-m-d { display: none; }
@media (min-width: 760px) { .os-m-d { display: inline; } .os-m-k { display: none; } }
.os-teraz { position: absolute; top: 100%; width: 2px; height: 400px; background: linear-gradient(var(--butelka), transparent); opacity: .35; pointer-events: none; }
.os-teraz::before { content: ""; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--butelka); }
.os-tabela { position: relative; overflow: hidden; }
.os-et { display: inline-flex; align-items: center; gap: 10px; font: 800 .86rem/1.2 var(--f-nag); letter-spacing: .05em; color: var(--butelka); }
.os-et .ik { width: 26px; height: 26px; color: var(--akcent-c); }
.os-pas { height: 22px; border-radius: 999px; background: var(--akcent); grid-row: 1; transform-origin: left; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); margin: 0 2px; }
:is([data-pora="rok"], .pora-rok) .os-pas { background: linear-gradient(90deg, rgba(138, 195, 71, .45), var(--rok) 35%, var(--rok) 65%, rgba(138, 195, 71, .45)); }
:is([data-pora="lato"], .pora-lato) .os-pas { background: linear-gradient(90deg, rgba(244, 184, 28, .5), var(--lato) 25% 75%, rgba(244, 184, 28, .5)); }
.js [data-r]:not(.widac) .os-pas { transform: scaleX(0); }
.os-karty { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 16px; }
@media (min-width: 900px) { .os-karty { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.os-karta { position: relative; background: var(--akcent-t); border-radius: 26px; padding: 22px 22px 18px; margin-top: 46px; display: flex; flex-direction: column; align-items: flex-start; transition: transform .3s, box-shadow .3s; }
.os-karta:hover { transform: translateY(-4px); box-shadow: var(--cien); }
.os-karta-pora { display: inline-flex; align-items: center; gap: 8px; font: 700 .74rem/1.2 var(--f-nag); letter-spacing: .14em; text-transform: uppercase; color: var(--akcent-c); margin: 0 0 54px; }
.os-karta-pora .ik { width: 22px; height: 22px; }
.os-kolo { position: absolute; right: 18px; top: -46px; width: 124px; height: 124px; border-radius: 50%; overflow: hidden; background: var(--karta); box-shadow: 0 14px 30px -16px rgba(15, 44, 31, .55); }
.os-kolo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.os-karta:hover .os-kolo img { transform: scale(1.06) rotate(-3deg); }
.os-karta h3 { font-size: 1.45rem; font-weight: 800; letter-spacing: .01em; }
.os-karta p { color: var(--tusz); flex: 1; }
@media (max-width: 899.98px) { .os-kolo { width: 100px; height: 100px; top: -36px; } .os-karta-pora { margin-bottom: 40px; } }

/* ---------- fotowoltaika ---------- */
.pv { padding: clamp(56px, 9vw, 120px) 0; background: linear-gradient(180deg, var(--papier) 0, var(--rok-t) 100%); }
.pv-nag { margin-bottom: 32px; }
.pv-kafle { list-style: none; padding: 0; margin: 0 0 clamp(36px, 6vw, 70px); display: grid; gap: 14px; }
@media (min-width: 760px) { .pv-kafle { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.pv-kafel { position: relative; display: block; border-radius: 26px; overflow: hidden; aspect-ratio: 4/3; color: #fff; text-decoration: none; isolation: isolate; }
@media (min-width: 760px) { .pv-kafel { aspect-ratio: 3/4; } }
.pv-kafel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.pv-kafel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 45%, rgba(15, 44, 31, .85)); }
.pv-kafel:hover img { transform: scale(1.07); }
.pv-kafel-t { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 800 clamp(1.2rem, 2.2vw, 1.6rem)/1.05 var(--f-nag); letter-spacing: .01em; }
.pv-kafel-t .ik { width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: var(--rok); color: var(--tusz); transition: transform .3s; }
.pv-kafel:hover .ik { transform: rotate(-45deg); }
.pv-kafel[aria-current] { box-shadow: 0 0 0 4px var(--rok); }
.pv-kafel[aria-current] .pv-kafel-t .ik { background: var(--papier); }
.pv-tekst { display: grid; gap: 30px; align-items: center; }
@media (min-width: 900px) { .pv-tekst-g { grid-template-columns: 0.8fr 1.2fr; gap: 60px; } }
.pv-grafika { max-width: min(380px, 60vw); margin: 0 auto; animation: dryf 9s ease-in-out infinite; }
@keyframes dryf { 50% { transform: translateY(-10px) rotate(-1deg); } }
.pv-wezw { font: 800 clamp(1.3rem, 2.4vw, 1.8rem)/1.2 var(--f-nag); color: var(--butelka); margin: 1.2em 0 .4em; letter-spacing: -.015em; }
.pv-pod { color: var(--tusz-2); }
.pv-btn { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- realizacje: oś zdjęć ---------- */
.real { padding: clamp(56px, 9vw, 110px) 0; overflow: hidden; }
.real-nag { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 30px; }
.real-pod { color: var(--tusz-2); margin: 0; }
.real-ster { display: flex; gap: 10px; }
.okr { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--butelka); background: transparent; color: var(--butelka); display: grid; place-items: center; cursor: pointer; transition: background-color .2s, color .2s; }
.okr:hover { background: var(--butelka); color: var(--papier); }
.okr:disabled { opacity: .35; cursor: default; background: transparent; color: var(--butelka); }
.real-os { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 0 8px; outline-offset: -4px; }
.real-os::-webkit-scrollbar { display: none; }
.real-lista { list-style: none; margin: 0; padding: 0 var(--gut); display: flex; gap: 18px; width: max-content; position: relative; }
@media (min-width: 1304px) { .real-lista { padding-left: calc((100vw - var(--szer)) / 2); padding-right: calc((100vw - var(--szer)) / 2); } }
.real-lista::after { content: ""; position: absolute; left: 0; right: 0; bottom: 52px; height: 2px; background: repeating-linear-gradient(90deg, var(--linia) 0 10px, transparent 10px 16px); z-index: -1; }
.real-el { scroll-snap-align: center; width: min(72vw, 290px); flex: none; }
.real-el figure { margin: 0; }
.real-el img { width: 100%; aspect-ratio: 889/1024; object-fit: cover; border-radius: 22px; transition: transform .6s, box-shadow .4s; }
.real-el:hover img { transform: translateY(-6px); box-shadow: var(--cien); }
.real-el figcaption { display: flex; align-items: center; gap: 10px; padding: 18px 2px 0; min-height: 52px; }
.real-kropka { width: 14px; height: 14px; border-radius: 50%; background: var(--papier); border: 3px solid var(--akcent-c); flex: none; }
.real-miejsce { font: 800 1.08rem/1.15 var(--f-nag); color: var(--butelka); }
.real-moc { margin-left: auto; font: 700 .82rem var(--f-nag); background: var(--akcent); color: var(--tusz); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.real-dol { margin-top: 26px; }

/* ---------- certyfikat (strona główna) ---------- */
.cert { padding: clamp(56px, 9vw, 110px) 0; background: var(--karta); border-block: 1px solid var(--linia); }
.cert-w { display: grid; gap: 40px; }
@media (min-width: 960px) { .cert-w { grid-template-columns: 400px 1fr; gap: 70px; align-items: start; } .cert-skan { position: sticky; top: 110px; } }
.cert-skan-img { position: relative; display: block; border-radius: 20px; background: var(--rok-t); padding: 22px; transition: transform .3s; }
.cert-skan-img:hover { transform: rotate(-1deg) scale(1.01); }
.cert-skan-img img { width: 100%; max-height: 520px; object-fit: contain; border-radius: 6px; box-shadow: 0 14px 30px -18px rgba(15, 44, 31, .6); }
.cert-link { display: grid; gap: 4px; margin-top: 16px; }
.cert-link > span { font-size: .85rem; color: var(--tusz-2); }
.cert-jest { font: 700 .78rem var(--f-nag); letter-spacing: .14em; text-transform: uppercase; color: var(--rok-c); margin-bottom: 10px; }
.cert-l1 { list-style: none; padding: 0; margin: 0 0 1.4em; display: grid; gap: 10px; }
.cert-l1 li { display: flex; align-items: center; gap: 14px; font: 800 clamp(1.05rem, 1.8vw, 1.3rem)/1.2 var(--f-nag); color: var(--butelka); padding: 14px 16px; background: var(--rok-t); border-radius: 14px; }
.cert-l1 .ik { width: 30px; height: 30px; color: var(--rok-c); }
@media (min-width: 700px) { .lista-2k { grid-template-columns: 1fr 1fr; } }
.marki { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; }
.marki li { display: flex; align-items: center; }
.marka-img { height: 44px; width: auto; max-width: 140px; object-fit: contain; filter: grayscale(1) contrast(.9); opacity: .78; transition: filter .3s, opacity .3s; }
.marki li:hover .marka-img { filter: none; opacity: 1; }
.marki-pas { margin-top: 50px; padding-top: 30px; border-top: 1px solid var(--linia); justify-content: space-between; }
.marki-male { margin: 1.4em 0; gap: 12px 24px; }
.marki-male .marka-img { height: 36px; }
/* logotypy partnerów wstawione blokiem „Obraz” (z podpisami ze starej strony) — kafelki bez podpisów */
.marki > * { margin: 0 !important; }
.marki figure { display: flex; align-items: center; justify-content: center; }
.marki figcaption { display: none; }
.marki figure img { height: 44px; width: auto; max-width: 140px; object-fit: contain; mix-blend-mode: multiply; filter: grayscale(1) brightness(1.12) contrast(1.25); opacity: .8; transition: filter .3s, opacity .3s; }
.marki figure:hover img { filter: brightness(1.06) contrast(1.1); opacity: 1; }
@media (max-width: 699.98px) {
  .marki-pas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .marki-pas > * { background: var(--karta); border: 1px solid var(--linia); border-radius: 16px; padding: 14px 10px; min-height: 72px; }
  .marki-pas figure img { height: 34px; max-width: 100%; }
}

/* ---------- sekcje tekstowe ---------- */
.tekst { padding: clamp(46px, 7vw, 90px) 0; position: relative; overflow: hidden; }
.tekst-pora { background: var(--akcent-t); }
.tekst-glif { position: absolute; width: 420px; height: 420px; right: -120px; top: -120px; color: var(--akcent-c); opacity: .09; }
.tekst-w { display: grid; gap: 32px; align-items: center; position: relative; }
.tekst-bez .tekst-w { max-width: 860px; }
.tekst-t > :last-child { margin-bottom: 0; }
.tekst-img { margin: 0; border-radius: 26px; overflow: hidden; }
.tekst-img img { width: 100%; }
.tekst-g .tekst-img { border-radius: 0; overflow: visible; width: 100%; max-width: 460px; justify-self: center; }
.tekst-g .tekst-img img { animation: dryf 10s ease-in-out infinite; }
@media (min-width: 900px) {
  .tekst-z .tekst-w { grid-template-columns: 1fr 1.1fr; gap: 70px; }
  .tekst-odwr .tekst-img { order: 2; }
}

/* ---------- pas zalet ---------- */
.pas { padding: 30px 0; background: var(--butelka); color: var(--papier); }
.pas-l { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
@media (min-width: 760px) { .pas-l { grid-template-columns: repeat(4, 1fr); } }
.pas-l li { display: flex; align-items: center; gap: 12px; font: 700 .95rem/1.2 var(--f-nag); }
.pas-l .ik { width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: rgba(138, 195, 71, .18); color: var(--rok); }

/* ---------- kroki ---------- */
.kroki { padding: clamp(50px, 8vw, 100px) 0; }
.kroki-l { list-style: none; padding: 0; margin: 0; display: grid; gap: 26px; position: relative; }
@media (min-width: 900px) {
  .kroki-l { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .kroki-l::before { content: ""; position: absolute; left: 30px; right: 30px; top: 30px; height: 2px; background: linear-gradient(90deg, var(--zima), var(--rok), var(--lato)); }
}
.krok-el { position: relative; }
.krok-pkt { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--karta); border: 2px solid var(--linia); color: var(--butelka); margin-bottom: 16px; position: relative; }
.krok-pkt .ik { width: 28px; height: 28px; }
.krok-el:nth-child(1) .krok-pkt { border-color: var(--zima); color: var(--zima-c); }
.krok-el:nth-child(2) .krok-pkt { border-color: var(--rok); color: var(--rok-c); }
.krok-el:nth-child(3) .krok-pkt { border-color: var(--lato); color: var(--lato-c); }
.krok-nr2 { font: 700 .8rem var(--f-nag); color: var(--tusz-2); margin: 0 0 4px; letter-spacing: .1em; }
.krok-el h3 { font-size: 1.35rem; }
.krok-el p { color: var(--tusz-2); }

/* ---------- jakość ---------- */
.jak { position: relative; overflow: hidden; background: var(--butelka); color: var(--papier); padding: clamp(56px, 9vw, 110px) 0; }
.jak .h-sek { color: var(--papier); }
.jak .nad { color: var(--rok); }
.jak-glif { position: absolute; width: 640px; height: 640px; right: -200px; bottom: -260px; color: var(--rok); opacity: .12; }
.jak-w { position: relative; display: grid; gap: 34px; }
.jak-oc { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; padding: 26px; border-radius: 26px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.jak-tarcza { width: 60px; height: 60px; color: var(--rok); }
.jak-bez { font: 700 .78rem var(--f-nag); letter-spacing: .14em; text-transform: uppercase; color: var(--rok); margin-bottom: 8px; }
.jak-oc-t { font: 800 clamp(1.3rem, 2.8vw, 2.1rem)/1.2 var(--f-nag); letter-spacing: -.015em; margin-bottom: 10px; }
.jak-oc p:last-child { margin: 0; opacity: .85; }
.jak-cechy { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 900px) { .jak-w { grid-template-columns: 1fr 1fr; column-gap: 70px; } .jak-nag { grid-column: 1 / -1; } .jak-cechy { align-content: center; } }
.jak-cechy li { display: grid; gap: 12px; padding: 20px; border-radius: 20px; background: rgba(255, 255, 255, .06); font: 700 1.02rem/1.2 var(--f-nag); transition: background-color .3s, transform .3s; }
.jak-cechy li:hover { background: rgba(138, 195, 71, .18); transform: translateY(-3px); }
.jak-cechy .ik { width: 32px; height: 32px; color: var(--rok); }

/* ---------- FAQ ---------- */
.faq-sek { padding: clamp(50px, 8vw, 100px) 0; }
.faq-w { display: grid; gap: 30px; }
@media (min-width: 960px) { .faq-w { grid-template-columns: 1fr 1.5fr; gap: 70px; align-items: start; } .faq-nag { position: sticky; top: 110px; } }
.faq { display: grid; gap: 10px; }
.faq-el { background: var(--karta); border: 1px solid var(--linia); border-radius: 18px; transition: border-color .25s, box-shadow .25s; }
.faq-el[open] { border-color: var(--akcent); box-shadow: var(--cien); }
.faq-el summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 20px; cursor: pointer; font: 700 1.04rem/1.3 var(--f-nag); color: var(--butelka); }
.faq-el summary::-webkit-details-marker { display: none; }
.faq-ik { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--akcent-t); color: var(--akcent-c); transition: transform .3s; }
.faq-el[open] .faq-ik { transform: rotate(180deg); }
.faq-o { padding: 0 20px 18px; color: var(--tusz-2); }
.faq-o p { margin: 0; }

/* ---------- nagłówek podstrony ---------- */
.ph { position: relative; overflow: hidden; background: var(--akcent-t); padding: clamp(40px, 7vw, 90px) 0 clamp(70px, 10vw, 130px); isolation: isolate; }
.ph::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--akcent); }
.ph-glif { position: absolute; right: -90px; top: -110px; width: clamp(280px, 40vw, 560px); height: auto; aspect-ratio: 1; color: var(--akcent-c); opacity: .14; z-index: -1; }
.ph-w { position: relative; }
.ph-pora { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font: 700 .78rem/1.2 var(--f-nag); letter-spacing: .14em; text-transform: uppercase; color: var(--akcent-c); margin: 0 0 20px; }
.ph-pora > .ik { width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: var(--karta); color: var(--akcent-c); }
.ph-nad { padding-left: 14px; border-left: 2px solid currentColor; }
.ph-h1 { font-size: clamp(2.3rem, 6.6vw, 5.4rem); font-weight: 800; line-height: .98; letter-spacing: -.04em; max-width: 18ch; margin: 0; overflow-wrap: anywhere; hyphens: auto; }
.ph-h2 { font: 500 clamp(1.1rem, 2vw, 1.45rem)/1.35 var(--f-nag); color: var(--tusz); margin: 18px 0 0; max-width: 40ch; }
.ph-prosty { padding-bottom: clamp(50px, 7vw, 90px); }
.ph-tlo { color: #fff; background: var(--butelka); }
.ph-tlo .ph-h1, .ph-tlo .ph-pora { color: #fff; }
.ph-foto { position: absolute; inset: 0; z-index: -2; }
.ph-foto img { width: 100%; height: 100%; object-fit: cover; }
.ph-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15, 44, 31, .88), rgba(15, 44, 31, .45)); }
.ph-dalej { padding-bottom: clamp(40px, 6vw, 80px); }
.ph-dalej-w { display: grid; gap: 28px; }
.ph-img { margin: calc(-1 * clamp(50px, 8vw, 100px)) 0 0; border-radius: 26px; overflow: hidden; box-shadow: var(--cien); position: relative; z-index: 2; background: var(--karta); }
.ph-img img { width: 100%; max-height: 560px; object-fit: cover; }
.ph-img-logo { background: var(--karta); padding: clamp(20px, 3vw, 40px); display: grid; place-items: center; width: 100%; max-width: 560px; }
.ph-img-logo img { max-height: 380px; width: auto; object-fit: contain; }
.ph-logo .ph-img-logo { background: radial-gradient(circle at 50% 45%, var(--karta) 40%, var(--akcent-t)); }
.ph-logo .ph-img-logo { box-shadow: var(--cien); }
.ph-tekst { padding-top: 6px; }
.ph-tekst > p:first-child { font-size: 1.1em; font-weight: 500; }
.ph-dalej-bez .ph-tekst { padding-top: 40px; max-width: 760px; }
.ph-btn { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.4em; }
@media (min-width: 900px) {
  .ph-dalej-w { grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: start; }
  .ph-dalej-bez .ph-dalej-w { grid-template-columns: 1fr; }
  .ph-tekst { padding-top: 40px; }
  .ph-z .ph-w { padding-right: 0; }
}

/* ---------- galeria (pompy) ---------- */
.gal { padding: clamp(50px, 8vw, 100px) 0; background: linear-gradient(180deg, var(--zima-t), var(--papier)); }
.gal-nag { margin-bottom: 30px; }
.gal-nag p:last-child { color: var(--tusz-2); }
.gal-l { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 900px) { .gal-l { grid-template-columns: repeat(5, 1fr); gap: 16px; } .gal-l li:nth-child(5n+2), .gal-l li:nth-child(5n+4) { transform: translateY(26px); } }
.gal-l a { position: relative; display: block; border-radius: 18px; overflow: hidden; color: #fff; text-decoration: none; }
.gal-l img { width: 100%; aspect-ratio: 3/4; object-fit: cover; transition: transform .6s; }
.gal-l a:hover img { transform: scale(1.06); }
.gal-pod { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 12px; background: linear-gradient(transparent, rgba(10, 40, 55, .85)); display: grid; font-size: .8rem; line-height: 1.3; }
.gal-pod strong { font: 700 .9rem var(--f-nag); }
.gal-l .lupa { top: 10px; bottom: auto; }
.gal-dol { margin-top: 50px; }

/* ---------- realizacje: galeria z filtrami ---------- */
.rg { padding: 0 0 clamp(50px, 8vw, 100px); }
.rg-filtry { position: sticky; top: calc(74px + 0px); z-index: 20; margin: -34px 0 28px; padding: 12px; background: var(--karta); border-radius: 22px; box-shadow: var(--cien); border: 1px solid var(--linia); }
@media (min-width: 900px) { .rg-filtry { top: 90px; } }
.rg-et { font: 700 .74rem var(--f-nag); letter-spacing: .14em; text-transform: uppercase; color: var(--rok-c); margin: 0 0 8px 6px; }
.rg-f-l { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.rg-f-l::-webkit-scrollbar { display: none; }
.rg-f { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--linia); background: var(--papier); color: var(--butelka); font: 700 .86rem var(--f-nag); cursor: pointer; transition: .2s; }
.rg-f span { font-size: .74rem; background: var(--papier-2); border-radius: 999px; padding: 2px 8px; color: var(--tusz-2); }
.rg-f:hover { border-color: var(--rok); }
.rg-f[aria-pressed="true"] { background: var(--butelka); border-color: var(--butelka); color: var(--papier); }
.rg-f[aria-pressed="true"] span { background: var(--rok); color: var(--tusz); }
.rg-f:disabled { opacity: .45; cursor: default; }
.rg-l { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; grid-auto-flow: dense; }
@media (min-width: 760px) { .rg-l { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 1100px) { .rg-l { grid-template-columns: repeat(4, 1fr); } }
.rg-el a { position: relative; display: block; aspect-ratio: 4/3; border-radius: 18px; overflow: hidden; color: #fff; text-decoration: none; background: var(--papier-2); }
.rg-el img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.rg-pion { grid-row: span 2; }
.rg-pion a { aspect-ratio: auto; height: 100%; min-height: 200px; }
.rg-el a:hover img { transform: scale(1.05); }
.rg-pod { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 12px 12px; background: linear-gradient(transparent, rgba(15, 44, 31, .88)); display: grid; gap: 2px; line-height: 1.25; }
.rg-kat { font: 700 .66rem var(--f-nag); letter-spacing: .12em; text-transform: uppercase; color: var(--rok); }
.rg-pod strong { font: 700 .88rem var(--f-nag); }
.rg-el.ukryty { display: none; }
.rg-el.wchodzi { animation: wjazd .5s ease both; }

/* ---------- certyfikaty ---------- */
.certy { padding: clamp(40px, 6vw, 80px) 0 clamp(50px, 8vw, 100px); }
.certy-l { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 760px) { .certy-l { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 1100px) { .certy-l { grid-template-columns: repeat(4, 1fr); } }
.certy-l a { position: relative; display: grid; gap: 8px; padding: 12px; border-radius: 18px; background: var(--karta); border: 1px solid var(--linia); text-decoration: none; color: var(--tusz-2); transition: transform .3s, box-shadow .3s; }
.certy-l a:hover { transform: translateY(-4px); box-shadow: var(--cien); }
.certy-img { aspect-ratio: 3/4; background: var(--papier-2); border-radius: 10px; display: grid; place-items: center; overflow: hidden; }
.certy-img img { width: 100%; height: 100%; object-fit: contain; }
.certy-nr { font: 700 .76rem var(--f-nag); letter-spacing: .08em; }

/* ---------- promocje ---------- */
.promo { padding: clamp(46px, 7vw, 90px) 0; }
.promo + .promo { padding-top: 0; }
.promo-nag { margin-bottom: 26px; display: grid; gap: 4px; }
.promo-pod { font: 700 .82rem var(--f-nag); letter-spacing: .12em; text-transform: uppercase; color: var(--rok-c); margin: 0; }
.promo-pod2 { color: var(--tusz-2); margin: 0; }
.promo-l { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
@media (min-width: 700px) { .promo-l { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) {
  .promo-l { grid-template-columns: repeat(6, 1fr); gap: 22px; }
  .promo-k { grid-column: span 2; }
  .promo-k:nth-child(-n+2) { grid-column: span 3; flex-direction: row; }
  .promo-k:nth-child(-n+2) .promo-img { aspect-ratio: auto; width: 46%; flex: none; }
  .promo-k:nth-child(-n+2) .promo-cena-x { font-size: 2.6rem; }
}
.promo-k { display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; background: var(--karta); border: 1px solid var(--linia); transition: transform .3s, box-shadow .3s; }
.promo-k:hover { transform: translateY(-4px); box-shadow: var(--cien); }
.promo-img { aspect-ratio: 16/10; overflow: hidden; background: var(--rok-t); }
.promo-img img { width: 100%; height: 100%; object-fit: cover; }
.promo-img-logo { display: grid; place-items: center; padding: 26px; }
.promo-img-logo img { width: auto; height: auto; max-height: 100%; object-fit: contain; }
.promo-t { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.promo-t h3 { font-size: 1.35rem; margin: 0; }
.promo-cechy { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: .95rem; }
.promo-cechy li { display: flex; gap: 8px; }
.promo-cechy .ik { color: var(--rok-c); margin-top: .15em; }
.promo-cena { margin-top: auto; padding: 14px 16px; border-radius: 16px; background: var(--rok-t); }
.promo-cena p { margin: 0; }
.promo-cena-et { font-size: .8rem; color: var(--tusz-2); }
.promo-cena-x { font: 800 clamp(1.8rem, 3vw, 2.3rem)/1.1 var(--f-nag); color: var(--butelka); letter-spacing: -.03em; }
.promo-pop { font-size: .84rem; color: var(--tusz-2); text-decoration: line-through; text-decoration-color: rgba(122, 82, 0, .6); }
.promo-t .btn { align-self: flex-start; }

/* ---------- oferta ---------- */
.of { position: relative; overflow: hidden; background: var(--akcent-t); padding: 24px 0 clamp(50px, 8vw, 100px); isolation: isolate; }
.okruszki ol { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: .86rem; color: var(--tusz-2); }
.okruszki li + li::before { content: "/"; margin: 0 6px; opacity: .6; }
.okruszki a { color: var(--tusz-2); display: inline-flex; min-height: 44px; align-items: center; }
.okruszki span { display: inline-flex; min-height: 44px; align-items: center; }
.of-w { display: grid; gap: 30px; }
@media (min-width: 960px) { .of-w { grid-template-columns: 1fr 1.15fr; gap: 60px; align-items: start; } .of-img { position: sticky; top: 110px; } }
.of-img { position: relative; margin: 0; border-radius: 26px; overflow: hidden; box-shadow: var(--cien); }
.of-img img { width: 100%; }
.of-znak { position: absolute; top: 18px; left: 18px; background: var(--lato); color: var(--tusz); font: 800 .9rem var(--f-nag); padding: 8px 14px; border-radius: 999px; }
.of-t .ph-h1 { font-size: clamp(2rem, 4.6vw, 3.6rem); margin-bottom: 18px; }
.of-uwaga { color: var(--tusz-2); font-size: .92rem; }
.of-pyt { padding: 18px 20px; border-radius: 18px; background: var(--karta); margin-bottom: 20px; }
.of-pyt p { margin: 0 0 6px; font-weight: 600; }
.of-tel { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 800 1.1rem var(--f-nag); color: var(--butelka); text-decoration: none; }

/* ---------- formularze ---------- */
.f { display: grid; gap: 18px; }
.f h2 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); margin: 0; }
.f-opis { margin: 0; color: var(--tusz-2); }
.pola { display: grid; gap: 14px; }
@media (min-width: 640px) { .pola { grid-template-columns: 1fr 1fr; } .pole-szer { grid-column: 1 / -1; } }
.pole { display: grid; gap: 6px; margin: 0; min-width: 0; }
.pole label, .pole legend, .pole-et { font: 600 .9rem/1.3 var(--f-tekst); color: var(--tusz); padding: 0; margin: 0; }
.wym { color: #a23b0a; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--linia); background: var(--karta); color: var(--tusz);
  font: 400 1rem/1.4 var(--f-tekst); transition: border-color .2s, box-shadow .2s; appearance: none;
}
textarea { resize: vertical; min-height: 120px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--butelka-2); box-shadow: 0 0 0 4px var(--akcent-t); }
input::placeholder, textarea::placeholder { color: #6b746e; }
.wybor { position: relative; }
.wybor select { padding-right: 44px; cursor: pointer; }
.wybor .ik { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--tusz-2); }
.plik { padding: 10px !important; font-size: .9rem !important; }
.plik::file-selector-button { font: 700 .85rem var(--f-nag); border: 0; background: var(--butelka); color: var(--papier); padding: 10px 14px; border-radius: 10px; margin-right: 12px; cursor: pointer; }
.pole-pom { font-size: .82rem; color: var(--tusz-2); margin: 0; }
.grupa { border: 0; padding: 0; }
.chipy { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--linia); background: var(--karta); font: 600 .9rem var(--f-tekst); transition: .2s; }
.chip input:checked + span { background: var(--butelka); border-color: var(--butelka); color: var(--papier); }
.chip input:focus-visible + span { outline: 3px solid var(--zima-c); outline-offset: 2px; }
.zgoda { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font: 400 .86rem/1.45 var(--f-tekst) !important; color: var(--tusz-2) !important; position: relative; min-height: 44px; }
.zgoda input { position: absolute; left: 0; top: 0; width: 44px; height: 44px; opacity: 0; margin: -10px 0 0 -10px; cursor: pointer; }
.zgoda-kw { flex: none; width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--tusz-2); display: grid; place-items: center; background: var(--karta); transition: .2s; }
.zgoda-kw .ik { width: 16px; height: 16px; opacity: 0; color: var(--papier); }
.zgoda input:checked + .zgoda-kw { background: var(--butelka); border-color: var(--butelka); }
.zgoda input:checked + .zgoda-kw .ik { opacity: 1; }
.zgoda input:focus-visible + .zgoda-kw { outline: 3px solid var(--zima-c); outline-offset: 2px; }
.f .btn[type=submit] { justify-self: start; }
.f-dzieki { padding: 26px; border-radius: 20px; background: var(--rok-t); border: 2px solid var(--rok); display: grid; gap: 10px; animation: wjazd .5s ease both; }
.f-dzieki .ik { width: 40px; height: 40px; color: var(--rok-c); }
.f-dzieki p { margin: 0; font: 600 1.05rem/1.45 var(--f-nag); color: var(--butelka); }
.pole-blad input, .pole-blad select, .pole-blad textarea { border-color: #b2410e; }

/* kroki formularza */
.kroki-pasek { list-style: none; margin: 0; padding: 0; display: none; gap: 8px; }
.js .kroki-pasek { display: grid; grid-template-columns: repeat(3, 1fr); }
.kroki-pasek li { height: 6px; border-radius: 6px; background: var(--linia); overflow: hidden; }
.kroki-pasek li span { display: block; height: 100%; width: 0; background: var(--akcent-c); transition: width .5s ease; }
.kroki-pasek li.tu span, .kroki-pasek li.bylo span { width: 100%; }
.krok { border: 0; padding: 0; margin: 0; min-width: 0; }
.krok-nr { font: 800 .8rem var(--f-nag); letter-spacing: .14em; text-transform: uppercase; color: var(--akcent-c); padding: 0; margin-bottom: 14px; }
.nojs .krok + .krok { padding-top: 22px; border-top: 1px dashed var(--linia); }
.js .f-kroki .krok:not(.aktywny) { display: none; }
.krok.aktywny { animation: wjazd .45s ease both; }
.krok-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.nojs [data-wstecz], .nojs [data-dalej] { display: none; }
.js .f-kroki:not(.ostatni) [data-wyslij] { display: none; }
.js .f-kroki.ostatni [data-dalej] { display: none; }
.js .f-kroki.pierwszy [data-wstecz] { display: none; }

.fw { position: relative; overflow: hidden; background: var(--akcent-t); padding: clamp(36px, 6vw, 80px) 0 clamp(50px, 8vw, 100px); isolation: isolate; }
.fw-foto { position: absolute; inset: 0 0 auto; height: min(70%, 560px); z-index: -2; }
.fw-foto img { width: 100%; height: 100%; object-fit: cover; }
.fw-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(229, 239, 213, .75), var(--akcent-t)); }
.fw-w { display: grid; gap: 28px; }
@media (min-width: 960px) { .fw-w { grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: start; } .fw-nag { position: sticky; top: 120px; } }
.fw-nag .ph-h1 { font-size: clamp(2.1rem, 5vw, 4rem); }
.fw-p { margin-top: 18px; font-size: 1.04rem; color: var(--tusz); max-width: 50ch; }
.fw-karta { background: var(--karta); border-radius: 28px; padding: clamp(18px, 3vw, 34px); box-shadow: 0 30px 60px -34px rgba(15, 44, 31, .5); border: 1px solid var(--linia); }
.fs { padding: clamp(50px, 8vw, 100px) 0; background: var(--rok-t); }
.fs-w { display: grid; gap: 28px; }
@media (min-width: 960px) { .fs-w { grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: start; } }

/* marki (serwis) */
.mk { padding: clamp(50px, 8vw, 100px) 0; }
.mk-nag { margin-bottom: 30px; }
.marki-siatka { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 700px) { .marki-siatka { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .marki-siatka { grid-template-columns: repeat(5, 1fr); } }
.marki-siatka li { background: var(--karta); border: 1px solid var(--linia); border-radius: 16px; height: 100px; justify-content: center; padding: 14px; }
.marki-siatka .marka-img { height: 56px; max-width: 100%; }
.mk-pod { margin-top: 18px; color: var(--tusz-2); font-size: .92rem; }

/* kontakt */
.kt { position: relative; overflow: hidden; background: var(--akcent-t); padding: clamp(40px, 7vw, 90px) 0 clamp(60px, 9vw, 110px); isolation: isolate; }
.kt-w { display: grid; gap: 30px; align-items: center; }
@media (min-width: 900px) { .kt-w { grid-template-columns: 1.4fr 1fr; } }
.kt-p { font: 500 1.15rem/1.4 var(--f-nag); margin: 20px 0 0; max-width: 40ch; }
.kt-grafika { max-width: 420px; justify-self: center; animation: dryf 10s ease-in-out infinite; }
.kt-dane-s { padding: 0 0 clamp(50px, 8vw, 100px); }
.kt-dane-w { display: grid; gap: 20px; margin-top: -50px; position: relative; }
@media (min-width: 900px) { .kt-dane-w { grid-template-columns: 1fr 1.25fr; gap: 24px; } }
.kt-dane-k { background: var(--butelka); color: var(--papier); border-radius: 28px; padding: clamp(22px, 3vw, 36px); }
.kt-dane-k .nad { color: var(--rok); }
.kt-dane-k h2 { color: var(--papier); }
.kt-dane-k h2 span { color: var(--rok); display: block; }
.kt-dane { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 16px; }
.kt-dane li { display: flex; gap: 14px; align-items: flex-start; }
.kt-dane .ik { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: rgba(138, 195, 71, .18); color: var(--rok); }
.kt-dane li > span { display: grid; }
.kt-et { font-size: .8rem; opacity: .75; }
.kt-dane a, .kt-w2 { font: 700 1.1rem/1.3 var(--f-nag); color: var(--papier); text-decoration: none; overflow-wrap: anywhere; }
.kt-dane a { min-height: 44px; display: inline-flex; align-items: center; }
.kt-dane a:hover { color: var(--rok); }
.kt-btn .btn { background: var(--rok); border-color: var(--rok); color: var(--tusz); }
.kt-mapa { position: relative; border-radius: 28px; overflow: hidden; min-height: 380px; background: var(--papier-2); border: 1px solid var(--linia); }
.kt-mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kt-mapa-zasl { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 20px;
  background: radial-gradient(circle at 50% 40%, var(--rok-t), var(--papier-2)); }
.kt-mapa-ik { width: 64px; height: 64px; color: var(--rok-c); }
.kt-mapa-zasl p { margin: 0; font: 700 1.05rem var(--f-nag); color: var(--butelka); }

/* wiedza */
.wz { padding: clamp(40px, 6vw, 80px) 0 clamp(50px, 8vw, 100px); }
.wz-l { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
@media (min-width: 760px) { .wz-l { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (min-width: 1100px) { .wz-l { grid-template-columns: repeat(3, 1fr); } }
.wz-k a { display: flex; flex-direction: column; height: 100%; border-radius: 26px; overflow: hidden; background: var(--karta); border: 1px solid var(--linia); color: var(--tusz); text-decoration: none; transition: transform .3s, box-shadow .3s; }
.wz-k a:hover { transform: translateY(-4px); box-shadow: var(--cien); }
.wz-img { display: grid; place-items: center; aspect-ratio: 16/10; background: var(--akcent-t); overflow: hidden; }
.wz-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.wz-k a:hover .wz-img img { transform: scale(1.05); }
.wz-glif { width: 52%; height: auto; color: var(--akcent-c); opacity: .45; }
.wz-t { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1; }
.wz-meta { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--akcent-c); font-weight: 600; }
.wz-h { font-size: clamp(1.2rem, 2vw, 1.55rem); margin: 0; }
.wz-p { color: var(--tusz-2); font-size: .95rem; }
.wz-t .lnk { margin-top: auto; align-self: flex-start; }

/* artykuł */
.art-nag .ph-h1 { font-size: clamp(2rem, 5vw, 4rem); max-width: 22ch; }
.art-w { display: grid; gap: 40px; padding-bottom: clamp(50px, 8vw, 100px); }
.art-glowne { margin: calc(-1 * clamp(50px, 8vw, 100px)) 0 0; border-radius: 26px; overflow: hidden; box-shadow: var(--cien); max-width: 820px; position: relative; z-index: 2; }
.art-glowne img { width: 100%; max-height: 520px; object-fit: cover; }
.proza { max-width: 760px; }
.proza > p:first-child { font-size: 1.12em; font-weight: 500; }
.art-w .proza { padding-top: 10px; }
.art-inne { border-top: 1px solid var(--linia); padding-top: 26px; max-width: 760px; display: grid; gap: 22px; align-content: start; }
.art-cta { background: var(--akcent-t); border-radius: 22px; padding: 22px; display: grid; gap: 14px; justify-items: start; }
.art-cta p { margin: 0; font: 800 1.2rem/1.25 var(--f-nag); color: var(--butelka); }
.art-cta-ik { width: 40px; height: 40px; color: var(--akcent-c); }
.art-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 700 1rem var(--f-nag); color: var(--butelka); text-decoration: none; }
.proza .b-img img { width: auto; max-height: 640px; }
.proza .b-img { width: fit-content; max-width: 100%; }
@media (min-width: 1100px) {
  .art-w { grid-template-columns: minmax(0, 780px) 1fr; column-gap: 70px; align-items: start; }
  .art-glowne { grid-column: 1; }
  .art-w .proza { grid-column: 1; }
  .art-inne { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 110px; border-top: 0; padding-top: 0; }
}
.art-inne ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.art-inne a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 18px; border-radius: 16px; background: var(--karta); border: 1px solid var(--linia); font: 700 1rem/1.3 var(--f-nag); color: var(--butelka); text-decoration: none; }
.art-inne a:hover { border-color: var(--akcent); }
.dok { padding: clamp(40px, 6vw, 80px) 0 clamp(50px, 8vw, 100px); }

/* miasto */
.ms { padding: clamp(40px, 6vw, 80px) 0; }
.ms-w { display: grid; gap: 30px; align-items: center; }
@media (min-width: 900px) { .ms-w { grid-template-columns: 1.3fr 1fr; gap: 60px; } }
.ms-mapa { margin: 0; justify-self: center; max-width: 420px; border-radius: 26px; overflow: hidden; background: var(--rok-t); }
.ms-kor { padding: clamp(50px, 8vw, 100px) 0; }
.ms-cechy { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 16px; }
@media (min-width: 760px) { .ms-cechy { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ms-cechy { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.ms-cechy li { background: var(--karta); border: 1px solid var(--linia); border-radius: 22px; padding: 22px; }
.ms-cechy h3 { font-size: 1.25rem; }
.ms-cechy p { color: var(--tusz-2); margin: 0; font-size: .95rem; }
.ms-ik { width: 46px; height: 46px; padding: 10px; border-radius: 14px; background: var(--rok-t); color: var(--rok-c); margin-bottom: 14px; }
.ms-cechy .ms-dlaczego { background: var(--butelka); color: var(--papier); border: 0; }
.ms-dlaczego h3 { color: var(--rok); }
.ms-cechy .ms-dlaczego p { color: var(--papier); opacity: .9; }
.ms-gdzie { padding: clamp(40px, 6vw, 70px) 0; background: var(--rok-t); }
.ms-gdzie-w { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .ms-gdzie-w { grid-template-columns: 1fr 1.2fr; } }
.ms-inne { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ms-inne a, .ms-ok { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 999px; background: var(--karta); color: var(--butelka); text-decoration: none; font: 700 .95rem var(--f-nag); border: 2px solid transparent; }
.ms-inne a:hover { border-color: var(--rok); }
.ms-inne a[aria-current] { background: var(--butelka); color: var(--papier); }
.ms-ok { background: transparent; color: var(--tusz-2); }

/* 404 */
.brak { padding: clamp(60px, 10vw, 140px) 0; position: relative; overflow: hidden; }
.brak-w { position: relative; }
.brak-g { position: absolute; right: 0; top: -40px; width: 260px; height: 260px; color: var(--zima-c); opacity: .2; }
.brak h1 { font-size: clamp(2.4rem, 7vw, 5rem); }
.brak-l { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ---------- stopka ---------- */
.stopka { margin-top: 0; }
.st-pas { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 70px) 0; background: linear-gradient(90deg, var(--zima-t), var(--rok-t) 50%, var(--lato-t)); }
.st-pas-w { display: grid; gap: 16px 30px; align-items: center; }
@media (min-width: 1000px) { .st-pas-w { grid-template-columns: auto 1fr auto; } .st-pas-h { grid-column: 2; } .st-pory { grid-row: 1 / 3; } .st-tel { grid-column: 2; } .st-mail { grid-column: 2; } .st-pas-btn { grid-column: 3; grid-row: 1 / 4; } }
.st-pory { display: flex; gap: 8px; }
.st-pory span { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--karta); color: var(--akcent-c); box-shadow: 0 8px 20px -12px rgba(15, 44, 31, .5); }
.st-pory .ik { width: 28px; height: 28px; animation: kolysz 6s ease-in-out infinite; }
.st-pory span:nth-child(2) .ik { animation-delay: -2s; }
.st-pory span:nth-child(3) .ik { animation-delay: -4s; }
@keyframes kolysz { 50% { transform: rotate(25deg) scale(1.08); } }
.st-pas-h { font: 700 .82rem var(--f-nag); letter-spacing: .16em; text-transform: uppercase; color: var(--butelka-2); margin: 0; }
.st-tel { display: inline-flex; align-items: center; gap: 14px; font: 800 clamp(2rem, 6vw, 4.2rem)/1 var(--f-nag); letter-spacing: -.04em; color: var(--butelka); text-decoration: none; min-height: 48px; }
.st-tel .ik { width: .8em; height: .8em; color: var(--rok-c); }
.st-tel:hover { color: var(--butelka-3); }
.st-mail { display: inline-flex; align-items: center; gap: 10px; font: 600 1.05rem var(--f-nag); color: var(--butelka); min-height: 44px; overflow-wrap: anywhere; }
.st-pas-btn { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 1000px) { .st-pas-btn { flex-direction: column; } }
.st-pas .btn-akcent { background: var(--butelka); border-color: var(--butelka); color: var(--papier); }

.st-opinie { background: var(--karta); border-bottom: 1px solid var(--linia); padding: 26px 0; }
.st-opinie-w { display: grid; gap: 18px; align-items: center; }
@media (min-width: 1000px) { .st-opinie-w { grid-template-columns: auto 1fr auto; gap: 40px; } }
.st-mini-h { font: 700 .78rem var(--f-nag); letter-spacing: .14em; text-transform: uppercase; color: var(--rok-c); margin: 0 0 6px; }
.st-srednia { display: flex; align-items: center; gap: 10px; margin: 0; }
.st-srednia strong { font: 800 1.9rem/1 var(--f-nag); color: var(--butelka); letter-spacing: -.03em; }
.st-srednia .gwiazdki .ik { width: 22px; height: 22px; }
.st-podstawa { margin: 4px 0 0; font-size: .9rem; color: var(--tusz-2); }
.st-serwisy { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.st-serwisy li { display: grid; justify-items: center; gap: 6px; padding: 12px 8px; border-radius: 16px; background: var(--papier); text-align: center; font-size: .78rem; font-weight: 600; color: var(--tusz-2); }
.st-serwis-logo { height: 30px; width: auto; max-width: 100%; object-fit: contain; }
.st-dodaj { justify-self: start; }

.st-form { padding: clamp(50px, 8vw, 100px) 0; background: var(--papier); }
.st-form-w { display: grid; gap: 30px; }
@media (min-width: 960px) { .st-form-w { grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: stretch; } }
.st-form-img { position: relative; border-radius: 28px; overflow: hidden; min-height: 320px; }
.st-form-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-form-cyt { position: absolute; left: 14px; right: 14px; bottom: 14px; background: rgba(22, 61, 43, .92); color: var(--papier); border-radius: 20px; padding: 18px 20px; }
.st-form-h { font: 800 clamp(1.1rem, 2vw, 1.4rem)/1.25 var(--f-nag); margin: 0 0 6px; }
.st-form-cyt p:last-child { margin: 0; color: var(--rok); font-weight: 600; font-size: .95rem; }
.st-f { background: var(--karta); border-radius: 28px; padding: clamp(20px, 3vw, 36px); border: 1px solid var(--linia); }

.st-dol { background: var(--butelka-3); color: rgba(255, 255, 255, .86); padding: clamp(46px, 7vw, 80px) 0 20px; }
.st-siatka { display: grid; gap: 34px; }
@media (min-width: 700px) { .st-siatka { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .st-siatka { grid-template-columns: 1.25fr .8fr .8fr 1.6fr; gap: 44px; } }
.logo-jasne { color: var(--papier); margin-bottom: 16px; }
.logo-jasne .logo-znak { width: 56px; height: 56px; background: var(--papier); border-radius: 50%; padding: 5px; }
.logo-jasne small { color: rgba(255, 255, 255, .7); letter-spacing: .04em; text-transform: none; font-size: .78rem; }
.st-wlasc { font-size: .88rem; }
.st-dane { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; font-size: .95rem; }
.st-dane li { display: flex; gap: 10px; align-items: center; }
.st-dane .ik { color: var(--rok); }
.st-dane a { color: var(--papier); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.st-dane a:hover { color: var(--rok); }
.st-kol-h { font: 700 .78rem var(--f-nag); letter-spacing: .14em; text-transform: uppercase; color: var(--rok); margin: 0 0 12px; }
.st-kol ul { list-style: none; padding: 0; margin: 0; display: grid; }
.st-kol a { color: var(--papier); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; transition: color .2s, transform .2s; }
.st-kol a:hover { color: var(--rok); transform: translateX(3px); }
.st-et { font-size: .8rem; opacity: .7; margin: 0 0 8px; }
.st-woj { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.st-woj a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: rgba(138, 195, 71, .16); color: var(--papier); text-decoration: none; font: 700 .9rem var(--f-nag); }
.st-woj a:hover { background: var(--rok); color: var(--tusz); }
.st-miasta { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0 4px; font-size: .9rem; }
.st-miasta a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: rgba(255, 255, 255, .85); text-decoration: none; border-radius: 8px; }
.st-miasta a:hover { background: rgba(255, 255, 255, .08); color: var(--papier); }
.st-prawne { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .8rem; }
.st-rejestr { opacity: .7; max-width: 110ch; }
.st-prawne-w { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.st-prawne-w p { margin: 0; }
.st-prawne-w ul { list-style: none; display: flex; gap: 16px; padding: 0; margin: 0; }
.st-prawne-w a { color: var(--papier); min-height: 44px; display: inline-flex; align-items: center; }
.st-gora { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); text-decoration: none; }
.st-gora:hover { background: var(--papier); color: var(--butelka) !important; }
.st-wkd { margin: 14px 0 0; opacity: .6; font-size: .74rem; }
.st-wkd a { color: inherit; }
/* stopka na telefonie: menu w dwóch kolumnach, dane jako kafelki, miasta jako pigułki — prośba właściciela 18.10 */
@media (max-width: 699.98px) {
  .st-siatka { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .st-firma, .st-obszar { grid-column: 1 / -1; }
  .st-firma { text-align: center; }
  .st-firma .logo-jasne { margin: 0 auto 12px; }
  .st-wlasc { max-width: 34ch; margin: 0 auto 16px; opacity: .8; }
  .st-dane { grid-template-columns: 1fr 1fr; gap: 8px; text-align: left; }
  .st-dane li { background: rgba(255, 255, 255, .07); border-radius: 14px; padding: 6px 12px; min-height: 56px; font-size: .86rem; }
  .st-dane li:first-child, .st-dane li:has(a[href^="mailto:"]) { grid-column: 1 / -1; }
  .st-dane li:has(a[href^="mailto:"]) { order: 9; }
  .st-dane a { min-height: 40px; overflow-wrap: anywhere; }
  .st-firma .btn { width: 100%; justify-content: center; }
  .st-kol { padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); }
  .st-kol a { min-height: 40px; font-size: .95rem; }
  .st-obszar { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); }
  .st-woj a { min-height: 40px; padding: 0 12px; font-size: .85rem; }
  .st-miasta { gap: 6px; font-size: .84rem; }
  .st-miasta a { min-height: 34px; padding: 0 11px; background: rgba(255, 255, 255, .06); border-radius: 999px; }
  .st-prawne { text-align: center; }
  .st-rejestr { font-size: .72rem; line-height: 1.5; }
  .st-prawne-w { flex-direction: column; gap: 4px; }
  .st-prawne-w ul { flex-wrap: wrap; justify-content: center; }
  .st-gora { margin: 8px auto 0; }
}

/* ---------- cookies, zadzwoń, lightbox ---------- */
.cookies { position: fixed; left: 12px; right: 12px; bottom: calc(var(--ixw-h) + 12px); z-index: 90; max-width: 560px; display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 18px; border-radius: 18px; background: var(--butelka); color: var(--papier); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .5); font-size: .88rem; }
.cookies[hidden] { display: none; }
.cookies p { margin: 0; flex: 1; }
.cookies a { color: var(--rok); }
.cookies .btn { min-height: 44px; min-width: 64px; }
.zadzwon { position: fixed; right: 14px; bottom: calc(var(--ixw-h) + 14px + var(--ck-h, 0px)); z-index: 85; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px; border-radius: 999px; background: var(--rok); color: var(--tusz); font: 800 1rem var(--f-nag); text-decoration: none; box-shadow: 0 14px 30px -12px rgba(15, 44, 31, .6); transform: translateY(150%); opacity: 0; visibility: hidden; transition: transform .35s ease, opacity .35s, visibility 0s .35s; pointer-events: none; }
.zadzwon.widoczny { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: transform .35s ease, opacity .35s; }
@media (min-width: 900px) { .zadzwon { display: none; } }
.menu-otwarte .zadzwon { opacity: 0; pointer-events: none; }

.lb { position: fixed; inset: 0 0 var(--ixw-h); z-index: 200; background: rgba(9, 24, 17, .94); display: grid; grid-template-rows: 1fr auto; padding: 60px 12px 12px; }
.lb[hidden] { display: none; }
.lb-scena { position: relative; min-height: 0; overflow: hidden; touch-action: pan-y; }
.lb-img:not([src]) { display: none; }
.lb-img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 10px; }
.lb-podpis { margin: 10px 0 0; text-align: center; color: var(--papier); display: flex; justify-content: center; gap: 14px; font-size: .92rem; }
.lb-licz { font: 700 .9rem var(--f-nag); color: var(--rok); }
.lb-btn { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lb-btn:hover { background: var(--rok); color: var(--tusz); }
.lb-btn .ik { width: 26px; height: 26px; }
.lb-zamknij { top: 10px; right: 10px; }
.lb-pop { left: 10px; top: 50%; transform: translateY(-50%); }
.lb-nast { right: 10px; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) { .lb-pop, .lb-nast { top: auto; bottom: 8px; transform: none; } .lb { padding-bottom: 70px; } }
html.lb-otwarty, html.menu-otwarte { overflow: hidden; }

/* ---------- odsłanianie ---------- */
.js [data-r] { transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.js [data-r]:not(.widac) { opacity: 0; transform: translateY(26px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-r]:not(.widac) { opacity: 1; transform: none; }
  .hero-img { transform: none !important; }
}
@media print { .nag, .cookies, .zadzwon, .st-form, .lb { display: none !important; } }

/* ---------- słońce z sygnetem (prośba klienta 18.10): obracające się promienie, sygnet nieruchomo w środku ---------- */
.slonce-syg { position: relative; display: block; width: 100%; height: 100%; aspect-ratio: 1; }
.slonce-prom { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: obrot 60s linear infinite; }
.slonce-prom .sl-p { stroke: var(--rok); }
.slonce-prom .sl-k { stroke: var(--butelka-2); opacity: .55; }
.slonce-srodek { position: absolute; inset: 24%; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, #fff 58%, rgba(255,255,255,0) 72%); }
.slonce-srodek img { width: 100%; height: 100%; object-fit: contain; }
.glif-syg .slonce-srodek { background: none; }
@media (max-width: 760px) { .hero-sygnet { width: 84px; } .slonce-prom .sl-p { stroke-width: 7; } }
@media (prefers-reduced-motion: reduce) { .slonce-prom { animation: none; } }


/* ---------- ikony do masek CSS (generowane z ik()) ---------- */
:root {
  --ik-slonce: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.5v2.6M12 18.9v2.6M2.5 12h2.6M18.9 12h2.6M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8'/%3E%3C/svg%3E");
  --ik-platek: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5v19M3.8 7.25l16.4 9.5M3.8 16.75l16.4-9.5'/%3E%3Cpath d='M9.6 3.9 12 6.3l2.4-2.4M9.6 20.1 12 17.7l2.4 2.4M3.2 10.4l3.3.9-.9-3.3M20.8 13.6l-3.3-.9.9 3.3M3.2 13.6l3.3-.9-.9 3.3M20.8 10.4l-3.3.9.9-3.3'/%3E%3C/svg%3E");
  --ik-rok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.35-5.66'/%3E%3Cpath d='M20.2 3.8v3.9h-3.9'/%3E%3Ccircle cx='12' cy='12' r='2.2'/%3E%3C/svg%3E");
  --ik-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 3.5h3l1.5 4-2 1.3a11 11 0 0 0 6.1 6.1l1.3-2 4 1.5v3a2 2 0 0 1-2.2 2A17 17 0 0 1 4.6 5.7a2 2 0 0 1 2-2.2Z'/%3E%3C/svg%3E");
  --ik-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E");
  --ik-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-6.1-6.5-11.2a6.5 6.5 0 0 1 13 0C18.5 14.9 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='9.8' r='2.4'/%3E%3C/svg%3E");
  --ik-fb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 21v-7.5h2.6l.4-3h-3V8.6c0-.9.3-1.5 1.5-1.5h1.6V4.4a20 20 0 0 0-2.3-.1c-2.3 0-3.8 1.4-3.8 3.9v2.3H9v3h2.5V21'/%3E%3C/svg%3E");
  --ik-strzalka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13.5 6.5 19 12l-5.5 5.5'/%3E%3C/svg%3E");
  --ik-w-gore: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V5M6.5 10.5 12 5l5.5 5.5'/%3E%3C/svg%3E");
  --ik-lewo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5.5 8.5 12l6.5 6.5'/%3E%3C/svg%3E");
  --ik-prawo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5.5 6.5 6.5L9 18.5'/%3E%3C/svg%3E");
  --ik-dol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  --ik-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  --ik-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h10'/%3E%3C/svg%3E");
  --ik-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.2 4.2L19 7'/%3E%3C/svg%3E");
  --ik-trasa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c3.5 0 3.5-5 7-5s3.5-5 7-5'/%3E%3Ccircle cx='5' cy='19' r='1.8'/%3E%3Cpath d='M19 3.5s-3 2.9-3 5a3 3 0 0 0 6 0c0-2.1-3-5-3-5Z'/%3E%3C/svg%3E");
  --ik-tarcza: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 6v5.5c0 4.6 3.2 8.2 7.5 9.5 4.3-1.3 7.5-4.9 7.5-9.5V6L12 3Z'/%3E%3Cpath d='m8.6 12 2.4 2.4 4.5-4.6'/%3E%3C/svg%3E");
  --ik-zegar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
  --ik-osoba: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.8 20a7.2 7.2 0 0 1 14.4 0'/%3E%3C/svg%3E");
  --ik-siatka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.6'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.6'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.6'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.6'/%3E%3C/svg%3E");
  --ik-pakiet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 20 7.5v9L12 21l-8-4.5v-9L12 3Z'/%3E%3Cpath d='M4 7.5 12 12l8-4.5M12 12v9'/%3E%3C/svg%3E");
  --ik-zwrot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17.5 9.5 12l3.5 3.5L20 8.5'/%3E%3Cpath d='M14.5 8.5H20V14'/%3E%3C/svg%3E");
  --ik-gwarancja: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9.5' r='5.8'/%3E%3Cpath d='M8.8 14.3 7.5 21l4.5-2.4 4.5 2.4-1.3-6.7'/%3E%3Cpath d='m9.6 9.6 1.7 1.7 3.1-3.2'/%3E%3C/svg%3E");
  --ik-portfel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5A2.5 2.5 0 0 1 6.5 5H18v3'/%3E%3Crect x='4' y='8' width='16.5' height='11' rx='2.4'/%3E%3Ccircle cx='16' cy='13.5' r='1.3'/%3E%3C/svg%3E");
  --ik-tryb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3v2.4M12 18.6V21M3 12h2.4M18.6 12H21M5.6 5.6l1.7 1.7M16.7 16.7l1.7 1.7M5.6 18.4l1.7-1.7M16.7 7.3l1.7-1.7'/%3E%3C/svg%3E");
  --ik-lisc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c0-8 5-13.5 15-14-.4 9.6-5.8 15-14 15'/%3E%3Cpath d='M5 19c3.5-4.5 6.5-7 10-9'/%3E%3C/svg%3E");
  --ik-smartfon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.8' width='10' height='18.4' rx='2.4'/%3E%3Cpath d='M10.5 18h3'/%3E%3Cpath d='M9.6 11.6l1.6-2.2 1.6 1.6 1.7-2.4'/%3E%3C/svg%3E");
  --ik-rozbudowa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='12.5' width='8' height='8' rx='1.6'/%3E%3Crect x='12.5' y='12.5' width='8' height='8' rx='1.6'/%3E%3Cpath d='M16.5 3.5v6M13.5 6.5h6'/%3E%3C/svg%3E");
  --ik-medal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.4l-5.2 2.7 1-5.8L3.5 9.2l5.9-.9L12 3Z'/%3E%3C/svg%3E");
  --ik-lupa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='m15 15 5 5M8 10.5h5M10.5 8v5'/%3E%3C/svg%3E");
  --ik-mapa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4.5 3.5 6.5v13L9 17.5l6 2 5.5-2v-13L15 6.5l-6-2Z'/%3E%3Cpath d='M9 4.5v13M15 6.5v13'/%3E%3C/svg%3E");
}

/* =====================================================================================================
   DODATKI WORDPRESSA — dopasowanie bloków edytora (grupa, obrazek, przyciski, lista, szczegóły, galeria)
   do wyglądu A. Dopisywane przez _src/wp-zbuduj.py na koniec arkusza z wersji pokazowej.
   ===================================================================================================== */

/* bloki wbudowane: bez domyślnych marginesów, wymiary z klas wyglądu */
main .wp-block-image, main .wp-block-group, main .wp-block-buttons, main .wp-block-gallery { margin: 0; }
main .wp-block-image img { height: auto; }
main .b-img { margin: 1.6em 0; }
main .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
main .wp-block-button { margin: 0; }
main .wp-block-list { margin-top: 0; }
.wp-block-button__link.btn, .wp-block-button__link.lnk { word-break: normal; height: auto; }
.wp-block-button__link.lnk { background: none; padding: 0; border-radius: 0; border-width: 0 0 2px; color: var(--butelka); min-height: 44px; }
.wp-block-button__link.of-tel { background: none; padding: 0; border-radius: 0; border: 0; }
.ph-dalej .ph-tekst > .wp-block-buttons.ph-btn, .ms-t .ph-btn { margin-top: 1.4em; }
.b-btn { margin-top: 1.4em; }

/* pierwszy ekran */
.hero-foto { position: absolute; inset: 0; z-index: -2; margin: 0 !important; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 100%; }
.hero-nad p { margin: 0; }
.hero-nad p:first-child { display: inline-flex; align-items: center; gap: 14px; }
.hero-nad p:first-child::after { content: ""; width: 40px; height: 2px; background: var(--akcent-c); transition: background-color .8s; }
.hero-akcje .wp-block-buttons { gap: 12px 14px; }
.hero-akcje .hero-ocena { margin: 0 0 0 6px; }
body[data-pora="lato"] .pory-u:not(.pora-lato), body[data-pora="zima"] .pory-u:not(.pora-zima), body[data-pora="rok"] .pory-u:not(.pora-rok) { display: none; }
.pory-u p { margin: 0; }
.pory-u .pory-kolo { margin: 0; }
.pory-u .pory-u-p { margin: 0; }
.pory-u-btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 640px) { .pory-u-btn { grid-column: auto; } }

/* oś roku, fotowoltaika, realizacje */
.os-karta .wp-block-buttons { margin-top: auto; }
.os-karta .os-kolo { margin: 0; }
.pv-grafika { margin: 0 auto !important; }
.pv-kafle > .pv-kafel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.real-nag-t p, .real-nag-t h2 { margin-bottom: 0; }
.real-nag-t .nad { margin-bottom: .9em; }
.real-nag-t h2 { margin-bottom: .3em; }

/* certyfikat i logotypy marek */
.cert-skan-img { margin: 0; }
.cert-skan-img a { display: block; }
.cert-link .wp-block-buttons, .cert-link p { margin: 0; }
.cert-link p { font-size: .85rem; color: var(--tusz-2); }
.marki > .wp-block-image { margin: 0; display: flex; align-items: center; }
.marki img { height: 44px; width: auto; max-width: 140px; object-fit: contain; filter: grayscale(1) contrast(.9); opacity: .78; transition: filter .3s, opacity .3s; }
.marki > .wp-block-image:hover img { filter: none; opacity: 1; }
.marki-male img { height: 36px; }
.marki-siatka > .wp-block-image { background: var(--karta); border: 1px solid var(--linia); border-radius: 16px; height: 100px; justify-content: center; padding: 14px; }
.marki-siatka img { height: 56px; max-width: 100%; }

/* sekcje tekstowe: układ także wtedy, gdy klient usunie lub doda zdjęcie */
.tekst-w:has(> .tekst-img) .tekst-t { min-width: 0; }
@media (min-width: 900px) {
  .tekst-bez .tekst-w:has(> .tekst-img) { max-width: none; grid-template-columns: 1fr 1.1fr; gap: 70px; }
  .tekst-z .tekst-w:not(:has(> .tekst-img)) { grid-template-columns: 1fr; max-width: 860px; }
}
.ph-dalej-w:not(:has(> .ph-img)) { grid-template-columns: 1fr !important; }
.ph-img, .ph-foto, .fw-foto, .kt-grafika, .ms-mapa, .tekst-img, .karta-img { margin: 0; }
.ph-foto img, .fw-foto img { width: 100%; height: 100%; object-fit: cover; }
.karta-t h3, .karta-t p { margin: 0 0 .4em; }
.cechy-l li strong { display: block; }

/* pytania (blok „Szczegóły”) */
.faq-el > p { padding: 0 20px 18px; margin: 0; color: var(--tusz-2); }
.faq-el summary > span { flex: 1; }

/* miasta */
.ms-cecha { background: var(--karta); border: 1px solid var(--linia); border-radius: 22px; padding: 22px; }
.ms-cecha h3 { font-size: 1.25rem; }
.ms-cecha p { color: var(--tusz-2); margin: 0; font-size: .95rem; }
.ms-cechy .ms-dlaczego { background: var(--butelka); color: var(--papier); border: 0; }
.ms-gdzie-t h2, .ms-gdzie-t h3 { margin-bottom: .3em; }

/* oferta */
.okruszki { font-size: .86rem; color: var(--tusz-2); margin: 0 0 20px; }
.okruszki a { color: var(--tusz-2); }
.of-img { overflow: visible; box-shadow: none; border-radius: 0; }
.of-zdj { border-radius: 26px; overflow: hidden; box-shadow: var(--cien); background: var(--karta); }
.of-zdj img { width: 100%; }
.of-img .of-znak { margin: 0; z-index: 2; }
.of-pod { font: 700 1.15rem/1.3 var(--f-nag); color: var(--butelka-2); margin: 0 0 14px; }
.of-pyt .wp-block-buttons { margin: 0; }
.of-miniatury.wp-block-gallery { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px !important; margin-top: 10px !important; }
.of-miniatury.wp-block-gallery > figure { width: auto !important; margin: 0 !important; border-radius: 12px; overflow: hidden; }
.of-miniatury.wp-block-gallery img { aspect-ratio: 1; object-fit: cover; width: 100%; height: 100% !important; }
.of-dalej { padding: clamp(40px, 6vw, 80px) 0; }
.of-opis .gal-l { margin-top: 18px; }
.f .f-form { display: grid; gap: 18px; }

/* kontakt */
.kt-dane-k h2 em { font-style: normal; color: var(--rok); display: block; }
.kt-grafika img { width: 100%; }

/* formularze */
.pzn-pulapka { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.f-stan { margin: 0; font-size: .92rem; color: var(--tusz-2); }
.f-stan:empty { display: none; }
.f-blad { color: #a23b0a; font-weight: 600; }
.zgoda a { color: inherit; }

/* listy artykułów i blog */
.wz-kat { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.wz-kat a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--linia); background: var(--papier); color: var(--butelka); font: 700 .86rem var(--f-nag); text-decoration: none; }
.wz-kat a[aria-current] { background: var(--butelka); border-color: var(--butelka); color: var(--papier); }
.wz-strony { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 8px; }
.wz-strony .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 999px; border: 2px solid var(--linia); text-decoration: none; font-weight: 700; }
.wz-strony .current { background: var(--butelka); border-color: var(--butelka); color: var(--papier); }
.art-kat { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.art-kat a { font: 700 .8rem var(--f-nag); background: var(--karta); padding: 6px 12px; border-radius: 999px; text-decoration: none; }
.art-podpis { font-size: .8rem; color: var(--tusz-2); padding: 8px 14px; background: var(--karta); }
.proza .wp-block-image { margin: 1.6em 0; }
.proza .wp-block-image img { border-radius: var(--r); }
.proza ul:not(.lista):not(.cechy-l), .proza ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.proza h2:not([class*="b-h"]) { font-size: clamp(1.45rem, 2.6vw, 2rem); margin-top: 1.4em; }
.proza h3:not([class*="b-h"]) { font-size: clamp(1.15rem, 2vw, 1.4rem); margin-top: 1.2em; }
.proza blockquote { margin: 1.4em 0; padding: 14px 20px; border-left: 4px solid var(--akcent); background: var(--akcent-t); border-radius: 0 var(--r-m) var(--r-m) 0; }
.proza table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.proza td, .proza th { border: 1px solid var(--linia); padding: 8px 10px; }

/* pasek zgód */
.cookies-zgody { flex-wrap: wrap; }
.cookies-btn { display: flex; flex-wrap: wrap; gap: 8px; }
.cookies-zgody .btn-jasny { color: var(--papier); border-color: rgba(255, 255, 255, .5); }
.st-zgody { background: none; border: 0; color: var(--papier); text-decoration: underline; cursor: pointer; min-height: 44px; padding: 0; font-size: inherit; }

/* pasek administratora WordPressa (po zalogowaniu) */
.admin-bar .nag { top: calc(32px - var(--pas-h)); }
@media (max-width: 782px) { .admin-bar .nag { top: calc(46px - var(--pas-h)); } }
@media (max-width: 600px) { .admin-bar .nag { top: calc(-1 * var(--pas-h)); } }

/* „Najnowsze z bloga” na stronie głównej */
.wz-start { padding-top: clamp(50px, 8vw, 100px); }
.wz-start .wz-nag { margin-bottom: 28px; }
.wz-start .wz-dol { margin-top: 26px; }

/* menu na komputerze: 8 pozycji (z „Blog”) — trochę ciaśniej, logo z odstępem */
@media (min-width: 1200px) { .logo { margin-right: 26px; flex: none; } .menu-el { padding: 0 9px; } }
@media (min-width: 1200px) and (max-width: 1439.98px) { .menu-el { padding: 0 7px; font-size: .88rem; } .logo-t strong { font-size: 1.08rem; } }

/* zdjęcia tła sekcji zawsze wypełniają sekcję (reguła „main .wp-block-image img {height:auto}” nie może ich skracać) */
main .hero .hero-foto, main .ph .ph-foto, main .fw .fw-foto { position: absolute; margin: 0; }
main .hero .hero-foto { inset: 0; }
main .hero .hero-foto img { width: 100%; height: 100% !important; object-fit: cover; object-position: 60% 100%; max-width: none; }
main .ph .ph-foto img, main .fw .fw-foto img { width: 100%; height: 100% !important; object-fit: cover; max-width: none; }
/* logotypy marek: stała wysokość w kafelku (wysokie logo Huawei wychodziło poza kafelek) — 18.10 */
.marki .wp-block-image img { height: 44px !important; width: auto !important; max-width: 140px; }
.marki-male .wp-block-image img { height: 36px !important; }
.marki-siatka .wp-block-image img { height: 56px !important; max-width: 100%; }
@media (max-width: 699.98px) { .marki-pas .wp-block-image img { height: 34px !important; max-width: 100%; } }

/* 18.10 wieczor - prosby klienta: mniejszy napis w hero, wiekszy odstep od JK TEAM, blok wysrodkowany w pionie;
   czwarty kafelek Magazyny energii (siatka 4 / 2 kolumny) */
/* marginesy z !important - reguly ukladu WP (is-layout-flow) zerowaly je */
.hero-w > .hero-nad { margin-bottom: 34px !important; }
.hero-w > .hero-h1 { font-size: clamp(2.3rem, 6.6vw, 5.6rem); line-height: .98; max-width: 14ch; margin-bottom: 34px !important; }
@media (min-width: 1100px) { .hero-w > .hero-nad { margin-top: auto !important; } .hero-w > .pory { margin-top: auto !important; } .hero-w > .hero-akcje { margin-bottom: 36px !important; } }
.os-karta .os-karta-pora { flex: 0 0 auto; }
@media (min-width: 600px) and (max-width: 1199.98px) { .os-karty { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (min-width: 1200px) { .os-karty { grid-template-columns: repeat(4, 1fr); gap: 20px; } .os-karta h3 { font-size: 1.3rem; } .os-kolo { width: 108px; height: 108px; top: -40px; } }