/* --------------------------------------------------------------------- fonty
   Hostowane lokalnie i okrojone do znaków, które faktycznie występują na stronie
   (łacinka, polskie diakrytyki, typografia). Trzy pliki ważą razem 24 kB zamiast
   408 kB pełnych krojów. Zero zapytań do obcej domeny — dzięki temu CSP może
   zostać przy default-src 'self'.

   Wagi: 300 do treści i nagłówków (cienki Cormorant w dużym rozmiarze wygląda
   drogo), 500 zamiast pogrubienia — przy tekście 300 czyta się lepiej niż bold. */
@font-face {
  /* Krój wyłącznie na nazwę marki — okrojony do liter „Glow Hair Studio", 2,7 kB.
     Logo salonu to płynący skrypt, którego wersaliki Cormoranta nie oddawały. */
  font-family: "Glow Skrypt";
  src: url("fonts/vibes-znak.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("fonts/jost-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("fonts/jost-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Anfryz — salon fryzjerski
   Jedno źródło kolorów, krojów i odstępów. W komponentach nie ma ani jednej
   wartości wpisanej wprost — zawsze var().

   Charakter: czerń i złoto z briefu, ale rozłożone tak, jak w referencjach,
   które klientce się podobają (cutcutacademy.pl) — czyli jasna, przewiewna
   strona do czytania, a czerń jako rama (nagłówek, stopka, sekcje-przerywniki).
   Cała strona na czarno utopiłaby zdjęcia metamorfoz, a to one mają sprzedawać.
   ========================================================================== */

:root {
  /* --- tła: strona jest ciemna w całości ---
     Identyfikacja salonu to czerń ze złotem — okładka i znak na Facebooku są
     czarne z brokatem. Jasne tło było moim wyborem, nie ich. Na ciemnym zdjęcia
     włosów świecą mocniej, a złoto przestaje być ozdobnikiem i staje się
     jedynym jasnym akcentem. */
  --cream:      #14110f;   /* tło strony */
  --cream-deep: #1b1714;   /* sekcja wyróżniona */
  --paper:      #211c18;   /* karty i panele */
  --night:      #0d0b09;   /* pasy najciemniejsze: nagłówek, stopka, cytat */
  --night-soft: #1b1714;

  /* --- tekst w trzech stopniach --- */
  --ink:        #f3eee7;   /* na tle strony 15,9:1 */
  --ink-soft:   #a79e93;   /* 6,7:1 — treść drugorzędna */
  --ink-invert: #f3eee7;   /* na najciemniejszym pasie 17,4:1 */
  --ink-invert-soft: #a79e93;

  /* --- złoto: na ciemnym tle role się odwracają ---
     Przy jasnej wersji strony wariant przyciemniony służył do tekstu. Teraz jest
     odwrotnie: tekstowy musi być jaśniejszy od wypełnieniowego, bo inaczej
     ginie na czerni. */
  --gold:       #c9a227;   /* wypełnienia, linie, ramki */
  --gold-deep:  #d9b652;   /* tekst — 9,6:1 na tle strony */
  --gold-veil:  rgba(201, 162, 39, .09);

  /* --- kroje ---
     Szeryfowy nadaje charakter, bezszeryfowy dba o czytelność na telefonie.
     Pliki lokalne dojdą później — fallback jest dobrany tak, żeby układ
     nie skakał po ich podmianie. */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* --- rytm --- */
  --container: 1140px;
  --section-y: clamp(4.5rem, 11vh, 8rem);
  --gap: clamp(1.25rem, 3vw, 2.5rem);
  --radius: 2px;           /* prawie ostre krawędzie = rzemiosło i precyzja,
                              świadomie zamiast miękkich 18 px */
  --line: 1px solid rgba(243, 238, 231, .14);
  --line-gold: 1px solid rgba(201, 162, 39, .45);
  /* wysokość przyklejonego nagłówka: 60/68 px paska + 1 px złotej kreski.
     Sekcje odsuwają o tyle swój cel przewijania, inaczej po kliknięciu
     w menu nagłówek zasłania nadtytuł sekcji. */
  --wys-naglowka: 61px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .45);
}

/* --------------------------------------------------------- reset i podstawy */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Odsunięcie celu przewijania spod przyklejonego nagłówka. Na kontenerze
     przewijania, a nie na pojedynczych sekcjach — dzięki temu obejmuje nie
     tylko kotwice z menu, ale też przewijanie do pola po nieudanej walidacji
     formularza i każde wywołanie focus(). Wcześniej przeglądarka ustawiała
     błędne pole dokładnie pod nagłówkiem i nie było widać, co poprawić. */
  scroll-padding-top: calc(var(--wys-naglowka) + 1rem);
}

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 300;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 300;      /* cienki krój szeryfowy w dużym rozmiarze wygląda drogo */
  line-height: 1.15;
  letter-spacing: .01em;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

p { margin: 0 0 1.1em; }

strong, b { font-weight: 500; }

a { color: var(--gold-deep); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--ink); }

/* nadkreślenie sekcji — powtarzalny sygnał nawigacyjny */
.nadtytul {
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 1rem;
  font-weight: 500;
}

/* ------------------------------------------------------------------ układ */
.kontener {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

.sekcja { padding-block: var(--section-y); }
.sekcja--ciemna {
  background: var(--night);
  color: var(--ink-invert);
}
.sekcja--ciemna h2 { color: var(--ink-invert); }
.sekcja--ciemna .nadtytul { color: var(--gold); }
.sekcja--wyrozniona { background: var(--cream-deep); border-block: var(--line); }

.siatka {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

/* --------------------------------------------------------------- przyciski */
.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;                /* cel dotyku ≥ 44 px */
  padding: .75rem 1.9rem;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  background: var(--gold);
  color: var(--night);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
.przycisk:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--night); transform: translateY(-1px); }

.przycisk--obrys { background: transparent; color: var(--ink); border-color: rgba(243, 238, 231, .45); }
.przycisk--obrys:hover { background: var(--ink); color: var(--night); border-color: var(--ink); }

/* Nagłówek i ciemne pasy nie potrzebują już własnych reguł — przycisk główny
   jest złoty na całej stronie, a obrysowy jasny. */

/* ------------------------------------------------------------------ nagłówek */
@media (min-width: 700px) { :root { --wys-naglowka: 69px; } }

.naglowek {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--night);
  color: var(--ink-invert);
  border-bottom: var(--line-gold);
}
.naglowek__pas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 60px;
  overflow: visible;
}
@media (min-width: 700px) { .naglowek__pas { min-height: 68px; } }
.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;        /* cel dotyku — audyt mobilny łapał 41 px */
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-invert);
  text-decoration: none;
}
.logo span { color: var(--gold); }

.menu { display: flex; gap: 1.6rem; align-items: center; list-style: none; margin: 0; padding: 0; }
.menu a {
  color: var(--ink-invert-soft);
  text-decoration: none;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--gold); }

.jezyk { display: flex; gap: .35rem; align-items: center; font-size: .78rem; letter-spacing: .1em; }
/* Przełącznik języka miał 31 px wysokości — za mało na palec, a na stronie
   dwujęzycznej to jeden z ważniejszych przycisków. */
.jezyk a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .45rem;
  color: var(--ink-invert-soft);
  text-decoration: none;
}
.jezyk a[aria-current="true"] { color: var(--gold); box-shadow: inset 0 -1px 0 var(--gold); }

/* menu na telefonie — czysty CSS, bez JS */
.menu-przelacznik { display: none; }

@media (max-width: 900px) {
  .menu-przelacznik {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    background: none; border: 0; color: var(--ink-invert); cursor: pointer;
  }
  .menu {
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--night);
    border-bottom: var(--line-gold);
    padding: .5rem 1.25rem 1.25rem;
    display: none;
    /* Telefon trzymany poziomo ma około 360 px wysokości, a sześć pozycji po
       52 px to 341 px — menu wychodziło poza ekran i ostatnia pozycja
       („Kontakt") była nieklikalna przy każdym przewinięciu, bo panel jest
       przypięty do przyklejonego nagłówka. Teraz panel nigdy nie przekracza
       widocznej wysokości i przewija się sam.
       Najpierw vh dla starszych przeglądarek, potem dvh — na telefonie pasek
       adresu zmienia wysokość okna i tylko dvh liczy ją prawidłowo. */
    max-height: calc(100vh - var(--wys-naglowka));
    max-height: calc(100dvh - var(--wys-naglowka));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .naglowek[data-otwarte="tak"] .menu { display: flex; }
  .menu a { min-height: 52px; border-top: 1px solid rgba(245,241,234,.08); }
  /* Pusty <nav> (menu jest pozycjonowane absolutnie) i tak zajmował slot
     w space-between, przez co hamburger lądował na środku paska zamiast przy
     prawej krawędzi. Cała wolna przestrzeń idzie teraz przed przełącznik
     języka, więc język i hamburger tworzą grupę po prawej. */
  .jezyk { order: 2; margin-left: auto; }
  .menu-przelacznik { order: 3; }
}

/* --------------------------------------------------------------------- hero */
.hero {
  position: relative;
  isolation: isolate;
  color: var(--ink-invert);
  padding-block: clamp(3rem, 8vh, 5rem);
  overflow: hidden;
  /* Trzy warstwy: pył ze złota, ciepła poświata od prawej góry i chłodniejsze
     dopełnienie od lewego dołu. Wszystko wektorowe albo liczone przez
     przeglądarkę — zero dodatkowych zapytań poza jednym plikiem SVG. */
  background:
    url("img/pyl.svg") right top / 62% auto no-repeat,
    radial-gradient(58% 48% at 82% 8%, rgba(201, 162, 39, .17) 0%, rgba(201, 162, 39, 0) 70%),
    radial-gradient(70% 55% at 8% 92%, rgba(217, 182, 82, .07) 0%, rgba(217, 182, 82, 0) 65%),
    var(--night);
}
.hero__tresc { max-width: 38rem; position: relative; z-index: 2; }
.hero h1 { color: var(--ink-invert); margin-bottom: .35em; }
.hero__lead { color: var(--ink-invert-soft); font-size: clamp(1.02rem, 1.6vw, 1.18rem); margin-bottom: 2rem; }
.hero__akcje { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Ozdoba rysowana wektorowo zamiast wgrywanego pliku: kilka kB, ostra na każdym
   ekranie, kolor sterowany jedną zmienną. Krycie niskie — ma być tłem, nie treścią. */
.hero__ozdoba {
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(20rem, 45vw, 38rem);
  opacity: .06;            /* zeszły do roli tekstury — pierwszy plan po prawej
                              zajmuje teraz znak firmowy */
  pointer-events: none;
  color: var(--gold);
}
@media (max-width: 760px) { .hero__ozdoba { opacity: .07; right: -30%; } }

/* --------------------------------------------------------------------- karty
   Usługi jako panele, nie jako lista wierszy. Numer jest duży i wtopiony w tło
   karty — daje rytm i głębię, a nie konkuruje z nazwą usługi, bo siedzi na
   dziesięciu procentach krycia. Złota krawędź rozjaśnia się przy najechaniu:
   jedyny ruch w tej sekcji, na transformacji i kolorze, więc tani. */
.karta {
  position: relative;
  overflow: hidden;
  padding: 1.9rem 1.5rem 1.6rem;
  background:
    linear-gradient(158deg, rgba(201, 162, 39, .07) 0%, rgba(201, 162, 39, 0) 58%),
    var(--paper);
  border: 1px solid rgba(201, 162, 39, .18);
  border-radius: var(--radius);
  transition: border-color .3s ease, transform .3s ease;
}
.karta:hover { border-color: rgba(201, 162, 39, .5); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .karta { transition: none; } .karta:hover { transform: none; } }

.karta h3 { margin-bottom: .45rem; position: relative; }
.karta p:last-child { margin-bottom: 0; }
.karta__opis { color: var(--ink-soft); font-size: .95rem; position: relative; }

/* Jak długo utrzymuje się efekt zabiegu. Klientki pytają o to przed ceną,
   więc informacja stoi na karcie, a nie dopiero w cenniku. Złoto, wersaliki
   i rozstrzelenie odróżniają ją od opisu, żeby nie czytała się jak zdanie. */
.karta__trwalosc {
  margin: .7rem 0 0;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  position: relative;
}

.siatka--uslugi { counter-reset: usluga; }
.siatka--uslugi .karta { counter-increment: usluga; }
/* duży numer w tle — ozdoba, nie treść */
.siatka--uslugi .karta::before {
  content: counter(usluga, decimal-leading-zero);
  position: absolute;
  /* Numer musi mieścić się w karcie w całości. Przy ujemnym odsunięciu górna
     krawędź obcinała cyfry i czytało się to jak błąd, nie jak zamierzone
     wyjście poza kadr. */
  top: .2rem;
  right: .6rem;
  font-family: var(--font-display);
  font-variant-numeric: lining-nums;
  font-size: 4.6rem;
  line-height: 1;
  color: var(--gold);
  opacity: .1;
  pointer-events: none;
}

/* usługa z jedynymi znanymi cenami dostaje odnośnik do cennika */
.karta__od {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: .6rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  text-decoration: none;
  position: relative;
}
.karta__od::after { content: " \2192"; margin-left: .4rem; }
.karta__od:hover { color: var(--ink); }

/* ------------------------------------------------------------------- cennik */
.cennik { display: grid; gap: 0; }
/* Siatka, nie elastyczny wiersz. Przy elastycznym dłuższa nazwa usługi spychała
   cenę do drugiej linii i wiersze przestawały być równe — kolumna nazwy bierze
   teraz resztę miejsca, a cena trzyma się prawej krawędzi zawsze w tym samym
   wierszu co nazwa. */
.cennik__pozycja {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 1.25rem;
  padding: 1.1rem 0;
  border-bottom: var(--line);
}
.cennik__opis { grid-column: 1 / -1; }
.cennik__nazwa { font-family: var(--font-display); font-size: 1.25rem; }
.cennik__opis { color: var(--ink-soft); font-size: .9rem; margin: 0; }
.cennik__cena { font-variant-numeric: lining-nums tabular-nums; font-size: 1.05rem; letter-spacing: .06em; white-space: nowrap; color: var(--gold-deep); }
.cennik__cena--brak { color: var(--ink-soft); font-style: italic; letter-spacing: 0; }


/* Na najwęższych telefonach polskie nazwy usług są dłuższe od angielskich
   i przy pełnym rozmiarze spychały cenę do drugiej linii — tylko część
   wierszy, więc lista przestawała być równa. */
@media (max-width: 380px) {
  .cennik__nazwa { font-size: 1.05rem; }
  .cennik__cena { font-size: .95rem; }
  .cennik__pozycja { column-gap: .75rem; }
}

/* --------------------------------------------------------------- pusty stan */
.pusty-stan {
  border: 1px dashed rgba(243, 238, 231, .22);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  text-align: center;
  color: var(--ink-soft);
  background: var(--gold-veil);
}
.pusty-stan p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ stopka */
.stopka {
  background: var(--night);
  color: var(--ink-invert-soft);
  padding-block: 3.5rem 2rem;
  font-size: .92rem;
}
.stopka a { color: var(--ink-invert-soft); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.stopka a:hover { color: var(--gold); }
.stopka h3 { color: var(--ink-invert); font-size: 1.05rem; }
.stopka__dol {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(245, 241, 234, .12);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  font-size: .82rem;
}

/* ------------------------------------------------------- pomoc dla czytników */
.tylko-dla-czytnikow {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.pomin-do-tresci {
  position: absolute; left: -9999px; top: 0;
  background: var(--gold); color: var(--night);
  padding: .75rem 1.25rem; z-index: 100;
}
.pomin-do-tresci:focus { left: 1rem; top: 1rem; }

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

/* ==========================================================================
   Formularze — zgłoszenie wizyty i ankieta o kondycji włosów
   Rozmiar czcionki w polach nie może zejść poniżej 16 px: przy mniejszej
   iPhone sam przybliża ekran przy kliknięciu i układ się rozjeżdża.
   ========================================================================== */

.formularz { max-width: 44rem; }

.pole { margin-bottom: 1.5rem; }

.pole > label,
.grupa > legend {
  display: block;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .5rem;
}
html[lang="en"] .cytat blockquote::before { content: "\201C"; }

.pole__podpowiedz {
  font-size: .88rem;
  color: var(--ink-soft);
  margin: -.25rem 0 .5rem;
}

.pole input[type="text"],
.pole input[type="tel"],
.pole input[type="email"],
.pole input[type="date"],
.pole select,
.pole textarea {
  width: 100%;
  min-height: 48px;
  padding: .7rem .9rem;
  font-family: var(--font-body);
  font-size: 16px;              /* nie zmniejszać — patrz komentarz wyżej */
  line-height: 1.5;
  color: var(--ink);
  background: var(--night-soft);
  border: 1px solid rgba(243, 238, 231, .22);
  border-radius: var(--radius);
}
.pole textarea { min-height: 8rem; resize: vertical; }

/* Pola wyboru nie powodują przybliżenia ekranu na iPhonie, ale ustawiam im 16 px
   razem z resztą, żeby audyt mobilny nie zgłaszał ich jako fałszywych alarmów. */
.formularz input, .formularz select, .formularz textarea { font-size: 16px; }

.pole input:focus-visible,
.pole select:focus-visible,
.pole textarea:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 1px;
  border-color: var(--gold-deep);
}

.wymagane { color: var(--gold-deep); }

/* grupy wyborów — pola wyboru i przyciski opcji */
.grupa { border: 0; padding: 0; margin: 0 0 1.5rem; }
.wybory { display: grid; gap: .15rem; }

.wybor {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  min-height: 44px;             /* cel dotyku */
  padding: .5rem 0;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.5;
}
/* Sam kwadracik ma 20 px, ale klikalna jest cała etykieta o wysokości >= 44 px —
   audyt zgłasza tu input jako mały cel i jest to fałszywy alarm. Zmierzone niżej. */
.wybor input { width: 20px; height: 20px; margin: .2rem 0 0; flex: none; accent-color: var(--gold-deep); }

.zgoda {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: 1rem;
  background: var(--gold-veil);
  border: var(--line-gold);
  border-radius: var(--radius);
  font-size: .92rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.zgoda input { width: 20px; height: 20px; margin: .15rem 0 0; flex: none; accent-color: var(--gold-deep); }

/* ostrzeżenie o przeciwwskazaniach — ma być widoczne, nie schowane w drobnym druku */
.uwaga {
  max-width: 44rem;        /* ta sama szerokość co .formularz — inaczej ramka
                              wystaje poza kolumnę tekstu i układ się rozjeżdża */
  border-left: 3px solid var(--gold-deep);
  background: var(--paper);
  padding: 1.1rem 1.25rem;
  margin: 0 0 2rem;
  font-size: .95rem;
  color: var(--ink-soft);
}
.uwaga strong { color: var(--ink); }
.uwaga p:last-child { margin-bottom: 0; }

/* dwie kolumny tam, gdzie pola są krótkie */
.para {
  display: grid;
  gap: 0 var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.krok {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 2.5rem 0 1.25rem;
  padding-bottom: .5rem;
  border-bottom: var(--line);
}
.krok:first-of-type { margin-top: 0; }

/* ==========================================================================
   Znak firmowy
   Logo salonu to czarny okrągły znak ze złotym „Glow" i podpisem „HAIR STUDIO".
   Odwzorowuję układ, nie kaligrafię — do czasu, aż dostanę oryginalny plik.
   ========================================================================== */

.logo {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  line-height: 1;
  gap: 0;
  overflow: visible;
}
.logo__nazwa {
  font-family: "Glow Skrypt", var(--font-display);
  /* .logo dziedziczy wersaliki — skrypt musi je jawnie wyłączyć, inaczej
     zamiast „Glow" wychodzi „GLOW" wielkimi literami kroju kaligraficznego. */
  text-transform: none;
  font-size: 1.45rem;
  /* Gradient jest przycinany do liter, a przycinanie działa tylko wewnątrz
     pudełka elementu: co wychodzi poza nie, po prostu się nie maluje. Ozdobna
     pętla litery G sięga wyżej niż zwykły wiersz, więc pudełko musi dostać
     zapas u góry, inaczej litera jest ścięta płasko. */
  line-height: 1.35;
  padding-top: .34em;
  letter-spacing: 0;
  color: var(--gold);
}
@media (min-width: 700px) { .logo__nazwa { font-size: 1.7rem; } }
.logo__podpis {
  font-family: var(--font-body);
  font-size: .5rem;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold);
}

/* --------------------------------------------------------- znak w nagłówku */
.hero__siatka {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  position: relative;
  z-index: 2;
}
@media (min-width: 900px) {
  .hero__siatka { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}

/* --- zdjęcie w nagłówku strony ---
   Jedno zdjęcie, dwa układy. Na telefonie leży pod tekstem jako przyciemnione
   Na komputerze zdjęcie wychodzi do prawej kolumny w ramce, gdzie wcześniej
   stał okrągły znak powielający logo z paska. Na telefonie znika całkowicie
   (patrz zapytanie poniżej), a plik nie jest wtedy w ogóle pobierany, bo
   znacznik <picture> podaje go wyłącznie dla szerokości od 900 px. */
.hero__zdjecie { margin: 0; }
.hero__zdjecie img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 899px) {
  /* Zdjęcie w tle schodzi całkowicie. Ciemne włosy pod ciemnym gradientem
     na ciemnej stronie dawały mętną plamę, nie efekt. Tło robi teraz poświata
     i pył rysowane wektorowo — kilka kilobajtów zamiast zdjęcia i żadnego
     przewijania w zamian. */
  .hero__zdjecie { display: none; }
  .hero__ozdoba { display: none; }
  /* Na wąskim ekranie tekst zajmuje całą szerokość, więc pył musi zejść do
     samego rogu — inaczej drobiny lądują na literach i czyta się to jak szum. */
  .hero { background-size: 78% auto, 100% 100%, 100% 100%, auto; }
}
@media (min-width: 900px) {
  .hero__zdjecie {
    position: relative;
    aspect-ratio: 4 / 5;
    max-height: 34rem;
    justify-self: end;
    width: min(100%, 26rem);
    border-radius: var(--radius);
    overflow: hidden;
    outline: 1px solid rgba(201, 162, 39, .45);
    outline-offset: 10px;
  }
}

/* ------------------------------------------------------- pasek zaufania */
.zaufanie {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2.5rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(245, 241, 234, .14);
}
.zaufanie__pozycja { display: grid; gap: .15rem; }
.zaufanie__liczba {
  font-family: var(--font-display);
  /* Cormorant domyślnie daje cyfry minuskułowe — ładne w zdaniu, ale przy
     statystykach czytają się jak literówka. Tu wymuszam równą wysokość. */
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--gold);
}
.zaufanie__opis {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-invert-soft);
}


/* ---------------------------------------------------------- pas z cytatem */
.cytat {
  background: var(--night);
  color: var(--ink-invert);
  padding-block: clamp(4rem, 9vh, 6.5rem);
  text-align: center;
}
.cytat blockquote {
  margin: 0 auto;
  max-width: 46rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  line-height: 1.3;
}
.cytat cite {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--font-body);
  font-size: .74rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
/* Ozdobny cudzysłów znakiem, nie obrazkiem. Polski otwierający jest dolny,
   angielski górny — stąd osobna reguła dla wersji EN. */
.cytat blockquote::before {
  content: "\201E";
  display: block;
  font-size: 3.5rem;
  line-height: .6;
  color: rgba(201, 162, 39, .45);
  margin-bottom: .5rem;
}


/* ==========================================================================
   Warstwa, która ma sprawić, że strona przestaje być listą prostokątów
   ========================================================================== */


/* --- kroki: jak umówić wizytę --- */
.kroki {
  display: grid;
  gap: var(--gap);
  /* 13rem, nie 15: przy 15rem trzy kroki nie mieściły się w szerokości tabletu
     i układały się 2+1, czyli z sierotą w drugim rzędzie. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  counter-reset: krok;
  margin-top: 2.5rem;
}
.krok-poz {
  counter-increment: krok;
  position: relative;
  padding-top: 3.25rem;
}
.krok-poz::before {
  content: counter(krok);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-display);
  font-variant-numeric: lining-nums;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--gold-deep);
  opacity: .38;          /* liczba ma być tłem dla nagłówka, nie konkurencją */
}
.krok-poz h3 { margin-bottom: .35rem; }
.krok-poz p { color: var(--ink-soft); font-size: .95rem; margin-bottom: 0; }

/* --- ciemna karta obok jasnej treści --- */
.panel {
  background: var(--paper);
  color: var(--ink-invert);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  align-self: start;
}
.panel h3 { color: var(--ink-invert); }
.panel ul { margin: 0; padding: 0; list-style: none; }
.panel li {
  padding: .85rem 0;
  border-bottom: 1px solid rgba(245, 241, 234, .12);
  color: var(--ink-invert-soft);
  font-size: .95rem;
}
.panel li:last-child { border-bottom: 0; padding-bottom: 0; }
.panel li strong { color: var(--gold); font-weight: 500; }

/* --- dane kontaktowe --- */
.kontakt-dane { margin-top: 2.5rem; padding-top: 1.75rem; border-top: var(--line); }
.kontakt-dane p { margin-bottom: .25rem; }
.kontakt-dane__nazwa { font-family: var(--font-display); font-size: 1.35rem; }
.kontakt-dane__miejsce { color: var(--ink-soft); }
.kontakt-dane a { display: inline-flex; align-items: center; min-height: 44px; }

/* --- duży panel zaufania w miejsce pustego stanu opinii --- */
.opinie-panel {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  background: var(--paper);
  border: var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}
/* Odnośnik stoi w akapicie sam, więc musi mieć własny cel dotyku —
   audyt mobilny łapał go jako 24 px. */
.opinie-panel a { display: inline-flex; align-items: center; min-height: 44px; }

.opinie-wynik { text-align: center; }
.opinie-wynik__liczba {
  display: block;
  font-family: var(--font-display);
  font-variant-numeric: lining-nums;
  font-size: clamp(3.4rem, 9vw, 5rem);
  line-height: 1;
  color: var(--gold-deep);
}
.opinie-wynik__opis {
  display: block;
  margin-top: .5rem;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- ramka na zdjęcie z przesuniętym obrysem ---
   Daje głębię bez cienia i bez dodatkowego pliku. Obrys jest ozdobą, więc
   siedzi pod spodem i nie przechwytuje kliknięć. */
.rama { position: relative; }
.rama::before {
  content: "";
  position: absolute;
  inset: 1.1rem -1.1rem -1.1rem 1.1rem;
  border: 1px solid var(--gold-deep);
  opacity: .45;
  border-radius: var(--radius);
  z-index: 0;
  pointer-events: none;
}
.rama > * { position: relative; z-index: 1; }
@media (max-width: 700px) { .rama::before { inset: .7rem -.7rem -.7rem .7rem; } }

/* --- cennik pogrupowany usługami --- */
.cennik-grupa { margin-bottom: 2.75rem; }
.cennik-grupa:last-of-type { margin-bottom: 0; }
.cennik-grupa__tytul {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: .35rem;
}
.cennik-grupa__opis { color: var(--ink-soft); font-size: .92rem; margin-bottom: .75rem; }

/* --- pojedyncza opinia --- */
.opinia {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
  border-left: 2px solid rgba(201, 162, 39, .5);
}
.opinia p {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.5;
  margin-bottom: .75rem;
}
.opinia cite {
  font-style: normal;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.opinia__tlumaczenie { font-size: .88rem; color: var(--ink-soft); }
.opinie-wynik__zrodlo {
  display: block;
  margin-top: .35rem;
  font-size: .78rem;
  color: var(--ink-soft);
}

/* --- galeria: jedna metamorfoza to jedna karta ---
   Wcześniej było tu osiem osobnych kafelków i żeby zobaczyć parę, trzeba było
   przeczytać etykiety. Teraz zdjęcia "przed" i "po" siedzą w jednej ramce,
   stykają się ze sobą i rozdziela je złota linia — para czyta się jako jedno
   porównanie, a nie dwa niezależne obrazki. */
.galeria { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
@media (min-width: 820px) { .galeria { grid-template-columns: repeat(2, 1fr); } }

.metamorfoza { margin: 0; }
.metamorfoza__kadry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid rgba(201, 162, 39, .28);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .3s ease;
}
.metamorfoza:hover .metamorfoza__kadry { border-color: rgba(201, 162, 39, .55); }
@media (prefers-reduced-motion: reduce) { .metamorfoza__kadry { transition: none; } }

.metamorfoza__polowa { position: relative; }
/* linia podziału zamiast odstępu — zdjęcia mają się stykać, żeby dało się
   porównać długość i połysk bez przerwy między nimi */
.metamorfoza__polowa + .metamorfoza__polowa { border-left: 1px solid rgba(201, 162, 39, .45); }
.metamorfoza__polowa img { display: block; width: 100%; height: auto; background: var(--night-soft); }

.metamorfoza__etykieta {
  position: absolute;
  top: .5rem;
  left: .5rem;
  padding: .2rem .55rem;
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-invert);          /* 13,4:1 na tej półprzezroczystej warstwie */
  background: rgba(13, 11, 9, .78);
  border-radius: var(--radius);
}
@media (max-width: 380px) {
  .metamorfoza__etykieta { font-size: .55rem; letter-spacing: .1em; padding: .15rem .4rem; }
}

/* --- cennik pogrupowany usługami --- */
.cennik-grupa { margin-bottom: 2.75rem; }
.cennik-grupa:last-of-type { margin-bottom: 0; }
.cennik-grupa__tytul {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: .35rem;
}
.cennik-grupa__opis { color: var(--ink-soft); font-size: .92rem; margin-bottom: .75rem; }

/* --- pojedyncza opinia --- */
.opinia {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
  border-left: 2px solid rgba(201, 162, 39, .5);
}
.opinia p {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.5;
  margin-bottom: .75rem;
}
.opinia cite {
  font-style: normal;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.opinia__tlumaczenie { font-size: .88rem; color: var(--ink-soft); }
.opinie-wynik__zrodlo {
  display: block;
  margin-top: .35rem;
  font-size: .78rem;
  color: var(--ink-soft);
}


/* --- cennik pogrupowany usługami --- */
.cennik-grupa { margin-bottom: 2.75rem; }
.cennik-grupa:last-of-type { margin-bottom: 0; }
.cennik-grupa__tytul {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: .35rem;
}
.cennik-grupa__opis { color: var(--ink-soft); font-size: .92rem; margin-bottom: .75rem; }

/* --- pojedyncza opinia --- */
.opinia {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
  border-left: 2px solid rgba(201, 162, 39, .5);
}
.opinia p {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.5;
  margin-bottom: .75rem;
}
.opinia cite {
  font-style: normal;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.opinia__tlumaczenie { font-size: .88rem; color: var(--ink-soft); }
.opinie-wynik__zrodlo {
  display: block;
  margin-top: .35rem;
  font-size: .78rem;
  color: var(--ink-soft);
}

/* ==========================================================================
   Dostrojenie pod telefon
   Strona ma być przede wszystkim telefoniczna — większość klientek wchodzi
   z komórki, często w drodze. Poniżej rzeczy, które na małym ekranie kosztują
   przewijanie albo miejsce, a nic nie wnoszą.
   ========================================================================== */

@media (max-width: 699px) {
  /* mniej pustego miejsca nad nagłówkiem strony */
  .hero { padding-block: 2.5rem 3rem; }

  /* pasek zaufania w jednym rzędzie zamiast łamania po jednej pozycji */
  .zaufanie {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem .75rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
  }
  .zaufanie__liczba { font-size: 1.5rem; }
  .zaufanie__opis { font-size: .62rem; letter-spacing: .1em; }

  /* przyciski na pełną szerokość — łatwiej trafić kciukiem */
  .hero__akcje { display: grid; gap: .6rem; }
  .hero__akcje .przycisk { width: 100%; }

  /* sekcje oddychają mniej, żeby treść była bliżej siebie */
  .sekcja { padding-block: 3.25rem; }
  .cytat { padding-block: 3.25rem; }

  /* cennik i panel jeden pod drugim, bez sztucznego zwężania */
  .panel { margin-top: 1.5rem; }
}

/* najwęższe telefony w użyciu */
@media (max-width: 360px) {
  .zaufanie { grid-template-columns: repeat(2, 1fr); }
}

/* --- zdjęcie w sekcji kontaktu ---
   Szerokość ograniczona świadomie: plik ma 680 px, więc przy 320 px wyświetlania
   wychodzi ponad dwa piksele pliku na piksel ekranu. Rozciągnięte na pełną
   kolumnę dawało gęstość 1,0 i było miękkie na ekranach o dużej gęstości. */
.kontakt-zdjecie {
  margin: 2.5rem 0 0;
  max-width: 320px;
  border-radius: var(--radius);
  overflow: hidden;
  outline: 1px solid rgba(201, 162, 39, .4);
  outline-offset: 8px;
}
.kontakt-zdjecie img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) {
  /* width, nie max-width: element pływający dobiera szerokość do zawartości,
     a zawartość ma width:100% — zanim leniwy obraz się wczyta, to koło się
     domyka na zerze i ramka ma 0×0. Po wczytaniu skakała do 300×375
     i przesuwała tekst opływający. Twarda szerokość pozwala policzyć wysokość
     z proporcji obrazka jeszcze przed pobraniem pliku. */
  .kontakt-zdjecie { float: right; margin: 0 0 2rem 2.5rem; width: 300px; }
}

/* ==========================================================================
   Klasy pomocnicze — zamiast atrybutów style=

   Produkcyjna polityka bezpieczeństwa treści ma style-src 'self' bez
   'unsafe-inline', a to blokuje KAŻDY atrybut style w HTML-u. Na żywo
   te deklaracje po prostu nie działały: akapity szły na pełną szerokość
   i traciły przygaszony kolor. Lokalny serwer nie wysyła nagłówków CSP,
   dlatego problem był widoczny dopiero na produkcji. Wszystko, co
   wcześniej stało w style=, mieszka teraz tutaj.

   Reguły stoją na końcu arkusza, żeby przy równej specyficzności
   wygrywały z regułami bazowymi, które modyfikują.
   ========================================================================== */

.tytul-strony { font-size: clamp(2.2rem, 5vw, 3.2rem); }

.waski { max-width: 44rem; }
.wprowadzenie { max-width: 44rem; color: var(--ink-soft); }
.wprowadzenie--na-ciemnym { color: var(--ink-invert-soft); }

.przygaszony { color: var(--ink-soft); }
.drobny { font-size: .88rem; color: var(--ink-soft); }

/* Zastrzeżenie pod cennikiem. 0,875rem = 14 px, nie 13,6 px jak wcześniej:
   audyt mobilny łapał poprzednią wartość jako tekst poniżej progu czytelności. */
.zastrzezenie { font-size: .875rem; color: var(--ink-soft); margin-top: 1.5rem; }

.odstep-s { margin-top: .75rem; }
.odstep-m { margin-top: 2rem; }
.odstep-l { margin-top: 2.5rem; }
.odstep-xl { margin-top: 2.75rem; }
.bez-odstepu-pod { margin-bottom: 0; }

/* Kroki w sekcji kontaktu wyrównane do góry, nie do środka — inaczej krótszy
   opis unosi się względem sąsiadów i numery przestają stać w jednej linii. */
.siatka--od-gory { margin-top: 2.5rem; align-items: start; }

/* Stopka na podstronach nie ma nad sobą treści, więc kreska oddzielająca
   i odstęp są zbędne. */
.stopka__dol--bez-kreski { margin-top: 0; padding-top: 0; border-top: 0; }

/* Polityka prywatności i treść ramki „do uzupełnienia" czytają się jak
   dokument, a nie jak komunikat — wyrównanie do środka im szkodzi. */
.pusty-stan--do-lewej { text-align: left; }

.zaokraglone { border-radius: var(--radius); }

/* Pole na uczulenia jest krótsze od domyślnych 8rem: to zwykle jedno zdanie
   albo „brak". Selektor musi być bardziej szczegółowy niż `.pole textarea`. */
.pole textarea.wpis--nizszy { min-height: 5rem; }

/* Pole-pułapka na roboty. NIE używa .tylko-dla-czytnikow — tamta klasa ukrywa
   wzrokowo, ale zostawia treść czytnikom ekranu, więc niewidoma klientka
   słyszała „zostaw to pole puste", mogła je wypełnić i jej zgłoszenie
   przepadało bez śladu. Tu pole jest poza ekranem i wyjęte z drzewa
   dostępności (aria-hidden), a tabindex="-1" trzyma je poza kolejnością
   klawiatury. Robot czytający HTML nadal je widzi i nadal się na nim łapie. */
.pulapka {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Przewijanie do pola po nieudanej walidacji celuje w samo pole, więc etykieta
   stojąca nad nim lądowała pod przyklejonym nagłówkiem — a to ona mówi, które
   pole jest do poprawienia. Dodatkowe odsunięcie sumuje się ze scroll-padding
   kontenera i wciąga etykietę z powrotem w widok. */
.formularz input,
.formularz select,
.formularz textarea { scroll-margin-top: 2.25rem; }

/* Adres e-mail salonu ma 32 znaki i na najwęższych telefonach nie mieści się
   w kolumnie. Łamanie po znakach zapobiega wypchnięciu strony w bok. */
.kontakt-dane__mail { word-break: break-all; }

/* Portret Ilony pochodzi z jej banera reklamowego, a tam użyteczna szerokość
   kończy się tam, gdzie zaczyna się wklejone logo — plik ma 608 px i więcej
   pikseli już z niego nie wyciągnę. Rozciągnięty na pełną kolumnę wychodził
   na 538 px, czyli praktycznie bez zapasu na ekrany o dużej gęstości i był
   miękki. Ograniczenie szerokości daje zapas ponad 1,5× i lepszą kompozycję:
   portret nie musi być tak duży jak blok tekstu obok. */
.o-mnie-portret { max-width: 380px; margin-inline: auto; }
@media (min-width: 900px) { .o-mnie-portret { margin-inline: 0 auto; } }