/* Nagłówek z warstw (tło ze słońcem, drobinki, echo postaci, postać, ramka kadru)
   i detale kadru w sekcjach. Ładowany tylko na stronie głównej. */

.hero{background:#0E0C0A}
.hero .leader{background:#0E0C0A}
.hl-bg,.hl-me,.hl-echo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:36% 100%;will-change:transform;pointer-events:none;user-select:none}
.hl-bg{z-index:1;-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%);mask-image:linear-gradient(180deg,transparent,#000 12%)}
#bg{z-index:2;opacity:.8}
.hl-echo{z-index:3;opacity:.16;filter:blur(1.5px) brightness(1.3) sepia(.6)}
.hl-echo.e2{opacity:.07;filter:blur(3px) brightness(1.4) sepia(.8)}
.hl-me{z-index:4}
.hero::after{z-index:5;background:linear-gradient(90deg,rgba(14,12,10,.9) 0%,rgba(14,12,10,.55) 32%,rgba(14,12,10,0) 58%),linear-gradient(180deg,rgba(14,12,10,.5) 0%,transparent 18%,transparent 62%,#0E0C0A 99%)}

/* komputer: wysokość nagłówka dopasowana do zdjęcia (bez pustki nad słońcem), tekst na środku wysokości */
@media(min-width:801px){
  .hero{height:clamp(720px,calc(min(100vw,1800px) / 2.89 + 260px),100svh);aspect-ratio:auto;min-height:0;max-height:none}
  .hero-content{inset:0;display:flex;align-items:center;padding-top:4.5rem}
  .hl-bg,.hl-me,.hl-echo{width:min(100%,1800px);left:max(0px,calc(50% - 900px));right:auto}
}

/* bardzo szerokie ekrany: zdjęcie trzyma się środka, tło łagodnie znika po bokach */
@media(min-width:1801px){
  .hl-bg{-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%),linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent,#000 12%),linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}
}

/* tekst i przyciski w jednej kolumnie po lewej, z dala od zdjęcia */
.hero-row{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:1.6rem}

/* ramka kadru wokół twarzy */
.hl-vf{position:absolute;z-index:5;pointer-events:none;will-change:transform;opacity:0;transition:opacity 1s .8s}
.hero.open .hl-vf{opacity:1}
.hl-vf i{position:absolute;width:clamp(16px,2vw,30px);height:clamp(16px,2vw,30px);border:0 solid rgba(246,241,234,.85)}
.hl-vf i:nth-child(1){left:0;top:0;border-width:1.5px 0 0 1.5px}
.hl-vf i:nth-child(2){right:0;top:0;border-width:1.5px 1.5px 0 0}
.hl-vf i:nth-child(3){left:0;bottom:0;border-width:0 0 1.5px 1.5px}
.hl-vf i:nth-child(4){right:0;bottom:0;border-width:0 1.5px 1.5px 0}
.hl-vf span{position:absolute;left:0;top:calc(100% + .7rem);font-weight:500;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(246,241,234,.75);white-space:nowrap}
.hl-vf span em{display:block;margin-top:.1rem;font-style:normal;text-transform:none;letter-spacing:.06em;font-size:.8rem;color:#F6F1EA}

/* zdanie przewodnie przewija się w pasku pod nagłówkiem; w sekcji zostaje tylko dla czytników ekranu */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ticker.say .track{animation-duration:110s}
.ticker.say span{display:inline-block;white-space:nowrap;padding:0 1.4rem;color:rgba(246,241,234,.38)}
.ticker.say span::after{margin-left:2.8rem}
section.statement{padding:clamp(2.6rem,5vw,4rem) 0 clamp(4.5rem,8vw,7rem)}
.statement .clients{margin-top:0;border-top:0;padding-top:0}

/* telefon: zdjęcie w górnej części, tekst pod spodem */
@media(max-width:800px){
  .hero{height:auto;min-height:0;aspect-ratio:auto;max-height:none}
  .hl-bg,.hl-me,.hl-echo{inset:auto;top:64px;left:0;width:100%;height:auto;aspect-ratio:1/1;object-position:68% 50%}
  .hl-bg{-webkit-mask-image:none;mask-image:none}
  .hero-content{position:relative;inset:auto;padding:calc(64px + 100vw - 3.2rem) 0 3.2rem}
  .hero::after{background:linear-gradient(180deg,rgba(14,12,10,.5) 0,transparent 110px,transparent calc(64px + 100vw - 170px),#0E0C0A calc(64px + 100vw - 10px))}
  .hl-vf span{display:none}
}

/* O mnie: prywatne kanały */
.me-links{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-top:2rem}
.me-links .kicker{width:100%;margin-bottom:.2rem}
.me-links .btn{padding:.7rem 1.3rem;font-size:.9rem}

/* oferta: animacje w kafelkach (człowieczek w telefonie, przesuwająca się klisza) */
.wave{transform-box:fill-box;transform-origin:0% 100%;animation:wave 1.4s ease-in-out infinite}
@keyframes wave{0%,100%{transform:rotate(0)}50%{transform:rotate(-30deg)}}
.strip{animation:filmroll 8s linear infinite}
@keyframes filmroll{to{transform:translateX(-200px)}}
@media(prefers-reduced-motion:reduce){.wave,.strip{animation:none}}

/* opinie na telefonie: jeden rząd przewijany w bok */
@media(max-width:800px){
  .reviews{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;margin-inline:-1.5rem;padding:0 1.5rem .6rem;scroll-padding-inline:1.5rem;scrollbar-width:none}
  .reviews::-webkit-scrollbar{display:none}
  .reviews blockquote{flex:0 0 84%;scroll-snap-align:start}
  .reveal-on .reviews blockquote.rv{opacity:1;transform:none}
  #opinie .swipe-hint{margin:0 0 1rem}
}

/* lista klientów na biało */
.clients b{color:#F6F1EA}

/* blog i edukacja: poradnik z YouTube + licznik pobrań */
.edu{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin-top:1.2rem}
.edu .yt{aspect-ratio:16/9;border-radius:12px}
.edu .yt button::before{width:76px;height:76px;border-radius:50%;clip-path:none}
.edu-stat .count{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(4.2rem,9vw,7.5rem);line-height:.9;letter-spacing:-.02em;color:#F6F1EA;margin:.5rem 0 .8rem;font-variant-numeric:tabular-nums}
.edu-stat .count i{font-style:normal;color:var(--red)}
.edu-stat p{color:#B3A99C;font-weight:300;max-width:30ch;margin-bottom:1.4rem}
@media(max-width:800px){.edu{grid-template-columns:1fr}}

/* duży napis nad stopką: płynna pętla w jedną stronę */
#outro{animation:outroloop 70s linear infinite}
#outro span{display:inline-block}
@keyframes outroloop{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){#outro{animation:none}}