/* UAVO Instruktor – landing szkoleń (29.10.2026). Układ wg wideo-referencji (aevion): jasne studio, ogromne cienkie
   nagłówki, etykiety mono w nawiasach, cienkie linie siatki. Kolory marki UAVO: czerń #040404, błękit #048BD3, biel.
   Fonty z biblioteki agencji: Work Sans (zmienny) + IBM Plex Mono do etykiet. */
@font-face { font-family: "Work Sans"; src: url("fonts/work-sans.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --studio: #E7E9EE;      /* tło kadrów z dronem */
  --papier: #F4F5F7;
  --czern: #040404;
  --tekst: #040404;
  --szary: #6B7178;
  --szary-j: #A3A9B0;
  --linia: rgba(4, 4, 4, .12);
  --akcent: #048BD3;
  --akcent-c: #0372AD;
  --bialy: #FFFFFF;
  --gutter: clamp(16px, 2.2vw, 32px);
  --pasek-h: 52px;
  --sans: "Work Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--pasek-h) + 12px); }
body { margin: 0; background: var(--papier); color: var(--tekst); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.szary { color: var(--szary); }
:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }

/* ---------- pasek u góry (jak w referencji: logo · opis · środek · zegar · przycisk) ---------- */
.pasek { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--pasek-h); display: flex; align-items: center; gap: 28px; padding: 0 var(--gutter);
  background: rgba(244, 245, 247, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--linia); transition: background .4s, color .4s, border-color .4s; }
.pasek.ciemny { background: rgba(4, 4, 4, .55); color: var(--bialy); border-color: rgba(255,255,255,.12); }
.pasek.ciemny .logo img { filter: invert(1); }
.logo img { height: 22px; width: auto; }
.pasek-et { color: var(--szary); }
.pasek.ciemny .pasek-et { color: rgba(255,255,255,.6); }
.pasek-srodek { margin-left: auto; }
#zegar { margin-right: 8px; }

/* ---------- przyciski: ostre prostokąty jak na stronie UAVO, błękit marki ---------- */
.przycisk { display: inline-flex; align-items: center; gap: 12px; padding: 15px 22px; background: var(--akcent); color: var(--bialy); text-decoration: none;
  font: 500 15px/1 var(--sans); letter-spacing: .01em; border: 0; cursor: pointer; transition: background .2s, transform .2s; }
.przycisk:hover { background: var(--akcent-c); }
.przycisk svg { width: 18px; height: 18px; transition: transform .2s; }
.przycisk:hover svg { transform: translateX(3px); }
.przycisk-maly { padding: 10px 14px; font-size: 13px; }

/* ---------- WEJŚCIE ---------- */
.intro { height: 430vh; position: relative; }
.intro-scena { z-index: 0; isolation: isolate; position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--studio); }
.kolaz { position: absolute; inset: var(--pasek-h) 0 0; }
.kafel { position: absolute; margin: 0; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
  overflow: hidden; background: #cfd4da; will-change: transform; }
.kafel img { width: 100%; height: 100%; object-fit: cover; }
.intro-tytul { position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); width: min(720px, 92vw); text-align: center; z-index: 3; will-change: transform, opacity; }
.intro-tytul .et { color: var(--szary); margin: 0 0 18px; }
.intro-tytul h1 { margin: 0; font-weight: 300; font-size: clamp(42px, 5.6vw, 86px); line-height: .98; letter-spacing: -.035em; }
.intro-tytul h1 .jasny { color: var(--szary-j); display: block; }
.intro-opis { margin: 22px auto 28px; max-width: 30em; font-size: 17px; color: var(--szary); }
.intro-tytul::before { content: ""; position: absolute; inset: -40px -60px; z-index: -1; background: radial-gradient(closest-side, var(--studio) 62%, rgba(231,233,238,0)); }

/* przysłona obiektywu: koło skalowane na kompozytorze (bez maski przerysowywanej co klatkę); wymiary ustawia app.js */
.iris { position: absolute; left: 50%; top: 50%; z-index: 4; border-radius: 50%; overflow: hidden; opacity: 0; pointer-events: none; transform: scale(0); will-change: transform; }
.iris::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle closest-side, rgba(4,4,4,0) 90%, rgba(4,4,4,.75) 99%, rgba(4,4,4,0) 100%); }
.lot { position: absolute; transform-origin: 50% 50%; will-change: transform; }
.zaslona { position: absolute; inset: 0; z-index: 5; background: var(--czern); opacity: 0; pointer-events: none; }
.znak { position: absolute; left: 50%; top: calc(var(--pasek-h) + 2vh); transform: translateX(-50%); z-index: 6; pointer-events: none; opacity: 0;
  font: 200 min(30vw, 46vh)/.8 var(--sans); letter-spacing: -.06em; color: #D3D7DE; mix-blend-mode: multiply; white-space: nowrap; }
.hero-dol { position: absolute; inset: auto 0 0; z-index: 7; padding: 0 var(--gutter) 22px; opacity: 0; transform: translateY(24px); pointer-events: none; }
.hero-dol.widac { pointer-events: auto; }
.hero-haslo { margin: 0 0 18px; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.3; max-width: 26em; }
.hero-haslo strong { font-weight: 500; }
.staty { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-top: 1px solid var(--linia); }
.staty > div { padding: 16px 18px 6px; border-left: 1px solid var(--linia); text-align: center; }
.staty > div:first-child { border-left: 0; }
.staty dt { color: var(--szary); }
.staty dd { margin: 6px 0 2px; font-weight: 300; font-size: clamp(26px, 3vw, 44px); letter-spacing: -.03em; line-height: 1.05; }
.staty p { margin: 0; font-size: 13px; color: var(--szary); }
.przewin { position: absolute; right: var(--gutter); top: -34px; display: flex; align-items: center; gap: 10px; color: var(--szary); }
.przewin i { width: 1px; height: 18px; background: currentColor; animation: kreska 1.6s ease-in-out infinite; transform-origin: top; }
@keyframes kreska { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.intro-pasek { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 8; }
.intro-pasek i { display: block; height: 100%; width: 100%; background: var(--akcent); transform-origin: left; transform: scaleX(0); }

/* ---------- sekcje ---------- */
.sekcja { position: relative; z-index: 2; padding: clamp(72px, 9vw, 130px) var(--gutter) clamp(64px, 7vw, 110px); background: transparent; }
.dron-lot { position: fixed; left: 0; top: 0; z-index: 4; pointer-events: none; opacity: 0; transform-origin: 50% 50%; will-change: transform; }
/* nad ciemną rezerwacją ciemny dron dostaje błękitną poświatę, żeby był cały czas widoczny */
.dron-lot.na-ciemnym { filter: drop-shadow(0 0 22px rgba(77,180,238,.55)) drop-shadow(0 0 2px rgba(255,255,255,.5)); }
.sekcja-gora { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--linia); margin-bottom: clamp(28px, 4vw, 52px); }
.wielki { margin: 0; font-weight: 300; font-size: clamp(64px, 11.5vw, 190px); line-height: .92; letter-spacing: -.055em; padding-bottom: .06em; }
.nr { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--linia); border-radius: 50%; color: var(--szary); font-size: 10px; margin-top: 8px; }
.cta-wiersz { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 64px); }
.rog { position: absolute; bottom: 10px; color: var(--szary-j); }
.rog-l { left: 12px; } .rog-p { right: 12px; }

/* 1. zakładki jak „Capabilities”: lista po lewej, kadr w środku, liczba po prawej */
.zakladki { position: relative; display: grid; grid-template-columns: 1fr minmax(0, 1.45fr) 1fr; gap: clamp(20px, 3vw, 48px); align-items: center; padding-bottom: 40px; border-bottom: 1px solid var(--linia); }
.zakl-lista { display: flex; flex-direction: column; gap: 6px; }
.zakl-lista button { all: unset; cursor: pointer; font-weight: 300; font-size: clamp(24px, 2.6vw, 40px); letter-spacing: -.025em; line-height: 1.2; color: var(--szary-j); transition: color .3s; }
.zakl-lista button[aria-selected="true"] { color: var(--tekst); }
.zakl-lista button:hover { color: var(--szary); }
.zakl-lista button:focus-visible { outline: 2px solid var(--akcent); outline-offset: 4px; }
.zakl-media { position: relative; aspect-ratio: 4 / 3; background: #D9DEE4; overflow: hidden; }
.zakl-media > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: wejscie .6s ease both; }
@keyframes wejscie { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.zakl-liczba { margin: 0 0 12px; font-weight: 300; font-size: clamp(36px, 4vw, 60px); letter-spacing: -.035em; line-height: 1; }
.zakl-tekst { margin: 0; color: var(--szary); max-width: 24em; }

.galeria { margin-top: clamp(36px, 4vw, 56px); }
.galeria-tor { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 4px; }
.galeria-tor::-webkit-scrollbar { display: none; }
.g-kafel { flex: none; margin: 0; height: clamp(240px, 30vw, 400px); aspect-ratio: 16 / 10; background: #D9DEE4; overflow: hidden; scroll-snap-align: start; }
.g-pion { aspect-ratio: 9 / 16; }
.g-kafel img, .g-kafel video { width: 100%; height: 100%; object-fit: cover; }
.galeria-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.okragly { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--linia); background: transparent; cursor: pointer; transition: background .2s, color .2s; }
.okragly:hover { background: var(--czern); color: var(--bialy); }
.okragly svg { width: 18px; height: 18px; }

/* 2. rezerwacja na czerni marki */
.sekcja-ciemna { z-index: 3; background: var(--czern); color: var(--bialy); }
.sekcja-ciemna .sekcja-gora { border-color: rgba(255,255,255,.14); }
.sekcja-ciemna .nr { border-color: rgba(255,255,255,.35); color: rgba(255,255,255,.85); }
.rez { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 110px); }
.rez-lead { margin: 0 0 28px; font-weight: 300; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.2; letter-spacing: -.02em; }
.rez-lista { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 14px; color: #EEF1F4; font-size: 17px; }
.rez-lista li { display: flex; gap: 12px; align-items: flex-start; }
.rez-lista svg { color: var(--akcent); width: 20px; height: 20px; margin-top: 2px; }
.rez-cena { color: #4DB4EE; font-size: 13px; }
/* ankieta (29.10, uwagi Mateusza: więcej animacji, ankieta krok po kroku, wyraźny kontrast): biała karta na czerni */
.ankieta { position: relative; background: var(--bialy); color: var(--czern); padding: clamp(22px, 3vw, 40px); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 90px -30px rgba(4,139,211,.55); }
.ank-gora { display: flex; align-items: center; justify-content: space-between; min-height: 32px; }
.ank-licznik { margin-left: auto; color: #3D434A; font-size: 12px; }
.ank-licznik b { color: var(--akcent); font-weight: 400; font-size: 15px; }
.ank-wstecz { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; background: none; border: 0; cursor: pointer; font: 500 14px/1 var(--sans); color: var(--czern); }
.ank-wstecz svg { width: 18px; height: 18px; transition: transform .2s; }
.ank-wstecz:hover svg { transform: translateX(-3px); }
.ank-pasek { height: 3px; background: #E3E7EC; margin: 12px 0 clamp(22px, 2.6vw, 34px); overflow: hidden; }
.ank-pasek i { display: block; height: 100%; width: 100%; background: var(--akcent); transform-origin: left; transform: scaleX(.25); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.ank-okno { position: relative; }
.ank-krok { border: 0; padding: 0; margin: 0; min-width: 0; }
/* wszystkie kroki w jednej komórce siatki: karta ma stałą wysokość, strona pod nią nie podskakuje */
.ankieta.js .ank-okno { display: grid; }
.ankieta.js .ank-krok { grid-area: 1 / 1; }
.ankieta.js .ank-krok:not(.aktywny) { visibility: hidden; pointer-events: none; }
.ank-wstecz[hidden] { display: none; }
.ank-pytanie { display: block; padding: 0; margin: 0 0 6px; font-weight: 400; font-size: clamp(26px, 2.5vw, 38px); line-height: 1.1; letter-spacing: -.025em; color: var(--czern); }
.ank-pod { margin: 0 0 22px; color: #4A5159; font-size: 15px; }
.ank-opcje { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ank-krok[data-pole="kto"] .ank-opcje { grid-template-columns: repeat(3, 1fr); }
.opcja { position: relative; cursor: pointer; display: block; }
.opcja input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.opcja-w { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "lit ok" "ik ik" "t t"; gap: 14px 10px; height: 100%; padding: 16px 16px 18px;
  border: 2px solid #D3D9E0; background: var(--bialy); transition: border-color .2s, background .25s, color .25s, transform .2s, box-shadow .25s; }
.opcja-lit { grid-area: lit; display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid currentColor; font-size: 12px; color: #4A5159; transition: color .25s, background .25s, border-color .25s; }
.opcja-ik { grid-area: ik; width: 30px; height: 30px; color: var(--akcent); transition: color .25s, transform .35s cubic-bezier(.3,1.6,.5,1); }
.opcja-t { grid-area: t; font-weight: 500; font-size: 18px; line-height: 1.2; letter-spacing: -.01em; }
.opcja-t small { display: block; margin-top: 4px; font-weight: 400; font-size: 13.5px; color: #4A5159; transition: color .25s; }
.opcja-ok { grid-area: ok; justify-self: end; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bialy); color: var(--akcent); transform: scale(0); transition: transform .35s cubic-bezier(.3,1.7,.5,1); }
.opcja-ok svg { width: 16px; height: 16px; stroke-width: 3; }
.opcja:hover .opcja-w { border-color: var(--czern); transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(4,4,4,.45); }
.opcja:hover .opcja-ik { transform: scale(1.12) rotate(-6deg); }
.opcja input:focus-visible + .opcja-w { outline: 3px solid var(--akcent); outline-offset: 3px; }
.opcja input:checked + .opcja-w { background: var(--akcent); border-color: var(--akcent); color: var(--bialy); box-shadow: 0 16px 34px -16px rgba(4,139,211,.9); }
.opcja input:checked + .opcja-w .opcja-lit { background: var(--bialy); border-color: var(--bialy); color: var(--akcent); }
.opcja input:checked + .opcja-w .opcja-ik, .opcja input:checked + .opcja-w small { color: var(--bialy); }
.opcja input:checked + .opcja-w .opcja-ok { transform: scale(1); }
.ank-krok.zle .opcja-w { border-color: #D92D20; }
.ank-podsum { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 24px; }
.ank-podsum button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1.5px solid var(--czern); background: var(--bialy); color: var(--czern); font: 500 14px/1.1 var(--sans); cursor: pointer; transition: background .2s, color .2s; }
.ank-podsum button .mono { color: var(--akcent); font-size: 10px; }
.ank-podsum button:hover { background: var(--czern); color: var(--bialy); }
.pola { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-bottom: 18px; }
.pole { position: relative; display: grid; grid-template-columns: 22px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: end; padding-bottom: 2px; border-bottom: 2px solid #C3CAD2; transition: border-color .2s; }
.pole:focus-within { border-color: var(--akcent); }
.pole-szer { grid-column: 1 / -1; }
.pole-ik { grid-row: 2; width: 20px; height: 20px; margin-bottom: 12px; color: #4A5159; transition: color .2s; }
.pole:focus-within .pole-ik { color: var(--akcent); }
.pole-et { grid-column: 1 / -1; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #3D434A; }
.pole input { grid-row: 2; width: 100%; padding: 10px 0 10px; font: 400 20px/1.3 var(--sans); color: var(--czern); background: transparent; border: 0; border-radius: 0; }
.pole input:focus { outline: none; }
.pole.zle { border-color: #D92D20; }
.pole.zle .pole-et { color: #D92D20; }
.zgoda { display: flex; gap: 12px; font-size: 13.5px; line-height: 1.45; color: #3D434A; cursor: pointer; margin-bottom: 12px; }
.zgoda a { color: var(--czern); }
.zgoda input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--akcent); flex: none; }
.zgoda.zle { color: #D92D20; }
.miodek { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.blad { margin: 0 0 12px; min-height: 1.2em; color: #D92D20; font-size: 14px; font-weight: 500; }
.przycisk-pelny { width: 100%; justify-content: space-between; padding: 20px 24px; font-size: 17px; }
.przycisk[disabled] { opacity: .6; cursor: progress; }
.dzieki { text-align: center; padding: clamp(20px, 4vw, 48px) 0; }
.dzieki-znak { width: 84px; height: 84px; margin: 0 auto 18px; stroke: var(--akcent); stroke-width: 2.5; }
.dzieki-znak circle { stroke-dasharray: 151; stroke-dashoffset: 151; }
.dzieki-znak path { stroke-dasharray: 40; stroke-dashoffset: 40; stroke-width: 3.5; }
.dzieki.rysuj .dzieki-znak circle { animation: kreska-rys .7s ease forwards; }
.dzieki.rysuj .dzieki-znak path { animation: kreska-rys .45s .55s ease forwards; }
@keyframes kreska-rys { to { stroke-dashoffset: 0; } }
.dzieki .mono { color: var(--akcent); margin: 0 0 8px; }
.dzieki-tytul { margin: 0 0 8px; font-weight: 300; font-size: clamp(30px, 3vw, 44px); letter-spacing: -.025em; }
.dzieki-tekst { margin: 0; color: #3D434A; }
.dzieki-demo { color: #5A6168; font-size: 13px; margin-top: 14px; }

/* 3. opinie w układzie kart opinii (gwiazdki, inicjał, imię) */
.opinie { display: grid; grid-template-columns: minmax(180px, .45fr) 1.55fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.ocena-liczba { margin: 0; font-weight: 300; font-size: clamp(72px, 8vw, 120px); line-height: .9; letter-spacing: -.05em; }
.gwiazdki { display: flex; gap: 3px; margin: 10px 0; color: #F5B400; }
.gwiazdki svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.gw-male svg { width: 16px; height: 16px; }
.ocena-pod { color: var(--szary); margin: 0; }
.opinie-karty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.opinia { background: var(--bialy); border: 1px solid var(--linia); padding: 22px; display: flex; flex-direction: column; }
.opinia header { display: flex; gap: 12px; align-items: center; }
.awatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--k); color: var(--bialy); font-weight: 500; }
.op-imie { margin: 0; font-weight: 500; }
.op-meta { margin: 0; font-size: 13px; color: var(--szary); }
.op-tekst { margin: 4px 0 0; color: #2A2F35; }

/* 4. przebieg: przypięta oś od lewej do prawej; dron (nad sekcją) przelatuje nad znacznikami */
#przebieg { z-index: 0; padding-bottom: 0; }
.przebieg-lead { margin: 0; max-width: 34em; font-weight: 300; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.25; letter-spacing: -.02em; }
.os { position: relative; height: 100vh; height: 100svh; overflow: hidden; margin: 0 calc(var(--gutter) * -1); }
.os-et { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--pasek-h) + 18px); display: flex; justify-content: space-between; color: var(--szary-j); margin: 0; }
.os-tor { position: relative; display: flex; gap: clamp(28px, 4vw, 64px); width: max-content; padding: 30vh var(--gutter) 0; will-change: transform; }
.os-linia { position: absolute; top: 30vh; height: 1px; background: var(--linia); }
.os-linia i { display: block; height: 100%; background: var(--akcent); transform-origin: left; transform: scaleX(0); }
.krok { position: relative; flex: none; width: clamp(260px, 25vw, 380px); padding-top: 30px; transition: opacity .5s; opacity: .42; }
.krok.miniety { opacity: 1; }
.krok-znacznik { position: absolute; left: 0; top: -7px; width: 15px; height: 15px; border-radius: 50%; background: var(--papier); border: 1px solid var(--szary-j); transition: background .3s, border-color .3s, box-shadow .3s; }
.krok.miniety .krok-znacznik { background: var(--akcent); border-color: var(--akcent); box-shadow: 0 0 0 6px rgba(4,139,211,.14); }
.krok-nr { margin: 0; color: var(--szary); }
.krok.miniety .krok-nr { color: var(--akcent); }
.krok h3 { margin: 8px 0 8px; font-weight: 400; font-size: clamp(22px, 2vw, 30px); letter-spacing: -.02em; line-height: 1.1; }
.krok-opis { margin: 0; color: var(--szary); font-size: 15px; min-height: 4.7em; }
.krok-foto { margin: 18px 0 0; aspect-ratio: 4 / 3; overflow: hidden; background: #D9DEE4; }
.krok-foto img { width: 100%; height: 100%; object-fit: cover; }

/* zakończenie */
.final { position: relative; z-index: 0; background: transparent; padding: clamp(40px, 5vw, 80px) var(--gutter) clamp(56px, 6vw, 96px); }
.ladowisko { width: min(860px, 92%); aspect-ratio: 960 / 389; margin: 0 auto; }
.final-tekst { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-top: 1px solid var(--linia); padding-top: 28px; margin-top: 8px; }
.final-tytul { margin: 0; font-weight: 300; font-size: clamp(30px, 3.4vw, 52px); letter-spacing: -.03em; line-height: 1.05; }
.final-tekst .szary { margin: 0 0 20px; max-width: 28em; }
.stopka { position: relative; z-index: 2; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; padding: 40px var(--gutter) 110px; background: var(--papier); border-top: 1px solid var(--linia); font-size: 15px; }
.stopka img { height: 30px; width: auto; }
.stopka .mono { color: var(--szary); margin: 0 0 6px; }
.stopka p { margin: 0; }
.stopka-maly { grid-column: 1 / -1; color: var(--szary-j) !important; font-size: 10px !important; border-top: 1px solid var(--linia); padding-top: 16px; }

/* okienko z ankietą (po 6 s) */
html { scrollbar-gutter: stable; }
.okno { padding: 0; border: 0; background: transparent; width: 100%; height: 100%; max-width: none; max-height: none; color: var(--czern); }
.okno[open] { display: grid; place-items: center; }
.okno::backdrop { background: rgba(4, 4, 4, .74); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.okno-karta { position: relative; width: min(760px, calc(100% - 32px)); max-height: calc(100svh - 32px); overflow: auto; overscroll-behavior: contain;
  background: var(--bialy); border-top: 4px solid var(--akcent); padding: 26px clamp(20px, 3vw, 40px) 30px; box-shadow: 0 50px 140px -30px rgba(4,139,211,.7); }
.okno-x { position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; color: var(--czern); transition: transform .25s; }
.okno-x:hover { transform: rotate(90deg); }
.okno-x svg { width: 22px; height: 22px; }
.okno-et { margin: 0 0 8px; color: var(--akcent); }
.okno-tytul { margin: 0 48px 10px 0; font-weight: 300; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.02; letter-spacing: -.035em; }
.okno-tytul span { color: var(--akcent); }
.okno .ankieta { padding: 0; box-shadow: none; }
.miejsce-ankiety { background: var(--bialy); display: grid; place-items: center; text-align: center; padding: 24px; color: #3D434A; }
html.okno-otwarte { overflow: hidden; }

/* przyklejony przycisk na telefonie, gdy formularz poza ekranem */
.pasek-cta { display: none; }

@media (max-width: 980px) {
  .pasek-et { display: none; }
  .logo { margin-right: auto; }
  .zakladki { grid-template-columns: 1fr; }
  .zakl-lista { flex-direction: row; overflow-x: auto; gap: 18px; scrollbar-width: none; }
  .zakl-lista button { font-size: 24px; white-space: nowrap; }
  .rez, .opinie { grid-template-columns: 1fr; }
  .opinie-karty { grid-template-columns: 1fr; }
  .final-tekst, .stopka { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --pasek-h: 50px; }
  .pasek { gap: 12px; }
  .pasek .przycisk-maly { display: none; }
  .logo img { height: 20px; }
  .kafel { left: calc(var(--mx) * 1%); top: calc(var(--my) * 1%); width: calc(var(--mw) * 1%); height: calc(var(--mh) * 1%); }
  .kafel.bez-m { display: none; }
  .intro-tytul { top: 53%; }
  .intro-tytul::before { inset: -26px -14px; background: radial-gradient(closest-side, var(--studio) 72%, rgba(231,233,238,0)); }
  .intro-opis { font-size: 15.5px; margin: 16px auto 22px; }
  .znak { top: calc(var(--pasek-h) + 9vh); font-size: 36vw; }
  .hero-haslo { font-size: 16px; }
  .staty > div { padding: 12px 6px 4px; }
  .staty dd { font-size: 22px; }
  .staty p { font-size: 11.5px; line-height: 1.3; }
  .przewin { display: none; }
  .ank-opcje, .ank-krok[data-pole="kto"] .ank-opcje { grid-template-columns: 1fr; }
  .opcja-w { grid-template-columns: auto auto 1fr auto; grid-template-areas: "lit ik t ok"; align-items: center; gap: 12px; padding: 14px; }
  .opcja-ik { width: 24px; height: 24px; }
  .opcja-t { font-size: 16.5px; }
  .pola { grid-template-columns: 1fr; }
  .okno[open] { place-items: end center; }
  .okno-karta { width: 100%; max-height: 94svh; padding: 22px 16px 24px; }
  .pasek-cta { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; background: var(--akcent); color: var(--bialy); text-decoration: none; font-weight: 500; transform: translateY(140%); transition: transform .35s; }
  .pasek-cta svg { width: 18px; height: 18px; }
  .pasek-cta.widac { transform: none; }
  .ladowisko { width: 96%; }
  .krok { width: 76vw; }
  .os-tor { padding-top: 27vh; }
  .os-linia { top: 27vh; }
}
@media (prefers-reduced-motion: reduce) {
  .intro { height: auto; }
  .intro-scena { position: relative; height: auto; min-height: 100svh; }
  .przewin i, .zakl-media > * { animation: none; }
  .os { height: auto; overflow: visible; }
  .os-tor { flex-direction: column; width: auto; padding-top: 40px; }
  .os-linia { display: none; }
  .krok { opacity: 1; width: auto; }
}