@charset "UTF-8";
/* =========================================================================
   ELEKTRYK MIEJSKI, system wizualny, wersja 2
   Paleta i kroje wyprowadzone z logo. Decyzje: /DESIGN.md.
   Spis: 01 fonty · 02 tokeny · 03 baza · 04 uklad · 05 dach · 06 header
         07 hero · 08 przyciski · 09 znaczniki · 10 uslugi · 11 dane
         12 tresc · 13 rysunki · 14 faq · 15 formularz · 16 tabela
         17 stopka · 18 pasek telefonu · 19 ruch
   ========================================================================= */

/* --- 01 fonty ---------------------------------------------------------- */
/* Jeden krój na całą stronę. Inter Tight, bo nagłówki idą wersalikami,
   a wąski rysunek mieści "PODŁĄCZENIE PŁYTY INDUKCYJNEJ" w dwóch liniach
   na ekranie 360 px. Brak osi szerokości, więc nigdzie nie ma font-stretch. */
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/inter-tight-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:"Inter Tight";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/inter-tight-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,U+2126,U+2190,U+2192,U+2248,U+2260,U+2264-2265}

/* --- 02 tokeny --------------------------------------------------------- */
:root{
  /* kolor, wyciagniety pipeta z logo */
  --wegiel:#2E2A27; --stal:#55504C; --tlo:#F6F2F1; --biel:#FFFFFF;
  --czerwien:#E3332E; --czerwien-c:#C0271F; --zolty:#F7EC3A;
  --linia:#E2DCD9; --stal-jasna:#B5AEA9; --linia-c:#45403C;
  --focus:#C0271F; --focus-c:#F7EC3A;

  /* przestrzen */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem;
  --s7:3rem; --s8:4rem; --s9:6rem;
  --gutter:clamp(1.25rem,4vw,3rem);
  --shell:min(100% - var(--gutter) * 2,77.5rem);
  --bleed:max(var(--gutter),(100vw - 77.5rem) / 2);
  --band-y:clamp(4rem,8vw,7.5rem);

  /* ksztalt: dwie wartosci i ani jednej wiecej.
     Zero na wszystkim, co jest plaszczyzna. 999px tylko na pigulkach. */
  --r-karta:0; --r-btn:0; --r-pigulka:999px;
  --cien:none;
  --cien-hover:none;

  /* typografia: jeden krój, naglowki wersalikami */
  --f-naglowek:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --f-tekst:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --t-xs:.8125rem; --t-sm:.9375rem; --t-etykieta:.875rem; --t-base:1.0625rem;
  --t-lg:clamp(1.125rem,.98rem + .6vw,1.375rem);
  --t-xl:clamp(1.25rem,1.05rem + .9vw,1.625rem);
  --t-2xl:clamp(1.625rem,1.15rem + 2vw,2.5rem);
  --t-3xl:clamp(1.875rem,1.25rem + 2.8vw,3.25rem);
  --t-hero:clamp(1.875rem,1.15rem + 3vw,4rem);
  --t-tel:clamp(2rem,1rem + 4.8vw,4.25rem);

  --z-sticky:100; --z-header:200; --z-drop:300; --z-pasek:400; --z-skip:500;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* --- 03 baza ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
body{
  margin:0;background:var(--tlo);color:var(--wegiel);
  font-family:var(--f-tekst);font-size:var(--t-base);font-weight:400;
  line-height:1.62;font-kerning:normal;font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* Naglowki wersalikami. W wersalikach ujemny tracking sklejalby litery,
   a ciasna interlinia zahaczalaby ogonkami Ą i Ę o linie wyzej, stad 1.1. */
h1,h2,h3,h4{margin:0;font-family:var(--f-naglowek);font-weight:700;
  text-transform:uppercase;line-height:1.1;letter-spacing:.005em;text-wrap:balance;
  /* siatka bezpieczenstwa dla dlugich polskich wersalikow na 320 px */
  overflow-wrap:break-word}
h1{font-size:var(--t-3xl)}
h2{font-size:var(--t-2xl)}
h3{font-size:var(--t-xl);line-height:1.14}
/* h4 stoi w srodku artykulow, tam wersaliki tylko meczyloby oko */
h4{font-size:var(--t-lg);line-height:1.3;text-transform:none;letter-spacing:-.005em}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0}
img,svg,picture{display:block;max-width:100%}
img{height:auto;background:var(--linia)}
a{color:var(--czerwien-c);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
strong,b{font-weight:700}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.na-ciemnym :focus-visible,.pasek :focus-visible{outline-color:var(--focus-c)}
::selection{background:var(--zolty);color:var(--wegiel)}

.liczby{font-variant-numeric:tabular-nums}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.skip{position:fixed;top:.75rem;left:.75rem;z-index:var(--z-skip);transform:translateY(-200%);
  background:var(--wegiel);color:var(--biel);padding:.9rem 1.4rem;border-radius:var(--r-btn);
  font-weight:600;font-size:var(--t-sm);text-decoration:none;transition:transform .18s var(--ease)}
.skip:focus{transform:translateY(0)}

/* --- 04 uklad ---------------------------------------------------------- */
.shell{width:var(--shell);margin-inline:auto}
.band{padding-block:var(--band-y)}
.band--tight{padding-block:clamp(2.75rem,5.5vw,5rem)}
.band--biel{background:var(--biel)}
.band--ciemny{background:var(--wegiel);color:var(--biel)}
.na-ciemnym,.band--ciemny{color:var(--biel)}
.na-ciemnym h1,.na-ciemnym h2,.na-ciemnym h3,.band--ciemny h2,.band--ciemny h3{color:var(--biel)}
.band--ciemny a:not(.btn),.na-ciemnym a:not(.btn){color:var(--zolty)}
.lede{font-size:var(--t-lg);line-height:1.55;color:var(--stal);max-width:56ch}
.band--ciemny .lede,.na-ciemnym .lede{color:var(--stal-jasna);line-height:1.6}
.muted{color:var(--stal)}
.band--ciemny .muted,.na-ciemnym .muted{color:var(--stal-jasna)}
.measure{max-width:68ch}

.split{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media(min-width:60rem){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .split--7-5{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .split--5-7{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
}
.head-block{max-width:52rem}
.head-block h2{max-width:20ch}
.head-block + *{margin-top:clamp(2rem,4vw,3rem)}

/* --- 05 dach: ksztalt z logo ------------------------------------------- */
.dach{display:inline-block;width:1.65rem;height:1.05rem;flex:0 0 auto;background:var(--czerwien);
  clip-path:polygon(50% 0,100% 62%,100% 100%,84% 100%,84% 74%,50% 34%,16% 74%,16% 100%,0 100%,0 62%)}
.band--ciemny .dach,.na-ciemnym .dach{background:var(--zolty)}
.h-dach{display:flex;align-items:flex-start;gap:.85rem}
.h-dach .dach{margin-top:.42em}

/* --- 06 header --------------------------------------------------------- */
/* Pas nad naglowkiem. Numer telefonu widoczny, zanim ktokolwiek cokolwiek przewinie. */
.pasek-gora{background:var(--wegiel);color:var(--biel);font-size:var(--t-xs)}
.pasek-gora__in{display:flex;align-items:center;justify-content:center;
  gap:1.5rem;min-height:2.5rem;flex-wrap:wrap}
.pasek-gora a,.pasek-gora span.pasek-gora__szer{color:var(--biel);text-decoration:none}
.pasek-gora__in > *{display:inline-flex;align-items:center;gap:.45rem}
.pasek-gora svg{color:var(--stal-jasna);flex:0 0 auto}
.pasek-gora a:hover{text-decoration:underline;text-underline-offset:.2em}
@media(max-width:47.99rem){.pasek-gora__szer{display:none}}
@media(min-width:48rem){.pasek-gora__in{justify-content:flex-end}}

.hdr{position:sticky;top:0;z-index:var(--z-header);background:var(--biel);
  transition:box-shadow .25s var(--ease)}
.hdr.is-stuck{box-shadow:0 1px 0 var(--linia),0 8px 24px rgba(46,42,39,.07)}
.hdr__in{width:var(--shell);margin-inline:auto;display:flex;align-items:center;gap:var(--s5);
  min-height:4rem;transition:min-height .25s var(--ease)}
.hdr.is-stuck .hdr__in{min-height:3.5rem}
@media(min-width:64rem){
  .hdr__in{min-height:5rem}
  .hdr.is-stuck .hdr__in{min-height:4.25rem}
}

.marka{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.marka img{width:auto;height:clamp(2.5rem,4.8vw,3.4rem);background:none;transition:height .25s var(--ease)}
.hdr.is-stuck .marka img{height:clamp(2.1rem,3.6vw,2.5rem)}

.nav{margin-left:auto}
.nav__list{list-style:none;display:flex;align-items:center;gap:clamp(.4rem,1.3vw,1.35rem)}
.nav__a{display:block;padding:.6rem .2rem;color:var(--wegiel);text-decoration:none;
  font-size:var(--t-sm);font-weight:600;position:relative}
.nav__a::after{content:"";position:absolute;left:.2rem;right:.2rem;bottom:.3rem;height:2px;
  background:var(--czerwien);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .25s var(--ease)}
.nav__a:hover::after,.nav__a:focus-visible::after{transform:scaleX(1)}
.nav__a[aria-current=page]{color:var(--czerwien-c)}
.nav__a[aria-current=page]::after{transform:scaleX(1)}

.drop{position:relative}
.drop > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.35rem;
  padding:.6rem .2rem;font-size:var(--t-sm);font-weight:600;user-select:none}
.drop > summary::-webkit-details-marker{display:none}
.drop > summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);
  transition:transform .2s var(--ease)}
.drop[open] > summary::after{transform:translateY(1px) rotate(-135deg)}
.drop__panel{position:absolute;top:calc(100% + .6rem);left:-1rem;min-width:20rem;z-index:var(--z-drop);
  background:var(--biel);border:1px solid var(--linia);border-radius:var(--r-karta);
  padding:.5rem;list-style:none;box-shadow:var(--cien)}
.drop__panel a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.65rem .85rem;color:var(--wegiel);text-decoration:none;font-size:var(--t-sm);
  font-weight:600;border-radius:8px}
.drop__panel a:hover,.drop__panel a:focus-visible{background:var(--tlo);color:var(--czerwien-c)}
.drop__k{font-size:var(--t-xs);font-weight:500;color:var(--stal)}

.hdr__tel{flex:0 0 auto;display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  background:var(--zolty);color:var(--wegiel);padding:.8rem 1.15rem;border-radius:var(--r-btn);
  font-weight:700;font-size:var(--t-sm);white-space:nowrap;box-shadow:0 2px 0 rgba(46,42,39,.18);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.hdr__tel:hover{transform:translateY(-1px);box-shadow:0 3px 0 rgba(46,42,39,.22)}
.hdr__tel svg{flex:0 0 auto}

.burger{display:none}
@media(max-width:63.99rem){
  .hdr__in{flex-wrap:wrap;gap:.7rem;padding-block:.7rem;min-height:0}
  .hdr.is-stuck .hdr__in{min-height:0}
  .nav{order:3;width:100%;margin-left:0;display:none}
  .burger[open] ~ .nav{display:block}
  .hdr__tel{order:1;margin-left:auto}
  .burger{display:block;order:2}
  .burger > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;
    border:2px solid var(--wegiel);border-radius:var(--r-btn);padding:.62rem .85rem;
    font-size:var(--t-sm);font-weight:700;min-height:2.9rem}
  .burger > summary::-webkit-details-marker{display:none}
  .burger__bars{display:grid;gap:3px;width:16px}
  .burger__bars i{height:2px;background:currentColor;display:block;border-radius:2px}
  .burger[open] .burger__t--o{display:none}
  .burger:not([open]) .burger__t--c{display:none}
  .nav__list{flex-direction:column;align-items:stretch;gap:0;padding-block:.5rem;
    border-top:1px solid var(--linia)}
  .nav__list > li{border-bottom:1px solid var(--linia)}
  .nav__a,.drop > summary{padding:1rem .2rem;font-size:1.0625rem}
  .nav__a::after{display:none}
  .drop{position:static}
  .drop > summary{justify-content:space-between}
  .drop__panel{position:static;min-width:0;border:0;box-shadow:none;background:var(--tlo);
    padding:.35rem 0 .6rem;margin-bottom:.6rem}
  .drop__panel a{padding:.75rem .9rem}
}
@media(max-width:56.24rem){.hdr__tel{display:none}.burger{margin-left:auto}}
@media(min-width:64rem){.burger{display:none}.nav{display:block!important}}

.crumbs{font-size:var(--t-sm);color:var(--stal);padding-block:1.2rem .2rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem}
.crumbs li::after{content:"›";margin-left:.45rem;color:var(--stal-jasna)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--stal);text-decoration:none}
.crumbs a:hover{color:var(--czerwien-c);text-decoration:underline}

/* --- 07 hero ----------------------------------------------------------- */
/* Pelny blok czerwieni obok zdjecia na cala wysokosc, zero odstepu, ostre krawedzie.
   Na telefonie blok jest pierwszy i zawiera komplet: kto, gdzie, co, przycisk.
   Zdjecie schodzi pod niego, wiec nie wypycha CTA ponizej zgiecia. */
/* minmax(0,1fr) jest obowiazkowe: bez tego kolumna rozciaga sie do min-content
   dlugiego wersalikowego naglowka i cala strona jedzie w poziomie */
.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:0;background:var(--biel)}
.hero__blok{background:var(--czerwien-c);color:var(--biel);min-width:0;
  padding-block:clamp(2.5rem,7vw,4.5rem);
  padding-inline:var(--bleed);
  display:flex;flex-direction:column;justify-content:center}
.hero__txt{max-width:38rem;min-width:0}
.hero__eyebrow{font-size:var(--t-etykieta);font-weight:600;color:var(--biel);
  letter-spacing:.04em;text-transform:uppercase}
/* naglowek w calosci bialy: zolc znaczy "zadzwon" i zostaje przy przycisku */
.hero h1{font-size:var(--t-hero);color:var(--biel);margin-top:clamp(.9rem,2vw,1.4rem)}
/* podstrony niosa dlugie tytuly SEO, tam skala hero rozbija uklad */
.hero:not(.hero--start) h1{font-size:var(--t-2xl);margin-top:0}
.hero__lede{margin-top:clamp(1rem,2.2vw,1.5rem);font-size:var(--t-lg);line-height:1.5;
  color:var(--biel);max-width:42ch}
.hero__cta{margin-top:clamp(1.5rem,3vw,2.25rem);display:flex;flex-direction:column;
  align-items:stretch;gap:.75rem}
.hero__cta .btn{justify-content:center}
@media(min-width:30rem){
  .hero__cta{flex-direction:row;flex-wrap:wrap;align-items:center;gap:1rem}
  .hero__cta .btn{justify-content:flex-start}
}

/* pigulki z danymi w bloku czerwieni: obrys, nie wypelnienie */
.hero__dane{margin-top:clamp(1.5rem,3vw,2rem);list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}
.hero__dane li{font-size:var(--t-sm);font-weight:600;color:var(--biel);
  border:1px solid var(--biel);border-radius:var(--r-pigulka);padding:.4rem .9rem}

/* Zdjecie wyjete z przeplywu. Inaczej pionowy kadr 3:4 dyktuje wysokosc
   calego wiersza i blok czerwieni przestaje sie z nim rownac. */
.hero__fig{position:relative;margin:0;overflow:hidden;background:var(--linia)}
.hero__fig picture{position:absolute;inset:0;display:block}
.hero__fig img{width:100%;height:100%;object-fit:cover;object-position:52% 46%}
@media(max-width:63.99rem){
  .hero__fig{height:clamp(13rem,45vw,20rem)}
}
/* podstrona bez zdjecia: blok czerwieni przez cala szerokosc, tekst w --shell */
.hero--sam .hero__blok{padding-block:clamp(2.5rem,5.5vw,3.75rem)}
.hero--sam .hero__txt{max-width:52rem}

@media(min-width:64rem){
  /* 5 do 7: blok trzyma sie lewej krawedzi ekranu, zdjecie prawej, styk na 0 px */
  .hero{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .hero__blok{padding-inline:var(--bleed) clamp(2rem,4vw,3.5rem)}
  /* wysokosc wiersza dyktuje blok z tekstem, zdjecie sie do niego dorownuje */
  .hero--start .hero__blok{min-height:clamp(28rem,36vw,32rem)}
  /* podstrony maja dlugie tytuly SEO, wiec dostaja szerszy blok */
  .hero:not(.hero--start){grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
  .hero:not(.hero--start) .hero__blok{min-height:20rem}
  .hero--sam{grid-template-columns:minmax(0,1fr)}
  .hero--sam .hero__blok{padding-inline:var(--bleed);min-height:0}
}

/* --- 08 przyciski ------------------------------------------------------ */
.btn{position:relative;display:inline-flex;align-items:center;gap:.65rem;
  padding:1rem 1.6rem;border:0;border-radius:var(--r-btn);
  background:var(--zolty);color:var(--wegiel);
  font-family:var(--f-tekst);font-size:1rem;font-weight:700;letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;min-height:3.25rem;box-shadow:0 3px 0 rgba(46,42,39,.22);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease)}
.btn:hover,.btn:focus-visible{transform:translateY(-2px);box-shadow:0 5px 0 rgba(46,42,39,.24)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(46,42,39,.22)}
.btn svg{flex:0 0 auto}
.btn--czerwony{background:var(--czerwien-c);color:var(--biel);box-shadow:0 3px 0 rgba(46,42,39,.28)}
.btn--czerwony:hover,.btn--czerwony:focus-visible{box-shadow:0 5px 0 rgba(46,42,39,.3)}
.btn--obrys{background:transparent;color:var(--wegiel);box-shadow:inset 0 0 0 2px var(--wegiel)}
.btn--obrys:hover,.btn--obrys:focus-visible{background:var(--wegiel);color:var(--biel);
  box-shadow:inset 0 0 0 2px var(--wegiel);transform:translateY(-2px)}
.band--ciemny .btn--obrys,.na-ciemnym .btn--obrys{color:var(--biel);box-shadow:inset 0 0 0 2px var(--stal-jasna)}
.band--ciemny .btn--obrys:hover,.na-ciemnym .btn--obrys:hover{background:var(--biel);color:var(--wegiel)}
/* obrys na czerwonym i na ciemnym tle: bialy, bo ciemny znika na czerwieni */
.btn--obrys-jasny{background:transparent;color:var(--biel);box-shadow:inset 0 0 0 2px var(--biel)}
.btn--obrys-jasny:hover,.btn--obrys-jasny:focus-visible{background:var(--biel);color:var(--wegiel);
  box-shadow:inset 0 0 0 2px var(--biel);transform:translateY(-2px)}
.btn--szeroki{width:100%;justify-content:center}

.tlink{display:inline-flex;align-items:center;gap:.45rem;color:var(--wegiel);font-weight:600;
  font-size:1rem;text-decoration:none;border-bottom:2px solid var(--czerwien);padding-bottom:.15rem}
.tlink:hover,.tlink:focus-visible{color:var(--czerwien-c)}
.band--ciemny .tlink,.na-ciemnym .tlink{color:var(--biel);border-color:var(--zolty)}
.band--ciemny .tlink:hover,.na-ciemnym .tlink:hover{color:var(--zolty)}

.arrow-link{display:inline-flex;align-items:baseline;gap:.5rem;font-weight:700;
  text-decoration:none;font-size:1rem;color:var(--czerwien-c)}
.arrow-link span{border-bottom:2px solid currentColor;padding-bottom:.05rem}
.arrow-link::after{content:"›";font-size:1.3em;line-height:1;transition:transform .22s var(--ease)}
.arrow-link:hover::after{transform:translateX(.3rem)}
.band--ciemny .arrow-link,.na-ciemnym .arrow-link{color:var(--zolty)}

/* --- 09 znaczniki ------------------------------------------------------ */
.znacznik{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .9rem;
  border-radius:var(--r-pigulka);font-size:var(--t-etykieta);font-weight:700;
  background:var(--tlo);color:var(--stal);white-space:nowrap}
.znacznik--wazny{background:var(--czerwien-c);color:var(--biel)}
.znacznik--jasny{background:rgba(255,255,255,.14);color:var(--biel)}

/* Blyskawica w kole, wprost z logo. Tylko przy rzeczach, ktore trzeba zauwazyc. */
.iskra{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:2.75rem;height:2.75rem;border-radius:50%;background:var(--zolty)}
.iskra svg{width:1.2rem;height:1.2rem}

/* --- 10 oferta: siatka ikon -------------------------------------------- */
/* Dwie kolumny i duzo powietrza. Zero tla, ramek i cieni: ikona, naglowek,
   akapit. Cala pozycja jest linkiem, wiec cel dotykowy ma kilkaset pikseli. */
.oferta{list-style:none;display:grid;gap:clamp(2.75rem,7vw,4rem)}
.oferta__poz a{display:block;text-decoration:none;color:var(--wegiel)}
.oferta__ikona{display:block;color:var(--stal-jasna);transition:color .2s var(--ease)}
.oferta__ikona svg{width:clamp(3.5rem,8vw,4.5rem);height:auto}
.oferta h3{margin-top:clamp(1.25rem,2.5vw,1.75rem);max-width:18ch}
.oferta p{margin-top:.9rem;color:var(--stal);font-size:1rem;line-height:1.6;max-width:46ch}
.oferta__go{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;
  font-size:1rem;font-weight:700;color:var(--czerwien-c)}
.oferta__go::after{content:"›";font-size:1.3em;line-height:1;transition:transform .22s var(--ease)}
.oferta__poz a:hover .oferta__go::after{transform:translateX(.3rem)}
.oferta__poz a:hover h3{color:var(--czerwien-c)}
.oferta__poz a:hover .oferta__ikona{color:var(--stal)}
@media(min-width:48rem){
  .oferta{grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(3rem,6vw,6rem);row-gap:clamp(3.5rem,7vw,5.5rem)}
}

/* karta i blok: uzywane przez "dalej" na podstronach i przez /o-nas/ */
.karta{position:relative;display:flex;flex-direction:column;gap:.85rem;background:var(--biel);
  border:1px solid var(--linia);border-radius:var(--r-karta);
  padding:clamp(1.5rem,2.6vw,2.1rem);text-decoration:none;color:var(--wegiel);
  transition:border-color .2s var(--ease)}
.karta:hover{border-color:var(--stal-jasna)}
.karta h3{margin:0}
.karta p{color:var(--stal);font-size:1rem;line-height:1.55;max-width:46ch}
.karta__top{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem}
.karta__go{margin-top:auto;padding-top:.5rem;font-size:1rem;font-weight:700;
  color:var(--czerwien-c);display:flex;align-items:center;gap:.4rem}
.karta__go::after{content:"›";font-size:1.3em;line-height:1;transition:transform .22s var(--ease)}
.karta:hover .karta__go::after{transform:translateX(.3rem)}
.karta--ciemna{background:var(--wegiel);color:var(--biel);border-color:var(--linia-c)}
.karta--ciemna h3{color:var(--biel)}
.karta--ciemna p{color:var(--stal-jasna)}
.karta--ciemna .karta__go{color:var(--zolty)}

/* przerywnik: godziny i drugie CTA w polowie strony */
.przerywnik{text-align:center}
.przerywnik h2{max-width:22ch;margin-inline:auto}
.przerywnik__meta{margin-top:clamp(1.5rem,3vw,2rem);list-style:none;display:flex;
  flex-wrap:wrap;justify-content:center;gap:.75rem 2rem;color:var(--stal-jasna);
  font-size:var(--t-sm)}
.przerywnik__meta b{color:var(--biel);font-weight:700}
.przerywnik__cta{margin-top:clamp(1.75rem,3.5vw,2.5rem)}

/* --- 11 wiersz danych -------------------------------------------------- */
.proto{list-style:none}
.proto > li{display:grid;gap:.25rem .5rem;padding-block:clamp(1rem,2vw,1.4rem);
  border-bottom:1px solid var(--linia)}
.proto > li:first-child{border-top:1px solid var(--linia)}
.proto__k{font-size:var(--t-etykieta);font-weight:700;color:var(--czerwien-c);padding-top:.3rem}
.proto__t{font-weight:700;font-size:var(--t-lg);letter-spacing:-.01em;line-height:1.3}
.proto__d{color:var(--stal);font-size:1rem;line-height:1.55;max-width:62ch}
.proto__v{font-weight:700;color:var(--wegiel);font-variant-numeric:tabular-nums;
  background:var(--tlo);border-radius:var(--r-pigulka);padding:.3rem .85rem;font-size:var(--t-sm)}
@media(min-width:48rem){
  .proto > li{grid-template-columns:11rem minmax(0,1fr);align-items:start}
  .proto__k{grid-column:1;grid-row:1 / span 2;padding-top:.45rem}
  .proto__t{grid-column:2;grid-row:1}
  .proto__d{grid-column:2;grid-row:2}
  .proto--v > li{grid-template-columns:11rem minmax(0,1fr) minmax(6rem,auto)}
  .proto--v .proto__v{grid-column:3;grid-row:1 / span 2;justify-self:end;margin-top:.35rem;
    white-space:nowrap}
}
.band--biel .proto__v{background:var(--tlo)}
.band--ciemny .proto > li,.na-ciemnym .proto > li{border-color:var(--linia-c)}
.band--ciemny .proto > li:first-child,.na-ciemnym .proto > li:first-child{border-top-color:var(--linia-c)}
.band--ciemny .proto__k,.na-ciemnym .proto__k{color:var(--zolty)}
.band--ciemny .proto__d,.na-ciemnym .proto__d{color:var(--stal-jasna)}
.band--ciemny .proto__v,.na-ciemnym .proto__v{background:rgba(255,255,255,.12);color:var(--biel)}

.kroki{list-style:none;counter-reset:krok}
.kroki > li{counter-increment:krok;display:grid;grid-template-columns:2.75rem minmax(0,1fr);
  gap:.2rem 1.1rem;padding-block:clamp(1.1rem,2vw,1.5rem);border-bottom:1px solid var(--linia)}
.kroki > li:first-child{border-top:1px solid var(--linia)}
.kroki > li::before{content:counter(krok);grid-row:span 2;width:2.25rem;height:2.25rem;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--czerwien-c);color:var(--biel);font-weight:700;font-size:1rem;margin-top:.15rem}
.kroki__t{font-weight:700;font-size:var(--t-lg);letter-spacing:-.01em;line-height:1.3;padding-top:.3rem}
.kroki__d{color:var(--stal);font-size:1rem;line-height:1.55;max-width:60ch}
.band--ciemny .kroki > li,.na-ciemnym .kroki > li{border-color:var(--linia-c)}
.band--ciemny .kroki > li:first-child,.na-ciemnym .kroki > li:first-child{border-top-color:var(--linia-c)}
.band--ciemny .kroki > li::before,.na-ciemnym .kroki > li::before{background:var(--zolty);color:var(--wegiel)}
.band--ciemny .kroki__d,.na-ciemnym .kroki__d{color:var(--stal-jasna)}

.punkty{list-style:none;display:grid;gap:.95rem}
.punkty > li{position:relative;padding-left:2.4rem;font-size:var(--t-base);line-height:1.55}
.punkty > li::before{content:"";position:absolute;left:0;top:.12em;width:1.6rem;height:1.6rem;
  border-radius:50%;background:var(--czerwien-c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/1rem no-repeat}
.band--ciemny .punkty > li::before,.na-ciemnym .punkty > li::before{
  background-color:var(--zolty);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%232E2A27' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E")}

.dane{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none}
.dane li{font-size:var(--t-sm);font-weight:600;color:var(--wegiel);background:var(--biel);
  border-radius:var(--r-pigulka);padding:.55rem 1rem;box-shadow:var(--cien)}
.band--biel .dane li{background:var(--tlo);box-shadow:none}
.band--ciemny .dane li,.na-ciemnym .dane li{background:rgba(255,255,255,.12);color:var(--biel)}

/* blok ostrzegawczy, jedyne trzecie uzycie zolci */
.alarm{background:var(--zolty);color:var(--wegiel);padding:clamp(1.5rem,3vw,2.25rem);
  border-radius:var(--r-karta);display:flex;gap:1.25rem;align-items:flex-start}
.alarm .iskra{background:var(--wegiel)}
.alarm h3{font-size:var(--t-lg);margin-bottom:.5rem}
.alarm p{font-size:var(--t-base);line-height:1.55;max-width:62ch}
@media(max-width:34rem){.alarm{flex-direction:column;gap:1rem}}

/* cytat zostaje zwyklym zapisem, wersaliki na calym akapicie sa nieczytelne */
.opinia blockquote{margin:0;font-family:var(--f-naglowek);
  font-size:clamp(1.375rem,1.05rem + 1.6vw,2.125rem);font-weight:500;
  line-height:1.35;letter-spacing:-.01em;text-wrap:balance;max-width:26ch}
.opinia figcaption{margin-top:var(--s5);font-size:1rem;color:var(--stal)}
.opinia figcaption b{color:var(--wegiel);font-weight:700}
.band--ciemny figcaption{color:var(--stal-jasna)}
.band--ciemny figcaption b{color:var(--biel)}

/* --- 12 tresc artykulu ------------------------------------------------- */
.tresc{max-width:68ch}
.tresc > * + *{margin-top:1.2rem}
.tresc h2{margin-top:clamp(2.75rem,5vw,4rem)}
.tresc h3{margin-top:clamp(2rem,3.5vw,2.75rem)}
.tresc h2 + p,.tresc h3 + p,.tresc h2 + ul,.tresc h3 + ul{margin-top:1rem}
.tresc p{line-height:1.68}
.tresc ul{list-style:none;display:grid;gap:.7rem}
.tresc ul > li{position:relative;padding-left:1.6rem}
.tresc ul > li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;
  border-radius:50%;background:var(--czerwien)}
.tresc ol{padding-left:1.4rem;display:grid;gap:.7rem}
.tresc ol > li{padding-left:.3rem}
.tresc ol > li::marker{font-weight:700;color:var(--czerwien-c)}
.tresc figure{margin:clamp(2rem,3.5vw,2.75rem) 0}
.tresc figcaption,.fig figcaption{margin-top:.75rem;font-size:var(--t-sm);color:var(--stal);line-height:1.5}
.fig{margin:0}
.fig img{width:100%;border-radius:var(--r-karta)}

/* --- 13 rysunki -------------------------------------------------------- */
.rysunek{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.rysunek svg{display:block;min-width:34rem;width:100%;height:auto}
.rysunek--szeroki svg{min-width:44rem}
.rysunek text{font-family:var(--f-tekst)}
.podpis{margin-top:1rem;font-size:var(--t-sm);color:var(--stal);line-height:1.55;max-width:70ch}
.band--ciemny .podpis,.na-ciemnym .podpis{color:var(--stal-jasna)}

/* trasa: furgonetka z logo jedzie po drodze */
.trasa{position:relative}
.trasa__mca{margin-top:clamp(1.25rem,2.5vw,2rem)}
.trasa__auto{position:absolute;left:42%;top:45%;width:clamp(7rem,15%,13rem);height:auto;
  background:none}
@media(prefers-reduced-motion:no-preference){
  .trasa__auto{transform:translateX(-3.5rem);opacity:0}
  .trasa.is-live .trasa__auto{transform:translateX(0);opacity:1;
    transition:transform 1.1s var(--ease),opacity .45s ease-out}
}

/* --- 14 faq ------------------------------------------------------------ */
.faq{display:grid;gap:.75rem}
.faq details{background:var(--biel);border-radius:var(--r-karta);box-shadow:var(--cien)}
.band--biel .faq details{background:var(--tlo);box-shadow:none}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:1rem;align-items:flex-start;
  padding:clamp(1.1rem,2vw,1.4rem) clamp(1.2rem,2.2vw,1.6rem);
  font-family:var(--f-naglowek);font-weight:700;font-size:var(--t-lg);letter-spacing:-.015em;
  line-height:1.3;border-radius:var(--r-karta)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 auto;margin-left:auto;width:1.85rem;height:1.85rem;
  border-radius:50%;background-color:var(--tlo);background-repeat:no-repeat;
  background-position:center;
  background-image:linear-gradient(var(--czerwien-c) 0 0),linear-gradient(var(--czerwien-c) 0 0);
  background-size:.8rem 2px,2px .8rem;transition:background-size .25s var(--ease)}
.faq details[open] summary::after{background-size:.8rem 2px,2px 0}
.band--biel .faq summary::after{background-color:var(--biel)}
.faq__a{padding:0 clamp(1.2rem,2.2vw,1.6rem) clamp(1.2rem,2.2vw,1.6rem);color:var(--stal);
  max-width:66ch;line-height:1.65}
.faq__a > * + *{margin-top:.8rem}

/* --- 15 formularz ------------------------------------------------------ */
.form{display:grid;gap:1.25rem}
.pole{display:grid;gap:.45rem}
.pole > label{font-size:var(--t-sm);font-weight:700;color:var(--wegiel)}
.pole > label .req{color:var(--czerwien-c)}
.pole input,.pole select,.pole textarea{
  font-family:var(--f-tekst);font-size:var(--t-base);color:var(--wegiel);background:var(--biel);
  border:2px solid var(--linia);border-radius:var(--r-btn);padding:.85rem 1rem;width:100%;
  transition:border-color .18s var(--ease)}
.pole textarea{min-height:9rem;resize:vertical;line-height:1.5}
.pole select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--wegiel) 50%),linear-gradient(135deg,var(--wegiel) 50%,transparent 50%);
  background-position:calc(100% - 21px) calc(50% + 2px),calc(100% - 15px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.75rem}
.pole input:hover,.pole select:hover,.pole textarea:hover{border-color:var(--stal-jasna)}
.pole input:focus,.pole select:focus,.pole textarea:focus{border-color:var(--czerwien-c);outline:none}
.pole ::placeholder{color:#7A736E;opacity:1}
.pole__hint{font-size:var(--t-sm);color:var(--stal);line-height:1.45}
.pole input:user-invalid,.pole textarea:user-invalid{border-color:var(--czerwien-c)}
.zgoda{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.8rem;align-items:start}
.zgoda input{width:1.5rem;height:1.5rem;margin-top:.1rem;accent-color:var(--czerwien-c);flex:0 0 auto}
.zgoda label{font-size:var(--t-sm);color:var(--stal);line-height:1.5}
@media(min-width:34rem){.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}}

/* --- 16 tabela --------------------------------------------------------- */
.tabela-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--biel);
  border-radius:var(--r-karta);padding:clamp(1rem,2.5vw,1.75rem);box-shadow:var(--cien)}
.tabela{width:100%;border-collapse:collapse;min-width:34rem;font-size:1rem}
.tabela caption{text-align:left;font-size:var(--t-sm);color:var(--stal);padding-bottom:1rem}
.tabela th,.tabela td{text-align:left;padding:.95rem 1rem .95rem 0;border-bottom:1px solid var(--linia);
  vertical-align:top}
.tabela thead th{font-size:var(--t-sm);color:var(--stal);font-weight:700;
  border-bottom:2px solid var(--wegiel)}
.tabela tbody th{font-weight:700;font-size:var(--t-base);letter-spacing:-.01em;width:34%}
.tabela td:last-child,.tabela th:last-child{padding-right:0;text-align:right;white-space:nowrap}
.tabela .cena{font-weight:800;font-variant-numeric:tabular-nums;color:var(--czerwien-c);
  font-size:var(--t-lg)}
.tabela tbody tr:last-child th,.tabela tbody tr:last-child td{border-bottom:0}
@media(max-width:47.99rem){
  .tabela{min-width:0}
  .tabela thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tabela tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem .9rem;
    padding-block:1rem;border-bottom:1px solid var(--linia)}
  .tabela tbody th,.tabela tbody td{border:0;padding:0}
  .tabela tbody th{grid-column:1;grid-row:1;width:auto;align-self:center}
  .tabela tbody td:first-of-type{grid-column:1 / -1;grid-row:2;color:var(--stal);
    font-size:var(--t-sm);line-height:1.5}
  .tabela tbody td:last-child{grid-column:2;grid-row:1;text-align:right;align-self:center}
}

/* --- lista wpisow i galeria -------------------------------------------- */
.lista{list-style:none;display:grid;gap:.9rem}
.lista a{display:grid;gap:.35rem .5rem;padding:clamp(1.3rem,2.4vw,1.9rem);text-decoration:none;
  color:var(--wegiel);background:var(--biel);border-radius:var(--r-karta);box-shadow:var(--cien);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.lista a:hover{transform:translateY(-3px);box-shadow:var(--cien-hover)}
.lista a:hover .lista__t{color:var(--czerwien-c)}
.lista__d{font-size:var(--t-sm);color:var(--stal);font-weight:600}
.lista__t{font-family:var(--f-naglowek);font-weight:800;font-size:var(--t-xl);
  letter-spacing:-.02em;line-height:1.18}
.lista__x{color:var(--stal);font-size:1rem;line-height:1.55;max-width:68ch}
@media(min-width:48rem){
  .lista a{grid-template-columns:8rem minmax(0,1fr)}
  .lista__d{grid-row:span 2;padding-top:.4rem}
}

.galeria{display:grid;gap:clamp(1.25rem,2.5vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.galeria figure{margin:0;background:var(--biel);border-radius:var(--r-karta);overflow:hidden;
  box-shadow:var(--cien);display:flex;flex-direction:column}
.galeria img{width:100%}
.galeria figcaption{padding:1.1rem 1.25rem 1.35rem;font-size:1rem;color:var(--stal);line-height:1.55}
.galeria figcaption b{display:block;color:var(--wegiel);font-family:var(--f-naglowek);
  font-weight:700;font-size:var(--t-lg);letter-spacing:-.015em;margin-bottom:.35rem}
.galeria__m{display:block;font-size:var(--t-sm);color:var(--stal);margin-top:.7rem;font-weight:600}

/* --- 17 stopka --------------------------------------------------------- */
.ftr{background:var(--wegiel);color:var(--biel)}
.ftr__grid{display:grid;gap:clamp(2rem,4vw,3rem);padding-block:clamp(3.25rem,5vw,4.5rem)}
@media(min-width:48rem){.ftr__grid{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}}
@media(min-width:64rem){.ftr__grid{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))}}
.ftr__logo{display:block;margin-bottom:1.5rem}
.ftr__logo img{height:3.5rem;width:auto;background:none}
.ftr h2,.ftr h3{font-family:var(--f-tekst);font-size:var(--t-sm);font-weight:700;
  letter-spacing:.02em;color:var(--stal-jasna);margin-bottom:1rem}
.ftr ul{list-style:none;display:grid;gap:.6rem}
.ftr a{color:var(--biel);text-decoration:none;font-size:1rem}
.ftr a:hover{color:var(--zolty);text-decoration:underline;text-underline-offset:.2em}
.ftr__tel{font-family:var(--f-naglowek);font-size:clamp(1.5rem,1.1rem + 1.6vw,2rem);
  font-weight:800;letter-spacing:-.025em;color:var(--biel);text-decoration:none;display:inline-block}
.ftr__tel:hover{color:var(--zolty)}
.ftr__x{font-size:1rem;color:var(--stal-jasna);line-height:1.6;max-width:40ch;margin-top:1rem}
.ftr__bottom{border-top:1px solid var(--linia-c);padding-block:1.6rem;display:flex;flex-wrap:wrap;
  gap:.6rem 1.5rem;align-items:center;font-size:var(--t-sm);color:var(--stal-jasna)}
.ftr__bottom a{font-size:var(--t-sm)}

/* --- pas koncowy ------------------------------------------------------- */
.finito__tel{display:inline-flex;align-items:center;gap:1rem;font-family:var(--f-naglowek);
  font-size:var(--t-tel);font-weight:800;letter-spacing:-.04em;line-height:1;
  color:var(--biel);text-decoration:none;transition:color .2s var(--ease)}
.finito .finito__tel{color:var(--biel)}
.finito .finito__tel:hover,.finito .finito__tel:focus-visible{color:var(--zolty)}
.finito__meta{margin-top:clamp(1.75rem,3vw,2.5rem);display:grid;gap:1.5rem}
@media(min-width:48rem){.finito__meta{grid-template-columns:repeat(3,minmax(0,1fr));max-width:54rem}}
.finito__meta dt{font-size:var(--t-sm);font-weight:700;color:var(--stal-jasna);margin-bottom:.4rem}
.finito__meta dd{margin:0;font-size:1rem}
.finito__meta dd a{color:var(--biel);text-decoration:none;border-bottom:1px solid var(--linia-c)}
.finito__meta dd a:hover{color:var(--zolty);border-color:var(--zolty)}

/* --- 18 pasek telefonu ------------------------------------------------- */
.pasek{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-pasek);display:none;
  background:var(--biel);box-shadow:0 -2px 20px rgba(46,42,39,.14);
  padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  transition:transform .3s var(--ease),visibility .3s}
.pasek.is-managed{transform:translateY(110%);visibility:hidden}
.pasek.is-managed.is-on{transform:translateY(0);visibility:visible}
.pasek__in{display:flex;align-items:center;gap:.85rem;max-width:34rem;margin-inline:auto}
.pasek__x{flex:1 1 auto;min-width:0}
.pasek__t{font-size:var(--t-xs);color:var(--stal);display:block;font-weight:600}
.pasek__n{font-family:var(--f-naglowek);font-size:1.125rem;font-weight:800;letter-spacing:-.02em;
  color:var(--wegiel);text-decoration:none;display:block;margin-top:.1rem}
.pasek .btn{padding:.8rem 1.2rem;min-height:2.9rem}
@media(max-width:56.24rem){
  .pasek{display:block}
  .ftr__bottom{padding-bottom:5.75rem}
}

/* --- pomocnicze -------------------------------------------------------- */
.rule{height:1px;background:var(--linia);border:0;margin:0}
.band--ciemny .rule{background:var(--linia-c)}
.tag-list{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none}
.tag-list li{font-size:var(--t-sm);font-weight:600;background:var(--biel);
  border-radius:var(--r-pigulka);padding:.5rem .95rem;color:var(--stal);box-shadow:var(--cien)}
.band--biel .tag-list li{background:var(--tlo);box-shadow:none}
.grid-auto{display:grid;gap:clamp(1.25rem,2.5vw,1.75rem);
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.blok{background:var(--biel);border-radius:var(--r-karta);padding:clamp(1.5rem,2.6vw,2rem);
  box-shadow:var(--cien)}
.blok h3{margin-bottom:.6rem;font-size:var(--t-lg)}
.blok p{color:var(--stal);font-size:1rem;line-height:1.55}
.blok > * + *{margin-top:.75rem}
a.blok{display:block;text-decoration:none;color:inherit;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
a.blok:hover{transform:translateY(-3px);box-shadow:var(--cien-hover)}
.band--ciemny .blok,.na-ciemnym .blok{background:rgba(255,255,255,.07);box-shadow:none}
.band--ciemny .blok p,.na-ciemnym .blok p{color:var(--stal-jasna)}
.waski{display:none}
@media(max-width:48rem){.waski{display:inline}}

/* --- 19 ruch ----------------------------------------------------------- */
@media(prefers-reduced-motion:no-preference){
  .reveal{animation:wejscie .6s var(--ease) backwards;animation-delay:var(--d,0s)}
  @keyframes wejscie{from{opacity:0;transform:translateY(.5em)}}
}
.reveal-1{--d:.06s}.reveal-2{--d:.12s}.reveal-3{--d:.18s}
.reveal-4{--d:.24s}.reveal-5{--d:.3s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .pasek{transition:none}
}