@layer reset, baza, komponenty, wyjatki;

/* ---------- fonty ---------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url('f/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url('f/archivo-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:'Martian Mono';font-style:normal;font-weight:100 800;font-stretch:75% 112.5%;font-display:swap;
  src:url('f/martianmono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:100 800;font-stretch:75% 112.5%;font-display:swap;
  src:url('f/martianmono-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;}

@layer reset{
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body,h1,h2,h3,p,dl,dd,figure,blockquote{margin:0}
  ul,ol{margin:0;padding:0;list-style:none}
  img,svg{display:block;max-width:100%}
  button,input,textarea{font:inherit;color:inherit}
  summary::-webkit-details-marker{display:none}
}

@layer baza{
  :root{
    --tlo-plansza:#EDE6D8;
    --tlo-karton:#E3D9C6;
    --tlo-karton-mocniej:#DACFB8;
    --zielen:#17352B;
    --zielen-linia:#2E4F42;
    --tusz:#1C1A16;
    --tusz-2:#5A5342;
    --krem:#F1EADB;
    --krem-2:#CDC4B0;
    --linia:#C9BCA2;
    --linia-2:#AD9E85;
    --akcja:#E8891A;
    --akcja-hover:#CE7612;
    --akcja-aktyw:#B9680F;
    --akcja-tekst:#1C1A16;
    --ceglany:#A33D24;
    --ceglany-jasny:#F08C63;
    --linia-pole:#8C8064;
    --tlo-pole-focus:#F5F0E5;
    --podpowiedz:#6E6552;
    --s1:4px;--s2:8px;--s3:12px;--s4:20px;--s5:32px;--s6:56px;--s7:96px;--s8:152px;
    --font-t:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
    --font-m:'Martian Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
    --pasek-h:88px;
    color-scheme:light;
  }
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

  body{
    background:var(--tlo-plansza);
    color:var(--tusz);
    font-family:var(--font-t);
    font-size:17px;
    line-height:1.62;
    font-variation-settings:'wdth' 100,'wght' 420;
    overflow-x:hidden;
    padding-bottom:var(--pasek-h);
  }
  ::selection{background:var(--akcja);color:var(--akcja-tekst)}
  :focus-visible{outline:2px solid var(--ceglany);outline-offset:3px}
  .naciemnym :focus-visible{outline-color:var(--akcja)}

  h1,h2,h3{font-variation-settings:'wdth' 112,'wght' 750;line-height:1.06;text-wrap:balance}
  p{text-wrap:pretty}
  a{color:inherit}

  .m{font-family:var(--font-m);font-variation-settings:'wdth' 100,'wght' 550;
     font-variant-numeric:tabular-nums lining-nums slashed-zero}

  .plansza{
    display:grid;
    grid-template-columns:[pelna-start] var(--s4) [tresc-start] minmax(0,1fr) [tresc-end] var(--s4) [pelna-end];
  }
  .plansza > *{grid-column:tresc}
  .pelna{grid-column:pelna}

  .sekcja{padding-block:var(--s7)}
  .kreska-gora{border-top:1px solid var(--linia)}

  .lead{font-size:clamp(1rem,1rem + .35vw,1.3125rem);line-height:1.5;
        font-variation-settings:'wdth' 100,'wght' 450;max-width:34ch}
  .drobne{font-size:15px;line-height:1.55;color:var(--tusz-2);
          font-variation-settings:'wdth' 100,'wght' 450}
  .pomin{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .pomin:focus{position:fixed;top:12px;left:12px;z-index:100;width:auto;height:auto;
    clip-path:none;overflow:visible;padding:12px 16px;border-radius:4px;
    background:var(--tlo-karton);color:var(--tusz);border:1px solid var(--linia-2);
    font-size:15px;text-decoration:none}
}

@layer komponenty{

/* ---------- MOTYW CIEMNY (wybor uzytkownika wygrywa nad systemem) ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-motyw="jasny"]){
  /* Nie odwracam palety mechanicznie: piasek robi sie ciepla czernia (hue 40),
     karton zostaje o stopien jasniejszy od tla, zielen ciemnieje, bursztyn lekko
     sie rozjasnia. Cegla przechodzi na wersje jasna, bo #A33D24 na czerni nie
     przechodzi kontrastu. */
  --tlo-plansza:#14120F;
  --tlo-karton:#1F1B15;
  --tlo-karton-mocniej:#2A241B;
  --zielen:#10241D;
  --zielen-linia:#2A4B3E;
  --tusz:#EDE6DA;
  --tusz-2:#A89B85;
  --krem:#F1EADB;
  --krem-2:#CDC4B0;
  --linia:#3B342A;
  --linia-2:#5C5344;
  --akcja:#F09A2B;
  --akcja-hover:#FFAE44;
  --akcja-aktyw:#D9861C;
  --akcja-tekst:#14120F;
  --ceglany:#E2764F;
  --ceglany-jasny:#F08C63;
  --linia-pole:#7A6F5B;
  --tlo-pole-focus:#241F18;
  --podpowiedz:#9A8E78;
  color-scheme:dark;
  }
  :root:not([data-motyw="jasny"]) .mata img{filter:brightness(.9)}
}
:root[data-motyw="ciemny"]{
  /* Nie odwracam palety mechanicznie: piasek robi sie ciepla czernia (hue 40),
     karton zostaje o stopien jasniejszy od tla, zielen ciemnieje, bursztyn lekko
     sie rozjasnia. Cegla przechodzi na wersje jasna, bo #A33D24 na czerni nie
     przechodzi kontrastu. */
  --tlo-plansza:#14120F;
  --tlo-karton:#1F1B15;
  --tlo-karton-mocniej:#2A241B;
  --zielen:#10241D;
  --zielen-linia:#2A4B3E;
  --tusz:#EDE6DA;
  --tusz-2:#A89B85;
  --krem:#F1EADB;
  --krem-2:#CDC4B0;
  --linia:#3B342A;
  --linia-2:#5C5344;
  --akcja:#F09A2B;
  --akcja-hover:#FFAE44;
  --akcja-aktyw:#D9861C;
  --akcja-tekst:#14120F;
  --ceglany:#E2764F;
  --ceglany-jasny:#F08C63;
  --linia-pole:#7A6F5B;
  --tlo-pole-focus:#241F18;
  --podpowiedz:#9A8E78;
  color-scheme:dark;
}
/* na ciemnym zrzuty cudzych stron sa za jaskrawe obok stonowanego tla */
:root[data-motyw="ciemny"] .mata img{filter:brightness(.9)}
:root[data-motyw="ciemny"] .kafel.uwaga .mata img,
:root[data-motyw="ciemny"] .kafel a:hover .mata img{filter:none}
@media (prefers-color-scheme:dark){
  :root:not([data-motyw="jasny"]) .kafel.uwaga .mata img,
  :root:not([data-motyw="jasny"]) .kafel a:hover .mata img{filter:none}
}


/* reset zerowal marginesy naglowkow - oddaje je jawnie, inaczej H2 styka sie z trescia */
h2 + *{margin-top:var(--s5)}
h3 + *{margin-top:var(--s3)}

/* ---------- 00 pasek marki ---------- */
.marka{padding-block:var(--s3) 0;display:flex;align-items:center;gap:10px;min-height:44px}
.marka-znak{width:22px;height:22px;flex:none}
.marka-nazwa{font-size:15px;font-variation-settings:'wdth' 112,'wght' 700;letter-spacing:-.01em}
.marka-nav{display:none}
.stan{font-size:12px;letter-spacing:.06em;color:var(--tusz-2);padding-block:var(--s2) var(--s3)}


/* ---------- przelacznik motywu ---------- */
.motyw{
  margin-left:auto;flex:none;
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding-inline:12px;
  background:var(--tlo-karton);color:var(--tusz);
  border:1px solid var(--linia);border-radius:999px;
  cursor:pointer;font-size:13px;letter-spacing:.02em;
  font-variation-settings:'wdth' 100,'wght' 550;
  transition:background 160ms cubic-bezier(.2,.8,.2,1),border-color 160ms cubic-bezier(.2,.8,.2,1);
}
.motyw:hover{background:var(--tlo-karton-mocniej);border-color:var(--linia-2)}
.motyw svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.motyw .etyk{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.motyw .ikona-noc{display:none}
:root[data-motyw="ciemny"] .motyw .ikona-noc{display:block}
:root[data-motyw="ciemny"] .motyw .ikona-dzien{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-motyw="jasny"]) .motyw .ikona-noc{display:block}
  :root:not([data-motyw="jasny"]) .motyw .ikona-dzien{display:none}
}
@media (min-width:56.25rem){
  .motyw{margin-left:0}
  .motyw .etyk{position:static;width:auto;height:auto;clip-path:none;overflow:visible}
}

/* ---------- 01 hero ---------- */
.hero{padding-block:var(--s2) var(--s5);position:relative}
.hero-nad{font-size:12px;letter-spacing:.05em;color:var(--tusz-2);margin-bottom:var(--s3)}
.hero h1{
  font-size:clamp(1.875rem,1.05rem + 3.8vw,3.75rem);
  line-height:1.04;letter-spacing:-.02em;
  font-variation-settings:'wdth' 118,'wght' 800;
}
.hero h1 .liczba{font-family:var(--font-m);font-size:.92em;font-variation-settings:'wdth' 100,'wght' 600;
  font-variant-numeric:tabular-nums slashed-zero;
  text-decoration:underline;text-decoration-color:var(--akcja);
  text-decoration-thickness:3px;text-underline-offset:6px}
.hero .lead{margin-top:var(--s4)}
.kicker{
  margin-top:var(--s4);
  border-top:1px solid var(--linia);border-bottom:1px solid var(--linia);
  padding-block:10px;font-size:13px;letter-spacing:.02em;line-height:1.4;color:var(--tusz)
}
.kicker-desk{display:none}
.hero-cta{display:none}

.tasma-glowa{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
  margin-top:var(--s5);font-size:11.5px;letter-spacing:.05em;color:var(--tusz-2)}
.tasma-glowa span:first-child{max-width:26ch;line-height:1.35}
.tasma{
  margin-top:var(--s3);
  display:grid;grid-auto-flow:column;grid-auto-columns:74vw;gap:var(--s4);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding-inline:var(--s4);margin-inline:calc(var(--s4) * -1);
  padding-bottom:var(--s5);
  scrollbar-width:thin;scrollbar-color:var(--linia-2) transparent;
}
.tasma > *{scroll-snap-align:start}
.tasma .kafel-podpis{padding-bottom:2px}
.tasma::-webkit-scrollbar{height:6px}
.tasma::-webkit-scrollbar-thumb{background:var(--linia-2)}
.tasma::-webkit-scrollbar-track{background:transparent}
.wachlarz{display:none}

/* ---------- kafel-probka ---------- */
.kafel{margin:0}
.kafel a{display:block;text-decoration:none}
.mata{
  display:block;
  background:var(--tlo-karton);
  border:1px solid var(--linia);
  border-radius:2px;
  padding:8px;
  position:relative;
}
/* height:auto jest OBOWIAZKOWE — atrybuty width/height w HTML sa podpowiedzia
   prezentacyjna i bez tego bija aspect-ratio (obrazek renderuje sie 320x900) */
.mata img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center;
  background:var(--tlo-karton-mocniej)}
.mata::after{
  content:"";position:absolute;inset:8px;pointer-events:none;
  background:var(--tlo-plansza);opacity:.04;
  transition:opacity 220ms cubic-bezier(.2,.8,.2,1);
}
.kafel.uwaga .mata::after{opacity:0}
.kafel.uwaga .mata{border-color:var(--linia-2)}
.kafel-podpis{padding-top:10px;border-top:2px solid var(--linia);margin-top:10px;
  transition:border-color 220ms cubic-bezier(.2,.8,.2,1),border-width 220ms cubic-bezier(.2,.8,.2,1)}
.kafel.uwaga .kafel-podpis{border-top-color:var(--kolor-strony,var(--linia-2))}
.kafel-nr{display:block;font-size:11.5px;letter-spacing:.05em;color:var(--tusz-2);
  font-variation-settings:'wdth' 100,'wght' 500}
.kafel-fn{display:block;font-size:13px;line-height:1.4;color:var(--tusz-2);
  font-variation-settings:'wdth' 100,'wght' 450;margin-top:2px}
.kafel a:hover .mata::after{opacity:0}
.kafel a:hover .kafel-podpis{border-top-color:var(--kolor-strony,var(--linia-2))}

.przerywnik{background:var(--tlo-karton);border:1px solid var(--linia);border-radius:4px;
  padding:var(--s4);display:flex;align-items:center;min-height:180px}
.przerywnik p{font-size:16px;line-height:1.5;max-width:34ch}

/* ---------- 02 wzornik ---------- */
.wzornik{padding-block:var(--s6) var(--s7)}
.wzornik h2{font-size:clamp(1.55rem,1.1rem + 2vw,2.75rem);letter-spacing:-.02em;max-width:20ch}
.wzornik-intro{margin-top:var(--s4);max-width:62ch}
.uczciwosc{margin-top:var(--s4);padding:var(--s4);background:var(--tlo-karton);
  border:1px solid var(--linia);border-radius:4px;max-width:62ch}
.uczciwosc p{font-size:16px;line-height:1.55}
.spis{margin-top:var(--s5);border-top:1px solid var(--linia)}
.spis li{border-bottom:1px solid var(--linia)}
.spis a{display:flex;align-items:baseline;gap:var(--s2);text-decoration:none;
  padding-block:12px;min-height:44px}
.spis .nazwa{font-variation-settings:'wdth' 106,'wght' 600;font-size:16px}
.spis .wiodace{flex:1;border-bottom:1px dotted var(--linia-2);transform:translateY(-4px)}
.spis .ile{font-family:var(--font-m);font-size:14px;color:var(--tusz-2);
  font-variant-numeric:tabular-nums}
.spis a:hover .nazwa{text-decoration:underline;text-decoration-color:var(--akcja);
  text-decoration-thickness:2px;text-underline-offset:4px}
.spis .suma{display:flex;align-items:baseline;gap:var(--s2);padding-block:12px}
.spis .suma .nazwa{font-variation-settings:'wdth' 106,'wght' 700}

.chipy{display:none}

.rzad{padding-top:var(--s7);scroll-margin-top:var(--s4)}
.rzad-glowa{border-top:1px solid var(--linia);padding-top:var(--s3);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s3)}
.rzad-nr{font-family:var(--font-m);font-size:12px;letter-spacing:.05em;color:var(--tusz-2);
  flex:none;width:100%}
.rzad-glowa h3{font-size:clamp(1.35rem,1rem + 1.6vw,2.2rem);letter-spacing:-.02em;
  font-variation-settings:'wdth' 112,'wght' 750;flex:1;min-width:0}
.rzad-ile{font-family:var(--font-m);font-size:14px;color:var(--tusz-2);flex:none}
.rzad-nota{margin-top:var(--s3);font-size:16px;color:var(--tusz-2);max-width:62ch}
.kafle{margin-top:var(--s5);display:grid;grid-template-columns:1fr;gap:48px 16px}

.wiecej{margin-top:var(--s5)}
.wiecej > summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  min-height:44px;padding-inline:16px;background:var(--tlo-karton);
  border:1px solid var(--linia);border-radius:4px;
  font-size:15px;font-variation-settings:'wdth' 100,'wght' 550;
}
.wiecej > summary:hover{background:var(--tlo-karton-mocniej)}
/* reguly autorskie (.kafle{display:grid}, img{display:block}) biją domyślne ukrywanie
   zawartości zwiniętego <details> — bez tego cała reszta ładowałaby się od razu */
.wiecej:not([open]) > *:not(summary){display:none}
.wiecej > summary .znak{font-family:var(--font-m);font-size:15px;color:var(--tusz-2)}
.wiecej[open] > summary .znak::before{content:"\2212"}
.wiecej:not([open]) > summary .znak::before{content:"+"}
.wiecej .kafle{margin-top:var(--s5)}

.arkusz{margin-top:var(--s7)}
.arkusz img{width:100%;height:auto;border:1px solid var(--linia);background:var(--tlo-karton);margin-top:var(--s4)}
.arkusz-nota{margin-top:var(--s3);font-size:15px;color:var(--tusz-2);max-width:62ch}

/* ---------- pasy zielone ---------- */
.pas{background:var(--zielen);color:var(--krem);padding-block:var(--s6)}
.pas h2{color:var(--krem);font-size:clamp(1.55rem,1.1rem + 2vw,2.75rem);letter-spacing:-.02em;max-width:18ch}
.pas p{max-width:58ch;margin-top:var(--s4)}
.pas .stop{color:var(--ceglany-jasny);font-variation-settings:'wdth' 100,'wght' 650}
.pas-dane{margin-top:var(--s5);font-family:var(--font-m);font-size:14px;color:var(--krem-2);line-height:1.9}
.pas-dane a{color:var(--krem-2)}
.srodek{text-align:center;max-width:44ch;margin-inline:auto;
  font-size:clamp(1.0625rem,1rem + .6vw,1.375rem);
  font-variation-settings:'wdth' 100,'wght' 500}

/* ---------- cena ---------- */
.cena-kwota{font-family:var(--font-m);font-size:34px;line-height:1.05;letter-spacing:-.01em;
  font-variation-settings:'wdth' 100,'wght' 600;font-variant-numeric:tabular-nums}
.cena-kreska{width:64px;height:3px;background:var(--akcja);margin-top:12px}
.cena-pod{font-family:var(--font-m);font-size:14px;color:var(--tusz-2);margin-top:12px;line-height:1.5}
.cena-zdanie{margin-top:var(--s4);max-width:58ch}
.zakres{margin-top:var(--s5)}
.zakres div{border-top:1px solid var(--linia);padding-block:14px}
.zakres dt{font-size:17px;font-variation-settings:'wdth' 106,'wght' 650}
.zakres dd{font-size:15px;line-height:1.55;color:var(--tusz-2);margin-top:4px;max-width:62ch}
.opieka{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--linia)}
.opieka-kwota{font-family:var(--font-m);font-size:24px;font-variation-settings:'wdth' 100,'wght' 600;
  font-variant-numeric:tabular-nums}
.opieka ul{margin-top:var(--s4)}
.opieka li{position:relative;padding-left:22px;margin-top:12px;max-width:62ch}
.opieka li::before{content:"\2014";position:absolute;left:0;color:var(--tusz-2)}
.wylaczenia{margin-top:var(--s5)}
.wylaczenia p{margin-top:var(--s3);max-width:62ch;font-size:16px}

/* ---------- kroki ---------- */
.kroki{margin-top:var(--s5)}
.krok{border-top:1px solid var(--linia);padding-block:var(--s4)}
.krok-czas{font-family:var(--font-m);font-size:14px;color:var(--tusz-2);
  font-variation-settings:'wdth' 100,'wght' 550}
.krok p{margin-top:var(--s2);max-width:62ch}
.krok-zamkniecie{margin-top:var(--s5);max-width:62ch}
.krok-zamkniecie p + p{margin-top:var(--s4)}

/* ---------- kto to robi ---------- */
.kto{padding-block:var(--s8) var(--s7)}
.kto p{margin-top:var(--s4);max-width:62ch}
.metryka{margin-top:var(--s5);padding:var(--s4);background:var(--tlo-karton);
  border:1px solid var(--linia);border-radius:4px;
  font-family:var(--font-m);font-size:14px;line-height:1.95;max-width:46ch}
.metryka b{font-variation-settings:'wdth' 100,'wght' 650}
.metryka a{color:inherit}

/* ---------- dwa bloki ---------- */
.dwa{margin-top:var(--s5)}
.dwa > div{border-top:1px solid var(--linia);padding-top:var(--s4);margin-top:var(--s4)}
.dwa h3{font-size:19px;font-variation-settings:'wdth' 106,'wght' 700}
.dwa p{margin-top:var(--s3);max-width:58ch}

/* ---------- czego nie robie ---------- */
.nie{margin-top:var(--s5)}
.nie > div{padding-block:var(--s4);border-top:1px solid var(--linia)}
.nie dt{font-size:19px;font-variation-settings:'wdth' 106,'wght' 700;
  text-decoration:line-through;text-decoration-color:var(--ceglany);text-decoration-thickness:2px}
.nie dd{margin-top:var(--s2);font-size:15px;line-height:1.55;color:var(--tusz-2);max-width:62ch}

/* ---------- faq ---------- */
.faq{margin-top:var(--s5)}
.faq > div{border-top:1px solid var(--linia);padding-block:var(--s5)}
.faq dt{font-size:19px;font-variation-settings:'wdth' 106,'wght' 650}
.faq dd{margin-top:var(--s3);max-width:62ch}

/* ---------- kontakt ---------- */
.kontakt-intro{margin-top:var(--s4);max-width:58ch}
.formularz{margin-top:var(--s5);max-width:34rem}
.form-nad{font-size:16px;color:var(--tusz-2)}
.pole{margin-top:var(--s4)}
.pole label{display:block;font-size:15px;font-variation-settings:'wdth' 106,'wght' 650}
.pole .podp{font-size:13.5px;color:var(--tusz-2);line-height:1.45;margin-top:2px}
.pole input,.pole textarea{
  width:100%;margin-top:var(--s2);background:var(--tlo-plansza);
  border:1px solid var(--linia-2);border-radius:4px;
  padding:12px 14px;font-size:16px;min-height:48px;
  caret-color:var(--akcja);
  transition:border-color 160ms cubic-bezier(.2,.8,.2,1),background 160ms cubic-bezier(.2,.8,.2,1);
}
.pole textarea{min-height:118px;resize:vertical;line-height:1.5}
.pole input:hover,.pole textarea:hover{border-color:var(--tusz-2)}
.pole input:focus,.pole textarea:focus{background:var(--tlo-pole-focus);border-color:var(--tusz)}
.pole input::placeholder,.pole textarea::placeholder{color:var(--podpowiedz)}
.pole.blad input,.pole.blad textarea{border-color:var(--ceglany)}
.pole-blad{display:none;margin-top:6px;font-size:14px;color:var(--ceglany);
  font-variation-settings:'wdth' 100,'wght' 550}
.pole.blad .pole-blad{display:block}
.pulapka{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.przycisk{
  display:inline-flex;align-items:center;justify-content:center;gap:.38em;
  min-height:52px;padding-inline:28px;border:0;border-radius:4px;
  background:var(--akcja);color:var(--akcja-tekst);cursor:pointer;
  font-size:17px;font-variation-settings:'wdth' 106,'wght' 650;
  text-decoration:none;
  transition:background 160ms cubic-bezier(.2,.8,.2,1);
}
.przycisk:hover{background:var(--akcja-hover)}
.przycisk:active{background:var(--akcja-aktyw)}
.przycisk[disabled]{opacity:.6;cursor:progress}
.form-stopka{margin-top:var(--s5);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4)}
.odpowiedz{margin-top:var(--s4);padding:var(--s4);border-radius:4px;
  scroll-margin-bottom:calc(var(--pasek-h) + 16px);
  border:1px solid var(--linia-2);background:var(--tlo-karton);max-width:46rem}
.odpowiedz.zle{border-color:var(--ceglany)}
.odpowiedz p{font-size:16px;line-height:1.55}
.kanaly{margin-top:var(--s6)}
.kanaly > div{border-top:1px solid var(--linia);padding-block:var(--s4)}
.kanaly h3{font-size:17px;font-variation-settings:'wdth' 106,'wght' 650}
.kanaly p{margin-top:var(--s2);font-size:16px;max-width:58ch}
.kanaly a{text-decoration-color:var(--akcja);text-decoration-thickness:2px;text-underline-offset:3px}

/* ---------- pasek telefonu (mobile) ---------- */
.pasek-tel{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--zielen);border-top:1px solid var(--zielen-linia);
  padding:8px var(--s4) calc(8px + env(safe-area-inset-bottom));
  display:flex;gap:var(--s3);align-items:stretch;
}
.pasek-tel .zadzwon{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:52px;background:var(--akcja);color:var(--akcja-tekst);
  border-radius:4px;text-decoration:none;line-height:1.15;padding-block:6px;
}
.pasek-tel .zadzwon .etyk{white-space:nowrap;font-size:16px;font-variation-settings:'wdth' 106,'wght' 650}
.pasek-tel .zadzwon .etyk b{font-family:var(--font-m);font-variation-settings:'wdth' 100,'wght' 600}
.pasek-tel .zadzwon .pod{font-size:11.5px;font-variation-settings:'wdth' 100,'wght' 450;opacity:.85}
.pasek-tel .sms{
  flex:none;width:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--krem-2);text-decoration:none;border-left:1px solid var(--zielen-linia);
  font-size:11.5px;letter-spacing:.04em;gap:4px;
}
.pasek-tel .sms svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}

/* ---------- stopka ---------- */
.stopka{border-top:1px solid var(--linia);padding-block:var(--s6)}
.stopka-blok{font-size:16px;line-height:1.95}
.stopka-blok .imie{font-size:19px;font-variation-settings:'wdth' 106,'wght' 700}
.stopka-blok .m{font-size:15px}
.stopka-data{margin-top:var(--s5);font-family:var(--font-m);font-size:13px;line-height:1.5;
  color:var(--tusz-2);max-width:52ch}

/* =====================  BREAKPOINTY  ===================== */

@media (min-width:23.75rem){
  .hero h1{font-size:clamp(2rem,1.05rem + 3.8vw,3.75rem)}
}

@media (min-width:37.5rem){
  .kafle{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 20px}
  .dwa{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
  .dwa > div{margin-top:0}
  .cena-glowa{display:grid;grid-template-columns:auto 1fr;gap:var(--s5);align-items:start}
  .cena-kwota{font-size:44px}
}

@media (min-width:56.25rem){
  :root{--pasek-h:0px}
  .plansza{grid-template-columns:[pelna-start] 1fr [tresc-start] min(1180px,calc(100% - 80px)) [tresc-end] 1fr [pelna-end]}

  .marka{padding-block:var(--s4) 0;min-height:56px;gap:12px}
  .marka-znak{width:28px;height:28px}
  .marka-nazwa{font-size:16px}
  .marka-nav{display:flex;align-items:center;gap:24px;margin-left:auto;margin-right:20px}
  .marka-nav a{font-size:15px;text-decoration:none;
    background-image:linear-gradient(var(--tusz),var(--tusz));
    background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;
    transition:background-size 200ms cubic-bezier(.2,.8,.2,1)}
  .marka-nav a:hover{background-size:100% 1px}
  .marka-nav .tel{font-family:var(--font-m);font-variation-settings:'wdth' 100,'wght' 550}

  .hero{padding-block:var(--s5) var(--s7)}
  .hero-siatka{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;position:relative}
  .hero-tekst{grid-column:1 / span 6;position:relative;z-index:1}
  .hero .lead{max-width:52ch}
  .hero h1{line-height:1.02;letter-spacing:-.035em}
  .kicker{margin-top:var(--s5);font-size:14px}
  .kicker-mob{display:none}
  .kicker-desk{display:block}
  .hero-cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:var(--s6)}
  .hero-cta .przycisk{min-height:56px;font-size:17px}
  .hero-cta .przycisk b{font-family:var(--font-m);font-variation-settings:'wdth' 100,'wght' 600}
  .hero-cta .link{font-size:16px;
    background-image:linear-gradient(var(--tusz),var(--tusz));
    background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px;
    text-decoration:none}
  .hero-cta .link:hover{background-size:0% 1px}
  .hero-cta-pod{width:100%;font-size:14px;color:var(--tusz-2);margin-top:-12px}
  .tasma-glowa,.tasma{display:none}

  .linie-siatki{position:absolute;inset:0;pointer-events:none;z-index:0;
    display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .linie-siatki i{grid-column:5;border-left:1px solid var(--linia);height:100%}
  .linie-siatki i + i{grid-column:9}

  .wachlarz{display:block;grid-column:7 / span 6;position:relative;z-index:1;align-self:start;
    padding-bottom:24px}
  .wachlarz-nota{font-family:var(--font-m);font-size:12px;color:var(--tusz-2);margin-bottom:var(--s3)}
  /* szerokosci procentowe: stos wypelnia kolumne co do piksela i nigdy nie rozpycha strony */
  .wachlarz-stos{position:relative;height:350px}
  .wachlarz .kafel{position:absolute;top:0;left:0;width:76%;
    box-shadow:0 12px 28px -20px rgba(28,26,22,.35)}
  .wachlarz .kafel:nth-child(2){left:12%;top:28px}
  .wachlarz .kafel:nth-child(3){left:24%;top:56px}
  .wachlarz .kafel-podpis{display:none}

  .wzornik{padding-block:var(--s6) var(--s7)}
  .kafle{grid-template-columns:repeat(3,minmax(0,1fr));gap:72px 24px}
  .chipy{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
  .chipy a{display:inline-flex;align-items:center;min-height:44px;padding-inline:16px;
    border:1px solid var(--linia);border-radius:999px;background:var(--tlo-karton);
    font-size:15px;font-variation-settings:'wdth' 100,'wght' 500;text-decoration:none}
  .chipy a:hover{background:var(--tlo-karton-mocniej);border-color:var(--linia-2)}
  .chipy .ile{font-family:var(--font-m);font-size:13px;color:var(--tusz-2);margin-left:8px}
  .spis{display:none}

  .rzad-glowa{position:relative}
  .rzad-nr{width:auto}

  .pas{padding-block:var(--s7)}
  .pas .weziej{width:58.33%}

  .kto{padding-block:var(--s8) var(--s7)}
  .kto-siatka{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .kto-siatka > .linie-siatki{display:none}
  .kto-tekst{grid-column:1 / span 6;position:relative;z-index:1}
  .kto-metr{grid-column:8 / span 5;margin-top:40px;position:relative;z-index:1}
  .metryka{margin-top:0}

  .zakres-siatka{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .zakres-siatka .lewo{grid-column:1 / span 5}
  .zakres-siatka .prawo{grid-column:6 / span 7;margin-top:0}

  .faq > div{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .faq dt{grid-column:1 / span 4}
  .faq dd{grid-column:5 / span 7;margin-top:0}

  .nie > div{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
  .nie dt{grid-column:1 / span 5}
  .nie dd{grid-column:6 / span 7;margin-top:0}

  .krok{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .krok-czas{grid-column:1 / span 3}
  .krok p{grid-column:4 / span 8;margin-top:0}

  .kontakt-siatka{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .kontakt-siatka .formularz{grid-column:1 / span 7;max-width:none}
  .kontakt-siatka .kontakt-bok{grid-column:9 / span 4}
  .kanaly{margin-top:0}
  .kanaly > div:first-child{border-top:0;padding-top:0}

  .pasek-tel{display:none}
  .stopka{padding-block:var(--s7)}
  .stopka-blok{max-width:50%}

  .marka.przyklejony{position:sticky;top:0;z-index:30;background:var(--tlo-plansza);
    border-bottom:1px solid var(--linia);padding-block:12px}
}

@media (min-width:73.75rem){
  .kafle{grid-template-columns:repeat(4,minmax(0,1fr))}
  .wachlarz-stos{height:390px}
}

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

@layer wyjatki{
  .ziarno{position:relative;isolation:isolate}
  .ziarno::before{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    opacity:.05;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}

/* =====================================================================
   OPINIE — prawdziwe zdjecie, prawdziwy cytat, link do firmy.
   Sekcja istnieje tylko wtedy, gdy sa co najmniej trzy komplety.
   ===================================================================== */
@layer komponenty{
  .opinie{margin-top:var(--s5);display:grid;grid-template-columns:1fr;gap:var(--s5)}
  .opinia{
    background:var(--tlo-karton);border:1px solid var(--linia);border-radius:4px;
    padding:var(--s4);display:flex;flex-direction:column;gap:var(--s4);
  }
  .opinia-foto{
    flex:none;width:96px;height:120px;border-radius:2px;overflow:hidden;
    background:var(--tlo-karton-mocniej);border:1px solid var(--linia);
  }
  .opinia-foto img{width:100%;height:100%;object-fit:cover;display:block}
  .opinia-glowa{display:flex;align-items:flex-start;gap:var(--s4)}
  .opinia-kto{min-width:0}
  .opinia-imie{font-size:17px;font-variation-settings:'wdth' 106,'wght' 700;line-height:1.25}
  .opinia-firma{font-size:14px;color:var(--tusz-2);line-height:1.4;margin-top:2px}
  .opinia-cytat{font-size:16.5px;line-height:1.55;margin:0}
  .opinia-cytat::before{content:"\201E"}
  .opinia-cytat::after{content:"\201D"}
  .opinia-linki{
    margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--linia);
    display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);font-size:14px;
  }
  .opinia-linki a{
    display:inline-flex;align-items:center;gap:6px;min-height:32px;
    text-decoration-color:var(--akcja);text-decoration-thickness:2px;text-underline-offset:3px;
  }
  .opinia-linki svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;
    stroke-linecap:round;stroke-linejoin:round;flex:none}
  .opinie-nota{margin-top:var(--s4);font-size:15px;color:var(--tusz-2);max-width:62ch}

  @media (min-width:37.5rem){
    .opinie{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s4)}
  }
  @media (min-width:56.25rem){
    .opinie{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5) 24px}
    .opinia-foto{width:104px;height:130px}
  }
}

/* zdjecie w sekcji "Kto to robi" — ten sam karton co probki we wzorniku */
@layer komponenty{
  .kto-foto{
    margin:0 0 var(--s4);
    background:var(--tlo-karton);border:1px solid var(--linia);border-radius:2px;padding:8px;
  }
  .kto-foto img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;
    background:var(--tlo-karton-mocniej)}
  @media (min-width:56.25rem){
    .kto-metr{margin-top:0}
    .kto-foto{margin-bottom:var(--s4)}
  }
}

/* =====================================================================
   TALIA PROBEK (hero, desktop) — prace leca po kolei 001 -> 131.
   Przednia zanika do przodu, reszta przesuwa sie o jedno miejsce,
   z tylu wylania sie kolejna. Tylko przesuniecie i przenikanie, bez 3D.
   ===================================================================== */
@layer komponenty{
  .talia-dol{display:none}

  @media (min-width:56.25rem){
    /* pozycje sa liczone od szerokosci karty (76% kolumny): 12% kolumny = 15.79% karty */
    .talia .talia-stos .kafel[data-poz]{
      left:0;top:0;
      transition:transform 720ms cubic-bezier(.2,.8,.2,1), opacity 560ms cubic-bezier(.2,.8,.2,1);
      will-change:transform,opacity;
    }
    .talia .talia-stos .kafel[data-poz="2"]{transform:translate(0,0);opacity:1;z-index:1}
    .talia .talia-stos .kafel[data-poz="1"]{transform:translate(15.79%,28px);opacity:1;z-index:2}
    .talia .talia-stos .kafel[data-poz="0"]{transform:translate(31.58%,56px);opacity:1;z-index:3}
    .talia .talia-stos .kafel[data-poz="wejscie"]{transform:translate(-15.79%,-28px) scale(.97);opacity:0;z-index:0}
    .talia .talia-stos .kafel[data-poz="wyjscie"]{transform:translate(47.37%,84px) scale(1.02);opacity:0;z-index:4}

    .talia-stos{touch-action:pan-y;cursor:grab}
    .talia-stos:active{cursor:grabbing}

    html:not(.bez-js) .talia-dol{
      display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
      margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--linia);
      max-width:calc(76% + 31.58% * .76);
    }
    .talia-podpis{font-size:12.5px;letter-spacing:.03em;color:var(--tusz-2);margin:0;min-width:0;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .talia-ster{display:flex;gap:8px;flex:none}
    .talia-btn{
      width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
      border:1px solid var(--linia);border-radius:999px;background:var(--tlo-karton);color:var(--tusz);
      cursor:pointer;transition:background 160ms cubic-bezier(.2,.8,.2,1),border-color 160ms cubic-bezier(.2,.8,.2,1);
    }
    .talia-btn:hover{background:var(--tlo-karton-mocniej);border-color:var(--linia-2)}
    .talia-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;
      stroke-linecap:round;stroke-linejoin:round}
    .talia-btn .ik-graj{display:none;fill:currentColor;stroke:none}
    .talia-pauza[aria-pressed="true"] .ik-pauza{display:none}
    .talia-pauza[aria-pressed="true"] .ik-graj{display:block}
  }
}
@media (prefers-reduced-motion:reduce){
  .talia .talia-stos .kafel[data-poz]{transition:none}
}