/* motion layer — all disabled under prefers-reduced-motion */
.hero .wrap{perspective:1200px}
.hero-visual{position:relative;transform-style:preserve-3d}
.phone{position:relative;z-index:1;transform:rotateY(calc(var(--mx,0)*-8deg)) rotateX(calc(var(--my,0)*6deg)) translateY(calc(var(--sy,0)*-40px));transition:transform .12s linear;will-change:transform}
.float{position:absolute;z-index:2;background:rgba(255,255,255,.96);color:var(--ink);border-radius:14px;padding:12px 14px;box-shadow:0 20px 50px rgba(0,0,0,.35);font-size:13px;display:grid;gap:2px;min-width:150px;transform:translate3d(calc(var(--mx,0)*var(--d)*-18px),calc(var(--my,0)*var(--d)*-14px + var(--sy,0)*var(--d)*-90px),0);transition:transform .18s linear;will-change:transform;animation:fl-in .9s cubic-bezier(.2,.7,.2,1) both}
.float b{font-size:16px;font-weight:600}.float small{color:var(--ink-4)}.float .ok{color:var(--mint);font-weight:600}
.f1{left:0;top:2%;--d:1.4;animation-delay:.3s}.f2{right:0;top:60%;--d:.9;animation-delay:.5s}.f3{left:0;bottom:4%;--d:1.2;animation-delay:.7s}
@media(min-width:1100px){.f1{left:-8%;top:10%}.f2{right:-10%;top:36%}.f3{left:-4%;bottom:12%}}
@keyframes fl-in{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
@media(max-width:900px){.f1{left:0}.f2{right:0}.f3{left:0;bottom:4%}}
@media(max-width:1100px){.float{min-width:0;padding:8px 10px;font-size:12px}.float b{font-size:14px}}
@media(max-width:480px){.f1,.f2{display:none}}
.hero-copy>*{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}.hero-copy>:nth-child(2){animation-delay:.1s}.hero-copy>:nth-child(3){animation-delay:.2s}.hero-copy>:nth-child(4){animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 400px at calc(50% + var(--mx,0)*20%) calc(30% + var(--my,0)*20%),rgba(170,0,245,.14),transparent 70%);pointer-events:none;transition:background-position .2s}
/* phone internals */
.ph-fence{animation:fence 3s ease-in-out infinite}@keyframes fence{0%,100%{box-shadow:0 0 0 0 rgba(0,128,254,.35)}50%{box-shadow:0 0 0 18px rgba(0,128,254,0)}}
.ph-face-ring{animation:ring 2.4s ease-in-out infinite}@keyframes ring{0%,100%{box-shadow:0 0 0 0 rgba(15,157,107,.4)}50%{box-shadow:0 0 0 10px rgba(15,157,107,0)}}
.ph-btn{position:relative;overflow:hidden}.ph-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);transform:translateX(-100%);animation:sheen 3.5s ease-in-out infinite 1.5s}@keyframes sheen{to{transform:translateX(100%)}}
/* scroll reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}.rv.in{opacity:1;transform:none}
.rv-stagger>*{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}.rv-stagger.in>*{opacity:1;transform:none}
.rv-stagger.in>:nth-child(1){transition-delay:0s}.rv-stagger.in>:nth-child(2){transition-delay:.08s}.rv-stagger.in>:nth-child(3){transition-delay:.16s}.rv-stagger.in>:nth-child(4){transition-delay:.24s}.rv-stagger.in>:nth-child(5){transition-delay:.32s}.rv-stagger.in>:nth-child(6){transition-delay:.4s}.rv-stagger.in>:nth-child(7){transition-delay:.48s}.rv-stagger.in>:nth-child(8){transition-delay:.56s}
/* pillar mocks drift with scroll (parallax) */
.pillar .mock{transform:translateY(calc(var(--py,0)*-30px)) rotateX(calc(var(--py,0)*-2deg));transition:transform .1s linear;will-change:transform}
.pillar{perspective:1000px}
/* check-in rows appear one by one */
.chk-row{opacity:0;transform:translateX(-10px);transition:opacity .5s,transform .5s}.in .chk-row{opacity:1;transform:none}.in .chk-row:nth-child(2){transition-delay:.15s}.in .chk-row:nth-child(3){transition-delay:.3s}.in .chk-row:nth-child(4){transition-delay:.45s}.in .chk-row:nth-child(5){transition-delay:.6s}
/* map dots wander */
.dot{animation:wander var(--t,7s) ease-in-out infinite alternate}.dot:nth-child(5){--t:6s}.dot:nth-child(6){--t:8s}.dot:nth-child(7){--t:5.5s}.dot:nth-child(8){--t:9s}
@keyframes wander{from{translate:0 0}to{translate:14px -10px}}
.dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--blue);opacity:0;animation:ping 2.6s ease-out infinite}.dot:nth-child(5)::after{animation-delay:.8s}.dot:nth-child(6)::after{animation-delay:1.6s}
@keyframes ping{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.8);opacity:0}}
/* month flow: line fills as steps reveal */
.flow{position:relative}.flow::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--grad);transition:width 1.6s cubic-bezier(.2,.7,.2,1)}.flow.in::before{width:100%}
/* salary: numbers count up */
.cnt{display:inline-block;min-width:1ch}
.slip tr{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}.slip.in tr{opacity:1;transform:none}.slip.in tr:nth-child(2){transition-delay:.08s}.slip.in tr:nth-child(3){transition-delay:.16s}.slip.in tr:nth-child(4){transition-delay:.24s}.slip.in tr:nth-child(5){transition-delay:.32s}.slip.in tr:nth-child(6){transition-delay:.4s}.slip.in tr:nth-child(7){transition-delay:.48s}.slip.in tr:nth-child(8){transition-delay:.56s}.slip.in tr:nth-child(9){transition-delay:.7s}
/* module tiles lift */
.modules a{transition:background .15s,transform .25s cubic-bezier(.2,.7,.2,1)}.modules a:hover{transform:translateY(-3px)}
/* header shrink on scroll */
.hdr{transition:background .3s,box-shadow .3s}.hdr.scrolled{background:rgba(10,18,38,.96);box-shadow:0 10px 30px rgba(0,0,0,.25)}
/* progress bar */
.progress{position:fixed;left:0;top:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:var(--grad);z-index:60;pointer-events:none}
@media(prefers-reduced-motion:reduce){.rv,.rv-stagger>*,.chk-row,.slip tr{opacity:1;transform:none}.phone,.float,.pillar .mock{transform:none}.flow::before{width:100%}.progress{display:none}}