/* =========================================================================
   SBJ Legal — arkusz główny
   Źródło: design system "SBJ Legal" (Claude Design, proj. 60c076d8)
   Tokeny 1:1 z tokens/{colors,typography,spacing,base}.css
   ========================================================================= */

/* ---------- 1. Tokeny: kolory ---------- */
:root{
  --green-900:oklch(19% 0.05 152);
  --green-800:oklch(24% 0.07 152);
  --green-700:oklch(29% 0.085 152);   /* podstawowa zieleń marki ≈ #0c3f16 */
  --green-600:oklch(35% 0.095 152);
  --green-500:oklch(42% 0.105 152);
  --green-400:oklch(52% 0.1 152);
  --green-200:oklch(80% 0.06 152);
  --green-100:oklch(90% 0.035 152);
  --green-50:oklch(96% 0.015 152);

  --ink-900:#0c0c0c; --ink-800:#191919; --ink-700:#2c2c2a; --ink-600:#454542;
  --ink-400:#6f6e69; --ink-300:#94928c; --ink-200:#c2bfb6; --ink-100:#e3e0d6;

  --paper-0:#fff; --paper-50:#faf8f4; --paper-100:#f4f1ea; --paper-200:#ece7dc;

  --color-bg:var(--paper-50);
  --color-surface:var(--paper-0);
  --color-surface-sunken:var(--paper-100);
  --color-text:var(--ink-900);
  --color-text-muted:var(--ink-600);
  --color-text-faint:var(--ink-400);
  --color-border:var(--ink-100);
  --color-border-strong:var(--ink-200);
  --color-brand:var(--green-700);
  --color-brand-hover:var(--green-800);
  --color-brand-press:var(--green-900);
  --color-brand-tint:var(--green-50);
  --color-brand-tint-strong:var(--green-100);
  --color-on-brand:var(--paper-0);
  --color-link:var(--green-700);
  --color-link-hover:var(--green-900);
  --color-success:oklch(52% 0.12 152);
  --color-danger:oklch(46% 0.16 25);
  --color-focus-ring:var(--green-500);
}

/* Fallback dla przeglądarek bez oklch() (Safari < 15.4, starszy Firefox) */
@supports not (color:oklch(29% 0.085 152)){
  :root{
    --green-900:#061f0b; --green-800:#092e10; --green-700:#0c3f16; --green-600:#12551e;
    --green-500:#186c26; --green-400:#289a3c; --green-200:#a8d9b2; --green-100:#d7ecdb;
    --green-50:#eff8f1;
  }
}

/* ---------- 2. Tokeny: typografia ---------- */
:root{
  --font-display:'Source Serif 4',Georgia,'Times New Roman',serif;
  --font-body:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,monospace;
  --text-xs:.8125rem; --text-sm:.9375rem; --text-base:1.0625rem; --text-lg:1.25rem;
  --text-xl:1.5rem; --text-2xl:1.875rem; --text-3xl:2.375rem; --text-4xl:3rem; --text-5xl:3.75rem;
  --lh-tight:1.1; --lh-snug:1.3; --lh-normal:1.55; --lh-relaxed:1.7;
  --ls-display:-.01em; --ls-eyebrow:.14em;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
}

/* ---------- 3. Tokeny: odstępy, promienie, cienie ---------- */
:root{
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;
  --sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;--sp-24:96px;--sp-32:128px;
  --radius-sm:4px;--radius-md:6px;--radius-lg:10px;--radius-xl:16px;--radius-full:999px;
  --shadow-sm:0 1px 2px rgba(12,12,12,.06);
  --shadow-md:0 4px 16px rgba(12,12,12,.08),0 1px 2px rgba(12,12,12,.05);
  --shadow-lg:0 16px 40px rgba(12,12,12,.12),0 2px 6px rgba(12,12,12,.06);
  --shadow-brand:0 8px 24px oklch(29% .085 152/.22);
  --container-max:1200px;
  --ease-standard:cubic-bezier(.2,.7,.3,1);
  --dur-fast:120ms;--dur-normal:200ms;--dur-slow:360ms;
  --header-h:68px;
}

/* Skala typografii na wąskich ekranach — projekt zakłada 1440px, telefon dostaje mniejszy krok */
@media (max-width:820px){
  :root{
    --text-2xl:1.625rem; --text-3xl:1.875rem; --text-4xl:2.125rem; --text-5xl:2.5rem;
    --header-h:60px;
  }
}

/* ---------- 4. Reset / baza ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);
     font-size:var(--text-base);line-height:var(--lh-normal);-webkit-font-smoothing:antialiased;
     overflow-x:hidden}
a{color:var(--color-link);text-decoration:none}
a:hover{color:var(--color-link-hover);text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;font-weight:var(--fw-semibold);
            line-height:var(--lh-tight);letter-spacing:var(--ls-display);text-wrap:balance}
p{margin:0;text-wrap:pretty}
img,svg{max-width:100%}
ul,ol{margin:0;padding:0}
:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:1px;border-radius:2px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
                 clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--color-brand);
           color:var(--color-on-brand);padding:var(--sp-3) var(--sp-5);border-radius:0 0 var(--radius-md) 0}
.skip-link:focus{left:0}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- 5. Układ ---------- */
.wrap{max-width:var(--container-max);margin:0 auto;padding-inline:var(--sp-10)}
@media (max-width:820px){.wrap{padding-inline:var(--sp-5)}}
.section{padding-block:var(--sp-20)}
.section--tight{padding-block:var(--sp-12)}
.section--surface{background:var(--color-surface)}
.section--sunken{background:var(--color-surface-sunken)}
.section--brand{background:var(--color-brand);color:var(--color-on-brand)}
.section--bordered{border-bottom:1px solid var(--color-border)}
@media (max-width:820px){.section{padding-block:var(--sp-12)}.section--tight{padding-block:var(--sp-8)}}

.eyebrow{font-size:var(--text-xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);
         text-transform:uppercase;color:var(--color-text-faint);margin:0 0 var(--sp-3)}
.section--brand .eyebrow{color:rgba(255,255,255,.55)}
.lead{font-size:var(--text-base);line-height:var(--lh-relaxed);color:var(--color-text-muted);max-width:66ch}
.muted{color:var(--color-text-muted)}
.faint{color:var(--color-text-faint)}

/* ---------- 6. Nagłówek + nawigacja ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--color-bg);
             border-bottom:1px solid var(--color-border)}
.site-header__inner{max-width:var(--container-max);margin:0 auto;padding:var(--sp-4) var(--sp-10);
                    display:flex;align-items:center;gap:var(--sp-8);min-height:var(--header-h)}
@media (max-width:820px){.site-header__inner{padding:var(--sp-3) var(--sp-5);gap:var(--sp-4)}}
.brand{display:flex;align-items:center;gap:var(--sp-3);flex:none;text-decoration:none}
.brand:hover{text-decoration:none}
.brand img{width:36px;height:36px;display:block}
.brand span{font-family:var(--font-display);font-weight:var(--fw-semibold);
            font-size:var(--text-lg);color:var(--color-text)}
@media (max-width:820px){.brand img{width:32px;height:32px}}

.nav{display:flex;gap:var(--sp-6);margin-left:auto;font-size:var(--text-sm);font-weight:var(--fw-medium)}
.nav a{color:var(--color-text-muted);white-space:nowrap}
.nav a:hover{color:var(--color-text);text-decoration:none}
.nav a[aria-current]{color:var(--color-brand);font-weight:var(--fw-semibold)}
.header-cta{display:flex;align-items:center;gap:var(--sp-3);flex:none}
.header-cta__tel{font-size:var(--text-sm);font-weight:var(--fw-semibold);white-space:nowrap}

/* przycisk hamburgera — tylko mobile */
.nav-toggle{display:none;flex:none;margin-left:auto;background:none;border:1px solid var(--color-border);
            border-radius:var(--radius-md);width:42px;height:42px;align-items:center;justify-content:center;
            cursor:pointer;color:var(--color-text);padding:0}
.nav-toggle:hover{background:var(--color-surface)}
.nav-toggle__bar{display:block;width:18px;height:2px;background:currentColor;position:relative;
                 transition:background var(--dur-fast)}
.nav-toggle__bar::before,.nav-toggle__bar::after{content:"";position:absolute;left:0;width:18px;height:2px;
  background:currentColor;transition:transform var(--dur-normal) var(--ease-standard),top var(--dur-normal)}
.nav-toggle__bar::before{top:-6px}
.nav-toggle__bar::after{top:6px}
[aria-expanded="true"] .nav-toggle__bar{background:transparent}
[aria-expanded="true"] .nav-toggle__bar::before{top:0;transform:rotate(45deg)}
[aria-expanded="true"] .nav-toggle__bar::after{top:0;transform:rotate(-45deg)}

@media (max-width:980px){
  .nav-toggle{display:inline-flex}
  .header-cta{display:none}
  /* menu wysuwane */
  .nav{position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;gap:0;margin:0;
       background:var(--color-surface);border-bottom:1px solid var(--color-border);
       box-shadow:var(--shadow-lg);padding:var(--sp-2) var(--sp-5) var(--sp-6);
       max-height:calc(100dvh - var(--header-h));overflow-y:auto;
       transform:translateY(-8px);opacity:0;visibility:hidden;
       transition:opacity var(--dur-normal) var(--ease-standard),transform var(--dur-normal) var(--ease-standard),visibility var(--dur-normal)}
  .nav[data-open="true"]{transform:none;opacity:1;visibility:visible}
  .nav a{padding:var(--sp-4) 0;border-bottom:1px solid var(--color-border);font-size:var(--text-base)}
  .nav__mobile-cta{display:flex!important;flex-direction:column;gap:var(--sp-3);padding-top:var(--sp-5)}
}
.nav__mobile-cta{display:none}

/* ---------- 7. Przyciski ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
     font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--fw-semibold);
     line-height:1;padding:12px var(--sp-5);border-radius:var(--radius-md);border:1px solid transparent;
     cursor:pointer;text-decoration:none;white-space:nowrap;
     transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast),
                border-color var(--dur-fast),box-shadow var(--dur-fast)}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--color-brand);color:var(--color-on-brand)}
.btn--primary:hover{background:var(--color-brand-hover);color:var(--color-on-brand)}
.btn--primary:active{background:var(--color-brand-press)}
.btn--secondary{background:transparent;color:var(--color-brand);border-color:var(--color-brand)}
.btn--secondary:hover{background:var(--color-brand-tint);color:var(--color-brand-hover)}
.btn--secondary:active{background:var(--color-brand-tint-strong)}
.btn--ghost{background:transparent;color:var(--color-text-muted)}
.btn--ghost:hover{background:var(--color-surface-sunken);color:var(--color-text)}
.btn--on-brand{background:var(--color-on-brand);color:var(--color-brand)}
.btn--on-brand:hover{background:var(--paper-100);color:var(--color-brand-press)}
.btn--sm{font-size:var(--text-xs);padding:9px var(--sp-4)}
.btn--lg{font-size:var(--text-base);padding:15px var(--sp-6)}
.btn--block{width:100%}
@media (max-width:600px){.btn{padding:14px var(--sp-5)}} /* min. 44px pola dotyku */

/* ---------- 8. Karty ---------- */
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
      box-shadow:var(--shadow-sm);padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3)}
a.card{color:inherit;text-decoration:none;
       transition:transform var(--dur-normal) var(--ease-standard),box-shadow var(--dur-normal)}
a.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);text-decoration:none}
.card__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--fw-semibold);
             line-height:var(--lh-snug)}
.card__text{font-size:var(--text-sm);line-height:var(--lh-normal);color:var(--color-text-muted)}
.card--step{padding:var(--sp-5);gap:var(--sp-2)}
.card__num{font-size:var(--text-xs);font-weight:var(--fw-bold);color:var(--color-brand)}

.grid{display:grid;gap:var(--sp-4)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

/* ---------- 9. Listy w stylu „wiersz z hairline" ---------- */
.rows{display:flex;flex-direction:column;list-style:none}
.rows--2col{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--sp-8)}
@media (max-width:640px){.rows--2col{grid-template-columns:1fr}}
.rows li,.rows > div,.rows > a{font-size:var(--text-sm);color:var(--ink-700);padding:11px 0;
                               border-bottom:1px solid var(--color-border)}
.rows li:last-child,.rows > div:last-child,.rows > a:last-child{border-bottom:0}
.rows > a{display:block}
.rows > a:hover{color:var(--color-brand)}

/* ---------- 10. Badge ---------- */
.badge{display:inline-flex;align-items:center;font-size:var(--text-xs);font-weight:var(--fw-semibold);
       padding:4px var(--sp-3);border-radius:var(--radius-full);background:var(--color-brand-tint);
       color:var(--color-brand);white-space:nowrap}
.badge--neutral{background:var(--color-surface-sunken);color:var(--color-text-muted)}

/* ---------- 11. Akordeon (FAQ) ---------- */
.accordion{border-top:1px solid var(--color-border)}
.accordion details{border-bottom:1px solid var(--color-border)}
.accordion summary{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-4) 0;cursor:pointer;list-style:none;font-size:var(--text-base);
  font-weight:var(--fw-semibold);color:var(--color-text);transition:color var(--dur-fast)}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary:hover{color:var(--color-brand)}
.accordion summary::after{content:"";flex:none;width:11px;height:11px;margin-top:6px;
  border-right:2px solid var(--color-text-faint);border-bottom:2px solid var(--color-text-faint);
  transform:rotate(45deg);transition:transform var(--dur-normal) var(--ease-standard)}
.accordion details[open] summary::after{transform:rotate(-135deg);border-color:var(--color-brand)}
.accordion__body{padding:0 0 var(--sp-5);font-size:var(--text-sm);line-height:var(--lh-relaxed);
                 color:var(--color-text-muted);max-width:70ch}

/* ---------- 12. Hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--color-border)}
.hero__ring{position:absolute;border:1px solid var(--green-100);border-radius:var(--radius-full);
            pointer-events:none}
.hero__ring--a{right:-120px;top:-150px;width:440px;height:440px}
.hero__ring--b{right:-40px;top:-40px;width:260px;height:260px}
@media (max-width:820px){.hero__ring{display:none}}
.hero__inner{max-width:var(--container-max);margin:0 auto;
             padding:var(--sp-16) var(--sp-10) var(--sp-12);position:relative}
@media (max-width:820px){.hero__inner{padding:var(--sp-10) var(--sp-5) var(--sp-8)}}
.hero h1{font-size:var(--text-4xl);line-height:var(--lh-tight);margin:0 0 var(--sp-4);max-width:20ch}
.hero--brand{background:var(--color-brand);color:var(--color-on-brand);border-bottom:0}
.hero--brand h1,.hero--brand .lead{color:var(--color-on-brand)}
.hero--brand .lead{color:rgba(255,255,255,.8)}
.hero--brand .hero__ring{border-color:rgba(255,255,255,.18)}

.breadcrumb{font-size:var(--text-xs);color:var(--color-text-faint);margin-bottom:var(--sp-4)}
.breadcrumb a{color:var(--color-text-faint)}
.breadcrumb a:hover{color:var(--color-brand)}

/* wyróżnik liczbowy pod hero */
.factbox{display:flex;gap:var(--sp-4);align-items:center;background:var(--paper-0);
  border:1px solid var(--color-brand);border-radius:var(--radius-md);padding:var(--sp-4) var(--sp-5);
  margin-top:var(--sp-6);max-width:660px}
.factbox__n{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--fw-semibold);
            color:var(--color-brand);flex:none}
.factbox__t{font-size:var(--text-sm);line-height:var(--lh-normal);color:var(--color-text-muted)}
@media (max-width:520px){.factbox{flex-direction:column;align-items:flex-start;gap:var(--sp-2)}}

/* ---------- 13. Układ treść + sidebar ---------- */
.layout{display:flex;gap:var(--sp-12);flex-wrap:wrap;align-items:flex-start}
.layout__main{flex:1.5;min-width:360px;display:flex;flex-direction:column;gap:var(--sp-10)}
.layout__aside{flex:1;min-width:300px;display:flex;flex-direction:column;gap:var(--sp-4);
               position:sticky;top:calc(var(--header-h) + 22px)}
@media (max-width:980px){
  .layout{gap:var(--sp-8)}
  .layout__main{min-width:0;flex:1 1 100%;gap:var(--sp-8)}
  .layout__aside{position:static;flex:1 1 100%;min-width:0}
}

/* boks kontaktowy w sidebarze */
.aside-cta{background:var(--color-brand);color:var(--color-on-brand);border-radius:var(--radius-lg);
           padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3)}
.aside-cta__title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--fw-semibold);
                  line-height:var(--lh-snug);color:var(--color-on-brand)}
.aside-cta__tel{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--fw-semibold);
                color:var(--color-on-brand)}
.aside-cta a:not(.btn){color:rgba(255,255,255,.85)}
.aside-cta a:not(.btn):hover{color:#fff}
.aside-cta .eyebrow{color:rgba(255,255,255,.55)}

.person{display:flex;gap:var(--sp-3);align-items:center}
.person img{width:70px;height:56px;object-fit:cover;object-position:50% 40%;border-radius:var(--radius-sm);
            background:var(--paper-100);display:block;flex:none}
.person__name{font-family:var(--font-display);font-size:var(--text-base);font-weight:var(--fw-semibold)}
.person__meta{font-size:var(--text-xs);color:var(--color-text-faint)}

/* ---------- 14. Zespół ---------- */
.team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6)}
@media (max-width:900px){.team{grid-template-columns:1fr;max-width:520px}}
.team__card{background:var(--color-surface);border:1px solid var(--color-border);
            border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;
            display:flex;flex-direction:column}
/* Kadr poziomy 5:4 jak w projekcie (w siatce 3-kolumnowej ≈373×298).
   height:auto jest konieczne — atrybut height="768" w HTML działa jak
   podpowiedź prezentacyjna i bez tego nadpisuje aspect-ratio. */
.team__photo{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;object-position:50% 50%;
             background:var(--paper-100);display:block}
.team__body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2)}

/* ---------- 15. Formularz ---------- */
.field{display:flex;flex-direction:column;gap:var(--sp-2)}
.field label{font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--color-text)}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);
  background:var(--color-surface);border:1px solid var(--color-border-strong);
  border-radius:var(--radius-sm);padding:11px var(--sp-3);width:100%;
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--color-focus-ring);outline-offset:1px;border-color:var(--color-brand)}
.field textarea{min-height:150px;resize:vertical;line-height:var(--lh-normal)}
.field__hint{font-size:var(--text-xs);color:var(--color-text-faint)}
.field--error input,.field--error textarea{border-color:var(--color-danger)}
.field__error{font-size:var(--text-xs);color:var(--color-danger)}
.checkbox{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:var(--text-xs);
          line-height:var(--lh-normal);color:var(--color-text-muted)}
.checkbox input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--color-brand)}
.form-status{font-size:var(--text-sm);padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-sm)}
.form-status[data-state="ok"]{background:var(--color-brand-tint);color:var(--color-brand)}
.form-status[data-state="err"]{background:#fdecec;color:var(--color-danger)}

/* ---------- 16. Stopka ---------- */
.site-footer{background:var(--color-brand);color:var(--color-on-brand)}
.site-footer__inner{max-width:var(--container-max);margin:0 auto;
  padding:var(--sp-12) var(--sp-10) var(--sp-8);display:flex;gap:var(--sp-12);flex-wrap:wrap}
.site-footer__col{flex:1;min-width:180px;display:flex;flex-direction:column;gap:var(--sp-2)}
.site-footer__col--wide{flex:1.4;min-width:280px;gap:var(--sp-3)}
.site-footer a:not(.btn){font-size:var(--text-sm);color:rgba(255,255,255,.85)}
.site-footer a:not(.btn):hover{color:#fff}
.site-footer__text{font-size:var(--text-sm);line-height:var(--lh-relaxed);color:rgba(255,255,255,.72)}
.site-footer__bottom{border-top:1px solid rgba(255,255,255,.16)}
.site-footer__bottom .wrap{padding-block:var(--sp-5);font-size:var(--text-xs);color:rgba(255,255,255,.6)}
.site-footer__bottom a{font-size:var(--text-xs);color:rgba(255,255,255,.6)}
@media (max-width:820px){
  .site-footer__inner{padding:var(--sp-10) var(--sp-5) var(--sp-6);gap:var(--sp-8)}
  .site-footer__col{flex:1 1 100%;min-width:0}
}

/* ---------- 17. Artykuł (blog) ---------- */
.article{max-width:none}
.article__meta{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;
               font-size:var(--text-xs);color:var(--color-text-faint);margin-bottom:var(--sp-4)}
.prose{font-size:var(--text-base);line-height:var(--lh-relaxed);color:var(--ink-800);max-width:72ch}
.prose > * + *{margin-top:var(--sp-5)}
.prose h2{font-size:var(--text-2xl);line-height:var(--lh-snug);margin-top:var(--sp-12)}
.prose h3{font-size:var(--text-xl);line-height:var(--lh-snug);margin-top:var(--sp-8)}
.prose ul,.prose ol{padding-left:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-2)}
.prose li{list-style:disc}
.prose ol li{list-style:decimal}
.prose blockquote{border-left:3px solid var(--color-brand);padding-left:var(--sp-5);
                  font-family:var(--font-display);font-size:var(--text-lg);color:var(--ink-700)}
.prose table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.prose th,.prose td{text-align:left;padding:var(--sp-3);border-bottom:1px solid var(--color-border)}
.prose th{font-weight:var(--fw-semibold);background:var(--color-surface-sunken)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.toc{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
     padding:var(--sp-5);font-size:var(--text-sm)}
.toc ol{padding-left:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2)}
.toc li{list-style:decimal;color:var(--color-text-muted)}

.post-list{display:flex;flex-direction:column;gap:var(--sp-4);list-style:none}

/* ---------- 18. Baner cookies ---------- */
.cookie-bar{position:fixed;left:var(--sp-4);right:var(--sp-4);bottom:var(--sp-4);z-index:120;
  background:var(--color-surface);border:1px solid var(--color-border-strong);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--sp-5);
  display:flex;gap:var(--sp-5);align-items:center;flex-wrap:wrap;
  max-width:760px;margin-inline:auto;font-size:var(--text-sm)}
.cookie-bar[hidden]{display:none}
.cookie-bar p{flex:1;min-width:240px;color:var(--color-text-muted);line-height:var(--lh-normal)}
.cookie-bar__actions{display:flex;gap:var(--sp-3);flex-wrap:wrap}
@media (max-width:600px){
  .cookie-bar{padding:var(--sp-4);gap:var(--sp-4)}
  .cookie-bar__actions{width:100%}
  .cookie-bar__actions .btn{flex:1}
}

/* ---------- 19. Pływający pasek kontaktu (tylko telefon) ---------- */
.mobile-bar{display:none}
@media (max-width:640px){
  .mobile-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:110;
    background:var(--color-surface);border-top:1px solid var(--color-border);
    box-shadow:0 -2px 12px rgba(12,12,12,.07);padding:var(--sp-2) var(--sp-3);
    padding-bottom:calc(var(--sp-2) + env(safe-area-inset-bottom));gap:var(--sp-2)}
  .mobile-bar .btn{flex:1}
  body{padding-bottom:72px}
  .cookie-bar{bottom:80px}
}

/* ---------- 20. Druk ---------- */
@media print{
  .site-header,.site-footer,.mobile-bar,.cookie-bar,.nav-toggle,.layout__aside{display:none!important}
  body{background:#fff;color:#000}
  .wrap{max-width:none;padding:0}
  a::after{content:" (" attr(href) ")";font-size:10px;color:#555}
}

/* ---------- 21. Strona główna: wyszukiwarka, chipy, liczby ---------- */
.home-search{display:flex;gap:var(--sp-3);max-width:640px;margin-top:var(--sp-8);align-items:stretch}
.home-search input{flex:1;min-width:0;font-family:var(--font-body);font-size:var(--text-base);
  color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border-strong);
  border-radius:var(--radius-md);padding:13px var(--sp-4)}
.home-search input:focus{outline:2px solid var(--color-focus-ring);outline-offset:1px;border-color:var(--color-brand)}
.home-search .btn{flex:none}
/* Na wąskich ekranach pole i przycisk układają się jeden pod drugim —
   wcześniej przycisk był tu ukrywany, przez co wyszukiwarki nie dało się
   uruchomić dotykiem. */
@media (max-width:560px){
  .home-search{flex-direction:column}
  .home-search .btn{width:100%}
}

.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4);max-width:720px}
.chip{font-family:var(--font-body);font-size:var(--text-xs);color:var(--color-text-muted);
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-full);
  padding:7px var(--sp-4);cursor:pointer;
  transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
.chip:hover{background:var(--color-brand-tint);color:var(--color-brand);border-color:var(--color-brand-tint-strong)}

.stats{display:flex;gap:var(--sp-10);margin-top:var(--sp-12);flex-wrap:wrap}
.stat__n{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--fw-semibold);
  color:var(--color-brand);line-height:1}
.stat__l{font-size:var(--text-xs);color:var(--color-text-faint);margin-top:var(--sp-1)}
@media (max-width:560px){.stats{gap:var(--sp-8);margin-top:var(--sp-8)}}

.spec-col[hidden]{display:none}
.spec-col .rows > a[hidden]{display:none}

/* ---------- 22. Blog: wiersz wpisu, filtry, CTA ---------- */
.chip--active{background:var(--color-brand);color:var(--color-on-brand);border-color:var(--color-brand)}
.chip--active:hover{background:var(--color-brand-hover);color:var(--color-on-brand)}

.post-row{display:flex;gap:var(--sp-6);padding:var(--sp-6) 0;border-bottom:1px solid var(--color-border);
  align-items:flex-start;color:inherit;text-decoration:none}
.post-row:first-child{border-top:1px solid var(--green-200)}
.post-row:hover{text-decoration:none}
.post-row:hover .post-row__title{color:var(--color-brand)}
.post-row[hidden]{display:none}
.post-row__kat{flex:none;width:190px;font-size:var(--text-xs);font-weight:var(--fw-bold);
  letter-spacing:.06em;text-transform:uppercase;color:var(--color-brand);padding-top:3px}
.post-row__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.post-row__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--fw-semibold);
  line-height:var(--lh-snug);color:var(--color-text);transition:color var(--dur-fast)}
.post-row__desc{font-size:var(--text-sm);line-height:var(--lh-normal);color:var(--color-text-muted)}
.post-row__meta{font-size:var(--text-xs);color:var(--color-text-faint)}
@media (max-width:700px){
  .post-row{flex-direction:column;gap:var(--sp-2)}
  .post-row__kat{width:auto;padding-top:0}
}

.blog-cta{margin-top:var(--sp-12);background:var(--color-brand-tint);border:1px solid var(--color-brand);
  border-radius:var(--radius-lg);padding:var(--sp-8);display:flex;gap:var(--sp-8);
  flex-wrap:wrap;align-items:center;justify-content:space-between}
.blog-cta > div{flex:1;min-width:280px;display:flex;flex-direction:column;gap:var(--sp-2)}
@media (max-width:600px){.blog-cta{padding:var(--sp-6)}.blog-cta .btn{width:100%}}

/* ---------- 23. Wariant wyróżniony (cennik abonamentu) ---------- */
.card--wyrozniony{background:var(--color-brand-tint);border-color:var(--color-brand);box-shadow:none}

/* ---------- 24. Przełącznik języka (landingi) ---------- */
/* Pasek wersji językowych — między nagłówkiem a treścią strony. */
.lang-bar{border-bottom:1px solid var(--color-border);background:var(--color-bg)}
.lang-bar__inner{display:flex;justify-content:flex-end;padding-block:var(--sp-2)}
.lang-bar .langs{gap:var(--sp-2);font-size:var(--text-xs);letter-spacing:var(--ls-eyebrow)}
.lang-bar .langs a,.lang-bar .langs [aria-current]{
  padding:3px var(--sp-3);border-radius:var(--radius-full);border:1px solid transparent}
.lang-bar .langs a:hover{border-color:var(--color-border);background:var(--color-surface)}
.lang-bar .langs [aria-current]{
  border-color:var(--color-brand);background:var(--color-brand);color:var(--color-on-brand)}
/* Pasek języków zabiera górę strony, więc hero pod nim dostaje mniejszy odstęp. */
.lang-bar + main .hero .hero__inner{padding-top:var(--sp-8)}
.lang-bar + main .hero--home .hero__inner{padding-top:var(--sp-10)}
@media (max-width:820px){
  .lang-bar + main .hero .hero__inner,
  .lang-bar + main .hero--home .hero__inner{padding-top:var(--sp-6)}
}

.langs{display:flex;gap:var(--sp-3);font-size:var(--text-sm);font-weight:var(--fw-semibold);align-items:center}
.langs a{color:var(--color-text-faint)}
.langs a:hover{color:var(--color-brand);text-decoration:none}
.langs [aria-current]{color:var(--color-brand)}
.langs--brand a{color:rgba(255,255,255,.6)}
.langs--brand [aria-current]{color:#fff}

/* Przycisk stylizowany na odnośnik — używany do ponownego otwarcia banera zgód. */
.link-btn{background:none;border:0;padding:0;font:inherit;cursor:pointer;
  color:inherit;text-decoration:underline;text-underline-offset:2px}
.link-btn:hover{color:var(--color-on-brand)}
.link-btn:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}

/* Cele dotykowe — WCAG 2.2 AA (2.5.8) wymaga co najmniej 24×24 px.
   Linki w stopce i w okruszkach miały 18–23 px wysokości. */
.site-footer__col a,.breadcrumb a{display:inline-block;min-height:24px;line-height:24px}

/* ---------- 25. Dolny pasek stopki z przełącznikiem języka ---------- */
.site-footer__bottom-row{display:flex;justify-content:space-between;align-items:center;
  gap:var(--sp-5);flex-wrap:wrap}
.site-footer__bottom-row .langs{font-size:var(--text-xs)}

/* ---------- 26. Hero strony głównej — większa skala ---------- */
/* Sekcje pod hero są gęste i pełnowymiarowe; wąska kolumna tekstu sprawiała,
   że góra strony wyglądała na mniejszą od reszty. */
.hero--home .hero__inner{padding-block:var(--sp-24) var(--sp-20)}
.hero--home h1{max-width:16ch;margin-bottom:var(--sp-5)}
.hero--home .lead{max-width:58ch;font-size:var(--text-lg);line-height:var(--lh-relaxed)}
.hero--home .home-search{max-width:780px;margin-top:var(--sp-10)}
.hero--home .home-search input{font-size:var(--text-lg);padding:17px var(--sp-5)}
.hero--home .home-search .btn{padding-inline:var(--sp-8);font-size:var(--text-base)}
.hero--home .chips{max-width:860px;margin-top:var(--sp-5)}
.hero--home .chip{font-size:var(--text-sm);padding:9px var(--sp-5)}
.hero--home .stats{gap:var(--sp-16);margin-top:var(--sp-16)}
.hero--home .stat__n{font-size:var(--text-4xl)}
.hero--home .stat__l{font-size:var(--text-sm)}
.hero--home .hero__ring--a{width:560px;height:560px;right:-140px;top:-180px}
.hero--home .hero__ring--b{width:360px;height:360px;right:-40px;top:-70px}

@media (max-width:820px){
  .hero--home .hero__inner{padding-block:var(--sp-12) var(--sp-10)}
  .hero--home .lead{font-size:var(--text-base)}
  .hero--home .home-search{margin-top:var(--sp-6)}
  .hero--home .home-search input{font-size:var(--text-base);padding:14px var(--sp-4)}
  .hero--home .stats{gap:var(--sp-8);margin-top:var(--sp-10)}
  .hero--home .stat__n{font-size:var(--text-3xl)}
}

/* ---------- 27. Oznaczenie pól wymaganych ---------- */
.wymagane{color:var(--color-danger);text-decoration:none;font-weight:var(--fw-bold);margin-left:2px}