/* ==========================================================================
   Cieszka Tichonow · prototyp „Monografia”
   Komponenty używają wyłącznie zmiennych palety (--bg, --fg, --akcent, --linia,
   --cichy, --pigulka-bg, --pigulka-fg). Paleta zmienia się przez data-paleta na <html>.
   ========================================================================== */

@font-face {
  font-family: 'Forum';
  src: url('../assets/fonts/Forum-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Paleta marki (branding v2: propozycja A „Koral × Fiolet”) */
  --koral: #FD6067;
  --lime: #E1FF01;
  --roz: #FF99BE;
  --mgla: #FFF3F6;
  --atrament: #22103F;
  --fiolet: #B24BFF;

  /* Typografia */
  --f-display: 'Forum', Georgia, 'Times New Roman', serif;
  --f-body: 'Nunito Sans', 'Avenir Next', Avenir, 'Segoe UI', system-ui, sans-serif;

  /* Skala */
  --t-hero: clamp(3rem, 6.6vw, 6rem);          /* 48–96 px */
  --t-h2: clamp(2.25rem, 4.4vw, 4rem);          /* 36–64 px */
  --t-h3: clamp(1.625rem, 2.4vw, 2.25rem);      /* 26–36 px */
  --t-lead: clamp(1.375rem, 2vw, 1.875rem);     /* 22–30 px */
  --t-tekst: 1.125rem;                          /* 18 px */
  --t-maly: 1rem;
  --t-etykieta: 0.8125rem;                      /* 13 px */

  /* Siatka i powietrze */
  --kontener: 1240px;
  --margines: 64px;
  --pas: clamp(5rem, 10vw, 10rem);              /* 80–160 px */
  --menu-h: 64px;
  --safe-dol: env(safe-area-inset-bottom, 0px);

  /* Ruch */
  --t-paleta: .8s;
  --krzywa: cubic-bezier(.2, .7, .2, 1);

  /* Paleta domyślna: okładka */
  --bg: var(--koral);
  --fg: var(--lime);
  --akcent: var(--lime);
  --linia: var(--lime);
  --linia-miekka: color-mix(in srgb, var(--lime) 45%, transparent);
  --cichy: var(--atrament);
  --pigulka-bg: var(--lime);
  --pigulka-fg: var(--atrament);
}

:root[data-paleta="okladka"] {
  --bg: var(--koral); --fg: var(--lime); --akcent: var(--lime); --linia: var(--lime);
  --linia-miekka: color-mix(in srgb, var(--lime) 45%, transparent);
  --cichy: var(--atrament); --pigulka-bg: var(--lime); --pigulka-fg: var(--atrament);
}
:root[data-paleta="srodek"] {
  --bg: var(--mgla); --fg: var(--atrament); --akcent: var(--fiolet); --linia: var(--atrament);
  --linia-miekka: color-mix(in srgb, var(--atrament) 25%, transparent);
  --cichy: color-mix(in srgb, var(--atrament) 72%, var(--mgla)); --pigulka-bg: var(--atrament); --pigulka-fg: var(--mgla);
}
:root[data-paleta="roz"] {
  --bg: var(--roz); --fg: var(--atrament); --akcent: var(--atrament); --linia: var(--atrament);
  --linia-miekka: color-mix(in srgb, var(--atrament) 25%, transparent);
  --cichy: var(--atrament); --pigulka-bg: var(--atrament); --pigulka-fg: var(--mgla);
}
:root[data-paleta="tablica"] {
  --bg: var(--atrament); --fg: var(--mgla); --akcent: var(--lime); --linia: color-mix(in srgb, var(--mgla) 30%, transparent);
  --linia-miekka: color-mix(in srgb, var(--mgla) 15%, transparent);
  --cichy: color-mix(in srgb, var(--mgla) 70%, var(--atrament)); --pigulka-bg: var(--lime); --pigulka-fg: var(--atrament);
}

/* --------------------------------------------------------------------------
   Reset i podstawy
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 2rem; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: var(--t-tekst);
  line-height: 1.6;
  font-weight: 400;
  transition: background-color var(--t-paleta) ease, color var(--t-paleta) ease;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--menu-h) + var(--safe-dol));
}
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; margin: 0; line-height: 1.05; letter-spacing: -0.005em; }
p { margin: 0; }
p + p { margin-top: 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--akcent); }
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--akcent); outline-offset: 4px; }
::selection { background: var(--fg); color: var(--bg); }

.kontener { max-width: var(--kontener); margin-inline: auto; padding-inline: var(--margines); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pomin {
  position: fixed; top: 0; left: 50%; transform: translate(-50%, -120%);
  z-index: 200; padding: .75rem 1.25rem; background: var(--fg); color: var(--bg); border-radius: 999px;
  transition: transform .2s;
}
.pomin:focus { transform: translate(-50%, 16px); }

/* --------------------------------------------------------------------------
   Typografia: komponenty
   -------------------------------------------------------------------------- */
.etykieta {
  font-family: var(--f-body);
  font-size: var(--t-etykieta);
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  line-height: 1.3;
}
.etykieta--akcent { color: var(--akcent); }
.etykieta--cicha { color: var(--cichy); }
.lead { font-family: var(--f-display); font-size: var(--t-lead); line-height: 1.3; }
.tekst { font-size: var(--t-tekst); max-width: 64ch; }
.tekst--maly { font-size: var(--t-maly); }
.cichy { color: var(--cichy); }
.numer { font-family: var(--f-display); color: var(--akcent); font-variant-numeric: tabular-nums; }

/* Łącznik: motyw z logo („MENTORING ——— MANAGERSKI”) */
.lacznik {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}
.lacznik > * { flex: 0 0 auto; }
.lacznik > :last-child:not(.lacznik__kreska) { flex-shrink: 1; }
.lacznik__kreska {
  flex: 1 1 2rem;
  position: relative;
  height: 1px;
  min-width: 2rem;
  background: var(--linia);
  transform-origin: left center;
  transition: background-color var(--t-paleta) ease;
}
.lacznik__kreska::before, .lacznik__kreska::after {
  content: ""; position: absolute; top: -3px; width: 1px; height: 7px; background: inherit;
}
.lacznik__kreska::before { left: 0; }
.lacznik__kreska::after { right: 0; }
.lacznik--akcent .lacznik__kreska { background: var(--akcent); }

/* Strzałka ↗ */
.strzalka { color: var(--akcent); font-family: var(--f-body); font-weight: 400; display: inline-block; transition: transform .3s var(--krzywa); }
a:hover .strzalka, a:focus-visible .strzalka { transform: translate(3px, -3px); }

/* Pigułka: jedyny zaokrąglony element na stronie */
.pigulka {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: 0 1.75rem; height: 3.25rem;
  border-radius: 999px;
  background: var(--pigulka-bg); color: var(--pigulka-fg);
  font-family: var(--f-body); font-size: var(--t-etykieta); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
  transition: background-color var(--t-paleta) ease, color var(--t-paleta) ease, transform .3s var(--krzywa);
}
.pigulka:hover { color: var(--pigulka-fg); transform: translateY(-2px); }
.pigulka--kontur { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--linia); }
.pigulka--kontur:hover { color: var(--fg); }
.pigulka--mala { height: 2.5rem; padding-inline: 1.25rem; font-size: .75rem; }

/* Link z etykietą i strzałką */
.link-strzalka { display: inline-flex; align-items: baseline; gap: .5em; }
.link-strzalka:hover { color: inherit; }

/* --------------------------------------------------------------------------
   Pasy i siatka
   -------------------------------------------------------------------------- */
.pas { padding-block: var(--pas); position: relative; }
.pas + .pas::before,
.pas--linia::before {
  content: ""; display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 2 * var(--margines)), var(--kontener)); height: 1px; background: var(--linia);
  transition: background-color var(--t-paleta) ease;
}
.pas__naglowek { display: flex; flex-direction: column; gap: 1.75rem; margin-bottom: clamp(3rem, 6vw, 5.5rem); }
.pas__naglowek .lacznik { max-width: 32rem; }
.pas__naglowek h2 { font-size: var(--t-h2); max-width: 20ch; }

.siatka { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1.5rem, 3vw, 3rem); row-gap: 2.5rem; }
.kol-3 { grid-column: span 3; }
.kol-4 { grid-column: span 4; }
.kol-5 { grid-column: span 5; }
.kol-6 { grid-column: span 6; }
.kol-7 { grid-column: span 7; }
.kol-8 { grid-column: span 8; }
.kol-9 { grid-column: span 9; }
.kol-start-4 { grid-column: 4 / -1; }
.kol-start-5 { grid-column: 5 / -1; }

/* Kolumny rozdzielone pionową linią */
.kolumny { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); }
.kolumny > * { padding: 0 clamp(1.5rem, 3vw, 3rem); border-left: 1px solid var(--linia); transition: border-color var(--t-paleta) ease; min-width: 0; }
.kolumny > *:first-child { padding-left: 0; border-left: 0; }
.kolumny > *:last-child { padding-right: 0; }

/* --------------------------------------------------------------------------
   Loader
   -------------------------------------------------------------------------- */
.loader {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: var(--koral); color: var(--lime);
  cursor: pointer;
}
html:not(.loader-gra) .loader { display: none; }
html.loader-gra { overflow: hidden; }
.loader__logo { width: min(64vw, 820px); will-change: transform; transform-origin: 0 0; }
.loader__podpowiedz {
  position: absolute; bottom: calc(2rem + var(--safe-dol)); left: 50%; transform: translateX(-50%);
  color: var(--atrament); opacity: 0; animation: wejscie .6s 1.4s forwards;
}

.logo { overflow: visible; }
.logo-kreska, .logo-tag, .logo-nazwa path { transform-box: fill-box; }
.loader-gra .loader .logo-kreska { transform-origin: center; transform: scaleX(0); animation: kreska .5s .2s var(--krzywa) forwards; }
.loader-gra .loader .logo-tag-l { opacity: 0; transform: translateX(36px); animation: tag .6s .5s var(--krzywa) forwards; }
.loader-gra .loader .logo-tag-p { opacity: 0; transform: translateX(-36px); animation: tag .6s .5s var(--krzywa) forwards; }
.loader-gra .loader .logo-nazwa path { opacity: 0; transform: translateY(12%); animation: litera .5s calc(.8s + var(--i) * .045s) var(--krzywa) forwards; }
.loader.loader--koniec .logo-kreska, .loader.loader--koniec .logo-tag, .loader.loader--koniec .logo-nazwa path { animation: none; opacity: 1; transform: none; }
.loader--koniec .loader__logo { transition: transform .7s var(--krzywa); }
.loader--koniec .loader__podpowiedz { animation: none; opacity: 0; transition: opacity .2s; }

@keyframes kreska { to { transform: scaleX(1); } }
@keyframes tag { to { opacity: 1; transform: translateX(0); } }
@keyframes litera { to { opacity: 1; transform: translateY(0); } }
@keyframes wejscie { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* --------------------------------------------------------------------------
   Hero (okładka)
   -------------------------------------------------------------------------- */
.hero {
  min-height: calc(100svh - var(--menu-h) - var(--safe-dol));
  display: grid; place-items: center; text-align: center;
  padding-block: clamp(3rem, 6vh, 5rem);
}
.hero__wnetrze { display: flex; flex-direction: column; align-items: center; gap: clamp(2rem, 5vh, 4rem); }
.hero__logo { width: min(68vw, 360px); color: var(--lime); }
.loader-gra .hero__logo { visibility: hidden; }
.hero__tresc { display: flex; flex-direction: column; align-items: center; gap: clamp(1.25rem, 3vh, 2rem); }
.hero h1 { font-size: var(--t-hero); max-width: 24ch; }
.hero__podtytul { font-family: var(--f-display); font-size: clamp(1.375rem, 2.6vw, 2.25rem); line-height: 1.25; max-width: 30ch; }
.hero__cta { margin-top: .5rem; display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.hero__drugi { color: var(--atrament); }
.loader-gra .hero__tresc > * { opacity: 0; }
.hero-gotowe .hero__tresc > * { animation: wejscie .7s var(--krzywa) both; }
.hero-gotowe .hero__tresc > :nth-child(1) { animation-delay: .05s; }
.hero-gotowe .hero__tresc > :nth-child(2) { animation-delay: .15s; }
.hero-gotowe .hero__tresc > :nth-child(3) { animation-delay: .25s; }

/* --------------------------------------------------------------------------
   O mnie
   -------------------------------------------------------------------------- */
.o-mnie__etykieta { position: sticky; top: 2rem; align-self: start; display: flex; flex-direction: column; gap: 2rem; }
.o-mnie__duzy { font-family: var(--f-display); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.35; }
.o-mnie__duzy p + p { margin-top: 1.25em; }
.foto { display: flex; flex-direction: column; gap: .75rem; }
.foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.foto figcaption { color: var(--cichy); }
.foto--kolo { width: min(100%, 220px); margin-top: 1rem; }
.foto--kolo img { aspect-ratio: 1; border-radius: 50%; object-position: 50% 8%; }
.zastepczy { display: inline-flex; align-items: center; gap: .5rem; color: var(--cichy); }
.zastepczy::before { content: ""; width: 7px; height: 7px; background: var(--akcent); }

/* --------------------------------------------------------------------------
   Spis sytuacji (8 wierszy)
   -------------------------------------------------------------------------- */
.spis { border-top: 1px solid var(--linia); transition: border-color var(--t-paleta) ease; }
.spis__wiersz {
  display: grid; grid-template-columns: 4rem minmax(0, 5fr) minmax(0, 7fr) 2.5rem;
  gap: clamp(1rem, 2vw, 2rem); align-items: baseline;
  padding: 1.75rem 0; border-bottom: 1px solid var(--linia);
  transition: border-color var(--t-paleta) ease, padding .3s var(--krzywa);
}
.spis__wiersz:hover { color: inherit; }
.spis__numer { font-family: var(--f-display); font-size: 1.25rem; color: var(--akcent); }
.spis__nazwa { font-family: var(--f-display); font-size: var(--t-h3); line-height: 1.1; }
.spis__nazwa small { display: block; font-family: var(--f-body); font-size: var(--t-etykieta); font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--cichy); margin-bottom: .5rem; }
.spis__zdanie { color: var(--cichy); font-size: var(--t-maly); max-width: 52ch; }
.spis__strzalka { text-align: right; font-size: 1.5rem; }
.spis__wiersz:hover .spis__nazwa { color: var(--akcent); }

/* --------------------------------------------------------------------------
   Kroki i oferta
   -------------------------------------------------------------------------- */
.krok, .oferta__pozycja { display: flex; flex-direction: column; gap: 1.25rem; }
.krok h3, .oferta__pozycja h3 { font-size: var(--t-h3); line-height: 1.1; }
.krok__numer { font-family: var(--f-display); font-size: 1.25rem; color: var(--akcent); }
.oferta__pozycja .lacznik { font-size: var(--t-etykieta); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cichy); }
.oferta__pozycja .tekst { font-size: var(--t-maly); }
.oferta__pozycja .link-strzalka { margin-top: auto; padding-top: .5rem; align-self: flex-start; }
.pas__stopka { margin-top: clamp(3rem, 6vw, 5rem); display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.pas__stopka .lacznik { flex: 1 1 16rem; }

/* --------------------------------------------------------------------------
   Opinie (róż)
   -------------------------------------------------------------------------- */
.cytat { display: flex; flex-direction: column; gap: 1.5rem; }
.cytat blockquote { margin: 0; font-family: var(--f-display); font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.25; }
.cytat blockquote::before { content: "„"; color: var(--akcent); }
.cytat blockquote::after { content: "”"; color: var(--akcent); }
.cytat figcaption { display: flex; flex-direction: column; gap: .25rem; }

/* --------------------------------------------------------------------------
   Dla firm (tablica)
   -------------------------------------------------------------------------- */
.firmy__pozycja { display: flex; flex-direction: column; gap: 1rem; }
.firmy__pozycja h3 { font-size: clamp(1.5rem, 2vw, 1.875rem); line-height: 1.15; }
.firmy__pozycja .tekst { font-size: var(--t-maly); color: var(--cichy); }
.firmy__pozycja .etykieta--maly { font-size: .75rem; letter-spacing: .25em; color: var(--akcent); }

/* --------------------------------------------------------------------------
   Kontakt + stopka (tylna okładka)
   -------------------------------------------------------------------------- */
.kontakt { min-height: calc(100svh - var(--menu-h) - var(--safe-dol)); display: flex; flex-direction: column; justify-content: space-between; gap: 4rem; }
.kontakt__email { font-family: var(--f-display); font-size: clamp(2.25rem, 7.2vw, 7rem); line-height: 1; letter-spacing: -0.01em; word-break: break-word; }
.kontakt__email:hover { color: var(--lime); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }
.kontakt__cta { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-top: 2.5rem; }
.kontakt__drugi { color: var(--atrament); }
.kontakt > .kontener { width: 100%; }
.stopka { color: var(--atrament); font-size: var(--t-etykieta); }
.stopka__wiersz { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linia); }
.stopka a:hover { color: var(--atrament); text-decoration: underline; text-underline-offset: .2em; }

/* --------------------------------------------------------------------------
   Stałe menu na dole + kreska postępu
   -------------------------------------------------------------------------- */
.menu {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--bg); color: var(--fg);
  padding-bottom: var(--safe-dol);
  transition: background-color var(--t-paleta) ease, color var(--t-paleta) ease, transform .7s var(--krzywa);
}
.loader-gra .menu { transform: translateY(110%); }
.postep { position: relative; height: 1px; background: var(--linia); transition: background-color var(--t-paleta) ease; }
.postep::before, .postep::after { content: ""; position: absolute; top: -3px; width: 1px; height: 7px; background: var(--linia); }
.postep::before { left: 0; }
.postep::after { right: 0; }
.postep__wypelnienie { position: absolute; inset: 0; background: var(--akcent); transform-origin: left center; transform: scaleX(0); transition: background-color var(--t-paleta) ease; }
.menu__pasek { display: flex; align-items: stretch; height: var(--menu-h); }
.menu__lista { display: flex; flex: 1; }
.menu__lista li { display: flex; flex: 1 1 0; border-left: 1px solid var(--linia); transition: border-color var(--t-paleta) ease; }
.menu__lista li:first-child { border-left: 0; }
.menu__link {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .6em; padding-inline: 2.5rem;
  font-size: var(--t-etykieta); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
}
.menu__link[aria-current="true"] { color: var(--akcent); }
.menu__link .strzalka { font-size: 1em; }
.menu__telefon { display: none; }

/* Menu rozwijane na telefonie */
.menu-panel {
  position: fixed; inset: 0; z-index: 40;
  background: var(--bg); color: var(--fg);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--margines) var(--margines) calc(var(--menu-h) + var(--safe-dol) + 2rem);
  transform: translateY(100%);
  transition: transform .6s var(--krzywa), background-color var(--t-paleta) ease, visibility 0s .6s;
  visibility: hidden;
}
html.menu-otwarte .menu-panel { transform: translateY(0); visibility: visible; transition-delay: 0s; }
html.menu-otwarte { overflow: hidden; }
.menu-panel__lista li { border-top: 1px solid var(--linia); }
.menu-panel__lista li:last-child { border-bottom: 1px solid var(--linia); }
.menu-panel__link { display: flex; justify-content: space-between; align-items: baseline; padding: 1.25rem 0; font-family: var(--f-display); font-size: 2.25rem; line-height: 1; }
.menu-panel__link[aria-current="true"] { color: var(--akcent); }
.menu-panel__link .strzalka { font-family: var(--f-body); font-size: 1.25rem; }
.menu-panel__stopka { margin-top: 2.5rem; display: flex; flex-direction: column; gap: .5rem; }

/* --------------------------------------------------------------------------
   Podstrona sytuacji
   -------------------------------------------------------------------------- */
.podstrona__gora { padding-top: clamp(2rem, 5vh, 3.5rem); display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.podstrona__gora .logo { width: 160px; color: var(--fiolet); }
.podstrona__naglowek { padding-block: clamp(3rem, 8vh, 6rem) clamp(3rem, 6vw, 5rem); display: flex; flex-direction: column; gap: 2rem; }
.podstrona__naglowek h1 { font-size: var(--t-h2); max-width: 16ch; }
.podstrona__naglowek .lead { max-width: 28ch; }
.lista-nr { counter-reset: poz; }
.lista-nr li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--linia); font-size: var(--t-maly); }
.lista-nr li::before { counter-increment: poz; content: counter(poz, decimal-leading-zero); font-family: var(--f-display); color: var(--akcent); font-size: 1.125rem; line-height: 1.45; }
.lista-nr li:last-child { border-bottom: 1px solid var(--linia); }
.podstrona__zamkniecie { font-family: var(--f-display); font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1.2; max-width: 22ch; }
.podstrona__nawigacja { display: flex; justify-content: space-between; gap: 2rem; padding-top: 2rem; border-top: 1px solid var(--linia); }
.podstrona__nawigacja a { display: flex; flex-direction: column; gap: .5rem; max-width: 20rem; }
.podstrona__nawigacja a:last-child { text-align: right; align-items: flex-end; }
.podstrona__nawigacja .nazwa { font-family: var(--f-display); font-size: var(--t-h3); line-height: 1.1; }
.stopka--podstrona { padding-block: 2rem 1rem; color: var(--cichy); }
.stopka--podstrona a:hover { color: var(--akcent); }

/* --------------------------------------------------------------------------
   Wejścia (raz, przy pierwszym pojawieniu się na ekranie)
   -------------------------------------------------------------------------- */
.wejscie { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--krzywa), transform .7s var(--krzywa); transition-delay: calc(var(--i, 0) * 60ms); }
.wejscie.widoczne { opacity: 1; transform: none; }
.wejscie-kreska .lacznik__kreska { transform: scaleX(0); transition: transform .9s var(--krzywa) .1s, background-color var(--t-paleta) ease; }
.wejscie-kreska.widoczne .lacznik__kreska { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   Telefon i tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  :root { --margines: 32px; }
  .siatka { grid-template-columns: repeat(6, 1fr); }
  .kol-3, .kol-4, .kol-5 { grid-column: span 3; }
  .kol-6, .kol-7, .kol-8, .kol-9, .kol-start-4, .kol-start-5 { grid-column: 1 / -1; }
  .kolumny { grid-template-columns: repeat(2, 1fr); row-gap: 3rem; }
  .kolumny > *:nth-child(odd) { padding-left: 0; border-left: 0; }
  .kolumny > *:nth-child(even) { padding-right: 0; }
  .kolumny--4 > :nth-child(n + 3) { padding-top: 3rem; border-top: 1px solid var(--linia); }
  .spis__wiersz { grid-template-columns: 3rem 1fr 2rem; }
  .spis__zdanie { grid-column: 2; }
  .spis__strzalka { grid-row: 1; grid-column: 3; }
}

@media (max-width: 767px) {
  :root { --margines: 20px; --pas: clamp(4rem, 14vw, 6rem); --t-tekst: 1.0625rem; }
  .hero__logo { width: min(78vw, 320px); }
  .hero h1 { max-width: 14ch; }
  .lacznik { gap: .75rem; }
  .pigulka { max-width: 100%; height: auto; min-height: 3.25rem; padding-block: .75rem; white-space: normal; text-align: center; line-height: 1.3; }
  .kolumny { grid-template-columns: 1fr; row-gap: 0; }
  .kolumny > * { padding: 2.25rem 0 !important; border-left: 0 !important; border-top: 1px solid var(--linia); }
  .kolumny > *:first-child { padding-top: 0 !important; border-top: 0; }
  .kolumny--4 > :nth-child(n + 3) { padding-top: 2.25rem; }
  .o-mnie__etykieta { position: static; grid-column: 1 / -1; }
  .foto--kolo { margin-inline: auto; }
  .spis__wiersz { padding: 1.25rem 0; }
  .spis__nazwa { font-size: 1.5rem; }
  .kontakt { min-height: 0; gap: 3rem; }
  .podstrona__nawigacja { flex-direction: column; }
  .podstrona__gora .link-strzalka { white-space: nowrap; }
  .podstrona__gora .logo { width: 120px; }
  .siatka > .kol-3:empty, .tylko-desktop { display: none; }
  .podstrona__nawigacja a:last-child { text-align: left; align-items: flex-start; }

  /* Linie wewnątrz sekcji ciszej niż podziały między sekcjami */
  .spis, .spis__wiersz, .kolumny > *, .lista-nr li, .stopka__wiersz, .podstrona__nawigacja, .menu-panel__lista li { border-color: var(--linia-miekka); }

  /* Menu: Liesinger na telefonie */
  .menu__lista { display: none; }
  .menu__telefon { display: flex; flex: 1; align-items: stretch; }
  .menu__telefon > * { display: flex; align-items: center; justify-content: center; gap: .6em; flex: 1 1 0; padding-inline: .75rem; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
  .menu__telefon > * + * { border-left: 1px solid var(--linia); }
  .menu__przelacznik .strzalka { transition: transform .4s var(--krzywa); color: var(--akcent); }
  html.menu-otwarte .menu__przelacznik .strzalka { transform: rotate(180deg); }
}

@media (max-width: 400px) {
  .pigulka { padding-inline: 1.25rem; letter-spacing: .12em; }
}

/* --------------------------------------------------------------------------
   Ograniczony ruch
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; }
  .wejscie { opacity: 1; transform: none; }
  .wejscie-kreska .lacznik__kreska { transform: none; }
  html.loader-gra .loader { display: none; }
  .postep__wypelnienie { transition: none; }
}

@media print {
  .menu, .menu-panel, .loader { display: none !important; }
  body { padding-bottom: 0; }
}

/* Pas bez górnej linii (granica między paletami) */
.pas.pas--bez-linii::before { display: none; }

/* Sekcje wyłączone atrybutem hidden (np. Opinie do czasu prawdziwych treści) */
[hidden] { display: none !important; }