/* vapt.com.sg motion layer. Animates transform/opacity only; honors reduced motion. */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero>.wrap{position:relative;z-index:1}
.hero3d{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1s ease}
.hero3d.ready{opacity:1}
.hero3d.is-bg{opacity:.35}
.hero3d canvas{display:block;width:100%;height:100%}
.hero .lead,.hero .btn-row{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.hero .lead{animation-delay:.05s}.hero .btn-row{animation-delay:.12s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.hdr{transition:box-shadow .25s,background .25s}
.hdr.scrolled{box-shadow:0 8px 30px rgba(11,11,15,.08);background:rgba(255,255,255,.94)}
.progress{position:fixed;left:0;right:0;top:0;height:3px;background:var(--red,#D7192D);transform-origin:0 50%;transform:scaleX(0);z-index:100;pointer-events:none}

.motion-ready [data-reveal]:not(.in){opacity:0;translate:0 28px}
[data-reveal]{transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms),translate .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .25s ease-out,box-shadow .25s}

.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;will-change:transform;position:relative}
.tilt:hover{box-shadow:0 22px 50px rgba(11,11,15,.12)}
.btn{transition:background .15s,border-color .15s,translate .2s ease-out,box-shadow .2s}
.btn-red:hover{box-shadow:0 10px 24px rgba(215,25,45,.28)}

.motion-ready .bar i{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.3s cubic-bezier(.2,.7,.2,1) .25s}
.motion-ready .in .bar i,.motion-ready .bar.in i{transform:none}
.step i{transition:transform .35s}
.step:hover i{transform:scale(1.12)}
.num{transition:transform .35s}
.card:hover .num{transform:rotate(-6deg) scale(1.08)}
.badge{animation:none}
.in .b-crit{animation:pulse 2.4s ease-in-out 1.2s 2}
@keyframes pulse{0%,100%{transform:none}50%{transform:scale(1.08)}}

.has-net{position:relative;overflow:hidden}
.has-net>.wrap{position:relative;z-index:1}
.net{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

.marquee{display:flex;overflow:hidden;}
.marquee-track{display:flex;flex-shrink:0;gap:10px;padding-right:10px;animation:mq 28s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-100%)}}

.logo-full{display:block;width:min(260px,100%);height:auto;margin-bottom:6px}
.brand-strip{display:flex;align-items:center;gap:18px;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){
  .hero .pill,.hero h1,.hero .lead,.hero .btn-row{animation:none}
  [data-reveal]{transition:none}
  .motion-ready [data-reveal]:not(.in){opacity:1;translate:none}
  .motion-ready .bar i{transform:none;transition:none}
  .progress{display:none}
}

.logo-img{display:block;height:44px;width:auto}
.ftr .logo-img{height:72px}
.logo-full{width:min(280px,100%)}
@media (min-width:900px){.fgrid{grid-template-columns:2.8fr 1fr 1fr 1fr}.ftr .nw{display:block;white-space:nowrap}}
.ftr .fgrid>div:first-child p{font-size:15px;line-height:1.7}