/* =========================================================================
   Sekcje strony głównej (dokument 04 — numeracja sekcji jak w dokumencie)
   ========================================================================= */

:root {
  /* odległość od krawędzi kontenera do krawędzi okna i ile wolno „wyjść” poza kontener */
  --edge: max(var(--gutter), calc((100vw - var(--container)) / 2));
  --bleed: min(var(--edge), var(--bleed-max));
}

/* =========================================================================
   2. HERO
   ========================================================================= */
.hero {
  position: relative;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  /* hero kończy się 90 px nad dolną krawędzią okna, więc cały pas liczników mieści się w pierwszym ekranie,
     o ile treść hero się zmieści (od około 900 px wysokości okna); na niższych ekranach hero rośnie
     razem z treścią, a dolna część pasa jest tuż pod krawędzią ekranu */
  min-height: clamp(680px, calc(100svh - 90px), 830px);
  padding-top: calc(var(--nav-h) + 16px);
  /* wysokość zdjęcia hero — na desktopie ta sama wysokość wyznacza kolumnę z nagłówkiem */
  --hero-frame-h: clamp(420px, calc(100svh - 390px), 600px);
}
/* delikatna, ciepła poświata pod kompozycją zdjęciową */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto auto;
  width: 58%;
  height: 92%;
  background: radial-gradient(60% 55% at 70% 40%, rgba(253, 235, 220, 0.75), rgba(253, 235, 220, 0) 70%);
  pointer-events: none;
}
.hero__grid {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: center;
  /* odstęp nad pasem liczników maleje na niższych ekranach (48 px przy wysokości od 960 px) */
  padding-bottom: clamp(32px, 5svh, 48px);
}
.hero__content {
  position: relative;
  z-index: 2;
  grid-column: 1 / span 7;
  display: grid;
  justify-items: start;
  gap: 20px;
  padding-block: 8px;
}
.hero__title { max-width: 760px; }
.hero__title .accent { white-space: nowrap; }
.hero__lead { max-width: 700px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 4px; }

/* mini-info: stos awatarów + zdanie + ocena */
.hero-proof {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
  /* tekst kończy się przed okrągłym przyciskiem na środku pasa liczników */
  max-width: calc(min(100vw - 2 * var(--gutter), var(--container)) / 2 - 116px);
}
.avatars { display: flex; flex: none; padding-left: 10px; }
.avatars li { width: 36px; height: 36px; margin-left: -10px; border-radius: 50%; border: 2px solid var(--c-white); overflow: hidden; background: var(--c-sand); }
.avatars img { width: 100%; height: 100%; object-fit: cover; }
.hero-proof__text { display: grid; gap: 4px; }
.hero-proof__line { font-size: 15px; line-height: 1.45; color: var(--c-text); }
.hero-proof__line strong { color: var(--c-black); font-weight: 600; }
.hero-proof__rating { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; color: var(--c-muted); }
.hero-proof__rating strong { color: var(--c-black); }
.stars { display: inline-flex; gap: 2px; color: var(--c-orange); }
.stars .ic { width: 15px; height: 15px; stroke-width: 1.25; }

/* kompozycja zdjęciowa */
.hero__media {
  position: relative;
  grid-column: 8 / span 5;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  padding-top: 56px;
}
/* zdjęcie kończy się na prawej krawędzi kontenera — tam gdzie pas liczników i przycisk w pasku nawigacji
   (uwaga Wilka z 27.10: zdjęcie wychodziło poza czarny pas, a treść po lewej nie, więc kompozycja była
   niesymetryczna); wcześniej zdjęcie wychodziło do 160 px poza kontener */
.hero__photo {
  position: relative;
  z-index: 1;
  width: 100%;
}
.hero__frame {
  position: relative;
  height: var(--hero-frame-h);
  border-radius: var(--r-band);
  overflow: hidden;
  background: var(--c-sand);
}
.hero__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 56% 45%; }

/* pigułka „Biuro rachunkowe / Doradztwo podatkowe / Schiphol-Rijk”: nad nagłówkiem na telefonie,
   tablecie i wąskim desktopie, a od 1280 px — nad zdjęciem, w jednej linii, od lewej krawędzi zdjęcia */
.hero__pill-row { display: none; }
@media (min-width: 1280px) {
  .hero__pill--inline { display: none; }
  .hero__media { flex-direction: column; justify-content: flex-end; align-items: flex-start; padding-top: 8px; }
  /* rząd pigułki ma szerokość zdjęcia; krój pigułki skaluje się do tej szerokości (jednostki cqi),
     więc pigułka zawsze mieści się w jednej linii nad zdjęciem i nie wychodzi poza kontener */
  .hero__pill-row {
    display: block;
    align-self: stretch;
    position: relative;
    z-index: 2;
    margin-bottom: 14px;
    container-type: inline-size;
  }
  .hero__pill--media {
    display: inline-flex;
    white-space: nowrap;
    font-size: clamp(11px, 2.42cqi, 14px);
    letter-spacing: 0.06em;
  }
  .hero__pill--media .sep { margin-inline: 0.1em; }
}
@media (min-width: 1100px) {
  /* kolumna z nagłówkiem ma wysokość zdjęcia i stoi na tej samej linii co zdjęcie: nagłówek zaczyna się
     na wysokości górnej krawędzi zdjęcia, a mini-info kończy się na wysokości jego dolnej krawędzi */
  .hero__grid { align-items: end; }
  .hero__content {
    align-self: end;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: var(--hero-frame-h);
    padding-block: 0;
  }
  .hero__title { margin-top: -0.17em; } /* górna krawędź wielkich liter równo z górną krawędzią zdjęcia */
  .hero-proof { margin-top: auto; padding-top: 6px; }
}
/* duży sygnet w tle: wystaje zza lewego górnego narożnika zdjęcia (zdjęcie „siedzi” w liściu) */
.hero__sygnet-wrap {
  position: absolute;
  z-index: 0;
  left: -19%;
  top: 0;
  width: 62%;
  pointer-events: none;
}
.hero__sygnet { width: 100%; height: auto; fill: var(--c-orange-soft); overflow: visible; }
.hero__infobox {
  position: absolute;
  z-index: 2;
  left: -44px;
  bottom: 44px;
  padding-right: 22px;
  /* bez przejścia na transform — wejście infoboxu prowadzi sekwencja hero (GSAP) */
  transition: translate var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-ui);
}
.hero__infobox:hover { box-shadow: var(--shadow-hover); translate: 0 -2px; }

/* pas liczników */
.hero__band-wrap { position: relative; z-index: 3; }
.hero-band {
  position: relative;
  height: 150px;
  margin-bottom: -90px;
  padding-inline: 40px;
  border-radius: var(--r-band);
  background: var(--c-dark);
  display: grid;
  align-items: center;
}
.hero-band__stats {
  display: grid;
  grid-template-columns: 1fr 1fr 210px 1fr 1fr;
  align-items: center;
}
.stat { display: grid; justify-items: center; gap: 8px; text-align: center; padding-inline: 8px; }
.stat__num {
  display: inline-flex;
  align-items: baseline;
  color: var(--c-orange);
  font-family: var(--font-display);
  font-size: var(--fs-counter);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat__suffix { font-size: 0.62em; margin-left: 2px; letter-spacing: 0; }
.stat__label { color: rgba(255, 255, 255, 0.7); font-size: 15px; line-height: 1.35; }
.stat__label .sep { color: var(--c-orange); }
.stat--rotor { height: 1px; }
.hero-band .rotor { position: absolute; left: calc(50% - 90px); top: -90px; z-index: 2; }

/* =========================================================================
   3. MARQUEE
   ========================================================================= */
/* Dwa rzędy (uwaga Wilka z 26.10: „wszystko zlane i pomieszane”): u góry usługi większym krojem nagłówków
   z ikonami, u dołu w przeciwną stronę formy działalności i podatki jako małe pigułki z etykietami grup. */
.marquee {
  margin-top: calc(90px + 72px);
  display: grid;
  overflow: hidden;
  background: var(--c-cream);
  border-block: 1px solid #F1EBE2;
}
.marquee__row { display: flex; align-items: center; overflow: hidden; }
.marquee__row--services { height: 84px; }
.marquee__row--terms { height: 54px; border-top: 1px solid #F1EBE2; background: rgba(255, 255, 255, 0.55); }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__list { display: flex; align-items: center; flex: none; }
.mq-service {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-inline: 20px 36px;
  color: var(--c-black);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.mq-service__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-white);
  box-shadow: inset 0 0 0 1px #EFE6DA;
  color: var(--c-orange-deep);
}
.mq-service__icon .ic { width: 20px; height: 20px; }
.mq-group {
  padding: 0 14px 0 34px;
  color: var(--c-orange-text);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mq-term {
  display: inline-flex;
  align-items: center;
  height: 30px;
  margin-right: 8px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line);
  background: var(--c-white);
  color: var(--c-black);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* Wariant B — pas drukowany z notesu (pomarańcz + czarny tekst) */
.marquee--print { background: var(--c-orange-print); border-color: var(--c-orange-print); }
.marquee--print .marquee__row--terms { background: rgba(255, 255, 255, 0.16); border-color: rgba(43, 42, 40, 0.12); }
.marquee--print .mq-service__icon { background: rgba(255, 255, 255, 0.92); box-shadow: none; color: var(--c-black); }
.marquee--print .mq-group { color: var(--c-black); }
.marquee--print .mq-term { border-color: rgba(43, 42, 40, 0.18); background: rgba(255, 255, 255, 0.9); }
/* bez skryptu: pętla CSS, dolny rząd w przeciwną stronę */
html:not(.js-motion) .marquee__track { animation: marquee 56s linear infinite; }
html:not(.js-motion) .marquee__row--terms .marquee__track { animation-duration: 44s; animation-direction: reverse; }
html:not(.js-motion) .marquee:hover .marquee__track { animation-play-state: paused; }

/* =========================================================================
   4. DLA KOGO — trzy ścieżki obok siebie
   Zdjęcie i biała karta, która zachodzi na jego dolny brzeg. Na hover zdjęcie powoli się przybliża,
   karta unosi się o kilka pikseli, a numer ścieżki robi się pomarańczowy. Pozycje listy odhacza
   motion/paths.js (rysowanie znaczników po kolei i wypełnianie pomarańczowej linii).
   ========================================================================= */
.paths__grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  align-items: stretch;
}
.path-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.path-card:focus-visible { outline-offset: 6px; border-radius: var(--r-photo); }
.path-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-photo);
  background: var(--c-sand);
}
.path-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 1.1s var(--e-image);
}
.path-card__num {
  position: absolute;
  left: 18px;
  top: 18px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--c-black);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 24px -14px rgba(29, 28, 26, 0.6);
  transition: background-color var(--t-base) var(--e-out), color var(--t-base) var(--e-out);
}
.path-card__card {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin: -72px 16px 0;
  padding: 30px 28px 28px;
  border-radius: 18px;
  background: var(--c-white);
  box-shadow: var(--shadow-float);
  transition: translate 0.5s var(--e-out), box-shadow 0.5s var(--e-out);
}
/* pomarańczowa linia nad tytułem: wypełnia się razem z odhaczanymi pozycjami listy */
.path-card__progress {
  position: absolute;
  left: 28px;
  right: 28px;
  top: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--c-orange);
  transform-origin: left center;
}
.path-card__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; color: var(--c-black); }
.path-card__text { font-size: 15.5px; line-height: 1.6; color: var(--c-text); }
.path-card__card .btn { margin-top: auto; }
.path-card__card .checklist { margin-bottom: 8px; }
@media (hover: hover) {
  .path-card:hover .path-card__media img { transform: scale(1.06); }
  .path-card:hover .path-card__card { translate: 0 -6px; box-shadow: var(--shadow-hover); }
  .path-card:hover .path-card__num { background: var(--c-orange); color: var(--c-black); }
}

/* 1024–1279 px: trzy kolumny byłyby za wąskie, więc ścieżki stoją jedna pod drugą jako poziome karty —
   zdjęcie po lewej, karta po prawej zachodzi na jego prawą krawędź */
@media (min-width: 1024px) and (max-width: 1279px) {
  .paths__grid { grid-template-columns: 1fr; gap: 28px; }
  .path-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
  .path-card__media { grid-area: 1 / 1; aspect-ratio: auto; min-height: 320px; }
  .path-card__card { grid-area: 1 / 2; align-self: center; margin: 28px 0 28px -72px; }
  .path-card__card .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; }
}

.checklist { display: grid; gap: 12px; }
.checklist li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  color: var(--c-black);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.45;
}
.checklist .ic { width: 20px; height: 20px; margin-top: 1px; color: var(--c-check); stroke-width: 2.25; }
/* znacznik „odhaczenia” jako ścieżka SVG w kodzie strony, żeby dało się go rysować */
.checklist--ticks li { gap: 12px; }
.tick {
  width: 22px;
  height: 22px;
  margin-top: 0;
  padding: 3px;
  border-radius: 50%;
  background: var(--c-orange-soft);
  overflow: visible;
}
.tick__path { fill: none; stroke: var(--c-check); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* =========================================================================
   5. USŁUGI
   ========================================================================= */
.services { overflow: hidden; }
.services .container { position: relative; }
.services__carousel { margin-top: 64px; }
.services__track { --card-w: 417px; }
.services__nav { display: none; margin-top: 24px; justify-content: center; }
.service-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.service-card h3 { margin-top: 14px; }
.service-card p { font-size: 16px; line-height: 1.65; }
.service-card__link {
  position: static;
  margin-top: auto;
  padding-top: 10px;
  text-decoration: underline 2px transparent;
  text-underline-offset: 6px;
  transition: text-decoration-color var(--t-base) var(--e-ui);
}
.service-card__link::after { content: none; }
.service-card__link::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-card); }
.service-card:hover .service-card__link { text-decoration-color: var(--c-orange); }
.services__more { margin-top: 48px; text-align: center; }

@media (min-width: 768px) {
  .services__track {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    scroll-snap-type: none;
  }
  .services__track .carousel__item.is-outside { opacity: 1; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .services__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================================
   6. JAK TO DZIAŁA
   ========================================================================= */
.steps__wrap { position: relative; margin-top: 72px; }
.steps__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.steps__base { stroke: var(--c-line); }
.steps__draw { stroke: var(--c-orange); }
.steps__list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}
.step { display: grid; justify-items: start; align-content: start; gap: 12px; padding-right: 20px; }
.step__node {
  position: relative;
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--c-orange-soft);
}
.step__ring {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid var(--c-orange);
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 0.5s var(--e-out), transform 0.7s var(--e-out);
}
.step.is-reached .step__ring { opacity: 1; transform: scale(1); }
.step__num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--c-orange-text);
  letter-spacing: -0.01em;
}
.step__title { font-size: var(--fs-h4); line-height: var(--lh-h4); }
.step p { font-size: 16px; line-height: 1.6; max-width: 280px; }

/* =========================================================================
   7. ABONAMENTY
   ========================================================================= */
.pricing .container { position: relative; }
.pricing__toggle { display: flex; justify-content: center; margin-top: 40px; }
.pricing__grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  column-gap: var(--gap);
  row-gap: 0;
  align-items: stretch;
}
.plan {
  grid-row: span 5;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 22px;
  align-content: start;
  padding: 36px 32px 34px;
}
.plan:not(.plan--featured):hover {
  translate: 0 -4px;
  box-shadow: var(--shadow-hover);
  border-color: rgba(239, 127, 27, 0.6);
}
.plan__head { display: grid; gap: 8px; align-content: start; padding-right: 92px; }
.plan__name { font-size: 26px; line-height: 1.2; }
.plan__for { font-size: 16px; line-height: 1.55; color: var(--c-text); }
.plan__price { display: flex; align-items: flex-start; gap: 6px; color: var(--c-black); min-height: 56px; }
.plan__currency { margin-top: 6px; font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1; }
.plan__amount {
  display: inline-block;
  min-width: 2.1ch;
  font-family: var(--font-display);
  font-size: var(--fs-price);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.plan__per { margin-top: 6px; margin-left: 4px; font-size: 14px; line-height: 1.3; color: var(--c-muted); font-weight: 500; }
.plan__billing { font-size: 14px; line-height: 1.5; color: var(--c-muted); }
.plan__features {
  display: grid;
  align-content: start;
  gap: 12px;
  padding-top: 22px;
  border-top: 1px solid var(--c-line);
}
.plan__features li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--c-black);
}
.plan__features .ic { width: 20px; height: 20px; margin-top: 1px; color: var(--c-check); stroke-width: 2.25; }
.plan__features .is-excluded { color: var(--c-muted); }
.plan__features .is-excluded .ic { color: #C4BDB2; }
.plan__badge {
  position: absolute;
  top: 34px;
  right: 30px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--c-orange);
  color: var(--c-black);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.plan--featured {
  background: var(--c-black);
  border-color: var(--c-black);
  color: rgba(255, 255, 255, 0.78);
}
.plan--featured:hover { border-color: rgba(239, 127, 27, 0.7); }
.plan--featured .plan__name { color: var(--c-white); }
.plan--featured .plan__for { color: rgba(255, 255, 255, 0.72); }
.plan--featured .plan__billing { color: rgba(255, 255, 255, 0.72); font-size: 15px; }
.plan--featured .plan__features { border-top-color: rgba(255, 255, 255, 0.12); }
.plan--featured .plan__features li { color: var(--c-white); }
.plan--featured .plan__features .ic { color: var(--c-orange); }
.plan__price--quote { align-items: center; }
.plan__quote { font-family: var(--font-display); font-size: clamp(28px, calc(24px + 0.6vw), 34px); font-weight: 700; line-height: 1.1; color: var(--c-white); letter-spacing: -0.015em; }
.plan .btn--block { align-self: start; }

.pricing__note {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 28px;
  text-align: center;
  font-size: 15px;
  color: var(--c-text);
}
.pricing__note p { max-width: 720px; }

/* =========================================================================
   8. KONSULTACJE 1:1 — wyśrodkowany nagłówek i karta rezerwacji w trzech krokach
   ========================================================================= */
/* nagłówek szerszy niż zwykle, żeby trzy korzyści zmieściły się w jednym rzędzie; tytuł i lead mają własne szerokości */
.consult__head { max-width: 1040px; }
.consult__head h2 { max-width: 780px; }
.benefits { display: grid; gap: 14px; margin: 4px 0 8px; }
.benefits li { display: flex; align-items: center; gap: 14px; color: var(--c-black); font-size: 16px; font-weight: 500; line-height: 1.45; }
/* trzy korzyści w jednym rzędzie pod leadem */
.benefits--row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 32px;
  margin: 10px 0 0;
}
.benefits--row li { flex: 1 1 0; min-width: 240px; max-width: 320px; gap: 12px; font-size: 15px; text-align: left; }
.consult__card { max-width: 1040px; margin: 56px auto 0; min-width: 0; }
.booking {
  display: grid;
  gap: 30px;
  padding: 34px 40px 32px;
  border-radius: 24px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-soft);
  min-width: 0;
}
.booking__advisor {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--c-line);
}
.booking__avatar img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.booking__name { font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--c-black); }
.booking__role { font-size: 14px; color: var(--c-muted); line-height: 1.4; margin-top: 2px; }
.booking__chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.booking__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: var(--c-sand);
  color: var(--c-black);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.booking__chip .ic { color: var(--c-orange-deep); }

/* nagłówek kroku: numer w kółku, etykieta, po prawej ewentualne strzałki */
.booking__step { display: grid; gap: 16px; min-width: 0; }
.booking__step-head { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.booking__step-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-orange-soft);
  color: var(--c-orange-text);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
}
.booking__label { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--c-black); }
.booking__week-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.booking__arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  background: var(--c-white);
  color: var(--c-black);
  transition: background-color 0.25s var(--e-out), color 0.25s var(--e-out), border-color 0.25s var(--e-out), opacity 0.25s var(--e-out), scale 0.18s var(--e-out);
}
.booking__arrow:hover { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }
.booking__arrow:active { scale: 0.94; }
.booking__arrow:disabled { opacity: 0.35; cursor: default; background: var(--c-white); color: var(--c-black); border-color: var(--c-line); }

/* --- krok 1: kafelki tematów (ciemny znacznik pod wybranym przesuwa GSAP) --- */
.topics {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.topics__indicator {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-radius: 16px;
  background: var(--c-black);
  box-shadow: 0 18px 34px -18px rgba(29, 28, 26, 0.6);
  opacity: 0;
  pointer-events: none;
}
.topic-tile {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 132px;
  padding: 16px 42px 18px 18px;
  border-radius: 16px;
  border: 1px solid var(--c-line);
  text-align: left;
  transition: border-color 0.25s var(--e-out), background-color 0.25s var(--e-out);
}
.topic-tile__title { font-family: var(--font-display); font-size: 16.5px; font-weight: 700; line-height: 1.3; color: var(--c-black); transition: color 0.3s var(--e-out); }
.topic-tile__text { font-size: 13.5px; line-height: 1.5; color: var(--c-text); transition: color 0.3s var(--e-out); }
.topic-tile__check {
  position: absolute;
  right: 14px;
  top: 14px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #D9D1C6;
  color: transparent;
  transition: background-color 0.3s var(--e-out), border-color 0.3s var(--e-out), color 0.3s var(--e-out);
}
.topic-tile__check .ic { width: 13px; height: 13px; stroke-width: 3; }
.topic-tile:hover:not([aria-checked="true"]) { border-color: var(--c-black); background: var(--c-cream); }
.topic-tile[aria-checked="true"] { border-color: transparent; }
.topic-tile[aria-checked="true"] .topic-tile__title { color: var(--c-white); }
.topic-tile[aria-checked="true"] .topic-tile__text { color: rgba(255, 255, 255, 0.74); }
.topic-tile[aria-checked="true"] .topic-tile__check { background: var(--c-orange); border-color: var(--c-orange); color: var(--c-black); }
.topic-tile:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 2px; }
.topics__desc { display: none; }
/* poniżej 1180 px cztery kafelki w rzędzie byłyby za wąskie na opisy — dwa rzędy po dwa */
@media (max-width: 1179px) {
  .topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topic-tile { min-height: 0; }
}

/* --- krok 2: pasek dni i godziny --- */
.days { margin-inline: -6px; min-width: 0; }
.days__track {
  position: relative;
  display: flex;
  gap: 8px;
  /* u góry miejsce na nazwę miesiąca nad pierwszym dniem miesiąca */
  padding: 26px 6px 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 6px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.days__track::-webkit-scrollbar { display: none; }
/* ciemny znacznik wybranego dnia (przesuwa go GSAP) */
.days__indicator {
  position: absolute;
  left: 0; top: 26px; bottom: 6px;
  width: 64px;
  border-radius: 16px;
  background: var(--c-black);
  box-shadow: 0 14px 28px -14px rgba(29, 28, 26, 0.55);
  opacity: 0;
  pointer-events: none;
}
.day {
  position: relative;
  z-index: 1;
  flex: 0 0 72px;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 11px 0;
  border-radius: 16px;
  border: 1px solid var(--c-line);
  scroll-snap-align: start;
  transition: border-color 0.25s var(--e-out), opacity 0.25s var(--e-out);
}
.day--week { margin-left: 12px; }
.day__month {
  position: absolute;
  left: 4px;
  top: -23px;
  color: var(--c-orange-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.day:hover:not(:disabled) { border-color: var(--c-black); }
.day__name { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); transition: color 0.3s var(--e-out); }
.day__num { font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1.15; color: var(--c-black); transition: color 0.3s var(--e-out); }
.day__dots { display: flex; gap: 3px; height: 5px; }
.day__dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--c-orange); }
.day[aria-pressed="true"] { border-color: transparent; }
.day[aria-pressed="true"] .day__name { color: rgba(255, 255, 255, 0.72); }
.day[aria-pressed="true"] .day__num { color: var(--c-white); }
.day:disabled { cursor: default; }
.day:disabled .day__name, .day:disabled .day__num, .day:disabled .day__dots { opacity: 0.4; }
/* pełna data wybranego dnia i jego godziny */
.booking__slots-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; min-height: 48px; }
.booking__date { display: grid; gap: 2px; min-width: 200px; }
.booking__date strong { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--c-black); }
.booking__date span { font-size: 13px; color: var(--c-muted); }
.slots { display: flex; flex-wrap: wrap; gap: 8px; min-height: 44px; }
.slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 92px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(239, 127, 27, 0.55);
  background: var(--c-white);
  color: var(--c-black);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.22s var(--e-out), border-color 0.22s var(--e-out), color 0.22s var(--e-out);
}
.slot__check { width: 0; opacity: 0; transition: width var(--t-base) var(--e-out), opacity var(--t-base) var(--e-out); }
.slot:hover:not(:disabled) { background: var(--c-orange-soft); border-color: var(--c-orange); }
.slot[aria-pressed="true"] { background: var(--c-orange); border-color: var(--c-orange); }
.slot[aria-pressed="true"] .slot__check { width: 16px; opacity: 1; }
.slot:disabled { border-color: transparent; background: var(--c-sand); color: #A9A196; text-decoration: line-through; cursor: default; }
/* przycisk „Zarezerwuj” po wybraniu godziny: jednorazowy pomarańczowy puls */
.booking .btn.is-ready { animation: ready-pulse 0.9s var(--e-out) 1; }
@keyframes ready-pulse {
  0% { box-shadow: 0 0 0 0 rgba(239, 127, 27, 0.55); }
  100% { box-shadow: 0 0 0 14px rgba(239, 127, 27, 0); }
}

/* --- krok 3: podsumowanie --- */
.booking__foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 16px;
  padding-top: 24px;
  border-top: 1px solid var(--c-line);
}
.booking__summary { display: grid; gap: 4px; min-width: 0; }
.booking__price { display: flex; align-items: baseline; gap: 8px; }
.booking__price-num { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1; color: var(--c-black); letter-spacing: -0.01em; }
.booking__price-per { font-size: 15px; color: var(--c-muted); }
.booking__status { font-size: 14px; line-height: 1.5; color: var(--c-muted); }
.booking__status.is-ok { color: var(--c-black); }
.consult__ig { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; font-size: 14px; color: var(--c-muted); }
.consult__ig .ic { color: var(--c-orange-deep); }

/* =========================================================================
   9. NARZĘDZIA
   ========================================================================= */
.tools { padding-block: min(var(--space-7), var(--section-y)); }
.tools__grid { margin-top: 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.tool-card { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 40px; }
.tool-card__top { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; margin-bottom: 6px; }
.tool-card p { max-width: 540px; font-size: 16px; }
.tool-card .btn { margin-top: auto; }
.soon-tag {
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--c-sand);
  color: var(--c-muted);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
/* pokaz kalkulatora KIA: dwie wartości nad suwakiem, progi pod nim, zasada naliczenia na dole */
.kia-demo { width: 100%; margin: 8px 0 14px; padding: 22px 22px 18px; border-radius: 16px; background: var(--c-cream); border: 1px solid #EFE6DA; }
.kia-demo__values { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.kia-demo__value { display: grid; gap: 4px; }
.kia-demo__value--result { justify-items: end; text-align: right; }
.kia-demo__label { font-size: 13px; font-weight: 600; color: var(--c-muted); }
.kia-demo__num { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: var(--c-black); font-variant-numeric: tabular-nums; }
.kia-demo__value--result .kia-demo__num { color: var(--c-orange-text); transition: color 0.3s var(--e-out); }
.kia-demo.is-zero .kia-demo__value--result .kia-demo__num { color: var(--c-muted); }
.kia-demo__range { position: relative; margin-top: 18px; padding-bottom: 26px; }
.kia-demo__ticks { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; font-size: 12.5px; color: var(--c-muted); }
.kia-demo__ticks span { position: absolute; top: 0; white-space: nowrap; }
.kia-demo__ticks span:nth-child(1) { left: 0; }
.kia-demo__ticks span:nth-child(2) { left: 33.333%; transform: translateX(-50%); }
.kia-demo__ticks span:nth-child(3) { left: 66.667%; transform: translateX(-50%); }
.kia-demo__ticks span:nth-child(4) { right: 0; }
.kia-demo__rule { margin-top: 10px; font-size: 13.5px; color: var(--c-text); }
.kia-demo__rule [data-kia-rule] { font-weight: 600; color: var(--c-black); }

/* suwak: wypełnienie do kciuka liczone w zmiennej --p (ustawia ui/kia.js), znaczniki progów co jedną trzecią */
.kia-range {
  --p: 20%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.kia-range:focus { outline: none; }
.kia-range::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: var(--r-pill);
  background:
    linear-gradient(90deg, transparent calc(33.333% - 1px), rgba(43, 42, 40, 0.18) calc(33.333% - 1px), rgba(43, 42, 40, 0.18) calc(33.333% + 1px), transparent calc(33.333% + 1px), transparent calc(66.667% - 1px), rgba(43, 42, 40, 0.18) calc(66.667% - 1px), rgba(43, 42, 40, 0.18) calc(66.667% + 1px), transparent calc(66.667% + 1px)),
    linear-gradient(90deg, var(--c-orange-soft) 0, var(--c-orange) var(--p), #E8E1D6 var(--p));
}
.kia-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--c-white);
  border: 5px solid var(--c-orange);
  box-shadow: 0 6px 14px -6px rgba(43, 42, 40, 0.5);
  transition: transform 0.25s var(--e-out), box-shadow 0.25s var(--e-out);
}
.kia-range:hover::-webkit-slider-thumb { transform: scale(1.1); }
.kia-range:active::-webkit-slider-thumb { transform: scale(1.18); box-shadow: 0 8px 18px -6px rgba(239, 127, 27, 0.6); }
.kia-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(239, 127, 27, 0.35); }
.kia-range::-moz-range-track { height: 10px; border-radius: var(--r-pill); background: #E8E1D6; }
.kia-range::-moz-range-progress { height: 10px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--c-orange-soft), var(--c-orange)); }
.kia-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-white);
  border: 5px solid var(--c-orange);
  box-shadow: 0 6px 14px -6px rgba(43, 42, 40, 0.5);
}
.kia-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(239, 127, 27, 0.35); }

/* =========================================================================
   10. O NAS — ciemny pas
   ========================================================================= */
.about { overflow: hidden; }
.about__watermark {
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: 118%;
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  fill: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}
.about__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: center;
}
.about__content { grid-column: 1 / span 5; display: grid; gap: 24px; justify-items: start; }
.about__text { display: grid; gap: 16px; }
.about__text p { color: rgba(255, 255, 255, 0.78); }
.values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 4px 0 8px; width: 100%; }
.values li { display: flex; align-items: center; gap: 12px; color: var(--c-white); font-size: 16px; font-weight: 600; line-height: 1.35; }
.values .ic { width: 22px; height: 22px; color: var(--c-orange); }
/* „Poznaj zespół” wyśrodkowany pod wartościami (uwaga Wilka z 26.10) */
.about__content > .btn { justify-self: center; margin-top: 4px; }
.about__media { grid-column: 7 / span 6; display: grid; --about-overlap: 64px; }
.about__frame {
  border-radius: var(--r-photo);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  max-height: 640px;
  background: #2A2826;
}
.about__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
/* Trzy wyróżniki nachodzą na dolną krawędź zdjęcia: ciemne „szkło” z rozmyciem (na zdjęciu widać rozmyte tło,
   niżej karta zlewa się z ciemnym pasem), pomarańczowa ikona i cienka pomarańczowa linia u góry karty */
.about__infoboxes {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: calc(-1 * var(--about-overlap)) 12px 0;
}
.about__infoboxes .infobox--dark {
  position: relative;
  overflow: hidden;
  gap: 16px;
  padding: 18px 16px 20px;
  background: rgba(29, 28, 26, 0.74);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 28px 56px -28px rgba(0, 0, 0, 0.75);
  /* uniesienie przez właściwość translate, bo transform należy do animacji wejścia (GSAP) */
  transition: translate var(--t-base) var(--e-out), border-color var(--t-base) var(--e-ui);
}
.about__infoboxes .infobox--dark::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c-orange) 0%, rgba(239, 127, 27, 0.35) 55%, rgba(239, 127, 27, 0) 100%);
}
.about__infoboxes .infobox--dark:hover { translate: 0 -4px; border-color: rgba(239, 127, 27, 0.45); }
.about__infoboxes .infobox__icon {
  background: var(--c-orange);
  color: var(--c-white);
  box-shadow: 0 12px 24px -12px rgba(239, 127, 27, 0.8);
}
.about__infoboxes .infobox__value { font-size: 16px; line-height: 1.35; }
/* 1024–1279 px: zdjęcie jest za wąskie na trzy kolumny (słowo „Belastingdienst” nie mieści się w karcie),
   więc karty układają się jedna pod drugą, ikona obok tekstu */
@media (min-width: 1024px) and (max-width: 1279px) {
  .about__infoboxes { grid-template-columns: 1fr; gap: 8px; }
  .about__infoboxes .infobox--dark { flex-direction: row; align-items: center; padding: 14px 18px 14px 14px; }
}

/* =========================================================================
   11. ZESPÓŁ — 2 + 3 + 2: dwie większe karty u góry, pięć pod nimi (ostatnie dwie wyśrodkowane)
   Cała karta otwiera widok osoby na środku ekranu (przycisk-nakładka .person__open, ui/team.js).
   Na hover karta unosi się, zdjęcie powoli się przybliża, a znak „+” w rogu zdjęcia obraca się
   i robi pomarańczowy. Uniesienie przez właściwość translate — transformację karty prowadzi wejście (GSAP).
   ========================================================================= */
.team__grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--gap);
}
.person {
  position: relative;
  grid-column: span 2;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  padding: 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-white);
  cursor: pointer;
  transition:
    box-shadow var(--t-base) var(--e-ui),
    border-color var(--t-base) var(--e-ui),
    translate 0.5s var(--e-out);
}
.person--lead { grid-column: span 3; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; }
.person:nth-child(6) { grid-column: 2 / span 2; }
.person:nth-child(7) { grid-column: 4 / span 2; }
.person__photo {
  position: relative;
  border-radius: var(--r-thumb);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #26241F;
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-image) var(--e-image); }
.person__body { display: grid; justify-items: start; align-content: center; padding-right: 8px; }
.person__name { font-size: 22px; line-height: 1.25; font-weight: 600; }
.person--lead .person__name { font-size: 26px; }
.person__degree { color: var(--c-muted); font-weight: 500; }
.person__role {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
}
/* przycisk „Umów konsultację” leży nad nakładką, więc działa niezależnie od otwierania karty */
.person .btn { position: relative; z-index: 2; margin-top: 22px; }
.person__open { position: absolute; inset: 0; z-index: 1; border-radius: inherit; cursor: pointer; }
.person__open:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 4px; }
/* podpowiedź, że kartę można otworzyć */
.person__more {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--c-black);
  box-shadow: 0 8px 20px -10px rgba(29, 28, 26, 0.6);
  transition: background-color 0.3s var(--e-out), rotate 0.5s var(--e-out);
}
.person__more .ic { width: 16px; height: 16px; }
html:not(.js-motion) .person__more, html:not(.js-motion) .person__open { display: none; }
html:not(.js-motion) .person { cursor: auto; }
@media (hover: hover) {
  .person:hover { translate: 0 -4px; box-shadow: var(--shadow-hover); border-color: #DCD5CA; }
  .person:hover .person__photo img { transform: scale(1.12); }
  .person:hover .person__more { background: var(--c-orange); rotate: 90deg; }
}
/* zdjęcie tej osoby jest właśnie w widoku na środku ekranu — w karcie zostaje jasne miejsce po nim */
.person.is-away .person__photo { background: var(--c-cream); }
.person.is-away .person__photo img,
.person.is-away .person__more { opacity: 0; }

/* 1024–1365 px: węższe zdjęcia w kartach; poniżej 1180 px jeszcze mniejsze zdjęcia i nazwiska,
   bo w trzech kolumnach na tekst zostawało ok. 70 px i nazwiska wychodziły poza kartę */
@media (min-width: 1024px) and (max-width: 1365px) {
  .person { grid-template-columns: 150px minmax(0, 1fr); }
  .person--lead { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (min-width: 1024px) and (max-width: 1179px) {
  .person { grid-template-columns: 104px minmax(0, 1fr); gap: 16px; }
  .person--lead { grid-template-columns: 170px minmax(0, 1fr); gap: 24px; }
  .person__name { font-size: 19px; }
  .person--lead .person__name { font-size: 24px; }
  .person__role { font-size: 12px; }
}
@media (max-width: 1023px) {
  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .person, .person--lead, .person:nth-child(6), .person:nth-child(7) { grid-column: auto; }
  .person--lead { grid-column: 1 / -1; }
  /* siódma karta sama w ostatnim rzędzie — wyśrodkowana, szerokości jednej kolumny */
  .person:nth-child(7) { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--gap)) / 2); }
  /* dwie kolumny: mniejsze zdjęcie, żeby nazwisko i funkcja mieściły się obok niego */
  .person { grid-template-columns: 120px minmax(0, 1fr); gap: 18px; }
  .person--lead { grid-template-columns: 200px minmax(0, 1fr); gap: 28px; }
  .person__name { font-size: 20px; }
  .person__role { font-size: 12px; }
}

/* =========================================================================
   11a. ZESPÓŁ — widok osoby (natywne okno <dialog>, ui/team.js)
   Tło strony ciemnieje. Zdjęcie przelatuje z karty na środek ekranu (FLIP:
   przesunięcie po łuku i skala), obok wchodzą funkcja, imię i nazwisko oraz opis, pod spodem rząd
   miniatur całego zespołu z pomarańczową obwódką na wybranej osobie. Po wybraniu innej osoby obecne
   zdjęcie cofa się i gaśnie, a nowe wylatuje z miniatury. Pomarańczowa ramka wysuwa się zza zdjęcia,
   gdy to wyląduje. Opisy wszystkich osób leżą w jednej komórce siatki, więc okno ma stałą wysokość.
   Animowane są wyłącznie transform i opacity.
   ========================================================================= */
.spotlight {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 24px 0;
  border: 0;
  background: none;
  color: var(--c-text);
  overflow: hidden auto;
  overscroll-behavior: contain;
}
.spotlight[open] { display: grid; align-items: center; align-items: safe center; justify-items: center; }
.spotlight::backdrop { background: transparent; }
/* samo przyciemnienie, bez backdrop-filter: rozmycie całego ekranu liczone w każdej klatce animacji
   spowalniało ją na słabszym sprzęcie (w teście bez karty graficznej do ok. 10 klatek na sekundę) */
.spotlight__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(29, 28, 26, 0.62);
}
.spotlight__panel {
  position: relative;
  width: min(1040px, calc(100% - 48px));
  display: grid;
  gap: 30px;
  padding: 56px 64px 24px;
}
.spotlight__surface {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  background: var(--c-white);
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.55);
}
.spotlight__close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  background: var(--c-white);
  color: var(--c-black);
  transition: background-color 0.3s var(--e-out), border-color 0.3s var(--e-out), color 0.3s var(--e-out), rotate 0.5s var(--e-out);
}
.spotlight__close .ic { width: 20px; height: 20px; }
.spotlight__close:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 3px; }
@media (hover: hover) {
  .spotlight__close:hover { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); rotate: 90deg; }
}

.spotlight__main {
  --sp-photo-h: clamp(280px, calc(100vh - 330px), 470px);
  --sp-photo-h: clamp(280px, calc(100dvh - 330px), 470px);
  --sp-photo-w: calc(var(--sp-photo-h) * 0.8);
  --sp-frame: 14px;
  --sp-radius: 22px;
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--sp-photo-w) + var(--sp-frame)) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas: "photo ." "photo heads" "photo bodies" "photo .";
  column-gap: 60px;
  touch-action: pan-y;
}
.spotlight__slot {
  grid-area: photo;
  position: relative;
  width: var(--sp-photo-w);
  aspect-ratio: 4 / 5;
  margin: 0 0 var(--sp-frame) var(--sp-frame);
}
/* ramka: wysuwa się zza zdjęcia w lewo i w dół (przesunięcie ustawia GSAP) */
.spotlight__frame {
  position: absolute;
  inset: 0;
  border: 2px solid var(--c-orange);
  border-radius: var(--sp-radius);
  opacity: 0;
}
.sp-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--sp-radius);
  background: #26241F;
  box-shadow: 0 30px 60px -34px rgba(29, 28, 26, 0.55);
  visibility: hidden;
}
.sp-photo picture, .sp-thumb__photo picture { display: block; width: 100%; height: 100%; }
.sp-photo img, .sp-thumb__photo img { width: 100%; height: 100%; object-fit: cover; }

.spotlight__heads, .spotlight__bodies { display: grid; min-width: 0; }
.spotlight__heads { grid-area: heads; }
.spotlight__bodies { grid-area: bodies; }
.sp-head, .sp-body { grid-area: 1 / 1; min-width: 0; visibility: hidden; }
.sp-head.is-active, .sp-body.is-active,
.sp-head.is-leaving, .sp-body.is-leaving { visibility: visible; }
.sp-head.is-leaving, .sp-body.is-leaving { pointer-events: none; }
.sp-head { display: grid; gap: 14px; align-content: end; }
.sp-role {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-orange-text);
}
/* maska nazwiska: wewnętrzny wiersz wjeżdża od dołu (zapas na polskie znaki nad i pod linią) */
.sp-name {
  overflow: hidden;
  margin-block: -0.14em;
  padding-block: 0.14em;
  font-family: var(--font-display);
  font-size: clamp(30px, 2.7vw, 44px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--c-black);
  text-wrap: balance;
}
.sp-name__inner { display: block; }
.sp-degree { color: var(--c-muted); font-weight: 500; }
.sp-body { display: grid; gap: 20px; justify-items: start; align-content: start; padding-top: 24px; }
.sp-rule { display: block; width: 44px; height: 3px; border-radius: 2px; background: var(--c-orange); transform-origin: left center; }
.sp-desc { font-size: 17px; line-height: 1.68; color: var(--c-text); max-width: 46ch; }
.sp-body .btn { margin-top: 4px; }

.spotlight__people {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 12px;
  padding-top: 22px;
  border-top: 1px solid var(--c-line);
}
.sp-thumb {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 9px;
  width: 66px;
  padding: 4px 0 2px;
  border-radius: 12px;
  color: var(--c-muted);
}
/* fokus z klawiatury czarny, żeby nie mylił się z pomarańczową obwódką wybranej osoby */
.sp-thumb:focus-visible { outline: 2px solid var(--c-black); outline-offset: 3px; }
.sp-thumb__photo {
  position: relative;
  display: block;
  width: 52px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 10px;
  background: #26241F;
  opacity: 0.7;
  filter: grayscale(1);
  transition: opacity 0.35s var(--e-out), filter 0.35s var(--e-out), translate 0.45s var(--e-out);
}
.sp-thumb__name { font-size: 12px; font-weight: 600; line-height: 1.2; transition: color 0.3s var(--e-out); }
.sp-thumb[aria-selected="true"] .sp-thumb__photo { opacity: 1; filter: none; }
.sp-thumb[aria-selected="true"] .sp-thumb__name { color: var(--c-black); }
@media (hover: hover) {
  .sp-thumb:hover .sp-thumb__photo { opacity: 1; filter: none; }
  .sp-thumb:not([aria-selected="true"]):hover .sp-thumb__photo { translate: 0 -3px; }
  .sp-thumb:hover .sp-thumb__name { color: var(--c-black); }
}
/* obwódka wybranej miniatury: przesuwa się między osobami (położenie i rozmiar ustawia GSAP) */
.spotlight__ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 73px;
  border: 2px solid var(--c-orange);
  border-radius: 13px;
  pointer-events: none;
  opacity: 0;
}

/* tablet: mniejsze zdjęcie, węższe marginesy okna */
@media (min-width: 768px) and (max-width: 1023px) {
  .spotlight__panel { padding: 52px 40px 22px; }
  .spotlight__main {
    --sp-photo-h: clamp(260px, min(45vw, calc(100vh - 330px)), 380px);
    --sp-photo-h: clamp(260px, min(45vw, calc(100dvh - 330px)), 380px);
    column-gap: 36px;
  }
}
/* niskie okna (laptopy z paskami przeglądarki, telefon w poziomie) */
@media (min-width: 768px) and (max-height: 640px) {
  .spotlight { padding: 12px 0; }
  .spotlight__panel { gap: 16px; padding-top: 28px; padding-bottom: 14px; }
  .spotlight__main { --sp-photo-h: max(190px, calc(100dvh - 200px)); }
  .spotlight__people { padding-top: 12px; }
  .sp-thumb__name { display: none; }
}
@media (min-width: 768px) and (max-height: 500px) {
  .spotlight { padding: 8px 0; }
  .spotlight__panel { gap: 10px; padding: 20px 28px 10px; }
  .spotlight__main { --sp-photo-h: max(170px, calc(100dvh - 170px)); --sp-frame: 10px; column-gap: 32px; }
  .spotlight__close { top: 12px; right: 12px; width: 40px; height: 40px; }
  .sp-head { gap: 8px; }
  .sp-name { font-size: 26px; }
  .sp-body { gap: 10px; padding-top: 12px; }
  .sp-desc { font-size: 15px; line-height: 1.5; }
  .sp-body .btn { min-height: 44px; padding: 0 22px; font-size: 15px; }
  .spotlight__people { padding-top: 10px; }
  .sp-thumb { width: 44px; padding: 3px 0 1px; }
  .sp-thumb__photo { width: 34px; border-radius: 8px; }
}
/* telefon: zdjęcie po lewej, obok funkcja i nazwisko, opis pod spodem na całą szerokość */
@media (max-width: 767px) {
  .spotlight { padding: 12px 0; }
  .spotlight__panel { width: calc(100% - 24px); gap: 18px; padding: 64px 20px 14px; }
  .spotlight__surface { border-radius: 22px; }
  .spotlight__close { top: 12px; right: 12px; width: 42px; height: 42px; }
  .spotlight__main {
    --sp-photo-w: 112px;
    --sp-frame: 8px;
    --sp-radius: 14px;
    grid-template-columns: calc(var(--sp-photo-w) + var(--sp-frame)) minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: "photo heads" "bodies bodies";
    column-gap: 16px;
  }
  .spotlight__heads { align-self: end; padding-bottom: var(--sp-frame); }
  .sp-head { gap: 8px; }
  .sp-role { font-size: 11px; letter-spacing: 0.06em; }
  .sp-name { font-size: 22px; line-height: 1.18; }
  .sp-body { gap: 14px; padding-top: 18px; }
  .sp-desc { font-size: 15.5px; line-height: 1.6; }
  .sp-body .btn { width: 100%; }
  .spotlight__people { gap: 6px; padding-top: 14px; }
  .sp-thumb { width: 40px; padding: 3px 0 1px; }
  .sp-thumb__photo { width: 38px; border-radius: 8px; }
  .sp-thumb__name { display: none; }
  .spotlight__ring { border-radius: 10px; }
}
/* mały telefon w poziomie: zdjęcie po lewej, cały tekst po prawej (jak na komputerze), mniejsze odstępy */
@media (max-width: 767px) and (max-height: 500px) {
  .spotlight { padding: 8px 0; }
  .spotlight__panel { gap: 10px; padding: 18px 24px 10px; }
  .spotlight__main {
    --sp-photo-w: calc((100dvh - 160px) * 0.8);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: "photo ." "photo heads" "photo bodies" "photo .";
    column-gap: 24px;
  }
  .spotlight__heads { align-self: auto; padding: 0 36px 0 0; }
  .sp-body { gap: 10px; padding-top: 10px; }
  .sp-desc { font-size: 15px; line-height: 1.5; }
  .sp-body .btn { width: auto; min-height: 44px; padding: 0 22px; font-size: 15px; }
  .spotlight__people { padding-top: 10px; }
}

/* =========================================================================
   12. OPINIE GOOGLE
   ========================================================================= */
.reviews { overflow: hidden; }
.reviews__head { max-width: 860px; }
/* wyróżniona ocena Google pod nagłówkiem: znak (miejsce na oficjalne logo), ocena, gwiazdki, liczba opinii, link */
.g-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 22px;
  margin-top: 8px;
  padding: 18px 26px;
  border-radius: 22px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-soft);
}
.g-rating__logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px dashed #CFC6B9;
  color: var(--c-muted);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}
.g-rating__score { display: flex; align-items: center; gap: 14px; }
.g-rating__num { font-family: var(--font-display); font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--c-black); }
.g-rating__stars { display: grid; gap: 6px; justify-items: start; }
.stars--lg .ic { width: 22px; height: 22px; }
.g-rating__meta { font-size: 14.5px; font-weight: 500; color: var(--c-text); }
.g-rating__divider { align-self: stretch; width: 1px; background: var(--c-line); }
.g-rating__side { display: grid; gap: 8px; justify-items: start; }
.reviews__rail { margin-top: 56px; min-width: 0; }
.reviews__track { --card-w: calc((100% - 2 * var(--gap)) / 3); padding-bottom: 4px; }
.reviews__nav { justify-content: center; margin-top: 32px; }
.review {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 360px;
  padding: 32px;
  border-radius: var(--r-card);
  background: var(--c-white);
  border: 1px solid var(--c-line);
}
.review__top { display: flex; align-items: center; justify-content: space-between; }
.review .stars .ic { width: 18px; height: 18px; }
.review__quote { width: 34px; height: 34px; color: var(--c-orange-soft); fill: var(--c-orange-soft); }
.review__text { margin: 0; font-size: 17px; line-height: 1.65; color: var(--c-black); }
.review__meta { margin-top: auto; display: grid; justify-items: start; gap: 2px; padding-top: 18px; border-top: 1px solid var(--c-line); }
.review__name { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--c-black); }
.review__info { font-size: 14px; color: var(--c-muted); }
.review .mock-tag { margin-top: 10px; }
@media (max-width: 1179px) { .reviews__track { --card-w: calc((100% - var(--gap)) / 2); } }

/* =========================================================================
   13. FAQ
   ========================================================================= */
.faq-section__head { max-width: 760px; }
/* krótka pomarańczowa kreska pod nagłówkiem — akcent sekcji */
.faq-section__head::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 2px; border-radius: 4px; background: var(--c-orange); }
.faq { max-width: 900px; margin: 48px auto 0; }
/* zachęta do kontaktu pod listą pytań */
.faq-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 22px;
  max-width: 900px;
  margin: 28px auto 0;
  padding: 20px 26px;
  border-radius: 20px;
  background: var(--c-cream);
  border: 1px solid #EFE6DA;
}
.faq-cta__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-white); color: var(--c-orange-deep); box-shadow: inset 0 0 0 1px #EFE6DA; }
.faq-cta__icon .ic { width: 20px; height: 20px; }
.faq-cta__text { font-size: 16px; font-weight: 500; color: var(--c-black); }
.faq-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* =========================================================================
   14. PAS CTA — nachodzi na stopkę
   ========================================================================= */
.cta { position: relative; z-index: 2; margin-bottom: -150px; }
.cta__card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px 56px;
  padding: 76px 72px;
  border-radius: var(--r-band);
  background: var(--c-orange);
  color: var(--c-black);
}
.cta__sygnet {
  position: absolute;
  z-index: -1;
  right: 30%;
  top: 50%;
  height: 190%;
  width: auto;
  transform: translateY(-50%);
  fill: var(--c-orange-deep);
  opacity: 0.32;
  pointer-events: none;
}
.cta__content h2 { color: var(--c-black); max-width: 640px; }
.cta__content p { margin-top: 16px; max-width: 540px; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--c-black); }
.cta__actions { display: flex; flex-wrap: wrap; gap: 14px; }
/* na pomarańczowej karcie pomarańczowy obrys fokusu byłby niewidoczny — obrys w kolorze tekstu */
.cta__card :focus-visible, .cta__card .btn:focus-visible { outline-color: var(--c-black); outline-offset: 3px; }
html:has(.marquee--print) .cta__card :focus-visible, html:has(.marquee--print) .cta__card .btn:focus-visible,
.cta--dark .cta__card :focus-visible, .cta--dark .cta__card .btn:focus-visible { outline-color: var(--c-orange); }
/* Wariant ciemny (automatycznie przy marquee w wariancie B — na stronie tylko jedno duże pomarańczowe pole) */
html:has(.marquee--print) .cta__card,
.cta--dark .cta__card { background: var(--c-dark); color: rgba(255, 255, 255, 0.78); }
html:has(.marquee--print) .cta__content h2,
.cta--dark .cta__content h2 { color: var(--c-white); }
html:has(.marquee--print) .cta__content p,
.cta--dark .cta__content p { color: rgba(255, 255, 255, 0.78); }
html:has(.marquee--print) .cta__sygnet,
.cta--dark .cta__sygnet { fill: var(--c-orange); opacity: 0.12; }
html:has(.marquee--print) .cta .btn--dark,
.cta--dark .btn--dark { --btn-bg: var(--c-orange); --btn-fg: var(--c-black); --btn-bg-hover: var(--c-orange-deep); --btn-fg-hover: var(--c-black); }
html:has(.marquee--print) .cta .btn--outline-ink,
.cta--dark .btn--outline-ink { --btn-fg: var(--c-white); --btn-fg-hover: var(--c-black); --btn-border: rgba(255, 255, 255, 0.6); --btn-border-hover: var(--c-white); --btn-fill: var(--c-white); }

/* =========================================================================
   15. STOPKA
   ========================================================================= */
.site-footer {
  position: relative;
  padding: calc(96px + 150px) 0 40px;
  background: var(--c-dark);
  color: rgba(255, 255, 255, 0.85);
}
.site-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.site-footer__logo { height: 72px; width: auto; aspect-ratio: 1236.75 / 329.75; }
.logo--on-dark { --logo-text: var(--c-white); }
.site-footer__up {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 600;
  transition: color var(--t-fast) var(--e-ui);
}
.site-footer__up .ic {
  width: 44px; height: 44px;
  padding: 12px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: background-color var(--t-base) var(--e-ui), color var(--t-base) var(--e-ui), transform var(--t-base) var(--e-ui), border-color var(--t-base) var(--e-ui);
}
.site-footer__up:hover { color: var(--c-white); }
.site-footer__up:hover .ic { background: var(--c-orange); border-color: var(--c-orange); color: var(--c-black); transform: translateY(-3px); }
.site-footer__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 48px;
  padding: 56px 0;
}
.f-col__title {
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.f-col ul { display: grid; gap: 12px; }
.f-col a { color: rgba(255, 255, 255, 0.85); font-size: 16px; line-height: 1.45; transition: color var(--t-fast) var(--e-ui); }
.f-col a:hover { color: var(--c-orange); }
.f-col__about { color: rgba(255, 255, 255, 0.78); max-width: 390px; font-size: 16px; }
.f-col__address { margin-top: 18px; color: rgba(255, 255, 255, 0.6); font-size: 15px; line-height: 1.6; }
.f-col__reg { margin-top: 10px; color: rgba(255, 255, 255, 0.55); font-size: 14px; }
.f-contact li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: center; color: rgba(255, 255, 255, 0.85); font-size: 16px; line-height: 1.45; }
.f-contact .ic { width: 18px; height: 18px; color: var(--c-orange); }
.f-col .f-social { display: flex; gap: 22px; margin-top: 26px; }
.f-social a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-top: 28px;
  /* miejsce na przycisk Pani Bożenki (60 px + odstęp 24 px), żeby na dole strony nie zasłaniał podpisu */
  padding-right: 96px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer__legal a { transition: color var(--t-fast) var(--e-ui); }
.site-footer__legal a:hover { color: var(--c-white); }
.site-footer__credit a { text-decoration: underline; text-underline-offset: 3px; }
.site-footer__credit a:hover { color: var(--c-white); }

/* =========================================================================
   RESPONSYWNOŚĆ
   ========================================================================= */

/* Desktop wąski: menu chowa się do „hamburgera” wcześniej niż reszta układu (poniżej 1280 px pełne menu
   z logo, przełącznikiem języka i przyciskiem już się nie mieści bez ściskania) */
@media (max-width: 1279px) {
  .site-header__inner { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; }
  .menu-wrap, .header-actions .lang { display: none; }
  .header-actions { grid-column: 3; }
  .header-mobile { display: flex; grid-column: 4; }
  .header-mobile a.header-mobile__btn { display: none; }
}

@media (max-width: 1279px) and (min-width: 1024px) {
  .hero__infobox { left: -24px; }
  .hero-band__stats { grid-template-columns: 1fr 1fr 200px 1fr 1fr; }
  .stat__label { font-size: 14px; }
}

/* Hero w jednej kolumnie już poniżej 1100 px (przy 1024 px dwie kolumny byłyby za ciasne) */
@media (max-width: 1099px) {
  .hero { min-height: 0; padding-top: calc(var(--nav-h) + 32px); }
  .hero::before { width: 100%; height: 60%; inset: auto 0 0 auto; }
  .hero__grid { grid-template-columns: 1fr; row-gap: 48px; padding-bottom: 48px; }
  .hero__content, .hero__media { grid-column: 1 / -1; }
  .hero__title { max-width: 820px; }
  .hero-proof { max-width: none; }
  .hero__media { padding-top: 0; }
  .hero__photo { width: 100%; margin-right: 0; }
  .hero__frame { height: auto; aspect-ratio: 4 / 3; border-radius: var(--r-photo); }
  .hero__sygnet-wrap { left: auto; right: -10%; top: -12%; width: 56%; }
  .hero__infobox { left: 16px; bottom: 16px; }
  .hero-band { height: auto; margin-bottom: 0; padding: 28px 24px; }
  .hero-band__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 24px; }
  .stat--rotor, .hero-band .rotor { display: none; }
  .marquee { margin-top: 56px; }
}

/* Tablet i telefon: zakładki jako karty, siatki dwukolumnowe */
@media (max-width: 1023px) {

  .paths__grid { grid-template-columns: 1fr; gap: 48px; max-width: 680px; margin: 48px auto 0; }
  .path-card__media { aspect-ratio: 16 / 9; }


  .steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }

  .pricing__grid { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 24px; max-width: 560px; margin-inline: auto; }
  .plan { grid-row: auto; grid-template-rows: none; }


  .tools__grid { grid-template-columns: 1fr; }

  .about__grid { grid-template-columns: 1fr; row-gap: 48px; }
  .about__content, .about__media { grid-column: 1 / -1; }
  .about__frame { aspect-ratio: 4 / 3; }


  .g-rating__divider { display: none; }

  .cta__card { grid-template-columns: 1fr; padding: 56px 40px; }

  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Telefon */
@media (max-width: 767px) {
  .site-header__inner { grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
  .header-actions { display: none; }
  .header-mobile { grid-column: 2; }
  .header-mobile a.header-mobile__btn { display: grid; }

  .hero { padding-top: calc(var(--nav-h) + 24px); }
  .hero__content { gap: 20px; }
  .hero__pill { font-size: 11.5px; letter-spacing: 0.06em; padding: 6px 12px 6px 10px; }
  .hero__pill .sep { margin-inline: 0.1em; }
  .hero__actions { display: grid; width: 100%; gap: 10px; }
  .hero__actions .magnet, .hero__actions .btn { width: 100%; }
  .hero-proof { align-items: flex-start; gap: 14px; }
  .avatars li { width: 36px; height: 36px; }
  .hero__grid { row-gap: 40px; padding-bottom: 32px; }
  .hero__frame { border-radius: var(--r-photo); }
  .hero__infobox { left: 12px; right: 12px; bottom: 12px; padding: 10px 14px 10px 10px; }
  .hero__infobox .infobox__icon { width: 38px; height: 38px; }
  .hero-band { padding: 26px 18px; border-radius: 24px; }
  .hero-band__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .stat__label { font-size: 14px; }
  .marquee { margin-top: 48px; }
  .marquee__row--services { height: 66px; }
  .marquee__row--terms { height: 46px; }
  .mq-service { font-size: 17px; gap: 10px; padding-inline: 14px 26px; }
  .mq-service__icon { width: 36px; height: 36px; }
  .mq-service__icon .ic { width: 17px; height: 17px; }
  .mq-group { font-size: 10.5px; padding-left: 24px; }
  .mq-term { height: 26px; padding: 0 11px; font-size: 12.5px; margin-right: 6px; }

  .paths__grid { gap: 40px; }
  .path-card__card { margin: -48px 12px 0; padding: 26px 22px 24px; }
  .path-card__progress { left: 22px; right: 22px; }
  .path-card__num { left: 14px; top: 14px; width: 42px; height: 42px; font-size: 14px; }

  .services__carousel { margin-top: 40px; }
  .services__track {
    --card-w: 86%;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .services__nav { display: flex; }
  .service-card { padding: 26px; }

  .steps__wrap { margin-top: 48px; }
  .steps__list { grid-template-columns: 1fr; row-gap: 36px; }
  .step { grid-template-columns: 64px 1fr; column-gap: 20px; row-gap: 6px; padding-right: 0; }
  .step__node { width: 64px; height: 64px; margin: 0; grid-row: span 2; }
  .step__num { font-size: 22px; }
  .step__title { align-self: end; }
  .step p { grid-column: 2; }

  .plan { padding: 30px 24px; }
  .plan__head { padding-right: 0; }
  .plan--featured .plan__head { padding-right: 100px; }
  .plan__badge { top: 30px; right: 24px; }

  .consult__card { margin-top: 40px; }
  .benefits--row { flex-direction: column; align-items: flex-start; max-width: 360px; margin-inline: auto; gap: 12px; }
  .booking { padding: 22px 18px 20px; gap: 24px; border-radius: 20px; }
  .booking__advisor { grid-template-columns: 52px minmax(0, 1fr); padding-bottom: 20px; }
  .booking__avatar img { width: 52px; height: 52px; }
  .booking__chips { grid-column: 1 / -1; justify-content: flex-start; }
  .topics { gap: 8px; }
  .topic-tile { padding: 14px 34px 14px 14px; gap: 4px; align-content: center; min-height: 56px; }
  .topic-tile__title { font-size: 15px; }
  .topic-tile__text { display: none; }
  .topic-tile__check { right: 10px; top: 50%; margin-top: -10px; width: 20px; height: 20px; }
  .topics__desc { display: block; margin-top: -4px; padding: 12px 14px; border-radius: 12px; background: var(--c-cream); font-size: 14px; line-height: 1.5; color: var(--c-text); }
  .booking__label { font-size: 15px; }
  .day { flex-basis: 60px; }
  .day__num { font-size: 18px; }
  .booking__slots-row { align-items: flex-start; flex-direction: column; gap: 10px; }
  .slot { min-width: 84px; }
  .booking__foot { grid-template-columns: auto minmax(0, 1fr); }
  .booking__foot .btn { grid-column: 1 / -1; width: 100%; }

  .tool-card { padding: 28px 24px; }
  .kia-demo { padding: 18px 16px 14px; }
  .kia-demo__num { font-size: 22px; }
  .kia-demo__ticks { font-size: 10.5px; }

  .values { grid-template-columns: 1fr; }
  .about__frame { aspect-ratio: 1 / 1; }
  .about__media { --about-overlap: 44px; }
  .about__infoboxes { grid-template-columns: 1fr; gap: 10px; margin-inline: 12px; }
  .infobox--dark { flex-direction: row; align-items: center; padding: 16px; }
  .about__infoboxes .infobox--dark { padding: 16px 18px 16px 16px; }
  .about__watermark { width: 190%; bottom: -2%; }

  .team__grid { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; }
  .person, .person--lead { grid-template-columns: 96px minmax(0, 1fr); gap: 18px; padding: 12px; }
  .person--lead { grid-template-columns: 110px minmax(0, 1fr); gap: 16px; }
  .person__name { font-size: 19px; }
  .person--lead .person__name { font-size: 21px; }
  .person__role { font-size: 12px; margin-top: 6px; }
  .person .btn { margin-top: 14px; padding-inline: 14px; gap: 8px; font-size: 14px; }
  .person:nth-child(7) { width: auto; justify-self: stretch; }
  .person__more { right: 6px; bottom: 6px; width: 26px; height: 26px; }
  .person__more .ic { width: 13px; height: 13px; }

  .reviews__track { --card-w: 86%; }
  .review { min-height: 0; padding: 26px; }
  .g-rating { padding: 16px 18px; gap: 12px 16px; }
  .g-rating__logo { width: 44px; height: 44px; font-size: 8.5px; }
  .g-rating__num { font-size: 42px; }
  .g-rating__side { justify-items: center; }
  .faq { margin-top: 36px; }
  .faq-cta { padding: 20px 18px; text-align: center; }
  .faq-cta__actions { justify-content: center; }

  .faq-q { padding: 18px 16px 18px 20px; font-size: 16.5px; gap: 14px; grid-template-columns: 1fr 36px; }
  .faq-icon { width: 36px; height: 36px; }
  .faq-a p { padding: 0 20px 22px; }

  .cta { margin-bottom: -120px; }
  .cta__card { padding: 44px 24px; border-radius: var(--r-photo); }
  .cta__actions { display: grid; width: 100%; }
  .cta__actions .btn { width: 100%; }
  .cta__sygnet { right: -30%; height: 150%; }

  .site-footer { padding-top: calc(72px + 120px); }
  .site-footer__top { flex-direction: column; align-items: flex-start; }
  .site-footer__logo { height: 56px; }
  .site-footer__cols { grid-template-columns: 1fr; gap: 36px; padding: 40px 0; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   Wariant hero: zdjęcie na całą szerokość w tle (klasa .hero--cover na <section class="hero">,
   w mockupie także parametr ?hero=cover). Tekst zostaje czarny na jasnym przejściu od lewej.
   ========================================================================= */
.hero--cover { isolation: isolate; }
.hero--cover::before { display: none; }
.hero--cover .hero__media {
  position: absolute;
  /* blokiem odniesienia jest cała sekcja hero (pełna szerokość okna), więc w poziomie bez wysunięć */
  inset: calc(-1 * (var(--nav-h) + 16px)) 0 calc(-1 * 48px) 0;
  z-index: -1;
  padding: 0;
  display: block;
  grid-column: auto;
}
.hero--cover .hero__grid { position: static; }
.hero--cover .hero__photo, .hero--cover .hero__frame { position: absolute; inset: 0; width: auto; margin: 0; height: auto; border-radius: 0; }
.hero--cover .hero__frame img { object-position: 70% 45%; }
.hero--cover .hero__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.9) 38%, rgba(255, 255, 255, 0.35) 62%, rgba(255, 255, 255, 0) 80%);
}
.hero--cover .hero__sygnet-wrap { display: none; }
/* w wariancie ze zdjęciem w tle pigułka stoi nad nagłówkiem (warstwa zdjęcia jest tłem całej sekcji) */
.hero--cover .hero__pill-row { display: none; }
.hero--cover .hero__pill--inline { display: inline-flex; }
/* infobox przy prawej krawędzi kontenera (100% = szerokość zdjęcia, czyli okna bez paska przewijania) */
.hero--cover .hero__infobox { left: auto; right: max(var(--gutter), calc((100% - var(--container)) / 2)); bottom: 120px; }
@media (max-width: 1099px) {
  .hero--cover .hero__media { position: relative; inset: auto; z-index: 0; }
  .hero--cover .hero__photo, .hero--cover .hero__frame { position: relative; inset: auto; }
  .hero--cover .hero__frame { aspect-ratio: 4 / 3; border-radius: var(--r-photo); }
  .hero--cover .hero__frame::after { display: none; }
  .hero--cover .hero__infobox { right: auto; left: 16px; bottom: 16px; }
}