/* =========================================================
   Jedwabny Dotyk — arkusz stylów
   Mobile first. Breakpointy: 500px, 720px, 1000px (desktop), 1120px
   ========================================================= */

:root{
  /* Paleta „Ciepły piasek”. Złoto ma dwa tony: --gold niesie treść
     (ceny, przyciski, ikony), --gold-soft jest wyłącznie dekoracyjny. */
  --bg:        #FAF5EC;   /* tło strony */
  --sand:      #F1E7D5;   /* panele piaskowe */
  --soft:      #F5EEDF;   /* panele lżejsze */
  --cream:     #FFFCF6;   /* karty, pola */

  --gold:      #8F6238;   /* tekst, przyciski, ikony */
  --gold-lt:   #A8744A;   /* jaśniejszy stopień gradientu przycisku */
  --gold-soft: #C9A171;   /* dekoracja — nigdy tekst */
  --gold-wash: #F0E3CD;   /* kółka pod ikonami */
  --on-gold:   #FFFBF4;   /* tekst na złotym tle */

  --ink:       #2A2018;   /* nagłówki */
  --ink-2:     #3E3226;
  --text:      #4F4438;   /* treść */
  --muted:     #726657;   /* tekst pomocniczy */
  --faint:     #776A54;   /* stopka, podpowiedzi */
  --line:      rgba(143,98,56,.18);
  --line-2:    rgba(143,98,56,.34);

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --pad: 20px;          /* margines boczny */
  --radius: 26px;
  --radius-sm: 16px;
}

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

html{ scroll-behavior:smooth; scroll-padding-top:90px }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:300 15px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; background:var(--sand) }
svg{ display:block }
/* .hero__title to duże hasło w hero — po zmianie H1 jest akapitem, ale wygląda jak nagłówek */
h1,h2,h3,.hero__title{ font-family:var(--serif); font-weight:400; color:var(--ink); margin:0; letter-spacing:-.01em }
p{ margin:0 }
a{ color:var(--gold); text-decoration:none }
ul,ol{ margin:0; padding:0; list-style:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }

.wrap{ width:100%; max-width:1440px; margin-inline:auto; padding-inline:var(--pad) }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--gold); color:var(--on-gold); padding:12px 20px; border-radius:0 0 12px 0;
}
.skip:focus{ left:0 }

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:6px;
}

/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(250,245,236,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-block:10px;
}
.header__logo img{ height:56px; width:auto; object-fit:contain; background:none }

.nav{ display:none; align-items:center; gap:32px }
.nav a{ font:400 14px var(--sans); color:var(--text); transition:color .2s }
.nav a:hover{ color:var(--gold) }

/* ---------------------------------------------------------
   PRZYCISKI
   --------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:14px 28px; border-radius:32px;
  font:500 12.5px var(--sans); letter-spacing:.14em; text-transform:uppercase;
  text-align:center; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn svg{ width:17px; height:17px; flex:none }
.btn:hover{ transform:translateY(-1px) }

.btn--gold{
  background:linear-gradient(180deg,var(--gold-lt),var(--gold));
  color:var(--on-gold);
  box-shadow:0 10px 24px rgba(143,98,56,.28);
}
.btn--gold:hover{ color:var(--on-gold); box-shadow:0 14px 30px rgba(143,98,56,.34) }

.btn--ghost{
  background:var(--cream); border:1px solid var(--line-2); color:var(--text);
}
.btn--ghost:hover{ color:var(--ink); border-color:var(--gold) }

.btn--stack{ flex-direction:column; gap:2px; padding-block:10px }
.btn__row{ display:flex; align-items:center; gap:10px }
.btn__row svg{ width:16px; height:16px; flex:none }
.btn__sub{ font:300 12.5px var(--sans); letter-spacing:0; text-transform:none; color:var(--muted) }
.btn--wide{ display:flex; width:100% }
.btn--ig{ gap:11px; padding:10px 20px; text-transform:none; letter-spacing:.1em }
.ig-mark{
  width:30px; height:30px; border-radius:10px; flex:none;
  background:linear-gradient(135deg,#F0C27B,#C97B84);
  display:flex; align-items:center; justify-content:center;
}
.ig-mark svg{ width:16px; height:16px }

/* ---------------------------------------------------------
   SEKCJE / PANELE
   --------------------------------------------------------- */
/* Na telefonie odstęp między kaflami wszędzie ten sam: 24px —
   między sekcjami (12 + 12) i między kaflami w parze (.duo, gap). */
.section{ padding-block:12px }
.section--tight{ padding-block:12px }
.duo{ display:grid; grid-template-columns:minmax(0,1fr); gap:24px }

.panel{ padding:26px 20px; border-radius:var(--radius) }
.panel--sand{  background:var(--sand) }
.panel--soft{  background:var(--soft) }
.panel--cream{ background:var(--cream); border:1px solid var(--line) }
.panel h2{ font-size:28px; line-height:1.15 }

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */
.hero{ padding-block:8px 0; overflow:hidden }

/* Układ jak w makiecie: nagłówek i lead opływają zdjęcie wypuszczone
   w prawo poza krawędź ekranu, przyciski pełną szerokością pod spodem.
   Float zamiast siatki, bo `clear` na CTA sam znajduje dół zdjęcia —
   nic tu nie zależy od sztywnej wysokości nagłówka ani przycisków. */
.hero__inner{ position:relative }

.hero__text{ position:relative; z-index:2 }
/* padding wyrównuje odstęp nad tekstem z tym, który zostaje pod nim —
   tekst jest niższy niż zdjęcie obok, więc bez tego wisiał przy górnej krawędzi */
.hero__title{ font-size:clamp(28px, 8.8vw, 44px); line-height:1.08; padding-top:clamp(52px, 21vw, 84px) }
.hero__title em{ color:var(--gold); font-style:italic }
/* .hero__lead jest H1 — letter-spacing zeruje odstęp dziedziczony z reguły h1 */
.hero__lead{ margin-top:12px; font:300 14.5px/1.5 var(--sans); color:var(--text); letter-spacing:normal }
/* <picture> wokół zdjęcia hero nie może dokładać własnej linii tekstu */
.hero__media picture{ display:block }

.hero__media{
  float:right; position:relative; z-index:0; width:auto;
  /* zdjęcie wychodzi poza prawą krawędź, tak jak w makiecie */
  margin:0 calc(var(--pad) * -1 - 30px) 0 14px;
}
.hero__blob{
  position:absolute; right:-20px; top:10px;
  width:270px; height:270px;
  border-radius:50%;
  background:linear-gradient(160deg,#F3E7D2,#EBDCC0);
  z-index:0;
}
.hero__photo{
  position:relative; z-index:1;
  width:auto; height:292px; max-height:none; max-width:none; background:none;
  /* Dolna krawędź wycinanki zanika zamiast urywać się ostrą linią.
     Bez wsparcia dla masek zdjęcie po prostu zostaje pełne. */
  -webkit-mask-image:linear-gradient(to bottom, #000 88%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to bottom, #000 88%, rgba(0,0,0,0) 100%);
}

/* max-width, żeby na szerokim telefonie w poziomie (450–560px) przyciski
   nie rozciągały się przez cały ekran jak bannery */
.hero__cta{ clear:both; display:flex; flex-direction:column; gap:12px; padding-top:22px; max-width:400px }

/* Drobny podpis o zdjęciu poglądowym (AI). W HTML są dwie kopie:
   --mobile stoi pod zdjęciem, nad przyciskami (telefon),
   --side w kolumnie zdjęcia, tuż pod miejscem, gdzie zdjęcie się wygasza (od 500px).
   Ukryta kopia ma display:none, więc czytniki ekranu czytają tylko jedną. */
.hero__note{
  clear:both; position:relative; z-index:2; max-width:400px; padding-top:8px;
  font:300 11px/1.45 var(--sans); color:var(--faint);
}
.hero__note a{ color:var(--gold); border-bottom:1px solid var(--line-2) }
.hero__note--side{ display:none }
/* na telefonie podpis stoi po prawej, pod dziewczyną (zdjęcie jest dosunięte do prawej) */
/* margines ujemny wysuwa podpis w stronę środka zdjęcia, ale zostawia 8px do krawędzi ekranu */
.hero__note--mobile{ width:fit-content; margin:0 calc(8px - var(--pad)) 0 auto; text-align:center }
/* podpis już odsuwa przyciski od zdjęcia — mniejszy odstęp nad nimi */
.hero__note--mobile + .hero__cta{ padding-top:14px }

/* ---------------------------------------------------------
   BENEFITY
   --------------------------------------------------------- */
.benefits{
  display:grid; grid-template-columns:repeat(2,1fr); gap:22px 8px;
  padding:24px 14px; background:var(--sand); border-radius:var(--radius);
}
.benefits li{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center }
.benefits__icon{
  width:48px; height:48px; border-radius:50%; background:var(--gold-wash); flex:none;
  display:flex; align-items:center; justify-content:center;
}
.benefits__icon svg{ width:22px; height:22px }
.benefits__label{ font:400 13.5px/1.35 var(--sans); color:var(--ink-2) }

/* ---------------------------------------------------------
   UKŁAD "SPLIT" (nagłówek + treść)
   --------------------------------------------------------- */
.split__aside h2{ font-size:30px }
.split__lead{
  margin:6px 0 16px; font:300 15px/1.6 var(--sans); color:var(--muted);
}
/* Do 1000px CTA stoi nad suwakiem i zajmuje pełną szerokość */
.split--ba .split__aside .btn{ display:flex; width:100% }

/* ---------------------------------------------------------
   PRZED / PO
   --------------------------------------------------------- */
.ba{
  position:relative; margin-top:16px;
  aspect-ratio:3/2; border-radius:22px; overflow:hidden;
  touch-action:none; user-select:none; -webkit-user-select:none;
  cursor:ew-resize; background:var(--gold-wash);
}
.ba__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 20%; pointer-events:none;
}
.ba__img--before{ clip-path:inset(0 calc(100% - var(--p)) 0 0) }
.ba__bar{
  position:absolute; top:0; bottom:0; left:var(--p); width:2px;
  background:rgba(255,252,246,.95); transform:translateX(-1px); pointer-events:none;
}
.ba__knob{
  position:absolute; top:50%; left:var(--p);
  width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%;
  background:var(--cream); box-shadow:0 4px 14px rgba(42,32,24,.3);
  display:flex; align-items:center; justify-content:center; pointer-events:none;
}
.ba__knob svg{ width:16px; height:16px }
.ba__tag{
  position:absolute; top:12px; padding:6px 14px; border-radius:20px;
  background:rgba(255,252,246,.92);
  font:500 10px var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--text);
  pointer-events:none;
}
.ba__tag--l{ left:12px }
.ba__tag--r{ right:12px }
/* niewidzialny uchwyt — obsługa klawiatury i czytników ekranu */
.ba__handle{ position:absolute; inset:0; width:100%; cursor:ew-resize }
.ba__hint{
  margin-top:12px; text-align:center;
  font:300 12.5px var(--sans); color:var(--faint);
}

/* ---------------------------------------------------------
   OFERTA
   --------------------------------------------------------- */
.offer{ display:flex; flex-direction:column; gap:14px; margin-top:16px }

.offer__group{ padding:18px 18px 14px; background:var(--cream); border-radius:18px }
.offer__title{
  display:flex; align-items:center; gap:10px; margin:0 0 10px;
  font-family:var(--sans); font-weight:500; font-size:11.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
}
.offer__title svg{ width:18px; height:18px; flex:none }

.offer__list{ display:flex; flex-direction:column }
.offer__list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--line);
  font:300 14.5px var(--sans); color:var(--ink-2);
}
.offer__list li:last-child{ border-bottom:0; padding-bottom:0 }
.offer__price{ font:500 14.5px var(--sans); color:var(--gold); white-space:nowrap }

/* Grupa „Dodatkowo” — tylko 2 pozycje, więc zamiast siedzieć w siatce
   jako pół kafla obok pustego miejsca, rozciąga się na całą szerokość,
   a lista układa się w dwie kolumny, gdy jest na nie miejsce.
   auto-fit jest tu bezpieczny: dwa elementy, żaden nie rozpina się na całość,
   więc puste ścieżki się zwijają i nie powstanie pusta trzecia kolumna. */
.offer__group--wide .offer__list{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(290px,1fr)); gap:0 24px;
}
/* obok siebie kreski rozdzielające tracą sens */
.offer__group--wide .offer__list li{ border-bottom:0 }

/* promocja miesiąca */
.offer__promo{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
  padding:16px 18px; border-radius:18px;
  background:linear-gradient(120deg,#F2E6CE,#EBDBBD);
}
.offer__promo-tag{
  flex:none; padding:6px 14px; border-radius:20px; background:var(--cream);
  font:500 10.5px var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
}
.offer__promo ul{ display:flex; flex-wrap:wrap; gap:4px 20px }
.offer__promo li{
  display:flex; align-items:center; gap:8px;
  font:300 14px var(--sans); color:var(--text);
}
.offer__promo li::before{ content:'✦'; color:var(--gold); font-size:10px }

/* ---------------------------------------------------------
   KROKI
   --------------------------------------------------------- */
.steps{ display:flex; flex-direction:column; gap:14px; margin-top:16px }
.steps li{ display:flex; gap:12px; align-items:flex-start }
.steps__num{
  width:28px; height:28px; flex:none; border-radius:50%; background:var(--gold-wash);
  color:var(--ink-2); font:500 13px/28px var(--sans); text-align:center;
}
.steps p{ margin-top:3px; font:300 14px/1.5 var(--sans); color:var(--text) }

/* ---------------------------------------------------------
   SOCIAL
   --------------------------------------------------------- */
.social__text p{ margin:8px 0 18px; font:300 14.5px/1.55 var(--sans); color:var(--muted) }
/* trzy kafle widać na każdym ekranie — na telefonie pod przyciskiem Instagrama */
.social__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:18px }
/* Zdjęcia są kwadratowe — przy 190px kadr robił się wąskim paskiem */
.social__grid img{ width:100%; height:140px; object-fit:cover; object-position:50% 30%; border-radius:14px }
.social__grid img:last-child{ object-position:70% 30% }

/* ---------------------------------------------------------
   LOKALIZACJA
   --------------------------------------------------------- */
.pin{ margin:10px 0 14px; display:flex; align-items:center; gap:7px; font:300 14.5px var(--sans); color:var(--muted) }
.pin svg{ width:15px; height:15px; flex:none }

/* Mapka — pokazuje się tylko w trybie „mapa” (przełącznik w panelu,
   sekcja „Dojazd”). W trybie mobilnym kafelek ma zamiast niej notkę niżej,
   a ta reguła po prostu nie ma czego stylować — nie kasuj jej.
   Kadr jest przycinany, żeby wysoka mapa nie rozpychała kafla w pionie. */
.map{
  display:block; width:100%; margin-bottom:16px;
  aspect-ratio:900/691; max-height:300px; object-fit:cover;
  border-radius:16px; border:1px solid var(--line);
}

/* notka o dojeździe mobilnym */
.loc-note{
  margin-bottom:16px; padding:14px 16px; border-radius:16px;
  background:var(--cream); border:1px solid var(--line);
  font:300 14px/1.55 var(--sans); color:var(--text);
}
.loc-note__tag{
  display:inline-block; margin-right:8px; padding:4px 11px; border-radius:20px;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold)); color:var(--on-gold);
  font:500 10px var(--sans); letter-spacing:.16em; text-transform:uppercase;
  vertical-align:1px;
}


/* ---------------------------------------------------------
   FAQ
   --------------------------------------------------------- */
.faq{ display:flex; flex-direction:column; margin-top:14px }
.faq__item{ border-bottom:1px solid var(--line) }
.faq__item:last-child{ border-bottom:0 }
.faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  width:100%; padding:16px 2px; text-align:left;
  font:400 15px/1.4 var(--sans); color:var(--ink-2);
}
.faq__sign{
  font:300 22px/1 var(--sans); color:var(--gold); flex:none;
  transition:transform .25s ease;
}
.faq__q[aria-expanded="true"] .faq__sign{ transform:rotate(45deg) }
/* Rozwijanie oparte wyłącznie o CSS — bez mierzenia wysokości w JS.
   `visibility` chowa treść przed czytnikami ekranu po zakończeniu zwijania. */
.faq__a{
  overflow:hidden; max-height:0; visibility:hidden; opacity:0;
  transition:max-height .3s ease, opacity .3s ease, visibility 0s linear .3s;
}
.faq__q[aria-expanded="true"] + .faq__a{
  max-height:420px; visibility:visible; opacity:1;
  transition:max-height .3s ease, opacity .3s ease, visibility 0s;
}
.faq__a p{ padding:0 2px 16px; font:300 14px/1.55 var(--sans); color:var(--muted) }

/* ---------------------------------------------------------
   FINAŁOWE CTA
   --------------------------------------------------------- */
.final{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:30px 22px; border-radius:var(--radius); text-align:center;
  background:linear-gradient(160deg,#F2E6CE,#EBDBBD);
}
.final__logo{ height:64px; width:auto; object-fit:contain; background:none }
.final h2{ font-size:26px; line-height:1.2 }
.final p{ margin:8px 0 18px; font:300 14px/1.5 var(--sans); color:var(--text) }
.final .btn{ display:flex }

/* ---------------------------------------------------------
   REGULAMIN
   Układ jak w grafice: nagłówek na środku, punkty z ikoną w kółku
   i tytułem na jasnej belce, na dole ramka z podsumowaniem.
   Telefon: jedna kolumna. Od 720px: dwie kolumny (1–4 i 5–8).
   --------------------------------------------------------- */
.rules__head{ text-align:center; max-width:620px; margin-inline:auto }
.rules .rules__title{
  font-size:30px; line-height:1.1; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);
}
.rules__ornament{
  display:flex; align-items:center; gap:14px; margin:12px auto 0;
  color:var(--gold-soft); font-size:13px; line-height:1;
}
/* cienkie linie po obu stronach serduszka */
.rules__ornament::before,
.rules__ornament::after{ content:''; flex:1; height:1px; background:var(--line-2) }
.rules__thanks{
  margin-top:14px; font:italic 400 24px/1.25 var(--serif); color:var(--gold);
}
.rules__intro{ margin-top:8px; font:300 14.5px/1.6 var(--sans); color:var(--text) }

.rules__list{ margin-top:24px }
.rules__item{
  display:flex; gap:14px; align-items:flex-start;
  padding:16px 0; border-bottom:1px solid var(--line);
}
.rules__item:last-child{ border-bottom:0 }
.rules__icon{
  width:56px; height:56px; flex:none; border-radius:50%; background:var(--gold-wash);
  display:flex; align-items:center; justify-content:center;
}
.rules__icon img{ width:34px; height:34px; background:none }
.rules__body{ flex:1; min-width:0 }
.rules__name{
  display:block; padding:5px 12px; border-radius:8px;
  background:linear-gradient(90deg,var(--gold-wash),rgba(240,227,205,.25));
  font:500 12.5px/1.35 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2);
}
.rules__num{ color:var(--gold); margin-right:2px }
.rules__body p{ margin-top:9px; padding-inline:2px; font:300 14.5px/1.6 var(--sans); color:var(--text) }
.rules__body a{ font-weight:400; border-bottom:1px solid var(--line-2) }

.rules__foot{
  position:relative; margin-top:34px; padding:34px 18px 16px;
  border:1px solid var(--line-2); border-radius:22px; text-align:center;
}
/* ikona kalendarza siedzi na górnej krawędzi ramki */
.rules__foot-icon{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  width:48px; height:48px; border-radius:50%;
  background:var(--cream); border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center;
}
.rules__foot-icon img{ width:28px; height:28px; background:none }
.rules__foot p{
  font:500 17px/1.35 var(--serif); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2);
}
.rules__foot p span{ font-size:.86em; color:var(--text) }
.rules__foot .rules__ornament{ max-width:220px; margin-top:12px }

/* ---------------------------------------------------------
   STOPKA
   --------------------------------------------------------- */
.site-footer{ padding-block:28px 34px }
.site-footer__inner{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center; font:300 12.5px var(--sans); color:var(--faint);
}
.site-footer__links{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 22px }
.site-footer a{ color:var(--gold) }
.site-footer a:hover{ color:var(--ink) }

/* =========================================================
   MAŁY TABLET / SZEROKI TELEFON  ≥ 500px
   Tu hero przechodzi z układu mobilnego (float) na dwie kolumny.
   Float rozjeżdżał się powyżej ~490px: przyciski szły pod zdjęcie,
   a obok tekstu zostawał pas pustki na całą jego wysokość.
   Kolumna tekstu jest szersza niż połowa, bo musi pomieścić
   „Napisz SMS i umów wizytę” w jednej linii (~280px).
   ========================================================= */
@media (min-width:500px){
  .hero__inner{
    display:grid; grid-template-columns:58fr 42fr; gap:20px; align-items:center;
    padding-bottom:56px;
  }
  .hero__text{ display:block; grid-column:1; grid-row:1 }
  /* dolna granica dobrana tak, by „i lśniące włosy” mieściło się
     w wąskiej kolumnie w dwóch liniach; górna zgrana z desktopem,
     żeby przy 1000px nagłówek nie zmalał przy poszerzaniu okna */
  .hero__title{ font-size:clamp(34px, 6vw, 56px); line-height:1.06; padding-top:0 }
  .hero__lead{ margin-top:16px; font-size:15.5px }
  /* przyciski szerokie na najdłuższy z nich, nie na całą kolumnę */
  .hero__cta{ clear:none; padding-top:24px; gap:12px; width:fit-content; max-width:100% }
  /* przycisk „Napisz SMS i umów wizytę” potrzebuje ok. 290px przy pełnym kroju;
     w tym zakresie kolumna jest węższa, więc lekko go ściskamy */
  .hero__cta .btn{ padding-inline:20px; font-size:11.5px; letter-spacing:.1em }

  .hero__media{
    float:none; grid-column:2; grid-row:1; display:flex;
    margin:0; justify-content:flex-end; align-items:flex-end;
    /* wysokość związana z wysokością zdjęcia: gdy media było stałe 340px,
       to powyżej ~655px zdjęcie wyrastało ponad kontener i overflow:hidden
       ścinał czubek głowy */
    height:clamp(270px, 58vw - 40px, 360px);
  }
  .hero__blob{ left:auto; right:-24px; top:0; transform:none;
               width:clamp(230px, 58vw - 80px, 320px); height:clamp(230px, 58vw - 80px, 320px) }
  .hero__photo{ height:clamp(310px, 58vw, 400px); margin-bottom:-40px }

  /* podpis w kolumnie zdjęcia; margin-top przeskakuje część zdjęcia
     wystającą pod kontenerem (40px minus odstęp siatki) */
  .hero__inner{ padding-bottom:24px }
  .hero__note--mobile{ display:none }
  /* Zdjęcie stoi tu przy prawej krawędzi kolumny, więc podpis też: ma szerokość
     zdjęcia (wysokość × 533/850) plus 40px zapasu i wyśrodkowany tekst —
     dzięki temu wypada na środku pod dziewczyną, a nie przy prawym brzegu. */
  .hero__note--side{ display:block; grid-column:2; grid-row:2; max-width:none; padding-top:0; margin-top:26px;
                     justify-self:end; width:calc(clamp(310px, 58vw, 400px) * .627 + 40px); margin-right:-20px;
                     text-align:center; font-size:11.5px }
}

/* =========================================================
   TABLET  ≥ 720px
   ========================================================= */
@media (min-width:720px){
  :root{ --pad:48px }

  .section{ padding-block:14px }
  .panel{ padding:36px }

  .benefits{ grid-template-columns:repeat(4,1fr); gap:14px; padding:32px 18px }
  .benefits li + li{ border-left:1px solid var(--line) }
  .benefits__icon{ width:56px; height:56px }
  .benefits__icon svg{ width:26px; height:26px }
  .benefits__label{ font-size:15px }

  /* dwie grupy cenowe obok siebie, promocja na całą szerokość */
  .offer{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
  .offer__promo{ grid-column:1 / -1 }
  .offer__group--wide{ grid-column:1 / -1 }
  .offer__group{ padding:22px 22px 18px }
  .offer__list li{ padding:10px 0; font-size:15px }
  .offer__price{ font-size:15px }


  /* hero rośnie — układ dwukolumnowy włączył się już przy 500px */
  .hero__cta .btn{ padding-inline:28px; font-size:12.5px; letter-spacing:.14em }
  .hero__inner{ padding-bottom:30px }
  .hero__note{ margin-top:36px }
  .hero__note--side{ width:calc(470px * .627 + 40px) }   /* zdjęcie ma tu 470px wysokości */
  .hero__lead{ margin-top:18px; font-size:17px }
  .hero__cta{ padding-top:28px }
  .hero__media{ height:420px }
  .hero__blob{ right:-30px; width:380px; height:380px }
  .hero__photo{ height:470px; margin-bottom:-50px }

  /* minmax(0,…) — bez tego wewnętrzna siatka „Obserwuj mnie” (kolumna 300px)
     rozpychała swoją kolumnę i kafle wychodziły nierówne */
  /* Obie pary kafli (Jak umówić + Obserwuj, Dojazd + FAQ) mają te same kolumny,
     więc krawędzie wypadają w jednej linii, a stretch wyciąga krótszy kafel
     z pary do wysokości dłuższego. */
  .duo{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:22px; align-items:stretch }

  .site-footer__inner{ flex-direction:row; justify-content:space-between; text-align:left }

  /* regulamin: dwie kolumny z pionową kreską, punkty 1–4 po lewej, 5–8 po prawej */
  .rules .rules__title{ font-size:40px }
  .rules__ornament{ max-width:520px }
  .rules__thanks{ font-size:28px }
  .rules__list{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:repeat(4,auto); grid-auto-flow:column; column-gap:48px;
    position:relative;
  }
  .rules__list::before{
    content:''; position:absolute; top:16px; bottom:16px; left:50%; width:1px; background:var(--line);
  }
  /* w każdej kolumnie ostatni punkt bez kreski pod spodem */
  .rules__item:nth-child(4){ border-bottom:0 }
  .rules__foot{ padding:40px 36px 20px }
  .rules__foot p{ font-size:21px }
}

/* =========================================================
   DESKTOP  ≥ 1000px
   ========================================================= */
@media (min-width:1000px){
  :root{ --pad:64px; --radius:30px }

  body{ font-size:16px }

  .nav{ display:flex }
  .header__inner{ padding-block:16px }
  .header__logo img{ height:88px }

  .hero{ padding-block:12px 0 }
  /* Reset układu mobilnego — desktop wraca do dwóch zwykłych kolumn */
  .hero__inner{
    --krag:clamp(460px, 40vw, 620px);   /* średnica koła — patrz .hero__media niżej */
    display:grid; grid-template-columns:45fr 55fr; gap:24px; align-items:center;
    padding-bottom:36px;
  }
  /* podpis pod zdjęciem, na środku kolumny; margin-top przeskakuje
     wygaszoną końcówkę zdjęcia (13% koła) minus odstęp siatki */
  .hero__note--side{ margin-top:calc(var(--krag) * .13 - 14px); text-align:center; font-size:12px;
                     justify-self:center; width:auto; margin-right:0; max-width:460px }
  .hero__text{ display:block; max-width:560px; grid-column:1; grid-row:1 }
  .hero__title{ font-size:clamp(56px, 5.4vw, 72px); line-height:1.05 }
  .hero__lead{ margin-top:24px; font-size:19px }
  .hero__cta{ flex-direction:row; align-items:center; gap:16px; margin-top:36px; padding-top:0; flex-wrap:wrap }
  .hero__cta .btn{ padding-inline:32px }
  .hero__cta .btn--stack{ padding-block:12px }

  /* float wyłączony — na desktopie media wraca do drugiej kolumny siatki.
     Koło i zdjęcie są wyśrodkowane w kolumnie i liczone z jednej zmiennej
     --krag, więc rosną razem, w tych samych proporcjach, zamiast uciekać
     do prawej krawędzi na szerokich ekranach. */
  .hero__media{ float:none; grid-column:2; grid-row:1; display:flex;
                margin:0; max-width:none; height:var(--krag); justify-content:center; align-items:flex-end }
  .hero__blob{ left:50%; right:auto; top:0; width:var(--krag); height:var(--krag); transform:translateX(-50%) }
  /* Zdjęcie wychodzi ok. 13% poniżej kręgu — tam działa wygaszenie z maski,
     więc przejście dzieje się już na jednolitym tle strony. */
  .hero__photo{ height:calc(var(--krag) * 1.13); max-height:none; margin:0 0 calc(var(--krag) * -.13) }

  .section{ padding-block:14px }
  .panel{ padding:44px }
  .panel h2{ font-size:36px }

  /* split: nagłówek po lewej, treść po prawej */
  .split{ display:grid; grid-template-columns:320px 1fr; gap:48px; align-items:center }
  .split__aside h2{ font-size:46px }
  .split__lead{
    margin:18px 0 26px; padding-bottom:22px;
    border-bottom:1px solid rgba(143,98,56,.22); font-size:16px;
  }
  .split--ba .split__aside .btn{ display:inline-flex; width:auto }
  /* kolumna treści zwęża się tu do ~400px (obok 320px nagłówka),
     więc cennik wraca na jedną kolumnę — inaczej nazwy się łamią */
  .offer{ grid-template-columns:1fr }
  .split .offer{ margin-top:0 }

  .ba{ margin-top:0; aspect-ratio:auto; height:420px }
  .ba__knob{ width:48px; height:48px; margin:-24px 0 0 -24px }
  .ba__knob svg{ width:18px; height:18px }
  .ba__tag{ top:18px; padding:8px 18px; font-size:11px; letter-spacing:.18em }
  .ba__tag--l{ left:18px }
  .ba__tag--r{ right:18px }
  .ba__hint{ display:none }

  .duo{ gap:24px }

  /* galeria pod tekstem — obok mieści się dopiero od 1120px (patrz niżej) */
  .social__text p{ margin:14px 0 26px; font-size:15px }

  .steps{ gap:20px; margin-top:26px }
  .steps__num{ width:32px; height:32px; font:500 14px/32px var(--sans) }
  .steps p{ font-size:15px }

  .faq__q{ padding:18px 4px; font-size:16px }

  /* nadal układ pionowy — w jednym wierszu wszystko mieści się dopiero od 1120px */
  .final{ gap:20px; padding:44px 56px;
          background:linear-gradient(120deg,#F2E6CE,#EBDBBD) }
  .final__logo{ height:clamp(72px, 6.5vw, 96px) }
  .final h2{ font-size:clamp(30px, 3vw, 38px) }
  .final p{ font-size:16px }
  .final .btn{ padding:20px 34px }

  .site-footer{ padding-block:34px 40px }
  .site-footer__inner{ font-size:13px }
}

/* =========================================================
   SZEROKI DESKTOP  ≥ 1120px
   ========================================================= */
@media (min-width:1120px){
  /* dopiero tu kolumna treści jest dość szeroka na dwie grupy cenowe */
  .offer{ grid-template-columns:1fr 1fr }

  /* dopiero tu galeria mieści się obok tekstu bez rozpychania panelu */
  .social{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:36px; align-items:center }
  .social__grid{ margin-top:0 }

  /* trzy osobne elementy: logo do lewej, tekst na środek, przycisk do prawej */
  .final{ flex-direction:row; align-items:center; justify-content:space-between;
          gap:40px; text-align:left }
  .final p{ margin:8px 0 0 }
  .final .btn{ flex:none }
}

/* =========================================================
   DOSTĘPNOŚĆ / DRUK
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}