/* ==========================================================================
   Galeria FC 27 (resources/views/galeria): strona uslugi wg makiety Main.dc.html (desktop) i Mobile.dc.html (telefon).
   Mobile-first: jedna kolumna do 1023 px + pasek ceny na dole, od 1024 px konfigurator i podsumowanie obok siebie.
   Wszystko pod .gf albo z prefiksem gf- (bloki desc-galeria-* maja wlasne style inline, tu tylko dopasowanie ukladu gfb-*).
   Fonty: Barlow, Barlow Condensed (laduje je layout strony).
   ========================================================================== */
.gf {
  --gf-ciemny: #0d131b;
  --gf-ciemny2: #0f151d;
  --gf-pole: #161f2a;
  --gf-linia: #2c394a;
  --gf-zloty: #f5a623;
  --gf-zloty2: #ffd27a;
  --gf-zloty-txt: #f5c46a;
  --gf-tekst: #141a22;
  --gf-szary: #5b6573;
  --gf-cond: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  max-width: 1100px; margin: 0 auto; padding: 6px 0 28px;
  display: flex; flex-direction: column; gap: 14px;
  font-family: Barlow, 'Helvetica Neue', Arial, sans-serif; color: var(--gf-tekst); text-align: left;
  font-size: 15px; line-height: 1.5;
}
.gf *, .gf *::before, .gf *::after, .gf-pasek * { box-sizing: border-box; }
.gf [hidden], .gf-pasek[hidden] { display: none !important; }
.gf b, .gf strong { font-weight: 700; }
.gf a { color: #b86e00; }
.gf a:hover { color: #8a5200; }
.gf button { font-family: inherit; cursor: pointer; }
.gf h1, .gf h2, .gf h3 { text-transform: none; letter-spacing: 0; text-align: left; }
.gf button:focus-visible, .gf a:focus-visible, .gf summary:focus-visible, .gf input:focus-visible, .gf-pasek button:focus-visible {
  outline: 3px solid var(--gf-zloty); outline-offset: 2px;
}
.gf input[type=text] { -webkit-appearance: none; appearance: none; box-shadow: none; margin: 0; }
.gf input[type=text]:focus { outline: none; }

/* ---------- Okruszki ---------- */
.gf-okruszki { font-size: 13px; color: var(--gf-szary); }
.gf-okruszki a { color: var(--gf-szary) !important; text-decoration: none; }
.gf-okruszki b { color: var(--gf-tekst); font-weight: 600; }

/* ---------- Hero ---------- */
.gf-hero { position: relative; overflow: hidden; border-radius: 18px; background: #05080d; color: #fff; min-height: 360px; display: flex; align-items: flex-end; }
.gf-hero-ken { position: absolute; left: 0; right: 0; top: 0; height: 300px; }
.gf-hero-ken picture, .gf-hero-tlo { display: block; width: 100%; height: 100%; }
.gf-hero-tlo { object-fit: cover; object-position: center top; }
.gf-hero-cien { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,8,13,0) 0%, rgba(5,8,13,.2) 35%, rgba(5,8,13,.92) 62%, #05080d 100%); }
.gf-hero-linia { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(245,166,35,0), #f5a623, rgba(245,166,35,0)); }
.gf-tw { position: absolute; border-radius: 50%; background: #ffe2a3; box-shadow: 0 0 10px #ffd27a; animation: gfTwinkle 2.6s ease-in-out infinite; display: none; }
.gf-hero-in { position: relative; z-index: 1; width: 100%; padding: 210px 18px 18px; }
.gf-hero-h1 { margin: 0; font-family: var(--gf-cond); font-weight: 800; font-size: 40px; line-height: .96; color: #fff; }
.gf-hero-in h1 { color: #fff; }
.gf-hero-in > *:last-child { margin-bottom: 0; }
@media (min-width: 768px) {
  .gf-hero { min-height: 470px; align-items: center; border-radius: 22px; }
  .gf-hero-ken { inset: 0; height: auto; transform-origin: 85% 70%; animation: gfKen 18s ease-in-out infinite alternate; }
  .gf-hero-tlo { object-position: right center; }
  .gf-hero-cien { background: linear-gradient(90deg, rgba(5,8,13,.85) 0%, rgba(5,8,13,.55) 36%, rgba(5,8,13,0) 58%); }
  .gf-tw { display: block; }
  .gf-hero-in { padding: 48px 44px; max-width: 600px; }
}

/* ---------- Uklad: konfigurator + podsumowanie ---------- */
.gf-uklad { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.gf-konf { background: #fff; border-radius: 16px; padding: 18px 14px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.gf-h2 { margin: 0; font-family: var(--gf-cond); font-weight: 800; font-size: 26px; line-height: 1.05; color: var(--gf-tekst); }
.gf-krok { display: flex; flex-direction: column; gap: 10px; }
.gf-krok-hd { font-weight: 700; font-size: 15px; }

/* platforma */
.gf-plat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gf-plat-btn { display: flex; align-items: center; gap: 10px; text-align: left; border-radius: 14px; padding: 10px 10px; min-height: 60px; border: 1px solid #dde2e8; background: #fff; color: var(--gf-tekst);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.gf-plat-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(17,26,36,.12); }
.gf-plat-btn:disabled { opacity: .45; cursor: not-allowed; }
.gf-plat-ik { flex: none; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #f1f3f6; color: #3a4452; }
.gf-plat-txt { min-width: 0; }
.gf-plat-txt b { display: block; font-size: 15px; line-height: 1.15; }
.gf-plat-txt span { display: block; font-size: 11.5px; margin-top: 2px; color: #6a7482; line-height: 1.25; }
.gf-plat-btn[aria-checked=true] { background: #111a24; border-color: #111a24; box-shadow: 0 10px 22px rgba(17,26,36,.22); }
.gf-plat-btn[aria-checked=true] .gf-plat-ik { background: var(--gf-zloty); color: #111a24; }
.gf-plat-btn[aria-checked=true] b { color: #fff; }
.gf-plat-btn[aria-checked=true] .gf-plat-txt span { color: #b9c3cf; }

/* tokeny: ciemna karta */
.gf-tok { position: relative; overflow: hidden; background: var(--gf-ciemny); border-radius: 18px; padding: 16px 14px; color: #fff; display: flex; flex-direction: column; gap: 16px;
  background-image: radial-gradient(ellipse 55% 80% at 0% 0%, rgba(245,166,35,.16), rgba(245,166,35,0) 70%), radial-gradient(ellipse 40% 70% at 100% 100%, rgba(70,110,170,.18), rgba(70,110,170,0) 70%); }
.gf-tok-gora { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: flex-end; }
.gf-tok-pole { flex: 999 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.gf-tok-label { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; color: var(--gf-zloty-txt); text-transform: uppercase; margin: 0; }
.gf-tok-rzad { display: flex; align-items: stretch; gap: 6px; }
.gf-tok-pm { flex: none; width: 46px; border-radius: 12px; border: 1px solid #2f3d50; background: var(--gf-pole); color: #fff; font-size: 24px; font-weight: 700; line-height: 1; padding: 0; }
.gf-tok-pm:hover { background: #1f2a38; }
.gf-tok-wej { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: #0a0f15; border: 2px solid var(--gf-zloty); border-radius: 14px; padding: 4px 12px; min-height: 62px;
  box-shadow: 0 0 24px rgba(245,166,35,.2); animation: gfGlow 3s ease-in-out infinite; }
.gf-tok-wej input { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; color: #fff; font-family: var(--gf-cond); font-weight: 800; font-size: 40px; line-height: 1; padding: 0; caret-color: var(--gf-zloty); height: auto; }
.gf-tok-jedn { display: none; font-family: var(--gf-cond); font-weight: 700; font-size: 16px; color: #8d99a8; letter-spacing: .5px; text-transform: uppercase; }
.gf-tok-zakres { font-size: 12px; color: #8d99a8; }
.gf-tok-cena { flex: 1 0 200px; display: flex; flex-direction: row-reverse; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 10px; }
.gf-tok-cena-et { display: none; font-size: 12px; font-weight: 700; letter-spacing: 1.6px; color: #8d99a8; text-transform: uppercase; }
.gf-tok-cena b { font-family: var(--gf-cond); font-weight: 800; font-size: 30px; line-height: 1; color: var(--gf-zloty); }
.gf-tok-cena span { font-size: 12px; color: #a3aebb; }

.gf-moneta { flex: none; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe2a3, #f5a623 55%, #b8740c); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(245,166,35,.35); }
.gf-moneta > span { width: 24px; height: 24px; border-radius: 50%; background: #111a24; display: flex; align-items: center; justify-content: center; }
.gf-moneta > span svg { width: 12px; height: 12px; }
.gf-moneta--mala { width: 26px; height: 26px; box-shadow: none; }
.gf-moneta--duza { width: 52px; height: 52px; background: var(--gf-zloty); box-shadow: none; }
.gf-moneta--duza > span { width: 40px; height: 40px; }
.gf-moneta--duza > span svg { width: 20px; height: 20px; }

/* suwak */
.gf-suwak { position: relative; }
.gf-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 8px; margin: 6px 0; border-radius: 99px; outline: none; cursor: pointer; border: 0; padding: 0;
  background: linear-gradient(90deg, #f5c46a 0%, #f5a623 var(--gf-pct, 0%), #26313f var(--gf-pct, 0%)); }
.gf-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe2a3, #f5a623 55%, #b8740c);
  border: 4px solid #0d131b; box-shadow: 0 0 0 2px #f5a623, 0 4px 14px rgba(245,166,35,.5); cursor: grab; }
.gf-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #f5a623; border: 4px solid #0d131b; box-shadow: 0 0 0 2px #f5a623, 0 6px 18px rgba(245,166,35,.55); cursor: grab; }
.gf-range::-moz-range-track { background: transparent; }
.gf-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px #ffd27a, 0 6px 18px rgba(245,166,35,.55); }
.gf-suwak-skala { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; font-weight: 600; color: #6a7686; }

/* pakiety */
.gf-pakiety { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.gf-pak { position: relative; border-radius: 10px; padding: 8px 2px 7px; min-height: 52px; border: 1px solid var(--gf-linia); background: rgba(22,31,42,.9); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: transform .18s ease, box-shadow .18s ease; }
.gf-pak:hover { transform: translateY(-3px); }
.gf-pak-hit { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: var(--gf-zloty); color: #111a24; font-size: 9px; font-weight: 800; letter-spacing: .8px; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.gf-pak-gora { display: flex; align-items: center; justify-content: center; gap: 4px; }
.gf-pak-gora b { font-family: var(--gf-cond); font-weight: 800; font-size: 20px; line-height: 1; }
.gf-pak-mon { flex: none; width: 13px; height: 13px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #ffe2a3, #f5a623); }
.gf-pak-mon svg { width: 7px; height: 7px; fill: #111a24; }
.gf-pak-cena { display: block; font-size: 10.5px; font-weight: 600; color: #a3aebb; white-space: nowrap; letter-spacing: -.2px; }
.gf-pak[aria-pressed=true] { border-color: var(--gf-zloty2); background: linear-gradient(160deg, #ffd27a, #f5a623 60%, #d48a12); box-shadow: 0 10px 26px rgba(245,166,35,.35); color: #111a24; }
.gf-pak[aria-pressed=true] .gf-pak-cena { color: #3a2a06; }
.gf-pak[aria-pressed=true] .gf-pak-mon { background: #111a24; }
.gf-pak[aria-pressed=true] .gf-pak-mon svg { fill: var(--gf-zloty); }

/* nagrody */
.gf-nagrody { border: 1px solid #e6e9ee; border-radius: 16px; padding: 14px 12px; display: flex; flex-direction: column; gap: 12px; background: linear-gradient(180deg, #fff, #fbfbfc); }
.gf-nagrody-hd { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.gf-nagrody-hd > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gf-nagrody-hd b { font-family: var(--gf-cond); font-weight: 800; font-size: 20px; line-height: 1.1; }
.gf-nagrody-hd > span:first-child span { font-size: 12.5px; color: var(--gf-szary); }
.gf-nagrody-licz { display: inline-flex; align-items: center; gap: 6px; background: #111a24; color: var(--gf-zloty-txt); font-size: 12px; font-weight: 700; border-radius: 999px; padding: 5px 11px; white-space: nowrap; }
.gf-nagrody-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.gf-nagroda { position: relative; margin: 0; border-radius: 12px; padding: 8px 2px 7px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center;
  background: #f4f6f8; border: 1px solid #e6e9ee; transition: all .3s ease; }
.gf-nagroda-znak { display: none; position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; align-items: center; justify-content: center; background: #d9dde3; color: #6a7482; }
.gf-nagroda .gf-ik-ok { display: none; }
.gf-nagroda-art { display: none; width: 56px; height: 56px; border-radius: 16px; align-items: center; justify-content: center; background: #e7eaee; color: #a3acb8; }
.gf-nagroda-nazwa { order: 2; font-weight: 700; font-size: 10px; line-height: 1.15; color: #8d99a8; }
.gf-nagroda-koszt { order: 1; display: inline-flex; align-items: center; gap: 4px; font-family: var(--gf-cond); font-weight: 800; font-size: 15px; line-height: 1; color: #a3acb8; }
.gf-nagroda-koszt span { display: none; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.gf-nagroda.is-on { background: linear-gradient(150deg, #ffd27a, #f5a623); border-color: #f3cf86; }
.gf-nagroda.is-on .gf-nagroda-nazwa, .gf-nagroda.is-on .gf-nagroda-koszt { color: #111a24; }
.gf-nagrody-pasek { position: relative; height: 10px; border-radius: 99px; background: #eceff3; overflow: hidden; }
.gf-nagrody-pasek span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f5c46a, #f5a623); transition: width .4s ease; }
.gf-nastepna { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff8ea; border: 1px dashed #f0c46d; border-radius: 12px; padding: 10px 12px; }
.gf-nastepna > span { flex: 1 1 200px; font-size: 13.5px; line-height: 1.45; color: #6b4600; }
.gf-nastepna-btn { flex: none; min-height: 42px; font-weight: 700; font-size: 13px; color: #111a24; background: var(--gf-zloty); border: 0; border-radius: 10px; padding: 0 14px; }
.gf-nastepna-btn:hover { filter: brightness(1.06); }
.gf-wszystkie { display: flex; align-items: center; gap: 10px; background: #111a24; color: #fff; border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.gf-wszystkie svg { flex: none; }

/* klub */
.gf-klub { display: flex; flex-wrap: wrap; gap: 12px; }
.gf-klub-pole { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gf-klub-pole label { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; color: var(--gf-szary); text-transform: uppercase; margin: 0; }
.gf-klub-wej { display: flex; align-items: center; gap: 10px; border: 2px solid #e1e5ea; border-radius: 12px; padding: 0 12px; min-height: 52px; background: #fbfbfc; }
.gf-klub-wej--mocne { border-color: #111a24; background: #fff; }
.gf-klub-wej svg { flex: none; }
.gf-klub-wej input { flex: 1; min-width: 0; width: 100%; border: 0; font-family: var(--gf-cond); font-weight: 800; font-size: 26px; color: var(--gf-tekst); background: transparent; padding: 4px 0; height: auto; }
.gf-klub-wej input::placeholder { color: #b5bdc8; }
.gf-klub-wej > span:last-child { font-size: 13px; color: var(--gf-szary); }
.gf-wymog { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2px 10px; font-size: 13px; color: var(--gf-szary); }
.gf-wymog strong { color: var(--gf-tekst); }
.gf-pokrycie { display: flex; align-items: center; gap: 10px; }
.gf-pokrycie-tor { flex: 1; height: 10px; background: #eef0f3; border-radius: 99px; overflow: hidden; }
.gf-pokrycie-tor span { display: block; height: 100%; border-radius: 99px; background: #e0a01e; transition: width .4s; }
.gf-pokrycie.is-ok .gf-pokrycie-tor span { background: #1d7a3a; }
.gf-pokrycie-pct { font-size: 13px; font-weight: 700; color: #8a5a00; width: 44px; text-align: right; }
.gf-pokrycie.is-ok .gf-pokrycie-pct { color: #1d7a3a; }
.gf-ok, .gf-brak { display: flex; gap: 10px; align-items: center; border-radius: 12px; padding: 10px 12px; font-size: 13.5px; line-height: 1.45; flex-wrap: wrap; }
.gf-ok { background: #eef8f0; border: 1px solid #bfe3c8; color: #1d5c2e; flex-wrap: nowrap; }
.gf-ok svg, .gf-brak svg { flex: none; }
.gf-brak { background: #fff7e6; border: 1px solid #f3d595; color: #6b4600; }
.gf-brak-txt { flex: 1 1 180px; min-width: 0; }
.gf-brak-btn { flex: none; min-height: 40px; font-weight: 700; font-size: 13px; background: #111a24; color: var(--gf-zloty); border: 0; border-radius: 9px; padding: 0 14px; margin-left: auto; }
.gf-sync { display: flex; gap: 12px; align-items: center; border-top: 1px dashed #dde2e8; padding-top: 16px; font-size: 13.5px; line-height: 1.5; color: #2c3644; }
.gf-sync svg { flex: none; }

/* ---------- Podsumowanie ---------- */
.gf-sum { background: var(--gf-ciemny2); color: #fff; border-radius: 16px; padding: 18px 14px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.gf-sum-hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.gf-sum-hd > span:first-child { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; color: #8d99a8; text-transform: uppercase; }
.gf-sum-tag { border: 1px solid #5a4a24; color: var(--gf-zloty-txt); border-radius: 6px; padding: 3px 8px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.gf-sum-cel { background: linear-gradient(135deg, #1b2533, #121a24); border: 1px solid var(--gf-linia); border-radius: 14px; padding: 14px; display: flex; align-items: center; gap: 12px; }
.gf-sum-cel-txt { flex: 1; min-width: 0; }
.gf-sum-cel-txt b { display: block; font-family: var(--gf-cond); font-weight: 800; font-size: 26px; line-height: 1; white-space: nowrap; }
.gf-sum-cel-txt span { display: block; font-size: 13px; color: var(--gf-zloty-txt); margin-top: 3px; }
.gf-sum-cel-cena { font-weight: 700; font-size: 16px; white-space: nowrap; }
.gf-dokup { background: var(--gf-pole); border: 1px solid var(--gf-linia); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.gf-dokup-hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.gf-dokup-hd label { font-weight: 700; font-size: 14px; margin: 0; color: #fff; }
.gf-dokup-hd span { font-size: 12px; color: #8d99a8; white-space: nowrap; }
.gf-dokup-wej { display: flex; align-items: center; gap: 8px; background: var(--gf-ciemny2); border: 1px solid #3a4a5e; border-radius: 10px; padding: 0 12px; min-height: 46px; }
.gf-dokup-wej input { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; color: #fff; font-family: var(--gf-cond); font-weight: 800; font-size: 24px; padding: 0; height: auto; }
.gf-dokup-wej input::placeholder { color: #5d6b7c; }
.gf-dokup-wej span { font-size: 13px; color: #8d99a8; }
.gf-dokup-szybkie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.gf-dokup-szybkie button { min-height: 38px; font-weight: 700; font-size: 12px; color: #fff; background: #1f2a38; border: 1px solid #2f3d50; border-radius: 8px; padding: 0 2px; white-space: nowrap; }
.gf-dokup-szybkie button:hover { border-color: var(--gf-zloty); }
.gf-dokup-min { margin: 0; font-size: 12px; line-height: 1.4; color: #f5c46a; }
.gf-dokup-stopka { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.gf-dokup-stopka span { color: #a3aebb; }
.gf-dokup-stopka strong { color: var(--gf-zloty-txt); white-space: nowrap; }
.gf-sum-wiersze { display: flex; flex-direction: column; gap: 8px; font-size: 14px; margin: 0 !important; padding: 0; }
.gf-sum-wiersze > div { display: flex; justify-content: space-between; gap: 10px; }
.gf-sum-wiersze dt { color: #a3aebb; font-weight: 400; text-align: left; margin: 0; }
.gf-sum-wiersze dd { margin: 0; font-weight: 700; text-align: right; }
.gf-sum-razem { border-top: 1px solid #222c38; padding-top: 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.gf-sum-razem span { font-weight: 700; }
.gf-sum-razem b { font-family: var(--gf-cond); font-weight: 800; font-size: 34px; line-height: 1; color: var(--gf-zloty); white-space: nowrap; }
.gf-sum-lokalnie { margin: -4px 0 0; font-size: 12.5px; line-height: 1.4; color: #f5c46a; }
.gf-kup { display: block; width: 100%; text-align: center; border: 0; color: #111a24; font-family: var(--gf-cond); font-weight: 800; font-size: 23px; letter-spacing: .5px; padding: 16px; border-radius: 12px; text-transform: uppercase; }
.gf-cta { background: linear-gradient(100deg, #f5a623 40%, #ffd27a 50%, #f5a623 60%); background-size: 200% 100%; animation: gfShine 3.2s linear infinite; }
.gf-cta:hover { filter: brightness(1.06); }
.gf-cta:disabled { animation: none; background: #3a4150; color: #c9d0da; cursor: wait; }
.gf .bv2-platnosci { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.gf .bv2-platnosci li { display: flex; align-items: center; justify-content: center; margin: 0; height: 40px; border-radius: 7px; background: #fff; overflow: hidden; }
.gf .bv2-platnosci img { display: block; flex: none; width: 52px; height: 52px; object-fit: contain; }
.gf-sum-blok { color: #b9c3cf; font-size: 13px; }

/* ---------- Bloki z panelu (desc-galeria-*) ---------- */
.gf-blok > *:first-child { margin-top: 0; }
.gf-blok > *:last-child { margin-bottom: 0; }
.gf-blok p { margin: 0; }
/* oś "Jak to działa" (blok desc-galeria-sekcje): na telefonie kroki w wierszach, od 900 px cztery kolumny z linią jak w makiecie */
@media (min-width: 900px) {
  .gf .gfb-kroki { flex-wrap: nowrap !important; }
  .gf .gfb-krok { flex-direction: column !important; align-items: center !important; text-align: center !important; }
  .gf .gfb-krok-ik { width: 66px !important; height: 66px !important; border-radius: 18px !important; }
  .gf .gfb-krok-ik svg { width: 28px; height: 28px; }
  .gf .gfb-os-linia { display: block !important; }
}

/* ---------- Pasek ceny na telefonie ---------- */
.gf-pasek { display: none; }
@media (max-width: 1023px) {
  .gf-pasek:not([hidden]) { display: block; position: fixed; left: 0; right: 0; bottom: var(--gf-nav, 0px); z-index: 590;
    background: var(--gf-ciemny2, #0f151d); border-top: 1px solid #222a36; box-shadow: 0 -6px 18px rgba(0,0,0,.25); font-family: Barlow, Arial, sans-serif; }
  .gf-pasek-in { display: flex; align-items: center; gap: 12px; padding: 10px 12px; max-width: 700px; margin: 0 auto; }
  .gf-pasek-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .gf-pasek-opis { font-size: 12px; color: #a3aebb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gf-pasek-kwota { font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-size: 24px; font-weight: 800; color: #f5a623; line-height: 1.05; }
  .gf-pasek-btn { border: 0; flex: none; font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-size: 18px; font-weight: 800; min-height: 46px; padding: 0 18px;
    border-radius: 10px; color: #111a24; text-transform: uppercase; cursor: pointer; }
  body.gf-pasek-on { padding-bottom: calc(var(--gf-nav, 0px) + var(--gf-pasek-h, 0px)) !important; }
  body.gf-pasek-on #chat-widget-container,
  body.gf-pasek-on #chatbase-bubble-button,
  body.gf-pasek-on div[id^="chatbase-bubble"] { bottom: calc(var(--gf-nav, 0px) + var(--gf-pasek-h, 0px)) !important; }
}

/* ---------- Tablet i desktop ---------- */
@media (min-width: 600px) {
  .gf-konf { padding: 24px; gap: 24px; border-radius: 18px; }
  .gf-h2 { font-size: 32px; }
  .gf-plat-btn { padding: 14px 16px; min-height: 70px; gap: 12px; }
  .gf-plat-ik { width: 42px; height: 42px; }
  .gf-plat-txt b { font-size: 17px; }
  .gf-plat-txt span { font-size: 12px; }
  .gf-tok { padding: 24px 24px 22px; gap: 22px; border-radius: 20px; }
  .gf-tok-label { font-size: 12px; letter-spacing: 1.6px; }
  .gf-tok-rzad { gap: 8px; }
  .gf-tok-pm { width: 54px; border-radius: 14px; font-size: 26px; }
  .gf-tok-wej { min-height: 74px; gap: 12px; padding: 6px 16px; border-radius: 16px; }
  .gf-tok-wej input { font-size: 50px; }
  .gf-tok-jedn { display: inline; font-size: 18px; }
  .gf-moneta { width: 46px; height: 46px; }
  .gf-moneta > span { width: 34px; height: 34px; }
  .gf-moneta > span svg { width: 17px; height: 17px; }
  .gf-moneta--mala { width: 26px; height: 26px; }
  .gf-pakiety { gap: 10px; }
  .gf-pak { border-radius: 14px; padding: 14px 6px 12px; min-height: 76px; }
  .gf-pak-hit { font-size: 10px; padding: 2px 8px; }
  .gf-pak-gora { gap: 6px; }
  .gf-pak-gora b { font-size: 28px; }
  .gf-pak-mon { width: 18px; height: 18px; }
  .gf-pak-mon svg { width: 10px; height: 10px; }
  .gf-pak-cena { font-size: 12px; margin-top: 4px; }
  .gf-nagrody { padding: 20px; gap: 16px; border-radius: 20px; }
  .gf-nagrody-hd b { font-size: 22px; }
  .gf-nagrody-lista { gap: 10px; }
  .gf-nagroda { border-radius: 16px; padding: 16px 8px 12px; gap: 6px; }
  .gf-nagroda-znak, .gf-nagroda-art { display: flex; }
  .gf-nagroda-nazwa { order: 0; font-size: 13px; line-height: 1.2; }
  .gf-nagroda-koszt { order: 0; font-size: 18px; }
  .gf-nagroda-koszt span { display: inline-block; }
  .gf-nagroda.is-on { background: linear-gradient(170deg, #fff6e2, #fff); box-shadow: 0 8px 20px rgba(245,166,35,.16); }
  .gf-nagroda.is-on .gf-nagroda-art { background: linear-gradient(150deg, #ffd27a, #f5a623); color: #111a24; }
  .gf-nagroda.is-on .gf-nagroda-znak { background: #1d7a3a; color: #fff; }
  .gf-nagroda.is-on .gf-ik-ok { display: block; }
  .gf-nagroda.is-on .gf-ik-klodka { display: none; }
  .gf-nagroda.is-on .gf-nagroda-koszt { color: #e0960f; }
  .gf-nagroda--top.is-on { background: linear-gradient(170deg, #1b2533, #0f151d); border-color: var(--gf-zloty); box-shadow: 0 10px 24px rgba(245,166,35,.25); }
  .gf-nagroda--top.is-on .gf-nagroda-nazwa { color: #fff; }
  .gf-klub-wej { min-height: 60px; padding: 0 16px; border-radius: 14px; }
  .gf-klub-wej input { font-size: 30px; }
  .gf-ok, .gf-brak { font-size: 14px; padding: 12px 14px; }
}
@media (min-width: 1024px) {
  .gf { gap: 18px; }
  .gf-uklad { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
  .gf-konf { padding: 28px; gap: 26px; }
  .gf-krok-hd { font-size: 16px; }
  .gf-tok-cena { flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; padding-bottom: 26px; justify-content: flex-end; }
  .gf-tok-cena-et { display: block; }
  .gf-tok-cena b { font-size: 52px; }
  .gf-tok-cena span { font-size: 13px; color: #b9c3cf; }
  .gf-sum { position: sticky; top: 12px; padding: 24px; gap: 16px; border-radius: 18px; }
  .gf-sum-cel { padding: 16px; gap: 14px; }
  .gf-sum-razem b { font-size: 36px; }
}

/* ---------- Animacje ---------- */
@keyframes gfKen { 0% { transform: scale(1); } 100% { transform: scale(1.07); } }
@keyframes gfTwinkle { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }
@keyframes gfShine { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes gfGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,166,35,0), 0 0 24px rgba(245,166,35,.18); } 50% { box-shadow: 0 0 0 4px rgba(245,166,35,.12), 0 0 34px rgba(245,166,35,.32); } }
@keyframes gfCoin { 0%, 100% { transform: rotateY(0); } 50% { transform: rotateY(180deg); } }
@keyframes gfSweep { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(320%); } }
.gf-obrot { animation: gfCoin 6s ease-in-out infinite; }
.gf-sheen { position: relative; overflow: hidden; }
.gf-sheen::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0)); animation: gfSweep 4.5s ease-in-out infinite; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .gf *, .gf *::before, .gf *::after, .gf-pasek * { animation: none !important; transition: none !important; }
}