/* site.css — plik ręczny (PLAN Etap 4). Kolejność arkuszy: fonts.css → export.css (CSS z Claude Design) → site.css.
   Zawiera: stany hero (bez JS / js-pending / sw-ready / js-failed), tokeny świata na .sw-root (bez @layer —
   silnik jest w @layer sw, więc te reguły wygrywają), warstwy, klasy formularza/FAQ/paska mobilnego, podstrony. */

/* ── globalne ── */
body{overflow-x:clip}
html.no-smooth{scroll-behavior:auto!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.btn-gold{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 28px;border-radius:6px;background:#B5873C;color:#101C30;font:600 17px Inter,sans-serif;text-decoration:none;white-space:nowrap}
.btn-gold:hover{background:#A67B34;color:#101C30}
.btn-gold:active{transform:translateY(1px)}

/* ── pasek nawigacji kotwicowej na mobile (desktop ma .nav-mid w nagłówku) ── */
.nav-mobile{display:flex;gap:20px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:10px clamp(20px,4vw,48px);border-top:1px solid #E8EAEE;background:#FEFEFE;scrollbar-width:none}
.nav-mobile::-webkit-scrollbar{display:none}
.nav-mobile a{color:#101C30;text-decoration:none;font:600 14px Inter,sans-serif;white-space:nowrap;flex:none}
@media (min-width:900px){.nav-mobile{display:none}}

/* ── hero / świat ── */
.hero{position:relative;z-index:0;isolation:isolate;background:#101C30;color:#FCFCFA;padding:0;margin:0;overflow-anchor:none}
.hero::before{content:"";position:absolute;left:0;right:0;top:0;height:100svh;background:#101C30 url(../assets/world/img/poster-2.jpg) center 42%/cover no-repeat;z-index:-1}
.hero::after{content:"";position:absolute;left:0;right:0;top:0;height:100svh;background:linear-gradient(180deg,rgba(2,16,43,.55) 0%,rgba(2,16,43,.25) 45%,rgba(2,16,43,.65) 100%);z-index:-1;pointer-events:none}
.sales-link{position:absolute;top:20px;left:0;right:0;margin:0;text-align:center;z-index:70}
.sales-link a{color:#A8AFBA;font:400 14px Inter,sans-serif;text-decoration:underline;text-underline-offset:3px}
.sales-link a:hover{color:#FCFCFA}
.world-transcript{position:relative;max-width:820px;margin:0 auto;padding:clamp(96px,14vh,160px) 24px clamp(64px,10vh,120px);text-align:center;text-shadow:0 2px 24px rgba(2,16,43,.7)}
.world-transcript .scene{margin:0 0 clamp(48px,8vh,96px)}
.world-transcript .eyebrow{margin:0 0 20px;font:600 13px Sora,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#C9A05A}
.world-transcript h1{margin:0 0 24px;font-family:Sora,sans-serif;font-weight:700;font-size:clamp(32px,5.6vw,56px);line-height:1.1;letter-spacing:-.02em;color:#FCFCFA}
.world-transcript h2{margin:0 0 20px;font-family:Sora,sans-serif;font-weight:700;font-size:clamp(26px,3.4vw,40px);line-height:1.15;letter-spacing:-.015em;color:#FCFCFA}
.world-transcript .lead{margin:0 auto;max-width:56ch;font-size:clamp(19px,2.2vw,22px);line-height:1.55;color:#E8EAEE}
.world-transcript .cta-row{margin:0}
/* bez JS (brak klasy) i js-failed: hero rośnie z treścią, cały transkrypt widoczny */
.hero{min-height:100svh;height:auto;overflow:visible}
/* js-pending: rezerwa wysokości = wzór silnika; scena 1 jako wstęp w pierwszym ekranie, reszta sr-only */
html.js-pending .hero{height:var(--world-reserve,100svh);min-height:0;overflow:hidden}
html.js-pending .world-transcript{min-height:100svh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding-top:80px;padding-bottom:80px}
html.js-pending .world-transcript .scene:not(:first-child){position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
/* sw-ready: silnik ma track; transkrypt na stałe sr-only; tło hero nie jest potrzebne (stille silnika) */
html.sw-ready .hero{height:auto;min-height:0;overflow:visible}
html.sw-ready .hero::before,html.sw-ready .hero::after{display:none}
html.sw-ready .world-transcript{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.world-host{position:relative}
.world-host.is-idle>*{visibility:hidden}
/* tokeny świata (06 §4.8) — na .sw-root, PO silniku, bez @layer */
.sw-root{--sw-bg:#101C30;--sw-ink:#FCFCFA;--sw-ink-soft:#A8AFBA;--sw-accent:#B5873C;--sw-font-display:"Sora",system-ui,sans-serif;--sw-font-body:"Inter",system-ui,sans-serif}
.sw-root .sw-scrollbar,.sw-root .sw-topbar{display:none}   /* M-1 realizuje .prog w headerze; topbar pusty (bez brand/nav) */
.sw-root .sw-copy__tags li{background:rgba(181,135,60,.18);color:#F5EDDF;border-color:rgba(181,135,60,.4)}
.sw-root .sw-copy__cta .world-cta{height:52px;padding:0 28px;border-radius:6px}
.sw-root .sw-hint{color:#A8AFBA}
/* wszystko pod światem: nad warstwami fixed silnika */
.page-body{position:relative;z-index:100;background:transparent;overflow-anchor:auto}   /* sekcje mają własne tła; finał przezroczysty nad klatką silnika */

/* ── formularz ── */
.sit-box{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:6px;cursor:pointer;min-height:44px;box-sizing:border-box;border:1px solid #E8EAEE;background:#FFFFFF;transition:border-color 150ms var(--ease-state),background 150ms var(--ease-state)}
.sit-box.is-on{border-color:#B5873C;background:#F5EDDF}
.sit-box:focus-within{outline:2px solid #2A4066;outline-offset:2px}
.announce{margin:0;font:600 14px Inter,sans-serif;line-height:1.5;color:#8C2F1B;min-height:0}
.announce:not(:empty){margin:0 0 20px}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#8C2F1B!important}
.submit-btn{width:100%;height:52px;border:none;border-radius:6px;cursor:pointer;background:#B5873C;color:#101C30;font:600 17px Inter,sans-serif}
.submit-btn:hover{background:#A67B34}
.submit-btn:disabled,.submit-btn.is-busy{opacity:.72;cursor:default;background:#B5873C}
.form-staging{margin:12px 0 0;padding:10px 12px;border:1px dashed #8C2F1B;border-radius:6px;color:#8C2F1B;font:600 14px Inter,sans-serif;line-height:1.5}
.form-error{margin:0;font-size:14px;color:#8C2F1B}

/* ── FAQ ── */
.faq-card{background:#FFFFFF;border-radius:8px;overflow:hidden;border-left:3px solid transparent;box-shadow:0 0 0 1px rgba(16,28,48,.06),0 1px 2px -1px rgba(16,28,48,.06),0 2px 4px 0 rgba(16,28,48,.04);transition:border-color 150ms var(--ease-state)}
.faq-card.is-open{border-left-color:#B5873C}
.faq-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows 320ms var(--ease-state)}
.faq-card.is-open .faq-panel{grid-template-rows:1fr}
.faq-panel__in{overflow:hidden;visibility:hidden;transition:visibility 0s linear 320ms}
.faq-card.is-open .faq-panel__in{visibility:visible;transition-delay:0s}
.faq-arrow{color:#7A5822;flex:none;font-size:16px;transition:transform 320ms var(--ease-state);transform:rotate(0deg)}
.faq-card.is-open .faq-arrow{transform:rotate(180deg)}

/* ── pasek mobilny: transform + visibility (po transitionend, w JS) + inert/aria-hidden ── */
.mobile-bar{transform:translateY(110%)}
.mobile-bar.is-visible{transform:translateY(0)}

/* ── adnotacje projektowe: ?ann=0 ── */
body.no-ann [data-when="showAnn"],body.no-ann .ann{display:none!important}
.ann{margin:16px 0 0;display:inline-flex;font:600 11px ui-monospace,Menlo,monospace;letter-spacing:.04em;padding:4px 8px;border:1px dashed #B5873C;border-radius:4px;color:#7A5822}

/* ── podstrony ── */
.subpage .sub-header{padding:16px clamp(20px,4vw,48px);border-bottom:1px solid #E8EAEE;background:#FEFEFE}
.subpage .sub-header img{width:150px;height:auto}
.sub-main{max-width:720px;margin:0 auto;padding:clamp(40px,6vw,84px) 24px}
.sub-main h1{margin:0 0 24px;font-family:Sora,sans-serif;font-weight:700;font-size:clamp(28px,4vw,44px);line-height:1.15;letter-spacing:-.015em;color:#101C30}
.sub-main p{margin:0 0 16px}
.sub-main .muted{color:#5A6472;font-size:15px}
.sub-footer{border-top:1px solid #E8EAEE;padding:24px clamp(20px,4vw,48px);font-size:14px;color:#5A6472}

@media (prefers-reduced-motion:reduce){
  .faq-panel,.faq-panel__in,.faq-arrow,.mobile-bar,.sit-box{transition:none}
}

/* ── poprawki po QA #1 ── */
/* linki na jasnej karcie formularza wewnątrz sekcji .dark: kontrast (axe) */
.form-card a{color:#7A5822}
.form-card a:hover{color:#101C30}
/* fokus klawiatury w elementach ujawnianych scrollem: natychmiastowe ujawnienie + pozycja fokusu wyżej */
html{scroll-padding-block-end:25vh}   /* start = scroll-margin-top sekcji (80 px), bez sumowania */
.reveal:focus-within,.casc:focus-within{animation:none;opacity:1;transform:none;filter:none}
/* mobile: lżejszy poster sceny 1 (LCP); cały kadr widoczny (contain), bez ucinania kompozycji */
@media (max-width:860px){ .hero::before{background-image:url(../assets/world/img/poster-2-m.jpg);background-size:contain;background-position:center 12%} }

/* ── poprawki po ocenie wizualnej ── */
/* copy świata: długie tytuły PL mieszczą się w 900 px wysokości; szersza kolumna */
@media (min-width:861px){ .sw-root .sw-copy{width:min(46vw,540px)} }   /* na telefonie reguła mobilna silnika (pełna szerokość) */
.sw-root .sw-copy__title{font-size:clamp(1.7rem,3.3vw,2.75rem);line-height:1.06}
.sw-root .sw-copy__body{font-size:clamp(.98rem,1.15vw,1.08rem);max-width:44ch}
/* podpowiedź „przewiń": bez ikony myszy na ekranach dotykowych */
@media (hover:none){ .sw-root .sw-hint i{display:none} }
/* link nad światem: pastylka czytelna na jasnym niebie i w ciemnych scenach (był szary #A8AFBA pod granat placeholdera) */
.sales-link a{display:inline-block;padding:6px 12px;border-radius:999px;background:rgba(16,28,48,.62);color:#FCFCFA;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-decoration:underline;text-underline-offset:3px}
.sales-link a:hover{background:rgba(16,28,48,.8);color:#FCFCFA}

/* ── po re-inspekcji wizualnej ── */
.sw-root .sw-copy__num{display:none}   /* numery scen wyłączone (sceneNumbers:false) */
.sw-root .sw-copy__eyebrow{margin-top:0}
.sw-root :focus-visible{outline:2px solid #C9A05A;outline-offset:3px}  /* pierścień fokusu w świecie: złoto, nie granat na granacie */

/* ═══ świat = strona (wersja 2) ═══ */
/* kotwice sekcji wewnątrz świata (pozycja ustawiana skryptem: start sceny) */
.world-anchor{position:absolute;left:0;top:0;width:1px;height:1px;scroll-margin-top:0;pointer-events:none}
/* skip-link do formularza w transkrypcie: niewidoczny, ujawnia się przy fokusie jako pastylka */
.world-skip{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.world-skip:focus{position:fixed!important;left:50%;top:80px;transform:translateX(-50%);width:auto;height:auto;margin:0;padding:12px 20px;clip:auto;clip-path:none;white-space:nowrap;z-index:300;background:#B5873C;color:#101C30;font:600 15px Inter,sans-serif;border-radius:6px;text-decoration:none}
/* finał: przypięty obraz gotowego domu (ostatnia klatka klipu) + przewijana karta formularza */
.cel{position:relative;z-index:1;background:transparent;color:#FCFCFA}   /* tło = zamrożona ostatnia klatka silnika (fixed), świat aktywny póki finał w kadrze */
html:not(.sw-ready) .cel{background:#101C30 url(../assets/world/img/poster-cel.jpg) center 42%/cover no-repeat}   /* bez JS / awaria: statyczny obraz */
.cel__sky{display:none}
/* bez pełnoekranowego gradientu na przypiętym obrazie — musi być identyczny z ostatnią klatką klipu (szew); scrim lokalnie pod treścią */
.cel__copy{position:relative;padding:20px 24px;border-radius:12px;background:linear-gradient(180deg,rgba(2,16,43,.5),rgba(2,16,43,.36))}   /* lżejszy blok: dom ma być widoczny */
@media (max-width:860px){ html:not(.sw-ready) .cel{background-position:center;background-size:contain} }
.cel__inner{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:clamp(120px,22vh,220px) clamp(20px,4vw,48px) clamp(64px,9vw,120px);display:grid;grid-template-columns:minmax(300px,440px) minmax(340px,560px);gap:48px;justify-content:center;align-items:start}   /* górny pas: gotowy dom widoczny nad treścią */
@media (max-width:980px){ .cel__inner{grid-template-columns:1fr;gap:32px;padding-top:clamp(56px,9vh,96px)} }
.cel__copy{text-shadow:0 1px 12px rgba(2,16,43,.6)}
.cel__copy .eyebrow{margin:0 0 16px;font:600 13px Sora,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#C9A05A}
.cel__copy h2{margin:0 0 20px;font-family:Sora,sans-serif;font-weight:700;font-size:clamp(26px,3.2vw,38px);line-height:1.12;letter-spacing:-.015em;color:#FCFCFA;text-wrap:balance}
.cel__copy .lead{margin:0 0 20px;font-size:clamp(19px,2vw,21px);line-height:1.55;color:#F5EDDF;max-width:44ch}
.cel__note{margin:0 0 28px;font-size:16px;line-height:1.55;color:#E8EAEE;max-width:44ch}
.cel__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;counter-reset:krok}
.cel__steps li{display:flex;align-items:center;gap:10px;font:400 14px Inter,sans-serif;color:#FCFCFA}
.cel__steps li::before{counter-increment:krok;content:counter(krok);width:28px;height:28px;border-radius:50%;border:1px solid #C9A05A;display:inline-flex;align-items:center;justify-content:center;font:600 13px Sora,sans-serif;color:#C9A05A;background:rgba(16,28,48,.5)}
.form-card{position:relative;box-shadow:0 0 0 1px rgba(16,28,48,.06),0 24px 60px -20px rgba(2,16,43,.6)}

/* ── po ocenie wizualnej v2 ── */
/* header zawsze nieprzezroczysty: logo JPEG z mix-blend-mode:multiply na półprzezroczystym tle dawało „ramkę” (A-01: brak wektora) */
@keyframes hdr{to{background:#FEFEFE;box-shadow:0 1px 0 rgba(16,28,48,.08),0 4px 16px rgba(16,28,48,.06)}}   /* #FDFDFD = tło JPEG-a logo */
/* scrim warstwy copy podąża za kryciem tekstu (patch u: --sw-scrim), nie za granicą scen */
.sw-root .sw-copylayer::before{opacity:var(--sw-scrim,1)}
/* mobile: scrim wyżej, żeby numer i eyebrow nad gradientem były czytelne */
@media (max-width:860px){ .sw-root .sw-copylayer::before{height:78%} }
/* bez JS / awaria: mocniejsze przyciemnienie pod transkryptem */
html:not(.sw-ready) .hero::after{background:linear-gradient(180deg,rgba(2,16,43,.7) 0%,rgba(2,16,43,.55) 45%,rgba(2,16,43,.8) 100%)}

/* ── #o-mnie: portret (A-02) obok tekstu, stoi na dolnej krawędzi sekcji ── */
.o-mnie-grid{display:grid;grid-template-columns:minmax(0,68ch);gap:0 56px}
.o-mnie-grid > *{grid-column:1}
.portrait{margin:0;grid-column:1;justify-self:center;align-self:end;margin-top:32px;margin-bottom:calc(-1 * clamp(64px,9vw,120px));line-height:0}
.portrait img{display:block;width:min(100%,360px);height:auto}
@media (min-width:980px){
  .o-mnie-grid{grid-template-columns:minmax(0,68ch) minmax(300px,500px);align-items:end}
  .portrait{grid-column:2;grid-row:1 / span 3;justify-self:end;margin-top:0}
  .portrait img{width:min(100%,500px)}
}

/* ── patch w: copy po prawej (scena 1: logo na płycie po lewej ma zostać czyste) ── */
@media (min-width:861px){
  .sw-root .sw-copy--right{left:auto;right:clamp(18px,5vw,64px)}
  .sw-root .sw-copylayer.scrim-right::before{left:auto;right:0;background:linear-gradient(270deg,var(--sw-bg) 0%,color-mix(in srgb,var(--sw-bg) 82%,transparent) 34%,color-mix(in srgb,var(--sw-bg) 40%,transparent) 62%,transparent 100%)}
}
/* eyebrow sceny nad jasnymi partiami kadru (klocki na stole przy zbliżeniu): cień jak tytuł */
.sw-root .sw-copy__eyebrow{text-shadow:0 1px 10px rgba(16,28,48,.9),0 0 2px rgba(16,28,48,.8)}
/* sekcje pod światem: bez poziomego przepełnienia (ramka modeli ma ujemny inset; numery rozdziałów usunięte razem z overflow:clip) */
.page-body > section{overflow-x:clip}

@media (max-width:640px){ .ft-div{display:none} }
/* logo w nagłówku: na wąskich telefonach mniejszy napis, żeby nie rozpychał nagłówka */
@media (max-width:480px){ .logo-word{margin-left:8px!important;font-size:11px!important;letter-spacing:.16em!important} }
@media (max-width:374px){ .logo-word{display:none!important} }