/* nxtGrid motion layer.
   Everything is readable without it: every animation starts from a visible
   (or immediately replaced) state, and prefers-reduced-motion switches it off. */
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes rise{from{transform:translateY(16px);opacity:.3}to{transform:none;opacity:1}}
@keyframes spin{to{--a:360deg}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{from{opacity:0}}
@keyframes slidein{from{transform:translateX(12px);opacity:0}}
@keyframes beacon{from{transform:scale(1);opacity:.7}to{transform:scale(3.4);opacity:0}}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes ringpulse{0%{box-shadow:0 0 0 0 rgba(20,81,235,.45),0 6px 16px -6px rgba(20,81,235,.6)}70%,100%{box-shadow:0 0 0 14px rgba(20,81,235,0),0 6px 16px -6px rgba(20,81,235,.6)}}
@keyframes ring{0%,84%,100%{transform:none}86%{transform:rotate(-16deg)}89%{transform:rotate(14deg)}92%{transform:rotate(-10deg)}95%{transform:rotate(6deg)}}
@keyframes dot{0%,80%,100%{opacity:.25;transform:none}40%{opacity:1;transform:translateY(-3px)}}
@keyframes grow{from{transform:scaleX(0)}}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}}
@keyframes bump{40%{transform:scale(1.035)}}
@keyframes livedot{0%,100%{opacity:1}50%{opacity:.35}}

/* Page-load sequence (hero) */
.hero-copy > *{animation:rise .8s cubic-bezier(.2,.7,.2,1) backwards}
.hero-copy > :nth-child(2){animation-delay:.07s}
.hero-copy > :nth-child(3){animation-delay:.14s}
.hero-copy > :nth-child(4){animation-delay:.21s}
.hero-copy > :nth-child(5){animation-delay:.28s}
.phero .wrap > *{animation:rise .7s cubic-bezier(.2,.7,.2,1) backwards}
.phero .wrap > :nth-child(2){animation-delay:.07s}
.phero .wrap > :nth-child(3){animation-delay:.14s}

/* Scroll reveal: only for elements that start below the fold */
.rv.in{animation:rise .75s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:var(--d,0s)}

/* Header: shadow + reading progress */
header.site{transition:box-shadow .25s}
header.site.scrolled{box-shadow:0 8px 24px -16px rgba(10,23,51,.35)}
header.site .progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--blue),#22B8E8);pointer-events:none}
.mnav:not([hidden]){animation:drop .25s ease}

/* Buttons */
.btn{position:relative;overflow:hidden}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s ease;pointer-events:none}
.btn-primary:hover::after{transform:translateX(120%)}
.hero-ctas .btn-primary{animation:ringpulse 2.6s 1.4s infinite}
.btn[data-tel] svg{animation:ring 4.5s 2s infinite;transform-origin:50% 50%}

/* Cursor spotlight on cards */
.spot{position:relative;isolation:isolate}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(20,81,235,.08),transparent 60%);opacity:0;transition:opacity .3s}
.spot:hover::after{opacity:1}
.callcard.spot::after{z-index:0;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(143,176,255,.14),transparent 60%)}
.card{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
.assets .card:hover,.shift .card:hover,.plan:hover,.formcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--blue-100)}
.plan.feat:hover{border-color:var(--blue)}
.stack > div{transition:background .3s}
.stack > div:hover{background:#FBFCFF}
.asset .ic,.shift .ic{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.asset:hover .ic,.shift .card:hover .ic{transform:translateY(-2px) rotate(-4deg)}
.cmp tbody tr td{transition:background .2s}
.cmp tbody tr:hover td.old{background:var(--bg-2)}
.cmp tbody tr:hover td.new{background:var(--blue-50)}

/* Hero: data-flow canvas + animated console border */
.hero canvas.flow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 60%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 60%,transparent 100%)}
.glow{position:relative;min-width:0;border-radius:16px;padding:1.5px;box-shadow:var(--shadow-lg);
  background:conic-gradient(from var(--a),rgba(20,81,235,0) 0deg,rgba(20,81,235,0) 235deg,#1451EB 300deg,#22B8E8 335deg,rgba(34,184,232,0) 360deg),var(--line);
  animation:rise .9s .25s cubic-bezier(.2,.7,.2,1) backwards,spin 7s linear infinite}
.glow .console{border:0;box-shadow:none;border-radius:14.5px}

/* Console internals */
.tabs{position:relative}
.tabs button{border-bottom-color:transparent!important;transition:color .2s}
.tab-ink{position:absolute;bottom:-1px;left:0;width:0;height:2px;background:var(--blue);border-radius:2px;transition:left .4s cubic-bezier(.2,.7,.2,1),width .4s cubic-bezier(.2,.7,.2,1)}
.tabs .auto{position:absolute;bottom:-1px;left:0;height:2px;width:0;background:var(--blue-100);pointer-events:none}
.c-chart .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 1.5s cubic-bezier(.35,.6,.2,1) forwards}
.c-chart .fadein{animation:fadein .6s .7s backwards}
.c-chart .beacon{transform-box:fill-box;transform-origin:center;animation:beacon 1.8s 1.2s ease-out infinite}
.c-chart circle.pt{animation:fadein .4s backwards}
.issues li{animation:slidein .5s cubic-bezier(.2,.7,.2,1) backwards}
.issues li:nth-child(1){animation-delay:.25s}.issues li:nth-child(2){animation-delay:.35s}.issues li:nth-child(3){animation-delay:.45s}
.ai-sum{position:relative;overflow:hidden}
.ai-sum.scan::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.85) 50%,transparent 75%);animation:sweep 1.2s ease forwards;pointer-events:none}
.live{display:inline-flex;align-items:center;gap:6px}
.live i{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:livedot 1.6s infinite}

/* Headline word cycle */
#h1-cycle{transition:opacity .35s ease,transform .35s ease,filter .35s ease}
#h1-cycle.out{opacity:0;transform:translateY(-12px);filter:blur(6px)}
#h1-cycle.pre{opacity:0;transform:translateY(12px);filter:blur(6px);transition:none}

/* Calculator */
.big .val{transform-origin:0 60%}
.big .val.bump{animation:bump .45s ease}
.seg button{transition:background .25s,color .25s}

/* AI chat */
.typing{justify-self:start;display:inline-flex;gap:5px;align-items:center;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:12px 12px 12px 2px;font-size:.84rem;color:var(--muted);animation:rise .35s backwards}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--blue);animation:dot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.typing span{margin-left:6px}
.bar .fill{transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.show{animation:rise .5s cubic-bezier(.2,.7,.2,1) backwards}
.sugg span{transition:border-color .2s,color .2s,background .2s}
.sugg span:hover{border-color:var(--blue);color:var(--blue-ink);background:var(--blue-50)}

/* How-it-works loop */
.loop.run::before{transform-origin:0 50%;animation:grow 1.8s cubic-bezier(.35,.6,.2,1) backwards}
.lstep .dot{transition:background .35s,color .35s,box-shadow .35s}
.loop.cyc .lstep:first-child .dot{background:#fff;color:var(--blue)}
.loop.cyc .lstep.on .dot{background:var(--blue);color:#fff;box-shadow:0 0 0 7px var(--blue-50)}

/* FAQ */
details[open] p{animation:rise .35s backwards}

@media (prefers-reduced-motion:reduce){
  .glow{background:var(--line)}
  .hero canvas.flow{display:none}
}