/* escale. strona w wersji 2.
   Jeden kroj na calej stronie: Space Grotesk, ten sam co znak.
   Jezyk ruchu wziety z filmu F01: kropka marki jako bohater, pisanie
   z kursorem, prowadnice z wymiarem, rysowane winiety, twarde ciecia tla.
   Plasko: bez poswiat, szkla i ziarna. Trzy motywy sekcji: noc, mgla, akcent. */

@font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --noc: #07070c; --mgla: #f3f4f8; --popiol: #9ca0b4; --slaby: #6b6f85;
  --cyjan: #47d6e8; --chaber: #7c8cff; --fiolet: #a855f7; --zielen: #34d399;
  --gradient: linear-gradient(100deg, #47d6e8 0%, #7c8cff 50%, #a855f7 100%);
  --kroj: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --wyj: cubic-bezier(.165, .84, .44, 1);            /* szybkie wyjscie, dlugie hamowanie */
  --skok: cubic-bezier(.34, 1.7, .64, 1);            /* wyskok z lekkim przestrzeleniem */
  --szer: 78rem; --bok: clamp(1.25rem, 4vw, 3rem);
}
/* motywy: tlo, atrament, atrament przygaszony, akcent, plaski odpowiednik tla, linie */
.t-noc  { --tlo: #07070c; --atr: #f3f4f8; --atr2: #9ca0b4; --ak: #47d6e8; --tlop: #07070c; --linia: rgba(255, 255, 255, .13); --linia-mocna: rgba(255, 255, 255, .28); }
.t-mgla { --tlo: #f3f4f8; --atr: #07070c; --atr2: #50556b; --ak: #6d5dfc; --tlop: #f3f4f8; --linia: rgba(7, 7, 12, .14); --linia-mocna: rgba(7, 7, 12, .32); }
.t-ak   { --tlo: var(--gradient); --atr: #07070c; --atr2: rgba(7, 7, 12, .74); --ak: #ffffff; --tlop: #7c8cff; --linia: rgba(7, 7, 12, .2); --linia-mocna: rgba(7, 7, 12, .4); }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* bardzo szerokie ekrany: cala strona rosnie razem z oknem, zamiast zostawac waskim paskiem na srodku */
@media (min-width: 1800px) { html { font-size: min(calc(16px + (100vw - 1800px) * .0075), 24px); } }
body { background: var(--noc); color: var(--mgla); font: 400 1.0625rem/1.55 var(--kroj); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
main { overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cyjan); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--chaber); color: var(--noc); }

.pomin { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--mgla); color: var(--noc); padding: .6rem 1rem; border-radius: 0 0 10px 0; }
.pomin:focus { left: 0; }
.w { width: min(100% - 2 * var(--bok), var(--szer)); margin-inline: auto; }
.et { font: 500 .8rem/1.3 var(--kroj); letter-spacing: .14em; text-transform: uppercase; color: var(--atr2, var(--popiol)); }

/* kropka marki: ta sama w znaku, w naglowku i na koncu strony */
.kropka, .znak i { display: inline-block; width: .2em; height: .2em; border-radius: 50%; background: var(--gradient); margin-left: .06em; transform-origin: 50% 100%; }

/* ------------------------------------------------------------ przyciski */
.btn { display: inline-flex; align-items: center; gap: .6rem; padding: 1rem 1.6rem; border-radius: 999px; font: 500 1rem/1 var(--kroj); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .4s var(--wyj), background-color .25s, border-color .25s, color .25s; }
/* przycisk glowny podswietla sie od lewej do prawej i dostaje poswiate */
.btn--glowny { background: var(--gradient); color: #07070c; position: relative; overflow: hidden; box-shadow: 0 0 0 0 rgba(124, 140, 255, 0); transition: transform .4s var(--wyj), box-shadow .45s; }
/* gradient liczy sie od krawedzi ramki, nie od jej wnetrza: inaczej pod przezroczysta ramka na obu koncach
   wychodzi pasek z przeciwnego konca przejscia (fiolet po lewej, cyjan po prawej) */
.btn--glowny { background-origin: border-box; }
.btn--glowny::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 32%, rgba(255, 255, 255, .6) 50%, transparent 68%); transform: translateX(-130%); pointer-events: none; }
.btn--glowny:hover { transform: translateY(-2px); box-shadow: 0 12px 38px -8px rgba(124, 140, 255, .8); }
.btn--glowny:hover::after { transform: translateX(130%); transition: transform .75s var(--wyj); }
.hero .btn--glowny::after { animation: polysk 6.5s 2.6s var(--wyj) infinite; }
@keyframes polysk { 0%, 78% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.btn--cichy { border-color: var(--linia-mocna); color: var(--atr); }
.btn--cichy { transition: transform .4s var(--wyj), border-color .25s, box-shadow .4s; }
.btn--cichy:hover { border-color: var(--atr); box-shadow: 0 0 28px -8px rgba(124, 140, 255, .7); }
.btn--ciemny { background: var(--atr); color: var(--tlop); }
.btn--ciemny:hover { transform: translateY(-2px); }
.strz { display: inline-block; transition: transform .4s var(--wyj); }
.btn:hover .strz, .lacze:hover .strz { transform: translateX(5px); }
.lacze { display: inline-flex; gap: .5rem; align-items: center; font-weight: 500; text-decoration: none; color: var(--atr); border-bottom: 1px solid var(--linia-mocna); padding-bottom: .2rem; transition: border-color .25s; white-space: nowrap; }
.lacze:hover { border-color: var(--atr); }

/* ---------------------------------------------------------------- pasek
   Pasek bierze motyw sekcji, nad ktora akurat jest (ustawia go skrypt). */
.pasek { position: fixed; inset: 0 0 auto 0; z-index: 60; color: #f3f4f8; transition: background-color .2s, color .2s; }
.pasek.jest-tlo { background: rgba(7, 7, 12, .97); }
.pasek[data-t="mgla"] { color: #07070c; } .pasek[data-t="mgla"].jest-tlo { background: rgba(243, 244, 248, .97); }
.pasek[data-t="ak"] { color: #07070c; } .pasek[data-t="ak"].jest-tlo { background: transparent; }
.pasek__w { display: flex; align-items: center; gap: 2rem; height: 4.5rem; }
/* kolory rozwijanej karty ida za motywem paska */
.pasek { --pb: #07070c; --pl: rgba(255, 255, 255, .13); --pt2: #9ca0b4; --pn: rgba(124, 140, 255, .14); }
.pasek[data-t="mgla"] { --pb: #f3f4f8; --pl: rgba(7, 7, 12, .14); --pt2: #50556b; --pn: rgba(109, 93, 252, .1); }
.pasek.mega-otwarte { background: var(--pb); }
.znak { font: 600 1.55rem/1 var(--kroj); letter-spacing: -.04em; text-decoration: none; color: inherit; white-space: nowrap; }
.pasek__nav { display: flex; gap: 1.9rem; margin-left: auto; }
.pasek__nav a { text-decoration: none; font-size: .96rem; opacity: .72; transition: opacity .25s; }
.pasek__nav a:hover { opacity: 1; }
.pasek__nav { align-items: center; }
.nav-b { appearance: none; background: none; border: 0; padding: 0; font: inherit; font-size: .96rem; color: inherit; opacity: .72; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; transition: opacity .25s; }
.nav-b:hover, .nav-b[aria-expanded="true"] { opacity: 1; }
.nav-b i { width: .4rem; height: .4rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.12rem) rotate(45deg); transition: transform .35s var(--wyj); }
.nav-b[aria-expanded="true"] i { transform: translateY(.1rem) rotate(225deg); }
/* rozwijana karta: odslania sie spod paska, kolumny wchodza po kolei, po dolnej krawedzi biegnie swiatlo */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--pb); border-top: 1px solid var(--pl); border-bottom: 1px solid var(--pl); padding-top: 2.4rem; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .45s var(--wyj), visibility 0s .45s; }
.mega.otw { clip-path: inset(0 0 -2px 0); visibility: visible; transition: clip-path .45s var(--wyj), visibility 0s; }
.mega::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 18%; background: linear-gradient(90deg, transparent, #47d6e8, #a855f7, transparent); transform: translateX(-100%); }
.mega.otw::after { animation: bieg-linii 3.8s linear .3s infinite; }
@keyframes bieg-linii { to { transform: translateX(560%); } }
.mega__w { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(2rem, 4vw, 4rem); }
.mega.otw .mega__w > *, .mega.otw .mega__dol { animation: mega-wej .5s var(--wyj) both; animation-delay: calc(var(--n, 3) * 60ms + 90ms); }
@keyframes mega-wej { from { opacity: 0; transform: translateY(12px); } }
.mega__wstep h3 { font: 500 clamp(1.5rem, 2.2vw, 2rem)/1.08 var(--kroj); letter-spacing: -.035em; margin: .9rem 0 .8rem; text-wrap: balance; }
.mega__wstep > p:not(.et) { color: var(--pt2); max-width: 24rem; }
.mega__wstep .btn { margin-top: 1.5rem; padding: .85rem 1.3rem; font-size: .95rem; background: var(--gradient); color: #07070c; }
.mega .et { color: var(--pt2); }
.mega__kol .et { padding-bottom: .8rem; border-bottom: 1px solid var(--pl); margin-bottom: .5rem; }
.mega__kol a { display: grid; gap: .1rem; padding: .68rem .9rem; margin-inline: -.9rem; border-radius: 12px; text-decoration: none; transition: background-color .2s; }
.mega__kol a b { font-weight: 500; font-size: 1.06rem; letter-spacing: -.02em; }
.mega__kol a b::after { content: "→"; display: inline-block; margin-left: .45rem; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .35s var(--wyj); }
.mega__kol a span { color: var(--pt2); font-size: .9rem; }
.mega__kol a:hover, .mega__kol a:focus-visible { background: var(--pn); }
.mega__kol a:hover b::after, .mega__kol a:focus-visible b::after { opacity: 1; transform: none; }
.mega__dol { margin-top: 2rem; padding: 1.1rem 0 1.2rem; border-top: 1px solid var(--pl); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem 2rem; font-size: .9rem; color: var(--pt2); }
.mega__dol ul { display: flex; flex-wrap: wrap; gap: .4rem 1.8rem; }
.mega__dol li { display: flex; align-items: center; gap: .55rem; }
.mega__dol li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gradient); }
.mega__dol span { display: flex; gap: 1.8rem; }
.mega__dol .lacze { color: inherit; border-color: var(--pl); }
.mega-cien { position: fixed; inset: 4.5rem 0 0 0; z-index: -1; background: rgba(7, 7, 12, .55); opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.mega-otwarte .mega-cien { opacity: 1; visibility: visible; transition: opacity .35s, visibility 0s; }
.pasek .btn { padding: .72rem 1.2rem; font-size: .92rem; }
.pasek[data-t="mgla"] .btn--glowny, .pasek[data-t="ak"] .btn--glowny { background: #07070c; color: #f3f4f8; }
.pasek[data-t="ak"] .znak i { background: #07070c; }
/* przelacznik jezyka (PL / EN): w pasku obok przycisku rozmowy, na telefonie obok przycisku menu */
.jezyk { font: 500 .8rem/1 var(--kroj); letter-spacing: .1em; text-decoration: none; color: inherit; border: 1px solid currentColor; border-radius: 999px; padding: .55rem .75rem; opacity: .7; transition: opacity .25s; margin-right: -1rem; }
.jezyk:hover, .jezyk:focus-visible { opacity: 1; }
.pasek__menu { display: none; margin-left: auto; width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 1px solid currentColor; background: transparent; cursor: pointer; position: relative; }
.pasek__menu span { position: absolute; left: 30%; right: 30%; height: 1.5px; background: currentColor; transition: transform .4s var(--wyj), top .4s var(--wyj); }
.pasek__menu span:first-child { top: 42%; } .pasek__menu span:last-child { top: 58%; }
.menu-otwarte .pasek { color: #f3f4f8; background: transparent; }
.menu-otwarte .pasek__menu span:first-child { top: 50%; transform: rotate(45deg); }
.menu-otwarte .pasek__menu span:last-child { top: 50%; transform: rotate(-45deg); }
.szuflada { position: fixed; inset: 0; z-index: 55; background: #07070c; padding: 6.5rem var(--bok) 2rem; display: grid; align-content: start; gap: .2rem; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.menu-otwarte .szuflada { opacity: 1; visibility: visible; }
.szuflada a { font: 500 1.7rem/1.2 var(--kroj); letter-spacing: -.03em; text-decoration: none; padding: .7rem 0; border-bottom: 1px solid rgba(255, 255, 255, .13); }
.szuflada .et { margin-top: 1.4rem; }
.szuflada a.maly { font: 400 1.05rem/1.3 var(--kroj); letter-spacing: 0; color: var(--popiol); }

/* ------------------------------------------------------------ ruch w tle
   Plotno z siatka i swiatlami (rysuje je tlo.js) oraz wolno plynaca poswiata.
   Sekcja jest osobna warstwa, zeby tlo zostalo pod trescia bez ruszania jej ukladu. */
[data-tlo] { isolation: isolate; overflow: hidden; overflow: clip; }     /* clip: sekcji nie da sie przewinac w bok fokusem ani skryptem */
.tlo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); }
.hero .tlo { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.t-noc[data-tlo]::before { content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 46% at 74% 26%, rgba(76, 124, 255, .2), transparent 70%), radial-gradient(34% 42% at 14% 84%, rgba(168, 85, 247, .14), transparent 70%);
  animation: dryf 26s ease-in-out infinite alternate; }
@keyframes dryf { to { transform: translate3d(-6%, 5%, 0) scale(1.12) rotate(4deg); } }

/* ----------------------------------------------------------------- hero */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding: 7rem 0 3rem; overflow: hidden; background: var(--tlo); color: var(--atr); }
.hero h1 { position: relative; font: 500 clamp(3.3rem, 11.2vw, 11rem)/.92 var(--kroj); letter-spacing: -.055em; margin-top: 1.3rem; }
.hero__pod { font: 300 clamp(1.55rem, 3.7vw, 3.5rem)/1.06 var(--kroj); letter-spacing: -.035em; margin-top: clamp(.6rem, 1.6vh, 1.1rem); }
.hero h1 .l { display: block; }
.hero h1 .sl { display: inline-block; white-space: nowrap; }
.kursor { position: absolute; left: 0; top: 0; width: .055em; height: .8em; background: var(--cyjan); opacity: 0; pointer-events: none; }
.hero__dol { display: grid; grid-template-columns: minmax(0, 36rem) auto; justify-content: space-between; align-items: end; gap: 2rem 3rem; margin-top: clamp(2rem, 5vh, 3.4rem); }
.hero__lid { color: var(--atr2); font-size: clamp(1.05rem, 1.4vw, 1.25rem); }
.hero__akcje { display: flex; flex-wrap: wrap; gap: .8rem; }
.fakty { display: flex; flex-wrap: wrap; gap: .6rem 2.4rem; margin-top: clamp(2rem, 5vh, 3.4rem); padding-top: 1.3rem; border-top: 1px solid var(--linia); font-size: .95rem; color: var(--atr2); }
.fakty li { display: flex; align-items: center; gap: .6rem; }
.fakty li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gradient); flex: none; }
.fakty a { color: var(--atr); text-decoration: none; border-bottom: 1px solid var(--linia-mocna); }
/* prowadnice z wymiarem: sledza pole pisanego naglowka */
.prow { position: absolute; pointer-events: none; opacity: 0; transition: opacity .45s, clip-path .6s var(--wyj); clip-path: inset(0); }
.prow.h { left: 0; top: 0; width: 100%; height: 1px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .34) 0 5px, transparent 5px 10px); }
.prow.v { left: 0; top: 0; height: 100%; width: 1px; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .34) 0 5px, transparent 5px 10px); }
.prow.h.zwin { clip-path: inset(0 100% 0 0); opacity: 0; } .prow.v.zwin { clip-path: inset(0 0 100% 0); opacity: 0; }
.wym { position: absolute; left: 0; top: 0; font: 500 .76rem/1 var(--kroj); letter-spacing: .08em; color: var(--atr2); white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .3s; pointer-events: none; }
/* stany sprzed wejscia obowiazuja tylko, gdy dziala skrypt */
.js .hero h1 .zn { opacity: 0; }
.js .hero h1 .kropka { opacity: 0; }
.js .wejd { opacity: 0; transform: translateX(40px); filter: blur(8px); }
.js.po-wejsciu .hero h1 .zn, .js.po-wejsciu .hero h1 .kropka { opacity: 1; }
.js.po-wejsciu .wejd { opacity: 1; transform: none; filter: none; transition: opacity .5s, transform .65s var(--wyj), filter .5s; transition-delay: calc(var(--k, 0) * 110ms); }

/* -------------------------------------------------------------- plansze */
.uslugi__gora { display: flex; align-items: flex-end; gap: 1rem 2.5rem; margin-bottom: 1.6rem; }
.uslugi__gora .et { padding-bottom: 1rem; flex: none; }
.zakladki { overflow-x: auto; scrollbar-width: none; }
.uslugi .widok { padding-right: .9rem; margin-right: .5rem; }
.uslugi .widok b { font-size: clamp(.95rem, 1.15vw, 1.06rem); }
/* scena: ramka, w ktorej plansze tna sie jedna w druga jak kadry filmu */
.scena { display: grid; border-radius: 28px; overflow: hidden; border: 1px solid var(--linia-mocna); }
.plansza { background: var(--tlo); color: var(--atr); padding: clamp(2rem, 5vw, 4.5rem); display: grid; align-items: center; min-height: min(60vh, 34rem); }
.scena .plansza__w { width: 100%; }
/* z dzialajacym skryptem plansze leza jedna na drugiej i widac jedna */
.plansza, .dlaf__w.dlaf__w:hover, .dlaf__w.dlaf__w:focus-visible, .kafel--cta.kafel--cta { background-origin: border-box; }
/* talia: karta na wierzchu, pod nia brzegi dwoch nastepnych; zmiana to zdjecie karty z wierzchu */
.scena.gra { overflow: visible; border: 0; border-radius: 0; padding-bottom: 38px; touch-action: pan-y; }
.scena.gra .plansza { grid-area: 1 / 1; border-radius: 28px; border: 1px solid var(--linia-mocna); opacity: 0; visibility: hidden; z-index: 0; transform: translateY(48px) scale(.9); transform-origin: 50% 100%;
  transition: transform .7s cubic-bezier(.165, .84, .44, 1), opacity .45s, filter .6s, visibility 0s .7s; }
.scena.gra .plansza.t-noc { background: #0d0f1f; }
.scena.gra .plansza.wl, .scena.gra .plansza.n1, .scena.gra .plansza.n2, .scena.gra .plansza.wyszla { visibility: visible; transition: transform .7s cubic-bezier(.165, .84, .44, 1), opacity .45s, filter .6s, visibility 0s; }
.scena.gra .plansza.wl { opacity: 1; transform: none; z-index: 4; transition: transform .55s cubic-bezier(.165, .84, .44, 1), opacity .2s, filter .5s, visibility 0s; }
.scena.gra .plansza.n1 { opacity: 1; transform: translateY(18px) scale(.962); z-index: 2; filter: brightness(.74); }
.scena.gra .plansza.n2 { opacity: 1; transform: translateY(36px) scale(.924); z-index: 1; filter: brightness(.5); }
/* karta, ktora schodzi, chowa sie pod nowa: tresci nigdy nie widac jednej na drugiej */
.scena.gra .plansza.wyszla { opacity: 0; transform: translateY(-12px) scale(.985); z-index: 3; pointer-events: none; transition: transform .5s cubic-bezier(.165, .84, .44, 1), opacity .32s, visibility 0s; }
.scena.gra .plansza:not(.wl) .plansza__w { visibility: hidden; }
.scena__ster { display: flex; align-items: center; gap: 1.4rem; margin-top: 1rem; }
.scena__licz { font: 500 .8rem/1 var(--kroj); letter-spacing: .14em; color: var(--atr2); font-variant-numeric: tabular-nums; min-width: 3.4rem; }
.scena__dalej { appearance: none; background: none; border: 0; padding: .5rem 0; cursor: pointer; color: var(--atr); font: inherit; display: inline-flex; align-items: baseline; gap: .7rem; text-align: left; }
.scena__dalej span { font: 500 .74rem/1 var(--kroj); letter-spacing: .14em; text-transform: uppercase; color: var(--atr2); }
.scena__dalej b { font-weight: 500; font-size: 1.05rem; letter-spacing: -.02em; border-bottom: 1px solid var(--linia-mocna); padding-bottom: .16rem; transition: border-color .2s; }
.scena__dalej:hover b { border-color: var(--atr); }
.scena__strz { margin-left: auto; display: flex; gap: .5rem; }
.scena__strz button { appearance: none; width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1px solid var(--linia-mocna); background: none; color: var(--atr); font: 500 1.05rem/1 var(--kroj); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.scena__strz button:hover { background: var(--atr); color: var(--tlo); border-color: var(--atr); }
.plansza__w { display: grid; gap: clamp(1.1rem, 3vh, 2.2rem); }
.win { width: min(100%, 17rem); }
.wiersz { font: 300 clamp(2.1rem, 9.4vw, 5.4rem)/1.06 var(--kroj); letter-spacing: -.04em; display: flex; flex-direction: column; align-items: flex-start; gap: .16em; }   /* slowo zawsze w drugim wierszu: podkreslenie ma miejsce, a wymiana slowa nie rusza ukladu */
.w1 { position: relative; display: inline-block; }
.podk { position: absolute; left: -2%; top: 94%; width: 106%; height: .34em; overflow: visible; }
.podk path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1 1; }
.w2w { display: inline-block; overflow: hidden; padding: .12em .08em .22em 0; margin: -.12em 0 -.22em; }
.w2 { display: inline-block; font-weight: 600; }
.plansza__dol { display: flex; flex-wrap: wrap; gap: 1rem 3rem; align-items: end; justify-content: space-between; margin-top: .6rem; }
.plansza__dol p { max-width: 37rem; color: var(--atr2); font-size: clamp(1.02rem, 1.35vw, 1.2rem); }
.daje { display: flex; flex-wrap: wrap; gap: .45rem; }
.daje li, .dlaf__w li { border: 1px solid var(--linia-mocna); border-radius: 999px; padding: .42rem .95rem; font: 500 .9rem/1.2 var(--kroj); white-space: nowrap; }
/* winiety: kreska w kolorze atramentu, wypelnienia w akcencie motywu */
.v { width: 100%; height: auto; overflow: visible; }
.v * { transform-box: fill-box; transform-origin: 50% 50%; }
.v .kr { fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; }
.v .kr.g { stroke-width: 2.5; opacity: .45; }
.v .k { fill: currentColor; }
.v .b { fill: currentColor; transform-origin: 0% 50%; } .v .b.j { opacity: .3; } .v .b.jj { opacity: .1; } .v .b.ak { fill: var(--ak); transform-origin: 50% 50%; }
.v .wn { fill: currentColor; opacity: .13; }
.v .bieg, .v .lot { fill: var(--ak); opacity: 0; } .t-ak .v .bieg { fill: #07070c; }
.v .pier { fill: none; stroke: var(--ak); stroke-width: 3; opacity: 0; }
.v .kurs { fill: #fff; stroke: #07070c; stroke-width: 2; stroke-linejoin: round; transform: translate(150px, 246px); transform-origin: 0 0; }
.v .tor { fill: none; stroke: currentColor; stroke-width: 2; opacity: .4; stroke-dasharray: 1 1; }
.v .ogon { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; opacity: 0; stroke-dasharray: .2 2; }
.v .traf { fill: var(--ak); }
.v .wyp { fill: currentColor; } .v .odp { transform-origin: 100% 100%; }
.v .lin { fill: none; stroke: var(--tlop); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 1 1; }
.v .kr.a { stroke: var(--ak); }
.v .ob { fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; } .v .ob.g { stroke-width: 2.5; opacity: .45; }
.v .k.j { opacity: .3; } .v .zb { fill: var(--tlop); transform-origin: 0% 50%; } .v .sy { transform-origin: 50% 100%; }
.v .zeby { fill: none; stroke: currentColor; } .v .zeby.a { stroke: var(--ak); }
.v .wt { fill: var(--ak); } .v .zn { fill: none; stroke: var(--tlop); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
/* na szerokim ekranie: tekst z lewej (slowo zawsze w drugim wierszu), winieta duza z prawej */
@media (min-width: 1021px) {
  .plansza__w { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "wiersz win" "dol win"; column-gap: clamp(2rem, 5vw, 5rem); row-gap: 1.8rem; }
  .win { grid-area: win; width: min(100%, 30rem); justify-self: end; align-self: center; }
  .wiersz { grid-area: wiersz; align-self: end; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: .12em; font-size: clamp(2.2rem, 4.4vw, 4.4rem); }
  .plansza__dol { grid-area: dol; align-self: start; flex-direction: column; align-items: flex-start; margin-top: 0; }
}

/* --------------------------------------------------------------- sekcje */
.sekcja { padding: clamp(5rem, 10vw, 9rem) 0; background: var(--tlo); color: var(--atr); position: relative; }
.sekcja--ciag { padding-top: 0; }
.glowa { display: grid; gap: 1.2rem; max-width: 54rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.glowa h2 { font: 500 clamp(2rem, 4.6vw, 4rem)/1.02 var(--kroj); letter-spacing: -.04em; text-wrap: balance; }
.glowa > p:not(.et) { color: var(--atr2); max-width: 38rem; font-size: 1.12rem; }
/* wejscie tekstu jak w filmie: z prawej, z rozmycia */
.js .r { opacity: 0; transform: translateX(36px); filter: blur(8px); transition: opacity .5s, transform .65s var(--wyj), filter .5s; transition-delay: calc(var(--k, 0) * 90ms); }
.js .widac .r, .js .r.widac { opacity: 1; transform: none; filter: none; }

/* dla firm: wiersz po najechaniu przelacza sie na kolor marki, bez przejscia (twarde ciecie) */
.dlaf { border-bottom: 1px solid var(--linia-mocna); }
.dlaf__w { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, .95fr) auto; gap: 1rem clamp(1.5rem, 3vw, 3rem); align-items: center; padding: clamp(1.4rem, 2.6vw, 2.2rem) 1rem; margin-inline: -1rem; border-top: 1px solid var(--linia-mocna); text-decoration: none; color: inherit; }
.dlaf__w h3 { font: 500 clamp(1.4rem, 2.4vw, 2.1rem)/1.08 var(--kroj); letter-spacing: -.035em; }
.dlaf__w p { color: var(--atr2); }
.dlaf__w ul { display: flex; flex-wrap: wrap; gap: .4rem; }
.kolko { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--linia-mocna); display: grid; place-items: center; font-size: 1.1rem; transition: transform .4s var(--wyj); }
.dlaf__w:hover, .dlaf__w:focus-visible { background: var(--gradient); border-top-color: transparent; outline: none; }
.dlaf__w:hover + .dlaf__w, .dlaf__w:focus-visible + .dlaf__w { border-top-color: transparent; }
.dlaf__w:hover p, .dlaf__w:focus-visible p { color: rgba(7, 7, 12, .78); }
.dlaf__w:hover .kolko, .dlaf__w:focus-visible .kolko { background: #07070c; color: #f3f4f8; border-color: #07070c; transform: translateX(6px); }

/* proces: wezly na linii, punkt biegnie od wezla do wezla, kazdy zapala sie z ptaszkiem */
.kroki { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; position: relative; }
.krok { position: relative; display: grid; gap: .8rem; align-content: start; }
.wezel { width: 56px; height: 56px; border-radius: 16px; border: 2px solid var(--linia-mocna); display: grid; place-items: center; margin-bottom: .7rem; transition: border-color .3s, background-color .3s; }
.wezel svg { width: 26px; height: 26px; }
.wezel path { fill: none; stroke: var(--cyjan); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset .3s var(--wyj) .05s; }
.krok::after { content: ""; position: absolute; left: calc(56px + .7rem); right: calc(-2rem + .7rem); top: 27px; height: 2px; background: var(--linia-mocna); transform-origin: 0 0; transition: transform .4s var(--wyj); }
.krok:nth-last-child(2)::after { display: none; }
.krok h3 { font: 500 1.3rem/1.2 var(--kroj); letter-spacing: -.02em; transition: opacity .4s; }
.krok p { color: var(--atr2); font-size: .98rem; transition: opacity .4s; }
.biegacz { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--cyjan); opacity: 0; pointer-events: none; }
.js .kroki .krok:not(.jest) .wezel path { stroke-dashoffset: 1; opacity: 0; }
.js .kroki .krok:not(.jest) h3, .js .kroki .krok:not(.jest) p { opacity: .3; }
.js .kroki .krok:not(.poszlo)::after { transform: scaleX(0); }
.krok.jest .wezel { border-color: var(--atr); background: rgba(255, 255, 255, .08); }
/* rozbudowany przebieg: co robimy, co dostajesz, czego potrzebujemy */
.etapy { margin-top: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--linia); }
.etap { display: grid; grid-template-columns: minmax(0, .9fr) repeat(3, minmax(0, 1fr)); gap: 1rem clamp(1.5rem, 3vw, 3rem); padding: clamp(1.4rem, 2.6vw, 2.1rem) 0; border-top: 1px solid var(--linia); }
.etap h3 { font: 500 clamp(1.25rem, 1.9vw, 1.6rem)/1.15 var(--kroj); letter-spacing: -.03em; display: flex; gap: .9rem; align-items: baseline; }
.etap h3 i { font-style: normal; font-size: .8rem; letter-spacing: .14em; color: var(--ak); }
.etap .et { margin-bottom: .45rem; }
.etap div p:not(.et) { color: var(--atr2); font-size: .98rem; }
.pod { margin-top: clamp(2rem, 4vw, 3rem); }
.zasady { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--linia); }
.zasady h3 { font: 500 1.15rem/1.25 var(--kroj); letter-spacing: -.015em; margin-bottom: .5rem; }
.zasady p { color: var(--atr2); font-size: .98rem; }

/* panel do przegladania: lista widokow i okno z wersja pokazowa */
/* panel na cala szerokosc: zakladki widokow nad oknem, obok przycisk pelnego ekranu */
.pokaz__gora { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.pokaz__lista, .zakladki { display: flex; flex: 1; min-width: 0; border-bottom: 1px solid var(--linia-mocna); }
.widok { appearance: none; background: none; border: 0; text-align: left; padding: .85rem 1.25rem .95rem 0; margin-right: .6rem; cursor: pointer; position: relative; color: var(--atr2); white-space: nowrap; }
.widok b { font: 500 clamp(1rem, 1.35vw, 1.2rem)/1.2 var(--kroj); letter-spacing: -.025em; color: var(--atr); opacity: .45; transition: opacity .3s; }
.widok span { display: none; }
.widok:hover b { opacity: .8; }
.widok.wl b { opacity: 1; }
.widok.wl { box-shadow: inset 0 -2px 0 var(--atr); }
.pokaz__sam { flex: none; margin-bottom: .6rem; }
.pokaz__opis { color: var(--atr2); margin: 1rem 0 1.3rem; min-height: 1.6em; }
/* postep widoku, gdy panel przeglada sie sam */
.widok::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--ak); transform: scaleX(0); transform-origin: 0 0; z-index: 1; }
.pokaz.sam .widok.wl::before, .uslugi.sam .widok.wl::before { animation: postep var(--czas, 4.6s) linear forwards; }
@keyframes postep { to { transform: scaleX(1); } }
.okno { position: relative; height: clamp(30rem, 76vh, 46rem); border: 2px solid var(--atr); border-radius: 18px; overflow: hidden; background: #fff; }
.okno__belka { position: absolute; left: 0; right: 0; top: 0; height: 2.8rem; padding: 0 .6rem 0 1.1rem; display: flex; align-items: center; gap: .42rem; border-bottom: 2px solid var(--atr); background: var(--tlo); }
.okno--demo { height: clamp(31rem, 74vh, 45rem); }
.okno__zamknij { margin-left: auto; appearance: none; border: 0; background: var(--atr); color: var(--tlop); border-radius: 999px; padding: .4rem .95rem; font: 500 .85rem/1 var(--kroj); cursor: pointer; }
/* pelny ekran po kliknieciu "Sprawdz sam": okno zajmuje cala strone, reszta jest przyciemniona */
.panel-pelny #panel { position: relative; z-index: 120; }
.okno.pelny { position: fixed; inset: clamp(.4rem, 1.6vw, 1.4rem); height: auto; z-index: 120; box-shadow: 0 0 0 100vmax rgba(7, 7, 12, .86); }
.panel-pelny { overflow: hidden; }
.okno__belka i { width: 9px; height: 9px; border-radius: 50%; background: var(--atr); }
.okno__belka span { margin-left: .7rem; font: 500 .74rem/1 var(--kroj); letter-spacing: .04em; color: var(--atr2); }
.okno__obraz { position: absolute; left: 0; right: 0; top: 2.8rem; bottom: 0; overflow: hidden; background: #0a0a10; }
.okno__obraz img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; visibility: hidden; }
.okno__obraz img.wl { visibility: visible; }
.okno__kurs { position: absolute; left: 62%; top: 70%; width: clamp(14px, 2.2%, 22px); overflow: visible; z-index: 90; opacity: 0; transition: left .75s var(--wyj), top .75s var(--wyj), opacity .3s; }
.okno__kurs path { fill: #fff; stroke: #07070c; stroke-width: 2; stroke-linejoin: round; }
.okno__pier { position: absolute; left: 62%; top: 70%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 2.5px solid var(--cyjan); border-radius: 50%; opacity: 0; z-index: 91; pointer-events: none; }
.pokaz.sam .okno__kurs { opacity: 1; }
.pokaz__uwaga { margin-top: 1rem; font-size: .86rem; color: var(--atr2); text-align: right; }
.zasady--panel { margin-top: clamp(2.5rem, 5vw, 4rem); }
.js .okno:not(.gra) > *, .js .okno:not(.gra) img.wl { visibility: hidden; }
.opinie { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; margin-top: clamp(3.5rem, 7vw, 6rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--linia); }
.ocena { display: grid; gap: .9rem; }
.ocena__liczba { font: 500 clamp(4rem, 8vw, 6.5rem)/.85 var(--kroj); letter-spacing: -.06em; }
.ocena p:not(.ocena__liczba) { color: var(--atr2); line-height: 1.9; }
.glos blockquote { font: 400 clamp(1.1rem, 1.5vw, 1.3rem)/1.4 var(--kroj); letter-spacing: -.012em; }
.glos figcaption { margin-top: .8rem; color: var(--atr2); font-size: .92rem; }

/* ---------------------------------------------------------------- koniec */
.wielki { font: 600 clamp(4.4rem, 23vw, 20rem)/.82 var(--kroj); letter-spacing: -.06em; white-space: nowrap; position: relative; margin-left: -.04em; }
.wielki span { display: inline-block; }
.js .wielki:not(.gra) span, .js .wielki:not(.gra) .kropka { opacity: 0; }
.rzad { display: flex; flex-wrap: wrap; gap: .4rem 0; font-size: clamp(1rem, 1.6vw, 1.35rem); color: var(--atr2); margin: clamp(1.5rem, 3vw, 2.4rem) 0 clamp(3rem, 7vw, 6rem); }
.rzad li { display: flex; align-items: center; }
.rzad li + li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gradient); margin: 0 1rem; }
.js .rzad:not(.gra) li { opacity: 0; }
.koniec__w { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--linia); }
.koniec h2 { font: 500 clamp(1.8rem, 3.4vw, 3rem)/1.06 var(--kroj); letter-spacing: -.035em; text-wrap: balance; }
.koniec__lid { color: var(--atr2); font-size: 1.12rem; max-width: 30rem; margin: 1.4rem 0 2rem; }
.kontakty { display: grid; gap: .2rem; }
.kontakty a { font: 500 clamp(1.25rem, 2vw, 1.6rem)/1.5 var(--kroj); letter-spacing: -.025em; text-decoration: none; width: fit-content; border-bottom: 1px solid transparent; transition: border-color .25s; }
.kontakty a:hover { border-color: var(--cyjan); }
.formularz { display: grid; gap: 1.3rem; }
.formularz label { display: grid; gap: .5rem; font-size: .86rem; letter-spacing: .02em; color: var(--atr2); }
.formularz input, .formularz textarea { width: 100%; background: rgba(255, 255, 255, .045); border: 1px solid var(--linia-mocna); border-radius: 14px; padding: .9rem 1.05rem; color: var(--atr); font: 400 1.05rem/1.4 var(--kroj); transition: border-color .25s, box-shadow .25s, background-color .25s; }
.formularz input:hover, .formularz textarea:hover { border-color: rgba(255, 255, 255, .45); }
.formularz input:focus, .formularz textarea:focus { outline: none; border-color: var(--cyjan); box-shadow: 0 0 0 4px rgba(71, 214, 232, .16); background: rgba(255, 255, 255, .07); }
/* pola wypelnione przez przegladarke zostaja ciemne, bez bladoniebieskiego tla */
.formularz input:-webkit-autofill, .formularz input:-webkit-autofill:hover, .formularz input:-webkit-autofill:focus, .formularz textarea:-webkit-autofill { -webkit-text-fill-color: #f3f4f8; caret-color: #f3f4f8; box-shadow: 0 0 0 100rem #14141f inset; border-color: rgba(124, 140, 255, .7); transition: background-color 9999s; }
.formularz input:autofill { box-shadow: 0 0 0 100rem #14141f inset; border-color: rgba(124, 140, 255, .7); }
.formularz textarea { min-height: 6.5rem; resize: vertical; }
.formularz .dwa { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.formularz .btn { justify-self: start; margin-top: .4rem; }
.formularz__stan { font-size: .95rem; min-height: 1.4em; color: var(--atr2); }
.formularz__stan.ok { color: var(--zielen); } .formularz__stan.zle { color: #ff8f8f; }
.formularz small { color: var(--slaby); font-size: .82rem; line-height: 1.5; }
.formularz small a { color: var(--atr2); }
.miod { position: absolute; left: -9999px; }

/* ---------------------------------------------------------------- stopka */
.stopka { background: var(--tlo); border-top: 1px solid var(--linia); padding: 3.5rem 0 2.5rem; color: var(--atr2); font-size: .95rem; }
.stopka__w { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 2rem; }
.stopka .znak { font-size: 1.9rem; color: var(--atr); }
.stopka .znak + p { margin-top: 1rem; max-width: 19rem; }
.stopka h3 { font: 500 .74rem/1 var(--kroj); letter-spacing: .14em; text-transform: uppercase; color: var(--slaby); margin-bottom: 1rem; }
.stopka li { margin: .45rem 0; }
.stopka a { text-decoration: none; transition: color .25s; }
.stopka a:hover { color: var(--atr); }
.stopka__spol { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; } .stopka__spol a { color: var(--atr); border-bottom: 1px solid var(--linia-mocna); padding-bottom: .1rem; } .stopka__spol a:hover { border-color: var(--atr); }
/* baner zgody na statystyki: na dole ekranu, oba przyciski rownie widoczne */
.zgoda { position: fixed; left: 50%; bottom: 1rem; z-index: 110; width: min(calc(100% - 2rem), 46rem); translate: -50% 1.5rem; opacity: 0; transition: translate .4s var(--wyj), opacity .3s; display: grid; gap: 1rem; padding: 1.2rem 1.4rem;
  background: #10111f; color: #f3f4f8; border: 1px solid rgba(255, 255, 255, .22); border-radius: 18px; box-shadow: 0 24px 70px -20px rgba(0, 0, 0, .7); font-size: .92rem; line-height: 1.5; }
.zgoda[hidden] { display: none; } .zgoda.jest { translate: -50% 0; opacity: 1; }
.zgoda p { color: #c9ccda; } .zgoda a { color: #f3f4f8; }
.zgoda__akcje { display: flex; flex-wrap: wrap; gap: .6rem; }
.zgoda__akcje .btn { flex: 1 1 11rem; justify-content: center; padding: .72rem 1rem; font-size: .93rem; background: transparent; color: #f3f4f8; border-color: rgba(255, 255, 255, .36); }
.zgoda__akcje .btn:hover { background: #f3f4f8; color: #07070c; border-color: #f3f4f8; box-shadow: none; }
@media (min-width: 721px) { .zgoda { left: auto; right: 1.4rem; bottom: 1.4rem; width: 27rem; translate: 0 1.5rem; } .zgoda.jest { translate: 0 0; } }
@media (max-width: 720px) { .zgoda { padding: 1rem 1.1rem; gap: .8rem; font-size: .86rem; } .zgoda__akcje .btn { flex-basis: 8rem; padding: .66rem .6rem; font-size: .86rem; } }
.stopka__dol { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--linia); display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: space-between; font-size: .86rem; color: var(--slaby); }

/* ------------------------------------------------------------ podstrony */
/* naglowek kazdej podstrony ma wysokosc ekranu, tak jak na stronie glownej */
.hero--pod { padding-bottom: 4rem; }
.hero--pod h1 { font-size: clamp(2.6rem, 6.4vw, 5.8rem); line-height: .96; }
.hero--pod h1.wejd { font-size: clamp(2.1rem, 4.4vw, 3.8rem); line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; }
.hero--pod .hero__pod { font-size: clamp(1.35rem, 2.4vw, 2.1rem); }
.hero--pod .hero__lid { margin-top: 1.6rem; max-width: 36rem; }
.hero--pod .hero__akcje { margin-top: 2rem; }
.hero__siatka { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero--sam { padding: 7rem 0 4rem; }
.hero--sam .hero__siatka { grid-template-columns: minmax(0, 54rem); }
.win--hero { grid-area: auto; width: min(100%, 60vh); justify-self: end; }
.zakres { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 5vw, 5rem); border-bottom: 1px solid var(--linia-mocna); }
.zakres__p { border-top: 1px solid var(--linia-mocna); padding: clamp(1.3rem, 2.4vw, 2rem) 0; display: grid; gap: .5rem; align-content: start; }
.zakres__p h3 { font: 500 clamp(1.25rem, 1.9vw, 1.6rem)/1.15 var(--kroj); letter-spacing: -.03em; }
.zakres__p p { color: var(--atr2); max-width: 34rem; }
.przyklad { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--linia); }
.przyklad h3 { font: 500 clamp(1.4rem, 2.4vw, 2rem)/1.1 var(--kroj); letter-spacing: -.03em; margin: .8rem 0 .7rem; }
.przyklad p:not(.et) { color: var(--atr2); }
.stan { border: 1px solid var(--linia-mocna); border-radius: 18px; padding: .4rem 1.4rem; }
.sw { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.2rem; padding: 1rem 0; border-bottom: 1px solid var(--linia); }
.sw:last-child { border-bottom: 0; }
.sw span { color: var(--atr2); font-size: .92rem; } .sw b { font-weight: 500; }
.faq { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq .glowa { margin-bottom: 0; }
.pytania { border-bottom: 1px solid var(--linia-mocna); }
.pytania details { border-top: 1px solid var(--linia-mocna); }
.pytania summary { cursor: pointer; list-style: none; padding: 1.25rem 3rem 1.25rem 0; font: 500 clamp(1.1rem, 1.6vw, 1.3rem)/1.3 var(--kroj); letter-spacing: -.02em; position: relative; }
.pytania summary::-webkit-details-marker { display: none; }
.pytania summary::after { content: "+"; position: absolute; right: .3rem; top: 50%; font: 300 1.7rem/1 var(--kroj); transform: translateY(-50%); transition: transform .35s var(--wyj); }
.pytania details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.pytania details p { padding: 0 3rem 1.4rem 0; color: var(--atr2); max-width: 44rem; }
.powiazane { display: flex; flex-wrap: wrap; gap: 1rem 2.2rem; align-items: baseline; margin-top: clamp(3rem, 6vw, 5rem); }
.powiazane .et { flex-basis: 100%; }
.blok { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 1rem clamp(2rem, 5vw, 5rem); padding: clamp(1.8rem, 3.5vw, 3rem) 0; border-top: 1px solid var(--linia-mocna); }
.blok:last-child { border-bottom: 1px solid var(--linia-mocna); }
.blok h2 { font: 500 clamp(1.5rem, 2.6vw, 2.2rem)/1.08 var(--kroj); letter-spacing: -.035em; }
.blok p { color: var(--atr2); max-width: 40rem; } .blok p + p { margin-top: 1rem; }
.zasady--bez { margin-top: 0; padding-top: 0; border-top: 0; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
/* galeria animacji: kafle graja niemy podglad, klikniecie otwiera duze okno */
/* galeria: film-wizytowka i dwie animacje w pierwszym rzedzie, dalej rowne rzedy po piec; wszystkie kafle maja te sama wysokosc.
   Odstep 1,5% sprawia, ze kafel 16:9 na trzy kolumny jest dokladnie tak wysoki jak kafel 9:16 na jedna. */
.kolaz { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 1.5%; row-gap: clamp(1.3rem, 2.2vw, 2.2rem); }
.kafel { margin: 0; min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: .7rem; }
.kafel figcaption { display: grid; gap: .12rem; min-height: 2.5rem; align-content: start; }
.kafel figcaption b { font-weight: 500; font-size: .95rem; line-height: 1.25; letter-spacing: -.02em; }
.kafel figcaption i { font-style: normal; font-size: .78rem; line-height: 1.3; color: var(--atr2); }
.kafel--szeroki { grid-column: span 3; }
.kafel--szeroki .klip { aspect-ratio: auto; height: 100%; }
.kafel--cta { grid-column: 1 / -1; border: 1px solid var(--linia-mocna); border-radius: 20px; padding: clamp(1.2rem, 2.2vw, 2rem) clamp(1.2rem, 2.6vw, 2.4rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem 2rem;
  text-decoration: none; color: inherit; background: linear-gradient(160deg, rgba(124, 140, 255, .16), rgba(168, 85, 247, .05) 60%, transparent); transition: border-color .3s, background-color .3s; }
.kafel--cta:hover { border-color: var(--atr); }
.kafel--cta .lacze { align-self: flex-start; }
.kafel--cta p { flex: 1 0 100%; }
.kafel--cta b { font-weight: 500; font-size: clamp(1.3rem, 2.1vw, 1.9rem); line-height: 1.12; letter-spacing: -.035em; }
.klip { appearance: none; padding: 0; background: #0d0d16; color: inherit; font: inherit; cursor: pointer; position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; border: 0; border-radius: 20px; overflow: hidden;
  transition: scale .5s var(--wyj), box-shadow .4s, background-color .3s; }
.js .klip:not(.widac) { background: transparent; }
/* film kafla jest rysowany na plotnie (galeria.js); plakat i plotno odslaniaja sie razem od dolu */
.klip__w { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: translateY(22px); transition: opacity .6s, transform .8s var(--wyj); }      /* tylko przezroczystosc i przesuniecie: nie kosztuja przy przewijaniu */
.klip.widac .klip__w { opacity: 1; transform: none; }
.klip__w canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; } .klip__w.ma-obraz canvas { opacity: 1; }
.js .klip video { left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
.klip:hover, .klip:focus-visible { scale: 1.02; box-shadow: 0 30px 80px -30px rgba(124, 140, 255, .55); }
.klip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kino { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100vh; }
.kino[open] { display: grid; place-items: center; }
.kino::backdrop { background: rgba(7, 7, 12, .92); }
.kino video { border-radius: 16px; background: #000; }
.kino__zamknij { position: fixed; top: 1rem; right: 1rem; appearance: none; border: 0; background: #f3f4f8; color: #07070c; border-radius: 999px; padding: .55rem 1.1rem; font: 500 .9rem/1 var(--kroj); cursor: pointer; }

/* --------------------------------------------- akcenty strony "Reklamy motion"
   Tlo lekko przesuniete w fiolet, ksztalty pojawiajace sie i znikajace w tle (tlo.js). */
.strona-motion .t-noc { --tlo: #0a0614; }
.strona-motion .t-mgla { --tlo: #f1eefb; }
.strona-motion .t-noc[data-tlo]::before { background: radial-gradient(40% 48% at 76% 24%, rgba(168, 85, 247, .26), transparent 70%), radial-gradient(36% 44% at 12% 86%, rgba(71, 214, 232, .16), transparent 70%); }

/* wyrozniki stron uslug: kazda ma wlasny odcien nocy i wlasne polozenie poswiaty (ksztalty w tle rysuje tlo.js) */
.strona-czat .t-noc { --tlo: #060917; } .strona-czat .t-mgla { --tlo: #eef5f9; }
.strona-czat .t-noc[data-tlo]::before { background: radial-gradient(40% 46% at 78% 22%, rgba(71, 214, 232, .22), transparent 70%), radial-gradient(34% 42% at 10% 86%, rgba(124, 140, 255, .16), transparent 70%); }
.strona-wezly .t-noc { --tlo: #07081a; } .strona-wezly .t-mgla { --tlo: #eff0fb; }
.strona-wezly .t-noc[data-tlo]::before { background: radial-gradient(40% 46% at 20% 24%, rgba(124, 140, 255, .24), transparent 70%), radial-gradient(34% 42% at 86% 84%, rgba(71, 214, 232, .15), transparent 70%); }
.strona-okno .t-noc { --tlo: #0a0716; } .strona-okno .t-mgla { --tlo: #f2effb; }
.strona-okno .t-noc[data-tlo]::before { background: radial-gradient(42% 48% at 72% 30%, rgba(168, 85, 247, .22), transparent 70%), radial-gradient(34% 42% at 18% 80%, rgba(124, 140, 255, .18), transparent 70%); }
.strona-wtyczki .t-noc { --tlo: #060a16; } .strona-wtyczki .t-mgla { --tlo: #eef4f8; }
.strona-wtyczki .t-noc[data-tlo]::before { background: radial-gradient(38% 46% at 16% 22%, rgba(71, 214, 232, .2), transparent 70%), radial-gradient(38% 46% at 84% 80%, rgba(168, 85, 247, .18), transparent 70%); }
.strona-pismo .t-noc { --tlo: #080816; } .strona-pismo .t-mgla { --tlo: #f1f1f9; }
.strona-pismo .t-noc[data-tlo]::before { background: radial-gradient(50% 44% at 50% 12%, rgba(124, 140, 255, .22), transparent 70%), radial-gradient(30% 40% at 88% 88%, rgba(168, 85, 247, .12), transparent 70%); }
.strona-tarcza .t-noc { --tlo: #0a0712; } .strona-tarcza .t-mgla { --tlo: #f4eff8; }
.strona-tarcza .t-noc[data-tlo]::before { background: radial-gradient(36% 44% at 80% 50%, rgba(168, 85, 247, .24), transparent 70%), radial-gradient(34% 42% at 14% 30%, rgba(71, 214, 232, .14), transparent 70%); }
.hero .et a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--linia-mocna); }
/* etap na planszy: trzy krotkie odpowiedzi zamiast tabeli */
.etap3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.6rem; width: 100%; margin-top: .4rem; }
.etap3 dt { font: 500 .74rem/1.3 var(--kroj); letter-spacing: .14em; text-transform: uppercase; color: var(--atr2); margin-bottom: .4rem; }
.etap3 dd { font-weight: 500; font-size: 1rem; line-height: 1.35; }
.dlaf__w--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; }

/* strony tekstowe: wpisy bloga i dokumenty */
.art { max-width: 46rem; font-size: 1.1rem; line-height: 1.7; }
.art > * + * { margin-top: 1.2rem; }
.art h2 { font: 500 clamp(1.5rem, 2.6vw, 2.1rem)/1.12 var(--kroj); letter-spacing: -.035em; margin-top: 2.8rem; }
.art h3 { font: 500 1.3rem/1.2 var(--kroj); letter-spacing: -.02em; margin-top: 2rem; }
.art ul, .art ol { padding-left: 1.3rem; list-style: disc; } .art ol { list-style: decimal; }
.art li + li { margin-top: .5rem; }
.art a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.art figure img { border-radius: 18px; width: 100%; height: auto; }
.art .article-cta { margin-top: 3rem; padding: 1.6rem 1.8rem; border: 1px solid var(--linia-mocna); border-radius: 20px; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.art .article-cta p { font-weight: 500; max-width: 26rem; line-height: 1.4; } .art .article-cta .btn { text-decoration: none; background: #07070c; color: #f3f4f8; }
.art .legal-toc { display: grid; gap: .3rem; }
.wpisy { border-bottom: 1px solid var(--linia-mocna); }
.wpis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: .6rem clamp(1.5rem, 3vw, 3rem); align-items: center; padding: clamp(1.3rem, 2.4vw, 2rem) 1rem; margin-inline: -1rem; border-top: 1px solid var(--linia-mocna); text-decoration: none; color: inherit; }
.wpis .et { grid-column: 1 / -1; }
.wpis h2 { font: 500 clamp(1.3rem, 2.1vw, 1.8rem)/1.12 var(--kroj); letter-spacing: -.03em; }
.wpis > p:not(.et) { color: var(--atr2); }
.wpis:hover, .wpis:focus-visible { background: var(--gradient); border-top-color: transparent; outline: none; }
.wpis:hover + .wpis, .wpis:focus-visible + .wpis { border-top-color: transparent; }
.wpis:hover p, .wpis:focus-visible p { color: rgba(7, 7, 12, .78); }
.wpis:hover .kolko, .wpis:focus-visible .kolko { background: #07070c; color: #f3f4f8; border-color: #07070c; transform: translateX(6px); }

/* -------------------------------------------------------------- telefony */
@media (max-width: 1020px) {
  .kolaz { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.5%; }
  .kafel--szeroki, .kafel--cta { grid-column: 1 / -1; } .kafel--szeroki .klip { aspect-ratio: 16 / 9; height: auto; }
  .pasek__nav, .pasek .btn, .mega, .mega-cien { display: none; }
  .pasek__menu { display: block; margin-left: 0; } .jezyk { margin-left: auto; margin-right: -1.1rem; }
  .hero__dol { grid-template-columns: 1fr; }
  .koniec__w, .hero__siatka, .przyklad, .faq, .blok { grid-template-columns: 1fr; }
  .etap { grid-template-columns: 1fr 1fr; } .etap h3 { grid-column: 1 / -1; }
  .win--hero { justify-self: start; width: min(70vw, 34vh); }
  .pokaz__gora { flex-direction: column-reverse; align-items: stretch; }
  .pokaz__sam { justify-content: center; margin-bottom: 0; }
  .pokaz__lista, .zakladki { gap: .5rem; overflow-x: auto; border-bottom: 0; padding-bottom: .3rem; scrollbar-width: none; }
  .uslugi__gora { display: block; } .uslugi__gora .et { padding-bottom: .9rem; }
  .widok { border: 1px solid var(--linia-mocna); border-radius: 999px; padding: .55rem 1.05rem; margin-right: 0; flex: none; }
  .widok b { font-size: .98rem; opacity: 1; }
  .widok::before { display: none; }
  .widok.wl { background: var(--atr); border-color: var(--atr); box-shadow: none; } .widok.wl b { color: var(--tlo); }
  .pokaz__uwaga { text-align: left; }
  .dlaf__w { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; } .dlaf__w ul { grid-column: 1 / 3; }
  .opinie { grid-template-columns: 1fr 1fr; } .ocena { grid-column: 1 / -1; }
  .kroki { grid-template-columns: 1fr 1fr; row-gap: 2.6rem; }
  .krok:nth-child(2)::after { display: none; }
  .stopka__w { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 1rem; }
  .hero { padding-top: 6rem; }
  .hero__akcje .btn { flex: 1 1 100%; justify-content: center; }
  .zasady, .opinie, .formularz .dwa, .zakres, .sw, .wpis { grid-template-columns: 1fr; }
  .sw { gap: .2rem; } .wpis .kolko { display: none; }
  .hero--sam { padding: 7.5rem 0 3rem; }
  .etap { grid-template-columns: 1fr; }
  .etap3 { grid-template-columns: 1fr; gap: .7rem; }
  /* telefon: wiersz branzy w jednej kolumnie (nazwa, opis, etykiety), strzalka z boku; nic nie nachodzi na siebie */
  .dlaf__w, .dlaf__w--2 { grid-template-columns: minmax(0, 1fr) auto; gap: .7rem 1rem; align-items: start; }
  .dlaf__w > h3, .dlaf__w > p, .dlaf__w > ul { grid-column: 1; }
  .dlaf__w > .kolko { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .dlaf__w--2 > .kolko { grid-row: 1 / span 2; }
  .kolaz { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4%; }
  .kafel--szeroki { grid-column: span 2; } .kafel--cta b { font-size: 1.2rem; }
  .klip { border-radius: 16px; }
  .scena.gra .plansza { border-radius: 22px; } .scena.gra { padding-bottom: 30px; } .scena.gra .plansza.n1 { transform: translateY(14px) scale(.955); } .scena.gra .plansza.n2 { transform: translateY(28px) scale(.91); }
  .scena__ster { gap: .9rem; } .scena__strz button { width: 2.6rem; height: 2.6rem; } .scena__dalej { flex-direction: column; gap: .35rem; min-width: 0; } .scena__dalej b { font-size: .95rem; }
  .scena { border-radius: 22px; }
  .plansza { min-height: 0; padding: 1.6rem 1.3rem 1.8rem; }
}
@media (max-width: 720px) and (max-height: 700px) {
  .daje { display: none; }
}

/* kto prosi o mniej ruchu, dostaje gotowy obraz bez animacji */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .t-noc[data-tlo]::before, .hero .btn--glowny::after { animation: none; }
  .klip__w { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; transition-duration: .001s !important; transition-delay: 0s !important; }
}