/* overrides.css - ladowany NA KONCU, wygrywa nad CSS strony. Poprawki UX. */

/* --- logo wieksze --- */
.hd-logo img{width:264px!important;height:auto!important}
.ft-brand img{width:240px!important;height:auto!important}
@media(max-width:640px){.hd-logo img{width:200px!important}}

/* --- hero pelny ekran, ale NIE przekracza (content mibesci sie) --- */
:root{--hd-h:112px}
.kr-hero{min-height:calc(100svh - var(--hd-h))!important;height:auto!important;display:flex!important;align-items:stretch}
.kr-hero-inner{min-height:calc(100svh - var(--hd-h))!important;height:auto!important;display:flex!important;
  flex-direction:column;justify-content:center;padding-top:6vh!important;padding-bottom:6vh!important}
@media(max-width:1100px){:root{--hd-h:150px}}
@media(max-width:640px){
  :root{--hd-h:118px}
  .kr-hero-inner{padding:40px 20px!important}
}

/* --- przelacznik jezyka --- */
.lang-switch{display:inline-flex;gap:2px;align-items:center;margin-left:18px;font-family:var(--ff-mono),"Roboto Mono",monospace;font-size:12px;letter-spacing:.06em}
.lang-switch a,.lang-switch .ls-on,.lang-switch .ls-off{padding:3px 7px;line-height:1;border-radius:2px}
.lang-switch a{color:var(--dim,#8b9096)}
.lang-switch a:hover{color:#fff;background:rgba(255,255,255,.08)}
.lang-switch .ls-on{color:#0a0a0a;background:var(--hot,#ff5a00);font-weight:700}
.lang-switch .ls-off{color:#4a4d55;cursor:not-allowed}
@media(max-width:640px){.lang-switch{margin-left:auto}}

/* --- header top bar: zeby switcher sie zmiescil --- */
.hd-top{flex-wrap:wrap}

/* --- DROPDOWN menu (Folia PPF -> Gloss/Satin/Matte) --- */
.hd-nav .has-sub{position:relative}
.hd-nav .has-sub>a::after{content:"▾";font-size:10px;margin-left:6px;opacity:.7}
.hd-nav .submenu{position:absolute;top:100%;left:0;min-width:210px;background:rgba(10,10,10,.98);
  border:1px solid var(--line,#2a2a2d);padding:8px 0;display:none;flex-direction:column;z-index:60}
.hd-nav .has-sub:hover .submenu,.hd-nav .has-sub:focus-within .submenu{display:flex}
.hd-nav .submenu a{padding:9px 18px;font-size:14px;letter-spacing:.02em;text-transform:none;font-family:var(--ff-body),sans-serif;font-weight:500;color:var(--steel,#c8ccd0)}
.hd-nav .submenu a:hover{color:var(--hot,#ff5a00);background:rgba(255,255,255,.05)}
/* ponizej 1100px: submenu i nawigacja obsluzone w bloku "naglowek mobilny" na koncu pliku */

/* --- HERO: wideo w tle (jak wersja EN, YT 9qX0luRq0pQ) --- */
/* dwie nazwy klasy celowo: statyk generuje .kr-hero-video, zywy WP (post 5002) wstrzykuje
   .kr-hero-bgv - obie musza dzialac, zeby migracja nie zgubila wideo (2026-08-17) */
.kr-hero-video,.kr-hero-bgv{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.kr-hero-video iframe,.kr-hero-bgv iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;
  transform:translate(-50%,-50%);border:0;pointer-events:none}
/* warstwa nad wideo - blokuje klik/kontrolki YT, wideo zostaje tlem */
.kr-hero-video::after,.kr-hero-bgv::after{content:"";position:absolute;inset:0;z-index:1}
/* ciemna MASKA pod CALYM tekstem hero - mocniejsza po lewej (gdzie tekst) + od dolu (badge).
   SELEKTOR musi byc .kr-v2 .kr-hero::after (0-2-1), bo samo .kr-hero::after (0-1-1) przegrywa
   z regula per strona w folia-ppf/gloss/satin/matte/zostan.css i ta maska NIE dzialala wcale.
   width/height:auto sa OBOWIAZKOWE: bazowa regula tych plikow ustawia width:700px;height:700px
   (po dawnym radialnym blasku), a przy nadmiarowo okreslonym boxie width wygrywa z right,
   przez co overlay malowal sie tylko w kwadracie 700x700 w lewym gornym rogu (2026-08-17) */
.kr-v2 .kr-hero::after{content:"";position:absolute;inset:0;width:auto;height:auto;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,5,6,.82) 0%,rgba(5,5,6,.62) 42%,rgba(5,5,6,.28) 68%,rgba(5,5,6,.15) 100%),
    linear-gradient(180deg,rgba(5,5,6,.45) 0%,rgba(5,5,6,.25) 40%,rgba(5,5,6,.45) 75%,rgba(5,5,6,.8) 100%)}
/* mobile: wideo out. Autoplay embedu YT na telefonie bywa blokowany i zamiast tla widac
   zatrzymany odtwarzacz z logo i kontrolkami. Bez wideo zostaje zdjecie z .kr-hero::before,
   ktore i tak jest pod spodem, a przy okazji znika request do YouTube (2026-08-17) */
@media(max-width:768px){.kr-hero-video,.kr-hero-bgv{display:none}}
.kr-hero-inner,.kr-hero-content{position:relative;z-index:2}
/* badge hero: spojne ciemne chipy, brak lamania, jednolity styl (naprawa HU 2-linie + BG kontrast) */
.kr-hero-bullets{flex-wrap:wrap!important;gap:10px!important}
.kr-hero-bullets span{background:rgba(5,5,6,.78)!important;border:1px solid rgba(255,255,255,.14)!important;
  backdrop-filter:blur(3px);white-space:nowrap!important;display:inline-flex!important;align-items:center;
  padding:10px 16px!important;line-height:1!important}
/* czytelnosc calego tekstu hero na jasnym tle */
.kr-hero-content h1,.kr-hero-sub,.kr-eyebrow{text-shadow:0 2px 18px rgba(0,0,0,.75),0 1px 4px rgba(0,0,0,.6)}
/* H1 hero: mniejszy max + dopasowanie do dluzszych jezykow (BG/DE) - zeby nie rozpychalo sekcji */
.kr-hero h1{font-size:clamp(38px,5.6vw,78px)!important;line-height:.98!important;
  overflow-wrap:break-word;hyphens:auto}
.kr-hero-content{max-width:760px}
/* CTA: odstep po plusie */
.hd-cta{white-space:nowrap}

/* ===== INTERAKCJE / PAZUR (site.js) ===== */
/* scroll-reveal - klasa .reveal dokladana przez JS (brak JS = tresc od razu widoczna) */
.reveal{opacity:0;transform:translateY(24px);
  transition:opacity .6s ease var(--rv-d,0ms),transform .6s cubic-bezier(.2,.7,.2,1) var(--rv-d,0ms)}
.reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important}}

/* FAQ (details.kr-q) - plynne rozwijanie + znak + zmienia sie w x, hover */
.kr-q summary{cursor:pointer;list-style:none;outline:none}
.kr-q summary::-webkit-details-marker{display:none}
.kr-q .kr-q-mark{transition:transform .25s ease;display:inline-block}
.kr-q[open] .kr-q-mark{transform:rotate(45deg)}
.kr-q summary:hover .kr-q-text{color:var(--hot,#ff5a00)}
.kr-q summary:focus-visible .kr-q-text{color:var(--hot,#ff5a00)}
.kr-q .kr-q-a{overflow:hidden}
.kr-q[open] .kr-q-a{animation:krQopen .34s ease}
@keyframes krQopen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.kr-q[open] .kr-q-a{animation:none}}

/* karty - mikrointerakcje hover */
.adbl-finish-card{transition:transform .3s ease,box-shadow .3s ease}
.adbl-finish-card:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(0,0,0,.5)}
.adbl-finish-card img{transition:transform .5s ease}
.adbl-finish-card:hover img{transform:scale(1.06)}
.kr-yt-card,.card{transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.kr-yt-card:hover,.card:hover{transform:translateY(-4px)}

/* sticky CTA wyceny na mobile (wstrzykiwany przez site.js, tekst z headera = przetlumaczony) */
.mob-cta{position:fixed;left:14px;right:14px;bottom:14px;z-index:85;display:none;text-align:center;
  background:var(--hot,#ff5a00);color:#0a0a0a;font-family:var(--ff-head,"Oswald"),sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;font-size:15px;padding:15px 20px;border-radius:6px;
  text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.5);transform:translateY(140%);transition:transform .32s ease}
.mob-cta.show{transform:translateY(0)}
@media(max-width:640px){.mob-cta{display:block}}
@media(prefers-reduced-motion:reduce){.mob-cta{transition:none}}

/* --- naglowek mobilny (<=1100px): pasek gorny = telefon + jezyki, logo + CTA + hamburger, menu w szufladzie --- */
.hd-burger{display:none}
@media(max-width:1100px){
  .hd-top{flex-wrap:nowrap;gap:12px;padding:6px 5vw;overflow:hidden}
  .hd-top>span,.hd-social{display:none}
  .hd-top>a{white-space:nowrap}
  .lang-switch{margin-left:auto;gap:0}
  .lang-switch a,.lang-switch .ls-on,.lang-switch .ls-off{padding:3px 5px}
  .hd-main{flex-wrap:nowrap;gap:10px;padding:10px 5vw}
  .hd-logo img{width:150px;height:32px}
  .hd-cta{order:2;margin-left:auto;padding:10px 14px;font-size:13px}
  .hd-burger{order:3;display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
             padding:0 10px;background:transparent;border:1px solid var(--line,#2a2a2d);border-radius:3px;cursor:pointer;flex:0 0 auto}
  .hd-burger span{display:block;height:2px;background:#fff;border-radius:1px;transition:transform .2s,opacity .2s}
  .site-hd.nav-open .hd-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .site-hd.nav-open .hd-burger span:nth-child(2){opacity:0}
  .site-hd.nav-open .hd-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .site-hd{position:sticky}
  .hd-nav{display:none!important;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;margin:0;
          padding:4px 5vw 10px;background:#0a0a0a;border-top:1px solid var(--line,#2a2a2d);
          border-bottom:1px solid var(--line,#2a2a2d);max-height:calc(100vh - 100px);overflow:auto;box-shadow:0 18px 40px rgba(0,0,0,.5)}
  .site-hd.nav-open .hd-nav{display:flex!important}
  .hd-nav a{font-size:16px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.06);white-space:normal}
  .hd-nav>a:last-child{border-bottom:0}
  .hd-nav .has-sub{display:flex;flex-direction:column}
  .hd-nav .has-sub>a::after{display:none}
  .hd-nav .submenu{display:flex!important;position:static;flex-direction:column;min-width:0;background:none;border:0;
                   box-shadow:none;padding:0 0 0 18px}
  .hd-nav .submenu a{font-size:14px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.04)}
}
@media(max-width:360px){.hd-top>a{display:none}.lang-switch{margin-left:0}}
}

/* --- hero intro (2026-08-19): slowa z rozmycia, plakietki, wskaznik przewijania --- */
.kr-hero .kr-w{display:inline-block;overflow:hidden;vertical-align:bottom}
.kr-hero .kr-w>span{display:inline-block}
.kr-hero.kr-anim .kr-w>span{opacity:0;filter:blur(10px);transform:translateY(.55em);
  animation:kr-wordup .75s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(120ms + var(--d,0ms))}
.kr-hero.kr-anim .kr-eyebrow{opacity:0;animation:kr-fadeup .6s ease forwards}
.kr-hero.kr-anim .kr-hero-sub{opacity:0;animation:kr-fadeup .7s ease forwards;animation-delay:.55s}
.kr-hero.kr-anim .kr-hero-bullets span{opacity:0;animation:kr-fadeup .5s ease forwards}
.kr-hero.kr-anim .kr-hero-bullets span:nth-child(1){animation-delay:.80s}
.kr-hero.kr-anim .kr-hero-bullets span:nth-child(2){animation-delay:.90s}
.kr-hero.kr-anim .kr-hero-bullets span:nth-child(3){animation-delay:1.00s}
.kr-hero.kr-anim .kr-hero-bullets span:nth-child(4){animation-delay:1.10s}
.kr-hero.kr-anim .kr-hero-bullets span:nth-child(5){animation-delay:1.20s}
@keyframes kr-wordup{to{opacity:1;filter:blur(0);transform:none}}
@keyframes kr-fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.kr-cue{position:absolute;left:50%;bottom:22px;z-index:3;width:28px;height:44px;margin-left:-14px;border:1px solid rgba(255,255,255,.35);
  border-radius:14px;opacity:0;animation:kr-fadeup .6s ease 1.5s forwards;transition:opacity .3s}
.kr-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--hot,#ff5a00);
  animation:kr-cue 1.6s ease-in-out infinite}
.kr-cue.hide{opacity:0!important;pointer-events:none}
@keyframes kr-cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(16px);opacity:0}100%{transform:translateY(0);opacity:0}}
@media(max-width:768px){.kr-cue{display:none}}

/* --- nic prowadzaca (>=1280px): linia w lewym marginesie, wypelnienie rosnie z przewijaniem, wezly = numery sekcji --- */
.kr-thread{display:none}
@media(min-width:1280px){
  .kr-thread{display:block;position:absolute;left:calc((100% - 1280px)/2 + 22px);width:1px;z-index:4;pointer-events:none}
  .kr-thread-line{position:absolute;inset:0;background:rgba(255,255,255,.10)}
  .kr-thread-fill{position:absolute;left:0;top:0;width:1px;height:0;background:linear-gradient(180deg,rgba(255,90,0,.25),var(--hot,#ff5a00));
    box-shadow:0 0 12px rgba(255,90,0,.45)}
  .kr-thread-node{position:absolute;left:-15px;width:31px;height:31px;margin-top:-15px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-family:var(--ff-mono,"Roboto Mono"),monospace;font-size:10px;letter-spacing:.06em;color:rgba(255,255,255,.45);
    background:#0a0a0a;border:1px solid rgba(255,255,255,.14);transition:color .35s,border-color .35s,box-shadow .35s,transform .35s}
  .kr-thread-node.dot{width:9px;height:9px;left:-4px;margin-top:-4px}
  .kr-thread-node.on{color:#0a0a0a;background:var(--hot,#ff5a00);border-color:var(--hot,#ff5a00);box-shadow:0 0 0 6px rgba(255,90,0,.15),0 0 18px rgba(255,90,0,.5);transform:scale(1.08)}
}
@media(prefers-reduced-motion:reduce){.kr-hero .kr-w>span,.kr-hero .kr-eyebrow,.kr-hero-sub,.kr-hero-bullets span{animation:none!important;opacity:1!important;filter:none!important;transform:none!important}.kr-cue,.kr-thread{display:none!important}}