/* PROPOZYCJA 5.11 (niewgrana): zwid.pl v2 - wzorce z promptowego/Sternika przełożone na ZWID, nie kopia 1:1.
   1) nagłówek w kontenerze 1320 + pasek postępu przewijania w pomarańczu ZWID, hover na każdej pozycji
   2) hero "scena": wyśrodkowane, wielka typografia, pod spodem taśma 5 filmów 9:16 z tytułami POD kadrem
   3) galeria 1480, wyższe kadry, tytuł pod filmem; okno filmu ze strzałkami, licznikiem i pobieraniem */
:root{--zw2:1320px;--zw2w:1480px;--acc:#ff7654}

/* 1. nagłówek */
html body header.zwid-site-header.zsh-v2{padding-inline:max(24px,calc((100% - var(--zw2)) / 2))!important;border-bottom:1px solid #2e2922!important}
html body header.zwid-site-header.zsh-v2::after{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:calc(var(--zw-post,0) * 100%);background:var(--acc)}
html body .zsh-nav .zsh-link{position:relative;padding:10px 14px!important;transition:background .15s,color .15s}
html body .zsh-nav .zsh-link:hover{background:#24201b!important;color:#fff!important}
html body .zsh-nav .zsh-link::before{content:"";position:absolute;left:14px;right:14px;top:0;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .2s}
html body .zsh-nav .zsh-link:hover::before,html body .zsh-nav .zsh-link[aria-current="page"]::before{transform:scaleX(1)}

/* 2. hero scena */
html body .hero .wrap{display:block!important;width:min(var(--zw2w),calc(100% - 48px))!important;text-align:center;padding-top:40px!important}
html body .hero .wrap>div:first-child{max-width:1120px;margin:0 auto}
html body .hero h1{font-size:clamp(50px,7.6vw,122px)!important;line-height:.94!important;letter-spacing:-.045em!important}
html body .hero h1 .etykieta{margin:0 auto 34px!important;justify-content:center;font-size:12px!important;letter-spacing:.14em!important}
html body .hero h1 em{display:block}
html body .hero .lead{max-width:740px;margin:34px auto 0!important;font-size:21px!important;line-height:1.55!important}
html body .hero .lead .zd{display:inline!important}
html body .hero .lead .zd+.zd::before{content:" "}
html body .hero .lista{display:flex!important;justify-content:center;flex-wrap:wrap;gap:8px 30px;max-width:none!important;font-size:13px!important;margin:26px auto 0!important;padding:0!important;text-align:left;border:0!important}
html body .hero .lista li{margin:0!important;white-space:nowrap}
html body .hero .akcje{margin-top:30px!important}
html body .hero .akcje,html body .hero .zaufanie{justify-content:center!important}
html body .hero .demo{display:none!important}
.zw2-tasma{width:min(var(--zw2w),calc(100% - 48px));margin:64px auto 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;text-align:left}
.zw2-tasma button{all:unset;cursor:pointer;display:block;min-width:0}
.zw2-tasma .kd{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;background:#100e0b;border-top:3px solid #2e2922;transition:border-color .15s}
.zw2-tasma button:hover .kd,.zw2-tasma button:focus-visible .kd{border-color:var(--acc)}
.zw2-tasma img,.zw2-tasma video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.zw2-tasma .m{display:block;margin-top:12px;font:500 11px/1.4 'JetBrains Mono',monospace!important;letter-spacing:.1em;text-transform:uppercase;color:#9a8e7e}
.zw2-tasma .m b{color:var(--acc);font-weight:600}
.zw2-tasma .t{display:block;margin-top:4px;font:800 19px/1.2 'Figtree',sans-serif;letter-spacing:-.02em;color:#f4ece0}
.zw2-tasma button:hover .t{color:var(--acc)}

/* 3. galeria */
html body #filmy .wrap{width:min(var(--zw2w),calc(100% - 48px))!important;max-width:none!important}
html body #galeria{gap:40px 18px!important}
html body #galeria .film{background:transparent!important;border:0!important;padding:0!important}
html body #galeria .film .kl{aspect-ratio:9/14!important;border-top:3px solid #2e2922;transition:border-color .15s}
html body #galeria .film:hover .kl{border-color:var(--acc)}
html body #galeria .film .tx{padding:14px 0 0!important;background:transparent!important;border:0!important}
html body #galeria .film .tx>b{font-size:21px!important;font-weight:800!important;letter-spacing:-.02em}
html body #galeria .film:hover .tx>b{color:var(--acc)}

/* okno filmu: strzałki, licznik, pobieranie */
html body dialog.okno{overflow:visible!important}
.zw2-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;display:grid;place-items:center;background:#14120f;border:1px solid #453d33;color:#f4ece0;font:700 22px/1 'Figtree',sans-serif;cursor:pointer;z-index:3}
.zw2-nav:hover{background:var(--acc);border-color:var(--acc);color:#14120f}
.zw2-nav.l{left:-72px}.zw2-nav.p{right:-72px}
.zw2-licz{display:block;margin-top:6px;font:600 12px/1 'JetBrains Mono',monospace!important;letter-spacing:.1em;color:#9a8e7e}
.zw2-pobierz{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border:1px solid #453d33;color:#f4ece0;font:700 15px 'Figtree',sans-serif;text-decoration:none}
.zw2-pobierz:hover{border-color:var(--acc);color:var(--acc)}
@media (max-width:1180px){.zw2-nav.l{left:8px}.zw2-nav.p{right:8px}}
@media (max-width:900px){.zw2-tasma{grid-template-columns:repeat(5,58%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.zw2-tasma button{scroll-snap-align:start}}
@media (max-width:760px){
  html body .hero .wrap{padding-top:48px!important}
  html body .hero .lead{font-size:18px!important}
  html body .hero .lista{flex-direction:column;align-items:flex-start;max-width:340px!important;margin-inline:auto!important}
  html body .hero .lista li{white-space:normal}
  html body #galeria .film .tx>b{font-size:17px!important}
  .zw2-nav{top:12px;transform:none;width:44px;height:44px}
  .zw2-nav.l{left:12px}.zw2-nav.p{left:62px;right:auto}
}