/* Wspólne style strony (strona główna, /voice). Przeniesione z <style> w index.html
   przy podziale na podstrony (2026-09). Style filmu 3D i panelu operatora są tu też,
   bo działają tylko na elementach, których strona główna nie ma. */
:root{--hdr:66px}
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:#080B12}
  @keyframes bvPulse{0%,100%{opacity:1}50%{opacity:.45}}
  @keyframes bvBob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
  @keyframes bvWave{0%,100%{transform:scaleY(0.28)}50%{transform:scaleY(1)}}
  @keyframes bvRing{0%{transform:translate(-50%,-50%) scale(.6);opacity:.75}100%{transform:translate(-50%,-50%) scale(1.9);opacity:0}}
  @keyframes bvSpin{to{transform:rotate(360deg)}}
  image-slot::part(empty){color:#7A89A2;font-size:10px}
  image-slot::part(ring){border-color:transparent}
  image-slot::part(frame){background:transparent;box-shadow:none}
  .bv-field::placeholder{color:#6e6e73}
  .bv-field{transition:border-color .15s,background .15s}
  /* Pasek (Header.astro) ma własne style; --hdr = jego wysokość, z której liczą odstępy strony. */
  @media (max-width:640px){ :root{--hdr:56px} }
  @media (max-width:760px){
    /* 100vh na telefonie liczy sie dla SCHOWANEGO paska przegladarki — przy wejsciu
       (pasek widoczny) dol sceny ladowal pod paskiem. Scena zostaje na STALYM 100vh
       (dvh na wysokosci sceny zmienial layout w trakcie animacji paska: scena chwilowo
       odslaniala obszar ponizej — scroll "uciekal" za pasek postepu — a scroll-anchoring
       przegladarki potem "sam cofal"; realny bug na telefonach). O pasek przegladarki
       podnosimy TYLKO dolne elementy UI (--vbar = 100lvh-100dvh: 0 gdy pasek schowany,
       wysokosc paska gdy widoczny; starsze przegladarki: fallback 0px). */
    :root{--vbar:0px}
    @supports (height:1dvh) and (height:1lvh){ :root{--vbar:calc(100lvh - 100dvh)} }
    #bv-film-track{height:1130vh!important}
    #fcap-frame,#fcap-hw1,#fcap-hw2,#fcap-ctrl{left:0!important;right:0!important;width:auto!important;top:auto!important;bottom:0!important;height:auto!important;justify-content:flex-end!important;align-items:flex-start!important;padding:0 22px calc(82px + var(--vbar,0px))!important}
    /* mobile hero: bez przycisku CTA (jest tylko na desktopie); pasek ElevenLabs zostaje
       na górze i chowa sie naturalnie przy scrollu. Tekst hero stoi w scenie (absolute)
       166px nad dolem kontenera: przy scrollu 0 laduje przy samym dole viewportu (caly
       widoczny, ze strzalka), przy chowaniu paska jedzie w gore RAZEM z robotem (scena
       wjezdza pod header), a po przypieciu pod tekstem odslania sie pasek postepu. */
    /* --heroLift (filmcine): tekst jedzie w gore z predkoscia robota, nie sceny */
    #fcap-hero{left:0!important;right:0!important;width:auto!important;top:auto!important;bottom:calc(166px + var(--vbar,0px) - var(--heroLift,0px))!important;height:auto!important;justify-content:flex-end!important;align-items:flex-start!important;padding:0 22px!important}
    #fcap-hero h1{font-size:30px!important}
    #fcap-hero p{font-size:15px!important;margin-top:12px!important}
    /* CTA w hero zostaje widoczne na mobile (audyt SEO/SXO): wersja kompaktowa */
    .bv-hero-cta{padding:12px 22px!important;font-size:15px!important;margin-top:18px!important}
    #fcap-hero .bv-hero-scroll{margin-top:16px!important}
    #fcap-progress{bottom:calc(32px + var(--vbar,0px))!important}
    #fcap-speak{left:0!important;right:0!important;width:auto!important;top:auto!important;bottom:calc(265px + var(--vbar,0px))!important;height:auto!important;padding:0 22px!important;transition:opacity .3s ease}
    /* rozwinięta lista języków (klik "+N") zabiera miejsce — chowamy tytuł+tekst nad czatem */
    #fcap-speak.bv-flang-open-hide{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
    #fspeak{left:0!important;right:0!important;width:auto!important;top:auto!important;bottom:calc(60px + var(--vbar,0px))!important;padding:0 22px!important}
    #cine-scrim{background:linear-gradient(0deg,rgba(8,11,18,0.97) 0%,rgba(8,11,18,0.88) 32%,rgba(8,11,18,0.32) 58%,transparent 80%)!important}
    #cine-glow{left:50%!important;top:40%!important}
    #fcap-wave{left:50%!important;top:36%!important}
    #bv-cine-loading{left:50%!important;top:40%!important}
  }


    .mono{font-family:'JetBrains Mono',monospace}
  .disp{font-family:'Space Grotesk',sans-serif}
  .scrolly{scrollbar-width:thin}
  .scrolly::-webkit-scrollbar{width:8px;height:8px}
  .scrolly::-webkit-scrollbar-thumb{background:rgba(148,163,184,0.2);border-radius:8px}
  @keyframes bvpulse{0%,100%{opacity:1}50%{opacity:.4}}
  .bv-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;padding:96px 16px 16px}
  .bv-cap-wrap{position:relative;flex:0 0 auto;width:100%;max-width:860px;min-height:168px;padding-top:18px}
  .bv-fit{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
  .bv-frames{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
  .bv-window{position:absolute;width:1180px;flex:0 0 auto;transform-origin:center center;border:1px solid rgba(148,163,184,0.16);border-radius:14px;overflow:hidden;background:#080B12;box-shadow:0 40px 90px -40px rgba(0,0,0,0.9)}
  .bv-phone{position:absolute;width:340px;height:710px;transform-origin:center center;overflow:hidden;border-radius:44px}
  .bv-mpane{position:absolute;inset:0;will-change:transform}
  .bv-frames.mobile .bv-window{display:none}
  .bv-frames.desktop .bv-phone{display:none}
  .bv-controls{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding-top:4px}
  .bv-seg{display:inline-flex;border:1px solid rgba(148,163,184,0.2);border-radius:9px;overflow:hidden;background:rgba(11,16,32,0.6)}
  .bv-seg button{appearance:none;border:0;background:transparent;color:#94A3B8;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:500;padding:7px 15px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
  .bv-seg button.on{background:rgba(56,189,248,0.14);color:#38BDF8}
  .bv-pills{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:center}
  .bv-pills button{appearance:none;display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(148,163,184,0.16);background:rgba(11,16,32,0.5);border-radius:999px;padding:6px 13px;font-family:'Inter',sans-serif;font-size:12px;font-weight:500;color:#94A3B8;cursor:pointer}
  .bv-pills button .n{font-family:'JetBrains Mono',monospace;font-size:9.5px;opacity:0.7}
  .bv-pills button.on{background:rgba(56,189,248,0.12);border-color:rgba(56,189,248,0.45);color:#F8FAFC}
  .bv-nav-item.on{background:rgba(148,163,184,0.06)!important;border-color:rgba(148,163,184,0.35)!important;color:#F8FAFC!important}
  /* Panel operatora na telefonie (<760px, spójne z progiem hero'owego filmu 3D): ten sam
     pinned scroll-driven mechanizm co na desktopie (JS wymusza tryb "mobile", ramka telefonu
     skaluje się przez fit()) — tu tylko kompaktujemy podpisy/kontrolki, zeby telefonowi
     zostalo wiecej wysokosci, i chowamy przelacznik desktop/mobile (nie ma go gdzie pokazac). */
  .bv-panel-mobile .bv-seg{display:none}
  .bv-panel-mobile .bv-sticky{padding:88px 14px 14px}
  .bv-panel-mobile .bv-cap-wrap{min-height:148px;padding-top:16px}
  /* margin-top:auto w bloczku "Fundament" wyrównuje go do dolu kolumny na desktopie
     (siatka 2-kolumnowa, align-items:stretch); gdy siatka zwija sie do 1 kolumny na
     mobile, wiersz nie ma juz nadmiarowej wysokosci, wiec auto = 0 i tekst sklejal sie
     z bloczkiem — tu wymuszamy staly odstep. */
  @media (max-width:760px){
    .bv-fund-block{margin-top:24px!important}
  }
  .bv-panel-mobile .bv-cap-wrap h2{font-size:20px!important}
  .bv-panel-mobile .bv-cap-wrap p{font-size:13.5px!important;line-height:1.5!important;margin-top:8px!important}
  .bv-panel-mobile .bv-controls{gap:8px}
  .bv-panel-mobile .bv-pills{gap:5px}
  .bv-panel-mobile .bv-pills button{padding:5px 10px;font-size:11px}


  html{scroll-behavior:smooth;scroll-padding-top:var(--hdr)}
  .bv-lang-btn{display:inline-flex;align-items:center;text-decoration:none;border:none;padding:11px 17px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;letter-spacing:0.02em;background:transparent;color:#94A3B8;transition:color .15s,background .15s}
  .bv-lang-btn:hover{color:#F8FAFC}
  .bv-lang-btn.on{background:rgba(56,189,248,0.16);color:#38BDF8}
  .bv-h-light:hover{color:#F8FAFC!important}
  .bv-h-cyan:hover{color:#38BDF8!important}
  .bv-h-social:hover{color:#38BDF8!important;border-color:rgba(56,189,248,0.4)!important}
  .bv-h-ghost:hover{border-color:#F8FAFC!important;background:rgba(255,255,255,0.04)!important}
  .bv-field:focus{border-color:#2563EB!important;background:#fff!important}
  image-slot{display:block}
  /* dostępność: widoczny fokus klawiatury (WCAG 2.4.7) */
  :focus{outline:none}
  :focus-visible{outline:2px solid #38BDF8;outline-offset:3px;border-radius:4px}
  .bv-field:focus-visible{outline:none}
  /* oś kroków „Jak to działa": prawdziwa sekwencja zamiast siatki kart */
  .bv-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin:0;padding:0}
  .bv-step{position:relative;display:flex;flex-direction:column;padding-right:8px}
  .bv-step::before{content:'';position:absolute;top:17px;left:48px;right:-28px;height:1px;background:rgba(148,163,184,0.25)}
  .bv-step:first-child::before{background:linear-gradient(90deg,rgba(56,189,248,0.6),rgba(148,163,184,0.25))}
  .bv-step:last-child::before{display:none}
  .bv-step-dot{position:relative;z-index:1;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;color:#38BDF8;background:#080B12;border:1px solid rgba(56,189,248,0.35);margin-bottom:18px}
  @media (max-width:759px){
    .bv-steps{grid-template-columns:1fr;gap:26px}
    .bv-step{flex-direction:row;gap:16px;padding-right:0}
    .bv-step::before{display:none}
    .bv-step-dot{flex:0 0 auto;margin-bottom:0}
  }
  /* oś czasu wizji: jedna aktywna rola, przyszłe wyciszone, bez pustych kart */
  .bv-tl{position:relative;display:flex;flex-direction:column;gap:36px}
  .bv-tl-item{position:relative;padding-left:40px}
  .bv-tl-item:not(:last-child)::after{content:'';position:absolute;left:10px;top:18px;height:calc(100% + 23px);width:1px;background:rgba(148,163,184,0.18)}
  .bv-tl-item.on:not(:last-child)::after{background:#38BDF8}
  .bv-tl-dot{position:absolute;left:4px;top:5px;width:13px;height:13px;border-radius:50%;background:#0B1020;border:1px solid rgba(148,163,184,0.4)}
  .bv-tl-item.on .bv-tl-dot{background:#38BDF8;border-color:#38BDF8;box-shadow:0 0 14px rgba(56,189,248,0.7)}
  .bv-tl-item.testing .bv-tl-dot{background:#0B1020;border:2.5px dashed #38BDF8}
  /* touch targety linków paska i stopki: w Header.astro i Footer.astro */
  .bv-grant-strip{opacity:.85;transition:opacity .15s}
  .bv-grant-strip:hover{opacity:1}
  /* Desktop: pasek grantu jako chrome poczatku strony — fixed pod headerem,
     NA WIERZCHU tresci (jak header: polprzezroczysty + blur), nie przesuwa layoutu
     (film startuje od gory viewportu, jak przed dodaniem paska). Widoczny tylko
     na hero: po przescrollowaniu ~jednego ekranu JS dodaje .away i pasek znika
     (inaczej lezalby na naglowkach kolejnych sekcji), wraca przy powrocie na gore.
     Na mobile (≤760) zostaje w flow — normalnie odjezdza ze scrollem. */
  @media (min-width:761px){
    .bv-grant-band{position:fixed;top:var(--hdr);left:0;right:0;z-index:99;padding:10px 24px!important;background:rgba(8,11,18,0.72)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:opacity .3s ease,transform .3s ease}
    .bv-grant-band.away{opacity:0;transform:translateY(-10px);pointer-events:none}
  }
  header a[aria-label="Botversity"]{padding:10px 0}
  .bv-pills button{padding:8px 14px}
  .bv-nav-item{min-height:38px}
  /* chipy językowe w beacie rozmowy: flaga + endonim, aktywny podświetlony cyanem */
  .bv-flag-btn{appearance:none;display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(148,163,184,0.2);background:rgba(11,16,32,0.6);border-radius:999px;padding:6px 12px 6px 8px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.02em;color:#94A3B8;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
  .bv-flag-btn svg{width:15px;height:10px;border-radius:2px;display:block;flex:0 0 auto;box-shadow:0 0 0 1px rgba(255,255,255,0.14)}
  .bv-flag-btn:hover{color:#F8FAFC;border-color:rgba(148,163,184,0.5)}
  .bv-flag-btn.on{background:rgba(56,189,248,0.12);border-color:rgba(56,189,248,0.5);color:#38BDF8}
  /* "+5" jest tylko rozwiązaniem na wąski mobilny ekran (10 flag nie mieści się w dwóch
     rzędach) — na desktopie miejsca starcza, więc wszystkie języki są od razu widoczne. */
  .bv-flang-toggle{display:none}
  @media (max-width:760px){
    .bv-flang-extra{display:none}
    .bv-flang-toggle{display:inline-flex}
    #flang.bv-flang-open .bv-flang-extra{display:inline-flex}
  }
  @keyframes bvBubIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
  .bv-bub-pop{animation:bvBubIn .35s cubic-bezier(0.22,1,0.36,1)}
  /* wskaźnik pisania w dymku: trzy kropki jak w komunikatorze, kolor dziedziczy z dymka */
  .bv-typing{display:inline-flex;align-items:center;gap:4px;height:1.45em;vertical-align:middle}
  .bv-typing i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.3;animation:bvTyp .9s ease-in-out infinite}
  .bv-typing i:nth-child(2){animation-delay:.14s}
  .bv-typing i:nth-child(3){animation-delay:.28s}
  @keyframes bvTyp{0%,100%{opacity:.25;transform:translateY(0)}40%{opacity:.9;transform:translateY(-2px)}}
  /* klikalne segmenty raila filmu (hit-area 24px, pasek 2px) */
  .bv-seg-btn{appearance:none;border:none;background:transparent;padding:11px 2px;margin:0;cursor:pointer;display:block}
  .bv-seg-btn:hover span{background:rgba(148,163,184,0.6)!important}
  /* inline błędy formularza (formularz stoi teraz na bieli: czerwień #DC2626, 4,8:1) */
  .bv-err{display:block;font-size:12.5px;line-height:1.4;color:#DC2626;margin-top:6px}
  .bv-field[aria-invalid="true"]{border-color:rgba(220,38,38,0.6)!important}
  /* Oferta — zestaw sprzętowy: dwie połowy jednej ramki. Po zawinięciu na
     wąskim ekranie (2 kolumny mieszczą się od 688px viewportu) linia
     rozdzielająca musi przejść z pionu w poziom, inaczej wisi u lewej krawędzi. */
  #oferta .bv-kit{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));border:1px solid rgba(148,163,184,0.2);border-radius:16px;background:#0B1020;overflow:hidden}
  #oferta .bv-kit>div+div{border-left:1px solid rgba(148,163,184,0.16)}
  @media (max-width:687px){
    #oferta .bv-kit>div+div{border-left:none;border-top:1px solid rgba(148,163,184,0.16)}
  }
  /* Case study — nagranie osobno u góry, para zdjęć pod spodem. Wideo i zdjęcia
     NIE mogą dzielić rzędu: pion 9:16 przy wspólnej wysokości jest z definicji
     węższy niż 3:4, więc dowód (nagranie) wychodził najchudszym elementem.
     Hierarchia stoi na jednej rzeczy — para zdjęć jest węższa niż wideo:
     przy kontenerze 1240 wideo ma 471x838, a każde zdjęcie 401x535. Gdyby para
     dostała pełną szerokość, zdjęcia miałyby 611x815 i znów przykryłyby wideo.
     Oba bloki wyśrodkowane na tej samej osi, żeby sekcja czytała się jako jedna
     kolumna, a nie dwa niezależne pasy. */
  #case-study{--film-w:clamp(300px,38vw,480px)}
  #case-study .bv-case-film{max-width:var(--film-w);margin:0 auto}
  #case-study .bv-case-film .bv-case-media{aspect-ratio:9/16}
  /* Szerokość pary WYPROWADZONA z szerokości wideo (2 × 85% + gap), a nie
     wpisana osobno: przy dwóch niezależnych wartościach zdjęcia zostawały na
     sztywnym limicie, gdy wideo kurczyło się z vw, i w zakresie 700–1100px
     znów wychodziły szersze. Tak proporcja 85% trzyma się na każdej szerokości. */
  #case-study .bv-case-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:calc(var(--film-w) * 1.7 + 18px);margin:0 auto}
  #case-study .bv-case-photo .bv-case-media{aspect-ratio:3/4}
  #case-study figure{margin:0;display:flex;flex-direction:column;gap:13px}
  #case-study .bv-case-media{border-radius:16px;overflow:hidden;border:1px solid rgba(148,163,184,0.2);background:#11172A}
  #case-study .bv-case-media img,#case-study .bv-case-media video{display:block;width:100%;height:100%;object-fit:cover}
  #case-study .bv-case-media img{transition:transform .6s cubic-bezier(.22,1,.36,1)}
  #case-study .bv-case-photo:hover .bv-case-media img{transform:scale(1.03)}
  #case-study figcaption{display:flex;flex-direction:column;gap:7px}
  /* Na telefonie prosty stos: nagranie, przód, tył. Zdjęcia zostają w 3:4 —
     spłaszczenie do 4:3 ucięłoby sylwetkę robota, a para przód/tył ma czytać
     się jak obrót. Wideo bierze pełną szerokość, bo to jedyny sensowny rozmiar
     dla pionu na telefonie. */
  @media (max-width:559px){
    #case-study .bv-case-film,#case-study .bv-case-pair{max-width:none}
    #case-study .bv-case-pair{grid-template-columns:1fr}
  }
  /* FAQ — akordeon: mono +/– zamiast markera przeglądarki */
  #faq details summary::-webkit-details-marker{display:none}
  #faq details summary::after{content:"+";font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:400;color:#38BDF8;line-height:1}
  #faq details[open] summary::after{content:"–"}
  #faq details summary:hover{background:rgba(56,189,248,0.05)}
  /* na telefonie 30px marginesów wewnętrznych zjada szerokość linii — zejdź do 20px jak w kartach */
  @media (max-width:519px){
    #oferta .bv-kit>div{padding:24px 20px!important}
    #faq details summary{padding:20px!important}
    #faq details summary+p{padding:0 20px 22px!important}
  }
  /* skip-link: ukryty do momentu fokusu */
  .bv-skip{position:fixed;top:-60px;left:16px;z-index:200;padding:10px 18px;border-radius:10px;background:#11172A;border:1px solid #38BDF8;color:#F8FAFC;font-size:14px;font-weight:600;text-decoration:none;transition:top .15s}
  .bv-skip:focus{top:12px}
  /* pełny fallback prefers-reduced-motion (WCAG 2.3.3) */
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  }

/* ---- strona główna (firma): film przeglądowy, projekty dedykowane, wdrożenie ---- */
.bv-chip{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:12px;color:#94A3B8;background:rgba(11,16,32,0.6);border:1px solid rgba(148,163,184,0.2);border-radius:999px;padding:7px 13px;white-space:nowrap}
.bv-eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:#38BDF8}
.bv-ghost-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:12px;border:1px solid rgba(148,163,184,0.32);color:#F8FAFC;font-size:16px;font-weight:600;text-decoration:none;white-space:nowrap;transition:border-color .15s,background .15s}
.bv-ghost-btn:hover{border-color:#F8FAFC;background:rgba(255,255,255,0.04)}
.bv-soon{display:inline-flex;align-items:center;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:#7A89A2;border:1px solid rgba(148,163,184,0.24);border-radius:999px;padding:4px 10px}
.bv-live{display:inline-flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:#38BDF8;border:1px solid rgba(56,189,248,0.35);background:rgba(56,189,248,0.08);border-radius:999px;padding:4px 10px}
.bv-live i{width:6px;height:6px;border-radius:50%;background:#38BDF8;box-shadow:0 0 8px #38BDF8}
.bv-arrow-link{display:inline-flex;align-items:center;gap:8px;color:#F8FAFC;font-size:15.5px;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(56,189,248,0.45);padding-bottom:3px;transition:border-color .15s,color .15s}
.bv-arrow-link:hover{color:#38BDF8;border-color:#38BDF8}
.bv-proj-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(148,163,184,0.16)}
.bv-proj-list li{padding:26px 26px 4px 0}
.bv-proj-list li+li{padding-left:26px;border-left:1px solid rgba(148,163,184,0.16)}
.bv-case-teaser{display:grid;grid-template-columns:minmax(0,0.7fr) minmax(0,1.3fr);gap:clamp(32px,5vw,72px);align-items:center}
.bv-case-teaser-media{position:relative;display:block;border-radius:18px;overflow:hidden;border:1px solid rgba(148,163,184,0.2);background:#11172A;aspect-ratio:9/16;max-width:320px;width:100%;justify-self:center}
.bv-case-teaser-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.bv-case-teaser-media:hover img{transform:scale(1.03)}
.bv-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:rgba(8,11,18,0.6);border:1px solid rgba(248,250,252,0.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#F8FAFC}
#projekty p,#wdrozenia p{max-width:62ch}
@media (max-width:900px){
  .bv-proj-list{grid-template-columns:1fr}
  .bv-proj-list li,.bv-proj-list li+li{padding:22px 0 4px;border-left:none}
  .bv-proj-list li+li{border-top:1px solid rgba(148,163,184,0.16)}
  .bv-case-teaser{grid-template-columns:1fr}
}
@media (max-width:760px){
}
@media (max-width:480px){
}

/* ---- film przeglądowy (filmcine.js, tryb overview) ---- */
.bv-scanline{position:absolute;left:8%;right:8%;top:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(56,189,248,0.9),transparent);animation:bvScan 2.6s ease-in-out infinite}
@keyframes bvScan{0%,100%{top:12%}50%{top:86%}}
@media (max-width:760px){
  #bv-ov-track{height:800vh!important}
  .bv-ovcap{left:0!important;right:0!important;width:auto!important;top:auto!important;bottom:0!important;height:auto!important;justify-content:flex-end!important;align-items:flex-start!important;padding:0 22px calc(82px + var(--vbar,0px))!important}
  .bv-ovcap h2{font-size:26px!important;margin-top:12px!important}
  .bv-ovcap p{font-size:15px!important;margin-top:10px!important}
  .bv-ovcap .bv-arrow-link{margin-top:16px!important}
  #fcap-ov-system .bv-cta,#fcap-ov-system .bv-ghost-btn{padding:12px 20px!important;font-size:15px!important}
}
@media (prefers-reduced-motion:reduce){.bv-scanline{animation:none;top:50%}}

/* ---- statyczny kadr filmu (plakat): pierwszy widok bez three.js; znika, gdy scena 3D
   przejmuje obraz (filmcine.js). Na urządzeniach bez 3D zostaje na stałe. ---- */
.bv-poster{position:absolute;inset:0;display:block;transition:opacity .5s cubic-bezier(0.25,1,0.5,1);pointer-events:none}
.bv-poster img{display:block;width:100%;height:100%;object-fit:cover}

/* miejsce na widget Turnstile, ładowany dopiero przy formularzu: bez skoku układu */
.cf-turnstile{min-height:65px}