/* Strona glowna */

/* Sekcja otwierajaca */
.fr-hero__inner{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;
  align-items:center;padding-block:40px 72px}
.fr-hero--bez-zdjecia .fr-hero__inner{grid-template-columns:1fr;max-width:780px}
.fr-hero__title{margin:0 0 18px;font-size:58px;line-height:1.05}
.fr-hero__lead{margin:0 0 30px;font-size:21px;line-height:1.55;color:var(--muted);max-width:44ch}
.fr-hero__akcje{display:flex;flex-wrap:wrap;gap:14px}
.fr-hero__img{display:block;width:100%;height:auto}

/* Branze */
.fr-branze__lista{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.fr-branza__link{display:block;text-decoration:none;color:inherit;height:100%;
  border:1px solid var(--line);background:var(--ivory);padding-bottom:22px}
.fr-branza__link:hover{border-color:var(--ink)}
.fr-branza__img{display:block;width:100%;height:auto;margin-bottom:18px;background:var(--tint)}
.fr-branza__title{margin:0 22px 8px;font-size:23px}
.fr-branza__opis{margin:0 22px 14px;font-size:16px;line-height:1.6;color:var(--muted)}
.fr-branza__cta{margin:0 22px;font-weight:700;border-bottom:2px solid var(--ink);padding-bottom:2px}

/* Doradca kolorow, ciemny rozdzial.
   Wiersze, nie kafelki: makieta stawia obok siebie branze, powod
   i probki, bo to sie czyta jak tabela porownawcza. W czterech
   waskich kolumnach powod lamal sie na siedem linijek i probki
   przestawaly byc widoczne obok niego. */
.fr-doradca__lista{list-style:none;margin:0;padding:0}
.fr-doradca{display:grid;grid-template-columns:1fr 1.3fr auto;
  gap:6px 48px;align-items:center;padding-block:30px;
  border-top:1px solid rgba(253,251,246,.16)}
.fr-doradca__title{margin:0;font-size:27px;font-weight:500;grid-column:1;grid-row:1}
.fr-doradca__rada{margin:0;font-size:17px;line-height:1.6;grid-column:2;grid-row:1 / span 2}
.fr-doradca__probki{display:flex;gap:10px;grid-column:3;grid-row:1;justify-content:flex-end}
.fr-probka{display:block;width:34px;height:34px;border:1px solid rgba(253,251,246,.22)}
.fr-doradca__etykieta{margin:0;font-size:15px;grid-column:3;grid-row:2;text-align:right}
.fr-doradca .fr-link{grid-column:1;grid-row:2;justify-self:start;font-size:15px}

/* Caly wiersz doradcy jest klikalny.
   Link jest JEDEN, a nad wierszem rozciaga sie jego wlasny ::after.
   Drugi link na naglowku bylby drugim przystankiem dla klawiatury
   i drugim odczytem dla czytnika ekranu, prowadzacym w to samo miejsce.
   Tak wiersz da sie trafic kciukiem, a nie tylko piatnastopikselowym
   napisem na dole. */
.fr-doradca{position:relative}
.fr-doradca__link::after{content:"";position:absolute;inset:0}
/* Obrys musi obejsc caly wiersz, bo klikalny jest caly wiersz. */
.fr-doradca:focus-within{outline:2px solid var(--accent-on-dark);outline-offset:4px}
.fr-doradca__link:focus-visible{outline:none}

/* Etykieta i powod biora kolor z .fr-band--ciemny, ale przygaszony,
   zeby nazwa branzy zostala najjasniejszym elementem wiersza. */
.fr-band--ciemny .fr-doradca__etykieta{color:var(--dim)}

/* Kroje */
.fr-kroje__siatka{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px}
/* Karta kroju: film z lewej, tekst z prawej. Film nad tekstem
   zepchnalby porownanie o poltora ekranu w dol i przestaloby ono byc
   porownaniem. Reguly filmu samego w sobie siedza w film.css. */
.fr-kroj-karta{border-top:2px solid var(--ink);padding-top:20px;
  display:grid;grid-template-columns:220px 1fr;gap:26px;align-items:start}
.fr-kroj-karta__tekst{min-width:0}
.fr-kroj-karta .fr-film{max-width:220px}
.fr-kroj-karta__title{margin:0 0 12px;font-size:28px}
.fr-kroj-karta p{margin:0 0 14px;font-size:17px;line-height:1.7;color:var(--muted)}
.fr-kroj-karta strong{color:var(--ink)}

/* Tkanina */
.fr-tkanina{padding-block:0 76px}
.fr-tkanina__media{margin-bottom:56px}
.fr-tkanina__img{display:block;width:100%;height:auto;object-fit:cover;max-height:420px}

/* Polecane */
.fr-polecane__head{display:flex;align-items:baseline;justify-content:space-between;
  gap:30px;margin-bottom:28px}
.fr-polecane__head .fr-sekcja__title{margin:0}

/* Kto to robi */
.fr-kto__inner{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center}
.fr-kto p{margin:0 0 14px;font-size:18px;line-height:1.7;color:var(--muted)}
.fr-kto strong{color:var(--ink)}
.fr-kto__img{display:block;width:100%;height:auto}

/* Opinie */
.fr-opinie__lista{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.fr-opinia{border:1px solid var(--line);background:#fff;padding:26px}
.fr-opinia__tresc{margin:0 0 16px;font-size:17px;line-height:1.7}
.fr-opinia__autor{margin:0;font-size:15px;color:var(--muted)}
.fr-opinia__autor a{display:block;color:var(--muted)}

/* Instagram */
.fr-insta__inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
.fr-insta__inner .fr-sekcja__title{margin:0}

@media (max-width:1100px){
  .fr-branze__lista{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Probki schodza pod powod, zeby powod nie zostal z paskiem
     o szerokosci pieciu znakow. */
  .fr-doradca{grid-template-columns:1fr 1.3fr;gap:10px 36px}
  .fr-doradca__probki{grid-column:2;grid-row:2;justify-content:flex-start}
  .fr-doradca__etykieta{grid-column:2;grid-row:3;text-align:left}
  .fr-doradca .fr-link{grid-row:2}
}
@media (max-width:900px){
  .fr-hero__inner{grid-template-columns:1fr;gap:26px;padding-block:20px 40px}
  .fr-hero__title{font-size:34px}
  .fr-hero__lead{font-size:18px}
  .fr-hero__akcje{flex-direction:column;align-items:stretch}
  /* Karta kroju: film nad tekstem, a nie obok. Przy dwoch kolumnach
     na telefonie na tekst zostawaloby okolo stu trzydziestu pikseli. */
  .fr-kroj-karta{grid-template-columns:1fr;gap:18px}
  .fr-branze__lista,.fr-kroje__siatka,
  .fr-opinie__lista,.fr-kto__inner{grid-template-columns:1fr;gap:24px}
  /* Telefon: jedna kolumna, kolejnosc jak w tekscie. */
  .fr-doradca{grid-template-columns:1fr;gap:10px;padding-block:22px}
  .fr-doradca__title{font-size:22px}
  .fr-doradca__rada,.fr-doradca__probki,.fr-doradca__etykieta,
  .fr-doradca .fr-link{grid-column:1;grid-row:auto}
  .fr-doradca__etykieta{text-align:left}
  .fr-tkanina__media{margin-bottom:28px}
  .fr-polecane__head,.fr-insta__inner{flex-direction:column;align-items:flex-start;gap:12px}
}

/* Pas „Twój fartuch w czterech krokach”, pod sekcja otwierajaca.
   Scena jak witryna butiku: jasna karta, luk, cien na podlodze,
   nad fartuchem nazwa, pod nim probki koloru. Bez klasy fr-kroki--gra
   pas STOI w ostatniej klatce: klasyczny w butelkowej zieleni, z logo
   i zawieszka. Ta klatka siedzi tez w atrybutach rysunku, wiec jest
   dobra nawet bez tego arkusza. Opis rysunku i zasad w inc/kroki.php. */
.fr-kroki{--kroki-wej:cubic-bezier(.23,1,.32,1);--kroki-ruch:cubic-bezier(.77,0,.175,1)}
.fr-kroki__inner{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);
  gap:80px;align-items:center}
.fr-kroki__figura{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px}

.fr-kroki__scena{width:100%;padding:30px 24px 26px;background:var(--ivory);
  border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(20,18,15,.03),0 24px 48px -28px rgba(20,18,15,.28);
  display:flex;flex-direction:column;align-items:center;gap:14px}
.fr-kroki__rysunek{display:block;width:100%;max-width:360px;height:auto;overflow:hidden}
/* Odcinki postepu na gorze sceny, jak w relacjach. Bez ruchu pelne. */
.fr-kroki__segmenty{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;
  width:100%;margin-bottom:6px}
.fr-kroki__segment{display:block;height:2px;background:var(--line);overflow:hidden}
.fr-kroki__segment > span{display:block;height:100%;background:var(--gold);transform-origin:left}

/* Podpis: nazwa kroju duzo, kolor drobnymi wersalikami. Okienka
   z miekko wygaszonymi brzegami, zeby przewijana nazwa wyplywala,
   a nie byla ucinana nozem. */
.fr-kroki__podpis{margin:0;width:100%;display:flex;flex-direction:column;align-items:center;gap:2px}
.fr-kroki__okno{display:block;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent)}
.fr-kroki__okno--kroj{height:1.4em;font-family:var(--f-display);font-size:30px;
  font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.fr-kroki__okno--kolor{height:1.7em;font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-tekst)}
.fr-kroki__tasma{display:flex;flex-direction:column;align-items:center}
.fr-kroki__tasma--kroj > span{display:block;line-height:1.4em;white-space:nowrap}
.fr-kroki__tasma--kolor > span{display:block;line-height:1.7em;white-space:nowrap}
.fr-kroki__tasma--kroj{transform:translateY(-1.4em)}
.fr-kroki__tasma--kolor{transform:translateY(-5.1em)}

/* Rysunek. Kieszen, pasek i kokarda maja pod ciemna linia jasny
   cien: ciemna widac na jasnej tkaninie, jasny cien na ciemnej. */
.fr-kroki__luk{fill:var(--tint)}
.fr-kroki__luk-nitka{fill:none;stroke:var(--gold);stroke-width:.8;opacity:.7}
.fr-kroki__podloga{fill:#14120F;opacity:.16;filter:url(#fr-kroki-rozmycie)}
.fr-kroki__szew{stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round}
.fr-kroki__linia{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fr-kroki__linia--gruba{stroke-width:2.6}
.fr-kroki__kieszen{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.fr-kroki__kieszen,.fr-kroki__detal{filter:drop-shadow(0 1.2px 0 rgba(253,251,246,.5))}
.fr-kroki__bryla{fill:url(#fr-kroki-bryla);pointer-events:none}
.fr-kroki__blask{fill:url(#fr-kroki-blask);opacity:0}
.fr-kroki__nitka{fill:url(#fr-kroki-zloto)}
.fr-kroki__zloto{fill:url(#fr-kroki-zloto);stroke:#6B5E3A;stroke-width:.7}
.fr-kroki__medalik-rant{fill:none;stroke:#FDFBF6;stroke-opacity:.45;stroke-width:.6}
.fr-kroki__logo-kolo{fill:none;stroke:var(--ivory);stroke-width:1.6;stroke-dasharray:101;stroke-dashoffset:0}
.fr-kroki__logo-napis{font-family:var(--f-display);font-style:italic;font-size:15px;fill:var(--ivory)}
.fr-kroki__puls{fill:none;stroke:var(--gold);stroke-width:1.4;opacity:0}
.fr-kroki__lancuszek{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-dasharray:1.6 1.2}
.fr-kroki__imie{font-family:var(--f-display);font-style:italic;font-size:8.5px;fill:var(--ink)}
.fr-kroki__logo-napis,.fr-kroki__puls{transform-box:fill-box;transform-origin:center}
/* Medalik kolysze sie na lancuszku, a nie wokol wlasnego srodka. */
.fr-kroki__zawieszka{transform-box:fill-box;transform-origin:32% 0}

/* Probki: cztery kolka, po nich jedzie zlote kolko. Skok 38px
   (24 probka + 14 przerwy) musi zgadzac sie z @keyframes. */
.fr-kroki__probki{position:relative;display:flex;gap:14px;padding:4px}
.fr-kroki__probka{display:block;width:24px;height:24px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(20,18,15,.14)}
.fr-kroki__pierscien{position:absolute;left:0;top:0;width:32px;height:32px;
  border-radius:50%;border:1.5px solid var(--gold);transform:translateX(114px)}

.fr-kroki__nadtytul{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-tekst)}
.fr-kroki__lista{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:20px}
.fr-kroki__krok{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr);
  gap:18px;align-items:start;padding-bottom:18px;border-bottom:1px solid var(--line)}
.fr-kroki__krok:last-child{border-bottom:0;padding-bottom:0}
.fr-kroki__nr{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);background:var(--ivory);
  font-family:var(--f-display);font-size:20px;line-height:1;color:var(--ink)}
.fr-kroki__tytul{margin:8px 0 4px;font-family:var(--f-display);font-size:23px;
  font-weight:500;line-height:1.25}
.fr-kroki__cena{margin-inline-start:6px;font-family:var(--f-body);font-size:16px;
  font-weight:700;color:var(--gold-tekst);white-space:nowrap}
.fr-kroki__opis{margin:0;font-size:17px;line-height:1.6;color:var(--muted)}
/* Pasek postepu stoi na linii pod krokiem. Bez ruchu go nie ma. */
.fr-kroki__postep{position:absolute;left:64px;right:0;bottom:-1px;height:2px;
  background:var(--gold);transform-origin:left;transform:scaleX(0);opacity:0}
.fr-kroki__krok:last-child .fr-kroki__postep{bottom:-10px}
.fr-kroki__wiecej{margin:30px 0 0}
/* Przycisk zatrzymania dokleja skrypt. Ruch, ktory trwa dluzej niz
   piec sekund, musi dac sie zatrzymac. */
.fr-kroki__sterowanie{padding:7px 12px;font-family:inherit;font-size:13px;font-weight:600;
  color:var(--ink);background:transparent;border:1px solid var(--line);cursor:pointer}
.fr-kroki__sterowanie:hover{background:var(--ivory)}

/* Ruch. Jeden obrot to czternascie sekund, cztery okna:
   kroj 4–22%, kolor 22–48%, logo 48–64%, zawieszka 64–84%,
   potem pauza na gotowym fartuchu i blysk. Klatka 0% i 100% to ten
   sam stan, wiec petla nie przeskakuje, a zatrzymanie po trzech
   obrotach zostawia gotowy fartuch. Wszystkie czesci maja ten sam
   czas, inaczej podpis, probki i podswietlony krok rozjada sie
   z rysunkiem. Skoki: karuzela 320, tkanina 240 na kolor, tasma
   kroju 1,4em, tasma koloru 1,7em, zlote kolko 38px. */
@media (prefers-reduced-motion:no-preference){
  .fr-kroki--gra .fr-kroki__karuzela{animation:fr-kroki-karuzela 14s var(--kroki-ruch) 3 both}
  .fr-kroki--gra .fr-kroki__tkanina{animation:fr-kroki-tkanina 14s var(--kroki-ruch) 3 both}
  .fr-kroki--gra .fr-kroki__tasma--kroj{animation:fr-kroki-tasma-kroj 14s var(--kroki-ruch) 3 both}
  .fr-kroki--gra .fr-kroki__tasma--kolor{animation:fr-kroki-tasma-kolor 14s var(--kroki-ruch) 3 both}
  .fr-kroki--gra .fr-kroki__pierscien{animation:fr-kroki-pierscien 14s var(--kroki-ruch) 3 both}
  .fr-kroki--gra .fr-kroki__logo{animation:fr-kroki-logo 14s linear 3 both}
  .fr-kroki--gra .fr-kroki__logo-kolo{animation:fr-kroki-kolo 14s var(--kroki-wej) 3 both}
  .fr-kroki--gra .fr-kroki__logo-napis{animation:fr-kroki-napis 14s var(--kroki-wej) 3 both}
  .fr-kroki--gra .fr-kroki__puls{animation:fr-kroki-puls 14s var(--kroki-wej) 3 both}
  .fr-kroki--gra .fr-kroki__zawieszka{animation:fr-kroki-zawieszka 14s ease-in-out 3 both}
  .fr-kroki--gra .fr-kroki__blask{animation:fr-kroki-blask 14s var(--kroki-ruch) 3 both}
  .fr-kroki--gra .fr-kroki__krok--1 .fr-kroki__nr{animation:fr-kroki-nr1 14s linear 3 both}
  .fr-kroki--gra .fr-kroki__krok--2 .fr-kroki__nr{animation:fr-kroki-nr2 14s linear 3 both}
  .fr-kroki--gra .fr-kroki__krok--3 .fr-kroki__nr{animation:fr-kroki-nr3 14s linear 3 both}
  .fr-kroki--gra .fr-kroki__krok--4 .fr-kroki__nr{animation:fr-kroki-nr4 14s linear 3 both}
  .fr-kroki--gra .fr-kroki__krok--1 .fr-kroki__postep{animation:fr-kroki-postep1 14s linear 3 both}
  .fr-kroki--gra .fr-kroki__krok--2 .fr-kroki__postep{animation:fr-kroki-postep2 14s linear 3 both}
  .fr-kroki--gra .fr-kroki__krok--3 .fr-kroki__postep{animation:fr-kroki-postep3 14s linear 3 both}
  .fr-kroki--gra .fr-kroki__krok--4 .fr-kroki__postep{animation:fr-kroki-postep4 14s linear 3 both}
  .fr-kroki--gra .fr-kroki__segment--1 > span{animation:fr-kroki-seg1 14s linear 3 both}
  .fr-kroki--gra .fr-kroki__segment--2 > span{animation:fr-kroki-seg2 14s linear 3 both}
  .fr-kroki--gra .fr-kroki__segment--3 > span{animation:fr-kroki-seg3 14s linear 3 both}
  .fr-kroki--gra .fr-kroki__segment--4 > span{animation:fr-kroki-seg4 14s linear 3 both}
  /* Wejscie: karta i kroki wjezdzaja raz, kroki po kolei co 80 ms. */
  .fr-kroki--gra .fr-kroki__scena{animation:fr-kroki-wejscie 900ms var(--kroki-wej) both}
  .fr-kroki--gra .fr-kroki__krok{animation:fr-kroki-wejscie 700ms var(--kroki-wej) both}
  .fr-kroki--gra .fr-kroki__krok--2{animation-delay:80ms}
  .fr-kroki--gra .fr-kroki__krok--3{animation-delay:160ms}
  .fr-kroki--gra .fr-kroki__krok--4{animation-delay:240ms}
  /* Poza kadrem albo po kliknieciu „Zatrzymaj”. Trzy klasy, zeby
     przebic skrot animation wyzej, ktory ustawia stan na „running”. */
  .fr-kroki--gra.fr-kroki--stoi :is(.fr-kroki__karuzela,.fr-kroki__tkanina,.fr-kroki__tasma,
    .fr-kroki__pierscien,.fr-kroki__logo,.fr-kroki__logo-kolo,.fr-kroki__logo-napis,.fr-kroki__puls,
    .fr-kroki__zawieszka,.fr-kroki__blask,.fr-kroki__nr,.fr-kroki__postep,.fr-kroki__segment > span){animation-play-state:paused}
}
@keyframes fr-kroki-wejscie{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fr-kroki-karuzela{
  0%,3%{transform:translateX(-320px)} 6.5%,13%{transform:translateX(0)}
  17%,100%{transform:translateX(-320px)}}
/* Powrot tkaniny na pierwszy kolor w 6,6%, kiedy klasyk jest juz
   za krawedzia sceny, a w luku stoi Comfort. */
@keyframes fr-kroki-tkanina{
  0%,6.5%{transform:translateX(-720px)} 6.6%,22%{transform:translateX(0)}
  25%,29%{transform:translateX(-240px)} 32%,36%{transform:translateX(-480px)}
  39%,100%{transform:translateX(-720px)}}
@keyframes fr-kroki-tasma-kroj{
  0%,3%{transform:translateY(-1.4em)} 6.5%,13%{transform:translateY(0)}
  17%,100%{transform:translateY(-1.4em)}}
@keyframes fr-kroki-tasma-kolor{
  0%,3%{transform:translateY(-5.1em)} 6.5%,22%{transform:translateY(0)}
  25%,29%{transform:translateY(-1.7em)} 32%,36%{transform:translateY(-3.4em)}
  39%,100%{transform:translateY(-5.1em)}}
@keyframes fr-kroki-pierscien{
  0%,3%{transform:translateX(114px)} 6.5%,22%{transform:translateX(0)}
  25%,29%{transform:translateX(38px)} 32%,36%{transform:translateX(76px)}
  39%,100%{transform:translateX(114px)}}
@keyframes fr-kroki-logo{0%{opacity:1} 3%,47.9%{opacity:0} 48%,100%{opacity:1}}
@keyframes fr-kroki-kolo{
  0%,3%{stroke-dashoffset:0} 3.1%,48%{stroke-dashoffset:101} 53%,100%{stroke-dashoffset:0}}
@keyframes fr-kroki-napis{
  0%,3%{opacity:1;transform:none} 3.1%,51%{opacity:0;transform:translateY(5px)}
  55%,100%{opacity:1;transform:none}}
@keyframes fr-kroki-puls{
  0%,53%{opacity:0;transform:scale(1)} 54%{opacity:.9;transform:scale(1)}
  60%,100%{opacity:0;transform:scale(1.55)}}
@keyframes fr-kroki-zawieszka{
  0%{opacity:1;transform:rotate(0)} 3%{opacity:0;transform:rotate(0)}
  4%,65%{opacity:0;transform:translateY(-8px) rotate(-55deg)}
  69%{opacity:1;transform:rotate(26deg)} 73%{transform:rotate(-14deg)}
  77%{transform:rotate(7deg)} 81%{transform:rotate(-3deg)}
  84%,100%{opacity:1;transform:rotate(0)}}
@keyframes fr-kroki-blask{
  0%,85%{opacity:0;transform:skewX(-18deg) translateX(0)} 86%{opacity:1}
  94%{opacity:1;transform:skewX(-18deg) translateX(330px)}
  95%,100%{opacity:0;transform:skewX(-18deg) translateX(330px)}}
@keyframes fr-kroki-nr1{
  0%,3%{background-color:var(--ivory);border-color:var(--line)}
  4%,22%{background-color:var(--gold);border-color:var(--gold)}
  23%,100%{background-color:var(--ivory);border-color:var(--line)}}
@keyframes fr-kroki-nr2{
  0%,22%{background-color:var(--ivory);border-color:var(--line)}
  23%,48%{background-color:var(--gold);border-color:var(--gold)}
  49%,100%{background-color:var(--ivory);border-color:var(--line)}}
@keyframes fr-kroki-nr3{
  0%,48%{background-color:var(--ivory);border-color:var(--line)}
  49%,64%{background-color:var(--gold);border-color:var(--gold)}
  65%,100%{background-color:var(--ivory);border-color:var(--line)}}
@keyframes fr-kroki-nr4{
  0%,3%{background-color:var(--gold);border-color:var(--gold)}
  4%,64%{background-color:var(--ivory);border-color:var(--line)}
  65%,100%{background-color:var(--gold);border-color:var(--gold)}}
@keyframes fr-kroki-postep1{
  0%,3%{opacity:0;transform:scaleX(0)} 4%{opacity:1;transform:scaleX(0)}
  22%{opacity:1;transform:scaleX(1)} 23%,100%{opacity:0;transform:scaleX(1)}}
@keyframes fr-kroki-postep2{
  0%,22%{opacity:0;transform:scaleX(0)} 23%{opacity:1;transform:scaleX(0)}
  48%{opacity:1;transform:scaleX(1)} 49%,100%{opacity:0;transform:scaleX(1)}}
@keyframes fr-kroki-postep3{
  0%,48%{opacity:0;transform:scaleX(0)} 49%{opacity:1;transform:scaleX(0)}
  64%{opacity:1;transform:scaleX(1)} 65%,100%{opacity:0;transform:scaleX(1)}}
@keyframes fr-kroki-postep4{
  0%{opacity:1;transform:scaleX(1)} 3%{opacity:0;transform:scaleX(1)}
  3.1%,64%{opacity:0;transform:scaleX(0)} 65%{opacity:1;transform:scaleX(0)}
  84%,100%{opacity:1;transform:scaleX(1)}}

/* Odcinek wypelnia sie w oknie swojego kroku i zostaje pelny do
   konca obrotu; w 3% wszystkie wracaja do zera. */
@keyframes fr-kroki-seg1{0%{transform:scaleX(1)} 3%,4%{transform:scaleX(0)} 22%,100%{transform:scaleX(1)}}
@keyframes fr-kroki-seg2{0%{transform:scaleX(1)} 3%,23%{transform:scaleX(0)} 48%,100%{transform:scaleX(1)}}
@keyframes fr-kroki-seg3{0%{transform:scaleX(1)} 3%,49%{transform:scaleX(0)} 64%,100%{transform:scaleX(1)}}
@keyframes fr-kroki-seg4{0%{transform:scaleX(1)} 3%,65%{transform:scaleX(0)} 84%,100%{transform:scaleX(1)}}

@media (max-width:900px){
  /* Telefon: scena nad krokami, wezsza, zeby pierwszy krok bylo
     widac bez przewijania calego fartucha. */
  .fr-kroki__inner{grid-template-columns:minmax(0,1fr);gap:26px}
  .fr-kroki__figura{max-width:360px;width:100%;margin-inline:auto}
  .fr-kroki__scena{padding:22px 16px 18px}
  .fr-kroki__rysunek{max-width:250px}
  .fr-kroki__okno--kroj{font-size:24px}
  .fr-kroki__lista{margin-top:20px;gap:16px}
  .fr-kroki__krok{grid-template-columns:38px minmax(0,1fr);gap:14px;padding-bottom:14px}
  .fr-kroki__nr{width:38px;height:38px;font-size:17px}
  .fr-kroki__postep{left:52px}
  .fr-kroki__tytul{margin-top:5px;font-size:20px}
  .fr-kroki__opis{font-size:16px}
}

/* Problemy, ktore fartuch rozwiazuje. Zaraz pod sekcja otwierajaca.
   Szesc pozycji w trzech kolumnach, kazda: numer, problem szarym
   Lora przekreslony zlota kreska, rozwiazanie pod spodem.
   Kreska to tlo linii tekstu, a nie osobny element: przy problemie
   na dwie linijki rysuje sie linijka po linijce, bo tlo elementu
   w linii jest rozlozone na wszystkie jego kawalki po kolei. */
.fr-problemy__nadtytul{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-tekst)}
.fr-problemy__lista{list-style:none;margin:40px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:0 48px}
.fr-problem{padding:28px 0 32px;border-top:1px solid var(--line)}
.fr-problem__nr{display:block;margin-bottom:14px;font-size:12px;font-weight:700;
  letter-spacing:.14em;color:var(--gold-tekst)}
.fr-problem__problem{margin:0 0 14px;font-family:var(--f-display);font-size:22px;
  line-height:1.35;color:var(--muted)}
.fr-problem__kreska{background:linear-gradient(var(--gold),var(--gold)) no-repeat 0 58% / 100% 2px}
.fr-problem__rozwiazanie{margin:0;font-size:17px;line-height:1.6;color:var(--ink)}
.fr-problem__link{display:table;margin-top:10px;font-weight:700;color:var(--ink);
  text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:1px}
.fr-problem__link:hover{border-bottom-color:var(--ink)}

/* Ruch: tylko gdy skrypt schowal sekcje (fr-problemy--czeka). Chowanie
   jest natychmiastowe, przejscia stoja dopiero na stanie „widac”:
   inaczej sekcja najpierw by sie na oczach zwijala. Kreska 1,6 s,
   rozwiazanie wjezdza po niej przez sekunde, pozycje co 300 ms.
   Wolniej na prosbe Mariusza 04.10.2026: ma sie dac przeczytac. */
@media (prefers-reduced-motion:no-preference){
  .fr-problemy--czeka .fr-problem__kreska{background-size:0% 2px}
  .fr-problemy--czeka .fr-problem__rozwiazanie{opacity:0;transform:translateY(10px)}
  .fr-problemy--czeka .fr-problem{border-top-color:transparent}
  .fr-problemy--czeka.fr-problemy--widac .fr-problem__kreska{background-size:100% 2px;
    transition:background-size 1600ms cubic-bezier(.65,0,.35,1) calc(var(--i) * 300ms)}
  .fr-problemy--czeka.fr-problemy--widac .fr-problem__rozwiazanie{opacity:1;transform:none;
    transition:opacity 1000ms cubic-bezier(.23,1,.32,1) calc(var(--i) * 300ms + 1300ms),
      transform 1000ms cubic-bezier(.23,1,.32,1) calc(var(--i) * 300ms + 1300ms)}
  .fr-problemy--czeka.fr-problemy--widac .fr-problem{border-top-color:var(--line);
    transition:border-color 800ms ease calc(var(--i) * 300ms)}
}

/* Pas z tkanina: zostalo zdjecie splotu i jedno uczciwe zdanie. */
.fr-tkanina__tresc{max-width:760px;text-align:center}
.fr-tkanina__etykieta{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-tekst)}
.fr-tkanina__uwaga{margin:0;font-family:var(--f-display);font-size:22px;line-height:1.5;color:var(--muted)}
.fr-tkanina__uwaga strong{color:var(--ink);font-weight:500}

@media (max-width:1100px){
  .fr-problemy__lista{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .fr-problemy__lista{grid-template-columns:minmax(0,1fr);margin-top:24px}
  .fr-problem{padding:22px 0 24px}
  .fr-problem__problem{font-size:20px}
  .fr-problem__rozwiazanie{font-size:16px}
  .fr-tkanina__uwaga{font-size:19px}
}