/* Motion is visible on touch screens too. Individual translate/rotate transforms
   let the continuous card movement coexist with the scroll entrance. */
body{isolation:isolate;overflow-x:hidden}
.motion-backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.ambient-orb{position:absolute;width:600px;height:600px;border-radius:50%;filter:blur(55px);opacity:.22;animation:ambient-travel 16s ease-in-out infinite alternate}
.orb-a{background:radial-gradient(circle,#19b8a2,transparent 65%);top:-260px;right:-130px}
.orb-b{background:radial-gradient(circle,#3d70bf,transparent 65%);bottom:-250px;left:-220px;animation-delay:-8s;animation-duration:20s}
.orb-c{width:350px;height:350px;background:radial-gradient(circle,#47856e,transparent 65%);top:35%;left:35%;animation-delay:-4s;animation-duration:13s}
.ambient-grid{position:absolute;inset:0;background-image:linear-gradient(#72ecc00a 1px,transparent 1px),linear-gradient(90deg,#72ecc00a 1px,transparent 1px);background-size:70px 70px;mask-image:radial-gradient(ellipse at 80% 35%,black,transparent 72%);-webkit-mask-image:radial-gradient(ellipse at 80% 35%,black,transparent 72%);animation:grid-travel 12s linear infinite}
.hero{overflow:hidden}
.hero-glow{background:radial-gradient(ellipse,#21584f58,transparent 65%);animation:hero-ambient 7s ease-in-out infinite alternate}
.orbit{border-color:#72ecc025;animation:orbit-breathe 8s ease-in-out infinite alternate}
.orbit:after{content:'';position:absolute;inset:-1px;border-radius:50%;background:conic-gradient(from 0deg,transparent 78%,#72ecc09c 88%,transparent 98%);mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));animation:orbit-spin 9s linear infinite}
.orbit-two{animation-delay:-4s}.orbit-two:after{animation-duration:16s;animation-direction:reverse}
.hero-line{display:block;animation:headline-enter .9s cubic-bezier(.16,1,.3,1) both}
.hero-line:nth-child(2){animation-delay:.16s}
.hero-copy>.eyebrow{animation:copy-enter .8s ease both}
.hero-description{animation:copy-enter .8s .3s ease both}
.hero-copy .hero-actions{animation:copy-enter .8s .45s ease both}
.hero-note{animation:copy-enter .8s .6s ease both}
.gradient-text{background-size:220% 100%;animation:gradient-travel 6s ease-in-out infinite alternate}
.dashboard-preview{animation:dashboard-enter 1.1s .2s cubic-bezier(.16,1,.3,1) backwards,dashboard-dance 6s 1.3s ease-in-out infinite}
.phone-preview{animation:phone-enter 1.1s .55s cubic-bezier(.16,1,.3,1) backwards,phone-dance 5s 1.65s ease-in-out infinite}
.floating-badge{animation:badge-dance 4.4s ease-in-out infinite}
.badge-sync{animation-delay:-1.6s}.badge-collection{animation-delay:-.4s}
.stats>div{animation:stat-enter .85s .8s cubic-bezier(.16,1,.3,1) backwards}
.stats>div:nth-child(2){animation-delay:1s}.stats>div:nth-child(3){animation-delay:1.2s}
.stat-accent{animation:stat-enter .85s 1s cubic-bezier(.16,1,.3,1) backwards,stat-glow 4s 1.9s ease-in-out infinite!important}
.chart-line{animation:draw 2s .6s ease forwards,chart-glow 3s ease-in-out infinite alternate}
.scroll-cue>span{animation:arrow-bounce 1.8s ease-in-out infinite}
.connection-strip b{animation:label-dance 4s ease-in-out infinite}
.connection-strip b:nth-of-type(2){animation-delay:-1s}.connection-strip b:nth-of-type(3){animation-delay:-2s}.connection-strip b:nth-of-type(4){animation-delay:-3s}
.js-motion .reveal{transform:translateY(65px) rotateX(8deg) scale(.95);transition:opacity .8s ease var(--reveal-delay,0ms),transform .9s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms)}
.js-motion .reveal.visible{transform:translateY(0) rotateX(0) scale(1)}
.feature-grid{gap:32px;perspective:1200px;padding:12px 0}
.feature-card{animation:card-dance 9s ease-in-out infinite;animation-play-state:paused;transform-origin:center;box-shadow:0 18px 55px #0005;will-change:auto}
.feature-card:nth-child(even){animation-name:card-dance-reverse;animation-duration:10.5s;animation-delay:-4s}
.feature-card:nth-child(3){animation-delay:-2.5s;animation-duration:11s}
.feature-card:nth-child(4){animation-delay:-6s}
.feature-card.motion-active{animation-play-state:running}
.feature-card:before{content:'';position:absolute;top:-80%;left:-100%;width:70%;height:250%;pointer-events:none;background:linear-gradient(90deg,transparent,#72ecc00a,transparent);transform:rotate(25deg);animation:card-sheen 8s ease-in-out infinite;animation-play-state:paused}
.feature-card.motion-active:before{animation-play-state:running}
.feature-card:nth-child(2):before{animation-delay:-2s}.feature-card:nth-child(3):before{animation-delay:-4s}.feature-card:nth-child(4):before{animation-delay:-6s}
.feature-card .feature-icon{animation:icon-dance 7s ease-in-out infinite;animation-play-state:paused}
.feature-card.motion-active .feature-icon{animation-play-state:running}
.feature-card:nth-child(even) .feature-icon{animation-delay:-1.5s}
.feature-card:nth-child(5){animation-delay:-3s;animation-duration:12s}
.feature-card--whatsapp{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:45px;min-height:350px}
.feature-summary>p{font-size:13px;color:var(--muted);max-width:390px;margin:10px 0 0}
.mini-whatsapp{border:1px solid #72ecc024;border-radius:12px;padding:20px;background:#080f148c;animation:detail-sway 10s -4s ease-in-out infinite;animation-play-state:paused;min-width:0}
.motion-active .mini-whatsapp{animation-play-state:running}
.route-message-header{display:flex;align-items:center;gap:10px;font-size:11px;color:#d4e6e2}
.route-message-header small{display:block;font-size:9px;color:#76958f;margin-top:2px}
.route-indicator{width:8px;height:8px;flex-shrink:0;background:#72ecc0;border-radius:50%;box-shadow:0 0 14px #72ecc044}
.route-pill{font-size:7px;letter-spacing:1px;color:#72ecc0;margin-left:auto}
.route-message-bubble{position:relative;margin:20px 0 16px;padding:16px 18px 22px;border:1px solid #72ecc024;border-radius:10px 10px 10px 2px;background:linear-gradient(135deg,#17413970,#10302890);animation:message-sway 9s -2s ease-in-out infinite;animation-play-state:paused}
.motion-active .route-message-bubble{animation-play-state:running}
.route-message-bubble>small{font-size:7px;letter-spacing:1.4px;color:#72ecc0}
.route-message-bubble p{font-size:12px;line-height:1.75;color:#b7d2cb;margin-top:7px}
.message-checks{position:absolute;right:12px;bottom:6px;letter-spacing:-3px;color:#87cce5;font-size:13px}
.route-message-stages{display:flex;flex-wrap:wrap;gap:6px}
.route-message-stages>span{padding:5px 7px;border:1px solid #72ecc020;border-radius:4px;font-size:8px;color:#91b4aa;background:#72ecc006;animation:flow-sway 9s ease-in-out infinite;animation-play-state:paused}
.motion-active .route-message-stages>span{animation-play-state:running}
.route-message-stages>span:nth-child(2){animation-delay:-3s}.route-message-stages>span:nth-child(3){animation-delay:-6s}
.route-sample{display:block;font-size:8px;color:#63827a;margin-top:12px}
.mini-ledger>div{animation:ledger-glow 5s ease-in-out infinite;animation-play-state:paused}
.motion-active .mini-ledger>div{animation-play-state:running}
.mini-ledger>div:nth-child(2){animation-delay:-1.5s}.mini-ledger>div:nth-child(3){animation-delay:-3s}
.mini-flow i{animation:arrow-flow 1.8s ease-in-out infinite;animation-play-state:paused}
.motion-active .mini-flow i{animation-play-state:running}
.mini-flow i:nth-of-type(2){animation-delay:-.9s}
.workflow-grid{gap:28px;padding:10px 0}
.workflow-grid article{padding:24px;border:1px solid #72ecc024;border-radius:12px;background:linear-gradient(140deg,#15252a,#0d171d);animation:workflow-dance 10s ease-in-out infinite;animation-play-state:paused}
.workflow-grid article:nth-child(2){animation-delay:-2s}.workflow-grid article:nth-child(3){animation-delay:-4s}
.workflow-grid article.motion-active{animation-play-state:running}
.tour-panel{animation:panel-dance 11s ease-in-out infinite;animation-play-state:paused}
.tour-panel.motion-active{animation-play-state:running}
.stats>div{animation:stat-enter .85s .8s cubic-bezier(.16,1,.3,1) backwards,stat-sway 8s 1.7s ease-in-out infinite}
.stats>div:nth-child(2){animation-delay:1s,-3s}.stats>div:nth-child(3){animation-delay:1.2s,-5s}
.stat-accent{animation:stat-enter .85s 1s cubic-bezier(.16,1,.3,1) backwards,stat-sway 9s -3s ease-in-out infinite,stat-glow 6s 1.9s ease-in-out infinite!important}
.chart-card{animation:detail-sway 10s -3s ease-in-out infinite}
.mini-ledger,.mini-flow,.mini-followup,.mini-integration{animation:detail-sway 9s ease-in-out infinite;animation-play-state:paused}
.motion-active .mini-ledger,.motion-active .mini-flow,.motion-active .mini-followup,.motion-active .mini-integration{animation-play-state:running}
.mini-flow{animation-delay:-3s}.mini-followup{animation-delay:-5s}.mini-integration{animation-delay:-7s}
.mini-flow>span{animation:flow-sway 8s ease-in-out infinite;animation-play-state:paused}
.motion-active .mini-flow>span{animation-play-state:running}
.mini-flow>span:nth-of-type(2){animation-delay:-2.7s}.mini-flow>span:nth-of-type(3){animation-delay:-5.3s}
.tour-row{animation:row-enter .45s ease both}.tour-row:nth-child(2){animation-delay:.08s}.tour-row:nth-child(3){animation-delay:.16s}
.cta-section{animation:cta-breathe 6s ease-in-out infinite;animation-play-state:paused}
.cta-section.motion-active{animation-play-state:running}
.motion-toggle{position:fixed;bottom:27px;left:24px;z-index:30;display:flex;align-items:center;gap:8px;background:#0c171de8;color:#a8cac3;border:1px solid #72ecc035;padding:9px 12px;border-radius:25px;font-size:10px;backdrop-filter:blur(12px)}
.motion-symbol{font-size:13px;color:var(--green)}
.line-icon{width:20px;height:20px;display:block;flex-shrink:0}
.feature-icon .line-icon{width:23px;height:23px}
.brand-mark .line-icon{width:24px;height:24px}.whatsapp-card-icon .line-icon{width:27px;height:27px}
.nav-login>span,.button>span,.tour-tabs button>span{display:inline-flex;align-items:center;justify-content:center}
.nav-login .line-icon,.button .line-icon,.tour-tabs .line-icon{width:15px;height:15px}
.tour-copy,.tour-panel,.feature-summary{min-width:0}
.tour-tabs button{min-width:0}
footer>div>a:last-child{display:inline-flex;align-items:center;gap:6px}footer .line-icon{width:13px;height:13px}
.motion-paused *,.motion-paused *:before,.motion-paused *:after,.tab-inactive *,.tab-inactive *:before,.tab-inactive *:after{animation-play-state:paused!important}
.motion-paused .js-motion .reveal,.motion-paused.js-motion .reveal{opacity:1;transform:none;transition:none}
.motion-paused .hero-line,.motion-paused .hero-description,.motion-paused .hero-copy>.eyebrow,.motion-paused .hero-copy .hero-actions,.motion-paused .hero-note{opacity:1!important;transform:none!important;filter:none!important}
.motion-paused .dashboard-preview,.motion-paused .phone-preview,.motion-paused .stats>div{opacity:1!important}
.motion-paused .dashboard-preview{transform:rotate(-2deg)!important}.motion-paused .phone-preview{transform:rotate(7deg)!important}
@keyframes ambient-travel{0%{transform:translate(0,0) scale(.9)}50%{transform:translate(-130px,80px) scale(1.2)}100%{transform:translate(120px,-100px) scale(1)}}
@keyframes grid-travel{to{background-position:70px 140px}}
@keyframes hero-ambient{to{transform:translate(-100px,80px) scale(1.25);opacity:.65}}
@keyframes orbit-spin{to{rotate:360deg}}
@keyframes orbit-breathe{to{translate:25px -20px;scale:1.06}}
@keyframes headline-enter{from{opacity:0;transform:translateY(60px) rotate(3deg);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes copy-enter{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}
@keyframes gradient-travel{to{background-position:100% 50%}}
@keyframes dashboard-enter{from{opacity:0;transform:translate(100px,50px) rotateY(-28deg) rotateX(15deg) scale(.85)}to{opacity:1;transform:rotateY(-9deg) rotateX(4deg) rotateZ(-2deg)}}
@keyframes dashboard-dance{0%,100%{transform:translate(0,0) rotateY(-9deg) rotateX(4deg) rotateZ(-2deg)}25%{transform:translate(-9px,-16px) rotateY(-3deg) rotateX(6deg) rotateZ(1deg)}65%{transform:translate(8px,11px) rotateY(-13deg) rotateX(1deg) rotateZ(-4deg)}}
@keyframes phone-enter{from{opacity:0;transform:translate(70px,80px) rotate(20deg) scale(.8)}to{opacity:1;transform:rotate(7deg)}}
@keyframes phone-dance{0%,100%{transform:translate(0,0) rotate(7deg)}50%{transform:translate(-13px,-26px) rotate(-3deg)}}
@keyframes badge-dance{0%,100%{transform:translate(0,0) rotate(-2deg)}50%{transform:translate(8px,-18px) rotate(3deg)}}
@keyframes stat-enter{from{opacity:0;transform:translateY(35px) scale(.85)}to{opacity:1;transform:none}}
@keyframes stat-glow{50%{box-shadow:0 0 30px #72ecc022;border-color:#72ecc070}}
@keyframes chart-glow{to{filter:drop-shadow(0 0 6px #72ecc070)}}
@keyframes arrow-bounce{50%{translate:0 9px}}
@keyframes label-dance{50%{translate:0 -5px;color:#72ecc0}}
@keyframes card-dance{0%,100%{translate:-3px 4px;rotate:-.8deg}35%{translate:5px -12px;rotate:1deg}70%{translate:-4px -4px;rotate:-.4deg}}
@keyframes card-dance-reverse{0%,100%{translate:3px -6px;rotate:.8deg}45%{translate:-5px 9px;rotate:-1deg}75%{translate:4px -10px;rotate:.4deg}}
@keyframes card-sheen{0%,30%{left:-100%}75%,100%{left:180%}}
@keyframes icon-dance{50%{translate:0 -4px;rotate:5deg;box-shadow:0 0 22px #72ecc020}}
@keyframes stat-sway{0%,100%{translate:0 2px;rotate:-.5deg}50%{translate:0 -4px;rotate:.5deg}}
@keyframes detail-sway{0%,100%{translate:0 2px;rotate:-.35deg}50%{translate:0 -4px;rotate:.35deg}}
@keyframes flow-sway{0%,100%{translate:0 2px;rotate:-1deg}50%{translate:0 -5px;rotate:1deg}}
@keyframes message-sway{0%,100%{translate:-1px 3px;rotate:-.6deg}50%{translate:2px -4px;rotate:.6deg}}
@keyframes ledger-glow{50%{background:#72ecc012;color:#d1f5e7;translate:4px 0}}
@keyframes arrow-flow{50%{translate:5px 0;color:#72ecc0}}
@keyframes workflow-dance{0%,100%{translate:0 4px;rotate:-1deg}50%{translate:0 -13px;rotate:1deg}}
@keyframes panel-dance{0%,100%{translate:0 6px;rotate:1deg}50%{translate:0 -13px;rotate:-1.5deg}}
@keyframes row-enter{from{opacity:0;transform:translateX(25px)}to{opacity:1;transform:none}}
@keyframes cta-breathe{50%{border-color:#72ecc05c;box-shadow:0 0 80px #72ecc00b;translate:0 -6px}}
@media(max-width:760px){
  .ambient-orb{width:450px;height:450px;filter:blur(40px)}
  .dashboard-preview{animation:dashboard-enter-mobile 1s .25s cubic-bezier(.16,1,.3,1) backwards,dashboard-dance-mobile 5s 1.25s ease-in-out infinite}
  .phone-preview{animation:phone-enter 1s .55s cubic-bezier(.16,1,.3,1) backwards,phone-dance-mobile 4.5s 1.55s ease-in-out infinite}
  .feature-grid{gap:36px;padding:20px 4px}
  .feature-card{animation-name:card-dance-mobile;animation-duration:8s}
  .feature-card:nth-child(even){animation-name:card-dance-mobile-reverse;animation-duration:9.5s;animation-delay:-4s}
  .feature-card:nth-child(5){animation-duration:10s}
  .feature-card--whatsapp{grid-column:auto;grid-template-columns:1fr;gap:24px}
  .mini-whatsapp{padding:16px}.route-message-bubble{padding:13px 14px 22px}
  .workflow-grid{gap:32px;padding:10px 4px}
  .product-tour{padding-left:8%;padding-right:8%}
  .motion-toggle{bottom:23px;left:18px;font-size:9px;padding:8px 10px}
  @keyframes dashboard-enter-mobile{from{opacity:0;transform:translate(25px,50px) rotate(8deg) scale(.85)}to{opacity:1;transform:rotate(-2deg)}}
  @keyframes dashboard-dance-mobile{0%,100%{transform:translate(0,0) rotate(-2deg)}50%{transform:translate(5px,-18px) rotate(2deg)}}
  @keyframes phone-dance-mobile{0%,100%{transform:translate(0,0) rotate(7deg)}50%{transform:translate(-6px,-20px) rotate(-3deg)}}
  @keyframes card-dance-mobile{0%,100%{translate:-2px 4px;rotate:-.8deg}50%{translate:3px -10px;rotate:.8deg}}
  @keyframes card-dance-mobile-reverse{0%,100%{translate:2px -6px;rotate:.8deg}50%{translate:-3px 8px;rotate:-.8deg}}
}
@media(max-width:380px){
  .tour-tabs button>span{display:none}
  .tour-tabs button{gap:0}
}
@media(prefers-reduced-motion:reduce){
  html:not(.motion-enabled) *,html:not(.motion-enabled) *:before,html:not(.motion-enabled) *:after{animation:none!important;transition:none!important}
  html:not(.motion-enabled).js-motion .reveal{opacity:1;transform:none}
  html:not(.motion-enabled) .hero-line{filter:none}
  html:not(.motion-enabled) .dashboard-preview{transform:rotate(-2deg)}
  html:not(.motion-enabled) .chart-line{stroke-dashoffset:0}
}