/* ===== v5: animowane mockupy telefonów (historia: cena, rachunek ze skanu, podgląd inwestora) ===== */
.phones{perspective:1100px;transform-style:preserve-3d}
.phones .ph{transform-style:preserve-3d}
.hero .phones{transition:transform .5s var(--ease);transform:rotateY(calc(var(--tx,0)*9deg)) rotateX(calc(var(--ty,0)*-7deg))}
.sc{position:relative}
.ph.b .sc{padding:0}
.stack{position:relative;flex:1;min-height:0}
.scr{position:absolute;inset:0;padding:18px 14px 26px;display:flex;flex-direction:column;gap:10px;opacity:0;animation:scr 15s var(--ease) infinite}
.scr.s1{animation-delay:0s}.scr.s2{animation-delay:5s}.scr.s3{animation-delay:10s}
@keyframes scr{0%{opacity:0;transform:translateY(14px) scale(.98)}3%,30%{opacity:1;transform:none}33%,100%{opacity:0;transform:translateY(-14px) scale(.98)}}
.dots{position:absolute;left:0;right:0;bottom:9px;display:flex;gap:6px;justify-content:center}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--beige);animation:dot 15s infinite}
.dots i:nth-child(2){animation-delay:5s}.dots i:nth-child(3){animation-delay:10s}
@keyframes dot{0%,33%{background:var(--navy);transform:scale(1.25)}34%,100%{background:var(--beige);transform:none}}
/* telefon A: etapy odhaczają się falą, pasek budżetu pulsuje, rachunek wskakuje jako powiadomienie */
.stg.ck p:before{animation:ck 10s infinite}
.stg.ck p:nth-child(2):before{animation-delay:1.3s}.stg.ck p:nth-child(3):before{animation-delay:2.6s}.stg.ck p:nth-child(4):before{animation-delay:3.9s}.stg.ck p:nth-child(5):before{animation-delay:5.2s}
@keyframes ck{0%,8%{background:transparent;border:2px solid var(--muted)}12%,86%{background:var(--goldmid);border:2px solid var(--goldmid)}94%,100%{background:transparent;border:2px solid var(--muted)}}
.bars.lp b{animation:lp 6s var(--ease) infinite alternate}
@keyframes lp{from{transform:scaleX(.55)}to{transform:scaleX(1)}}
.tile.gal .gp{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:6px}
.gp img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:8px;display:block;opacity:0;animation:gi 9s var(--ease) infinite}
.gp img:nth-child(2){animation-delay:.4s}.gp img:nth-child(3){animation-delay:.8s}
@keyframes gi{0%{opacity:0;transform:scale(.7)}8%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.7)}}
.toast{position:absolute;left:14px;right:14px;top:14px;background:var(--navy);color:#fff;border-radius:14px;padding:10px 14px;font-size:12px;font-weight:700;box-shadow:0 10px 26px rgba(12,27,45,.3);opacity:0;transform:translateY(-16px);animation:ts 9s var(--ease) infinite;z-index:3}
.toast:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold);margin-right:8px}
@keyframes ts{0%,48%{opacity:0;transform:translateY(-16px)}54%,70%{opacity:1;transform:none}76%,100%{opacity:0;transform:translateY(-16px)}}
/* ekran 2: skan rachunku */
.rcw{display:grid;place-items:center;padding:14px}
.p2{position:relative;width:62%;background:#fff;border:1px solid var(--line);border-radius:6px;padding:14px 12px;display:grid;gap:8px;box-shadow:0 8px 22px rgba(12,27,45,.14);transform:rotate(-2deg);overflow:hidden}
.p2 i{display:block;height:7px;border-radius:99px;background:var(--beige)}.p2 i.s{width:55%;background:var(--goldmid);opacity:.6}
.p2 .sl{position:absolute;left:0;right:0;height:3px;background:var(--goldmid);box-shadow:0 0 12px 2px rgba(203,165,46,.55);animation:sc2 5s ease-in-out infinite;top:0}
@keyframes sc2{0%{top:2%;opacity:1}55%{top:96%;opacity:1}62%,100%{top:96%;opacity:0}}
.fds{display:grid;gap:7px;margin-top:6px}
.fds b{display:block;height:9px;border-radius:99px;background:var(--navy);transform-origin:0 50%;animation:fl2 5s var(--ease) infinite}
.fds .f1{width:55%}.fds .f2{width:80%;animation-delay:.18s}.fds .f3{width:38%;animation-delay:.36s}
@keyframes fl2{0%,45%{transform:scaleX(0)}62%,100%{transform:scaleX(1)}}
.tile.okk{background:var(--navy);color:#fff;font-size:12px;font-weight:700;opacity:0;animation:ok2 5s var(--ease) infinite}
.okk:before{content:"✓";color:var(--gold);margin-right:8px}
@keyframes ok2{0%,66%{opacity:0;transform:translateY(8px)}76%,100%{opacity:1;transform:none}}
/* ekran 3: podgląd inwestora */
.tile.wp{position:relative;aspect-ratio:4/3;padding:0;overflow:hidden}
.tile.wp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile.wp .po{animation:wipe 5s ease-in-out infinite}
@keyframes wipe{0%,10%{clip-path:inset(0 100% 0 0)}60%,100%{clip-path:inset(0 0 0 0)}}
.tg{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:3px 0}
.tg u{width:34px;height:20px;border-radius:99px;background:var(--beige);position:relative;text-decoration:none}
.tg u:after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.tg u.on{background:var(--navy)}.tg u.on:after{transform:translateX(14px)}
.tg u.blk{animation:tgl 5s infinite}.tg u.blk:after{animation:tgd 5s infinite}
@keyframes tgl{0%,45%{background:var(--beige)}55%,100%{background:var(--navy)}}
@keyframes tgd{0%,45%{transform:none}55%,100%{transform:translateX(14px)}}
.spl2{display:flex;gap:4px;margin-top:6px}.spl2 b{display:block;height:12px;border-radius:6px;background:var(--navy);transform-origin:0 50%;animation:fl2 5s var(--ease) infinite}.spl2 b:nth-child(2){background:var(--goldmid);animation-delay:.15s}.spl2 b:nth-child(3){background:var(--sage);animation-delay:.3s}
/* unoszące się powiadomienia wokół telefonów */
.fchip{position:absolute;z-index:4;background:#fff;color:var(--navy);border-radius:999px;padding:9px 16px 9px 12px;font:700 14px Barlow;box-shadow:0 1px 2px rgba(12,27,45,.06),0 14px 34px rgba(12,27,45,.18);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;opacity:0;animation:fc 9s var(--ease) infinite}
.fchip i{width:9px;height:9px;border-radius:50%;background:var(--goldmid)}
.fchip.c1{left:0;top:16%}.fchip.c2{right:-2%;top:38%;animation-delay:3s}.fchip.c3{left:6%;bottom:12%;animation-delay:6s}
@keyframes fc{0%{opacity:0;transform:translateY(18px) scale(.9)}8%,30%{opacity:1;transform:none}38%,100%{opacity:0;transform:translateY(-14px)}}
@media(max-width:980px){.fchip.c1{left:2%}.fchip.c2{right:0}.fchip.c3{left:4%}}
@media(max-width:480px){.fchip{font-size:12px;padding:7px 12px 7px 10px}.fchip.c2{top:34%}}
@media(prefers-reduced-motion:reduce){.scr,.dots i,.stg.ck p:before,.bars.lp b,.gp img,.toast,.p2 .sl,.fds b,.okk,.tile.wp .po,.tg u.blk,.tg u.blk:after,.spl2 b,.fchip{animation:none!important}.scr.s1{opacity:1}.gp img{opacity:1}.okk,.fchip{opacity:1}.fchip.c2,.fchip.c3{display:none}.toast{display:none}.tile.wp .po{clip-path:none}.hero .phones{transform:none}}