/* IMAGIFT — katalog realizacji (realizacje.html). Wymaga tokeny.css + wspolne.css. Prefiks klas: rl-.
   Spis: 1 hero i wachlarz · 2 katalog: filtry, grupy, karty · 3 cztery warstwy · 4 od inspiracji do wręczenia ·
         5 okno szczegółów · 6 tablet · 7 telefon (wyłącznie @media max-width: 767px) · 8 ograniczony ruch
   Zasady: zero wersalików i kursywy, kolor tekstu na bieli tylko w wersjach -tusz, siatki kart po 3. */

/* =========================================================================
   1. HERO + WACHLARZ
   ========================================================================= */
.rl-hero {
  position: relative;
  padding: calc(var(--ig-pasek-h) + var(--ig-pasek-gora) + clamp(40px, 5vw, 88px)) 0 clamp(56px, 6vw, 112px);
  min-height: min(100svh, 940px);
  display: grid; align-items: center;
}
.rl-hero-siatka { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.rl-hero-tekst { display: grid; gap: 30px; justify-items: start; }
.rl-hero-tekst .ig-h-hero { max-width: 11ch; }
.rl-hero-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* duża pigułka do briefu */
.rl-btn-duzy { min-height: 68px; padding: 7px 7px 7px 34px; gap: 22px; font-size: 1.125rem; }
.rl-btn-duzy .ig-btn-pole { width: 54px; height: 54px; }
.rl-btn-duzy .ig-btn-pole::before { width: 20px; height: 20px; }
.rl-btn-duzy::before { right: 34px; }

.rl-hero-uwaga { display: flex; align-items: flex-start; gap: 12px; max-width: 46ch; font-size: var(--ig-t-drobny); line-height: 1.5; color: var(--ig-cichy); }
.rl-znak-maly {
  flex: none; width: 18px; height: 18px; margin-top: 1px;
  background:
    radial-gradient(circle at 4px 4px, var(--ig-g) 0 3.6px, transparent 4px),
    radial-gradient(circle at 14px 4px, var(--ig-i) 0 3.6px, transparent 4px),
    radial-gradient(circle at 4px 14px, var(--ig-f) 0 3.6px, transparent 4px),
    radial-gradient(circle at 14px 14px, var(--ig-t) 0 3.6px, transparent 4px);
}

/* wachlarz: trzy karty prezentów + konfetti (paralaksa w realizacje.js) */
.rl-wachlarz { position: relative; width: 100%; max-width: 620px; aspect-ratio: 1 / 0.9; justify-self: end; isolation: isolate; }
.rl-wk {
  --r: 0deg; --x: 0%; --y: 0%;
  position: absolute; left: 22%; top: 15%; width: 56%; z-index: 1;
  transform: translate(var(--x), var(--y)) rotate(var(--r));
  transform-origin: 50% 110%;
  color: var(--ig-tusz);
  border-radius: 26px;
  -webkit-tap-highlight-color: transparent;
}
.rl-wk--0 { --r: -8deg; --x: -33%; --y: -9%; }
.rl-wk--1 { --r: 1.5deg; --x: 0%; --y: 12%; z-index: 3; }
.rl-wk--2 { --r: 8deg; --x: 31%; --y: -5%; z-index: 2; }
.rl-wk-scroll, .rl-wk-wjazd { display: block; }
.rl-wk-in {
  display: grid; gap: 12px;
  padding: 14px 10px 10px;
  border-radius: 26px;
  background: var(--ig-bialy);
  box-shadow: 0 0 0 1px var(--ig-linia), 0 30px 60px -30px rgba(14, 14, 20, 0.35), 0 8px 18px -10px rgba(14, 14, 20, 0.12);
  transition: transform 0.7s var(--ig-e-out), box-shadow 0.7s var(--ig-e-out);
}
.rl-wk-render { border-radius: 18px; }
.rl-wk-podpis { display: grid; grid-template-columns: 10px minmax(0, 1fr); align-items: center; gap: 1px 10px; padding: 0 8px; min-width: 0; }
.rl-wk-podpis::before { content: ""; grid-row: 1; width: 10px; height: 10px; border-radius: 50%; background: var(--k); }
.rl-wk-nazwa { grid-column: 2; min-width: 0; font-family: var(--ig-f-display); font-weight: 500; font-size: clamp(0.9375rem, 0.8rem + 0.4vw, 1.0625rem); line-height: 1.3; letter-spacing: -0.01em; }
.rl-wk-linia { grid-column: 2; font-size: 0.75rem; line-height: 1.35; color: var(--ig-cichy); }
@media (hover: hover) {
  .rl-wk:hover { z-index: 5; }
  .rl-wk:hover .rl-wk-in { transform: translateY(-16px) rotate(calc(var(--r) * -0.5)); box-shadow: 0 0 0 1.5px var(--k), 0 40px 70px -30px rgba(14, 14, 20, 0.4); }
}
.rl-wk:focus-visible { outline: none; }
.rl-wk:focus-visible .rl-wk-in { box-shadow: 0 0 0 2px var(--ig-bialy), 0 0 0 4px var(--ig-fokus); }
.rl-konf {
  position: absolute; left: var(--x); top: var(--y); z-index: 0;
  width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%; background: var(--kk);
  pointer-events: none;
}
/* wjazd: karty rozkładają się jak talia, konfetti wyskakuje */
html.ig-ruch .rl-wk-wjazd { animation: rl-wk-wjazd 1.5s var(--ig-e-out) both; animation-delay: calc(0.25s + var(--n, 0) * 0.13s); }
html.ig-ruch .rl-konf { animation: rl-konf-pop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(0.7s + var(--n, 0) * 0.07s); }
@keyframes rl-wk-wjazd {
  from { opacity: 0; transform: translateY(46%) rotate(calc(var(--r) * -1.4)) scale(0.94); }
  to { opacity: 1; transform: none; }
}
@keyframes rl-konf-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* =========================================================================
   2. KATALOG — filtry, grupy (po 3 karty), karty
   ========================================================================= */
.rl-katalog { padding-top: clamp(40px, 3vw + 1rem, 88px); }
.rl-katalog-glowa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); align-items: end; gap: 20px 64px; }
.rl-katalog-glowa h2 { max-width: 13ch; }

/* pasek filtrów: pigułka z przesuwanym tłem (tusz) — przyklejona pod paskiem menu */
.rl-filtry-pas {
  position: sticky; top: calc(var(--ig-pasek-h) + 14px); z-index: 40;
  display: flex; margin-top: clamp(36px, 3vw + 1rem, 64px);
  pointer-events: none;
}
.rl-filtry {
  position: relative; isolation: isolate;
  display: inline-flex; gap: 2px; padding: 6px;
  border-radius: var(--ig-r-pigulka);
  background: rgba(245, 245, 247, 0.9);
  box-shadow: inset 0 0 0 1px var(--ig-linia), 0 12px 30px -18px rgba(14, 14, 20, 0.28);
  -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px);
  pointer-events: auto;
}
.rl-filtr {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 0 20px;
  border-radius: var(--ig-r-pigulka);
  font-family: var(--ig-f-display); font-weight: 500; font-size: 0.9375rem; letter-spacing: -0.005em;
  color: var(--ig-tekst); white-space: nowrap;
  transition: color 0.45s var(--ig-e-out);
}
@media (hover: hover) { .rl-filtr:hover { color: var(--ig-tusz); } }
.rl-filtr[aria-pressed="true"] { color: var(--ig-bialy); }
.rl-filtr-kropka { width: 9px; height: 9px; border-radius: 50%; background: var(--k); flex: none; transition: transform 0.45s var(--ig-e-out); }
.rl-filtr[aria-pressed="true"] .rl-filtr-kropka { transform: scale(1.25); }
.rl-filtr-znak {
  flex: none; width: 13px; height: 13px;
  background:
    radial-gradient(circle at 3px 3px, var(--ig-g) 0 2.6px, transparent 3px),
    radial-gradient(circle at 10px 3px, var(--ig-i) 0 2.6px, transparent 3px),
    radial-gradient(circle at 3px 10px, var(--ig-f) 0 2.6px, transparent 3px),
    radial-gradient(circle at 10px 10px, var(--ig-t) 0 2.6px, transparent 3px);
}
.rl-filtr:focus-visible { outline-offset: 2px; }
.rl-filtr-tlo {
  position: absolute; z-index: 0; left: 0; top: 6px; bottom: 6px; width: 0;
  border-radius: var(--ig-r-pigulka); background: var(--ig-tusz);
  transition: transform 0.6s var(--ig-e-out), width 0.6s var(--ig-e-out);
}
html:not(.ig-js) .rl-filtr[aria-pressed="true"] { background: var(--ig-tusz); }

/* grupy */
.rl-grupy { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(56px, 4vw + 1.5rem, 104px); margin-top: clamp(36px, 3vw + 1rem, 64px); }
.rl-grupa { min-width: 0; scroll-margin-top: calc(var(--ig-pasek-h) + 96px); }
.rl-grupa-glowa {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 40px;
  padding-bottom: 18px; margin-bottom: 26px;
  border-bottom: 1px solid var(--ig-linia);
}
.rl-grupa-tytul { display: flex; align-items: center; gap: 14px; font-size: clamp(1.375rem, 1.05rem + 1vw, 1.9rem); line-height: 1.15; letter-spacing: -0.02em; }
.rl-grupa-kropka { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--k); }
.rl-grupa-opis { max-width: 46ch; font-size: var(--ig-t-maly); color: var(--ig-cichy); text-align: right; }
.rl-siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 26px); }
.rl-pole { display: flex; min-width: 0; }

/* karta realizacji */
.rl-karta {
  position: relative; isolation: isolate; overflow: hidden;
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column;
  padding: 10px;
  border-radius: var(--ig-r-karta);
  background: var(--ig-bialy);
  box-shadow: inset 0 0 0 1px var(--ig-mgla);
  color: var(--ig-tekst);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.6s var(--ig-e-out), box-shadow 0.6s var(--ig-e-out);
}
/* „rozpakowanie” koloru: mgiełka wylewa się z pola strzałki */
.rl-karta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--k-mgla);
  clip-path: circle(0% at calc(100% - 40px) calc(100% - 40px));
  transition: clip-path 0.9s var(--ig-e-out);
}
.rl-karta-render { flex: none; border-radius: 18px; }
.rl-karta .ig-render, .rl-wk .ig-render, .rl-sz-galeria .ig-render { background: var(--k-mgla, var(--ig-papier)); }
.rl-karta .ig-render-zastepnik { transition: opacity 0.8s var(--ig-e-out), transform 1.2s var(--ig-e-out); }
.rl-karta-tresc { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; padding: 20px 14px 12px; }
.rl-karta-gora { display: flex; flex-wrap: wrap; gap: 8px; }
.rl-karta-nazwa { font-family: var(--ig-f-display); font-weight: 500; font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--ig-tusz); }
.rl-karta-haslo { font-size: var(--ig-t-maly); line-height: 1.55; color: var(--ig-tekst); }
.rl-karta-dol {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: auto; padding-top: 16px;
  border-top: 1px solid var(--ig-linia);
}
.rl-karta-dol--bez-progu { justify-content: flex-end; }   /* karta na innych stronach (Imagift.kartaRealizacji z prog: false) */
.rl-karta-prog { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--ig-t-drobny); line-height: 1.35; color: var(--ig-cichy); }
.rl-karta-prog svg { flex: none; width: 18px; height: 18px; color: var(--k-tusz); }
.rl-karta-strzalka {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--k); color: var(--ig-tusz);
  transition: background-color 0.5s var(--ig-e-out), color 0.5s var(--ig-e-out);
}
.rl-karta-strzalka::before {
  content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--ig-strzalka) center / contain no-repeat; mask: var(--ig-strzalka) center / contain no-repeat;
  transition: transform 0.5s var(--ig-e-out);
}
.rl-karta[data-kolor="t"] .rl-karta-strzalka { color: var(--ig-bialy); background: var(--ig-t-tusz); }
@media (hover: hover) {
  .rl-karta:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1.5px var(--k), var(--ig-cien-2); }
  .rl-karta:hover::before { clip-path: circle(150% at calc(100% - 40px) calc(100% - 40px)); }
  .rl-karta:hover .rl-karta-strzalka { background: var(--ig-tusz); color: var(--ig-bialy); }
  .rl-karta:hover .rl-karta-strzalka::before { transform: translateX(3px); }
  .rl-karta:hover .rl-karta-dol { border-top-color: rgba(14, 14, 20, 0.12); }
  .rl-karta:hover .rl-plakietka { background: var(--ig-bialy); }
  .rl-karta:hover .ig-render-zastepnik, .rl-karta:hover .ig-render.is-jest .ig-render-obraz { transform: scale(1.045); }
}
.rl-karta:focus-visible { outline: 2px solid var(--ig-fokus); outline-offset: 3px; }

/* plakietki (linia, kategoria) — zwykła pisownia, w kolorze zakresu */
.rl-plakietka {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 30px; padding: 0 13px;
  border-radius: var(--ig-r-pigulka);
  background: var(--ig-papier); color: var(--ig-tusz);
  font-family: var(--ig-f-display); font-size: 0.8125rem; font-weight: 500; line-height: 1.2; white-space: nowrap;
  transition: background-color 0.5s var(--ig-e-out);
}
.rl-plakietka--linia::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--k); }
.rl-bez-js { margin-top: 32px; color: var(--ig-cichy); }

/* =========================================================================
   3. CZTERY WARSTWY — przyklejony tytuł + znak z czterech kropek; warstwy zapalają się kolejno
   ========================================================================= */
.rl-warstwy-siatka { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(40px, 6vw, 120px); align-items: start; }
.rl-warstwy-bok { align-self: stretch; }
.rl-warstwy-przyklejone { position: sticky; top: calc(var(--ig-pasek-h) + 56px); display: grid; gap: 24px; justify-items: start; }
.rl-warstwy-przyklejone h2 { max-width: 12ch; }
.rl-znak { position: relative; width: clamp(150px, 15vw, 220px); aspect-ratio: 1; margin-top: clamp(8px, 2vw, 32px); }
.rl-znak i { position: absolute; width: 46%; height: 46%; border-radius: 50%; }
.rl-znak i:nth-child(1) { left: 0; top: 0; background: var(--ig-g); }
.rl-znak i:nth-child(2) { right: 0; top: 0; background: var(--ig-i); }
.rl-znak i:nth-child(3) { left: 0; bottom: 0; background: var(--ig-f); }
.rl-znak i:nth-child(4) { right: 0; bottom: 0; background: var(--ig-t); }
.rl-warstwy-lista { display: grid; gap: 16px; }
.rl-warstwa {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 26px; align-items: start;
  padding: clamp(24px, 1rem + 1.6vw, 40px);
  border-radius: var(--ig-r-karta);
  background: var(--ig-bialy);
  transition: opacity 0.7s var(--ig-e-out), transform 0.7s var(--ig-e-out), box-shadow 0.7s var(--ig-e-out);
}
.rl-warstwa-ikona {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px;
  background: var(--k); color: var(--ig-tusz);
  transition: background-color 0.7s var(--ig-e-out), color 0.7s var(--ig-e-out), transform 0.7s var(--ig-e-out);
}
.rl-warstwa[data-kolor="t"] .rl-warstwa-ikona { background: var(--ig-t-tusz); color: var(--ig-bialy); }
.rl-warstwa-ikona svg { width: 28px; height: 28px; }
.rl-warstwa-tresc { display: grid; gap: 10px; }
.rl-warstwa h3 { font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem); line-height: 1.12; letter-spacing: -0.02em; }
.rl-warstwa p { color: var(--ig-tekst); }
.rl-warstwa p strong { color: var(--ig-tusz); }
.rl-warstwa-gdzie { display: flex; align-items: center; gap: 10px; font-size: var(--ig-t-drobny); color: var(--ig-cichy) !important; }
.rl-warstwa-gdzie::before { content: ""; flex: none; width: 18px; height: 2px; border-radius: 2px; background: var(--k); }
/* stan przed zapaleniem (tylko przy pełnym ruchu): wyciszona tylko ikona i cień — tekst zawsze w pełnym kolorze (czytelny) */
.rl-warstwy.is-anim .rl-warstwa:not(.is-aktywna) { transform: translateX(14px); }
.rl-warstwy.is-anim .rl-warstwa:not(.is-aktywna) .rl-warstwa-ikona { background: var(--ig-mgla); color: var(--ig-cichy); transform: scale(0.88); }
.rl-warstwy.is-anim .rl-warstwa.is-aktywna { box-shadow: var(--ig-cien-1); }

/* =========================================================================
   4. OD INSPIRACJI DO WRĘCZENIA — trzy kroki
   ========================================================================= */
.rl-proces-glowa { display: grid; gap: 18px; justify-items: center; text-align: center; max-width: 780px; margin: 0 auto clamp(40px, 4vw + 1rem, 72px); }
.rl-proces-glowa .ig-lead { margin-inline: auto; }
.rl-kroki { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); counter-reset: none; }
.rl-krok {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: clamp(26px, 1rem + 1.6vw, 40px);
  border-radius: var(--ig-r-karta);
  background: var(--ig-papier);
}
.rl-krok-ikona { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 10px; border-radius: 50%; background: var(--k); color: var(--ig-tusz); }
.rl-krok-ikona svg { width: 26px; height: 26px; }
.rl-krok h3 { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem); font-weight: 500; }
.rl-krok p { font-size: var(--ig-t-maly); }
.rl-krok p strong { color: var(--ig-tusz); }
/* łącznik między krokami: kropki w kolorze następnego kroku */
.rl-krok:not(:last-child)::after {
  content: ""; position: absolute; z-index: 1; top: 56px; right: calc(-1 * clamp(16px, 1.6vw, 24px) / 2 - 9px);
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ig-bialy); box-shadow: inset 0 0 0 5px var(--k-nast, var(--ig-i));
}

/* =========================================================================
   5. OKNO SZCZEGÓŁÓW (<dialog>) — komputer: panel na środku; telefon: pełny ekran
   ========================================================================= */
html.rl-okno-otwarte { overflow: hidden; }
html.rl-okno-otwarte body { padding-right: var(--rl-suwak, 0px); }
.rl-okno {
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 24px; border: 0;
  background: transparent; color: var(--ig-tekst);
  overflow: hidden;
}
.rl-okno[open] { display: grid; place-items: center; }
.rl-okno::backdrop { background: rgba(14, 14, 20, 0.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rl-okno-ramka {
  display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
  width: min(1200px, 100%); height: 100%; max-height: 1000px;
  border-radius: var(--ig-r-okno);
  background: var(--ig-bialy);
  box-shadow: 0 50px 120px -50px rgba(14, 14, 20, 0.6), 0 0 0 1px var(--ig-linia);
  overflow: hidden;
}
.rl-okno[open] .rl-okno-ramka { animation: rl-okno-wjazd 0.75s var(--ig-e-out) both; }
.rl-okno[open]::backdrop { animation: rl-tlo-wjazd 0.45s var(--ig-e-out) both; }
.rl-okno.is-zamyka .rl-okno-ramka { animation: rl-okno-wyjazd 0.26s var(--ig-e-in-out) forwards; }
.rl-okno.is-zamyka::backdrop { animation: rl-tlo-wyjazd 0.26s var(--ig-e-in-out) forwards; }
@keyframes rl-okno-wjazd { from { opacity: 0; transform: translateY(48px) scale(0.975); } to { opacity: 1; transform: none; } }
@keyframes rl-okno-wyjazd { to { opacity: 0; transform: translateY(28px) scale(0.985); } }
@keyframes rl-tlo-wjazd { from { opacity: 0; } to { opacity: 1; } }
@keyframes rl-tlo-wyjazd { to { opacity: 0; } }

.rl-okno-pasek {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 14px 12px clamp(20px, 2.4vw, 32px);
  border-bottom: 1px solid var(--ig-linia);
}
.rl-okno-kategoria { display: flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--ig-f-display); font-weight: 500; font-size: 0.9375rem; color: var(--ig-tusz); }
.rl-okno-kategoria-nazwa { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-okno-kropka { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--rl-kat, var(--ig-g)); }
.rl-okno-przyciski { display: flex; align-items: center; gap: 8px; flex: none; }
.rl-okno-strzalka, .rl-okno-zamknij {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--ig-papier); color: var(--ig-tusz);
  transition: background-color var(--ig-d-srednio) var(--ig-e-out), color var(--ig-d-srednio) var(--ig-e-out);
}
.rl-okno-strzalka::before {
  content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--ig-strzalka) center / contain no-repeat; mask: var(--ig-strzalka) center / contain no-repeat;
}
.rl-okno-poprz::before { transform: rotate(180deg); }
.rl-okno-zamknij { margin-left: 6px; background: var(--ig-tusz); color: var(--ig-bialy); }
.rl-okno-zamknij::before, .rl-okno-zamknij::after { content: ""; grid-area: 1 / 1; width: 17px; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
.rl-okno-zamknij::after { transform: rotate(-45deg); }
@media (hover: hover) {
  .rl-okno-strzalka:hover { background: var(--ig-mgla); }
  .rl-okno-zamknij:hover { background: var(--k, var(--ig-g)); color: var(--ig-tusz); }
}
.rl-okno-przewijanie { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; }
.rl-okno-tresc { display: block; padding: clamp(24px, 3vw, 44px) clamp(20px, 3.4vw, 52px) clamp(24px, 3vw, 44px); }

/* góra: galeria + wstęp */
.rl-sz-gora { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(24px, 3.6vw, 60px); align-items: start; }
.rl-sz-galeria { display: grid; gap: 12px; }
.rl-sz-miniatury { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7778fr); gap: 12px; }
.rl-sz-glowny { border-radius: var(--ig-r-karta); }
.rl-sz-miniatury .ig-render { border-radius: 18px; }
.rl-sz-wstep { display: grid; gap: 18px; align-content: start; padding-top: 4px; }
.rl-sz-plakietki { display: flex; flex-wrap: wrap; gap: 8px; }
.rl-sz-tytul { font-size: clamp(2.1rem, 1.3rem + 2.4vw, 3.4rem); line-height: 1.02; letter-spacing: -0.035em; }
.rl-sz-tytul:focus { outline: none; }
.rl-sz-haslo { font-size: var(--ig-t-lead); line-height: 1.55; color: var(--ig-tekst); }
.rl-sz-fakty { display: grid; margin: 4px 0 0; border-top: 1px solid var(--ig-linia); }
.rl-sz-fakt { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 18px; padding: 14px 0; border-bottom: 1px solid var(--ig-linia); }
.rl-sz-fakt dt { display: flex; align-items: flex-start; gap: 10px; font-family: var(--ig-f-display); font-weight: 500; font-size: 0.9375rem; line-height: 1.4; color: var(--ig-tusz); }
.rl-sz-fakt dt svg { flex: none; width: 20px; height: 20px; color: var(--k-tusz); }
.rl-sz-fakt dd { margin: 0; font-size: var(--ig-t-maly); line-height: 1.55; }
.rl-sz-fakt dd strong { color: var(--ig-tusz); }
.rl-sz-akcje { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; }

/* po dotknięciu + oś czasu */
.rl-sz-dotyk { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 16px; margin-top: clamp(36px, 4vw, 64px); }
.rl-sz-panel { display: grid; gap: 18px; align-content: start; padding: clamp(24px, 1rem + 1.8vw, 40px); border-radius: var(--ig-r-karta); background: var(--ig-papier); }
.rl-sz-panel--kolor { background: var(--k-mgla); }
.rl-sz-h { display: flex; align-items: center; gap: 12px; font-family: var(--ig-f-display); font-size: 1.125rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--ig-tusz); }
.rl-sz-h--duzy { font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); letter-spacing: -0.02em; }
.rl-sz-ikona { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--k-mgla); color: var(--k-tusz); }
.rl-sz-ikona svg { width: 22px; height: 22px; }
.rl-sz-panel--kolor .rl-sz-ikona { background: var(--k); color: var(--ig-tusz); }
.rl-okno[data-kolor="t"] .rl-sz-panel--kolor .rl-sz-ikona { background: var(--ig-t-tusz); color: var(--ig-bialy); }
.rl-sz-lead { font-size: var(--ig-t-lead); line-height: 1.6; color: var(--ig-tekst); }
.rl-sz-lead strong, .rl-sz-kafel strong, .rl-sz-kroki strong, .rl-sz-os strong { color: var(--ig-tusz); }
.rl-sz-pod { font-family: var(--ig-f-display); font-size: 1rem; font-weight: 600; letter-spacing: -0.005em; color: var(--ig-tusz); margin-top: 6px; }
.rl-sz-kroki { display: grid; gap: 0; counter-reset: rl-krok; }
.rl-sz-kroki li {
  position: relative; counter-increment: rl-krok;
  padding: 0 0 18px 48px; font-size: var(--ig-t-maly); line-height: 1.55;
}
.rl-sz-kroki li::before {
  content: counter(rl-krok); position: absolute; left: 0; top: -2px;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--ig-bialy); color: var(--ig-tusz);
  font-family: var(--ig-f-display); font-size: 0.875rem; font-weight: 600;
  box-shadow: inset 0 0 0 1.5px var(--k);
}
.rl-sz-kroki li:not(:last-child)::after { content: ""; position: absolute; left: 14.25px; top: 32px; bottom: 2px; width: 1.5px; background: rgba(14, 14, 20, 0.12); }
.rl-sz-kroki li:last-child { padding-bottom: 0; }
.rl-sz-os { display: grid; gap: 0; }
.rl-sz-os li { position: relative; display: grid; gap: 3px; padding: 0 0 20px 30px; }
.rl-sz-os li::before { content: ""; position: absolute; left: 0; top: 6px; width: 13px; height: 13px; border-radius: 50%; background: var(--k); box-shadow: 0 0 0 4px var(--ig-papier); }
.rl-sz-os li:not(:last-child)::after { content: ""; position: absolute; left: 5.75px; top: 22px; bottom: 0; width: 1.5px; background: rgba(14, 14, 20, 0.14); }
.rl-sz-os li:last-child { padding-bottom: 0; }
.rl-sz-os-kiedy { font-family: var(--ig-f-display); font-weight: 600; font-size: 0.9375rem; color: var(--ig-tusz); }
.rl-sz-os-co { font-size: var(--ig-t-maly); line-height: 1.55; }
.rl-sz-uwaga { font-size: var(--ig-t-drobny); color: var(--ig-cichy); padding-top: 12px; border-top: 1px solid var(--ig-linia); }

/* sześć kafli opisu (3 × 2) i trzy kafle parametrów */
.rl-sz-szesc, .rl-sz-trzy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.rl-sz-kafel {
  display: grid; gap: 14px; align-content: start;
  padding: clamp(22px, 1rem + 1vw, 30px);
  border-radius: var(--ig-r-kafel);
  background: var(--ig-bialy);
  box-shadow: inset 0 0 0 1px var(--ig-mgla);
  font-size: var(--ig-t-maly); line-height: 1.6;
}
.rl-sz-kafel p + p { margin-top: -2px; }
.rl-sz-kafel--papier { background: var(--ig-papier); box-shadow: none; }
.rl-sz-kafel--papier .rl-sz-ikona { background: var(--ig-bialy); }
.rl-sz-lista { display: grid; gap: 10px; }
.rl-sz-lista li { position: relative; padding-left: 20px; }
.rl-sz-lista li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--k); }
.rl-sz-wyroznik { font-family: var(--ig-f-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.35; color: var(--ig-tusz); }
.rl-sz-przypis { margin-top: 20px; font-size: var(--ig-t-drobny); color: var(--ig-cichy); }
.rl-sz-zapis { margin-top: clamp(32px, 3vw, 48px); }
@media (min-width: 768px) { .rl-sz-zapis .ig-zapis-akcje { align-self: end; padding-top: 72px; } }
.rl-nastepny {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 4px;
  color: inherit; font-family: var(--ig-f-display); font-weight: 400; font-size: 0.9375rem; text-align: left;
}
.rl-nastepny b { font-weight: 600; }
.rl-nastepny-krotko { display: none; }                   /* „Dalej:” — tylko telefon (sekcja 7) */
.rl-nastepny-pole {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px currentColor;
  transition: transform var(--ig-d-wolno) var(--ig-e-out);
}
.rl-nastepny-pole::before { content: ""; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--ig-strzalka) center / contain no-repeat; mask: var(--ig-strzalka) center / contain no-repeat; }
@media (hover: hover) { .rl-nastepny:hover .rl-nastepny-pole { transform: translateX(4px); } }
.rl-sz-zapis .ig-zapis-zdanie strong { color: inherit; }

/* =========================================================================
   6. TABLET (768–991 px) — te same trójki, ciaśniej
   ========================================================================= */
@media (min-width: 768px) and (max-width: 991px) {
  .rl-hero { min-height: 0; }
  .rl-hero-siatka { grid-template-columns: minmax(0, 1fr); }
  .rl-wachlarz { justify-self: center; max-width: 560px; }
  .rl-hero-tekst .ig-h-hero { max-width: 14ch; }
  .rl-katalog-glowa { grid-template-columns: minmax(0, 1fr); }
  .rl-grupa-glowa { display: grid; gap: 6px; }
  .rl-grupa-opis { text-align: left; }
  .rl-karta { padding: 8px; }
  .rl-karta-tresc { padding: 16px 8px 8px; }
  .rl-karta-nazwa { font-size: 1.1875rem; }
  .rl-karta-haslo { font-size: 0.875rem; }
  .rl-karta-prog { font-size: 0.75rem; }
  .rl-karta-strzalka { width: 38px; height: 38px; }
  /* pasek filtrów jak na telefonie: pas na całą szerokość przewijany palcem, pigułka na linii marginesu strony
     (przy 768 px pięć filtrów ledwo się mieści — nie może dochodzić do prawej krawędzi ekranu) */
  .rl-filtry-pas {
    margin-inline: calc(-1 * var(--ig-o-margines));
    padding: 4px var(--ig-o-margines);
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    pointer-events: auto;
  }
  .rl-filtry-pas::-webkit-scrollbar { display: none; }
  .rl-filtry { flex: none; }
  .rl-filtr { gap: 8px; padding: 0 12px; font-size: 0.875rem; }
  .rl-warstwy-siatka { grid-template-columns: minmax(0, 1fr); }
  .rl-warstwy-przyklejone { position: static; }
  .rl-znak { display: none; }
  .rl-sz-gora, .rl-sz-dotyk { grid-template-columns: minmax(0, 1fr); }
  .rl-sz-szesc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-sz-trzy { grid-template-columns: minmax(0, 1fr); }
  .rl-krok:not(:last-child)::after { display: none; }
}

/* =========================================================================
   7. TELEFON (≤ 767 px) — talie kart, pasek filtrów przewijany palcem, okno na cały ekran.
   Kolorowe pola 12 px od krawędzi, luźny tekst ≥ 20 px.
   ========================================================================= */
@media (max-width: 767px) {
  .rl-hero { min-height: 0; padding-top: calc(var(--ig-pasek-h) + var(--ig-pasek-gora) + 32px); padding-bottom: 40px; }
  .rl-hero-siatka { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  /* kolumna = szerokość ekranu minus marginesy (bez tego pigułka z nowrap rozpychała ją, a lead dochodził do krawędzi) */
  .rl-hero-tekst { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .rl-hero-akcje { width: 100%; }
  .rl-hero-akcje .ig-btn { width: 100%; }
  .rl-btn-duzy { min-height: 62px; padding-left: 24px; font-size: 1.0625rem; }
  .rl-btn-duzy .ig-btn-pole { width: 48px; height: 48px; }
  .rl-btn-duzy::before { right: 31px; }
  .rl-wachlarz { justify-self: center; width: calc(100% + 2 * var(--ig-o-margines) - 24px); margin-inline: calc(12px - var(--ig-o-margines)); max-width: none; aspect-ratio: 1 / 0.9; }
  .rl-wk { width: 54%; left: 23%; top: 14%; }
  .rl-wk--0 { --x: -30%; --y: -8%; --r: -7deg; }
  .rl-wk--2 { --x: 30%; --y: -4%; --r: 7deg; }
  .rl-wk-in { padding: 10px 6px 6px; gap: 8px; border-radius: 20px; }
  .rl-wk-render { border-radius: 15px; }
  .rl-wk-podpis { padding: 0 6px; }
  .rl-wk-linia { display: none; }
  .rl-wk-nazwa { font-size: 0.875rem; }
  .rl-konf { --s: 14px !important; }

  .rl-katalog-glowa { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rl-filtry-pas {
    top: calc(var(--ig-pasek-h) + 8px);
    margin-inline: calc(-1 * var(--ig-o-margines));
    padding: 4px var(--ig-o-margines);
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    pointer-events: auto;
  }
  .rl-filtry-pas::-webkit-scrollbar { display: none; }
  .rl-filtry { flex: none; }
  .rl-filtr { min-height: 44px; padding: 0 16px; font-size: 0.9375rem; }
  .rl-grupy { gap: 56px; margin-top: 32px; }
  .rl-grupa-glowa { display: grid; gap: 6px; padding-bottom: 14px; margin-bottom: 18px; }
  .rl-grupa-opis { text-align: left; }
  /* talia: karta = render na górze, równa wysokość */
  .rl-siatka.ig-talia > .rl-pole { flex: 0 0 min(80vw, 330px) !important; }
  .rl-karta { padding: 8px; }
  .rl-karta-tresc { padding: 16px 12px 10px; }
  .rl-karta-nazwa { font-size: 1.3125rem; }

  .rl-warstwy-siatka { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .rl-warstwy-przyklejone { position: static; gap: 18px; }
  .rl-znak { width: 112px; margin-top: 4px; }
  .rl-warstwy-lista { gap: 12px; margin-inline: calc(12px - var(--ig-o-margines)); }
  .rl-warstwa { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px 20px; }
  .rl-warstwa-ikona { width: 52px; height: 52px; border-radius: 16px; }
  .rl-warstwa-ikona svg { width: 24px; height: 24px; }
  .rl-warstwy.is-anim .rl-warstwa:not(.is-aktywna) { transform: none; }

  .rl-proces-glowa { text-align: left; justify-items: start; }
  .rl-proces-glowa .ig-lead { margin-inline: 0; }
  .rl-kroki { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-inline: calc(12px - var(--ig-o-margines)); }
  .rl-krok { padding: 24px 20px; }
  .rl-krok:not(:last-child)::after { display: none; }

  /* okno: pełny ekran, wjazd od dołu */
  .rl-okno { padding: 0; }
  .rl-okno-ramka { width: 100%; height: 100%; max-height: none; border-radius: 0; box-shadow: none; }
  .rl-okno[open] .rl-okno-ramka { animation-name: rl-okno-wjazd-tel; }
  .rl-okno.is-zamyka .rl-okno-ramka { animation-name: rl-okno-wyjazd-tel; }
  .rl-okno-pasek { padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px 20px; }
  .rl-okno-pasek { gap: 10px; }
  .rl-okno-przyciski { gap: 6px; }
  .rl-okno-zamknij { margin-left: 2px; }
  .rl-okno-tresc { padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .rl-sz-gora { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .rl-sz-galeria { margin-inline: -8px; gap: 8px; }
  .rl-sz-miniatury { gap: 8px; }
  .rl-sz-glowny { border-radius: 20px; }
  .rl-sz-miniatury .ig-render { border-radius: 14px; }
  .rl-sz-wstep { gap: 16px; }
  .rl-sz-fakt { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .rl-sz-akcje .ig-btn { width: 100%; }
  .rl-sz-dotyk { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 32px; margin-inline: -8px; }
  .rl-sz-panel { padding: 24px 20px; }
  .rl-sz-szesc, .rl-sz-trzy { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; margin-inline: -8px; }
  .rl-sz-kafel { padding: 22px 20px; }
  .rl-sz-zapis { margin-inline: -8px; }
  .rl-nastepny { width: 100%; justify-content: space-between; }
  /* „Dalej: <nazwa>” zawsze w jednej linii; najdłuższa nazwa w razie potrzeby kończy się wielokropkiem */
  .rl-nastepny-tekst { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rl-nastepny-dlugo { display: none; }
  .rl-nastepny-krotko { display: inline; }
}
/* najwęższe telefony (320–374 px): pigułki mieszczą się razem z polem strzałki */
@media (max-width: 374px) {
  .rl-btn-opcja { display: none; }                      /* „Zaprojektuj prezent” zamiast „Zaprojektuj swój prezent” */
  .rl-sz-zapis .ig-btn { padding-left: 18px; gap: 12px; font-size: 0.9375rem; }
}
@keyframes rl-okno-wjazd-tel { from { transform: translateY(100%); } to { transform: none; } }
@keyframes rl-okno-wyjazd-tel { to { transform: translateY(100%); } }

/* =========================================================================
   8. OGRANICZONY RUCH — karty i okno bez przesunięć (wspolne.css skraca czasy)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .rl-wk-wjazd, .rl-konf { animation: none !important; }
  .rl-karta, .rl-karta::before, .rl-wk-in { transition: none; }
  .rl-okno[open] .rl-okno-ramka, .rl-okno.is-zamyka .rl-okno-ramka { animation: none; }
}