/* Landing-page motion — pairs with js/motion.js.
   Everything that hides something first is prefixed with .mo (a class added in <head> only when the visitor has not asked
   for reduced motion), so without it — or without JavaScript — the page is simply shown as normal. */

/* smooth scrolling: the script drives it, so the browser's own smoothing is switched off */
html.sm{scroll-behavior:auto!important}

/* ---- scroll progress bar ---- */
.mo-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:90;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,#38bdf8,#0ea5e9 45%,#6366f1);box-shadow:0 0 12px rgba(14,165,233,.6);pointer-events:none}

/* ---- headline words slide up out of a mask ---- */
.mo-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .05em .16em;margin:0 -.05em -.16em}
.mo-wi{display:inline-block;transform:translateY(112%) rotate(5deg);transform-origin:0 100%;transition:transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--n,0) * 60ms)}
.mo-in .mo-wi{transform:none}
.mo .hero h1:not(.mo-split){visibility:hidden}

/* ---- hero entrance ---- */
.mo .hero-copy>*:not(h1){opacity:0;transform:translateY(24px)}
.mo.mo-go .hero-copy>*:not(h1){opacity:1;transform:none;transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 110ms + 250ms)}
.mo .hero-points li{opacity:0;transform:translateX(-16px)}
.mo.mo-go .hero-points li{opacity:1;transform:none;transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--k,0) * 120ms + 900ms)}
.mo .hero-visual{opacity:0;transform:scale(.9) translateY(34px);transform-origin:50% 60%}
.mo.mo-go .hero-visual{opacity:1;transform:none;transition:opacity 1s ease .35s,transform 1.3s cubic-bezier(.16,1,.3,1) .35s}
.hero{position:relative}
.hero>.mkt-wrap{position:relative;z-index:1}

/* the tiles around the laptop float, each on its own beat */
.hero-svg .tile{animation:moFloat 6s ease-in-out infinite}
.hero-svg .tile:nth-of-type(2){animation-duration:7s;animation-delay:-1.4s}
.hero-svg .tile:nth-of-type(3){animation-duration:6.5s;animation-delay:-2.6s}
.hero-svg .tile:nth-of-type(4){animation-duration:7.5s;animation-delay:-3.8s}
.hero-svg .tile:nth-of-type(5){animation-duration:5.5s;animation-delay:-.8s}
@keyframes moFloat{0%,100%{translate:0 0}50%{translate:0 -9px}}

/* soft light that follows the cursor over the hero */
.mo-spot{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .5s;background:radial-gradient(420px circle at var(--sx,50%) var(--sy,40%),rgba(14,165,233,.16),transparent 62%)}
.hero:hover .mo-spot{opacity:1}

/* ---- drifting colour orbs (they move at a different speed from the page = depth) ---- */
.mo-has-orb{position:relative;overflow:clip}
.mo-orb{position:absolute;z-index:0;border-radius:50%;pointer-events:none;filter:blur(46px);opacity:.55;animation:moDrift 16s ease-in-out infinite}
.mo-orb.o1{width:300px;height:300px;right:-90px;top:8%;background:radial-gradient(circle,rgba(56,189,248,.55),transparent 70%)}
.mo-orb.o2{width:260px;height:260px;left:-80px;bottom:6%;background:radial-gradient(circle,rgba(99,102,241,.32),transparent 70%);animation-duration:20s;animation-delay:-6s}
.mo-orb.o3{width:220px;height:220px;left:42%;top:-60px;background:radial-gradient(circle,rgba(255,205,160,.55),transparent 70%);animation-duration:18s;animation-delay:-3s}
@keyframes moDrift{0%,100%{margin:0 0 0 0}50%{margin:26px 0 0 -30px}}
.sec>.mkt-wrap,.contact>.mkt-wrap{position:relative;z-index:1}

/* ---- scrolling marquee band (tilted, speeds up with your scrolling) ---- */
.mo-marquee-wrap{position:relative;z-index:2;overflow:hidden;padding:22px 0;margin:-6px 0 -2px}
.mo-marquee{overflow:hidden;transform:rotate(-1.4deg) scale(1.03);background:var(--mk-ink);box-shadow:0 18px 40px -22px rgba(10,37,64,.7);border-block:3px solid var(--sk)}
.mo-track{display:flex;width:max-content;will-change:transform;padding:15px 0}
.mo-track span{display:inline-flex;align-items:center;gap:30px;padding-right:30px;font-family:'Sora','Inter',sans-serif;font-weight:700;font-size:21px;letter-spacing:-.01em;color:#fff;white-space:nowrap}
.mo-track span::after{content:'\2726';font-size:16px;color:var(--sk-mid)}
.mo-track span:nth-child(even){color:#8fd6fb}
@media (max-width:640px){.mo-track span{font-size:17px;gap:22px;padding-right:22px}.mo-marquee-wrap{padding:16px 0}}

/* ---- section headings: the little line before the label draws itself ---- */
.mo .reveal .eyebrow::before{transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.16,1,.3,1) .25s}
.mo .reveal.in .eyebrow::before{transform:none}

/* ---- service cards: 3D tilt + moving shine ---- */
.mo .svc-grid .svc-mini.reveal.in{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px))}
.mo .svc-grid .svc-mini.reveal{transition:opacity .6s ease,transform .22s ease-out,border-color .25s,box-shadow .25s}
.mo .svc-grid .svc-mini.reveal.in:hover{--ty:-6px;box-shadow:0 28px 50px -26px rgba(2,132,199,.55)}
.mo .svc-grid .svc-mini.mo-settled{transition-delay:0s}
.svc-mini{position:relative}
.svc-mini::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.7),transparent 60%);mix-blend-mode:soft-light}
.svc-mini:hover::after{opacity:1}
.svc-mini .text-link i{transition:transform .25s}
.svc-mini:hover .text-link i{transform:translateX(6px)}

/* ---- tech chips pop in one after another ---- */
.mo .chips.reveal .chip{opacity:0;transform:translateY(14px) scale(.85)}
.mo .chips.reveal.in .chip{opacity:1;transform:none;transition:opacity .5s ease,transform .6s cubic-bezier(.34,1.56,.64,1),border-color .2s,box-shadow .2s;transition-delay:calc(var(--k,0) * 70ms + 200ms)}
.mo .chips.reveal.in .chip:hover{transform:translateY(-4px) scale(1.04);border-color:var(--sk);box-shadow:0 10px 20px -12px rgba(14,165,233,.7);transition-delay:0s}

/* ---- how we work: line drawn by scrolling ---- */
.how-list{position:relative}
.mo .how-list li::after{display:none}
.mo .how-list::before{content:'';position:absolute;left:21px;top:22px;bottom:30px;width:2px;background:var(--sk-line)}
.mo-howline{position:absolute;left:21px;top:22px;width:2px;height:0;background:linear-gradient(180deg,#38bdf8,#0ea5e9);box-shadow:0 0 10px rgba(14,165,233,.6);border-radius:2px;z-index:0}
.mo .how-list li.in::before{background:#fff;color:var(--mk-ink);border-color:var(--mk-ink)}
.mo .how-list li.mo-on::before{background:var(--sk);color:#fff;border-color:var(--sk);transform:scale(1.1);box-shadow:0 0 0 7px rgba(14,165,233,.16)}
.mo .how-list li h3,.mo .how-list li p{transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .6s}
.mo .how-list li:not(.mo-on) h3,.mo .how-list li:not(.mo-on) p{opacity:.55;transform:translateX(6px)}

/* ---- working with us: rows slide in, their lines draw ---- */
.mo .with-list.reveal li{opacity:0;transform:translateX(-22px)}
.mo .with-list.reveal.in li{opacity:1;transform:none;transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--k,0) * 110ms + 150ms)}

/* ---- pricing cards rise one by one ---- */
.mo .mkt-pricing.in .pr-card{animation:moRise .8s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--k,0) * 120ms)}
.mkt-pricing .pr-card:nth-child(2){--k:1}.mkt-pricing .pr-card:nth-child(3){--k:2}.mkt-pricing .pr-card:nth-child(4){--k:3}
@keyframes moRise{from{opacity:0;transform:translateY(46px) scale(.96)}to{opacity:1;transform:none}}

/* ---- FAQ ---- */
.mkt-faq-item.mo-opening p{animation:moFaq .5s cubic-bezier(.16,1,.3,1) both}
@keyframes moFaq{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mkt-faq-item summary::after{transition:transform .35s cubic-bezier(.16,1,.3,1),background .2s}
.mkt-faq-item[open] summary::after{transform:rotate(180deg)}

/* ---- contact + final bits ---- */
.contact{overflow:clip}
.mo .cta-band::before{animation:moDrift 14s ease-in-out infinite}

@media (max-width:991.98px){.mo-spot{display:none}.mo .hero-visual{transform:scale(.94) translateY(22px)}}
@media (prefers-reduced-motion:reduce){
  .mo-orb,.hero-svg .tile,.mo .cta-band::before{animation:none}
}