/* V13 source lines 517-628; original cascade order preserved. */
/* ===== ZEROTRES MOTION SYSTEM ===== */
.motion-zone{position:relative;overflow:hidden;isolation:isolate}
.motion-zone>.c,.motion-zone>.finance-grid,.motion-zone>.cta-content{position:relative;z-index:2}
.motion-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.92}
.motion-halo{position:absolute;border-radius:50%;filter:blur(82px);pointer-events:none;z-index:0;will-change:transform,opacity}
.motion-halo-a{width:430px;height:430px;right:4%;top:7%;background:rgba(41,98,255,.17);animation:ztHaloA 12s ease-in-out infinite alternate}
.motion-halo-b{width:300px;height:300px;left:-6%;bottom:3%;background:rgba(79,124,255,.095);animation:ztHaloB 15s ease-in-out infinite alternate}
.motion-halo-cta{width:360px;height:360px;right:-8%;top:-18%;background:rgba(79,124,255,.25);animation:ztHaloA 11s ease-in-out infinite alternate}
@keyframes ztHaloA{0%{transform:translate3d(0,0,0) scale(.96);opacity:.72}100%{transform:translate3d(-34px,24px,0) scale(1.08);opacity:1}}
@keyframes ztHaloB{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(36px,-22px,0) scale(1.12)}}

/* Make motion feel like part of the surfaces, not a layer on top. */
.motion-zone-hero{background-color:#fff}
.motion-zone-finance:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 20%,rgba(41,98,255,.065),transparent 33%);z-index:0;pointer-events:none}
.motion-zone-cta{overflow:hidden}
.motion-zone-cta>*:not(.motion-canvas):not(.motion-halo){position:relative;z-index:2}

/* Scroll reveal system */
.zt-reveal{opacity:0;transform:translate3d(0,22px,0);filter:blur(4px);transition:opacity .62s cubic-bezier(.2,.7,.2,1),transform .62s cubic-bezier(.2,.7,.2,1),filter .62s ease;will-change:opacity,transform}
.zt-reveal.zt-visible{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}
.zt-reveal[data-zt-delay="1"]{transition-delay:.07s}.zt-reveal[data-zt-delay="2"]{transition-delay:.14s}.zt-reveal[data-zt-delay="3"]{transition-delay:.21s}.zt-reveal[data-zt-delay="4"]{transition-delay:.28s}

/* Card microinteractions */
.card,.concept-card,.step,.faqitem,.finance-board,.story-video-wrap{transition:transform .26s ease,border-color .26s ease,box-shadow .26s ease,background-color .26s ease}
@media(hover:hover){
  .card:hover,.concept-card:hover{transform:translateY(-6px);border-color:rgba(41,98,255,.28);box-shadow:0 20px 48px rgba(10,27,51,.11),0 0 0 1px rgba(41,98,255,.05)}
  .step:hover{transform:translateY(-4px)}
  .story-video-wrap:hover{transform:translateY(-3px);box-shadow:0 28px 66px rgba(10,27,51,.22)}
}
.concept-card.active{box-shadow:0 18px 44px rgba(41,98,255,.14),inset 0 0 0 1px rgba(41,98,255,.16)}
.concept-preview,.concept-copy{transition:opacity .2s ease,transform .25s ease,filter .25s ease}
.concept-stage.zt-switching .concept-preview,.concept-stage.zt-switching .concept-copy{opacity:.35;transform:translateY(8px);filter:blur(3px)}

/* Very subtle living light on the final CTA */
.motion-zone-cta:after{content:"";position:absolute;inset:-45%;z-index:0;pointer-events:none;background:conic-gradient(from 190deg,transparent 0 36%,rgba(41,98,255,.11) 43%,transparent 51% 100%);animation:ztCtaSweep 17s linear infinite}
@keyframes ztCtaSweep{to{transform:rotate(360deg)}}

@media(max-width:720px){
  .motion-halo-a{width:280px;height:280px;right:-15%;top:12%;filter:blur(65px)}
  .motion-halo-b{width:210px;height:210px;filter:blur(60px)}
  .motion-halo-cta{width:250px;height:250px;filter:blur(60px)}
  .zt-reveal{transform:translate3d(0,15px,0);filter:blur(2px)}
}
@media(prefers-reduced-motion:reduce){
  .motion-canvas{display:none}
  .motion-halo,.motion-zone-cta:after{animation:none!important}
  .zt-reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .card,.concept-card,.step,.faqitem,.finance-board,.story-video-wrap{transition:none!important}
}


/* ===== V12 HERO: FLUID RIBBON MOTION ===== */
.hero-ribbon-mode{
  background:linear-gradient(135deg,#FFFFFF 0%,#F6F8FC 46%,#EAF0FB 100%);
  min-height:100vh;
}
.hero-ribbon-mode>.c{position:relative;z-index:3}
.hero-ribbon-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-ribbon-bg svg{position:absolute;inset:-5% -4% -5% 25%;width:84%;height:110%;overflow:visible;filter:saturate(.92) contrast(.97);opacity:.68}
.hero-ribbon-noise{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.08;background-image:radial-gradient(rgba(10,27,51,.12) .55px,transparent .65px);background-size:5px 5px;mask-image:linear-gradient(90deg,transparent 0 39%,#000 63%,#000 100%)}
.ribbon-set,.ribbon,.ribbon-glow{transform-box:fill-box;transform-origin:center;will-change:transform,opacity}
.ribbon-set-a{animation:ztRibbonDriftA 10.5s ease-in-out infinite alternate}
.ribbon-set-b{animation:ztRibbonDriftB 12.5s ease-in-out infinite alternate}
.ribbon-a{animation:ztRibbonBreathe1 7.2s ease-in-out infinite alternate}
.ribbon-b{animation:ztRibbonBreathe2 8.8s ease-in-out infinite alternate}
.ribbon-c{animation:ztRibbonBreathe3 8.2s ease-in-out infinite alternate}
.ribbon-d{animation:ztRibbonBreathe2 10.2s ease-in-out infinite alternate-reverse}
.ribbon-e{animation:ztRibbonBreathe1 9.4s ease-in-out infinite alternate-reverse}
.ribbon-glow{animation:ztRibbonGlow 6.2s ease-in-out infinite alternate}
@keyframes ztRibbonDriftA{0%{transform:translate3d(0,0,0) rotate(-.7deg) scale(1)}100%{transform:translate3d(-29px,22px,0) rotate(1.25deg) scale(1.042)}}
@keyframes ztRibbonDriftB{0%{transform:translate3d(0,0,0) rotate(.4deg)}100%{transform:translate3d(31px,-20px,0) rotate(-1.15deg)}}
@keyframes ztRibbonBreathe1{0%{transform:scale(1) skewX(0deg)}100%{transform:scale(1.028,1.018) skewX(.7deg)}}
@keyframes ztRibbonBreathe2{0%{transform:translateY(0) scale(1)}100%{transform:translateY(-13px) scale(1.022)}}
@keyframes ztRibbonBreathe3{0%{transform:translate3d(0,0,0) rotate(0)}100%{transform:translate3d(13px,8px,0) rotate(.8deg)}}
@keyframes ztRibbonGlow{0%{opacity:.28;transform:scale(.94)}100%{opacity:.64;transform:scale(1.12)}}

/* Give the foreground card a little depth against the flowing background. */
.hero-ribbon-mode .mock{position:relative;z-index:4;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);box-shadow:0 34px 82px rgba(10,27,51,.19),0 0 0 1px rgba(255,255,255,.65)}
.hero-ribbon-mode .mock:after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.74),transparent 42%,rgba(41,98,255,.12));mix-blend-mode:screen;opacity:.62}

/* Dashboard headline: word-block reveal rather than a cheap typewriter. */
.dashboard-live-title{display:flex;flex-wrap:wrap;gap:0 .25em;max-width:310px;overflow:visible}
.dashboard-live-title span{display:inline-block;opacity:0;transform:translateY(14px);clip-path:inset(0 100% 0 0);animation:ztWordReveal .72s cubic-bezier(.18,.75,.25,1) forwards}
.dashboard-live-title span:nth-child(1){animation-delay:.55s}.dashboard-live-title span:nth-child(2){animation-delay:.78s}.dashboard-live-title span:nth-child(3){animation-delay:1.01s}
.hero-mini-label{opacity:0;animation:ztMiniReveal .5s ease .28s forwards}
@keyframes ztWordReveal{0%{opacity:0;transform:translateY(14px);clip-path:inset(0 100% 0 0)}55%{opacity:1}100%{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0)}}
@keyframes ztMiniReveal{to{opacity:1}}

/* Small dashboard life cues. */
.dashboard-kpis .kpi{opacity:0;transform:translateY(10px) scale(.985);animation:ztDashCardIn .55s ease forwards}
.dashboard-kpis .kpi:nth-child(1){animation-delay:1.16s}.dashboard-kpis .kpi:nth-child(2){animation-delay:1.28s}.dashboard-kpis .kpi:nth-child(3){animation-delay:1.40s}
@keyframes ztDashCardIn{to{opacity:1;transform:none}}
.dashboard-bars i{transform-origin:bottom;transform:scaleY(.08);animation:ztBarGrow .7s cubic-bezier(.2,.7,.2,1) forwards}
.dashboard-bars i:nth-child(1){animation-delay:1.48s}.dashboard-bars i:nth-child(2){animation-delay:1.55s}.dashboard-bars i:nth-child(3){animation-delay:1.62s}.dashboard-bars i:nth-child(4){animation-delay:1.69s}.dashboard-bars i:nth-child(5){animation-delay:1.76s}.dashboard-bars i:nth-child(6){animation-delay:1.83s}
@keyframes ztBarGrow{to{transform:scaleY(1)}}

/* Mouse/scroll-driven offset applied by JS */
.hero-ribbon-bg{--rx:0px;--ry:0px;transform:translate3d(var(--rx),var(--ry),0);transition:transform .18s linear}

@media(max-width:960px){
  .hero-ribbon-bg svg{inset:4% -30% auto 28%;width:112%;height:70%;opacity:.52}
  .hero-ribbon-noise{opacity:.045;mask-image:linear-gradient(180deg,#000 0,transparent 70%)}
}
@media(max-width:650px){
  .hero-ribbon-mode{background:linear-gradient(180deg,#fff 0%,#F7F9FD 58%,#EDF2FC 100%)}
  .hero-ribbon-bg svg{inset:18% -48% auto 5%;width:145%;height:55%;opacity:.40}
  .hero-ribbon-noise{display:none}
  .dashboard-live-title{max-width:230px;gap:0 .2em}
}
@media(prefers-reduced-motion:reduce){
  .ribbon-set,.ribbon,.ribbon-glow,.dashboard-live-title span,.hero-mini-label,.dashboard-kpis .kpi,.dashboard-bars i{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important}
}