/* =========================================================
   APHRODITE DAE — arkusz stylów
   Motyw: CZERŃ + KRWISTA CZERWIEŃ + BIEL (paleta bez zmian)
   ========================================================= */

:root{
  /* --- KOLORY --- */
  --bg:            #0A0708;
  --bg-tint:       #120C0E;
  --surface:       #1A1215;
  --ink:           #F7F2F2;
  --ink-soft:      #A89A9D;
  --accent:        #8E0F1E;
  --accent-deep:   #5E0812;
  --accent-bright: #C4303E;
  --line:          #2C1D21;
  --white:         #FFFFFF;
  --footer-bg:     #000000;

  /* --- TYPOGRAFIA --- */
  /* Logo i nagłówki — Poppins. Tekst — Inter.
     Playfair został wyłącznie do kursywnych akcentów (--italic). */
  /* Figtree - najbliższy legalny odpowiednik Trip Sans
     (przyjazny geometryczny grotesk, wagi 400-900) */
  --logo:    'Figtree', -apple-system, Arial, sans-serif;
  --display: 'Figtree', -apple-system, Arial, sans-serif;
  --sans:    'Figtree', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --italic:  'Playfair Display', Georgia, serif;

  /* --- UKŁAD --- */
  --wrap: 1140px;
  --radius: 14px;
  --shadow: 0 12px 40px rgba(0,0,0,.55);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.narrow{ max-width:820px; }
.center{ text-align:center; }

/* ---------- TYPOGRAFIA ---------- */
h1,h2,h3{
  font-family:var(--display); font-weight:600; line-height:1.15; margin:0 0 .5em; color:var(--ink);
  /* równiejszy rozkład słów między linie, mniej pojedynczych wyrazów w ostatniej
     linii. pretty jako fallback (jeśli przeglądarka nie zna balance, weźmie
     pretty; jeśli zna balance - balance nadpisze pretty). */
  text-wrap:pretty;
  text-wrap:balance;
}
h1{ font-size:clamp(2.3rem,5.8vw,4.2rem); letter-spacing:-.035em; }
.h2{ font-size:clamp(1.8rem,3.8vw,2.7rem); margin-bottom:.4em; letter-spacing:-.025em; }
h3{ font-size:1.25rem; letter-spacing:-.015em; }

/* nagłówek podkreślony czerwoną kreską na całą swoją szerokość */
/* width:fit-content zamiast inline-block — nagłówek zwęża się do tekstu,
   ale zostaje elementem blokowym, więc etykieta (.eyebrow) nie wskakuje obok niego */
.h2--line{
  width:fit-content; margin-inline:auto;
  position:relative; padding-bottom:.4em;
}
.h2--line::after{
  content:''; position:absolute; bottom:0; left:0;
  width:100%; height:3px; border-radius:2px;
  background:var(--accent-bright);
  box-shadow:0 0 14px rgba(196,48,62,.6);
}
/* kursywne akcenty zostają szeryfowe */
em{ font-family:var(--italic); font-style:italic; font-weight:500; color:var(--accent-bright); letter-spacing:-.01em; }

/* etykieta sekcji — prostokąt z zaokrąglonymi rogami */
.eyebrow{
  display:inline-block;
  font-family:var(--sans); font-size:.68rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent-bright);
  border:1px solid rgba(196,48,62,.45); border-radius:8px;
  background:rgba(196,48,62,.08);
  padding:.45em .95em; margin:0 0 1.1rem;
}
/* Akapit hero ma się mieścić w 4 liniach. Kolumna tekstu ma 617px (siatka
   1.2fr/0.8fr ze zdjęciem obok), więc przy 1.13rem wychodziło 5 linii -
   1rem to największy stopień, który mieści 4. max-width:none jest konieczne:
   przy mniejszym foncie 54ch skurczyłoby się do ~553px i znów dałoby 5 linii.
   balance wyrównuje długość linii. */
.lead{
  font-size:1rem; color:var(--ink-soft);
  max-width:none; text-wrap:balance;
}
.section-lead{ font-size:1.05rem; color:var(--ink-soft); max-width:60ch; margin:0 auto 2.5rem; }
/* bez limitu szerokości — mieści się w jednej linii (na telefonie i tak się zawinie) */
/* balance wyrównuje długość linii i sam zwęża blok do najmniejszej
   szerokości mieszczącej tę samą liczbę linii - bez tego tekst rozciągałby
   się na całe 1092px, a ostatnia linia zostawała krótkim ogonem */
.section-lead--wide{ max-width:none; text-wrap:balance; }

/* ---------- PRZYCISKI ---------- */
.btn{
  display:inline-block; background:var(--accent); color:var(--white);
  font-family:var(--sans); font-size:.95rem; font-weight:600; text-decoration:none;
  padding:.95em 1.9em; border-radius:100px; border:1.5px solid var(--accent);
  transition:.22s ease; cursor:pointer; text-align:center;
}
/* poświata na hover — czerwone światło wokół przycisku */
.btn:hover{
  background:var(--accent-bright); border-color:var(--accent-bright); transform:translateY(-2px);
  box-shadow:0 0 22px rgba(196,48,62,.55), 0 0 46px rgba(196,48,62,.28);
}
.btn--lg{ padding:1.1em 2.4em; font-size:1.02rem; }
.btn--sm{ padding:.62em 1.25em; font-size:.85rem; }
.btn--full{ display:block; width:100%; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:rgba(255,255,255,.25); }
.btn--ghost:hover{ background:var(--accent); color:var(--white); border-color:var(--accent); }
.btn--light{ background:var(--white); color:var(--accent-deep); border-color:var(--white); }
.btn--light:hover{
  background:#EDE4E4; color:var(--accent-deep); border-color:#EDE4E4;
  box-shadow:0 0 24px rgba(255,255,255,.5), 0 0 52px rgba(255,255,255,.22);
}

/* przycisk w nawigacji — mocniejsza poświata, bo to główne CTA */
.nav .btn--sm:hover{ box-shadow:0 0 26px rgba(196,48,62,.7), 0 0 60px rgba(196,48,62,.35); }

/* ---------- PASEK EKSKLUZYWNOŚCI ----------
   Nie „śpiesz się, bo zabraknie", tylko „przyjmuję ograniczoną liczbę osób".
   Stąd czerń + hairline + drobne, rozstrzelone wersaliki zamiast krzykliwej czerwieni. */
.announce{
  background:var(--footer-bg); border-bottom:1px solid var(--line);
  color:var(--ink-soft); font-size:.68rem; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase;
  display:flex; gap:.9rem; justify-content:center; align-items:center;
  padding:.85rem 1rem; text-align:center;
}
.announce strong{ color:var(--ink); font-weight:600; }
/* krótszą wersję komunikatu pokazujemy dopiero na mobile (patrz @media 640) */
.announce__short{ display:none; }
.pulse{
  width:5px; height:5px; border-radius:50%; background:var(--accent-bright);
  display:inline-block; flex:0 0 auto;
  box-shadow:0 0 8px rgba(196,48,62,.9);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.85)} }

@media (max-width:640px){
  /* JEDNA LINIA: mniejszy font + wyraźnie mniejszy letter-spacing (to głównie
     odstępy między literami rozpychały tekst) + nowrap. Dodatkowo skracamy treść
     (chowamy __long, pokazujemy __short), bo pełna wersja nie mieści się w jednej
     linii na najwęższych ekranach (~320px) bez ucinania. */
  .announce{ font-size:.6rem; letter-spacing:.08em; gap:.55rem; padding:.7rem .9rem;
             white-space:nowrap; }
  .announce__long{ display:none; }
  .announce__short{ display:inline; }
  /* na telefonie mniejsze TYLKO w nagłówku - stopka zostaje */
  .nav__inner{ padding-top:8px; padding-bottom:8px; min-height:72px; }
  .nav .logo img{ height:32px; max-height:32px; }
}

/* ---------- NAWIGACJA ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(10,7,8,.88); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
/* logo po lewej, linki + przycisk dosunięte do prawej
   BEZ sztywnej wysokości - pasek wynika z loga (88px) + padding 10px góra/dół.
   align-items:center = logo, menu i przycisk na jednej osi pionowej. */
.nav__inner{
  display:flex; align-items:center; justify-content:flex-start; gap:2.25rem;
  padding-top:10px; padding-bottom:10px;
  /* wysokość zablokowana na obecnych 108px - zmniejszenie loga jej nie skróci.
     align-items:center rozkłada nadmiar miejsca równo nad i pod logiem. */
  min-height:108px;
}
.logo{
  flex:0 0 auto; line-height:0;
  font-family:var(--logo); font-weight:700; font-size:1.24rem;
  text-transform:uppercase; letter-spacing:.13em; line-height:1;
  text-decoration:none; color:var(--ink); white-space:nowrap;
}
.logo span{ color:var(--accent-bright); }
/* LOGO (obrazek kwadratowy 1:1)
   Wspólna baza NIE ustala wysokości - tylko proporcje i zachowanie.
   Dzięki temu zmiana w nagłówku nie może ruszyć stopki i odwrotnie. */
.logo img{ width:auto; object-fit:contain; display:block; }

/* --- NAGŁÓWEK --- */
.nav .logo img{ height:48px; max-height:48px; }

/* --- STOPKA - zatwierdzone, nie ruszać --- */
.footer .logo img{ height:38px; max-height:38px; }
.nav__links{ display:flex; gap:1.6rem; margin-left:auto; }
.nav__links a{ text-decoration:none; font-size:.88rem; color:var(--ink-soft); transition:color .2s; }
.nav__links a:hover{ color:var(--ink); }
.nav__burger{ display:none; background:none; border:0; font-size:1.4rem; cursor:pointer; color:var(--ink); margin-left:auto; }
.nav__mobile{ display:none; flex-direction:column; padding:.5rem 24px 1.25rem; border-top:1px solid var(--line); background:var(--bg); }
.nav__mobile a{ text-decoration:none; padding:.7rem 0; color:var(--ink); border-bottom:1px solid var(--line); }
.nav__mobile.open{ display:flex; }

/* ---------- HERO ---------- */
.hero{
  /* Górny padding celowo mały: nav jest sticky, więc zostaje w przepływie
     i sam odsuwa hero - nie trzeba kompensować jego wysokości. Wcześniej
     było tu clamp(3rem,7vw,5.5rem) = 88px, co robiło pustą dziurę nad
     etykietą. Dół bez zmian. */
  padding:clamp(1.5rem,3vw,2.5rem) 0 clamp(3rem,6vw,4.5rem);
  position:relative;
}
.hero::before{ /* czerwona poświata */
  content:''; position:absolute; top:-20%; left:-10%; width:70%; height:120%;
  background:radial-gradient(circle, rgba(142,15,30,.28) 0%, transparent 65%);
  pointer-events:none; z-index:0;
}
.hero__inner{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(2rem,5vw,4rem); align-items:center; position:relative; z-index:1; }
.hero h1{ margin-bottom:.4em; }
.hero__micro{ font-size:.83rem; color:var(--ink-soft); margin:1.75rem 0 0; }

/* ZDJĘCIE W HERO
   Portret ma czarne tło, więc zamiast twardego prostokąta wygaszamy krawędzie -
   fotografia wtapia się w tło strony zamiast siedzieć w ramce. */
.hero__foto{
  /* dokładnie ta sama ramka co placeholder (4:5), zdjęcie kadrowane do niej */
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center top;
  display:block; border-radius:var(--radius);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 10%, #000 88%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 8%,  #000 92%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:
    linear-gradient(to bottom, transparent 0%, #000 10%, #000 88%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 8%,  #000 92%, transparent 100%);
          mask-composite:intersect;
}

.img-placeholder{
  aspect-ratio:4/5; background:var(--surface); border:1px dashed var(--line);
  border-radius:var(--radius); display:grid; place-items:center; text-align:center;
  color:var(--ink-soft); font-size:.9rem; box-shadow:var(--shadow);
}
.img-placeholder small{ opacity:.6; }
/* KLUCZOWE: display:grid powyżej bije atrybut hidden z HTML-a.
   Bez tej reguły placeholder zostaje widoczny nawet po wczytaniu zdjęcia. */
.img-placeholder[hidden]{ display:none; }

/* ---------- PASEK ZASAD ----------
   Nie liczby o mnie, tylko zasady, na jakich pracuję. */
.proofbar{ background:var(--accent); color:#fff; padding:.9rem 0; }
.proofbar__inner{
  display:flex; justify-content:center; align-items:center;
  gap:2.25rem; flex-wrap:wrap; text-align:center;
}
.proofbar span{
  position:relative; white-space:nowrap;
  font-size:.74rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.92);
}
/* cienki separator między zasadami */
.proofbar span+span::before{
  content:''; position:absolute; left:-1.15rem; top:50%; transform:translateY(-50%);
  width:1px; height:11px; background:rgba(255,255,255,.3);
}

/* ---------- SEKCJE ---------- */
/* przyklejony pasek zasłaniałby nagłówek sekcji przy skoku z menu */
section[id]{ scroll-margin-top:120px; }
.section{ padding:clamp(3.5rem,7vw,5.5rem) 0; }
.section--tint{ background:var(--bg-tint); }

/* ---------- SEPARATOR SEKCJI ---------- */
.divider{
  display:flex; align-items:center; justify-content:center; gap:1.25rem;
  width:100%; max-width:560px; padding:0 24px;
  /* równy odstęp nad i pod */
  margin:clamp(1.75rem,3.5vw,2.75rem) auto;
}
/* sekcja z dividerem nie dokłada dolnego paddingu,
   a następna sekcja górnego — inaczej odstępy się sumują */
.mirror{ padding-bottom:0; }
.mirror + .section{ padding-top:0; }
.divider__line{
  flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--line), transparent);
}
.divider__mark{
  color:var(--accent-bright); font-size:.85rem; line-height:1;
  opacity:.8; text-shadow:0 0 12px rgba(196,48,62,.6);
}

/* ---------- LUSTRO SYTUACJI ---------- */
/* Akapit lustra ma się mieścić w 4 liniach. Przy 60ch (707px) wychodziło 5,
   a sam rodzic .narrow (820px) też nie wystarczał - stąd szerszy blok tylko
   w tej sekcji. text-wrap:balance wyrównuje długość linii, żeby ostatnia
   nie zostawała krótkim ogonem. */
.mirror .narrow{ max-width:920px; }
.mirror__text{
  font-size:1.15rem; color:var(--ink-soft);
  max-width:none; margin:0 auto 2rem;
  text-wrap:balance;
}
/* identyczna typografia jak `em` w nagłówku hero („o drugiej w nocy") */
.mirror__punch{
  font-family:var(--italic); font-style:italic; font-weight:500;
  font-size:clamp(1.4rem,3vw,2rem); letter-spacing:-.01em;
  color:var(--accent-bright); margin:0;
}

/* ---------- SIATKI ---------- */
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:2rem; box-shadow:var(--shadow);
}

/* ---------- OBSZARY (co robię - kafle nad cennikiem) ---------- */
.obszar{
  display:flex; flex-direction:column; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.7rem 1.6rem; box-shadow:var(--shadow);
  transition:transform .2s ease, border-color .2s ease;
}
.obszar:hover{ transform:translateY(-3px); border-color:var(--accent-bright); }
.obszar__nazwa{ font-size:1.1rem; margin:0 0 .5rem; }
.obszar__opis{
  color:var(--ink-soft); font-size:.92rem; line-height:1.6;
  margin:0 0 1.15rem; flex-grow:1;
}
.obszar__meta{
  margin:0; font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-bright);
}

/* ---------- FILTRY OFERT ---------- */
.filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin:0 0 2rem; }
.filter{
  background:transparent; color:var(--ink-soft); border:1px solid var(--line);
  padding:.55em 1.15em; border-radius:100px; font-size:.85rem; cursor:pointer;
  transition:.18s ease; font-family:var(--sans);
}
.filter:hover{ color:var(--ink); border-color:var(--accent-bright); }
.filter.is-active{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* ---------- KARTY OFERT (w karuzeli) ---------- */
.carousel--offers .carousel__track{ align-items:stretch; }
.offer{
  display:flex; flex-direction:column; position:relative;
  /* UWAGA: tu MUSI zostać height:auto. Karta jest bezpośrednim elementem
     flex toru, a `align-items:stretch` rozciąga tylko elementy o wysokości
     auto. Wpisanie height:100% wyłącza stretch i karty wracają do wysokości
     własnej treści (tak było wcześniej: 369px vs 384px).
     height:100% ma sens tylko wtedy, gdy karta siedzi WEWNĄTRZ slajdu. */
  min-height:var(--karta-h);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:2rem 1.75rem; box-shadow:var(--shadow);
}
/* --- PASMA: każdy element rezerwuje tyle samo miejsca w każdej karcie,
       dzięki czemu cena, separator i przycisk leżą w jednej linii poziomej --- */
.offer__name{
  margin:.4rem 0 .5rem; font-size:1.15rem;
  line-height:1.25; min-height:2.5em;          /* 2 linie */
}
.offer__desc{
  font-size:.92rem; color:var(--ink-soft); margin:0;
  line-height:1.55; min-height:7.75em;          /* 5 linii */
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
}
.offer__price{ font-family:var(--display); font-weight:600; font-size:2.2rem; color:var(--accent-bright); margin:1rem 0 .6rem; line-height:1; }
.offer__price span{ font-size:.95rem; color:var(--ink-soft); font-weight:400; }
.offer__list{ list-style:none; padding:0; margin:0 0 1.6rem; flex-grow:1; }
.offer__list li{ font-size:.88rem; padding:.4rem 0 .4rem 1.4rem; position:relative; color:var(--ink-soft); }
.offer__list li::before{ content:'✓'; position:absolute; left:0; color:var(--accent-bright); }
.offer[hidden]{ display:none; }

.carousel__counter{
  text-align:center; margin:1.25rem 0 0; font-size:.78rem;
  letter-spacing:.14em; color:var(--ink-soft); display:none;
}
.carousel__empty{ text-align:center; color:var(--ink-soft); font-size:.95rem; margin:1.5rem 0 0; }

/* ---------- CENNIK ---------- */
.badge{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  background:var(--accent); color:#fff; font-size:.68rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:.4em 1em; border-radius:100px; white-space:nowrap;
}
.badge--soft{ background:var(--accent-bright); }

.guarantee-inline{
  text-align:center; margin:2.25rem auto 0; max-width:640px;
  font-size:.95rem; color:var(--ink-soft);
}
.guarantee-inline strong{ color:var(--ink); }



/* ---------- KARUZELA OFERT ----------
   Karty mają szerokość wyliczoną z liczby kolumn, więc w kadrze
   mieści się ZAWSZE całkowita liczba kart. Nic nie jest ucięte. */
.oferta__prowadz{ text-align:center; color:var(--ink-soft); font-size:.9rem; margin:0 0 1rem; }

.oferta-karuzela{ position:relative; }
.oferta-karuzela::after{        /* subtelne wygaszenie na prawej krawędzi */
  /* Wygaszenie MUSI kończyć się dokładnie tam, gdzie tor tnie slajdy,
     czyli na jego ujemnym marginesie (-48px). Jeśli gradient urwie się
     wcześniej, między jego końcem a krawędzią kadru zostaje pasek karty
     w pełnej jasności ucięty ostrą pionową linią. */
  content:''; position:absolute; top:0; right:-48px; width:130px; height:100%;
  background:linear-gradient(90deg, transparent, var(--bg));
  pointer-events:none;
}

.oferta-karuzela__track{
  --kolumny:3;
  /* Sztywna wysokość karty - dobrana do najdłuższej pozycji w cenniku.
     Krótsze dobijają do niej, więc wszystkie karty są równe niezależnie
     od tego, czy stretch zadziała. Sterujesz stąd, jednym miejscem. */
  --karta-h:437px;
  display:flex; gap:1.5rem; align-items:stretch;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
  /* MIEJSCE NA POŚWIATĘ.
     overflow-x:auto sprawia, że druga oś też przestaje być visible i tnie
     cienie kart (mieszanie overflow-x:hidden z overflow-y:visible nie działa
     - przeglądarka i tak zaczyna clipować). Zamiast walczyć z overflow,
     robimy zapas WEWNĄTRZ przycinanego obszaru, a ujemny margines zdejmuje
     go z layoutu, więc karty stoją dokładnie tam, gdzie stały.
     UWAGA na wyliczenie zasięgu: CSS rozmywa cień gaussowsko z sigma=blur/2,
     więc poświatę widać do ok. 2*sigma, czyli praktycznie na całą wartość
     blur - a nie na blur/2. Wyróżniona karta ma 0 14px 55px, czyli sięga
     ~41px w górę, ~69px w dół i ~55px na boki. Stąd tak duże wartości.
     Ujemny margines zdejmuje tylko PRZYROST względem starego paddingu
     (8px góra / 16px dół / 0 boki), bo tamten był już wliczony w layout.
     Netto odstępy zostają identyczne: 8px / 0 / 16px. */
  padding:48px 48px 80px;
  margin:-40px -48px -64px;
}
.oferta-karuzela__track::-webkit-scrollbar{ display:none; }

.oferta-karuzela__track .offer{
  flex:0 0 calc((100% - (var(--kolumny) - 1) * 1.5rem) / var(--kolumny));
  scroll-snap-align:start;
}

.oferta-karuzela__stopka{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:.75rem;
  /* MUSI być nad karuzelą. Tor ma duży padding-bottom (miejsce na poświatę)
     ściągnięty ujemnym marginesem, więc jego pudełko sięga tutaj. A że
     .oferta-karuzela ma position:relative, malowała się NAD tym paskiem
     i połykała kliknięcia w strzałki. */
  position:relative; z-index:2;
}
.oferta-karuzela__licznik{
  margin:0; font-size:.78rem; letter-spacing:.12em; color:var(--ink-soft);
}
.oferta-karuzela__nawigacja{ display:flex; gap:.6rem; }
.karuzela-btn{
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  background:transparent; border:1px solid var(--line); color:var(--ink);
  font-size:1.4rem; line-height:1; display:grid; place-items:center;
  transition:.2s ease;
}
.karuzela-btn:hover:not([disabled]){
  background:var(--accent); border-color:var(--accent);
  box-shadow:0 0 20px rgba(196,48,62,.5);
}
.karuzela-btn[disabled]{ opacity:.25; cursor:default; }

/* linijka „co dostajesz i kiedy" */
.offer__meta{
  font-size:.78rem; color:var(--ink-soft); margin:0 0 1.5rem;
  padding-top:.75rem; border-top:1px solid var(--line);
  line-height:1.5; min-height:3em;              /* 2 linie */
  /* obcięcie do 2 linii - bez tego długi format (np. konsultacja 60 min)
     rozpychał kartę ponad pasmo */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* Grupa przycisków przyklejona do dołu karty (CTA + opcjonalny „Zajrzyj do
   pytań"). margin-top:auto na kontenerze, żeby oba przyciski leżały na dole
   niezależnie od długości opisu. */
.offer__akcje{ margin-top:auto; display:grid; gap:.55rem; }
/* przycisk pytań - lżejszy niż CTA, drobniejsza czcionka */
.offer__pytania{ font-size:.82rem; padding:.72em 1em; letter-spacing:.01em; }
.offer__price{
  margin-bottom:.35rem;
  /* Stałe pasmo na cenę. Bez tego wycena słowna zawijała się do dwóch linii
     i spychała meta oraz przycisk niżej niż w pozostałych kartach. */
  min-height:2.2rem; display:flex; align-items:flex-end;
}
/* Wycena słowna zamiast kwoty - mniejszy stopień, żeby zmieściła się w jednej
   linii i nie rozpychała pasma. */
.offer__price--tekst{ font-size:1.15rem; letter-spacing:0; }
.filter__ile{ display:inline-block; margin-left:.35em; font-size:.75em; opacity:.55; }

/* ---------- DOSTĘPNOŚĆ ---------- */
:where(a,button,summary,input,.filter):focus-visible{
  outline:2px solid var(--accent-bright); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
     transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ---------- KROKI ---------- */
.steps{
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:start; gap:1.5rem; margin-top:1rem;
}
.step{ text-align:center; padding:0 .5rem; }

/* numer kroku — minimalny znacznik w kółku */
.step__num{
  display:grid; place-items:center;
  width:46px; height:46px; margin:0 auto 1rem;
  border:1px solid rgba(196,48,62,.5); border-radius:50%;
  background:rgba(196,48,62,.08);
  font-family:var(--sans); font-size:.82rem; font-weight:600;
  letter-spacing:.08em; color:var(--accent-bright);
}
.step h3{ font-size:1.08rem; margin-bottom:.5rem; }
.step p{ color:var(--ink-soft); margin:0; font-size:.93rem; max-width:30ch; margin-inline:auto; }

/* strzałka łącząca */
.step__arrow{
  align-self:center; margin-top:1.6rem;
  color:var(--accent-bright); opacity:.55;
  display:block; width:60px;
}
.step__arrow svg{ width:100%; height:12px; display:block; }

/* ---------- O MNIE ---------- */
.about{ display:grid; grid-template-columns:.75fr 1.25fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.about__text p{ color:var(--ink-soft); }
.about__text .btn{ margin-top:1.25rem; }

/* ---------- OPINIE — GALERIA (premium) ---------- */
#opinie{ position:relative; overflow:hidden; }
#opinie::before{                 /* światło punktowe jak na ścianie galerii */
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(58% 50% at 50% 32%, rgba(142,15,30,.20), transparent 72%);
}
#opinie > .wrap{ position:relative; z-index:1; }

.carousel{ position:relative; }
/* Kadr z kartami - punkt odniesienia dla strzałek. Bez niego strzałki
   centrowałyby się względem karuzeli RAZEM z licznikiem i zjeżdżały w dół. */
.carousel__viewport{ position:relative; }
.carousel__track{
  display:flex; gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:1rem .5rem 1.5rem;
  scrollbar-width:none; -ms-overflow-style:none;
  /* miękkie wygaszenie na krawędziach - kuratorowana galeria zamiast urwanej taśmy */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.carousel__track::-webkit-scrollbar{ display:none; }

/* każdy slajd w luminescencyjnej ramce: 1px karmazyn → szkło → nic */
.slide{
  flex:0 0 clamp(230px,26%,300px); scroll-snap-align:center; margin:0;
  padding:1px; border-radius:18px;
  background:linear-gradient(155deg, rgba(196,48,62,.60), rgba(255,255,255,.12) 38%, rgba(255,255,255,.02) 72%);
}
.slide img,
.slide__ph{
  width:100%; aspect-ratio:3/4; border-radius:17px;
  background:var(--surface); display:block;
  box-shadow:0 22px 55px rgba(0,0,0,.6);
}
.slide img{ object-fit:cover; }
.slide__ph{
  border:1px dashed var(--line); display:grid; place-items:center; text-align:center;
  color:var(--ink-soft); font-size:.88rem; padding:1rem;
}
.slide__ph small{ display:block; opacity:.55; font-size:.75rem; margin-top:.35rem; }

/* strzałki */
.carousel__btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:48px; height:48px; border-radius:50%; cursor:pointer;
  background:rgba(10,7,8,.72); border:1px solid rgba(255,255,255,.14); color:var(--ink);
  font-size:1.5rem; line-height:1; display:grid; place-items:center;
  transition:.2s ease; backdrop-filter:blur(8px);
  box-shadow:0 8px 30px rgba(0,0,0,.5);
}
.carousel__btn:hover{ background:var(--accent); border-color:var(--accent); box-shadow:0 0 26px rgba(196,48,62,.55); }
.carousel__btn[disabled]{ opacity:0; pointer-events:none; }
.carousel__btn--prev{ left:-18px; }
.carousel__btn--next{ right:-18px; }

/* kropki + licznik */
.carousel__dots{ display:flex; justify-content:center; gap:.5rem; margin-top:1.5rem; }
.carousel__dots button{
  width:7px; height:7px; padding:0; border-radius:50%; cursor:pointer;
  background:var(--line); border:0; transition:.2s ease;
}
.carousel__dots button.is-active{ background:var(--accent-bright); width:22px; border-radius:100px; }
#opinie .carousel__counter{
  text-align:center; color:var(--ink-soft); font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; margin:.35rem 0 0;
}

/* ---------- LEAD MAGNET ---------- */
.leadmagnet{ background:var(--accent); color:#fff; padding:clamp(3.5rem,7vw,5rem) 0; }
.leadmagnet .h2{ color:#fff; }
.leadmagnet .eyebrow{
  color:rgba(255,255,255,.9); border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.1);
}
.leadmagnet .section-lead{ color:rgba(255,255,255,.9); }
.signup{ display:flex; gap:.7rem; max-width:520px; margin:0 auto 1rem; flex-wrap:wrap; }
.signup input{
  flex:1 1 260px; padding:1em 1.35em; border-radius:100px; border:0;
  font-family:var(--sans); font-size:.95rem; background:#fff; color:#1A1215;
}
.signup input::placeholder{ color:#8A7B7E; }
.signup .btn{ background:#0A0708; color:#fff; border-color:#0A0708; }
.signup .btn:hover{ background:#000; border-color:#000; transform:translateY(-2px); }
.formnote{ font-size:.8rem; color:rgba(255,255,255,.75); margin:0; }

/* ---------- FAQ ---------- */
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; padding:1.2rem 2.5rem 1.2rem 0; font-weight:500; font-size:1.03rem;
  list-style:none; position:relative; color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; position:absolute; right:0; top:1.05rem; color:var(--accent-bright); font-size:1.4rem; line-height:1; }
.faq details[open] summary::after{ content:'−'; }
.faq p{ margin:0 0 1.3rem; color:var(--ink-soft); font-size:.97rem; }

/* ---------- FINALNE CTA ---------- */
.finalcta{ background:var(--accent-deep); color:#fff; padding:clamp(2.25rem,4.5vw,3.25rem) 0; text-align:center; }
/* nagłówek w jednej linii (na telefonie wraca zawijanie) */
.finalcta h2{
  font-size:clamp(1.1rem,3vw,2.1rem); margin-bottom:.35em; color:#fff;
  white-space:nowrap;
}
.finalcta p{ color:rgba(255,255,255,.85); margin:0 auto 1.4rem; font-size:.98rem; max-width:60ch; }

/* ---------- JEDNOLITY STYL NAGŁÓWKÓW ---------- */
/* nagłówek „O mnie" zostaje wyrównany do lewej jak reszta kolumny bio */
.about .h2--line{ margin-inline:0; }
/* na czerwonych tłach kreska i kursywa robią się białe, żeby były czytelne */
.leadmagnet .h2--line::after,
.finalcta .h2--line::after{ background:#fff; box-shadow:0 0 14px rgba(255,255,255,.45); }
.leadmagnet em,
.finalcta em{ color:#fff; }
.finalcta .eyebrow{
  color:rgba(255,255,255,.9); border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.1);
}

/* ---------- STOPKA ---------- */
.footer{
  background:var(--footer-bg); color:rgba(255,255,255,.7);
  padding:2.25rem 0 1.1rem;
  font-size:.85rem; border-top:1px solid var(--line);
  position:relative; overflow:hidden;
}
.footer__inner{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:2rem; padding-bottom:1.5rem; }
.footer .logo{ color:#fff; margin:0 0 .45rem; display:block; font-size:.98rem; }
.footer__desc{ margin:0 0 .7rem; line-height:1.5; }
.footer__h{ color:#fff; font-weight:600; margin:0 0 .45rem; font-size:.85rem; }
.footer a{ display:block; text-decoration:none; padding:.14rem 0; color:rgba(255,255,255,.7); transition:color .2s; }
.footer a:hover{ color:var(--accent-bright); }
.footer__social{ display:flex; gap:1.25rem; }
.footer__social a{ display:inline; text-decoration:underline; text-underline-offset:3px; }
.disclaimer{
  border-top:1px solid rgba(255,255,255,.12); padding-top:1rem;
  font-size:.72rem; line-height:1.55; color:rgba(255,255,255,.42);
  display:flex; justify-content:space-between; align-items:flex-start; gap:2rem;
}
.disclaimer p{ margin:0; }
.copy{ opacity:.7; white-space:nowrap; }

.footer__inner, .disclaimer{ position:relative; z-index:1; }


/* ---------- PODSTRONY PRAWNE (regulamin, polityka prywatności) ---------- */
.legal{ padding:clamp(2.5rem,5vw,4rem) 0 clamp(3rem,6vw,4.5rem); }
.legal__powrot{
  /* block + fit-content, a nie inline-block: obok stoi etykieta .eyebrow,
     która też jest inline-block i wskakiwała do tej samej linii zamiast
     usiąść nad nagłówkiem. width:fit-content trzyma obszar klikalny przy
     samym tekście. */
  display:block; width:fit-content;
  font-size:.85rem; color:var(--ink-soft);
  text-decoration:none; margin-bottom:2rem; transition:color .2s;
}
.legal__powrot:hover{ color:var(--accent-bright); }
.legal__tytul{ font-size:clamp(2rem,4.5vw,3rem); margin:0 0 .35em; letter-spacing:-.03em; }
.legal__data{ font-size:.8rem; color:var(--ink-soft); margin:0 0 2.5rem; }

.legal__uwaga{
  background:rgba(196,48,62,.08); border:1px solid rgba(196,48,62,.35);
  border-radius:var(--radius); padding:1.5rem 1.75rem; margin-bottom:3rem;
  font-size:.98rem; color:var(--ink-soft); line-height:1.7;
}
.legal__uwaga strong{ color:var(--ink); }

/* numeracja własna, żeby liczba miała kolor akcentu */
.legal__lista{ list-style:none; counter-reset:pkt; padding:0; margin:0; }
.legal__lista > li{ counter-increment:pkt; padding-bottom:2.25rem; margin-bottom:2.25rem; border-bottom:1px solid var(--line); }
.legal__lista > li:last-child{ border-bottom:0; }
.legal__lista > li h2{
  font-size:1.15rem; margin:0 0 .75rem; display:flex; gap:.7rem; align-items:baseline;
}
.legal__lista > li h2::before{
  content:counter(pkt) "."; color:var(--accent-bright); font-size:.95rem;
  font-weight:700; flex:0 0 auto;
}
.legal__lista p{ color:var(--ink-soft); margin:0 0 .9rem; line-height:1.75; }
.legal__lista p:last-child{ margin-bottom:0; }
.legal__lista ul{ margin:0 0 .9rem; padding-left:1.2rem; color:var(--ink-soft); }
.legal__lista ul li{ margin-bottom:.5rem; line-height:1.7; }
.legal__lista strong{ color:var(--ink); }
.legal__lista a{ color:var(--accent-bright); }

.legal__stopka{
  color:var(--ink-soft); font-size:.9rem; line-height:1.7;
  padding-top:2rem; border-top:1px solid var(--line); margin:0 0 2.5rem;
}
.legal__stopka a{ color:var(--accent-bright); }

@media (max-width:640px){
  .legal__uwaga{ padding:1.25rem; }
  .legal__lista > li h2{ font-size:1.05rem; }
}

/* ---------- STICKY CTA ---------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:rgba(10,7,8,.93); backdrop-filter:blur(18px);
  border-top:1px solid rgba(196,48,62,.3);
  box-shadow:0 -10px 44px rgba(0,0,0,.7), 0 -2px 34px rgba(196,48,62,.22);
  /* stan spoczynku: schowany pod krawędzią ekranu */
  transform:translateY(105%); opacity:0; pointer-events:none;
  transition:transform .6s cubic-bezier(.16,1,.3,1), opacity .4s ease;
}
.sticky-cta.show{ transform:translateY(0); opacity:1; pointer-events:auto; }

/* świecąca krawędź u góry paska */
.sticky-cta::before{
  content:''; position:absolute; top:-1px; left:50%; transform:translateX(-50%);
  width:min(620px,85%); height:1px;
  background:linear-gradient(90deg, transparent, var(--accent-bright), transparent);
  box-shadow:0 0 16px rgba(196,48,62,.95);
}

.sticky-cta__inner{
  display:flex; align-items:center; justify-content:space-between; gap:1.75rem;
  padding-top:.9rem; padding-bottom:.9rem;
}
.sticky-cta__text{
  margin:0; font-size:.88rem; color:var(--ink-soft);
}
/* pulsująca poświata przycisku */
.sticky-cta__btn{ flex:0 0 auto; animation:ctaGlow 3s ease-in-out infinite; }
@keyframes ctaGlow{
  0%,100%{ box-shadow:0 0 16px rgba(196,48,62,.4); }
  50%    { box-shadow:0 0 30px rgba(196,48,62,.85), 0 0 62px rgba(196,48,62,.35); }
}
.sticky-cta__btn:hover{ animation:none; }

/* ---------- POP-UP Z PYTANIAMI ---------- */
body.modal-open{ overflow:hidden; }
.pm{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center; padding:1.5rem;
}
.pm[hidden]{ display:none; }
.pm__tlo{
  position:absolute; inset:0; background:rgba(5,3,4,.8);
  backdrop-filter:blur(6px); cursor:pointer;
}
.pm__box{
  position:relative; z-index:1; width:100%; max-width:560px;
  max-height:85vh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:2.5rem 2rem 2rem; box-shadow:0 30px 90px rgba(0,0,0,.65);
}
.pm__x{
  position:absolute; top:1rem; right:1rem; z-index:2;
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  background:transparent; border:1px solid var(--line); color:var(--ink-soft);
  font-size:1rem; line-height:1; display:grid; place-items:center; transition:.2s ease;
}
.pm__x:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.pm__naglowek{
  font-family:var(--display); font-size:1.5rem; line-height:1.2;
  margin:.35rem 0 1.4rem; color:var(--ink); letter-spacing:-.02em;
}
/* podnagłówek grupy (np. „Na każdy miesiąc") */
.pm__grupa{
  margin:1.6rem 0 .6rem; font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent-bright);
}
.pm__grupa:first-child{ margin-top:0; }
/* numerowana lista pytań z karmazynowym numerkiem */
.pm__lista{ list-style:none; counter-reset:pyt; margin:0; padding:0; }
.pm__lista li{
  counter-increment:pyt; position:relative;
  padding:.7rem 0 .7rem 2.4rem; border-top:1px solid var(--line);
  color:var(--ink-soft); font-size:.97rem; line-height:1.5;
}
.pm__lista li:first-child{ border-top:0; }
.pm__lista li::before{
  content:counter(pyt); position:absolute; left:0; top:.7rem;
  min-width:1.6rem; color:var(--accent-bright); font-weight:700;
  font-family:var(--display); font-size:1rem;
}
/* „co podać" - lista z gwiazdką zamiast numerów */
.pm__punkty{ list-style:none; margin:.4rem 0 0; padding:0; }
.pm__punkty li{
  position:relative; padding:.6rem 0 .6rem 1.7rem;
  border-top:1px solid var(--line); color:var(--ink-soft);
  font-size:.97rem; line-height:1.5;
}
.pm__punkty li:first-child{ border-top:0; }
.pm__punkty li::before{
  content:'✦'; position:absolute; left:0; top:.62rem;
  color:var(--accent-bright); font-size:.7rem;
}
.pm__ok{ margin-top:1.75rem; }

/* =========================================================
   RESPONSYWNOŚĆ
   ========================================================= */
@media (max-width:960px){
  .hero__inner{ grid-template-columns:1fr; }
  /* Poświata pod desktop siedzi po lewej (left:-10% width:70%), więc na jednej
     kolumnie zostawiała PIONOWY SZEW: lewa połowa z glow, prawa czarna.
     Na mobile/tablecie robimy ją pełnej szerokości i wyśrodkowaną. */
  .hero::before{
    top:0; left:0; width:100%; height:100%;
    background:radial-gradient(ellipse 92% 55% at 50% 30%, rgba(142,15,30,.22), transparent 72%);
  }
  /* Kolejność jak w HTML: najpierw tekst, potem zdjęcie. Wcześniej stało tu
     order:-1, które wypychało portret nad nagłówek - na telefonie użytkownik
     widział wtedy samo zdjęcie i musiał scrollować do treści. */
  .hero__img{ max-width:300px; margin-inline:auto; }
  .about{ grid-template-columns:1fr; }
  /* w 1-kolumnowym gridzie item domyślnie idzie do lewej (justify-self:start),
     a max-width:300px nie pozwala mu się rozciągnąć - stąd portret lgnął do
     lewej krawędzi. margin-inline:auto centruje go, tak samo jak .hero__img. */
  .about__img{ max-width:300px; margin-inline:auto; }
  .grid3{ grid-template-columns:1fr 1fr; }
  .oferta-karuzela__track{ --kolumny:2; }
  .steps{ grid-template-columns:1fr; gap:.5rem; }
  /* Łącznik między krokami (pionowa strzałka w dół).
     WCZEŚNIEJ: transform:rotate(90deg) na boxie 12x12px. Transform nie zmienia
     boxa layoutu, więc obrócona strzałka 60px przepełniała box o ±24px i wjeżdżała
     w kółka 02/03 - marginesu nie dało się użyć, bo strzałka wystawała poza box.
     TERAZ: kontener ma REALNĄ wysokość, a obracamy samą svg w jego środku (bez
     przepełnienia). Dolny margines daje prześwit nad kółkiem następnego kroku. */
  .step__arrow{
    /* Szerokość kontenera MUSI równać się szerokości svg. Gdy svg (26px) była
       szersza niż kontener (12px), place-items:center przy przepełnieniu dosuwało
       ją do startu, a nie centrowało - po obrocie oś linii lądowała +7px w prawo
       od środka kółek. Przy równych szerokościach oś obrotu = środek kolumny. */
    width:26px; height:26px; margin:.15rem auto .55rem;
    display:grid; place-items:center; transform:none;
  }
  .step__arrow svg{ width:26px; height:12px; transform:rotate(90deg); }
  /* kółko z numerem czyste - z zapasem nad ewentualnym końcem linii */
  .step__num{ position:relative; z-index:1; }
  .footer__inner{ grid-template-columns:1fr 1fr; }
}

@media (max-width:720px){
  body{ font-size:16px; }
  /* przyciski hero: na telefonie jeden pod drugim, równa (pełna) szerokość,
     wyraźny odstęp - domyślnie były gołymi inline .btn, ściśniętymi przy zawijaniu */
  .hero__cta{ display:flex; flex-direction:column; gap:.85rem; }
  .hero__cta .btn{ width:100%; }
  .nav__links{ display:none; }
  .nav__burger{ display:block; }
  .nav .btn--sm{ display:none; }
  .grid3{ grid-template-columns:1fr; }
  .oferta-karuzela__track{ --kolumny:1; }
  /* jedna kolumna - nie ma czego wyrównywać, więc bez sztywnych pasm */
  .offer__name,.offer__desc,.offer__meta{ min-height:0; }
  .offer__desc{ -webkit-line-clamp:none; display:block; overflow:visible; }
  .offer__meta{ -webkit-line-clamp:none; display:block; overflow:visible; }
  /* jedna kolumna - sztywna wysokość robiłaby tylko puste miejsce */
  .oferta-karuzela__track{ --karta-h:auto; }
  /* Boczny zapas na poświatę zjeżdża do 20px. Ujemny margines -24px kasuje
     padding .wrap (24px), więc tor jest pełnej szerokości ekranu, a karta
     dostaje po 20px oddechu z każdej strony.
     scroll-padding-inline MUSI równać się temu paddingowi: bez tego
     scroll-snap-align:start dosuwa lewą krawędź karty do padding-boxa toru
     (x=0), ignorując padding - snap wymusza scrollLeft≈19, karta lgnie do
     lewej (5px), a luz ucieka na prawo (43px). Z scroll-padding:20px punktem
     snapu jest scrollLeft=0 i karta stoi symetrycznie: 20px / 20px. */
  .oferta-karuzela__track{ padding-left:20px; padding-right:20px;
                           margin-left:-24px; margin-right:-24px;
                           scroll-padding-left:20px; scroll-padding-right:20px; }
  .oferta-karuzela::after{ display:none; }
  .proofbar__inner{ gap:.55rem 1.4rem; }
  .proofbar span{ font-size:.66rem; letter-spacing:.12em; }
  .proofbar span+span::before{ display:none; }
  .price--featured{ transform:none; }
  /* KRESKA POD NAGŁÓWKAMI SEKCJI.
     Na desktopie fit-content + text-wrap:balance są ok, ale na mobile balance
     zawijał nawet nagłówki mieszczące się w jednej linii, a fit-content przy
     zawinięciu kolapsuje do pełnej szerokości kontenera - przez co kreska
     (::after width:100%) była dużo szersza niż sam tekst i wychodziła poza
     wyśrodkowane linie. Zmniejszamy nagłówki, żeby wchodziły w JEDNĄ linię,
     i wracamy do normalnego zawijania: wtedy fit-content = szerokość tekstu,
     a kreska trzyma się tekstu i jest wyśrodkowana (margin-inline:auto z .h2--line). */
  .h2{ font-size:1.5rem; }
  /* UWAGA: prawidłowa wartość to `wrap`, nie `normal` (to drugie jest ignorowane,
     więc balance z bazowej reguły dalej by zawijał). `wrap` = zwykłe zawijanie,
     bez balansu, więc jednoliniowe nagłówki zostają w jednej linii. */
  .h2--line{ text-wrap:wrap; }
  /* Finalne CTA jest za długie na jedną linię - zostają 2 linie. Greedy `wrap`
     (bez balansu) upycha pierwszą linię do pełnej szerokości bloku, więc kreska
     (::after 100% szerokości bloku) pokrywa się z najdłuższą linią tekstu.
     max-width ogranicza blok, żeby nagłówek zwinął się do dwóch linii. */
  .finalcta h2{ white-space:normal; font-size:1.4rem; max-width:17rem;
                text-wrap:wrap; }
  .footer__inner{ grid-template-columns:1fr; gap:1.5rem; }
  .disclaimer{ flex-direction:column; gap:.6rem; }
  /* na telefonie zostaje sam przycisk na pełną szerokość */
  .sticky-cta__text{ display:none; }
  .sticky-cta__btn{ width:100%; }
  .sticky-cta__inner{ padding-top:.75rem; padding-bottom:.75rem; }
  body{ padding-bottom:80px; }
}