/* =========================================================
   Monika Kamińska - landing
   Paleta i typografia wg makiet: kremowe tło, bordo, miedziane linie
   ========================================================= */

/* ---------- fonty ---------- */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonty/PlayfairDisplay-500-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:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonty/PlayfairDisplay-500-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:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonty/PlayfairDisplay-600-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:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonty/PlayfairDisplay-600-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:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonty/Lato-400-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:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonty/Lato-400-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:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonty/Lato-700-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:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonty/Lato-700-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;}

/* ---------- zmienne ---------- */
:root{
  --kremowy:#FBF5EF;
  --kremowy-cieply:#F6EBE1;
  --kremowy-rozowy:#FDF6F2;
  --panel:#FFFCFA;
  --bordo:#5E1226;
  --bordo-ciemny:#460C1B;
  --bordo-jasny:#8A2A3E;
  --miedz:#B98255;
  --miedz-jasna:#D9BBA0;
  --tekst:#332A28;
  --tekst-mut:#6F615C;
  --tekst-czytelny:#493D39;
  --linia:#E8D9CB;
  --cien:0 18px 50px -28px rgba(94,18,38,.28);
  --szer:1180px;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--kremowy);color:var(--tekst);
  font-family:var(--sans);font-size:17px;line-height:1.72;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:500;line-height:1.16;letter-spacing:-.01em;}
p{margin:0 0 1.1em;}
ul{margin:0;padding:0;list-style:none;}
svg{stroke:var(--miedz);stroke-width:1.2;}

/* Padding tylko na boki, rozpisany na dwie własności. Skrót `padding:0 28px`
   zeruje też górę i dół, a `.pasek__srodek` jest jednocześnie `.kontener`,
   więc skrót w późniejszej regule kasował mu odstęp pionowy. */
.kontener{width:100%;max-width:var(--szer);margin:0 auto;padding-left:28px;padding-right:28px;}

.pomijacz{
  position:absolute;left:-9999px;top:0;background:var(--bordo);color:#fff;
  padding:12px 20px;z-index:200;border-radius:0 0 8px 0;
}
.pomijacz:focus{left:0;}

:focus-visible{outline:2px solid var(--bordo);outline-offset:3px;border-radius:3px;}

/* ---------- animacja wejścia ----------
   Domyślnie wszystko jest widoczne. Ukrywamy dopiero wtedy, gdy JavaScript
   zdążył dopisać klasę .js do <html>, czyli gdy jest komu to z powrotem odsłonić.
   Bez tego wyłączony albo niedziałający skrypt chowa pół strony przed
   użytkownikiem i przed wyszukiwarką. */
.js .odslon{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1);
  /* SIATKA BEZPIECZENSTWA W CZYSTYM CSS.
     Klase `js` dopisuje skrypt w <head>, ale odslanianiem zajmuje sie dopiero
     zewnetrzny plik skrypt.js. Gdyby ten plik nie doszedl (blokada, zerwane
     polaczenie, rozszerzenie przegladarki), tresc zostalaby ukryta na zawsze
     i user zobaczylby biala strone. Ta animacja odslania wszystko po 4 sekundach
     niezaleznie od JavaScriptu i nie da sie jej zepsuc bledem w skrypcie. */
  animation:siatka-bezpieczenstwa 1ms linear 4s forwards;
}
.js .odslon.widoczne{opacity:1;transform:none;}
@keyframes siatka-bezpieczenstwa{to{opacity:1;transform:none;}}
/* =========================================================
   RUCH
   Wszystko poniżej trzyma się dwóch zasad: animujemy wyłącznie
   transform i opacity (nie ruszają układu, idą po GPU), a całość
   da się wyłączyć jednym przełącznikiem systemowym na końcu sekcji.
   ========================================================= */

/* --- orbita w hero: pierścienie stoją, ramiona z kropkami krążą --- */
.ozdoba--orbita .ramie{
  transform-box:view-box;transform-origin:110px 110px;
  animation:obrot linear infinite;
}
.ozdoba--orbita .ramie--1{animation-duration:44s;}
.ozdoba--orbita .ramie--2{animation-duration:29s;animation-direction:reverse;}
.ozdoba--orbita .ramie--3{animation-duration:19s;}
.ozdoba--orbita .ramie--4{animation-duration:36s;animation-direction:reverse;}
.ozdoba--orbita .pierscien{
  transform-box:view-box;transform-origin:110px 110px;
  animation:oddech 11s ease-in-out infinite alternate;
}
.ozdoba--orbita .pierscien--2{animation-duration:9s;animation-delay:-3s;}
.ozdoba--orbita .pierscien--3{animation-duration:13s;animation-delay:-6s;}
.kropka--mala{fill:var(--miedz-jasna);stroke:none;}

@keyframes obrot{to{transform:rotate(360deg);}}
@keyframes oddech{from{opacity:.7;transform:scale(.985);}to{opacity:1;transform:scale(1.02);}}

/* --- zdjęcie w hero: bardzo powolne unoszenie --- */
.hero__lukowy{animation:unoszenie 9s ease-in-out infinite alternate;}
@keyframes unoszenie{from{transform:translateY(-6px);}to{transform:translateY(6px);}}

/* --- parallaks od kursora (wartości ustawia skrypt) --- */
.hero__foto{--px:0px;--py:0px;}
.hero__lukowy,.ozdoba--orbita{will-change:transform;}
.hero__foto .ozdoba--orbita{transform:translate3d(calc(var(--px) * 2.4),calc(var(--py) * 2.4),0);}
.hero__foto .hero__lukowy{transform:translate3d(var(--px),var(--py),0);}
@media (hover:hover) and (pointer:fine){
  .hero__foto .hero__lukowy{animation:none;}
}

/* --- orbita w sekcji o mnie --- */
.o-mnie__ozdoba .ramie-o{
  transform-box:view-box;transform-origin:150px 152px;
  animation:obrot linear infinite;
}
.o-mnie__ozdoba .ramie-o--1{animation-duration:31s;}
.o-mnie__ozdoba .ramie-o--2{animation-duration:47s;animation-direction:reverse;}
.o-mnie__ozdoba .ramie-o--3{animation-duration:23s;}
.o-mnie__ozdoba .trojkat{
  transform-box:view-box;transform-origin:150px 152px;
  animation:obrot 96s linear infinite;opacity:.6;
}

/* --- rysowanie linii przy wejściu w kadr --- */
.js .rysuj{stroke-dasharray:1;stroke-dashoffset:1;}
.js .widoczne .rysuj,.js .odslon.widoczne .rysuj{
  animation:rysowanie 1.5s ease forwards;
  animation-delay:var(--zwloka,0s);
}
@keyframes rysowanie{to{stroke-dashoffset:0;}}

/* --- ikony w pasku korzyści też się rysują --- */
.js .korzysc .ikona path,.js .korzysc .ikona circle{stroke-dasharray:1;stroke-dashoffset:1;}
.js .korzysc.widoczne .ikona path,.js .korzysc.widoczne .ikona circle{
  animation:rysowanie 1.1s ease forwards;
}

/* --- wiersze hero wchodzą po kolei zaraz po wczytaniu --- */
.js .linia{
  opacity:0;transform:translateY(16px);
  /* Dwie animacje naraz: wlasciwe wejscie oraz siatka bezpieczenstwa, ktora
     po 4 sekundach pokazuje element bez wzgledu na wszystko. Bez niej kazde
     potkniecie tej animacji zostawia NIEWIDOCZNE guziki w hero, czyli
     najwazniejszy element strony. */
  animation:wejscie .85s cubic-bezier(.2,.7,.3,1) forwards,
            siatka-bezpieczenstwa 1ms linear 4s forwards;
  animation-delay:calc(var(--i) * 110ms + 120ms), 4s;
}
.hero__naglowek .linia{display:block;}
@keyframes wejscie{to{opacity:1;transform:none;}}

/* --- pasek postępu czytania --- */
.postep{
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--miedz),var(--bordo));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .12s linear;opacity:.85;
}

/* --- guziki: przesuwka światła przy najechaniu --- */
.guzik{position:relative;overflow:hidden;}
.guzik::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .65s ease;
}
.guzik:hover::after{transform:translateX(120%);}
.guzik--obrys::after{background:linear-gradient(105deg,transparent 35%,rgba(185,130,85,.16) 50%,transparent 65%);}

/* --- karty oferty: orbita przyspiesza pod kursorem --- */
.karta__ozdoba--mapa .mapa-obrot{
  transform-box:view-box;transform-origin:196px 130px;
  animation:obrot 120s linear infinite;
}
.karta:hover .karta__ozdoba--mapa .mapa-obrot{animation-duration:26s;}
.karta__ozdoba{transition:opacity .4s ease,transform .6s ease;}
.karta:hover .karta__ozdoba{opacity:.95;}
.karta:hover .karta__ozdoba--galazka{transform:translateY(-8px);}

/* --- kreska pod tytułem sekcji rozjeżdża się przy wejściu --- */
.naglowek-sekcji .tytul{position:relative;padding-bottom:18px;}
.naglowek-sekcji .tytul::after{
  content:"";position:absolute;left:50%;bottom:0;height:1px;width:64px;
  background:var(--miedz);transform:translateX(-50%) scaleX(0);transform-origin:50% 50%;
  transition:transform .9s cubic-bezier(.2,.7,.3,1) .25s;
}
.js .naglowek-sekcji.widoczne .tytul::after{transform:translateX(-50%) scaleX(1);}

/* --- tło cytatu delikatnie płynie --- */
.cytat-blok__tlo::after{animation:plyniecie 24s linear infinite;}
@keyframes plyniecie{to{transform:translateX(34px);}}

/* --- opinie i pozycje listy reagują na kursor --- */
.opinia{transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease,border-color .35s ease;}
.opinia:hover{transform:translateY(-4px);box-shadow:var(--cien);border-color:var(--miedz-jasna);}
.checklista li{transition:transform .3s ease;}
.checklista li:hover{transform:translateX(6px);}
.checklista li:hover .ptaszek{border-color:var(--bordo);}
.ptaszek{transition:border-color .3s ease;}

/* --- wyłącznik: system mówi „mniej ruchu", więc go nie ma --- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js .odslon{opacity:1;transform:none;transition:none;animation:none;}
  .js .linia{opacity:1;transform:none;animation:none;}
  .js .rysuj,.js .korzysc .ikona path,.js .korzysc .ikona circle{stroke-dasharray:none;stroke-dashoffset:0;animation:none;}
  .ozdoba--orbita .ramie,.ozdoba--orbita .pierscien,.hero__lukowy,
  .o-mnie__ozdoba .ramie-o,.o-mnie__ozdoba .trojkat,
  .karta__ozdoba--mapa .mapa-obrot,.cytat-blok__tlo::after,
  .splot__para,.splot__wspolne,.splot__echo,.splot__poswiata{animation:none;}
  .hero__foto .hero__lukowy,.hero__foto .ozdoba--orbita{transform:none;}
  .guzik::after{display:none;}
}

/* =========================================================
   GUZIKI
   ========================================================= */
.guzik{
  display:inline-flex;align-items:center;gap:.7em;
  background:var(--bordo);color:#FDF6F2;text-decoration:none;
  font-family:var(--serif);font-size:1.02rem;letter-spacing:.005em;
  padding:16px 30px;border:1px solid var(--bordo);
  transition:background .25s ease,transform .25s ease,box-shadow .25s ease;
  box-shadow:0 10px 26px -18px rgba(94,18,38,.9);
}
.guzik:hover{background:var(--bordo-ciemny);transform:translateY(-2px);box-shadow:0 16px 30px -18px rgba(94,18,38,.95);}
.guzik .strzalka{transition:transform .25s ease;}
.guzik:hover .strzalka{transform:translateX(5px);}
.guzik--obrys{background:transparent;color:var(--bordo);border-color:var(--linia);box-shadow:none;}
.guzik--obrys:hover{background:#fff;border-color:var(--miedz);color:var(--bordo);}
.guzik--maly{padding:11px 20px;font-size:.92rem;}
.guzik--pelny{width:100%;justify-content:center;}

/* =========================================================
   PASEK GÓRNY
   ========================================================= */
.pasek{
  position:sticky;top:0;z-index:100;
  background:rgba(251,245,239,.86);backdrop-filter:blur(10px);
  transition:box-shadow .3s ease,background .3s ease;
}
.pasek.przyklejony{box-shadow:0 1px 0 var(--linia),0 12px 30px -26px rgba(51,42,40,.5);background:rgba(251,245,239,.96);}
.pasek__srodek{display:flex;align-items:center;gap:28px;padding-top:16px;padding-bottom:16px;}
.marka{text-decoration:none;display:flex;align-items:baseline;gap:14px;flex-shrink:0;}
.marka__imie{font-family:var(--serif);font-size:1.24rem;color:var(--tekst);}
.marka__domena{font-size:.78rem;color:var(--tekst-mut);letter-spacing:.04em;}
.marka__tytul{
  font-family:var(--serif);font-style:italic;font-size:1.02rem;
  color:var(--bordo);padding-left:14px;border-left:1px solid var(--linia);
  line-height:1.1;white-space:nowrap;
}
.pasek__nawigacja{margin-left:auto;display:flex;gap:30px;}
.pasek__nawigacja a{
  text-decoration:none;font-size:.95rem;color:var(--tekst-mut);
  padding-bottom:3px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.pasek__nawigacja a:hover{color:var(--bordo);border-color:var(--miedz);}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(105deg,var(--kremowy) 0%,var(--kremowy) 48%,var(--kremowy-cieply) 100%);
}
.hero__siatka{
  display:grid;grid-template-columns:1.14fr .86fr;gap:52px;align-items:center;
  padding-top:70px;padding-bottom:70px;
}
.hero__naglowek{font-size:clamp(1.85rem,3.4vw,2.75rem);margin-bottom:24px;line-height:1.2;}
.hero__naglowek em{font-style:normal;color:var(--bordo);display:block;}
.hero__lead{font-size:1.02rem;color:var(--tekst-mut);max-width:32em;margin-bottom:22px;}

.znaczniki{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;margin-bottom:34px;}
.znaczniki li{
  position:relative;font-size:.93rem;color:var(--tekst-mut);letter-spacing:.02em;padding-left:16px;
}
.znaczniki li::before{
  content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--miedz);
}
.hero__guziki{display:flex;flex-wrap:wrap;gap:14px;}

.hero__foto{position:relative;display:flex;justify-content:center;}
.hero__lukowy{
  position:relative;z-index:2;width:min(330px,100%);
  border-radius:180px 180px 22px 22px;overflow:hidden;
  background:var(--kremowy-cieply);
  box-shadow:var(--cien);
}
.hero__lukowy img{width:100%;}
.ozdoba{position:absolute;pointer-events:none;}
.ozdoba svg,.ozdoba{stroke:var(--miedz-jasna);}
.ozdoba--orbita{
  width:200px;height:200px;right:-16px;top:-14px;z-index:1;opacity:.85;
  stroke-width:.9;
}
.ozdoba .kropka{fill:var(--miedz);stroke:none;}
.ozdoba .kropka--pelna{fill:var(--bordo);stroke:none;}

/* =========================================================
   TRZY KORZYŚCI
   ========================================================= */
.korzysci{background:var(--kremowy-cieply);border-top:1px solid var(--linia);border-bottom:1px solid var(--linia);}
.korzysci__siatka{
  display:grid;grid-template-columns:repeat(3,1fr);
  padding-top:38px;padding-bottom:38px;
}
.korzysc{display:flex;gap:18px;align-items:flex-start;padding:6px 26px;}
.korzysc + .korzysc{border-left:1px solid var(--linia);}
.korzysc .ikona{width:40px;height:40px;flex-shrink:0;stroke-width:1.1;stroke-linecap:round;}
.korzysc h2{font-size:1.12rem;margin-bottom:4px;}
.korzysc p{margin:0;font-size:.9rem;color:var(--tekst-mut);line-height:1.5;}

/* =========================================================
   NAGŁÓWKI SEKCJI
   ========================================================= */
.naglowek-sekcji{text-align:center;max-width:34em;margin:0 auto 46px;}
.nadtytul{
  display:block;font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--miedz);margin-bottom:14px;
}
.tytul{font-size:clamp(1.75rem,3vw,2.5rem);}

/* =========================================================
   OFERTA
   ========================================================= */
.oferta{padding:84px 0 90px;background:var(--kremowy-rozowy);}
.oferta__siatka{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.karta{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--panel);border:1px solid var(--linia);
  padding:38px 36px 36px;display:flex;flex-direction:column;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease,border-color .35s ease;
}
.karta:hover{transform:translateY(-5px);box-shadow:var(--cien);border-color:var(--miedz-jasna);}
.karta__ozdoba{position:absolute;pointer-events:none;z-index:-1;stroke:var(--miedz-jasna);stroke-width:.9;opacity:.6;}
.karta__ozdoba--galazka{width:110px;height:240px;left:-26px;bottom:-10px;}
.karta__ozdoba--mapa{width:270px;height:270px;right:-96px;top:20px;}
.karta__litera{font-family:var(--serif);color:var(--bordo);font-size:1rem;display:block;margin-bottom:10px;}
/* Nazwa w pierwszym wierszu, cena w drugim, obie zawsze w jednej linii.
   Dzięki temu kreska, opis i lista zaczynają się w każdej karcie na tej samej
   wysokości. Rozmiar nazwy skaluje się z szerokością kolumny, bo „Miesięczny
   Mentoring 1:1" jest o połowę dłuższy od „Konsultacje 1:1". */
.karta__glowa{display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
.karta__glowa h3{
  font-size:clamp(1.06rem,1.62vw,1.34rem);white-space:nowrap;line-height:1.25;
}
.cena{font-family:var(--serif);font-size:1.42rem;color:var(--tekst);white-space:nowrap;line-height:1.2;}
.cena small{font-size:.62em;color:var(--tekst-mut);}
.karta__kreska{display:block;width:52px;height:1px;background:var(--miedz);margin:18px 0 20px;}
.karta__opis{color:var(--tekst-mut);font-size:.99rem;}
.lista{margin-bottom:30px;}
.lista li{position:relative;padding-left:20px;margin-bottom:9px;font-size:.97rem;}
.lista li::before{
  content:"";position:absolute;left:0;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--bordo);
}
.karta .guzik{margin-top:auto;}
.karta__ozdoba--ksiezyc{width:200px;height:250px;right:-70px;top:10px;}
/* cena promocyjna: stara przekreślona, nowa w bordo */
.cena--stara{color:var(--tekst-mut);font-size:.72em;margin-right:8px;text-decoration-thickness:1px;}
.cena--nowa{color:var(--bordo);}
.oferta__waznosc{
  margin:34px auto 0;max-width:62ch;text-align:center;color:var(--tekst-mut);
  font-size:.88rem;letter-spacing:.02em;line-height:1.6;
}

/* =========================================================
   MENTORING I MAPA RELACYJNA
   ========================================================= */
.mentoring{padding:88px 0 96px;background:var(--kremowy);border-top:1px solid var(--linia);}
.mapa-relacyjna{padding:88px 0 96px;background:var(--panel);border-top:1px solid var(--linia);}

/* kroki procesu: numer w kółku, opis obok */
.kroki-procesu{max-width:62ch;margin:0 auto;counter-reset:krok;}
.kroki-procesu li{display:flex;gap:20px;align-items:flex-start;padding:20px 0;}
.kroki-procesu li + li{border-top:1px solid var(--linia);}
.kroki-procesu__numer{
  flex-shrink:0;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--bordo);color:var(--bordo);
  font-family:var(--serif);font-size:1.02rem;
  display:grid;place-items:center;margin-top:2px;
}
.kroki-procesu div{color:var(--tekst-czytelny);line-height:1.7;}
.kroki-procesu b{color:var(--tekst);font-weight:400;font-family:var(--serif);
  font-size:1.08rem;display:block;margin-bottom:4px;}
.cennik{
  max-width:52ch;margin:64px auto 0;text-align:center;
  background:var(--panel);border:1px solid var(--linia);
  padding:44px 36px 38px;
}
.cennik__nazwa{font-family:var(--serif);font-size:1.5rem;margin:0 0 10px;}
.cennik__zakres{color:var(--tekst-mut);font-size:.98rem;margin-bottom:18px;}
.cennik__ceny{
  font-family:var(--serif);font-size:2.1rem;line-height:1.2;
  margin-bottom:28px;display:flex;align-items:baseline;justify-content:center;gap:10px;
  flex-wrap:wrap;
}
.cennik__ceny small{font-size:.46em;color:var(--tekst-mut);}
.cennik__waznosc{margin:22px 0 0;color:var(--tekst-mut);font-size:.86rem;line-height:1.6;}

/* =========================================================
   CYTAT
   ========================================================= */
.cytat-blok{position:relative;display:grid;grid-template-columns:.42fr .58fr;align-items:stretch;background:var(--kremowy);}
.cytat-blok__tlo{
  background:
    radial-gradient(120% 90% at 20% 10%,rgba(255,255,255,.85),transparent 60%),
    linear-gradient(160deg,var(--kremowy-cieply),#E6D5C6 70%,#D9C4B2);
  min-height:300px;position:relative;overflow:hidden;
}
.cytat-blok__tlo::after{
  content:"";position:absolute;inset:-20% -30%;
  background:repeating-linear-gradient(102deg,rgba(255,255,255,.5) 0 2px,transparent 2px 34px);
  opacity:.32;
}

/* --- motyw splotu: dwa okregi wchodzace na siebie --- */
.splot{
  position:absolute;inset:0;width:100%;height:100%;
  stroke:none;z-index:1;
}
.splot__krag{stroke:#A8734A;stroke-width:1;opacity:.5;}
.splot__wspolne{stroke:#5E1226;stroke-width:1.4;opacity:.55;}
.splot__echo circle{stroke:#A8734A;stroke-width:.7;opacity:.28;}
.splot__nic{stroke:#A8734A;stroke-width:.8;opacity:.5;}
.splot__punkt{stroke:none;}
.splot__punkt--miedz{fill:#B98255;}
.splot__punkt--bordo{fill:#5E1226;}

/* okregi powoli oddychaja ku sobie, czesc wspolna razem z nimi */
.splot__para{transform-box:view-box;transform-origin:210px 210px;
  animation:splot-oddech 14s ease-in-out infinite alternate;}
.splot__wspolne{animation:splot-puls 7s ease-in-out infinite alternate;}
.splot__echo{transform-box:view-box;transform-origin:210px 210px;
  animation:splot-echo 11s ease-in-out infinite alternate;}
.splot__poswiata{animation:splot-puls 9s ease-in-out infinite alternate;}

@keyframes splot-oddech{from{transform:scale(.97);}to{transform:scale(1.03);}}
@keyframes splot-puls{from{opacity:.3;}to{opacity:.7;}}
@keyframes splot-echo{from{transform:scale(.9);opacity:.7;}to{transform:scale(1.12);opacity:.25;}}
.cytat-blok__tresc{padding:64px clamp(28px,5vw,80px);display:flex;flex-direction:column;justify-content:center;max-width:820px;}
.cudzyslow{font-family:var(--serif);font-size:4.4rem;line-height:.6;color:var(--miedz-jasna);display:block;margin-bottom:18px;}
.cytat-blok blockquote{margin:0;}
.cytat-blok__mocne{font-family:var(--serif);font-size:1.42rem;line-height:1.44;color:var(--tekst);margin-bottom:18px;}
.cytat-blok blockquote p:last-child{color:var(--tekst-mut);margin-bottom:0;}
.cytat-blok cite{
  font-style:normal;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--miedz);margin-top:24px;
}

/* =========================================================
   O MNIE
   ========================================================= */
.o-mnie{padding:88px 0;background:var(--panel);}
.o-mnie__siatka{display:grid;grid-template-columns:1.25fr .75fr;gap:60px;align-items:center;}
.o-mnie__tekst .tytul{margin-bottom:22px;}
.o-mnie__tekst p{color:var(--tekst-mut);}
.fakty{margin-top:30px;display:grid;gap:14px;}
.fakty li{
  border-left:2px solid var(--miedz-jasna);padding-left:16px;
  display:flex;flex-direction:column;
}
.fakty strong{font-family:var(--serif);font-weight:500;font-size:1.04rem;color:var(--tekst);}
.fakty span{font-size:.85rem;color:var(--tekst-mut);}
.o-mnie__ozdoba svg{width:100%;max-width:280px;margin:0 auto;display:block;}
.o-mnie__ozdoba .kontur{stroke:var(--miedz-jasna);stroke-width:1.2;stroke-linecap:round;}
.o-mnie__ozdoba .kontur--cienki{stroke-width:.75;opacity:.8;}
.o-mnie__ozdoba .punkt{fill:var(--miedz);stroke:none;}
.o-mnie__ozdoba .punkt--bordo{fill:var(--bordo);stroke:none;}

/* =========================================================
   TO JEST DLA CIEBIE
   ========================================================= */
.dla-ciebie{
  padding:76px 0;
  background:linear-gradient(120deg,var(--kremowy-cieply) 0%,var(--kremowy-rozowy) 60%);
  border-top:1px solid var(--linia);
}
.dla-ciebie__siatka{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center;}
.dla-ciebie__tytul{font-size:clamp(1.8rem,3.2vw,2.6rem);}
.checklista li{
  display:flex;align-items:flex-start;gap:16px;
  padding:15px 0;border-bottom:1px solid var(--linia);font-size:1.04rem;
}
.checklista li:last-child{border-bottom:0;}
.ptaszek{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;
  border:1px solid var(--miedz);position:relative;margin-top:2px;
}
.ptaszek::after{
  content:"";position:absolute;left:7px;top:10px;width:9px;height:5px;
  border-left:1.6px solid var(--bordo);border-bottom:1.6px solid var(--bordo);
  transform:rotate(-45deg);
}

/* =========================================================
   KONSULTACJE: dla kogo, z kim pracuję, w czym pomagam
   Dużo tekstu, więc trzyma się jednej wąskiej kolumny (62 znaki w wierszu),
   a rytm nadają: akapit wiodący, dwa panele wyróżnień i lista tematów.
   ========================================================= */
.konsultacje{padding:88px 0 96px;background:var(--panel);border-top:1px solid var(--linia);}
.kolumna-tekstu{max-width:62ch;margin:0 auto;}
/* ciemniej niż --tekst-mut, bo przy tak długich akapitach jasny szarobrąz
   męczył oczy, zwłaszcza na telefonie */
.kolumna-tekstu p{color:var(--tekst-czytelny);}
/* Akcenty w bordo: kreska pod akapitem wiodącym, kreska nad podtytułem
   i pionowa krecha przy wyróżnieniach. Tyle wystarczy, żeby tekst miał rytm,
   a nie zamienił się w choinkę. */
.wiodacy{
  position:relative;font-family:var(--serif);font-size:clamp(1.16rem,2.2vw,1.44rem);
  line-height:1.5;color:var(--tekst);margin-bottom:1.5em;padding-bottom:1.1em;
}
.wiodacy::after{
  content:"";position:absolute;left:0;bottom:0;width:58px;height:2px;
  background:var(--bordo);opacity:.8;
}
/* kolor podany razem z `.kolumna-tekstu`, bo sama `.wyrozniony` przegrywa
   specyficznością z regułą `.kolumna-tekstu p` i wyróżnienie zostawało wyblakłe */
.wyrozniony,.kolumna-tekstu .wyrozniony{
  border-left:3px solid var(--bordo);padding:22px 26px 22px 24px;
  background:var(--kremowy-cieply);
  color:var(--tekst);margin:1.8em 0;
}
.konsultacje__blok,.blok-tekstu{margin-top:64px;padding-top:56px;border-top:1px solid var(--linia);}
.podtytul{
  position:relative;font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,1.85rem);
  color:var(--tekst);margin:0 0 20px;padding-top:24px;
}
.podtytul::before{
  content:"";position:absolute;left:0;top:0;width:36px;height:2px;background:var(--bordo);
}
.tematy__wstep{
  max-width:62ch;margin:34px auto 18px;color:var(--bordo);
  font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
}
.tematy{display:grid;grid-template-columns:1fr 1fr;gap:2px 40px;}
.tematy li{
  position:relative;padding:15px 0 15px 26px;
  border-bottom:1px solid var(--linia);color:var(--tekst-mut);
  font-size:1rem;line-height:1.62;
  transition:color .3s ease,transform .3s ease;
}
.tematy li::before{
  content:"";position:absolute;left:0;top:1.38em;
  width:12px;height:2px;background:var(--bordo);opacity:.75;
  transition:width .3s ease,opacity .3s ease;
}
.tematy li:hover{color:var(--tekst);transform:translateX(4px);}
.tematy li:hover::before{width:18px;opacity:1;}
.zamkniecie{max-width:56ch;margin:70px auto 0;text-align:center;}
.zamkniecie p{color:var(--tekst-mut);}
.zamkniecie__ozdoba{width:120px;height:40px;display:block;margin:0 auto 26px;}
.zamkniecie__ozdoba .punkt-pelny{fill:var(--bordo);stroke:none;}
.zamkniecie__zaproszenie{
  font-family:var(--serif);font-size:1.2rem;line-height:1.5;
  color:var(--tekst);margin-bottom:30px;
}

/* =========================================================
   OPINIE
   ========================================================= */
.opinie{padding:88px 0;background:var(--kremowy);}
.opinie__siatka{
  columns:3;column-gap:26px;
}
.opinia{
  break-inside:avoid;margin:0 0 26px;
  background:var(--panel);border:1px solid var(--linia);
  padding:30px 28px 26px;position:relative;
}
.opinia::before{
  content:"\201C";font-family:var(--serif);font-size:3.2rem;line-height:.7;
  color:var(--miedz-jasna);display:block;margin-bottom:10px;
}
.opinia blockquote{margin:0;font-size:.99rem;line-height:1.68;color:var(--tekst);}
.opinia figcaption{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--linia);
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bordo);
  display:flex;flex-direction:column;gap:3px;
}
.opinia figcaption span{letter-spacing:.04em;text-transform:none;color:var(--tekst-mut);font-size:.82rem;}

/* sterowanie karuzelą: na szerokim ekranie nieużywane */
.opinie__sterowanie{display:none;justify-content:center;gap:16px;margin-top:26px;}
.strzalka-karuzeli{
  width:44px;height:44px;border-radius:50%;padding:0;
  border:1px solid var(--linia);background:transparent;cursor:pointer;
  display:grid;place-items:center;
  transition:border-color .25s ease,opacity .25s ease,background .25s ease;
}
.strzalka-karuzeli svg{width:19px;height:19px;stroke:var(--miedz);stroke-width:1.4;}
.strzalka-karuzeli:hover{border-color:var(--miedz);background:var(--panel);}
.strzalka-karuzeli[disabled]{opacity:.3;cursor:default;}

/* =========================================================
   FINAŁ
   ========================================================= */
.final{position:relative;padding:92px 0 96px;background:var(--kremowy-cieply);overflow:hidden;text-align:center;}
.final__tlo{position:absolute;inset:auto 0 0 0;height:150px;opacity:.3;}
.final__tlo svg{width:100%;height:100%;stroke:var(--miedz-jasna);stroke-width:1.4;}
.final__tresc{position:relative;z-index:1;}
.final__tytul{font-size:clamp(1.85rem,3.4vw,2.75rem);margin-bottom:14px;}
.final__pod{color:var(--tekst-mut);margin-bottom:34px;}
.final__guziki{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}
.final__kontakt{margin-top:30px;font-size:.94rem;color:var(--tekst-mut);}
.final__kontakt a{color:var(--bordo);text-underline-offset:4px;}

/* =========================================================
   STOPKA
   ========================================================= */
.stopka{background:var(--kremowy);border-top:1px solid var(--linia);padding:28px 0;}
.stopka__sredek,.stopka__srodek{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.stopka__linki{display:flex;align-items:center;gap:16px;font-size:.9rem;}
.stopka__linki a{color:var(--tekst-mut);text-decoration:none;transition:color .2s;}
.stopka__linki a:hover{color:var(--bordo);}
.stopka__linki svg{width:21px;height:21px;stroke:var(--tekst-mut);stroke-width:1.3;transition:stroke .2s;}
.stopka__linki a:hover svg{stroke:var(--bordo);}
.stopka__linki svg circle[stroke="none"]{fill:var(--tekst-mut);}

/* =========================================================
   PASEK MOBILNY
   ========================================================= */
.mobilny-pasek{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(251,245,239,.95);backdrop-filter:blur(8px);
  border-top:1px solid var(--linia);
  transform:translateY(110%);transition:transform .35s ease;
}
.mobilny-pasek.pokaz{transform:none;}

/* =========================================================
   MENU: hamburger i nawigacja na telefonie
   ========================================================= */
.hamburger{
  display:none;width:44px;height:44px;padding:0;margin-left:auto;
  background:none;border:0;cursor:pointer;
  flex-direction:column;justify-content:center;gap:6px;align-items:center;
}
.hamburger span{
  display:block;width:24px;height:1.5px;background:var(--tekst);
  transition:transform .3s ease,opacity .2s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
.pasek__nawigacja a.aktywny{color:var(--bordo);border-color:var(--miedz);}
.pasek__nawigacja--tylko-telefon,.guzik--w-menu{display:none;}
.guzik--w-pasku{flex-shrink:0;}

/* =========================================================
   PASEK OPINII: karuzela także na szerokim ekranie
   Trzy dopasowane opinie na podstronie mają być jednym paskiem,
   a nie ścianą tekstu w połowie strony produktowej.
   ========================================================= */
.opinie__siatka--pasek{
  columns:auto;display:flex;align-items:stretch;gap:24px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding:2px 0 6px;
}
.opinie__siatka--pasek::-webkit-scrollbar{display:none;}
.opinie__siatka--pasek .opinia{
  flex:0 0 calc(50% - 12px);scroll-snap-align:center;margin:0;
  display:flex;flex-direction:column;
}
.opinie__siatka--pasek + .opinie__sterowanie{display:flex;}
.opinie__wiecej{text-align:center;margin:26px 0 0;}
.opinie__wiecej a,.o-mnie__wiecej a{
  color:var(--bordo);font-size:.98rem;
  border-bottom:1px solid var(--miedz-jasna);text-decoration:none;padding-bottom:2px;
}
.opinie__wiecej a:hover,.o-mnie__wiecej a:hover{border-color:var(--bordo);}
.o-mnie__wiecej{margin-top:26px;}

/* =========================================================
   POZOSTAŁE FORMY WSPÓŁPRACY (na dole stron produktowych)
   ========================================================= */
.inne-formy{padding:0 0 84px;background:inherit;}
.inne-formy__wstep{
  text-align:center;color:var(--bordo);font-size:.82rem;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:20px;
}
.inne-formy__linki{display:grid;gap:14px;}
/* Kafelki mają odstawać od tła, więc dostają miękki bordowy cień pod spodem,
   jasną krechę u góry (światło) i bordową krechę przy lewej krawędzi.
   Pod kursorem unoszą się i cień robi się głębszy. */
.inne-formy__linki a{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:4px;text-decoration:none;
  background:linear-gradient(180deg,#FFFDFC 0%,var(--panel) 55%,#FBF3EE 100%);
  border:1px solid var(--linia);padding:22px 26px 22px 30px;
  font-family:var(--serif);font-size:1.12rem;color:var(--tekst);
  box-shadow:0 14px 28px -20px rgba(94,18,38,.55),
             0 2px 6px -4px rgba(94,18,38,.25),
             inset 0 1px 0 rgba(255,255,255,.9);
  transition:border-color .3s ease,transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease;
}
.inne-formy__linki a::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--bordo);opacity:.85;
  transition:width .3s ease;
}
.inne-formy__linki a span{
  font-family:var(--sans);font-size:.92rem;color:var(--tekst-mut);
}
.inne-formy__linki a:hover{
  border-color:var(--miedz);transform:translateY(-4px);
  box-shadow:0 26px 44px -22px rgba(94,18,38,.6),
             0 4px 10px -6px rgba(94,18,38,.3),
             inset 0 1px 0 rgba(255,255,255,.95);
}
.inne-formy__linki a:hover::before{width:5px;}

/* =========================================================
   KONTAKT
   ========================================================= */
.kontakt__kanaly{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:62ch;margin:44px auto 0;}
.kontakt__kanal{
  display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;
  background:var(--panel);border:1px solid var(--linia);padding:32px 24px;
  transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease;
}
.kontakt__kanal:hover{border-color:var(--miedz);transform:translateY(-3px);box-shadow:var(--cien);}
.kontakt__kanal svg{width:30px;height:30px;stroke:var(--bordo);stroke-width:1.3;}
.kontakt__nazwa{
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bordo);margin-top:6px;
}
.kontakt__wartosc{font-family:var(--serif);font-size:1.14rem;color:var(--tekst);}

/* =========================================================
   STOPKA
   ========================================================= */
.stopka{background:var(--kremowy-cieply);border-top:1px solid var(--linia);padding:60px 0 0;}
.stopka__siatka{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:44px;padding-bottom:44px;}
.marka--stopka{flex-direction:column;align-items:flex-start;gap:2px;}
.marka--stopka .marka__domena{font-style:italic;font-family:var(--serif);color:var(--miedz);}
.stopka__opis{margin:16px 0 20px;color:var(--tekst-mut);font-size:.96rem;max-width:38ch;}
.stopka__ikony{display:flex;gap:14px;}
.stopka__ikony a{
  width:40px;height:40px;border:1px solid var(--linia);border-radius:50%;
  display:grid;place-items:center;transition:border-color .3s ease;
}
.stopka__ikony a:hover{border-color:var(--miedz);}
.stopka__ikony svg{width:19px;height:19px;stroke:var(--bordo);stroke-width:1.3;}
.stopka__tytul{
  font-family:var(--sans);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bordo);margin:0 0 16px;font-weight:400;
}
.stopka__lista li{margin-bottom:11px;}
.stopka__lista a{color:var(--tekst-czytelny);text-decoration:none;font-size:.98rem;}
.stopka__lista a:hover{color:var(--bordo);}
.stopka__dol{
  border-top:1px solid var(--linia);padding:20px 28px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.86rem;color:var(--tekst-mut);
}

/* =========================================================
   STRONA PO PŁATNOŚCI
   ========================================================= */
.podziekowanie{
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:90px 0 100px;
  background:linear-gradient(140deg,var(--kremowy) 0%,var(--kremowy-cieply) 100%);
}
.podziekowanie__srodek{max-width:640px;}
.znak{width:104px;height:104px;margin:0 auto 30px;display:block;}
.znak .obwod,.znak .ptak{fill:none;stroke:var(--miedz);stroke-width:1.4;stroke-linecap:round;}
.znak .obwod{stroke-dasharray:1;stroke-dashoffset:1;animation:rysowanie 1.2s ease .15s forwards;}
.znak .ptak{stroke:var(--bordo);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;
  animation:rysowanie .7s ease .9s forwards;}
.podziekowanie h1{font-size:clamp(2rem,4vw,2.9rem);margin-bottom:18px;}
.podziekowanie h1 em{font-style:normal;color:var(--bordo);}
.podziekowanie__lead{font-size:1.08rem;color:var(--tekst-mut);margin-bottom:34px;}
.kroki{
  text-align:left;display:grid;gap:2px;margin:0 auto 36px;max-width:470px;
  background:var(--linia);border:1px solid var(--linia);
}
.kroki li{background:var(--panel);padding:18px 22px;display:flex;gap:16px;align-items:flex-start;}
.kroki b{
  font-family:var(--serif);font-weight:500;color:var(--bordo);
  flex-shrink:0;width:26px;text-align:center;
}
.kroki span{font-size:.98rem;line-height:1.6;}
.podziekowanie__link{
  margin:24px auto 0;max-width:46ch;font-size:.96rem;line-height:1.62;color:var(--tekst-czytelny);
}
.podziekowanie__link a{color:var(--bordo);text-decoration-color:var(--miedz-jasna);}
.podziekowanie__stopka{margin-top:30px;font-size:.94rem;color:var(--tekst-mut);}
.podziekowanie__stopka a{color:var(--bordo);text-underline-offset:4px;}

/* =========================================================
   RESPONSYWNOŚĆ
   ========================================================= */
@media (max-width:1040px){
  .opinie__siatka{columns:2;}
  /* trzy karty oferty przestają się mieścić, więc schodzą do dwóch kolumn,
     a trzecia zajmuje całą szerokość pod nimi */
  .oferta__siatka{grid-template-columns:1fr 1fr;}
  .oferta__siatka .karta:last-child{grid-column:1 / -1;}
}
@media (max-width:900px){
  body{font-size:16px;}
  /* menu chowa się pod hamburger, nawigacja wysuwa się pod paskiem */
  .hamburger{display:flex;}
  .guzik--w-pasku{display:none;}
  .pasek__nawigacja{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:var(--kremowy);border-top:1px solid var(--linia);
    box-shadow:0 18px 40px -30px rgba(51,42,40,.8);
    max-height:0;overflow:hidden;transition:max-height .35s ease;
  }
  .pasek__nawigacja.otwarte{max-height:70vh;overflow:auto;}
  .pasek__nawigacja a{
    padding:16px 28px;border-bottom:1px solid var(--linia);font-size:1.02rem;
  }
  .pasek__nawigacja--tylko-telefon{display:block;}
  .guzik--w-menu{display:inline-flex;margin:18px 28px 24px;justify-content:center;}
  .pasek{position:sticky;}
  .pasek__srodek{position:relative;}
  .hero__siatka{grid-template-columns:1fr;gap:38px;padding-top:32px;padding-bottom:40px;}
  /* Odstęp od paska do zdjęcia siedzi na SAMYM ZDJĘCIU jako margines, nie na
     kontenerze jako padding. Padding rodzica potrafił na iPhonie nie zadziałać,
     dokładnie tak jak przy guzikach hero. */
  .hero__foto{order:-1;margin-top:38px;}
  .hero__lukowy{width:min(320px,78%);}
  .ozdoba--orbita{width:190px;height:190px;right:2%;top:-14px;}
  .hero__naglowek{font-size:clamp(2rem,7vw,2.7rem);}
  .korzysci__siatka{grid-template-columns:1fr;gap:30px;padding-top:52px;padding-bottom:48px;}
  .korzysc + .korzysc{border-left:0;border-top:1px solid var(--linia);padding-top:30px;}
  .korzysc{padding-left:0;padding-right:0;gap:20px;}
  .korzysc h2{margin-bottom:7px;}
  .korzysc p{line-height:1.6;}
  /* trzy znaczniki jeden pod drugim, w rzedzie robily sie za drobne.
     Margines na dole przejął rolę odstępu do następnej sekcji po tym,
     jak z hero zniknęły guziki, które go wcześniej trzymały. */
  .znaczniki{flex-direction:column;align-items:flex-start;gap:13px;margin-bottom:8px;}
  .znaczniki li{font-size:1.02rem;padding-left:18px;}
  .znaczniki li::before{top:.72em;width:7px;height:7px;}
  /* guziki w hero stoja jeden pod drugim, wiec potrzebuja wiecej powietrza.
     Odstep do nastepnej sekcji siedzi na samych guzikach, a nie na kontenerze:
     margines elementu jest odporny na to, czym jest wypelniony rodzic. */
  .hero__guziki{gap:16px;margin-bottom:56px;}
  .hero__guziki .guzik{padding-top:18px;padding-bottom:18px;}
  .oferta__siatka{grid-template-columns:1fr;gap:22px;}
  .oferta__siatka .karta:last-child{grid-column:auto;}
  .mentoring,.mapa-relacyjna{padding:68px 0 76px;}
  .blok-tekstu{margin-top:48px;padding-top:42px;}
  .kroki-procesu li{gap:15px;}
  .kroki-procesu__numer{width:33px;height:33px;font-size:.95rem;}
  .cennik{padding:34px 24px 30px;}
  .cennik__ceny{font-size:1.8rem;}
  .cytat-blok{grid-template-columns:1fr;}
  .cytat-blok__tlo{min-height:210px;}
  .cytat-blok__tresc{padding:44px 28px 50px;}
  .o-mnie__siatka{grid-template-columns:1fr;gap:34px;}
  .o-mnie__ozdoba{order:-1;}
  .o-mnie__ozdoba svg{max-width:190px;}
  .dla-ciebie__siatka{grid-template-columns:1fr;gap:26px;}
  /* Lista tematów schodzi do jednej kolumny, bo w dwóch zostawałyby
     pojedyncze słowa w wierszu. */
  .konsultacje{padding:68px 0 76px;}
  .konsultacje__blok{margin-top:48px;padding-top:42px;}
  .tematy{grid-template-columns:1fr;gap:0;}
  .wyrozniony{padding-left:18px;}
  .zamkniecie{margin-top:54px;}
  /* Karuzela zamiast kolumny: siedem opinii jedna pod drugą to była ściana
     tekstu na pół ekranu przewijania. Karty jadą w poziomie ze snapowaniem,
     pasek przewijania schowany, sterowanie strzałkami niżej.
     Ujemne marginesy wypuszczają karuzelę poza kontener, żeby sąsiednia karta
     wystawała zza krawędzi i było widać, że jest co przewijać. */
  .opinie__siatka{
    /* stretch, czyli wszystkie kafle równej wysokości. Żeby ta wysokość nie
       była wysokością najdłuższej opinii, sam cytat jest przycięty do ośmiu
       linii, a pod nim pojawia się „Czytaj więcej”. Dzięki temu przewijanie
       karuzeli nie skacze w pionie. */
    columns:auto;display:flex;align-items:stretch;gap:16px;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    transition:height .3s ease;
    margin-left:-20px;margin-right:-20px;
    padding:2px 20px 6px;
  }
  .opinie__siatka::-webkit-scrollbar{display:none;}
  .opinia{
    flex:0 0 84%;scroll-snap-align:center;margin:0;
    display:flex;flex-direction:column;
  }
  /* Przycięcie żyje tylko przy działającym JS, bo tylko wtedy jest czym
     tekst z powrotem rozwinąć. Bez skryptu cytat zostaje w całości. */
  .js .opinia blockquote{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;
    overflow:hidden;
  }
  .js .opinia--rozwinieta blockquote{-webkit-line-clamp:unset;overflow:visible;}
  .opinia figcaption{margin-top:auto;}
  .czytaj-wiecej{
    align-self:flex-start;margin-top:12px;padding:0;
    background:none;border:0;cursor:pointer;
    font-family:var(--sans);font-size:.86rem;color:var(--bordo);
    border-bottom:1px solid var(--miedz-jasna);
  }
  /* W karuzeli karty poza kadrem nigdy nie wejdą w pole widzenia obserwatora,
     więc animacja wejścia musi tu zniknąć, inaczej zostają puste miejsca. */
  .js .opinie__siatka .odslon{opacity:1;transform:none;}
  .opinie__sterowanie{display:flex;}
  .opinie__siatka--pasek{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;}
  .opinie__siatka--pasek .opinia{flex:0 0 84%;}
  .stopka__siatka{grid-template-columns:1fr;gap:34px;}
  .kontakt__kanaly{grid-template-columns:1fr;gap:16px;}
  .inne-formy{padding-bottom:64px;}
  .podziekowanie{padding:60px 0 70px;}
  .mobilny-pasek{display:block;}
  .final{padding-bottom:120px;}
  .hero__guziki .guzik,.final__guziki .guzik{flex:1 1 100%;justify-content:center;}
}
@media (max-width:620px){
  /* Guzik w pasku łamał się na dwie linie i wyglądał na ściśnięty.
     Na wąskim ekranie i tak są dwa duże guziki w hero, a przy przewijaniu
     dochodzi pasek na dole, więc ten w nagłówku jest zbędny. */
  .pasek__srodek .guzik--maly{display:none;}
  /* Bez guzika i bez nawigacji w pasku zostaje sama marka, przy lewej krawędzi.
     Dwa wiersze w jednym rozmiarze zlewały się, dlatego nazwisko jest u góry,
     a tytuł pod spodem jako mniejszy podpis. Kolejność odwraca `order`,
     żeby nie ruszać HTML ani desktopu. */
  .pasek__srodek{justify-content:flex-start;padding-top:30px;padding-bottom:18px;}
  .marka{
    flex-direction:column;align-items:flex-start;text-align:left;
    gap:0;white-space:nowrap;
  }
  .marka__imie{order:1;font-size:1.32rem;line-height:1.05;}
  .marka__tytul{
    order:2;padding-left:0;border-left:0;
    font-size:.82rem;letter-spacing:.04em;line-height:1;margin-top:-1px;
  }
}
@media (max-width:420px){
  .kontener{padding-left:20px;padding-right:20px;}
  .karta{padding:30px 24px;}
  .marka__domena{display:none;}
}