/* ==========================================================================
   Beauty Clinic Dominika Tyl, tokeny globalne
   Zrodlo: projekt Karola, FULL-PAGE-desktop-1440px.png i FULL-PAGE-mobile-390px.png
   Zmierzone 24.08.2026. Kanon opisowy: design-system.md
   Zasada: zaden plik motywu nie zapisuje wartosci na sztywno, wszystko przez var()
   ========================================================================== */

:root {

  /* --- KROJE ------------------------------------------------------------
     Karol nie podal nazw, w PDF tekst jest rasteryzowany. Ponizsze to
     najblizsze darmowe dopasowanie zmierzone z rendera. Warunek twardy:
     komplet polskich znakow, czyli subset latin-ext. Prata go NIE MA,
     dlatego odpadla 24.08 mimo dobrego ksztaltu.
     Podmiana krojow = zmiana dwoch linii ponizej, nic wiecej. */
  --font-display: "Bellefair", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-text: "Nunito Sans", "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- KOLORY, powierzchnie --------------------------------------------- */
  --surface-dark:       #231D16;  /* hero, baner CTA, stopka, panel FAQ */
  --surface-cream:      #F4EFE9;  /* domyslne tlo jasnych sekcji */
  --surface-cream-hi:   #F8F4F0;  /* sekcja kontakt, najjasniejsza */
  --surface-sand:       #EDE6DF;  /* panel formularza */
  --surface-sand-deep:  #E2D7CD;  /* pas FAQ, najciemniejszy z jasnych */
  --surface-rose:      #CA9C8A;   /* rozowa plama za kadrem "Twarz" w sekcji oferta, zmierzona z kadru Karola (materialy/kadry/oferta.png), D60 */

  /* --- KOLORY, tekst ----------------------------------------------------- */
  --text-on-dark:        #F1EAE3;
  --text-on-dark-muted:  rgba(241, 234, 227, 0.72);
  --text-on-light:       #231D16;
  --text-on-light-muted: rgba(35, 29, 22, 0.70);

  /* --- KOLORY, akcent ---------------------------------------------------- */
  --accent:        #A97B50;  /* zloto na ciemnym tle: nadtytuly, ramki, linie */
  --accent-hover:  #C08F5E;  /* rozjasnione, stan hover na ciemnym */
  --accent-deep:   #60371C;  /* na jasnym tle: nadtytuly, numery, ikony */
  --accent-deep-hover: #7C4A26;

  /* --- KOLORY, stany przyciskow -----------------------------------------
     Do 26.08.2026 te cztery wartosci stały na sztywno w czterech plikach
     naraz (tokens.css, header.css dwa razy, styleguide.html). Teraz zyja
     tutaj i tylko tutaj. Tekst na wypelnieniu akcentem: na ciemnym tle
     akcent #A97B50 pod ciemnym pismem daje 4,6:1, na jasnym #60371C pod
     kremowym daje 8,1:1, oba powyzej progu 3:1 dla elementu interfejsu. */
  --fill-cream-max:  #FFFFFF;  /* najjasniejsze wypelnienie na ciemnym */
  --fill-cream-press: #E1D8CE;  /* wcisniete wypelnienie na ciemnym */
  --fill-dark-soft:  #3A3025;  /* rozjasnione wypelnienie na jasnym */
  --fill-dark-press: #17120C;  /* wcisniete wypelnienie na jasnym */
  --error:           #8C2F1E;  /* ramka pola z bledem, jedyny kolor bledu w projekcie */

  /* --- LINIE I RAMKI ----------------------------------------------------- */
  --line-on-dark:   rgba(169, 123, 80, 0.55);
  --line-on-dark-soft: rgba(241, 234, 227, 0.16);
  --line-on-light:  rgba(96, 55, 28, 0.32);
  --line-on-light-soft: rgba(35, 29, 22, 0.14);
  --border-width: 1px;

  /* --- PROMIEN, CIEN -----------------------------------------------------
     Skala wprowadzona D29 (28.08.2026), zastepuje --radius: 0. Powod: naglowek
     projektu 3 "Klinika" jest kapsula na szkle, jedyny miekki element na stronie
     ostrych rogow, wiec ostre rogi przestaly byc kanonem calej strony. */
  --radius-sm: 10px;        /* przyciski, pola formularza */
  --radius-md: 20px;        /* panele: FAQ, formularz, ramka mapy */
  --radius-lg: 28px;        /* kapsula naglowka, karta menu mobilnego */
  --shadow-kapsula: 0 8px 24px rgba(35, 29, 22, 0.14);   /* kapsula po przewinieciu, D30 */

  /* --- SZKLO NAGLOWKA, D29/D30 --------------------------------------------
     Kapsula jest zawsze jasna, niezaleznie od tla sekcji pod spodem. */
  --szklo: rgba(248, 244, 240, 0.86);
  --szklo-ramka: rgba(96, 55, 28, 0.16);

  /* --- WYSOKOSC KAPSULY NAGLOWKA, D42 (01.09.2026), D111 (03.09.2026) -----
     Byly to liczby zaszyte wprost w css/header.css (76px/62px). Teraz tokeny,
     zeby --header-rest-h nizej mogl je policzyc w czystym CSS zamiast pomiaru
     w JS. header.css uzywa tych samych zmiennych na min-height kapsuly.
     D111: pierwsza proba podniosla wszystkie trzy stany o 50%. Jakub po
     zobaczeniu na zywo: desktop (spoczynek i scroll) zostaje +50%, MOBILE
     wraca do stanu sprzed zmiany. Zeby to rozdzielic, --kapsula-h-mobile
     musi teraz dzialac NIEZALEZNIE od --kapsula-h-scrolled takze po
     przewinieciu, patrz naglowek.css, dopisana regula w zapytaniu mobilnym
     (bez niej wyzsza specificznosc .is-scrolled .kapsula wygrywalaby nad
     regula mobilna i mobile "pozyczaloby" nowa, wieksza wartosc scrolla). */
  --kapsula-h: 114px;           /* stan spoczynku, desktop (min-height kapsuly), bylo 76px */
  --kapsula-h-scrolled: 93px;   /* po progu scrolla (.is-scrolled), desktop, bylo 62px */
  --kapsula-h-mobile: 62px;     /* stan spoczynku, telefon i tablet, bez kompresji scrolla, bez zmian */

  /* --- KSZTALT KADRU ZDJECIA ---------------------------------------------
     Jedna rodzina na calej stronie i na podstronach: luk, czyli wycinek
     kola albo owal. Hero to kolo przyciete krawedzia okna, sekcje wewnetrzne
     dostaja owal. Zaden kadr nie uzywa maski ani clip-path. */
  --kadr-owal: 50%;
  --kadr-lisc: 100% 0 100% 0 / 60% 0 60% 0;   /* wariant zapasowy, lagodny lisc */
  --shadow-none: none;

  /* --- SIATKA ------------------------------------------------------------ */
  /* D62, 01.09.2026: szerokosc tresci przeszla ze stalych 1200px na procent.
     Prosba Jakuba: latwiej tym zarzadzac i latwiej robic responsywnosc, a
     naglowek, sekcje i stopka maja trzymac JEDNA linie. --container zostaje
     tylko jako historyczna wartosc odniesienia dla starych wyliczen, ktore
     dopiero migruja. Wlasciwa szerokosc to --container-w, a --container-margin
     to margines po bokach, ktorego uzywaja elementy wychodzace na krawedz.
     min() pilnuje telefonu: przy 390px samo 95% dawaloby 10px marginesu,
     wiec ponizej progu wygrywa margines z tokenu gutter-mobile. */
  --container: 1200px;
  /* D110, 03.09.2026: sufit w pikselach dopisany na zadanie Jakuba
     (referencja venusbeautysalon.pl, Tailwind max-w-6xl, 1152px STALE na
     kazdej szerokosci okna). Do tej daty 90%/95% rosly bez ograniczenia:
     na 2560px kapsula naglowka miala 2432px, kolumna tresci w hero
     rozjezdzala sie na cala szerokosc ekranu, dokladnie problem, o ktorym
     mowil Jakub. Sufit to WARTOSC Z 1440px, czyli referencji, do ktorej
     mierzone jest cale copy i cala geometria przez caly projekt (kazda
     decyzja w decyzje.md podaje "zmierzone na 1440"), wiec ponizej i na
     1440px NIC sie nie zmienia, zero ryzyka regresji na zamknietych juz
     sekcjach. Powyzej 1440px kontener przestaje rosnac, strona dostaje
     wiecej marginesu tla zamiast rozciagac tresc, tak jak na Venus. */
  --container-w: min(1296px, 90%, calc(100% - 2 * var(--gutter-mobile)));
  /* D62b: naglowek i stopka wezsze niz sekcje, ustalenie Jakuba 01.09.2026.
     Sekcje 90%, rama strony 95%, wiec kapsula naglowka i stopka siegaja
     szerzej niz tresc sekcji i obejmuja ja wizualnie. */
  --rama-w: min(1368px, 95%, calc(100% - 2 * var(--gutter-mobile)));
  /* D110: max() z DWOMA formulami, ta sama sztuczka co ponizej w
     --container-margin. Ponizej 1440px "2.5vw" wygrywa i zachowuje sie jak
     dawniej (kontener jeszcze nie w suficie). Powyzej 1440px kontener jest
     juz przyciety do 1368px, wiec realny margines do krawedzi okna to
     (okno - 1368) / 2, co w vw wychodzi jako "50vw - 684px" i to ono
     przejmuje max() od tego punktu. Sprawdzone w punkcie zbioru (1440px):
     obie formuly daja 36px, zero skoku. */
  --rama-margin: max(2.5vw, calc(50vw - 684px), var(--gutter-mobile));
  /* Margines liczony od OKNA, nie od rodzica. Procent rozwiazuje sie wzgledem
     pudelka, w ktorym stoi, wiec ta sama zmienna dawala 36px w sekcji pelnej
     szerokosci i 24px w kolumnie hero na /oferta (zmierzone). Elementy, ktore
     maja dochodzic do krawedzi okna albo trzymac linie naglowka, potrzebuja
     wartosci niezaleznej od miejsca uzycia.
     D110: ta sama sztuczka co --rama-margin, wyliczona z sufitu 1296px:
     powyzej 1440px realny margines to (okno - 1296) / 2 = "50vw - 648px". */
  --container-margin: max(5vw, calc(50vw - 648px), var(--gutter-mobile));
  /* Ksztalt liscia, jedno zrodlo dla calej strony (D67, 02.09.2026).
     Do 02.09 lisc byl plikiem PNG podpinanym przez mask-image. Plik pochodzil
     z progowania pikseli rendera Karola, wiec mial poszarpany kontur i wyrwe
     przy lewej krawedzi, widoczne przy kazdym powiekszeniu. Ten sam ksztalt
     opisany dwoma promieniami zaokraglenia trafia w kontur Karola z IoU 0,93
     (zmierzone na maska-lisc-poziom.png), jest idealnie gladki na kazdej
     szerokosci i nie wymaga zadnego pliku. Wartosc 77 procent wyliczona z
     pokrycia maski zrodlowej: 74,4 procent powierzchni pudelka.
     Zaokraglenie w procentach liczy sie osobno dla kazdej osi, wiec lisc
     rozciaga sie razem z pudelkiem, dokladnie tak jak wczesniej maska
     (mask-size: 100% 100%). Pudelko musi miec overflow: hidden. */
  --lisc-promien: 77%;
  --lisc: var(--lisc-promien) 0 var(--lisc-promien) 0;   /* czubki: gora-prawo, dol-lewo */
  --lisc-odbity: 0 var(--lisc-promien) 0 var(--lisc-promien);

  --gutter: 24px;
  --gutter-mobile: 20px;

  /* --- SKALA ODSTEPOW, krok 4 px ---------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 120px;
  --space-13: 160px;
  --space-section: clamp(72px, 8.3vw, 120px);   /* pion sekcji */

  /* --- WYSOKOSC NAGLOWKA W SPOCZYNKU, D42 (01.09.2026) --------------------
     Zastepuje pomiar w JS (D39, --header-rest-h mierzony na zywo skryptem).
     Powod zmiany: JS liczyl to PO pierwszym malowaniu strony, wiec bylo
     widac krem strony nad ciemnym hero przez ulamek sekundy (FOUC), a przy
     kazdym scrollu przeliczal na nowo razem z .is-scrolled, wiec hero
     (i tresc w srodku) fizycznie skakalo w pionie w momencie progu scrolla.
     Czysty CSS liczy raz, z tokenow, zero JS, zero FOUC, zero skoku, bo
     wartosc jest STALA (stan spoczynku), nie zalezna od .is-scrolled.
     Desktop: padding-block-start naglowka (--space-6) plus kapsula (--kapsula-h).
     Mobile (przedefiniowane w media query nizej): padding-block-start
     mniejszy (--space-3) plus nizsza kapsula (--kapsula-h-mobile). Do
     02.09.2026 doliczala sie tu jeszcze druga sciezka CTA pod kapsula, ale
     ten pasek zostal usuniety (D73), wiec skladniki sa te same co na
     desktopie, tylko mniejsze. Uzywane przez css/sections.css (.hero.on-dark)
     i css/oferta-hero.css (.oferta-hero.on-dark). */
  --header-rest-h: calc(var(--space-6) + var(--kapsula-h));

  /* --- TYPOGRAFIA, skala wyswietlania (Prata) ---------------------------- */
  /* clamp: wartosc mobilna, plyn, wartosc desktopowa @1440 */
  /* D160, 03.09.2026: 8.02vw/116px -> 6.04vw/87px. Przy 116px H1 hero lamal
     sie na CZTERY wiersze zamiast dwoch z copy: nie miescil sie ani "Salon
     kosmetyczny" (792px przy kolumnie 640), ani "w Ostrowi Mazowieckiej"
     (1051px). Wartosc dobrana razem z szersza kolumna tekstu hero
     (--hero-tresc-w w sections.css), nie osobno: sam mniejszy font musialby
     zejsc do 70px, czyli PONIZEJ H2 sekcji (84px), i odwrocilby hierarchie
     naglowkow. 87px zostaje nad H2 i przy kolumnie 796px mieszcza sie oba
     wiersze. Wybor Jakuba z trzech przedstawionych wariantow. */
  --fs-display-1: clamp(56px, 6.04vw, 87px);   /* H1 hero */
  --fs-display-2: clamp(42px, 5.87vw, 84px);   /* glowny naglowek sekcji */
  --fs-display-3: clamp(36px, 4.63vw, 67px);   /* naglowek sekcji, wariant nizszy */
  --fs-display-4: clamp(31px, 3.40vw, 49px);   /* naglowek pomocniczy */
  --fs-display-num: clamp(62px, 7.10vw, 102px); /* wielkie numery 01 02 03 */
  --fs-display-caps: clamp(29px, 3.09vw, 44px);/* kapitaliki na kartach */

  /* --- TYPOGRAFIA, skala tekstowa (Nunito Sans) -------------------------- */
  --fs-lead:    clamp(16px, 1.76vw, 25px);  /* akapit prowadzacy w hero */
  --fs-card:    clamp(19px, 1.67vw, 24px);  /* tytul karty, sans */
  --fs-body-lg: clamp(17px, 1.46vw, 21px);  /* pytanie FAQ */
  --fs-body:    clamp(16px, 1.25vw, 18px);  /* akapit domyslny */
  /* --- SKALA DROBNA, stopnie stale ---------------------------------------
     Skala plynna wyzej zaczyna sie na 14 px i nie schodzi nizej, a projekt
     ma cztery realne potrzeby ponizej tego progu: wersaliki naglowkow kolumn
     w stopce, etykiety pionowe sekcji, drobny druk i znaki ozdobne. Do
     26.08.2026 byly to liczby wpisywane recznie w szesciu miejscach. */
  --fs-label:     14px;                        /* wersaliki naglowkow kolumn */
  --fs-fine:      clamp(12px, 0.90vw, 13px);   /* drobny druk: zgoda RODO, podpisy, stopka.
                                                  Zglosili go niezaleznie agenci kontaktu i stopki,
                                                  bo 13 px bylo wpisywane recznie w czterech miejscach */
  --fs-micro:     12px;                        /* etykiety pionowe sekcji */
  --fs-nano:      10px;                        /* separatory i znaki ozdobne */
  --fs-small:   clamp(14px, 1.11vw, 16px);  /* opisy, nawigacja, stopka */
  --fs-nav:       20px;                    /* nawigacja naglowka, mieszkal do 26.08 w :root w header.css. D157, 03.09.2026: 18->20px, zgloszenie Jakuba "tekst w nawigacji za maly na desktopie" */
  --fs-nav-mobile: 24px;                   /* pozycje menu w panelu na telefonie. 02.09.2026 (D75):
                                              zbite z 30px, ktore stalo na sztywno w header.css. Przy 30px
                                              trzy pozycje zajmowaly 183 z 370 px panelu i czytaly sie jak
                                              lista naglowkow, nie jak nawigacja. */
  --fs-eyebrow: clamp(13px, 1.25vw, 18px);  /* nadtytul, wersaliki */

  /* --- INTERLINIE -------------------------------------------------------- */
  --lh-display-1: 0.93;
  --lh-display: 1.05;
  --lh-lead: 1.55;
  --lh-body: 1.7;
  --lh-tight: 1.3;

  /* --- SWIATLO MIEDZYLITEROWE -------------------------------------------- */
  --ls-display: -0.01em;
  --ls-body: -0.008em;
  --ls-eyebrow: 0.16em;   /* nadtytuly i etykiety wersalikami */
  --ls-caps: 0.08em;      /* kapitaliki naglowkowe */

  /* --- GRUBOSCI ---------------------------------------------------------- */
  --fw-display: 400;   /* Prata ma jedna wage, naglowki nigdy nie sa pogrubiane */
  --fw-body: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* --- PRZYCISKI, geometria ---------------------------------------------- */
  --btn-h-xl: 74px;   /* CTA domykajace sekcje na jasnym tle, zmierzone z makiety */
  --btn-h-lg: 64px;
  --btn-h-md: 50px;
  --btn-h-sm: 42px;
  --btn-px-xl: 72px;   /* szerokosc wychodzi wtedy 426 i 416 px, cele z makiety to 431 i 416 */
  --btn-px-lg: 40px;
  --btn-px-md: 28px;
  --btn-px-sm: 24px;
  --btn-fs-xl: 21px;
  --btn-fs-lg: 18px;
  --btn-fs-md: 16px;
  --btn-fs-sm: 15px;
  --btn-ls: 0.01em;

  /* --- POLA FORMULARZA --------------------------------------------------- */
  --field-h: 56px;
  --field-px: 20px;
  --field-fs: 16px;

  /* --- FOKUS, dostepnosc -------------------------------------------------- */
  --focus-width: 2px;
  --focus-offset: 3px;
  --focus-on-dark: #C08F5E;
  --focus-on-light: #60371C;

  /* --- RUCH --------------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 400ms;

  /* --- WARSTWY ------------------------------------------------------------ */
  --z-base: 0;
  --z-sticky: 100;
  /* D154, 03.09.2026: scrim menu mobilnego, ma stac NAD trescia strony
     (wiec wyzej niz --z-sticky, zdjecia cennika D117) ale POD kapsula
     naglowka (--z-header), zeby logo i burger-jako-X zostawaly widoczne,
     nieprzyciemnione, gdy szuflada jest otwarta. */
  --z-scrim: 150;
  --z-header: 200;
  --z-overlay: 300;
  --z-modal: 400;
}

/* ==========================================================================
   Konteksty tla. Sekcja deklaruje kontekst, komponenty w srodku same
   biora wlasciwe kolory. Dzieki temu ten sam przycisk dziala na kremie
   i na ciemnym bez drugiej klasy.
   ========================================================================== */

/* Zestaw zmiennych kontekstu. Selektorow jest kilka, bo naglowek, menu mobilne
   i panel FAQ leza poza sekcjami, a mimo to musza niesc te same wartosci.
   Do 26.08.2026 kazdy z nich mial WLASNA reczna kopie tej listy, przez co
   zmiana w jednym miejscu nie docierala do pozostalych. Od 28.08.2026 (D30)
   naglowek i menu mobilne sa zawsze jasne (kapsula na szkle), wiec przeszly
   z grupy ciemnej do jasnej, panel FAQ zostaje ciemny. */
.on-dark,
.faq__panel {
  --bg: var(--surface-dark);
  --fg: var(--text-on-dark);
  --fg-muted: var(--text-on-dark-muted);
  --accent-ctx: var(--accent);
  --accent-ctx-hover: var(--accent-hover);
  --accent-ctx-fg: var(--surface-dark);      /* pismo na wypelnieniu akcentem */
  --line-ctx: var(--line-on-dark);
  --line-ctx-soft: var(--line-on-dark-soft);
  --focus-ctx: var(--focus-on-dark);
  --btn-solid-bg: var(--surface-cream);      /* wypelnienie wariantu glownego */
  --btn-solid-fg: var(--surface-dark);
  --btn-solid-press: var(--fill-cream-press);
  --btn-outline-fg: var(--text-on-dark);     /* na ciemnym tekst outline jest kremowy */
}

/* Tlo i kolor maluje wylacznie sekcja. Naglowek, menu i panel FAQ maja wlasne
   tlo i nie wolno im go nadpisac, dlatego stoja wyzej, a tutaj juz nie. */
.on-dark {
  background: var(--bg);
  color: var(--fg);
}

.on-light,
.site-header,
.menu-mobilne {
  --bg: var(--surface-cream);
  --fg: var(--text-on-light);
  --fg-muted: var(--text-on-light-muted);
  --accent-ctx: var(--accent-deep);
  --accent-ctx-hover: var(--accent-deep-hover);
  --accent-ctx-fg: var(--text-on-dark);
  --line-ctx: var(--line-on-light);
  --line-ctx-soft: var(--line-on-light-soft);
  --focus-ctx: var(--focus-on-light);
  --btn-solid-bg: var(--surface-dark);
  --btn-solid-fg: var(--text-on-dark);
  --btn-solid-press: var(--fill-dark-press);
  --btn-outline-fg: var(--accent-deep);      /* na jasnym tekst outline jest w kolorze ramki */
}

.on-light {
  background: var(--bg);
  color: var(--fg);
}

.on-light--hi   { background: var(--surface-cream-hi); }
.on-light--sand { background: var(--surface-sand); }
.on-light--deep { background: var(--surface-sand-deep); }

/* ==========================================================================
   Reset i baza
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* D167, 03.09.2026: `scrollbar-gutter: stable` istnieje tu z powodu blokady
   przewijania przy otwartym menu (`body.menu-otwarte { overflow: hidden }`,
   header.css). Bez niej zdjecie paska przewijania zwraca stronie jego
   szerokosc i CALA tresc przeskakuje w bok w chwili otwarcia menu, a wraca
   przy zamknieciu. Na telefonie tego nie widac, bo pasek nie zajmuje miejsca,
   ale w przegladarce na komputerze (takze w waskim oknie i w emulatorze) skok
   jest wyrazny. Gutter rezerwowany na stale znosi roznice miedzy stanem z
   paskiem i bez niego. */
html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--text-on-light);
  background: var(--surface-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; height: auto; display: block; }

/* D192: <picture> owijajacy <img> ze zrodlem .webp nie tworzy wlasnego pudelka,
   dzieki czemu selektory typu `.karta img` i rozmiary w % dzialaja jak przed owinieciem. */
.jdb-picture { display: contents; }

/* ==========================================================================
   Typografia
   ========================================================================== */

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  margin: 0;
  text-wrap: balance;
}

h1, .display-1 { font-size: var(--fs-display-1); line-height: var(--lh-display-1); }
h2, .display-2 { font-size: var(--fs-display-2); }
.display-3     { font-size: var(--fs-display-3); }
h3, .display-4 { font-size: var(--fs-display-4); }

.display-num {
  font-family: var(--font-display);
  font-size: var(--fs-display-num);
  font-weight: var(--fw-display);
  line-height: 1;
  color: var(--fg, var(--text-on-light));
}

.display-caps {
  font-family: var(--font-display);
  font-size: var(--fs-display-caps);
  font-weight: var(--fw-display);
  line-height: 1.1;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-text);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-ctx, var(--accent-deep));
  margin: 0 0 var(--space-5);
}

.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); margin: 0; }
.body-lg { font-size: var(--fs-body-lg); }
.small { font-size: var(--fs-small); }
.muted { color: var(--fg-muted, var(--text-on-light-muted)); }

/* Pionowa etykieta przy lewej krawedzi sekcji ("02 — Oferta"). Przeniesiona
   z css/sekcja-kroki.css 28.08.2026: uzywana dzis w kroki, o-mnie, i od tej
   sesji w czterech kategoriach cennika /oferta, wiec nalezy do klas
   generycznych, nie do arkusza jednej sekcji. Kazda sekcja moze nadpisac
   left/top wlasnym selektorem, tak jak .o-mnie .etykieta-sekcji juz robi. */
.etykieta-sekcji {
  position: absolute;
  /* wlasnosci FIZYCZNE, nie logiczne: writing-mode obraca osie i inset-inline-start
     wyrzucalo etykiete na prawa krawedz */
  /* D62: pionowa etykieta zyla w marginesie 120px, ktory zniknal razem ze
     stalym kontenerem. Przy tresci na 95% zostaje 36px marginesu na 1440,
     wiec etykieta stoi teraz TUZ przy krawedzi okna, a nie 40px od niej,
     inaczej nachodzila na nadtytul i nagłowek sekcji. */
  inset-inline-start: max(0px, calc(var(--container-margin) - 24px));
  top: 102px;
  writing-mode: vertical-rl;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
}

p { margin: 0 0 var(--space-5); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

/* ==========================================================================
   Uklad
   ========================================================================== */

.container {
  inline-size: var(--container-w);
  margin-inline: auto;
  padding-inline: 0;
}

.section { padding-block: var(--space-section); }

@media (max-width: 600px) {
  .container { padding-inline: var(--gutter-mobile); }

  /* D169, 03.09.2026: H1 hero na telefonie schodzi ze stalych 56px na wartosc
     plynna, zeby "Salon kosmetyczny" mieszcil sie w jednym wierszu. Zgloszenie
     Jakuba. Do tej daty clamp siedzial na dolnej wartosci na kazdej szerokosci
     telefonu, wiec oba segmenty copy lamaly sie po dwa razy, razem cztery
     wiersze (D160 zamknelo to na desktopie, mobile zostalo otwarte jako
     pozycja 13).

     Wspolczynnik 10.4vw wziety z pomiaru, nie z oka: "Salon kosmetyczny"
     potrzebuje 6,935 px szerokosci na kazdy 1 px pisma, a kolumna hero to
     okno minus stale marginesy, wiec najciasniejszym punktem zakresu jest
     320 px (34,6 px pisma) i to on wyznacza wspolczynnik, z zapasem 3 procent.
     Gorna wartosc 56px trzyma stan sprzed zmiany wszedzie powyzej 538 px okna,
     gdzie problemu nie bylo. */
  :root {
    --fs-display-1: clamp(33px, 10.4vw, 56px);
  }
}

/* ==========================================================================
   Przyciski. Jedna klasa .btn plus wariant plus rozmiar.
   Kolory bierze z kontekstu .on-dark / .on-light, wiec ten sam wariant
   dziala na obu tlach.
   ========================================================================== */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--fg, var(--text-on-light));
  --btn-bd: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: var(--btn-h-lg);
  padding-inline: var(--btn-px-lg);
  font-family: var(--font-text);
  font-size: var(--btn-fs-lg);
  font-weight: var(--fw-medium);
  letter-spacing: var(--btn-ls);
  line-height: 1;
  text-align: center;
  border: var(--border-width) solid var(--btn-bd);
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

/* rozmiary. xl to CTA domykajace sekcje, decyzja Jakuba 26.08.2026 (D17):
   Karol daje im w makiecie 431x74 z pismem 21 px, wobec 322x64 w hero.
   To nie dryf recznego skladania, tylko hierarchia, bo powtarza sie
   w dwoch sekcjach niezaleznie. Hero i naglowek zostaja na lg i md,
   tam makieta zgadza sie z buildem co do kilku pikseli. */
.btn--xl { height: var(--btn-h-xl); padding-inline: var(--btn-px-xl); font-size: var(--btn-fs-xl); }
.btn--md { height: var(--btn-h-md); padding-inline: var(--btn-px-md); font-size: var(--btn-fs-md); }
.btn--sm { height: var(--btn-h-sm); padding-inline: var(--btn-px-sm); font-size: var(--btn-fs-sm); }
.btn--block { display: flex; width: 100%; }

/* HOVER NA ZAMIANE, ustalenie Jakuba 26.08.2026, D12.
   Wypelniony traci tlo i zostaje sama ramka. Bez tla zyskuje pelne wypelnienie.
   Dwa warianty sa swoim lustrzanym odbiciem, wiec strona ma jeden jezyk reakcji
   zamiast dwoch. Selektory sa BEZ kontekstu, bo kolory przychodza zmiennymi
   --btn-solid-*, ktore ustawia kontekst. Dzieki temu ta sama regula dziala tez
   w naglowku, w menu mobilnym i w panelu FAQ, ktore sekcjami nie sa. */

/* wariant glowny: w spoczynku pelne wypelnienie kontrastem do tla */
.btn--primary {
  --btn-bg: var(--btn-solid-bg);
  --btn-fg: var(--btn-solid-fg);
  --btn-bd: var(--btn-solid-bg);
}
.btn--primary:hover {
  --btn-bg: transparent;
  --btn-fg: var(--btn-solid-bg);
  --btn-bd: var(--btn-solid-bg);
}
.btn--primary:active {
  --btn-bg: color-mix(in srgb, var(--btn-solid-bg) 22%, transparent);
  --btn-fg: var(--btn-solid-bg);
  --btn-bd: var(--btn-solid-bg);
}

/* wariant poboczny: w spoczynku sama ramka w kolorze akcentu */
.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--btn-outline-fg, var(--fg));
  --btn-bd: var(--accent-ctx);
}
.btn--outline:hover {
  --btn-bg: var(--accent-ctx);
  --btn-fg: var(--accent-ctx-fg);
  --btn-bd: var(--accent-ctx);
}
.btn--outline:active {
  --btn-bg: var(--accent-ctx-hover);
  --btn-fg: var(--accent-ctx-fg);
  --btn-bd: var(--accent-ctx-hover);
}

/* wariant tekstowy: link ze strzalka, bez tla i ramki */
.btn--ghost { --btn-bg: transparent; --btn-bd: transparent; --btn-fg: var(--accent-ctx); padding-inline: 0; height: auto; }
.btn--ghost:hover { --btn-fg: var(--accent-ctx-hover); }
/* strzalka jedzie w kazdym wariancie, ktory ja niesie. Do 26.08.2026 regula
   byla zawezona do .btn--ghost, ktorego na stronie nie ma ani razu, a karty
   oferty uzywaja .btn--outline ze strzalka w srodku. Efekt: strzalka byla
   martwa i nikt tego nie zglosil, bo wyglada tak samo w spoczynku. */
.btn__arrow { display: inline-block; transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(6px); }

/* fokus: jeden pierscien dla wszystkich wariantow, widoczny na obu tlach */
.btn:focus { outline: none; }
.btn:focus-visible {
  outline: var(--focus-width) solid var(--focus-ctx, var(--accent));
  outline-offset: var(--focus-offset);
}

/* stan wylaczony i stan pracy */
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn[data-loading="true"] { opacity: 0.7; pointer-events: none; }

@media (max-width: 600px) {
  .btn { width: 100%; }             /* w projekcie mobilnym przyciski sa pelnej szerokosci */
  .btn--ghost { width: auto; }
}

/* ==========================================================================
   Linki tekstowe i nawigacja
   ========================================================================== */

.link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
}
.link:hover { background-size: 100% 1px; }
.link:focus-visible { outline: var(--focus-width) solid var(--focus-ctx, var(--accent)); outline-offset: var(--focus-offset); }

/* .nav-link mieszkal tu do 26.08.2026 w drugiej, martwej wersji: header.css
   laduje sie pozniej i nadpisywal ja w calosci innym zestawem tokenow
   (--fs-nav zamiast --fs-small, --hdr-fg zamiast --fg). Dwie definicje tego
   samego komponentu w dwoch plikach to pulapka, nie zabezpieczenie.
   Wlascicielem nawigacji jest css/header.css i tylko on. */

/* ==========================================================================
   Pola formularza
   ========================================================================== */

.field {
  width: 100%;
  height: var(--field-h);
  padding-inline: var(--field-px);
  font-family: var(--font-text);
  font-size: var(--field-fs);
  color: var(--text-on-light);
  background: transparent;
  border: var(--border-width) solid var(--line-on-light-soft);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.field::placeholder { color: var(--text-on-light-muted); }
.field:hover { border-color: var(--line-on-light); }
.field:focus { outline: none; border-color: var(--accent-deep); }
.field:focus-visible { outline: var(--focus-width) solid var(--focus-on-light); outline-offset: 1px; }
.field[aria-invalid="true"] { border-color: var(--error); }
textarea.field { height: auto; min-height: 140px; padding-block: var(--space-4); line-height: var(--lh-body); }

/* ==========================================================================
   Ograniczenie ruchu
   ========================================================================== */

/* Na telefonie przyciski sa nizsze, tak jak w makiecie mobilnej */
@media (max-width: 900px) {
  :root {
    --btn-h-xl: 58px;
  --btn-h-lg: 52px;
    --btn-fs-xl: 18px;
  --btn-fs-lg: 16px;
    --btn-px-xl: 28px;
  --btn-px-lg: 24px;

    /* 02.09.2026 (D73): druga sciezka CTA pod kapsula zniknela, wiec jej
       wysokosc (--space-4 plus --btn-h-md) wypada z tego rachunku. Bez tej
       poprawki hero kompensowaloby naglowek o 66 px za duzo i zostawialo
       pusty pas pod kapsula. */
    --header-rest-h: calc(var(--space-3) + var(--kapsula-h-mobile));
  }
}

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