/* ListingLab — style strony. Tokeny: projekt/ds/tokens.json. Komponenty: projekt/*.dc.html. */

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

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/montserrat-strzalki.woff2") format("woff2");
  unicode-range: U+2190, U+2192, U+25BE; /* ← → ▾ */
}

/* ---------- Tokeny ---------- */
:root {
  --brand-navy: #29333e;
  --brand-teal: #29c9af;
  --brand-yellow: #febf30;
  --brand-mist: #f8fdfc;
  --surface: var(--brand-mist);
  --surface-raised: #ffffff;
  --surface-alt: #f3f5f4;
  --ink: var(--brand-navy);
  --ink-muted: #5b6672;
  --accent: var(--brand-teal);
  --accent-text: #0e7a6a;
  --border: #d4dcdb;
  --field-border: #5b6672;
  --chip-border: #8a949e;
  /* na ciemnym tle */
  --dark-bg: #1f272f;
  --dark-muted: #a9b4bf;
  --dark-line: #45515d;
  /* stany formularzy */
  --error: #b42318;
  --error-bg: #fdf0ee;

  --font: "Montserrat", system-ui, sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 40px; --space-6: 64px;
  --radius-sm: 4px; --radius-md: 8px; --radius-leaf: 50%; --radius-full: 9999px;
  --leaf: 8px 50% 8px 8px;           /* wyróżniony blok: liść tylko w prawym górnym rogu */
  --container: 1200px;
  --gutter: 40px;
  --ease-out: cubic-bezier(.16, .84, .24, 1);
}
@media (max-width: 1023px) { :root { --gutter: 24px; } }
@media (max-width: 759px)  { :root { --gutter: 16px; } }

/* ---------- Podstawy ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; } /* kotwice nie chowają się pod przyklejonym nagłówkiem (60 px + oddech) */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }   /* płynne przewijanie do kotwic (#cennik, #kontakt…) */
}
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; }
img { height: auto; }
a { color: var(--accent-text); }
a:hover { color: var(--ink); }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand-navy); outline-offset: 2px; }
[data-dark] :focus-visible { outline-color: var(--brand-teal); }
[data-dark] .kf :focus-visible, [data-dark] .zw-form :focus-visible, .hd-mm :focus-visible { outline-color: var(--brand-navy); }
main:focus { outline: none; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; }
.skip:focus { left: 16px; z-index: 20; background: var(--brand-navy); color: var(--brand-mist); padding: 8px 16px; border-radius: var(--radius-md); }
.muted { color: var(--ink-muted); }
.link-btn {
  min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--accent-text); font: 700 14px/16px var(--font); text-decoration: underline;
}

/* Znak sekcji: dwa kwadraty 16 px stykające się rogami */
.mark { position: relative; display: block; flex: none; width: 32px; height: 32px; }
.mark > span { position: absolute; width: 16px; height: 16px; }
.mark > span:first-child { left: 0; top: 0; border-radius: 3px; background: var(--mark-1, var(--brand-navy)); }
.mark > span:last-child { left: 16px; top: 16px; border-radius: 3px 10px 3px 3px; background: var(--mark-2, var(--brand-teal)); }

/* Wyróżnienie w nagłówkach hero — klasę nakładamy na wewnętrzny <span> */
.kw { padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.kw-teal { background: var(--brand-teal); color: var(--brand-navy); }   /* hero granatowe */
.kw-yellow { background: var(--brand-navy); color: var(--brand-yellow); } /* hero żółte */
.kw-onteal { background: var(--brand-navy); color: var(--brand-teal); }   /* hero morskie */

/* ---------- Nagłówek (makieta Naglowek) ---------- */
/* Nagłówek przyklejony: żółty pasek odjeżdża z treścią (top = minus jego wysokość, liczona w site.js),
   granatowy pasek zostaje i po przewinięciu robi się niższy (.is-stuck). */
.hd { position: sticky; top: calc(-1 * var(--urgent-h, 36px)); z-index: 30; }
.hd a { text-decoration: none; }
.hd-urgent { background: var(--brand-yellow); color: var(--brand-navy); }
.hd-urgent p {
  margin: 0 auto; padding-block: 8px; font-size: 13px; line-height: 20px; font-weight: 600;
  display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: center; text-align: center;
}
.hd-urgent a { color: var(--brand-navy); text-decoration: underline; }
.hd-bar { background: var(--brand-navy); color: var(--brand-mist); border-bottom: 1px solid var(--dark-line); }
.hd-nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; transition: min-height .25s var(--ease-out); }
.hd.is-stuck .hd-nav { min-height: 60px; }
.hd-logo { display: flex; }
.hd-logo img { display: block; width: 135px; height: 36px; transform-origin: left center; transition: transform .25s var(--ease-out); }
.hd.is-stuck .hd-logo img { transform: scale(.85); }
.hd.is-stuck .hd-cta, .hd.is-stuck .hd-menu-btn { min-height: 40px; }
.hd-links {
  list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 28px;
  font-size: 14px; line-height: 22px; font-weight: 600;
}
.hd-l {
  color: var(--brand-mist); transition: color .18s ease;
  min-height: 44px; display: inline-flex; align-items: center;
}
button.hd-l { padding: 0; border: 0; background: none; font: 600 14px/22px var(--font); cursor: pointer; }
.hd-l:hover, .hd-l.is-on, .hd-l[aria-expanded="true"] { color: var(--brand-teal); }
.hd-cta {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--radius-md);
  background: var(--brand-teal); color: var(--brand-navy); font-size: 14px; line-height: 16px; font-weight: 700;
  transition: background-color .18s ease, color .18s ease;
}
.hd-cta:hover { background: var(--brand-mist); color: var(--brand-navy); }
.hd-menu-btn {
  display: none; min-height: 44px; padding: 0 16px; border-radius: var(--radius-md); border: 0;
  background: var(--brand-teal); color: var(--brand-navy); font: 700 13px/16px var(--font); cursor: pointer;
}
.hd-mm a { transition: color .18s ease; }
.hd-mm a:hover { color: var(--accent-text); }
.hd-gh { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 16px; font-weight: 800; }
.hd-gh > span { width: 10px; height: 10px; border-radius: 3px; flex: none; }

.hd-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--brand-mist); color: var(--brand-navy); border-bottom: 2px solid var(--brand-navy);
  animation: hdIn .28s var(--ease-out) both;
}
.hd-mega-grid {
  padding-top: 32px; padding-bottom: 36px; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .9fr); gap: 32px;
}
.hd-group { display: flex; flex-direction: column; gap: 6px; }
.hd-group .hd-gh { margin-bottom: 8px; }
.hd-group a { color: var(--brand-navy); font-size: 15px; line-height: 22px; font-weight: 600; padding: 4px 0; }
.hd-help {
  background: var(--brand-navy); color: var(--brand-mist); border-radius: var(--leaf); padding: 24px;
  display: flex; flex-direction: column; gap: 10px; align-self: start;
}
.hd-help-t { margin: 0; font-size: 17px; line-height: 23px; font-weight: 800; }
.hd-help-p { margin: 0; font-size: 13px; line-height: 20px; color: var(--dark-muted); }
.hd-help a { color: var(--brand-teal); font-size: 14px; line-height: 20px; font-weight: 800; }
.hd-help a:hover { color: var(--brand-mist); }

.hd-menu {
  max-height: calc(100dvh - 60px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--brand-mist); color: var(--brand-navy); padding: 8px var(--gutter) 24px;
  display: flex; flex-direction: column; gap: 4px; animation: hdIn .28s var(--ease-out) both;
}
.hd-menu-group { border-bottom: 1px solid var(--border); padding: 12px 0; }
.hd-menu-group .hd-gh { margin-bottom: 4px; gap: 10px; color: var(--ink-muted); }
.hd-menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.hd-menu-grid a { color: var(--brand-navy); font-size: 15px; line-height: 20px; font-weight: 600; padding: 10px 0; min-height: 44px; }
.hd-menu-link {
  color: var(--brand-navy); min-height: 56px; display: flex; align-items: center;
  border-bottom: 1px solid var(--border); font-size: 17px; line-height: 22px; font-weight: 800;
}
.hd-menu-cta {
  margin-top: 16px; display: flex; align-items: center; justify-content: center; min-height: 56px;
  border-radius: var(--radius-md); background: var(--brand-navy); color: var(--brand-mist) !important;
  font-size: 15px; line-height: 16px; font-weight: 800;
}
.hd-menu-note { margin: 8px 0 0; font-size: 13px; line-height: 20px; color: var(--ink-muted); text-align: center; }
.hd-menu-note a { color: var(--accent-text); font-weight: 700; }
@keyframes hdIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (max-width: 1023px) {
  .hd-links, .hd-cta, .hd-mega { display: none !important; }
  .hd-menu-btn { display: inline-flex; align-items: center; }
}
@media (min-width: 1024px) {
  .hd-menu { display: none !important; }
}

/* Przycisk „na górę” — pojawia się po przewinięciu ok. 2 ekranów */
.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 25; width: 48px; height: 48px; border-radius: var(--radius-full);
  border: 0; background: var(--brand-navy); color: var(--brand-teal); font: 800 20px/1 var(--font); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s var(--ease-out), visibility 0s linear .25s, background-color .18s ease, color .18s ease;
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top:hover { background: var(--brand-teal); color: var(--brand-navy); }
.to-top:focus-visible { outline: 2px solid var(--brand-teal); outline-offset: 2px; }
@media (max-width: 759px) { .to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; } }

/* ---------- Stopka (makieta Stopka) ---------- */
.ft { background: var(--dark-bg); color: var(--dark-muted); padding: 64px 40px 24px; }
.ft a { text-decoration: none; transition: color .18s ease; }
.ft a:hover { color: var(--brand-teal) !important; }
.ft-in { max-width: var(--container); margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.ft-top { display: flex; flex-wrap: wrap; gap: 40px; }
.ft-brand { flex: 1 1 240px; display: flex; flex-direction: column; gap: 16px; }
.ft-brand img { display: block; width: 135px; height: 36px; }
.ft-brand p { margin: 0; font-size: 14px; line-height: 22px; }
.ft-mail { color: var(--brand-mist); font-size: 15px; line-height: 22px; font-weight: 700; }
.ft-col { flex: 1 1 170px; display: flex; flex-direction: column; gap: 4px; }
.ft-col p { margin: 0 0 8px; font-size: 13px; line-height: 16px; font-weight: 700; color: var(--brand-mist); }
.ft-col a { color: var(--dark-muted); font-size: 14px; line-height: 22px; padding: 4px 0; }
.ft-bottom {
  padding-top: 24px; border-top: 1px solid var(--dark-line); display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 8px 24px; font-size: 12px; line-height: 18px; font-weight: 500;
}
.ft-bottom a { color: var(--dark-muted); }
@media (max-width: 759px) { .ft { padding: 48px 16px 24px; } }

/* ---------- Pola formularzy (wspólne) ---------- */
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field > label { font-size: 13px; line-height: 16px; font-weight: 700; }
.opt { font-weight: 500; color: var(--ink-muted); }
.in {
  width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid var(--field-border); border-radius: var(--radius-sm);
  background: #fff; font: 400 16px/26px var(--font); color: var(--ink); transition: border-color .18s ease;
}
textarea.in { padding: 14px 16px; resize: vertical; }
.in-select {
  appearance: none; padding-right: 44px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2329333e' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center;
}
/* „Jakie?” pokazujemy dopiero po wyborze „Inne” (bez JS — przez :has) */
.ref-other { display: none; }
form:has(select[name="referral"] option[value="inne"]:checked) .ref-other { display: flex; }
.in::placeholder { color: var(--ink-muted); opacity: .85; }
.in:focus { border-color: var(--brand-navy); outline: 3px solid var(--brand-teal); outline-offset: 0; }
.in[aria-invalid="true"] { border-color: var(--error); background: var(--error-bg); }
.field-hint { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.field-err { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--error); }
.fine { margin: 0; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.form-error {
  flex-basis: 100%; padding: 12px 16px; border-radius: var(--radius-md); background: var(--error-bg); color: var(--error);
  font-size: 14px; line-height: 20px; font-weight: 600;
}
.form-error a { color: var(--error); }
/* Pole-pułapka na boty — niewidoczne dla ludzi */
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Ukryte natywne kontrolki chipów (radio/checkbox), widoczna jest etykieta */
.chip-in { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.chip-in:focus-visible + label { outline: 2px solid var(--brand-navy); outline-offset: 2px; }

/* ---------- Formularz kontaktowy (makieta Kontakt) ---------- */
.kf { container-type: inline-size; background: #fff; border-radius: var(--radius-md); color: var(--ink); width: 100%; }
.kf-form, .kf-ok { padding: 32px; }
.kf-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.kf-topics, .kf-urgent, .field-wide, .kf-foot { grid-column: 1 / -1; }
.kf-topics { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kf-topics legend { padding: 0; margin-bottom: 8px; font-size: 13px; line-height: 16px; font-weight: 700; }
.kf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kf-chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--radius-full);
  border: 1px solid var(--chip-border); background: #fff; color: var(--brand-navy);
  font: 600 13px/16px var(--font); cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.kf-chip:hover { border-color: var(--brand-navy); }
.chip-in:checked + .kf-chip { border-color: var(--brand-navy); background: var(--brand-navy); color: var(--brand-mist); font-weight: 700; }
.kf-urgent {
  display: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 14px 16px; border-radius: var(--radius-md); background: var(--brand-yellow); color: var(--brand-navy);
}
.kf:has(input[name="topic"][value="konto"]:checked) .kf-urgent { display: flex; }
.kf-urgent span { font-size: 14px; line-height: 20px; font-weight: 700; }
.kf-urgent a { color: var(--brand-navy); font-size: 16px; line-height: 20px; font-weight: 800; white-space: nowrap; }
.kf-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.kf-foot .fine { max-width: 360px; }
.kf-btn {
  min-height: 56px; padding: 0 36px; border: 0; border-radius: var(--radius-md); background: var(--brand-navy); color: var(--brand-mist);
  font: 700 15px/16px var(--font); cursor: pointer; transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.kf-btn:hover { background: var(--brand-teal); color: var(--brand-navy); }
.kf-btn:active { transform: scale(.97); }
.kf-btn:disabled, .zw-cta:disabled { cursor: progress; opacity: .7; }
.kf-ok { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; animation: kfok .5s var(--ease-out) both; }
.kf-ok:focus { outline: none; }
.kf-ok-icon { width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--brand-teal); color: var(--brand-navy); display: flex; align-items: center; justify-content: center; }
.kf-ok-t { margin: 0; font-size: 24px; line-height: 30px; font-weight: 800; }
.kf-ok-p { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
@keyframes kfok { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@container (max-width: 559px) {
  .kf-form, .kf-ok { padding: 20px; }
  .kf-form { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Zamówienie rejestracji (makieta Zamowienie2) ---------- */
.zw { position: relative; padding-bottom: 14px; color: var(--ink); }
.zw-edge { position: absolute; left: 0; bottom: 0; display: block; }
.zw-form {
  position: relative; background: #fff; border-radius: 8px 8px 0 0; padding: clamp(20px, 5%, 28px);
  display: flex; flex-direction: column; gap: 22px; width: 100%; font-variant-numeric: tabular-nums;
}
.zw-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.zw-head h2 { margin: 0; font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -0.01em; }
.zw-badge { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ink-muted); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 8px; }
.zw-set { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.zw-set legend { padding: 0; margin-bottom: 8px; font-size: 13px; line-height: 16px; font-weight: 700; }
.zw-svcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 8px; }
.zw-svc, .zw-chip, .zw-row { cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
.zw-svc:hover, .zw-chip:hover, .zw-row:hover { border-color: var(--brand-navy); }
.zw-svc:active, .zw-chip:active, .zw-row:active { transform: scale(.96); }
.zw-svc {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 64px; padding: 12px;
  border-radius: var(--radius-sm); border: 2px solid var(--border); background: #fff;
}
.chip-in:checked + .zw-svc { border-color: var(--brand-navy); background: var(--surface-alt); }
.zw-svc-t { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 18px; }
.zw-svc-d { font-size: 12px; line-height: 16px; font-weight: 600; opacity: .8; padding-left: 30px; }
.zw-box {
  flex: none; width: 20px; height: 20px; border-radius: var(--radius-sm); border: 1px solid var(--field-border);
  color: transparent; display: flex; align-items: center; justify-content: center;
}
.chip-in:checked + label .zw-box { border-color: var(--brand-teal); background: var(--brand-teal); color: var(--brand-navy); }
.zw-countries { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.zw-c { display: flex; }
.zw-chip {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 52px; padding: 8px 12px;
  border-radius: var(--radius-sm); border: 1px solid var(--chip-border); background: #fff; font-size: 13px; line-height: 16px; font-weight: 600;
}
.zw-code { font-size: 11px; line-height: 14px; font-weight: 800; opacity: .75; }
.chip-in:checked + .zw-chip { border-color: var(--brand-navy); background: var(--brand-navy); color: var(--brand-mist); }
.zw-all { align-self: flex-start; padding: 0 4px; line-height: 18px; display: none; }
.js .zw-all { display: inline-block; }
.js .zw-countries:not(.is-all) .zw-rest:not(:has(.chip-in:checked)) { display: none; }
.zw-x { display: none; }
.zw:has(#zw-svc-epr:checked) .zw-x-epr, .zw:has(#zw-svc-weee:checked) .zw-x-weee { display: flex; }
.zw-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; min-height: 48px; padding: 8px 12px;
  border-radius: var(--radius-sm); border: 1px solid var(--chip-border); background: #fff; font-size: 14px; line-height: 20px; font-weight: 500;
}
.chip-in:checked + .zw-row { border-color: var(--brand-navy); background: var(--surface-alt); }
.zw-row-t { display: flex; align-items: center; gap: 12px; text-align: left; }
.zw-row-n { font-size: 12px; font-weight: 600; color: var(--ink-muted); text-align: right; }
.zw-tail { display: flex; flex-direction: column; gap: 22px; }
.zw-sum { border-top: 2px solid var(--brand-navy); padding-top: 16px; display: flex; flex-direction: column; gap: 4px; }
.zw-empty { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.zw-line { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; line-height: 22px; animation: zwIn .32s cubic-bezier(.2, .8, .2, 1) both; }
.zw-line > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.zw-qty { font-weight: 700; white-space: nowrap; }
.zw-total {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 16px;
  padding-top: 12px; margin-top: 8px; border-top: 1px dashed var(--field-border);
}
.zw-total-l { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.zw-total-h { font-size: 13px; line-height: 16px; font-weight: 700; }
.zw-stamp {
  display: inline-block; border: 3px solid var(--accent-text); color: var(--accent-text); border-radius: 6px; padding: 4px 10px;
  font-size: 12px; line-height: 14px; font-weight: 900; letter-spacing: .08em; transform: rotate(-6deg); white-space: nowrap;
  animation: stamp .45s cubic-bezier(.2, 1.6, .4, 1) both;
}
.zw-count { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.zw-count > span:first-child { font-size: 44px; line-height: 44px; font-weight: 800; letter-spacing: -0.02em; }
.zw-count-l { font-size: 16px; line-height: 20px; font-weight: 700; color: var(--ink-muted); }
.zw-rec-h { margin: 12px 0 0; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ink-muted); }
.zw-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; }
.zw-fields .field { gap: 6px; }
.zw-fields .in { padding: 0 14px; }
.zw-cta {
  display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 16px; border: 0; border-radius: var(--radius-md);
  background: var(--brand-teal); color: var(--brand-navy); font: 800 15px/16px var(--font); cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.zw-cta:hover { background: var(--brand-navy); color: var(--brand-mist); }
.zw-tail .fine { line-height: 17px; }
.zw-ok { border-top: 2px solid var(--brand-navy); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; animation: zwIn .32s cubic-bezier(.2, .8, .2, 1) both; }
.zw-ok:focus { outline: none; }
.zw-ok .zw-stamp { font-size: 13px; line-height: 16px; }
.zw-ok-t { margin: 0; font-size: 22px; line-height: 28px; font-weight: 800; }
.zw-ok-p { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
@keyframes zwIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes stamp { from { opacity: 0; transform: rotate(-14deg) scale(1.8); } to { opacity: 1; transform: rotate(-6deg) scale(1); } }

/* =====================================================================
   STRONY (etap 2): wspólne elementy sekcji
   ===================================================================== */
.sec { padding: 96px var(--gutter); }
.sec-in { max-width: var(--container); margin: 0 auto; }
.alt { background: var(--surface-alt); }
.dark { background: var(--brand-navy); color: var(--brand-mist); }
.col { display: flex; flex-direction: column; }
.h2 { margin: 0; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; }
.acc { color: var(--accent-text); }
.dark .acc { color: var(--brand-teal); }
.kicker { margin: 0; font-size: 13px; line-height: 16px; font-weight: 700; color: var(--brand-teal); }
.head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 48px; }
.head-row > p { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.two { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; align-items: start; }

/* Przyciski */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 28px;
  border-radius: var(--radius-md); border: 0; font: 800 15px/16px var(--font); text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn:active { transform: scale(.97); }
.btn-teal { background: var(--brand-teal); color: var(--brand-navy); }
.btn-teal:hover { background: var(--brand-mist); color: var(--brand-navy); }
.btn-navy { background: var(--brand-navy); color: var(--brand-mist); }
.btn-navy:hover { background: var(--brand-teal); color: var(--brand-navy); }
.btn-ring:hover { background: var(--brand-mist); color: var(--brand-navy); box-shadow: inset 0 0 0 2px var(--brand-navy); }
.btn-out { border: 1px solid var(--dark-muted); color: var(--brand-mist); font-weight: 700; }
.btn-out:hover { border-color: var(--brand-teal); color: var(--brand-teal); }
.btn-line { border: 1px solid var(--h-line, currentColor); color: inherit; font-weight: 700; padding: 0 24px; }
.btn-line:hover { border-color: currentColor; color: inherit; }

/* Lista z „ptaszkami” */
.ticks { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.ticks li { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--border); font-size: 16px; line-height: 24px; font-weight: 600; }
.dark .ticks li { border-top-color: var(--dark-line); }
.tick { flex: none; margin-top: 4px; width: 16px; height: 16px; border-radius: var(--radius-sm); background: var(--brand-teal); color: var(--brand-navy); display: flex; align-items: center; justify-content: center; }

/* Ścieżka (breadcrumbs) */
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--h-muted, inherit); }
.crumbs a { color: var(--h-fg, inherit); }

/* FAQ (details) */
.faq { display: flex; flex-direction: column; border-top: 2px solid var(--brand-navy); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer; list-style: none; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 17px; line-height: 26px; font-weight: 700; padding: 8px 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq .pl {
  flex: none; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--brand-navy); color: var(--brand-mist);
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 500; transition: transform .25s ease;
}
.faq details[open] .pl { transform: rotate(45deg); }
.faq details > p { margin: 0 0 24px; max-width: 640px; font-size: 16px; line-height: 26px; color: var(--ink-muted); }

/* Sekcja kontaktu na ciemnym tle */
.ct-mail { color: var(--brand-mist); font-weight: 800; text-decoration: none; overflow-wrap: anywhere; transition: color .2s ease; }
.ct-mail:hover { color: var(--brand-teal); }
.ct-lead { margin: 0; font-size: 16px; line-height: 26px; color: #d9e0e6; }

/* Animacje wejścia (z makiet) */
.ln { display: block; overflow: hidden; padding-bottom: .08em; }
.ln > span { display: inline-block; animation: rise .8s var(--ease-out) both; }
.ln:nth-child(2) > span { animation-delay: .1s; }
.ln:nth-child(3) > span { animation-delay: .2s; }
.ln:nth-child(4) > span { animation-delay: .3s; }
/* Spokojne wejście: lekkie pojawienie się zamiast wjazdu z dołu */
@keyframes rise { from { opacity: 0; transform: translateY(.18em); } to { opacity: 1; transform: none; } }
.fade { animation: fade .8s .3s ease both; }
.fade2 { animation: fade .8s .45s ease both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.img-in { animation: imgIn 1s .1s var(--ease-out) both; }
@keyframes imgIn { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
/* Odsłanianie przy przewijaniu (site.js, IntersectionObserver): tylko elementy poniżej ekranu, raz, delikatnie.
   Bez JS wszystko jest od razu widoczne. */
.js .rv { opacity: 0; transform: translateY(12px); transition: opacity .7s ease, transform .7s var(--ease-out); transition-delay: var(--rv-delay, 0s); }
.js .rv.is-in { opacity: 1; transform: none; }

/* FAQ: płynne rozwijanie odpowiedzi (przeglądarki z ::details-content; pozostałe otwierają od razu) */
@media (prefers-reduced-motion: no-preference) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: hidden; transition: height .3s var(--ease-out), content-visibility .3s allow-discrete; }
  .faq details[open]::details-content { height: auto; }
}

/* =====================================================================
   SZABLON USŁUGI (makieta Usluga)
   ===================================================================== */
.us-hero { background: var(--h-bg); color: var(--h-fg); padding: 32px var(--gutter) 88px; }
.us-hero.c-S { --h-bg: var(--brand-navy); --h-fg: var(--brand-mist); --h-muted: var(--dark-muted); --h-sub: #d9e0e6; --h-line: var(--dark-muted); --h-rule: var(--dark-line); --h-card: #1f2a3a; }
.us-hero.c-K { --h-bg: var(--brand-yellow); --h-fg: var(--brand-navy); --h-muted: var(--brand-navy); --h-sub: var(--brand-navy); --h-line: var(--brand-navy); --h-rule: var(--brand-navy); --h-card: #b08746; }
.us-hero.c-T { --h-bg: var(--brand-teal); --h-fg: var(--brand-navy); --h-muted: var(--brand-navy); --h-sub: var(--brand-navy); --h-line: var(--brand-navy); --h-rule: var(--brand-navy); --h-card: #74c1bc; }
.us-hero .sec-in { display: flex; flex-direction: column; gap: 28px; }
.us-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 48px; align-items: center; }
.us-main { min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.us-h1 { margin: 0; font-size: clamp(44px, 5vw, 68px); line-height: 1.04; font-weight: 800; letter-spacing: -0.025em; }
.us-lead { margin: 0; max-width: 580px; font-size: 18px; line-height: 1.6; font-weight: 500; color: var(--h-sub); }
.us-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.us-hero .btn-cta { background: var(--brand-navy); color: var(--brand-mist); }
.us-hero.c-S .btn-cta { background: var(--brand-teal); color: var(--brand-navy); }
.us-facts { margin: 8px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; }
.us-facts > div { border-top: 2px solid var(--h-rule); padding-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.us-facts dt { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--h-muted); }
.us-facts dd { margin: 0; font-size: 15px; line-height: 22px; font-weight: 700; }
.us-img { min-width: 0; justify-self: center; width: 100%; }
.us-img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--leaf); background: var(--h-card); }
.us-why { display: flex; flex-direction: column; gap: 20px; }
.us-why > p { margin: 0; font-size: 17px; line-height: 28px; color: #3d4752; }
.us-note { border-radius: var(--radius-md); padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; background: var(--surface-alt); }
.us-note.is-tel { background: var(--brand-yellow); }
.us-note p { margin: 0; font-size: 15px; line-height: 24px; }
.us-note .us-note-h { line-height: 22px; font-weight: 800; }
.us-note a { color: var(--brand-navy); font-size: 20px; line-height: 28px; font-weight: 800; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.steps li { border-top: 2px solid var(--brand-navy); padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.steps .n { font-size: 52px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; color: var(--accent-text); }
.steps h3 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 800; }
.steps p { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.us-extra-p { margin: 0; font-size: 17px; line-height: 28px; color: #d9e0e6; }
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.tier { display: flex; flex-direction: column; gap: 16px; padding: 36px; border-radius: var(--radius-md); background: #fff; color: var(--brand-navy); border: 1px solid var(--border); }
.tier.is-dark { border: 0; border-radius: var(--leaf); background: var(--brand-navy); color: var(--brand-mist); }
.tier-tag { align-self: flex-start; padding: 6px 12px; border-radius: var(--radius-full); font-size: 12px; line-height: 16px; font-weight: 800; background: var(--surface-alt); color: var(--brand-navy); }
.tier.is-dark .tier-tag { background: var(--brand-teal); }
.tier h3 { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -0.015em; }
.tier > p { margin: 0; font-size: 16px; line-height: 26px; color: var(--ink-muted); }
.tier.is-dark > p { color: #d9e0e6; }
.tier ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; flex-grow: 1; }
.tier li { padding: 12px 0; border-top: 1px solid var(--border); font-size: 15px; line-height: 22px; font-weight: 600; }
.tier.is-dark li { border-top-color: var(--dark-line); }
.tier .btn { align-self: flex-start; min-height: 52px; padding: 0 24px; }
.scope-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 48px; align-items: start; }
.price-box { background: var(--brand-navy); color: var(--brand-mist); border-radius: var(--leaf); padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 24px; }
.pb { display: flex; flex-direction: column; gap: 8px; }
.pb + .pb { padding-top: 16px; border-top: 1px solid var(--dark-line); }
.pb-l { margin: 0; font-size: 13px; line-height: 16px; font-weight: 700; color: var(--brand-teal); }
.pb-v { margin: 0; font-size: 38px; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; }
.pb-v.is-long { font-size: 26px; }
.pb-n { margin: 0; font-size: 14px; line-height: 22px; color: var(--dark-muted); }
.price-box .btn { margin-top: 8px; min-height: 52px; }
.price-box .fine { color: var(--dark-muted); line-height: 18px; }
.rel-sec { padding: 72px var(--gutter); }
.rel-h { margin: 0; font-size: 22px; line-height: 28px; font-weight: 800; }
.rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rel {
  display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: #fff; color: var(--brand-navy); text-decoration: none; transition: background-color .2s ease, color .2s ease;
}
.rel:hover { background: var(--brand-navy); color: var(--brand-mist); }
.rel-t { display: flex; align-items: center; gap: 8px; font-size: 17px; line-height: 24px; font-weight: 800; }
.rel-ar { display: inline-block; color: var(--accent-text); transition: transform .25s ease; }
.rel:hover .rel-ar { transform: translateX(6px); color: var(--brand-teal); }
.rel-d { font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.rel:hover .rel-d { color: var(--dark-muted); }
.us-ct-h { font-size: 22px; line-height: 30px; }

@media (max-width: 1100px) {
  .two, .tiers, .scope-grid { grid-template-columns: minmax(0, 1fr); }
  .price-box { position: static; }
  .us-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 240px); gap: 32px; }
  .us-facts { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  .sec { padding: 64px var(--gutter); }
  .rel-sec { padding: 48px var(--gutter); }
  .h2 { font-size: 28px; }
  .us-hero { padding: 24px var(--gutter) 56px; }
  .us-grid { grid-template-columns: minmax(0, 1fr); }
  .us-img { justify-self: start; max-width: 240px; }
  .us-h1 { font-size: 38px; }
  .us-lead { font-size: 17px; }
  .steps, .ticks, .rel-grid { grid-template-columns: minmax(0, 1fr); }
  .tier { padding: 24px; }
  .tier h3 { font-size: 24px; }
  .pb-v { font-size: 32px; }
  .pb-v.is-long { font-size: 24px; }
}

/* =====================================================================
   STRONA GŁÓWNA (makieta Home4)
   ===================================================================== */
.pg-home .h2 { font-size: clamp(30px, 3.5vw, 50px); line-height: 1.12; }
.disp2 { margin: 0; font-size: clamp(36px, 4.2vw, 60px); line-height: 1.07; font-weight: 800; letter-spacing: -0.025em; }
.hm-hero { background: var(--brand-navy); color: var(--brand-mist); }
.hm-hero-grid {
  max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 64px var(--gutter) 72px;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 48px; align-items: center;
}
.hm-hero-txt { min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.hm-h1 { margin: 0; font-size: clamp(40px, 5vw, 72px); line-height: 1.06; font-weight: 800; letter-spacing: -0.025em; }
.hm-kick { font-size: clamp(20px, 2vw, 28px); line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; color: var(--dark-muted); margin-bottom: 14px; }
.hm-rotl { font-size: .94em; }
.rot { display: inline-block; height: 1.12em; overflow: hidden; vertical-align: top; color: var(--brand-teal); }
.rot > span { display: flex; flex-direction: column; animation: rot 12.5s cubic-bezier(.75, 0, .25, 1) 1.4s infinite; }
.rot > span > span { display: block; height: 1.12em; line-height: 1.12em; white-space: nowrap; }
@keyframes rot { 0%, 16% { transform: translateY(0); } 20%, 36% { transform: translateY(-1.12em); } 40%, 56% { transform: translateY(-2.24em); } 60%, 76% { transform: translateY(-3.36em); } 80%, 96% { transform: translateY(-4.48em); } 100% { transform: translateY(-5.6em); } }
.hm-lead { margin: 0; max-width: 540px; font-size: 18px; line-height: 28px; font-weight: 500; color: #d9e0e6; }
.hm-media { min-width: 0; position: relative; justify-self: center; width: 100%; }
.hm-vid { border-radius: var(--leaf); overflow: hidden; background: #1f2a3a; aspect-ratio: 4 / 5; animation: imgIn 1s .1s var(--ease-out) both; }
.hm-vid video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-chip {
  position: absolute; left: -64px; bottom: 40px; background: var(--brand-mist); color: var(--brand-navy); border-radius: var(--radius-md);
  padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; animation: bob 6s ease-in-out infinite;
}
.hm-chip span:first-child { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); }
.hm-chip span:last-child { font-size: 19px; line-height: 24px; font-weight: 800; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.bubs { position: absolute; left: 22%; top: 18%; width: 1px; height: 1px; z-index: 1; }
.bub { position: absolute; border-radius: var(--radius-full); background: var(--brand-yellow); animation: bub 5s ease-in infinite; opacity: 0; }
@keyframes bub { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-200px) scale(1); opacity: 0; } }
.hm-stats { border-top: 1px solid var(--dark-line); }
.hm-stats dl { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hm-stat { padding: 30px 24px 34px; display: flex; flex-direction: column-reverse; gap: 6px; }
.hm-stat + .hm-stat { border-left: 1px solid var(--dark-line); }
.hm-stat dt { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--dark-muted); }
.hm-stat dd { margin: 0; font-size: 60px; line-height: 1; font-weight: 800; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 6px; }
.hm-stat .u { font-size: .42em; font-weight: 700; color: var(--brand-teal); }
@property --n { syntax: '<integer>'; inherits: false; initial-value: 0; }
.cnt { counter-reset: n var(--n); animation: cnt 1.8s .6s var(--ease-out) both; }
.cnt::before { content: counter(n); }
@keyframes cnt { from { --n: 0; } }
.mq-wrap { background: var(--brand-teal); color: var(--brand-navy); overflow: hidden; padding: 16px 0; }
.mq { display: flex; width: max-content; animation: mq 40s linear infinite; }
.mq-wrap:hover .mq { animation-play-state: paused; }
.mq > span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font-size: 18px; line-height: 24px; font-weight: 800; white-space: nowrap; }
.mq > span::after { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--brand-navy); }
@keyframes mq { to { transform: translateX(-50%); } }

/* Z czym przychodzisz — zakładki */
.hm-sel { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 48px; align-items: start; }
.hm-tabs { display: flex; flex-direction: column; border-bottom: 1px solid var(--border); }
.hm-tab {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 70px; padding: 16px; border: 0; border-top: 1px solid var(--border);
  border-radius: 0; background: transparent; color: var(--ink-muted); font: 800 20px/27px var(--font); letter-spacing: -0.01em; text-align: left; cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.hm-tab:hover { color: var(--brand-navy); }
.hm-tab .n { font-size: 12px; line-height: 16px; font-weight: 700; flex: none; width: 24px; color: var(--ink-muted); }
.hm-tab .q { flex: 1; }
.hm-tab .ar { color: var(--brand-teal); flex: none; display: inline-block; opacity: 0; transform: translateX(-8px); transition: transform .25s ease, opacity .25s ease; }
.hm-tab[aria-selected="true"] { background: var(--brand-navy); color: var(--brand-mist); }
.hm-tab[aria-selected="true"] .n { color: var(--brand-teal); }
.hm-tab[aria-selected="true"] .ar, .hm-tab:hover .ar { opacity: 1; transform: none; }
.pnl { animation: pnl .4s var(--ease-out) both; }
.pnl img { animation: pimg .5s ease both; }
@keyframes pnl { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pimg { from { opacity: 0; } to { opacity: 1; } }
.js .hm-panel:not(.is-on), .js .pl-panel:not(.is-on) { display: none; }
.hm-panels { display: flex; flex-direction: column; gap: 16px; }
.hm-panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.hm-panel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-pbody { padding: 30px 28px; display: flex; flex-direction: column; gap: 18px; }
.hm-pa { margin: 0; font-size: 30px; line-height: 36px; font-weight: 800; letter-spacing: -0.01em; color: var(--accent-text); }
.hm-pitems { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 23px; }
.hm-pitems li { display: flex; gap: 12px; }
.hm-urgent { margin: 0; padding: 12px 14px; border-radius: var(--radius-md); background: var(--brand-yellow); font-size: 14px; line-height: 20px; font-weight: 700; }
.hm-urgent a { color: var(--brand-navy); white-space: nowrap; }
.hm-pfoot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.hm-price { font-size: 16px; line-height: 24px; font-weight: 800; }
.hm-pfoot .btn { min-height: 48px; padding: 0 20px; font-size: 14px; font-weight: 700; }

/* Rejestracje (żółta sekcja) */
.hm-rej { background: var(--brand-yellow); color: var(--brand-navy); }
.hm-rej-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 48px; align-items: start; }
.hm-rej-txt { min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.hm-rej-txt > p { margin: 0; max-width: 480px; font-size: 17px; line-height: 27px; font-weight: 500; }
.stamp-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: end; }
.stamp-grid img { width: 100%; height: auto; display: block; border-radius: var(--leaf); }
.rule-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.rule-list > div, .rule-list > li { border-top: 2px solid var(--brand-navy); padding-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.rule-list dt, .rule-list .k { font-size: 12px; line-height: 16px; font-weight: 700; }
.rule-list dd { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; }
.rule-list a { color: var(--brand-navy); }

/* Indeks usług */
.ix-grid { display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr); gap: 48px; align-items: start; }
.ix-side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 32px; }
.ix-side > p { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 18px; font-weight: 700; }
.legend li { display: flex; align-items: center; gap: 10px; }
.legend span { width: 12px; height: 12px; border-radius: var(--radius-sm); }
.ix-fig { margin: 8px 0 0; display: flex; flex-direction: column; gap: 10px; }
.ix-fig img { display: block; width: 100%; max-width: 260px; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--leaf); background: var(--brand-navy); }
.ix-fig img.ixp { animation: ixp .45s var(--ease-out) both; }
@keyframes ixp { from { clip-path: inset(0 0 100% 0 round 8px 50% 8px 8px); transform: translateY(10px); } to { clip-path: inset(0 0 0 0 round 8px 50% 8px 8px); transform: none; } }
.ix-fig figcaption { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; font-weight: 700; }
.dot { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; }
.c-S-dot { background: var(--brand-navy); } .c-K-dot { background: var(--brand-yellow); } .c-T-dot { background: var(--brand-teal); }
.ix-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--brand-navy); }
.ix-list li { border-bottom: 1px solid var(--border); }
.ix {
  position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, .9fr) 32px; gap: 8px 24px; align-items: center;
  padding: 22px 8px; color: var(--brand-navy); text-decoration: none;
  transition: background-color .25s ease, color .25s ease, padding-left .3s var(--ease-out);
}
.ix-n { display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 16px; font-weight: 800; color: var(--ink-muted); }
.ix-t { font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -0.015em; }
.ix-d { font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.ix-ar { font-size: 22px; font-weight: 800; color: var(--accent-text); justify-self: end; }
.ix:hover { background: var(--brand-navy); color: var(--brand-mist); padding-left: 24px; }
.ix:hover .ix-d, .ix:hover .ix-n { color: var(--dark-muted); }
.ix:hover .ix-ar { color: var(--brand-teal); }
/* Stałe podświetlenie wybranej pozycji tylko tam, gdzie obok widać podgląd obrazka */
@media (min-width: 1001px) {
  .ix[data-on="true"] { background: var(--brand-navy); color: var(--brand-mist); padding-left: 24px; }
  .ix[data-on="true"] .ix-d, .ix[data-on="true"] .ix-n { color: var(--dark-muted); }
  .ix[data-on="true"] .ix-ar { color: var(--brand-teal); }
}
.ix:focus-visible { outline-offset: -2px; outline-color: var(--brand-teal); }

/* Platformy (morska sekcja) */
.hm-plat { background: var(--brand-teal); color: var(--brand-navy); }
.plat-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 48px; align-items: start; }
.plat-main { min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.plat-main > p { margin: -12px 0 0; max-width: 560px; font-size: 17px; line-height: 27px; font-weight: 500; }
.plat-tabs { display: flex; flex-direction: column; gap: 14px; }
.plat-row { display: flex; flex-wrap: wrap; gap: 8px; }
.plat-row.more { align-items: center; gap: 6px 16px; }
.plat-row.more > span { font-size: 13px; line-height: 16px; font-weight: 700; }
.ptab {
  min-height: 52px; padding: 0 24px; border-radius: var(--radius-full); border: 2px solid var(--brand-navy); background: transparent; color: var(--brand-navy);
  font: 800 17px/18px var(--font); cursor: pointer; transition: background-color .2s ease, color .2s ease;
}
.ptab:hover { background: var(--brand-mist); color: var(--brand-navy); }
.ptab[aria-selected="true"] { background: var(--brand-navy); color: var(--brand-mist); }
.ptab2 {
  min-height: 44px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--brand-navy);
  font: 600 14px/18px var(--font); cursor: pointer; transition: color .2s ease, border-color .2s ease;
}
.ptab2:hover { border-color: var(--brand-navy); }
.ptab2[aria-selected="true"] { border-bottom-color: var(--brand-navy); font-weight: 800; }
.pl-panels { display: flex; flex-direction: column; gap: 32px; }
.pl-panel { display: flex; flex-direction: column; gap: 20px; }
.pl-lead { margin: 0; font-size: 30px; line-height: 36px; font-weight: 800; letter-spacing: -0.01em; }
.pl-items { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.pl-items li { display: flex; gap: 12px; padding: 12px 0; border-top: 2px solid var(--brand-navy); font-size: 16px; line-height: 24px; font-weight: 600; }
.pl-panel .btn { align-self: flex-start; min-height: 52px; padding: 0 24px; font-weight: 700; }
.plat-img { min-width: 0; justify-self: center; width: 100%; }
.plat-img img { display: block; width: 100%; height: auto; border-radius: var(--leaf); border: 2px solid var(--brand-navy); }

/* Konsultacje (ciemna sekcja) */
.hm-kons { overflow: hidden; }
.kons-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
.kons-img { min-width: 0; position: sticky; top: 32px; }
.kons-img img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.kons-body { min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.kons-p { margin: 0; font-size: 18px; line-height: 29px; font-weight: 500; color: #d9e0e6; }
.kons-q { margin: 0; padding-left: 16px; border-left: 2px solid var(--brand-teal); font-size: 15px; line-height: 24px; color: var(--dark-muted); }
.kons-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kons-steps li { border-top: 2px solid var(--brand-teal); padding-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.kons-steps .v { font-size: 22px; line-height: 28px; font-weight: 800; }
.kons-steps .d { font-size: 13px; line-height: 19px; color: var(--dark-muted); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.kons-note { margin: 0; font-size: 14px; line-height: 22px; color: var(--dark-muted); }

/* Cennik */
.price-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 24px 48px; }
.pg-h { margin: 0 0 8px; font-size: 13px; line-height: 16px; font-weight: 800; color: var(--accent-text); }
.pg-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--border); }
.pg-s { font-size: 15px; line-height: 22px; font-weight: 600; }
.pg-s small { display: block; font-size: 13px; line-height: 19px; font-weight: 400; color: var(--ink-muted); }
.pg-c { font-size: 17px; line-height: 22px; font-weight: 800; white-space: nowrap; }
.pg-c.is-ind { font-size: 14px; font-weight: 600; color: var(--ink-muted); }
.pg-note { margin: 0; padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface-alt); font-size: 13px; line-height: 20px; }
.hm-cennik .head-row > p { max-width: 460px; font-size: 13px; line-height: 20px; font-weight: 600; }

/* FAQ i kontakt na stronie głównej */
.side-sticky { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 24px; }
.side-sticky > p { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.side-sticky a { font-weight: 700; }
.faq-grid, .ct-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.ct-side { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.ct-box { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 1px solid var(--dark-line); }
.ct-box .ct-mail { font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; }
.ct-box p { margin: 6px 0 0; font-size: 14px; line-height: 22px; color: var(--dark-muted); }
.ct-box p a { color: var(--brand-teal); font-weight: 700; white-space: nowrap; }

@media (max-width: 1180px) {
  .hm-rej-grid, .kons-grid, .ct-grid, .plat-grid, .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .kons-img, .side-sticky, .ix-side { position: static; }
  .kons-img { max-width: 420px; }
  .plat-img { max-width: 360px; justify-self: start; }
}
@media (max-width: 1000px) {
  .hm-hero-grid, .hm-sel, .ix-grid { grid-template-columns: minmax(0, 1fr); }
  .ix-fig { display: none; }
  .hm-media { max-width: 380px; }
}
@media (max-width: 759px) {
  .pg-home .h2 { font-size: 30px; line-height: 36px; }
  .disp2 { font-size: 36px; line-height: 40px; }
  .hm-hero-grid { padding: 36px var(--gutter) 44px; gap: 40px; }
  .hm-media { width: 84%; }
  .hm-h1 { font-size: 38px; line-height: 42px; }
  .hm-kick { font-size: 22px; }
  .hm-rotl { font-size: .86em; }
  .hm-chip { left: -8px; }
  .hm-stats dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-stat { padding: 20px 12px; }
  .hm-stat:nth-child(3) { border-left: 0; }
  .hm-stat dd { font-size: 40px; }
  .hm-tabs { flex-direction: row; gap: 8px; overflow-x: auto; padding: 0 var(--gutter) 8px; margin: 0 calc(-1 * var(--gutter)); border-bottom: 0; }
  .hm-tab {
    flex: none; width: auto; gap: 8px; min-height: 48px; padding: 10px 16px; border-radius: var(--radius-full); border: 1px solid var(--chip-border);
    background: #fff; color: var(--brand-navy); font: 700 14px/18px var(--font); white-space: nowrap;
  }
  .hm-tab[aria-selected="true"] { border-color: var(--brand-navy); }
  .hm-tab .n { width: auto; }
  .hm-tab .ar { display: none; }
  .hm-sel { gap: 16px; }
  .hm-panel { grid-template-columns: minmax(0, 1fr); }
  .hm-panel img { height: 260px; }
  .hm-pbody { padding: 24px 20px; }
  .hm-pa, .pl-lead { font-size: 23px; line-height: 29px; }
  .stamp-grid { grid-template-columns: 120px minmax(0, 1fr); }
  .ix { grid-template-columns: 48px minmax(0, 1fr) 24px; padding: 16px 0; }
  .ix:hover { padding-left: 8px; }
  .ix-t { font-size: 20px; }
  .ix-d { grid-column: 2 / 3; }
  .pl-items { grid-template-columns: minmax(0, 1fr); }
  .plat-img { width: 70%; }
  .kons-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-box .ct-mail { font-size: 26px; }
}

/* =====================================================================
   REJESTRACJE EPR (makieta EPR4)
   ===================================================================== */
.pg-epr .sec { padding: 120px var(--gutter); }
.pg-epr .h2 { font-size: 52px; line-height: 56px; }
.epr-hero { background: var(--brand-yellow); color: var(--brand-navy); padding: 40px var(--gutter) 120px; --h-fg: var(--brand-navy); }
.epr-hero .sec-in { display: flex; flex-direction: column; gap: 32px; }
.epr-hero .crumbs ol { gap: 8px; }
.epr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 48px; align-items: start; }
.epr-main { min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.epr-h1 { margin: 0; font-size: clamp(44px, 5.4vw, 80px); line-height: 1; font-weight: 800; letter-spacing: -0.025em; }
.epr-h1 .ln { padding-bottom: .06em; }
.epr-lead { margin: 0; max-width: 520px; font-size: 18px; line-height: 28px; font-weight: 500; }
.epr-hero .stamp-grid { grid-template-columns: 210px minmax(0, 1fr); }
.epr-hero .rule-list { gap: 12px; }
.epr-hero .rule-list .v { font-size: 16px; line-height: 24px; font-weight: 600; }
.epr-price { max-width: 440px; display: flex; flex-direction: column; gap: 6px; }
.epr-price p { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.epr-price p.big { font-size: 22px; line-height: 28px; font-weight: 800; color: var(--brand-navy); }
.kr-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.kr-list li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--border); }
.kr-list .c { font-size: 12px; line-height: 16px; font-weight: 800; color: var(--accent-text); }
.kr-list .nm { font-size: 15px; line-height: 20px; font-weight: 700; }
.kr-list .nt { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); }
.epr-note { margin: 0; max-width: 820px; font-size: 15px; line-height: 25px; color: var(--ink-muted); }
.epr-note strong { color: var(--brand-navy); }
.wc-wrap { display: flex; flex-wrap: wrap; gap: 48px; }
.wc-wrap > div:first-child { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.wc-wrap > .card { flex: 1 1 380px; min-width: 0; align-self: flex-start; }
.wc-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.wc-steps li { display: flex; gap: 16px; align-items: flex-start; }
.wc-steps .num { flex: none; width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--brand-teal); color: var(--brand-navy); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.wc-steps strong { display: block; font-size: 16px; line-height: 24px; }
.wc-steps .d { display: block; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.card h3 { margin: 0; font-size: 21px; line-height: 28px; font-weight: 700; }
.card ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 22px; display: flex; flex-direction: column; gap: 6px; }
.card .small { margin: 0; font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.lift { transition: transform .25s ease, border-color .25s ease; }
.lift:hover { transform: translateY(-4px); border-color: var(--brand-navy); }
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.offers .card ul { gap: 4px; flex-grow: 1; }
.offer-foot { margin: 0; padding-top: 16px; border-top: 1px solid var(--border); display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.offer-foot span:first-child { font-size: 16px; line-height: 24px; font-weight: 800; }
.offer-foot span:last-child { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); }
.faq-plain { max-width: 880px; display: flex; flex-direction: column; gap: 24px; }
.faq-plain .faq summary { min-height: 56px; font-size: 16px; line-height: 26px; }
.faq-plain .faq details > p { max-width: none; }
.inne { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; }
.inne a { display: flex; flex-direction: column; gap: 4px; min-height: 44px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 20px; color: var(--brand-navy); text-decoration: none; }
.inne .t { font-size: 16px; line-height: 24px; font-weight: 700; }
.inne .d { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.h3-sm { margin: 0; font-size: 21px; line-height: 28px; font-weight: 700; }
.pg-epr .ct-mail { font-size: 30px; line-height: 1.2; }
@media (max-width: 1180px) {
  .epr-grid { grid-template-columns: minmax(0, 1fr); }
  .epr-main { max-width: 560px; }
}
@media (max-width: 759px) {
  .pg-epr .sec { padding: 64px var(--gutter); }
  .pg-epr .h2 { font-size: 30px; line-height: 36px; }
  .epr-hero { padding: 24px var(--gutter) 64px; }
  .epr-h1 { font-size: 40px; line-height: 44px; }
  .epr-hero .stamp-grid { grid-template-columns: 120px minmax(0, 1fr); }
  .kr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-epr .ct-mail { font-size: 24px; }
}

/* =====================================================================
   STRONA TEKSTOWA (makieta Polityka) i 404
   ===================================================================== */
.pp-head { padding: 72px var(--gutter) 40px; }
.pp-head .sec-in { display: flex; flex-direction: column; gap: 16px; }
.pp-h1 { margin: 0; font-size: 64px; line-height: 1.05; font-weight: 800; letter-spacing: -0.025em; }
.pp-date { margin: 0; font-size: 14px; line-height: 22px; font-weight: 600; color: var(--ink-muted); }
.sk-head { padding-bottom: 8px; }
.sk-lead { margin: 0; max-width: 720px; font-size: 18px; line-height: 28px; color: var(--ink-muted); }
.pp-body { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) 96px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; }
.toc { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--border); padding-left: 18px; }
.toc a { font-size: 14px; line-height: 20px; font-weight: 600; padding: 6px 0; color: var(--ink-muted); text-decoration: none; }
.toc a:hover { color: var(--brand-navy); }
.tx { min-width: 0; max-width: 760px; }
.tx h2 { margin: 44px 0 14px; font-size: 24px; line-height: 31px; font-weight: 800; scroll-margin-top: 24px; }
.tx h2:first-child { margin-top: 0; }
.tx p { margin: 0 0 14px; font-size: 16px; line-height: 27px; color: #3d4752; }
.tx ul { margin: 0 0 14px; padding-left: 22px; font-size: 16px; line-height: 27px; color: #3d4752; }
.tx li { margin-bottom: 6px; }
.tx strong { color: var(--brand-navy); }
@media (max-width: 1000px) {
  .pp-body { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
}
@media (max-width: 759px) {
  .pp-head { padding: 40px var(--gutter) 24px; }
  .pp-h1 { font-size: 40px; }
  .pp-body { padding-bottom: 64px; }
}
.e404 { padding: 96px var(--gutter); }
.e404-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: center; }
.e404-txt { display: flex; flex-direction: column; gap: 24px; }
.e404 h1 { margin: 0; font-size: clamp(40px, 5vw, 68px); line-height: 1.04; font-weight: 800; letter-spacing: -0.025em; }
.e404 p { margin: 0; font-size: 18px; line-height: 28px; color: var(--ink-muted); max-width: 520px; }
.e404 img { display: block; width: 100%; max-width: 380px; height: auto; border-radius: var(--leaf); justify-self: center; }
.e404-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px; line-height: 22px; font-weight: 700; }
@media (max-width: 759px) {
  .e404 { padding: 56px var(--gutter); }
  .e404-grid { grid-template-columns: minmax(0, 1fr); }
  .e404 img { max-width: 240px; justify-self: start; }
}

/* =====================================================================
   BLOG (makiety Blog i Wpis)
   ===================================================================== */
.bl-hero { padding: 72px var(--gutter) 40px; }
.bl-h1 { margin: 0; font-size: clamp(48px, 6vw, 80px); line-height: 1.04; font-weight: 800; letter-spacing: -0.025em; }
.bl-lead { margin: 0; max-width: 460px; font-size: 17px !important; line-height: 27px !important; color: var(--ink-muted); }
.bl-cats { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.bl-chip {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--radius-full);
  border: 1px solid var(--chip-border); background: #fff; color: var(--brand-navy); font: 600 14px/16px var(--font); white-space: nowrap; text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.bl-chip:hover { border-color: var(--brand-navy); color: var(--brand-navy); }
.bl-chip[aria-current="true"] { background: var(--brand-navy); border-color: var(--brand-navy); color: var(--brand-mist); font-weight: 700; }
.bl-list { padding: 16px var(--gutter) 96px; }
.card-l { transition: transform .25s var(--ease-out), border-color .2s ease; text-decoration: none; }
.card-l:hover { transform: translateY(-4px); border-color: var(--brand-navy); }
.card-l:hover .card-t { color: var(--accent-text); }
.bl-feat { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); background: var(--brand-navy); color: var(--brand-mist); border: 1px solid var(--brand-navy); border-radius: var(--radius-md); overflow: hidden; }
.bl-feat:hover .card-t { color: var(--brand-teal); }
.bl-feat img { display: block; width: 100%; height: 420px; object-fit: cover; object-position: 50% 45%; background: var(--surface-alt); }
.bl-feat-body { padding: 48px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.bl-feat-meta { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; font-weight: 800; color: var(--brand-teal); }
.bl-feat h2 { margin: 0; font-size: 36px; line-height: 1.15; font-weight: 800; letter-spacing: -0.015em; color: var(--brand-mist); transition: color .2s ease; }
.bl-feat p { margin: 0; font-size: 16px; line-height: 26px; color: #d9e0e6; }
.bl-feat-more { font-size: 15px; line-height: 20px; font-weight: 800; color: var(--brand-teal); }
.bl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.bl-card { height: 100%; display: flex; flex-direction: column; gap: 14px; padding: 24px; background: #fff; border: 1px solid var(--border); border-top: 4px solid var(--border); border-radius: var(--radius-md); color: var(--brand-navy); }
.bl-card-meta { font-size: 12px; line-height: 16px; font-weight: 800; color: var(--ink-muted); }
.bl-card h3 { margin: 0; font-size: 20px; line-height: 27px; font-weight: 800; transition: color .2s ease; }
.bl-card p { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); flex-grow: 1; }
.bl-card-more { font-size: 14px; line-height: 20px; font-weight: 800; color: var(--accent-text); }
.bl-empty { margin: 0; padding: 32px; border: 1px dashed var(--chip-border); border-radius: var(--radius-md); font-size: 16px; line-height: 26px; color: var(--ink-muted); }
.bl-empty a { font-weight: 700; }
.bl-cta { padding: 64px var(--gutter); }
.bl-cta-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.bl-cta h2 { margin: 0; font-size: 36px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; }

.prog { position: fixed; left: 0; top: 0; width: 100%; height: 4px; background: var(--brand-teal); transform-origin: 0 50%; transform: scaleX(0); z-index: 40; }
@supports (animation-timeline: scroll()) {
  .prog { animation: prog linear both; animation-timeline: scroll(root); }
}
@keyframes prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.wp-preview { margin: 0; padding: 12px var(--gutter); background: var(--brand-yellow); font-size: 14px; font-weight: 700; text-align: center; }
.wp-head { padding: 64px var(--gutter) 40px; }
.wp-head-in { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.wp-crumbs { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); }
.wp-pill { display: inline-flex; align-self: flex-start; align-items: center; padding: 6px 12px; border-radius: var(--radius-full); font-size: 12px; line-height: 16px; font-weight: 800; }
.pill-y { background: var(--brand-yellow); color: var(--brand-navy); }
.pill-n { background: var(--brand-navy); color: var(--brand-mist); }
.pill-t { background: var(--brand-teal); color: var(--brand-navy); }
.wp-h1 { margin: 0; font-size: clamp(36px, 4vw, 54px); line-height: 1.08; font-weight: 800; letter-spacing: -0.025em; }
.wp-lead { margin: 0; font-size: 20px; line-height: 1.6; font-weight: 500; color: #3d4752; }
.wp-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--ink-muted); }
.wp-by { display: inline-flex; align-items: center; gap: 8px; color: var(--brand-navy); }
.wp-by img { width: 28px; height: 28px; border-radius: var(--radius-full); object-fit: cover; flex: none; background: var(--surface-alt); }
.wp-grid { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) 96px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; }
.toc-h { margin: 0 0 8px; font-size: 13px; line-height: 16px; font-weight: 800; color: var(--brand-navy); }
.art { min-width: 0; max-width: 720px; }
.art > h2 { margin: 48px 0 16px; font-size: 28px; line-height: 36px; font-weight: 800; letter-spacing: -.01em; scroll-margin-top: 80px; }
.art > h2:first-child { margin-top: 0; }
.art > h3 { margin: 32px 0 12px; font-size: 21px; line-height: 28px; font-weight: 800; }
.art > p, .art > blockquote { margin: 0 0 18px; font-size: 18px; line-height: 31px; color: #3d4752; }
.art > ol, .art > ul { margin: 0 0 18px; padding-left: 24px; font-size: 18px; line-height: 31px; color: #3d4752; }
.art li { margin-bottom: 8px; }
.art strong { color: var(--brand-navy); }
.art > blockquote { padding-left: 20px; border-left: 3px solid var(--brand-teal); font-style: italic; }
/* grafiki i tabele we wpisie (także z asystenta AI w LLHub) */
.art > figure { margin: 28px 0; }
.art figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px min(50%, 120px) 8px 8px; background: var(--surface-alt); }
.art figcaption { margin-top: 10px; font-size: 14px; line-height: 21px; color: var(--ink-muted, #5b6672); }
.art > table { width: 100%; margin: 0 0 24px; border-collapse: collapse; font-size: 16px; line-height: 25px; color: #3d4752; display: block; overflow-x: auto; }
.art th, .art td { padding: 10px 14px; border: 1px solid var(--border, #d4dcdb); text-align: left; vertical-align: top; }
.art th { background: var(--surface-alt); color: var(--brand-navy); font-weight: 800; }
.wp-cta { margin: 28px 0; background: var(--brand-yellow); border-radius: var(--leaf); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.wp-cta-t { margin: 0; font-size: 20px; line-height: 27px; font-weight: 800; color: var(--brand-navy); }
.wp-cta-p { margin: 0; font-size: 16px; line-height: 25px; color: var(--brand-navy); }
.wp-cta .btn { align-self: flex-start; min-height: 52px; padding: 0 24px; }
.wp-faq { margin-top: 48px; }
.wp-faq h2 { margin: 0 0 8px; padding-top: 24px; border-top: 2px solid var(--brand-navy); font-size: 28px; line-height: 36px; font-weight: 800; }
.wp-faq .faq { border-top: 0; }
.wp-faq .faq summary { min-height: 60px; font-size: 17px; line-height: 25px; }
.wp-author { margin-top: 40px; display: flex; gap: 16px; align-items: center; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; }
.wp-author img { width: 64px; height: 64px; border-radius: var(--radius-full); object-fit: cover; object-position: 50% 20%; flex: none; }
.wp-author p { margin: 0; font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.wp-author strong { display: block; font-size: 15px; color: var(--brand-navy); }
.wp-rel { padding: 80px var(--gutter); }
.wp-rel-card { display: flex; flex-direction: column; gap: 8px; padding: 22px; background: #fff; border: 1px solid var(--border); border-top: 4px solid var(--border); border-radius: var(--radius-md); color: var(--brand-navy); text-decoration: none; transition: transform .25s var(--ease-out); }
.wp-rel-card:hover { transform: translateY(-4px); color: var(--brand-navy); }
.wp-rel-t { font-size: 18px; line-height: 25px; font-weight: 800; }
.wp-ct { padding: 80px var(--gutter); }
.pg-wpis .wp-ct .h2 { font-size: 40px; }
@media (max-width: 1000px) {
  .bl-feat, .wp-grid { grid-template-columns: minmax(0, 1fr); }
  .wp-grid .toc { position: static; }
}
@media (max-width: 759px) {
  .bl-hero { padding: 40px var(--gutter) 32px; }
  .bl-h1 { font-size: 44px; }
  .bl-list { padding: 8px var(--gutter) 64px; }
  .bl-feat img { height: 240px; }
  .bl-feat-body { padding: 24px; }
  .bl-feat h2 { font-size: 26px; }
  .bl-grid { grid-template-columns: minmax(0, 1fr); }
  .bl-cta { padding: 48px var(--gutter); }
  .bl-cta h2 { font-size: 26px; }
  .wp-head { padding: 32px var(--gutter) 24px; }
  .wp-h1 { font-size: 32px; }
  .wp-lead { font-size: 17px; }
  .wp-grid { padding-bottom: 64px; }
  .wp-rel, .wp-ct { padding: 56px var(--gutter); }
  .pg-wpis .wp-ct .h2 { font-size: 28px; }
}

/* ---------- Ograniczony ruch ---------- */
@media (prefers-reduced-motion: reduce) {
  /* Bez animacji: treść od razu w stanie końcowym (liczniki pokazują wartość, rotator — pierwsze słowo) */
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .bub { display: none; }
}