/* =========================================================================
   CZĘŚCI WŁASNE MOTYWU — to, czego prototyp nie miał, bo nie musiał:
   struktura menu WordPressa (ul > li > a), nawigacja mobilna, pomijanie
   nawigacji, stany pustych list, paginacja.

   Wszystko zbudowane z tokenów i wzorców z page.css. Żadnych nowych kolorów,
   żadnych kwadratów — pigułki i --r-lg, jak w całym projekcie.
   ========================================================================= */

/* --- wp_nav_menu wypisuje <ul><li>, a page.css stylował gołe <a> --- */
.hdr nav ul {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 34px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.hdr nav li { display: flex }
.hdr nav ul ul { display: none }   /* pasek jest jednopoziomowy z założenia */

/* --- pomijanie nawigacji: widoczne dopiero z klawiatury --- */
.skip {
  position: fixed;
  top: 10px;
  left: -9999px;
  z-index: 100;
  padding: 12px 22px;
  border-radius: var(--r-full);
  background: var(--grad-cta);
  color: #fff;
  font: 600 var(--fs-sm)/1 var(--font-text);
}
.skip:focus { left: 10px; color: #fff }

.u-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =========================================================================
   HAMBURGER + OVERLAY
   Prototyp chował nawigację poniżej 1000 px i zostawiał tylko pasek z dwoma
   przyciskami — w serwisie z kilkunastoma adresami to znaczy „na telefonie
   nie da się dojść do usług ani bloga”. Overlay używa wyłącznie istniejących
   wzorców: pigułka, mono-etykieta, gradientowe podkreślenie.
   ========================================================================= */
.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.4);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  color: var(--fg);
  cursor: pointer;
  transition: box-shadow var(--dur-2) var(--ease), transform .4s var(--spring);
}
.burger:hover { box-shadow: inset 0 0 0 1.5px var(--imp); color: var(--imp) }
.burger > span[aria-hidden] {
  position: relative;
  display: block;
  width: 18px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: background var(--dur-1) var(--ease);
}
.burger > span[aria-hidden]::before,
.burger > span[aria-hidden]::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-2) var(--ease-out);
}
.burger > span[aria-hidden]::before { top: -6px }
.burger > span[aria-hidden]::after  { top: 6px }
.burger[aria-expanded="true"] > span[aria-hidden] { background: transparent }
.burger[aria-expanded="true"] > span[aria-hidden]::before { transform: translateY(6px) rotate(45deg) }
.burger[aria-expanded="true"] > span[aria-hidden]::after  { transform: translateY(-6px) rotate(-45deg) }
@media (min-width: 1000px) { .burger { display: none } }

.navpanel {
  position: fixed;
  inset: 0;
  z-index: 48;
  display: grid;
  align-content: start;
  padding-top: 94px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(251,250,247,.94);
  backdrop-filter: blur(20px) saturate(120%);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-3) var(--ease-out);
}
.navpanel[hidden] { display: none }
.navpanel[data-open] { opacity: 1; transform: none }
.navpanel-in {
  display: grid;
  gap: clamp(24px, 4vh, 44px);
  padding-block: clamp(24px, 5vh, 56px) calc(32px + env(safe-area-inset-bottom));
}
.navpanel-list, .navpanel-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.navpanel-list > li { border-top: 1px solid var(--line) }
.navpanel-list > li:last-child { border-bottom: 1px solid var(--line) }
.navpanel-list > li > a {
  display: block;
  padding: clamp(14px, 2.4vh, 22px) 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 2.4vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  font-variation-settings: 'wght' 700, 'wdth' 94;
}
.navpanel-list > li > a:hover,
.navpanel-list > li.current-menu-item > a { color: var(--imp) }
.navpanel-list ul {
  gap: 8px;
  padding: 0 0 clamp(14px, 2vh, 20px) 2px;
}
.navpanel-list ul a {
  font: 600 var(--fs-sm)/1.4 var(--font-text);
  color: var(--fg-muted);
}
.navpanel-list ul a:hover { color: var(--imp) }
.navpanel-foot { display: flex; flex-wrap: wrap; gap: var(--s-3) }
.navpanel-foot .btn { flex: 1 1 190px; justify-content: center }
body[data-navopen] { overflow: hidden }

/* =========================================================================
   STOPKA — menu WordPressa zamiast gołych <ul>
   ========================================================================= */
.ftr .cols ul li { list-style: none }
.ftr .cols ul ul { display: none }

/* =========================================================================
   STRONA TEKSTOWA (regulamin, polityka, „O nas” bez własnego szablonu)
   Przeniesione z Legal.dc.html — struktura sekcji budowana w PHP z H2
   redaktora, więc klasy muszą się zgadzać co do znaku.
   ========================================================================= */
.lg-hero { padding-top: clamp(140px,19vh,210px); padding-bottom: clamp(20px,3vh,44px) }
.lg-hero .wrap { display: grid; gap: clamp(14px,2.2vh,26px) }
.lg-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: -.045em;
  line-height: .94;
  font-variation-settings: 'wght' 760, 'wdth' 92, 'opsz' 96;
  font-size: clamp(2.1rem, 1rem + 4vw, 4.6rem);
  max-width: 20ch;
  text-wrap: balance;
}
.lg-when {
  margin: 0;
  font: 600 var(--fs-xs)/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.lg-body { display: grid; gap: clamp(28px,5vw,72px) }
@media (min-width: 1000px) { .lg-body { grid-template-columns: 15em minmax(0,1fr) } }
.lg-cols { display: grid; gap: clamp(20px,3vh,34px) }
.lg-sec {
  display: grid;
  gap: var(--s-4);
  padding-top: clamp(20px,3vh,34px);
  border-top: 1px solid var(--line);
}
.lg-sec:first-child { border-top: 0; padding-top: 0 }
.lg-sec h2 {
  margin: 0;
  display: grid;
  grid-template-columns: 2.4em minmax(0,1fr);
  gap: var(--s-4);
  align-items: baseline;
  font-family: var(--font-display);
  letter-spacing: -.03em;
  line-height: 1.1;
  font-variation-settings: 'wght' 700, 'wdth' 96;
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.7rem);
}
/* nagłówek bez numeru („§ N”) nie ma zostawiać pustej kolumny */
.lg-sec h2:not(:has(span)) { display: block }
.lg-sec h2 span { font: 600 var(--fs-sm)/1.4 var(--font-mono); color: var(--imp) }
.lg-sec p, .lg-sec li { margin: 0; color: var(--fg); line-height: 1.7; text-wrap: pretty }
.lg-sec ol, .lg-sec ul { margin: 0; padding-left: 1.4em; display: grid; gap: 10px; color: var(--fg-muted) }
.lg-sec h3 {
  margin: var(--s-2) 0 0;
  font-family: var(--font-display);
  letter-spacing: -.02em;
  font-variation-settings: 'wght' 640, 'wdth' 98;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem);
}
.lg-sec a { color: var(--imp); text-decoration: underline; text-underline-offset: 4px }
.lg-sec img { border-radius: var(--r-lg) }
.lg-note { margin: 0; font-size: var(--fs-sm); color: var(--fg-muted) }
.ink .lg-sec a { color: var(--glow) }

/* Dokument do czytania: żywe pole zostaje, ale schodzi z głosu.
   Ściszamy SAMO POLE, nie welon — welon maluje skrypt co klatkę stylem
   inline i CSS by z nim nie wygrał. */
body.is-doc #field { opacity: .42 }
body.is-doc #mol { opacity: .5 }
@media (max-width: 900px) { body.is-doc #mol { opacity: .3 } }

/* =========================================================================
   BLOG — listing, kategoria, archiwum, wyniki wyszukiwania
   Z Blog.dc.html. Filtr kategorii jest tu PRAWDZIWYM linkiem (crawlowalnym,
   działającym bez JS), a nie przyciskiem chowającym wiersze w DOM —
   przy paginacji filtrowanie po tekście pokazuje „5 z 60 wpisów” i kłamie.
   ========================================================================= */
.bl-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none }
.bl-filter a, .bl-filter button {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  border: 0;
  border-radius: var(--r-full);
  padding: 10px 18px;
  font: 600 var(--fs-xs)/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: rgba(255,255,255,.55);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform .35s var(--spring);
}
.bl-filter a:hover, .bl-filter button:hover { transform: translateY(-2px); color: var(--fg) }
.bl-filter a[data-on], .bl-filter button[data-on] {
  color: #fff;
  background: var(--grad-cta);
  background-size: 200% 100%;
  box-shadow: var(--shadow-lift);
}

/* wpis wyróżniony */
.bl-lead-post { display: grid; gap: clamp(20px,3vw,44px); align-items: center }
@media (min-width: 900px) { .bl-lead-post { grid-template-columns: minmax(0,1fr) minmax(0,.9fr) } }
.bl-lead-post .shot { height: clamp(220px,34vh,400px) }
.bl-lead-post .shot img { width: 100%; height: 100%; object-fit: cover }
.bl-lead-post h2 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: -.045em;
  line-height: .96;
  font-variation-settings: 'wght' 740, 'wdth' 92, 'opsz' 96;
  font-size: clamp(1.8rem, 1rem + 2.8vw, 3.4rem);
  text-wrap: balance;
}
.bl-lead-post p { margin: var(--s-4) 0 0; color: var(--fg-muted); max-width: 52ch; text-wrap: pretty }
.bl-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 var(--s-4);
  font: 600 var(--fs-xs)/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.bl-meta b { color: var(--imp); font-weight: 600 }
.ink .bl-meta b { color: var(--glow) }

/* lista wpisów: linia na wpis, tytuł jako największa rzecz w wierszu */
.posts { list-style: none; margin: 0; padding: 0; display: grid }
.posts li { border-top: 1px solid var(--line) }
.posts li:last-child { border-bottom: 1px solid var(--line) }
.posts a { display: grid; gap: 8px clamp(20px,3vw,52px); padding: clamp(20px,3vh,34px) 0; align-items: baseline }
@media (min-width: 860px) { .posts a { grid-template-columns: 8.5em minmax(0,1fr) 6em; align-items: baseline } }
.posts a:hover .p-title { color: var(--imp) }
.ink .posts a:hover .p-title { color: var(--glow) }
.p-when {
  font: 600 var(--fs-xs)/1.4 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.p-title {
  font-family: var(--font-display);
  letter-spacing: -.035em;
  line-height: 1.1;
  font-variation-settings: 'wght' 660, 'wdth' 96;
  font-size: clamp(1.15rem, 1rem + 1.1vw, 1.9rem);
  transition: color var(--dur-2) var(--ease);
}
.p-sub {
  display: block;
  margin-top: 6px;
  font-family: var(--font-text);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  max-width: 60ch;
  letter-spacing: 0;
  font-variation-settings: normal;
}
.p-read { font: 500 var(--fs-xs)/1.4 var(--font-mono); color: var(--fg-faint); white-space: nowrap }
.more { display: flex; justify-content: center; padding-top: clamp(24px,4vh,48px) }
/* podmiana listy przez AJAX: krótkie przygaszenie zamiast „zamrożenia” */
.posts-wrap { transition: opacity var(--dur-2) var(--ease) }
.posts-wrap[data-busy] { opacity: .45 }
@media (max-width: 820px) { body.is-blog #mol { opacity: .4 } }

/* =========================================================================
   WPIS — z Post.dc.html
   ========================================================================= */
.po-head { padding-top: clamp(140px,19vh,220px); padding-bottom: clamp(24px,4vh,52px) }
.po-head .wrap { display: grid; gap: clamp(16px,2.4vh,30px) }
.po-head h1 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: -.05em;
  line-height: .92;
  font-variation-settings: 'wght' 780, 'wdth' 90, 'opsz' 96;
  font-size: clamp(2.2rem, 1rem + 4.8vw, 5.4rem);
  max-width: 22ch;
  text-wrap: balance;
}
.po-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  font: 600 var(--fs-xs)/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.po-meta b { color: var(--imp); font-weight: 600 }
.po-lead { margin: 0; font-size: var(--fs-lead); color: var(--fg-muted); max-width: 56ch; text-wrap: pretty }
.po-fig { margin: 0; display: grid; gap: 10px }
.po-fig .shot { height: clamp(240px,42vh,520px) }
.po-fig .shot img { width: 100%; height: 100%; object-fit: cover }
.po-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px,5vw,72px) }
@media (min-width: 1000px) { .po-body { grid-template-columns: 14em minmax(0,1fr) } }
.po-share {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: clamp(28px,4vh,52px);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.po-share span {
  font: 600 var(--fs-xs)/1 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.po-share a { font-size: var(--fs-sm); color: var(--fg-muted); text-decoration: underline; text-underline-offset: 4px }
.po-share a:hover { color: var(--imp) }
/* autor: bez zdjęcia — zdjęcia idą w case study i na wpisy */
.po-author {
  display: grid;
  gap: 6px;
  margin-top: clamp(24px,4vh,44px);
  padding: clamp(20px,2.6vw,30px);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--line);
}
.po-author b {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem);
  letter-spacing: -.03em;
  font-variation-settings: 'wght' 680, 'wdth' 96;
}
.po-author p { margin: 0; font-size: var(--fs-sm); color: var(--fg-muted); max-width: 56ch }
.next { display: grid; gap: clamp(16px,2.4vw,28px) }
@media (min-width: 820px) { .next { grid-template-columns: repeat(2, minmax(0,1fr)) } }
.next a {
  display: grid;
  gap: 8px;
  padding: clamp(20px,2.6vw,32px);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .45s var(--spring), box-shadow var(--dur-3) var(--ease);
}
.next a:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--imp) 30%, transparent), var(--shadow-lift) }
.next span { font: 600 var(--fs-xs)/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint) }
.next b {
  font-family: var(--font-display);
  letter-spacing: -.03em;
  line-height: 1.15;
  font-variation-settings: 'wght' 660, 'wdth' 96;
  font-size: clamp(1.05rem, 1rem + .6vw, 1.45rem);
}
@media (max-width: 820px) { body.single #mol { opacity: .35 } }

/* =========================================================================
   LISTING USŁUG — z Services.dc.html
   ========================================================================= */
.svc { border-top: 1px solid var(--line) }
.svc:last-of-type { border-bottom: 1px solid var(--line) }
.svc > .wrap { padding-block: clamp(40px,7vh,84px) }
.svc-row { display: grid; gap: clamp(18px,3vw,44px) }
@media (min-width: 1000px) { .svc-row { grid-template-columns: 7.5em minmax(0,1fr) minmax(0,.8fr); align-items: start } }
.svc-tag {
  font: 600 var(--fs-xs)/1.4 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-faint);
  display: grid;
  gap: 4px;
}
.svc-tag b { font-size: var(--fs-sm); letter-spacing: .12em; color: var(--imp); font-weight: 600 }
.svc h2 {
  margin: 0 0 var(--s-4);
  font-family: var(--font-display);
  letter-spacing: -.045em;
  line-height: .94;
  font-variation-settings: 'wght' 740, 'wdth' 92, 'opsz' 96;
  font-size: clamp(2rem, 1rem + 3.4vw, 4.2rem);
}
.svc-lead { margin: 0; font-size: var(--fs-lead); color: var(--fg-muted); max-width: 46ch; text-wrap: pretty }
.svc-moves {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}
.svc-moves li { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; align-items: baseline }
.svc-moves li::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--imp);
  opacity: .7;
  transform: translateY(-2px);
}
/* landingi potomne filaru — węzeł linkowania silosu.
   Pigułki, nie kolejny rząd kresek: to jest nawigacja, nie lista faktów. */
.svc-kids { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--s-5) 0 0 }
.svc-kids a {
  display: inline-flex;
  padding: 7px 14px;
  border-radius: var(--r-full);
  font: 600 var(--fs-xs)/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.svc-kids a:hover { color: var(--imp); box-shadow: inset 0 0 0 1.5px var(--imp) }
.svc-cta { margin-top: var(--s-5) }
@media (max-width: 899px) {
  .svc-cta .btn { width: 100%; justify-content: space-between; font-size: var(--fs-sm) }
}
.svc-go {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--s-5);
  font-family: var(--font-display);
  letter-spacing: -.02em;
  font-variation-settings: 'wght' 640, 'wdth' 96;
  font-size: clamp(1rem, .95rem + .4vw, 1.2rem);
  color: var(--imp);
}
.svc-go svg { width: 19px; height: 19px; transition: transform .4s var(--spring) }
.svc-go:hover svg { transform: translateX(6px) }
.svc-price {
  display: grid;
  gap: 6px;
  padding: clamp(18px,2.4vw,28px);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--line);
}
.svc-price span { font: 600 var(--fs-xs)/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-faint) }
.svc-price b {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem);
  letter-spacing: -.03em;
  font-variation-settings: 'wght' 700, 'wdth' 94;
}
.svc-price small { color: var(--fg-muted); font-size: var(--fs-sm) }

/* /uslugi/: jedna usluga = jeden kadr, tak jak przypiete sceny strony glownej.
   Bez tego wiersz mial 507 px przy oknie 911 px: na ekranie stały dwa wiersze
   naraz, a dociaganie do gory sekcji zawsze zostawialo polowe nastepnej. */
body.post-type-archive-usluga .svc {
  display: grid;
  /* Bez zadeklarowanej kolumny sciezka domyslna jest `auto`, a element grida
     ma `min-width:auto` — nie schodzi ponizej swojej szerokosci minimalnej.
     Zmierzone przy oknie 390 px: `.wrap` mial 396,7 px i strona jechala
     w bok o 7 px. `minmax(0,1fr)` zdejmuje ta podloge. */
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
body.post-type-archive-usluga .svc > .wrap {
  padding-block: clamp(64px, 10vh, 128px);
}
@media (min-width: 1000px) {
  body.post-type-archive-usluga .svc { min-height: 100svh }
}
@media (max-width: 720px) {
  body.post-type-archive-usluga .svc > .wrap { padding-block: clamp(64px, 10vh, 92px) }
}
/* na wąskim ekranie molekuła nie ma gdzie stanąć obok tekstu */
@media (max-width: 820px) { body.post-type-archive-usluga #mol, body.is-usluga #mol { opacity: .4 } }

/* =========================================================================
   USŁUGA (szczegół) — z Service.dc.html
   ========================================================================= */
.sv-hero { padding-top: clamp(140px,19vh,230px); padding-bottom: clamp(40px,7vh,90px) }
/* Sciezka `auto` nie schodzi ponizej szerokosci minimalnej swojej tresci,
   a ta jest tu rowna najdluzszemu slowu naglowka. Zmierzone przy oknie 320 px:
   „Pozycjonowanie" ma 308,8 px, wiec sciezka rosla ponad 280 px pola tresci
   i CALA kolumna otwarcia wychodzila 9 px poza ekran. */
.sv-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px,3vh,36px) }
/* Domkniecie: gdy pojedyncze slowo i tak nie miesci sie w wierszu, ma sie
   zlamac, a nie wystawac. Dziala dopiero wtedy, gdy nie ma innego wyjscia. */
.sv-hero h1, .sv-hero .lead { overflow-wrap: break-word }
.sv-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: -.05em;
  line-height: .9;
  font-variation-settings: 'wght' 780, 'wdth' 90, 'opsz' 96;
  font-size: clamp(2.6rem, 1rem + 6.4vw, 7.4rem);
  max-width: 16ch;
  text-wrap: balance;
}
.sv-hero h1 em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sv-hero .lead { margin: 0; font-size: var(--fs-lead); color: var(--fg-muted); max-width: 48ch; text-wrap: pretty }
/* Wprowadzenie: dwa–trzy zdania zwykłym stopniem, żeby lead został hasłem. */
.sv-intro { margin: 0; max-width: 62ch; color: var(--fg-muted); text-wrap: pretty }
/* Otwarcie ze zdjęciem: tekst z lewej, kadr z prawej. Bez zdjęcia układ
   zostaje dokładnie taki, jaki był — jedna kolumna. */
@media (min-width: 1000px) {
  .sv-hero--shot .wrap {
    grid-template-columns: minmax(0,1.05fr) minmax(0,.85fr);
    align-items: start;
    column-gap: clamp(28px,4vw,64px);
  }
  .sv-hero--shot .crumbs, .sv-hero--shot h1, .sv-hero--shot .lead,
  .sv-hero--shot .sv-intro, .sv-hero--shot .acts { grid-column: 1 }
  .sv-hero--shot .sv-shot { grid-column: 2; grid-row: 1 / span 5; align-self: center }
  .sv-hero--shot .sv-facts { grid-column: 1 / -1 }
}
.sv-shot img { display: block; width: 100%; height: auto }
/* Kadr stoi na tej samej jasnej scenie, co strona, więc bez własnej płaszczyzny
   i włosowej krawędzi zlewa się z tłem — dotyczy to tak samo podkładki, jak
   przyszłego zrzutu z panelu. */
.sv-shot { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2) }
.sv-facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px,3vw,54px);
  margin: 0;
  padding: var(--s-5) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.sv-facts li { display: grid; gap: 4px }
.sv-facts b {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.4rem);
  letter-spacing: -.03em;
  font-variation-settings: 'wght' 720, 'wdth' 94;
  font-variant-numeric: tabular-nums;
}
.sv-facts span { font: 600 var(--fs-xs)/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint) }

/* kroki pracy: czas płynie w dół po jednej linii */
.steps { list-style: none; margin: 0; padding: 0; display: grid }
.steps li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: clamp(16px,2.4vw,34px);
  padding: clamp(16px,2.4vh,28px) 0;
  border-top: 1px solid var(--line);
}
.steps li:last-child { border-bottom: 1px solid var(--line) }
.steps .when {
  font: 600 var(--fs-xs)/1.6 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--imp);
  min-width: 7em;
}
.steps b {
  display: block;
  font-family: var(--font-display);
  letter-spacing: -.03em;
  line-height: 1.15;
  font-variation-settings: 'wght' 660, 'wdth' 96;
  font-size: clamp(1.1rem, 1rem + .8vw, 1.6rem);
}
.steps p { margin: 6px 0 0; color: var(--fg-muted); max-width: 60ch }

/* co dostajesz / czego nie robimy: dwie kolumny prawdy */
.pair { display: grid; gap: clamp(24px,4vw,64px) }
@media (min-width: 900px) { .pair { grid-template-columns: repeat(2, minmax(0,1fr)) } }
.pair h3 { margin: 0 0 var(--s-4) }
.pair ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; color: var(--fg-muted); font-size: var(--fs-sm) }
.pair li { display: grid; grid-template-columns: 1.4em minmax(0,1fr); gap: 10px; align-items: baseline }
.pair li::before { content: "—"; color: var(--imp) }
.pair--no li::before { content: "×"; color: var(--fg-faint) }
.ink .svc-kids a { color: rgba(244,242,250,.72); box-shadow: inset 0 0 0 1px rgba(244,242,250,.18) }
.ink .svc-kids a:hover { color: #fff; box-shadow: inset 0 0 0 1.5px var(--glow) }

/* =========================================================================
   CASE STUDY — z CaseStudy.dc.html
   ========================================================================= */
.cs-hero { padding-top: clamp(140px,19vh,230px); padding-bottom: clamp(30px,5vh,70px) }
.cs-hero .wrap { display: grid; gap: clamp(18px,3vh,34px) }
.cs-who {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px,2.4vw,40px);
  margin: 0; padding: 0;
  list-style: none;
  font: 600 var(--fs-xs)/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.cs-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: -.05em;
  line-height: .9;
  font-variation-settings: 'wght' 780, 'wdth' 90, 'opsz' 96;
  font-size: clamp(2.4rem, 1rem + 5.8vw, 6.8rem);
  max-width: 18ch;
  text-wrap: balance;
}
.cs-hero h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent }
.cs-hero .lead { margin: 0; font-size: var(--fs-lead); color: var(--fg-muted); max-width: 52ch; text-wrap: pretty }

/* wynik: liczba jak plakat, nad nią przekreślony stan wyjściowy */
.res {
  display: grid;
  gap: clamp(28px,4vw,64px);
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  padding-block: clamp(24px,4vh,52px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.res div { display: grid; gap: 6px }
.res s { font: 500 var(--fs-sm)/1 var(--font-mono); color: var(--fg-faint); text-decoration-thickness: 1.5px }
.res b {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 1.4rem + 5vw, 6.4rem);
  line-height: .82;
  letter-spacing: -.05em;
  font-variation-settings: 'wght' 820, 'wdth' 90;
  font-variant-numeric: tabular-nums;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.res span { font-size: var(--fs-sm); color: var(--fg-muted); max-width: 24ch }

/* zrzuty: przed i po */
.shots { display: grid; gap: clamp(16px,2.4vw,30px) }
@media (min-width: 820px) { .shots { grid-template-columns: repeat(2, minmax(0,1fr)) } }
.shot-fig { margin: 0; display: grid; gap: 10px }
.shot-fig .shot { height: clamp(220px,32vh,360px) }
.shot-fig .shot img { width: 100%; height: 100%; object-fit: cover }
.shot-fig figcaption {
  font: 500 var(--fs-xs)/1.5 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* cytat klienta: jedno zdanie, duże */
.say { display: grid; gap: var(--s-4); max-width: 46ch }
.say blockquote {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: -.035em;
  line-height: 1.15;
  font-variation-settings: 'wght' 640, 'wdth' 94;
  font-size: clamp(1.4rem, 1.1rem + 1.8vw, 2.6rem);
  text-wrap: pretty;
}
.say figcaption { font: 500 var(--fs-sm)/1.5 var(--font-text); color: var(--fg-muted) }

/* karta na archiwum — metryka pierwsza, bo po nią się tu przychodzi */
.cs-card { align-content: start }
.cs-card-fig { display: grid; gap: 4px }
.cs-card-fig s { font: 500 var(--fs-xs)/1 var(--font-mono); color: var(--fg-faint) }
.cs-card-fig b {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.6rem);
  line-height: .86;
  letter-spacing: -.045em;
  font-variation-settings: 'wght' 800, 'wdth' 92;
  font-variant-numeric: tabular-nums;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cs-card-fig em { font-style: normal; font-size: var(--fs-sm); color: var(--fg-muted); max-width: 26ch }
.cs-card strong {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.15;
  font-variation-settings: 'wght' 660, 'wdth' 96;
  font-size: clamp(1.05rem, 1rem + .6vw, 1.45rem);
}
.cs-card-who {
  font: 600 var(--fs-xs)/1.5 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
@media (max-width: 820px) { body.is-case #mol { opacity: .4 } }

/* =========================================================================
   O NAS — z About.dc.html
   ========================================================================= */
.ab-hero { padding-top: clamp(140px,19vh,220px); padding-bottom: clamp(24px,4vh,60px) }
.ab-hero .wrap { display: grid; gap: clamp(18px,3vh,34px) }
.ab-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: -.05em;
  line-height: .9;
  font-variation-settings: 'wght' 780, 'wdth' 90, 'opsz' 96;
  font-size: clamp(2.4rem, 1rem + 5.6vw, 6.4rem);
  max-width: 17ch;
  text-wrap: balance;
}
.ab-hero h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent }
.ab-hero .lead { margin: 0; font-size: var(--fs-lead); color: var(--fg-muted); max-width: 54ch; text-wrap: pretty }
.team {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: clamp(18px,2.6vw,34px);
  grid-template-columns: repeat(auto-fit, minmax(230px,1fr));
}
.team li { display: grid; gap: 6px; padding-top: var(--s-4); border-top: 1px solid var(--line) }
.team b {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + .7vw, 1.5rem);
  letter-spacing: -.03em;
  font-variation-settings: 'wght' 680, 'wdth' 96;
}
.team span { font: 600 var(--fs-xs)/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--imp) }
.team p { margin: 0; font-size: var(--fs-sm); color: var(--fg-muted); max-width: 34ch }

/* =========================================================================
   KONTAKT — z Contact.dc.html
   ========================================================================= */
.co-hero { padding-top: clamp(140px,19vh,220px); padding-bottom: clamp(24px,4vh,56px) }
.co-hero .wrap { display: grid; gap: clamp(18px,3vh,34px) }
.co-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: -.05em;
  line-height: .9;
  font-variation-settings: 'wght' 780, 'wdth' 90, 'opsz' 96;
  font-size: clamp(2.4rem, 1rem + 5.4vw, 6rem);
  max-width: 18ch;
  text-wrap: balance;
}
.co-hero h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent }
.co-hero .lead { margin: 0; font-size: var(--fs-lead); color: var(--fg-muted); max-width: 52ch; text-wrap: pretty }
.co-grid { display: grid; gap: clamp(28px,4.5vw,72px) }
@media (min-width: 1040px) { .co-grid { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); align-items: start } }
.co-box { display: grid; gap: clamp(18px,2.6vh,30px) }
.co-box h2 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: -.04em;
  line-height: 1;
  font-variation-settings: 'wght' 720, 'wdth' 94;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
}

/* wybór dnia: okrągłe pigułki z powietrzem */
.days { display: flex; flex-wrap: wrap; gap: clamp(10px,1.4vw,16px); margin: 0; padding: 0; list-style: none }
.day { cursor: pointer; position: relative }
.day input { position: absolute; opacity: 0; width: 0; height: 0 }
.day span {
  display: grid;
  gap: 2px;
  justify-items: center;
  min-width: 5.6em;
  padding: 14px 18px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.55);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .4s var(--spring), box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.day span i {
  font-style: normal;
  font: 600 var(--fs-xs)/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.day span b {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + .6vw, 1.5rem);
  letter-spacing: -.03em;
  font-variation-settings: 'wght' 700, 'wdth' 94;
  font-variant-numeric: tabular-nums;
}
.day:hover span { transform: translateY(-3px) }
.day input:checked + span { background: var(--grad-cta); background-size: 200% 100%; box-shadow: var(--shadow-lift); color: #fff }
.day input:checked + span i { color: rgba(255,255,255,.75) }
.day input:focus-visible + span { outline: 2.5px solid var(--imp); outline-offset: 3px }
.day--full { cursor: not-allowed }
.day--full span { opacity: .42; background: transparent }
.day--full:hover span { transform: none }

/* godziny */
.slots { display: flex; flex-wrap: wrap; gap: clamp(10px,1.2vw,14px); min-height: 56px; align-items: center; margin: 0; padding: 0; list-style: none }
.slot { cursor: pointer; position: relative }
.slot[hidden] { display: none }
.slot input { position: absolute; opacity: 0; width: 0; height: 0 }
.slot span {
  display: grid;
  place-items: center;
  min-height: 52px;
  padding: 0 clamp(20px,2.2vw,30px);
  border-radius: var(--r-full);
  font: 600 var(--fs-body)/1 var(--font-text);
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.55);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .4s var(--spring), box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.slot:hover span { transform: translateY(-3px) }
.slot input:checked + span { background: var(--grad-cta); background-size: 200% 100%; color: #fff; box-shadow: var(--shadow-lift) }
.slot input:focus-visible + span { outline: 2.5px solid var(--imp); outline-offset: 3px }
/* data przy godzinie potrzebna TYLKO wtedy, gdy skryptu nie ma i widać
   wszystkie dni naraz — inaczej pigułka niosłaby zbędną informację */
.slot-date { display: none }
html:not(.js) .slot-date {
  display: block;
  font-style: normal;
  font: 600 var(--fs-xs)/1 var(--font-mono);
  letter-spacing: .1em;
  color: var(--fg-faint);
}
html:not(.js) .slot span { gap: 3px; padding-block: 10px }
.slots-empty { font-size: var(--fs-sm); color: var(--fg-faint); margin: 0 }

.form-grid { display: grid; gap: clamp(16px,2.4vh,26px) }
@media (min-width: 680px) { .form-grid.two-up { grid-template-columns: repeat(2, minmax(0,1fr)) } }
.when {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: -.04em;
  line-height: 1;
  font-variation-settings: 'wght' 760, 'wdth' 92;
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 3rem);
}
.when em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent }

/* dane i dojazd */
.co-dir { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none }
.co-dir a {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + .8vw, 1.6rem);
  letter-spacing: -.03em;
  font-variation-settings: 'wght' 660, 'wdth' 96;
}
.co-dir a:hover { color: var(--imp) }
.co-dir p { margin: 0; color: var(--fg-muted); font-size: var(--fs-sm) }
.co-map { margin: 0; display: grid; gap: 10px }
.co-map .shot { height: clamp(200px,30vh,320px) }
.co-map .shot img { width: 100%; height: 100%; object-fit: cover }
.co-map figcaption {
  font: 500 var(--fs-xs)/1.5 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* =========================================================================
   AUDYT (podstrona) — z Audit.dc.html.

   Strona główna ma WŁASNY `#skan` w home.css. Kolizję rozwiązuje kolejność
   ładowania: na froncie parts.css idzie PRZED home.css, na podstronach po
   page.css. Prefiksowanie selektorów odpadło — to krucha operacja tekstowa
   na arkuszu, który i tak jest przenoszony 1:1.

   Klasy stanu badania (.sk-live, .sk-score, .findings) świadomie NIE zostały
   przeniesione: bez prawdziwego pomiaru pokazywałyby wymyśloną liczbę.
   Wrócą razem z realnym backendem.
   ========================================================================= */
#skan {
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-top: clamp(120px,16vh,190px);
  padding-bottom: clamp(40px,7vh,90px);
}
#skan .sk { display: grid; gap: clamp(26px,4vw,64px); width: 100% }
@media (min-width: 1000px) { #skan .sk { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); align-items: center } }
#skan h1 {
  margin: 0 0 clamp(14px,2vh,26px);
  font-family: var(--font-display);
  letter-spacing: -.05em;
  line-height: .9;
  font-variation-settings: 'wght' 780, 'wdth' 90, 'opsz' 96;
  font-size: clamp(2.3rem, 1rem + 5.2vw, 6rem);
  max-width: 17ch;
  text-wrap: balance;
}
#skan h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent }
.sk-ask { display: grid; gap: clamp(16px,2.4vh,30px) }
.sk-form-wrap { display: grid; gap: clamp(16px,2.4vh,26px) }
.sk-form {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 2px solid var(--line-strong);
  transition: border-color var(--dur-2) var(--ease);
}
.sk-form:focus-within { border-bottom-color: var(--imp) }
.sk-form .pre-txt { font: 500 clamp(.95rem,.85rem + .4vw,1.2rem)/1 var(--font-mono); color: var(--fg-faint) }
.sk-form input {
  flex: 1 1 220px;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, .9rem + 1.9vw, 2.6rem);
  letter-spacing: -.04em;
  font-variation-settings: 'wght' 620, 'wdth' 92;
  padding: 0;
}
.sk-form--mail input { font-size: clamp(1.1rem, .95rem + 1vw, 1.7rem) }
.sk-form input::placeholder { color: var(--fg-faint) }
.fire {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 0;
  cursor: pointer;
  color: #fff;
  background: var(--grad-cta);
  background-size: 200% 100%;
  border-radius: var(--r-full);
  height: 58px;
  padding: 0 30px;
  font: 600 var(--fs-body)/1 var(--font-text);
  box-shadow: var(--shadow-lift);
  transition: background-position var(--dur-3) var(--ease-out), transform .4s var(--spring);
}
.fire:hover { background-position: 100% 0; transform: translateY(-2px) }
.fire svg { width: 20px; height: 20px }
.sk-note { margin: 0; font-size: var(--fs-sm); color: var(--fg-muted); max-width: 48ch; text-wrap: pretty }
.sk-note b { color: var(--fg); font-weight: 600 }
.sk-shot { align-self: center }
.sk-shot img { width: 100%; height: auto }

/* porównanie: darmowy skrót vs pełny audyt — bez tabeli, dwie kolumny prawdy */
.two-cols { display: grid; gap: clamp(24px,4vw,64px) }
@media (min-width: 900px) { .two-cols { grid-template-columns: repeat(2, minmax(0,1fr)) } }
.col-head { display: grid; gap: 6px; padding-bottom: var(--s-4); border-bottom: 1px solid var(--line) }
.col-head b {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  letter-spacing: -.03em;
  font-variation-settings: 'wght' 700, 'wdth' 94;
}
.col-head span { font: 600 var(--fs-xs)/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--imp) }
.col-list { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: 12px; font-size: var(--fs-sm); color: var(--fg-muted) }
.col-list li { display: grid; grid-template-columns: 1.3em minmax(0,1fr); gap: 10px; align-items: baseline }
.col-list li::before { content: "—"; color: var(--imp) }
.ink .col-head { border-bottom-color: rgba(244,242,250,.18) }
.ink .col-list { color: rgba(244,242,250,.62) }

/* =========================================================================
   PAGINACJA I PUSTE STANY
   ========================================================================= */
.pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  margin-top: clamp(32px, 5vh, 56px);
}
.pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px; height: 46px;
  padding: 0 16px;
  border-radius: var(--r-full);
  font: 600 var(--fs-sm)/1 var(--font-mono);
  color: var(--fg-muted);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.pager .page-numbers:hover { color: var(--imp); box-shadow: inset 0 0 0 1.5px var(--imp) }
.pager .page-numbers.current {
  color: #fff;
  background: var(--grad-cta);
  box-shadow: var(--shadow-lift);
}
.pager .dots { box-shadow: none }
.ink .pager .page-numbers { color: rgba(244,242,250,.62); box-shadow: inset 0 0 0 1px rgba(244,242,250,.16) }
.ink .pager .page-numbers:hover { color: #fff; box-shadow: inset 0 0 0 1.5px var(--glow) }

.empty {
  display: grid;
  gap: var(--s-4);
  justify-items: start;
  padding: clamp(28px, 5vh, 56px) 0;
  border-top: 1px solid var(--line);
}
.empty p { margin: 0; color: var(--fg-muted); max-width: 52ch }

/* =========================================================================
   POLA FORMULARZY — linia zamiast pudełka, jak reszta projektu
   ========================================================================= */
.field { display: grid; gap: 6px }
.field label {
  font: 600 var(--fs-xs)/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 12px 2px;
  border: 0;
  background: transparent;
  color: var(--fg);
  font: 400 var(--fs-body)/1.5 var(--font-text);
  box-shadow: inset 0 -2px 0 var(--line-strong);
  border-radius: 0;
  transition: box-shadow var(--dur-2) var(--ease);
}
.field textarea { resize: vertical; min-height: 120px }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  box-shadow: inset 0 -2.5px 0 var(--imp);
}
/* dropdown w NASZYM stylu, nie systemowym */
.field select {
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23544D74' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 18px;
}
.field .err { color: var(--err); font-size: var(--fs-sm) }
.form-note { font-size: var(--fs-sm); color: var(--fg-muted); max-width: 56ch }
.form-note a { color: var(--imp); text-decoration: underline; text-underline-offset: 3px }
.ink .form-note a { color: var(--glow) }
/* honeypot: nigdy nie pokazywany, ale i nie usuwany z drzewa dostępności
   przez display:none — boty czytają CSS rzadziej niż ludzie myślą */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }

/* komunikat po wysłaniu — jeden wzorzec dla wszystkich potwierdzeń */
.note {
  display: grid;
  gap: var(--s-2);
  padding: clamp(18px, 2.6vw, 26px);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--line);
}
.note[data-kind="ok"] { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ok) 45%, transparent) }
.note[data-kind="err"] { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--err) 45%, transparent) }
.note b { font-family: var(--font-display); font-variation-settings: 'wght' 660, 'wdth' 96 }
.note p { margin: 0; color: var(--fg-muted) }
.ink .note { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(244,242,250,.14) }
/* Komunikat „wkrótce” stoi w miejscu formularza, więc niesie też wyjście:
   przycisk do kontaktu. Reszta wyglądu jest z `.note` — ten sam kafel działa
   na jasnej stronie audytu i w ciemnej sekcji strony głównej. */
.st-end { display: grid; gap: var(--s-4); justify-items: start; margin-top: clamp(28px,4.4vh,56px) }
.st-end .muted { margin: 0; font-size: var(--fs-sm); color: var(--fg-muted) }   /* token, nie kolor — .ink podmienia mu znaczenie */
.sk-soon { justify-items: start }          /* .note to grid — bez tego przycisk rozciąga się na całą szerokość */
.sk-soon .btn { margin-top: var(--s-3) }
.ink .note p { color: rgba(244,242,250,.62) }

/* =========================================================================
   TELEFON: JEDNA REGUŁA GĘSTOŚCI DLA WSZYSTKICH NAGŁÓWKÓW.

   Krój wyświetlankowy jest w tym motywie ustawiany na plakat: `wdth 88–92`
   (wąski), `wght 760–820` (ciężki), światło do −0,05em i interlinia poniżej
   jedności. Na dużym ekranie to działa. Na telefonie te same ustawienia dają
   litery, które się stykają, i wiersze, które na siebie nachodzą — zmierzone:
   „Jak wygląda współpraca z nami” miało interlinię 35,9 px przy piśmie 39 px.

   Poprzednie podejście wymieniało selektory po jednym i za każdym razem coś
   wypadało poza listę (nagłówek procesu, nagłówek kontaktu, nagłówki na
   podstronach). Dlatego reguła jest jedna, obejmuje KAŻDY nagłówek w treści
   i w stopce, i świadomie używa `!important`: to nadpisanie dla klasy urządzeń,
   które musi wygrać z kilkudziesięcioma regułami desktopowymi.
   ========================================================================= */
@media (max-width:899px),(hover:none){
  main h1, main h2, main h3, main h4,
  .ftr h2, .ftr h3, .ftr h4,
  .cin-promise, .mf-dx, .st-num, .pz-claim, .lbl-name {
    letter-spacing: -.012em !important;
    line-height: 1.1 !important;
    font-variation-settings: 'wght' 700, 'wdth' 97, 'opsz' 32 !important;
    text-wrap: pretty;
  }
  /* Cyfry zostają ciężkie — to grafika, nie tekst do czytania. */
  .mf-num, .st-num, .pz-num { font-variation-settings: 'wght' 800, 'wdth' 92 !important }
}

/* =========================================================================
   WIARYGODNOŚĆ — trzy komponenty, jeden arkusz.

   Siedzą w parts.css, bo występują i na stronie głównej (home.css), i na
   podstronach (page.css) — wpisane do jednego z tamtych arkuszy zniknęłyby
   na połowie serwisu (pułapka „dwa arkusze, jedna poprawka”). Kolory idą
   z tokenów: na stronie głównej `.sc.ink` podmienia ich znaczenie, na
   podstronach robią to wprost reguły `.ink .…` niżej.
   ========================================================================= */

/* --- linia zaufania: trzy fakty pod wezwaniem --- */
.proof-line{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:8px clamp(14px,1.8vw,26px);font-size:var(--fs-sm);line-height:1.35;color:var(--fg-muted);
  text-wrap:pretty}
.proof-line li{display:flex;align-items:center;gap:9px;min-width:0}
.proof-line a{color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;
  text-decoration-color:color-mix(in srgb,var(--imp) 45%,transparent)}
.proof-line a:hover{color:var(--imp);text-decoration-color:var(--imp)}
.pl-ic{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--imp-soft);color:var(--imp)}
.pl-ic svg{width:12px;height:12px}
.pl-ic--star{background:color-mix(in srgb,var(--warm) 18%,transparent);color:var(--warm)}
/* w hero: pod rzędem z przyciskiem, na warstwie treści (nad molekułą) */
.hero-proof{position:relative;z-index:3;max-width:74ch}
.ink .proof-line{color:rgba(244,242,250,.66)}
.ink .proof-line a:hover{color:var(--glow)}
.ink .pl-ic{background:rgba(255,255,255,.1);color:#fff}

/* --- zaufanie: kto to robi + co mówią klienci --- */
.trust .wrap{display:grid;gap:clamp(28px,4vw,56px)}
.trust h2{margin:0;font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:.94;
  font-variation-settings:'wght' 740,'wdth' 94,'opsz' 96;font-size:clamp(2.2rem,1rem + 4.4vw,5rem);
  max-width:16ch;text-wrap:balance}
.trust h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Nagłówek nie może wchodzić pod przyklejony pasek: sekcja dostaje górny
   luz o wysokość paska ponad zwykły rytm. `.sc.flowing.trust` bije
   `.sc.flowing` z home.css, który ładuje się PO parts.css. */
.sc.flowing.trust{padding-top:calc(var(--ui-hdr-stuck,78px) + clamp(40px,6vh,96px));scroll-margin-top:var(--ui-hdr-stuck,78px)}
.tr{display:grid;gap:clamp(24px,4vw,64px);align-items:start}
@media (min-width:1000px){
  .tr{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .tr--one{grid-template-columns:minmax(0,1fr)}
  .tr--one>*{max-width:68ch}
}
/* kafel osoby: szkło jak reszta kart, zdjęcie w kole, bez kwadratów */
.tr-who{display:grid;gap:clamp(14px,2vw,24px);padding:clamp(20px,2.6vw,32px);max-width:44ch;
  border-radius:var(--r-lg);background:rgba(255,255,255,.38);backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px var(--line);align-content:start}
@media (min-width:640px){.tr-who--photo{grid-template-columns:auto minmax(0,1fr);align-items:start}}
.tr-photo{display:block;width:clamp(72px,7vw,104px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 3px var(--bg),0 0 0 4.5px color-mix(in srgb,var(--imp) 40%,transparent)}
.tr-photo img{width:100%;height:100%;object-fit:cover}
.tr-body{display:grid;gap:clamp(8px,1.2vh,14px);min-width:0}
.tr-role{margin:0;font:600 var(--fs-xs)/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--imp)}
.tr-name{margin:0;font-family:var(--font-display);letter-spacing:-.03em;line-height:1.05;
  font-variation-settings:'wght' 680,'wdth' 96;font-size:clamp(1.25rem,1.05rem + .9vw,1.8rem)}
.tr-text{margin:0;color:var(--fg-muted);font-size:var(--fs-sm);line-height:1.55;max-width:40ch;text-wrap:pretty}
.tr-body .svc-go{margin-top:clamp(4px,.8vh,10px)}
.tr-say{display:grid;gap:clamp(14px,2vh,24px);min-width:0}
.tr-say-h{margin:0;font-family:var(--font-display);letter-spacing:-.03em;line-height:1.05;
  font-variation-settings:'wght' 660,'wdth' 96;font-size:clamp(1.2rem,1rem + 1vw,1.9rem)}

/* --- zdania klientów: lista cytatów na liniach, każdy z odnośnikiem do historii --- */
.say-list{list-style:none;margin:0;padding:0;display:grid}
.say-list li{padding:clamp(16px,2.4vh,28px) 0;border-top:1px solid var(--line)}
.say-list li:last-child{border-bottom:1px solid var(--line)}
.say-list .say{max-width:60ch;gap:var(--s-3)}
.say-list .say blockquote{font-size:clamp(1.12rem,1rem + .8vw,1.6rem);line-height:1.25}
.say-list .say blockquote::before{content:"\201E";color:var(--imp);margin-right:.06em}
.say-list .say blockquote::after{content:"\201D";color:var(--imp);margin-left:.06em}
.say figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px clamp(12px,1.6vw,22px)}
.say figcaption b{font-weight:600;color:var(--fg)}
.say figcaption a{font-size:var(--fs-xs);color:var(--imp);text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1.5px}
.say figcaption a:hover{color:var(--glow)}
.ink .say-list li{border-color:rgba(244,242,250,.16)}
.ink .say-list .say blockquote::before,.ink .say-list .say blockquote::after{color:var(--glow)}
.ink .say figcaption b{color:#F4F2FA}
.ink .say figcaption a{color:var(--glow)}
.ink .say figcaption a:hover{color:#fff}
.ink .tr-role{color:var(--glow)}

/* --- kadr usługi: widełki ceny przy dowodzie --- */
.cin-price{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;min-width:0}
.cin-price span{font:600 var(--fs-xs)/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint)}
.cin-price b{font-family:var(--font-display);letter-spacing:-.03em;font-variation-settings:'wght' 700,'wdth' 94;
  font-size:clamp(1.15rem,1rem + .8vw,1.7rem);color:var(--fg)}
.cin-price small{flex-basis:100%;font-size:var(--fs-xs);color:var(--fg-muted)}

/* --- kontakt: co daje rozmowa + formularz zamiast pustego kalendarza --- */
.rx-gets{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:52ch}
.rx-gets li{display:grid;grid-template-columns:minmax(9em,auto) minmax(0,1fr);gap:var(--s-4);align-items:baseline;
  padding:clamp(7px,1.1vh,12px) 0;border-top:1px solid var(--line);font-size:var(--fs-sm);line-height:1.4;color:var(--fg-muted)}
.rx-gets li:last-child{border-bottom:1px solid var(--line)}
.rx-gets b{font-family:var(--font-display);font-size:clamp(1rem,.92rem + .4vw,1.24rem);letter-spacing:-.02em;
  font-variation-settings:'wght' 660,'wdth' 96;color:var(--fg)}
.rx-msg{display:grid;gap:clamp(18px,2.8vh,30px);align-content:start;max-width:72ch}
.rx-msg-lead{margin:0;font-size:clamp(1rem,.92rem + .5vw,1.32rem);line-height:1.45;color:var(--fg-muted);max-width:40ch;text-wrap:pretty}
.rx-msg-grid{display:grid;gap:clamp(14px,2vh,22px)}
@media (min-width:700px){.rx-msg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rx-msg-wide{grid-column:1/-1}
.rx-msg-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) clamp(16px,2.4vw,32px)}
.rx-msg-foot .form-note{margin:0;font-size:var(--fs-xs);max-width:36ch}
/* na ciemnym: pole rysuje się jasną kreską, a nie tokenem strony jasnej */
.ink .rx-gets li{border-color:rgba(244,242,250,.16)}
.ink .rx-gets b{color:#F4F2FA}
.ink .rx-gets li,.ink .rx-msg-lead{color:rgba(244,242,250,.66)}
.ink .field label{color:rgba(244,242,250,.5)}
.ink .field input,.ink .field textarea{color:#F4F2FA;box-shadow:inset 0 -2px 0 rgba(244,242,250,.24)}
.ink .field input:focus,.ink .field textarea:focus{box-shadow:inset 0 -2.5px 0 var(--glow)}
.ink .field input::placeholder,.ink .field textarea::placeholder{color:rgba(244,242,250,.32)}

@media (max-width:899px),(hover:none){
  .proof-line{gap:8px 14px;font-size:var(--fs-xs)}
  .hero-proof{max-width:100%}
  .trust h2{font-size:clamp(1.9rem,8.4vw,3rem)}
  .tr-who{padding:clamp(18px,5vw,26px);max-width:none}
  .sc.flowing.trust{padding-top:calc(var(--ui-hdr-stuck,78px) + 20px)}
  .rx-gets li{grid-template-columns:1fr;gap:2px;padding-block:clamp(8px,2.6vw,14px)}
  .rx-msg-foot .rx-cta{width:100%;justify-content:center}
  .cin-price{margin-top:4px}
}

/* =========================================================================
   WEJSCIE KADRU: OKNO SIE MALUJE, WYKRES SIE RYSUJE.

   Alternatywa dla realizacji i case study. Zadnej oprawy na obrazie — zrzut
   strony i wykres wyniku zostaja ostre i pelne, bo to one sa tresci. Efekt
   jest w WEJSCIU: okno maluje sie od gory jak wczytywana strona (kreska
   postepu w pasku adresu), wykres odslania sie od lewej, jakby linia byla
   rysowana, a wzdluz krawedzi biegnie cienki promien. Po ruchu nie zostaje
   nic. Stan poczatkowy tylko pod `html[data-anim]` (skrypt dziala, ruch
   dozwolony) — inaczej kadr jest po prostu widoczny.
   ========================================================================= */
html[data-anim] .mock[data-load] .screen{clip-path:inset(0 0 100% 0)}
html[data-anim] .mock[data-load].in-view .screen{animation:seo-paint .9s cubic-bezier(.22,.7,.2,1) .1s forwards}
@keyframes seo-paint{to{clip-path:inset(0 0 0 0)}}
html[data-anim] .mock[data-load] .chrome b{position:relative}
html[data-anim] .mock[data-load] .chrome b::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:0 50%;opacity:0;border-radius:2px}
html[data-anim] .mock[data-load].in-view .chrome b::after{animation:seo-bar 1.05s cubic-bezier(.22,.7,.2,1) forwards}
@keyframes seo-bar{
  0%{transform:scaleX(0);opacity:0}
  12%{opacity:1}
  70%{transform:scaleX(1);opacity:1}
  100%{transform:scaleX(1);opacity:0}
}
/* wykres: odslona od lewej + promien biegnacy wzdluz krawedzi odslony */
html[data-anim] .shot[data-draw]{
  -webkit-mask-image:linear-gradient(90deg,#000 0 46%,rgba(0,0,0,0) 58%);
  mask-image:linear-gradient(90deg,#000 0 46%,rgba(0,0,0,0) 58%);
  -webkit-mask-size:220% 100%;mask-size:220% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:100% 0;mask-position:100% 0}
html[data-anim] .shot[data-draw].in-view{animation:seo-draw 1.15s cubic-bezier(.25,.65,.2,1) forwards}
@keyframes seo-draw{to{-webkit-mask-position:0 0;mask-position:0 0}}
html[data-anim] .shot[data-draw]::before{content:"";position:absolute;top:-4%;bottom:-4%;left:0;width:2px;z-index:2;
  background:linear-gradient(180deg,transparent,var(--imp) 22%,var(--glow) 78%,transparent);
  opacity:0;pointer-events:none;filter:blur(.4px)}
html[data-anim] .shot[data-draw].in-view::before{animation:seo-pen 1.15s cubic-bezier(.25,.65,.2,1) forwards}
@keyframes seo-pen{
  0%{left:0;opacity:0}
  10%{opacity:.9}
  82%{opacity:.9}
  100%{left:100%;opacity:0}
}

/* =========================================================================
   ZDJECIE JAKO POLE ROZDZIALU.

   Kadr nie jest obiektem na stronie, tylko polem, po ktorym idzie tresc:
   pelna szerokosc rozdzialu, wash w barwach palety na wierzchu, rozpuszczenie
   ku dolowi w tlo strony. Nie ma krawedzi do wtapiania, bo krawedz wychodzi
   poza ekran; nie ma ramy, maski ani figury na obrazie.

   Wash jest UKOSNY: mocny po stronie tekstu, slaby po przeciwnej — zdjecie
   widac tam, gdzie nikt nie czyta. Czytelnosc pisma nie zalezy wtedy od tego,
   co akurat jest na fotografii.
   ========================================================================= */
.sv-hero--field{position:relative;isolation:isolate;overflow:hidden}
.sv-hero--field>.wrap{position:relative;z-index:1}
.hero-field{position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 58%,transparent 100%)}
.hero-field img{width:100%;height:100%;object-fit:cover;object-position:center right;display:block}
.hero-field::after{content:"";position:absolute;inset:0;background:
  linear-gradient(100deg,var(--paper) 12%,rgba(251,250,247,.90) 34%,rgba(251,250,247,.52) 62%,rgba(251,250,247,.34) 100%),
  radial-gradient(72% 68% at 6% 8%,rgba(75,59,255,.20),transparent 72%),
  radial-gradient(64% 60% at 96% 92%,rgba(255,61,139,.16),transparent 72%),
  radial-gradient(48% 44% at 88% 6%,rgba(255,176,58,.12),transparent 72%)}
@media (min-width:1000px){
  .sv-hero--field .crumbs,.sv-hero--field h1,.sv-hero--field .lead,
  .sv-hero--field .sv-intro,.sv-hero--field .acts,.sv-hero--field .hero-proof{max-width:min(58ch,62%)}
}
/* telefon: zdjecie schodzi nizej i mocniej gasnie - tekst idzie przez caly kadr */
@media (max-width:999px){
  .hero-field img{object-position:center}
  .hero-field::after{background:
    linear-gradient(to bottom,var(--paper) 8%,rgba(251,250,247,.92) 34%,rgba(251,250,247,.88) 72%,rgba(251,250,247,.94) 100%),
    radial-gradient(80% 60% at 10% 6%,rgba(75,59,255,.18),transparent 74%)}
}

/* =========================================================================
   ZDJECIE W OPRAWIE.

   Jedna regula na kazde zdjecie w serwisie, poziome i pionowe. Kadr
   z `data-mol-in` trzyma naturalne proporcje obrazka; page.js wycina z niego
   szesciokat o katach 120 stopni (poziomy: wierzcholki po bokach, pionowy:
   gora i dol) z szeroko rozmytym brzegiem - przez obrzeze przeswituje pole
   z tla, a na obrzeze zdjecia wchodzi welon w barwach pola (::after) - a zywa
   czasteczka przelacza sie w tej sekcji na wariant `frame`: rysunek
   z odcinkow jak serotonina w hero (lamany szesciokat, podwojne wiazania,
   odgalezienia), o proporcjach tego zdjecia (MolStage.frame w molecule.js).
   Zadnej ramy, zadnego cienia i zadnego farbowania; zdjecie w oryginale.
   Od 1000 px pierscien trzyma zdjecie; nizej figura jest szeptem, ale
   szesciokat zostaje - ksztalt ma byc ten sam na kazdym ekranie.

   Selektory podwojone (`.shot.shot`) celowo: regula musi wygrac z maska
   z home.css/page.css, a te arkusze raz stoja przed parts.css, raz po nim.
   ========================================================================= */
.shot.shot{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:0;background:transparent;
  box-shadow:none;border:0;filter:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.shot.shot::before{content:none}
.shot.shot::after{inset:0;border-radius:0;opacity:1;-webkit-clip-path:none;clip-path:none}
.shot.shot img{display:block;width:100%;border-radius:0;opacity:1;filter:none;-webkit-clip-path:none;clip-path:none}
.shot.shot.sv-shot{background:transparent;box-shadow:none}
.ink .shot.shot{background:transparent;box-shadow:none}
.shot-fig .shot.shot img,.co-map .shot.shot img{height:100%;object-fit:cover}
/* kadr w oprawie: zdjecie w swoich proporcjach (poziome i pionowe), maske
   szesciokata liczy page.js z wymiarow; tu tylko wymiar i brak ramy */
.shot.shot[data-mol-in]{display:block;border-radius:0;height:auto;width:-moz-fit-content;width:fit-content;max-width:100%;margin-inline:auto}
.shot.shot[data-mol-in] img{display:block;width:auto;height:auto;max-width:100%;max-height:64vh;object-fit:fill}
/* kadr trzymany w calosci (wykres, okno przegladarki): zaden zanik, zadne
   ciecie - liczb i zrzutow nie wolno zaslaniac. Oprawa przyrasta z zewnatrz. */
.shot.shot[data-mol-hold],.mock[data-mol-hold],[data-mol-hold]{-webkit-mask-image:none;mask-image:none}
/* welon: to samo tlo, ktore lezy pod strona (papier + barwy pola), nalozone
   na obrzeze zdjecia - srodek zostaje czysty, brzeg wchodzi w scene.
   W rozdziale ciemnym welon jest atramentowy, jak .veil nad polem. */
.shot.shot[data-mol-in]::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(75% 75% at 50% 50%,transparent 38%,rgba(251,250,247,.62) 100%),
  radial-gradient(60% 55% at 6% 10%,rgba(75,59,255,.30),transparent 100%),
  radial-gradient(60% 55% at 94% 90%,rgba(255,61,139,.26),transparent 100%),
  radial-gradient(45% 40% at 88% 8%,rgba(255,176,58,.18),transparent 100%),
  radial-gradient(45% 40% at 10% 92%,rgba(0,184,169,.14),transparent 100%)}
.ink .shot.shot[data-mol-in]::after{background:
  radial-gradient(75% 75% at 50% 50%,transparent 38%,rgba(8,7,15,.66) 100%),
  radial-gradient(60% 55% at 6% 10%,rgba(75,59,255,.34),transparent 100%),
  radial-gradient(60% 55% at 94% 90%,rgba(255,61,139,.28),transparent 100%)}
@media (min-width:1000px){
  .sv-hero--shot .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:clamp(24px,3vw,48px)}
  .sv-hero--shot h1{font-size:clamp(2.2rem,1.2rem + 3.6vw,4.3rem)}
  .sv-hero--shot .sv-shot{align-self:center;margin-top:0}
}

/* =========================================================================
   REALIZACJE — zrealizowane strony (osobny typ treści, nie case study).
   Siatka okien przeglądarki: na stronie głównej, na liście i pod szczegółem.
   ========================================================================= */
/* Siatka okien: parts.css, bo strona glowna nie laduje page.css. */
.sites{display:grid;gap:clamp(20px,2.8vw,38px);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.sites-sec .wrap{display:grid;gap:clamp(24px,3.6vw,48px)}
.sites-head{display:grid;gap:clamp(12px,1.8vh,22px);max-width:70ch}
.sites-sec h2{margin:0;font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:.94;
  font-variation-settings:'wght' 740,'wdth' 94,'opsz' 96;font-size:clamp(2.2rem,1rem + 4.4vw,5rem);
  max-width:16ch;text-wrap:balance}
.sites-sec h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sites-sec .lead{margin:0;font-size:var(--fs-lead);max-width:56ch;text-wrap:pretty}
.sites-sec.ink .lead{color:rgba(244,242,250,.66)}
.sites-sec.ink .btn--g{color:#F4F2FA;box-shadow:inset 0 0 0 1.5px rgba(244,242,250,.32)}
.sites-sec.ink .btn--g:hover{box-shadow:inset 0 0 0 1.5px rgba(244,242,250,.6)}
/* Strona główna ładuje home.css PO parts.css i niesie starą wersję `.mock`
   z prototypu (ekran z wyściółką) — karta realizacji ma wyższą wagę. */
.sites .site-card{display:block;text-decoration:none;color:inherit;position:relative;overflow:hidden;
  background:rgba(255,255,255,.55);backdrop-filter:blur(14px)}
.ink .sites .site-card{background:rgba(255,255,255,.06)}
.sites .site-card .screen{display:block;padding:0;aspect-ratio:16/10;overflow:hidden;background:var(--bg-sunken)}
.sites .site-card .screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.sites .site-card .chrome{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.ink .sites .site-card .chrome{border-bottom-color:rgba(244,242,250,.16)}
.sites .site-card .chrome i{width:9px;height:9px;border-radius:50%;flex:none}
.sites .site-card .chrome b{flex:1;min-width:0;margin-left:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:500 var(--fs-xs)/1 var(--font-mono);color:var(--fg-muted);
  background:rgba(255,255,255,.55);padding:7px 12px;border-radius:var(--r-full);border:1px solid var(--line)}
.ink .sites .site-card .chrome b{background:rgba(255,255,255,.07);border-color:rgba(244,242,250,.16);color:rgba(244,242,250,.66)}
.sites .site-card .chrome .live{display:flex;align-items:center;gap:6px;flex:none;
  font:600 var(--fs-xs)/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ok)}
.sites .site-card .chrome .live em{width:7px;height:7px;border-radius:50%;background:var(--ok);font-style:normal}
.sites .site-card .cap{display:grid;gap:3px;padding:clamp(13px,1.7vw,18px)}
.sites .site-card .cap b{font-family:var(--font-display);font-size:clamp(1rem,.94rem + .3vw,1.18rem);
  letter-spacing:-.02em;font-variation-settings:'wght' 680,'wdth' 96;color:var(--fg)}
.sites .site-card .cap span{font:500 var(--fs-xs)/1.5 var(--font-mono);letter-spacing:.06em;color:var(--fg-faint)}
.ink .sites .site-card .cap b{color:#F4F2FA}
.ink .sites .site-card .cap span{color:rgba(244,242,250,.55)}
.sites .site-card:hover .cap b{color:var(--imp)}
.ink .sites .site-card:hover .cap b{color:var(--glow)}
@media (max-width:899px),(hover:none){
  .sites-sec h2{font-size:clamp(1.9rem,8.4vw,3rem)}
  .sites{grid-template-columns:1fr}
}