/* IMAGIFT — wspólna rama stron (DESIGN.md v1.0). Wymaga: tokeny.css (zmienne --ig-*).
   Spis: 1 baza · 2 typografia · 3 układ i okna · 4 kolory-zakresy · 5 przyciski · 6 pasek i menu ·
         7 duże CTA (.ig-zapis) · 8 slot renderu (.ig-render) · 9 kafle (.ig-kafle/.ig-kafel) ·
         10 talia (telefon) · 11 dok i arkusz (telefon) · 12 stopka · 13 animacje wejścia · 14 ograniczony ruch
   Zasady: zero wersalików i kursywy, bez napisów-ozdobników. Style telefonu wyłącznie w @media (max-width: 767px). */

:root {
  --ig-strzalka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --ig-ptaszek: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* =========================================================================
   1. BAZA
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--ig-pasek-h) + var(--ig-pasek-gora) + 16px);
  overflow-x: clip;
  background: var(--ig-bialy);
  color-scheme: light;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--ig-bialy);
  color: var(--ig-tekst);
  font-family: var(--ig-f-tekst);
  font-size: var(--ig-t-tekst);
  line-height: var(--ig-lh-tekst);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video, canvas, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote, dl, dd { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
em, i, cite, dfn, address, var { font-style: normal; }
strong, b { font-weight: 600; }
hr { border: 0; height: 1px; background: var(--ig-linia); margin: 0; }
::selection { background: var(--ig-i); color: var(--ig-tusz); }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--ig-fokus); outline-offset: 3px; border-radius: 6px; }
:focus:not(:focus-visible) { outline: none; }

.ig-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ig-skok {
  position: fixed; left: 16px; top: -80px; z-index: 1000;
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px;
  border-radius: var(--ig-r-pigulka); background: var(--ig-tusz); color: var(--ig-bialy);
  font-weight: 600; transition: transform var(--ig-d-srednio) var(--ig-e-out);
}
.ig-skok:focus { transform: translateY(96px); }

/* =========================================================================
   2. TYPOGRAFIA — Poppins 400 z akcentem 600 (<b>), tracking -0,02 em, wyważone łamanie
   ========================================================================= */
h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--ig-f-display);
  font-weight: 400;
  font-style: normal;
  color: var(--ig-tusz);
  letter-spacing: var(--ig-tracking);
  text-wrap: balance;
  overflow-wrap: break-word;
  min-width: 0;
}
h1 { font-size: var(--ig-t-h1); line-height: 1.04; }
h2 { font-size: var(--ig-t-h2); line-height: 1.06; }
h3 { font-size: var(--ig-t-h3); line-height: 1.25; letter-spacing: -0.01em; }
h4 { font-size: var(--ig-t-h4); line-height: 1.35; letter-spacing: -0.005em; font-weight: 500; }
:is(h1, h2, h3) b, :is(h1, h2, h3) strong { font-weight: 600; }
h3 b, h4 b { font-weight: 600; }
.ig-h-hero { font-size: var(--ig-t-hero); line-height: 1.02; letter-spacing: -0.03em; }
.ig-h-mega { font-size: var(--ig-t-mega); line-height: 0.98; letter-spacing: -0.04em; }
.ig-lead { font-size: var(--ig-t-lead); line-height: 1.6; color: var(--ig-tekst); max-width: 60ch; }
.ig-lead strong, .ig-lead b { color: var(--ig-tusz); }
.ig-cichy { color: var(--ig-cichy); }
.ig-maly { font-size: var(--ig-t-maly); line-height: 1.55; }
.ig-drobny { font-size: var(--ig-t-drobny); line-height: 1.5; color: var(--ig-cichy); }
.ig-tekst-wiersz { max-width: var(--ig-szer-tekst); }
/* tekst kolorowy na bieli — zawsze wersje -tusz (AA) */
.ig-c-g { color: var(--ig-g-tusz); } .ig-c-i { color: var(--ig-i-tusz); }
.ig-c-f { color: var(--ig-f-tusz); } .ig-c-t { color: var(--ig-t-tusz); }
.ig-c-k { color: var(--k-tusz, var(--ig-tusz)); }
/* kropka w kolorze (znak „prezentu” w tekstach, listach, nagłówkach kolumn) */
.ig-kropka { display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--k, var(--ig-g)); flex: none; vertical-align: 0.08em; }
/* wstążka G·I·F·T — cienka linia z czterech odcinków */
.ig-wstazka { display: block; height: 4px; border-radius: 4px; background: var(--ig-wstazka); }
.ig-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-weight: 600; color: var(--ig-tusz);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
  text-decoration-color: var(--k, var(--ig-g));
  transition: text-decoration-color var(--ig-d-srednio) var(--ig-e-out), gap var(--ig-d-srednio) var(--ig-e-out);
}
.ig-link::after { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ig-strzalka) center / contain no-repeat; mask: var(--ig-strzalka) center / contain no-repeat; }
@media (hover: hover) { .ig-link:hover { gap: 14px; text-decoration-color: var(--ig-tusz); } }

/* =========================================================================
   3. UKŁAD I OKNA
   ========================================================================= */
.ig-wrap { width: min(var(--ig-szer-max), 100% - 2 * var(--ig-o-margines)); margin-inline: auto; }
.ig-wrap--waski { width: min(920px, 100% - 2 * var(--ig-o-margines)); }
.ig-wrap--szeroki { width: min(1440px, 100% - 2 * var(--ig-o-margines)); }
.ig-sekcja { position: relative; padding-block: var(--ig-o-sekcja); isolation: isolate; }
.ig-tresc-start { padding-top: calc(var(--ig-pasek-h) + var(--ig-pasek-gora) + 24px); }   /* pierwsza treść podstrony pod paskiem */

/* okno — sekcja-pole 24 px od krawędzi ekranu (telefon 12 px), promień 28; nigdy od krawędzi do krawędzi */
.ig-okno {
  position: relative;
  isolation: isolate;
  overflow: clip;
  margin: var(--ig-okno-odstep) var(--ig-okno-wciecie);
  border-radius: var(--ig-r-okno);
  background: var(--ig-papier);
  padding-block: var(--ig-o-sekcja);
}
.ig-okno--bialy { background: var(--ig-bialy); box-shadow: inset 0 0 0 1px var(--ig-linia); }
.ig-okno--g { background: var(--ig-g-mgla); }
.ig-okno--i { background: var(--ig-i-mgla); }
.ig-okno--f { background: var(--ig-f-mgla); }
.ig-okno--t { background: var(--ig-t-mgla); }
.ig-okno--ciasne { padding-block: clamp(48px, 2rem + 4vw, 96px); }
/* okno kończy się dużym CTA: pole CTA dosunięte do dołu okna (jak karta w karcie) */
.ig-okno:has(> .ig-wrap > .ig-zapis:last-child) { padding-bottom: var(--ig-o-margines); }
@media (max-width: 767px) { .ig-okno:has(> .ig-wrap > .ig-zapis:last-child) { padding-bottom: 12px; } }
.ig-okno + .ig-okno { margin-top: 0; }
/* biała sekcja kończy się dużym CTA: krótszy dół, żeby odstęp CTA → następny nagłówek był taki sam jak po oknie
   (bez tego pod CTA zostawało pełne --ig-o-sekcja + odstęp + górne wcięcie okna, czyli ~325 px pustki przy 1440) */
.ig-sekcja:not(.ig-okno):has(> .ig-wrap > .ig-zapis:last-child) { padding-bottom: clamp(48px, 2rem + 3vw, 96px); }

/* =========================================================================
   4. KOLORY-ZAKRESY — ustawiają zmienne --k* dla potomków (przyciski, kropki, kafle, linki)
   --k = kolor bazowy · --k-tusz = do tekstu (AA) · --k-mgla = tło · --k-nast = następny w palecie
   --k-zal / --k-zal-na = zalanie (pełne tło) i tekst na nim (AA)
   ========================================================================= */
.ig-kolor-g, .ig-okno--g, .ig-zapis--g, [data-kolor="g"] { --k: var(--ig-g); --k-tusz: var(--ig-g-tusz); --k-mgla: var(--ig-g-mgla); --k-nast: var(--ig-i); --k-zal: var(--ig-g); --k-zal-na: var(--ig-tusz); }
.ig-kolor-i, .ig-okno--i, .ig-zapis--i, [data-kolor="i"] { --k: var(--ig-i); --k-tusz: var(--ig-i-tusz); --k-mgla: var(--ig-i-mgla); --k-nast: var(--ig-f); --k-zal: var(--ig-i); --k-zal-na: var(--ig-tusz); }
.ig-kolor-f, .ig-okno--f, .ig-zapis--f, [data-kolor="f"] { --k: var(--ig-f); --k-tusz: var(--ig-f-tusz); --k-mgla: var(--ig-f-mgla); --k-nast: var(--ig-t); --k-zal: var(--ig-f); --k-zal-na: var(--ig-tusz); }
.ig-kolor-t, .ig-okno--t, .ig-zapis--t, [data-kolor="t"] { --k: var(--ig-t); --k-tusz: var(--ig-t-tusz); --k-mgla: var(--ig-t-mgla); --k-nast: var(--ig-g); --k-zal: var(--ig-t-tusz); --k-zal-na: var(--ig-bialy); }

/* =========================================================================
   5. PRZYCISKI — pigułka tusz + okrągłe pole strzałki w kolorze palety.
   Przy najechaniu kolor rozlewa się z pola na całą pigułkę („rozpakowanie”), strzałka idzie w prawo.
   Znacznik: <a class="ig-btn" href="brief.html"><span class="ig-btn-tekst">Zaprojektuj prezent</span><span class="ig-btn-pole" aria-hidden="true"></span></a>
   ========================================================================= */
.ig-btn {
  --b-k: var(--btn-k, var(--k, var(--ig-g)));
  --b-zal: var(--btn-zal, var(--k-zal, var(--ig-g)));
  --b-zal-na: var(--btn-zal-na, var(--k-zal-na, var(--ig-tusz)));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 18px;                                     /* napis ≥ 16 px od pola */
  min-height: 56px;
  padding: 6px 6px 6px 28px;
  border-radius: var(--ig-r-pigulka);
  background: var(--ig-tusz);
  color: var(--ig-bialy);
  font-family: var(--ig-f-display);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--ig-d-wolno) var(--ig-e-out), box-shadow var(--ig-d-wolno) var(--ig-e-out), transform var(--ig-d-srednio) var(--ig-e-out);
}
.ig-btn::before {
  content: ""; position: absolute; z-index: -1;
  right: 28px; top: 50%;
  width: 300%; aspect-ratio: 1; border-radius: 50%;
  background: var(--b-zal);
  transform: translate(50%, -50%) scale(0);
  transition: transform 0.7s var(--ig-e-out);
}
.ig-btn-tekst { position: relative; }
.ig-btn-pole {
  position: relative;
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  border-radius: 50%;
  background: var(--b-k);
  color: var(--ig-tusz);
  transition: background-color var(--ig-d-wolno) var(--ig-e-out), color var(--ig-d-wolno) var(--ig-e-out);
}
.ig-btn-pole::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 var(--ig-d-wolno) var(--ig-e-out);
}
@media (hover: hover) {
  .ig-btn:hover { color: var(--b-zal-na); }
  .ig-btn:hover::before { transform: translate(50%, -50%) scale(1); }
  .ig-btn:hover .ig-btn-pole { background: var(--ig-bialy); color: var(--ig-tusz); }
  .ig-btn:hover .ig-btn-pole::before { transform: translateX(3px); }
}
.ig-btn:active { transform: scale(0.98); }
.ig-btn[disabled], .ig-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
/* jasna pigułka — biała z cienką linią (na papierze, mgiełkach i w zalanych kolorem polach) */
.ig-btn--jasny { background: var(--ig-bialy); color: var(--ig-tusz); box-shadow: inset 0 0 0 1px var(--ig-linia-mocna); }
@media (hover: hover) {
  .ig-btn--jasny:hover { box-shadow: inset 0 0 0 1px transparent; }
}
/* kolor pola (domyślnie kolor zakresu --k, a bez zakresu malina) */
.ig-btn--kolor-g { --btn-k: var(--ig-g); --btn-zal: var(--ig-g); --btn-zal-na: var(--ig-tusz); }
.ig-btn--kolor-i { --btn-k: var(--ig-i); --btn-zal: var(--ig-i); --btn-zal-na: var(--ig-tusz); }
.ig-btn--kolor-f { --btn-k: var(--ig-f); --btn-zal: var(--ig-f); --btn-zal-na: var(--ig-tusz); }
.ig-btn--kolor-t { --btn-k: var(--ig-t); --btn-zal: var(--ig-t-tusz); --btn-zal-na: var(--ig-bialy); }
.ig-btn--maly { min-height: 46px; gap: 16px; padding: 5px 5px 5px 20px; font-size: 0.9375rem; }
.ig-btn--maly .ig-btn-pole { width: 36px; height: 36px; }
.ig-btn--maly .ig-btn-pole::before { width: 16px; height: 16px; }
.ig-btn--maly::before { right: 23px; }
.ig-btn--pelny { display: flex; width: 100%; }

/* pigułka obrysowa bez pola (akcje drugiego rzędu, np. „Zaloguj się”) */
.ig-btn-obrys {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 20px;
  border-radius: var(--ig-r-pigulka);
  box-shadow: inset 0 0 0 1px var(--ig-linia-mocna);
  color: var(--ig-tusz); font-family: var(--ig-f-display); font-weight: 500; font-size: 0.9375rem; white-space: nowrap;
  transition: box-shadow var(--ig-d-srednio) var(--ig-e-out), background-color var(--ig-d-srednio) var(--ig-e-out);
}
@media (hover: hover) { .ig-btn-obrys:hover { box-shadow: inset 0 0 0 1.5px var(--ig-tusz); } }

/* =========================================================================
   6. PASEK MENU — przed przewinięciem karta 24 px od brzegu, po przewinięciu biała szyba.
   Treść paska stoi zawsze na linii .ig-wrap; zmienia się tylko tło (pseudo-element) — bez skoków.
   ========================================================================= */
.ig-pasek {
  position: fixed; inset: 0 0 auto; z-index: 100;
  --pasek-x: max(var(--ig-okno-wciecie), calc((100% - var(--ig-szer-max)) / 2 - 28px));
  pointer-events: none;
}
.ig-pasek::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: var(--ig-pasek-gora); left: var(--pasek-x); right: var(--pasek-x); height: var(--ig-pasek-h);
  border-radius: var(--ig-r-okno);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px var(--ig-linia), var(--ig-cien-1);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
  transition: top 0.6s var(--ig-e-out), left 0.6s var(--ig-e-out), right 0.6s var(--ig-e-out), border-radius 0.6s var(--ig-e-out), box-shadow 0.6s var(--ig-e-out), background-color 0.6s var(--ig-e-out);
}
.ig-pasek.is-przewiniety::before {
  top: 0; left: 0; right: 0; border-radius: 0;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 1px 0 var(--ig-linia);
}
.ig-pasek-in {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--ig-o-5);
  width: min(var(--ig-szer-max), 100% - 2 * var(--ig-o-margines));
  height: var(--ig-pasek-h);
  margin: var(--ig-pasek-gora) auto 0;
  transition: margin-top 0.6s var(--ig-e-out);
}
.ig-pasek.is-przewiniety .ig-pasek-in { margin-top: 0; }
.ig-logo { display: inline-flex; align-items: center; flex: none; padding: 6px 2px; margin-left: -2px; border-radius: 8px; }
.ig-logo .ig-logo-svg { height: 30px; width: auto; overflow: visible; }
.ig-nav { margin-inline: auto; }
.ig-nav ul { display: flex; gap: clamp(10px, 1.6vw, 30px); }
.ig-nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
  font-size: 0.9375rem; font-weight: 500; color: var(--ig-tekst); white-space: nowrap;
  transition: color var(--ig-d-srednio) var(--ig-e-out);
}
/* pod linkiem kropka w kolorze z palety (G I F T G I) */
.ig-nav a::after {
  content: ""; position: absolute; left: 50%; bottom: 4px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
  background: var(--k, var(--ig-g)); transform: scale(0); transition: transform var(--ig-d-wolno) var(--ig-e-out);
}
.ig-nav li:nth-child(4n+1) a { --k: var(--ig-g); }
.ig-nav li:nth-child(4n+2) a { --k: var(--ig-i); }
.ig-nav li:nth-child(4n+3) a { --k: var(--ig-f); }
.ig-nav li:nth-child(4n+4) a { --k: var(--ig-t); }
@media (hover: hover) { .ig-nav a:hover { color: var(--ig-tusz); } .ig-nav a:hover::after { transform: scale(1); } }
.ig-nav a[aria-current] { color: var(--ig-tusz); }
.ig-nav a[aria-current]::after { transform: scale(1); }
.ig-pasek-akcje { display: flex; align-items: center; gap: var(--ig-o-3); flex: none; }
.ig-zaloguj { min-height: 44px; }
.ig-hamburger {
  display: none; place-items: center; gap: 0;
  width: 46px; height: 46px; 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);
}
.ig-hamburger i { grid-area: 1 / 1; display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.ig-hamburger i:first-of-type { transform: translateY(-3.5px); }
.ig-hamburger i:last-of-type { transform: translateY(3.5px); width: 12px; justify-self: start; margin-left: 14px; }
@media (hover: hover) { .ig-hamburger:hover { background: var(--ig-tusz); color: var(--ig-bialy); } }
@media (max-width: 1199px) {
  .ig-nav ul { gap: clamp(8px, 1.2vw, 18px); }
  .ig-nav a { font-size: 0.875rem; }
}
@media (max-width: 991px) {
  .ig-nav, .ig-zaloguj { display: none; }
}
@media (max-width: 767px) {
  .ig-pasek-cta { display: none; }   /* na telefonie brief jest w doku i w menu */
  .ig-pasek-in { width: calc(100% - 2 * (var(--ig-okno-wciecie) + 14px)); }   /* treść 14 px od krawędzi karty */
}
@media (max-width: 991px) {
  .ig-hamburger { display: grid; }
  .ig-pasek-akcje { margin-left: auto; }
  .ig-logo { min-height: 44px; }   /* cel dotyku (pasek i menu) */
  .ig-logo .ig-logo-svg { height: 27px; }
}

/* menu na telefon i tablet — biały arkusz rozwija się kołem od przycisku */
.ig-menu {
  position: fixed; inset: 0; z-index: 200;
  display: grid; grid-template-rows: auto 1fr auto; gap: 24px;
  padding: var(--ig-pasek-gora) 0 calc(24px + env(safe-area-inset-bottom, 0px));
  background: var(--ig-bialy);
  color: var(--ig-tusz);
  overflow-y: auto; overscroll-behavior: contain;
  clip-path: circle(0% at calc(100% - 48px) 44px);
  visibility: hidden;
  transition: clip-path 0.7s var(--ig-e-mocny), visibility 0s linear 0.7s;
}
.ig-menu.is-open { clip-path: circle(150% at calc(100% - 48px) 44px); visibility: visible; transition: clip-path 0.8s var(--ig-e-mocny); }
.ig-menu > * { width: min(var(--ig-szer-max), 100% - 2 * var(--ig-o-margines)); margin-inline: auto; }
@media (max-width: 767px) { .ig-menu > * { width: calc(100% - 2 * (var(--ig-okno-wciecie) + 14px)); } }
.ig-menu-gora { display: flex; justify-content: space-between; align-items: center; min-height: var(--ig-pasek-h); }
.ig-menu-gora .ig-logo-svg { height: 27px; width: auto; }
.ig-menu-zamknij {
  position: relative; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ig-tusz); color: var(--ig-bialy);
}
.ig-menu-zamknij::before, .ig-menu-zamknij::after { content: ""; grid-area: 1 / 1; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
.ig-menu-zamknij::after { transform: rotate(-45deg); }
.ig-menu nav { align-self: center; }
.ig-menu nav ul { display: grid; gap: 4px; }
.ig-menu nav a {
  display: flex; align-items: center; gap: 18px; padding: 6px 0;
  font-family: var(--ig-f-display); font-weight: 400; letter-spacing: -0.03em;
  font-size: clamp(2rem, 1.3rem + 3.6vw, 3.2rem); line-height: 1.12; color: var(--ig-tusz);
}
.ig-menu nav a::before { content: ""; width: 0.32em; height: 0.32em; border-radius: 50%; background: var(--k, var(--ig-g)); flex: none; transition: transform var(--ig-d-wolno) var(--ig-e-out); }
.ig-menu nav li:nth-child(4n+1) a { --k: var(--ig-g); }
.ig-menu nav li:nth-child(4n+2) a { --k: var(--ig-i); }
.ig-menu nav li:nth-child(4n+3) a { --k: var(--ig-f); }
.ig-menu nav li:nth-child(4n+4) a { --k: var(--ig-t); }
@media (hover: hover) { .ig-menu nav a:hover::before { transform: scale(1.5); } }
.ig-menu nav a[aria-current] { font-weight: 600; }
.ig-menu.is-open nav li { animation: ig-menu-wjazd 0.7s var(--ig-e-out) both; animation-delay: calc(var(--i, 0) * 55ms + 200ms); }
@keyframes ig-menu-wjazd { from { opacity: 0; transform: translateY(26px); } }
.ig-menu-dol { display: grid; gap: 12px; }
.ig-menu-dol .ig-btn { width: 100%; }
.ig-menu-dol .ig-btn-obrys { width: 100%; min-height: 52px; }
.ig-menu-kontakt { font-size: var(--ig-t-maly); color: var(--ig-cichy); text-align: center; }
.ig-menu-kontakt a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ig-tusz); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ig-mgla); }
@media (min-width: 992px) { .ig-menu { display: none !important; } }
body.ig-blokada { overflow: hidden; }

/* =========================================================================
   7. DUŻE CTA NA KOŃCU SEKCJI — .ig-zapis
   <div class="ig-zapis ig-zapis--f"><div class="ig-zapis-tresc"><h3 class="ig-zapis-tytul">…<b>…</b></h3>
   <p class="ig-zapis-zdanie">…</p></div><a class="ig-btn" …>…</a></div>
   Warianty: domyślny (papier) · --bialy · --g/--i/--f/--t (mgiełka) · + --pelny (zalany kolorem; t = ciemny błękit z białym tekstem)
   ========================================================================= */
.ig-zapis {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--ig-o-6) var(--ig-o-7);
  margin-top: clamp(56px, 2rem + 4vw, 104px);
  padding: clamp(32px, 1.2rem + 3vw, 64px) clamp(28px, 1rem + 3.4vw, 72px);
  border-radius: var(--ig-r-okno);
  background: var(--ig-papier);
  color: var(--ig-tekst);
}
.ig-okno .ig-zapis { background: var(--ig-bialy); }
.ig-zapis--bialy, .ig-okno .ig-zapis--bialy { background: var(--ig-bialy); box-shadow: inset 0 0 0 1px var(--ig-linia); }
.ig-zapis--g, .ig-zapis--i, .ig-zapis--f, .ig-zapis--t,
.ig-okno .ig-zapis--g, .ig-okno .ig-zapis--i, .ig-okno .ig-zapis--f, .ig-okno .ig-zapis--t { background: var(--k-mgla); }
.ig-okno--g .ig-zapis--g, .ig-okno--i .ig-zapis--i, .ig-okno--f .ig-zapis--f, .ig-okno--t .ig-zapis--t { background: var(--ig-bialy); }
.ig-zapis-tresc { display: grid; gap: 14px; max-width: 46rem; position: relative; z-index: 1; }
.ig-zapis-tytul {
  font-family: var(--ig-f-display); font-weight: 400; color: var(--ig-tusz);
  font-size: clamp(1.75rem, 1.1rem + 2.1vw, 2.9rem); line-height: 1.08; letter-spacing: -0.025em;
}
.ig-zapis-zdanie { font-size: var(--ig-t-lead); line-height: 1.55; color: var(--ig-tekst); max-width: 52ch; }
.ig-zapis > .ig-btn, .ig-zapis-akcje { position: relative; z-index: 1; justify-self: end; }
.ig-zapis-akcje { display: grid; gap: 10px; justify-items: end; }
.ig-zapis-akcje .ig-drobny { text-align: right; }
/* konfetti w rogu: kropki w kolorze zakresu + sąsiednie barwy palety */
.ig-zapis::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: 24px; top: 22px; width: 190px; height: 120px;
  background:
    radial-gradient(circle at calc(100% - 30px) 30px, var(--k, var(--ig-g)) 0 29.5px, transparent 30px),
    radial-gradient(circle at calc(100% - 92px) 14px, var(--k-nast, var(--ig-i)) 0 9.5px, transparent 10px),
    radial-gradient(circle at calc(100% - 72px) 66px, var(--k, var(--ig-g)) 0 5.5px, transparent 6px),
    radial-gradient(circle at calc(100% - 128px) 48px, var(--ig-linia-mocna) 0 3.5px, transparent 4px);
}
.ig-zapis.ig-zapis--pelny { background: var(--k-zal, var(--ig-g)); color: var(--k-zal-na, var(--ig-tusz)); }
.ig-zapis--pelny .ig-zapis-tytul, .ig-zapis--pelny .ig-zapis-zdanie, .ig-zapis--pelny .ig-drobny { color: var(--k-zal-na, var(--ig-tusz)); }
.ig-zapis--pelny::after {
  background:
    radial-gradient(circle at calc(100% - 30px) 30px, var(--ig-bialy) 0 29.5px, transparent 30px),
    radial-gradient(circle at calc(100% - 92px) 14px, var(--k-nast, var(--ig-i)) 0 9.5px, transparent 10px),
    radial-gradient(circle at calc(100% - 72px) 66px, rgba(255, 255, 255, 0.7) 0 5.5px, transparent 6px),
    radial-gradient(circle at calc(100% - 128px) 48px, rgba(255, 255, 255, 0.45) 0 3.5px, transparent 4px);
}
.ig-zapis--pelny .ig-btn { --btn-k: var(--k-nast, var(--ig-i)); }
/* tablet 768–991 px: w dwóch kolumnach tytuł ściskał się do 4–5 linii — tekst na całą szerokość, pigułka pod nim;
   po prawej miejsce na konfetti w rogu (tylko standardowy układ: treść jako pierwsze dziecko) */
@media (min-width: 768px) and (max-width: 991px) {
  .ig-zapis { grid-template-columns: minmax(0, 1fr); }
  .ig-zapis > .ig-btn, .ig-zapis-akcje { justify-self: start; }
  .ig-zapis-akcje { justify-items: start; }
  .ig-zapis-akcje .ig-drobny { text-align: left; }
  .ig-zapis > .ig-zapis-tresc:first-child { padding-right: 170px; }
}

/* =========================================================================
   8. SLOT RENDERU — <figure class="ig-render" data-render="realizacje/nazwa" data-proporcje="4/3" data-opis="…" [data-alt="…"] [data-kolor="g"]>
   Brak pliku = zastępnik z kropek (rysuje wspolne.js; bez JS — wzór kropek z CSS). ?rendery=1 → specyfikacja slotu.
   ========================================================================= */
.ig-render {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--ig-r-karta);
  background: var(--ig-papier);
}
.ig-render[data-proporcje="1/1"] { aspect-ratio: 1 / 1; }
.ig-render[data-proporcje="16/9"] { aspect-ratio: 16 / 9; }
.ig-render[data-proporcje="3/4"] { aspect-ratio: 3 / 4; }
.ig-render[data-proporcje="21/9"] { aspect-ratio: 21 / 9; }
.ig-render[data-proporcje="3/2"] { aspect-ratio: 3 / 2; }
.ig-render[data-proporcje="4/5"] { aspect-ratio: 4 / 5; }
.ig-okno .ig-render { background: var(--ig-bialy); }
/* bez JS: delikatny raster kropek */
.ig-render::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, var(--ig-mgla) 0 2px, transparent 2.5px) 0 0 / 18px 18px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 20%, transparent 75%);
  mask-image: radial-gradient(70% 70% at 50% 50%, #000 20%, transparent 75%);
}
.ig-render.is-zastepnik::before, .ig-render.is-jest::before { display: none; }
.ig-render-zastepnik { position: absolute; inset: 0; z-index: 0; transition: opacity 0.8s var(--ig-e-out); }
.ig-render-zastepnik canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ig-render-obraz {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; max-width: none; object-fit: cover;
  opacity: 0; transform: scale(1.03);
  transition: opacity 0.9s var(--ig-e-out), transform 1.2s var(--ig-e-out);
}
.ig-render.is-jest .ig-render-obraz { opacity: 1; transform: none; }
.ig-render.is-jest .ig-render-zastepnik { opacity: 0; }
.ig-render > figcaption { position: absolute; left: 16px; bottom: 14px; z-index: 2; font-size: var(--ig-t-drobny); color: var(--ig-cichy); }
.ig-render-spec { display: none; }
/* tryb specyfikacji (?rendery=1): ramka i karta z nazwą pliku, wymiarami i opisem */
.ig-tryb-rendery .ig-render::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border: 2px dashed var(--ig-t); border-radius: inherit; }
.ig-tryb-rendery .ig-render.is-jest::after { border-color: var(--ig-f); }
.ig-tryb-rendery .ig-render-spec {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3;
  display: grid; gap: 4px; max-height: calc(100% - 24px); overflow: auto;
  padding: 12px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.95); box-shadow: var(--ig-cien-1), 0 0 0 1px var(--ig-linia);
  font-family: var(--ig-f-tekst); font-size: 0.8125rem; line-height: 1.45; color: var(--ig-tekst);
}
.ig-render-spec b { font-weight: 600; color: var(--ig-tusz); overflow-wrap: anywhere; }
.ig-render-spec .ig-render-stan { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ig-t-tusz); }
.ig-render-spec .ig-render-stan::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ig-t); }
.ig-render.is-jest .ig-render-stan { color: var(--ig-f-tusz); }
.ig-render.is-jest .ig-render-stan::before { background: var(--ig-f); }
.ig-render.is-nowy .ig-render-stan { color: var(--ig-i-tusz); }
.ig-render.is-nowy .ig-render-stan::before { background: var(--ig-i); }

/* =========================================================================
   9. KAFLE — zasada trójek: 3, 6, 9 lub 12 równych kafli. data-ile="6" (wspolne.js uzupełnia sam i ostrzega w konsoli).
   Komputer/tablet: 3 kolumny, wszystkie rzędy równej wysokości. Telefon: 1 kolumna; .ig-kafle--male + parzysta liczba = 2 kolumny;
   [data-ig-talia] na .ig-kafle = talia kart.
   ========================================================================= */
.ig-kafle {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--ig-kafle-odstep, 20px);
}
.ig-kafle--luzne { grid-auto-rows: auto; }
.ig-kafel {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
  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);
  color: var(--ig-tekst);
  transition: background-color var(--ig-d-wolno) var(--ig-e-out), box-shadow var(--ig-d-wolno) var(--ig-e-out), transform var(--ig-d-wolno) var(--ig-e-out);
}
.ig-okno .ig-kafel { box-shadow: none; }
.ig-kafel--papier { background: var(--ig-papier); box-shadow: none; }
/* kolor kafla: data-kolor="g|i|f|t" albo kolejno G I F T */
.ig-kafle > :nth-child(4n+1) { --k: var(--ig-g); --k-tusz: var(--ig-g-tusz); --k-mgla: var(--ig-g-mgla); }
.ig-kafle > :nth-child(4n+2) { --k: var(--ig-i); --k-tusz: var(--ig-i-tusz); --k-mgla: var(--ig-i-mgla); }
.ig-kafle > :nth-child(4n+3) { --k: var(--ig-f); --k-tusz: var(--ig-f-tusz); --k-mgla: var(--ig-f-mgla); }
.ig-kafle > :nth-child(4n+4) { --k: var(--ig-t); --k-tusz: var(--ig-t-tusz); --k-mgla: var(--ig-t-mgla); }
.ig-kafle > [data-kolor="g"] { --k: var(--ig-g); --k-tusz: var(--ig-g-tusz); --k-mgla: var(--ig-g-mgla); }
.ig-kafle > [data-kolor="i"] { --k: var(--ig-i); --k-tusz: var(--ig-i-tusz); --k-mgla: var(--ig-i-mgla); }
.ig-kafle > [data-kolor="f"] { --k: var(--ig-f); --k-tusz: var(--ig-f-tusz); --k-mgla: var(--ig-f-mgla); }
.ig-kafle > [data-kolor="t"] { --k: var(--ig-t); --k-tusz: var(--ig-t-tusz); --k-mgla: var(--ig-t-mgla); }
.ig-kafel-ikona {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; margin-bottom: 6px;
  background: var(--k-mgla, var(--ig-papier)); color: var(--k-tusz, var(--ig-tusz));
}
.ig-kafel-ikona svg { width: 24px; height: 24px; }
.ig-kafel-tytul { font-family: var(--ig-f-display); font-size: 1.1875rem; font-weight: 500; line-height: 1.28; letter-spacing: -0.012em; color: var(--ig-tusz); text-wrap: balance; }
.ig-kafel-opis { font-size: var(--ig-t-maly); line-height: 1.55; color: var(--ig-tekst); }
.ig-kafel-dol { margin-top: auto; padding-top: 8px; font-size: var(--ig-t-drobny); color: var(--ig-cichy); }
a.ig-kafel { text-decoration: none; }
@media (hover: hover) {
  a.ig-kafel:hover, .ig-kafel--wybor:hover { box-shadow: inset 0 0 0 1.5px var(--k, var(--ig-tusz)), var(--ig-cien-1); transform: translateY(-2px); }
}

/* kafel wyboru (kreator): <label class="ig-kafel ig-kafel--wybor"><input type="radio|checkbox" class="ig-kafel-pole" …>
   <span class="ig-kafel-znak" aria-hidden="true"></span><span class="ig-kafel-tytul">…</span><span class="ig-kafel-opis">…</span></label> */
.ig-kafel--wybor { cursor: pointer; }
.ig-kafel--wybor .ig-kafel-tytul { padding-right: 34px; }
.ig-kafel-pole { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.ig-kafel-znak {
  position: absolute; right: 18px; top: 18px;
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--ig-linia-mocna);
  background: var(--ig-bialy);
  transition: background-color var(--ig-d-srednio) var(--ig-e-out), box-shadow var(--ig-d-srednio) var(--ig-e-out);
}
.ig-kafel-znak::before {
  content: ""; width: 14px; height: 14px; background: var(--ig-tusz);
  -webkit-mask: var(--ig-ptaszek) center / contain no-repeat; mask: var(--ig-ptaszek) center / contain no-repeat;
  transform: scale(0); transition: transform var(--ig-d-wolno) var(--ig-e-out);
}
.ig-kafel--wybor:has(.ig-kafel-pole:checked) { background: var(--k-mgla, var(--ig-papier)); box-shadow: inset 0 0 0 2px var(--k, var(--ig-tusz)); }
.ig-kafel--wybor:has(.ig-kafel-pole:checked) .ig-kafel-znak { background: var(--k, var(--ig-tusz)); box-shadow: none; }
.ig-kafel--wybor:has(.ig-kafel-pole:checked) .ig-kafel-znak::before { transform: scale(1); }
.ig-kafel--wybor:has(.ig-kafel-pole:focus-visible) { outline: 2px solid var(--ig-fokus); outline-offset: 3px; }
.ig-kafel--wybor:has(.ig-kafel-pole:disabled) { opacity: 0.5; cursor: not-allowed; }
/* kafel „Zdecydujmy wspólnie” — zawsze w kreatorze; znak prezentu (4 kropki) zamiast ikony */
.ig-kafel--wspolnie { background: var(--ig-bialy); box-shadow: inset 0 0 0 1.5px var(--ig-mgla); }
.ig-kafel--wspolnie::before {
  content: ""; display: block; width: 44px; height: 44px; margin-bottom: 8px; flex: none;
  background:
    radial-gradient(circle at 10px 10px, var(--ig-g) 0 9.5px, transparent 10px),
    radial-gradient(circle at 34px 10px, var(--ig-i) 0 9.5px, transparent 10px),
    radial-gradient(circle at 10px 34px, var(--ig-f) 0 9.5px, transparent 10px),
    radial-gradient(circle at 34px 34px, var(--ig-t) 0 9.5px, transparent 10px);
}
.ig-kafel--wspolnie.ig-kafel--wybor:has(.ig-kafel-pole:checked) { background: var(--ig-papier); box-shadow: inset 0 0 0 2px var(--ig-tusz); }
.ig-kafel--wspolnie.ig-kafel--wybor:has(.ig-kafel-pole:checked) .ig-kafel-znak { background: var(--ig-tusz); }
.ig-kafel--wspolnie.ig-kafel--wybor:has(.ig-kafel-pole:checked) .ig-kafel-znak::before { background: var(--ig-bialy); }
.ig-kafel--wspolnie, .ig-kafle > .ig-kafel--wspolnie { --k: var(--ig-tusz); --k-tusz: var(--ig-tusz); --k-mgla: var(--ig-papier); }

@media (max-width: 767px) {
  .ig-kafle { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 12px; }
  .ig-kafel { padding: 20px; }
  /* duże CTA: jedna kolumna, kolorowe pole 12 px od krawędzi kontenera, tekst ≥ 20 px od pola */
  .ig-zapis {
    grid-template-columns: minmax(0, 1fr); gap: 24px;
    margin-inline: calc(12px - var(--ig-o-margines));
    padding: 84px 20px 20px;          /* górny pas na konfetti — kropki nigdy nie wchodzą pod tekst */
    border-radius: 24px;
  }
  .ig-zapis > .ig-btn, .ig-zapis-akcje { justify-self: stretch; }
  .ig-zapis-akcje { justify-items: stretch; }
  .ig-zapis-akcje .ig-drobny { text-align: left; }
  .ig-zapis > .ig-btn, .ig-zapis-akcje .ig-btn { width: 100%; }
  .ig-zapis::after { left: 20px; right: auto; top: 18px; width: 150px; height: 52px;
    background:
      radial-gradient(circle at 22px 26px, var(--k, var(--ig-g)) 0 21.5px, transparent 22px),
      radial-gradient(circle at 64px 14px, var(--k-nast, var(--ig-i)) 0 7.5px, transparent 8px),
      radial-gradient(circle at 76px 40px, var(--k, var(--ig-g)) 0 4.5px, transparent 5px),
      radial-gradient(circle at 100px 24px, var(--ig-linia-mocna) 0 3px, transparent 3.5px); }
  .ig-zapis--pelny::after {
    background:
      radial-gradient(circle at 22px 26px, var(--ig-bialy) 0 21.5px, transparent 22px),
      radial-gradient(circle at 64px 14px, var(--k-nast, var(--ig-i)) 0 7.5px, transparent 8px),
      radial-gradient(circle at 76px 40px, rgba(255, 255, 255, 0.7) 0 4.5px, transparent 5px),
      radial-gradient(circle at 100px 24px, rgba(255, 255, 255, 0.45) 0 3px, transparent 3.5px); }
  .ig-zapis-tresc { padding-right: 0; }
  .ig-btn { padding-left: 24px; }
}

/* telefon 375–767 px: małe kafle (.ig-kafle--male) w parzystej liczbie = 2 kolumny; węższy telefon = 1 kolumna */
@media (min-width: 375px) and (max-width: 767px) {
  .ig-kafle--male:is([data-ile="6"], [data-ile="12"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
  /* małe kafle w dwóch kolumnach: górny rząd = znak wyboru (i ikona), tytuł pod nim na całą szerokość */
  .ig-kafle--male:is([data-ile="6"], [data-ile="12"]) .ig-kafel { padding: 50px 14px 16px 16px; gap: 6px; }
  .ig-kafle--male:is([data-ile="6"], [data-ile="12"]) .ig-kafel-tytul { font-size: 1rem; line-height: 1.3; }
  .ig-kafle--male:is([data-ile="6"], [data-ile="12"]) .ig-kafel-opis { font-size: 0.875rem; line-height: 1.45; }
  .ig-kafle--male:is([data-ile="6"], [data-ile="12"]) .ig-kafel-znak { right: 12px; top: 14px; width: 24px; height: 24px; }
  .ig-kafle--male:is([data-ile="6"], [data-ile="12"]) .ig-kafel-znak::before { width: 13px; height: 13px; }
  .ig-kafle--male:is([data-ile="6"], [data-ile="12"]) .ig-kafel--wybor .ig-kafel-tytul { padding-right: 0; }
  .ig-kafle--male:is([data-ile="6"], [data-ile="12"]) .ig-kafel-ikona { position: absolute; left: 14px; top: 10px; width: 32px; height: 32px; border-radius: 10px; margin: 0; }
  .ig-kafle--male:is([data-ile="6"], [data-ile="12"]) .ig-kafel-ikona svg { width: 18px; height: 18px; }
  .ig-kafle--male:is([data-ile="6"], [data-ile="12"]) .ig-kafel--wspolnie::before { position: absolute; left: 16px; top: 15px; width: 24px; height: 24px; margin: 0;
    background:
      radial-gradient(circle at 5.25px 5.25px, var(--ig-g) 0 5px, transparent 5.4px),
      radial-gradient(circle at 18.75px 5.25px, var(--ig-i) 0 5px, transparent 5.4px),
      radial-gradient(circle at 5.25px 18.75px, var(--ig-f) 0 5px, transparent 5.4px),
      radial-gradient(circle at 18.75px 18.75px, var(--ig-t) 0 5px, transparent 5.4px); }
}

/* =========================================================================
   10. TALIA (telefon ≤ 767 px) — kontener [data-ig-talia="Nazwa"] = poziomy rząd kart (scroll-snap) + sterowanie
   ========================================================================= */
.ig-talia-ster { display: none; }
@media (max-width: 767px) {
  .ig-tel-ukryj { display: none !important; }
  .ig-talia {
    position: relative !important;
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    grid-template-columns: none !important; grid-template-rows: none !important; grid-auto-rows: auto !important;
    width: auto !important; max-width: none !important;
    margin-left: calc(-1 * var(--ig-o-margines)) !important; margin-right: calc(-1 * var(--ig-o-margines)) !important;
    padding: 4px var(--ig-o-margines) 14px !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--ig-o-margines);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ig-talia::-webkit-scrollbar { display: none; }
  .ig-talia[data-ig-talia-karty] > *:not(.ig-talia-karta) { display: contents !important; }
  .ig-talia > *, .ig-talia .ig-talia-karta {
    flex: 0 0 min(82vw, 340px) !important;
    width: auto !important; max-width: none !important; min-width: 0 !important;
    margin: 0 !important;
    grid-column: auto !important; grid-row: auto !important;
    scroll-snap-align: start; scroll-snap-stop: always;
  }
  .ig-talia .ig-talia-ostatnia { scroll-snap-align: end; }
  .ig-talia > [data-ig-talia-pomin] { display: none !important; }

  .ig-talia-ster {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 10px;
    margin-top: 4px;
  }
  .ig-talia-str {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: var(--ig-bialy); box-shadow: inset 0 0 0 1px var(--ig-linia-mocna); color: var(--ig-tusz);
    transition: opacity var(--ig-d-srednio) var(--ig-e-out), background-color var(--ig-d-srednio) var(--ig-e-out);
  }
  .ig-talia-str::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; }
  .ig-talia-str--l::before { transform: rotate(180deg); }
  .ig-talia-str:active { background: var(--ig-papier); }
  .ig-talia-str:disabled { opacity: 0.3; }
  .ig-talia-srodek { display: grid; justify-items: center; gap: 0; min-width: 0; }
  .ig-talia-kreski { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; }
  .ig-talia-kreski button { position: relative; display: block; width: 22px; height: 32px; transition: width var(--ig-d-wolno) var(--ig-e-out); }
  .ig-talia-kreski button::before {
    content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px;
    background: var(--ig-mgla); transition: background-color var(--ig-d-wolno) var(--ig-e-out);
  }
  .ig-talia-kreski li:nth-child(4n+1) button { --k: var(--ig-g); }
  .ig-talia-kreski li:nth-child(4n+2) button { --k: var(--ig-i); }
  .ig-talia-kreski li:nth-child(4n+3) button { --k: var(--ig-f); }
  .ig-talia-kreski li:nth-child(4n+4) button { --k: var(--ig-t); }
  .ig-talia-kreski button[aria-current="true"] { width: 40px; }
  .ig-talia-kreski button[aria-current="true"]::before { background: var(--k); }
  /* kreski zawsze w jednym rzędzie: szerokość kreski z liczby kart (--n, ustawia wspolne.js) i szerokości środka
     (6 kart przy 320 px = 148 px, 12 kart = 172 px); szeroki środek zostawia 22/40 px jak wyżej */
  @supports (width: 1cqi) {
    .ig-talia-srodek { container-type: inline-size; }
    .ig-talia-kreski { flex-wrap: nowrap; --u: min(22px, 100cqi / (var(--n, 6) + 0.82)); }
    .ig-talia-kreski button { width: var(--u); }
    .ig-talia-kreski button[aria-current="true"] { width: calc(var(--u) * 1.82); }
    .ig-talia-kreski button::before { left: clamp(2px, 18%, 4px); right: clamp(2px, 18%, 4px); }
  }
  .ig-talia-podpowiedz { font-size: var(--ig-t-drobny); color: var(--ig-cichy); line-height: 1.3; transition: opacity var(--ig-d-wolno) var(--ig-e-out); }
  .ig-talia-ster.is-ruszona .ig-talia-podpowiedz { opacity: 0; }
}

/* =========================================================================
   11. DOK (telefon ≤ 767 px) — [pierścień postępu → arkusz sekcji] [Dalej: sekcja] [Brief]
   Tworzy go wspolne.js, gdy strona ma ≥ 2 sekcje [data-ig-sekcja="Nazwa"]. Wyłączenie: <body data-ig-bez-doku>.
   ========================================================================= */
.ig-dok, .ig-arkusz { display: none; }
@media (max-width: 767px) {
  .ig-dok {
    position: fixed; z-index: 90;
    left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 6px;
    padding: 6px;
    border-radius: 30px;
    background: rgba(14, 14, 20, 0.94);
    color: var(--ig-bialy);
    box-shadow: 0 18px 40px -18px rgba(14, 14, 20, 0.6);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    opacity: 0; visibility: hidden; transform: translateY(24px);
    transition: opacity var(--ig-d-wolno) var(--ig-e-out), transform var(--ig-d-wolno) var(--ig-e-out), visibility 0s linear var(--ig-d-wolno);
  }
  .ig-dok.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .ig-dok-etap { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ig-bialy); }
  .ig-dok-pierscien { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
  .ig-dok-pierscien circle { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 2.5; }
  .ig-dok-pierscien .ig-dok-postep {
    stroke: var(--k, var(--ig-g)); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - 100 * var(--p, 0));
    transition: stroke-dashoffset var(--ig-d-wolno) var(--ig-e-out), stroke var(--ig-d-wolno) var(--ig-e-out);
  }
  .ig-dok-etap::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--k, var(--ig-g)); transition: background-color var(--ig-d-wolno) var(--ig-e-out); }
  .ig-dok-dalej { display: inline-flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding-left: 4px; font-family: var(--ig-f-display); font-size: 0.875rem; font-weight: 500; line-height: 1.2; }
  .ig-dok-tekst { display: grid; min-width: 0; }
  .ig-dok-pre { font-family: var(--ig-f-tekst); font-size: 0.75rem; font-weight: 400; color: rgba(255, 255, 255, 0.66); }
  .ig-dok-nazwa { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ig-dok-pole { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); order: -1; }
  .ig-dok-pole::before { content: ""; width: 16px; height: 16px; background: currentColor; transform: rotate(90deg); -webkit-mask: var(--ig-strzalka) center / contain no-repeat; mask: var(--ig-strzalka) center / contain no-repeat; }
  .ig-dok-dalej.is-gora .ig-dok-pole::before { transform: rotate(-90deg); }   /* „Wróć na górę strony” — strzałka w górę */
  .ig-dok-brief {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 22px;
    background: var(--ig-g); color: var(--ig-tusz);
    font-family: var(--ig-f-display); font-size: 0.875rem; font-weight: 600; white-space: nowrap;
  }
  .ig-dok-brief:active, .ig-dok-etap:active { transform: scale(0.96); }

  /* arkusz sekcji (dialog od dołu) */
  .ig-arkusz[open] {
    display: grid; gap: 16px;
    position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; max-height: min(86svh, 720px);
    padding: 10px 20px calc(22px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; overscroll-behavior: contain;
    border: 0; border-radius: 26px 26px 0 0;
    background: var(--ig-bialy); color: var(--ig-tekst);
    box-shadow: 0 -20px 50px -20px rgba(14, 14, 20, 0.3);
    animation: ig-ark-wjazd 0.42s var(--ig-e-out);
  }
  .ig-arkusz.is-zamyka { animation: ig-ark-wyjazd 0.26s var(--ig-e-in-out) forwards; }
  .ig-arkusz::backdrop { background: rgba(14, 14, 20, 0.36); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .ig-arkusz-uchwyt { justify-self: center; width: 44px; height: 5px; border-radius: 3px; background: var(--ig-mgla); }
  .ig-arkusz-glowa { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .ig-arkusz-glowa h2 { font-size: 1.375rem; line-height: 1.2; }
  .ig-arkusz-zamknij { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ig-papier); color: var(--ig-tusz); }
  .ig-arkusz-zamknij::before, .ig-arkusz-zamknij::after { content: ""; grid-area: 1 / 1; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
  .ig-arkusz-zamknij::after { transform: rotate(-45deg); }
  .ig-arkusz-lista { display: grid; gap: 6px; }
  .ig-arkusz-lista a {
    display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 14px;
    min-height: 54px; padding: 8px 16px; border-radius: 16px;
    background: var(--ig-papier); color: var(--ig-tusz); font-family: var(--ig-f-display); font-weight: 500; font-size: 1rem;
  }
  .ig-arkusz-lista a::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--k, var(--ig-g)); }
  .ig-arkusz-lista .ig-arkusz-stan { font-family: var(--ig-f-tekst); font-size: 0.75rem; font-weight: 500; color: var(--ig-cichy); }
  .ig-arkusz-lista a[aria-current] { background: var(--k-mgla, var(--ig-g-mgla)); }
  .ig-arkusz-akcje .ig-btn { width: 100%; }
  /* ostatnia treść nad stopką nie chowa się pod dokiem */
  body.ig-ma-dok .ig-stopka { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
@keyframes ig-ark-wjazd { from { transform: translateY(100%); } to { transform: none; } }
@keyframes ig-ark-wyjazd { to { transform: translateY(100%); } }

/* =========================================================================
   12. STOPKA — okno papieru z kolumnami linków (G I F T) i dużym logo malowanym kropkami
   ========================================================================= */
.ig-stopka { position: relative; padding: var(--ig-okno-odstep) var(--ig-okno-wciecie) var(--ig-okno-wciecie); }
.ig-stopka-okno {
  position: relative; isolation: isolate; overflow: clip;
  border-radius: var(--ig-r-okno);
  background: var(--ig-papier);
  padding-top: clamp(56px, 2rem + 4vw, 112px);
}
.ig-stopka-gora {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px 48px;
  padding-bottom: clamp(40px, 1.5rem + 3vw, 72px);
  border-bottom: 1px solid var(--ig-linia);
}
.ig-stopka-haslo { font-family: var(--ig-f-display); font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3rem); line-height: 1.08; letter-spacing: -0.03em; color: var(--ig-tusz); max-width: 18ch; text-wrap: balance; }
.ig-stopka-haslo b { font-weight: 600; }
.ig-stopka-kolumny {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px;
  padding-block: clamp(36px, 1.5rem + 2.4vw, 64px);
}
.ig-stopka-kol h2 {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-family: var(--ig-f-display); font-size: 1rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1.3;
  color: var(--k-tusz, var(--ig-tusz));
}
.ig-stopka-kol h2::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--k, var(--ig-g)); flex: none; }
.ig-stopka-kol ul { display: grid; gap: 0; }
.ig-stopka-kol a {
  display: inline-flex; align-items: center; min-height: 40px;
  font-size: var(--ig-t-maly); color: var(--ig-tekst);
  background: linear-gradient(var(--k, var(--ig-g)), var(--k, var(--ig-g))) left calc(100% - 8px) / 0 2px no-repeat;
  transition: background-size var(--ig-d-wolno) var(--ig-e-out), color var(--ig-d-srednio) var(--ig-e-out);
}
@media (hover: hover) { .ig-stopka-kol a:hover { color: var(--ig-tusz); background-size: 100% 2px; } }
.ig-stopka-kol address { font-style: normal; display: grid; gap: 2px; font-size: var(--ig-t-maly); color: var(--ig-tekst); }
.ig-stopka-logo { position: relative; padding-top: 8px; }
.ig-stopka-logo .ig-logo-svg { width: 100%; height: auto; overflow: visible; }
.ig-stopka-logo canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ig-stopka-dol {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px;
  margin-top: clamp(24px, 1rem + 2vw, 40px);
  padding-block: 20px 26px;
  border-top: 1px solid var(--ig-linia);
  font-size: var(--ig-t-drobny); color: var(--ig-cichy);
}
.ig-stopka-dol ul { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.ig-stopka-dol a { display: inline-flex; align-items: center; min-height: 32px; }
@media (hover: hover) { .ig-stopka-dol a:hover { color: var(--ig-tusz); text-decoration: underline; text-underline-offset: 4px; } }
@media (max-width: 991px) {
  .ig-stopka-kolumny { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ig-stopka-gora { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ig-stopka-gora .ig-btn { justify-self: stretch; }
  .ig-stopka-kolumny { gap: 28px 16px; }
  .ig-stopka-kol a { white-space: normal; line-height: 1.35; min-height: 44px; }   /* cel dotyku 44 px */
  .ig-stopka-kol a[href^="mailto:"] { overflow-wrap: anywhere; }
  .ig-stopka-dol { flex-direction: column; align-items: flex-start; }
  .ig-stopka-dol a { min-height: 44px; }
}
/* wąski telefon: kolumny po ~130 px łamały linki i wypychały adres e-mail pod krawędź — jedna kolumna */
@media (max-width: 374px) {
  .ig-stopka-kolumny { grid-template-columns: minmax(0, 1fr); }
}

/* przycisk pauzy pętli animacji (WCAG 2.2.2) — <button class="ig-pauza" type="button" aria-pressed="false"><span class="ig-sr">Zatrzymaj animację</span></button>
   wewnątrz elementu przekazanego do Imagift.petla(); położenie ustawia sekcja */
.ig-pauza {
  position: absolute; z-index: 5; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 1px var(--ig-linia), var(--ig-cien-1); color: var(--ig-tusz);
}
.ig-pauza::before, .ig-pauza::after { content: ""; grid-area: 1 / 1; width: 4px; height: 14px; border-radius: 1px; background: currentColor; }
.ig-pauza::before { transform: translateX(-4px); }
.ig-pauza::after { transform: translateX(4px); }
.ig-pauza[aria-pressed="true"]::before { width: 0; height: 0; border-radius: 0; background: none; transform: translateX(2px); border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent currentColor; }
.ig-pauza[aria-pressed="true"]::after { display: none; }

/* =========================================================================
   13. ANIMACJE WEJŚCIA — [data-ig-pokaz] (puste | lewo | prawo | skala | kropka) + style="--i:N" (kolejność)
   [data-ig-split] na nagłówku: słowa wjeżdżają z masek. Działa tylko przy pełnym ruchu (html.ig-ruch).
   ========================================================================= */
html.ig-ruch [data-ig-pokaz] {
  opacity: 0;
  transform: translate3d(0, 44px, 0);
  transition: opacity 0.9s var(--ig-e-out), transform 1.1s var(--ig-e-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
html.ig-ruch [data-ig-pokaz="lewo"] { transform: translate3d(-56px, 0, 0); }
html.ig-ruch [data-ig-pokaz="prawo"] { transform: translate3d(56px, 0, 0); }
html.ig-ruch [data-ig-pokaz="skala"] { transform: scale(0.92); }
html.ig-ruch [data-ig-pokaz="kropka"] { transform: scale(0.2); transition-timing-function: var(--ig-e-out), cubic-bezier(0.34, 1.56, 0.64, 1); }
html.ig-ruch [data-ig-pokaz].is-pokazany { opacity: 1; transform: none; }
.ig-slowo { display: inline-block; vertical-align: top; overflow: clip; padding: 0 0.04em 0.14em; margin: 0 -0.04em -0.14em; }
.ig-slowo-in { display: inline-block; }
html.ig-ruch [data-ig-split] .ig-slowo-in {
  transform: translate3d(0, 112%, 0) rotate(3deg);
  transition: transform 1.15s var(--ig-e-out);
  transition-delay: calc(var(--w, 0) * 55ms);
}
html.ig-ruch [data-ig-split].is-pokazany .ig-slowo-in { transform: none; }

/* =========================================================================
   14. OGRANICZONY RUCH
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  html.ig-ruch [data-ig-pokaz], html.ig-ruch [data-ig-split] .ig-slowo-in { opacity: 1 !important; transform: none !important; }
  .ig-menu { clip-path: none; }
  .ig-talia { scroll-behavior: auto; }
}