/* =========================================================================
   Komponenty (dokument 06, punkt 6.4) — przyciski, pigułki, karty, nawigacja, widget, karuzela
   Zasada ruchu: kolory i cienie tylko w przejściach CSS na hover/fokus, ruch tylko przez transform.
   ========================================================================= */

/* ---------- Przyciski ---------- */
.btn {
  --btn-bg: var(--c-orange);
  --btn-fg: var(--c-black);
  --btn-bg-hover: var(--c-orange-deep);
  --btn-fg-hover: var(--c-black);
  --btn-border: transparent;
  --btn-border-hover: transparent;
  --btn-fill: var(--c-black);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 32px;
  border: 1px solid var(--btn-border);
  border-radius: var(--r-btn);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.005em;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  /* uniesienie i wciśnięcie przez właściwości translate i scale — transformację przycisku prowadzi animacja
     wejścia (GSAP), więc przejście CSS nie może jej gonić */
  transition:
    background-color 0.28s var(--e-out),
    color 0.3s var(--e-out),
    border-color 0.28s var(--e-out),
    box-shadow 0.28s var(--e-out),
    translate 0.3s var(--e-out),
    scale 0.18s var(--e-out);
}
.btn .ic { width: 18px; height: 18px; transition: transform 0.35s var(--e-out); }
.btn:hover { background: var(--btn-bg-hover); color: var(--btn-fg-hover); border-color: var(--btn-border-hover); translate: 0 -1px; }
.btn:hover .ic-move { transform: translateX(4px); }
.btn:active { translate: 0 0; scale: 0.98; }
.btn:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 2px; border-radius: var(--r-btn); }

/* Wariant B przycisku podstawowego (biały tekst — kontrast 2,7:1, poniżej AA; tylko do oceny) */
.btn--primary-light { --btn-fg: var(--c-white); --btn-fg-hover: var(--c-white); }

/* Drugorzędny: czarny */
.btn--dark { --btn-bg: var(--c-black); --btn-fg: var(--c-white); --btn-bg-hover: var(--c-btn-dark-hover); --btn-fg-hover: var(--c-white); }

/* Obrysowy: wypełnienie pseudoelementem przez transform: scaleX — wjeżdża od lewej, po zjechaniu kursorem
   wyjeżdża w prawo; szybciej niż wcześniej (0,32 s zamiast 0,375 s z wolnym startem) i z płynnym hamowaniem */
.btn--outline {
  --btn-bg: transparent;
  --btn-bg-hover: transparent;
  --btn-fg: var(--c-black);
  --btn-fg-hover: var(--c-white);
  --btn-border: var(--c-black);
  --btn-border-hover: var(--c-black);
  --btn-fill: var(--c-black);
}
.btn--outline::before,
.btn--outline-light::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: var(--btn-fill);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.32s var(--e-out);
}
.btn--outline:hover::before,
.btn--outline-light:hover::before { transform: scaleX(1); transform-origin: left center; }

/* Obrysowy biały — na ciemnym tle */
.btn--outline-light {
  --btn-bg: transparent;
  --btn-bg-hover: transparent;
  --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);
}

/* Obrysowy czarny na pomarańczu (pas CTA) */
.btn--outline-ink {
  --btn-bg: transparent;
  --btn-bg-hover: transparent;
  --btn-fg: var(--c-black);
  --btn-fg-hover: var(--c-white);
  --btn-border: rgba(43, 42, 40, 0.55);
  --btn-border-hover: var(--c-black);
  --btn-fill: var(--c-black);
}
.btn--outline-ink::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: var(--btn-fill);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.32s var(--e-out);
}
.btn--outline-ink:hover::before { transform: scaleX(1); transform-origin: left center; }

.btn--sm { min-height: 44px; padding: 0 20px; font-size: 15px; gap: 8px; }
.btn--sm .ic { width: 16px; height: 16px; }
.btn--block { width: 100%; }
.btn[aria-disabled="true"], .btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  translate: 0 0;
  scale: 1;
}
.btn[aria-disabled="true"]:hover::before, .btn:disabled:hover::before { transform: scaleX(0); }
.btn--outline[aria-disabled="true"]:hover, .btn--outline:disabled:hover { color: var(--c-black); }

/* Link tekstowy z podkreśleniem rysowanym od lewej */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-black);
  font-weight: 600;
  line-height: 1.4;
  padding-bottom: 3px;
}
.link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--c-orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-base) var(--e-ui);
}
.link .ic { width: 18px; height: 18px; color: var(--c-orange-deep); transition: transform var(--t-base) var(--e-ui); }
.link:hover::after { transform: scaleX(1); }
.link:hover .ic-move { transform: translateX(4px); }

/* Przyciski-ikony (strzałki karuzel) */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  background: var(--c-white);
  color: var(--c-black);
  transition: background-color var(--t-base) var(--e-ui), color var(--t-base) var(--e-ui), border-color var(--t-base) var(--e-ui), opacity var(--t-base) var(--e-ui);
}
.icon-btn:hover { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }
.icon-btn:disabled { opacity: 0.35; cursor: default; }
.icon-btn:disabled:hover { background: var(--c-white); color: var(--c-black); border-color: var(--c-line); }

/* Magnes (opcjonalny, tylko dwa CTA w hero) — przesuwany jest kontener, nie sam przycisk */
.magnet { display: inline-flex; }

/* ---------- Pigułka — etykieta sekcji ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border-radius: var(--r-pill);
  background: var(--c-orange-soft);
  color: var(--c-black);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.pill .ic { width: 16px; height: 16px; color: var(--c-orange-deep); stroke-width: 2; }
.pill .sep { color: var(--c-orange-deep); margin-inline: 0.15em; }
.pill--dark { background: rgba(255, 255, 255, 0.1); color: var(--c-orange); }
.pill--dark .ic { color: var(--c-orange); }

/* ---------- Ikona w kole ---------- */
.icon-circle {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--c-orange-soft);
  color: var(--c-orange);
  flex: none;
  transition: background-color var(--t-base) var(--e-ui), color var(--t-base) var(--e-ui);
}
.icon-circle .ic { width: 28px; height: 28px; }
.icon-circle--sm { width: 48px; height: 48px; }
.icon-circle--sm .ic { width: 22px; height: 22px; }

/* ---------- Karty ---------- */
.card {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: 32px;
  /* Uniesienie na hover przez właściwość translate, a nie transform: transformację karty prowadzi animacja
     wejścia (GSAP). Przejście CSS na transform goniło animację wejścia i karty dochodziły na miejsce
     dopiero po najechaniu kursorem (uwaga Wilka z 26.10, sekcja usług). */
  transition:
    translate var(--t-base) var(--e-out),
    box-shadow var(--t-base) var(--e-ui),
    border-color var(--t-base) var(--e-ui);
}
.card--hover:hover {
  translate: 0 -4px;
  box-shadow: var(--shadow-hover);
  border-color: rgba(239, 127, 27, 0.6);
}
.card--hover:hover .icon-circle { background: var(--c-orange); color: var(--c-white); }
.card--hover:hover .link::after { transform: scaleX(1); }
.card--hover:hover .link .ic-move { transform: translateX(4px); }

/* ---------- Infobox ---------- */
.infobox {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px 14px 14px;
  border-radius: var(--r-infobox);
  background: var(--c-white);
  box-shadow: var(--shadow-float);
}
.infobox__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--c-orange-soft);
  color: var(--c-orange-deep);
  flex: none;
}
.infobox__label { display: block; font-size: 13px; line-height: 1.35; color: var(--c-muted); font-weight: 500; }
.infobox__value { display: block; font-family: var(--font-display); font-size: 17px; line-height: 1.3; font-weight: 600; color: var(--c-black); }

.infobox--dark {
  align-items: flex-start;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
}
.infobox--dark .infobox__icon { background: rgba(239, 127, 27, 0.14); color: var(--c-orange); }
.infobox--dark .infobox__value { color: var(--c-white); font-size: 17px; }

/* ---------- Przełącznik segmentowy ---------- */
.segmented {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 5px;
  border-radius: var(--r-pill);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  isolation: isolate;
}
.segmented__thumb {
  position: absolute;
  z-index: -1;
  top: 5px; bottom: 5px; left: 5px;
  width: calc((100% - 10px) / var(--seg-count, 2));
  border-radius: var(--r-pill);
  background: var(--c-black);
  transform: translateX(calc(100% * var(--seg-index, 0)));
  transition: transform var(--t-slow) var(--e-ui);
}
.segmented__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  color: var(--c-black);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  transition: color var(--t-slow) var(--e-ui);
}
.segmented__btn[aria-checked="true"] { color: var(--c-white); }
.segmented__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--c-orange);
  color: var(--c-black);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

/* ---------- Karuzela (natywny scroll-snap) ---------- */
.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--card-w, 417px);
  gap: var(--gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__item { scroll-snap-align: start; transition: opacity var(--t-base) var(--e-ui); }
.carousel__item.is-outside { opacity: 0.5; }
.carousel__nav { display: flex; gap: 12px; }

/* ---------- Pola formularza ---------- */
.field { display: grid; gap: 6px; }
.field__label { font-size: 14px; font-weight: 500; color: var(--c-black); }
.field__input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border-radius: var(--r-field);
  border: 1px solid var(--c-line);
  background: var(--c-white);
  font-size: 16px;
  color: var(--c-black);
  transition: border-color var(--t-fast) var(--e-ui), box-shadow var(--t-fast) var(--e-ui);
}
textarea.field__input { padding: 14px 16px; min-height: 96px; resize: vertical; line-height: 1.5; }
.field__input::placeholder { color: #A49F97; }
.field__input:focus { outline: none; border-color: var(--c-orange); box-shadow: 0 0 0 4px var(--c-orange-soft); }
.field__input[aria-invalid="true"] { border-color: var(--c-error); }
.field__hint { font-size: 13px; line-height: 1.45; color: var(--c-muted); }
.field__error { font-size: 14px; color: var(--c-error); }
.check {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-text);
  cursor: pointer;
}
.check input {
  appearance: none;
  width: 20px; height: 20px;
  margin: 1px 0 0;
  border-radius: 6px;
  border: 1px solid #CFC8BD;
  background: var(--c-white) center / 14px no-repeat;
  transition: background-color var(--t-fast) var(--e-ui), border-color var(--t-fast) var(--e-ui);
  cursor: pointer;
}
.check input:checked {
  border-color: var(--c-orange);
  background-color: var(--c-orange);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2A28' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.check input:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 2px; }

/* =========================================================================
   Nawigacja
   ========================================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  /* na telefonach z wycięciem ekranu pasek zaczyna się pod paskiem systemowym */
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  background: rgba(255, 255, 255, 0);
  border-bottom: 1px solid transparent;
  transition:
    height var(--t-base) var(--e-ui),
    background-color var(--t-base) var(--e-ui),
    border-color var(--t-base) var(--e-ui),
    -webkit-backdrop-filter var(--t-base) var(--e-ui),
    backdrop-filter var(--t-base) var(--e-ui);
}
/* pasek zmniejsza się tylko po przewinięciu; otwarte mega-menu na górze strony dodaje samo tło,
   żeby menu nie podskakiwało */
.site-header.is-scrolled { height: calc(var(--nav-h-scrolled) + env(safe-area-inset-top, 0px)); }
/* gdy skrypty nie działają, pasek nie dostanie klasy is-scrolled — tło jest wtedy stałe,
   żeby menu było czytelne nad treścią */
.no-js .site-header,
.motion-failed .site-header,
.site-header.is-scrolled,
.site-header.is-open {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: var(--c-line);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
}
/* logo i przyciski mają stałą szerokość, a menu stoi na środku pozostałego miejsca — odstęp od logo
   i od przełącznika języka jest taki sam (wcześniej menu stało na środku strony i dosuwało się do prawej) */
.site-header__inner {
  height: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(28px, 3vw, 56px);
}
/* logo wyrównane optycznie: środek napisu LEWANDOWSKI na wysokości napisów menu i przycisków
   (geometrycznie wyśrodkowane logo miało napis o ok. 10 px wyżej niż menu, bo sygnet sięga niżej niż tekst) */
.brand { display: inline-flex; align-items: center; justify-self: start; flex: none; translate: 0 calc(var(--logo-h) * 0.22); }
.menu-wrap { justify-self: center; }
.brand__logo { height: var(--logo-h); width: auto; aspect-ratio: 1236.75 / 329.75; transition: height var(--t-base) var(--e-ui); }
.site-header.is-scrolled .brand__logo { height: calc(var(--logo-h) - 4px); }

.menu { display: flex; align-items: center; gap: clamp(20px, 1.9vw, 34px); }
.menu__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  color: var(--c-black);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
/* podkreślenie wjeżdża od lewej i po zjechaniu kursorem wyjeżdża w prawo */
.menu__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-orange);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.45s var(--e-out);
}
.menu__link:hover::after, .menu__link:focus-visible::after, .menu__link[aria-expanded="true"]::after { transform: scaleX(1); transform-origin: left center; }
.menu__link .ic { width: 16px; height: 16px; transition: transform var(--t-base) var(--e-ui); }
.menu__link[aria-expanded="true"] .ic { transform: rotate(180deg); }

.header-actions { display: flex; align-items: center; justify-self: end; gap: 14px; }
.header-actions .btn { min-height: 48px; padding: 0 22px; font-size: 15px; }

.lang {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 3px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line);
  background: rgba(255, 255, 255, 0.7);
}
.lang__item {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  color: var(--c-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: color var(--t-fast) var(--e-ui), background-color var(--t-fast) var(--e-ui);
}
.lang__item:hover { color: var(--c-black); }
.lang__item[aria-current="true"] { background: var(--c-black); color: var(--c-white); }
.lang--dark { border-color: rgba(255, 255, 255, 0.16); background: transparent; }
.lang--dark .lang__item { color: rgba(255, 255, 255, 0.6); }
.lang--dark .lang__item:hover { color: var(--c-white); }
.lang--dark .lang__item[aria-current="true"] { background: var(--c-white); color: var(--c-black); }

.header-mobile { display: none; align-items: center; justify-self: end; gap: 8px; }
.header-mobile__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  background: rgba(255, 255, 255, 0.8);
  color: var(--c-black);
}
.burger { position: relative; width: 18px; height: 12px; }
.burger span {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--t-base) var(--e-ui);
}
.burger span:first-child { top: 1px; }
.burger span:last-child { bottom: 1px; }
.is-menu-open .burger span:first-child { transform: translateY(4px) rotate(45deg); }
.is-menu-open .burger span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* --- Mega-menu „Oferta” --- */
.mega {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 1px);
  padding-top: 10px;
  pointer-events: none;
  visibility: hidden;
}
.mega.is-open { pointer-events: auto; visibility: visible; }
.mega__card {
  border-radius: var(--r-card);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-soft), 0 2px 8px -4px rgba(43, 42, 40, 0.08);
  overflow: hidden;
}
.mega__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 16px;
}
.mega__col {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 20px;
  border-radius: 14px;
  transition: background-color var(--t-fast) var(--e-ui);
}
.mega__col:hover { background: var(--c-cream); }
.mega__col h3 { font-size: 18px; line-height: 1.3; }
.mega__col p { font-size: 15px; line-height: 1.55; color: var(--c-text); }
.mega__col .link { margin-top: 6px; font-size: 15px; }
.mega__col .icon-circle { margin-bottom: 6px; }
.mega__col:hover .icon-circle { background: var(--c-orange); color: var(--c-white); }
.mega__bar {
  display: flex;
  align-items: center;
  gap: 8px 28px;
  flex-wrap: wrap;
  padding: 16px 36px;
  background: var(--c-cream);
  border-top: 1px solid var(--c-line);
}
.mega__shortcut { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--c-black); }
.mega__shortcut .ic { color: var(--c-orange-deep); width: 18px; height: 18px; }
.mega__shortcut:hover { color: var(--c-orange-text); }
.mega__soon { font-size: 12px; font-weight: 600; color: var(--c-muted); background: var(--c-sand); border-radius: var(--r-pill); padding: 2px 8px; }

/* --- Menu mobilne (z prawej): na telefonie na cały ekran, od 600 px panel boczny 480 px z przyciemnionym tłem
   (uwaga Wilka z 27.10: „responsive menu sidebar” — pełnoekranowa biała plansza na tablecie i wąskim
   laptopie wyglądała pusto, a pomarańczowy przycisk rozciągał się na całą szerokość ekranu) --- */
.mobile-menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 94;
  background: rgba(29, 28, 26, 0.45);
  opacity: 0;
  visibility: hidden;
}
.mobile-menu-scrim.is-open { visibility: visible; will-change: opacity; }
.mobile-menu {
  --mm-pad: var(--gutter);
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--c-white);
  /* stan ukryty: visibility; przesunięcie poza ekran ustawia GSAP (xPercent), żeby nie dublować transformacji */
  visibility: hidden;
}
@media (min-width: 600px) {
  .mobile-menu {
    --mm-pad: 36px;
    left: auto;
    width: min(480px, 100%);
    box-shadow: -40px 0 90px -50px rgba(29, 28, 26, 0.5);
  }
}
.mobile-menu.is-open { visibility: visible; will-change: transform; }
.mobile-menu__top {
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--mm-pad);
  border-bottom: 1px solid var(--c-line);
}
.mobile-menu__body { overflow-y: auto; padding: 16px var(--mm-pad) 24px; overscroll-behavior: contain; }
.mobile-menu__list { display: grid; }
.mobile-menu__item { border-bottom: 1px solid var(--c-line); }
.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 600;
  color: var(--c-black);
  letter-spacing: -0.01em;
  text-align: left;
  transition: color var(--t-base) var(--e-out), transform 0.45s var(--e-out);
}
/* pozycje menu „zapalają się” pod kursorem także w menu mobilnym (małe okno przeglądarki na komputerze) */
.mobile-menu__link:hover, .mobile-menu__link:focus-visible { color: var(--c-orange-text); transform: translateX(6px); }
.mobile-menu__link .ic { width: 24px; height: 24px; transition: transform var(--t-base) var(--e-ui); color: var(--c-orange-deep); }
.mobile-menu__link[aria-expanded="true"] .ic { transform: rotate(45deg); }
.mobile-menu__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-slow) var(--e-out);
}
.mobile-menu__sub.is-open { grid-template-rows: 1fr; }
.mobile-menu__sub > div { overflow: hidden; }
.mobile-menu__sub ul { display: grid; gap: 4px; padding: 0 0 18px; }
.mobile-menu__sub a { display: block; padding: 8px 0; font-size: 18px; font-weight: 500; color: var(--c-text); transition: color var(--t-base) var(--e-out), transform 0.45s var(--e-out); }
.mobile-menu__sub a:hover, .mobile-menu__sub a:focus-visible { color: var(--c-orange-text); transform: translateX(6px); }
.mobile-menu__foot { display: grid; gap: 12px; padding: 16px var(--mm-pad) calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--c-line); }
.mobile-menu__phone { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; font-weight: 600; color: var(--c-black); }
.mobile-menu__phone .ic { color: var(--c-orange-deep); }
.mobile-menu__phone { transition: color var(--t-base) var(--e-out); }
.mobile-menu__phone:hover { color: var(--c-orange-text); }

/* =========================================================================
   Okrągły przycisk z obracającym się tekstem (rotor)
   ========================================================================= */
.rotor {
  position: relative;
  display: grid;
  place-items: center;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: var(--c-orange);
  color: var(--c-black);
  box-shadow: 0 0 0 8px var(--c-white);
  -webkit-tap-highlight-color: transparent;
}
.rotor__ring { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
.rotor__ring text {
  fill: var(--c-black);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.rotor__core {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--c-black);
  color: var(--c-white);
  transition: transform var(--t-base) var(--e-ui);
}
.rotor__core .ic { width: 26px; height: 26px; transform: rotate(45deg); transition: transform var(--t-base) var(--e-ui); }
.rotor:hover .rotor__core .ic { transform: rotate(90deg); }
.rotor:hover .rotor__core { transform: scale(1.06); }
/* Bez JS tekst obraca się przez CSS (z JS sterowanie przejmuje GSAP i przyspiesza płynnie). */
html:not(.js-motion) .rotor__ring { animation: spin 20s linear infinite; }
html:not(.js-motion) .rotor:hover .rotor__ring { animation-duration: 6s; }

/* =========================================================================
   Akordeon FAQ
   ========================================================================= */
.faq { display: grid; gap: 12px; }
.faq-item {
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-white);
  transition: border-color var(--t-base) var(--e-ui), box-shadow var(--t-base) var(--e-ui), background-color var(--t-base) var(--e-ui);
}
.faq-item:hover { border-color: #D9D2C7; }
.faq-item.is-open { border-color: rgba(239, 127, 27, 0.6); box-shadow: var(--shadow-soft); }
.faq-q {
  display: grid;
  grid-template-columns: 1fr 40px;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 22px 22px 22px 28px;
  text-align: left;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--c-black);
  border-radius: var(--r-card);
}
.faq-q:focus-visible { outline-offset: -2px; border-radius: var(--r-card); }
.faq-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-orange-soft);
  color: var(--c-orange-deep);
  transition: transform var(--t-slow) var(--e-ui), background-color var(--t-base) var(--e-ui), color var(--t-base) var(--e-ui);
}
.faq-icon .ic { width: 18px; height: 18px; stroke-width: 2.25; }
.faq-item.is-open .faq-icon { transform: rotate(45deg); background: var(--c-orange); color: var(--c-black); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-slow) cubic-bezier(0.33, 1, 0.68, 1);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
/* zwinięta odpowiedź jest też ukryta dla czytników ekranu: visibility przełącza się po zakończeniu
   zwijania, a przy otwieraniu od razu */
.faq-a__inner { overflow: hidden; visibility: hidden; transition: visibility 0s linear var(--t-slow); }
.faq-item.is-open .faq-a__inner { visibility: visible; transition-delay: 0s; }
/* bez JavaScriptu wszystkie odpowiedzi są otwarte */
.no-js .faq-a { grid-template-rows: 1fr; }
.no-js .faq-a__inner { visibility: visible; }
.no-js .faq-a p { opacity: 1; transform: none; }
.faq-a p {
  padding: 0 88px 26px 28px;
  color: var(--c-text);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--t-slow) var(--e-ui), transform var(--t-slow) var(--e-ui);
}
.faq-item.is-open .faq-a p { opacity: 1; transform: none; transition-delay: 80ms; }

/* =========================================================================
   Widget Pani Bożenki
   ========================================================================= */
.bz {
  /* odstęp widgetu od krawędzi ekranu; od niego liczona jest też maksymalna wysokość panelu */
  --bz-offset: 24px;
  position: fixed;
  right: calc(var(--bz-offset) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--bz-offset) + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  display: grid;
  justify-items: end;
  gap: 14px;
  pointer-events: none;
}
.bz > * { pointer-events: auto; }
.bz__launcher {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--c-orange);
  color: var(--c-black);
  box-shadow: 0 16px 34px -12px rgba(217, 111, 16, 0.6), 0 4px 10px -4px rgba(43, 42, 40, 0.25);
  transform: scale(0);
  transition: background-color var(--t-base) var(--e-ui);
}
.bz__launcher:hover { background: var(--c-orange-deep); }
.bz__launcher .ic { width: 26px; height: 26px; transition: transform var(--t-base) var(--e-ui), opacity var(--t-fast) var(--e-ui); }
.bz__launcher .ic-close { position: absolute; opacity: 0; transform: rotate(-45deg); }
.bz.is-open .bz__launcher .ic-chat { opacity: 0; transform: rotate(45deg); }
.bz.is-open .bz__launcher .ic-close { opacity: 1; transform: rotate(0); }
.bz__bubble {
  /* dymek leży nad przyciskiem poza układem widgetu: ukryty nie zajmuje miejsca
     i nie wypycha otwartego panelu w górę (pod nagłówek strony) */
  position: absolute;
  right: 0;
  bottom: 74px; /* przycisk 60 px + odstęp 14 px */
  width: max-content;
  max-width: 250px;
  padding: 14px 40px 14px 18px;
  border-radius: 18px 18px 6px 18px;
  background: var(--c-white);
  color: var(--c-black);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  box-shadow: var(--shadow-float);
  border: 1px solid var(--c-line);
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transform-origin: bottom right;
  visibility: hidden;
  cursor: pointer;
}
.bz__bubble strong { display: block; font-size: 13px; color: var(--c-muted); font-weight: 500; margin-bottom: 2px; }
.bz__bubble-close {
  position: absolute;
  top: 8px; right: 8px;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  color: var(--c-muted);
}
.bz__bubble-close:hover { background: var(--c-sand); color: var(--c-black); }
.bz__panel {
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 380px;
  height: 560px;
  /* panel kończy się nad przyciskiem i nie wchodzi pod nagłówek strony:
     wysokość ekranu − nagłówek − 12 px luzu − odstęp od dołu − przycisk z odstępem (74 px) */
  --bz-room: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 12px + var(--bz-offset) + 74px + env(safe-area-inset-bottom, 0px));
  max-height: calc(100vh - var(--bz-room));
  max-height: calc(100dvh - var(--bz-room));
  border-radius: 22px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  box-shadow: 0 30px 80px -30px rgba(43, 42, 40, 0.45);
  overflow: hidden;
  transform-origin: bottom right;
  visibility: hidden;
  opacity: 0;
}
.bz__head {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 16px;
  background: var(--c-ink);
  color: var(--c-white);
}
.bz__avatar { width: 44px; height: 44px; border-radius: 50%; }
.bz__name { font-family: var(--font-display); font-size: 16px; font-weight: 600; line-height: 1.2; color: var(--c-white); }
.bz__role { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255, 255, 255, 0.65); line-height: 1.3; }
.bz__role::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4CC38A; }
.bz__head-actions { display: flex; gap: 4px; }
.bz__head-btn {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.75);
  transition: background-color var(--t-fast) var(--e-ui), color var(--t-fast) var(--e-ui);
}
.bz__head-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--c-white); }
.bz__head-btn .ic { width: 18px; height: 18px; }
.bz__log {
  overflow-y: auto;
  padding: 18px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background:
    radial-gradient(circle at 1px 1px, #EFEAE2 1px, transparent 1.3px) 0 0 / 22px 22px,
    var(--c-cream);
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}
.bz-msg {
  max-width: 86%;
  padding: 11px 14px;
  border-radius: 16px 16px 16px 6px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  color: var(--c-black);
  font-size: 15px;
  line-height: 1.5;
  align-self: flex-start;
}
.bz-msg--user {
  align-self: flex-end;
  border-radius: 16px 16px 6px 16px;
  background: var(--c-black);
  border-color: var(--c-black);
  color: var(--c-white);
}
.bz-msg--note { background: var(--c-orange-soft); border-color: transparent; font-size: 14px; }
.bz-msg--result { border-color: rgba(239, 127, 27, 0.6); box-shadow: var(--shadow-soft); max-width: 100%; }
.bz-msg--result strong { display: block; font-family: var(--font-display); font-size: 17px; line-height: 1.35; margin: 2px 0 10px; }
.bz-msg--result .btn { margin-top: 4px; }
.bz-msg__kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-orange-text); }
.bz-typing {
  display: inline-flex;
  gap: 4px;
  align-self: flex-start;
  padding: 14px 16px;
  border-radius: 16px 16px 16px 6px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
}
.bz-typing span { width: 7px; height: 7px; border-radius: 50%; background: #B9B2A7; animation: typing 1s infinite var(--e-ui); }
.bz-typing span:nth-child(2) { animation-delay: 0.15s; }
.bz-typing span:nth-child(3) { animation-delay: 0.3s; }
.bz-choices { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 4px; }
.bz-choice {
  padding: 9px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-orange);
  background: var(--c-white);
  color: var(--c-black);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  transition: background-color var(--t-fast) var(--e-ui), color var(--t-fast) var(--e-ui), border-color var(--t-fast) var(--e-ui);
}
.bz-choice:hover { background: var(--c-orange); border-color: var(--c-orange); }
.bz-form { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--c-white); border: 1px solid var(--c-line); max-width: 100%; }
.bz-form .field__input { min-height: 46px; font-size: 15px; }
.bz-form .btn { min-height: 48px; }
.bz-form__title { font-weight: 600; color: var(--c-black); font-size: 15px; }
.bz__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--c-line);
  background: var(--c-white);
  overflow-x: auto;
  scrollbar-width: none;
}
.bz__foot::-webkit-scrollbar { display: none; }
.bz__quick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  background: var(--c-sand);
  color: var(--c-black);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--e-ui);
}
.bz__quick:hover { background: var(--c-orange-soft); }
.bz__quick .ic { width: 15px; height: 15px; color: var(--c-orange-deep); }

@media (max-width: 767px) {
  .bz { --bz-offset: 16px; }
  .bz__panel { width: calc(100vw - 32px); height: calc(100vh - var(--bz-room)); height: calc(100dvh - var(--bz-room)); max-height: none; }
}

/* =========================================================================
   Komunikat (toast) — np. przełącznik języka w mockupie
   ========================================================================= */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  z-index: 120;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 32px;
  align-items: start;
  gap: 14px;
  width: min(92vw, 460px);
  padding: 16px 14px 18px 18px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  box-shadow: 0 28px 60px -28px rgba(43, 42, 40, 0.45), 0 2px 6px rgba(43, 42, 40, 0.06);
  transform: translate(-50%, 24px) scale(0.97);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.45s var(--e-out), opacity 0.3s var(--e-out), visibility 0s linear 0.45s;
}
/* pomarańczowy akcent po lewej */
.toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c-orange); }
.toast.is-visible { transform: translate(-50%, 0) scale(1); opacity: 1; visibility: visible; pointer-events: auto; transition: transform 0.45s var(--e-out), opacity 0.3s var(--e-out), visibility 0s; }
.toast__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--c-orange-soft); color: var(--c-orange-deep); }
.toast__icon .ic { width: 20px; height: 20px; }
.toast__body { display: grid; gap: 3px; padding-top: 2px; }
.toast__title { font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--c-black); }
.toast__text { font-size: 14px; line-height: 1.5; color: var(--c-text); }
.toast__close { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--c-muted); transition: background-color 0.25s var(--e-out), color 0.25s var(--e-out); }
.toast__close:hover { background: var(--c-sand); color: var(--c-black); }
.toast__close .ic { width: 16px; height: 16px; }
/* pasek czasu do zniknięcia dymku */
.toast__timer { position: absolute; left: 4px; right: 0; bottom: 0; height: 3px; background: rgba(239, 127, 27, 0.35); transform-origin: left center; transform: scaleX(0); }
.toast.is-visible .toast__timer { animation: toast-timer var(--toast-ms, 5000ms) linear forwards; }
.toast.is-paused .toast__timer { animation-play-state: paused; }
@keyframes toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.bz-msg__actions { display: grid; gap: 10px; justify-items: start; margin-top: 14px; }
.bz-msg__actions .link { font-size: 14px; }