/* Artista motion layer: styles for the .am-* hooks (see artista-motion.js). Brand tokens come from style.css. */
.am-hero{position:relative;overflow:hidden}
.am-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.am-hero>.e-con-inner,.am-hero>.elementor-element,.am-waves>.e-con-inner,.am-waves>.elementor-element{position:relative;z-index:2}
.am-hero,.am-waves{isolation:isolate}

/* headline: per-word rise (JS wraps the words; the heading remains real text) */
@keyframes am-rise{from{transform:translateY(55%);opacity:0}}
@keyframes am-show{to{opacity:1}}
.am-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-right:.22em}
.am-w>span{display:inline-block;animation:am-rise .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*70ms)}
.am-pre .am-hero h1{opacity:0;animation:am-show .01s 1.6s forwards}   /* fail-safe: never stays hidden if the script does not run */

/* ring cursor (fine pointers only; created by JS) */
.am-cursor{position:fixed;left:0;top:0;width:34px;height:34px;border:2px solid var(--orange);border-radius:50%;pointer-events:none;z-index:2000;transform:translate(-100px,-100px);opacity:0;transition:width .2s,height .2s,background .2s,margin .2s}
.am-cursor.big{width:76px;height:76px;margin:-21px 0 0 -21px;background:var(--orange)}
.am-scrollcue{position:absolute;right:max(16px,3vw);bottom:28px;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:10px}
.am-scrollcue i{display:block;width:1px;height:46px;background:linear-gradient(var(--orange),transparent)}

/* magnetic */
.am-mag a,a.am-mag,.am-mag button{will-change:transform}

/* tilt cards */
.am-tilt{--rx:0deg;--ry:0deg;--gx:50%;--gy:50%;position:relative;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .18s ease-out,border-color .25s;overflow:hidden}
.am-tilt:hover{border-color:var(--orange)!important}
.am-tilt::after{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--gx) var(--gy),rgba(245,146,34,.22),transparent 60%);pointer-events:none}
.am-tilt .am-go a::before{content:"";position:absolute;inset:0;z-index:3}   /* whole card is the link */

/* dashboard illustration */
.am-dash{border:1px solid var(--line);border-radius:8px;background:linear-gradient(160deg,#171243,#0c0929);padding:22px;display:grid;gap:18px;font-family:var(--display);color:var(--paper)}
.am-dash .top{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.am-dash .live{display:flex;align-items:center;gap:8px;color:var(--orange)}
.am-dash .live i{width:8px;height:8px;border-radius:50%;background:var(--orange);animation:am-pulse 1.6s infinite}
@keyframes am-pulse{50%{transform:scale(1.9);opacity:.35}}
.am-dash .ms{display:grid;gap:14px}
.am-dash .r{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:14px}
.am-dash .am-bar{grid-column:1/-1;height:8px;border-radius:99px;background:#241e5a;overflow:hidden}
.am-dash .am-bar i{display:block;height:100%;width:var(--w,0%);background:linear-gradient(90deg,var(--orange),var(--gold));border-radius:99px;transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.am-dash .st2{font-family:var(--mono);font-size:12px;color:var(--mute)}
.am-dash .done .st2{color:var(--gold)}
.am-dash .am-tl{display:flex;gap:6px}
.am-dash .am-tl span{flex:1;height:34px;border-radius:4px;background:#241e5a;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;color:var(--mute);transition:background .5s,color .5s}
.am-dash .am-tl span.on{background:var(--blue);color:#fff}
.am-dash .am-tl span.now{background:var(--orange);color:#1a0f00}

/* process: drawn line */
.am-process{position:relative;padding-left:64px}
.am-process-line{position:absolute;left:0;top:0;width:40px;overflow:visible;pointer-events:none}
.am-process-line .base{stroke:#2f2972;stroke-width:3;fill:none}
.am-process-line .prog{stroke:var(--orange);stroke-width:3;fill:none}
.am-process-line .dot{fill:var(--orange)}

@media (max-width:900px){
  .am-cursor{display:none}
  .am-scrollcue{display:none}
  .am-process{padding-left:52px}
}
@media (prefers-reduced-motion:reduce){
  .am-w>span{animation:none}
  .am-tilt,.am-dash .am-bar i{transition:none}
  .am-dash .live i{animation:none}
  .am-pre .am-hero h1{opacity:1;animation:none}
}

/* clients strip */
.am-strip{position:relative;display:flex;align-items:center;gap:10px;max-width:1240px;margin:0 auto;width:100%}
.am-strip__track{list-style:none;margin:0;padding:6px 2px;display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0;cursor:grab;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.am-strip__track::-webkit-scrollbar{display:none}
.am-strip__track{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}
.am-strip__track.is-drag{cursor:grabbing;user-select:none}
.am-strip__track:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.am-strip__item{flex:0 0 auto}
.am-tile{display:flex;align-items:center;justify-content:center;width:168px;height:88px;padding:12px 16px;background:#F4F1FB;border-radius:10px;box-sizing:border-box;text-decoration:none}
.am-tile__img{max-width:100%;max-height:56px;height:56px;width:auto;object-fit:contain;display:block;pointer-events:none;user-select:none}
.am-tile--text{background:var(--ink3);border:1px solid var(--line)}
.am-tile__name{color:var(--paper);font-weight:500;font-size:14px;line-height:1.25;text-align:center}
a.am-tile:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.am-strip__btn{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--ink2);color:var(--paper);cursor:pointer;font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s}
.am-strip__btn:hover{border-color:var(--orange);color:var(--orange)}
.am-strip__btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (max-width:600px){.am-strip__btn{display:none}.am-tile{width:140px;height:76px}}
@media (prefers-reduced-motion:reduce){.am-strip__track{scroll-behavior:auto}}

/* mobile bottom bar (phones only) */
.ar-mbar{display:none}
@media (max-width:480px){
  .ar-mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1500;background:var(--ink);border-top:1px solid var(--line);padding:8px max(10px,env(safe-area-inset-left,0px)) calc(8px + env(safe-area-inset-bottom,0px));gap:8px;transition:transform .25s}
  .ar-mbar.is-hidden{transform:translateY(110%)}
  .ar-mbar a{flex:1 1 0;text-align:center;text-decoration:none;font-weight:800;font-size:13px;letter-spacing:.05em;text-transform:uppercase;padding:12px 6px;border-radius:999px;color:var(--paper);border:2px solid var(--line)}
  .ar-mbar a.q{background:var(--orange);border-color:var(--orange);color:var(--ink)}
  .ar-mbar a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  body{padding-bottom:64px}
  #ht-ctc-chat,.ht-ctc,.ht_ctc_chat_style{display:none!important}   /* the bar carries WhatsApp on phones; the bubble stays on larger screens */
}
@media (prefers-reduced-motion:reduce){.ar-mbar{transition:none}}
