/* ===== Motion layer (2026-11-10) =====
   Sits on top of site.css. Colors and carbon fiber stay exactly as they are; this file only adds movement.
   Rules: transform and opacity only, nothing that shifts layout, everything off for reduced motion.
   html.m-on is added by js/motion.js when motion is allowed, so without JavaScript the page stays fully visible. */

/* ---------- header: glass on scroll, scroll progress, smaller mark ---------- */
.hdr{transition:background-color .35s ease,box-shadow .35s ease}
.hdr .brand-mark{transition:transform .4s cubic-bezier(.2,.8,.2,1);transform-origin:left center}
.hdr.is-scrolled{background:color-mix(in srgb,#0A0C10 86%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);box-shadow:0 12px 32px -14px rgba(0,0,0,.75)}
.hdr.is-scrolled .brand-mark{transform:scale(.86)}
.m-progress{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:1;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#2E6CA4,#6AA6E0 60%,#8CC4FF);box-shadow:0 0 10px rgba(106,166,224,.55)}

/* menu button: three bars that fold into an X */
.menu-btn{position:relative;padding-left:33px;transition:border-color .2s,background-color .2s}
.menu-btn::before,.menu-btn::after{content:"";position:absolute;left:11px;top:50%;width:15px;height:2px;margin-top:-1px;background:currentColor;border-radius:1px;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.menu-btn::before{transform:translateY(-5px);box-shadow:0 5px 0 currentColor}
.menu-btn::after{transform:translateY(5px)}
.menu-btn[aria-expanded="true"]{border-color:#6AA6E0}
.menu-btn[aria-expanded="true"]::before{transform:rotate(45deg);box-shadow:0 0 0 transparent}
.menu-btn[aria-expanded="true"]::after{transform:rotate(-45deg)}

/* ---------- desktop nav: sliding underline, active page, animated dropdown ---------- */
@media (min-width:861px){
  .nav>a:not(.btn),.dd-btn{position:relative}
  .nav>a:not(.btn)::before,.dd-btn::before{content:"";position:absolute;left:12px;right:12px;bottom:7px;height:2px;border-radius:1px;background:linear-gradient(90deg,#2E6CA4,#8CC4FF);transform:scaleX(0);transform-origin:100% 50%;transition:transform .38s cubic-bezier(.2,.8,.2,1)}
  .nav>a:not(.btn):hover::before,.nav>a:not(.btn):focus-visible::before,.dd-btn:hover::before,.dd.open .dd-btn::before,.dd:hover .dd-btn::before{transform:scaleX(1);transform-origin:0 50%}
  .nav>a[aria-current="page"]::before,.dd-btn.m-current::before{transform:scaleX(1);box-shadow:0 0 8px rgba(140,196,255,.6)}
  .dd-btn.m-current{color:#8CC4FF}
  .dd-btn::after{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .dd.open .dd-btn::after,.dd:hover .dd-btn::after{transform:translateY(2px) rotate(-135deg)}

  .dd-menu{display:block;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-8px) scale(.985);transform-origin:20% 0;transition:opacity .22s ease,transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s linear .32s;box-shadow:0 24px 48px -18px rgba(0,0,0,.8)}
  .dd.open .dd-menu,.dd:focus-within .dd-menu,.dd:hover .dd-menu{visibility:visible;opacity:1;pointer-events:auto;transform:none;transition-delay:0s}
  .dd-menu li{opacity:0;transform:translateX(-8px);transition:opacity .25s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
  .dd.open .dd-menu li,.dd:focus-within .dd-menu li,.dd:hover .dd-menu li{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 35ms + 50ms)}
  .dd-menu a{position:relative}
  .dd-menu a::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;background:#6AA6E0;transform:scaleY(0);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
  .dd-menu a:hover::before,.dd-menu a:focus-visible::before,.dd-menu a[aria-current="page"]::before{transform:scaleY(1)}
}
@media (max-width:1020px) and (min-width:861px){
  .nav>a:not(.btn)::before,.dd-btn::before{left:8px;right:8px}
}

/* ---------- phone menu: slides down, items stagger in ---------- */
@media (max-width:860px){
  .js .nav{display:flex;visibility:hidden;opacity:0;clip-path:inset(0 0 100% 0);transition:clip-path .45s cubic-bezier(.7,0,.2,1),opacity .3s ease,visibility 0s linear .45s;box-shadow:0 30px 50px -20px rgba(0,0,0,.85)}
  .js .nav.open{visibility:visible;opacity:1;clip-path:inset(0 0 -40px 0);transition-delay:0s}
  .js .nav>*{opacity:0;transform:translateY(-10px);transition:opacity .3s ease,transform .4s cubic-bezier(.2,.8,.2,1),background .18s,border-color .18s,color .18s}
  .js .nav.open>*{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 45ms + 90ms)}
  .js .nav .dd-menu a{border-left:2px solid transparent}
  .js .nav .dd-menu a[aria-current="page"]{border-left-color:#6AA6E0}
}

/* ---------- buttons: pointer glow and a sheen on hover ---------- */
.btn-primary{position:relative;isolation:isolate}
.btn-primary::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .25s ease;background:radial-gradient(140px circle at var(--bx,50%) var(--by,50%),rgba(140,196,255,.5),transparent 70%),linear-gradient(110deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%) -160% 0/220% 100% no-repeat}
.btn-primary:hover::before,.btn-primary:focus-visible::before{opacity:1;animation:mSheen .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes mSheen{from{background-position:0 0,-160% 0}to{background-position:0 0,160% 0}}
.btn-primary.is-magnet{will-change:transform}

/* ---------- card tilt (desktop pointer only, set by motion.js) ---------- */
.card.m-tilt:not(#_),.plan.m-tilt:not(#_){transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:border-color .2s,translate .25s,opacity .6s ease,transform .18s ease-out}
.card.m-tilt.m-tilt-out:not(#_),.plan.m-tilt.m-tilt-out:not(#_){transition:border-color .2s,translate .25s,opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}

/* ---------- section headings rise in as they scroll into view ---------- */
.m-on .m-rise{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .9s cubic-bezier(.16,.84,.3,1);transition-delay:calc(var(--d,0) * 90ms)}
.m-on .m-rise.m-in{opacity:1;transform:none}
.m-on .sec-head h2::after{transform:scaleX(0);transform-origin:0 50%;transition:transform 1s cubic-bezier(.16,.84,.3,1) .35s}
.m-on .sec-head.center h2::after{transform-origin:50% 50%}
.m-on .sec-head h2.m-in::after{transform:scaleX(1)}

/* ---------- inner page heroes: words rise out of a mask, then the rest follows ---------- */
.m-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.m-w>span{display:inline-block}
.m-on .m-w>span{transform:translateY(110%);animation:mWord .95s cubic-bezier(.16,.84,.3,1) forwards;animation-delay:calc(var(--wi,0) * 55ms + 150ms)}
@keyframes mWord{to{transform:none}}
.m-on .m-hin{animation:mUp .9s cubic-bezier(.16,.84,.3,1) both;animation-delay:calc(var(--d,0) * 110ms + 80ms)}
@keyframes mUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---------- circuit that draws itself (built by motion.js, decorative) ---------- */
.m-circuit{position:absolute;pointer-events:none;overflow:visible;aspect-ratio:1;height:auto}
.hero.cine .m-circuit{z-index:0;top:50%;right:max(-60px,calc((100vw - 1200px) / 2 - 140px));width:min(54vw,740px);translate:0 -50%;opacity:.85}
.hero.page-hero .m-circuit{z-index:0;top:50%;right:-80px;width:min(44vw,560px);translate:0 -50%;opacity:.5}
.m-circuit .m-tr{fill:none;stroke:#6AA6E0;stroke-opacity:.5;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.m-circuit .m-pin{stroke-opacity:.7}
.m-circuit .m-chiprect{fill:rgba(46,108,164,.1);stroke:#8CC4FF;stroke-opacity:.75;stroke-width:1.6}
.m-circuit .m-glow{fill:rgba(106,166,224,.22)}
.m-circuit .m-nd{fill:#0A0C10;stroke:#8CC4FF;stroke-width:1.5}
.m-circuit .m-pl{fill:none;stroke:#8CC4FF;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:.07 2;stroke-dashoffset:.07;opacity:0}
.m-circuit .m-mark{opacity:.92}
.m-on .m-circuit .m-tr{stroke-dasharray:1;stroke-dashoffset:1;animation:mDraw 1.7s cubic-bezier(.65,0,.35,1) forwards;animation-delay:calc(var(--d,0) * 1s)}
.m-on .m-circuit .m-nd{opacity:0;transform-box:fill-box;transform-origin:center;animation:mPop .5s cubic-bezier(.2,1.6,.4,1) forwards;animation-delay:calc(var(--d,0) * 1s + 1.45s)}
.m-on .m-circuit .m-chiprect{stroke-dasharray:1;stroke-dashoffset:1;animation:mDraw 1.4s cubic-bezier(.65,0,.35,1) forwards;animation-delay:calc(var(--d,0) * 1s)}
.m-on .m-circuit .m-mark{opacity:0;animation:mFade 1s ease forwards;animation-delay:calc(var(--d,0) * 1s + .9s)}
.m-on .m-circuit .m-glow{opacity:0;animation:mBreathe 4.5s ease-in-out infinite;animation-delay:calc(var(--d,0) * 1s + 1.6s)}
.m-on .m-circuit .m-pl{opacity:1;animation:mPulse var(--t,3.4s) linear infinite both;animation-delay:calc(var(--d,0) * 1s)}
.m-circuit.m-paused *{animation-play-state:paused!important}
@keyframes mDraw{to{stroke-dashoffset:0}}
@keyframes mPop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
@keyframes mFade{to{opacity:.92}}
@keyframes mBreathe{0%,100%{opacity:.15}50%{opacity:.85}}
@keyframes mPulse{0%{stroke-dashoffset:.07}70%,100%{stroke-dashoffset:-1}}
@media (max-width:860px){
  .hero.cine .m-circuit{width:128vw;right:-58vw;top:64%;opacity:.3}
  .hero.page-hero .m-circuit{width:110vw;right:-55vw;opacity:.18}
}

/* carbon layers drift a little slower than the page (value set by motion.js) */
.m-on .hero::before,.m-on .ftr::before,.m-on main>.sec:not(.alt):nth-of-type(4n+3)::before{inset:-40px 0;transform:translate3d(0,var(--cpar,0px),0);will-change:transform}

/* ---------- services ticker under the home hero ---------- */
.m-marquee{position:relative;overflow:hidden;padding:15px 0;background:linear-gradient(180deg,#0B0E13,#0F1318);border-block:1px solid #2A323D;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.m-track{display:flex;width:max-content}
.m-group{display:flex;flex:none}
.m-group span{display:inline-flex;align-items:center;gap:24px;padding-right:24px;white-space:nowrap;font-family:var(--font-mono);font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#C9D1DB}
.m-group span::after{content:"";flex:none;width:7px;height:7px;background:#2E6CA4;box-shadow:0 0 8px rgba(106,166,224,.7);clip-path:polygon(2px 0,100% 0,100% calc(100% - 2px),calc(100% - 2px) 100%,0 100%,0 2px)}
.m-group span:nth-child(3n+2){color:#8CC4FF}
.m-on .m-track{animation:mMarq 46s linear infinite}
.m-marquee:hover .m-track,.m-marquee.m-paused .m-track{animation-play-state:paused}
@keyframes mMarq{to{transform:translateX(-50%)}}

/* ---------- live system demo on the home page (decorative illustration) ---------- */
.m-demo{position:relative;max-width:1040px;margin:0 auto 18px;padding-bottom:44px;color:#F2F5F8;font-family:var(--font-body)}
.m-win{position:relative;width:calc(100% - 150px);background:#0E1217;border:1px solid #2A323D;border-radius:10px;box-shadow:0 40px 80px -30px rgba(10,12,16,.65),0 0 0 1px rgba(255,255,255,.02) inset;overflow:visible}
.m-winbar{display:flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-bottom:1px solid #1E252E;background:linear-gradient(180deg,#151A21,#11151B);border-radius:10px 10px 0 0}
.m-winbar i{width:10px;height:10px;border-radius:50%;background:#2A323D}
.m-wtitle{margin-left:10px;font-size:.82rem;font-weight:650;color:#E6EBF1}
.m-wtag{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#8A94A3}
.m-wtag b{width:7px;height:7px;border-radius:50%;background:#6AA6E0;box-shadow:0 0 0 0 rgba(106,166,224,.6)}
.m-on .m-wtag b{animation:mPing 2s ease-out infinite}
@keyframes mPing{0%{box-shadow:0 0 0 0 rgba(106,166,224,.55)}80%,100%{box-shadow:0 0 0 7px rgba(106,166,224,0)}}
.m-board{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:16px 16px 22px}
.m-col{min-width:0;background:#12171D;border:1px solid #1E252E;border-radius:8px;padding:10px}
.m-colh{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#8A94A3}
.m-colh::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--dot,#3A4452)}
.m-col:nth-child(2){--dot:#2E6CA4}.m-col:nth-child(3){--dot:#6AA6E0}.m-col:nth-child(4){--dot:#8CC4FF}
.m-slot{height:58px;margin-bottom:8px;border-radius:7px}
.m-slot:empty{border:1px dashed #2A323D}
.m-ph{height:46px;margin-bottom:8px;border-radius:7px;background:#1A2028;position:relative}
.m-ph::before,.m-ph::after{content:"";position:absolute;left:10px;height:6px;border-radius:3px;background:#2A323D}
.m-ph::before{top:13px;width:56%}
.m-ph::after{top:26px;width:34%;opacity:.7}
.m-ph.s{opacity:.55}
.m-lead{position:relative;z-index:3;display:flex;align-items:center;gap:9px;height:58px;padding:0 10px;border-radius:7px;border:1px solid #3D7DB6;background:linear-gradient(160deg,#1E3A56,#15202C 70%);box-shadow:0 8px 20px -10px rgba(0,0,0,.7)}
.m-lead.is-flying{box-shadow:0 22px 40px -14px rgba(0,0,0,.9),0 0 0 1px rgba(140,196,255,.35)}
.m-av{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(180deg,#3573AB,#255D90);font-size:.78rem;font-weight:700;color:#fff}
.m-who{min-width:0;display:flex;flex-direction:column;line-height:1.2}
.m-who b{font-size:.86rem;font-weight:650;color:#F2F5F8}
.m-who small{font-size:.7rem;color:#8A94A3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-chip{margin-left:auto;flex:none;font-family:var(--font-mono);font-size:.58rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#8CC4FF;border:1px solid rgba(140,196,255,.45);border-radius:3px;padding:2px 6px}
.m-chip.is-done{color:#0A0C10;background:#8CC4FF;border-color:#8CC4FF}
.m-toast{position:absolute;left:16px;bottom:-22px;z-index:4;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:9px;background:#11161C;border:1px solid #3D7DB6;box-shadow:0 18px 36px -14px rgba(0,0,0,.85)}
.m-check{flex:none;width:26px;height:26px;border-radius:50%;background:#2E6CA4;position:relative}
.m-check::after{content:"";position:absolute;left:9px;top:6px;width:6px;height:11px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
.m-toast b{display:block;font-size:.84rem;font-weight:650;line-height:1.2}
.m-toast small{display:block;font-size:.72rem;color:#8A94A3;line-height:1.2}
.m-phone{position:absolute;right:0;bottom:0;z-index:5;width:310px;padding:14px;border-radius:18px;background:linear-gradient(170deg,#141920,#0D1116);border:1px solid #2A323D;box-shadow:0 40px 70px -24px rgba(0,0,0,.8)}
.m-phead{display:flex;align-items:center;gap:9px;padding-bottom:11px;margin-bottom:12px;border-bottom:1px solid #1E252E}
.m-phead b{font-size:.86rem;font-weight:650;display:block;line-height:1.2}
.m-phead small{font-size:.68rem;color:#8A94A3;display:block;line-height:1.2}
.m-thread{display:flex;flex-direction:column;gap:6px;font-size:.82rem;line-height:1.4}
.m-bub{max-width:86%;padding:8px 12px;border-radius:15px}
.m-out{align-self:flex-end;color:#fff;background:linear-gradient(180deg,#3573AB,#2A66A0);border-bottom-right-radius:4px}
.m-out u{font-weight:650;text-underline-offset:2px}
.m-sent{align-self:flex-end;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:#8A94A3;margin-bottom:6px}
.m-inwrap{position:relative;align-self:flex-start;max-width:86%}
.m-inb{color:#E6EBF1;background:#262E38;border-bottom-left-radius:4px;max-width:none}
.m-typing{position:absolute;left:0;top:0;display:flex;gap:4px;align-items:center;height:36px;padding:0 14px;border-radius:15px;border-bottom-left-radius:4px;background:#262E38;opacity:0}
.m-typing i{width:6px;height:6px;border-radius:50%;background:#8A94A3}
.m-on .m-typing i{animation:mDots 1s ease-in-out infinite}
.m-typing i:nth-child(2){animation-delay:.15s}.m-typing i:nth-child(3){animation-delay:.3s}
@keyframes mDots{0%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-3px);opacity:1}}
.m-demo-cap{max-width:62ch;margin:0 auto 40px;text-align:center;font-size:.86rem;color:var(--c-muted)}
.m-demo.m-paused *{animation-play-state:paused!important}
@media (max-width:860px){
  .m-win{width:100%}
  .m-phone{position:relative;width:min(320px,92%);margin:34px 0 0 auto}
  .m-demo{padding-bottom:0}
  .m-toast{bottom:-18px}
}
@media (max-width:620px){
  .m-board{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px 12px 24px}
  .m-col{padding:8px}
  .m-ph.s{display:none}
  .m-chip{position:absolute;right:6px;top:5px;font-size:.5rem;padding:1px 4px}
  .m-who small{font-size:.66rem}
  .m-lead{padding:0 8px;gap:7px}
}

/* ---------- accordion answers ease in ---------- */
.m-on .acc details[open]>div{animation:mUp .45s cubic-bezier(.16,.84,.3,1) both}

/* ---------- send button orb (thinking-orb element added while a form sends) ---------- */
.btn thinking-orb{flex:none;margin-right:2px}

/* ---------- reduced motion: everything readable and still ---------- */
@media (prefers-reduced-motion:reduce){
  .hdr,.hdr .brand-mark,.menu-btn::before,.menu-btn::after,.nav>a::before,.dd-btn::before,.dd-btn::after,.dd-menu,.dd-menu li,.dd-menu a::before,.js .nav,.js .nav>*,.btn-primary::before{transition:none!important}
  .btn-primary::before{animation:none!important}
  .m-track,.m-circuit *,.m-wtag b,.m-typing i{animation:none!important}
  .m-circuit .m-tr,.m-circuit .m-chiprect{stroke-dashoffset:0!important}
  .m-circuit .m-pl{display:none}
  .m-rise,.m-hin,.m-w>span{opacity:1!important;transform:none!important;animation:none!important}
}