/* ==========================================================================
   main.css — wszystko poniżej pierwszego ekranu.
   TOKENY SĄ W critical.css (wstrzykiwany inline przed tym plikiem).
   Kolejność: sekcje → komponenty → nawigacja mobilna → modal → formularz
              → stopka → efekty → redukcja ruchu.
   Piszemy mobile-first: bazowo 390 px, szerokości tylko przez min-width.
   ========================================================================== */

/* ---- WSPÓLNE DLA SEKCJI ---- */
.sekcja{ padding-block:var(--section-y); }
.sekcja--alt{ background:hsl(var(--c-surface)); }
.sekcja--tight{ padding-block:var(--section-y-tight); }
.sekcja__head{ max-width:var(--measure); margin-bottom:var(--space-10); }
.sekcja__head--center{ margin-inline:auto; text-align:center; }
.sekcja__kreska{ width:3rem; height:3px; margin-bottom:var(--space-5);
  background:hsl(var(--c-accent)); border-radius:var(--radius-pill);
  box-shadow:var(--glow-sm); }
.sekcja__head--center .sekcja__kreska{ margin-inline:auto; }
.sekcja__h2{ font-size:var(--fs-h2); margin-bottom:var(--space-3); }
.sekcja__lead{ font-size:var(--fs-lead); color:hsl(var(--c-text-muted)); }

/* ==========================================================================
   USŁUGI I CENY
   ========================================================================== */
.uslugi__grid{ display:grid; gap:var(--grid-gap); grid-template-columns:1fr; }
@media (min-width:720px){ .uslugi__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .uslugi__grid{ grid-template-columns:repeat(3,1fr); align-items:stretch; } }

.usluga{ position:relative; isolation:isolate; display:flex; flex-direction:column;
  padding:var(--space-6); overflow:hidden;
  border:1px solid hsl(var(--c-border)); border-radius:var(--radius-xl);
  background:hsl(var(--c-surface-raised)); box-shadow:var(--shadow-card);
  transition:border-color var(--dur-base) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard),
             transform var(--dur-base) var(--ease-standard); }
.usluga::before{ content:""; position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center; }
.usluga::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, hsl(var(--p-neutral-0)/.78), hsl(var(--p-neutral-0)/.92)); }
.usluga:hover{ transform:translateY(-4px); border-color:hsl(var(--c-accent)/.55);
  box-shadow:var(--shadow-raised), 0 0 30px -8px hsl(var(--c-accent)/.35); }

.usluga--wyroznione{ border-color:hsl(var(--c-accent)/.5); }
@media (min-width:1024px){
  .usluga--wyroznione{ transform:scale(1.035); z-index:2; }
  .usluga--wyroznione:hover{ transform:scale(1.035) translateY(-4px); }
}
.usluga__badge{ position:absolute; top:var(--space-4); right:var(--space-4);
  padding:var(--space-1) var(--space-3); font-size:var(--fs-2xs); font-weight:var(--fw-bold);
  letter-spacing:.06em; text-transform:uppercase;
  color:hsl(var(--c-text-on-accent)); background:hsl(var(--c-accent));
  border-radius:var(--radius-pill); box-shadow:var(--glow-sm); }

.usluga__ico{ display:grid; place-items:center; width:3.25rem; height:3.25rem;
  margin-bottom:var(--space-4); border-radius:var(--radius); background:hsl(var(--c-accent)/.12); }
.usluga__ico svg{ width:1.6rem; height:1.6rem; fill:none; stroke:hsl(var(--c-accent));
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.usluga__h3{ font-size:var(--fs-h3); margin-bottom:var(--space-2); }
.usluga__lead{ font-size:var(--fs-sm); color:hsl(var(--c-text-muted)); margin-bottom:var(--space-5); }

.usluga__cena{ display:flex; align-items:baseline; gap:var(--space-2);
  padding-block:var(--space-4); margin-bottom:var(--space-4);
  border-block:1px solid hsl(var(--c-border)); }
.usluga__od{ font-size:var(--fs-xs); color:hsl(var(--c-text-faint));
  text-transform:uppercase; letter-spacing:.07em; }
.usluga__kwota{ font-size:var(--fs-price); font-weight:var(--fw-extrabold);
  color:hsl(var(--c-accent)); text-shadow:var(--glow-text); }
.usluga__jedn{ font-size:var(--fs-xs); color:hsl(var(--c-text-faint)); }

.check-list{ display:grid; gap:var(--space-2); margin-bottom:var(--space-6); }
.check-list li{ position:relative; padding-inline-start:1.6rem;
  font-size:var(--fs-sm); color:hsl(var(--c-text-muted)); }
.check-list li::before{ content:""; position:absolute; inset-inline-start:0; top:.45em;
  width:.85rem; height:.85rem; background:hsl(var(--c-accent));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.5 17.2 4.3 12l1.5-1.5 3.7 3.7 8.7-8.7L19.7 7z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.5 17.2 4.3 12l1.5-1.5 3.7 3.7 8.7-8.7L19.7 7z'/%3E%3C/svg%3E") center/contain no-repeat; }
.usluga__akcje{ display:grid; gap:var(--space-2); margin-top:auto; }
.usluga__wiecej{ font-size:var(--fs-sm); font-weight:var(--fw-bold);
  color:hsl(var(--c-accent-text)); text-align:center;
  transition:color var(--dur-base) var(--ease-standard); }
.usluga__wiecej:hover{ color:hsl(var(--c-accent)); }

.ceny-nota{ margin-top:var(--space-6); font-size:var(--fs-sm);
  color:hsl(var(--c-text-faint)); text-align:center; }

/* ==========================================================================
   REALIZACJE
   ========================================================================== */
.realizacje__grid{ display:grid; gap:var(--space-3); grid-template-columns:repeat(2,1fr); }
@media (min-width:900px){ .realizacje__grid{ grid-template-columns:repeat(3,1fr); gap:var(--space-4); } }

.realizacja{ position:relative; display:block; width:100%; padding:0;
  aspect-ratio:1; overflow:hidden; border:1px solid hsl(var(--c-border));
  border-radius:var(--radius); background:hsl(var(--c-surface-sunken)); cursor:pointer;
  transition:border-color var(--dur-base) var(--ease-standard); }
.realizacja img{ width:100%; height:100%; object-fit:cover;
  transition:transform var(--dur-slow) var(--ease-out); }
.realizacja:hover{ border-color:hsl(var(--c-accent)/.6); }
.realizacja:hover img,.realizacja:focus-visible img{ transform:scale(1.07); }
.realizacja__opis{ position:absolute; inset:auto 0 0 0; padding:var(--space-4) var(--space-3);
  background:var(--overlay-media); text-align:start; }
.realizacja__auto{ display:block; font-size:var(--fs-sm); font-weight:var(--fw-semibold); }
.realizacja__zakres{ display:block; font-size:var(--fs-2xs); color:hsl(var(--c-accent-text)); }

/* ==========================================================================
   OPINIE — widżet w stylu Google
   Kolory i logo Google użyte świadomie: to oznaczenie ŹRÓDŁA opinii, które
   naprawdę stamtąd pochodzą. Wszystko renderowane lokalnie — zero skryptów
   zewnętrznych, zero cookies, zero wpływu na czas ładowania.
   ========================================================================== */
:root{
  --g-blue:217 89% 61%;   --g-red:5 81% 56%;
  --g-yellow:45 97% 50%;  --g-green:136 53% 43%;
  --g-purple:265 60% 58%; --g-teal:187 72% 42%;
}

.g-widget{ border:1px solid hsl(var(--c-border)); border-radius:var(--radius-xl);
  background:hsl(var(--c-surface-raised)); box-shadow:var(--shadow-card); overflow:hidden; }

.g-logo{ width:1.5rem; height:1.5rem; flex:0 0 auto; }

.g-widget__podsum{ display:grid; gap:var(--space-4); align-items:center;
  grid-template-columns:auto 1fr; padding:var(--space-6);
  border-bottom:1px solid hsl(var(--c-border)); }
.g-widget__podsum .g-logo{ width:2.25rem; height:2.25rem; }
.g-widget__nazwa{ font-size:var(--fs-sm); font-weight:var(--fw-semibold);
  color:hsl(var(--c-text-muted)); }
.g-widget__ocena{ display:flex; align-items:center; gap:var(--space-2); margin-block:.15rem; }
.g-widget__liczba{ font-size:var(--fs-h3); font-weight:var(--fw-extrabold); line-height:1; }
.g-widget__ile{ font-size:var(--fs-xs); color:hsl(var(--c-text-faint)); }
.g-widget__cta{ grid-column:1 / -1; }
@media (min-width:760px){
  .g-widget__podsum{ grid-template-columns:auto 1fr auto; padding-inline:var(--space-8); }
  .g-widget__cta{ grid-column:auto; }
}

.g-stars{ display:inline-flex; gap:1px; }
.g-star{ width:1rem; height:1rem; fill:hsl(var(--g-yellow)); }

.g-widget__lista{ display:grid; gap:1px; background:hsl(var(--c-border)); }
@media (min-width:720px){ .g-widget__lista{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .g-widget__lista{ grid-template-columns:repeat(3,1fr); } }

.g-karta{ display:flex; flex-direction:column; gap:var(--space-3);
  padding:var(--space-5); background:hsl(var(--c-surface-raised)); }
.g-karta__gora{ display:flex; align-items:center; gap:var(--space-3); }
.g-avatar{ display:grid; place-items:center; flex:0 0 auto; width:2.5rem; height:2.5rem;
  border-radius:var(--radius-pill); color:hsl(var(--p-neutral-98));
  font-weight:var(--fw-bold); font-size:var(--fs-body); }
.a-niebieski{ background:hsl(var(--g-blue)); }   .a-czerwony{ background:hsl(var(--g-red)); }
.a-zielony{ background:hsl(var(--g-green)); }    .a-fioletowy{ background:hsl(var(--g-purple)); }
.a-morski{ background:hsl(var(--g-teal)); }      .a-pomaranczowy{ background:hsl(var(--c-accent)); }

.g-karta__kto{ display:grid; min-width:0; }
.g-karta__autor{ font-size:var(--fs-sm); font-weight:var(--fw-semibold);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.g-karta__kiedy{ font-size:var(--fs-xs); color:hsl(var(--c-text-faint)); }
.g-karta__zrodlo{ margin-inline-start:auto; display:grid; place-items:center; }
.g-karta__zrodlo .g-logo{ width:1.05rem; height:1.05rem; opacity:.9; }

.g-karta__tresc{ font-size:var(--fs-sm); color:hsl(var(--c-text-muted));
  /* Opinie mają różną długość — przycinamy do 6 linii, żeby karty w rzędzie
     nie różniły się dwukrotnie wysokością. Pełna treść jest w Google. */
  display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; }
.g-karta__usluga{ margin-top:auto; padding-top:var(--space-2); font-size:var(--fs-2xs);
  font-weight:var(--fw-semibold); letter-spacing:.06em; text-transform:uppercase;
  color:hsl(var(--c-accent-text)); }

.g-widget__stopka{ padding:var(--space-4) var(--space-6); font-size:var(--fs-xs);
  color:hsl(var(--c-text-faint)); text-align:center;
  border-top:1px solid hsl(var(--c-border)); }

.ico-ext{ width:.9rem; height:.9rem; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; }

/* ==========================================================================
   MARKI + STATYSTYKI
   ========================================================================== */
.marquee{ position:relative; overflow:hidden;
  -webkit-mask:var(--fade-edges); mask:var(--fade-edges); }
/* Marquee — nieskończona karuzela marek przesuwająca się W PRAWO.
   Ścieżka ma TRZY identyczne kopie listy, a animacja przesuwa ją o dokładnie jedną
   kopię (1/3 szerokości): koniec animacji wygląda identycznie jak początek, więc
   pętla jest niewidoczna. Trzy kopie, nie dwie — przy dwóch na monitorach szerszych
   niż ~1900 px z prawej robiła się pusta przerwa. */
.marquee__track{ display:flex; width:max-content;
  animation:marquee-w-prawo 42s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{ flex:0 0 auto; padding-inline:var(--space-6);
  font-size:var(--fs-marquee); font-weight:var(--fw-bold);
  letter-spacing:var(--tracking-tight); color:hsl(var(--c-accent));
  text-shadow:0 0 20px hsl(var(--c-accent)/.45), 0 0 40px hsl(var(--c-accent)/.25); }
@keyframes marquee-w-prawo{ from{ transform:translate3d(-33.3333%,0,0); } to{ transform:translate3d(0,0,0); } }


/* ==========================================================================
   O NAS — zdjęcie studia, konkret, liczby, CTA i proces
   ========================================================================== */
.o-nas{ display:grid; gap:var(--space-8); align-items:center; }
@media (min-width:900px){
  .o-nas{ grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:var(--space-12); }
}

.o-nas__foto{ position:relative; margin:0; border-radius:var(--radius-xl); overflow:hidden;
  border:1px solid hsl(var(--c-border)); box-shadow:var(--shadow-raised); }
.o-nas__foto img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }
.o-nas__pin{ position:absolute; inset:auto auto var(--space-3) var(--space-3);
  max-width:calc(100% - var(--space-6));
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:var(--space-2) var(--space-4); font-size:var(--fs-xs); font-weight:var(--fw-semibold);
  color:hsl(var(--c-text)); background:hsl(var(--p-neutral-0)/.72);
  border:1px solid hsl(var(--c-border)); border-radius:var(--radius-pill);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.o-nas__pin svg{ width:.9rem; height:.9rem; flex:0 0 auto; fill:none; stroke:hsl(var(--c-accent));
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.o-nas__nad{ margin-bottom:var(--space-2); font-size:var(--fs-xs); font-weight:var(--fw-semibold);
  letter-spacing:.09em; text-transform:uppercase; color:hsl(var(--c-accent-text)); }
.o-nas__tresc p{ color:hsl(var(--c-text-muted)); max-width:54ch; }
.o-nas__tresc .sekcja__h2{ margin-bottom:var(--space-4); }
.o-nas__tresc > p + p{ margin-top:var(--space-4); }

.o-nas__osoba{ margin-top:var(--space-6); padding-inline-start:var(--space-4);
  border-inline-start:2px solid hsl(var(--c-accent)/.55);
  font-size:var(--fs-sm); font-style:italic; }

.o-nas__cta{ display:flex; flex-direction:column; gap:var(--space-3); margin-top:var(--space-8); }
@media (min-width:520px){ .o-nas__cta{ flex-direction:row; flex-wrap:wrap; } }
.o-nas__cta .btn{ flex:1 1 auto; min-width:min(100%, 15rem); }

/* Liczby — przeniesione tu z sekcji marek, bo dopiero obok opisu studia coś znaczą. */
.staty{ display:flex; flex-wrap:wrap; gap:var(--space-5) var(--space-8);
  margin-top:var(--space-8);
  padding-top:var(--space-6); border-top:1px solid hsl(var(--c-border)); }
.staty li{ min-width:5.5rem; }
.staty__v{ display:block; font-size:var(--fs-stat); font-weight:var(--fw-extrabold);
  line-height:1; color:hsl(var(--c-accent)); text-shadow:var(--glow-text); }
.staty__l{ font-size:var(--fs-xs); color:hsl(var(--c-text-muted)); }
@media (min-width:640px){ .staty__l{ font-size:var(--fs-sm); } }

/* ---- Proces: cztery kroki ---- */
.proces{ margin-top:var(--section-y); padding-top:var(--section-y-tight);
  border-top:1px solid hsl(var(--c-border)); }
.proces__h{ font-size:var(--fs-h3); margin-bottom:var(--space-3); }
.proces__lista{ display:grid; gap:var(--space-6); counter-reset:krok; }
@media (min-width:640px){ .proces__lista{ grid-template-columns:repeat(2,1fr); gap:var(--space-8); } }
@media (min-width:1024px){ .proces__lista{ grid-template-columns:repeat(4,1fr); } }

/* Kółko z numerem i linia obok niego.
   Wcześniej linią było obramowanie górne całego elementu, a kółko miało ją zasłonić
   swoim tłem. Nie mogło: kółko było o 5 px wyżej niż środek linii, więc linia
   przecinała je poniżej środka i wychodziła spod łuku w lewym rogu.
   Teraz linia jest osobnym elementem, który ZACZYNA SIĘ ZA kółkiem — nie ma czego
   zasłaniać, a wyrównanie w pionie liczy się z jednej wartości. */
.proces__krok{ position:relative; padding-top:calc(2rem + var(--space-5)); }

.proces__krok::before{
  content:"";
  position:absolute;
  top:calc(1rem - 1px);                              /* dokładnie środek kółka 2rem */
  inset-inline:calc(2rem + var(--space-3)) 0;        /* start za kółkiem, koniec przy krawędzi */
  height:2px;
  border-radius:1px;
  background:hsl(var(--c-border));
}
.proces__krok:first-child::before{ background:hsl(var(--c-accent)); }

.proces__nr{ position:absolute; top:0; inset-inline-start:0;
  display:grid; place-items:center; width:2rem; height:2rem;
  font-size:var(--fs-sm); font-weight:var(--fw-extrabold); line-height:1;
  color:hsl(var(--c-accent)); background:hsl(var(--c-canvas));
  border:2px solid hsl(var(--c-border)); border-radius:var(--radius-pill); }
.proces__krok:first-child .proces__nr{ border-color:hsl(var(--c-accent));
  box-shadow:var(--glow-sm); }
.proces__t{ font-size:var(--fs-h4); margin-bottom:var(--space-2); }
.proces__d{ font-size:var(--fs-sm); color:hsl(var(--c-text-muted)); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ max-width:var(--container-narrow); margin-inline:auto; }
.faq__item{ border-bottom:1px solid hsl(var(--c-border)); }
.faq__item[open] .faq__q{ color:hsl(var(--c-accent-text)); }
.faq__q{ display:flex; align-items:flex-start; gap:var(--space-4);
  padding-block:var(--space-5); font-size:var(--fs-h4); font-weight:var(--fw-semibold);
  line-height:1.35; cursor:pointer; list-style:none;
  transition:color var(--dur-base) var(--ease-standard); }
.faq__q::-webkit-details-marker{ display:none; }
.faq__q:hover{ color:hsl(var(--c-accent-text)); }
.faq__znak{ flex:0 0 auto; position:relative; width:1.25rem; height:1.25rem; margin-top:.25rem; }
.faq__znak::before,.faq__znak::after{ content:""; position:absolute; inset:50% 0 auto 0;
  height:2px; background:hsl(var(--c-accent)); border-radius:2px; translate:0 -50%;
  transition:transform var(--dur-base) var(--ease-standard); }
.faq__znak::after{ transform:rotate(90deg); }
.faq__item[open] .faq__znak::after{ transform:rotate(0); }
.faq__a{ padding-bottom:var(--space-5); padding-inline-start:calc(1.25rem + var(--space-4));
  color:hsl(var(--c-text-muted)); max-width:var(--measure); }

/* ==========================================================================
   WYCENA — formularz + dane kontaktowe
   ========================================================================== */
.wycena__grid{ display:grid; gap:var(--space-10); grid-template-columns:1fr; }
@media (min-width:900px){ .wycena__grid{ grid-template-columns:1fr 1fr; gap:var(--space-12); align-items:start; } }

.form{ display:grid; gap:var(--space-5); padding:var(--space-6);
  border:1px solid hsl(var(--c-border)); border-radius:var(--radius-xl);
  background:hsl(var(--c-surface-raised)); box-shadow:var(--shadow-card); }
@media (min-width:600px){ .form{ padding:var(--space-8); } }
.form__rzad{ display:grid; gap:var(--space-5); }
@media (min-width:560px){ .form__rzad--2{ grid-template-columns:1fr 1fr; } }
.field{ display:grid; gap:var(--space-2); }
.field label{ font-size:var(--fs-sm); font-weight:var(--fw-bold); }
.field__wym{ color:hsl(var(--c-accent-text)); }
.input,.select,.textarea{ width:100%; min-height:var(--control-h);
  padding:var(--space-3) var(--space-4);
  font-size:1rem;                       /* min. 16px — inaczej iOS zoomuje przy fokusie */
  color:hsl(var(--c-text)); background:hsl(var(--c-canvas));
  border:1px solid hsl(var(--c-border)); border-radius:var(--radius-md);
  transition:border-color var(--dur-base) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard); }
.textarea{ min-height:7.5rem; resize:vertical; line-height:1.55; }

/* Własny chevron zamiast natywnej strzałki <select>.
   Natywna klei się do krawędzi pola i w każdej przeglądarce leży gdzie indziej. */
.select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-inline-end:calc(var(--space-4) * 2 + .75rem);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23A6A6A6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--space-4) center;
  background-size:.75rem .5rem;
}
.select:hover{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23FF7542' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); }
/* Lista rozwijana rysowana przez system — wymuszamy czytelne kolory,
   inaczej na ciemnym motywie potrafi wyjść biały tekst na białym tle. */
.select option{ background:hsl(var(--c-surface-raised)); color:hsl(var(--c-text)); }

.input::placeholder,.textarea::placeholder{ color:hsl(var(--c-text-faint)); }
.input:hover,.select:hover,.textarea:hover{ border-color:hsl(var(--c-border-strong)); }
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{
  border-color:hsl(var(--c-accent)); box-shadow:0 0 0 3px hsl(var(--c-accent)/.22); }
.field--blad .input,.field--blad .select,.field--blad .textarea{ border-color:hsl(var(--c-danger)); }
.field__blad{ font-size:var(--fs-xs); color:hsl(var(--c-danger)); }

.consent{ display:grid; grid-template-columns:auto 1fr; gap:var(--space-3);
  align-items:start; font-size:var(--fs-xs); color:hsl(var(--c-text-muted)); }
.consent input{ width:1.25rem; height:1.25rem; margin:.1rem 0 0; accent-color:hsl(var(--c-accent)); }
.consent a{ color:hsl(var(--c-accent-text)); text-decoration:underline; text-underline-offset:2px; }
.hp{ position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__info{ font-size:var(--fs-xs); color:hsl(var(--c-text-faint)); }
.form__status{ padding:var(--space-4); border-radius:var(--radius-md); font-size:var(--fs-sm); }
.form__status--ok{ background:hsl(var(--c-success)/.14); border:1px solid hsl(var(--c-success)/.5); }
.form__status--err{ background:hsl(var(--c-danger)/.12); border:1px solid hsl(var(--c-danger)/.5); }

.kontakt-blok__h{ font-size:var(--fs-h3); margin-bottom:var(--space-3); }
.kontakt-blok__lead{ font-size:var(--fs-lead); color:hsl(var(--c-text-muted));
  margin-bottom:var(--space-8); max-width:44ch; }

/* Cały wiersz jest klikalny — ikona, etykieta i wartość razem.
   Wcześniej etykieta i wartość leciały w jednej linii, bo to były zwykłe <span>-y. */
.kontakt-lista{ display:grid; gap:var(--space-3); }
.kontakt-poz{ display:grid; grid-template-columns:auto 1fr auto; gap:var(--space-4);
  align-items:center; padding:var(--space-4);
  border:1px solid hsl(var(--c-border)); border-radius:var(--radius);
  background:hsl(var(--c-surface-raised));
  transition:border-color var(--dur-base) var(--ease-standard),
             background var(--dur-base) var(--ease-standard),
             transform var(--dur-fast) var(--ease-standard); }
a.kontakt-poz:hover{ border-color:hsl(var(--c-accent)/.6);
  background:hsl(var(--c-accent)/.06); transform:translateY(-1px); }
.kontakt-poz--statyczna{ background:transparent; }

.kontakt-poz__ico{ display:grid; place-items:center; width:2.75rem; height:2.75rem;
  border-radius:var(--radius-md); background:hsl(var(--c-accent)/.12); }
.kontakt-poz__ico svg{ width:1.25rem; height:1.25rem; fill:none; stroke:hsl(var(--c-accent));
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* Grid w kolumnie — etykieta, wartość i opis jedno pod drugim. */
.kontakt-poz__txt{ display:grid; gap:.15rem; min-width:0; }
.kontakt-poz__et{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.07em;
  color:hsl(var(--c-text-faint)); }
.kontakt-poz__w{ font-size:var(--fs-h4); font-weight:var(--fw-bold); line-height:1.25;
  overflow-wrap:anywhere; }
.kontakt-poz__w--male{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); }
.kontakt-poz__d{ font-size:var(--fs-xs); color:hsl(var(--c-text-muted)); }

.kontakt-poz__strzalka{ width:1.1rem; height:1.1rem; fill:none; stroke:hsl(var(--c-text-faint));
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke var(--dur-base) var(--ease-standard),
             transform var(--dur-base) var(--ease-standard); }
a.kontakt-poz:hover .kontakt-poz__strzalka{ stroke:hsl(var(--c-accent)); transform:translateX(3px); }

/* Znacznik „otwarte / zamknięte" liczony po stronie serwera w czasie polskim. */
.kontakt-poz__status{ display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:hsl(var(--c-text-faint)); }
.kontakt-poz__status .kropka{ width:.5rem; height:.5rem; border-radius:var(--radius-pill);
  background:hsl(var(--c-text-faint)); }
.kontakt-poz__status.jest-otwarte{ color:hsl(var(--c-success)); }
.kontakt-poz__status.jest-otwarte .kropka{ background:hsl(var(--c-success));
  box-shadow:0 0 0 3px hsl(var(--c-success)/.2); }

.godziny{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.godziny th{ font-weight:var(--fw-regular); color:hsl(var(--c-text-muted));
  text-align:start; padding:.3rem 0; }
.godziny td{ text-align:end; padding:.3rem 0; font-variant-numeric:tabular-nums; }

/* ==========================================================================
   NAWIGACJA MOBILNA (szuflada)
   ========================================================================== */
.nav__head,.nav__foot{ display:none; }
.nav__opis{ display:none; }

@media (max-width:1023.98px){
  html.js .nav{ position:fixed; inset:0 auto 0 0; z-index:var(--z-drawer);
    width:min(21rem, 88vw); padding:var(--space-5);
    background:hsl(var(--c-surface)); border-inline-end:1px solid hsl(var(--c-border));
    box-shadow:var(--shadow-overlay); overflow-y:auto;
    transform:translateX(-100%); visibility:hidden;
    transition:transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); }
  html.js .nav.is-open{ transform:none; visibility:visible; transition-delay:0s; }
  html.js .nav__head{ display:flex; align-items:center; justify-content:space-between;
    padding-bottom:var(--space-4); margin-bottom:var(--space-4);
    border-bottom:1px solid hsl(var(--c-border)); }
  html.js .nav__foot{ display:grid; gap:var(--space-3); margin-top:var(--space-8);
    padding-top:var(--space-5); border-top:1px solid hsl(var(--c-border)); }
  html.js .nav__opis{ display:block; font-size:var(--fs-xs); color:hsl(var(--c-text-faint)); }

  /* Bez JS menu po prostu stoi w treści — nic się nie chowa. */
  html:not(.js) .nav{ flex-basis:100%; order:9; padding-block:var(--space-4); }
  html:not(.js) .nav__list{ display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4); }
}

.nav__title{ font-size:var(--fs-xs); text-transform:uppercase;
  letter-spacing:.07em; color:hsl(var(--c-text-faint)); }
.nav__close{ display:grid; place-items:center; width:44px; height:44px;
  background:none; border:0; cursor:pointer; color:hsl(var(--c-text)); }
.nav__close svg{ width:1.25rem; height:1.25rem; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; }

.nav__list{ display:grid; gap:var(--space-4); }
.nav__link{ display:flex; align-items:center; gap:.4rem; font-size:var(--fs-h4);
  font-weight:var(--fw-semibold);
  transition:color var(--dur-base) var(--ease-standard); }
.nav__link--rozwin{ width:100%; padding:0; background:none; border:0; cursor:pointer;
  text-align:start; font-family:inherit; color:inherit; justify-content:space-between; }
.nav__item--has-sub.is-otwarte > .nav__link--rozwin .nav__strzalka{ transform:rotate(180deg); opacity:1; }
.nav__strzalka{ width:.7rem; height:.7rem; flex:0 0 auto; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  opacity:.65; transition:transform var(--dur-base) var(--ease-standard),
                          opacity var(--dur-base) var(--ease-standard); }
.nav__link:hover,.nav__link.is-active{ color:hsl(var(--c-accent-text)); }
.nav__rozwijane{
  display:grid;
  grid-template-rows:0fr;          /* zamknięte */
  transition:grid-template-rows var(--dur-base) var(--ease-out),
             opacity var(--dur-fast) var(--ease-standard);
  opacity:0;
}
.nav__item--has-sub.is-otwarte > .nav__rozwijane{ grid-template-rows:1fr; opacity:1; }
/* Dziecko siatki MUSI mieć overflow:hidden i min-height:0, inaczej nie da się
   go ścisnąć do zera i animacja nie zadziała. */
.nav__sub{ display:grid; gap:var(--space-3); overflow:hidden; min-height:0;
  padding-inline-start:var(--space-4); border-inline-start:2px solid hsl(var(--c-accent)/.35);
  margin-top:0;
  transition:margin-top var(--dur-base) var(--ease-out); }
.nav__item--has-sub.is-otwarte > .nav__rozwijane > .nav__sub{ margin-top:var(--space-3); }

/* Pozycje wjeżdżają z lekkim opóźnieniem jedna po drugiej — rozwijanie ma wtedy
   kierunek, a nie wygląda jak nagłe pojawienie się bloku. */
.nav__sub > li{ translate:0 -6px; opacity:0;
  transition:translate var(--dur-base) var(--ease-out), opacity var(--dur-base) linear; }
.nav__item--has-sub.is-otwarte > .nav__rozwijane > .nav__sub > li{ translate:0; opacity:1; }
.nav__item--has-sub.is-otwarte > .nav__rozwijane > .nav__sub > li:nth-child(1){ transition-delay:40ms; }
.nav__item--has-sub.is-otwarte > .nav__rozwijane > .nav__sub > li:nth-child(2){ transition-delay:80ms; }
.nav__item--has-sub.is-otwarte > .nav__rozwijane > .nav__sub > li:nth-child(3){ transition-delay:120ms; }
.nav__item--has-sub.is-otwarte > .nav__rozwijane > .nav__sub > li:nth-child(4){ transition-delay:160ms; }

/* Bez JavaScriptu nie da się nic rozwinąć, więc wszystko zostaje otwarte. */
html:not(.js) .nav__rozwijane{ grid-template-rows:1fr; opacity:1; }
html:not(.js) .nav__sub > li{ translate:0; opacity:1; }
.nav__sublabel{ display:block; font-weight:var(--fw-bold); }
.nav__sublink{ display:block; transition:color var(--dur-base) var(--ease-standard); }
.nav__sublink:hover,.nav__sublink.is-active{ color:hsl(var(--c-accent-text)); }
.nav__tel{ font-size:var(--fs-h4); font-weight:var(--fw-bold); text-align:center; }

.nav-overlay{ position:fixed; inset:0; z-index:calc(var(--z-header) - 10);
  background:hsl(var(--p-neutral-0)/.65); backdrop-filter:blur(2px);
  opacity:0; transition:opacity var(--dur-base) var(--ease-standard); }
.nav-overlay.is-open{ opacity:1; }

/* ---- Menu poziome od 1024 px ---- */
@media (min-width:1024px){
  .nav{ margin-inline-end:auto; }
  .nav__list{ display:flex; align-items:center; gap:var(--space-6); }
  .nav__item--has-sub{ position:relative; }
  .nav__link{ font-size:.9375rem; padding-block:var(--space-2); position:relative; }
  /* Podkreślenie wyjeżdżające spod pozycji — dodatkowy sygnał, że to element aktywny. */
  .nav__item--has-sub > .nav__link::after{ content:""; position:absolute;
    inset:auto var(--space-2) .25rem; height:2px; border-radius:2px;
    background:hsl(var(--c-accent)); scale:0 1; transform-origin:left;
    transition:scale var(--dur-base) var(--ease-standard); }
  .nav__item--has-sub:hover > .nav__link::after,
  .nav__item--has-sub:focus-within > .nav__link::after,
  .nav__item--has-sub.is-otwarte > .nav__link::after{ scale:1 1; }
  .nav__item--has-sub:hover .nav__strzalka,
  .nav__item--has-sub:focus-within .nav__strzalka,
  .nav__item--has-sub.is-otwarte .nav__strzalka{ transform:rotate(180deg); opacity:1; }
  .nav__link--rozwin{ width:auto; justify-content:flex-start; }
  /* Dziubek łączący pozycję menu z panelem — bez niego panel wygląda jak oderwany. */
  .nav__sub::before{ content:""; position:absolute; top:-5px; left:calc(var(--space-4) + 1rem);
    width:10px; height:10px; rotate:45deg;
    background:hsl(var(--c-surface));
    border-inline-start:1px solid hsl(var(--c-border));
    border-block-start:1px solid hsl(var(--c-border)); }
  /* Zamknięte podmenu ma display:none, a nie opacity:0.
     Powód praktyczny: element schowany opacity/visibility bywa mimo to malowany przez
     narzędzia robiące zrzuty całej strony (sprawdzone) — dropdown zasłaniałby wtedy
     hero na zrzucie oglądanym przez człowieka albo przez weryfikatora reklam.
     display:none jest jednoznaczny dla każdego mechanizmu renderowania.
     Płynne pojawianie się zostaje — robi je animacja przy zmianie display. */
  .nav__sub{ position:absolute; inset-inline-start:calc(var(--space-4) * -1); top:calc(100% + var(--space-2));
    display:none; gap:var(--space-3); width:16rem; padding:var(--space-4);
    margin:0; overflow:visible; border:1px solid hsl(var(--c-border)); border-inline-start:0;
    border-radius:var(--radius); background:hsl(var(--c-surface));
    box-shadow:var(--shadow-overlay); }
  /* Na desktopie opakowanie przestaje być siatką animowaną — panel wisi absolutnie
     nad treścią, więc nie ma czego rozwijać w pionie. */
  .nav__rozwijane{ display:block; grid-template-rows:none; opacity:1; transition:none; }
  .nav__sub > li{ translate:none; opacity:1; transition:none; }
  .nav__item--has-sub:hover > .nav__rozwijane > .nav__sub,
  .nav__item--has-sub:focus-within > .nav__rozwijane > .nav__sub,
  .nav__item--has-sub.is-otwarte > .nav__rozwijane > .nav__sub{ display:grid;
    animation:sub-in var(--dur-fast) var(--ease-standard) both; }
  /* Mostek nad luką między pozycją menu a panelem — bez niego podmenu znika,
     gdy kursor przechodzi przez 8 px pustki. */
  .nav__item--has-sub::after{ content:""; position:absolute; inset:100% 0 auto 0;
    height:var(--space-3); }
  @keyframes sub-in{ from{ opacity:0; translate:0 -6px; } to{ opacity:1; translate:0; } }
  .nav__item--has-sub > .nav__opis{ display:none; }
  .nav__sub .nav__opis{ display:block; font-size:var(--fs-xs); color:hsl(var(--c-text-faint)); }
  .nav__foot{ display:none!important; }
}

/* ==========================================================================
   MODAL REALIZACJI
   ========================================================================== */
.modal{ width:min(60rem, 92vw); max-height:88vh; padding:0; overflow:hidden;
  border:1px solid hsl(var(--c-border)); border-radius:var(--radius-xl);
  background:hsl(var(--c-surface-raised)); color:hsl(var(--c-text));
  box-shadow:var(--shadow-overlay); }
.modal::backdrop{ background:hsl(var(--p-neutral-0)/.8); backdrop-filter:blur(3px); }
.modal__inner{ display:grid; grid-template-columns:1fr; max-height:88vh; overflow-y:auto; }
@media (min-width:860px){ .modal__inner{ grid-template-columns:1fr 1fr; } }
.modal__foto img{ width:100%; height:100%; max-height:24rem; object-fit:cover; }
@media (min-width:860px){ .modal__foto img{ max-height:none; } }
.modal__tresc{ padding:var(--space-6); }
.modal__zamknij{ position:absolute; top:var(--space-3); right:var(--space-3); z-index:2;
  display:grid; place-items:center; width:44px; height:44px;
  border:1px solid hsl(var(--c-border)); border-radius:var(--radius-pill);
  background:hsl(var(--c-canvas)/.85); color:hsl(var(--c-text)); cursor:pointer; }
.modal__zamknij svg{ width:1.1rem; height:1.1rem; fill:none; stroke:currentColor; stroke-width:2; }
.modal__et{ font-size:var(--fs-2xs); text-transform:uppercase;
  letter-spacing:var(--tracking-widest); color:hsl(var(--c-accent-text)); }
.modal__h{ font-size:var(--fs-h3); margin-block:var(--space-2) var(--space-4); }
.modal__d{ color:hsl(var(--c-text-muted)); margin-bottom:var(--space-6); }

/* ==========================================================================
   STOPKA
   ========================================================================== */
.stopka{ padding-block:var(--section-y-tight) var(--space-8);
  background:hsl(var(--c-surface)); border-top:1px solid hsl(var(--c-border)); }
.stopka__grid{ display:grid; gap:var(--space-8); grid-template-columns:1fr; }
@media (min-width:640px){ .stopka__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .stopka__grid{ grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:var(--space-10); } }
.stopka__logo{ width:120px; height:auto; margin-bottom:var(--space-4); }
.stopka__tagline{ font-size:var(--fs-sm); color:hsl(var(--c-text-muted)); max-width:32ch; }
.stopka__social{ display:flex; gap:var(--space-3); margin-top:var(--space-5); }
.stopka__social a{ display:grid; place-items:center; width:44px; height:44px;
  border-radius:var(--radius-pill); background:hsl(var(--c-accent)/.10);
  transition:background var(--dur-base) var(--ease-standard); }
.stopka__social a:hover{ background:hsl(var(--c-accent)/.22); }
.stopka__social svg{ width:1.15rem; height:1.15rem; fill:none; stroke:hsl(var(--c-text));
  stroke-width:1.7; stroke-linecap:round; }
.stopka__social svg .fill{ fill:hsl(var(--c-text)); stroke:none; }

.stopka__h{ font-size:var(--fs-sm); font-weight:var(--fw-bold); margin-bottom:var(--space-4);
  text-transform:uppercase; letter-spacing:.07em; }
.stopka__h--drugi{ margin-top:var(--space-6); }
.stopka__kol ul{ display:grid; gap:var(--space-2); }
.stopka__kol a{ font-size:var(--fs-sm); color:hsl(var(--c-text-muted));
  transition:color var(--dur-base) var(--ease-standard); }
.stopka__kol a:hover{ color:hsl(var(--c-accent-text)); }
.stopka__kontakt address{ display:grid; gap:var(--space-2); font-style:normal;
  font-size:var(--fs-sm); color:hsl(var(--c-text-muted)); }
.stopka__mocny{ font-size:var(--fs-h4); font-weight:var(--fw-bold); color:hsl(var(--c-text))!important; }
.stopka__mocny:hover{ color:hsl(var(--c-accent-text))!important; }

.stopka__prawne{ display:grid; gap:var(--space-4); margin-top:var(--space-10);
  padding-top:var(--space-6); border-top:1px solid hsl(var(--c-border));
  font-size:var(--fs-xs); color:hsl(var(--c-text-faint)); }
@media (min-width:860px){ .stopka__prawne{ grid-template-columns:1fr auto; align-items:end; } }
.stopka__firma strong{ color:hsl(var(--c-text-muted)); font-weight:var(--fw-bold); }
.stopka__linki{ display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; }
.stopka__linki a{ text-decoration:underline; text-underline-offset:2px; }
.stopka__linki a:hover{ color:hsl(var(--c-accent-text)); }

/* ==========================================================================
   STICKY CTA (telefon) — tylko telefon, tylko po heroze
   ========================================================================== */
.sticky-cta{ position:fixed; bottom:var(--space-4); z-index:var(--z-sticky-cta);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:3rem; padding-inline:var(--space-5);
  font-weight:var(--fw-bold); font-size:var(--fs-sm);
  border-radius:var(--radius-pill); box-shadow:var(--shadow-raised);
  opacity:0; translate:0 1rem; pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-standard), translate var(--dur-base) var(--ease-out); }
.sticky-cta{ inset-inline:var(--space-4) auto;
  background:hsl(var(--c-surface-raised)); color:hsl(var(--c-text));
  border:1px solid hsl(var(--c-border-strong)); }
.sticky-cta--tel{ inset-inline:auto var(--space-4);
  background:hsl(var(--c-accent)); color:hsl(var(--c-text-on-accent));
  border-color:hsl(var(--c-accent)); box-shadow:var(--glow-md); }
.sticky-cta--tel svg{ width:1.1rem; height:1.1rem; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.sticky-cta.is-widoczny{ opacity:1; translate:0; pointer-events:auto; }
@media (min-width:1024px){ .sticky-cta{ display:none!important; } }

/* ==========================================================================
   EFEKTY
   ========================================================================== */
.spotlight{ position:fixed; inset:0; z-index:var(--z-spotlight); pointer-events:none;
  background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),
             hsl(var(--c-accent)/.07), transparent 42%); }

html.js .reveal{ opacity:0; translate:0 18px;
  transition:opacity var(--dur-slow) var(--ease-out) var(--reveal-delay,0ms),
             translate var(--dur-slow) var(--ease-out) var(--reveal-delay,0ms); }
html.js .reveal.is-in{ opacity:1; translate:0; }

/* ==========================================================================
   REDUKCJA RUCHU — pełne poszanowanie ustawień systemowych
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important; }
  html.js .reveal{ opacity:1!important; translate:none!important; }
  /* Świadomy wyjątek na życzenie klienta: pasek marek jedzie także przy wyłączonych
     animacjach w systemie — tylko dwa razy wolniej. Reguła ogólna wyżej skraca każdą
     animację do zera; ta jest bardziej szczegółowa, więc wygrywa. */
  .marquee__track{ animation-duration:84s!important; animation-iteration-count:infinite!important; }
  .spotlight{ display:none!important; }
  .realizacja:hover img{ transform:none; }
  .btn:hover,.usluga:hover{ transform:none; }
  /* Rozwijanie menu bez animacji, ale nadal działające. */
  .nav__rozwijane{ transition:none!important; }
  .nav__sub > li{ transition:none!important; translate:none!important; opacity:1!important; }
}

/* Tło karty usługi wstrzykiwane inline przez zmienną --tlo (jedno źródło: data/uslugi.php) */
.usluga::before{ background-image:var(--tlo); }

/* ==========================================================================
   PROZA — strony tekstowe (polityka prywatności, regulaminy)
   ========================================================================== */
.proza{ max-width:var(--measure); }
.proza h2{ font-size:var(--fs-h3); margin-top:var(--space-10); margin-bottom:var(--space-3); }
.proza p{ margin-bottom:var(--space-4); color:hsl(var(--c-text-muted)); }
.proza p strong{ color:hsl(var(--c-text)); }
.proza a{ color:hsl(var(--c-accent-text)); text-decoration:underline; text-underline-offset:2px; }
.proza a:hover{ color:hsl(var(--c-accent)); }
.proza .check-list{ margin-bottom:var(--space-4); }

/* ==========================================================================
   PODSTRONY — hero, okruszki, pakiety, listy korzyści
   ========================================================================== */
.pod-hero{ position:relative; isolation:isolate; overflow:hidden;
  padding-block:calc(var(--header-h) + var(--space-12)) var(--space-12); }
.pod-hero__media{ position:absolute; inset:0; z-index:-1; }
.pod-hero__media picture,.pod-hero__media img{ position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; }
.pod-hero__media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, hsl(var(--p-neutral-0)/.80) 0%,
             hsl(var(--p-neutral-0)/.72) 45%, hsl(var(--p-neutral-0)/.95) 100%); }
.pod-hero__inner{ position:relative; }

.okruszki{ margin-bottom:var(--space-6); font-size:var(--fs-xs); }
.okruszki ol{ display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center;
  color:hsl(var(--c-text-faint)); }
.okruszki li + li::before{ content:"/"; margin-inline-end:var(--space-2); opacity:.5; }
.okruszki a{ color:hsl(var(--c-text-muted)); }
.okruszki a:hover{ color:hsl(var(--c-accent-text)); }
.okruszki [aria-current]{ color:hsl(var(--c-text)); }

.pod-hero__h1{ font-size:var(--fs-hero); font-weight:var(--fw-extrabold);
  line-height:1.14; letter-spacing:var(--tracking-tighter);
  max-width:18ch; margin-bottom:var(--space-4); }
.pod-hero__lead{ max-width:52ch; margin-bottom:var(--space-8);
  font-size:var(--fs-lead); color:hsl(var(--c-text-on-media)); }

.pod-hero__akcje{ display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--space-3) var(--space-4); margin-bottom:var(--space-6); }

/* Cena dostaje własny wiersz — wciśnięta między nagłówek a przyciski wyglądała
   przypadkowo, a jej linia bazowa i tak nie zgadzała się z przyciskami.
   flex-basis:100% wypycha przyciski do następnego wiersza. */
.pod-hero__od{ flex:0 0 100%; display:flex; align-items:baseline; gap:var(--space-2);
  margin-bottom:var(--space-1); }
.pod-hero__od span{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.07em;
  color:hsl(var(--c-text-faint)); }
.pod-hero__od strong{ font-size:var(--fs-price); font-weight:var(--fw-extrabold);
  line-height:1; color:hsl(var(--c-accent)); text-shadow:var(--glow-text); }

/* Na wąskim ekranie przyciski na pełną szerokość — dwie różne szerokości obok
   siebie wyglądały przypadkowo, a kciukowi i tak łatwiej trafić w pełny pasek. */
@media (max-width:599.98px){
  .pod-hero__akcje .btn{ flex:1 1 100%; }
}

.pod-hero__zaufanie{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2);
  font-size:var(--fs-sm); color:hsl(var(--c-text-on-media)); }
.pod-hero__nap{ color:hsl(var(--c-text-faint)); }

/* ---- Pakiety ---- */
.pakiety{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--grid-gap);
  align-items:stretch; }
/* Flex zamiast gridu, bo pakietów bywa 5 — przy siatce ostatni zostawał sam
   dosunięty do lewej. Tak niepełny wiersz sam się centruje. */
.pakiet{ flex:1 1 16rem; max-width:22rem; }
@media (min-width:640px){ .pakiet{ flex-basis:15rem; } }
/* Na szerokim ekranie wszystkie stopnie cennika mają stanąć w jednym rzędzie —
   drabinka cen czyta się wtedy jednym spojrzeniem. Przy pięciu pakietach
   wymaga to węższej podstawy. */
@media (min-width:1200px){
  .pakiety{ gap:var(--space-4); }
  .pakiet{ flex-basis:12.5rem; padding-inline:var(--space-5); }
}

.pakiet{ position:relative; display:flex; flex-direction:column; padding:var(--space-6);
  border:1px solid hsl(var(--c-border)); border-radius:var(--radius-xl);
  background:hsl(var(--c-surface-raised)); box-shadow:var(--shadow-card);
  transition:border-color var(--dur-base) var(--ease-standard),
             transform var(--dur-base) var(--ease-standard); }
.pakiet:hover{ transform:translateY(-3px); border-color:hsl(var(--c-accent)/.5); }
.pakiet--top{ border-color:hsl(var(--c-accent)/.6);
  box-shadow:var(--shadow-raised), 0 0 32px -12px hsl(var(--c-accent)/.4); }
.pakiet__badge{ position:absolute; top:calc(var(--space-3) * -1); inset-inline-start:var(--space-5);
  padding:var(--space-1) var(--space-3); font-size:var(--fs-2xs); font-weight:var(--fw-bold);
  letter-spacing:.05em; text-transform:uppercase;
  color:hsl(var(--c-text-on-accent)); background:hsl(var(--c-accent));
  border-radius:var(--radius-pill); box-shadow:var(--glow-sm); }
.pakiet__nazwa{ font-size:var(--fs-h4); margin-bottom:var(--space-2); }
.pakiet__cena{ display:flex; align-items:baseline; gap:var(--space-2); margin-bottom:var(--space-2); }
.pakiet__cena span{ font-size:var(--fs-xs); color:hsl(var(--c-text-faint));
  text-transform:uppercase; letter-spacing:.07em; }
.pakiet__cena strong{ font-size:var(--fs-price); font-weight:var(--fw-extrabold);
  color:hsl(var(--c-accent)); }
.pakiet--top .pakiet__cena strong{ text-shadow:var(--glow-text); }
.pakiet__opis{ font-size:var(--fs-sm); color:hsl(var(--c-text-muted));
  padding-bottom:var(--space-4); margin-bottom:var(--space-4);
  border-bottom:1px solid hsl(var(--c-border)); }
.pakiet__cta{ margin-top:auto;
  /* Przyciski mają domyślnie white-space:nowrap — to ich napis wyznaczał minimalną
     szerokość karty i przez kilka pikseli piąty pakiet spadał do drugiego rzędu.
     W cenniku pozwalamy mu się złamać. */
  white-space:normal; }
.pakiet{ min-width:0; }

/* ---- Listy korzyści ---- */
.korzysci{ display:grid; gap:var(--space-3); grid-template-columns:1fr;
  max-width:var(--container-narrow); margin-inline:auto; }
@media (min-width:640px){ .korzysci{ grid-template-columns:repeat(2,1fr); gap:var(--space-4); } }
.korzysci li{ position:relative; padding:var(--space-4) var(--space-4) var(--space-4) 3rem;
  font-size:var(--fs-sm); border:1px solid hsl(var(--c-border));
  border-radius:var(--radius-md); background:hsl(var(--c-surface-raised)); }
.korzysci li::before{ content:""; position:absolute; inset-inline-start:var(--space-4); top:1.15rem;
  width:1rem; height:1rem; background:hsl(var(--c-accent));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.5 17.2 4.3 12l1.5-1.5 3.7 3.7 8.7-8.7L19.7 7z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.5 17.2 4.3 12l1.5-1.5 3.7 3.7 8.7-8.7L19.7 7z'/%3E%3C/svg%3E") center/contain no-repeat; }
.korzysci--luzne li{ border:0; background:transparent; padding-block:var(--space-2); }
.korzysci--luzne li::before{ top:.7rem; }

/* ---- Proza szeroka (treść merytoryczna podstron) ---- */
.proza--szeroka{ max-width:72ch; margin-inline:auto; }
.proza--szeroka h2{ margin-top:var(--space-12); }
.proza--szeroka h2:first-child{ margin-top:0; }

/* ---- Realizacje: wariant bez modala ---- */
.realizacje__grid--3{ grid-template-columns:repeat(2,1fr); }
@media (min-width:900px){ .realizacje__grid--3{ grid-template-columns:repeat(3,1fr); } }
.realizacja--statyczna{ margin:0; cursor:default; }
.realizacja--statyczna:hover{ border-color:hsl(var(--c-border)); }
.realizacja--statyczna:hover img{ transform:none; }

/* ==========================================================================
   KONTAKT — mapa jako link i dane rejestrowe
   ========================================================================== */
.mapa{ max-width:var(--container-narrow); margin-inline:auto; }
.mapa__link{ display:grid; grid-template-columns:auto 1fr auto; gap:var(--space-4);
  align-items:center; padding:var(--space-5);
  border:1px solid hsl(var(--c-border)); border-radius:var(--radius-xl);
  background:hsl(var(--c-surface-raised));
  transition:border-color var(--dur-base) var(--ease-standard),
             background var(--dur-base) var(--ease-standard); }
.mapa__link:hover{ border-color:hsl(var(--c-accent)/.6); background:hsl(var(--c-accent)/.06); }
.mapa__link strong{ display:block; font-size:var(--fs-h4); }
.mapa__link span span{ font-size:var(--fs-sm); color:hsl(var(--c-text-muted)); }
.mapa__ico{ display:grid; place-items:center; width:3rem; height:3rem;
  border-radius:var(--radius-md); background:hsl(var(--c-accent)/.12); }
.mapa__ico svg{ width:1.4rem; height:1.4rem; fill:none; stroke:hsl(var(--c-accent));
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.mapa__nota{ margin-top:var(--space-4); font-size:var(--fs-xs);
  color:hsl(var(--c-text-faint)); max-width:60ch; }

.dane-firmy{ max-width:var(--container-narrow); margin:var(--space-12) auto 0;
  padding-top:var(--space-8); border-top:1px solid hsl(var(--c-border)); }
.dane-firmy h3{ font-size:var(--fs-h4); margin-bottom:var(--space-3); }
.dane-firmy p{ font-size:var(--fs-sm); color:hsl(var(--c-text-muted)); line-height:1.9; }
.dane-firmy strong{ color:hsl(var(--c-text)); }

/* ==========================================================================
   PASEK ZAKŁADEK (cennik)
   Wygląda jak taby, działa jak kotwice — treść nigdy nie znika ze strony.
   ========================================================================== */
.tabbar{ position:sticky; top:var(--header-h); z-index:calc(var(--z-header) - 5);
  background:hsl(var(--c-canvas)/.92);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid hsl(var(--c-border)); }

.tabbar__lista{ display:flex; gap:var(--space-2); padding-block:var(--space-3);
  overflow-x:auto; scrollbar-width:none; }
.tabbar__lista::-webkit-scrollbar{ display:none; }
.tabbar__lista > li{ flex:1 1 0; min-width:max-content; }

.tabbar__poz{ display:grid; gap:.1rem; justify-items:center; text-align:center;
  padding:var(--space-3) var(--space-4);
  border:1px solid hsl(var(--c-border)); border-radius:var(--radius-md);
  background:hsl(var(--c-surface-raised));
  transition:border-color var(--dur-base) var(--ease-standard),
             background var(--dur-base) var(--ease-standard),
             color var(--dur-base) var(--ease-standard); }
.tabbar__poz:hover{ border-color:hsl(var(--c-accent)/.6); background:hsl(var(--c-accent)/.08); }

.tabbar__label{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); white-space:nowrap; }
.tabbar__od{ font-size:var(--fs-2xs); color:hsl(var(--c-text-faint)); white-space:nowrap; }

/* Aktywna sekcja podświetlana przy przewijaniu. Bez JS po prostu jej nie ma
   i pasek nadal działa jako zestaw linków. */
.tabbar__poz.jest-aktywny{ border-color:hsl(var(--c-accent));
  background:hsl(var(--c-accent)/.12); }
.tabbar__poz.jest-aktywny .tabbar__label{ color:hsl(var(--c-accent-text)); }
.tabbar__poz.jest-aktywny .tabbar__od{ color:hsl(var(--c-accent-text)); opacity:.8; }

/* Docelowa sekcja musi zatrzymać się POD nagłówkiem i paskiem, nie za nimi. */
.sekcja[id^="cennik-"]{ scroll-margin-top:calc(var(--header-h) + 5rem); }

@media (min-width:640px){
  .tabbar__poz{ padding-inline:var(--space-6); }
  .tabbar__label{ font-size:var(--fs-body); }
}