/* Jeden rysunek prowadzi od szkicu w hero do płaskiej dokumentacji zakresu. */
.opening-story{position:relative;isolation:isolate;overflow:clip;background:var(--paper)}
.opening-drawing{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.opening-story .hero{min-height:900px;min-height:max(790px,100svh);padding-top:140px;padding-bottom:40px;background:transparent;overflow:visible}
.opening-story .hero-layout{display:grid;grid-template-columns:1.02fr 1fr;gap:3vw;align-items:center;margin:35px 0 70px;min-height:560px}
.opening-story .hero-body{display:block;z-index:2}
.opening-story .hero h1{font-size:clamp(58px,6.15vw,110px);line-height:1.07;font-weight:720;letter-spacing:-.065em}
.opening-story .hero-subtitle{font-size:clamp(16px,1.45vw,23px);line-height:1.5;max-width:440px;margin:35px 0 28px}
.opening-story .hero-body>.button{border-radius:0;min-height:56px;padding:15px 25px;font-size:15px}
.sketch-anchor{height:650px;min-width:0;align-self:center;position:relative}
.opening-story .hero-base{border:0;position:relative;z-index:2;justify-content:flex-start;font-size:10px}
.opening-story .offer{background:transparent;position:relative;z-index:2;padding-top:85px;padding-bottom:20px}
.opening-story .offer-wire>.wire-drawing{opacity:0}
.opening-story .wire-brand{display:none}
.opening-story .callout{background:var(--paper)}
.opening-story .leader-lines{opacity:var(--callout-progress,0);transition:opacity .2s}
.opening-story .drawing-caption{opacity:var(--callout-progress,0)}
.blueprint-handoff{height:220px;position:relative;z-index:0;margin-bottom:-1px}
.blueprint-handoff svg{width:100%;height:100%;display:block}
.handoff-paper{fill:#234be8}.handoff-guides{stroke:#dbe5ff66;stroke-width:1;fill:none}
.blueprint-board{transform:none}
@media(min-width:1600px){.sketch-anchor{height:740px}.opening-story .hero-layout{margin-bottom:30px}}
@media(max-width:1000px) and (min-width:601px){.opening-story .hero-layout{grid-template-columns:1.1fr 1fr;gap:0}.opening-story .hero h1{font-size:6.55vw}.sketch-anchor{height:510px}.opening-story .hero{min-height:760px}.opening-story .hero-layout{min-height:520px;margin:0}.opening-story .hero-subtitle{font-size:16px}}
@media(max-width:600px){.opening-story .hero{padding:150px 22px 24px;min-height:0}.opening-story .hero-layout{display:flex;flex-direction:column;gap:0;min-height:0;margin:0}.opening-story .hero-body{width:100%}.opening-story .hero h1{font-size:11.3vw;font-weight:680;line-height:1.08}.opening-story .hero-subtitle{font-size:16px;max-width:310px;margin:25px 0 20px}.opening-story .hero-body>.button{font-size:13px;min-height:48px;padding:10px 20px}.sketch-anchor{width:80%;height:430px;margin:38px 0 12px 8%}.opening-story .hero-base{margin:0;padding-top:15px}.opening-story .offer{padding-top:75px}.opening-story .offer-wire{height:auto;aspect-ratio:560/650;width:80%;margin:25px auto 40px}.blueprint-handoff{height:145px}}
@media(prefers-reduced-motion:reduce){.opening-story .leader-lines,.opening-story .drawing-caption{opacity:1}.opening-story .offer-wire>.wire-drawing{opacity:1}}
.motion-paused .opening-story .leader-lines,.motion-paused .opening-story .drawing-caption{opacity:1}.motion-paused .opening-story .offer-wire>.wire-drawing{opacity:1}
@media(min-width:601px) and (max-width:1000px){.opening-story .hero-subtitle{max-width:280px}.opening-story .offer-intro{max-width:43%}.opening-story .offer-intro h2{font-size:6.5vw}.opening-story .offer-intro p{font-size:15px}.opening-story .offer-intro .button{font-size:12px;padding:12px 16px}}
@media(max-width:600px){.opening-story .offer{display:flex;flex-direction:column;gap:0;padding-top:35px}.opening-story .offer-blueprint{display:contents}.opening-story .offer-wire{order:0;flex:none}.opening-story .offer-intro{order:1;margin-top:25px;margin-bottom:45px}.opening-story .deliverables{order:2}.opening-story .scope-note{order:3}.opening-story .drawing-caption{display:none}.opening-story .offer-intro h2{font-size:12vw}.opening-story .offer-intro p{font-size:16px}.opening-story .callout{padding-left:8px}.opening-story .scope-note{padding-left:8px}.opening-story .offer-intro{padding-left:8px}}
.opening-story .hero-base{display:none}
.opening-story:not(.has-opening-motion) .offer-wire>.wire-drawing{opacity:1}
@media(max-width:600px){.opening-story .hero-layout{margin-bottom:0}.opening-story .hero{padding-bottom:0}}
.opening-story .drawing-caption{display:none}
.opening-story .scope-note{position:relative;background:var(--paper);z-index:2}
/* Przypięta scena: przewijanie rozwija powierzchnię, zamiast przesuwać ilustrację. */
.opening-pin{height:240svh;position:relative;z-index:0}
.opening-story .hero{position:sticky;top:0;height:100svh;min-height:740px;padding-top:115px;padding-bottom:20px}
.opening-story .hero-layout{height:100%;min-height:0;margin:0;align-items:center}
.opening-story .sketch-anchor{height:min(72svh,700px)}
.opening-story .offer{margin-top:-100svh;opacity:var(--offer-reveal,0);pointer-events:var(--offer-events,none)}
.opening-story .hero-body{opacity:var(--hero-copy,1);transform:translateY(calc((1 - var(--hero-copy,1)) * -30px));will-change:opacity,transform}
.opening-story .hero h1{font-size:clamp(56px,6.15vw,110px)}
@media(max-width:1000px) and (min-width:601px){.opening-story .hero{min-height:660px}.opening-story .hero h1{font-size:6.55vw}.opening-story .sketch-anchor{height:65svh}}
@media(max-width:600px){.opening-pin{height:240svh}.opening-story .hero{padding:145px 22px 0;min-height:720px}.opening-story .hero-layout{justify-content:flex-start}.opening-story .hero h1{font-size:11.3vw}.opening-story .hero-subtitle{margin:18px 0 16px;font-size:15px}.opening-story .sketch-anchor{height:350px;width:79%;margin:25px 0 0 8%}.opening-story .offer{padding-top:140px}.opening-story .offer-wire{margin-top:0}}
.motion-paused .opening-pin{height:auto}.motion-paused .opening-story .hero{position:relative}.motion-paused .opening-story .offer{margin-top:0;opacity:1;pointer-events:auto}.motion-paused .opening-story .hero-body{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.opening-pin{height:auto}.opening-story .hero{position:relative}.opening-story .offer{margin-top:0;opacity:1;pointer-events:auto}.opening-story .hero-body{opacity:1;transform:none}}
@media(min-width:601px) and (max-width:1000px){
 .opening-story .offer{display:flex;flex-direction:column;padding-top:140px}
 .opening-story .offer-blueprint{display:contents}
 .opening-story .offer-wire{position:relative;inset:auto;order:0;width:64%;max-width:440px;height:auto;aspect-ratio:560/650;margin:0 auto 45px}
 .opening-story .offer-intro{order:1;max-width:none;margin:20px 0 50px}
 .opening-story .offer-intro h2{font-size:9vw}
 .opening-story .offer-intro p{max-width:430px;font-size:18px}
 .opening-story .deliverables{order:2;display:grid;grid-template-columns:1fr 1fr;gap:35px}
 .opening-story .callout{position:relative!important;inset:auto!important;max-width:none}
 .opening-story .callout p{max-width:270px}
 .opening-story .leader-lines{display:none}
 .opening-story .scope-note{order:3}
}
/* Elementy szkicu przechodzą bezpośrednio na planszę wdrożenia. */
.has-opening-motion .blueprint-guides>g:nth-child(2),.has-opening-motion .blueprint-guides>g:last-child{opacity:0}
.motion-paused .blueprint-guides>g:nth-child(2),.motion-paused .blueprint-guides>g:last-child{opacity:1}
@media(prefers-reduced-motion:reduce){.has-opening-motion .blueprint-guides>g:nth-child(2),.has-opening-motion .blueprint-guides>g:last-child{opacity:1}}
/* Dopracowanie pierwszego kadru według referencji: wydłużony arkusz i spokojna typografia. */
.site-header .header-cta{border:1px solid currentColor;border-radius:0;background:transparent;color:inherit;padding:11px 25px}
.site-header{border-bottom-color:transparent}
.brand{font-weight:560;letter-spacing:-1.8px}.brand-box{font-weight:500}
.opening-story .hero h1{color:#061339;font-weight:740;letter-spacing:-.065em}
.opening-story .hero-subtitle{letter-spacing:-.03em}
@media(min-width:1001px){.opening-story .hero-layout{grid-template-columns:1fr 1fr}.opening-story .hero h1{font-size:6.5vw}.opening-story .sketch-anchor{transform:translateY(-40px)}.opening-story .hero-subtitle{font-size:1.5vw;margin-top:36px}.opening-story .hero-body>.button{font-size:17px;min-height:58px}}
@media(max-width:600px){.site-header .header-cta{padding:9px 12px;font-size:11px}.opening-story .hero h1{font-weight:690}}
.opening-chapter{position:absolute;z-index:3;left:var(--gutter);top:26%;width:38%;opacity:var(--chapter-opacity,0);color:var(--chapter-color,var(--ink));transform:translateY(calc((1 - var(--chapter-opacity,0)) * 18px));pointer-events:none}
.opening-chapter>.eyebrow{color:inherit;opacity:.7;margin-bottom:24px}
.opening-chapter h2{font-size:clamp(34px,4.7vw,74px);line-height:1.07;letter-spacing:-.05em;font-weight:500}
.opening-chapter>p{font-size:clamp(14px,1.15vw,19px);line-height:1.65;max-width:390px;margin-top:26px}
.chapter-facts{display:flex;gap:32px;border-top:1px solid currentColor;margin-top:30px;padding-top:20px}
.chapter-facts strong{font:500 clamp(18px,1.6vw,25px)/1.3 Manrope;display:block;letter-spacing:-.03em}
.chapter-facts span{font-size:12px;opacity:.8;display:block;margin-top:6px}
.opening-chapter small{display:block;font-size:10px;opacity:.68;margin-top:23px;max-width:330px}
@media(max-width:1000px) and (min-width:601px){.opening-chapter{width:39%;top:22%}.opening-chapter h2{font-size:4.8vw}.opening-chapter>p{font-size:13px;margin-top:20px}.chapter-facts{gap:15px;margin-top:22px}.chapter-facts strong{font-size:16px}.chapter-facts span{font-size:10px}.opening-chapter small{font-size:9px}}
@media(max-width:600px){.opening-chapter{left:22px;right:22px;width:auto;top:145px}.opening-chapter>.eyebrow{font-size:8px;margin-bottom:12px}.opening-chapter h2{font-size:31px;line-height:1.05}.opening-chapter h2 br{display:none}.opening-chapter>p{font-size:12px;line-height:1.55;max-width:335px;margin-top:13px}.chapter-facts{gap:30px;margin-top:16px;padding-top:12px}.chapter-facts strong{font-size:17px}.chapter-facts span{font-size:10px;margin-top:3px}.opening-chapter small{font-size:8px;margin-top:11px}}
@media(max-height:740px) and (max-width:600px){.opening-chapter{top:132px}.opening-chapter h2{font-size:26px}.opening-chapter>p{margin-top:9px;font-size:11px}.opening-chapter>.eyebrow{margin-bottom:8px}.chapter-facts{margin-top:10px;padding-top:9px}}
.motion-paused .opening-chapter{display:none}
@media(prefers-reduced-motion:reduce){.opening-chapter{display:none}}
.opening-pin{z-index:2}
/* Strzałka ma własną kolumnę i nigdy nie zajmuje miejsca tekstu. */
.closing{display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,27%);grid-template-rows:auto auto auto 1fr;column-gap:5%;row-gap:24px;min-height:760px}
.closing>.micro{grid-column:1/-1;grid-row:1}
.closing .closing-link{grid-column:1/-1;grid-row:2;margin:50px 0 0;font-size:clamp(70px,15.3vw,240px);line-height:1.15}
.closing>p{grid-column:1;grid-row:3;max-width:none;margin-top:0;align-self:center}
.closing .closing-arrow{position:relative;grid-column:2;grid-row:3/5;inset:auto;width:100%;max-width:340px;align-self:center;justify-self:end;margin:0}
.closing-arrow svg{display:block;overflow:hidden;padding-bottom:7%}
.closing .closing-notes{grid-column:1;grid-row:4;max-width:none;padding-top:35px;margin-top:0;align-self:end;gap:30px;justify-content:flex-start}
@media(max-width:1000px){.closing{min-height:610px;column-gap:6%}.closing .closing-link{margin-top:35px}.closing>p{font-size:4.9vw}.closing .closing-notes{font-size:8px;flex-wrap:wrap;gap:18px}}
@media(max-width:560px){.closing{min-height:480px;grid-template-columns:minmax(0,1fr) 28%;gap:25px 20px}.closing .closing-link{font-size:16vw;margin-top:35px}.closing>p{font-size:6.8vw}.closing .closing-notes{font-size:7px;padding-top:20px}.closing .closing-arrow{align-self:center}.closing-notes>span:last-child{display:block}footer .scene-controls{margin-right:0}}
/* Ciemna paleta ma własne kolory tekstu i akcentów; kobaltowe sceny zachowują jasny tekst. */
body.dark{--accent:#93aaff;--muted:#b4c1d4}
body.dark .opening-story .hero h1{color:var(--ink)}
body.dark .button.primary{background:#93aaff;border-color:#93aaff;color:#101d32}
body.dark .button.primary:hover{background:#b3c3ff;border-color:#b3c3ff;color:#101d32}
body.dark .error{color:#ffb4b4}
body.dark .care-row{background:#1d2e4a;color:var(--ink)}
body.dark .care-row p,body.dark .care-price>span{color:var(--muted)}
body.dark .care-price strong{color:#93aaff}
body.dark .site-header nav{background:var(--header)}
body.dark .site-header.over-blue nav{background:#234be8ed}
body.dark .site-header.over-dark nav{background:#0e1d30ed}
body.dark .planner select option{background:#142033;color:#edf1f8}
@media(min-width:561px){body.dark .site-header nav{background:transparent}}
#email-plan{width:100%;margin-top:20px;text-align:center;font-size:13px}#email-plan[aria-disabled="true"]{opacity:.45;pointer-events:none}.planner #save-plan{margin-top:12px;width:100%;border-radius:0;font-size:12px}
/* Stabilna plansza: rysowanie komponentów i odsłanianie odpowiadających im fragmentów wdrożenia. */
.blue-paper{height:300svh}
.blueprint-board{right:3%;top:31%;width:59%;aspect-ratio:1336/796;transform:none!important;opacity:var(--build-arrive,0);will-change:opacity}
.site-build{display:block;width:100%;height:100%;overflow:visible;color:#dce7ff}
.build-surface{opacity:0}.build-guides{opacity:.25}.build-scan{opacity:0}
.build-caption{display:flex;justify-content:space-between;gap:15px;margin-top:18px;font-size:11px;letter-spacing:.04em;color:#e0eaff}
.build-caption>span{opacity:.65}
.blueprint-copy{width:32%;top:23%}.blueprint-copy h2{font-size:clamp(40px,4.5vw,78px)}
.blueprint-steps{width:100%;max-width:100%}
@media(max-width:1000px) and (min-width:601px){.blueprint-board{right:3%;width:55%;top:38%}.blueprint-copy{width:34%;top:23%}.blueprint-copy h2{font-size:5vw}.build-caption{font-size:9px}}
@media(max-width:600px){.blue-paper{height:310svh}.blueprint-copy{top:150px;left:22px;width:calc(100% - 44px)}.blueprint-copy>.micro{margin-bottom:15px}.blueprint-copy h2{font-size:9vw}.blueprint-copy h2 br{display:none}.blueprint-copy h2 em{margin-left:.2em}.blueprint-steps{margin-top:22px;width:100%;height:125px}.blueprint-board{top:58%;width:calc(100% - 36px);right:18px}.build-caption{font-size:9px;margin-top:12px}.blueprint-steps p{max-width:340px}.blueprint-meta{bottom:30px}}
@media(prefers-reduced-motion:reduce){.blue-paper{height:auto}.blueprint-board{opacity:1}.build-scan{display:none}}
.blueprint-steps article{transition:none}
.blueprint-steps article.step-active{transition:opacity .4s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.build-route{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;color:#e2eeff;z-index:1;overflow:hidden}
.blueprint-board{opacity:1}
@media(prefers-reduced-motion:reduce){.build-route{display:none}}
/* Plansza mieści pełny kadr i podpis nad dolną nawigacją także w niskim oknie. */
@media(min-width:1001px) and (prefers-reduced-motion:no-preference){
  .blueprint-sticky{min-height:0}
  .blueprint-board{width:min(59%,calc((69svh - 105px) * 1336 / 796))}
}
@media(min-width:601px) and (max-width:1000px) and (prefers-reduced-motion:no-preference){
  .blueprint-sticky{min-height:0}
  .blueprint-board{width:min(55%,calc((62svh - 95px) * 1336 / 796))}
}
@media(min-width:601px) and (max-height:720px) and (prefers-reduced-motion:no-preference){
  .blueprint-copy{top:21%}
  .blueprint-copy>.micro{margin-bottom:18px}
  .blueprint-copy h2{font-size:clamp(32px,6.8svh,52px)}
  .blueprint-steps{margin-top:22px}
  .blueprint-steps p{margin-top:12px;font-size:13px}
}