/* Biały hero i scena agentów wokół chronionej treści, 9.10.2026. */
.hb-hero {
  --cta: var(--action);
  --cta-text: var(--paper);
  --cta-hover: var(--action-hover);
  background: var(--paper);
  color: var(--ink);
  padding: clamp(64px, 7vw, 104px) var(--page-inset) 0;
  text-align: center;
}
.hb-hero__copy { max-width: 960px; margin-inline: auto; }
.hb-hero h1 {
  max-width: 920px;
  margin: 0 auto;
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.hb-hero__lead {
  max-width: 660px;
  margin: 28px auto 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
  text-wrap: pretty;
}
.hb-goals { max-width: 460px; margin: 36px auto 0; }
.hb-goals__row { display: flex; align-items: center; gap: 12px; }
.hb-goals .hb-goals__link { flex: 1; min-width: 0; min-height: 60px; padding: 14px 12px; justify-content: center; border-radius: 8px; font-size: 16px; }
.hb-goals .hb-goals__link { gap: 10px; }
.hb-goals__link > svg { flex: 0 0 20px; width: 20px; height: 20px; color: inherit; }
.hb-goals__link:active { --cta-hover: var(--action-active); }
.hb-goals__arrow { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; }
.hb-goals__arrow:hover { background: var(--surface); border-color: var(--border-control); }
.hb-goals__arrow:active { transform: scale(.95); }
.hb-goals__controls { margin: 12px 56px 0; height: 52px; }
.hb-goals__progress { height: 2px; overflow: hidden; border-radius: 2px; background: var(--line); }
.hb-goals__fill { display: block; width: 100%; height: 100%; background: var(--action); transform: scaleX(0); transform-origin: left; }
.hb-goals__controls button { display: grid; place-items: center; width: 44px; height: 44px; margin: 4px auto 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.hb-goals__controls button:hover { color: var(--ink); background: var(--surface); }
.hb-goals__controls button svg { width: 14px; height: 14px; }
.hb-goals button:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.hb-goals [hidden] { display: none; }
.hb-goals .hb-goals__controls[hidden] { display: block; visibility: hidden; }
.hb-goals__status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hb-hero__space { height: clamp(180px, 20vw, 300px); }
.hb-home { padding-top: 0; }
.hb-home .ps-naglowek {
  isolation:isolate;
  background:transparent;
  border:0;
  transform:translateY(0);
  pointer-events:none;
  transition:transform var(--header-glass-duration) var(--hero-ease),translate var(--header-scroll-duration) var(--ease-out);
}
.hb-home .ps-naglowek__wnetrze { pointer-events:auto; }
/* Nazwana cała belka odcina backdrop-filter od treści strony. Przenosimy
   nieruchomy element przejścia na zawartość, pozostawiając szkło poza nim. */
html[data-ps-motion="on"] .hb-home .ps-naglowek { view-transition-name:none; }
html[data-ps-motion="on"] .hb-home .ps-naglowek__wnetrze { view-transition-name:ps-naglowek; }
.hb-home .ps-naglowek::before,
.hb-home .ps-naglowek::after {
  content:'';
  position:absolute;
  inset:0;
  box-sizing:border-box;
  border-radius:0;
  transform:scaleX(1);
  transform-origin:center;
  pointer-events:none;
  transition:transform var(--header-glass-duration) var(--hero-ease),opacity var(--header-glass-duration) var(--hero-ease);
}
.hb-home .ps-naglowek::before {
  z-index:-1;
  background:var(--header-glass-bg);
  border:1px solid rgb(255 255 255 / 65%);
  border-bottom-color:rgb(22 22 22 / 8%);
  -webkit-backdrop-filter:blur(var(--header-glass-blur)) saturate(140%);
  backdrop-filter:blur(var(--header-glass-blur)) saturate(140%);
}
.hb-home .ps-naglowek::after {
  z-index:-2;
  opacity:0;
  box-shadow:0 8px 28px rgb(22 22 22 / 10%),0 1px 3px rgb(22 22 22 / 5%);
}
.hb-home.hb-menu-floating .ps-naglowek { transform:translateY(var(--header-glass-lift)); }
.hb-home.hb-menu-floating .ps-naglowek::before,
.hb-home.hb-menu-floating .ps-naglowek::after {
  transform:scaleX(var(--header-glass-scale,1));
  border-radius:var(--header-glass-radius);
}
.hb-home.hb-menu-floating .ps-naglowek::after { opacity:1; }
.hb-home.hb-menu-floating .ps-menu__telefon { top:calc(var(--header-height) + var(--header-glass-lift)); }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .hb-home .ps-naglowek::before { background:rgb(255 255 255 / 96%); }
}
@media (prefers-reduced-motion:reduce) {
  .hb-home .ps-naglowek,.hb-home .ps-naglowek::before,.hb-home .ps-naglowek::after { transition:none; }
}
@media print {
  .hb-home .ps-naglowek { transform:none; background:var(--paper); }
  .hb-home .ps-naglowek::before,.hb-home .ps-naglowek::after { display:none; }
}
.hb-hero--scene { position: relative; isolation: isolate; min-height: max(880px, 100svh, calc(500px + 100vw * 410 / 1737)); padding-top: calc(var(--header-height) + clamp(24px, 3svh, 40px)); }
.hb-hero--scene .hb-hero__copy { position: relative; z-index: 1; }
.hb-hero--scene .hb-hero__lead { margin-top: 24px; }
.hb-hero--scene .hb-goals { margin-top: 28px; }
.hb-hero--scene .hb-hero__space { display: none; }
.hb-scene { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--paper); }
.hb-scene picture { display: block; width: 100%; height: 100%; }
.hb-scene img { position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: auto; mask-image:linear-gradient(to bottom,transparent,#000 48px); }
.hb-scene[hidden] { display: none; }
/* Dwa sąsiadujące kadry tego samego obrazu imagegen. Załamanie jest w grafice. */
@media (min-width: 601px) {
  .hb-home { --floor-front: calc(100vw * 155 / 1737); --floor-shadow: calc(100vw * 28 / 1737); }
  .hb-home .hb-scene img { bottom: calc(-1 * var(--floor-front)); }
  .hb-home .ps-pasek-dowodu {
    position: relative;
    z-index: 2;
    height: var(--floor-front);
    display: grid;
    align-items: center;
    padding: 0 0 var(--floor-shadow);
    background: var(--paper);
    border: 0;
  }
  .hb-home .ps-pasek-dowodu > .ps-kontener { position: relative; z-index: 1; }
  .hb-home .ps-pasek-dowodu::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('assets/hero-agenci/sezony/jesien-1737.webp');
    background-image: image-set(url('assets/hero-agenci/sezony/jesien-1737.avif') type('image/avif'), url('assets/hero-agenci/sezony/jesien-1737.webp') type('image/webp'));
    background-size: 100% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--floor-shadow)), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--floor-shadow)), transparent 100%);
    pointer-events: none;
  }
}
@media (max-width: 1200px) {
  .hb-hero--scene { min-height: 100svh; padding-bottom: 52.1vw; }
}
@media (max-width: 600px) {
  .hb-hero--scene { padding-top: calc(var(--header-height) + 40px); }
  .hb-hero h1 { font-size: 38px; letter-spacing: -.04em; }
  .hb-hero__lead { margin-top: 24px; font-size: 17px; line-height: 1.6; }
  .hb-goals { margin-top: 28px; }
  .hb-goals__row { gap: 8px; }
  .hb-goals__controls { margin-inline: 52px; }
  .hb-goals .hb-goals__link { font-size: 14px; line-height: 1.3; min-height: 66px; }
  .hb-hero__space { height: 160px; }
}
@media (prefers-reduced-motion: reduce) { .hb-goals__arrow:active { transform: none; } }
@media (max-width: 359px) {
  .hb-hero h1 { font-size: 34px; }
}

/* Pierwszy mobilny wariant sezonowy do akceptacji: jesień, wspólny obraz obu części. */
@media (max-width:600px) {
  .hb-home { --mobile-front:calc(100vw * 403 / 1109); --mobile-shadow:calc(100vw * 72 / 1109); }
  .hb-home .hb-hero--scene { min-height:0; padding-bottom:0; }
  .hb-home .hb-scene { position:relative; inset:auto; width:100vw; height:calc(100vw * 1016 / 1109); margin:0 calc(-1 * var(--page-inset)); }
  .hb-home .hb-scene img { position:static; width:100%; height:auto; aspect-ratio:1109/1419; }
  .hb-home .hb-scene[hidden] { display:block; visibility:hidden; }
  .hb-home .ps-pasek-dowodu { position:relative; height:var(--mobile-front); padding:0 0 var(--mobile-shadow); display:grid; align-items:center; background:white; border:0; }
  .hb-home .ps-pasek-dowodu::before { content:'';position:absolute;inset:0;background-image:url('assets/hero-agenci/sezony/mobile/jesien-v2-780.webp');background-image:image-set(url('assets/hero-agenci/sezony/mobile/jesien-v2-780.avif') type('image/avif'),url('assets/hero-agenci/sezony/mobile/jesien-v2-780.webp') type('image/webp'));background-size:100% auto;background-position:center bottom;background-repeat:no-repeat;mask-image:linear-gradient(#000 0,#000 calc(100% - var(--mobile-shadow)),transparent 100%);pointer-events:none; }
  .hb-home .ps-pasek-dowodu > .ps-kontener { position:relative;z-index:1; }
  .hb-home .ps-pasek-dowodu ul {grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:start;}
  .hb-home .ps-pasek-dowodu li {min-width:0;flex-direction:column;font-size:12px;line-height:1.3;gap:6px;align-items:center;text-align:center;}
  .hb-home .ps-pasek-dowodu__desktop-br {display:none;}
  .hb-home .ps-pasek-dowodu__ikona {width:19px;height:19px;flex-basis:19px;}
}
@media (max-width:359px) {
  .hb-home .ps-pasek-dowodu ul {gap:8px;}
  .hb-home .ps-pasek-dowodu li {font-size:11px;gap:5px;}
}

/* Aktualna scena i front zawsze używają identycznego pliku z picture.currentSrc. */
.hb-home .ps-pasek-dowodu[style*="--hb-front-image"]::before { background-image:var(--hb-front-image); }
.hb-home .hb-scene--preload { position:absolute!important; inset:0!important; margin:0!important; visibility:hidden!important; }
.hb-home .hb-scene--incoming { position:absolute; inset:0; margin:0; }
.hb-front-transition {
  position:absolute;
  inset:0;
  pointer-events:none;
  background-size:100% auto;
  background-position:center bottom;
  background-repeat:no-repeat;
  mask-image:linear-gradient(#000 0,#000 calc(100% - var(--floor-shadow)),transparent 100%);
}
@media (max-width:600px) {
  .hb-home .hb-scene--incoming { inset:auto 0 0; }
  .hb-front-transition { mask-image:linear-gradient(#000 0,#000 calc(100% - var(--mobile-shadow)),transparent 100%); }
}
/* Stałe pole etykiety zapobiega przesuwaniu strzałki i wysokości CTA. */
.hb-goals .hb-goals__link { display:grid; grid-template-columns:minmax(0,1fr) 20px; padding-inline:20px; }
.hb-goals__caption { display:grid; align-items:center; min-width:0; }
.hb-goals__caption > span { grid-area:1 / 1; }
.hb-goals__previous-label { pointer-events:none; }
.hb-goals__link > svg,
.hb-goals__arrow > svg,
.hb-goals__controls button > svg { transition:transform var(--hero-feedback) var(--ease-out),opacity var(--hero-feedback) ease; }
.hb-goals__controls button { position:relative; }
.hb-goals__controls button > svg { position:absolute; inset:0; margin:auto; }
.hb-goals__controls button > svg[hidden] { display:block; opacity:0; transform:scale(.75); }
.hb-goals__controls button::before { content:'';position:absolute;inset:4px;border:1px solid var(--line);border-radius:50%;opacity:0;transition:opacity var(--hero-feedback) ease; }
.hb-goals[data-playback="stopped"] .hb-goals__controls button::before { opacity:1; }
.hb-goals__fill { transition:opacity var(--hero-feedback) ease; }
.hb-goals[data-playback="paused"] .hb-goals__fill,
.hb-goals[data-playback="stopped"] .hb-goals__fill { opacity:.55; }
@media (hover:hover) and (pointer:fine) {
  .hb-goals__link:hover > svg { transform:translateX(3px); }
  .hb-goals__arrow[data-goal-next]:hover > svg { transform:translateX(2px); }
  .hb-goals__arrow[data-goal-prev]:hover > svg { transform:translateX(-2px); }
  .hb-goals__controls button:hover::before { opacity:1; }
}
.hb-goals__arrow { transition:transform var(--hero-feedback) var(--ease-out); }
.hb-goals__link:active > svg { transform:translateX(1px); }
@media (max-width:600px) {
  .hb-goals .hb-goals__link { padding-inline:10px; gap:6px; }
  .hb-goals__caption { min-height:2.6em; }
}
@media (prefers-reduced-motion:reduce) {
  .hb-goals__link > svg,.hb-goals__arrow > svg,.hb-goals__arrow,
  .hb-goals__controls button > svg,.hb-goals__controls button::before,.hb-goals__fill { transition:none; }
  .hb-goals__link:is(:hover,:active) > svg,.hb-goals__arrow:is(:hover,:active) > svg { transform:none; }
}
@media (min-width:601px) and (max-width:1200px) {
  .hb-home .ps-pasek-dowodu ul { grid-template-columns:1fr 1fr 1.6fr 1fr; gap:12px; }
  .hb-home .ps-pasek-dowodu li { font-size:11px; line-height:1.3; gap:6px; }
  .hb-home .ps-pasek-dowodu__ikona { width:18px; height:18px; flex-basis:18px; }
}

/* Białe prostokąty z cienką czarną ramką, bez rozmycia. */
.hb-home .ps-pasek-dowodu ul {
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:stretch;
  justify-items:center;
}
.hb-home .ps-pasek-dowodu li {
  position:relative;
  width:max-content;
  max-width:100%;
  min-height:48px;
  padding:6px 14px;
  justify-content:center;
  text-align:center;
  background:var(--proof-bg);
  border:1px solid transparent;
  border-radius:0;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:none;
}
.hb-home .ps-pasek-dowodu li::before {
  content:'';
  position:absolute;
  inset:-1px;
  box-shadow:inset 0 0 0 .5px var(--proof-border);
  border-radius:0;
  filter:none;
  pointer-events:none;
}
@media (max-width:600px) {
  .hb-home .ps-pasek-dowodu li { min-height:0; padding:6px 4px; }
}
@media (max-width:359px) {
  .hb-home .ps-pasek-dowodu li { padding:4px 2px; }
}
@media (min-width:601px) and (max-width:1200px) {
  .hb-home .ps-pasek-dowodu li { min-height:40px; padding:4px 8px; }
}
@media (min-width:601px) and (max-width:900px) {
  .hb-home .ps-pasek-dowodu ul { grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.6fr) minmax(0,1fr); }
  .hb-home .ps-pasek-dowodu li { padding:4px 6px; gap:4px; }
  .hb-home .ps-pasek-dowodu__desktop-br { display:none; }
}