/* 67studio — wspólny arkusz wszystkich artboardów: tokeny (kolory, typografia, odstępy, siatka, promienie, ruch) i komponenty.
   Opis zastosowania: artboardy „Podstawy” i „Komponenty” na canvasie oraz docs/design-system.md.
   Ruch: język „Kadr” — wszystko wyłania się z własnej ramki (maski clip-path po geometrii elementu), bez rozmycia i sprężyn (docs/motion-design.md).
   Zasada: wartości HEX tylko w palecie bazowej; komponenty używają ról (--surface-*, --text-*, --border-*, --action-*, --status-*).
   Przezroczystości liczone z kanałów palety (--c-*-rgb), nie z wpisanych rgba. Design system v2 (2026-10-19): canvas strony „01 — Podstawy”
   i „02 — Komponenty”, artefakt „67studio Design System” (tokens.json = ten blok :root) oraz docs/design-system.md. */
:root{
  /* 1. Paleta bazowa — jedyne miejsce z wartościami kolorów marki */
  --c-black:#040404;--c-graphite-900:#1a1a1b;--c-graphite-800:#242425;--c-white:#fdfdfd;--c-lime:#ccff00;--c-lime-100:#eefeb1;--c-lime-800:#404f03;
  --c-grey-500:#8f8f8f;--c-grey-700:#5e5e5e;--c-grey-100:#ececec;--c-grey-50:#f5f5f5;--c-red-300:#ff9a9a;
  --c-grey-600:#787878;   /* tylko przygaszone wiersze realizacji: 4,6:1 na czerni */
  /* kanały RGB palety — przezroczystości liczone z marki: rgba(var(--c-white-rgb), .36) (System v2, 2026-10-19) */
  --c-black-rgb:4,4,4;--c-white-rgb:253,253,253;--c-graphite-900-rgb:26,26,27;--c-lime-rgb:204,255,0;
  /* 2. Role kolorów — motyw ciemny (domyślny); jasna sekcja .light nadpisuje role niżej */
  --surface-default:var(--c-black);          /* tło strony i sekcji */
  --surface-raised:var(--c-graphite-900);    /* karty, kadry, panel formularza, kadr Podejścia */
  --surface-elevated:var(--c-graphite-800);  /* hover karty, ikona przycisku po najechaniu, komunikat info */
  --surface-accent:var(--c-lime);            /* jedyny limonkowy blok (Kontakt) — tekst na nim: --text-on-accent */
  --text-primary:var(--c-white);
  --text-secondary:var(--c-grey-500);        /* opisy, druga część nagłówka; 6,3:1 na tle, 5,4:1 na karcie */
  --text-tertiary:var(--c-grey-700);         /* tylko elementy pomocnicze (separatory filtrów), nie treść */
  --text-label:rgba(var(--c-white-rgb),.86);  /* etykiety pól formularza (wariant B, 2026-10-26): 12,6:1 na karcie */
  --text-inactive:var(--c-grey-500);         /* nieaktywny tytuł akordeonu — ten sam w obu motywach */
  --text-on-accent:var(--c-black);
  --text-on-accent-secondary:rgba(var(--c-black-rgb),.7); /* 7,6:1 na limonce */
  --text-hero:rgba(var(--c-white-rgb),.9);   /* H1 hero (wariant regular): 16,1:1 */
  --text-hero-lead:rgba(var(--c-white-rgb),.72); /* lead w hero, na scrimie: 10,3:1 na czerni */
  --text-list-rest:rgba(var(--c-white-rgb),.62); /* tytuły wierszy realizacji w spoczynku: 7,7:1 */
  --text-dimmed:var(--c-grey-600);           /* pozostałe wiersze, gdy jeden jest wskazany: 4,6:1 */
  --text-outline:rgba(var(--c-white-rgb),.7);/* kontur adresu e-mail (Kontakt) — wypełnia się bielą po wskazaniu */
  --text-on-media:var(--c-white);            /* tekst na zdjęciu (plakietka) — na --surface-media-label */
  --surface-overlay:rgba(var(--c-black-rgb),.68);       /* tło strony pod otwartym menu (z rozmyciem 5 px) — menu Vantra 2026-10-27; było .8 z rozmyciem 35 px */
  --surface-glass:rgba(var(--c-black-rgb),.42);         /* pigułka menu: Liquid Glass (rozmycie 8 px, w Chromium 4 px po załamaniu krawędzi) nad ciemną treścią; było .34 / 3 px — „mniej przezroczyste” (właściciel 2026-10-27) */
  --surface-glass-light:rgba(var(--c-white-rgb),.48);   /* ta sama tafla nad jasną sekcją (.on-light) — ciemny logotyp */
  --surface-glass-open:rgba(var(--c-black-rgb),.72);    /* pigułka z otwartym panelem: gęste szkło, czytelna lista */
  --glass-highlight:rgba(var(--c-white-rgb),.7);        /* odblask lewego górnego rantu */
  --glass-sheen:rgba(var(--c-white-rgb),.35);           /* odblask prawego dolnego rantu */
  --glass-edge:rgba(var(--c-white-rgb),.08);            /* cienka krawędź tafli (cień wewnętrzny, nie obrys) */
  --surface-media-label:rgba(var(--c-black-rgb),.72);   /* tło plakietki na zdjęciu */
  --border-subtle:rgba(var(--c-white-rgb),.16);     /* kreski list i siatek (dekor) */
  --border-faint:rgba(var(--c-white-rgb),.07);      /* kreski między wierszami menu i tło wiersza po najechaniu */
  --border-hover:rgba(var(--c-white-rgb),.56);      /* obrys pola formularza po najechaniu */
  --border-strong:rgba(var(--c-white-rgb),.36);     /* obrysy kontrolek: pola, chipy, pigułki, przycisk akordeonu — 3,1:1 na tle (WCAG 1.4.11); było .32 = 2,7:1 */
  --action-primary:var(--c-lime);            /* przycisk główny */
  --action-primary-text:var(--c-black);
  --action-secondary:var(--c-white);         /* przycisk drugorzędny (wysyłka formularza, link zewnętrzny) */
  --accent:var(--c-lime);                    /* akcent dekoracyjny: kreski, wskaźniki, „@”; czyta go też hero-shader.js i reveal-glass.js */
  --focus-ring:var(--c-lime);
  --status-error:var(--c-red-300);--status-error-bg:rgba(255,154,154,.12);
  --status-success:var(--c-lime);--status-success-bg:rgba(204,255,0,.12);
  /* 3. Typografia — rozmiary (1440 px → 390 px); style i ich zastosowanie w sekcji „typografia” */
  --font-sans:'Geist',ui-sans-serif,system-ui,sans-serif;--font-mono:'Geist Mono',ui-monospace,monospace;
  --fs-display-l:clamp(40px,1rem + 5.6vw,96px);     /* 96 → 40 */
  --fs-heading-xl:clamp(36px,1.15rem + 4.3vw,72px); /* 72 → 36 */
  --fs-heading-l:clamp(28px,1rem + 2.8vw,56px);     /* 56 → 28 */
  --fs-heading-m:clamp(28px,1.05rem + 2.2vw,48px);  /* 48 → 28 */
  --fs-heading-s:clamp(24px,1rem + 1.6vw,36px);     /* 36 → 24 */
  --fs-title:clamp(18px,.9rem + .8vw,26px);         /* 26 → 18 */
  --fs-title-s:17px;
  /* tekst do czytania: jeden rozmiar body 16 px na każdej szerokości; lead (hero, wstęp podstrony) 22 px, ≤ 767 px 18 px — decyzja właściciela 2026-10-15 */
  --fs-lead:22px;
  --fs-body:16px;
  --fs-ui:16px;--fs-ui-s:14px;--fs-caption:13px;--fs-mono:12px;
  /* 4. Odstępy — skala 4 px i odstępy układu */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
  --space-8:32px;--space-10:40px;--space-12:48px;--space-14:56px;--space-16:64px;--space-20:80px;
  --space-section:clamp(96px,14vw,240px);           /* między sekcjami: 202 → 96 */
  --space-section-s:clamp(72px,2rem + 6vw,160px);   /* krótszy odstęp nad sekcją domykającą (Kontakt na głównej): 118 → 72 */
  --space-page-top:clamp(120px,6rem + 4vw,160px);   /* początek treści podstrony pod nagłówkiem: 154 → 120 */
  --space-head:clamp(40px,1.5rem + 3vw,64px);       /* nagłówek sekcji → treść: 64 → 40 */
  --space-block:clamp(40px,2rem + 3vw,80px);        /* między dużymi blokami w sekcji: 75 → 40 */
  --gap-col:clamp(24px,1rem + 2vw,48px);            /* odstęp między kolumnami siatek treści (stopka, nagłówek z etykietą, szablon realizacji): 45 → 24 */
  --pad-panel:clamp(28px,2rem + 2vw,64px);          /* wewnętrzny odstęp dużego bloku (Kontakt: limonka i formularz): 61 → 40 */
  /* 5. Siatka i szerokości */
  --container:1840px;--gutter:clamp(16px,2.8vw,40px);
  --measure-s:384px;--measure-m:480px;--measure-l:576px;--measure-xl:720px;   /* długość wiersza tekstu */
  /* 6. Promienie (cieni nie używamy — głębię dają powierzchnie --surface-*) */
  --r-xs:4px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px;--r-pill:999px;  /* --r-xl = kadr 16 + odstęp 6 w karcie */
  /* 7. Ruch: trzy krzywe i sześć czasów */
  --e-ui:cubic-bezier(.2,.7,.2,1);          /* szybka reakcja kontrolki */
  --e-out:cubic-bezier(.16,1,.3,1);          /* wyhamowanie do celu, bez przestrzału */
  --e-frame:cubic-bezier(.6,0,.12,1);        /* maski i kurtyny: zdecydowany start i koniec */
  --t-press:.1s;--t-ui:.2s;--t-std:.35s;--t-enter:.6s;--t-frame:.85s;--t-bar:.65s;
  --rise:16px;                               /* przesunięcie zwykłego wejścia */
  --cover:var(--surface-default);            /* kolor kurtyny maskującej (tło sekcji) */
  --t-scrub:1s;--e-scrub:var(--e-out);       /* bezwładność wejść sprzężonych ze scrollem: element dogania pozycję w ~1 s */
}
/* Jasna sekcja (Usługi; „Efekt” w szablonie realizacji): te same komponenty, odwrócone role. Limonka nie występuje na jasnym tle. */
.light{
  --surface-default:var(--c-white);--surface-raised:var(--c-grey-100);
  --text-primary:var(--c-black);--text-secondary:var(--c-grey-700);--text-tertiary:var(--c-grey-500);
  --border-subtle:rgba(var(--c-black-rgb),.18);--border-strong:rgba(var(--c-black-rgb),.44);--focus-ring:var(--c-black);   /* obrys kontrolek 3,2:1 na bieli (było .32 = 2,2:1) */
  --cover:var(--c-white);background:var(--surface-default);color:var(--text-primary)}
*,*::before,*::after{box-sizing:border-box}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{letter-spacing:inherit}   /* kontrolki dziedziczą światło liter jak reszta tekstu (wcześniej przeglądarka dawała im 0) */
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:var(--r-xs)}
/* Lenis (płynne przewijanie): zalecane style biblioteki */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.s67{background:var(--surface-default);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--fs-body);line-height:1.45;letter-spacing:-.02em;-webkit-font-smoothing:antialiased;overflow-x:clip;min-height:100%}
.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.sec{padding:var(--space-section) 0}   /* odstępy między sekcjami (właściciel, 2026-10-13): 1440 → 202 px */
.sec.flush{padding-top:0}
.sec.sec-s{padding-top:var(--space-section-s)}   /* sekcja domykająca na stronie głównej (Kontakt) */
.sec.sec-cta{padding-top:var(--space-block)}   /* CTA podstron: poprzednia sekcja ma już pełny dolny odstęp, więc tu tylko dopełnienie (było 48–112 px) */
.page-top{padding-top:var(--space-page-top)}
.muted{color:var(--text-secondary)}

/* ===== TYPOGRAFIA — 13 stylów. Każdy styl zdefiniowany raz i w komplecie (rozmiar, interlinia, światło, ciężar): klasa .t-* do użycia w treści + klasy komponentów, które z niego korzystają.
   Hierarchia wizualna jest niezależna od znaczników: np. H1 Kontaktu = heading-s (rolę display pełni adres e-mail), tytuły kart realizacji (H2) = title-s.
   Warianty świadome: hero i tytuły realizacji w ciężarze 400 (decyzje właściciela), menu wg pomiarów LPAS, adres e-mail konturem (Kontakt). ===== */
/* display-l — H1 podstron (Realizacje, realizacja, polityka) i nagłówki-manifesty strony głównej (O studio, Podejście) */
.t-display-l,.oa-h2,.qa-stmt{font-size:var(--fs-display-l);line-height:.96;letter-spacing:-.055em;font-weight:500}
/* heading-xl — nagłówek sekcji i CTA; H1 hero w wariancie regular (.h1c) */
.t-heading-xl,.kb-h2,.h1c{font-size:var(--fs-heading-xl);line-height:1;letter-spacing:-.055em;font-weight:500}
/* heading-l — duże tytuły list i osi: wiersze realizacji (regular), akordeon Usług, nagłówek Procesu */
.t-heading-l,.pc-h2,.re-row h3,.sa-title{font-size:var(--fs-heading-l);line-height:1;letter-spacing:-.05em;font-weight:500}
/* heading-m — nagłówek-zdanie sekcji (realizacja: Cel/Efekt, FAQ), tytuły akordeonu w sekcji przypiętej */
.t-heading-m{font-size:var(--fs-heading-m);line-height:1.1;letter-spacing:-.05em;font-weight:500}
/* heading-s — mniejszy nagłówek: Usługi (musi zmieścić się w przypiętym oknie), H1 Kontaktu, pytania FAQ, opis kroku Procesu, dane kontaktowe na limonce */
.t-heading-s,.kd-title,.faq .sa-title,.pc-d,.kb-lines a{font-size:var(--fs-heading-s);line-height:1.1;letter-spacing:-.04em;font-weight:500}
/* title — tytuł w kolumnie lub karcie: kroki Procesu, zasady Podejścia, nazwy usług w kartach */
.t-title,.pc-it span,.qa-col h3,.oa-name{font-size:var(--fs-title);line-height:1.15;letter-spacing:-.035em;font-weight:500}
/* title-s — tytuł małej karty (lista realizacji) */
.t-title-s,.cw-top h2{font-size:var(--fs-title-s);line-height:1.3;letter-spacing:-.03em;font-weight:600}
/* lead — wstęp pod H1: hero i nagłówek podstrony (realizacja, polityka); jedyny tekst do czytania większy od body */
.t-lead,.hlead{font-size:var(--fs-lead);line-height:1.35;letter-spacing:-.025em;font-weight:400}
/* body — cały pozostały tekst ciągły, także opisy w akordeonie Usług i odpowiedzi FAQ */
.t-body,.sa-text p,.oa-sub p,.kb-lead,.qa-col p,.pc-lead,.kd-left p,.cb-text,.cw-top>span{font-size:var(--fs-body);line-height:1.45;letter-spacing:-.02em;font-weight:400}
/* ui — przyciski, linki ze strzałką, etykieta sekcji, wartość pola */
.t-ui,.btn,.larrow,.label,.kb-lines .sm{font-size:var(--fs-ui);line-height:1.3;letter-spacing:-.03em;font-weight:500}
/* ui-s — pigułki, chipy, etykiety pól, listy stopki, metadane, filtry, komunikaty formularza */
.t-ui-s,.pill,.chip span,.fld label,.fld legend,.consent,.meta,.fgrid ul,.filters,.fstatus,.oa-hint-btn{font-size:var(--fs-ui-s);line-height:1.4;letter-spacing:-.02em}
/* caption — podpisy, zgoda, błąd pola, tagi zakresu, dół stopki, nagłówki kolumn stopki, notatki */
.t-caption,.tag,.ferr,.fbottom,.note,.fgrid h2,.label-sub{font-size:var(--fs-caption);line-height:1.45;letter-spacing:-.02em}
/* mono — kategorie, numery kroków, podpisy techniczne */
.t-mono,.re-row>span,.pc-it b,.pc-k,.kd-sub{font-family:var(--font-mono);font-size:var(--fs-mono);line-height:1.4;letter-spacing:0;font-weight:400}

/* etykieta sekcji „| Nazwa” (bez numerów — decyzja właściciela); opcjonalny podpis pod spodem */
.label{display:grid;grid-template-columns:auto 1fr;column-gap:6px;align-items:baseline}
.label-bar{display:inline-block;color:var(--accent)}.light .label-bar{color:var(--text-primary)}
.label-sub{grid-column:2;color:var(--text-secondary);font-weight:400;letter-spacing:-.02em}

/* nagłówek sekcji z akcją: tytuł po lewej, link po prawej (wyrównane do dołu); na wąskim ekranie link schodzi pod tytuł */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-4) var(--space-8);flex-wrap:wrap;margin-bottom:var(--space-head)}
.cta-h{max-width:16em}   /* CTA podstron: 2 wiersze przy 1440 */

/* linki i przyciski. Stany: default, hover, focus-visible (obrys --focus-ring), active (ściśnięcie), disabled (wysyłanie).
   [data-state] odtwarza stan na artboardzie „Komponenty” — te same reguły, bez osobnych wartości. */
.larrow{display:inline-flex;align-items:center;gap:7px;min-height:44px;white-space:nowrap;align-self:flex-start;
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;background-position:0 100%,0 100%;background-size:100% 1px,0 1px;transition:background-size var(--t-std) var(--e-out)}
.larrow:hover,.larrow:focus-visible,.larrow[data-state=hover]{background-size:100% 1px,100% 1px}
.light .larrow{background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor)}
.light .larrow:hover,.light .larrow:focus-visible,.light .larrow[data-state=hover]{background-size:100% 1px,100% 2px}
.larrow svg{width:13px;height:13px;flex:none;transition:transform var(--t-ui) var(--e-ui)}
.larrow:hover svg,.larrow:focus-visible svg,.larrow[data-state=hover] svg{transform:translate(2px,-2px)}
.btn{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:56px;padding:6px 6px 6px 20px;background:var(--action-primary);color:var(--action-primary-text);border:0;border-radius:var(--r-md);font-family:inherit;text-align:left;cursor:pointer;width:100%;transition:transform var(--t-press) var(--e-ui)}
.btn:active,.btn[data-state=active]{transform:scale(.985)}
.btn-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-sm);background:var(--action-primary-text);color:var(--action-primary);flex:none;transition:background-color var(--t-ui) var(--e-ui)}
.btn:hover .btn-ico,.btn:focus-visible .btn-ico,.btn[data-state=hover] .btn-ico{background:var(--surface-elevated)}
.btn-ico svg{width:16px;height:16px;transition:transform var(--t-ui) var(--e-ui)}
.btn:hover .btn-ico svg,.btn:focus-visible .btn-ico svg,.btn[data-state=hover] .btn-ico svg{transform:translate(2px,-2px)}
.btn.btn-light{background:var(--action-secondary)}.btn.btn-light .btn-ico{color:var(--action-secondary)}
.btn.btn-auto{width:auto;min-width:300px}   /* przycisk w rzędzie z pigułkami (CTA podstron) */
.btn[disabled]{opacity:.65;cursor:progress;transform:none}
a[data-state=focus],button[data-state=focus]{outline:2px solid var(--focus-ring);outline-offset:3px}
/* tag zakresu (statyczny) — w akordeonie Usług */
.tag{display:inline-flex;align-items:center;min-height:30px;padding:4px 12px;border:1px solid var(--border-subtle);border-radius:var(--r-pill);color:var(--text-primary)}
.badge{position:absolute;left:16px;bottom:16px;z-index:3;pointer-events:none;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding:5px 9px;border-radius:var(--r-xs);background:var(--surface-media-label);color:var(--text-on-media)}
/* pigułka (link) i chip (pole wyboru w formularzu): jedna baza, różne zachowanie */
.pill,.chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--border-strong);border-radius:var(--r-pill);transition:background-color var(--t-ui),border-color var(--t-ui),color var(--t-ui),transform var(--t-press) var(--e-ui)}
a.pill:hover,a.pill:focus-visible,.pill[data-state=hover]{border-color:var(--accent);color:var(--accent)}
a.pill:active{transform:scale(.97)}
.pill-pending{color:var(--text-secondary);border-style:dashed}   /* kanał niedostępny (np. Instagram wkrótce) */
/* nagłówek + menu — wzór: nawigacja vantra-studio.webflow.io (pomiar 2026-10-27 przy 1440×900; docs/menu-vantra/README.md).
   Pigułka 450 px na środku, 22 px od góry: szkło (czerń 0,78, rozmycie 10 px, nasycenie 130 %), obrys 1 px, promień 12; logotyp po lewej, cztery kropki po prawej (hasło na środku usunięte na prośbę właściciela).
   Panel rozwija się pod paskiem (wysokość 0 → treść, 0,6 s), wiersze wchodzą kaskadą (krycie, +1em, skala 0,98, co 0,05 s), tło strony
   przyciemnione 0,68 z rozmyciem 5 px. Wiersz: etykieta 17 px, dopisek wjeżdża z prawej przy najechaniu, strzałka albo plus (akordeon).
   Z poprzedniego menu (LPAS) zostaje decyzja właściciela: najechanie rozmywa pozostałe pozycje. */
html.s67-lock{overflow:hidden;padding-right:var(--sbw,0px)}
.hdr{position:fixed;top:0;left:0;right:var(--sbw,0px);z-index:50;display:flex;justify-content:center;padding:22px var(--gutter) 0;color:var(--text-primary);font-family:var(--font-sans);letter-spacing:-.02em;pointer-events:none;
  --e-nv:cubic-bezier(.645,.045,.355,1)}            /* easeInOutCubic — przejścia kontrolek Vantra (0,24 s) */
.nv-scrim{position:fixed;inset:0;background:var(--surface-overlay);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);opacity:0;visibility:hidden;transition:opacity .5s var(--e-nv),visibility 0s .5s}
.hdr.open .nv-scrim{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .5s var(--e-nv)}
/* Liquid Glass jak w iOS 26 (decyzja właściciela 2026-10-27, zamiast „szronionego” szkła): półprzezroczysta tafla, umiarkowane rozmycie,
   krawędzie załamują tło jak soczewka (filtr SVG #nv-lg, tylko Chromium: .lg na <html>), odblaski na rantach (lewy górny mocniej, prawy dolny słabiej),
   bez obrysu i bez gradientu. Nad jasną sekcją (.on-light, z header.js) jasna tafla i ciemny logotyp — jak adaptacja koloru w iOS.
   Otwarty panel: gęstsze szkło bez załamania (czytelność listy; tło i tak przyciemnia .nv-scrim). */
.nv{position:relative;width:450px;max-width:100%;border-radius:var(--r-md);background:var(--surface-glass);
  backdrop-filter:blur(8px) saturate(170%) brightness(1.05);-webkit-backdrop-filter:blur(8px) saturate(170%) brightness(1.05);
  box-shadow:inset 1.5px 1.5px 1px -1px var(--glass-highlight),inset -1.5px -1.5px 1px -1px var(--glass-sheen),inset 0 0 0 1px var(--glass-edge),inset 0 0 14px rgba(var(--c-white-rgb),.06),0 8px 24px -8px rgba(var(--c-black-rgb),.45);
  overflow:hidden;pointer-events:auto;transition:background-color .4s var(--e-nv)}
.lg .nv{backdrop-filter:url(#nv-lg) saturate(170%) brightness(1.05)}
.hdr.on-light:not(.open) .nv{background:var(--surface-glass-light)}
.hdr.on-light:not(.open) .nv-logo,.hdr.on-light:not(.open) .nv-btn{color:var(--c-black)}
.nv-logo .logo-dark,.nv-logo .logo-accent{display:none}
/* otwarte menu: logotyp i kwadraciki w limonce marki (prośba właściciela 2026-10-27: „brakuje zielonego przy rozwiniętym menu”) */
.hdr.open .nv-logo .logo-light{display:none}
.hdr.open .nv-logo .logo-accent{display:block}
.hdr.open .nv-btn{color:var(--accent)}
.hdr.on-light:not(.open) .nv-logo .logo-light{display:none}
.hdr.on-light:not(.open) .nv-logo .logo-dark{display:block}
.hdr.open .nv,.lg .hdr.open .nv{background:var(--surface-glass-open);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%)}
.nv-fx{position:absolute;width:0;height:0;overflow:hidden}
.nv-bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:15px;height:52px;padding:0 15px}
.nv-logo{display:flex;align-items:center;height:30px;color:var(--text-primary);transition:transform .24s var(--e-nv)}
.nv-logo:hover{transform:scale(.9)}
.nv-logo img{display:block;width:auto;height:18px}   /* pełny logotyp 67studio (biały), 18 px ≈ 71 px szerokości */
.nv-btn{display:grid;place-items:center;width:30px;height:30px;margin-right:-6px;padding:0;border:0;border-radius:var(--r-xs);background:none;color:var(--text-primary);cursor:pointer;transition:color .3s var(--e-nv)}
.nv-dots{position:relative;display:block;width:12px;height:12px}
.nv-dots i{position:absolute;width:4px;height:4px;border-radius:.5px;background:currentColor}
.nv-dots i:nth-child(1){top:0;left:0}.nv-dots i:nth-child(2){top:0;right:0}.nv-dots i:nth-child(3){bottom:0;left:0}.nv-dots i:nth-child(4){bottom:0;right:0}
/* panel: wysokość przez grid 0fr → 1fr (bez mierzenia w JS); [hidden] = zamknięty, .in = rozwinięty */
.nv-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--e-nv)}
.nv-panel[hidden]{display:none}
.nv-panel.in{grid-template-rows:1fr}
.nv-panel:focus{outline:none}
.nv-inner{min-height:0;overflow:hidden auto;max-height:calc(100vh - 110px);max-height:calc(100svh - 110px);overscroll-behavior:contain;padding-bottom:7px}
.nv-list{display:flex;flex-direction:column}
.nv-item{opacity:0;transform:translateY(1em) scale(.98);transition:opacity .5s var(--e-out),transform .5s var(--e-out);transition-delay:calc(.12s + var(--i,0) * .05s)}
.nv-panel.in .nv-item{opacity:1;transform:none}
.nv-row{display:grid;grid-template-columns:1fr auto 17px;align-items:center;gap:15px;width:100%;min-height:45px;padding:13px 15px;border:0;border-top:1px solid var(--border-faint);background:none;color:var(--text-primary);font:inherit;text-align:left;cursor:pointer;transition:background-color .24s var(--e-nv),filter .3s}
.nv-row:hover{background:var(--border-faint)}
.nv-label{display:flex;align-items:center;gap:10px;font-size:17px;line-height:1.4;letter-spacing:-.02em;font-weight:500}
.nv-row[aria-current="page"] .nv-label::after{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--accent)}   /* bieżąca strona: limonkowa kropka */
.nv-meta{font-size:13px;line-height:1.5;color:var(--text-list-rest);white-space:nowrap;opacity:0;transform:translateX(1em);transition:opacity .3s var(--e-nv),transform .3s var(--e-nv)}
.nv-row:hover .nv-meta,.nv-row:focus-visible .nv-meta,.nv-row[aria-expanded="true"] .nv-meta{opacity:1;transform:none}
.nv-ico{display:grid;place-items:center;width:17px;height:17px;color:var(--text-label)}
.nv-ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .3s var(--e-nv)}
.nv-plus{stroke-width:2!important;stroke-linecap:round;width:15px!important;height:15px!important}
.nv-row:hover .nv-arrow,.nv-sub-link:hover .nv-arrow{transform:translate(2px,-2px)}
.nv-row[aria-expanded="true"] .nv-plus{transform:rotate(45deg)}   /* rozwinięty akordeon: plus → krzyżyk */
/* akordeon: wysokość jak panel (grid), linki wchodzą kaskadą po rozwinięciu */
.nv-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--e-nv);visibility:hidden}
.nv-acc.is-open .nv-sub{grid-template-rows:1fr;visibility:visible}
.nv-acc:not(.is-open) .nv-sub{transition:grid-template-rows .5s var(--e-nv),visibility 0s .5s}
.nv-sub-list{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:6px;padding:0 22px 0 45px}
.nv-sub-list::before,.nv-sub-list::after{content:"";flex:none;height:9px}   /* 15 px góra/dół jak Vantra (z odstępem 6) */
.nv-si{opacity:0;transform:translateY(.5em) scale(.98);transition:opacity .3s var(--e-out),transform .3s var(--e-out)}
.nv-acc.is-open .nv-si{opacity:1;transform:none;transition-duration:.5s;transition-delay:calc(.1s + var(--j,0) * .04s)}
.nv-sub-link{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:7px 0;font-size:14px;line-height:1.4;letter-spacing:-.02em;color:var(--text-list-rest);transition:color .24s var(--e-nv),filter .3s}
.nv-sub-link:hover,.nv-sub-link:focus-visible{color:var(--text-primary)}
.nv-sub-link[aria-current="page"]>span{display:flex;align-items:center;gap:8px}
.nv-sub-link[aria-current="page"]>span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}
.nv-sub-link .nv-arrow{flex:none;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .3s var(--e-nv)}
@media (hover:hover) and (pointer:fine){
  .nv-list:has(:is(.nv-row,.nv-sub-link):hover) :is(.nv-row,.nv-sub-link):not(:hover){filter:blur(.5px)}   /* najechanie: pozostałe pozycje rozmyte 0,5 px (2 px, potem 1 px przy tekście 14–17 px było za mocne — uwagi właściciela 2026-10-27) */
}
.nv-cta-wrap{display:flex;padding:13px 15px 6px;border-top:1px solid var(--border-faint)}
.nv-cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:38px;padding:7px 0;border:1px solid var(--border-subtle);border-radius:var(--r-sm);background:var(--border-faint);font-size:14px;line-height:1.4;font-weight:500;letter-spacing:-.01em;transition:background-color .24s var(--e-nv),border-color .24s var(--e-nv),color .24s var(--e-nv)}
.nv-cta:hover,.nv-cta:focus-visible{background:var(--action-primary);border-color:var(--action-primary);color:var(--action-primary-text)}   /* najechanie: limonka marki jak przyciski strony */
/* zamykanie: wiersze gasną od razu, panel zwija się 0,45 s */
.nv-panel.closing{pointer-events:none;transition-duration:.45s}
.nv-panel.closing .nv-item{transition-duration:.2s;transition-delay:0s}
@media (max-width:767px){
  .hdr{padding-top:16px}
  .nv-bar{height:50px}
  .nv-cta{min-height:44px}
}
@media (max-width:479px){
    .nv-sub-list{padding-left:30px}
}
@media (max-width:767px){:root{--fs-lead:18px}}

/* hero (wariant C, 2026-10-13): pełny ekran, tło = shader w <canvas> (hero-shader.js), treść przy dolnej krawędzi */
/* kadr: tło shadera w zaokrąglonej ramce odsuniętej od krawędzi okna o gutter — uwaga właściciela: „paddingi, nie 100 %”.
   Od menu Vantra (2026-10-27, pigułka nad treścią) kadr zajmuje całą wysokość okna: --hk-top = gutter, pigułka leży na shaderze
   (wcześniej 75 px + gutter, pod paskiem pełnej szerokości). Margines kadru --hk-pad = 12 px na każdej szerokości (prośba właściciela 2026-10-27:
   „mniejsze paddingi”, wcześniej gutter 16–40 px); treść w kadrze ma własny padding (.hcontent). */
.hero{--hk-pad:var(--space-3);--hk-top:var(--hk-pad);position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--hk-top) var(--hk-pad) var(--hk-pad)}
/* wysokość (decyzja właściciela 2026-10-18): na stronie hero zajmuje dokładnie wysokość ekranu, bez górnego limitu (wcześniej maks. 960 px — na wyższych
   ekranach zostawał czarny pas); gdy treść się nie mieści (niski ekran poziomo), sekcja rośnie do treści. 100svh = ekran bez pasków przeglądarki telefonu.
   W ramce canvasu (.framed z S67Motion.rootClass: strona w iframe) 100svh = wysokość całego artboardu, więc tam zostaje dawny zakres 560–960 px;
   --frame-vh ustawiają artboardy mobilne (wysokość ekranu telefonu, np. 844 px). */
.framed .hero{min-height:clamp(560px,var(--frame-vh,100svh),960px)}
.hbg{position:absolute;inset:var(--hk-top) var(--hk-pad) var(--hk-pad);z-index:0;pointer-events:none;background:var(--surface-raised);border-radius:var(--r-lg);overflow:hidden}
.hbg canvas{display:block;width:100%;height:100%}
/* tło bez shadera (brak WebGL albo WebGL liczony na CPU — hero-shader.js, 2026-10-28): żłobienia szkła 31° i limonkowa poświata jak w kadrze shadera */
.hbg canvas.hs-static{background:
  repeating-linear-gradient(149deg,rgba(var(--c-white-rgb),.16) 0 1.5px,rgba(var(--c-white-rgb),.03) 3px,rgba(var(--c-white-rgb),0) 40px 70px,rgba(var(--c-black-rgb),.5) 108px,rgba(var(--c-white-rgb),0) 112px),
  radial-gradient(52% 46% at 72% 74%,rgba(var(--c-lime-rgb),.62),rgba(var(--c-lime-rgb),.2) 48%,rgba(var(--c-lime-rgb),0) 76%),
  radial-gradient(32% 28% at 94% 26%,rgba(var(--c-lime-rgb),.14),rgba(var(--c-lime-rgb),0) 70%),
  var(--c-black)}
/* Wejście hero „Rozszczepienie wstecz” (pomysł właściciela 2026-10-27, hero-split.js S67Split.intro; ruch jak w panelach kstoimenov.com):
   kadr wjeżdża z dołu jako tyle pasów, ile jest kart „O studio”, z przesunięciem lewo → prawo, lądują kaskadą, szczeliny wtapiają się w trakcie dojazdu.
   Do startu skryptu kadr jest schowany (boot.js nadaje .anim przed pierwszym malowaniem); hi-safe odsłania go, gdyby skrypt nie ruszył.
   Bez wejścia: powrót w sesji (.quick), ramka canvasu (.framed), reduced motion (brak .anim). */
.anim:not(.quick):not(.framed) .hero .hbg{clip-path:inset(100% 0 0 0);animation:hi-safe 0s 1.6s forwards}
.anim:not(.quick):not(.framed) .hero .hbg.hi-run{animation:none}
.anim:not(.quick):not(.framed) .hero .hbg.hi-done{clip-path:none}
.anim:not(.quick):not(.framed) .hero{--hi-d:.3s}   /* tekst hero startuje, gdy pasy lądują */
@keyframes hi-safe{to{clip-path:none}}
/* Przejście hero → „O studio” — wariant A „Rozszczepienie” (decyzja 2026-10-19, hero-split.js): pasy kadru rysuje warstwa .hs-ov
   (fixed, nad tłem hero, pod treścią „O studio”). W trakcie (.hs-fly) karty są przezroczyste, widać tylko ich podpisy (--hs-la);
   przy podmianie na prawdziwe karty (.hs-swap) bez przejść. Własne wejście kart (.rv) wyłączone: przejście jest ich wejściem. */
.hs-ov{position:absolute;left:0;top:0;z-index:0;pointer-events:none;visibility:hidden}
.hs-sec{position:relative;z-index:1}
.anim .hs-sec .oa-card.rv{transform:none}
.anim .hs-sec .oa-card.rv::before,.anim .hs-sec .oa-card.rv::after{display:none}
.hs-fly .oa-card{background:transparent;border-color:transparent}
.hs-fly .oa-grid .oa-card img,.hs-fly .oa-grid .oa-card video,.hs-fly .oa-grid .oa-card .oa-shade{opacity:0}
.hs-fly .oa-foot{opacity:var(--hs-la,0)}
.hs-fly .oa-card,.hs-fly .oa-card *,.hs-swap .oa-card,.hs-swap .oa-card *{transition:none!important}
/* scrim: dolna część kadru przyciemniona, żeby nagłówek był czytelny także nad limonką shadera */
.hbg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(180deg,rgba(var(--c-black-rgb),0) 0%,rgba(var(--c-black-rgb),.38) 45%,rgba(var(--c-black-rgb),.74) 100%);pointer-events:none}
/* treść w kadrze: jedna reguła (wcześniej `.hero .wrap{padding:0 …}` nadpisywała padding pionowy); dół większy, żeby przycisk nie siedział na krawędzi kadru (1440: 72 px, telefon 42 px) */
.hero .hcontent{position:relative;z-index:1;padding:clamp(24px,1rem + 2vw,56px) clamp(16px,.6rem + 1.4vw,32px) clamp(40px,2rem + 2.8vw,88px)}
/* h1 hero: zdanie, nie nazwa marki — 72 px przy 1440, ciężar 400, biel 90 % (decyzja właściciela 2026-10-13: 80/500/100 % „biło po oczach”) */
.h1c{font-weight:400;line-height:1.08;letter-spacing:-.03em;max-width:18em;color:var(--text-hero)}   /* heading-xl w wariancie regular; na telefonie 36 px (wcześniej 28 px — mniejszy niż H2 sekcji) */
.h1c br{display:none}
/* hero mniejszy (prośba właściciela 2026-10-23): hasło 56 px przy 1440 (było 72), 32 px na telefonie (było 36); lead 19/16 px (było 22/18) */
.hero .h1c{font-size:clamp(32px,1rem + 3.4vw,56px)}
/* H1 hero z frazą SEO nad hasłem .h1c (audyt SEO 2026-10-23): etykieta w kolorze leadu, nie konkuruje z hasłem */
.h1k{font-size:clamp(14px,.8rem + .15vw,16px);line-height:1.4;letter-spacing:-.01em;font-weight:500;color:var(--text-hero-lead);max-width:34em;margin-bottom:clamp(12px,.6rem + .6vw,20px);text-wrap:balance}
.hcta{margin-top:clamp(32px,1.5rem + 1.5vw,48px);max-width:320px}
/* lead pod H1 w hero: body-l, biel 72 % na scrimie */
.hlead{font-size:clamp(16px,.9rem + .3vw,19px);color:var(--text-hero-lead);max-width:34em;margin-top:clamp(16px,1rem + .5vw,24px)}
@media (min-width:640px){.h1c br{display:inline}}

/* Akordeon (Usługi na jasnym tle, FAQ na ciemnym) — jeden komponent; kolory z ról, więc działa w obu motywach.
   Stany wiersza: zamknięty (tytuł --text-inactive), hover (tytuł --text-primary, przesunięcie), focus-visible, otwarty. */
.sa-item{border-bottom:1px solid var(--border-subtle)}
.sa-item h3{margin:0}
.sa-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);padding:clamp(14px,.6rem + .9vw,22px) 0;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:var(--r-sm)}
.sa-title{color:var(--text-inactive);transition:color .3s var(--e-out),transform .5s var(--e-out)}
.sa-btn:hover .sa-title,.sa-btn:focus-visible .sa-title,.sa-item.open .sa-title,.sa-btn[data-state=hover] .sa-title{color:var(--text-primary)}
.sa-btn:hover .sa-title,.sa-btn[data-state=hover] .sa-title{transform:translateX(12px)}
.sa-plus{position:relative;width:44px;height:44px;border-radius:50%;border:1px solid var(--border-strong);color:var(--text-primary);flex:none;transition:background-color .3s var(--e-out),border-color .3s,color .3s,transform .5s var(--e-out)}
.sa-plus::before,.sa-plus::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.sa-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.sa-btn:hover .sa-plus,.sa-btn[data-state=hover] .sa-plus{border-color:var(--text-primary)}
/* otwarty: na ciemnym limonkowe kółko z czarnym „×”, na jasnym czarne kółko z limonkowym „×” (limonka zawsze na ciemnym) */
.sa-item.open .sa-plus{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent);transform:rotate(45deg)}
.light .sa-item.open .sa-plus{background:var(--text-primary);border-color:var(--text-primary);color:var(--accent)}
.sa-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--e-out)}
.sa-item.open .sa-panel{grid-template-rows:1fr}
.sa-inner{overflow:hidden;min-height:0}
.sa-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-12);padding:var(--space-4) 0 clamp(16px,.6rem + 1vw,24px);align-items:center}
/* Opis trzyma miarę tekstu; tagi zakresu (szerokość wg treści) mogą sięgać aż do kadru, więc mieszczą się w jednym wierszu */
.sa-text{display:flex;flex-direction:column;gap:var(--space-5)}
.sa-text p{max-width:var(--measure-m)}
.sa-text p{color:var(--text-secondary)}
.sa-tags{display:flex;flex-wrap:wrap;gap:6px}
.sa-med{height:clamp(170px,27vh,250px);aspect-ratio:3/2;border-radius:var(--r-lg);overflow:hidden;background:var(--surface-raised);isolation:isolate}
.sa-med img{width:100%;height:100%;object-fit:cover}
.sa-body{position:relative}
/* Podstrona Kontakt — wariant D „Adres” (tablica Motion Design, decyzja właściciela 2026-10-14): adres konturem na całą szerokość pisze się
   litera po literze (55 ms/znak od 0,2 s), limonkowe „@”, kursor miga dwa razy i gaśnie; hover/fokus wypełnia adres bielą; linia siatki rysuje się od lewej (1,3 s),
   lewa kolumna i formularz dołączają (1,6 s / 1,8 s). Formularz bez panelu, na tle strony. Przy reduced motion wszystko widoczne od razu. */
.kd{padding-top:var(--space-page-top)}
.kd-addr{display:block;font-size:clamp(40px,1rem + 9.4vw,164px);line-height:.9;letter-spacing:-.07em;font-weight:500;color:transparent;-webkit-text-stroke:1px var(--text-outline);text-decoration:none;overflow-wrap:anywhere;transition:color .4s var(--e-out)}   /* display konturem — jedyny taki element (świadomie poza skalą) */
.kd-addr:hover,.kd-addr:focus-visible{color:var(--text-primary)}
.kd-addr .at{color:var(--accent);-webkit-text-stroke:0}
.kd-addr .ch{display:inline-block;opacity:0;animation:kd-ch .08s linear both;animation-delay:calc(.2s + var(--i) * 55ms)}
@keyframes kd-ch{from{opacity:0}to{opacity:1}}
.kd-caret{display:inline-block;width:.08em;height:.8em;background:var(--accent);vertical-align:-.05em;margin-left:.04em;animation:kd-caret 1.15s steps(1) .2s 2 both,kd-fade .01s linear 2.5s both}
@keyframes kd-caret{0%,50%{opacity:1}51%,100%{opacity:0}}
@keyframes kd-fade{to{opacity:0;width:0;margin:0}}
.kd-sub{color:var(--text-secondary);margin-top:var(--space-4);opacity:0;animation:k-fade .5s var(--e-out) 1.5s both}
.kd-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,2rem + 3vw,80px);margin-top:var(--space-block);padding-top:var(--space-10);position:relative}
.kd-grid::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--border-subtle);transform-origin:0 50%;transform:scaleX(0);animation:k-line .9s var(--e-frame) 1.3s both}
.kd-left{display:flex;flex-direction:column;gap:var(--space-5);opacity:0;animation:k-fade .6s var(--e-out) 1.6s both}
.kd-title{max-width:12em}
.kd-left p{color:var(--text-secondary);max-width:var(--measure-s)}
.kd-pills{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-2)}
.kd-form{opacity:0;animation:k-fade .6s var(--e-out) 1.8s both}
.kd-form .panel{background:transparent;padding:0;border-radius:0}
@keyframes k-fade{to{opacity:1}}
@keyframes k-line{to{transform:scaleX(1)}}
@media (max-width:900px){.kd-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-10)}.kd-addr{font-size:clamp(36px,11vw,64px)}}
/* FAQ na podstronie Kontakt: ten sam akordeon na ciemnym tle — tylko inne rozmiary (pytania heading-s, odpowiedź na pełną szerokość kolumny) */
.faq-h{margin-bottom:var(--space-head);max-width:14em}
.faq .sa-list{border-top:1px solid var(--border-subtle)}
.faq .sa-body{grid-template-columns:minmax(0,1fr);padding-bottom:clamp(18px,.8rem + 1vw,28px)}
.faq .sa-text,.faq .sa-text p{max-width:var(--measure-l)}
@media (max-width:900px){.sa-body{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}.sa-med{height:auto;width:100%;max-width:420px}}
/* Proces — wariant E „Indeks przypięty” (2026-10-13): oś z czterema punktami, limonkowy wskaźnik, opis aktywnego kroku pod spodem;
   .pe-wrap daje drogę przewijania (4 × 45 vh), .pe-sticky trzyma sekcję u góry okna (JS w Main: mountPinnedProcess); .nopin = zwykły indeks.
   Podpis „Krok __ z 04” stały, numer jako licznik (.pc-roll). Wejścia przez .rv; oś rysuje się od lewej z postępem --p. */
.pc-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--space-8);margin-bottom:var(--space-block)}
.pc-h2{max-width:13.5em;text-wrap:balance}.pc-h2 .muted{display:block}
.pc-lead{color:var(--text-secondary);max-width:var(--measure-m);margin-top:var(--space-4)}   /* było 14 px (spoza skali) */
.pc-index{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 var(--space-4);padding-top:var(--space-4)}   /* było 18 px */
.pc-index::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--border-subtle);transform-origin:0 50%}
.pc-marker{position:absolute;left:0;top:-1px;width:0;height:3px;background:var(--accent);border-radius:2px}
/* .pc-marker porusza JS jako kroplę (pcDropStep, 2026-10-23): bez przejść CSS */
.pc-it{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);padding:8px 0 16px;background:none;border:0;color:var(--text-secondary);font:inherit;text-align:left;cursor:pointer;border-radius:var(--r-xs);transition:color .3s var(--e-out)}
.pc-it b{font-weight:500}
.pc-it:hover,.pc-it.on{color:var(--text-primary)}
.pc-it.on b{color:var(--accent)}
.pc-stage{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-8);align-items:end;margin-top:var(--space-block);min-height:200px}
.pc-body{display:flex;flex-direction:column;gap:var(--space-4)}
.pc-k{color:var(--text-secondary)}
.pc-roll{display:inline-block;height:1.4em;overflow:hidden;vertical-align:top}
.pc-roll i{display:flex;flex-direction:column;font-style:normal;transform:translateY(calc(var(--n,0) * -1.4em));transition:transform .5s var(--e-out)}
.pc-roll span{display:block;height:1.4em;line-height:1.4em;color:var(--text-primary)}
.pc-panes{display:grid}
.pc-pane{grid-area:1/1;display:flex;flex-direction:column;gap:var(--space-4);max-width:min(100%,48rem);opacity:0;pointer-events:none;transform:translateX(calc(var(--dir,1) * 28px));transition:opacity .45s var(--e-out),transform .55s var(--e-out)}
.pc-pane.on{opacity:1;pointer-events:auto;transform:none;transition-delay:.08s}
.pc-pane.off{transform:translateX(calc(var(--dir,1) * -28px))}
.pc-d{line-height:1.2}   /* heading-s, ale 2–3 wiersze opisu: luźniejsza interlinia */
.pe{--svh:clamp(560px,100vh,900px)}
.pe-wrap{height:calc(var(--svh) + 4 * clamp(260px,45vh,480px))}
.pe-sticky{position:sticky;top:0;height:var(--svh);display:flex;flex-direction:column;justify-content:center;padding:98px 0 40px}
.pe.nopin .pe-wrap{height:auto}
.pe.nopin .pe-sticky{position:static;height:auto;padding:var(--space-section) 0}
/* najazd Podejścia (wariant 2, 2026-10-13): .pe-over wydłuża drogę Procesu o jeden ekran; w tym czasie treść Procesu przygasa i cofa się wg --cp (JS),
   a kadr Podejścia (.qa-over: ujemny margines o wysokość ekranu, z-index nad Procesem) wjeżdża od dołu; wejściem kadru jest sam najazd, bez maski z ramki */
.pe.pe-over .pe-wrap{height:calc(2 * var(--svh) + 4 * clamp(260px,45vh,480px))}
.pe.pe-over .pe-sticky>.wrap{opacity:calc(1 - .5 * var(--cp,0));transform:translateY(calc(var(--cp,0) * -16px));transition:opacity .4s var(--e-out),transform .4s var(--e-out)}
.qa.qa-over{--svh:clamp(560px,100vh,900px);position:relative;z-index:2;margin-top:calc(-1 * var(--svh))}
/* sekcje po kadrze Podejścia (Kontakt) też leżą nad przypiętym Procesem i mają pełne tło — inaczej w odstępie pod kadrem prześwitywał opis kroku Procesu.
   Prześwit nad kadrem i po bokach (margines strony) zostaje: to głębia najazdu. */
.qa.qa-over~section{position:relative;z-index:2;background:var(--surface-default)}
.qa.qa-over{background:linear-gradient(transparent calc(100% - var(--r-lg)),var(--surface-default) 0)}   /* dolne zaokrąglone rogi kadru: bez prześwitu */
.anim .qa.qa-over .qa-kadr::after{display:none}
@media (max-width:900px){.pe-wrap,.pe.pe-over .pe-wrap{height:auto}.pe.pe-over .pe-sticky>.wrap{opacity:1;transform:none}.qa.qa-over{margin-top:0}.pe-sticky{position:static;height:auto;padding:var(--space-section) 0}.pc-head{grid-template-columns:minmax(0,1fr)}.pc-stage{grid-template-columns:minmax(0,1fr)}}
@media (max-width:767px){
  .pc-index{grid-template-columns:minmax(0,1fr);gap:0;padding:0 0 0 20px}
  .pc-index::before{left:0;right:auto;top:0;bottom:0;width:1px;height:auto;transform-origin:50% 0}
  .pc-marker{left:-1px;top:0;width:3px;height:0}
  .pc-it{flex-direction:row;align-items:baseline;gap:var(--space-3);padding:14px 0}
}
/* Podejście — wariant A „Manifest” (2026-10-13): zdanie w skali plakatu (słowa jako .rv.rv-rise z --d → wchodzą kolejno, sprzężone z przewijaniem),
   trzy zasady w trzech kolumnach pod jedną linią (.qa-cols.rv: linia rysuje się z --p); kreska limonkowa przy tytule rośnie po najechaniu. */
.qa{padding:clamp(96px,2rem + 8vw,200px) var(--gutter) 0}
/* klamra z hero: kadr jak w hero (powierzchnia, promień 16 px, odsunięty o --gutter), treść z własnym paddingiem; wejście = kadr otwiera się z ramki (.rv-frame), tekst w środku jak dotąd */
.qa-kadr{background:var(--surface-raised);border-radius:var(--r-lg);padding:clamp(40px,2rem + 4vw,96px) 0 clamp(40px,2rem + 4vw,88px);--cover:var(--surface-default)}
.qa-kadr .wrap{padding:0 clamp(16px,.6rem + 2vw,56px)}
.qa-kadr .qa-cols::before{background:var(--border-strong)}
.qa-kadr .qa-col{--cover:var(--surface-raised)}
.qa-kadr .qa-stmt .w{--cover:var(--surface-raised)}
.qa-stmt{max-width:14.5em;text-wrap:balance}
.qa-stmt .w{display:inline-block;transition:color .22s var(--e-out)}
/* D „Tekst”: kolor słowa zmienia JS (limonka przy kursorze); przejście koloru dopisane do przejść wejścia, żeby skrót transition z .anim .rv go nie kasował */
.anim .qa-stmt .w.rv{transition:opacity var(--t-scrub) var(--e-scrub),transform var(--t-scrub) var(--e-scrub),clip-path var(--t-scrub) var(--e-scrub),color .22s var(--e-out)}
.anim .qa-stmt .w.rv[data-in]{transition:opacity var(--t-enter) var(--e-out) var(--d,0s),transform var(--t-enter) var(--e-out) var(--d,0s),clip-path var(--t-frame) var(--e-frame) var(--d,0s),color .22s var(--e-out)}
.qa-stmt .dim{color:var(--text-secondary);display:block}   /* „Nasze wsparcie.” zawsze w drugim wierszu (komentarz właściciela 2026-10-15) */
.qa-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-12);margin-top:clamp(56px,2rem + 5vw,120px);position:relative;padding-top:32px}
.qa-cols::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--border-subtle);transform-origin:0 50%}
.qa-col{display:flex;flex-direction:column;gap:var(--space-5)}
/* od 901 px: tytuły i opisy trzech kolumn w dwóch wspólnych wierszach (subgrid) — dwuwierszowy tytuł nie przesuwa swojego opisu niżej niż w sąsiednich kolumnach */
@media (min-width:901px){.qa-cols{grid-template-rows:auto auto;row-gap:var(--space-5)}.qa-col{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:var(--space-5)}}
.qa-col h3{display:flex;align-items:flex-start}
.qa-col h3 .pk-bar2{flex:none;margin-top:.175em;transition:height .35s var(--e-out),margin-top .35s var(--e-out)}
.qa-col:hover h3 .pk-bar2{margin-top:.025em}
.qa-col p{color:var(--text-secondary);transition:color .35s var(--e-out)}
.qa-col:hover p{color:var(--text-primary)}
.pk-bar2{display:inline-block;width:2px;height:.8em;background:var(--accent);vertical-align:-.08em;margin-right:10px;border-radius:1px;transition:height .35s var(--e-out)}
.qa-col:hover .pk-bar2{height:1.1em}
@media (max-width:900px){.qa-kadr{padding:32px 0 28px}.qa-kadr .wrap{padding:0 var(--space-4)}.qa-cols{grid-template-columns:minmax(0,1fr);gap:0;padding-top:0}.qa-cols::before{display:none}.qa-col{padding:24px 0;border-top:1px solid var(--border-subtle)}.qa-col:last-child{border-bottom:1px solid var(--border-subtle)}}
/* O studio — wariant A „Manifest” (2026-10-13): nagłówek display na pełną szerokość, rząd czterech kart usług 4:5;
   zdjęcie lekko widoczne (krycie 0,3) pod gradientem .oa-shade, pełne po najechaniu; wejście jak kafle (obrys → wypełnienie, --d rozproszone) */
.oa-h2{max-width:15em;text-wrap:balance}
.oa-sub{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-8);margin-top:var(--space-10)}
.oa-sub p{max-width:var(--measure-m)}
/* zasada (właściciel, 2026-10-15): 5 kart obok siebie od 1280 px; gdy się nie mieszczą (≤ 1279 px) — poziomy slider jak na telefonie, bez „jednego dużego bloku”.
   Najdłuższe słowo nazwy („oprogramowanie”, 7,35 em) musi zmieścić się w karcie bez dzielenia — szerokości kart w sliderze policzone z tego warunku. */
.oa-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-2);margin-top:var(--space-14)}
.oa-card{position:relative;isolation:isolate;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;background:var(--surface-raised);border:1px solid var(--border-subtle);padding:var(--space-5);display:flex;flex-direction:column;justify-content:flex-end;transition:border-color var(--t-std)}   /* bez numerów 01–04 (komentarz właściciela): treść tylko u dołu */
.oa-card img,.oa-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--img-pos,50% 50%);opacity:var(--img-rest,.3);transform:scale(1.06);transition:opacity .5s var(--e-out),transform .9s var(--e-out);z-index:-2}
/* krycie zdjęcia w spoczynku: domyślnie 0,3; zdjęcie ciemne (np. mockup urządzenia na czarnym tle) dostaje w karcie własne --img-rest,
   dobrane pomiarem tak, żeby karta w spoczynku miała jasność jak pozostałe (średnie L* ≈ 17 przy 1440; 2026-10-15). Najechanie: krycie 1.
   --img-pos: punkt kadru przy przycięciu (domyślnie środek). Karta ma zawsze proporcje 4:5. */
.oa-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--c-black-rgb),.15),rgba(var(--c-black-rgb),.85));z-index:-1;pointer-events:none}
.oa-card:hover,.oa-card:focus-visible,.oa-card[data-state=hover]{border-color:transparent}
.oa-card:hover img,.oa-card:focus-visible img,.oa-card[data-state=hover] img,.oa-card:hover video,.oa-card:focus-visible video,.oa-card[data-state=hover] video{opacity:1;transform:none}
/* nazwa u dołu na całą szerokość karty (łamie się tylko między słowami), strzałka w prawym górnym rogu */
.oa-foot{display:block}
.oa-name{display:block;max-width:9em}
.oa-arr{position:absolute;top:var(--space-5);right:var(--space-5);display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-sm);border:1px solid var(--border-subtle);flex:none;transition:background-color var(--t-ui),border-color var(--t-ui),color var(--t-ui)}
.oa-arr svg{width:13px;height:13px;transition:transform var(--t-ui) var(--e-ui)}
.oa-card:hover .oa-arr,.oa-card:focus-visible .oa-arr,.oa-card[data-state=hover] .oa-arr{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}
.oa-card:hover .oa-arr svg,.oa-card:focus-visible .oa-arr svg,.oa-card[data-state=hover] .oa-arr svg{transform:translate(2px,-2px)}
/* poniżej 1280 px: poziomy slider z przyciąganiem do karty (uwagi właściciela 2026-10-15); następna karta wystaje z prawej,
   pod spodem pasek postępu (--sx z JS w Main) i przycisk „Przesuń”, którego strzałka puka w prawo, dopóki ktoś nie przewinie.
   Karty w pasku są widoczne od razu (bez wejścia z obrysem — obserwator przewijania nie widzi kart schowanych w bok). */
.oa-hint{display:none;align-items:center;gap:var(--space-4);margin-top:var(--space-5)}
.oa-hint-bar{position:relative;flex:1;height:1px;background:var(--border-subtle);overflow:hidden}
.oa-hint-bar i{position:absolute;inset:0;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--sx,.25));transition:transform .2s linear}
.oa-hint-btn{display:inline-flex;align-items:center;gap:var(--space-3);min-height:44px;padding:0 6px 0 16px;border:1px solid var(--border-strong);border-radius:var(--r-pill);background:none;color:var(--text-primary);font:inherit;font-size:var(--fs-ui-s);cursor:pointer;flex:none}
.oa-hint-ico{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--text-on-accent);transition:transform .5s var(--e-out)}
.oa-hint-ico svg{width:14px;height:14px}
.oa-hint:not(.moved) .oa-hint-ico svg{animation:oa-nudge 1.8s var(--e-out) infinite}
.oa-hint.end .oa-hint-ico{transform:rotate(180deg)}
/* etykiety „Przesuń” / „Na początek” w jednej komórce: przycisk ma stałą szerokość (dłuższej etykiety), a zmiana to przewinięcie tekstu w pionie
   zsynchronizowane z obrotem strzałki — bez skoku szerokości (uwaga właściciela 2026-10-15) */
.oa-hint-lbl{display:grid;overflow:hidden;line-height:1.4}
.oa-l{grid-area:1/1;justify-self:end;white-space:nowrap;transition:transform .5s var(--e-out),opacity .35s var(--e-out)}
.oa-l-back{transform:translateY(105%);opacity:0}
.oa-hint.end .oa-l-next{transform:translateY(-105%);opacity:0}
.oa-hint.end .oa-l-back{transform:none;opacity:1}
@keyframes oa-nudge{0%,55%,100%{transform:translateX(0)}25%{transform:translateX(4px)}}
@media (max-width:1279px){
  .oa-grid{display:flex;gap:var(--space-2);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}
  .oa-grid::-webkit-scrollbar{display:none}
  .oa-card{flex:0 0 max(250px,26%);scroll-snap-align:start}   /* 601–1279: płynnie ok. 3–4 karty w kadrze, bez skoku szerokości przy progach */
  .anim .oa-grid .oa-card.rv{opacity:1;transform:none}   /* mocniejszy selektor: reguły wejścia kafli stoją w arkuszu niżej */
  .anim .oa-grid .oa-card.rv::after,.anim .oa-grid .oa-card.rv::before{display:none}
  .oa-hint{display:flex}
}
@media (max-width:600px){.oa-card{flex-basis:76%}}   /* telefon: jedna karta + zapowiedź następnej */
/* Realizacje — wariant E „Kursor” (2026-10-13): wielkie tytuły w wierszach z liniami; kadr 4:5 podąża za kursorem nad listą (transform z JS w Main),
   zdjęcie wskazanego wiersza, pozostałe tytuły przygasają (kolor, nie opacity — opacity należy do wejścia .rv). Dotyk / reduced motion: miniatura pod tytułem. */
.re{position:relative}
.re-list{border-top:1px solid var(--border-subtle)}
.re-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:var(--space-8);padding:clamp(20px,1rem + 1.2vw,32px) 0;border-bottom:1px solid var(--border-subtle)}
.re-row h3{font-weight:400;letter-spacing:-.035em;color:var(--text-list-rest);transition:transform .5s var(--e-out),color .35s var(--e-out)}
.re-row>span{color:var(--text-secondary);white-space:nowrap;transition:color var(--t-ui)}
/* wskazany wiersz (mysz lub klawiatura) biały i przesunięty; pozostałe przygaszone do --c-grey-600 (4,6:1 — wcześniej biel 28 %, 2,3:1) */
.re-list:hover .re-row h3,.re-list:has(.re-row:focus-visible) .re-row:not(:focus-visible) h3{color:var(--text-dimmed)}
.re-list .re-row:hover h3,.re-list .re-row:focus-visible h3{color:var(--text-primary);transform:translateX(16px)}
.re-row:hover>span,.re-row:focus-visible>span{color:var(--accent)}
.re-float{position:absolute;left:0;top:0;width:clamp(220px,24vw,360px);aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;background:var(--surface-raised);pointer-events:none;z-index:3;opacity:0;transform:translate3d(-9999px,0,0);transition:opacity .35s var(--e-out);will-change:transform}
.re-float.on{opacity:1}
.re-float img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .3s var(--e-out),transform .8s var(--e-out)}
.re-float img.on{opacity:1;transform:none}
.re-thumb{display:none}
@media (hover:none),(prefers-reduced-motion:reduce){
  .re-float{display:none}
  .re-row h3,.re-list:hover .re-row h3,.re-list:has(.re-row:focus-visible) .re-row:not(:focus-visible) h3{color:var(--text-primary)}
  .re-thumb{display:block;grid-column:1/-1;aspect-ratio:3/2;border-radius:var(--r-md);overflow:hidden;background:var(--surface-raised);margin-top:var(--space-3)}
  .re-thumb img{width:100%;height:100%;object-fit:cover}
}

/* nagłówek sekcji z kolumną etykiety (szablon realizacji: „| Realizacje” · tytuł · link) */
.shead{display:grid;grid-template-columns:26% minmax(0,1fr) auto;align-items:end;gap:var(--space-6) var(--gap-col);margin-bottom:var(--space-head)}
.shead .label{align-self:start}

/* metadane realizacji (Kategoria · Zakres · Rok · Klient) */
.meta{display:grid;gap:var(--space-2);margin-top:auto}
.meta div{display:flex;align-items:baseline;gap:var(--space-2)}
.meta dt{flex:1;display:flex;align-items:baseline;gap:var(--space-2);color:var(--text-secondary)}
.meta dt::after{content:"";flex:1;border-bottom:1px dotted var(--border-strong);transform:translateY(-4px)}
.meta dd{text-align:right}
/* kadr: zaokrąglona ramka na obraz (powierzchnia jako tło, zanim obraz się wczyta) */
.frame{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--surface-raised)}
.frame img{width:100%;height:100%;object-fit:cover}
.cw-med img,.rv-frame img{--sc:1.12;width:100%;height:100%;object-fit:cover;transform:translateY(calc(var(--py,0) * 4%)) scale(var(--sc));transition:transform .8s var(--e-out)}
/* karta realizacji — hover (desktop): obraz „ustawia ostrość” (skala do 1), karta jaśnieje, kategoria ze strzałką; na dotyku strzałka stale */
@media (hover:hover){
  .anim .cw.rv:hover .cw-med img,.anim .cw.rv:focus-within .cw-med img{--sc:1.08}
  .cw:hover .cw-top>span,.cw:focus-within .cw-top>span{color:var(--accent)}
  .cw:hover .cw-top>span::before,.cw:focus-within .cw-top>span::before{opacity:1;transform:none}
  .cw:hover .cw-med img,.cw:focus-within .cw-med img{--sc:1.08}
  .cw:hover,.cw:focus-within{background:var(--surface-elevated)}
}
.cw[data-state=hover]{background:var(--surface-elevated)}.cw[data-state=hover] .cw-top>span{color:var(--accent)}.cw[data-state=hover] .cw-top>span::before{opacity:1;transform:none}
@media (hover:none){.cw-top>span::before{opacity:1;transform:none}}

/* Kontakt — wariant B „Limonka” (2026-10-13): jedyny limonkowy blok na stronie (zasada marki: limonka jako tło = czarny tekst),
   obok ciemny blok z formularzem; oba w jednej zaokrąglonej ramce. */
.kb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:var(--r-lg);overflow:hidden}
.kb-lime{position:relative;background:var(--surface-accent);color:var(--text-on-accent);padding:var(--pad-panel);display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-12);min-height:560px;--cover:var(--surface-default);--focus-ring:var(--text-on-accent)}
.kb-lime>*{--cover:var(--surface-accent)}
.kb-h2{max-width:8em;text-wrap:balance}
.kb-lead{color:var(--text-on-accent-secondary);max-width:var(--measure-s);margin-top:var(--space-5)}
.kb-lines{display:flex;flex-direction:column;gap:6px}
.kb-lines a{align-self:flex-start;color:var(--text-on-accent);overflow-wrap:anywhere;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;transition:background-size .4s var(--e-out)}
.kb-lines a:hover,.kb-lines a:focus-visible{background-size:100% 2px}
.kb-lines .sm{color:var(--text-on-accent-secondary);margin-top:var(--space-3);display:flex;gap:var(--space-4);flex-wrap:wrap}
.kb-lines .sm a{font-size:var(--fs-ui);line-height:1.3;letter-spacing:-.03em;background-size:100% 1px}
.kb-lines .sm a:hover,.kb-lines .sm a:focus-visible{background-size:100% 2px}
.kb-lines .sm span{color:var(--text-on-accent-secondary);font-weight:400}   /* było 50 % (3,7:1) — poniżej WCAG AA */
.kb-dark{background:var(--surface-raised);padding:var(--pad-panel)}
.kb-dark .panel{background:transparent;padding:0;border-radius:0}

/* formularz zapytania — wariant B „Obrys” (2026-10-26).
   Odstępy w trzech poziomach: w polu 8 (etykieta → pole → błąd), między polami 24, między grupami 40 (≤ 640 px: 20 i 32).
   Grupy: dane kontaktowe (.fgrp), rodzaj zapytania (fieldset z chipami), wiadomość, stopka (.ffoot: zgoda, przycisk, komunikaty).
   Tekst w polu, w wiadomości i na przycisku zaczyna się 20 px od krawędzi; pole ma 56 px, jak .btn.
   Stany pola: default (obrys --border-strong), hover, focus (limonkowy obrys 2 px), błąd (czerwony obrys 2 px + komunikat).
   Chip: default, hover, zaznaczony, focus-visible. Przycisk: default, hover, active, disabled (wysyłanie). Komunikaty: info, sukces, błąd. */
.panel{border-radius:var(--r-lg);background:var(--surface-raised);padding:clamp(20px,1rem + 1vw,32px)}
.form{display:grid;gap:var(--space-10)}
.fgrp{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
.fld{display:grid;gap:var(--space-2);border:0;margin:0;padding:0;min-width:0;align-content:start}
.fld>label,.fld>legend{display:flex;justify-content:space-between;gap:var(--space-3);padding:0;color:var(--text-label);font-weight:500;line-height:20px}
.fld .req{color:var(--accent)}
.fld .opt{color:var(--text-secondary);font-weight:400}
.fld>input,.fld>textarea{width:100%;min-height:56px;padding:0 var(--space-5);border:1px solid var(--border-strong);border-radius:var(--r-md);background:transparent;color:var(--text-primary);font:inherit;font-size:var(--fs-ui);outline:none;
  transition:border-color var(--t-ui) var(--e-ui),box-shadow var(--t-ui) var(--e-ui),background-color var(--t-ui) var(--e-ui)}
.fld>textarea{display:block;min-height:176px;padding:var(--space-4) var(--space-5);line-height:24px;resize:vertical}
.fld>input:hover,.fld>textarea:hover,.fld[data-state=hover]>input{border-color:var(--border-hover)}
.fld>input:focus,.fld>textarea:focus,.fld[data-state=focus]>input{border-color:var(--focus-ring);box-shadow:inset 0 0 0 1px var(--focus-ring);background:rgba(var(--c-lime-rgb),.03)}
.fld>input::placeholder,.fld>textarea::placeholder{color:var(--text-tertiary);opacity:1}
.fld.invalid>input,.fld.invalid>textarea{border-color:var(--status-error);box-shadow:inset 0 0 0 1px var(--status-error)}
.ferr{display:flex;align-items:center;gap:var(--space-2);color:var(--status-error)}
.ferr:empty{display:none}
.ferr::before{content:"!";display:grid;place-items:center;width:16px;height:16px;flex:none;border-radius:50%;background:var(--status-error);color:var(--c-black);font:600 11px/1 var(--font-mono)}
/* legend nie jest elementem siatki fieldsetu, więc gap go nie odsuwa — odstęp do chipów wprost */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--space-3)}
.chip{position:relative;display:flex}
.chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.chip span{padding:0 18px}
.chip:hover span,.chip[data-state=hover] span{border-color:var(--accent)}
.chip:active span{transform:scale(.97)}
.chip input:checked+span{background:var(--accent);color:var(--text-on-accent);border-color:var(--accent)}
.chip input:focus-visible+span,.chip[data-state=focus] span{outline:2px solid var(--focus-ring);outline-offset:2px}
.ffoot{display:flex;flex-direction:column;gap:var(--space-6)}   /* flex, nie grid: ujemny margines regionu komunikatów niżej musi znosić odstęp */
.consent{display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--space-3);align-items:start;color:var(--text-secondary);line-height:20px}
.consent input{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:-1px 0 0;border:1.5px solid var(--border-strong);border-radius:6px;background:transparent;cursor:pointer;transition:background-color var(--t-ui),border-color var(--t-ui)}
.consent input:hover{border-color:var(--accent)}
.consent input:checked{background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='%23040404' stroke-width='2'/%3E%3C/svg%3E") center/14px no-repeat;border-color:var(--accent)}
.consent input:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.consent input[aria-invalid=true]{border-color:var(--status-error)}
.consent label{cursor:pointer;max-width:64ch}
.consent a{color:var(--text-label);text-decoration:underline;text-underline-offset:3px}
.consent .ferr:not(:empty){margin-top:var(--space-2)}
/* region komunikatów zostaje w drzewie (aria-live), więc pusty nie może dokładać odstępu stopki: odstęp niesie widoczny komunikat */
.ffoot>[role=status]{margin-top:calc(-1 * var(--space-6))}
.ffoot .fstatus{margin:var(--space-6) 0 0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fstatus{padding:14px 16px;border-radius:var(--r-sm);animation:fade var(--t-std) var(--e-out) both}
.fstatus.ok{background:var(--status-success-bg);color:var(--status-success)}
.fstatus.err{background:var(--status-error-bg);color:var(--status-error)}
.fstatus.info{background:var(--surface-elevated);color:var(--text-primary)}

/* stopka */
/* stopka odsłaniana spod ostatniej sekcji (wzór LPAS, 2026-10-13): treść strony (main) leży wyżej, ma nieprzezroczyste tło i własny z-index,
   a stopka (jej element-gospodarz z runtime'u) jest przyklejona do dolnej krawędzi okna pod spodem (sticky bottom: 0, z-index 0). Przy przewijaniu w dół
   ostatnia sekcja odjeżdża w górę i odsłania nieruchomą stopkę; w górę — znów ją przykrywa. Postęp = pozycja przewijania, bez dodatkowej drogi.
   Stopka wyższa niż okno (JS w Footer: klasa .foot-tall) = zwykły układ; w ramce canvasu dokument się nie przewija, więc też zwykły układ.
   W WordPressie: ten sam zestaw reguł na <main> i na <footer> (lub jego opakowaniu). */
.s67>main{position:relative;z-index:1;background:var(--surface-default)}
.s67>.sc-host:has(>.foot),.foot-host{position:sticky;bottom:0;z-index:0}
.s67>.sc-host:has(>.foot-tall),.foot-host:has(>.foot-tall){position:static}
.foot{background:var(--surface-default);color:var(--text-primary);font-family:var(--font-sans);border-top:1px solid var(--border-subtle);padding:clamp(40px,2rem + 2vw,64px) 0 24px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-8) var(--gap-col)}
.fgrid h2{color:var(--text-secondary);font-weight:400;margin-bottom:var(--space-1)}
.fgrid ul{display:grid;font-weight:500}
.foot-about{max-width:var(--measure-s);margin-top:var(--space-4)}
.fgrid li a{display:inline-flex;align-items:center;min-height:32px;transition:color var(--t-ui)}
.fgrid li a:hover,.fgrid li a:focus-visible{color:var(--accent)}
.fbottom{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-block);color:var(--text-secondary)}
.fbottom a{display:inline-flex;align-items:center;min-height:44px;transition:color var(--t-ui)}
.fbottom a:hover{color:var(--text-primary)}

/* podstrony */
.phead{padding:var(--space-page-top) 0 clamp(32px,1.5rem + 2vw,48px)}
.phead-row{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-8);flex-wrap:wrap;margin-top:var(--space-5)}
/* filtry listy realizacji: stany default (secondary), hover, wybrany (aria-pressed: tekst primary, kreska limonkowa) */
.filters{display:flex;flex-direction:column;align-items:flex-end}
.filters button{background:none;border:0;padding:0 2px;min-height:36px;cursor:pointer;color:var(--text-secondary);font:inherit;display:inline-flex;gap:6px;align-items:center;transition:color var(--t-ui)}
.filters button::after{content:"|";color:var(--text-tertiary);transition:color var(--t-ui)}
.filters button.on{color:var(--text-primary)}.filters button.on::after{color:var(--accent)}
.filters button:hover{color:var(--text-primary)}
.gw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,.5rem + 1.6vw,32px)}
.cw{position:relative;display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:var(--r-xl);background:var(--surface-raised);transition:background-color var(--t-std) var(--e-out),transform var(--t-press) var(--e-ui)}
.cw:active{transform:scale(.995)}
.cw-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);padding:8px 10px 5px}
.cw-top h2{min-width:0;overflow-wrap:break-word}
.cw-top h2 a::after{content:"";position:absolute;inset:0;z-index:2;border-radius:var(--r-xl)}
.cw:has(a:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.cw a:focus-visible{outline:none}
.cw-med{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3}
.gw.filtered .cw[data-in],.gw.filtered .cw:not(.rv){animation:fade .25s var(--e-out) both}
.empty{padding:var(--space-12);border:1px dashed var(--border-subtle);border-radius:var(--r-lg);text-align:center;color:var(--text-secondary)}
.chg{display:grid;grid-template-columns:minmax(0,1fr) minmax(256px,24%);gap:var(--space-6) var(--gap-col);grid-template-areas:"t c" "m s"}
.cblock{display:grid;grid-template-columns:26% minmax(0,1fr);gap:var(--space-6) var(--gap-col)}.cblock>.cb-body{grid-column:2}   /* bez etykiet 01/02 (2026-10-14): treść zostaje w prawej kolumnie */
.gal{display:grid;gap:var(--space-2);margin-top:var(--space-block)}
.gal figure{border-radius:var(--r-lg);overflow:hidden;background:var(--surface-raised)}
.gal img{width:100%;height:100%;object-fit:cover}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
.note{color:var(--text-secondary)}
.ph{font-family:var(--font-mono);font-size:.85em;letter-spacing:0;color:var(--text-secondary)}   /* znacznik treści do uzupełnienia: [ROK], [KLIENT] */
.cb-text{color:var(--text-secondary);max-width:var(--measure-l);margin-top:var(--space-5)}   /* akapit bloku treści realizacji */
.prose{max-width:var(--measure-xl);display:grid;gap:var(--space-5)}   /* tekst dokumentu (polityka) */

/* ===== RUCH (B/C): wejścia sprzężone z przewijaniem.
   .rv dostaje od motion.js zmienną --p (0…1) liczoną z widocznej części elementu: przewijanie w dół odsłania,
   w górę cofa; element wychodzący górą zostaje odsłonięty. Przejścia --t-scrub (0,5 s, --e-out) dają bezwładność: element dogania
   pozycję z lekkim opóźnieniem. [data-in] = odsłonięty raz, przejściem w czasie (pierwszy ekran, hero, fokus); data-instant = bez
   przejścia. Warianty po geometrii: .rv-rise (nagłówki: przysłona z kreską, sterowana z motion.js), .rv-frame (obraz z ramki), kafle, wiersze
   realizacji, karty listy, etykiety, szyny procesu. Klasa .anim tylko gdy JS działa i nie ma reduced motion. ===== */
.anim .rv{--p:0;opacity:var(--p);transform:translateY(calc((1 - var(--p)) * var(--rise)));transition:opacity var(--t-scrub) var(--e-scrub),transform var(--t-scrub) var(--e-scrub),clip-path var(--t-scrub) var(--e-scrub)}
.anim .rv[data-in]{--p:1;transition:opacity var(--t-enter) var(--e-out) var(--d,0s),transform var(--t-enter) var(--e-out) var(--d,0s),clip-path var(--t-frame) var(--e-frame) var(--d,0s)}
/* Maska na samym obserwowanym elemencie zerowałaby jego przecięcie z oknem (IntersectionObserver liczy clip-path),
   dlatego tekst, kadry i kafle zasłania kurtyna ::after w kolorze tła, sterowana własnym clip-path. */
.anim .rv-rise::after,.anim .rv-frame::after,.anim .oa-card.rv::after{content:"";position:absolute;inset:0;background:var(--cover);pointer-events:none;transition:clip-path var(--t-scrub) var(--e-scrub)}
/* nagłówki — „Przysłona z kreską” (decyzja właściciela 2026-10-16, zastępuje kurtynę od góry): każda linia odsłania się od lewej,
   krawędź prowadzi cienka kreska akcentu; linie startują co .22 s i zachodzą na siebie. Tekst zostaje zwykłym tekstem (bez dzielenia):
   motion.js mierzy linie (Range.getClientRects) i co klatkę buduje maskę kurtyny (--rm-*: prostokąty jeszcze zakryte) oraz kreski (--rb-*).
   Kurtyna jest większa od pola tekstu (-.25em/-.35em), więc ogonki nie są ucinane; po pełnym odsłonięciu data-rise="1" ją wyłącza. */
.anim .rv-rise{opacity:1;position:relative;transform:none;--rise-bar:var(--accent)}
.anim .rv-rise::after{inset:-.25em -.25em -.35em;clip-path:none;transition:none;background-color:var(--cover);background-image:var(--rb-img,none);background-position:var(--rb-pos,0 0);background-size:var(--rb-size,auto);background-repeat:no-repeat;
  -webkit-mask-image:var(--rm-img,linear-gradient(#000,#000));mask-image:var(--rm-img,linear-gradient(#000,#000));-webkit-mask-position:var(--rm-pos,0 .33em);mask-position:var(--rm-pos,0 .33em);-webkit-mask-size:var(--rm-size,100% calc(100% - .59em));mask-size:var(--rm-size,100% calc(100% - .59em));-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* bez zmiennych z motion.js (przed pierwszym ruchem) maska = pas od wydłużeń górnych pierwszej linii do ogonków ostatniej: zakryty nagłówek nie przesłania sąsiednich linii */
.anim .rv-rise[data-rise="1"]::after{display:none}
/* .rv-cut (nagłówek nad pasami „Rozszczepienia”, 2026-10-20): zamiast kurtyny w kolorze tła motion.js wycina nieodsłonięte części
   linii clip-path; ::after rysuje tylko kreskę. Przed policzeniem linii tekst ukryty. */
.anim .rv-rise.rv-cut{transition:none}
.anim .rv-rise.rv-cut::after{background-color:transparent}
.anim .rv-rise.rv-cut:not([data-rise="1"]){clip-path:inset(0 100% 0 0)}
.kb-lime .rv-rise{--rise-bar:var(--text-on-accent)}
.qa-stmt .rv-rise{--rise-cursor:0}   /* zdanie Podejścia: każde słowo to osobny nagłówek — bez kresek (kilkanaście naraz byłoby szumem), sama przysłona słowo po słowie */
/* obraz otwiera się z ramki (od góry, od strony tytułu) */
.anim .rv-frame{opacity:1;transform:none;position:relative}
.anim .rv-frame::after{clip-path:inset(calc(var(--p) * 100%) 0 0 0)}
/* etykieta „01 | Nazwa”: najpierw rośnie kreska (pierwsze 40 % wejścia), potem tekst wysuwa się zza niej */
.anim .label.rv{opacity:1;transform:none;--p2:clamp(0, (var(--p) - .3) / .7, 1)}
.anim .label.rv .label-bar{transform:scaleY(min(1, var(--p) * 2.5));transform-origin:50% 100%;transition:transform var(--t-scrub) var(--e-scrub)}
.anim .label.rv>span:not(.label-bar){opacity:var(--p2);transform:translateX(calc(-6px * (1 - var(--p2))));transition:opacity var(--t-scrub) var(--e-scrub),transform var(--t-scrub) var(--e-scrub)}
/* kafle (wariant A „stykówka”): najpierw zapala się limonkowy obrys (::before), potem kurtyna (::after) gaśnie i kafel
   wypełnia się treścią, obrys znika; --d w markupie = kolejność (rozproszona, nie rzędami) */
.anim .oa-card.rv{--f:clamp(0, (var(--p) - .2) / .6, 1);opacity:1;transform:scale(calc(.97 + .03 * var(--f)))}
.anim .oa-card.rv::after{clip-path:none;opacity:calc(1 - var(--f));transition:opacity var(--t-scrub) var(--e-scrub)}
.anim .oa-card.rv::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--accent);pointer-events:none;opacity:clamp(0, min(var(--p) * 4, (1 - var(--p)) * 2.5), 1);transition:opacity var(--t-scrub) var(--e-scrub)}
/* Podejście: linia nad kolumnami rysuje się od lewej z postępem; kontener kolumn sam się nie przesuwa */
.anim .qa-cols.rv{opacity:1;transform:none}
.anim .qa-cols.rv::before{transform:scaleX(var(--p));transition:transform var(--t-scrub) var(--e-scrub)}
.anim .qa-cols.rv[data-in]::before{transition:transform var(--t-frame) var(--e-frame) var(--d,0s)}
/* Kontakt B: limonkowy blok sam się nie przesuwa; kurtyna ::after w kolorze tła zjeżdża z niego od lewej z postępem (na telefonie od góry) */
.anim .kb-lime.rv{opacity:1;transform:none}
.anim .kb-lime.rv::after{content:"";position:absolute;inset:0;z-index:3;background:var(--cover);pointer-events:none;clip-path:inset(0 0 0 calc(var(--p) * 100%));transition:clip-path var(--t-scrub) var(--e-scrub)}
@media (max-width:900px){.anim .kb-lime.rv::after{clip-path:inset(calc(var(--p) * 100%) 0 0 0)}}
/* Proces: oś (.pc-index) rysuje się od lewej z postępem; sam kontener nie przesuwa się ani nie znika */
.anim .pc-index.rv{opacity:1;transform:none}
.anim .pc-index.rv::before{transform:scaleX(var(--p));transition:transform var(--t-scrub) var(--e-scrub)}
.anim .pc-index.rv[data-in]::before{transition:transform var(--t-frame) var(--e-frame) var(--d,0s)}
@media (max-width:767px){.anim .pc-index.rv::before{transform:scaleY(var(--p))}}
.anim .oa-card.rv[data-in]::after,.anim .oa-card.rv[data-in]::before{transition:opacity var(--t-enter) var(--e-out) var(--d,0s)}
/* karta listy (pionowa): tytuł zjeżdża z góry, kadr podjeżdża z dołu, domykając szczelinę */
.anim .cw.rv{opacity:1;transform:none}
.anim .cw.rv .cw-top{opacity:var(--p);transform:translateY(calc((1 - var(--p)) * -16px));transition:opacity var(--t-scrub) var(--e-scrub),transform var(--t-scrub) var(--e-scrub)}
.anim .cw.rv .cw-med{opacity:var(--p);transform:translateY(calc((1 - var(--p)) * 20px));transition:opacity var(--t-scrub) var(--e-scrub),transform var(--t-scrub) var(--e-scrub)}
/* parallax kadru: obraz w ramce porusza się wolniej niż strona (--py z motion.js, ±4 % wysokości; zapas w skali 1.12) */
/* odsłonięcie raz, w czasie (pierwszy ekran, fokus): części składowe z własnymi krzywymi */
.anim .rv[data-in]::after{transition:clip-path var(--t-frame) var(--e-frame) var(--d,0s)}
.anim .rv[data-in] .cw-med,.anim .rv[data-in] .cw-top,.anim .rv[data-in] .label-bar,.anim .label.rv[data-in]>span{transition-duration:var(--t-enter);transition-timing-function:var(--e-out);transition-delay:var(--d,0s)}
/* hero: pasek → logo pisze się → przysłona otwiera kadr → lead i kolumna dołączają (sekwencja w czasie, nie od scrolla) */
.bar{animation:bar-in .5s var(--e-out) both}
/* animacja CSS od pierwszego malowania, nie przejście po data-in z S67Motion.mount (skrypty defer): akapit hero to LCP na telefonie,
   czekanie na skrypty dawało LCP 2,9 s w PageSpeed mobile (2026-10-28) */
.anim .hero .rv{animation:hero-in .6s var(--e-out) calc(var(--d,0s) + var(--hi-d,0s)) both}
.anim .hero .h1k.rv{--d:.25s}
.anim .hero .h1c.rv{--d:.35s}
/* powrót na stronę główną w tej samej sesji: krótki wstęp zamiast pełnej sekwencji */
.anim.quick .bar{animation:none}
.anim.quick .hero .rv{animation:fade .35s var(--e-out) both;--d:0s}
/* bez przejścia: element już przewinięty, kotwica, fokus */
.anim [data-instant],.anim [data-instant]::after,.anim [data-instant]::before,.anim [data-instant] .cw-med::after,.anim [data-instant] .label-bar,.anim [data-instant]>span,.anim [data-instant] .cw-top,.anim [data-instant] .cw-med,.anim [data-instant] img{transition:none!important}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes hero-in{from{opacity:0;transform:translateY(var(--rise))}to{opacity:1;transform:none}}
@keyframes bar-in{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .anim .pc-index.rv::before{transform:none!important}
  .anim .qa-cols.rv::before{transform:none!important}
.anim .rv,.anim .rv-rise,.anim .rv-frame,.anim .hero .rv,.anim .oa-card.rv,.anim .cw.rv .cw-med{clip-path:none!important;opacity:1!important;transform:none!important}
  .cw-med img,.rv-frame img{transform:none!important}
  .anim .cw.rv .cw-top,.anim .cw.rv .cw-med,.anim .label.rv .label-bar,.anim .label.rv>span{opacity:1!important;transform:none!important}
  .anim .rv::after,.anim .rv::before{display:none!important}
  .nv-item,.nv-si,.nv-meta{opacity:1!important;transform:none!important}
  .kd-sub,.kd-left,.kd-form,.kd-addr .ch{opacity:1!important}
  .kd-grid::before{transform:none!important}
  .kd-caret{display:none}
}

/* responsywność */
@media (max-width:900px){
  :root{--t-enter:.5s;--t-frame:.7s;--rise:12px}
  .anim .hero .h1k.rv{--d:.2s}
  .anim .hero .h1c.rv{--d:.3s}
  .anim .hcta.rv{--d:.45s}
  .cblock{grid-template-columns:minmax(0,1fr)}.cblock>.cb-body{grid-column:auto}
  .kb{grid-template-columns:minmax(0,1fr)}
  .kb-lime{min-height:0;gap:var(--space-8)}
  .oa-sub{flex-direction:column;align-items:flex-start}
  .shead{grid-template-columns:minmax(0,1fr);align-items:start}
  .fgrid{grid-template-columns:1fr 1fr}
  .fgrid>div:first-child{grid-column:1/-1}
  .gw{grid-template-columns:minmax(0,1fr)}
  .chg{grid-template-columns:minmax(0,1fr);grid-template-areas:"c" "t" "m" "s"}
  .filters{flex-direction:row;flex-wrap:wrap;align-items:center;gap:0 14px}
}
@media (max-width:640px){
  /* telefon: nagłówki łamane równo (bez pojedynczego słowa w ostatnim wierszu), akapity bez sierot; desktop bez zmian */
  h1,h2,h3,.sa-title,.oa-name{text-wrap:balance}
  p,.sa-text p{text-wrap:pretty}
  .fgrp,.fgrid,.pair{grid-template-columns:minmax(0,1fr)}
  .form{gap:var(--space-8)}
  .fgrp{gap:var(--space-5)}
  .fgrid li a{min-height:44px}
}
/* Realizacje — „odsłona: tafla wody” (2026-10-14, zamiast karuzeli): drugie zdjęcie realizacji w SVG nad pierwszym, widoczne przez maskę —
   elipsę .cw-blob, którą JS (Realizacje.dc.html) prowadzi za kursorem; filtr #s67-water faluje i zmiękcza tylko krawędź maski, środek ostry. */
.cw-med .cw-revs{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;display:block}
.cw-med .cw-glass{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;display:block}
.cw-med.gl-on .cw-revs{visibility:hidden}
.cw-med .badge{z-index:2}
@media (hover:none),(prefers-reduced-motion:reduce){.cw-med .cw-revs,.cw-med .cw-glass{display:none}}
/* Szablon realizacji — sekcja „Efekt” na białym tle (2026-10-14): JS ustawia --lp 0…1 przy przewijaniu; tło, tekst i akcenty mieszają się
   płynnie między ciemnym a jasnym motywem. Podwójna klasa wygrywa z .light (dodawaną od połowy przejścia tylko dla koloru logo). */
.fx-lt.fx-lt{--lpp:calc(var(--lp,0) * 100%);background:color-mix(in srgb,var(--c-white) var(--lpp),var(--c-black));color:color-mix(in srgb,var(--c-black) var(--lpp),var(--c-white));--cover:color-mix(in srgb,var(--c-white) var(--lpp),var(--c-black))}
.fx-lt.fx-lt .muted,.fx-lt.fx-lt .ph,.fx-lt.fx-lt .cb-text{color:color-mix(in srgb,var(--c-grey-700) var(--lpp),var(--c-grey-500))}
.fx-lt.fx-lt .label-bar{color:color-mix(in srgb,var(--c-black) var(--lpp),var(--accent))}

/* ===== Realizacje — lista „Rozrzut → lista” (wariant J „G → I”, decyzja właściciela 2026-10-19) =====
   Bez skryptu (ramka canvasu, reduced motion): wiersz = opis po lewej (4/12, wyrównany do dołu kadru) + karta 3:2 po prawej (8/12).
   realizacje-rozrzut.js dodaje .rz-live: karty i opisy pozycjonowane absolutnie, rozrzut na wejściu, przy przewijaniu lista (.rz-ord).
   */
.rz{position:relative;display:flex;flex-direction:column;gap:var(--space-10)}
.rz-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--space-10);align-items:end}
.rz-info{position:relative;display:flex;flex-direction:column;gap:var(--space-3);min-width:0;padding-bottom:var(--space-2)}
.rz-info h2 a::after{content:"";position:absolute;inset:0;z-index:1}
.rz-info .rz-ds{color:var(--text-secondary);max-width:var(--measure-s)}
.rz-tags{list-style:none;margin:var(--space-2) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.rz-tags .tag{transition:border-color var(--t-ui),color var(--t-ui)}
.rz-card{position:relative;display:block;padding:6px;border-radius:var(--r-xl);background:var(--surface-raised);color:inherit;transition:background-color var(--t-std) var(--e-out)}
.rz-card:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.rz-med{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/2;background:var(--surface-elevated)}
.rz-med img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none;-webkit-user-select:none;pointer-events:none}
.rz-med .rz-main{transform:scale(1.04);transition:transform .8s var(--e-out)}
.rz-med .rz-alt{opacity:0;transition:opacity .6s var(--e-out)}
.rz-med .badge{left:auto;right:12px;top:12px;bottom:auto}
.rz-chip{position:absolute;left:12px;bottom:12px;z-index:3;display:flex;gap:var(--space-3);align-items:baseline;max-width:calc(100% - 24px);padding:7px 12px;border-radius:var(--r-pill);background:var(--surface-media-label);color:var(--text-on-media);font-size:var(--fs-ui-s);line-height:1.3;opacity:0;pointer-events:none;transition:opacity var(--t-std) var(--e-out)}
.rz-chip b{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rz-chip span{flex:none;font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:0;color:var(--text-secondary)}
@media (hover:hover){
  .rz-row:hover .rz-card{background:var(--surface-elevated)}
  .rz-row:hover .rz-alt{opacity:1}
  .rz-row:hover .rz-main{transform:none}
  .rz-row:hover .rz-tags .tag:first-child{border-color:var(--accent);color:var(--accent)}
}
.rz-row:has(:focus-visible) .rz-card{background:var(--surface-elevated)}
.rz-row:has(:focus-visible) .rz-tags .tag:first-child{border-color:var(--accent);color:var(--accent)}
/* sterowanie widoczne tylko w trybie żywym */
.rz-ctl,.rz-hint{display:none}
.rz-live .rz-ctl{position:absolute;right:0;top:0;z-index:100000;display:flex}
.rz-seg{display:flex;border-radius:var(--r-pill);background:var(--surface-raised)}
.rz-seg button{min-height:44px;padding:0 var(--space-5);border:0;border-radius:var(--r-pill);background:none;color:var(--text-secondary);font:inherit;font-size:var(--fs-ui-s);cursor:pointer;transition:background-color var(--t-ui),color var(--t-ui)}
.rz-seg button:hover{color:var(--text-primary)}
.rz-seg button[aria-pressed=true]{background:var(--surface-elevated);color:var(--text-primary)}
.rz-live:not(.rz-ord) .rz-hint{display:block;position:absolute;left:0;top:16px;color:var(--text-secondary);pointer-events:none}
.rz-live.rz-mob .rz-hint{display:none}   /* telefon: brak miejsca obok przełącznika, a na dotyku i tak bez przeciągania */
/* tryb żywy: wiersze bez własnego pudełka, karty i opisy układa skrypt */
.rz-live{display:block;transition:height .9s var(--e-out)}
.rz-live .rz-row{display:contents}
.rz-live .rz-card{position:absolute;left:0;top:0;cursor:grab;touch-action:none;will-change:transform;user-select:none;-webkit-user-select:none;
  transition:transform .9s var(--e-out),width .9s var(--e-out),background-color var(--t-std) var(--e-out)}
.rz-live .rz-card.drag{cursor:grabbing;outline:1px solid var(--accent);outline-offset:0;background:var(--surface-elevated)}
.rz-live.rz-ord .rz-card{cursor:pointer}
.rz-live .rz-info{position:absolute;left:0;top:0;padding-bottom:var(--space-2);transition:opacity var(--t-enter) var(--e-out)}
.rz-live:not(.rz-ord) .rz-info{opacity:0;pointer-events:none;visibility:hidden;transition-delay:0s!important}
.rz-live:not(.rz-ord) .rz-chip{opacity:1}
.rz-live.rz-ord:not(.rz-mob) .rz-info:not(.on){opacity:.32}
@media (hover:none){.rz-live .rz-card{touch-action:auto;cursor:pointer}}
@media (max-width:767px){
  .rz{gap:var(--space-12)}
  .rz-row{grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
  .rz-row .rz-card{order:-1}
}
/* stany listy do pokazania na planszy „Komponenty” (data-state — te same wartości co przy najechaniu i w trybie żywym) */
.rz-row[data-state=hover] .rz-card{background:var(--surface-elevated)}
.rz-row[data-state=hover] .rz-alt{opacity:1}
.rz-row[data-state=hover] .rz-main{transform:none}
.rz-row[data-state=hover] .rz-tags .tag:first-child{border-color:var(--accent);color:var(--accent)}
.rz-card[data-state=scatter] .rz-chip{opacity:1}
.rz-card[data-state=drag]{outline:1px solid var(--accent);outline-offset:0;background:var(--surface-elevated)}
.rz-info[data-state=dim]{opacity:.32}

/* Usługi — przewijanie poziome „Pchanie” + kapsuła (2026-10-28, wcześniej „Zachodzi” z 2026-10-23): #hs-wrap ma wysokość N ekranów (JS),
   .hs-pin przypięty na cały ekran pod paskiem. JS przesuwa osobno zdjęcia i elementy tekstu (opis ruchu przy mountHScroll): zdjęcie pcha
   tekst kaskadą, za nim wjeżdża następna usługa. Karty leżą na sobie, więc w trybie przypiętym są przezroczyste i nie łapią kliknięć —
   łapią je tylko przesuwane elementy. Tekst bez wcięcia, w linii nagłówka sekcji.
   .nopin (≤ 900 px, niskie okno, reduced motion, ramka canvasu) = usługi jedna pod drugą, bez kapsuły. */
.hs-wrap{position:relative}
.hs-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;padding-top:98px;overflow:hidden}
.hs-head{margin-bottom:0;padding-bottom:var(--space-6)}
.hs-stage{position:relative;flex:1;min-height:0}
.hs-p{position:absolute;inset:0;background:var(--surface-default);will-change:transform}
.hs-in{height:100%;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-12);padding-block:var(--space-10)}   /* oddech karty od góry i dołu (prośba właściciela 2026-10-23) */
.hs-text{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:var(--space-6);min-width:0;padding:var(--space-4) 0}
.hs-sec:not(.nopin) .hs-p{background:none;pointer-events:none}
.hs-sec:not(.nopin) .hs-title,.hs-sec:not(.nopin) .hs-bt > *,.hs-sec:not(.nopin) .hs-med{pointer-events:auto;will-change:transform}
.hs-bt{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5)}
.hs-desc{max-width:var(--measure-m)}
.hs-med{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--surface-raised);min-height:0}
.hs-med video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* kapsuła: ciemna pigułka jak przycisk Menu; znacznik „Kropla miękka” rysuje SVG pod przyciskami (biała kropla, szare nazwy, czarne nazwy
   przycięte do kropli). Bez JS (.hs-cap bez .is-drop) przyciski pokazują własny napis. Obrys fokusu tylko z klawiatury. */
.hs-nav{display:flex;justify-content:center;padding:var(--space-8) var(--gutter) var(--space-10)}
.hs-cap{position:relative;display:flex;gap:2px;padding:6px;border-radius:var(--r-pill);background:var(--c-graphite-900);box-shadow:0 8px 24px -12px rgba(var(--c-black-rgb),.35)}
.hs-cap-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hs-cap:not(.is-drop) .hs-cap-svg{display:none}
.hs-drop{fill:var(--c-white)}
.hs-cap-svg text{font-family:var(--font-sans);font-size:var(--fs-ui-s);letter-spacing:-.02em}
.hs-tg text{fill:var(--c-grey-500);transition:fill var(--t-ui) var(--e-ui)}
.hs-tg text.hov{fill:var(--c-white)}
.hs-tb text{fill:var(--c-black)}
.hs-cb{position:relative;z-index:1;min-height:40px;padding:0 var(--space-5);border:0;border-radius:var(--r-pill);background:none;font:inherit;font-size:var(--fs-ui-s);letter-spacing:-.02em;color:var(--c-grey-500);cursor:pointer}
.hs-cap.is-drop .hs-cb{color:transparent}
.hs-cb:focus{outline:none}
.hs-cb:focus-visible{outline:2px solid var(--c-lime);outline-offset:2px}
.hs-sec.nopin .hs-pin{position:static;height:auto;padding-top:0;overflow:visible}
.hs-sec.nopin .hs-head{margin-bottom:var(--space-head);padding-bottom:0}
.hs-sec.nopin .hs-stage{display:flex;flex-direction:column;gap:var(--space-16)}
.hs-sec.nopin .hs-p{position:relative;inset:auto;transform:none;box-shadow:none;will-change:auto}
.hs-sec.nopin .hs-in{height:auto;min-height:480px;padding-block:0}
.hs-sec.nopin .hs-nav{display:none}
@media (max-width:900px){
  .hs-sec.nopin .hs-stage{gap:var(--space-12)}
  .hs-sec.nopin .hs-in{grid-template-columns:minmax(0,1fr);gap:var(--space-4);min-height:0}
  .hs-sec.nopin .hs-text{padding:0}
  .hs-sec.nopin .hs-med{order:-1;aspect-ratio:3/2;max-height:50vh}
  .hs-title{font-size:var(--fs-heading-s)}
}

/* Wyszukiwarka usług w Kontakcie (2026-10-19): pole „Czego potrzebujesz?” → pasujące usługi zaznaczają się w formularzu obok.
   .sz-lime na limonkowym bloku (czerń), .sz-dark w lewej kolumnie /kontakt (biel). */
.sz{display:flex;flex-direction:column;gap:var(--space-3);max-width:var(--measure-m)}
.sz-q{border-bottom:2px solid currentColor}
.sz-q:focus-within{box-shadow:0 2px 0 currentColor}
.sz-q input{width:100%;height:56px;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;font-size:var(--fs-heading-s);letter-spacing:-.04em;font-weight:500}
.sz-q input:focus{outline:none}
.sz-res{min-height:2.9em;max-width:var(--measure-s)}
.sz-lime{color:var(--text-on-accent)}
.sz-lime .sz-k,.sz-lime .sz-res,.sz-lime .sz-q input::placeholder{color:var(--text-on-accent-secondary)}
.sz-dark{color:var(--text-primary)}
.sz-dark .sz-k,.sz-dark .sz-res,.sz-dark .sz-q input::placeholder{color:var(--text-secondary)}

/* Dlaczego 67 — wariant O „Latarka” (2026-10-21, docs/dlaczego-67/): sygnet prawie niewidoczny, plama światła (maska radialna) za kursorem;
   w świetle limonkowe cyferki (wzorzec SVG z kafelkiem z dlaczego-67.js) i szklany obrys: biała krawędź + limonkowa poświata (feGaussianBlur).
   --mx/--my/--on ustawia skrypt. Telefon: znak i tekst jedno pod drugim. */
.d67{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,96px);align-items:end}
.d67-left{display:grid;gap:clamp(20px,2vw,32px);min-width:0}
.d67-lamp{position:relative;display:grid;width:100%;max-width:700px;user-select:none;--mx:-1000px;--my:50%;--on:0;--r:clamp(160px,22vw,330px)}
.d67-lamp>svg{grid-area:1/1;display:block;width:100%;height:auto;overflow:visible}
.d67-base path{fill:rgba(var(--c-white-rgb),.035);stroke:rgba(var(--c-white-rgb),.07);stroke-width:1;vector-effect:non-scaling-stroke}
.d67-lamp.d67-static .d67-base path{fill:rgba(var(--c-white-rgb),.16)}   /* reduced motion: znak widoczny bez światła */
.d67-lit{opacity:var(--on);transition:opacity .5s var(--e-out);
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),#000 0%,#000 32%,rgba(0,0,0,.55) 66%,transparent 100%);
  mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),#000 0%,#000 32%,rgba(0,0,0,.55) 66%,transparent 100%)}
.d67-f6{fill:url(#d67-p6)}.d67-f7{fill:url(#d67-p7)}
.d67-edge{fill:none;stroke:rgba(var(--c-white-rgb),.8);stroke-width:1.1;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.d67-glow{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-opacity:.5;vector-effect:non-scaling-stroke;filter:url(#d67-blur);stroke-linejoin:round}
.d67-txt{display:grid;gap:var(--space-4);min-width:0}
.d67-txt h2{margin-bottom:var(--space-2)}
.d67-txt p{max-width:var(--measure-m)}
@media (max-width:767px){.d67{grid-template-columns:minmax(0,1fr);gap:40px;align-items:start}.d67-lamp{max-width:340px;--r:clamp(120px,38vw,180px)}}
@media (prefers-reduced-motion:reduce){.d67-lit{transition:none}}
/* przejście „Rozsypanie”: warstwa stała nad stroną (pod nagłówkiem z-index 50), tylko między kartami O studio a znakiem; poza tym [hidden] */
.d67-ov{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}

/* Kursor „Magnes” (2026-10-21, cursor.js): kropka pod wskaźnikiem + ramka 36 px (jak .oa-arr), która dogania wskaźnik,
   a blisko kafelka ze strzałką w .btn i .oa-card (16 px, puszcza po 32 px) dokuje do niego i rysuje jego stan hover. Tylko mysz/gładzik
   ≥ 901 px, bez reduced motion; nad polami formularza kursor systemowy. html.s67-cur-on = kursor działa (cursor.js). */
html.s67-cur-on,html.s67-cur-on *{cursor:none!important}
html.s67-cur-on input,html.s67-cur-on textarea,html.s67-cur-on select,html.s67-cur-on [contenteditable=true]{cursor:auto!important}
.s67-cur{position:fixed;left:0;top:0;z-index:100001;pointer-events:none;transition:opacity var(--t-ui)}
.s67-cur.is-out,.s67-cur.is-native{opacity:0}
.s67-cur-dot{position:absolute;left:0;top:0;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--accent);transition:opacity var(--t-ui)}
.s67-cur-sq{position:absolute;left:0;top:0;display:grid;place-items:center;width:var(--cur-w,36px);height:var(--cur-h,36px);margin:calc(var(--cur-h,36px)/-2) 0 0 calc(var(--cur-w,36px)/-2);
  border-radius:var(--r-sm);border:1px solid var(--border-strong);background:transparent;color:var(--cur-fg,var(--text-on-accent));
  transition:width var(--t-std) var(--e-out),height var(--t-std) var(--e-out),margin var(--t-std) var(--e-out),background-color var(--t-ui),border-color var(--t-ui)}
.s67-cur-sq svg{width:var(--cur-ico,13px);height:var(--cur-ico,13px);opacity:0;transition:opacity var(--t-ui),transform var(--t-ui) var(--e-ui)}
.s67-cur.is-link .s67-cur-sq{border-color:var(--accent)}
.s67-cur.is-dock .s67-cur-sq{background:var(--cur-bg,var(--accent));border-color:var(--cur-bg,var(--accent))}
.s67-cur.is-dock .s67-cur-sq svg{opacity:1}
.s67-cur.is-dock.is-down .s67-cur-sq svg{transform:translate(2px,-2px)}
.s67-cur.is-dock .s67-cur-dot{opacity:0}
/* jasne tło pod wskaźnikiem (biel Usług, szare karty, limonka Kontaktu, „Efekt” realizacji): kursor ciemny — cursor.js liczy
   luminancję tła; .is-flip na dwie klatki wyłącza przejście kolorów, więc zmiana jest natychmiastowa. Stan dokowania bez zmian. */
.s67-cur.is-light .s67-cur-dot{background:var(--c-black)}
.s67-cur.is-light:not(.is-dock) .s67-cur-sq{border-color:rgba(var(--c-black-rgb),.44)}
.s67-cur.is-light.is-link .s67-cur-sq{border-color:var(--c-black)}
.s67-cur.is-flip .s67-cur-sq{transition-property:width,height,margin}
/* hover kafelka zostaje własny (karta/przycisk jak bez kursora); zadokowana ramka ma te same kolory i leży dokładnie na nim */
/* plansza Komponenty: stany kursora pokazane statycznie */
.s67-cur-static{position:relative;display:block;width:56px;height:56px;opacity:1}
.s67-cur-static .s67-cur-sq,.s67-cur-static .s67-cur-dot{left:50%;top:50%}
/* ===== /uslugi/ — projekt T (canvas „Robocze — Usługi T”, UslugiT.dc.html, 2026-10-27; źródło: docs/uslugi-projekt-t/canvas-v206/) =====
   Układ wg kstoimenov.com/services w design systemie 67studio: hero z taśmą kadrów, wykaz usług, sekcje ze znakiem T przeplatane kadrami 16:9,
   Proces (partial, bez przypięcia), zakończenie. Ruch: teksty hero — motion.js (.rv / .rv-rise, opóźnienia niżej), taśma — uslugi-tasma.js (.is-in, transform toru).
   Lead 16 px na każdej szerokości (decyzja właściciela 2026-10-27). Znak T: górna część „t” z logotypu, 20 px, obrót o 90° w kolejnych sekcjach. */
.ut-mark{display:block;width:var(--ut-mark,20px);aspect-ratio:68/67.8;color:var(--accent);flex:none}
.ut-mark svg{display:block;width:100%;height:100%}
.ut-rot-1 svg{transform:rotate(90deg)}.ut-rot-2 svg{transform:rotate(180deg)}.ut-rot-3 svg{transform:rotate(270deg)}
.ut-ph{position:relative;margin:0;background:var(--surface-raised);border-radius:var(--r-lg);overflow:hidden}
.ut-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* hero */
.ut-hero{padding-top:var(--space-page-top)}
.ut-top{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin-bottom:var(--space-head);color:var(--text-secondary)}   /* okruszki → hasło: 64 px przy 1440, 40 na telefonie (2026-10-27: „żeby oddychało”, było 24) */
.ut-top p,.ut-top h1{margin:0;color:inherit}
.ut-top a{color:inherit}
.ut-display{margin:0}
.ut-display .muted{display:block}
/* układ B „Na linii” (decyzja właściciela 2026-10-27): hasło 7/12, lead + przyciski 5/12 dosunięte do dołu — przyciski kończą się na wysokości ostatniej linii hasła */
.ut-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap-col);align-items:end}
.ut-intro .ut-display{grid-column:1/8}
.ut-body{grid-column:8/13;display:flex;flex-direction:column;gap:var(--space-6);padding-bottom:.6em}
.ut-lead{margin:0;color:var(--text-hero-lead);font-size:var(--fs-body);max-width:var(--measure-l)}
/* < 1200 px prawa kolumna byłaby wyższa niż hasło (przyciski się zawijają, hasło na 3 linie): lead i przyciski pod hasłem, jak w układzie A */
@media (max-width:1199px){.ut-intro .ut-display,.ut-body{grid-column:1/13}.ut-body{margin-top:var(--space-10);padding-bottom:0}.ut-lead{max-width:var(--measure-m)}}
.ut-cta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-4) var(--space-8)}
.ut-hero .ut-display{--d:.15s}
.ut-hero .ut-lead{--d:.7s}
.ut-hero .ut-cta{--d:.8s}
/* taśma: start 9 vw za lewą krawędzią (--ut-x w vw, czyta też uslugi-tasma.js); druga kopia kadrów daje pętlę bez przeskoku */
.ut-strip{--ut-x:-9;margin-top:var(--space-block)}
.ut-track{display:flex;gap:var(--space-3);width:max-content;transform:translateX(calc(var(--ut-x) * 1vw))}
.ut-strip .ut-ph{height:clamp(220px,25vw,360px);flex:none}   /* 360 px przy 1440 (decyzja właściciela 2026-10-27, było 300) — dół taśmy nadal w pierwszym ekranie 1440 × 900 */
.ut-w1{width:17vw}.ut-w2{width:31vw}.ut-w3{width:15vw}.ut-w4{width:33vw}.ut-w5{width:19vw}.ut-w6{width:27vw}
.ut-ph-in{position:absolute;inset:0}
.ut-track>:nth-child(6n+1){--i:0}.ut-track>:nth-child(6n+2){--i:1}.ut-track>:nth-child(6n+3){--i:2}
.ut-track>:nth-child(6n+4){--i:3}.ut-track>:nth-child(6n+5){--i:4}.ut-track>:nth-child(6n+6){--i:5}
/* wejście taśmy „Miękka przesłona” (decyzja właściciela 2026-10-27, zamiast twardej odsłony od zera na e-frame): uslugi-tasma.js dodaje .is-in po tekstach;
   kadr odsłania się od 35 % wysokości ku górze na krzywej e-out (1,6 s) z zaokrąglonymi rogami i przenika (0,9 s), obraz w środku 108 → 100 % (2,2 s), co 120 ms */
.anim .ut-track{will-change:transform}
.anim .ut-strip .ut-ph{clip-path:inset(0 0 0 0 round var(--r-lg));transition:clip-path 1.6s var(--e-out) calc(var(--i,0) * 120ms),opacity .9s var(--e-out) calc(var(--i,0) * 120ms)}
.anim .ut-strip .ut-ph-in{transition:transform 2.2s var(--e-out) calc(var(--i,0) * 120ms)}
.anim .ut-strip:not(.is-in) .ut-ph{clip-path:inset(35% 0 0 0 round var(--r-lg));opacity:0}
.anim .ut-strip:not(.is-in) .ut-ph-in{transform:scale(1.08)}
/* wykaz usług */
.ut-index{padding-top:var(--space-section-s)}
.ut-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap-col)}
.ut-list ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--border-subtle)}
/* wiersz wykazu (bez numerów od 2026-10-27): po wskazaniu nazwa i strzałka limonkowe, strzałka zjeżdża o 4 px (↗ przy „Nie wiesz…” o 3 px w prawo i w górę) */
.ut-row{display:grid;grid-template-columns:minmax(0,1fr) 20px;align-items:center;gap:var(--space-4);min-height:76px;border-bottom:1px solid var(--border-subtle);color:var(--text-primary);text-decoration:none}
.ut-row .t-title{transition:color var(--t-ui) var(--e-ui)}
.ut-row svg{width:16px;height:16px;justify-self:end;color:var(--text-secondary);transition:color var(--t-ui) var(--e-ui),transform var(--t-std) var(--e-out)}
.ut-row.is-quiet .t-title{color:var(--text-secondary)}
.ut-row:hover .t-title,.ut-row:focus-visible .t-title,.ut-row:hover svg,.ut-row:focus-visible svg{color:var(--accent)}
.ut-row:hover svg,.ut-row:focus-visible svg{transform:translateY(4px)}
.ut-row.is-quiet:hover svg,.ut-row.is-quiet:focus-visible svg{transform:translate(3px,-3px)}
@media (prefers-reduced-motion:reduce){.ut-row:hover svg,.ut-row:focus-visible svg{transform:none}}
/* sekcja usługi */
.ut-svc{padding:var(--space-section-s) 0;scroll-margin-top:var(--space-20)}
.ut-svc-head{display:flex;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-head)}
/* znak przy pierwszej linii nagłówka (heading-l: interlinia 1), także gdy nagłówek łamie się na telefonie */
.ut-svc-head .ut-mark{margin-top:calc((var(--fs-heading-l) - var(--ut-mark,20px)) / 2)}
.ut-svc-head h2{margin:0}
.ut-cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap-col)}
.ut-l{grid-column:1/6}
.ut-r{grid-column:7/13}
.ut-desc{margin:0;color:var(--text-secondary);max-width:var(--measure-m)}
.ut-l .btn{margin-top:var(--space-10)}
.ut-items{list-style:none;margin:0;padding:0;border-top:1px solid var(--border-subtle)}
.ut-items li{display:grid;grid-template-columns:12px minmax(0,1fr);gap:var(--space-4);padding:var(--space-5) 0;border-bottom:1px solid var(--border-subtle)}
.ut-items li::before{content:"";width:12px;height:2px;margin-top:calc(var(--fs-title) * 1.15 / 2 - 1px);background:var(--accent);border-radius:1px}
.ut-items p{margin:0}
.ut-items .t-ui-s{margin-top:var(--space-1);color:var(--text-secondary)}
.ut-big{aspect-ratio:16/9}
/* pakiety stron: grafitowe karty, środkowa limonkowa z czarnym przyciskiem */
.ut-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-block)}
/* wiersze kart (nagłówek, opis, cena, lista, przycisk) wyrównane między kartami przez subgrid */
.ut-plan{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:var(--space-5);padding:var(--space-8);background:var(--surface-raised);border-radius:var(--r-lg)}
.ut-plan-main{background:var(--surface-accent);color:var(--text-on-accent);--focus-ring:var(--text-on-accent)}
.ut-plan-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:30px}
.ut-plan h3,.ut-plan p{margin:0}
.ut-plan-main .tag{border-color:var(--text-on-accent);color:var(--text-on-accent)}
.ut-plan-desc{color:var(--text-secondary);max-width:32ch}
.ut-plan-price{display:flex;align-items:baseline;gap:var(--space-2);padding:var(--space-5) 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.ut-plan-price .t-ui-s{color:var(--text-secondary)}
.ut-plan-main .ut-plan-desc,.ut-plan-main .ut-plan-price .t-ui-s{color:var(--text-on-accent-secondary)}
.ut-plan-main .ut-plan-price{border-color:color-mix(in srgb,var(--text-on-accent) 18%,transparent)}
.ut-plan-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.ut-plan-list li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:var(--space-3);align-items:start}
.ut-plan-list svg{width:16px;height:16px;margin-top:2px;color:var(--accent)}
.ut-plan-main .ut-plan-list svg{color:var(--text-on-accent)}
.ut-plan .btn{margin-top:var(--space-4);align-self:end}
.ut-plans-note{margin:var(--space-5) 0 0;color:var(--text-secondary)}
/* Witryna gadżetów z Macmy (zamiast kadru 16:9 w Gadżetach). Zdjęcia Macmy mają białe tło: multiply nad --c-grey-50 daje jednolite szare pole. --c-grey-50 celowo wprost: multiply wymaga jasnego pola niezależnie od motywu sekcji. */
.ut-gd-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);margin:0 0 var(--space-6);color:var(--text-secondary)}
.ut-gd-head p{margin:0}
/* karuzela kart (decyzja właściciela 2026-10-29, wzorzec slidera „O studio” .oa-grid/.oa-hint): poziomy pasek z przyciąganiem do karty,
   wychodzi o margines strony, następna karta wystaje; pod spodem pasek postępu i „Przesuń” / „Na początek” (gadzety-slider.js) */
.ut-gd-grid{list-style:none;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);display:flex;gap:var(--space-4);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}
.ut-gd-grid::-webkit-scrollbar{display:none}
.ut-gd-grid>li{flex:0 0 clamp(220px,17vw,300px);scroll-snap-align:start}
.ut-gd-hint{display:flex}
.ut-gd-hint[hidden]{display:none}
.ut-gd-card{position:relative;display:flex;flex-direction:column;gap:var(--space-1);color:var(--text-primary)}
.ut-gd-img{position:relative;display:block;aspect-ratio:1;margin-bottom:var(--space-3);background:var(--c-grey-50);border-radius:var(--r-lg);overflow:hidden}
/* slider zdjęć (2026-10-29): natywny pasek z przyciąganiem do kadru; strzałki i kreski steruje gadzety-slider.js */
.ut-gd-track{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.ut-gd-track::-webkit-scrollbar{display:none}
.ut-gd-slide{position:relative;flex:0 0 100%;height:100%;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always}
.ut-gd-slide img{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain;mix-blend-mode:multiply;transition:transform .6s var(--e-out)}
.ut-gd-slide.is-life img{inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
.ut-gd-card:hover .ut-gd-slide img,.ut-gd-card:has(.ut-gd-link:focus-visible) .ut-gd-slide img{transform:scale(1.04)}
.ut-gd-link{display:flex;flex-direction:column;gap:var(--space-1);color:inherit;text-decoration:none}
.ut-gd-tag{position:absolute;left:var(--space-3);top:var(--space-3);z-index:1;min-height:26px;padding:2px 10px;border-color:transparent;background:var(--surface-media-label);color:var(--text-on-media)}
/* strzałki jak .oa-arr: pojawiają się przy wskazaniu karty lub fokusie z klawiatury; na dotyku przesuwa się palcem */
.ut-gd-arr{position:absolute;top:50%;z-index:1;display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--border-subtle);border-radius:var(--r-sm);background:var(--surface-default);color:var(--text-primary);cursor:pointer;opacity:0;transform:translate(var(--gd-dx,0),-50%);transition:opacity var(--t-ui) var(--e-ui),transform var(--t-ui) var(--e-ui),background-color var(--t-ui) var(--e-ui),color var(--t-ui) var(--e-ui)}
.ut-gd-arr svg{width:13px;height:13px}
.ut-gd-prev{left:var(--space-3);--gd-dx:-4px}
.ut-gd-next{right:var(--space-3);--gd-dx:4px}
.ut-gd-card:hover .ut-gd-arr,.ut-gd-card:focus-within .ut-gd-arr{opacity:1;--gd-dx:0px}
.ut-gd-arr:hover,.ut-gd-arr:focus-visible{background:var(--text-primary);border-color:var(--text-primary);color:var(--surface-default)}
.ut-gd-card .ut-gd-arr[disabled]{visibility:visible;opacity:0;cursor:default;pointer-events:auto}   /* niewidoczny, ale połyka klik — inaczej trafia w link pod spodem */
.ut-gd-arr[hidden],.ut-gd-dots[hidden]{display:none}
@media (hover:none){.ut-gd-arr{display:none}}
/* kreski na plakietce jak „Dostępny od ręki”: 16 × 2 px, odstęp 4 px, aktywna pełna */
.ut-gd-dots{position:absolute;left:50%;bottom:var(--space-3);z-index:1;display:flex;padding:0 6px;border-radius:var(--r-pill);background:var(--surface-media-label);transform:translateX(-50%)}
.ut-gd-dots button{display:grid;place-items:center;width:20px;height:24px;padding:0;border:0;background:none;cursor:pointer}
.ut-gd-dots button::before{content:"";width:16px;height:2px;border-radius:1px;background:var(--text-on-media);opacity:.4;transition:opacity var(--t-ui) var(--e-ui)}
.ut-gd-dots button[aria-current=true]::before{opacity:1}
.ut-gd-more{margin-top:var(--space-block)}
/* /uslugi/ (prośba właściciela 2026-10-29): od Gadżetów do Drona strona przechodzi płynnie w jasny motyw (--c-white), od Oprogramowania wraca do czerni.
   page-uslugi.js ustawia na <main> --lp 0…1; mieszają się role kolorów między motywem ciemnym a jasnym (jasne wartości jak w .light), więc komponenty
   przechodzą razem z tłem. Limonka nie występuje na jasnym tle: akcent, przycisk główny i obrys fokusu idą w czerń. Podwójna klasa wygrywa z .light
   (dodawaną od połowy przejścia dla nagłówka i reguł „.light …”). */
.fx-th.fx-th{--lpp:calc(var(--lp,0) * 100%);
  --surface-default:color-mix(in srgb,var(--c-white) var(--lpp),var(--c-black));
  --surface-raised:color-mix(in srgb,var(--c-grey-100) var(--lpp),var(--c-graphite-900));
  --surface-elevated:color-mix(in srgb,var(--c-grey-100) var(--lpp),var(--c-graphite-800));
  --text-primary:color-mix(in srgb,var(--c-black) var(--lpp),var(--c-white));
  --text-secondary:color-mix(in srgb,var(--c-grey-700) var(--lpp),var(--c-grey-500));
  --text-tertiary:color-mix(in srgb,var(--c-grey-500) var(--lpp),var(--c-grey-700));
  --border-subtle:color-mix(in srgb,rgba(var(--c-black-rgb),.18) var(--lpp),rgba(var(--c-white-rgb),.16));
  --border-strong:color-mix(in srgb,rgba(var(--c-black-rgb),.44) var(--lpp),rgba(var(--c-white-rgb),.36));
  --accent:color-mix(in srgb,var(--c-black) var(--lpp),var(--c-lime));
  --focus-ring:color-mix(in srgb,var(--c-black) var(--lpp),var(--c-lime));
  --action-primary:color-mix(in srgb,var(--c-black) var(--lpp),var(--c-lime));
  --action-primary-text:color-mix(in srgb,var(--c-white) var(--lpp),var(--c-black));
  --cover:var(--surface-default);
  background:var(--surface-default);color:var(--text-primary)}
@media (prefers-reduced-motion:reduce){.ut-gd-slide img,.ut-gd-arr,.ut-gd-dots button::before{transition:none}}
.ut-plan-top .tag{white-space:nowrap}
@media (max-width:1199px){.ut-plans{grid-template-columns:minmax(0,1fr)}.ut-plan .btn{justify-self:start;width:auto;min-width:300px}}
@media (max-width:640px){.ut-plan .btn{justify-self:stretch;width:100%;min-width:0}}
.ut-plan-main .btn{background:var(--text-on-accent);color:var(--text-primary)}
.ut-plan-main .btn-ico{background:var(--action-primary);color:var(--action-primary-text)}
/* Proces bez przypięcia i zakończenie */
.ut-proc{padding:var(--space-section) 0 var(--space-section-s)}
.ut-proc .pc-marker.snap{transition:left .45s var(--e-out),width .45s var(--e-out),top .45s var(--e-out),height .45s var(--e-out)}
.ut-end{padding:var(--space-section-s) 0 var(--space-section)}
.ut-end h2{margin:0}
.ut-end-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-8);margin-top:var(--space-block);padding-top:var(--space-6);border-top:1px solid var(--border-subtle)}
.ut-end-row p{margin:0;color:var(--text-secondary)}
.ut-end-row a{color:inherit}
@media (max-width:900px){
  .ut-l,.ut-r{grid-column:1/13}
  .ut-r{margin-top:var(--space-12)}
  .ut-list,.ut-plans{grid-template-columns:minmax(0,1fr)}
  .ut-list ul+ul{border-top:0}
  .ut-strip{--ut-x:-30}
  .ut-strip .ut-ph{height:240px}
  .ut-w1,.ut-w3,.ut-w5{width:44vw}.ut-w2,.ut-w4,.ut-w6{width:72vw}
  .ut-svc-head{--ut-mark:14px;gap:var(--space-3)}
  .ut-end-row{flex-direction:column;align-items:flex-start}
}
@media (max-width:600px){.ut-gd-grid>li{flex-basis:72%}}   /* telefon: jedna karta + zapowiedź następnej */
/* dotyk: palec przesuwa karuzelę, nie zdjęcia (decyzja właściciela 2026-10-29); zdjęcie zmienia stuknięcie w kreskę — wyższe pole */
@media (hover:none){.ut-gd-track{overflow-x:hidden}.ut-gd-dots button{height:32px}}

/* ===== Katalog gadżetów /gadzety/ (.kt-*) — makieta zaakceptowana 2026-10-30 (canvas: Gadzety-C.dc.html, wariant C; spec docs/superpowers/specs/2026-10-29-katalog-gadzetow-design.md).
   Lista: po lewej przyklejony pasek filtrów 260 px z własnym przewijaniem, po prawej wyszukiwarka, licznik, sortowanie, chipy, siatka kart (4 kolumny ≥ 1280, 3 od 1024, 2 poniżej) i paginacja.
   Wyszukiwarka q jest w formularzu filtrów (jeden GET bez JS); na szerokim ekranie formularz ma display:contents, więc pole staje nad wynikami.
   Bez JS filtry wysyła przycisk „Pokaż” (GET), a na telefonie stoją zwykłym blokiem pod wynikami (nad wynikami przesuwałyby listę przy wczytaniu JS — CLS). Z JS (katalog.js dodaje .kt-js) działają na żywo,
   „Pokaż” znika, a poniżej 1024 px filtry chowają się w panel od dołu (.kt-panel.is-open), otwierany przyciskiem „Filtry (N)”.
   Motyw jasny (decyzja właściciela 2026-10-29: „podstrona gadżetów biała”): sekcje z klasą .light — limonka tylko w kafelku przycisku na czerni; stopka zostaje ciemna, pigułka menu sama przechodzi w jasną (.on-light).
   Karta (wariant C): szary kafelek 4:5, zdjęcie z mieszaniem multiply na środku, nazwa i cena w lewym dolnym rogu, maks. 3 kwadraty kolorów pionowo po prawej, plakietka w prawym górnym rogu.
   Kolor kwadratu z atrybutu style="--kt-c:#hex" (CSP). ===== */
.kt-head .phead-row{margin-top:0}
/* karuzela kategorii nad listą (wariant D, właściciel 2026-10-30): wszystkie kategorie główne, kafelek = zdjęcie produktu na --c-grey-50 (multiply), nazwa,
   liczba modeli. Widać ok. 9,5 kafelka (ucięty sygnalizuje dalszy ciąg); strzałki ≥ 1024 px odkrywa katalog.js, poniżej przesuwanie palcem.
   Bieżąca kategoria w kolorze marki jak przyciski i checkboxy (--c-lime-100/800). */
.ktk{padding-bottom:var(--space-10)}
.ktk-karuzela{position:relative;container-type:inline-size;--ktk-gap:var(--space-4);--ktk-kol:calc((100cqw - 9 * var(--ktk-gap)) / 9.5)}
.ktk-row{display:grid;grid-auto-flow:column;grid-auto-columns:var(--ktk-kol);gap:var(--ktk-gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.ktk-row::-webkit-scrollbar{display:none}
.ktk-kat{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-3);color:var(--text-primary);text-align:center;text-decoration:none;scroll-snap-align:start}
.ktk-kat:focus-visible{outline:none}
.ktk-img{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:var(--r-lg);background:var(--c-grey-50);overflow:hidden;transition:background-color var(--t-ui) var(--e-ui)}
.ktk-img img{position:absolute;inset:12%;width:76%;height:76%;object-fit:contain;mix-blend-mode:multiply;color:transparent;transition:transform .6s var(--e-out)}
.ktk-kat:hover .ktk-img{background:var(--c-grey-100)}
.ktk-kat:hover .ktk-img img{transform:scale(1.06)}
.ktk-kat:focus-visible .ktk-img{outline:2px solid var(--focus-ring);outline-offset:-2px}
.ktk-name{font-size:var(--fs-ui-s);font-weight:500;line-height:1.3}
.ktk-name small{display:block;margin-top:2px;color:var(--text-secondary);font-family:var(--font-mono);font-size:var(--fs-mono);font-weight:400}
.ktk-kat[aria-current=true] .ktk-img{background:var(--c-lime-100);box-shadow:inset 0 0 0 1px var(--c-lime-800)}
/* strzałki na środku wysokości zdjęć (kolumna = --ktk-kol), wysunięte do połowy poza krawędź karuzeli */
/* zaznaczona kategoria: ✕ w rogu zdjęcia — klik w kafelek wraca do wszystkich gadżetów */
.ktk-x{position:absolute;top:var(--space-2);right:var(--space-2);z-index:1;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--c-lime-800);color:var(--c-lime-100)}
.ktk-x svg{width:10px;height:10px}
/* podkategorie wybranej kategorii: przyciski pod karuzelą (styl .kt-pill), poniżej 1024 px przewijane w bok */
.ktk-pod{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-6)}
.ktk-strz{position:absolute;top:calc(var(--ktk-kol) / 2);z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--border-subtle);border-radius:50%;background:var(--surface-default);color:var(--text-primary);box-shadow:0 6px 18px rgba(var(--c-black-rgb),.10);cursor:pointer;transform:translateY(-50%);transition:background-color var(--t-ui) var(--e-ui)}
.ktk-strz:hover{background:var(--c-grey-50)}
.ktk-strz svg{width:14px;height:14px}
.ktk-prev{left:-22px}
.ktk-next{right:-22px}
.ktk-strz[hidden]{display:none}
@media (max-width:1023px){
  .ktk{padding-bottom:var(--space-6)}
  .ktk-karuzela{container-type:normal}
  .ktk-row{grid-auto-columns:104px;gap:var(--space-3);margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter)}
  .ktk-strz{display:none}
  .ktk-pod{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scrollbar-width:none}
  .ktk-pod::-webkit-scrollbar{display:none}
  .ktk-pod .kt-pill{flex:none}
}
@media (prefers-reduced-motion:reduce){.ktk-img img{transition:none}.ktk-row{scroll-behavior:auto}}
   /* bez etykiety „| Katalog” nad nagłówkiem (właściciel 2026-10-30) */
.kt-head .t-lead{max-width:var(--measure-xl);margin-top:var(--space-6)}
.kt{--kt-ctl:40px;--kt-top:98px}
@media (min-width:1100px){.kt{--kt-top:var(--space-6)}}   /* pigułka menu (450 px, środek) nie zachodzi tu na kolumnę filtrów — bez pustego pasa nad przypiętymi filtrami (właściciel 2026-10-30) */
.kt-lay{display:grid;grid-template-columns:260px minmax(0,1fr);grid-template-areas:"filtry szukaj" "filtry szybkie" "filtry wyniki";column-gap:var(--space-10);align-items:start}
.kt-filtry{display:contents}
.kt-szukaj{grid-area:szukaj;position:relative;margin-bottom:var(--space-4)}
.kt-szukaj input{width:100%;height:48px;padding:0 var(--space-4) 0 44px;border:1px solid var(--border-strong);border-radius:var(--r-md);background:transparent;color:var(--text-primary);font:inherit;font-size:var(--fs-ui);outline:none;transition:border-color var(--t-ui) var(--e-ui)}
.kt-szukaj svg{position:absolute;left:16px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--text-secondary);pointer-events:none}
.kt input::placeholder{color:var(--text-tertiary);opacity:1}
.kt input:hover,.kt select:hover{border-color:var(--text-secondary)}
.kt input:focus,.kt select:focus{border-color:var(--focus-ring);box-shadow:inset 0 0 0 1px var(--focus-ring)}
.kt-panel{grid-area:filtry;position:sticky;top:var(--kt-top);max-height:calc(100vh - var(--kt-top) - var(--space-4));overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-bottom:var(--space-6)}
.kt-panel-top,.kt-panel-pokaz{display:none}
/* grupa filtra: <details> z nagłówkiem i plusem, domyślnie zwinięta */
.kt-f{padding:0}   /* bez kresek między grupami (właściciel 2026-10-30) */
.kt-f[open]{padding-bottom:var(--space-4)}
.kt-f>summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;cursor:pointer;list-style:none;color:var(--text-primary);font-weight:500}
.kt-f>summary::-webkit-details-marker{display:none}
.kt-f>summary::after{content:"+";font-size:var(--fs-title);font-weight:300;line-height:1;color:var(--text-secondary);transition:transform var(--t-ui) var(--e-ui)}
.kt-f[open]>summary::after{content:"–"}
.kt-f:not(details){padding-top:var(--space-3)}
.kt-f-list{display:grid;gap:2px}
.kt-f-list.is-scroll{max-height:240px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:var(--space-2)}
.kt-f-opt{display:flex;align-items:center;gap:var(--space-3);min-height:36px;color:var(--text-secondary);cursor:pointer;transition:color var(--t-ui) var(--e-ui)}
.kt-f-opt:hover,.kt-f-opt[aria-current=true],.kt-f-opt:has(input:checked){color:var(--text-primary)}
.kt-f-opt[aria-disabled=true]{color:var(--text-tertiary);cursor:default;pointer-events:none}
.kt-n{margin-left:auto;font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--text-secondary)}
.kt-f-opt[aria-disabled=true] .kt-n{color:inherit}
.kt-f-opt[aria-current=true] .kt-n,.kt-f-opt:has(input:checked) .kt-n{color:var(--text-primary)}
/* checkbox: zaokrąglony kwadrat, zaznaczony = jasnoszare tło + czarny „ptaszek” (rysowany obramowaniem ::after, bez obrazków — CSP) */
.kt-f-opt input[type=checkbox]{appearance:none;position:relative;flex:none;width:20px;height:20px;margin:0;border:1px solid var(--border-strong);border-radius:6px;background:var(--surface-default);cursor:pointer;transition:background-color var(--t-ui) var(--e-ui),border-color var(--t-ui) var(--e-ui)}
.kt-f-opt input[type=checkbox]::after{content:"";position:absolute;left:6.5px;top:3px;width:5px;height:10px;border:solid var(--text-primary);border-width:0 2px 2px 0;opacity:0;transform:rotate(45deg) scale(.6);transition:opacity var(--t-ui) var(--e-ui),transform var(--t-ui) var(--e-ui)}
.kt-f-opt input[type=checkbox]:checked{border-color:var(--c-lime-800);background:var(--c-lime-100)}   /* zaznaczony w kolorze marki (właściciel 2026-10-30): jasna limonka + ciemnozielony ptaszek */
.kt-f-opt input[type=checkbox]:checked::after{border-color:var(--c-lime-800)}
.kt-f-opt input[type=checkbox]:checked::after{opacity:1;transform:rotate(45deg)}
/* kolory: zaokrąglone kwadraty 28 px, zaznaczony z pierścieniem */
/* padding 6px: obwódka wybranego koloru (3px) i ramka fokusu (6px) wystają poza kropkę, a kolumna filtrów przycina overflow */
.kt-kolory{display:flex;flex-wrap:wrap;gap:var(--space-2);padding:6px}
.kt-kolor{position:relative;display:block;width:28px;height:28px;border-radius:6px;background:var(--kt-c);box-shadow:inset 0 0 0 1px var(--border-strong);cursor:pointer;transition:box-shadow var(--t-ui) var(--e-ui)}
.kt-kolor input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.kt-kolor:hover{box-shadow:inset 0 0 0 1px var(--border-strong),0 0 0 2px var(--surface-default),0 0 0 3px var(--text-secondary)}
.kt-kolor:has(input:checked){box-shadow:inset 0 0 0 1px var(--border-strong),0 0 0 2px var(--surface-default),0 0 0 3px var(--text-primary)}
.kt-kolor:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:4px}
.kt-kolor.is-zero{opacity:.25;pointer-events:none}
/* cena i ilość: pola 40 px */
.kt-cena,.kt-ile{display:flex;align-items:center;gap:var(--space-2);color:var(--text-secondary)}
.kt-cena input,.kt-ile input{width:0;flex:1 1 0;min-width:0;height:var(--kt-ctl);padding:0 var(--space-3);border:1px solid var(--border-strong);border-radius:var(--r-sm);background:transparent;color:var(--text-primary);font:inherit;font-size:var(--fs-ui-s);outline:none}
.kt-ile input{flex:0 1 140px;width:140px}
/* Nowości / Bestsellery: przyciski pod wyszukiwarką (właściciel 2026-10-30, wzór healthlabs.care); zaznaczony w kolorze marki jak checkbox filtrów */
.kt-szybkie{grid-area:szybkie;display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-6)}
.kt-pill{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-5);border:1px solid transparent;border-radius:var(--r-pill);background:var(--c-grey-50);color:var(--text-primary);font-weight:500;cursor:pointer;transition:background-color var(--t-ui) var(--e-ui),border-color var(--t-ui) var(--e-ui),color var(--t-ui) var(--e-ui)}
.kt-pill:hover{background:var(--c-grey-100)}
.kt-pill:has(input:checked),.kt-pill[aria-current=true]{border-color:var(--c-lime-800);background:var(--c-lime-100);color:var(--c-lime-800)}
.kt-pill:has(input:checked) .kt-n,.kt-pill[aria-current=true] .kt-n{color:inherit}
a.kt-pill{text-decoration:none}
a.kt-pill:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.kt-pill:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}
/* filtry działają na żywo (katalog.js, R10); przycisk Pokaż jest tylko dla przeglądarek bez JS */
.kt-pokaz{margin-top:var(--space-4)}
.kt-js .kt-pokaz{display:none}
/* przyciski na bieli: czarne, limonkowy kafelek strzałki leży na czerni (wzór .light .ub-cta) */
:is(.kt,.kp) .btn{background:var(--text-primary);color:var(--surface-default)}
:is(.kt,.kp) .btn .btn-ico,:is(.kt,.kp) .btn:hover .btn-ico,:is(.kt,.kp) .btn:focus-visible .btn-ico{background:var(--action-primary);color:var(--action-primary-text)}
/* wyniki: pasek z licznikiem i sortowaniem, chipy, siatka */
.kt-wyniki{grid-area:wyniki;min-width:0}
.kt-bar{display:flex;align-items:center;gap:var(--space-3);min-height:var(--kt-ctl);margin-bottom:var(--space-4)}
.kt-bar>p{margin-right:auto;color:var(--text-secondary)}
.kt-bar>p b{color:var(--text-primary);font-weight:500}
.kt-sort{display:flex;align-items:center;gap:var(--space-2);color:var(--text-secondary)}
.kt-sort select{height:var(--kt-ctl);padding:0 34px 0 var(--space-3);border:1px solid var(--border-strong);border-radius:var(--r-sm);color:var(--text-primary);font:inherit;font-size:var(--fs-ui-s);outline:none;cursor:pointer;appearance:none;
  background:linear-gradient(45deg,transparent 50%,var(--text-secondary) 50%) calc(100% - 17px) 50% / 5px 5px no-repeat,linear-gradient(-45deg,transparent 50%,var(--text-secondary) 50%) calc(100% - 12px) 50% / 5px 5px no-repeat,var(--surface-default)}
.kt-panel-btn{display:none;align-items:center;gap:var(--space-2);height:var(--kt-ctl);padding:0 var(--space-4);border:1px solid var(--border-strong);border-radius:var(--r-pill);background:none;color:var(--text-primary);font:inherit;font-size:var(--fs-ui-s);font-weight:500;cursor:pointer}
.kt-panel-btn svg{width:14px;height:14px}
.kt-chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-bottom:var(--space-6)}
.kt-chip{gap:var(--space-2);border-color:var(--border-strong);transition:border-color var(--t-ui) var(--e-ui),color var(--t-ui) var(--e-ui)}
.kt-chip span{color:var(--text-secondary)}
.kt-chip:hover,.kt-chip:focus-visible{border-color:var(--text-primary)}
.kt-chip:hover span,.kt-chip:focus-visible span{color:var(--text-primary)}
.kt-chips-x{margin-left:var(--space-2);color:var(--text-secondary);text-decoration:underline;text-underline-offset:3px}
.kt-chips-x:hover{color:var(--text-primary)}
.kt-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}   /* 4 w rzędzie (właściciel 2026-10-30); 3 poniżej 1280, 2 poniżej 1024 */
@media (max-width:1279px){.kt-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kt-grid>li{display:flex}
/* karta modelu: cały kafelek klikalny (::after linku nazwy), kwadraty kolorów nad nim (z-index 2) */
.kt-card{position:relative;display:grid;grid-template-columns:1fr auto;align-items:end;gap:var(--space-4);width:100%;aspect-ratio:4/5;padding:var(--space-6);background:var(--c-grey-50);border-radius:var(--r-xl);overflow:hidden;color:var(--text-primary);isolation:isolate}
.kt-card-img{position:absolute;inset:0;z-index:-1;display:block;background:inherit}   /* pod tekstem karty, ale nad jej tłem (isolation) — dzięki temu .ktc-txt nie musi być pozycjonowany; własne tło (to samo co karta), bo z-index izoluje multiply od tła karty */
.kt-card-img img{position:absolute;inset:12% 18% 32%;width:64%;height:56%;object-fit:contain;mix-blend-mode:multiply;color:transparent;transition:transform .6s var(--e-out)}
.kt-card:hover .kt-card-img img,.kt-card:has(.kt-card-name a:focus-visible) .kt-card-img img{transform:scale(1.04)}
.kt-card-tag{position:absolute;right:var(--space-5);top:var(--space-5);z-index:1;min-height:26px;padding:2px 10px;border-color:transparent;background:var(--surface-default);color:var(--text-primary)}   /* Nowość: biała plakietka na szarym kafelku */
.kt-card-tag.is-best{background:var(--text-primary);color:var(--surface-default)}   /* Bestseller: czarna (limonka nie występuje na jasnym tle) */
.ktc-txt{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}   /* nazwa → cena 12 px (właściciel 2026-10-30); bez position — link nazwy (::after) przykrywa cały kafelek, także zdjęcie */
/* nazwa maks. 2 wiersze: dłuższa ucięta wielokropkiem (pełna w DOM i na karcie produktu) */
.kt-card-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:var(--fs-title-s)}   /* 17 px: przy 4 w rzędzie (kafelek ok. 250 px) 20 px ucinało większość nazw */
.kt-card-name a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r-xl)}
.kt-card-name a:focus-visible{outline:none}
.kt-card:has(.kt-card-name a:focus-visible){outline:2px solid var(--focus-ring);outline-offset:3px}
.kt-card-cena{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--space-2)}
.kt-card-cena small{color:var(--text-secondary);font-size:var(--fs-caption)}   /* na bieli --text-tertiary (szary 500) ma 3,3:1 — za mało dla tekstu */
.ktc-kropki{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;margin:0;align-self:end}
.ktc-kropki a{display:block;width:18px;height:18px;border-radius:var(--r-xs);background:var(--kt-c);box-shadow:inset 0 0 0 1px var(--border-strong),0 0 0 2px var(--c-grey-50),0 0 0 3px var(--border-subtle)}
.ktc-kropki a[aria-current=true]{box-shadow:inset 0 0 0 1px var(--border-strong),0 0 0 2px var(--c-grey-50),0 0 0 3px var(--text-primary)}
.ktc-plus{font-weight:600;font-size:var(--fs-caption);color:var(--text-primary)}
/* kolor bez HEX w ofercie (np. wielokolorowy): kwadrat z kilku barw palety */
.kt-kolor.kt-kolor-multi,.ktc-kropki a.kt-kolor-multi{background:conic-gradient(var(--c-lime) 0 25%,var(--c-red-300) 0 50%,var(--c-grey-500) 0 75%,var(--c-black) 0)}
/* paginacja */
.kt-pag{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--space-1);margin-top:var(--space-block)}
.kt-pag a,.kt-pag span{display:grid;place-items:center;min-width:var(--kt-ctl);height:var(--kt-ctl);padding:0 var(--space-2);border:1px solid transparent;border-radius:var(--r-sm);color:var(--text-secondary);font-family:var(--font-mono);font-size:var(--fs-mono)}
.kt-pag a:hover{color:var(--text-primary);border-color:var(--border-subtle)}
.kt-pag a[aria-current=page]{color:var(--text-primary);border-color:var(--text-primary)}
.kt-pag a[aria-disabled=true]{opacity:.35;pointer-events:none}
.kt-pag svg{width:13px;height:13px}
/* pusta lista */
.kt-pusto{display:grid;justify-items:center;gap:var(--space-4);padding:var(--space-16) var(--space-6);border:1px dashed var(--border-subtle);border-radius:var(--r-lg);text-align:center}
.kt-pusto p{max-width:var(--measure-m);color:var(--text-secondary)}
.kt-pusto .btn{width:auto;min-width:240px;margin-top:var(--space-2)}
/* poniżej 1024: bez JS filtry stoją blokiem pod wynikami; z JS w panelu od dołu. Przycisk „Filtry (N)” zajmuje miejsce od początku (bez JS niewidoczny), żeby pasek nie przeskakiwał */
@media (max-width:1023px){
  .kt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kt-lay{grid-template-columns:minmax(0,1fr);grid-template-areas:"szukaj" "szybkie" "wyniki" "filtry"}
  .kt-panel{position:static;max-height:none;overflow:visible;margin-top:var(--space-10)}
  .kt-js .kt-lay{grid-template-areas:"szukaj" "szybkie" "wyniki"}
  .kt-panel-btn{display:inline-flex;visibility:hidden}
  .kt-js .kt-panel-btn{visibility:visible}
  .kt-js .kt-panel{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:60;display:none;flex-direction:column;height:calc(var(--frame-vh,100svh) * .85);max-height:none;margin:0;padding:0;overflow:auto;
    background:var(--surface-default);border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:0 0 0 100vmax var(--surface-overlay)}   /* cień = przyciemnienie strony pod panelem */
  .kt-js .kt-panel.is-open{display:flex}
  .s67:has(.kt-panel.is-open) .hdr{visibility:hidden}   /* panel jest modalny: pigułka menu nie wystaje ponad przyciemnienie */
  .kt-js .kt-panel-top{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;min-height:60px;padding:0 var(--gutter);background:var(--surface-default);border-bottom:1px solid var(--border-subtle)}
  .kt-panel-top h2{font-size:var(--fs-title-s);font-weight:600;letter-spacing:-.03em}
  .kt-panel-zamknij{display:grid;place-items:center;width:40px;height:40px;margin-right:-8px;padding:0;border:0;border-radius:var(--r-sm);background:none;color:var(--text-primary);cursor:pointer}
  .kt-panel-zamknij svg{width:16px;height:16px}
  .kt-js .kt-panel-body{flex:1;overflow:auto;overscroll-behavior:contain;padding:0 var(--gutter)}
  .kt-js .kt-panel-pokaz{position:sticky;bottom:0;display:block;padding:var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));background:var(--surface-default);border-top:1px solid var(--border-subtle)}
  .kt-panel-pokaz .btn{justify-content:center;min-height:52px;padding:0 var(--space-5)}
}
@media (max-width:767px){
  .kt-grid{gap:var(--space-3)}
  .kt-bar{flex-wrap:wrap}
  .kt-sort>span{display:none}
  .kt-card{padding:var(--space-3);gap:var(--space-2);border-radius:var(--r-lg)}
  .kt-card-tag{right:var(--space-2);top:var(--space-2);min-height:22px;padding:1px 8px}
  .kt-card-name{font-size:var(--fs-ui-s)}
  .kt-card-cena{display:none}   /* telefon: cena tylko na karcie produktu (decyzja właściciela R15), w HTML zostaje */
  .ktc-kropki{gap:6px}
  .ktc-kropki a{width:12px;height:12px;border-radius:3px;box-shadow:inset 0 0 0 1px var(--border-strong)}
  .ktc-kropki a[aria-current=true]{box-shadow:inset 0 0 0 1px var(--border-strong),0 0 0 1.5px var(--c-grey-50),0 0 0 2.5px var(--text-primary)}
  .kt-chips{margin-bottom:var(--space-5)}
}
/* katalog.js: wyniki w trakcie pobierania przygasają; otwarty panel blokuje przewijanie strony i wjeżdża od dołu */
.kt-js #kt-wyniki{transition:opacity var(--t-ui) var(--e-ui)}
.kt-js #kt-wyniki[aria-busy=true]{opacity:.5}
html.kt-lock{overflow:hidden}
.kt-panel:focus{outline:none}
@keyframes kt-panel-in{from{transform:translateY(100%)}}
@media (max-width:1023px){.kt-js .kt-panel.is-open{animation:kt-panel-in var(--t-std) var(--e-out)}}
@media (prefers-reduced-motion:reduce){.kt-card-img img{transition:none}.kt-js .kt-panel.is-open{animation:none}}

/* ===== Karta produktu katalogu /gadzety/<slug>-<kod>/ (.kp-*) — makieta Gadzety-Produkt.dc.html (canvas v259, zaakceptowana 2026-10-30).
   Galeria po lewej (kwadrat, strzałki, kreski, rząd miniatur 64 px; przesuwa page-gadzety-produkt.js), informacje po prawej; pod spodem bloki z etykietą jak w szablonie realizacji.
   „Podobne produkty” to kafelki listy (.kt-card, wariant C): 4 kolumny ≥ 1024, 3 na tablecie (czwarty ukryty), 2 na telefonie. */
.kp{padding-top:var(--space-page-top)}
.kp>.wrap{max-width:calc(1400px + 2 * var(--gutter))}   /* karta produktu węższa niż strona: treść maks. 1400 px (właściciel 2026-10-30) */
.kp-okr{grid-area:okr;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}   /* okruszki nad tytułem, na wysokości górnej krawędzi zdjęcia (właściciel 2026-10-30) */
.kp-okr a{transition:color var(--t-ui) var(--e-ui)}
.kp-okr a:hover{color:var(--text-primary)}
.kp-okr span[aria-hidden]{color:var(--text-tertiary)}
.kp-okr-dom{display:grid;place-items:center}   /* domek = strona główna (właściciel 2026-10-30) */
.kp-okr-dom svg{width:16px;height:16px}
.kp-lay{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto 1fr;grid-template-areas:"gal okr" "gal info";gap:var(--space-8) var(--gap-col);align-items:start}
.kp-gal{grid-area:gal}
.kp-info{grid-area:info}
.kp-gal{display:grid;gap:var(--space-3);min-width:0}
.kp-gal-img{position:relative;aspect-ratio:1;background:var(--c-grey-50);border-radius:var(--r-lg);overflow:hidden;overflow:clip}
.kp-gal-track{display:flex;height:100%;background:var(--c-grey-50);transition:transform var(--t-std) var(--e-out)}   /* tło na torze: transform izoluje mieszanie multiply od kadru */
.kp-gal-slide{position:relative;flex:0 0 100%;height:100%;background:var(--c-grey-50)}   /* tło też na slajdzie: tor ma szerokość jednego slajdu, a slajdy 2+ wystają poza jego tło — bez tego multiply zostawia białe tło zdjęcia */
.kp-gal-slide img{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain;mix-blend-mode:multiply;color:transparent}
.kp-gal-slide.is-life img{inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
.kp-360{position:absolute;inset:0;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline-offset:-4px}   /* widok 360°: przeciąganie przełącza klatki (page-gadzety-produkt.js); bez z-index — multiply zlewa białe tło klatek z szarym */
.kp-360.is-ciagniety{cursor:grabbing}
.kp-360 img{pointer-events:none;-webkit-user-drag:none}
.kp-360-hint{position:absolute;left:var(--space-4);top:var(--space-4);padding:var(--space-1) var(--space-3);border-radius:var(--r-pill);background:var(--surface-media-label);color:var(--text-on-media);pointer-events:none;transition:opacity var(--t-ui) var(--e-ui)}
.kp-360.is-ruszony .kp-360-hint{opacity:0}
.kp-gal-min button.is-360 img{inset:0;width:100%;height:100%;object-fit:cover}   /* klatki 3:2 z białym marginesem — w miniaturze bez wcięcia, produkt większy */
.kp-gal-360-znak{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--surface-media-label);color:var(--text-on-media)}
.kp-gal-360-znak svg{width:14px;height:14px}
.kp-gal-arr{position:absolute;top:50%;z-index:1;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--border-subtle);border-radius:var(--r-sm);background:var(--surface-default);color:var(--text-primary);cursor:pointer;transform:translateY(-50%);transition:background-color var(--t-ui) var(--e-ui),color var(--t-ui) var(--e-ui)}
.kp-gal-arr svg{width:14px;height:14px}
.kp-gal-arr:hover,.kp-gal-arr:focus-visible{background:var(--text-primary);color:var(--surface-default)}
.kp-gal-arr[disabled]{opacity:0;pointer-events:none}
.kp-gal-prev{left:var(--space-4)}.kp-gal-next{right:var(--space-4)}
.kp-gal-arr[hidden],.kp-gal-kreski[hidden],.kp-gal-min[hidden]{display:none}
/* bez JS (page-gadzety-produkt.js dodaje .is-js): zdjęcia przewijane palcem/kółkiem z przyciąganiem, strzałek i kresek nie ma */
.kp-gal:not(.is-js) .kp-gal-img{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none}
.kp-gal:not(.is-js) .kp-gal-img::-webkit-scrollbar{display:none}
.kp-gal:not(.is-js) .kp-gal-slide{scroll-snap-align:start}
.kp-gal:not(.is-js) :is(.kp-gal-arr,.kp-gal-kreski){display:none}
.kp-gal-kreski{position:absolute;left:50%;bottom:var(--space-4);z-index:1;display:flex;padding:0 6px;border-radius:var(--r-pill);background:var(--surface-media-label);transform:translateX(-50%)}
.kp-gal-kreski button{display:grid;place-items:center;width:24px;height:28px;padding:0;border:0;background:none;cursor:pointer}
.kp-gal-kreski button::before{content:"";width:18px;height:2px;border-radius:1px;background:var(--text-on-media);opacity:.4;transition:opacity var(--t-ui) var(--e-ui)}
.kp-gal-kreski button[aria-current=true]::before{opacity:1}
@media (min-width:768px){.kp-gal-kreski{display:none}}   /* na desktopie nawigują miniatury; kreski tylko na telefonie */
.kp-gal-min{display:flex;gap:var(--space-2);margin-inline:-3px;padding:3px;overflow-x:auto;scrollbar-width:none}   /* 3 px zapasu na obrys wybranej miniatury (overflow go ucinał) */
.kp-gal-min::-webkit-scrollbar{display:none}
.kp-gal-min button{position:relative;flex:none;width:64px;height:64px;padding:0;border:0;border-radius:var(--r-sm);background:var(--c-grey-50);overflow:hidden;cursor:pointer;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow var(--t-ui) var(--e-ui)}
.kp-gal-min img{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain;mix-blend-mode:multiply;color:transparent}
.kp-gal-min button.is-life img{inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
.kp-gal-min button[aria-current=true]{box-shadow:0 0 0 2px var(--surface-default),0 0 0 3px var(--text-primary)}
.kp-info{display:grid;gap:var(--space-5);align-content:start}
/* desktop: przypięta galeria, tekst po prawej przewija się; kadr niższy niż kwadrat, gdy okno jest niskie — miniatury zawsze widoczne */
@media (min-width:1024px){.kp-gal{position:sticky;top:var(--space-20)}.kp-gal-img{width:100%;max-height:calc(100svh - var(--space-20) - 120px)}}
.kp-info h1{max-width:18em;overflow-wrap:break-word}
.kp-kod{margin-top:calc(var(--space-3) * -1)}   /* kod pod nazwą (właściciel 2026-10-30) */
.kp-tagi{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin-top:calc(var(--space-2) * -1);color:var(--text-secondary)}   /* „Znakowanie:” i techniki pod kodem (etykieta jak „Kolor:”) */
.kp-tagi ul{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.kp-tagi li{padding:var(--space-1) var(--space-3);border-radius:var(--r-pill);background:var(--c-grey-50);color:var(--text-secondary)}
.kp-cena{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-1) var(--space-3);padding:var(--space-2) 0}   /* bez kresek (właściciel 2026-10-30) */
.kp-cena .t-heading-s{color:var(--text-primary)}
.kp-kolory{display:grid;gap:var(--space-3);margin:0;padding:0;border:0;min-width:0}
.kp-kolory legend{padding:0;margin-bottom:var(--space-3);color:var(--text-secondary)}
.kp-kolory legend b{color:var(--text-primary);font-weight:500}
.kp-kolory ul{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.kp-kolory a{display:block;width:24px;height:24px;border-radius:6px;background:var(--kt-c);box-shadow:inset 0 0 0 1px var(--border-strong);transition:box-shadow var(--t-ui) var(--e-ui)}
.kp-kolory a:hover{box-shadow:inset 0 0 0 1px var(--border-strong),0 0 0 3px var(--surface-default),0 0 0 4px var(--text-secondary)}
.kp-kolory a[aria-current=true]{box-shadow:inset 0 0 0 1px var(--border-strong),0 0 0 3px var(--surface-default),0 0 0 4px var(--text-primary)}
.kp-kolory a.kt-kolor-multi{background:conic-gradient(var(--c-lime) 0 25%,var(--c-red-300) 0 50%,var(--c-grey-500) 0 75%,var(--c-black) 0)}
.kp-dost{justify-self:start;display:inline-flex;align-items:center;gap:var(--space-2);min-height:32px;padding:0 var(--space-3);align-self:center;border-radius:var(--r-pill);background:var(--c-lime-100);color:var(--c-lime-800);font-weight:500}   /* status przy cenie (stan oferty razem z ceną; właściciel 2026-10-30), kolory marki jak zaznaczony checkbox (właściciel 2026-10-30) */
.kp-dost::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
.kp-dost[data-kp-dost=wkrotce]{background:var(--c-grey-100);color:var(--text-primary)}
.kp-dost[data-kp-dost=brak]{background:var(--c-grey-50);color:var(--text-secondary)}
.kp-dost[data-kp-dost=brak]::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.kp-plusy{display:grid;gap:var(--space-4);margin-top:var(--space-6);color:var(--text-primary)}   /* korzyści pod wyceną z ikonami (katalog.korzysci) */
.kp-plusy li{display:flex;align-items:center;gap:var(--space-4)}
.kp-plusy-ico{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:var(--r-sm);background:var(--c-lime-100);color:var(--c-lime-800)}
.kp-plusy-ico svg{width:24px;height:24px}
.kp-pasek{display:none}
.kp-ile{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);align-items:end;gap:var(--space-3);margin-top:var(--space-6)}   /* formularz wyraźnie odsunięty od kolorów */
.kp-ile label{display:grid;gap:var(--space-2);color:var(--text-primary);font-weight:500}
.kp-ile input{width:100%;height:56px;padding:0 var(--space-4);border:1px solid var(--border-strong);border-radius:var(--r-md);background:transparent;color:var(--text-primary);font:inherit;font-size:var(--fs-ui);outline:none}
.kp-ile input:hover{border-color:var(--text-secondary)}
.kp-ile input:focus{border-color:var(--focus-ring);box-shadow:inset 0 0 0 1px var(--focus-ring)}
.kp-ile input::placeholder{color:var(--text-tertiary);opacity:1}
/* pod kartą szachownica: opis i akordeony (Parametry, Znakowanie) po lewej, ostatnie zdjęcie modelu (zwykle aranżacja) po prawej */
.kp-szach{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap-col);align-items:center;margin-top:var(--space-block)}
.kp-szach.is-bez-zdjecia{grid-template-columns:minmax(0,1fr);max-width:var(--measure-xl)}
.kp-szach-txt h2{margin-bottom:var(--space-5)}
.kp-akordy{margin-top:var(--space-6)}   /* parametry i znakowanie w akordeonach pod korzyściami (właściciel 2026-10-30) */
.kp-akord>summary{font-weight:500}
.kp-akord[open]{padding-bottom:var(--space-6)}
.kp-szach-img{position:relative;margin:0;aspect-ratio:1;border-radius:var(--r-lg);background:var(--c-grey-50);overflow:hidden}
.kp-szach-img img{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain;mix-blend-mode:multiply;color:transparent}
.kp-szach-img.is-life img{inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
.kp-opis{color:var(--text-primary)}   /* cały opis jednym kolorem, bez wyróżnionego wstępu (właściciel 2026-10-30) */
.kp-tab{width:100%;max-width:var(--measure-xl);border-collapse:collapse}
.kp-tab th,.kp-tab td{padding:var(--space-2) 0;text-align:left;vertical-align:top;font-weight:400}
.kp-tab tr:first-child>*{padding-top:0}
.kp-tab th{width:38%;padding-right:var(--space-6);color:var(--text-secondary)}
.kp-znak{display:grid;max-width:var(--measure-xl)}
.kp-znak li{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:var(--space-4);padding:var(--space-2) 0}
.kp-znak li:first-child{padding-top:0}
.kp-znak li>span:not(:first-child){color:var(--text-secondary)}
.kp-dalej{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-8);margin-top:var(--space-4)}
.kp-podobne{margin-top:var(--space-section-s)}
.kp-podobne .sec-head{margin-bottom:var(--space-8)}
.kp-podobne .kt-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1023px){.kp-podobne .kt-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){.kp-podobne .kt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1023px){
  .kp-lay{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"okr" "gal" "info";row-gap:var(--gap-col)}
  .kp-szach{grid-template-columns:minmax(0,1fr)}
  .kp-podobne .kt-grid>li:nth-child(n+4){display:none}
}
@media (max-width:767px){
  .kp-gal{margin-inline:calc(var(--gutter) * -1)}
  .kp-gal-img{border-radius:0}
  .kp-gal-arr{display:none}
  .kp-gal-min{margin-inline:0;padding:3px var(--gutter)}
  .kp-ile{grid-template-columns:minmax(0,1fr)}
  .kp-pasek:not([hidden]){position:fixed;left:0;right:0;bottom:0;z-index:40;display:block;padding:var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));background:var(--surface-default);box-shadow:0 -8px 24px rgb(4 4 4 / .08)}   /* przycisk wyceny na telefonie, gdy formularz zniknął z ekranu */
  .kp-znak li{grid-template-columns:minmax(0,1fr) auto;gap:var(--space-1) var(--space-4)}
  .kp-znak li>span:first-child{grid-column:1/-1}
  .kp-podobne .kt-grid>li:nth-child(n+4){display:flex}
}
@media (prefers-reduced-motion:reduce){.kp-gal-track{transition:none}}