/* hero: photo, glass panel, floating phone */
body.p3 .dh{position:relative;min-height:min(94vh,820px);display:flex;align-items:flex-end;padding:120px 0 clamp(40px,6vw,72px);margin-bottom:clamp(110px,14vw,190px);color:var(--ink)}
.dh-bg{position:absolute;inset:0;overflow:hidden}
.dh-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform:scale(1.08);animation:dzoom 2.4s var(--ease) both}
@keyframes dzoom{from{transform:scale(1.18);opacity:.5}to{transform:scale(1.04);opacity:1}}
.dh-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,11,15,.72),rgba(10,11,15,.12) 62%),linear-gradient(0deg,rgba(10,11,15,.55),transparent 45%)}
.dh-in{position:relative;width:100%}
.dh-panel{max-width:560px;padding:clamp(22px,3vw,38px);background:rgba(255,255,255,.84);animation:up 1s .25s var(--ease) both}
.dh-panel .kick{display:block;margin-bottom:12px}
.dh-panel h1{font-size:clamp(1.9rem,3.3vw,2.9rem);line-height:1.04;letter-spacing:-.045em;margin:0 0 14px;max-width:none;text-align:left}
.dh-panel .lede{font-size:1.04rem;margin:0 0 20px;text-align:left}
.dh-panel .ctas{justify-content:flex-start;margin:0}
.dh-panel .note{font-size:.84rem;margin:14px 0 0;text-align:left;color:var(--sub)}
.dh-phone{position:absolute;right:max(18px,calc((100% - 1160px)/2 + 40px));bottom:-120px;width:clamp(190px,21vw,262px);z-index:3;animation:phin 1.3s .6s var(--ease) both}
@keyframes phin{from{opacity:0;transform:translateY(90px) rotate(5deg)}to{opacity:1;transform:none}}
/* sticky story */
body.p3 .dstory{padding-top:0}
.dstory-h{margin-bottom:clamp(20px,4vw,48px)}
.dgrid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,5vw,72px);align-items:start}
.dsteps{position:relative;padding-left:34px}
.dsteps::before{content:"";position:absolute;left:7px;top:6vh;bottom:6vh;width:2px;background:var(--line)}
.dstep{min-height:76vh;display:flex;flex-direction:column;justify-content:center;position:relative;transition:opacity .5s var(--ease)}
.dstep::before{content:"";position:absolute;left:-34px;top:50%;margin-top:-8px;width:16px;height:16px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px var(--line);transition:all .4s var(--ease)}
.dstep.on::before{background:var(--hl);box-shadow:inset 0 0 0 2px var(--ink),0 0 0 6px rgba(255,225,77,.35)}
.dstep time{font:700 .82rem var(--f-m);letter-spacing:.12em;color:var(--acc);margin-bottom:8px}
.dstep h3{font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1;letter-spacing:-.04em;margin-bottom:12px}
.dstep p{color:var(--sub);font-size:1.08rem;max-width:44ch;margin:0}
.dstep .mvis{display:none}
.js3 .dstep{opacity:.32}.js3 .dstep.on{opacity:1}
.dstage{position:sticky;top:max(84px,calc(50vh - 330px));align-self:start}
.dst{position:relative;height:min(660px,calc(100vh - 110px));border-radius:32px;overflow:hidden;background:linear-gradient(150deg,rgba(255,225,77,.26),rgba(255,91,31,.08) 55%,rgba(15,157,138,.12));box-shadow:var(--edge),var(--shadow)}
.dst::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 30% 20%,rgba(255,255,255,.7),transparent 70%)}
.dphone{position:absolute;left:50%;top:50%;width:min(250px,44%);margin:0;transform:translate(-50%,-50%);transition:transform .9s var(--ease)}
.dphone .scr{background:#ECE6E0}
.dsc{position:absolute;inset:0;opacity:0;transform:translateY(26px) scale(.985);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.dsc img{display:block;width:100%;height:auto;transform:translateY(var(--ty,0));will-change:transform}
.dstory[data-step="0"] .dsc[data-i="0"],.dstory[data-step="1"] .dsc[data-i="1"],.dstory[data-step="2"] .dsc[data-i="2"],.dstory[data-step="3"] .dsc[data-i="3"],.dstory[data-step="4"] .dsc[data-i="4"],.dstory[data-step="5"] .dsc[data-i="4"]{opacity:1;transform:none}
.dstory[data-step="5"] .dphone{transform:translate(-101%,-50%) scale(.92)}
/* status bar + signal */
.sbar{position:absolute;z-index:2;left:0;right:0;top:0;height:30px;display:flex;justify-content:space-between;align-items:center;padding:0 22px 0 26px;font:700 11px var(--f-b);color:#fff;background:#1F2B7C}
.sig{display:inline-flex;align-items:flex-end;gap:2px;height:11px}.sig i{display:block;width:3px;background:#fff;border-radius:1px;transform-origin:bottom}
.sig .b1{height:4px}.sig .b2{height:6px}.sig .b3{height:8px}.sig .b4{height:11px}
.ban{position:absolute;z-index:2;left:6%;right:6%;top:48px;transform:translateY(-160%);opacity:0;filter:drop-shadow(0 14px 22px rgba(17,19,24,.25))}
.ban img{display:block;width:100%;height:auto;border-radius:12px}
@keyframes sigd{0%,10%{transform:scaleY(1);opacity:1}22%,60%{transform:scaleY(.15);opacity:.35}72%,100%{transform:scaleY(1);opacity:1}}
@keyframes banin{0%,16%{transform:translateY(-160%);opacity:0}26%,58%{transform:none;opacity:1}68%,100%{transform:translateY(-160%);opacity:0}}
@keyframes flyc{0%,70%{opacity:0;transform:translate(0,0) scale(1)}74%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(150%,-70%) scale(.5)}}
.dstory[data-step="4"] .sig i{animation:sigd 6.5s var(--ease) 1 both}
.dstory[data-step="4"] .sig .b4{animation-delay:0s}.dstory[data-step="4"] .sig .b3{animation-delay:.12s}.dstory[data-step="4"] .sig .b2{animation-delay:.24s}.dstory[data-step="4"] .sig .b1{animation-delay:.36s}
.dstory[data-step="4"] .ban{animation:banin 6.5s var(--ease) 1 both}
.dfly{position:absolute;z-index:4;left:50%;top:46%;margin-left:-70px;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.92);opacity:0;pointer-events:none}
.dfly i{width:10px;height:10px;border-radius:50%;background:var(--teal)}.dfly b{display:block;font:700 .84rem var(--f-h);color:var(--ink)}.dfly small{display:block;font-size:.72rem;color:var(--sub)}
.dstory[data-step="4"] .dfly{animation:flyc 6.5s var(--ease) 1 both}
.dlap{position:absolute;right:3%;top:30%;width:64%;opacity:0;transform:translateX(60px) scale(.82);transition:opacity .8s var(--ease),transform .9s var(--ease);z-index:1}
.dlap img{border-radius:8px}
.dstory[data-step="5"] .dlap{opacity:1;transform:none;z-index:3}
.dstory[data-step="5"] .dphone{z-index:2}
/* mobile: no pinning, each step carries its own screen */
@media (max-width:820px){
 body.p3 .dh{min-height:0;padding:96px 0 190px;margin-bottom:clamp(100px,34vw,150px)}
 .dh-panel h1{font-size:clamp(1.9rem,8vw,2.4rem)}
 .dh-phone{right:14px;bottom:-130px;width:128px}
 .dgrid2{grid-template-columns:1fr}.dstage{display:none}
 .dsteps{padding-left:0}.dsteps::before,.dstep::before{display:none}
 .dstep{min-height:0;padding:28px 0 8px}.js3 .dstep{opacity:1}
 .dstep .mvis{display:block;margin-top:18px;border-radius:24px;padding:18px;background:linear-gradient(150deg,rgba(255,225,77,.22),rgba(255,91,31,.08) 55%,rgba(15,157,138,.1));box-shadow:var(--edge)}
 .dstep .mvis img{display:block;width:min(230px,72%);margin:0 auto;border-radius:22px;box-shadow:0 20px 40px rgba(17,19,24,.2)}
 .dstep .mvis .lap{width:100%}.dstep .mvis .lap img{width:100%;border-radius:8px;box-shadow:none}
 .dstep .mvis img+img{margin-top:12px;width:100%;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
 .dh-bg img,.dh-panel,.dh-phone{animation:none!important}
 .dsc,.dphone,.dlap,.dstep{transition:none!important}
 .ban{transform:none;opacity:1;animation:none!important}
 .dstory[data-step] .sig i,.dstory[data-step] .dfly{animation:none!important}
 .dstory:not([data-step="4"]) .ban{display:none}
}