/* Progresya Trening i Dieta, progresya.pl
   Kolory z logo klientki: magenta #EC008C jako jedyny akcent, do tego grafit i złamana biel.
   Kroj: Archivo (zmienny, OFL), pliki w /fonts.
   Zaokrąglenia: przyciski i opcje pełne (999px), zdjęcia, kafle i panele 20px, pola formularza 12px.
   Warstwy (z-index): pasek kontaktu 40, nagłówek 50, link „przejdź do treści” 100. */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;
  --bg: #f4f4f5;
  --bg-2: #e9e9ec;
  --surface: #fbfbfc;
  --ink: #141417;
  --ink-2: #4a4a52;
  --line: #d9d9de;
  --line-strong: #a9a9b2;
  --accent: #ec008c;
  --accent-strong: #c4007a;
  --accent-hover: #a80069;
  --on-accent: #fdf7fa;
  --chip: #141417;
  --error: #b42318;
  --shadow: 0 1px 2px rgba(60, 0, 35, 0.06), 0 18px 40px -18px rgba(60, 0, 35, 0.32);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pad: 20px;
  --max: 1240px;
  --header: 64px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111113;
    --bg-2: #19191c;
    --surface: #1d1d21;
    --ink: #f2f2f4;
    --ink-2: #acacb6;
    --line: #2c2c32;
    --line-strong: #55555e;
    --accent: #ff3da8;
    --accent-strong: #ff5cb4;
    --accent-hover: #ff85c6;
    --on-accent: #141417;
    --chip: #0b0b0c;
    --error: #ff8a80;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 40px -18px rgba(0, 0, 0, 0.7);
  }
}

@media (min-width: 768px) {
  :root { --pad: 32px; --header: 72px; }
}
@media (min-width: 1280px) {
  :root { --pad: 40px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header) + 12px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  font-stretch: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 768px) {
  body { font-size: 1.125rem; }
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
h2 {
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3.4rem);
  font-weight: 800;
  font-stretch: 112%;
}
h3 { font-size: 1.375rem; font-weight: 750; font-stretch: 106%; letter-spacing: -0.01em; }

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

.sr, .pulapka {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.pomin {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}
.pomin:focus { top: 12px; }

.ikona { width: 1.2em; height: 1.2em; flex: none; fill: currentColor; }

/* Wersja robocza: oznaczenia faktów do potwierdzenia (usunąć przed publikacją) */
.roboczy-pasek {
  background: var(--ink);
  color: var(--bg);
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: center;
  padding: 8px var(--pad);
}
.robocze {
  display: inline-block;
  margin-left: 0.35em;
  padding: 0.05em 0.6em;
  border: 1.5px dashed currentColor;
  border-radius: 999px;
  color: var(--accent-strong);
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: 0;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
}
.robocze--blok {
  display: block;
  margin: 20px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  white-space: normal;
  font-size: 0.875rem;
}

/* Przyciski */
.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 52px;
  padding: 0 1.45em;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  font-stretch: 104%;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.przycisk:active { transform: scale(0.98); }
.przycisk--glowny { background: var(--accent-strong); color: var(--on-accent); }
.przycisk--glowny:hover { background: var(--accent-hover); }
.przycisk--drugi { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.przycisk--drugi:hover { background: var(--ink); color: var(--bg); }
.przycisk .ikona { transition: transform 0.25s var(--ease); }
.przycisk:hover .ikona--w-prawo { transform: translateX(3px); }
.przycisk:hover .ikona--na-zewnatrz { transform: translate(2px, -2px); }
.przycisk[disabled] { opacity: 0.6; cursor: progress; }

/* Nagłówek */
.naglowek {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  transition: box-shadow 0.25s ease;
}
@supports (backdrop-filter: blur(1px)) {
  .naglowek {
    background: color-mix(in srgb, var(--bg) 84%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
  }
}
.naglowek--cien { box-shadow: 0 1px 0 var(--line); }
.naglowek__wnetrze {
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--header);
}
.logo {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  background: var(--chip);
  border-radius: 12px;
  text-decoration: none;
}
.logo img { width: 128px; height: auto; }
@media (min-width: 768px) {
  .logo img { width: 150px; }
}
.menu { display: none; margin-left: auto; }
.menu ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.menu a:hover { background: var(--bg-2); }
.naglowek__cta { display: none; }
.menu-przycisk {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--ink);
  cursor: pointer;
}
.menu-przycisk .ikona { width: 24px; height: 24px; }
@media (min-width: 1024px) {
  .menu { display: block; }
  .naglowek__cta { display: inline-flex; min-height: 46px; }
  .menu-przycisk { display: none; }
}

.menu-mobilne {
  position: fixed;
  inset: var(--header) 0 0 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px var(--pad) calc(24px + env(safe-area-inset-bottom));
  background: var(--bg);
  overflow-y: auto;
}
.menu-mobilne[hidden] { display: none; }
.menu-mobilne a:not(.przycisk) {
  padding: 10px 0;
  font-size: 1.9rem;
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.menu-mobilne .przycisk { margin-top: 20px; }
.menu-mobilne__telefon { margin-top: 12px; color: var(--ink-2); }
body.menu-otwarte { overflow: hidden; }

/* Znak: PROGRESYA, każda litera grubsza i szersza od poprzedniej */
.znak {
  --suma: 6.45;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0;
  font-size: calc(min(100vw - 2 * var(--pad), var(--max) - 2 * var(--pad)) / var(--suma));
  line-height: 0.86;
  color: var(--accent);
  letter-spacing: 0;
  user-select: none;
  -webkit-user-select: none;
}
.znak span {
  display: inline-block;
  width: calc(var(--szer) * 1em);
  font-variation-settings: "wght" var(--w), "wdth" var(--s);
}
html.js .znak:not(.gotowy) span {
  font-variation-settings: "wght" 100, "wdth" 62;
}
@media (prefers-reduced-motion: no-preference) {
  html.js .znak span {
    transition: font-variation-settings 1.2s var(--ease);
    transition-delay: calc(var(--i) * 80ms + 120ms);
  }
}

/* Start */
.start { padding: clamp(18px, 3vw, 36px) 0 clamp(64px, 8vw, 112px); }
.start__siatka {
  display: grid;
  gap: 40px;
  margin-top: clamp(24px, 3.4vw, 44px);
}
.start h1 {
  font-size: clamp(2rem, 1.1rem + 2.6vw, 2.9rem);
  font-weight: 800;
  font-stretch: 100%;
  line-height: 1.04;
}
.start__lead {
  max-width: 36ch;
  margin: 20px 0 28px;
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  color: var(--ink-2);
}
.przyciski { display: flex; flex-wrap: wrap; gap: 12px; }
.start__zdjecia {
  position: relative;
  aspect-ratio: 1 / 0.84;
  max-width: 560px;
}
.karta {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: var(--shadow);
  transform: rotate(var(--obrot));
  background: var(--bg-2);
}
.karta img { width: 100%; height: 100%; object-fit: cover; }
.karta--1 { --obrot: 2deg; top: 0; right: 0; width: 82%; aspect-ratio: 722 / 528; }
.karta--2 {
  --obrot: -3.5deg;
  bottom: 0;
  left: 0;
  width: 50%;
  aspect-ratio: 1 / 1;
  border: 6px solid var(--bg);
}
@media (prefers-reduced-motion: no-preference) {
  html.js .karta {
    animation: wjazd 0.9s var(--ease) both;
    animation-delay: calc(0.3s + var(--k) * 0.14s);
  }
}
@keyframes wjazd {
  from { opacity: 0; transform: translateY(36px) rotate(var(--obrot)); }
  to { opacity: 1; transform: rotate(var(--obrot)); }
}
@media (min-width: 1024px) {
  .start__siatka {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: center;
    gap: 48px;
  }
  .start__zdjecia { justify-self: end; width: 100%; }
}

/* Sekcje */
.sekcja { padding-block: clamp(72px, 9vw, 132px); }
.sekcja--tlo { background: var(--bg-2); }

@media (prefers-reduced-motion: no-preference) {
  html.js .odslon {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  }
  html.js .odslon.widoczny { opacity: 1; transform: none; }
}

/* O nas */
.o-nas__siatka { display: grid; gap: 40px; }
.o-nas h2 { max-width: 14ch; margin-bottom: 28px; }
.o-nas__tekst p { max-width: 58ch; }
.o-nas__wyroznienie {
  margin-top: 28px;
  padding-left: 20px;
  border-left: 4px solid var(--accent);
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  font-weight: 650;
  font-stretch: 104%;
  line-height: 1.35;
}
.o-nas__zdjecie { margin: 0; }
.o-nas__zdjecie img { width: 100%; border-radius: 20px; box-shadow: var(--shadow); }
.o-nas__podpis { margin-top: 12px; font-size: 0.9375rem; color: var(--ink-2); }
@media (min-width: 1024px) {
  .o-nas__siatka { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 72px; align-items: center; }
}

/* Oferta: kafle o różnej wielkości */
.oferta h2 { max-width: 16ch; }
.bento { display: grid; gap: 16px; margin-top: 40px; }
.kafel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.kafel__zdjecie { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kafel__tresc { display: flex; flex-direction: column; gap: 12px; padding: 24px; flex: 1; }
.kafel__tresc p { margin: 0; }
.kafel h3 { font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem); font-weight: 800; font-stretch: 110%; }
.cena { margin-top: auto !important; padding-top: 8px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.cena strong {
  font-size: 2rem;
  font-weight: 850;
  font-stretch: 112%;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cena span { color: var(--ink-2); font-size: 0.9375rem; }
.kafel--para .kafel__zdjecie { aspect-ratio: 722 / 204; }
.kafel--grupa .kafel__zdjecie { aspect-ratio: 16 / 10; }
.zajecia { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.zajecia li {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg-2);
  font-size: 0.875rem;
  font-weight: 600;
}
.kafel--dieta {
  background: var(--accent-strong);
  color: var(--on-accent);
  box-shadow: none;
}
.kafel--dieta .kafel__tresc { padding: 28px; justify-content: flex-start; }
.kafel--dieta h3 { font-size: clamp(2.4rem, 1.8rem + 2.6vw, 4rem); font-stretch: 120%; font-weight: 900; }
.kafel--dieta .kafel__haslo { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem); font-weight: 650; line-height: 1.3; max-width: 26ch; }
.kafel--dieta .cena span, .kafel--dieta .robocze { color: var(--on-accent); }

@media (min-width: 768px) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
  .kafel--personalny, .kafel--para, .kafel--grupa, .kafel--dieta { grid-column: span 6; }
}
@media (min-width: 1024px) {
  .kafel--personalny { grid-column: span 7; flex-direction: row; }
  .kafel--personalny .kafel__zdjecie { width: 44%; aspect-ratio: auto; height: 100%; min-height: 380px; }
  .kafel--personalny .kafel__tresc { padding: 32px; }
  .kafel--para { grid-column: span 5; }
  .kafel--grupa { grid-column: span 5; }
  .kafel--dieta { grid-column: span 7; }
  .kafel--dieta .kafel__tresc { padding: 40px; }
}

/* Od czego zacząć? */
.wybor__ramka {
  display: grid;
  gap: 32px;
}
.wybor__panel {
  display: grid;
  gap: 32px;
  padding: 28px 22px;
  border-radius: 20px;
  background: var(--bg-2);
}
.wybor__naglowek h2 { max-width: 15ch; }
.wybor__naglowek p { margin-top: 16px; color: var(--ink-2); max-width: 40ch; }
.wybor__pytania { display: grid; gap: 26px; }
.wybor fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.wybor legend { padding: 0; margin-bottom: 12px; font-weight: 750; font-stretch: 106%; font-size: 1.125rem; }
.opcje { display: flex; flex-wrap: wrap; gap: 10px; }
.opcja { position: relative; cursor: pointer; }
.opcja input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcja span {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--ease);
}
.opcja:hover span { box-shadow: inset 0 0 0 1.5px var(--ink); }
.opcja input:checked + span { background: var(--ink); color: var(--bg); box-shadow: inset 0 0 0 1.5px var(--ink); }
.opcja input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 3px; }
.opcja:active span { transform: scale(0.98); }
.wybor__wynik {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  min-height: 220px;
  padding: 28px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.wybor__wynik p { margin: 0; }
.wybor__pusty { color: var(--ink-2); }
.wybor__etykieta { font-weight: 700; color: var(--accent-strong); }
.wybor__wynik h3 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); font-weight: 850; font-stretch: 112%; }
.wybor__wynik .przycisk { align-self: flex-start; margin-top: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .wybor__wynik.nowy > * { animation: pojaw 0.5s var(--ease) both; }
  .wybor__wynik.nowy > *:nth-child(2) { animation-delay: 0.05s; }
  .wybor__wynik.nowy > *:nth-child(3) { animation-delay: 0.1s; }
  .wybor__wynik.nowy > *:nth-child(4) { animation-delay: 0.15s; }
}
@keyframes pojaw { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (min-width: 1024px) {
  .wybor__panel { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; padding: 48px; align-items: start; }
  .wybor__naglowek { grid-column: 1 / -1; }
  .wybor__wynik { position: sticky; top: calc(var(--header) + 24px); }
}

/* Pierwszy krok */
.kroki__siatka { display: grid; gap: 40px; }
.kroki h2 { font-size: clamp(2.4rem, 1.5rem + 4vw, 5rem); font-stretch: 116%; max-width: 11ch; }
.kroki__lista {
  position: relative;
  margin: 0;
  padding: 0 0 0 44px;
  list-style: none;
  display: grid;
  gap: 36px;
}
.kroki__lista::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 4px;
  background: var(--accent);
  transform-origin: top;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .kroki__lista::before {
      animation: rysuj linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 55%;
    }
  }
}
@keyframes rysuj { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.krok { position: relative; }
.krok::before {
  content: "";
  position: absolute;
  left: -44px;
  top: 0.3em;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--bg);
  box-shadow: inset 0 0 0 4px var(--accent);
  transition: background-color 0.4s ease;
}
.krok.osiagniety::before { background: var(--accent); }
.krok h3 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  font-weight: var(--wg);
  font-stretch: 110%;
}
.krok p { margin: 10px 0 0; max-width: 46ch; color: var(--ink-2); }
@media (min-width: 1024px) {
  .kroki__siatka { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
  .kroki h2 { position: sticky; top: calc(var(--header) + 32px); }
  .kroki__lista { gap: 56px; }
}

/* Cennik */
.cennik__siatka { display: grid; gap: 36px; }
.cennik__wstep p { color: var(--ink-2); max-width: 36ch; }
.cennik__wstep h2 { margin-bottom: 20px; }
.cennik__lista { margin: 0; display: grid; gap: 6px; }
.pozycja {
  display: grid;
  grid-template-columns: auto minmax(24px, 1fr) auto;
  grid-template-areas: "nazwa kropki cena" "opis opis opis";
  column-gap: 12px;
  align-items: baseline;
  padding: 18px 0;
}
.pozycja::before {
  content: "";
  grid-area: kropki;
  align-self: end;
  margin-bottom: 0.4em;
  border-bottom: 2px dotted var(--line-strong);
}
.pozycja dt { grid-area: nazwa; font-weight: 700; font-stretch: 104%; font-size: 1.125rem; }
.pozycja__cena {
  grid-area: cena;
  margin: 0;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
  font-weight: 850;
  font-stretch: 112%;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pozycja__opis { grid-area: opis; margin: 4px 0 0; color: var(--ink-2); font-size: 0.9375rem; }
.pozycja--brak .pozycja__cena { font-size: 1rem; font-weight: 600; }
@media (min-width: 1024px) {
  .cennik__siatka { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 80px; align-items: start; }
}

/* Opinie */
.opinie__siatka { display: grid; gap: 40px; align-items: center; }
.opinie__liczba { display: flex; align-items: center; gap: 18px; margin: 20px 0 28px; }
.opinie__wynik {
  font-size: clamp(5.5rem, 3.5rem + 9vw, 10rem);
  line-height: 0.85;
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: -0.04em;
  color: var(--accent);
}
.opinie__opis { font-size: 1.125rem; font-weight: 650; line-height: 1.3; }
.opinie__zdjecie { margin: 0; }
.opinie__zdjecie img { width: 100%; border-radius: 20px; box-shadow: var(--shadow); transform: rotate(-1.5deg); }
@media (min-width: 1024px) {
  .opinie__siatka { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; }
}

/* Pytania */
.pytania__siatka { display: grid; gap: 28px; }
.pytania__bok p { margin-top: 16px; color: var(--ink-2); }
.pytania__bok a { color: var(--accent-strong); font-weight: 700; }
.pytanie { border-bottom: 1px solid var(--line); }
.pytanie summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  font-size: 1.15rem;
  font-weight: 700;
  font-stretch: 104%;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.pytanie summary::-webkit-details-marker { display: none; }
.pytanie summary .ikona { width: 22px; height: 22px; color: var(--accent-strong); transition: transform 0.3s var(--ease); }
.pytanie[open] summary .ikona { transform: rotate(45deg); }
.pytanie p { margin: 0 0 22px; max-width: 60ch; color: var(--ink-2); }
@media (min-width: 1024px) {
  .pytania__siatka { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 80px; align-items: start; }
  .pytania__bok { position: sticky; top: calc(var(--header) + 32px); }
}

/* Kontakt */
.kontakt h2 { max-width: 14ch; }
.kontakt__lead { margin: 18px 0 0; max-width: 46ch; color: var(--ink-2); }
.kontakt__siatka { display: grid; gap: 32px; margin-top: 40px; }
.formularz {
  display: grid;
  gap: 20px;
  padding: 24px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.pole { display: grid; gap: 8px; align-content: start; }
.pole label { font-weight: 700; }
.pole__opc { font-weight: 400; color: var(--ink-2); }
.pole input, .pole select, .pole textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pole textarea { min-height: 120px; resize: vertical; }
.pole select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}
.pole input::placeholder, .pole textarea::placeholder { color: var(--ink-2); opacity: 1; }
.pole input:focus, .pole select:focus, .pole textarea:focus {
  outline: none;
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.pole__pomoc { margin: 0; font-size: 0.875rem; color: var(--ink-2); }
.pole__blad { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--error); }
.pole__blad:empty { display: none; }
.pole [aria-invalid="true"] { border-color: var(--error); }
.formularz__wyslij { justify-self: start; min-width: 180px; }
.formularz__status { margin: 0; font-weight: 600; }
.formularz__status:empty { display: none; }
.formularz__status--blad { color: var(--error); }
.formularz__rodo { margin: 0; font-size: 0.875rem; color: var(--ink-2); }
.formularz__rodo a { color: var(--accent-strong); }

.kontakt__dane { display: grid; gap: 22px; align-content: start; }
.kontakt__telefon {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
  font-weight: 850;
  font-stretch: 112%;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}
.kontakt__telefon .ikona { color: var(--accent-strong); }
.kontakt__wiersz { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.kontakt__wiersz .ikona { margin-top: 0.2em; color: var(--accent-strong); }
.kontakt__wiersz a { text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.kontakt__wiersz p { margin: 0; }
.kontakt__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 700; color: var(--accent-strong); }
.godziny { margin: 8px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 20px; font-variant-numeric: tabular-nums; }
.godziny dt { color: var(--ink-2); }
.godziny dd { margin: 0; }
.kontakt__media { display: flex; gap: 10px; }
.kontakt__media a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.kontakt__media a:hover { background: var(--ink); color: var(--bg); }
.kontakt__media .ikona { width: 22px; height: 22px; }
@media (min-width: 1024px) {
  .kontakt__siatka { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 64px; }
  .formularz { padding: 36px; grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .formularz .pole--pelne, .formularz__wyslij, .formularz__status, .formularz__rodo { grid-column: 1 / -1; }
}

/* Stopka */
.stopka { padding: 56px 0 calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.stopka__siatka { display: grid; gap: 28px; }
.stopka__firma { font-size: 0.9375rem; color: var(--ink-2); }
.stopka__firma .logo { margin-bottom: 18px; }
.stopka__linki { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; padding: 0; list-style: none; font-weight: 600; }
.stopka__linki a { text-decoration: none; }
.stopka__linki a:hover { color: var(--accent-strong); }
.stopka__prawa { margin: 28px 0 0; font-size: 0.875rem; color: var(--ink-2); }
@media (min-width: 1024px) {
  .stopka__siatka { grid-template-columns: 1fr auto; align-items: end; }
}

/* Pasek kontaktu na telefonie */
.pasek {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--bg);
  box-shadow: 0 -1px 0 var(--line);
  transform: translateY(110%);
  transition: transform 0.35s var(--ease);
}
@supports (backdrop-filter: blur(1px)) {
  .pasek {
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
  }
}
.pasek .przycisk { min-height: 50px; padding: 0 12px; }
.pasek--widoczny { transform: none; }
@media (min-width: 768px) {
  .pasek { display: none; }
}

/* Strony pomocnicze: polityka, podziękowanie, 404 */
.dokument { padding-block: clamp(48px, 7vw, 96px); }
.dokument h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.8rem); font-weight: 850; font-stretch: 112%; max-width: 18ch; }
.dokument h2 { font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem); font-stretch: 106%; margin: 40px 0 12px; }
.dokument p, .dokument li { max-width: 68ch; }
.dokument a:not(.przycisk) { color: var(--accent-strong); }
.dokument__data { color: var(--ink-2); margin-top: 16px; }
.dokument__wroc { display: inline-flex; align-items: center; gap: 8px; margin-top: 36px; }