/* =========================================================
   KRBN — wizualizacje usług + mockupy realizacji
   Animacje czasowe, uruchamiane klasą .is-active na .svc
   ========================================================= */

@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ping{0%{transform:scale(1);opacity:.85}100%{transform:scale(7.5);opacity:0}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.9);opacity:0}}

/* ---------- Wspólne ---------- */
.vis{
  --ar:1.12;position:relative;width:100%;aspect-ratio:var(--ar);container-type:inline-size;color:var(--paper);
}
.vis--web{--ar:1.12}
.vis--geo{--ar:.98}
.vis--seo{--ar:1.277}
.vis--ads{--ar:1.11}
@media (min-width:1024px){
  .motion .vis{max-width:calc((100svh - var(--nav-h) - 214px)*var(--ar))}
}
.vis svg{overflow:visible}
.vis__note{position:absolute;left:0;top:calc(100% + 14px);font-size:10px;color:var(--fg-3);white-space:nowrap}
.tag{
  position:absolute;transform:translateY(-50%);white-space:nowrap;
  font:600 clamp(9.5px,1.9cqw,12px)/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--fg-2);
}
.tag--r{transform:translate(-100%,-50%)}
.tag i{display:inline-block;width:1.6em;height:1px;background:currentColor;vertical-align:middle;margin-right:.7em}
@media (max-width:1023px){.vis__note{top:calc(100% + 10px)}}

/* ---------- 01 WEB: przeglądarka ---------- */
.bw{position:absolute;left:0;top:0;width:88%;height:81%;display:flex;flex-direction:column;overflow:hidden;background:#0f0f0f;border:1px solid rgba(243,241,235,.2)}
.bw__bar{flex:none;height:4.8cqw;min-height:22px;display:flex;align-items:center;gap:.9cqw;padding:0 1.8cqw;background:#0a0a0a;border-bottom:1px solid rgba(243,241,235,.12)}
.bw__bar i{width:1.1cqw;height:1.1cqw;min-width:6px;min-height:6px;border-radius:50%;border:1px solid rgba(243,241,235,.32)}
.bw__url{margin-left:2cqw;padding:.5cqw 1.8cqw;font:500 clamp(8px,1.35cqw,11px)/1.2 var(--mono);letter-spacing:.04em;color:rgba(243,241,235,.55);border:1px solid rgba(243,241,235,.14)}
.bw__page{position:relative;flex:1;overflow:hidden}
.site{width:100%;font-size:1.6cqw;will-change:transform}
.site__nav{display:flex;align-items:center;gap:2.4cqw;padding:1.9cqw 3cqw;border-bottom:1px solid rgba(243,241,235,.09);font-size:max(8.5px,1.45cqw);color:rgba(243,241,235,.6)}
.site__nav b{margin-right:auto;font-size:max(10px,1.9cqw);font-weight:600;letter-spacing:-.02em;color:var(--paper)}
.site__nav em{font-style:normal;font-weight:600;padding:.8cqw 1.6cqw;background:var(--paper);color:var(--dark)}
.site__hero{padding:7cqw 3cqw 6cqw}
.site__hero small{font:600 max(8px,1.15cqw) var(--mono);letter-spacing:.14em;color:var(--muted)}
.site__hero h4{margin:1.6cqw 0 1.6cqw;font-size:max(15px,5.4cqw);font-weight:600;line-height:1;letter-spacing:-.05em}
.site__hero p{max-width:26em;margin-bottom:2.6cqw;font-size:max(9px,1.6cqw);color:rgba(243,241,235,.6)}
.site__cta{display:inline-block;padding:1.3cqw 2.8cqw;background:var(--signal);color:var(--dark);font-size:max(9px,1.55cqw);font-weight:600}
.site__trio{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;padding:0 3cqw 6cqw}
.site__trio span{padding-top:1.4cqw;border-top:1px solid rgba(243,241,235,.2);font-size:max(9px,1.5cqw);color:rgba(243,241,235,.75)}
.site__trio i{display:block;width:2.4cqw;height:2.4cqw;margin-bottom:1.2cqw;border:1px solid rgba(243,241,235,.4)}
.site__form{display:grid;gap:1.5cqw;margin:0 3cqw 5cqw;padding:3.2cqw;border:1px solid rgba(243,241,235,.16)}
.site__form h5{margin:0 0 .8cqw;font-size:max(11px,2.4cqw);font-weight:600;letter-spacing:-.03em}
.site__form i{height:3.6cqw;background:rgba(243,241,235,.06);border:1px solid rgba(243,241,235,.1)}
.site__form i.tall{height:8cqw}
.site__send{justify-self:start;margin-top:.6cqw;padding:1.2cqw 2.8cqw;background:var(--paper);color:var(--dark);font-size:max(9px,1.55cqw);font-weight:600}
.bw__cursor{position:absolute;left:0;top:0;width:2.6cqw;height:3.6cqw;min-width:10px;background:var(--paper);clip-path:polygon(0 0,0 100%,30% 78%,48% 100%,62% 92%,44% 70%,80% 70%);opacity:0;transform:translate(70cqw,10cqw);z-index:3}
.bw__cursor::after{content:"";position:absolute;left:-60%;top:-40%;width:200%;aspect-ratio:1;border-radius:50%;border:1px solid var(--signal);opacity:0}
.bw__toast{position:absolute;right:2.2cqw;bottom:2.2cqw;display:flex;align-items:center;gap:1cqw;padding:1.2cqw 1.9cqw;background:var(--signal);color:var(--dark);font:600 max(9px,1.5cqw)/1 var(--font);opacity:0;transform:translateY(16px);z-index:3}
.bw__toast b{width:1.2cqw;height:1.2cqw;min-width:6px;min-height:6px;border-radius:50%;background:var(--dark)}

.ph{position:absolute;right:1%;bottom:0;width:24%;aspect-ratio:9/18.5;padding:.8cqw;background:#0a0a0a;border:1px solid rgba(243,241,235,.3);border-radius:3.4cqw;z-index:2;box-shadow:0 0 0 1.4cqw var(--bg)}
.ph__screen{position:relative;display:flex;flex-direction:column;gap:1.5cqw;height:100%;padding:2cqw 1.8cqw;background:#121212;border-radius:2.6cqw;overflow:hidden}
.ph__nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.6cqw}
.ph__nav b{width:34%;height:.9cqw;min-height:3px;background:var(--paper);opacity:.85}
.ph__nav i{width:12%;height:.9cqw;min-height:3px;background:rgba(243,241,235,.4)}
.ph__h i,.ph__p i{display:block;height:1.5cqw;min-height:5px;margin-bottom:.8cqw;background:var(--paper);opacity:.9}
.ph__h i:last-child{width:70%}
.ph__p i{height:.7cqw;min-height:3px;background:rgba(243,241,235,.32)}
.ph__p i:last-child{width:60%}
.ph__cta{display:grid;place-items:center;height:4.6cqw;min-height:16px;background:var(--signal);color:var(--dark);font:600 max(6px,1.05cqw)/1 var(--font)}
.ph__blk{display:grid;grid-template-columns:1fr 1fr;gap:1cqw;flex:1}
.ph__blk i{border:1px solid rgba(243,241,235,.18)}
.ph__ok{position:absolute;inset:0;display:grid;place-items:center;background:rgba(8,8,8,.86);opacity:0}
.ph__ok svg{width:6cqw;min-width:24px;aspect-ratio:1;padding:1.2cqw;background:var(--signal);color:var(--dark);border-radius:50%}

.steps3{position:absolute;left:0;bottom:0;display:flex;align-items:center;font-size:clamp(9px,1.55cqw,11.5px)}
.steps3 li{display:flex;align-items:center;gap:.9em;color:var(--fg-3)}
.steps3 li:not(:last-child)::after{content:"";width:5cqw;min-width:18px;height:1px;background:currentColor;opacity:.5;margin:0 2cqw}
.steps3 b{display:grid;place-items:center;width:2.2em;height:2.2em;border:1px solid currentColor;font-weight:500}
@media (max-width:359px){.steps3 li:not(:last-child)::after{min-width:10px;margin:0 6px}.steps3 li{gap:.6em}}

.svc.is-active .site{animation:w-scroll 9s var(--ease-io) infinite}
.svc.is-active .bw__cursor{animation:w-cursor 9s var(--ease-io) infinite}
.svc.is-active .bw__cursor::after{animation:w-ripple 9s linear infinite}
.svc.is-active .bw__toast{animation:w-toast 9s var(--ease) infinite}
.svc.is-active .ph__ok{animation:w-ok 9s linear infinite}
.svc.is-active .ph__cta{animation:w-pcta 9s linear infinite}
.svc.is-active .steps3 li:nth-child(1){animation:w-s1 9s linear infinite}
.svc.is-active .steps3 li:nth-child(2){animation:w-s2 9s linear infinite}
.svc.is-active .steps3 li:nth-child(3){animation:w-s3 9s linear infinite}
@keyframes w-scroll{0%,24%{transform:translateY(0)}38%,88%{transform:translateY(-34%)}97%,100%{transform:translateY(0)}}
@keyframes w-cursor{
  0%{opacity:0;transform:translate(70cqw,8cqw)}
  6%{opacity:1;transform:translate(60cqw,14cqw)}
  15%,19%{opacity:1;transform:translate(9cqw,30cqw)}
  20%{transform:translate(9cqw,30cqw) scale(.85)}
  22%{transform:translate(9cqw,30cqw) scale(1)}
  48%{opacity:1;transform:translate(34cqw,34cqw)}
  56%,60%{opacity:1;transform:translate(10cqw,49cqw)}
  61%{transform:translate(10cqw,49cqw) scale(.85)}
  63%{transform:translate(10cqw,49cqw) scale(1)}
  92%{opacity:1;transform:translate(10cqw,49cqw)}
  96%,100%{opacity:0;transform:translate(10cqw,49cqw)}
}
@keyframes w-ripple{0%,19%{opacity:0;transform:scale(.3)}20%{opacity:.9;transform:scale(.5)}25%{opacity:0;transform:scale(1.6)}
  60%{opacity:0;transform:scale(.3)}61%{opacity:.9;transform:scale(.5)}66%,100%{opacity:0;transform:scale(1.6)}}
@keyframes w-toast{0%,63%{opacity:0;transform:translateY(16px)}68%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(16px)}}
@keyframes w-ok{0%,63%{opacity:0}68%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes w-pcta{0%,19%{background:var(--signal)}20%,30%{background:var(--paper)}31%,100%{background:var(--signal)}}
@keyframes w-s1{0%,21%{color:var(--paper)}22%,100%{color:var(--fg-3)}}
@keyframes w-s2{0%,21%{color:var(--fg-3)}22%,60%{color:var(--paper)}61%,100%{color:var(--fg-3)}}
@keyframes w-s3{0%,61%{color:var(--fg-3)}62%,94%{color:var(--signal)}95%,100%{color:var(--fg-3)}}

/* ---------- 02 GOOGLE: lokalne wyniki ---------- */
.vis--geo{overflow:hidden;background:#0e0e0e;border:1px solid rgba(243,241,235,.18)}
.geo__map{position:absolute;left:0;top:0;width:100%;height:62%;overflow:hidden}
.geo__search{position:absolute;left:3cqw;right:3cqw;top:3cqw;display:flex;align-items:center;gap:1.8cqw;min-height:34px;height:8cqw;padding:0 2.2cqw;background:rgba(14,14,14,.94);border:1px solid rgba(243,241,235,.2);font-size:clamp(11px,2.2cqw,15px);color:rgba(243,241,235,.8)}
.geo__search svg{width:2.6cqw;min-width:14px;aspect-ratio:1;color:rgba(243,241,235,.7);flex:none}
.geo__sheet{position:absolute;left:0;right:0;bottom:0;height:42%;display:flex;flex-direction:column;padding:2cqw 3cqw 0;background:#121212;border-top:1px solid rgba(243,241,235,.2)}
.geo__head{flex:none;display:flex;justify-content:space-between;align-items:center;padding-bottom:1.6cqw;font-size:clamp(9px,1.6cqw,11px);color:var(--fg-2)}
.geo__pips{display:inline-flex;gap:.8cqw}
.geo__pips i{width:3cqw;min-width:12px;height:3px;background:rgba(243,241,235,.22)}
.geo__rows{position:relative;flex:1}
.row{position:absolute;left:0;right:0;height:33.334%;display:flex;align-items:center;gap:2.4cqw;border-top:1px solid rgba(243,241,235,.12);will-change:transform}
.row__n{position:relative;flex:none;display:grid;place-items:center;width:4.6cqw;min-width:22px;aspect-ratio:1;border:1px solid rgba(243,241,235,.3);font:600 clamp(10px,1.8cqw,13px)/1 var(--mono)}
.row__n u{position:absolute;text-decoration:none}
.row__n u + u{opacity:0}
.row__t{display:grid;gap:.5cqw}
.row__t b{font-size:clamp(11px,2.2cqw,15px);font-weight:600;letter-spacing:-.01em}
.row__t i{font-style:normal;font-size:clamp(9px,1.6cqw,11.5px);color:var(--fg-2)}
.row--a{top:0}.row--b{top:33.334%}.row--you{top:66.668%;background:linear-gradient(90deg,rgba(200,255,50,.1),transparent 70%);box-shadow:inset 2px 0 0 var(--signal);padding-left:1.4cqw}
.row--you .row__n{background:var(--signal);color:var(--dark);border-color:var(--signal)}

.geo__ping{fill:none;transform-box:fill-box;transform-origin:center;opacity:0}
.geo__you-p{transform-box:fill-box;transform-origin:50% 100%}
.svc.is-active .geo__ping{animation:ping 2.8s var(--ease) infinite}
.svc.is-active .geo__ping--2{animation-delay:1.4s}
.svc.is-active .geo__you-p{animation:g-pin 8s var(--ease) infinite}
.svc.is-active .row--you{animation:g-you 8s var(--ease-io) infinite}
.svc.is-active .row--a{animation:g-down 8s var(--ease-io) infinite}
.svc.is-active .row--b{animation:g-down 8s var(--ease-io) infinite}
.svc.is-active .row--you .row__n u:first-child{animation:g-n1 8s linear infinite}
.svc.is-active .row--you .row__n u + u{animation:g-n2 8s linear infinite}
.svc.is-active .geo__pips i:nth-child(1){animation:g-p1 8s linear infinite}
.svc.is-active .geo__pips i:nth-child(2){animation:g-p2 8s linear infinite}
.svc.is-active .geo__pips i:nth-child(3){animation:g-p3 8s linear infinite}
.svc.is-active .geo__pips i:nth-child(4){animation:g-p4 8s linear infinite}
@keyframes g-you{0%,26%{transform:none}44%,88%{transform:translateY(-200%)}97%,100%{transform:none}}
@keyframes g-down{0%,26%{transform:none}44%,88%{transform:translateY(100%)}97%,100%{transform:none}}
@keyframes g-n1{0%,32%{opacity:1}36%,90%{opacity:0}96%,100%{opacity:1}}
@keyframes g-n2{0%,32%{opacity:0}36%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes g-pin{0%,30%{transform:scale(1)}40%{transform:scale(1.28)}52%,100%{transform:scale(1)}}
@keyframes g-p1{0%,4%{background:rgba(243,241,235,.22)}8%,92%{background:var(--signal)}96%,100%{background:rgba(243,241,235,.22)}}
@keyframes g-p2{0%,10%{background:rgba(243,241,235,.22)}14%,92%{background:var(--signal)}96%,100%{background:rgba(243,241,235,.22)}}
@keyframes g-p3{0%,16%{background:rgba(243,241,235,.22)}20%,92%{background:var(--signal)}96%,100%{background:rgba(243,241,235,.22)}}
@keyframes g-p4{0%,22%{background:rgba(243,241,235,.22)}26%,92%{background:var(--signal)}96%,100%{background:rgba(243,241,235,.22)}}

/* ---------- 03 SEO: widoczność ---------- */
.vis--seo svg{position:absolute;inset:0;width:100%;height:100%}
.seo__axes path{vector-effect:non-scaling-stroke}
.seo__line,.seo__camp{fill:none;stroke-dasharray:1;stroke-dashoffset:1}
.seo__area,.seo__flag,.seo__cut,.seo__head,.seo__head-r{opacity:0}
.seo__head-r{fill:none;transform-box:fill-box;transform-origin:center}
.vis--seo .tag{opacity:0}
.svc.is-active .seo__camp{animation:draw 1.8s var(--ease-io) .3s both}
.svc.is-active .seo__line{animation:draw 3s var(--ease-io) .7s both}
.svc.is-active .seo__area{animation:fadein 2s ease 2s both}
.svc.is-active .seo__cut{animation:fadein .8s ease 2s both}
.svc.is-active .seo__flag{animation:rise .8s var(--ease) calc(1.3s + var(--k)*.55s) both}
.svc.is-active .seo__head{animation:fadein .6s ease 3.6s both}
.svc.is-active .seo__head-r{animation:fadein .1s 3.6s both,pulse 2.4s ease-out 3.6s infinite}
.svc.is-active .vis--seo .tag{animation:fadein .8s ease .4s both}
.svc.is-active .tag--seo{animation-delay:1.4s}
.svc.is-active .tag--cut{animation-delay:2.2s}
.svc.is-active .tag--flag{animation-delay:calc(1.4s + var(--k)*.55s)}
.tag--camp{transform:translate(-50%,-50%);color:rgba(243,241,235,.7)}
.tag--seo{transform:translate(-100%,-50%);color:var(--paper)}
.tag--seo::after{content:"";display:inline-block;width:6px;height:6px;margin-left:.7em;border-radius:50%;background:var(--signal)}
.tag--cut{color:rgba(243,241,235,.55)}
.tag--flag{transform:translate(-50%,-50%);color:rgba(243,241,235,.8)}

/* ---------- 04 ADS: kampanie ---------- */
/* 04 REKLAMY: jedna scena, test kreacji → budżet na zwycięzcę → zapytania (pętla 9 s) */
.vis--ads{display:flex;flex-direction:column;background:#0e0e0e;border:1px solid rgba(243,241,235,.18)}
.ad__head{flex:none;display:flex;justify-content:space-between;align-items:center;gap:2cqw;padding:2.6cqw 3.4cqw;border-bottom:1px solid rgba(243,241,235,.12);font-size:clamp(9px,1.6cqw,11.5px);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.ad__phase{position:relative;display:grid;justify-items:end;color:var(--paper)}
.ad__phase u,.ad__chip u{grid-area:1/1;text-decoration:none;white-space:nowrap}
.ad__phase u + u,.ad__chip u + u{opacity:0}
.ad__rows{flex:1;display:flex;flex-direction:column}
.ad__row{flex:1;display:flex;align-items:center;gap:2.6cqw;padding:0 3.4cqw;border-bottom:1px solid rgba(243,241,235,.1)}
.ad__thumb{position:relative;flex:none;width:8cqw;min-width:30px;aspect-ratio:1;border:1px solid rgba(243,241,235,.22);background:linear-gradient(160deg,rgba(243,241,235,.12),rgba(243,241,235,.02))}
.ad__thumb::before,.ad__thumb::after{content:"";position:absolute;left:16%;height:8%;background:rgba(243,241,235,.45)}
.ad__thumb::before{bottom:30%;width:62%}.ad__thumb::after{bottom:15%;width:38%;background:rgba(243,241,235,.25)}
.ad__row--b .ad__thumb{background:linear-gradient(200deg,rgba(243,241,235,.1),rgba(243,241,235,.02))}
.ad__row--c .ad__thumb{background:rgba(243,241,235,.04)}
.ad__mid{flex:1;min-width:0;display:grid;gap:1.4cqw}
.ad__mid b{font-size:clamp(11px,2.1cqw,15px);font-weight:600;letter-spacing:-.01em}
.ad__track{position:relative;display:block;height:max(4px,.9cqw);background:rgba(243,241,235,.1);overflow:hidden}
.ad__fill{position:absolute;inset:0;background:var(--paper);transform-origin:0 50%;transform:scaleX(0)}
.ad__row--b .ad__fill{background:rgba(243,241,235,.7)}
.ad__row--c .ad__fill{background:rgba(243,241,235,.5)}
.ad__chip{position:relative;flex:none;display:grid;justify-items:center;width:max(84px,17cqw);padding:1cqw 1.4cqw;border:1px solid rgba(243,241,235,.22);font-size:clamp(8.5px,1.45cqw,10.5px);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.ad__row--a .ad__chip u + u{color:var(--signal)}
.ad__foot{flex:none;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2cqw 3cqw;padding:3cqw 3.4cqw 3.2cqw;background:#121212;border-top:1px solid rgba(243,241,235,.14)}
.ad__k{font-size:clamp(9px,1.5cqw,11px);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}
.ad__budget{display:flex;gap:3px;height:max(8px,1.8cqw)}
.ad__seg{flex:1 1 0;min-width:0}
.ad__seg--a{background:var(--paper)}.ad__seg--b{background:rgba(243,241,235,.45)}.ad__seg--c{background:rgba(243,241,235,.22)}
.ad__pips{display:flex;gap:max(3px,.8cqw)}
.ad__pips i{flex:1;height:max(8px,1.8cqw);background:rgba(243,241,235,.14)}

.svc.is-active .ad__row--a .ad__fill{animation:ad-fa 9s var(--ease-io) infinite}
.svc.is-active .ad__row--b .ad__fill{animation:ad-fb 9s var(--ease-io) infinite}
.svc.is-active .ad__row--c .ad__fill{animation:ad-fc 9s var(--ease-io) infinite}
.svc.is-active .ad__row--a{animation:ad-win 9s var(--ease-io) infinite}
.svc.is-active .ad__row--b,.svc.is-active .ad__row--c{animation:ad-dim 9s var(--ease-io) infinite}
.svc.is-active .ad__chip u:first-child,.svc.is-active .ad__phase u:first-child{animation:ad-n1 9s linear infinite}
.svc.is-active .ad__chip u + u,.svc.is-active .ad__phase u + u{animation:ad-n2 9s linear infinite}
.svc.is-active .ad__seg--a{animation:ad-ba 9s var(--ease-io) infinite}
.svc.is-active .ad__seg--b,.svc.is-active .ad__seg--c{animation:ad-bo 9s var(--ease-io) infinite}
.svc.is-active .ad__pips i:nth-child(1){animation:ad-p0 9s linear infinite}
.svc.is-active .ad__pips i:nth-child(2){animation:ad-p1 9s linear infinite}
.svc.is-active .ad__pips i:nth-child(3){animation:ad-p2 9s linear infinite}
.svc.is-active .ad__pips i:nth-child(4){animation:ad-p3 9s linear infinite}
.svc.is-active .ad__pips i:nth-child(5){animation:ad-p4 9s linear infinite}
.svc.is-active .ad__pips i:nth-child(6){animation:ad-p5 9s linear infinite}
.svc.is-active .ad__pips i:nth-child(7){animation:ad-p6 9s linear infinite}
.svc.is-active .ad__pips i:nth-child(8){animation:ad-p7 9s linear infinite}
.svc.is-active .ad__pips i:nth-child(9){animation:ad-p8 9s linear infinite}
.svc.is-active .ad__pips i:nth-child(10){animation:ad-p9 9s linear infinite}
@keyframes ad-fa{0%,4%{transform:scaleX(0)}30%,42%{transform:scaleX(.62)}58%,90%{transform:scaleX(.97)}97%,100%{transform:scaleX(0)}}
@keyframes ad-fb{0%,7%{transform:scaleX(0)}32%,90%{transform:scaleX(.47)}97%,100%{transform:scaleX(0)}}
@keyframes ad-fc{0%,10%{transform:scaleX(0)}34%,90%{transform:scaleX(.29)}97%,100%{transform:scaleX(0)}}
@keyframes ad-win{0%,40%{background-color:transparent;box-shadow:inset 0 0 0 transparent}46%,90%{background-color:rgba(200,255,50,.07);box-shadow:inset 2px 0 0 var(--signal)}96%,100%{background-color:transparent;box-shadow:inset 0 0 0 transparent}}
@keyframes ad-dim{0%,40%{opacity:1}46%,90%{opacity:.3}96%,100%{opacity:1}}
@keyframes ad-n1{0%,40%{opacity:1}43%,92%{opacity:0}95%,100%{opacity:1}}
@keyframes ad-n2{0%,40%{opacity:0}43%,92%{opacity:1}95%,100%{opacity:0}}
@keyframes ad-ba{0%,44%{flex-grow:1}60%,90%{flex-grow:8}97%,100%{flex-grow:1}}
@keyframes ad-bo{0%,44%{flex-grow:1}60%,90%{flex-grow:.7}97%,100%{flex-grow:1}}
@keyframes ad-p0{0%,52.0%{background:rgba(243,241,235,.14)}53.5%,90%{background:var(--signal)}95%,100%{background:rgba(243,241,235,.14)}}
@keyframes ad-p1{0%,55.6%{background:rgba(243,241,235,.14)}57.1%,90%{background:var(--signal)}95%,100%{background:rgba(243,241,235,.14)}}
@keyframes ad-p2{0%,59.2%{background:rgba(243,241,235,.14)}60.7%,90%{background:var(--signal)}95%,100%{background:rgba(243,241,235,.14)}}
@keyframes ad-p3{0%,62.8%{background:rgba(243,241,235,.14)}64.3%,90%{background:var(--signal)}95%,100%{background:rgba(243,241,235,.14)}}
@keyframes ad-p4{0%,66.4%{background:rgba(243,241,235,.14)}67.9%,90%{background:var(--signal)}95%,100%{background:rgba(243,241,235,.14)}}
@keyframes ad-p5{0%,70.0%{background:rgba(243,241,235,.14)}71.5%,90%{background:var(--signal)}95%,100%{background:rgba(243,241,235,.14)}}
@keyframes ad-p6{0%,73.6%{background:rgba(243,241,235,.14)}75.1%,90%{background:var(--signal)}95%,100%{background:rgba(243,241,235,.14)}}
@keyframes ad-p7{0%,77.2%{background:rgba(243,241,235,.14)}78.7%,90%{background:var(--signal)}95%,100%{background:rgba(243,241,235,.14)}}
@keyframes ad-p8{0%,80.8%{background:rgba(243,241,235,.14)}82.3%,90%{background:var(--signal)}95%,100%{background:rgba(243,241,235,.14)}}
@keyframes ad-p9{0%,84.4%{background:rgba(243,241,235,.14)}85.9%,90%{background:var(--signal)}95%,100%{background:rgba(243,241,235,.14)}}

.vis h4,.vis h5,.site__nav b{font-family:var(--font-display)}

/* =========================================================
   MOCKUPY REALIZACJI: okno Safari (macOS) + iPhone 16 Pro
   Zrzuty: assets/realizacje/*-desktop.jpg (16:10) i *-mobile.jpg (402:820, widok iPhone 16 Pro bez paska statusu).
   Jednostki cqw liczone od szerokości .case__stage (okno) i .iphone (telefon).
   ========================================================= */
.safari{
  grid-area:1/1;align-self:start;justify-self:start;width:90%;margin:0 0 12cqw;
  border-radius:max(8px,1.1cqw);overflow:hidden;background:#1c1c1e;
  box-shadow:0 0 0 1px rgba(255,255,255,.11),0 60px 110px -40px rgba(0,0,0,.95),0 24px 48px -24px rgba(0,0,0,.7);
}
.safari__bar{position:relative;display:flex;align-items:center;gap:max(10px,2.2cqw);height:max(28px,4.6cqw);padding:0 max(10px,1.8cqw);background:linear-gradient(#323234,#29292b);border-bottom:1px solid #0b0b0c}
.safari__dots{display:flex;flex:none;gap:max(5px,.8cqw)}
.safari__dots i{width:max(8px,1.15cqw);height:max(8px,1.15cqw);border-radius:50%;background:#FF5F57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.28)}
.safari__dots i:nth-child(2){background:#FEBC2E}
.safari__dots i:nth-child(3){background:#28C840}
.safari__ico{flex:none;width:max(40px,6.4cqw);height:max(10px,1.6cqw);color:rgba(235,235,245,.5)}
.safari__ico--act{margin-left:auto}
.safari__url{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(150px,38%);height:62%;
  display:flex;align-items:center;justify-content:center;gap:max(5px,.6cqw);padding-inline:10px;
  border-radius:max(6px,.8cqw);background:rgba(255,255,255,.075);
  font:500 max(10px,1.2cqw)/1 var(--font);letter-spacing:0;color:rgba(235,235,245,.86);white-space:nowrap;overflow:hidden;
}
.safari__url svg{flex:none;width:max(7px,.8cqw);height:max(9px,1.05cqw);color:rgba(235,235,245,.6)}
.safari__shot{display:block;width:100%;height:auto;aspect-ratio:16/10;background:#111}

.case__phone{
  grid-area:1/1;align-self:end;justify-self:end;width:23%;z-index:2;
  transform:translate3d(0,calc(var(--py,0)*-40px),0);
}
.iphone{position:relative;margin:0;container-type:inline-size}
.iphone__body{
  position:relative;z-index:1;padding:1.1cqw;border-radius:17.5cqw;
  background:linear-gradient(140deg,#9a968f 0%,#55534f 14%,#2c2b29 46%,#3f3d3a 76%,#8c8882 100%);
  box-shadow:inset 0 0 0 .35cqw rgba(255,255,255,.14),0 50px 80px -30px rgba(0,0,0,.95),0 20px 40px -18px rgba(0,0,0,.75);
}
.iphone__screen{position:relative;overflow:hidden;border:3.3cqw solid #050505;border-radius:16.4cqw;background:var(--sb,#000)}
.iphone__screen::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.08),rgba(255,255,255,0) 36%)}
.iphone__status{position:relative;display:flex;align-items:center;justify-content:space-between;height:12.25cqw;padding:.7cqw 7.4cqw 0 10.6cqw;color:var(--sf,#fff);background:var(--sb,#000)}
.iphone__status span{font:600 3.9cqw/1 var(--font);letter-spacing:-.01em}
.iphone__status svg{width:16.8cqw;height:2.9cqw}
.iphone__island{position:absolute;left:50%;top:2.5cqw;width:28.6cqw;height:8.4cqw;border-radius:99px;background:#000;transform:translateX(-50%)}
.iphone__screen img{display:block;width:100%;height:auto;aspect-ratio:402/820}
.iphone__home{position:absolute;left:50%;bottom:1.9cqw;z-index:2;width:31cqw;height:1.15cqw;border-radius:1cqw;background:var(--hi,rgba(255,255,255,.75));transform:translateX(-50%)}
.iphone__btn{position:absolute;z-index:0;width:1.6cqw;border-radius:.6cqw;background:linear-gradient(90deg,#3a3936,#8a8680 50%,#3a3936)}
.iphone__btn--act,.iphone__btn--vu,.iphone__btn--vd{left:-.9cqw}
.iphone__btn--pw,.iphone__btn--cam{right:-.9cqw}
.iphone__btn--act{top:16.5%;height:4.6%}
.iphone__btn--vu{top:24.5%;height:7.6%}
.iphone__btn--vd{top:34%;height:7.6%}
.iphone__btn--pw{top:26%;height:11.5%}
.iphone__btn--cam{top:55%;height:7.4%;background:linear-gradient(90deg,#2a2a2a,#55524d 50%,#2a2a2a)}

/* Wejście: okno, potem telefon */
.js .safari[data-reveal]{transform:translate3d(0,40px,0)}
.js .iphone[data-reveal]{transform:translate3d(0,80px,0);--d:.25s}
.js .safari[data-reveal].is-in,.js .iphone[data-reveal].is-in{transform:none}

@container (max-width:620px){
  .safari__ico{display:none}
  .safari__url{width:58%}
}
@media (max-width:1023px){
  .case__phone{transform:none}
}
@media (max-width:599px){
  .safari{width:94%;margin-bottom:22cqw}
  .case__phone{width:30%}
}
@media (prefers-reduced-motion:reduce){
  .bw__cursor,.bw__toast,.ph__ok{display:none}
  .seo__line,.seo__camp{stroke-dashoffset:0!important}
  .seo__area,.seo__flag,.seo__cut,.seo__head,.vis--seo .tag{opacity:1!important}
  .ad__row--a .ad__fill{transform:scaleX(.97)!important}.ad__row--b .ad__fill{transform:scaleX(.47)!important}.ad__row--c .ad__fill{transform:scaleX(.29)!important}
  .ad__row--b,.ad__row--c{opacity:.3!important}
  .ad__row--a{background-color:rgba(200,255,50,.07);box-shadow:inset 2px 0 0 var(--signal)}
  .ad__chip u:first-child,.ad__phase u:first-child{opacity:0!important}.ad__chip u + u,.ad__phase u + u{opacity:1!important}
  .ad__seg--a{flex-grow:8!important}.ad__pips i{background:var(--signal)!important}
}