/* fonty.css */
/* Poppins (SIL Open Font License 1.1, assets/fonts/OFL.txt), pliki z Google Fonts, we wtyczce. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400-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: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500-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: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600-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: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700-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: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/poppins-800-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: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/poppins-800-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/poppins-900-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: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/poppins-900-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* hero.css */
/* LAB hero aslandi.pl v4 „Jak działa Twój dom”: film na całą szerokość (v4: wycena za rozdziałem, karta po wycieczce).
   Decyzje Igora 26.09.2026: film gra sam (bez przewijania), ma iść od krawędzi do krawędzi jak film
   w tle (ramka wyglądała nieprofesjonalnie), tekst z lewej. Film to plik wideo (wycieczka raz, potem
   pętla „dom pracuje”), a H1, oferta, wycena i rozdziały są prawdziwym HTML.
   Marka: sosna #123f2d, złoto #ceb472, Poppins. Nagłówek witryny bez zmian: na stronie głównej jest
   przezroczysty i leży na filmie. Ruch: tylko opacity i transform; krzywe Emila. */
.hs {
  --hs-sosna: #123f2d;
  --hs-sosna-2: #19583f;
  --hs-atrament: #1c3428;
  --hs-szary: #4e5f55;
  --hs-zloto: #ceb472;
  --hs-zloto-jasne: #ead9a4;
  --hs-zloto-tekst: #182e23;
  --hs-tlo: #f7f8f4;
  --hs-noc: #0b2a1d;
  --hs-hdr: 92px;
  --hs-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --hs-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 640px;
  max-height: 1100px;
  overflow: hidden;
  background: var(--hs-noc);
  color: #fff;
  font-family: Poppins, system-ui, sans-serif;
}
.hs *, .hs *::before, .hs *::after { box-sizing: border-box; }
.hs h1, .hs h2, .hs p { margin: 0; }
.hs a { color: inherit; -webkit-tap-highlight-color: transparent; }
.hs :focus-visible { outline: 3px solid var(--hs-zloto-jasne); outline-offset: 3px; border-radius: 6px; }

/* Film: plakat (pierwsza klatka) od razu, wideo nad nim, gdy gra; zasłona pod tekstem. */
.hs-film { position: absolute; inset: 0; }
.hs-plakat, .hs-plakat img, .hs-wideo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hs-plakat img, .hs-wideo { object-fit: cover; object-position: 64% 50%; }
.hs-wideo { opacity: 0; transition: opacity 420ms var(--hs-ease-out); }
.hs-wideo.jest { opacity: 1; }
.hs-zaslona { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 32, 22, 0.9) 0%, rgba(8, 32, 22, 0.8) 24%, rgba(8, 32, 22, 0.5) 40%, rgba(8, 32, 22, 0.12) 54%, rgba(8, 32, 22, 0) 62%),
    linear-gradient(180deg, rgba(8, 32, 22, 0.42) 0%, rgba(8, 32, 22, 0) 18%),
    linear-gradient(0deg, rgba(8, 32, 22, 0.62) 0%, rgba(8, 32, 22, 0) 30%); }

/* Tekst: opinie, H1, oferta, wycena — w pasie między nagłówkiem a rozdziałami (opinie nad H1 od 04.10.2026). */
.hs-tresc { position: absolute; z-index: 2; left: clamp(20px, 4.6vw, 80px); top: var(--hs-hdr); bottom: 196px;
  width: min(560px, 42vw); display: grid; gap: 18px; justify-items: start; align-content: center; container-type: inline-size; }
.hs h1 { font-size: clamp(30px, 1.5vw + 16px, 44px); font-size: clamp(24px, 7.4cqi, 48px); line-height: 1.1; font-weight: 600;
  letter-spacing: -0.015em; color: #fff; text-wrap: balance; text-align: left; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
.hs h1 em { font-style: normal; color: #fff; background: linear-gradient(transparent 70%, rgba(206, 180, 114, 0.7) 70%, rgba(206, 180, 114, 0.7) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hs-oferta { font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, 0.9); max-width: 34em; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35); }
.hs-btn:active, .hs-krok:active, .hs-pauza:active, .hs-od-poczatku:active { transform: scale(0.97); }
.hs-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.hs-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 13px 26px; border-radius: 8px; background: var(--hs-zloto);
  color: var(--hs-zloto-tekst); border: 1px solid rgba(255, 255, 255, 0.35); font-weight: 600; font-size: 16px; text-decoration: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28); transition: background-color 150ms ease, transform 120ms ease-out; }
/* Wycena za rozdziałem: druga linia z tematem; stała najmniejsza szerokość, więc zmiana tematu nie przesuwa układu. */
.hs-btn--temat { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-width: 236px; padding: 8px 24px 9px; line-height: 1.2; }
/* druga linia przycisku: od 02.10.2026 obietnica „w mniej niż 24 h” (nie temat), więc pełnym kolorem i grubością 600 */
.hs-btn-podpis { font-size: 12.5px; font-weight: 600; }
.hs-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 600; font-size: 17px; color: #fff; text-decoration: none; }
.hs-tel svg { width: 18px; height: 18px; flex: none; color: var(--hs-zloto-jasne); }
.hs-ocena { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255, 255, 255, 0.9); text-decoration: none; }
.hs-ocena b { font-weight: 600; }
.hs-gwiazdy svg { display: block; }
@media (hover: hover) and (pointer: fine) {
  .hs-btn:hover { background: #dbc58d; }
  .hs-tel:hover, .hs-ocena:hover { text-decoration: underline; text-underline-offset: 4px; }
  .hs-krok:not([aria-current]):hover { background: rgba(255, 255, 255, 0.18); }
  .hs-pauza:hover, .hs-od-poczatku:hover { background: rgba(9, 36, 24, 0.85); }
}

/* Rozdziały: przyciski z paskiem postępu i podpis bieżącego rozdziału (na dole, nad zasłoną). */
.hs-rozdzialy { position: absolute; z-index: 2; left: clamp(20px, 4.6vw, 80px); bottom: clamp(20px, 3.4vh, 40px); width: min(720px, 58vw);
  display: grid; gap: 10px; }
.hs-rozdzialy[hidden] { display: none; }
.hs-kroki { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-krok { position: relative; overflow: hidden; min-height: 38px; padding: 8px 14px 9px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.08); color: #fff; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 120ms ease-out; }
.hs-krok[aria-current="step"] { background: #fff; border-color: #fff; color: var(--hs-sosna); }
.hs-postep { position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--hs-zloto);
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.hs-krok.postep .hs-postep { animation: hs-postep var(--hs-czas, 6s) linear forwards; }
@keyframes hs-postep { from { transform: scaleX(var(--hs-od, 0)); } to { transform: scaleX(1); } }
.hs--stoi .hs-postep { animation-play-state: paused; }
.hs-podpis { position: relative; min-height: 3.2em; font-size: 15.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.92); max-width: 44em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); }
.hs-podpis b { font-weight: 600; color: #fff; }
.hs-podpis a { color: var(--hs-zloto-jasne); text-underline-offset: 3px; font-weight: 600; }
.hs-podpis > span { display: block; transition: opacity 260ms var(--hs-ease-out), transform 260ms var(--hs-ease-out); }
.hs-podpis.zmiana > span { opacity: 0; transform: translateY(4px); transition-duration: 120ms; }

/* Sterowanie filmem: pauza (WCAG 2.2.2) i powtórka wycieczki. */
.hs-sterowanie { position: absolute; z-index: 3; right: clamp(16px, 2.4vw, 32px); bottom: clamp(20px, 3.4vh, 40px); display: flex; gap: 10px; align-items: center; }
.hs-sterowanie[hidden] { display: none; }
.hs-pauza { width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(9, 36, 24, 0.62);
  color: #fff; display: grid; place-items: center; cursor: pointer; transition: background-color 150ms ease, transform 120ms ease-out; }
.hs-pauza svg { grid-area: 1 / 1; width: 18px; height: 18px; fill: currentColor; }
.hs-pauza .hs-ikona-graj, .hs--zatrzymany .hs-pauza .hs-ikona-pauza { display: none; }
.hs--zatrzymany .hs-pauza .hs-ikona-graj { display: block; }
.hs-od-poczatku { min-height: 46px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(9, 36, 24, 0.62);
  color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 150ms ease, transform 120ms ease-out; }
.hs-od-poczatku[hidden] { display: none; }

/* Karta po wycieczce (raz na wizytę): nad sterowaniem, w prawej części filmu, poza tekstem strony. */
.hs-karta { position: absolute; z-index: 4; right: clamp(16px, 2.4vw, 32px); bottom: calc(clamp(20px, 3.4vh, 40px) + 62px); width: min(380px, calc(100% - 32px));
  padding: 20px 22px 18px; border-radius: 14px; background: rgba(255, 255, 255, 0.97); color: var(--hs-atrament); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
  display: grid; gap: 8px; opacity: 0; transform: translateY(10px); transition: opacity 320ms var(--hs-ease-out), transform 320ms var(--hs-ease-out); }
.hs-karta[hidden] { display: none; }
.hs-karta.widoczna { opacity: 1; transform: none; }
.hs-karta-tytul { font-size: 19px; font-weight: 600; line-height: 1.25; color: var(--hs-sosna); padding-right: 28px; }
.hs-karta-tekst { font-size: 14.5px; line-height: 1.5; color: var(--hs-atrament); }
.hs-karta-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 6px; }
.hs-karta .hs-btn { min-height: 46px; padding: 11px 20px; font-size: 15.5px; box-shadow: 0 8px 20px rgba(18, 63, 45, 0.22); border-color: rgba(18, 63, 45, 0.35); }
.hs-karta .hs-tel { color: var(--hs-sosna); font-size: 16px; min-height: 44px; }
.hs-karta .hs-tel svg { color: var(--hs-sosna); }
.hs-karta-zamknij { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent;
  color: var(--hs-szary); display: grid; place-items: center; cursor: pointer; }
.hs-karta-zamknij svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
@media (hover: hover) and (pointer: fine) { .hs-karta-zamknij:hover { background: rgba(18, 63, 45, 0.08); } }

/* Bez JS: plakat, tekst i lista rozdziałów pod filmem. Z JS lista jest źródłem danych rozdziałów.
   Tylko przy wyłączonych skryptach (scripting: none): przy włączonych układ od pierwszego malowania jest taki jak po
   hero.js, bez skoku wysokości hero, gdy skrypt startuje (na telefonie ~950 px, CLS w PageSpeed, 09.10.2026). */
.hs-lista { display: none; }
@media (scripting: none) {
  .hs:not(.hs--js) { height: auto; max-height: none; min-height: 100svh; }
  .hs:not(.hs--js) .hs-lista { display: grid; position: relative; z-index: 2; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px 28px;
    margin: 0 clamp(20px, 4.6vw, 80px); padding: 24px 0 40px; margin-top: calc(100svh - 120px); }
}
.hs-lista h2 { font-size: 18px; margin-bottom: 4px; }
.hs-lista p { font-size: 15px; line-height: 1.5; }
.hs-linki { display: flex; flex-wrap: wrap; gap: 2px 16px; } /* dwa linki w rozdziale nie sklejają się (lista bez JS) */

/* Tablet i telefon: film od krawędzi do krawędzi u góry (pod przezroczystym nagłówkiem), pod nim tekst i rozdziały. */
@media (max-width: 1180px) {
  .hs { --hs-hdr: 76px; }
}
@media (max-width: 1023px) {
  .hs { height: auto; min-height: 0; max-height: none; overflow: visible; background: var(--hs-tlo); color: var(--hs-atrament); display: flex; flex-direction: column; }
  .hs-film { position: relative; inset: auto; order: 1; width: 100%; aspect-ratio: 1 / 1; max-height: 72svh; overflow: hidden; background: var(--hs-noc); }
  .hs-plakat img, .hs-wideo { object-position: 50% 50%; }
  .hs-zaslona { background: linear-gradient(180deg, rgba(8, 32, 22, 0.55) 0%, rgba(8, 32, 22, 0) 26%), linear-gradient(0deg, rgba(8, 32, 22, 0.35) 0%, rgba(8, 32, 22, 0) 22%); }
  .hs-rozdzialy { position: static; order: 2; width: auto; padding: 12px clamp(16px, 4vw, 32px) 0; gap: 8px; }
  .hs-kroki { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * clamp(16px, 4vw, 32px)); padding: 2px clamp(16px, 4vw, 32px); }
  .hs-kroki::-webkit-scrollbar { display: none; }
  .hs-krok { flex: none; border-color: #d4ddce; background: #fff; color: var(--hs-szary); }
  .hs-krok[aria-current="step"] { background: var(--hs-sosna); border-color: var(--hs-sosna); color: #fff; }
  .hs-podpis { color: var(--hs-atrament); text-shadow: none; font-size: 14.5px; min-height: 0; }
  .hs-podpis b { color: var(--hs-sosna); }
  .hs-podpis a { color: var(--hs-sosna-2); }
  .hs-tresc { position: static; order: 3; width: auto; max-width: 640px; padding: 18px clamp(16px, 4vw, 32px) 30px; gap: 14px; }
  .hs h1 { color: var(--hs-sosna); text-shadow: none; }
  .hs h1 em { color: var(--hs-sosna); background: linear-gradient(transparent 68%, rgba(206, 180, 114, 0.55) 68%, rgba(206, 180, 114, 0.55) 92%, transparent 92%); }
  .hs-oferta { color: var(--hs-atrament); text-shadow: none; }
  .hs-btn { border-color: rgba(18, 63, 45, 0.45); box-shadow: 0 8px 22px rgba(18, 63, 45, 0.22); }
  .hs-tel { color: var(--hs-sosna); }
  .hs-tel svg { color: var(--hs-sosna); }
  .hs-ocena { color: var(--hs-atrament); }
  /* przy dolnej krawędzi filmu (film ma wysokość min(100vw, 72svh)) */
  .hs-sterowanie { top: calc(min(100vw, 72svh) - 56px); bottom: auto; right: 12px; }
  /* karta nakłada się na dolną część filmu, nad sterowaniem (nie przesuwa treści pod filmem) */
  .hs-karta { top: calc(min(100vw, 72svh) - 64px); bottom: auto; right: 12px; left: 12px; width: auto; transform: translateY(calc(-100% + 10px)); }
  .hs-karta.widoczna { transform: translateY(-100%); }
  @media (scripting: none) { .hs:not(.hs--js) .hs-lista { margin-top: 0; color: var(--hs-atrament); } }
}
@media (max-width: 767px) {
  .hs-oferta { font-size: 15.5px; line-height: 1.5; }
  .hs-btn { min-height: 48px; padding: 12px 20px; font-size: 15.5px; }
  .hs-btn--temat { min-width: 214px; padding: 7px 20px 8px; }
  /* na telefonie karta leży na filmie, więc jest zwarta: tytuł, wycena i telefon (opis jest w H1 i ofercie pod filmem) */
  .hs-karta { padding: 14px 16px 12px; gap: 4px; }
  .hs-karta-tytul { font-size: 17px; }
  .hs-karta-tekst { display: none; }
  .hs-karta-akcje { margin-top: 4px; gap: 6px 16px; }
  .hs-tel { font-size: 16px; }
  .hs-ocena { font-size: 13px; }
  .hs-krok { min-height: 36px; padding: 7px 12px 8px; font-size: 13px; }
  .hs-pauza { width: 42px; height: 42px; }
  .hs-od-poczatku { min-height: 42px; font-size: 13px; padding: 8px 14px; }
}
/* ===== Wariant B (28.09.2026, polecenie Igora): podział zamiast filmu pod tekstem. Z lewej panel marki
   (ok. 1/3: nagłówek, oferta, pytanie, wycena, opinie), z prawej film. Dawid Jarząbek stoi na styku
   panelu i filmu: prawdziwy wycięty portret z aslandi.pl, głowa po stronie filmu, poza kolumną tekstu.
   Styk w trzech wariantach (klasa hs--szew-*): łagodny gradient, linia energii (jak prąd w filmie),
   czysta krawędź. Telefon i tablet: ten sam układ obrócony o 90° (blok „Wariant B na telefonie” niżej). */
.hs--dzielony { --hs-panel: clamp(400px, 34vw, 620px); --hs-pad: clamp(28px, 2.9vw, 56px); --hs-dawid-h: clamp(240px, 48svh, 540px); }
.hs-szew, .hs-dawid { display: none; }
@media (min-width: 1024px) {
  .hs--dzielony::before { content: ""; position: absolute; z-index: 1; inset: 0 auto 0 0; width: var(--hs-panel);
    background: radial-gradient(90% 55% at 0% 0%, rgba(206, 180, 114, 0.14), rgba(206, 180, 114, 0) 70%),
      linear-gradient(180deg, var(--hs-sosna) 0%, #0e3526 55%, #0c2e21 100%); }
  .hs--dzielony .hs-film { left: var(--hs-panel); }
  .hs--dzielony .hs-plakat img, .hs--dzielony .hs-wideo { object-position: 100% 50%; }
  .hs--dzielony .hs-zaslona { background: linear-gradient(180deg, rgba(8, 32, 22, 0.74) 0%, rgba(8, 32, 22, 0.42) 9%, rgba(8, 32, 22, 0) 22%), linear-gradient(0deg, rgba(8, 32, 22, 0.7) 0%, rgba(8, 32, 22, 0.35) 14%, rgba(8, 32, 22, 0) 30%); }
  .hs--dzielony .hs-tresc { left: var(--hs-pad); width: calc(var(--hs-panel) - 2 * var(--hs-pad)); bottom: auto;
    align-content: start; padding-top: clamp(20px, 5.5svh, 64px); gap: 16px; }
  .hs--dzielony h1 { font-size: clamp(28px, 9.6cqi, 46px); line-height: 1.08; text-shadow: none; }
  .hs--dzielony .hs-oferta { font-size: 16px; text-shadow: none; }
  .hs--dzielony .hs-rozdzialy { left: calc(var(--hs-panel) + var(--hs-dawid-h) * 0.55 + 32px); right: 96px; width: auto; }
  .hs--dzielony .hs-podpis { max-width: 40em; }

  .hs--dzielony .hs-dawid { display: block; position: absolute; z-index: 3; margin: 0; bottom: 0; height: var(--hs-dawid-h);
    aspect-ratio: 722 / 1000; left: calc(var(--hs-panel) - var(--hs-dawid-h) * 0.1733); pointer-events: none; }
  .hs--dzielony .hs-dawid img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
    -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
    filter: drop-shadow(0 20px 34px rgba(6, 34, 22, 0.5)); }
  .hs--dzielony .hs-dawid-podpis { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); display: grid; justify-items: center; gap: 1px;
    padding: 8px 15px 9px; border-radius: 12px; background: rgba(255, 255, 255, 0.95); color: var(--hs-sosna); white-space: nowrap;
    box-shadow: 0 8px 24px rgba(6, 34, 22, 0.28); font-size: 12.5px; line-height: 1.25; }
  .hs--dzielony .hs-dawid-podpis b { font-size: 14.5px; font-weight: 600; }

  .hs--dzielony .hs-szew { display: block; position: absolute; z-index: 2; top: var(--hs-hdr); bottom: calc(var(--hs-dawid-h) + 14px); left: var(--hs-panel); width: 2px; margin-left: -1px;
    pointer-events: none; }
  .hs--szew-lagodny .hs-szew { display: none; }
  .hs--szew-lagodny .hs-zaslona { background: linear-gradient(90deg, #0e3526 0, rgba(14, 53, 38, 0.7) 70px, rgba(14, 53, 38, 0) 200px), linear-gradient(180deg, rgba(8, 32, 22, 0.74) 0%, rgba(8, 32, 22, 0.42) 9%, rgba(8, 32, 22, 0) 22%), linear-gradient(0deg, rgba(8, 32, 22, 0.7) 0%, rgba(8, 32, 22, 0.35) 14%, rgba(8, 32, 22, 0) 30%); }
  /* bez pasa przyciemnienia przy styku: za Dawidem czytał się jako półprzezroczysty prostokąt (Igor 28.09); styk zaznacza sama linia energii */
  .hs--szew-energia .hs-zaslona { background: linear-gradient(180deg, rgba(8, 32, 22, 0.74) 0%, rgba(8, 32, 22, 0.42) 9%, rgba(8, 32, 22, 0) 22%), linear-gradient(0deg, rgba(8, 32, 22, 0.7) 0%, rgba(8, 32, 22, 0.35) 14%, rgba(8, 32, 22, 0) 30%); }
  .hs--szew-energia .hs-szew { background: linear-gradient(180deg, rgba(206, 180, 114, 0) 0%, rgba(206, 180, 114, 0.75) 18%, rgba(79, 232, 127, 0.7) 55%,
      rgba(206, 180, 114, 0.75) 82%, rgba(206, 180, 114, 0) 100%); box-shadow: 0 0 12px rgba(79, 232, 127, 0.35); }
  .hs--szew-energia .hs-szew::after { content: ""; position: absolute; left: -3px; top: 0; width: 8px; height: 160px; border-radius: 8px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(214, 255, 226, 0.95), rgba(79, 232, 127, 0.55) 45%, rgba(79, 232, 127, 0) 100%);
    transform: translateY(-160px); animation: hs-impuls 6.5s var(--hs-ease-in-out) infinite; }
  .hs--stoi.hs--szew-energia .hs-szew::after { animation-play-state: paused; }
  .hs--szew-kadr .hs-szew { width: 1px; margin-left: 0; background: rgba(206, 180, 114, 0.7); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  /* małe laptopy: węższy panel i mniejszy Dawid, żeby film zostawił miejsce na rozdziały; opis rozdziału chowamy (jest w liście bez JS) */
  .hs--dzielony { --hs-panel: 380px; --hs-dawid-h: clamp(200px, 34svh, 300px); }
  .hs--dzielony h1 { font-size: clamp(24px, 8cqi, 30px); }
}
/* Wariant B, poprawki 28.09: przycisk wyceny zawsze z ciemnym tekstem (reguła .hs a { color: inherit } dawała
   biały na złocie, 2:1), tekst bez sierot, brandowe liście w panelu, pełniejsze nieaktywne rozdziały nad filmem. */
.hs .hs-btn { color: var(--hs-zloto-tekst); }
.hs .hs-btn-podpis { opacity: 1; }
.hs-oferta, .hs-podpis, .hs-lista p { text-wrap: pretty; }
@media (min-width: 1024px) {
  /* brandowe liście (Igor 28.09: fotografia jak ściana zieleni w biurze Aslandi, nie grafika liniowa):
     zdjęcie paproci z Gemini (liscie/L-D.png, wzór stylu DSC_5614 z aslandi.pl), półprzezroczyste na sośnie,
     z czystą górą panelu pod nagłówek; liście wychodzą od dołu, za Dawidem */
  .hs--dzielony::after { content: ""; position: absolute; z-index: 1; inset: 0 auto 0 0; width: var(--hs-panel); pointer-events: none; opacity: 0.41;
    background: linear-gradient(90deg, rgba(14, 53, 38, 0.62) 0%, rgba(14, 53, 38, 0.34) 58%, rgba(14, 53, 38, 0) 88%),
      url("../media/liscie-panel.webp") no-repeat center bottom / cover;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.2) 38%, #000 80%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.2) 38%, #000 80%); }
  /* mały tekst na liściach: lekki cień dla kontrastu (pomiar 28.09: opinie 3,8:1 na najjaśniejszych liściach) */
  .hs--dzielony .hs-ocena, .hs--dzielony .hs-tresc .hs-tel, .hs--dzielony .hs-oferta, .hs--dzielony .hs-godziny { text-shadow: 0 1px 10px rgba(6, 24, 16, 0.6), 0 0 2px rgba(6, 24, 16, 0.5); }
  .hs--dzielony .hs-krok:not([aria-current="step"]) { background: rgba(12, 46, 33, 0.74); border-color: rgba(255, 255, 255, 0.3); }
}
@media (min-width: 1024px) and (max-width: 1599px) {
  /* rozdziały w jednym rzędzie obok Dawida */
  .hs--dzielony .hs-kroki { gap: 5px; }
  .hs--dzielony .hs-krok { padding: 7px 12px 8px; font-size: 13.5px; }
}
@media (min-width: 1024px) {
  /* 28.09 (zrzut Igora po wycieczce): karta „Tak może pracować Twój dom” i sterowanie w prawym górnym rogu filmu,
     pod nagłówkiem; dół części filmowej zostaje dla rozdziałów obok Dawida */
  .hs--dzielony .hs-sterowanie { top: calc(var(--hs-hdr) + 18px); bottom: auto; }
  .hs--dzielony .hs-karta { top: calc(var(--hs-hdr) + 80px); bottom: auto; }
  .hs--dzielony .hs-rozdzialy { right: 32px; }
}
/* Wariant B, 28.09: pod telefonem godziny biura z żywym statusem (czas polski), małe i ciche; ikonka Google przy opiniach */
.hs-kontakt { flex: 1 0 100%; display: grid; justify-items: start; }
/* od 04.10.2026 sam status (Igor: bez stałej listy godzin, „wystarczy interaktywne zgodne z czasem polskim”); status
   pokazuje skrypt po pierwszym malowaniu, więc miejsce na jego dwie linie jest od początku (nic pod nim nie podjeżdża) */
.hs-godziny { display: grid; gap: 2px; min-height: calc(2 * 1.5 * 13px); margin: -4px 0 0; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.76); }
.hs-status a { white-space: nowrap; }
.hs-status { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.95); }
.hs-status[hidden], .hs-status-poza[hidden] { display: none; }
/* skrót dalszego dnia („w pon.”) tylko na telefonie (układ E); poza nim pełna nazwa */
.hs-dzien-krotki { display: none; }
.hs-status-kropka { display: inline-block; width: 7px; height: 7px; margin: 0 8px 1px 1px; border-radius: 50%; vertical-align: middle; background: var(--hs-zloto); }
.hs-status.otwarte .hs-status-kropka { background: #4fe87f; box-shadow: 0 0 0 3px rgba(79, 232, 127, 0.2); }
.hs-status a { color: var(--hs-zloto-jasne); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* opinie: pełne logo Google (02.10, zamiast ikonki „G”) */
.hs-google-logo { display: block; flex: none; width: 62px; height: 20px; min-width: 62px; }
.hs-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (min-width: 1024px) {
  /* wycena, telefon z godzinami i opinie leżą na wysokości Dawida: kończą się przed jego obrazem na styku */
  .hs--dzielony .hs-akcje, .hs--dzielony .hs-ocena { max-width: calc(var(--hs-panel) - var(--hs-dawid-h) * 0.1733 - var(--hs-pad) - 12px); }
  /* opinie nad H1 (Igor 04.10.2026): dowód przed obietnicą; 14 px do nagłówka, bliżej niż reszta odstępów panelu,
     więc czyta się jak jego wstęp, nie osobny element */
  .hs--dzielony .hs-ocena { margin-bottom: -2px; }
}
/* Dotyk (mobile-native, próg labu 44 px): po możliwości wskaźnika, nie po szerokości ekranu. Kontrolki bez mignięcia
   przy dotknięciu, bez opóźnienia kliknięcia i bez zaznaczania etykiety przy przytrzymaniu. */
.hs button, .hs .hs-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
@media (pointer: coarse) {
  .hs .hs-krok { min-height: 44px; }
  .hs .hs-pauza { width: 44px; height: 44px; }
  .hs .hs-od-poczatku { min-height: 44px; }
  .hs .hs-karta-zamknij { width: 44px; height: 44px; top: 6px; right: 6px; }
}
/* Wariant B, 28.09 (Igor): rozdziały wyśrodkowane w części filmu na prawo od Dawida, żeby nie tłoczyły się przy panelu;
   opisy rozdziałów na razie bez widoku. Podpis zostaje dla czytników ekranu: po wyborze rozdziału ogłasza jego treść.
   Karta po wycieczce na razie poza hero (usunięty znacznik aside.hs-karta; jej style i obsługa w JS czekają). */
.hs--dzielony .hs-podpis { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (min-width: 1024px) {
  .hs--dzielony .hs-kroki { justify-content: center; }
}
@keyframes hs-impuls-poziomo { 0% { transform: translateX(-160px); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(calc(100vw + 20px)); opacity: 0; } }
@keyframes hs-impuls { 0% { transform: translateY(-160px); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(110svh); opacity: 0; } }
/* ===== Wariant B na telefonie i tablecie (28.09, pytanie Igora, jak ułożyć hero na telefonach): układ komputera
   obrócony o 90°. U góry panel marki (sosna i liście): nagłówek, opinie Google, wycena i telefon z godzinami, obok
   Dawid stojący na styku; pod panelem film z linią energii na styku; pod filmem rozdziały i podpis o stałej wysokości.
   Nagłówek, wycena i telefon mieszczą się w pierwszym ekranie każdego telefonu, film zaczyna się tuż pod nimi. */
@media (max-width: 1023px) {
  .hs--dzielony { --hs-g: clamp(16px, 4vw, 32px); --hs-hdr: 77px; --hs-dawid-h: clamp(160px, 46vw, 240px); --hs-dawid-w: calc(var(--hs-dawid-h) * 0.722);
    display: grid; grid-template-columns: var(--hs-g) minmax(0, 1fr) auto var(--hs-g); align-items: start; }
  /* panel: sosna i zdjęcie liści jak na komputerze (liście w dolnej części, nagłówek na czystym tle) */
  .hs--dzielony::before, .hs--dzielony::after { content: ""; position: absolute; z-index: 0; grid-row: 1 / 2; grid-column: 1 / -1; inset: 0; pointer-events: none; }
  .hs--dzielony::before { background: radial-gradient(120% 60% at 0% 0%, rgba(206, 180, 114, 0.14), rgba(206, 180, 114, 0) 70%),
      linear-gradient(180deg, var(--hs-sosna) 0%, #0e3526 60%, #0c2e21 100%); }
  .hs--dzielony::after { opacity: 0.41;
    background: linear-gradient(90deg, rgba(14, 53, 38, 0.62) 0%, rgba(14, 53, 38, 0.34) 58%, rgba(14, 53, 38, 0) 88%),
      url("../media/liscie-panel.webp") no-repeat center 72% / cover;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.2) 38%, #000 80%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.2) 38%, #000 80%); }
  .hs--dzielony .hs-tresc { grid-row: 1; grid-column: 2 / 4; position: relative; inset: auto; z-index: 2; width: auto; max-width: none;
    padding: calc(var(--hs-hdr) + 14px) 0 20px; gap: 14px; align-content: start; }
  .hs--dzielony h1 { color: #fff; }
  .hs--dzielony h1 em { color: #fff; background: linear-gradient(transparent 70%, rgba(206, 180, 114, 0.7) 70%, rgba(206, 180, 114, 0.7) 92%, transparent 92%); }
  /* kolejność na telefonie: opinie, nagłówek (od 04.10.2026 opinie nad H1 jak na komputerze), (oferta na tablecie),
     wycena z telefonem obok Dawida */
  .hs--dzielony .hs-ocena { margin-bottom: -2px; color: rgba(255, 255, 255, 0.92); }
  .hs--dzielony .hs-oferta { order: 2; color: rgba(255, 255, 255, 0.9); }
  .hs--dzielony .hs-akcje { order: 3; width: calc(100% - var(--hs-dawid-w) - 10px); min-height: var(--hs-dawid-h); align-content: center; row-gap: 10px; }
  .hs--dzielony .hs-akcje .hs-btn { width: 100%; min-width: 0; }
  .hs--dzielony .hs-btn-podpis { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hs--dzielony .hs-tresc .hs-tel { color: #fff; }
  .hs--dzielony .hs-tresc .hs-tel svg { color: var(--hs-zloto-jasne); }
  .hs--dzielony .hs-godziny { color: rgba(255, 255, 255, 0.76); }
  .hs--dzielony .hs-status { color: rgba(255, 255, 255, 0.95); }
  .hs--dzielony .hs-status a { color: var(--hs-zloto-jasne); }
  .hs--dzielony .hs-ocena, .hs--dzielony .hs-tresc .hs-tel, .hs--dzielony .hs-oferta, .hs--dzielony .hs-godziny { text-shadow: 0 1px 10px rgba(6, 24, 16, 0.6), 0 0 2px rgba(6, 24, 16, 0.5); }
  /* Dawid stoi na styku panelu i filmu, po prawej od wyceny i telefonu (nie wyżej niż ich blok) */
  .hs--dzielony .hs-dawid { display: block; grid-row: 1; grid-column: 3; align-self: end; position: relative; z-index: 3; margin: 0;
    width: var(--hs-dawid-w); height: var(--hs-dawid-h); max-width: none; background: none; border-radius: 0; overflow: visible; pointer-events: none; }
  .hs--dzielony .hs-dawid img { position: static; display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
    filter: drop-shadow(0 14px 22px rgba(6, 34, 22, 0.45)); }
  .hs--dzielony .hs-dawid-podpis { position: absolute; left: 50%; top: auto; bottom: 9%; transform: translateX(-50%); display: grid; justify-items: center; gap: 0;
    max-width: none; padding: 6px 11px 7px; border-radius: 10px; background: rgba(255, 255, 255, 0.95); color: var(--hs-sosna); white-space: nowrap;
    box-shadow: 0 6px 18px rgba(6, 34, 22, 0.28); font-size: 11px; line-height: 1.25; }
  .hs--dzielony .hs-dawid-podpis b { font-size: 12.5px; font-weight: 600; color: var(--hs-sosna); }
  /* film pod panelem; sterowanie i karta po wycieczce leżą na jego dolnej krawędzi */
  .hs--dzielony .hs-film { grid-row: 2; grid-column: 1 / -1; }
  .hs--dzielony .hs-zaslona { background: linear-gradient(0deg, rgba(8, 32, 22, 0.42) 0%, rgba(8, 32, 22, 0) 24%); }
  .hs--dzielony .hs-sterowanie { grid-row: 2 / 3; grid-column: 1 / -1; top: auto; bottom: 12px; right: 12px; left: auto; }
  .hs--dzielony .hs-karta { grid-row: 2 / 3; grid-column: 1 / -1; top: auto; bottom: 66px; left: 12px; right: 12px; transform: translateY(10px); }
  .hs--dzielony .hs-karta.widoczna { transform: none; }
  .hs--dzielony .hs-rozdzialy { grid-row: 3; grid-column: 1 / -1; padding: 12px var(--hs-g) 20px; }
  .hs--dzielony .hs-lista { grid-row: 4; grid-column: 2 / 4; }
  /* elementy z position: absolute w siatce: pole to jawny zakres linii (samo grid-row: 2 sięgałoby do dołu sekcji) */
  /* styk poziomy: linia na górnej krawędzi filmu (pudełko 26 px przycina impuls, żeby nie wychodził poza ekran) */
  .hs--dzielony .hs-szew { display: block; position: absolute; z-index: 4; grid-row: 2 / 3; grid-column: 1 / -1; top: -13px; bottom: auto; left: 0; right: 0;
    width: auto; height: 26px; margin: 0; overflow: hidden; background: none; box-shadow: none; pointer-events: none; }
  .hs--dzielony .hs-szew::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 2px; }
  .hs--szew-energia.hs--dzielony .hs-szew::before { background: linear-gradient(90deg, rgba(206, 180, 114, 0) 0%, rgba(206, 180, 114, 0.75) 18%,
      rgba(79, 232, 127, 0.7) 55%, rgba(206, 180, 114, 0.75) 82%, rgba(206, 180, 114, 0) 100%); box-shadow: 0 0 12px rgba(79, 232, 127, 0.35); }
  .hs--szew-energia.hs--dzielony .hs-szew::after { content: ""; position: absolute; left: 0; top: 9px; width: 160px; height: 8px; border-radius: 8px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(214, 255, 226, 0.95), rgba(79, 232, 127, 0.55) 45%, rgba(79, 232, 127, 0) 100%);
    transform: translateX(-160px); animation: hs-impuls-poziomo 6.5s var(--hs-ease-in-out) infinite; }
  .hs--stoi.hs--szew-energia.hs--dzielony .hs-szew::after { animation-play-state: paused; }
  .hs--szew-kadr.hs--dzielony .hs-szew::before { top: 12.5px; height: 1px; background: rgba(206, 180, 114, 0.7); }
  .hs--szew-lagodny.hs--dzielony .hs-szew { display: none; }
}
@media (max-width: 767px) {
  /* telefon: oferta jest w karcie po wycieczce i w rozdziałach; w panelu zostaje nagłówek, opinie, wycena i telefon */
  .hs--dzielony .hs-oferta { display: none; }
  .hs--dzielony .hs-btn--temat { padding: 7px 16px 8px; }
}
@media (max-width: 374px) {
  /* wąskie telefony (360 px i mniej): nagłówek w 3 liniach, nie w 4 („i Spółdzielnia Energetyczna” w jednej linii) */
  .hs--dzielony h1 { font-size: 22.5px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  /* tablet: przycisk w rozmiarze z komputera, Dawid tak wysoki jak blok wyceny i telefonu (bez pustego pasa obok) */
  .hs--dzielony { --hs-dawid-h: 210px; }
  .hs--dzielony .hs-akcje .hs-btn { width: auto; min-width: 236px; }
}
@media (max-width: 1023px) and (orientation: landscape) {
  /* telefon w poziomie: film 16:9 w całości, bez przycinania kwadratu do paska */
  .hs--dzielony .hs-film { aspect-ratio: 16 / 9; max-height: none; }
}
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 520px) {
  /* niski ekran: nagłówek mniejszy, bez oferty, żeby wycena i telefon zmieściły się w pierwszym ekranie */
  .hs--dzielony { --hs-dawid-h: 170px; }
  .hs--dzielony h1 { font-size: 30px; }
  .hs--dzielony .hs-oferta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hs *, .hs *::before, .hs *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
}

/* LAB: przycisk „do góry” motywu Astra zasłania kontrolki na telefonie; w labie ukryty. */
#ast-scroll-top { display: none !important; }

/* ---- Poprawki 30.09.2026 (wątek strony głównej, polecenie Igora) ----
   Przycisk wyceny: „cta przycisk musi być wyraźniejszy, bo się trochę zlewa”. Złoto przycisku (#ceb472) ma prawie tę samą
   jasność co złoty poblask panelu i liście, więc przycisk dostaje oddzielenie, nie nowy kolor: jaśniejszą górę z drugiego
   złota marki, jasną krawędź, cień pod spodem i złotą aureolę, większą wysokość i pogrubiony napis, a po prawej sosnowe
   kółko ze strzałką (ciemny, wyraźny znak „dalej”). Jeden błysk przez przycisk po wejściu na stronę (raz), potem błysk
   i przesunięcie strzałki przy najechaniu; przy ograniczonym ruchu bez błysku. */
.hs-btn--temat { position: relative; overflow: hidden; isolation: isolate; min-height: 60px; padding: 9px 66px 10px 24px;
  background: linear-gradient(180deg, #e4d097 0%, var(--hs-zloto) 100%); border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 14px 30px -12px rgba(0, 0, 0, 0.7), 0 0 0 4px rgba(206, 180, 114, 0.2); }
.hs-btn--temat .hs-btn-glowny { font-size: 17px; font-weight: 700; letter-spacing: -0.005em; }
.hs-btn-strzalka { position: absolute; right: 12px; top: 50%; width: 38px; height: 38px; margin-top: -19px; border-radius: 50%;
  background: var(--hs-sosna); display: grid; place-items: center; }
.hs-btn-strzalka svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 200ms var(--hs-ease-out); }
.hs-btn--temat::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.6) 48%, transparent 66%); transform: translateX(-130%); }
@media (prefers-reduced-motion: no-preference) {
  .hs-btn--temat::before { animation: hs-blysk 1100ms var(--hs-ease-in-out) 1800ms 1 both; }
}
@keyframes hs-blysk { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@media (hover: hover) and (pointer: fine) {
  .hs-btn--temat:hover { background: linear-gradient(180deg, #ead9a4 0%, #d6bf82 100%); }
  .hs-btn--temat:hover .hs-btn-strzalka svg { transform: translateX(3px); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hs-btn--temat:hover::before { animation: hs-blysk-2 900ms var(--hs-ease-in-out) 1 both; }
  @keyframes hs-blysk-2 { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
}
/* Link dla szukających spółdzielni (Igor 30.09: spółdzielnia ma osobną stronę, „przełącznik na aslandi.com”): cichy, pod
   opiniami, nie konkuruje z wyceną; cel dotyku 44 px. */
.hs-spoldzielnia { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; color: rgba(255, 255, 255, 0.82);
  text-decoration: none; text-shadow: 0 1px 10px rgba(6, 24, 16, 0.6); }
.hs-spoldzielnia span { color: var(--hs-zloto-jasne); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.hs-spoldzielnia span::after { content: " \2192"; }
.hs--dzielony .hs-spoldzielnia, .hs--dzielony .hs-spoldzielnia:visited { color: rgba(255, 255, 255, 0.84); }
.hs--dzielony .hs-spoldzielnia span { color: var(--hs-zloto-jasne); }
@media (hover: hover) and (pointer: fine) { .hs--dzielony .hs-spoldzielnia:hover span { color: #fff; } }
/* telefon i tablet: kolumna obok Dawida jest wąska, więc mniejsze kółko strzałki i mniejszy zapas na nie; link spółdzielni
   w tej samej kolumnie co przycisk i telefon (pod nimi), nie na pełnej szerokości pod Dawidem */
@media (max-width: 1023px) {
  .hs--dzielony .hs-akcje .hs-btn--temat { padding: 8px 46px 9px 16px; min-height: 58px; }
  .hs--dzielony .hs-btn--temat .hs-btn-glowny { font-size: 15.5px; white-space: nowrap; }
  .hs--dzielony .hs-btn-strzalka { right: 9px; width: 30px; height: 30px; margin-top: -15px; }
  .hs--dzielony .hs-btn-strzalka svg { width: 16px; height: 16px; }
  .hs--dzielony .hs-spoldzielnia { order: 4; width: calc(100% - var(--hs-dawid-w, 0px) - 10px); flex-wrap: wrap; column-gap: 6px; row-gap: 0;
    line-height: 1.35; margin-top: -4px; }
}
/* Telefon, układ E (Igor 02.10.2026, wybrany z prototypu hero/v5b-mobile: „wersja, że film jest pierwszy, a potem sekcja
   ta zielona”): film tuż pod paskiem witryny, rozdziały jako paski postępu na górze filmu (wszystkie widoczne naraz,
   jak w relacjach), pod filmem zielony panel: opinie, nagłówek, wycena i telefon obok Dawida (150 px). Bez listy godzin biura
   i linku spółdzielni na telefonie (od 02.10 pod numerem sam status: czy teraz odbieramy) (spółdzielnia jest w menu witryny i w ostatnim rozdziale filmu). Pomiar z Poppins
   i nagłówkiem witryny 56 px: film widać w 100% na iPhonie z paskami Safari (390 × 664), Androidzie (412 × 780)
   i małym telefonie (360 × 640), wycena w pierwszym ekranie na wszystkich trzech. Tablet i komputer bez zmian.
   Bez klasy hs--tel-film-u-gory w znaczniku wraca dawny układ telefonu.
   02.10, druga poprawka (Igor: „usuń z góry te napisy… na razie z mobile… od góry jeszcze przyciął wysokość całego
   filmu i delikatnie, minimalnie od dołu”): nad filmem same cienkie paski postępu rozdziałów (nazwy zostają tekstem
   przycisków dla czytników ekranu); film przycięty o 150 px z góry i 30 z dołu kadru 1080 × 1080 (6 : 5, na iPhonie
   325 px zamiast 390). Pinezki filmu leżą w strefie y 240–900 kadru (aslandi-video-lab, HeroDomV4.jsx, STREFA.telefon),
   więc zostają pod paskami z zapasem, a plakietka „Montaż Aslandi” i „Ogrzewanie podłogowe” nad przyciskiem pauzy;
   sprawdzone na 11 chwilach filmu na telefonach 390 i 360 (hero/v5b-mobile/przyciecie.mjs). */
@media (max-width: 767px) {
  .hs--tel-film-u-gory { --hs-dawid-h: 150px; }
  .hs--tel-film-u-gory .hs-spoldzielnia { display: none; }
  /* status pod numerem: kropka na lewym brzegu (7 px i 9 px odstępu), każda linia tekstu równo po kropce, także
     zawinięta; „Zostaw numer, oddzwonimy” w osobnej linii. Tylko bez hidden: w godzinach pracy dopisek jest ukryty */
  .hs--tel-film-u-gory .hs-status:not([hidden]) { display: block; padding-left: 16px; text-indent: -16px; }
  .hs--tel-film-u-gory .hs-status-poza:not([hidden]) { display: block; text-indent: 0; }
  .hs--tel-film-u-gory .hs-film { grid-row: 1; margin-top: var(--hs-hdr); aspect-ratio: 1080 / 900; }
  /* cięcie 150 px z góry i 30 z dołu: położenie 150 / (150 + 30) = 83,333% */
  .hs--tel-film-u-gory :is(.hs-plakat img, .hs-wideo) { object-position: 50% 83.333%; }
  /* elementy z position: absolute w siatce: jawny zakres linii (sam numer rzędu sięgałby do dołu sekcji) */
  .hs--tel-film-u-gory .hs-sterowanie { grid-row: 1 / 2; }
  .hs--tel-film-u-gory::before, .hs--tel-film-u-gory::after { grid-row: 2 / 3; }
  .hs--tel-film-u-gory .hs-szew { grid-row: 2 / 3; }
  /* panel ciaśniej (odstęp 14 px, między elementami 10 px), żeby wycena mieściła się w pierwszym ekranie iPhone'a */
  .hs--tel-film-u-gory .hs-tresc { grid-row: 2; padding-top: 14px; gap: 10px; }
  .hs--tel-film-u-gory .hs-dawid { grid-row: 2; }
  /* od góry, nie w środku: status godzin pokazuje skrypt po pierwszym malowaniu i przy środkowaniu przesuwał przycisk
     wyceny; dwie linie statusu mają miejsce od początku, więc nic w pierwszym ekranie nie podjeżdża */
  .hs--tel-film-u-gory .hs-akcje { align-content: start; row-gap: 8px; }
  .hs--tel-film-u-gory .hs-tresc .hs-tel { min-height: 44px; }
  .hs--tel-film-u-gory .hs-godziny { min-height: calc(2 * 1.45 * 13px); margin-top: -6px; line-height: 1.45; }
  /* cały dopisek jest linkiem; pole dotyku ok. 44 px wysokości bez zmiany układu */
  .hs--tel-film-u-gory .hs-status-poza a { display: inline-block; padding-block: 13px; margin-block: -13px; }
  /* dalszy dzień skrótem („w pon.”); pełna nazwa zostaje dla czytników ekranu */
  .hs--tel-film-u-gory .hs-dzien-pelny { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0; }
  .hs--tel-film-u-gory .hs-dzien-krotki { display: inline; }
  .hs--tel-film-u-gory .hs-lista { grid-row: 3; }
  /* paski rozdziałów na górze filmu, bez nazw; inset: auto, bo styl bazowy (komputer) ma left: 20px i przesunięcie w górę */
  .hs--tel-film-u-gory .hs-rozdzialy { grid-row: 1; grid-column: 1 / -1; align-self: start; position: relative; inset: auto; width: auto; z-index: 3;
    margin-top: var(--hs-hdr); padding: 8px 12px 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(8, 32, 22, 0.42) 0%, rgba(8, 32, 22, 0) 100%); }
  .hs--tel-film-u-gory .hs-kroki { flex-wrap: nowrap; overflow: visible; gap: 4px; margin: 0; padding: 0; }
  /* nazwa rozdziału zostaje tekstem przycisku (czytnik ekranu), ale nie jest widoczna: rozmiar czcionki 0 */
  .hs--tel-film-u-gory .hs-krok { pointer-events: auto; flex: 1 1 0; min-width: 0; min-height: 24px; padding: 0; border: 0; border-radius: 0;
    background: none; box-shadow: none; font-size: 0; text-shadow: none; }
  .hs--tel-film-u-gory .hs-krok:not([aria-current="step"]), .hs--tel-film-u-gory .hs-krok[aria-current="step"] { background: none; border: 0; }
  .hs--tel-film-u-gory .hs-krok::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.34); }
  .hs--tel-film-u-gory .hs-postep { left: 0; right: 0; top: 0; bottom: auto; height: 3px; border-radius: 3px; background: #fff; transform-origin: left center; }
  .hs--tel-film-u-gory .hs-krok:not([aria-current="step"]) .hs-postep { transform: scaleX(0); }
}
/* Telefon w panelu hero większy o ok. 40% (Igor 02.10.2026: „numer telefonu zrobiłbym go większym, o jakieś 40%…
   zwiększając ikonkę numeru telefonu, jak i sam numer”): 17 → 24 px na komputerze i tablecie, 16 → 22 px na telefonie,
   ikona 18 → 25 px wszędzie. Cel dotyku 48 px wysokości, na telefonie w układzie E 44 px (minimum marki). */
.hs-tresc .hs-tel { gap: 10px; font-size: 24px; }
.hs-tresc .hs-tel svg { width: 25px; height: 25px; }
@media (max-width: 767px) {
  .hs-tresc .hs-tel { font-size: 22px; }
}
/* ekrany węższe niż 375 px: „Bezpłatna wycena” ma stałą szerokość, więc mniejsze kółko strzałki bliżej brzegu daje
   8 px odstępu (było ok. 2 px przy 360) */
@media (max-width: 374px) {
  .hs--dzielony .hs-akcje .hs-btn--temat { padding-right: 40px; }
  .hs--dzielony .hs-btn-strzalka { right: 6px; width: 28px; height: 28px; margin-top: -14px; }
  .hs--dzielony .hs-btn-strzalka svg { width: 15px; height: 15px; }
}
/* Opinie nad H1 przy dotyku: wiersz ma 21–23 px, więc pole dotyku dopełnia pionowy padding z ujemnym marginesem
   (44 px, próg labu); układ się nie zmienia (-2 px do nagłówka jak wyżej). */
@media (pointer: coarse) {
  .hs--dzielony .hs-ocena { padding-block: 12px 11px; margin-block: -12px -13px; }
}
/* uslugi.css */
/* LAB sekcja usług nowej strony głównej aslandi.pl, v2 (28.09.2026).
   Uwagi Igora do v1: usługi na równo (pompa ciepła tak samo ważna jak fotowoltaika), każdy kafel tej samej
   wielkości z tą samą pętlą wideo, mało tekstu, ilustracja i jasne „Zobacz ofertę”; każda usługa jako
   osobny kafel (karta). Kolejność ustawia skrypt (sezon grzewczy, pytanie o fotowoltaikę w hero), wielkość
   nigdy. 30.09: siatka 2 × 2 na pełną szerokość sekcji zamiast czterech w rzędzie (Igor: „wróć do 2x2… szerokość
   ma być taka sama… kafelki, a szczególnie obrazy większe”, bo zależy mu na pętlach); dawny układ pod ?uklad=4x1.
   Marka: sosna #123f2d, złoto #ceb472, Poppins, jasny motyw (marka/DESIGN.md). Kształty: kafle i pas 18 px,
   przycisk w kaflu 10 px, pigułki i plakietki pełne. Ruch: pętle wideo w kaflach, raz przy wejściu kafle
   pojawiają się kaskadą (co 60 ms), najechanie i nacisk z krzywą Emila; przy ograniczonym ruchu bez przesunięć. */
.us {
  --us-sosna: #123f2d;
  --us-sosna-2: #19583f;
  --us-atrament: #1c3428;
  --us-szary: #58685f;
  --us-zloto: #ceb472;
  --us-zloto-2: #d8c287;
  --us-zloto-tekst: #182e23;
  --us-zloto-jasne: #dcc78f;
  --us-tlo: #f7f8f4;
  --us-szalwia: #eaf0e3;
  --us-linia: #dce3da;
  --us-fokus: #a67b23;
  --us-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --us-r: 18px;
  background: var(--us-tlo);
  color: var(--us-atrament);
  font-family: Poppins, system-ui, sans-serif;
  padding-block: clamp(64px, 7vw, 104px);
}
.us *, .us *::before, .us *::after { box-sizing: border-box; }
.us h2, .us h3, .us p, .us ul { margin: 0; }
.us ul { padding: 0; list-style: none; }
.us a { -webkit-tap-highlight-color: transparent; }
.us ::selection { background: #cfdcc5; color: var(--us-atrament); }
/* obrys fokusu idzie za promieniem samego elementu (border-radius tutaj zmieniał kształt pigułek i przycisków, 28.09) */
.us :focus-visible { outline: 3px solid var(--us-fokus); outline-offset: 3px; }

.us-wew { width: min(1280px, 100% - 64px); margin-inline: auto; }

/* Nagłówek nad równą siatką: wyśrodkowany, jeden komunikat i jedno zdanie o dotacjach. */
.us-naglowek { max-width: 46rem; margin: 0 auto clamp(36px, 4.5vw, 56px); text-align: center; }
.us h2 { font-size: clamp(30px, 2.2vw + 16px, 48px); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; color: var(--us-sosna); text-wrap: balance; }
.us h2 em { font-style: normal; padding-inline: 2px; background: linear-gradient(transparent 66%, rgba(206, 180, 114, 0.55) 66%, rgba(206, 180, 114, 0.55) 92%, transparent 92%); }
.us-lead { margin-top: 14px; font-size: clamp(16.5px, 0.3vw + 15px, 18.5px); line-height: 1.55; color: var(--us-szary); text-wrap: balance; }

/* Cztery równe kafle 2 × 2 (pary: prąd, ciepło); ta sama pętla 4:3 w każdym. */
/* grid-auto-rows 1fr: wszystkie wiersze tej samej wysokości, więc kafle są równe także w dwóch i w jednej kolumnie */
.us-kafle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(16px, 1.8vw, 24px); }
.us-kafle > li { display: flex; min-width: 0; }
.us-kafel { position: relative; display: flex; flex-direction: column; width: 100%; overflow: hidden; isolation: isolate;
  border-radius: var(--us-r); border: 1px solid var(--us-linia); background: #fff; color: inherit; text-decoration: none;
  box-shadow: 0 1px 2px rgba(18, 63, 45, 0.05), 0 14px 30px -22px rgba(18, 63, 45, 0.45);
  transition: transform 220ms var(--us-ease), box-shadow 220ms var(--us-ease), border-color 220ms ease;
  touch-action: manipulation; }
.us-kafel:focus-visible { outline: 3px solid var(--us-fokus); outline-offset: 4px; border-radius: var(--us-r); }
.us-kafel:active { transform: scale(0.985); }

.us-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--us-szalwia); }
.us-media > video, .us-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.us-media > video, .us-media > img, .us-zastepcze { transition: transform 600ms var(--us-ease); }

/* Pole zastępcze do czasu pętli wideo. */
.us-zastepcze { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 20px 24px; text-align: center; font-size: 13.5px; line-height: 1.45; color: var(--us-szary);
  background: linear-gradient(160deg, #eef3e8 0%, #e1e9d9 100%); }
.us-zastepcze::before { content: ""; position: absolute; inset: 10px; border: 1.5px dashed #b4c3ad; border-radius: 10px; pointer-events: none; }
.us-zastepcze svg { width: 28px; height: 28px; fill: none; stroke: var(--us-sosna); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 2px; }
.us-zastepcze-tytul { font-weight: 600; font-size: 14.5px; color: var(--us-atrament); }

/* treść rośnie z kaflem (kontener: li): w szerokim kaflu 2 × 2 większe odstępy, tytuł i opis, w wąskim jak dotąd;
   przeglądarki bez jednostek cqw zostają przy pierwszej wartości */
.us-tresc { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 18px 20px 20px; padding: clamp(18px, 3.6cqw, 24px) clamp(20px, 4.2cqw, 28px) clamp(20px, 4.2cqw, 28px); }
.us-tytul { font-size: clamp(19px, 0.5vw + 15px, 22px); font-size: clamp(19px, 3.8cqw, 24px); line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; color: var(--us-sosna); }
.us-opis { padding-bottom: 12px; font-size: 15.5px; font-size: clamp(15.5px, 2.7cqw, 17px); line-height: 1.5; color: var(--us-szary); text-wrap: pretty; }
/* przycisk zawsze na dole kafla, więc w rzędzie stoją w jednej linii niezależnie od długości opisu */
.us-cta { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin-top: auto;
  border-radius: 10px; background: var(--us-sosna); color: #fff; font-size: 16px; font-weight: 600; line-height: 1.2;
  -webkit-user-select: none; user-select: none; transition: background-color 160ms ease; }
.us-cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--us-ease); }

/* Dotacja jako dodatek do oferty w treści karty, pod opisem i nad „Zobacz ofertę”. Jasne złoto (wartość, pieniądze),
   tekst w zieleni marki. Pigułka na szerokość treści, bez cienia: czyta się jak etykieta, nie jak drugi przycisk,
   więc nie konkuruje z pełnym zielonym „Zobacz ofertę” na całą szerokość. Moneta z ikonką usługi, pod nazwą dodatku
   zdjęcie obawy przed papierami. Jeden miękki błysk przy wejściu kafli. */
.us-dodatek { position: relative; overflow: hidden; isolation: isolate; align-self: flex-start; display: flex; align-items: center;
  gap: 10px; padding: 5px 16px 5px 5px; border-radius: 999px; background: #f8f1de;
  box-shadow: inset 0 0 0 1px rgba(206, 180, 114, 0.6); }
/* „.us p” zeruje marginesy, stąd selektor z .us-tresc: dodatek bliżej opisu, wyraźny odstęp od przycisku */
.us-tresc .us-dodatek { margin: -4px 0 16px; }
.us-dodatek-moneta { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f6e8bd 0%, #ddc486 45%, #b8994f 100%);
  box-shadow: inset 0 -1.5px 0 rgba(90, 66, 16, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.us-dodatek-moneta svg { width: 17px; height: 17px; fill: none; stroke: #123f2d; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.us-dodatek-tekst { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.us-dodatek-tekst strong { font-size: 14px; font-weight: 700; color: var(--us-sosna); }
.us-dodatek-tekst span { font-size: 12.5px; font-weight: 500; color: #6b5a2c; }
.us-dodatek::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.75) 50%, transparent 65%); transform: translateX(-130%); }
html.us-anim .us-kafle.widac .us-dodatek::after { animation: us-blysk 1.4s var(--us-ease) 0.8s 1 both; }
@keyframes us-blysk { to { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) { .us-dodatek::after { display: none; } }

/* Pozostałe usługi: małe kafelki z ikoną nad nazwą (ikony 3D z Gemini, bez tła, w barwach bez zieleni, bo tło
   wycinane z zielonego ekranu). Lżejsze od czterech głównych kafli: bez pętli, a zamiast przycisku mały link tekstowy
   ze strzałką (komponent marki), żeby z nimi nie konkurowały. Komputer i tablet: pięć w rzędzie, węziej niż kafle (1040 px); telefon: trzy i dwa. Cień pod ikoną
   tonowany sosną (marka). */
.us-inne { margin-top: clamp(36px, 4.5vw, 52px); }
.us-inne-tytul { margin-bottom: 14px; text-align: center; font-size: 16px; font-weight: 600; color: var(--us-atrament); }
.us-inne ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 1040px; margin-inline: auto; }
.us-inne li { display: flex; flex: 0 1 calc((100% - 4 * 12px) / 5); min-width: 0; container-type: inline-size; }
.us-inne a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 44px; padding: 14px 10px 16px;
  border-radius: 14px; border: 1px solid var(--us-linia); background: #fff; color: var(--us-atrament); font-size: 15px; font-weight: 500;
  line-height: 1.25; text-align: center; text-wrap: balance; text-decoration: none; touch-action: manipulation;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms var(--us-ease); }
.us-inne img { width: clamp(60px, 6vw, 88px); height: auto; aspect-ratio: 1; filter: drop-shadow(0 6px 6px rgba(18, 63, 45, 0.14));
  transition: transform 220ms var(--us-ease); }
.us-inne a:active { transform: scale(0.97); }
/* CTA na dole kafelka, więc w rzędzie stoją w jednej linii niezależnie od tego, czy nazwa ma jedną linię, czy dwie */
.us-inne-cta { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 2px; font-size: 13px; font-weight: 600;
  line-height: 1.2; color: var(--us-sosna); white-space: nowrap; }
.us-inne-cta svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; transition: transform 220ms var(--us-ease); }
@container (max-width: 159px) { .us-inne-cta-dluzej { display: none; } }

/* Pas o dofinansowaniu: zamknięcie sekcji, telefon pod ręką. */
.us-dotacje { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 24px 48px; align-items: center;
  margin-top: clamp(32px, 4vw, 44px); padding: clamp(24px, 3vw, 36px) clamp(24px, 3.4vw, 44px);
  border-radius: var(--us-r); background: var(--us-sosna); color: #fff; box-shadow: 0 18px 40px -24px rgba(18, 63, 45, 0.55); }
.us-dotacje h3 { font-size: clamp(21px, 0.6vw + 17px, 26px); line-height: 1.25; font-weight: 600; color: #fff; }
.us-dotacje p { margin-top: 8px; font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.88); max-width: 40rem; }
.us-dotacje-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.us-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 24px; border-radius: 10px;
  border: 1.5px solid var(--us-zloto); background: var(--us-zloto); color: var(--us-zloto-tekst);
  font: 600 16px/1.2 Poppins, system-ui, sans-serif; text-decoration: none; white-space: nowrap; -webkit-user-select: none; user-select: none;
  touch-action: manipulation; transition: background-color 160ms ease, border-color 160ms ease, transform 160ms var(--us-ease); }
.us-btn:active { transform: scale(0.97); }
/* motyw zmienia linkom kolor na złoty przy najechaniu i fokusie (a:hover, a:focus): na złotym przycisku napis znikał
   (kontrast 1:1); linki sekcji trzymają swoje kolory w każdym stanie (28.09) */
.us a.us-btn, .us a.us-btn:hover, .us a.us-btn:focus, .us a.us-btn:active, .us a.us-btn:visited { color: var(--us-zloto-tekst); }
.us a.us-tel, .us a.us-tel:focus, .us a.us-tel:active, .us a.us-tel:visited { color: #fff; }
.us a.us-strzalka, .us a.us-strzalka:focus, .us a.us-strzalka:active, .us a.us-strzalka:visited { color: var(--us-zloto-jasne); }
.us-tel { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; border-radius: 6px; color: #fff; font-size: 18px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.us-tel svg { width: 20px; height: 20px; fill: none; stroke: var(--us-zloto-jasne); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.us-strzalka { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border-radius: 6px; color: var(--us-zloto-jasne); font-size: 15.5px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.us-strzalka svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.us-dotacje :focus-visible { outline-color: var(--us-zloto-jasne); }

/* Najechanie tylko na urządzeniach z kursorem. */
@media (hover: hover) and (pointer: fine) {
  .us-kafel:hover { transform: translateY(-3px); border-color: #c9d6c5; box-shadow: 0 2px 4px rgba(18, 63, 45, 0.06), 0 22px 40px -24px rgba(18, 63, 45, 0.55); }
  .us-kafel:hover:active { transform: translateY(-1px) scale(0.985); }
  .us-kafel:hover .us-media > video, .us-kafel:hover .us-media > img, .us-kafel:hover .us-zastepcze { transform: scale(1.04); }
  .us-kafel:hover .us-cta { background: var(--us-sosna-2); }
  .us-kafel:hover .us-cta svg { transform: translateX(3px); }
  .us-inne a:hover { border-color: var(--us-sosna); color: var(--us-sosna); }
  .us-inne a:hover img { transform: translateY(-3px); }
  .us-inne a:hover .us-inne-cta svg { transform: translateX(3px); }
  .us-btn:hover { background: var(--us-zloto-2); border-color: var(--us-zloto-2); }
  .us a.us-tel:hover, .us a.us-strzalka:hover { color: #fff; }
}

/* Wejście kafli raz na wizytę; ukrycie tylko po klasie z JS na <html>, więc bez skryptu treść jest widoczna. */
html.us-anim .us-kafle > li { opacity: 0; transform: translateY(14px); transition: opacity 500ms var(--us-ease), transform 500ms var(--us-ease); }
html.us-anim .us-kafle.widac > li { opacity: 1; transform: none; }
html.us-anim .us-kafle.widac > li:nth-child(2) { transition-delay: 60ms; }
html.us-anim .us-kafle.widac > li:nth-child(3) { transition-delay: 120ms; }
html.us-anim .us-kafle.widac > li:nth-child(4) { transition-delay: 180ms; }

/* Dawny układ do porównania w labie ?uklad=4x1: cztery w rzędzie na komputerze (do 30.09 domyślny). */
@media (min-width: 1024px) {
  .us[data-uklad="4x1"] .us-kafle { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Klimatyzacja: przełącznik trybu nad obrazem kafla (stoi poza linkiem kafla, więc klik nie otwiera podstrony);
   dwa filmy leżą na sobie, widać ten z aktywnego trybu. */
.us-kafle > li { position: relative; container-type: inline-size; }
/* na dole obrazu (4:3 = 75% szerokości kafla), żeby nie zasłaniał urządzenia; starsze przeglądarki: u góry */
.us-tryb { position: absolute; z-index: 3; top: 12px; top: calc(75cqw - 58px); left: 12px; display: flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.94); box-shadow: 0 1px 2px rgba(18, 63, 45, 0.08), 0 8px 20px -10px rgba(18, 63, 45, 0.45); }
.us-tryb-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--us-sosna); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; }
.us-tryb-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.us-tryb-btn[aria-pressed="true"] { background: var(--us-sosna); color: #fff; }
.us-tryb-btn:focus-visible { outline: 2px solid var(--us-fokus); outline-offset: 2px; }
.us-media video[data-tryb] { opacity: 0; transition: opacity 400ms var(--us-ease); }
.us-media[data-tryb="chlodzenie"] video[data-tryb="chlodzenie"], .us-media[data-tryb="grzanie"] video[data-tryb="grzanie"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .us-media video[data-tryb] { transition: none; } }

/* Tablet: pas dotacji w jednej kolumnie (kafle 2 × 2 jak na komputerze). */
@media (max-width: 1023px) {
  .us-dotacje { grid-template-columns: minmax(0, 1fr); }
}

/* Telefon: jeden kafel w rzędzie, ten sam format obrazu, przyciski pod kciuk. */
@media (max-width: 599px) {
  .us-wew { width: min(1280px, 100% - 32px); }
  .us-kafle { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .us-tresc { padding: 16px 18px 18px; }
  .us-inne ul { gap: 10px; }
  .us-inne li { flex-basis: calc((100% - 2 * 10px) / 3); }
  .us-inne a { padding: 12px 4px 14px; font-size: 13.5px; }
  .us-dotacje-akcje { flex-direction: column; align-items: stretch; }
  .us-dotacje-akcje .us-btn { width: 100%; }
  .us-tel, .us-strzalka { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .us-kafel, .us-media > video, .us-media > img, .us-zastepcze, .us-cta svg, .us-inne a, .us-inne img, .us-inne-cta svg, .us-btn { transition: none; }
  .us-kafel:hover, .us-kafel:active, .us-kafel:hover .us-media > video, .us-kafel:hover .us-media > img, .us-kafel:hover .us-zastepcze { transform: none; }
  html.us-anim .us-kafle > li { transform: none; transition: opacity 300ms ease; }
}
/* opinie.css */
/* LAB sekcja opinii wideo nowej strony głównej aslandi.pl, v1 (28.09.2026).
   Polecenie Igora: sześć opinii wideo widocznych naraz, trzy na dwa na komputerze, duża miniatura filmu jako
   główny element kafla, prosto i konwertująco; tło ciemne i kontrastowe: prosty dom OZE (panele, pompa ciepła)
   z naszych realizacji. Marka: sosna #123f2d, złoto #ceb472, Poppins (marka/DESIGN.md): sekcja fotograficzna pod
   przyciemnieniem sosną, złoty przycisk na ciemnym tle, karta opinii z promieniem 12 px. Szerokość siatki jak
   siatka usług 2 × 2 (1040 px).
   Tło: dom o zmierzchu (Gemini z realizacji), kadr zawsze w kształcie ekranu: 16:9 na komputerze, 9:16 na
   telefonie. Na komputerze okładka (Igor 28.09): tło stoi w miejscu przez cały czas, a treść płynie nad nim; na
   telefonie kadr przyklejony do góry sekcji. Przy ograniczonym ruchu tło stoi razem z sekcją.
   Ruch: bez animacji wejścia (usługi mają już swoją kaskadę, a ta sama animacja w każdej sekcji to szablon);
   tylko najechanie i nacisk z krzywą z hero oraz płynne pojawienie się odtwarzacza nad miniaturą. */
.op {
  --op-sosna: #123f2d;
  --op-sosna-noc: #092d20;
  --op-noc: 6, 33, 23; /* #062117: przyciemnienie tła, głębsza zieleń niż sosna */
  --op-atrament: #1c3428;
  --op-gwiazdka: #d9a53a;
  --op-linia: #dce3da;
  --op-szalwia: #eaf0e3;
  --op-zloto: #ceb472;
  --op-zloto-2: #d8c287;
  --op-zloto-tekst: #182e23;
  --op-zloto-jasne: #dcc78f;
  --op-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --op-r: 12px;
  position: relative;
  isolation: isolate;
  background: var(--op-sosna-noc);
  color: #fff;
  font-family: Poppins, system-ui, sans-serif;
  padding-block: clamp(64px, 7vw, 104px);
}
.op *, .op *::before, .op *::after { box-sizing: border-box; }
.op h2, .op p, .op ul, .op figure, .op blockquote { margin: 0; }
/* motyw (Astra) daje cytatom kursywę, 20 px wcięcia i szarą kreskę z lewej */
.op blockquote { padding: 0; border: 0; font-style: normal; }
.op ul { padding: 0; list-style: none; }
.op a { -webkit-tap-highlight-color: transparent; }
.op ::selection { background: var(--op-zloto-jasne); color: var(--op-sosna-noc); }
/* jasne złoto: widoczne na ciemnym tle, na miniaturach i na złotym przycisku (przez odstęp) */
/* obrys fokusu idzie za promieniem samego elementu (border-radius tutaj zmieniał kształt pigułek i przycisków, 28.09) */
.op :focus-visible { outline: 3px solid var(--op-zloto-jasne); outline-offset: 3px; }

/* Tło: warstwa na całą sekcję, w niej kadr wysokości ekranu przyklejony do góry ekranu (sticky), więc widać zawsze
   cały dom w proporcji ekranu, a karty przesuwają się nad nim. Przyciemnienie głęboką zielenią na kadrze, nie na
   sekcji, żeby było takie samo w każdym miejscu przewijania; najmocniejsze pod nagłówkiem. */
.op-tlo { position: absolute; inset: 0; z-index: -1; }
.op-tlo-kadr { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; }
.op-tlo-kadr::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--op-noc), 0.88) 0%, rgba(var(--op-noc), 0.74) 50%, rgba(var(--op-noc), 0.8) 100%); }
.op-tlo picture, .op-tlo img { display: block; width: 100%; height: 100%; }
.op-tlo img { object-fit: cover; object-position: 50% 62%; }

/* Komputer i laptop: okładka. Kadr przypięty do ekranu (fixed) przez cały czas, a sekcja przycina go do swojego
   obszaru (clip-path: inset(0)), więc tło stoi w miejscu, a treść płynie nad nim; sekcja działa jak okno. Tryb
   włącza skrypt, gdy sekcja jest blisko ekranu (klasa op--okladka): przypięty obraz byłby „na ekranie” od
   początku i ładowałby się razem z hero. Bez skryptu zostaje kadr przyklejony do sekcji. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .op.op--okladka { clip-path: inset(0); }
  .op.op--okladka .op-tlo-kadr { position: fixed; inset: 0; height: auto; }
}

.op-wew { width: min(1040px, 100% - 64px); margin-inline: auto; }

/* Nagłówek jak w usługach, w barwach ciemnego tła: biały, jedno słowo jasnym złotem. */
.op-naglowek { max-width: 46rem; margin: 0 auto clamp(36px, 4.5vw, 56px); text-align: center; }
.op h2 { font-size: clamp(30px, 2.2vw + 16px, 48px); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; color: #fff; text-wrap: balance; }
.op h2 em { font-style: normal; color: var(--op-zloto-jasne); }
.op-lead { margin-top: 14px; font-size: clamp(16.5px, 0.3vw + 15px, 18.5px); line-height: 1.55; color: rgba(255, 255, 255, 0.84); text-wrap: balance; }

/* Ocena w Google pod opisem: biała pigułka, żeby kolorowe logo Google było w całości czytelne na ciemnym tle
   (zielone „l” ginie na ciemnej zieleni). Kolejność jak u Google: ocena, gwiazdki, liczba opinii. Link do
   wizytówki, więc każdy może sprawdzić. */
.op-google { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; min-height: 48px; padding: 8px 20px 8px 18px;
  border-radius: 999px; background: #fff; color: var(--op-atrament); text-decoration: none; white-space: nowrap;
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.65); touch-action: manipulation;
  transition: transform 180ms var(--op-ease), box-shadow 180ms var(--op-ease); }
.op-google img { display: block; flex: none; width: 74px; height: auto; }
.op-google-ocena { padding-left: 12px; border-left: 1px solid var(--op-linia); font-size: 18px; font-weight: 700; line-height: 1; }
.op-google-gwiazdki { display: block; flex: none; width: 90px; line-height: 0; color: #fbbc04; }
.op-google-gwiazdki svg { width: 100%; height: auto; fill: currentColor; }
.op-google-liczba { font-size: 15.5px; font-weight: 500; line-height: 1; color: #46564d; }
.op-google:active { transform: scale(0.97); }

/* Sześć kafli naraz: 3 × 2 na komputerze, 2 × 3 na tablecie, jeden pod drugim na telefonie. Kafle w rzędzie mają
   tę samą wysokość, a osoba stoi na dole, więc imiona w rzędzie są w jednej linii przy różnej długości cytatu. */
.op-siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); }
.op-karta { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--op-r); background: #fff;
  color: var(--op-atrament); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 28px 56px -30px rgba(0, 0, 0, 0.6); }

/* Miniatura filmu: główny element kafla, cała jest przyciskiem odtwarzania (bez skryptu linkiem do YouTube).
   Kadr 16:9 jak film: kadry 2:1 z biblioteki tracą po 5% z boków, nikt nie jest ucięty (sprawdzone na sześciu). */
.op-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--op-szalwia); }
/* motyw animuje wszystko na linkach (transition: all), więc fokus dojeżdżał; tu ma być od razu */
.op-film { position: absolute; inset: 0; display: block; touch-action: manipulation; transition: none; }
.op-film img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--op-ease); }
.op-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.94); color: var(--op-sosna); transform: translate(-50%, -50%);
  box-shadow: 0 10px 28px -8px rgba(8, 32, 22, 0.55); transition: transform 220ms var(--op-ease), background-color 160ms ease; }
.op-play svg { width: 28px; height: 28px; margin-left: 3px; fill: currentColor; }
/* obramowanie fokusu do środka, bo kadr przycina wszystko, co wystaje */
.op-film:focus-visible { outline-offset: -6px; border-radius: 10px; }
.op-film:active .op-play { transform: translate(-50%, -50%) scale(0.94); }
.op-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; opacity: 0; transition: opacity 300ms ease; }
.op-karta.gotowe .op-media iframe { opacity: 1; }

/* Treść pod filmem: gwiazdki, cytat, osoba. */
.op-tresc { display: flex; flex-direction: column; flex: 1; gap: 12px; padding: 20px 22px 22px; }
.op-gwiazdki { display: block; width: 88px; line-height: 0; color: var(--op-gwiazdka); }
.op-gwiazdki svg { width: 100%; height: auto; fill: currentColor; }
.op-cytat p { font-size: 16px; line-height: 1.6; color: var(--op-atrament); text-wrap: pretty; }
.op-osoba { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 4px; font-size: 15.5px; font-weight: 600;
  line-height: 1.3; color: var(--op-sosna); }
.op-osoba img { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--op-linia); }

/* Wezwanie pod dowodem: ten sam cel co w hero (bezpłatna wycena), złoty przycisk marki na ciemnym tle, telefon. */
.op-akcje { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; margin-top: clamp(32px, 4vw, 48px); }
.op-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 28px; border-radius: 10px;
  background: var(--op-zloto); color: var(--op-zloto-tekst); font-size: 16.5px; font-weight: 600; line-height: 1.2; text-decoration: none;
  touch-action: manipulation; transition: background-color 160ms ease, transform 160ms var(--op-ease); }
.op-btn:active { transform: scale(0.97); }
/* motyw zmienia linkom kolor na złoty przy najechaniu i fokusie (a:hover, a:focus): na złotym przycisku napis znikał
   (kontrast 1:1); linki sekcji trzymają swoje kolory w każdym stanie (28.09) */
.op a.op-btn, .op a.op-btn:hover, .op a.op-btn:focus, .op a.op-btn:active, .op a.op-btn:visited { color: var(--op-zloto-tekst); }
.op a.op-tel, .op a.op-tel:hover, .op a.op-tel:focus, .op a.op-tel:active, .op a.op-tel:visited { color: #fff; }
.op a.op-google, .op a.op-google:hover, .op a.op-google:focus, .op a.op-google:active, .op a.op-google:visited { color: var(--op-atrament); }
.op-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border-radius: 6px; color: #fff; font-size: 17px; font-weight: 600;
  text-decoration: none; touch-action: manipulation; }
.op-tel svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Telefon: trzy opinie, potem „Zobacz więcej” (Igor 28.09). Przycisk drugorzędny wobec złotego „Bezpłatna wycena”:
   obrys, bez wypełnienia. Ukryte karty mają obrazy z loading="lazy", więc wczytują się dopiero po kliknięciu.
   Selektory z .op, bo motyw (Astra) stylizuje wszystkie przyciski, także przy najechaniu i fokusie. */
.op .op-wiecej { display: none; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; margin: 16px 0 0;
  padding: 12px 20px; border: 1.5px solid rgba(255, 255, 255, 0.5); border-radius: 10px; background: rgba(255, 255, 255, 0.06);
  box-shadow: none; color: #fff; font: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: normal;
  text-transform: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--op-ease); }
.op .op-wiecej:hover, .op .op-wiecej:focus { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.06); color: #fff; }
.op .op-wiecej:active { transform: scale(0.98); }
.op-wiecej svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* dołożone karty wchodzą krótko jedna po drugiej, żeby było widać, co doszło */
.op-karta.op-nowa { animation: op-wejdz 360ms var(--op-ease) both; }
.op-karta.op-nowa:nth-child(5) { animation-delay: 60ms; }
.op-karta.op-nowa:nth-child(6) { animation-delay: 120ms; }
@keyframes op-wejdz { from { opacity: 0; transform: translateY(10px); } }

@media (hover: hover) and (pointer: fine) {
  .op-film:hover img { transform: scale(1.03); }
  .op-film:hover .op-play { transform: translate(-50%, -50%) scale(1.06); background: #fff; }
  .op-btn:hover { background: var(--op-zloto-2); }
  .op-tel:hover { text-decoration: underline; text-underline-offset: 4px; }
  .op-google:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.75); }
}

/* Tablet: dwa w rzędzie. */
@media (max-width: 1023px) {
  .op-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Telefon: jeden pod drugim; trzy opinie i „Zobacz więcej” (klasa op--zwiniete od skryptu); przycisk pod kciuk
   na całą szerokość. */
@media (max-width: 599px) {
  .op--zwiniete .op-siatka > .op-karta:nth-child(n + 4) { display: none; }
  .op.op--zwiniete .op-wiecej { display: flex; }
  .op-wew { width: min(1040px, 100% - 32px); }
  .op-siatka { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .op-tresc { gap: 10px; padding: 16px 18px 18px; }
  .op-cytat p { font-size: 15.5px; }
  .op-play { width: 56px; height: 56px; }
  .op-akcje { flex-direction: column; align-items: stretch; gap: 6px; }
  .op-btn { width: 100%; }
  .op-tel { justify-content: center; }
  .op-google { gap: 8px; margin-top: 18px; padding: 8px 16px 8px 14px; }
  .op-google img { width: 62px; }
  .op-google-ocena { padding-left: 10px; font-size: 16.5px; }
  .op-google-gwiazdki { width: 76px; }
  .op-google-liczba { font-size: 14.5px; }
}
/* Najwęższe telefony: przy 320 px pigułka miała 309 px i wypychała stronę o 5 px w bok (29.09). */
@media (max-width: 359px) {
  .op-google { gap: 6px; padding: 8px 12px; }
  .op-google img { width: 54px; }
  .op-google-ocena { padding-left: 8px; }
  .op-google-gwiazdki { width: 66px; }
}

/* Ograniczony ruch: tło stoi razem z sekcją (bez efektu treści płynącej nad nieruchomym obrazem). */
@media (prefers-reduced-motion: reduce) {
  .op-film img, .op-play, .op-btn, .op-media iframe, .op-google, .op .op-wiecej { transition: none; }
  .op-karta.op-nowa { animation: none; }
  .op-tlo-kadr { position: absolute; inset: 0; height: auto; }
}
/* realizacje.css */
/* LAB sekcja realizacji nowej strony głównej aslandi.pl, v1 (28.09.2026).
   Polecenie Igora: bardzo proste w obsłudze; trzy kategorie; podpis miejscowość i moc; fotowoltaika z filmem z drona,
   pompy ciepła i klimatyzacja z przełącznikiem jednostka zewnętrzna / wewnętrzna (klimatyzacja najpierw wewnętrzna);
   po cztery realizacje na kategorię w siatce 2 x 2, żeby kafle były duże (Igor 28.09).
   Marka (marka/DESIGN.md): sosna #123f2d, złoto #ceb472, Poppins, jasny motyw, karty realizacji z promieniem 12 px.
   Układ: nagłówek jak w usługach i opiniach, pod nim jedna pigułka z trzema zakładkami, cztery kafle 4:3 w 2 x 2 (zdjęcie albo
   film na całym kaflu, podpis na dole zdjęcia, bo realizacja to przede wszystkim obraz), link do wszystkich realizacji.
   Szerokość jak siatki usług i opinii (1040 px). Jasne tło po ciemnych opiniach.
   Ruch: pętle z drona tylko w otwartej zakładce i na ekranie; zmiana zdjęcia zewnętrzna / wewnętrzna przenikaniem;
   bez animacji wejścia. Przy ograniczonym ruchu: plakaty zamiast filmów, bez przenikania. */
.re {
  --re-sosna: #123f2d;
  --re-sosna-2: #19583f;
  --re-noc: 6, 33, 23;
  --re-atrament: #1c3428;
  --re-szary: #58685f;
  --re-linia: #dce3da;
  --re-szalwia: #eef3ec;
  --re-fokus: #a67b23;
  --re-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --re-r: 12px;
  background: #f7f8f4;
  color: var(--re-atrament);
  font-family: Poppins, system-ui, sans-serif;
  padding-block: clamp(64px, 7vw, 104px);
}
.re *, .re *::before, .re *::after { box-sizing: border-box; }
.re h2, .re h3, .re p, .re ul, .re figure { margin: 0; }
.re ul { padding: 0; list-style: none; }
.re a, .re button { -webkit-tap-highlight-color: transparent; }
.re ::selection { background: #cfdcc5; color: var(--re-atrament); }
/* obrys fokusu idzie za promieniem samego elementu (border-radius tutaj zmieniał kształt pigułek i przycisków, 28.09) */
.re :focus-visible { outline: 3px solid var(--re-fokus); outline-offset: 3px; }

.re-wew { width: min(1040px, 100% - 64px); margin-inline: auto; }

/* Nagłówek jak w usługach: wyśrodkowany, złote podkreślenie jednego słowa. */
.re-naglowek { max-width: 46rem; margin: 0 auto clamp(24px, 3vw, 32px); text-align: center; }
.re h2 { font-size: clamp(30px, 2.2vw + 16px, 48px); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; color: var(--re-sosna); text-wrap: balance; }
.re h2 em { font-style: normal; padding-inline: 2px; background: linear-gradient(transparent 66%, rgba(206, 180, 114, 0.55) 66%, rgba(206, 180, 114, 0.55) 92%, transparent 92%); }
.re-lead { margin-top: 12px; font-size: clamp(16.5px, 0.3vw + 15px, 18.5px); line-height: 1.55; color: var(--re-szary); text-wrap: balance; }

/* Zakładki: jedna pigułka z trzema przyciskami (jak przełącznik trybu w kaflu klimatyzacji). Widoczne tylko ze
   skryptem; bez niego trzy kategorie stoją jedna pod drugą ze śródtytułami. Selektory z .re, bo motyw (Astra)
   stylizuje wszystkie przyciski, także przy najechaniu i fokusie. */
.re-zakladki { display: none; }
.re--js .re-zakladki { display: flex; gap: 4px; width: fit-content; margin: 0 auto clamp(24px, 3vw, 36px); padding: 4px; border-radius: 999px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--re-linia), 0 8px 22px -16px rgba(18, 63, 45, 0.45); }
.re .re-zakladki [role="tab"], .re .re-zakladki [role="tab"]:hover, .re .re-zakladki [role="tab"]:focus {
  min-height: 44px; margin: 0; padding: 0 22px; border: 0; border-radius: 999px; background: transparent; box-shadow: none;
  color: var(--re-sosna); font: inherit; font-size: 15.5px; font-weight: 600; line-height: 1.2; letter-spacing: normal; text-transform: none;
  cursor: pointer; touch-action: manipulation; transition: background-color 180ms ease, color 180ms ease; }
.re .re-zakladki [role="tab"][aria-selected="true"] { background: var(--re-sosna); color: #fff; }

.re-panel + .re-panel { margin-top: 40px; }
.re-panel-tytul { margin-bottom: 16px; font-size: 21px; font-weight: 600; color: var(--re-sosna); }
.re--js .re-panel-tytul { display: none; }
.re--js .re-panel + .re-panel { margin-top: 0; }
.re-panel[hidden] { display: none; }

/* Cztery kafle 4:3 w 2 x 2 (ok. 508 x 381 px na komputerze): obraz na całym kaflu, podpis na dole na ciemnym przejściu. */
.re-siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); }
.re-kafel figure { position: relative; aspect-ratio: 4 / 3; overflow: hidden; isolation: isolate; border-radius: var(--re-r); background: #dfe7dc;
  box-shadow: 0 1px 2px rgba(18, 63, 45, 0.06), 0 16px 32px -24px rgba(18, 63, 45, 0.5); }
.re-media { position: absolute; inset: 0; }
.re-media img, .re-media video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* przełącznik: dwa zdjęcia na sobie, wewnętrzne przenika nad zewnętrzne */
.re-media .re-wewn { opacity: 0; transition: opacity 350ms ease; }
.re-media[data-strona="wewn"] .re-wewn { opacity: 1; }

.re-podpis { position: absolute; inset: auto 0 0; z-index: 1; display: flex; flex-direction: column; gap: 3px; padding: 72px 24px 20px;
  background: linear-gradient(180deg, rgba(var(--re-noc), 0) 0%, rgba(var(--re-noc), 0.72) 58%, rgba(var(--re-noc), 0.9) 100%);
  color: #fff; pointer-events: none; }
.re-podpis strong { font-size: 21px; font-weight: 600; line-height: 1.25; }
.re-podpis span { font-size: 15.5px; line-height: 1.35; color: rgba(255, 255, 255, 0.88); }

/* Znacznik filmu (fotowoltaika) i przełącznik widoku (pompy, klimatyzacja): lewy górny róg, z dala od podpisu. */
/* Plakietka „Film z drona” jest przyciskiem pauzy i odtwarzania pętli (WCAG 2.2.2), jak na podstronie realizacji:
   ikona pokazuje, co zrobi dotknięcie; przezroczysty margines przycisku daje cel dotyku 44 px. Bez skryptu jej nie ma. */
.re-film { display: none; }
.re--js .re-film { position: absolute; top: 8px; left: 8px; z-index: 2; display: flex; }
.re .re-film, .re .re-film:hover, .re .re-film:focus { margin: 0; padding: 8px; border: 0; border-radius: 999px; background: transparent;
  box-shadow: none; color: #fff; font: inherit; line-height: 1; letter-spacing: normal; text-transform: none; cursor: pointer; touch-action: manipulation; }
.re .re-film:focus-visible { outline: none; }
.re .re-film:focus-visible .re-znacznik { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px rgb(var(--re-noc)); }
.re-znacznik { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 999px; background: rgba(var(--re-noc), 0.72);
  color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; transition: background-color 160ms ease; }
.re-znacznik svg { width: 16px; height: 16px; fill: currentColor; }
.re-film[data-stan="gra"] .re-film-graj, .re-film:not([data-stan="gra"]) .re-film-pauza { display: none; }
/* Przełącznik jednostek zewnętrzna / wewnętrzna (Igor 29.09: mniejszy, nie może tak zasłaniać realizacji), jak na
   podstronie realizacji: pastylka jak „Film z drona” — ciemna, półprzezroczysta, 28 px wysokości (wcześniej biała,
   50 px), wybrana strona na białym. Cel dotyku 44 px daje przezroczyste przedłużenie przycisku w pionie (::after). */
.re-przelacznik { display: none; }
.re--js .re-przelacznik { position: absolute; top: 16px; left: 16px; z-index: 2; display: flex; gap: 2px; padding: 2px; border-radius: 999px;
  background: rgba(var(--re-noc), 0.72); }
.re .re-przelacznik button, .re .re-przelacznik button:hover, .re .re-przelacznik button:focus {
  position: relative; min-height: 24px; margin: 0; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; box-shadow: none;
  color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.2; letter-spacing: normal; text-transform: none;
  cursor: pointer; touch-action: manipulation; user-select: none; transition: background-color 180ms ease, color 180ms ease; }
.re .re-przelacznik button::after { content: ""; position: absolute; inset: -10px -1px; }
.re .re-przelacznik button[aria-pressed="true"] { background: #fff; color: var(--re-sosna); }
/* fokus jak na plakietce filmu: biały obrys na ciemnej obwódce, widoczny na jasnym i ciemnym zdjęciu */
.re .re-przelacznik button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px rgb(var(--re-noc)); }

/* Link do wszystkich realizacji: obrys, drugorzędny wobec złotych i zielonych wezwań sekcji wyżej. */
.re-akcje { display: flex; justify-content: center; margin-top: clamp(28px, 3.5vw, 40px); }
.re-wszystkie { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 12px 24px;
  border: 1.5px solid var(--re-sosna); border-radius: 10px; color: var(--re-sosna); font-size: 16px; font-weight: 600; line-height: 1.2;
  text-decoration: none; touch-action: manipulation; transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--re-ease); }
.re-wszystkie svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 220ms var(--re-ease); }
.re-wszystkie:active { transform: scale(0.97); }
/* motyw zmienia linkom kolor na złoty przy najechaniu i fokusie (a:hover, a:focus): przy fokusie link
   miał kontrast 1,9:1; linki sekcji trzymają swoje kolory w każdym stanie (28.09) */
.re a.re-wszystkie, .re a.re-wszystkie:focus, .re a.re-wszystkie:active, .re a.re-wszystkie:visited { color: var(--re-sosna); }

/* Kafel zastępczy wariantu bez zdjęć realizacji (tylko lab): jasne tło z przerywaną ramką, ikona wariantu, podpis
   ciemny na jasnym. Na żywą stronę nie trafia; zastępuje go zdjęcie realizacji od firmy. */
.re-kafel--brak figure { background: var(--re-szalwia); box-shadow: none; }
.re-brak { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 18%; border: 2px dashed #b9c4bb; border-radius: inherit; }
.re-brak-ikona { width: clamp(64px, 9vw, 112px); height: auto; fill: none; stroke: var(--re-sosna); stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; opacity: 0.75; }
.re-kafel--brak .re-podpis { background: none; color: var(--re-sosna); }
.re-kafel--brak .re-podpis span { color: var(--re-szary, #58685f); }

@media (hover: hover) and (pointer: fine) {
  .re .re-zakladki [role="tab"][aria-selected="false"]:hover { background: var(--re-szalwia); }
  /* delikatne rozjaśnienie: biały napis zostaje ≥ 4,5:1 także nad białym zdjęciem */
  .re .re-przelacznik button[aria-pressed="false"]:hover { background: rgba(255, 255, 255, 0.14); }
  .re .re-film:hover .re-znacznik { background: rgba(var(--re-noc), 0.92); }
  .re a.re-wszystkie:hover { background: var(--re-sosna); color: #fff; }
  .re-wszystkie:hover svg { transform: translateX(3px); }
}

/* Wąsko: jedna kolumna; zakładki na całą szerokość, żeby trzy nazwy zmieściły się w jednej linii. */
@media (max-width: 699px) {
  .re-wew { width: min(1040px, 100% - 32px); }
  .re-siatka { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .re-podpis { padding: 56px 18px 16px; }
  .re-podpis strong { font-size: 18px; }
  .re-podpis span { font-size: 14.5px; }
  .re--js .re-film { top: 4px; left: 4px; }
  .re--js .re-przelacznik { top: 12px; left: 12px; }
  .re--js .re-zakladki { width: 100%; }
  /* szerokość według nazwy, bez łamania: „Pompy ciepła” nie może spaść do dwóch linii (było przy 360 px) */
  .re .re-zakladki [role="tab"], .re .re-zakladki [role="tab"]:hover, .re .re-zakladki [role="tab"]:focus { flex: 1 1 auto; padding: 0 8px;
    font-size: 13.5px; white-space: nowrap; }
  .re-wszystkie { width: 100%; }
}

/* Najwęższe telefony (do 380 px): trzy nazwy mają razem ok. 310 px, więc mniejsze odstępy i czcionka zakładek. */
@media (max-width: 380px) {
  .re--js .re-zakladki { gap: 2px; padding: 3px; }
  .re .re-zakladki [role="tab"], .re .re-zakladki [role="tab"]:hover, .re .re-zakladki [role="tab"]:focus { padding: 0 5px; font-size: 13px; }
}

/* Poniżej 340 px (najmniejsze telefony) nazwy się nie mieszczą: dwa rzędy zamiast wystawania za pigułkę. */
@media (max-width: 340px) {
  .re--js .re-zakladki { flex-wrap: wrap; justify-content: center; border-radius: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .re .re-zakladki [role="tab"], .re .re-przelacznik button, .re-media .re-wewn, .re-wszystkie, .re-wszystkie svg, .re-znacznik { transition: none; }
}
/* youtube.css */
/* LAB sekcja edukacyjna z YouTube nowej strony głównej aslandi.pl, v1 (30.09.2026).
   Polecenie Igora: tło ciemne z liśćmi jak w opiniach, cztery filmy (każdy pod inną kategorię) w siatce 2 x 2, prosto
   pod UX; play otwiera film większy, wyśrodkowany, z przyciemnieniem dookoła; nagłówek „Jesteśmy na YouTube” z logo
   i licznikami kanału. Język wizualny jak w opiniach (sąsiednia ciemna sekcja): zdjęcie pod przyciemnieniem głęboką
   zielenią, biała pigułka pod nagłówkiem (tu kanał, tam Google), białe karty 12 px z miniaturą 16:9 i białym kołem
   odtwarzania, siatka 1040 px jak w opiniach i realizacjach. Tytuł kafla to kategoria filmu (żeby każdy wybrał swój),
   zdanie pod nim mówi, o czym jest film; miniatury bez plakietek, bo mają własny duży napis.
   Tło: liście ze ściany roślin w biurze Aslandi (DSC_5614 z WordPressa, „brandowe liście”), kadr w kształcie ekranu,
   mocno przyciemniony (Igor 30.09: „delikatnie mocniej przyciemnić… liście mniej widoczne”). Przewijanie jak w opiniach
   (Igor: tło ma się zachowywać tak samo): na komputerze okładka, tło stoi, a treść płynie nad nim; na telefonie kadr
   przyklejony do góry ekranu; przy ograniczonym ruchu tło stoi razem z sekcją. Ruch: tylko najechanie i nacisk (krzywa z hero) oraz wejście okna
   z filmem (ease-out, 220 ms); zamknięcie od razu. Przy ograniczonym ruchu bez skalowania. */
.yt {
  --yt-sosna: #123f2d;
  --yt-noc: 6, 33, 23; /* #062117 jak w opiniach */
  --yt-atrament: #1c3428;
  --yt-szary: #58685f;
  --yt-linia: #dce3da;
  --yt-szalwia: #eaf0e3;
  --yt-zloto-jasne: #dcc78f;
  --yt-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --yt-r: 12px;
  position: relative;
  isolation: isolate;
  background: #092d20;
  color: #fff;
  font-family: Poppins, system-ui, sans-serif;
  padding-block: clamp(64px, 7vw, 104px);
}
.yt *, .yt *::before, .yt *::after { box-sizing: border-box; }
.yt h2, .yt h3, .yt p, .yt ul { margin: 0; }
.yt ul { padding: 0; list-style: none; }
.yt a { -webkit-tap-highlight-color: transparent; }
.yt ::selection { background: var(--yt-zloto-jasne); color: #092d20; }
.yt :focus-visible { outline: 3px solid var(--yt-zloto-jasne); outline-offset: 3px; }
.yt-ukryte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Tło: warstwa na całą sekcję, w niej kadr wysokości ekranu przyklejony do góry ekranu; przyciemnienie na kadrze. */
.yt-tlo { position: absolute; inset: 0; z-index: -1; }
.yt-tlo-kadr { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; }
.yt-tlo-kadr::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--yt-noc), 0.94) 0%, rgba(var(--yt-noc), 0.85) 45%, rgba(var(--yt-noc), 0.9) 100%); }
.yt-tlo picture, .yt-tlo img { display: block; width: 100%; height: 100%; }
.yt-tlo img { object-fit: cover; object-position: 50% 40%; }
/* Komputer i laptop: okładka jak w opiniach. Kadr przypięty do ekranu (fixed), sekcja przycina go do swojego obszaru
   (clip-path: inset(0)), więc tło stoi, a treść płynie nad nim. Tryb włącza skrypt, gdy sekcja jest 600 px od ekranu
   (klasa yt--okladka); wcześniej nie, bo przypięty obraz liczyłby się jako widoczny i ładował razem z hero. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .yt.yt--okladka { clip-path: inset(0); }
  .yt.yt--okladka .yt-tlo-kadr { position: fixed; inset: 0; height: auto; }
}

.yt-wew { width: min(1040px, 100% - 64px); margin-inline: auto; }

/* Nagłówek jak w opiniach: biały, jedno słowo jasnym złotem; pod nim biała pigułka kanału z logo YouTube. */
.yt-naglowek { max-width: 46rem; margin: 0 auto clamp(36px, 4.5vw, 56px); text-align: center; }
.yt h2 { font-size: clamp(30px, 2.2vw + 16px, 48px); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; color: #fff; text-wrap: balance; }
.yt h2 em { font-style: normal; color: var(--yt-zloto-jasne); }
.yt-lead { margin-top: 14px; font-size: clamp(16.5px, 0.3vw + 15px, 18.5px); line-height: 1.55; color: rgba(255, 255, 255, 0.84); text-wrap: balance; }
/* Kanał (do 02.10.2026 biała pigułka, od 02.10 karta profilu, niżej) jak ocena Google w opiniach, ale z dowodem w pełnych liczbach (Igor 30.09: „całe liczby
   i trochę większe, żeby był efekt wow”): liczba nad podpisem, liczy się od zera przy wejściu w ekran (2 s, skrypt). */
/* od 02.10.2026 karta kanału jak profil (Igor): u góry awatar, nazwa i adres kanału, po prawej logo YouTube; pod linią
   trzy liczby; cała karta jest jednym linkiem do kanału */
.yt-kanal { display: inline-flex; flex-direction: column; align-items: stretch; gap: 14px; margin-top: 26px; min-height: 48px;
  padding: 16px 24px 18px; border-radius: 22px; background: #fff; color: var(--yt-atrament); text-decoration: none;
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.65); touch-action: manipulation;
  transition: transform 180ms var(--yt-ease), box-shadow 180ms var(--yt-ease); }
/* oficjalne logo YouTube z napisem (brand.youtube, 02.10.2026): bez zmian, wolne pole co najmniej szerokości trójkąta
   z ikony (ok. 8,5 px przy 104 px; w karcie kanału co najmniej 16 px), nie mniejsze niż 100 px szerokości */
.yt-logo { display: block; flex: none; width: 104px; height: auto; margin-left: auto; }
.yt-profil { display: flex; align-items: center; gap: 12px; text-align: left; }
/* awatar w kółku jak na YouTube; selektor z klasą karty, bo style motywu i Elementora ustawiają obrazom border-radius: 0 */
.yt-kanal .yt-awatar { display: block; flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.yt-profil-tekst { display: grid; gap: 1px; min-width: 0; margin-right: 12px; }
.yt-profil-nazwa { font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--yt-sosna); }
.yt-profil-adres { font-size: 13.5px; font-weight: 500; line-height: 1.3; color: #58685f; }
.yt-kanal-liczby { display: flex; align-items: stretch; justify-content: center; padding-top: 14px; border-top: 1px solid var(--yt-linia); }
.yt-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-inline: 22px; text-align: center; }
.yt-stat + .yt-stat { border-left: 1px solid var(--yt-linia); }
.yt-stat:first-child { padding-left: 0; }
.yt-stat:last-child { padding-right: 0; }
.yt-liczba { font-size: clamp(22px, 0.9vw + 13px, 28px); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: var(--yt-sosna);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.yt-podpis { margin-top: 3px; font-size: 13.5px; font-weight: 500; line-height: 1.2; color: #58685f; white-space: nowrap; }
.yt-kanal:active { transform: scale(0.97); }

/* Cztery filmy 2 x 2 (telefon: jeden pod drugim). Cały kafel jest jednym linkiem do filmu: miniatura, tytuł i opis
   otwierają okno; bez skryptu prowadzi do YouTube. Kafle w rzędzie tej samej wysokości. */
.yt-siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); }
.yt-siatka > li { display: flex; min-width: 0; }
.yt-karta { display: flex; flex-direction: column; width: 100%; overflow: hidden; border-radius: var(--yt-r); background: #fff;
  color: var(--yt-atrament); text-decoration: none; touch-action: manipulation;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 28px 56px -30px rgba(0, 0, 0, 0.6);
  transition: transform 220ms var(--yt-ease), box-shadow 220ms var(--yt-ease); }
.yt-karta:focus-visible { outline-offset: 4px; }
.yt-karta:active { transform: scale(0.985); }
.yt-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--yt-szalwia); }
.yt-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--yt-ease); }
.yt-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.94); color: var(--yt-sosna); transform: translate(-50%, -50%);
  box-shadow: 0 10px 28px -8px rgba(8, 32, 22, 0.6); transition: transform 220ms var(--yt-ease); }
.yt-play svg { width: 30px; height: 30px; margin-left: 3px; fill: currentColor; }
.yt-czas { position: absolute; right: 12px; bottom: 12px; padding: 4px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.78);
  color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.yt-karta:active .yt-play { transform: translate(-50%, -50%) scale(0.94); }
@media (max-width: 1023px) {
  .yt-play { width: 56px; height: 56px; }
  .yt-play svg { width: 24px; height: 24px; margin-left: 2px; }
}

.yt-tresc { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 18px 22px 22px; }
.yt-tytul { font-size: clamp(18px, 0.5vw + 14.5px, 21px); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--yt-sosna); text-wrap: balance; }
.yt-opis { display: block; font-size: 15.5px; line-height: 1.5; color: var(--yt-szary); text-wrap: pretty; }

/* Pod filmami jeden link tekstowy na kanał (pigułka w nagłówku też prowadzi na kanał); bez przycisku, żeby nie
   konkurował ze złotą „Bezpłatną wyceną” sąsiednich sekcji. */
.yt-akcje { display: flex; justify-content: center; margin-top: clamp(28px, 3.5vw, 44px); }
.yt-wszystkie { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border-radius: 6px; color: var(--yt-zloto-jasne);
  font-size: 15.5px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.yt-wszystkie svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 220ms var(--yt-ease); }
/* motyw (Astra) zmienia linkom kolor przy najechaniu i fokusie (a:hover, a:focus); linki sekcji trzymają swoje barwy */
.yt a.yt-karta, .yt a.yt-karta:hover, .yt a.yt-karta:focus, .yt a.yt-karta:active, .yt a.yt-karta:visited { color: var(--yt-atrament); }
.yt a.yt-kanal, .yt a.yt-kanal:hover, .yt a.yt-kanal:focus, .yt a.yt-kanal:active, .yt a.yt-kanal:visited { color: var(--yt-atrament); }
.yt a.yt-wszystkie, .yt a.yt-wszystkie:focus, .yt a.yt-wszystkie:active, .yt a.yt-wszystkie:visited { color: var(--yt-zloto-jasne); }

@media (hover: hover) and (pointer: fine) {
  .yt-karta:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14), 0 34px 60px -30px rgba(0, 0, 0, 0.7); }
  .yt-karta:hover:active { transform: translateY(-1px) scale(0.985); }
  .yt-karta:hover .yt-media img { transform: scale(1.04); }
  .yt-karta:hover .yt-play { transform: translate(-50%, -50%) scale(1.04); }
  .yt-kanal:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.7); }
  .yt a.yt-wszystkie:hover { color: #fff; }
  .yt-wszystkie:hover svg { transform: translateX(3px); }
}

/* Okno z filmem: dialog na cały ekran (klik poza ramką trafia w sam dialog i zamyka), ramka na środku, film 16:9,
   nad nim tytuł i zamknięcie. Tło przyciemnione głęboką zielenią. Strona pod spodem nie przewija się (klasa na html). */
.yt-okno { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 24px;
  border: 0; background: transparent; color: #fff; overflow: auto; }
.yt-okno[open] { display: grid; place-items: center; }
.yt-okno::backdrop { background: rgba(3, 17, 11, 0.93); }
.yt-okno-ramka { width: min(1120px, 100%, (100vh - 150px) * 16 / 9); width: min(1120px, 100%, (100dvh - 150px) * 16 / 9); }
.yt-okno-pasek { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.yt-okno-tytul { font-size: clamp(15px, 0.4vw + 13px, 18px); font-weight: 600; line-height: 1.35; color: #fff; text-wrap: balance; }
.yt .yt-zamknij { flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; box-shadow: none; touch-action: manipulation;
  transition: background-color 160ms ease, transform 160ms var(--yt-ease); }
.yt .yt-zamknij:hover, .yt .yt-zamknij:focus { background: rgba(255, 255, 255, 0.24); color: #fff; }
.yt .yt-zamknij:active { transform: scale(0.94); }
.yt-zamknij svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
/* do czasu wczytania odtwarzacza widać miniaturę klikniętego filmu (skrypt ustawia ją jako tło), potem film wchodzi
   płynnie, jak odtwarzacz nad plakatem w opiniach */
.yt-okno-film { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--yt-r); background: #000 center / cover no-repeat;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8); }
.yt-okno-film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 300ms ease; }
.yt-okno-film.gotowe iframe { opacity: 1; }
html.yt-otwarte { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .yt-okno[open] .yt-okno-ramka { transition: opacity 220ms var(--yt-ease), transform 220ms var(--yt-ease); }
  .yt-okno[open]::backdrop { transition: opacity 220ms ease; }
  @starting-style {
    .yt-okno[open] .yt-okno-ramka { opacity: 0; transform: scale(0.96); }
    .yt-okno[open]::backdrop { opacity: 0; }
  }
}

/* Telefon (Igor 02.10.2026: „te filmy zrobiłbym większe… jak na PC duża miniatura i film, a pod nim nagłówek albo
   temat”): każdy film jako duża karta jak w aplikacji YouTube, miniatura 16:9 na całą szerokość, pod nią temat;
   cztery karty jedna pod drugą, więc wszystkie widać bez przewijania w bok. Opis filmu zostaje dla czytnika (nazwa
   kafla), bo miniatury mają własny duży napis, a krótsza karta to mniej przewijania. Do 02.10 były tu wiersze z małą
   miniaturą po lewej. Okno bez marginesów bocznych poza 12 px. */
@media (max-width: 599px) {
  .yt-wew { width: min(1040px, 100% - 32px); }
  .yt-siatka { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .yt-czas { right: 10px; bottom: 10px; font-size: 12.5px; }
  .yt-tresc { gap: 4px; padding: 14px 16px 16px; }
  .yt-tytul { font-size: 18px; line-height: 1.3; }
  /* pod miniaturą sam temat; opis zostaje dla czytnika (nazwa kafla) */
  .yt-opis { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* karta kanału: wiersz profilu nad trzema liczbami w jednym rzędzie (wszystkie widoczne naraz, bez łamania) */
  .yt-kanal { display: flex; gap: 12px; width: 100%; padding: 14px 16px 16px; }
  .yt-kanal .yt-awatar { width: 48px; height: 48px; }
  .yt-profil-nazwa { font-size: 17px; }
  .yt-profil-adres { font-size: 13px; }
  .yt-kanal-liczby { padding-top: 12px; }
  .yt-kanal-liczby { width: 100%; justify-content: center; }
  .yt-stat { flex: 1 1 auto; padding-inline: 8px; }
  .yt-liczba { font-size: 20px; }
  .yt-podpis { font-size: 12.5px; }
  .yt-okno { padding: 12px; }
}
@media (max-width: 359px) {
  .yt-stat { padding-inline: 5px; }
  .yt-liczba { font-size: 18px; }
  .yt-podpis { font-size: 12px; }
}

/* Ograniczony ruch: tło stoi razem z sekcją (jak w opiniach), liczby od razu końcowe (skrypt nie liczy). */
@media (prefers-reduced-motion: reduce) {
  .yt-tlo-kadr { position: absolute; inset: 0; height: auto; }
  .yt-karta, .yt-media img, .yt-play, .yt-kanal, .yt-wszystkie svg, .yt-okno-film iframe { transition: none; }
  .yt-karta:hover, .yt-karta:active, .yt-karta:hover .yt-media img { transform: none; }
}
/* zespol.css */
/* LAB sekcja „Poznaj nas” nowej strony głównej aslandi.pl, v3 (29.09.2026): wersja od zera na polecenie Igora („zrób to
   po swojemu od zera… bazując na skillu i kreatywności oraz prostocie”), po uwadze, że nagłówek v2 wisiał odizolowany
   (KIERUNEK.md). Jeden komponent na wszystkich ekranach: zamknięty kafelek osoby jak na zaakceptowanym telefonie v2,
   w języku kart tej strony (realizacje, opinie: białe tło, linia #dce3da, promień 12 px, cień tonowany sosną); zdjęcie na
   ciepłym złotym tle ze światłem za głową, pod nim imię i cytat. Nagłówek zwarty i wyśrodkowany jak w innych sekcjach,
   logo tuż pod nim. Komputer: cztery kafelki w rzędzie; z logo schodzi jedna złota linia i rozgałęzia się do czterech
   kafelków (gramatyka strony „Trasa energii”); przy wejściu w widok płynie nią raz prąd (zielony jak w hero) i gaśnie
   w złoto, całość ok. 1,8 s (WCAG 2.2.2). Telefon i tablet: 2 x 2, bez linii (Igor). Ograniczony ruch i bez skryptu:
   linia od razu złota. Portrety: postacie wycięte (kanał alfa, przygotuj_media.py). Marka: sosna #123f2d, złoto #ceb472,
   Poppins; skille labu: impeccable, taste-skill, frontend-design, emil-design-eng. */
.pz {
  --pz-sosna: #123f2d;
  --pz-zloto: #ceb472;
  --pz-atrament: #1c3428;
  --pz-szary: #58685f;
  --pz-tlo: #f7f8f4;
  --pz-linia-karty: #dce3da;
  --pz-prad: #27b863;
  --pz-prad-poswiata: rgb(79 232 127 / 0.55);
  --pz-odstep: clamp(12px, 2vw, 24px);     /* odstęp między kafelkami */
  --pz-pion: clamp(18px, 1.8vw, 26px);     /* linia z logo do rozgałęzienia */
  --pz-zejscie: clamp(18px, 1.8vw, 26px);  /* z rozgałęzienia do kafelka */
  --pz-wyjscie: cubic-bezier(0.23, 1, 0.32, 1);
  background: var(--pz-tlo);
  color: var(--pz-atrament);
  font-family: Poppins, system-ui, sans-serif;
  padding-block: clamp(64px, 7vw, 104px);
}
.pz *, .pz *::before, .pz *::after { box-sizing: border-box; }
.pz h2, .pz h3, .pz p, .pz ul, .pz figure { margin: 0; }
.pz ul { padding: 0; list-style: none; }
.pz ::selection { background: #cfdcc5; color: var(--pz-atrament); }
.pz-wew { width: min(1280px, 100% - 64px); margin-inline: auto; }

/* Nagłówek jak w usługach, opiniach i realizacjach (wyśrodkowany, zwarty), logo tuż pod nim. */
.pz-naglowek { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 1.2vw, 16px); text-align: center;
  margin-bottom: clamp(20px, 3vw, 32px); }
.pz h2 { font-size: clamp(30px, 2.2vw + 16px, 48px); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; color: var(--pz-sosna); text-wrap: balance; }
.pz h2 em { font-style: normal; padding-inline: 2px; background: linear-gradient(transparent 66%, rgba(206, 180, 114, 0.55) 66%, rgba(206, 180, 114, 0.55) 92%, transparent 92%); }
.pz-logo { display: block; width: clamp(150px, 14vw, 210px); height: auto; }

/* Kafelki osób: 2 x 2 (telefon, tablet), cztery w rzędzie (komputer). Kafelki w rzędzie mają równą wysokość, więc
   imiona stoją na jednej wysokości. */
.pz .pz-osoby { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pz-odstep); }
.pz-osoba { position: relative; }
.pz-osoba figure { height: 100%; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--pz-linia-karty);
  border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(18, 63, 45, 0.06), 0 16px 32px -24px rgba(18, 63, 45, 0.5); }
.pz-portret { aspect-ratio: 675 / 851;
  background: radial-gradient(ellipse 70% 42% at 50% 30%, rgb(255 251 242 / 0.95), rgb(255 251 242 / 0) 72%),
    linear-gradient(180deg, #f8f3e8 0%, #ede4d0 100%); }
.pz-portret img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pz-osoba figcaption { padding: 12px clamp(10px, 1.3vw, 18px) 14px; container-type: inline-size; }

/* Imię w jednej linii: maleje tylko w zbyt wąskim podpisie (cqi = 1 % szerokości podpisu; „Dagmara Jarząbek” ma
   w Poppins 600 szerokość 9,78 em), ale nie poniżej 15 px, żeby zostało wyraźnie większe od cytatu; na najwęższych
   telefonach długie imię łamie się wtedy na dwie linie. Przeglądarki bez cqi biorą pierwszą deklarację. */
.pz .pz-imie { margin: 0; padding: 0; font-family: inherit; font-size: clamp(17px, 0.55vw + 14px, 21px);
  font-size: max(15px, min(9.9cqi, clamp(17px, 0.55vw + 14px, 21px))); line-height: 1.25; font-weight: 600;
  letter-spacing: -0.005em; text-transform: none; color: var(--pz-sosna); text-wrap: balance; }
/* Cudzysłów otwierający wysunięty poza krawędź tekstu o swoją szerokość (0,35 em w Poppins 400), więc pierwsza litera
   cytatu stoi w jednej linii z kolejnymi liniami i z imieniem (recenzja v3). */
.pz .pz-cytat { margin: 6px 0 0; font-size: clamp(14px, 0.2vw + 13px, 15px); line-height: 1.5; color: var(--pz-szary); text-wrap: pretty;
  text-indent: -0.35em; }

/* Linia od logo do kafelków: tylko komputer. */
.pz-trasa { display: none; }

@media (max-width: 699px) {
  .pz-wew { width: min(1280px, 100% - 32px); }
}

/* Komputer: cztery kafelki w rzędzie. Linia: pion spod logo, rozgałęzienie od środka pierwszego do środka ostatniego
   kafelka (środki liczone z szerokości siatki i odstępu) i jeszcze 1 px dalej, do zewnętrznej krawędzi skrajnego
   odcinka (odcinek ma 2 px na środku kafelka), żeby łokieć był domknięty bez ząbka; odcinek do każdego kafelka
   (::before kafelka) kończy się na jego górnej krawędzi. */
@media (min-width: 1024px) {
  .pz .pz-osoby { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--pz-zejscie); }
  .pz-naglowek { margin-bottom: 0; }
  .pz-trasa { display: block; position: relative; height: var(--pz-pion); margin-top: clamp(12px, 1.2vw, 16px); }
  .pz-trasa span, .pz-osoba::before { position: absolute; display: block; background: var(--pz-zloto); }
  .pz-trasa-pion { left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; transform-origin: top; }
  .pz-trasa-l, .pz-trasa-p { bottom: 0; height: 2px; }
  .pz-trasa-l { left: calc((100% - 3 * var(--pz-odstep)) / 8 - 1px); right: 50%; transform-origin: right; }
  .pz-trasa-p { left: 50%; right: calc((100% - 3 * var(--pz-odstep)) / 8 - 1px); transform-origin: left; }
  .pz-osoba::before { content: ""; left: 50%; bottom: 100%; width: 2px; height: var(--pz-zejscie); margin-left: -1px; transform-origin: top; }
}

/* Jedna chwila ruchu na komputerze (Emil: mocne ease-out, stagger 60 ms; tylko transform, kolor na końcu): linia rysuje
   się od logo w dół i na boki zielonym prądem z poświatą, dochodzi do kafelków (najpierw środkowych, potem skrajnych,
   w kolejności, w jakiej dosięga ich rozgałęzienie) i po chwili gaśnie w złoto. Razem ok. 1,8 s. Klasa pz--js ze
   skryptu sekcji (tylko przy dozwolonym ruchu), pz--prad po wejściu linii w widok. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .pz--js .pz-trasa span, .pz--js .pz-osoba::before { background: var(--pz-prad); box-shadow: 0 0 8px var(--pz-prad-poswiata); }
  .pz--js .pz-trasa-pion, .pz--js .pz-osoba::before { transform: scaleY(0); }
  .pz--js .pz-trasa-l, .pz--js .pz-trasa-p { transform: scaleX(0); }
  .pz--prad .pz-trasa span, .pz--prad .pz-osoba::before { background: var(--pz-zloto); box-shadow: 0 0 8px rgb(79 232 127 / 0); }
  .pz--prad .pz-trasa-pion { transform: none;
    transition: transform 240ms var(--pz-wyjscie), background-color 700ms ease 1100ms, box-shadow 700ms ease 1100ms; }
  .pz--prad .pz-trasa-l, .pz--prad .pz-trasa-p { transform: none;
    transition: transform 480ms var(--pz-wyjscie) 200ms, background-color 700ms ease 1100ms, box-shadow 700ms ease 1100ms; }
  .pz--prad .pz-osoba::before { transform: none;
    transition: transform 220ms var(--pz-wyjscie) 240ms, background-color 700ms ease 1100ms, box-shadow 700ms ease 1100ms; }
  .pz--prad .pz-osoba:nth-child(1)::before, .pz--prad .pz-osoba:nth-child(4)::before { transition-delay: 450ms, 1100ms, 1100ms; }
}
/* faq.css */
/* LAB sekcja FAQ nowej strony głównej aslandi.pl, v1 (30.09.2026), w miejscu starego bloku bloga 8eb8e7a, tuż przed
   wezwaniem z formularzem. Polecenie Igora: sekcja bardzo prosta, ale z powiązaniem z OZE i naszym stylem, plus coś
   niekonwencjonalnego; kilka pytań realnie zadawanych przez klientów, odpowiedzi z wiedzy o firmie (wpisy, blog, strona).
   Kierunek: biała sekcja (Igor 30.09: „tło FAQ białe całej sekcji”), złote gałązki marki schodzą przez nią z Poznaj nas.
   Lewa kolumna (przyklejona na komputerze): nagłówek, kategorie
   (wszystkie widoczne naraz, także na telefonie), kontakt „Nie ma tu Twojego pytania?”. Prawa: lista pytań.
   Element OZE: pytania wiszą na złotej „trasie energii” (gramatyka hero: złota linia, zielony prąd). Każde pytanie ma
   węzeł; po otwarciu prąd spływa linią do jego węzła, a węzeł się zapala. Poza tym spokój.
   Ruch (Emil): rozwinięcie odpowiedzi 240 ms krzywą ease-out marki, ikona plus/minus 200 ms, prąd po linii 420 ms;
   filtr kategorii bez animacji (częsta czynność). Ograniczony ruch: bez przejść. Bez skryptu wszystkie odpowiedzi
   są rozwinięte, bez linii prądu. */
.fq {
  --fq-sosna: #123f2d;
  --fq-atrament: #1c3428;
  --fq-szary: #58685f;
  --fq-zloto: #ceb472;
  --fq-zloto-tekst: #182e23;
  --fq-linia: #dce3da;
  --fq-tlo: #fff;
  --fq-szalwia: #eaf0e3;
  --fq-prad: #27b863;
  --fq-fokus: #a67b23;
  --fq-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --fq-r: 18px;
  position: relative;
  background: var(--fq-tlo);
  color: var(--fq-atrament);
  font-family: Poppins, system-ui, sans-serif;
  padding-block: clamp(64px, 7vw, 104px);
}
.fq *, .fq *::before, .fq *::after { box-sizing: border-box; }
.fq h2, .fq h3, .fq p, .fq ol { margin: 0; }
.fq ol { padding: 0; list-style: none; }
.fq a, .fq button { -webkit-tap-highlight-color: transparent; }
.fq ::selection { background: #cfdcc5; color: var(--fq-atrament); }
.fq :focus-visible { outline: 3px solid var(--fq-fokus); outline-offset: 3px; }

.fq-wew { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); align-items: start;
  width: min(1040px, 100% - 64px); margin-inline: auto; }
.fq-bok { position: sticky; top: 120px; }

/* Nagłówek jak w usługach (jasna sekcja): sosna, jedno słowo ze złotym podkreśleniem; tu wyrównany do lewej. */
.fq h2 { font-size: clamp(30px, 2.2vw + 16px, 48px); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; color: var(--fq-sosna); text-wrap: balance; }
.fq h2 em { font-style: normal; padding-inline: 2px; background: linear-gradient(transparent 66%, rgba(206, 180, 114, 0.55) 66%, rgba(206, 180, 114, 0.55) 92%, transparent 92%); }
.fq-lead { margin-top: 18px; font-size: clamp(16.5px, 0.3vw + 15px, 18.5px); line-height: 1.55; color: var(--fq-szary); text-wrap: pretty; }

/* Kategorie: pigułki zawijane (wszystkie widoczne naraz, bez przewijania w bok). */
.fq-kategorie { display: flex; flex-wrap: wrap; gap: 8px 6px; margin-top: 26px; }
.fq .fq-kat-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--fq-linia); border-radius: 999px;
  background: #fff; color: var(--fq-sosna); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: normal;
  text-transform: none; box-shadow: none; cursor: pointer; touch-action: manipulation; user-select: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms var(--fq-ease); }
.fq .fq-kat-btn:hover, .fq .fq-kat-btn:focus { background: #fff; color: var(--fq-sosna); }
.fq .fq-kat-btn[aria-pressed="true"] { border-color: var(--fq-sosna); background: var(--fq-sosna); color: #fff; }
.fq .fq-kat-btn:active { transform: scale(0.97); }
.fq-kategorie[hidden] { display: none; }

/* Kontakt pod kategoriami: gdy pytania nie ma na liście. Link telefonu jak w innych sekcjach. */
.fq-kontakt { margin-top: 28px; padding: 20px 22px; border-radius: 14px; background: #f6f8f3; border: 1px solid var(--fq-linia); }
.fq-kontakt-tytul { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--fq-sosna); }
.fq-kontakt .fq-kontakt-tekst { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--fq-szary); }
.fq a.fq-do-formularza, .fq a.fq-do-formularza:hover, .fq a.fq-do-formularza:focus, .fq a.fq-do-formularza:visited { color: var(--fq-sosna);
  font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.fq-tel { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 8px; border-radius: 6px; color: var(--fq-sosna);
  font-size: 19px; font-weight: 700; text-decoration: none; touch-action: manipulation; }
.fq-tel svg { width: 20px; height: 20px; fill: none; stroke: var(--fq-zloto); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Lista na trasie energii: złota linia po lewej od pierwszego do ostatniego węzła; zielony prąd (skrypt ustawia jego
   długość zmienną --fq-prad-dl) spływa do węzła otwartego pytania. */
.fq-lista { position: relative; --fq-x: 11px; }
.fq-lista::before { content: ""; position: absolute; left: var(--fq-x); top: var(--fq-od, 34px); bottom: var(--fq-do, 34px); width: 2px;
  margin-left: -1px; border-radius: 2px; background: var(--fq-zloto); opacity: 0.55; }
.fq-prad { position: absolute; list-style: none; left: var(--fq-x); top: var(--fq-od, 34px); width: 2px; height: var(--fq-prad-dl, 0px); margin-left: -1px;
  border-radius: 2px; background: linear-gradient(180deg, rgba(39, 184, 99, 0.25), var(--fq-prad)); box-shadow: 0 0 8px rgba(39, 184, 99, 0.45);
  transition: height 420ms var(--fq-ease); pointer-events: none; }
.fq-pozycja { position: relative; border-bottom: 1px solid var(--fq-linia); }
.fq-prad + .fq-pozycja { border-top: 1px solid var(--fq-linia); }
.fq-pozycja[hidden] { display: none; }
.fq .fq-pyt-btn { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; width: 100%;
  min-height: 68px; padding: 18px 4px 18px 40px; border: 0; border-radius: 0; background: transparent; color: var(--fq-sosna);
  font: inherit; font-size: clamp(16.5px, 0.35vw + 14.5px, 18.5px); font-weight: 600; line-height: 1.35; letter-spacing: -0.005em;
  text-align: left; text-transform: none; box-shadow: none; cursor: pointer; touch-action: manipulation; }
.fq .fq-pyt-btn:hover, .fq .fq-pyt-btn:focus { background: transparent; color: var(--fq-sosna); }
.fq .fq-pyt-btn:focus-visible { outline-offset: -3px; border-radius: 8px; }
/* węzeł na trasie: złoty pierścień, po otwarciu zielony z poświatą */
.fq-wezel { position: absolute; left: var(--fq-x, 11px); top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  border: 2px solid var(--fq-zloto); background: var(--fq-tlo); transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease; }
.fq-pozycja.otwarta .fq-wezel { border-color: var(--fq-prad); background: var(--fq-prad); box-shadow: 0 0 0 5px rgba(39, 184, 99, 0.16); }
.fq-pyt-tekst { text-wrap: pretty; }
.fq-pyt-kat { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--fq-szary); }
/* nazwa kategorii z atrybutu: widać ją, ale nie jest częścią pytania w H3 ani nazwy przycisku (od 2.2.0) */
.fq-pyt-kat::before { content: attr(data-kat-nazwa); }
/* ikona plus/minus: pionowa kreska znika przy otwarciu */
.fq-ikona { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--fq-szalwia); transition: background-color 200ms ease; }
.fq-ikona::before, .fq-ikona::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px;
  border-radius: 2px; background: var(--fq-sosna); transition: transform 200ms var(--fq-ease); }
.fq-ikona::after { transform: rotate(90deg); }
.fq-pozycja.otwarta .fq-ikona { background: var(--fq-sosna); }
.fq-pozycja.otwarta .fq-ikona::before, .fq-pozycja.otwarta .fq-ikona::after { background: #fff; }
.fq-pozycja.otwarta .fq-ikona::after { transform: rotate(90deg) scaleX(0); }

/* Odpowiedź: rozwinięcie przez wysokość wiersza siatki (0fr → 1fr), zwinięta niewidoczna także dla czytnika i fokusu. */
.fq-odp { display: grid; grid-template-rows: 1fr; }
.fq-odp-wew { min-height: 0; overflow: hidden; }
.fq-odp-tresc { padding: 0 52px 22px 40px; }
.fq-odp p { font-size: 16px; line-height: 1.65; color: var(--fq-atrament); max-width: 62ch; text-wrap: pretty; }
.fq-odp p + p { margin-top: 10px; }
/* zwykły tekst (nie flex), żeby przy zawinięciu strzałka została przy ostatnim słowie; wysokość celu 44 px z odstępów */
.fq-wiecej { display: inline-block; padding-block: 11px; line-height: 22px; margin-top: 0; border-radius: 6px; color: var(--fq-sosna);
  font-size: 14.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.fq-bez-lamania { white-space: nowrap; }
.fq-wiecej svg { margin-left: 6px; vertical-align: -3px; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 200ms var(--fq-ease); }
html.fq-js .fq-odp { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 240ms var(--fq-ease), visibility 0s linear 240ms; }
html.fq-js .fq-odp-tresc { opacity: 0; transform: translateY(-4px); transition: opacity 200ms ease, transform 240ms var(--fq-ease); }
html.fq-js .fq-pozycja.otwarta .fq-odp { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 240ms var(--fq-ease), visibility 0s; }
html.fq-js .fq-pozycja.otwarta .fq-odp-tresc { opacity: 1; transform: none; }
/* zamknięcie innego pytania przy otwieraniu: od razu, żeby kliknięte nie uciekało spod palca (skrypt, punkt 6) */
html.fq-js .fq-pozycja.fq-od-razu .fq-odp, html.fq-js .fq-pozycja.fq-od-razu .fq-odp-tresc { transition: none; }
/* bez skryptu nie ma prądu ani węzłów zapalanych; linia i węzły zostają jako ozdoba */
html:not(.fq-js) .fq-prad, html:not(.fq-js) .fq-ikona, html:not(.fq-js) .fq-kategorie { display: none; }

/* motyw (Astra) zmienia linkom kolor przy najechaniu i fokusie; linki sekcji trzymają swoje barwy */
.fq a.fq-tel, .fq a.fq-tel:hover, .fq a.fq-tel:focus, .fq a.fq-tel:active, .fq a.fq-tel:visited,
.fq a.fq-wiecej, .fq a.fq-wiecej:focus, .fq a.fq-wiecej:active, .fq a.fq-wiecej:visited { color: var(--fq-sosna); }

@media (hover: hover) and (pointer: fine) {
  .fq .fq-kat-btn:not([aria-pressed="true"]):hover { border-color: var(--fq-sosna); }
  .fq-pyt-btn:hover .fq-ikona { background: #dfe8d6; }
  .fq-pozycja.otwarta .fq-pyt-btn:hover .fq-ikona { background: #19583f; }
  .fq-pyt-btn:hover .fq-wezel { border-color: var(--fq-sosna); }
  .fq a.fq-wiecej:hover { color: #19583f; }
  .fq-wiecej:hover svg { transform: translateX(3px); }
}

/* Tablet i telefon: jedna kolumna (nagłówek, kategorie, lista, kontakt pod listą). */
@media (max-width: 899px) {
  .fq-wew { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .fq-bok { position: static; display: contents; }
  .fq-naglowek { order: 1; }
  .fq-kategorie { order: 2; margin-top: 0; }
  .fq-lista { order: 3; }
  .fq-kontakt { order: 4; margin-top: 0; }
}
@media (max-width: 599px) {
  .fq-wew { width: min(1040px, 100% - 32px); }
  .fq .fq-kat-btn { padding: 0 13px; font-size: 14px; }
  .fq .fq-pyt-btn { gap: 12px; min-height: 64px; padding: 16px 0 16px 34px; }
  .fq-lista { --fq-x: 9px; }
  .fq-ikona { width: 32px; height: 32px; }
  .fq-odp-tresc { padding: 0 8px 20px 34px; }
  .fq-odp p { font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .fq-prad, .fq-wezel, .fq-ikona, .fq-ikona::before, .fq-ikona::after, .fq-wiecej svg, .fq .fq-kat-btn { transition: none; }
  html.fq-js .fq-odp, html.fq-js .fq-pozycja.otwarta .fq-odp, html.fq-js .fq-odp-tresc { transition: none; }
}
/* poradniki.css */
/* LAB sekcja „Poradniki na blogu” nowej strony głównej aslandi.pl, v1 (06.10.2026). Język jasnych sekcji strony: tło
   #f7f8f4 jak realizacje i „Poznaj nas”, nagłówek sosną ze złotym podkreśleniem (moduł podkreślenia rysuje kreskę),
   przycisk obrysem jak „Zobacz wszystkie realizacje”, karta jak film w sekcji YouTube (zdjęcie 16:9 nad tytułem, ten
   sam cień, uniesienie i powiększenie zdjęcia przy najechaniu). Komputer 3 x 2, tablet 2 kolumny; telefon lista
   (miniatura z lewej, tytuł z prawej), żeby sześć wpisów nie odsunęło formularza wyceny o kilka ekranów. */
.pr {
  --pr-sosna: #123f2d;
  --pr-atrament: #1c3428;
  --pr-szary: #58685f;
  --pr-tlo: #f7f8f4;
  --pr-szalwia: #eaf0e3;
  --pr-fokus: #a67b23;
  --pr-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --pr-r: 12px;
  position: relative;
  background: var(--pr-tlo);
  color: var(--pr-atrament);
  font-family: Poppins, system-ui, sans-serif;
  padding-block: clamp(64px, 7vw, 104px);
}
.pr *, .pr *::before, .pr *::after { box-sizing: border-box; }
.pr h2, .pr p, .pr ul { margin: 0; }
.pr ul { padding: 0; list-style: none; }
.pr a { -webkit-tap-highlight-color: transparent; }
.pr ::selection { background: #cfdcc5; color: var(--pr-atrament); }
.pr :focus-visible { outline: 3px solid var(--pr-fokus); outline-offset: 3px; }

.pr-wew { width: min(1040px, 100% - 64px); margin-inline: auto; }
.pr-naglowek { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(28px, 3.5vw, 40px); }
.pr-tekst { max-width: 40rem; }
.pr h2 { font-size: clamp(30px, 2.2vw + 16px, 48px); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; color: var(--pr-sosna); text-wrap: balance; }
.pr h2 em { font-style: normal; padding-inline: 2px; background: linear-gradient(transparent 66%, rgba(206, 180, 114, 0.55) 66%, rgba(206, 180, 114, 0.55) 92%, transparent 92%); }
.pr-lead { margin-top: 14px; font-size: clamp(16.5px, 0.3vw + 15px, 18.5px); line-height: 1.55; color: var(--pr-szary); text-wrap: pretty; }

/* Przycisk do wszystkich wpisów: obrys, drugorzędny wobec złotej „Bezpłatnej wyceny” (jak w realizacjach). */
.pr-wszystkie { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 12px 24px;
  border: 1.5px solid var(--pr-sosna); border-radius: 10px; color: var(--pr-sosna); font-size: 16px; font-weight: 600; line-height: 1.2;
  text-decoration: none; touch-action: manipulation; transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--pr-ease); }
.pr-wszystkie svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 220ms var(--pr-ease); }
.pr-wszystkie:active { transform: scale(0.97); }

.pr-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); }
.pr-lista > li { display: flex; min-width: 0; }
.pr-karta { display: flex; flex-direction: column; width: 100%; overflow: hidden; border-radius: var(--pr-r); background: #fff;
  color: var(--pr-atrament); text-decoration: none; touch-action: manipulation;
  box-shadow: 0 1px 3px rgba(18, 63, 45, 0.1), 0 22px 44px -28px rgba(18, 63, 45, 0.45);
  transition: transform 220ms var(--pr-ease), box-shadow 220ms var(--pr-ease); }
.pr-karta:focus-visible { outline-offset: 4px; }
.pr-karta:active { transform: scale(0.985); }
.pr-media { position: relative; display: block; flex: none; aspect-ratio: 16 / 9; overflow: hidden; background: var(--pr-szalwia); }
.pr-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--pr-ease); }
.pr-brak { position: absolute; inset: 0; background: linear-gradient(135deg, var(--pr-szalwia), #dbe6d3); }
.pr-tytul { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; padding: 16px 20px 20px;
  font-size: clamp(16.5px, 0.3vw + 14.5px, 18px); font-weight: 600; line-height: 1.4; letter-spacing: -0.005em; color: var(--pr-sosna); }

/* motyw (Astra) zmienia linkom kolor przy najechaniu i fokusie (a:hover, a:focus); linki sekcji trzymają swoje barwy */
.pr a.pr-karta, .pr a.pr-karta:hover, .pr a.pr-karta:focus, .pr a.pr-karta:active, .pr a.pr-karta:visited { color: var(--pr-atrament); }
.pr a.pr-wszystkie, .pr a.pr-wszystkie:focus, .pr a.pr-wszystkie:active, .pr a.pr-wszystkie:visited { color: var(--pr-sosna); }
@media (hover: hover) and (pointer: fine) {
  .pr-karta:hover { transform: translateY(-3px); box-shadow: 0 3px 8px rgba(18, 63, 45, 0.12), 0 28px 52px -28px rgba(18, 63, 45, 0.55); }
  .pr-karta:hover:active { transform: translateY(-1px) scale(0.985); }
  .pr-karta:hover .pr-media img { transform: scale(1.04); }
  .pr a.pr-wszystkie:hover { background: var(--pr-sosna); color: #fff; }
  .pr-wszystkie:hover svg { transform: translateX(3px); }
}

/* Tablet: dwie kolumny, przycisk pod zdaniem. */
@media (max-width: 1023px) {
  .pr-naglowek { flex-direction: column; align-items: flex-start; }
  .pr-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Telefon: lista, miniatura 112 px z lewej, tytuł z prawej; przycisk na całą szerokość pod listą. */
@media (max-width: 599px) {
  .pr-wew { width: min(1040px, 100% - 32px); display: flex; flex-direction: column; }
  .pr-naglowek { display: contents; }
  .pr-tekst { margin-bottom: 24px; }
  .pr-wszystkie { order: 2; width: 100%; margin-top: 24px; }
  .pr-lista { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pr-karta { flex-direction: row; align-items: center; min-height: 84px; }
  .pr-media { width: 112px; align-self: stretch; aspect-ratio: auto; min-height: 84px; }
  .pr-tytul { padding: 12px 16px; font-size: 15.5px; line-height: 1.35; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-karta, .pr-media img, .pr-wszystkie, .pr-wszystkie svg { transition: none; }
  .pr-karta:hover, .pr-karta:active, .pr-wszystkie:active { transform: none; }
  .pr-karta:hover .pr-media img { transform: none; }
}
/* kontakt.css */
/* LAB sekcja kontaktu (wezwanie na końcu) nowej strony głównej aslandi.pl, v2 (29.09.2026): wybrany wariant B na sośnie,
   cały formularz w dużej jasnej karcie. Igor: „B wygrywa, ale zrób ją na ciemnym tle, naszym brandowym zielonym”, potem
   „tło jest zielone, ale cały formularz jest jasny, aby było wiadomo, że to CTA WIELKIE; musi być jak najlepsze pod
   konwersję”. Układ: nagłówek i zdanie na zieleni, pod nimi biała karta (do 720 px, głęboki cień) z formularzem, pod
   przyciskiem „Bez zobowiązań” i ocena w Google, zgoda drobnym drukiem na końcu karty (długi tekst prawny nie stoi już
   między polami a przyciskiem); telefon pod kartą jako druga droga. Jedna akcja z jedną nazwą („Bezpłatna wycena”, jak
   w nagłówku witryny). Formularz Contact Form 7 w budowie z ../PLAN.md: etykiety nad polami, pola 16 px (mniejsze
   powiększają stronę na iPhonie), usługa jednym dotknięciem, komunikat przy polu, potwierdzenie w miejscu formularza.
   Na sośnie #123f2d: nagłówek biały 11,8:1, zdanie biel 84% 8,8:1, obrys fokusu złoto jasne #dcc78f 7,1:1. W karcie:
   atrament #1c3428, obrys pól #7c8c82 (3,3:1, granica kontrolki), błąd #b3261e 6,5:1, fokus #a67b23, drobny druk
   #58685f 6,0:1; przycisk złoty #ceb472 z tekstem #182e23 7,2:1. Stopka pod sekcją ma zbliżoną zieleń (#163327), więc
   sekcja ma u góry jaśniejszą poświatę, a na dole cienką linię: strona nie wygasa w stopkę.
   Motyw (Astra) ma własne, silne reguły dla pól Contact Form 7 (niebieska ramka #046bd2 przy fokusie, bez obrysu,
   szary tekst), a przyciskom zdejmuje obrys przy fokusie; reguły tutaj są silniejsze. */
.kt {
  --kt-sosna: #123f2d;
  --kt-atrament: #1c3428;
  --kt-szary: #58685f;
  --kt-linia: #dce3da;
  --kt-obrys: #7c8c82;
  --kt-szalwia: #eef3ec;
  --kt-zloto: #ceb472;
  --kt-zloto-2: #d8c287;
  --kt-zloto-tekst: #182e23;
  --kt-zloto-jasne: #dcc78f;
  --kt-fokus: #a67b23;
  --kt-blad: #b3261e;
  --kt-ease: cubic-bezier(0.23, 1, 0.32, 1);
  padding-block: clamp(64px, 7vw, 104px);
  background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(27, 90, 65, 0.9) 0%, rgba(27, 90, 65, 0) 100%), var(--kt-sosna);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1);
  color: #fff;
  font-family: Poppins, system-ui, sans-serif;
}
.kt *, .kt *::before, .kt *::after { box-sizing: border-box; }
.kt h2, .kt p, .kt ul, .kt fieldset, .kt legend { margin: 0; padding: 0; }
.kt fieldset { min-width: 0; border: 0; }
.kt ::selection { background: #cfdcc5; color: var(--kt-atrament); }
.kt :focus-visible { outline: 3px solid var(--kt-zloto-jasne); outline-offset: 3px; }
.kt-karta :focus-visible { outline-color: var(--kt-fokus); }
.kt [hidden] { display: none !important; }
.kt-wew { width: min(720px, 100% - 64px); margin-inline: auto; }

/* Nagłówek na zieleni: nazwa akcji jak w nagłówku witryny; rozmiar i krój jak H2 wszystkich nowych sekcji strony
   (usługi, opinie, realizacje, „Poznaj nas”: clamp 30–48 px, -0,02em), czas wyróżniony jak w sekcji opinii. */
.kt .kt-h2 { font-family: inherit; font-size: clamp(30px, 2.2vw + 16px, 48px); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em;
  text-align: center; text-transform: none; color: #fff; text-wrap: balance; }
/* wyróżnienie na ciemnym tle jak w sekcji opinii (.op h2 em) i w hero: złoto jasne, bez pasa (półprzezroczysty złoty
   pas na sośnie wychodził oliwkowy #6a7d53; recenzja 29.09) */
.kt-h2-czas { white-space: nowrap; color: var(--kt-zloto-jasne); }
.kt .kt-lead { max-width: 34ch; margin: 14px auto 0; font-size: clamp(16.5px, 0.35vw + 15px, 19px); line-height: 1.55; text-align: center;
  color: rgba(255, 255, 255, 0.84); text-wrap: balance; }

/* Karta: jasna, duża, z głębokim cieniem na zieleni; to jest wezwanie tej strony. */
.kt-karta { margin-top: clamp(28px, 3vw, 40px); padding: clamp(24px, 3.4vw, 44px); border-radius: 18px; background: #fff; color: var(--kt-atrament);
  box-shadow: 0 2px 6px rgba(0, 21, 15, 0.2), 0 44px 90px -40px rgba(0, 21, 15, 0.85); }   /* cienie tonowane zielenią (DESIGN.md) */

/* ---------- Formularz ---------- */
.kt .screen-reader-response { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.kt .hidden-fields-container { display: none; }
.kt-formularz form p { margin: 0; }              /* Contact Form 7 owija linie szablonu w akapity, jeśli nie wyłączymy tego filtrem */
.kt-pola { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kt-pola > :nth-child(3) { grid-column: 1 / -1; }
.kt-pole { display: grid; align-content: start; gap: 6px; }   /* dwulinijkowy błąd obok nie przesuwa pola w rzędzie */
.kt .kt-etykieta { display: block; padding: 0; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--kt-atrament); }
.kt .wpcf7-form-control-wrap { display: block; position: relative; }
.kt .wpcf7 input.wpcf7-form-control:not([type=submit]):not([type=radio]),
.kt .wpcf7 input.wpcf7-form-control:not([type=submit]):not([type=radio]):focus,
.kt .wpcf7 select.wpcf7-form-control, .kt .wpcf7 select.wpcf7-form-control:focus {
  display: block; width: 100%; height: 54px; margin: 0; padding: 0 14px; border: 1px solid var(--kt-obrys); border-radius: 8px; background-color: #fff;
  box-shadow: none; color: var(--kt-atrament); font: inherit; font-size: 16px; line-height: 1.2; transition: border-color 160ms ease, box-shadow 160ms ease; }
.kt .wpcf7 select.wpcf7-form-control, .kt .wpcf7 select.wpcf7-form-control:focus { padding-right: 44px; appearance: none; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123f2d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 20px; }
.kt .wpcf7 input.wpcf7-form-control:not([type=submit]):not([type=radio]):focus, .kt .wpcf7 select.wpcf7-form-control:focus {
  border-color: var(--kt-sosna); outline: 3px solid var(--kt-fokus); outline-offset: 1px; }
/* pole z błędem (selektor silniejszy od reguł pól wyżej, inaczej ich ramka przykrywała błąd) */
.kt .wpcf7 input.wpcf7-form-control.wpcf7-not-valid:not([type=submit]):not([type=radio]),
.kt .wpcf7 input.wpcf7-form-control.wpcf7-not-valid:not([type=submit]):not([type=radio]):focus,
.kt .wpcf7 select.wpcf7-form-control.wpcf7-not-valid, .kt .wpcf7 select.wpcf7-form-control.wpcf7-not-valid:focus {
  border-color: var(--kt-blad); box-shadow: 0 0 0 1px var(--kt-blad); }
/* fokus na polu z błędem: obrys w kolorze błędu, zamiast brązowego nałożonego na czerwony */
.kt .wpcf7 input.wpcf7-form-control.wpcf7-not-valid:not([type=submit]):not([type=radio]):focus,
.kt .wpcf7 select.wpcf7-form-control.wpcf7-not-valid:focus { outline-color: var(--kt-blad); }
.kt .wpcf7-not-valid-tip { display: flex; align-items: flex-start; gap: 6px; margin-top: 7px; font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--kt-blad); }
.kt .wpcf7-not-valid-tip::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3261e' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.5'/%3E%3C/svg%3E") no-repeat center / contain; }

/* v3 (09.10.2026, formularz sprzedażowy): usługi na początku karty jako pole wyboru wielokrotnego Contact Form 7
   ([checkbox* usluga …], kilka naraz, każdy kafel osobno w kolejności Tab, spacja zaznacza); znak wyboru to kwadrat
   z ptaszkiem (::before), ikona usługi z wartości opcji (::after; Contact Form 7 nie przyjmie dodatkowych elementów
   w etykiecie). Pięć opcji: pompa ciepła, fotowoltaika, magazyn energii, klimatyzacja, inna usługa; dofinansowanie
   nie jest opcją, tylko zapewnieniem pod kaflami (.kt-dof). Od 760 px 3 + 2, węziej 2 + 2 + „Inna usługa” na całą
   szerokość; nazwy w jednej linii od 340 px (węziej „Magazyn energii” w dwóch). Wybrany kafel na sośnie, znak złoty z ptaszkiem, ikona złota. */
/* v3: usługi na początku karty, kontakt pod nimi */
.kt-usluga { margin-top: 0; }
.kt-usluga legend { margin-bottom: 8px; }
.kt .kt-podpowiedz { margin-left: 4px; font-weight: 400; color: var(--kt-szary); }
/* zapewnienie o dofinansowaniu pod wyborem (tarcza jak „Bez zobowiązań”) */
.kt .kt-dof { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 14px; line-height: 1.4; color: var(--kt-atrament); }
.kt .kt-dof::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; background: var(--kt-sosna); -webkit-mask: 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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5.5c0 4.4-3 8.1-7 9.5-4-1.4-7-5.1-7-9.5V6z'/%3E%3Cpath d='m8.8 12.2 2.3 2.3 4.2-4.6'/%3E%3C/svg%3E") center / contain no-repeat; mask: 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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5.5c0 4.4-3 8.1-7 9.5-4-1.4-7-5.1-7-9.5V6z'/%3E%3Cpath d='m8.8 12.2 2.3 2.3 4.2-4.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.kt-usluga + .kt-pola { margin-top: 22px; }
/* trzy kolumny od 760 px (dwa rzędy), węziej dwie (trzy rzędy) */
.kt :is(.wpcf7-radio, .wpcf7-checkbox) { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.kt .wpcf7-list-item { display: block; grid-column: span 2; margin: 0; }
.kt .wpcf7-list-item label { height: 100%; }   /* kafle w rzędzie równej wysokości, gdy napis się zawinie; treść od góry (align-content: start), znak i ikona w jednej linii z sąsiadem */
.kt .wpcf7-list-item:nth-child(n+4) { grid-column: span 3; }   /* v3: pięć opcji, 3 + 2 */
/* kafel: kółko | ikona | pusta kolumna tej samej szerokości (ikona na środku), nazwa w drugim rzędzie;
   --kt-kafel-x to boczny odstęp napisu (węższy na najwęższych telefonach) */
.kt .wpcf7-list-item label { --kt-kafel-x: 12px; position: relative; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "kolko ikona ." "nazwa nazwa nazwa";
  align-items: center; align-content: start; row-gap: 4px; width: 100%; min-height: 68px; margin: 0; padding: 10px var(--kt-kafel-x); text-align: center;
  border: 1px solid var(--kt-obrys); border-radius: 12px; background: #fff; color: var(--kt-atrament); font-size: 15px; font-weight: 600; line-height: 1.2;
  cursor: pointer; user-select: none; touch-action: manipulation; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms var(--kt-ease); }
.kt .wpcf7-list-item input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* znak wyboru (kwadrat): obrys jako border (w trybie wysokiego kontrastu cienie znikają), zawsze 10 px od wewnętrznej krawędzi */
.kt .wpcf7-list-item label::before { content: ""; grid-area: kolko; justify-self: start; width: 16px; height: 16px; margin-left: calc(10px - var(--kt-kafel-x));
  border: 2px solid var(--kt-obrys); border-radius: 4px; pointer-events: none; transition: border-color 160ms ease, background-color 160ms ease; }
/* ikona usługi: maska z rysunku rodziny ikon realizacji (24 px, kreska ok. 1,8 px), kolor z tła */
.kt .wpcf7-list-item label::after { grid-area: ikona; width: 26px; height: 26px; background: var(--kt-sosna); pointer-events: none;
  -webkit-mask: var(--kt-ikona) center / contain no-repeat; mask: var(--kt-ikona) center / contain no-repeat; transition: background-color 160ms ease; }
/* ikona tylko przy znanej opcji: content i rysunek w regułach według wartości (opcja bez reguły albo przeglądarka bez
   :has() zostaje bez ikony zamiast pokazać pełny kwadrat tła) */
.kt .wpcf7-list-item label:has(input[value="Instalacja fotowoltaiczna"])::after, .kt .wpcf7-list-item label:has(input[value="Fotowoltaika"])::after { content: ""; --kt-ikona: 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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12.5 7.5 4h10.5l-5 8.5z'/%3E%3Cpath d='M5 8.25h10.5M12.75 4l-5 8.5'/%3E%3Cpath d='M18 4l3.5 6v10H13v-7.5'/%3E%3Cpath d='M4 12.5V20h9'/%3E%3C/svg%3E"); }
.kt .wpcf7-list-item label:has(input[value="Pompa ciepła"])::after { content: ""; --kt-ikona: 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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='13' rx='2'/%3E%3Ccircle cx='9.5' cy='11' r='4.2'/%3E%3Cpath d='M9.5 8.2v5.6M6.7 11h5.6'/%3E%3Cpath d='M16.5 8h2M16.5 11h2M16.5 14h2'/%3E%3Cpath d='M6 17.5V20M18 17.5V20'/%3E%3C/svg%3E"); }
.kt .wpcf7-list-item label:has(input[value="Klimatyzacja"])::after { content: ""; --kt-ikona: 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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='8' rx='2'/%3E%3Cpath d='M5.5 10h13'/%3E%3Cpath d='M8 16.5c0 1.2-1 1.6-1 2.8M12 16.5c0 1.2-1 1.6-1 2.8M16 16.5c0 1.2-1 1.6-1 2.8'/%3E%3C/svg%3E"); }
.kt .wpcf7-list-item label:has(input[value="Magazyn energii"])::after { content: ""; --kt-ikona: 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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='7' width='17' height='10' rx='2'/%3E%3Cpath d='M21.5 10.5v3'/%3E%3Cpath d='m11.8 8.8-2.6 3.6h3.4l-2.6 3.6'/%3E%3C/svg%3E"); }
.kt .wpcf7-list-item label:has(input[value="Inna usługa"])::after { content: ""; --kt-ikona: 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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12h.01M12 12h.01M16 12h.01' stroke-width='2.6'/%3E%3C/svg%3E"); }
.kt .wpcf7-list-item-label { grid-area: nazwa; }
.kt .wpcf7-list-item label:has(input:checked) { border-color: var(--kt-sosna); background: var(--kt-sosna); color: #fff; }   /* bez zmiany grubości: wybór nie przesuwa rzędu */
.kt .wpcf7-list-item label:has(input:checked)::before { border-color: var(--kt-zloto-jasne); background: var(--kt-zloto-jasne) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123f2d' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.kt .wpcf7-list-item label:has(input:checked)::after { background: var(--kt-zloto-jasne); }
.kt .wpcf7-list-item label:has(input:focus-visible) { outline: 3px solid var(--kt-fokus); outline-offset: 2px; }
.kt .wpcf7-list-item label:active { transform: scale(0.98); }
/* brak wyboru przy wysyłce: czerwony tylko znak wyboru i komunikat; kafle zostają spokojne (najłatwiejszy krok) */
.kt .wpcf7-form-control-wrap[data-name="usluga"]:has(.wpcf7-not-valid-tip) .wpcf7-list-item label:not(:has(input:checked))::before { border-color: var(--kt-blad); }
.kt .kt-usluga .wpcf7-not-valid-tip { flex-basis: 100%; }

/* Wysyłka: duży złoty przycisk jak „Bezpłatna wycena” w nagłówku; kręciołek w trakcie. */
/* strzałka przy prawej krawędzi, kręciołek przy lewej; wcięcie napisu rezerwuje ich miejsce i 8 px odstępu z obu stron */
.kt-wyslij-pas { position: relative; margin-top: 24px; --kt-strzalka-od: 22px; --kt-strzalka: 22px; }
.kt input[type="submit"].kt-wyslij, .kt input[type="submit"].kt-wyslij:hover, .kt input[type="submit"].kt-wyslij:focus {
  display: block; width: 100%; height: 60px; margin: 0; padding: 0 calc(var(--kt-strzalka-od) + var(--kt-strzalka) + 8px); border: 0; border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 12px 24px -16px rgba(0, 21, 15, 0.55);   /* promień jak przyciski usług, cień zielony */
  background: var(--kt-zloto) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23182e23' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat right var(--kt-strzalka-od) center / var(--kt-strzalka);
  color: var(--kt-zloto-tekst); font: inherit; font-size: 18px; font-weight: 600; line-height: 1; letter-spacing: normal; text-transform: none;
  cursor: pointer; touch-action: manipulation; transition: background-color 160ms ease, transform 160ms var(--kt-ease); }
.kt input[type="submit"].kt-wyslij:active { transform: scale(0.985); }
/* motyw zdejmuje przyciskom obrys przy fokusie (input[type=submit]:focus { outline: 0 }); z klawiatury obrys wraca */
.kt .wpcf7 input[type="submit"].kt-wyslij:focus-visible { outline: 3px solid var(--kt-fokus); outline-offset: 3px; }
.kt .wpcf7-spinner { position: absolute; top: 50%; left: var(--kt-strzalka-od); width: 20px; height: 20px; margin: -10px 0 0; padding: 0; border: 2.5px solid rgba(24, 46, 35, 0.25);
  border-top-color: var(--kt-zloto-tekst); border-radius: 50%; background: none; opacity: 1; visibility: hidden; pointer-events: none; animation: kt-krec 0.8s linear infinite; }
.kt .wpcf7-spinner::before { content: none; }
.kt .submitting .wpcf7-spinner { visibility: visible; }
.kt .submitting input[type="submit"].kt-wyslij { opacity: 0.8; pointer-events: none; }
@keyframes kt-krec { to { transform: rotate(360deg); } }
.kt .wpcf7-response-output { display: none; }

/* Pod przyciskiem: bez zobowiązań i ocena w Google (dowód w miejscu decyzji), dalej zgoda drobnym drukiem. */
.kt-zaufanie { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; margin-top: 16px; font-size: 14.5px; line-height: 1.2; color: #46564d; }
.kt-bez { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: var(--kt-atrament); }
.kt-bez-ikona { display: grid; width: 20px; height: 20px; }
.kt-bez-ikona svg { width: 100%; height: 100%; fill: none; stroke: var(--kt-sosna); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* „220+ opinii” zawsze w jednej linii; na bardzo wąskim ekranie cały napis schodzi niżej zamiast łamać się w pół */
.kt-ocena { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.kt-ocena-opinie { white-space: nowrap; }
.kt-ocena img { display: block; width: 58px; height: auto; }
.kt-ocena-liczba { padding-left: 9px; border-left: 1px solid var(--kt-linia); font-size: 16px; font-weight: 700; color: var(--kt-atrament); }
.kt-gwiazdki { display: block; width: 76px; height: auto; fill: #fbbc04; }
.kt .kt-zgoda { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--kt-linia); font-size: 12.5px; line-height: 1.5; color: var(--kt-szary); }
.kt .kt-zgoda a, .kt .kt-zgoda a:hover, .kt .kt-zgoda a:focus, .kt .kt-zgoda a:visited { color: var(--kt-sosna); text-decoration: underline; text-underline-offset: 2px; }

/* Po wysłaniu: potwierdzenie w miejscu formularza (w karcie); błąd wysyłki z telefonem. */
.kt-dziekujemy { display: grid; justify-items: center; gap: 10px; padding-block: 12px; text-align: center; }
.kt-dziekujemy:focus { outline: none; }
.kt-dziekujemy-ikona { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--kt-sosna); }
.kt-dziekujemy-ikona svg { width: 30px; height: 30px; fill: none; stroke: var(--kt-zloto-jasne); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.kt .kt-dziekujemy-tytul { font-size: 28px; font-weight: 600; line-height: 1.25; color: var(--kt-sosna); }
.kt .kt-dziekujemy-tekst { font-size: 17px; line-height: 1.5; color: var(--kt-atrament); }
.kt-blad-wysylki { margin-top: 14px; padding: 12px 14px; border-radius: 8px; background: #fdeceb; color: #7a1c14; font-size: 15px; line-height: 1.45; }
.kt a.kt-tel-link, .kt a.kt-tel-link:hover, .kt a.kt-tel-link:focus, .kt a.kt-tel-link:visited { color: var(--kt-sosna); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.kt .kt-blad-wysylki a.kt-tel-link, .kt .kt-blad-wysylki a.kt-tel-link:hover, .kt .kt-blad-wysylki a.kt-tel-link:focus { color: #7a1c14; }

/* ---------- Telefon pod kartą (na zieleni) ---------- */
.kt-alternatywa { display: flex; justify-content: center; margin-top: 28px; }
.kt a.kt-telefon, .kt a.kt-telefon:hover, .kt a.kt-telefon:focus, .kt a.kt-telefon:visited {
  display: inline-flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 22px 8px 8px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); color: #fff; text-decoration: none; transition: background-color 160ms ease, border-color 160ms ease; }
.kt-telefon-ikona { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--kt-zloto); }
.kt-telefon-ikona svg { width: 20px; height: 20px; fill: none; stroke: var(--kt-zloto-tekst); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.kt-telefon-tekst { display: grid; gap: 2px; }
.kt-telefon-podpis { font-size: 13.5px; font-weight: 500; line-height: 1.2; color: rgba(255, 255, 255, 0.8); }
.kt-telefon-numer { font-size: 23px; font-weight: 600; line-height: 1.15; letter-spacing: 0.01em; }
.kt a.kt-telefon:active { transform: scale(0.98); }

@media (hover: hover) and (pointer: fine) {
  .kt input[type="submit"].kt-wyslij:hover { background-color: var(--kt-zloto-2); }
  .kt .wpcf7-list-item label:not(:has(input:checked)):hover { border-color: var(--kt-sosna); background: var(--kt-szalwia); }
  .kt .wpcf7-list-item label:not(:has(input:checked)):hover::before { border-color: var(--kt-sosna); }
  .kt a.kt-telefon:hover { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.12); }
}

/* Węziej niż 760 px usługi w dwóch kolumnach (ostatnia, „Inna usługa”, na całą szerokość). */
@media (max-width: 759px) {
  .kt .kt-podpowiedz { display: block; margin: 2px 0 0; }   /* na telefonie w osobnej linii: „kilka.” nie zostaje samo */
  .kt :is(.wpcf7-radio, .wpcf7-checkbox) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kt .wpcf7-list-item, .kt .wpcf7-list-item:nth-child(n+4) { grid-column: auto; }
  .kt .wpcf7-list-item.last { grid-column: 1 / -1; }
  .kt .wpcf7-list-item label { --kt-kafel-x: 10px; min-height: 64px; padding: 9px var(--kt-kafel-x); }
  .kt .wpcf7-list-item label::after { width: 24px; height: 24px; }
}
/* Telefon: karta prawie na całą szerokość, pola jedno pod drugim. */
@media (max-width: 699px) {
  .kt-wew { width: min(720px, 100% - 24px); }
  .kt .kt-h2, .kt .kt-lead { padding-inline: 4px; }
  .kt-karta { padding: 22px 16px 20px; border-radius: 16px; }
  .kt-pola { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .kt-telefon-numer { font-size: 22px; }
}
/* Najwęższe telefony: „Magazyn energii” w jednej linii przycisku (przy 360 px łamał się na dwie, a przy 320 px
   jeszcze przy 14 px; napis potrzebuje ok. 117 px przy 14 px i 113 px przy 13,5 px). */
@media (max-width: 374px) {
  .kt .wpcf7-list-item label { --kt-kafel-x: 6px; font-size: 14px; }
  /* 320 px: napis przycisku dotykał strzałki, a „220+ opinii” łamało się na dwie linie */
  .kt-wyslij-pas { --kt-strzalka-od: 16px; --kt-strzalka: 20px; }
  .kt-ocena { gap: 6px; }
  .kt-ocena img { width: 52px; }
  .kt-ocena-liczba { padding-left: 7px; }
  .kt-gwiazdki { width: 68px; }
}
@media (max-width: 339px) {
  .kt .wpcf7-list-item label { --kt-kafel-x: 6px; }   /* v3: napis zostaje 14 px (marka: 11–13 px za mało na telefonie); poniżej 340 px „Magazyn energii” zawija się w dwie linie, kafle w rzędzie równe */
}

/* Tryb wysokiego kontrastu (Windows): tła i cienie znikają, a pole wyboru jest niewidoczne, więc wybór pokazuje
   kolor systemowy Highlight w obrysie kafla i w kółku. */
@media (forced-colors: active) {
  .kt .wpcf7-list-item label::before { border-color: CanvasText; }
  .kt .wpcf7-list-item label::after { forced-color-adjust: none; background: CanvasText; }
  .kt .wpcf7-list-item label:has(input:checked) { border-color: Highlight; }
  .kt .wpcf7-list-item label:has(input:checked)::before { forced-color-adjust: none; border-color: Highlight; background: Highlight url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
  .kt .wpcf7-list-item label:has(input:checked)::after { background: Highlight; }
}

@media (prefers-reduced-motion: reduce) {
  .kt .wpcf7 input.wpcf7-form-control:not([type=submit]):not([type=radio]), .kt .wpcf7 select.wpcf7-form-control, .kt .wpcf7-list-item label, .kt .wpcf7-list-item label::before, .kt .wpcf7-list-item label::after,
  .kt input[type="submit"].kt-wyslij, .kt a.kt-telefon { transition: none; }
  .kt .wpcf7-spinner { animation-duration: 2.4s; }
}
/* akcenty.css */
/* LAB akcenty marki strony głównej aslandi.pl: gałązki z liśćmi rosnące w dół razem z przewijaniem (30.09.2026), opis
   w akcenty.js. Kolory tylko z marki: złoto #ceb472 (łodyga #cdb06a, kreska liścia), jasne złoto #dcc78f na ciemnej
   zieleni, szałwia (plamka liścia), energia: zieleń prądu z hero #27b863 / #4fe87f z poświatą.
   Sekcja z ozdobami (klasa ak-sekcja, nadawana przez skrypt) tworzy własny kontekst warstw, a warstwa leży w niej za
   treścią (z-index −1), nie przyjmuje kliknięć i nie wystaje poza sekcję. */
.ak-sekcja { position: relative; isolation: isolate; }
.ak-warstwa { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ak-warstwa svg { position: absolute; display: block; overflow: hidden; }

.ak-galaz path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ak-warstwa--jasny .ak-lodyga { stroke: #cdb06a; }
.ak-warstwa--ciemny .ak-lodyga { stroke: rgba(220, 199, 143, 0.58); }
.ak-galaz .ak-plamka { stroke: none; }
.ak-warstwa--jasny .ak-plamka { fill: #e2e9da; }
.ak-warstwa--ciemny .ak-plamka { fill: rgba(31, 87, 61, 0.6); }
.ak-warstwa--jasny .ak-obrys, .ak-warstwa--jasny .ak-glowna { stroke: #ceb472; }
.ak-warstwa--jasny .ak-boczna { stroke: #d6c291; }
.ak-warstwa--ciemny .ak-obrys, .ak-warstwa--ciemny .ak-glowna { stroke: rgba(220, 199, 143, 0.66); }
.ak-warstwa--ciemny .ak-boczna { stroke: rgba(220, 199, 143, 0.38); }
.ak-galaz .ak-obrys { stroke-width: 1; }
.ak-galaz .ak-glowna { stroke-width: 0.9; }
.ak-galaz .ak-boczna { stroke-width: 0.6; }

/* energia: błysk w żyłce otwierającego się liścia i iskra na czubku rosnącej gałązki */
.ak-galaz .ak-blysk { stroke: #27b863; stroke-width: 1.3; opacity: 0; }
.ak-warstwa--ciemny .ak-blysk { stroke: #4fe87f; }
.ak-iskra { fill: #27b863; opacity: 0; }
.ak-iskra-poswiata { fill: rgba(79, 232, 127, 0.22); opacity: 0; }
.ak-warstwa--ciemny .ak-iskra { fill: #4fe87f; }

@media (prefers-reduced-motion: reduce) {
  .ak-iskra, .ak-iskra-poswiata, .ak-galaz .ak-blysk { display: none; }
}

/* energia tylko w ruchu: gdy przewijanie stanie, iskra i błysk gasną, a gałązka zostaje złota (klasa ak-cisza, skrypt);
   gaśnięcie ease-out, powrót od razu z pierwszym ruchem */
.ak-cisza .ak-iskra, .ak-cisza .ak-iskra-poswiata, .ak-cisza .ak-blysk { opacity: 0 !important; transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1); }

/* pierwsza warstwa sekcji wchodzi miękko zamiast wyskoczyć; przy przebudowie podmiana bez wejścia (bez mrugnięcia) */
@media (prefers-reduced-motion: no-preference) {
  .ak-warstwa--wejscie { animation: ak-wejscie 0.4s cubic-bezier(0.23, 1, 0.32, 1) both; }
  @keyframes ak-wejscie { from { opacity: 0; } }
}

/* tryb wysokiego kontrastu i druk: bez ozdób */
@media (forced-colors: active), print {
  .ak-warstwa { display: none; }
}
/* wejscia.css */
/* LAB animacje wejścia strony głównej aslandi.pl, v1 (30.09.2026), opis w wejscia.js. Tylko opacity, transform
   i clip-path; krzywe marki z labu (ease-out Emila jak w sekcjach, ease-in-out do odsłony zdjęć). Ukrycie wyłącznie
   pod html.we-js (klasa ze skryptu), więc bez JS, w druku i w trybie wysokiego kontrastu treść stoi od razu. */
html.we-js { --we-ease: cubic-bezier(0.23, 1, 0.32, 1); --we-ease-io: cubic-bezier(0.77, 0, 0.175, 1); }

/* przejścia tylko do końca wejścia; potem element wraca do własnych przejść sekcji (klasa we-koniec) */
html.we-js [data-we]:not(.we-koniec) {
  transition: opacity 600ms var(--we-ease) var(--we-op, 0ms), transform 650ms var(--we-ease) var(--we-op, 0ms);
}
html.we-js [data-we="tekst"]:not(.we-widac),
html.we-js [data-we="gora"]:not(.we-widac) { opacity: 0; transform: translate3d(0, 18px, 0); }
html.we-js [data-we="blisko"]:not(.we-widac) { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.97); }
/* pytania FAQ: krótko w pionie, bo węzły trasy muszą zostać na linii */
html.we-js [data-we="nisko"]:not(.we-widac) { opacity: 0; transform: translate3d(0, 10px, 0); }

/* nagłówek: słowa wysuwają się spod maski (scroll-craft kinetic); maska ma zapas na ogonki g, y, p, j, ę, ą */
.we-maska { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.we-slowo { display: inline-block; transition: transform 700ms var(--we-ease); }
html.we-js [data-we="naglowek"]:not(.we-widac) .we-slowo { transform: translate3d(0, 108%, 0); }
/* złote podkreślenie wyróżnionego słowa rysuje się od lewej, gdy słowa już stoją */
html.we-js [data-we="naglowek"]:not(.we-koniec) em {
  background-repeat: no-repeat; background-size: 100% 100%;
  transition: background-size 600ms var(--we-ease) calc(var(--we-op, 0ms) + var(--we-slow, 2) * 45ms + 250ms);
}
html.we-js [data-we="naglowek"]:not(.we-widac) em { background-size: 0% 100%; }

/* zdjęcia realizacji i portrety: odsłona od dołu, chwilę po wejściu kafla */
html.we-js [data-we]:not(.we-koniec) [data-we-zdjecie] { transition: clip-path 800ms var(--we-ease-io) calc(var(--we-op, 0ms) + 60ms); }
html.we-js [data-we]:not(.we-widac) [data-we-zdjecie] { clip-path: inset(100% 0 0 0); }

/* ograniczony ruch: bez przesunięć i odsłon, samo krótkie przenikanie */
html.we-js.we-bez-ruchu [data-we]:not(.we-koniec) { transition: opacity 300ms ease; }
html.we-js.we-bez-ruchu [data-we]:not(.we-widac) { transform: none; }
html.we-js.we-bez-ruchu [data-we]:not(.we-widac) [data-we-zdjecie] { clip-path: none; }

@media print, (forced-colors: active) {
  html.we-js [data-we] { opacity: 1 !important; transform: none !important; }
  html.we-js [data-we-zdjecie] { clip-path: none !important; }
  html.we-js .we-slowo { transform: none !important; }
}
/* podkreslenie.css */
/* LAB podkreślenie „mazakiem” w nagłówkach (opis i rodzina ruchów w podkreslenie.js). Złoto marki #ceb472; na ciemnych sekcjach jasne złoto #dcc78f. */
.pk-em { position: relative; display: inline-block; isolation: isolate; background: none !important; padding-inline: 0.02em; }
/* tuż pod literami, minimalnie odsunięta w dół (Igor 30.09); zawsze POD literami: warstwa −1 w obrębie słowa
   (isolation na .pk-em), więc ogonek „j” przechodzący przez kreskę jest nad nią */
.pk-kreska { position: absolute; z-index: -1; left: -0.05em; width: calc(100% + 0.1em); bottom: -0.05em; height: 0.3em;
  overflow: visible; pointer-events: none; fill: #ceb472; fill-opacity: 0.82; }  /* lekko przezroczysta jak tusz mazaka (Igor 30.09) */
/* krótkie słowo: kreska wychodzi dalej poza litery (ruch ręki nie kurczy się do trzech liter) */
.pk-kreska--krotkie { left: -0.16em; width: calc(100% + 0.32em); }
/* rysowanie od lewej po wysunięciu słów (moduł wejść ustawia --we-op i --we-slow na nagłówku) */
html.we-js [data-we="naglowek"]:not(.we-koniec) .pk-kreska {
  transition: clip-path 650ms cubic-bezier(0.23, 1, 0.32, 1) calc(var(--we-op, 0ms) + var(--we-slow, 2) * 45ms + 300ms);
}
html.we-js [data-we="naglowek"]:not(.we-widac) .pk-kreska { clip-path: inset(0 100% 0 0); }
html.we-js.we-bez-ruchu [data-we="naglowek"] .pk-kreska { clip-path: none; transition: none; }
@media (forced-colors: active) { .pk-kreska { fill: CanvasText; } }
/* naglowek.css */
/* Nagłówek witryny na telefonie, tylko na nowej stronie głównej (02.10.2026; z prototypu hero/v5b-mobile, 30.09).
   Igor: „na mobile pobaw się headerem, bo też zabiera cenne miejsce hero — hamburger zwykły, bez takich dopełniaczy…
   bez przycisku zapychacza »Bezpłatna wycena«; uściśnij to, ale z głową, jak najbardziej można, i zrób responsywnie”,
   potem: „wielkość hamburgera zwiększyłbym mocniej, aby klient się domyślił, że jest, i dał logo po lewej, a hamburger
   po prawej (hamburger nie musi mieć takich paddingów dalej, jak ma)”.
   Tylko telefony (≤ 767 px; tablet i komputer bez zmian). Nadpisuje style wtyczki aslandi-oze-header wyłącznie na tej
   stronie: każda reguła zaczyna się od klasy body.aslandi-sg-strona (dodaje ją wtyczka aslandi-strona-glowna; w labie
   zloz-strone.py), więc reszta witryny jest bez zmian, a reguły wygrywają niezależnie od kolejności arkuszy.
   - pasek 56 px zamiast 76 px: najniżej, przy którym zostaje cel dotyku 48 px hamburgera i czytelne logo,
   - logo po lewej, 36 px wysokości, przy lewym marginesie treści,
   - hamburger po prawej (tam sięga kciuk), ikona 32 px z grubszą kreską; bez ramki, tła i „pudełka” — prawa krawędź
     kresek równa z marginesem treści (przycisk 48 px, ikona w środku); na dotyk tylko krótkie przygaśnięcie, zmiana
     przy najechaniu wyłącznie dla myszy (na telefonie :hover zostawał po dotknięciu jako kwadrat),
   - szuflada menu wysuwa się z prawej, od przycisku (dotąd z lewej); w szufladzie zostają telefon i wycena,
   - bez przycisku wyceny i telefonu w pasku (wycena jest w hero),
   - bezpieczne obszary ekranów z wycięciem (env(safe-area-inset-*)),
   - hero liczy wysokość nagłówka ze zmiennej --hs-hdr, więc treść hero podjeżdża o 20 px. */
@media (max-width: 767px) {
  body.aslandi-sg-strona :is(.aoze-header__bar, .aoze-header__inner) { min-height: 56px; }
  /* pasek od razu w zieleni marki, jak po przewinięciu i na innych stronach witryny (Igor 02.10: „header, nawigacja
     strony musi być brandowy ciemny zielony kolor, a nie szaro-biały”): w hero z filmem na górze film zaczyna się pod
     nagłówkiem, więc przezroczysty pasek pokazywał jasne tło sekcji; kolory i cień ze stylu wtyczki nagłówka */
  body.aslandi-sg-strona .aoze-header[data-surface="transparent"]:not(.is-scrolled):not(.is-menu-open) .aoze-header__bar {
    background: linear-gradient(135deg, var(--aoze-green, #123f2d) 0%, var(--aoze-green-2, #19583f) 100%);
    border-bottom-color: rgba(255, 255, 255, 0.1); box-shadow: var(--aoze-shadow, 0 18px 44px rgba(4, 18, 12, 0.26)); }
  body.aslandi-sg-strona .aoze-header__inner { grid-template-columns: minmax(0, 1fr) 48px; gap: 8px;
    padding: 0 max(8px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
  body.aslandi-sg-strona .aoze-header__actions { display: none; }
  body.aslandi-sg-strona .aoze-logo { grid-column: 1; grid-row: 1; justify-self: start; max-width: min(150px, 42vw); }
  body.aslandi-sg-strona .aoze-logo img { max-height: 36px; max-width: 140px; }
  body.aslandi-sg-strona .aoze-header__hamburger { grid-column: 2; grid-row: 1; justify-self: end; width: 48px; height: 48px; padding: 0; border: 0;
    border-radius: 0; background: none; box-shadow: none; -webkit-tap-highlight-color: transparent; transition: opacity 120ms ease; }
  body.aslandi-sg-strona .aoze-header__hamburger:is(:hover, :focus, :focus-visible) { border: 0; background: none; }
  body.aslandi-sg-strona .aoze-header__hamburger:active { opacity: 0.6; }
  body.aslandi-sg-strona .aoze-header__hamburger:focus-visible { outline: 2px solid rgba(234, 217, 164, 0.9); outline-offset: -2px; border-radius: 10px; }
  body.aslandi-sg-strona .aoze-header__hamburger svg { width: 32px; height: 32px; stroke-width: 2.4; }
  /* szuflada z prawej, od przycisku */
  body.aslandi-sg-strona .aoze-drawer__panel { left: auto; right: 10px; transform: translateX(calc(100% + 18px)); }
  body.aslandi-sg-strona .aoze-drawer.is-open .aoze-drawer__panel { transform: translateX(0); }
  /* zamknięta szuflada bez cienia: panel stoi tuż za prawą krawędzią ekranu, a jego cień (78 px rozmycia) przyciemniał
     pas ok. 60 px przy prawej krawędzi całej strony (przegląd 02.10.2026); przy otwieraniu cień wraca razem z panelem */
  body.aslandi-sg-strona .aoze-drawer__panel { transition: transform 0.24s ease, box-shadow 0.24s ease; }
  body.aslandi-sg-strona .aoze-drawer:not(.is-open) .aoze-drawer__panel { box-shadow: none; }
  body.aslandi-sg-strona .hs--dzielony { --hs-hdr: 56px; }
}
@media (max-width: 767px) and (hover: hover) and (pointer: fine) {
  body.aslandi-sg-strona .aoze-header__hamburger:hover { opacity: 0.8; }
}