1<!doctype html> 2<html lang="en"> 3<head> 4<!-- GTM + Meta Pixel (lazy-load: 1o gesto do usuario OU load+2s; stubs enfileiram, nada se perde) -->
5<script>window.dataLayer=window.dataLayer||[];dataLayer.push({'gtm.start':new Date().getTime(),event:'gtm.js'});!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';n.queue=[]}(window);fbq('init','939506908180273');fbq('track','PageView');(function(){var L=false;function ld(){if(L)return;L=true;var g=document.createElement('script');g.async=true;g.src='https://www.googletagmanager.com/gtm.js?id=GTM-WLKBRVZG';document.head.appendChild(g);var p=document.createElement('script');p.async=true;p.src='https://connect.facebook.net/en_US/fbevents.js';document.head.appendChild(p);}var E=['pointerdown','keydown','touchstart'];function H(){ld();E.forEach(function(x){removeEventListener(x,H,true);});}E.forEach(function(x){addEventListener(x,H,{passive:true,capture:true,once:true});});addEventListener('load',function(){setTimeout(ld,2000);});})();(function(){document.addEventListener('click',function(e){var a=e.target.closest&&e.target.closest('a[href*="wa.me"],a[href*="api.whatsapp.com"]');if(!a)return;window.dataLayer.push({event:'whatsapp_click',cta_text:(a.textContent||'').trim().slice(0,60),page_path:location.pathname});try{if(window.fbq)fbq('track','Lead',{content_name:location.pathname});}catch(_){}}, true);})();</script>
5 6<!-- End GTM + Meta Pixel (lazy) --> 7 8<meta charset="UTF-8" /> 9<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> 10<title>About XMACNA | Digital Employee Agency</title> 11<meta name="description" content="Meet XMACNA: the Digital Employee agency â AI agents that EXECUTE. Founded in 2023 in Belo Horizonte, with +600 Digital Employees in operation." /> 12<link rel="preconnect" href="https://fonts.googleapis.com" /> 13<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> 14<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Sora:wght@200;300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" /> 15<link rel="stylesheet" media="print" onload="this.media='all'" href="https://fonts.googleapis.com/css2?family=Sora:wght@200;300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" /> 16<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@200;300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" /></noscript> 17<style> 18:root { 19 --bg: #07040d; 20 --bg-2: #0b0614; 21 --paper: #f6f8fc; 22 --paper-card: #fff; 23 --ink: #f4f0fb; 24 --ink-dim: #b6acd0; 25 --ink-faint: #746887; 26 --dark-text: #2b3548; 27 --violet: #a78bfa; 28 --violet-deep: #7c5cff; 29 --cyan: #22d3ee; 30 --green: #54d49a; 31 --line: rgba(167, 139, 250, .18); 32 --line-strong: rgba(34, 211, 238, .42); 33 --max: 1280px; 34 --ease: cubic-bezier(.2, .7, .2, 1); 35} 36 37* { box-sizing: border-box; margin: 0; padding: 0; } 38html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } 39body { 40 min-height: 100vh; 41 background: var(--bg); 42 color: var(--ink); 43 font-family: "Sora", system-ui, sans-serif; 44 overflow-x: hidden; 45 -webkit-font-smoothing: antialiased; 46 text-rendering: optimizeLegibility; 47} 48a { color: inherit; text-decoration: none; } 49button, input { font: inherit; } 50.mono { font-family: "JetBrains Mono", ui-monospace, monospace; } 51 52.page { 53 position: relative; 54 isolation: isolate; 55 overflow: hidden; 56 min-height: 100vh; 57 background: 58 radial-gradient(920px 720px at 78% -8%, rgba(167, 139, 250, .22), transparent 62%), 59 radial-gradient(860px 680px at 12% 90%, rgba(34, 211, 238, .15), transparent 58%), 60 linear-gradient(180deg, #08040f 0%, #07040d 48%, #050309 100%); 61} 62.page::after { 63 content: ""; 64 position: fixed; 65 inset: 0; 66 z-index: 1; 67 pointer-events: none; 68 opacity: .055; 69 mix-blend-mode: overlay; 70 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); 71} 72#voronoi { 73 position: fixed; 74 inset: 0; 75 z-index: 0; 76 width: 100%; 77 height: 100%; 78 opacity: .68; 79} 80.scrim { 81 position: fixed; 82 inset: 0; 83 z-index: 1; 84 pointer-events: none; 85 background: 86 radial-gradient(900px 720px at 23% 28%, rgba(7, 4, 13, .86), rgba(7, 4, 13, .42) 58%, transparent 82%), 87 linear-gradient(180deg, rgba(7, 4, 13, .20), rgba(7, 4, 13, .82) 88%); 88} 89 90.shell { 91 position: relative; 92 z-index: 2; 93 width: min(var(--max), calc(100% - 40px)); 94 margin: 0 auto; 95} 96.nav { 97 display: flex; 98 align-items: center; 99 justify-content: space-between; 100 gap: 18px; 101 padding: clamp(20px, 3vw, 34px) 0 0; 102} 103.brand { 104 display: flex; 105 align-items: center; 106 gap: 12px; 107} 108.brand-mark { 109 width: 34px; 110 height: 34px; 111 border-radius: 9px; 112 display: grid; 113 place-items: center; 114 color: #07040d; 115 font-weight: 800; 116 background: linear-gradient(135deg, var(--violet), var(--cyan)); 117 box-shadow: 0 10px 32px rgba(124, 58, 237, .34); 118} 119.brand strong { 120 display: block; 121 font-size: 14px; 122 letter-spacing: .18em; 123} 124.brand small { 125 display: block; 126 color: var(--ink-dim); 127 font-size: 9px; 128 letter-spacing: .24em; 129 text-transform: uppercase; 130} 131.nav-links { 132 display: flex; 133 align-items: center; 134 gap: 28px; 135} 136.nav-links a { 137 color: var(--ink-dim); 138 font-size: 13px; 139 transition: color .25s; 140} 141.nav-links a:hover { color: var(--ink); } 142/* hamburger (mobile-only disclosure button; hidden on desktop) */ 143.nav-burger { display: none; } 144.nav-burger svg { width: 22px; height: 22px; } 145.nav-burger:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; } 146.nav-pill { 147 display: inline-flex; 148 align-items: center; 149 gap: 8px; 150 color: var(--cyan); 151 border: 1px solid rgba(34, 211, 238, .38); 152 border-radius: 999px; 153 padding: 7px 13px; 154 font-size: 11px; 155 letter-spacing: .08em; 156} 157.nav-pill::before { 158 content: ""; 159 width: 6px; 160 height: 6px; 161 border-radius: 50%; 162 background: var(--cyan); 163 box-shadow: 0 0 10px var(--cyan); 164 animation: pulse 2s var(--ease) infinite; 165} 166@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } 167 168.hero { 169 padding-top: clamp(42px, 5.8vw, 78px); 170 padding-bottom: clamp(54px, 7vw, 92px); 171} 172/* (logo-morph do hero removido na v34) */ 173.eyebrow { 174 display: inline-flex; 175 align-items: center; 176 gap: 12px; 177 color: var(--violet); 178 font-family: "JetBrains Mono", ui-monospace, monospace; 179 font-size: clamp(11px, 1.4vw, 13px); 180 letter-spacing: .2em; 181 text-transform: uppercase; 182 border-left: 3px solid var(--cyan); 183 padding-left: 12px; 184 margin-bottom: clamp(22px, 3vw, 34px); 185} 186.display { 187 font-weight: 800; 188 font-size: clamp(2.6rem, 9.3vw, 8.3rem); 189 line-height: .88; 190 letter-spacing: -.035em; 191 text-wrap: balance; 192 transform-origin: 40% 50%; 193 max-width: 9ch; 194} 195.display .line { 196 display: block; 197 overflow: hidden; 198 padding-bottom: .035em; 199} 200.display .line > span { 201 display: inline-block; 202 transform: translateY(110%); 203 animation: rise .6s var(--ease) forwards; 204 will-change: transform; 205} 206.display .line:nth-child(1) > span { animation-delay: .05s; } 207.display .line:nth-child(2) > span { animation-delay: .16s; } 208.display .line:nth-child(3) > span { animation-delay: .27s; } 209.display .g { 210 background: linear-gradient(100deg, #c4b5fd 0%, #a78bfa 45%, #8b5cf6 100%); 211 -webkit-background-clip: text; 212 background-clip: text; 213 color: transparent; 214} 215.display .accent { 216 color: var(--bg); 217 background: var(--ink); 218 padding: 0 .12em; 219 border-radius: 4px; 220 transform: rotate(-1deg); 221 display: inline-block; 222} 223.display em { font-style: normal; font-weight: 200; } 224@keyframes rise { to { transform: translateY(0); } } 225 226.hero-grid { 227 display: grid; 228 grid-template-columns: minmax(0, 1.48fr) minmax(280px, .9fr); 229 gap: clamp(28px, 4vw, 56px); 230 align-items: end; 231 margin-top: clamp(24px, 3.4vw, 38px); 232} 233.lede {
234 color: var(--ink-dim); 235 font-size: clamp(1.05rem, 1.85vw, 1.34rem); 236 line-height: 1.58; 237 max-width: 48ch; 238} 239.lede strong { color: var(--ink); font-weight: 650; } 240.ctas { 241 display: flex; 242 flex-wrap: wrap; 243 gap: 14px; 244 margin-top: clamp(24px, 3.2vw, 34px); 245} 246.btn { 247 display: inline-flex; 248 align-items: center; 249 justify-content: center; 250 gap: 10px; 251 min-height: 52px; 252 border: 1px solid transparent; 253 border-radius: 3px; 254 padding: 0 26px; 255 font-weight: 650; 256 font-size: 15px; 257 cursor: pointer; 258 transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s; 259} 260.btn-primary { 261 background: var(--ink); 262 color: var(--bg); 263 box-shadow: 6px 6px 0 0 var(--violet); 264} 265.btn-primary:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 0 var(--cyan); } 266.btn-secondary { 267 color: var(--ink); 268 background: rgba(255, 255, 255, .025); 269 border-color: var(--line); 270} 271.btn-secondary:hover { color: var(--cyan); border-color: var(--cyan); transform: translateY(-2px); } 272 273.ribbon { 274 position: relative; 275 z-index: 2; 276 margin-top: clamp(34px, 5vw, 64px); 277 border-top: 1px solid var(--line); 278 border-bottom: 1px solid var(--line); 279 overflow: hidden; 280 background: rgba(167, 139, 250, .04); 281} 282.marquee { 283 display: flex; 284 width: max-content; 285 animation: slide 34s linear infinite; 286} 287.m-group { display: flex; flex-shrink: 0; } 288.stat { 289 display: flex; 290 align-items: baseline; 291 gap: 14px; 292 padding: clamp(18px, 2.4vw, 26px) clamp(28px, 4vw, 54px); 293 border-right: 1px solid var(--line); 294 white-space: nowrap; 295} 296.stat .num { 297 font-size: clamp(1.6rem, 3vw, 2.4rem); 298 font-weight: 800; 299 letter-spacing: -.02em; 300 background: linear-gradient(95deg, var(--violet), var(--cyan)); 301 -webkit-background-clip: text; 302 background-clip: text; 303 color: transparent; 304} 305.stat .lab { 306 color: var(--ink-dim); 307 font-family: "JetBrains Mono", ui-monospace, monospace; 308 font-size: 12px; 309 letter-spacing: .08em; 310 text-transform: uppercase; 311} 312.stat .sep { color: var(--cyan); font-size: 1.4rem; opacity: .6; } 313@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } } 314 315.section { 316 position: relative; 317 z-index: 2; 318 padding: clamp(72px, 9vw, 118px) 0; 319} 320.section-head { 321 max-width: 820px; 322 margin-bottom: clamp(28px, 4vw, 46px); 323} 324.section-kicker { 325 color: var(--cyan); 326 font-family: "JetBrains Mono", ui-monospace, monospace; 327 font-size: 12px; 328 letter-spacing: .17em; 329 text-transform: uppercase; 330 margin-bottom: 18px; 331} 332.section h2 { 333 font-size: clamp(38px, 7vw, 92px); 334 line-height: .94; 335 letter-spacing: -.045em; 336 font-weight: 800; 337 max-width: 11ch; 338} 339.section-copy { 340 margin-top: 22px; 341 color: var(--ink-dim); 342 font-size: clamp(16px, 2vw, 21px); 343 line-height: 1.62; 344 max-width: 62ch; 345} 346.section-copy b { color: var(--ink); } 347 348.type-card-grid { 349 display: grid; 350 grid-template-columns: repeat(4, minmax(0, 1fr)); 351 gap: 16px; 352 perspective: 1400px; 353} 354.type-card { 355 min-height: 292px; 356 position: relative; 357 overflow: hidden; 358 padding: 24px 24px 60px; 359 border: 1px solid var(--line); 360 border-radius: 8px; 361 background: 362 radial-gradient(480px 260px at var(--mx, 50%) var(--my, 50%), rgba(34, 211, 238, .12), transparent 60%), 363 rgba(13, 8, 24, .72); 364 backdrop-filter: blur(16px); 365 box-shadow: 0 32px 90px rgba(0, 0, 0, .34); 366 transform-style: preserve-3d; 367 transition: transform .35s var(--ease), border-color .25s, background .25s; 368} 369.type-card:hover { border-color: rgba(34, 211, 238, .42); } 370.type-card::before { 371 content: attr(data-word); 372 position: absolute; 373 left: 18px; 374 top: 10px; 375 color: transparent; 376 -webkit-text-stroke: 1px rgba(167, 139, 250, .18); 377 font-size: clamp(58px, 6vw, 92px); 378 font-weight: 800; 379 line-height: .82; 380 letter-spacing: -.06em; 381 opacity: .95; 382 transform: translateZ(-1px); 383} 384.type-card .num { 385 position: relative; 386 z-index: 2; 387 color: var(--cyan); 388 font-family: "JetBrains Mono", ui-monospace, monospace; 389 font-size: 11px; 390 letter-spacing: .18em; 391} 392.type-card h3 { 393 position: relative; 394 z-index: 2; 395 margin-top: 58px; 396 color: var(--ink); 397 font-size: clamp(22px, 2.2vw, 30px); 398 line-height: 1.04; 399 letter-spacing: -.035em; 400} 401.type-card p { 402 position: relative; 403 z-index: 2; 404 margin-top: 18px; 405 color: var(--ink-dim); 406 font-size: 15px; 407 line-height: 1.56; 408} 409.type-card .tag { 410 position: absolute; 411 left: 24px; 412 bottom: 22px; 413 z-index: 2; 414 color: #07040d; 415 background: linear-gradient(95deg, var(--violet), var(--cyan)); 416 border-radius: 3px; 417 padding: 6px 9px; 418 font-family: "JetBrains Mono", ui-monospace, monospace; 419 font-size: 10px; 420 letter-spacing: .12em; 421 text-transform: uppercase; 422} 423 424.proof-layout { 425 display: grid; 426 grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr); 427 gap: clamp(36px, 6vw, 88px); 428 align-items: center; 429} 430.interface-stage { 431 position: relative; 432 min-height: 590px; 433 perspective: 1400px; 434} 435.ui-stack { 436 position: relative; 437 width: min(940px, 100%); 438 min-height: 560px; 439 margin-left: auto; 440 transform-style: preserve-3d; 441 transition: transform .3s var(--ease); 442} 443.ui-card { 444 position: absolute; 445 border: 1px solid var(--line); 446 border-radius: 22px; 447 background: rgba(13, 8, 24, .78); 448 backdrop-filter: blur(18px) saturate(130%); 449 box-shadow: 0 32px 90px rgba(0, 0, 0, .42); 450 overflow: hidden; 451 transform-style: preserve-3d; 452} 453.ui-card::before { 454 content: ""; 455 position: absolute; 456 inset: 0; 457 pointer-events: none; 458 background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(34, 211, 238, .13), transparent 48%); 459 mix-blend-mode: screen; 460} 461.phone-card { 462 width: 330px; 463 left: 3%; 464 top: 42px; 465 transform: translateZ(96px) rotateY(-9deg) rotateX(4deg); 466 background: rgba(8, 14, 17, .78); 467} 468.phone-head { 469 padding: 14px 16px; 470 display: flex; 471 align-items: center; 472 gap: 10px; 473 background: linear-gradient(90deg, rgba(20, 77, 55, .62), rgba(12, 18, 22, .5)); 474 border-bottom: 1px solid rgba(255, 255, 255, .06); 475} 476.avatar { 477 width: 36px; 478 height: 36px; 479 border-radius: 50%; 480 display: grid; 481 place-items: center; 482 color: #08040f; 483 font-weight: 800; 484 background: linear-gradient(135deg, var(--violet), var(--cyan)); 485} 486.phone-head strong { display: block; font-size: 13px; } 487.phone-head span { color: var(--green); font-size: 11px; } 488.messages { 489 padding: 16px 14px; 490 display: grid; 491 gap: 9px; 492 min-height: 292px; 493 align-content: start; 494} 495.bubble { 496 max-width: 84%; 497 padding: 9px 12px; 498 border-radius: 14px; 499 color: #eef7f6; 500 font-size: 12px; 501 line-height: 1.44; 502} 503.bubble.in { justify-self: start; background: #1f2c33; border-bottom-left-radius: 4px; } 504.bubble.out { justify-self: end; background: #145238; border-bottom-right-radius: 4px; } 505.painel-card { 506 width: 348px; 507 right: 3%; 508 top: 10px; 509 transform: translateZ(44px) rotateY(10deg) rotateX(3deg); 510} 511.painel-card header, 512.metric-card header { 513 padding: 16px 18px 12px; 514 border-bottom: 1px solid rgba(167, 139, 250, .12); 515} 516.ui-label { 517 color: var(--cyan); 518 font-family: "JetBrains Mono", ui-monospace, monospace; 519 text-transform: uppercase; 520 letter-spacing: .1em; 521 font-size: 10px; 522} 523.painel-card h3, 524.metric-card h3 { 525 margin-top: 6px; 526 font-size: 17px; 527} 528.stage-bars { 529 display: flex; 530 gap: 5px; 531 margin-top: 12px; 532} 533.stage-bars i { 534 flex: 1; 535 height: 5px; 536 border-radius: 5px; 537 background: rgba(167, 139, 250, .18); 538} 539.stage-bars .on { background: linear-gradient(90deg, var(--violet), var(--cyan)); } 540.field-list { 541 position: relative; 542 overflow: hidden; 543 padding: 14px 18px 18px; 544 display: grid; 545 gap: 12px; 546} 547.field { 548 position: relative; 549 display: grid; 550 grid-template-columns: auto 1fr; 551 gap: 10px; 552 align-items: center; 553} 554.field i { 555 width: 28px; 556 height: 28px; 557 border-radius: 9px; 558 background: rgba(167, 139, 250, .12); 559} 560.painel-card.is-filling, 561.hero-parallax .hpx-card-crm.is-filling { 562 border-color: rgba(34, 211, 238, .42); 563 box-shadow: 0 34px 92px rgba(0,0,0,.48), 0 0 34px rgba(34,211,238,.12); 564} 565.painel-card.is-filling .field-list::after, 566.hero-parallax .hpx-card-crm.is-filling .hpx-crm-fields::after {
567 content: ""; 568 position: absolute; 569 left: 0; 570 right: 0; 571 top: 0; 572 height: 2px; 573 background: linear-gradient(90deg, transparent, rgba(34,211,238,.9), rgba(167,139,250,.95), transparent); 574 box-shadow: 0 0 18px rgba(34,211,238,.52); 575 animation: xvPanelScan 1.55s var(--ease) both; 576 pointer-events: none; 577} 578.field.is-writing i, 579.hero-parallax .hpx-crm-row.is-writing .hpx-crm-ic { 580 background: linear-gradient(135deg, rgba(167,139,250,.28), rgba(34,211,238,.18)); 581 box-shadow: 0 0 18px rgba(34,211,238,.24); 582} 583.field.is-writing b::after, 584.hero-parallax .hpx-crm-row.is-writing .hpx-crm-tx .b::after, 585.sales-deal-row.is-writing b::after { 586 content: ""; 587 display: inline-block; 588 width: 6px; 589 height: 1em; 590 margin-left: 4px; 591 border-radius: 2px; 592 background: var(--cyan); 593 vertical-align: -.12em; 594 animation: xvCursor .9s steps(2, end) infinite; 595} 596@keyframes xvPanelScan { 597 from { transform: translateY(-8px); opacity: 0; } 598 18% { opacity: 1; } 599 to { transform: translateY(172px); opacity: 0; } 600} 601@keyframes xvCursor { 602 0%, 45% { opacity: 1; } 603 46%, 100% { opacity: 0; } 604} 605.field small { 606 display: block; 607 color: var(--ink-faint); 608 font-family: "JetBrains Mono", ui-monospace, monospace; 609 font-size: 10px; 610} 611.field b { font-size: 12px; } 612.metric-card { 613 width: 260px; 614 left: 35%; 615 bottom: 28px; 616 transform: translateZ(-18px) rotateY(-4deg) rotateX(5deg); 617} 618.metric-body { padding: 18px; } 619.metric-big { 620 font-size: 48px; 621 line-height: 1; 622 font-weight: 800; 623 letter-spacing: -.035em; 624 background: linear-gradient(100deg, var(--violet), var(--cyan)); 625 -webkit-background-clip: text; 626 background-clip: text; 627 color: transparent; 628} 629.metric-body p { 630 color: var(--ink-dim); 631 font-size: 12px; 632 margin-top: 8px; 633 line-height: 1.45; 634} 635.spark { 636 margin-top: 18px; 637 height: 44px; 638 display: flex; 639 align-items: end; 640 gap: 5px; 641} 642.spark i { 643 flex: 1; 644 border-radius: 4px 4px 0 0; 645 background: linear-gradient(180deg, var(--cyan), rgba(167, 139, 250, .25)); 646 transform-origin: bottom; 647 animation: grow 2.6s ease-in-out infinite; 648} 649.spark i:nth-child(2) { animation-delay: .16s; } 650.spark i:nth-child(3) { animation-delay: .32s; } 651.spark i:nth-child(4) { animation-delay: .48s; } 652.spark i:nth-child(5) { animation-delay: .64s; } 653.spark i:nth-child(6) { animation-delay: .8s; } 654@keyframes grow { 0%,100% { transform: scaleY(.68); } 50% { transform: scaleY(1); } } 655.chip { 656 position: absolute; 657 z-index: 4; 658 padding: 9px 12px; 659 display: inline-flex; 660 align-items: center; 661 gap: 8px; 662 border-radius: 12px; 663 background: rgba(8, 4, 15, .72); 664 border: 1px solid var(--line); 665 color: var(--ink-dim); 666 font-family: "JetBrains Mono", ui-monospace, monospace; 667 font-size: 11px; 668 backdrop-filter: blur(12px); 669} 670.chip i { 671 width: 8px; 672 height: 8px; 673 border-radius: 50%; 674 background: var(--cyan); 675 box-shadow: 0 0 12px var(--cyan); 676} 677.chip-a { left: 24%; top: -14px; transform: translateZ(130px); } 678.chip-b { right: 8%; bottom: 118px; transform: translateZ(82px); } 679 680/* === Fluxo de operação: pipeline animado "o caminho de uma mensagem" === */ 681.flow-section .section-head { 682 max-width: 720px; 683 margin-left: auto; 684 margin-right: auto; 685 text-align: center; 686} 687.flow-stage { 688 position: relative; 689 margin-top: clamp(30px, 5vw, 64px); 690} 691.flow-stage::before { 692 content: ""; 693 position: absolute; 694 left: 4%; right: 4%; top: 2%; bottom: 16%; 695 background: radial-gradient(58% 66% at 50% 46%, rgba(124, 92, 255, .18), transparent 72%); 696 filter: blur(10px); 697 z-index: 0; 698 pointer-events: none; 699} 700.flow-svg { 701 position: relative; 702 z-index: 1; 703 width: 100%; 704 height: auto; 705 overflow: visible; 706 display: block; 707} 708.flow-rail-base { fill: none; stroke: #1b1530; stroke-width: 11; stroke-linecap: round; } 709.flow-rail { 710 fill: none; 711 stroke: url(#flowRail); 712 stroke-width: 3; 713 stroke-linecap: round; 714 stroke-dasharray: 9 15; 715 animation: flowDash 1.05s linear infinite; 716} 717@keyframes flowDash { to { stroke-dashoffset: -24; } } 718.flow-glow { animation: flowBreath 3.4s ease-in-out infinite; } 719.flow-glow.b { animation-delay: .55s; } 720.flow-glow.c { animation-delay: 1.1s; } 721.flow-glow.d { animation-delay: 1.7s; } 722@keyframes flowBreath { 0%, 100% { opacity: .28; } 50% { opacity: .64; } } 723.flow-core-ring { 724 transform-box: fill-box; 725 transform-origin: center; 726 animation: flowSpin 16s linear infinite; 727} 728@keyframes flowSpin { to { transform: rotate(360deg); } } 729.flow-label {
730 fill: #d7cdf0; 731 font-family: "JetBrains Mono", ui-monospace, monospace; 732 font-size: 14px; 733 font-weight: 600; 734 text-anchor: middle; 735} 736.flow-cap { 737 fill: #837798; 738 font-family: "JetBrains Mono", ui-monospace, monospace; 739 font-size: 11.5px; 740 text-anchor: middle; 741} 742@media (max-width: 760px) { 743 .flow-stage { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; } 744 .flow-svg { min-width: 660px; } 745} 746@media (prefers-reduced-motion: reduce) { 747 .flow-rail { animation: none; } 748 .flow-glow { animation: none; opacity: .5; } 749 .flow-core-ring { animation: none; } 750 .flow-pkt { display: none; } 751} 752 753.stream-section { 754 position: relative; 755 z-index: 2; 756 min-height: 100svh; 757 display: grid; 758 align-items: center; 759 overflow: hidden; 760 border-top: 1px solid rgba(255, 255, 255, .06); 761 border-bottom: 1px solid rgba(255, 255, 255, .06); 762} 763.stream-inner { 764 width: min(var(--max), calc(100% - 40px)); 765 margin: 0 auto; 766 display: grid; 767 grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); 768 gap: clamp(32px, 6vw, 88px); 769 align-items: center; 770 padding: clamp(76px, 11vh, 126px) 0; 771} 772.stream-copy h2 { 773 max-width: 10ch; 774 font-size: clamp(46px, 8.8vw, 118px); 775 line-height: .9; 776 letter-spacing: -.055em; 777 font-weight: 800; 778} 779.stream-copy p { 780 margin-top: 28px; 781 color: var(--ink-dim); 782 font-size: clamp(16px, 2vw, 20px); 783 line-height: 1.66; 784 max-width: 54ch; 785} 786.stream-visual { 787 position: relative; 788 min-height: 480px; 789} 790#textStream { 791 position: absolute; 792 inset: 0; 793 width: 100%; 794 height: 100%; 795} 796.stream-ghost { 797 position: absolute; 798 inset: 0; 799 display: grid; 800 place-items: center; 801 color: rgba(244, 240, 251, .11); 802 font-size: clamp(54px, 8vw, 126px); 803 font-weight: 800; 804 letter-spacing: -.055em; 805 pointer-events: none; 806} 807 808.site-footer { 809 position: relative; 810 z-index: 3; 811 background: var(--paper); 812 color: var(--dark-text); 813 padding: clamp(70px, 10vw, 110px) 0; 814} 815.footer-card { 816 width: min(1060px, calc(100% - 40px)); 817 margin: 0 auto; 818 background: var(--paper-card); 819 border-radius: 10px; 820 padding: clamp(34px, 5vw, 54px); 821 box-shadow: 0 28px 80px rgba(30, 42, 70, .08); 822} 823.footer-top { 824 display: grid; 825 grid-template-columns: minmax(0, .86fr) minmax(360px, 1fr); 826 gap: clamp(36px, 6vw, 92px); 827 align-items: start; 828} 829.footer-logo { 830 color: rgba(30, 42, 70, .035); 831 text-shadow: 0 1px 0 rgba(30, 42, 70, .05); 832 font-size: 28px; 833 font-weight: 800; 834 letter-spacing: .22em; 835} 836.footer-tagline { 837 margin-top: 18px; 838 color: #344055; 839 font-size: 17px; 840} 841.footer-menu-title { 842 margin-top: 34px; 843 color: var(--violet-deep); 844 font-size: 17px; 845 font-weight: 700; 846 letter-spacing: .12em; 847 text-transform: uppercase; 848} 849.footer-links { 850 margin-top: 18px; 851 display: grid; 852 grid-template-columns: repeat(2, minmax(0, 1fr)); 853 gap: 16px 28px; 854 font-size: 17px; 855 font-weight: 500; 856} 857.newsletter { 858 position: relative; 859 padding-top: 54px; 860} 861.sun { 862 position: absolute; 863 right: 12px; 864 top: 0; 865 width: 22px; 866 height: 22px; 867 color: #344055; 868} 869.newsletter h2 { 870 color: #05070c; 871 font-size: clamp(26px, 4vw, 38px); 872 line-height: 1.05; 873 letter-spacing: -.04em; 874} 875.newsletter h2 span { 876 color: var(--violet-deep); 877} 878.newsletter label { 879 display: block; 880 margin-top: 26px; 881 color: #344055; 882 font-size: 15px; 883 font-weight: 500; 884} 885.newsletter input { 886 display: block; 887 width: 100%; 888 margin-top: 8px; 889 min-height: 48px; 890 border: 1px solid #d5dce8; 891 border-radius: 8px; 892 padding: 0 14px; 893 outline: none; 894 color: #172033; 895 background: #fff; 896 box-shadow: inset 0 1px 2px rgba(30, 42, 70, .04); 897} 898.newsletter input:focus { 899 border-color: var(--violet-deep); 900 box-shadow: 0 0 0 3px rgba(124, 92, 255, .14); 901} 902.newsletter button { 903 margin-top: 24px; 904 min-height: 46px; 905 border: 0; 906 border-radius: 8px; 907 padding: 0 18px; 908 color: #fff; 909 background: #8758f1; 910 font-weight: 700; 911 cursor: pointer; 912} 913.footer-divider { 914 height: 1px; 915 background: #e1e6ef; 916 margin: 44px 0 28px; 917} 918.footer-bottom { 919 display: flex; 920 justify-content: space-between; 921 gap: 24px; 922 align-items: end; 923} 924.copyright { 925 color: #344055; 926 font-size: 16px; 927 line-height: 1.8; 928} 929.copyright a { 930 text-decoration: underline; 931 text-underline-offset: 3px; 932} 933.bolt { color: #8758f1; } 934.socials { 935 display: flex; 936 align-items: center; 937 gap: 18px; 938 color: #2d384b; 939} 940.socials a { 941 width: 26px;
942 height: 26px; 943 display: grid; 944 place-items: center; 945} 946.socials svg { width: 26px; height: 26px; fill: currentColor; stroke: currentColor; } 947 948.fade { 949 opacity: 0; 950 transform: translateY(18px); 951 animation: fade .8s var(--ease) forwards; 952} 953.eyebrow.fade { animation-delay: 0s; } 954.hero-grid.fade { animation-delay: .42s; } 955.ctas.fade { animation-delay: .56s; } 956.ribbon.fade { animation-delay: .7s; } 957@keyframes fade { to { opacity: 1; transform: translateY(0); } } 958 959.xv-reveal { 960 opacity: 1; 961 transform: none; 962} 963.xv-motion-ready .xv-reveal { 964 opacity: 0; 965 transform: translateY(22px); 966 filter: blur(5px); 967 transition: 968 opacity .72s var(--ease) var(--xv-delay, 0s), 969 transform .72s var(--ease) var(--xv-delay, 0s), 970 filter .72s var(--ease) var(--xv-delay, 0s); 971 will-change: opacity, transform, filter; 972} 973.xv-motion-ready .xv-reveal.xv-visible { 974 opacity: 1; 975 transform: translateY(0); 976 filter: blur(0); 977} 978.xv-live-pop { animation: xvPop .58s var(--ease); } 979.xv-chat-new { animation: xvChatIn .36s var(--ease) both; } 980@keyframes xvPop { 981 0% { filter: brightness(1); } 982 38% { filter: brightness(1.42); text-shadow: 0 0 18px rgba(34,211,238,.32); } 983 100% { filter: brightness(1); text-shadow: none; } 984} 985@keyframes xvChatIn { 986 from { opacity: 0; transform: translateY(10px) scale(.985); } 987 to { opacity: 1; transform: translateY(0) scale(1); } 988} 989.hpx-bubble, 990.bubble, 991.sales-msg, 992.sales-thread, 993.sales-deal-card, 994.sales-float-card { 995 transition: border-color .28s var(--ease), background .28s var(--ease), box-shadow .28s var(--ease); 996} 997.hpx-crm-stage i, 998.stage-bars i, 999.sales-progress span { 1000 transition: width .72s var(--ease), background .36s var(--ease), opacity .36s var(--ease); 1001} 1002 1003@media (max-width: 1040px) { 1004 .hero-grid, 1005 .proof-layout, 1006 .stream-inner, 1007 .footer-top { 1008 grid-template-columns: 1fr; 1009 } 1010 .type-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } 1011 .stream-visual { min-height: 360px; } 1012} 1013@media (max-width: 680px) { 1014 .shell, 1015 .stream-inner, 1016 .footer-card { 1017 width: calc(100% - 30px); 1018 } 1019 .nav { position: relative; } 1020 .nav-burger { 1021 display: inline-flex; 1022 align-items: center; 1023 justify-content: center; 1024 width: 44px; 1025 height: 44px; 1026 margin: 0; 1027 padding: 0; 1028 border: 1px solid var(--line); 1029 border-radius: 11px; 1030 background: rgba(255, 255, 255, .03); 1031 color: var(--ink); 1032 cursor: pointer; 1033 } 1034 .nav-burger .nb-close { display: none; } 1035 .nav-burger[aria-expanded="true"] .nb-open { display: none; } 1036 .nav-burger[aria-expanded="true"] .nb-close { display: block; } 1037 .nav-links { 1038 display: none; 1039 position: absolute; 1040 top: calc(100% + 12px); 1041 left: 0; 1042 right: 0; 1043 z-index: 70; 1044 gap: 4px; 1045 padding: 10px; 1046 border-radius: 14px; 1047 background: linear-gradient(180deg, rgba(20, 16, 34, .97), rgba(13, 10, 24, .98)); 1048 border: 1px solid rgba(167, 139, 250, .2); 1049 box-shadow: 0 26px 70px rgba(0, 0, 0, .5); 1050 } 1051 .nav[data-nav-open] .nav-links { display: grid; } 1052 .nav-links .nav-drop { display: none; } 1053 .nav-links a { 1054 display: block; 1055 padding: 12px 14px; 1056 border-radius: 9px; 1057 font-size: 15px; 1058 } 1059 .nav-links a:hover { background: rgba(167, 139, 250, .12); } 1060 .nav-pill { display: none; } 1061 .display { font-size: clamp(3rem, 15vw, 5.1rem); } 1062 .hero-grid { grid-template-columns: 1fr; } 1063 .btn { width: 100%; } 1064 .type-card-grid { grid-template-columns: 1fr; } 1065 .interface-stage { min-height: 790px; } 1066 .ui-stack { min-height: 760px; transform: none !important; } 1067 .ui-card { 1068 position: relative; 1069 width: 100%; 1070 left: auto; 1071 right: auto; 1072 top: auto; 1073 bottom: auto; 1074 transform: none; 1075 margin-bottom: 16px; 1076 } 1077 .chip { display: none; } 1078 .footer-links { grid-template-columns: 1fr; } 1079 .footer-bottom { display: grid; } 1080} 1081@media (prefers-reduced-motion: reduce) { 1082 *, 1083 *::before, 1084 *::after { 1085 animation: none !important; 1086 transition: none !important; 1087 scroll-behavior: auto !important; 1088 } 1089 .display .line > span, 1090 .fade, 1091 .xv-reveal { 1092 transform: none; 1093 opacity: 1; 1094 filter: none; 1095 } 1096 .xv-chat-new, 1097 .xv-live-pop { animation: none !important; } 1098 .marquee { animation: none; flex-wrap: wrap; } 1099 #voronoi { opacity: .34; } 1100} 1101 1102 /* proof-stack 3D (transplante do PROTO-30) */ 1103 .proof-stage{display:grid;place-items:center;perspective:1100px;padding:.5rem 0 2.5rem} 1104 .proof-stack{position:relative;width:min(440px,92%);display:grid;gap:14px;transform-style:preserve-3d;transform:rotateY(-10deg) rotateX(6deg)} 1105 .proof-pill{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(18px);box-shadow:0 22px 60px rgba(0,0,0,.34)} 1106 .proof-pill:nth-child(1){transform:translateZ(84px)} 1107 .proof-pill:nth-child(2){transform:translateZ(36px) translateX(18px)} 1108 .proof-pill:nth-child(3){transform:translateZ(0) translateX(-10px)} 1109 .proof-ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(167,139,250,.2),rgba(34,211,238,.14));color:#22d3ee;flex:0 0 auto} 1110 .proof-ico svg{width:20px;height:20px} 1111 .proof-pill strong{display:block;font-size:14px;font-weight:650;color:#f4f1fb} 1112 .proof-pill>span>span{display:block;margin-top:3px;color:#a99fc4;font-size:12px;line-height:1.35} 1113 .proof-pill em{color:#88f0bd;font-style:normal;font-family:'JetBrains Mono',monospace;font-size:11px;white-space:nowrap} 1114 @media(max-width:620px){.proof-stack{transform:none;width:100%}.proof-pill{transform:none!important}} 1115 1116/* === PROTO-34 === */ 1117.brand-id { display: grid; gap: 3px; } 1118.brand-morph { position: relative; width: 152px; height: 30px; } 1119.brand-morph canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } 1120 1121.hero-2col { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(330px, .9fr); gap: clamp(30px, 5vw, 76px); align-items: center; } 1122.hero-main { display: flex; flex-direction: column; align-items: flex-start; } 1123.hero-main .lede { margin-top: clamp(20px, 2.6vw, 30px); } 1124.hero-main .ctas { margin-top: clamp(26px, 3vw, 38px); } 1125.hero-aside { display: grid; place-items: center; } 1126.hero-aside .proof-stage { padding: 0; width: 100%; } 1127.hero-aside .proof-stack { width: min(470px, 100%); gap: 18px; transform: rotateY(-16deg) rotateX(9deg) rotate(.4deg); } 1128.hero-aside .proof-pill { box-shadow: 0 34px 84px rgba(0,0,0,.48); } 1129.hero-aside .proof-pill:nth-child(1) { transform: translateZ(118px) translateX(-6px); } 1130.hero-aside .proof-pill:nth-child(2) { transform: translateZ(58px) translateX(22px); } 1131.hero-aside .proof-pill:nth-child(3) { transform: translateZ(0) translateX(-2px); } 1132@media (max-width: 1040px) { 1133 .hero-2col { grid-template-columns: 1fr; gap: clamp(34px, 8vw, 54px); } 1134 .hero-aside .proof-stack { transform: rotateY(-10deg) rotateX(6deg); } 1135} 1136@media (max-width: 620px) { 1137 .hero-main, 1138 .hero-aside, 1139 .hero-aside .hero-parallax { 1140 min-width: 0; 1141 max-width: 100%; 1142 } 1143 .hero-main .lede { 1144 max-width: 100%; 1145 overflow-wrap: break-word; 1146 } 1147 .hero-aside .proof-stack { transform: none; width: 100%; } 1148 .hero-aside .proof-pill { transform: none !important; } 1149 .hero-aside .hero-parallax {
1150 width: min(100%, 360px); 1151 margin-inline: auto; 1152 } 1153 .hero-parallax .hpx-stage { 1154 max-width: 100%; 1155 } 1156} 1157 1158.flow-vertical { display: none; } 1159@media (max-width: 760px) { 1160 .flow-stage { display: none; } 1161 .flow-vertical { display: grid; margin-top: 26px; } 1162 .fv-step { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; position: relative; padding: 13px 0; } 1163 .fv-ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #0b0916; border: 2px solid var(--violet); position: relative; z-index: 2; } 1164 .fv-ico svg { width: 24px; height: 24px; } 1165 .fv-step:not(:last-child)::before { content: ""; position: absolute; left: 27px; top: 50%; width: 2px; height: 100%; background: linear-gradient(180deg, var(--violet), var(--cyan)); opacity: .45; z-index: 1; } 1166 .fv-dot { position: absolute; left: 22px; top: 28px; width: 12px; height: 12px; border-radius: 50%; background: #eafdff; box-shadow: 0 0 14px var(--cyan); z-index: 3; animation: fvDrop 2.6s linear infinite; } 1167 .fv-step:nth-child(2) .fv-dot { animation-delay: .85s; } 1168 .fv-step:nth-child(3) .fv-dot { animation-delay: 1.7s; } 1169 .fv-lab { font-weight: 650; font-size: 15px; color: var(--ink); } 1170 .fv-cap { display: block; margin-top: 2px; font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--ink-faint); } 1171} 1172@keyframes fvDrop { 0% { top: 24px; opacity: 0; } 12% { opacity: 1; } 86% { opacity: 1; } 100% { top: calc(100% + 4px); opacity: 0; } } 1173@media (prefers-reduced-motion: reduce) { .fv-dot { display: none; } } 1174 1175.marquee .stat .phrase { font-weight: 600; color: var(--ink); } 1176 1177.powered-ai { padding: clamp(42px,6vw,70px) 0; border-top: 1px solid var(--line); text-align: center; position: relative; z-index: 2; } 1178.powered-ai .pa-inner { width: min(1080px, calc(100% - 40px)); margin: 0 auto; } 1179.powered-ai .pa-kicker { display: inline-flex; } 1180.powered-ai h3 { font-size: clamp(1.45rem, 3vw, 2.05rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; margin: 12px 0 6px; } 1181.powered-ai .ai-sub { color: var(--ink-dim); max-width: 580px; margin: 0 auto 30px; font-size: 15px; line-height: 1.55; } 1182.ai-logos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(114px, 1fr)); max-width: 940px; margin: 0 auto 18px; gap: 14px 10px; } 1183.ai-provider { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 18px 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.022); transition: transform .25s var(--ease), border-color .25s; } 1184.ai-provider:hover { transform: translateY(-4px); border-color: var(--line-strong); } 1185.ai-logo-svg { display: inline-flex; height: 34px; color: var(--ink); } 1186.ai-logo-svg svg { width: 34px; height: 34px; } 1187.ai-provider-name { font-family: "JetBrains Mono", monospace; font-weight: 500; font-size: 12px; color: var(--ink-dim); letter-spacing: .02em; } 1188.powered-ai .pa-closing { color: var(--ink-faint); font-size: 13.5px; max-width: 600px; margin: 14px auto 0; } 1189 1190/* === parallax #08 (hero) === */ 1191/* ========================================================================= 1192 Cards UI Parallax â modulo de hero. Tudo namespaced sob .hero-parallax. 1193 Depende das fontes Sora + JetBrains Mono (opcional; ha fallback system-ui). 1194 Variaveis locais ficam escopadas no .hero-parallax pra nao vazar. 1195 ========================================================================= */ 1196.hero-parallax { 1197 --hpx-violet: #a78bfa; 1198 --hpx-violet-deep: #7c5cff; 1199 --hpx-cyan: #22d3ee; 1200 --hpx-ink: #f3effd; 1201 --hpx-ink-soft: #b4a9cf; 1202 --hpx-ink-faint: #6f6589; 1203 --hpx-glass: rgba(20, 13, 38, 0.55); 1204 --hpx-glass-bd: rgba(167, 139, 250, 0.18); 1205 --hpx-wa-bubble-in: #1f2c33; 1206 --hpx-wa-bubble-out: #144d37; 1207 --hpx-shadow-3d: 0 40px 90px -20px rgba(0, 0, 0, 0.85), 0 12px 30px -10px rgba(124, 92, 255, 0.25); 1208 --hpx-r: 20px; 1209 1210 position: relative; 1211 /* O wrapper fornece a perspectiva da cena 3D */ 1212 perspective: 1400px; 1213 perspective-origin: 55% 45%; 1214 min-height: 540px; 1215 display: flex; 1216 align-items: center; 1217 justify-content: center; 1218 font-family: 'Sora', system-ui, sans-serif; 1219 color: var(--hpx-ink); 1220} 1221.hero-parallax * { box-sizing: border-box; } 1222 1223/* ---------- Orbs de profundidade (fundo opcional) ---------- */ 1224.hero-parallax .hpx-orbs { 1225 position: absolute; 1226 inset: 0; 1227 z-index: 0; 1228 overflow: hidden; 1229 pointer-events: none; 1230} 1231.hero-parallax .hpx-orb { 1232 position: absolute; 1233 display: block; 1234 border-radius: 50%; 1235 filter: blur(60px); 1236 opacity: 0.5; 1237 will-change: transform; 1238} 1239.hero-parallax .hpx-orb-v { 1240 width: 460px; height: 460px; 1241 background: radial-gradient(circle, rgba(124,92,255,0.6), transparent 70%); 1242 top: -120px; right: 4%; 1243} 1244.hero-parallax .hpx-orb-c { 1245 width: 380px; height: 380px; 1246 background: radial-gradient(circle, rgba(34,211,238,0.5), transparent 70%); 1247 bottom: -110px; left: -40px; 1248} 1249 1250/* ---------- Stage 3D ---------- */ 1251.hero-parallax .hpx-stage { 1252 position: relative; 1253 z-index: 1; 1254 width: 100%; 1255 max-width: 480px; 1256 height: 540px; 1257 transform-style: preserve-3d; 1258 will-change: transform; 1259 transition: transform .35s cubic-bezier(.2,.7,.2,1); 1260} 1261 1262/* ---------- Card base (glass) ---------- */ 1263.hero-parallax .hpx-card { 1264 position: absolute; 1265 border-radius: var(--hpx-r); 1266 backdrop-filter: blur(18px) saturate(140%); 1267 -webkit-backdrop-filter: blur(18px) saturate(140%); 1268 background: var(--hpx-glass); 1269 border: 1px solid var(--hpx-glass-bd); 1270 box-shadow: var(--hpx-shadow-3d); 1271 transform-style: preserve-3d; 1272 will-change: transform; 1273 overflow: hidden; 1274} 1275.hero-parallax .hpx-card::before { 1276 content: ""; position: absolute; inset: 0; 1277 background: linear-gradient(150deg, rgba(255,255,255,0.10), transparent 38%); 1278 pointer-events: none; 1279} 1280/* Brilho/sheen que segue o ponteiro via --mx/--my (setados pelo JS) */ 1281.hero-parallax .hpx-card::after {
1282 content: ""; position: absolute; inset: 0; pointer-events: none; 1283 background: radial-gradient(420px circle at calc(var(--mx,50%)) calc(var(--my,50%)), rgba(167,139,250,0.16), transparent 45%); 1284 opacity: .9; mix-blend-mode: screen; 1285} 1286 1287/* ---------- Floaty idle animation ---------- */ 1288.hero-parallax .hpx-float { animation: hpx-floaty 7s ease-in-out infinite; } 1289.hero-parallax .hpx-float-b { animation-duration: 8.4s; animation-delay: -2s; } 1290.hero-parallax .hpx-float-c { animation-duration: 6.2s; animation-delay: -4s; } 1291@keyframes hpx-floaty { 1292 0%,100% { translate: 0 0; } 1293 50% { translate: 0 -14px; } 1294} 1295 1296/* ===================================================================== 1297 PROFUNDIDADE / POSICIONAMENTO DAS CAMADAS 1298 Cada card tem um translateZ() diferente -> parallax real com a perspectiva. 1299 z-index mantem ordem de pintura consistente com o eixo Z. 1300 ===================================================================== */ 1301 1302/* CARD frente â WhatsApp */ 1303.hero-parallax .hpx-card-wa { 1304 width: 320px; 1305 top: 40px; left: 2%; 1306 transform: translateZ(80px) rotateY(-9deg) rotateX(4deg); 1307 z-index: 4; 1308 background: rgba(8, 14, 17, 0.78); 1309} 1310/* CARD meio â CRM */ 1311.hero-parallax .hpx-card-crm { 1312 width: 300px; 1313 top: 8px; right: -2%; 1314 transform: translateZ(20px) rotateY(11deg) rotateX(3deg); 1315 z-index: 3; 1316} 1317/* CARD atras â Stat */ 1318.hero-parallax .hpx-card-stat { 1319 width: 215px; 1320 bottom: 18px; left: 16%; 1321 transform: translateZ(-40px) rotateY(-5deg) rotateX(6deg); 1322 z-index: 2; 1323 padding: 18px 18px 16px; 1324} 1325 1326/* Chips flutuantes (camada mais a frente que tudo) */ 1327.hero-parallax .hpx-chip { 1328 position: absolute; 1329 z-index: 5; 1330 font-family: 'JetBrains Mono', monospace; font-size: 10.5px; 1331 padding: 8px 12px; border-radius: 11px; 1332 background: rgba(12,7,22,0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); 1333 border: 1px solid var(--hpx-glass-bd); 1334 display: flex; align-items: center; gap: 7px; 1335 box-shadow: var(--hpx-shadow-3d); 1336 color: var(--hpx-ink); 1337} 1338.hero-parallax .hpx-chip .hpx-gd { width: 8px; height: 8px; border-radius: 3px; background: linear-gradient(135deg, var(--hpx-violet), var(--hpx-cyan)); } 1339.hero-parallax .hpx-chip-1 { top: -8px; left: 34%; transform: translateZ(120px) rotateY(-6deg); } 1340.hero-parallax .hpx-chip-2 { bottom: 84px; right: -4%; transform: translateZ(60px) rotateY(8deg); } 1341 1342/* ---------- WhatsApp card interno ---------- */ 1343.hero-parallax .hpx-wa-head { 1344 display: flex; align-items: center; gap: 11px; 1345 padding: 13px 15px; 1346 background: linear-gradient(90deg, rgba(20,77,55,0.65), rgba(8,14,17,0.5)); 1347 border-bottom: 1px solid rgba(255,255,255,0.05); 1348} 1349.hero-parallax .hpx-wa-avatar { 1350 width: 38px; height: 38px; border-radius: 50%; 1351 background: linear-gradient(135deg, var(--hpx-violet-deep), var(--hpx-cyan)); 1352 display: grid; place-items: center; font-weight: 700; font-size: 15px; color: #07040d; 1353 flex-shrink: 0; 1354} 1355.hero-parallax .hpx-wa-meta .nm { font-size: 14px; font-weight: 600; } 1356.hero-parallax .hpx-wa-meta .st { font-size: 11px; color: #54d49a; display: flex; align-items: center; gap: 5px;
1356 margin-top: 1px; } 1357.hero-parallax .hpx-wa-meta .st .ld { width: 6px; height: 6px; border-radius: 50%; background: #54d49a; box-shadow: 0 0 7px #54d49a; } 1358.hero-parallax .hpx-wa-badge { 1359 margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; 1360 color: var(--hpx-violet); padding: 4px 8px; border-radius: 8px; 1361 border: 1px solid rgba(167,139,250,0.3); background: rgba(167,139,250,0.08); 1362 white-space: nowrap; 1363} 1364.hero-parallax .hpx-wa-body { padding: 16px 14px; display: flex; flex-direction: column; gap: 9px; min-height: 250px; } 1365.hero-parallax .hpx-bubble { 1366 max-width: 82%; padding: 8px 12px; font-size: 12.5px; line-height: 1.42; 1367 border-radius: 13px; position: relative; 1368 box-shadow: 0 1px 3px rgba(0,0,0,0.3); 1369} 1370.hero-parallax .hpx-bubble .t { display: block; font-family: 'JetBrains Mono', monospace; font-size: 9px; color: rgba(255,255,255,0.4); margin-top: 4px; text-align: right; } 1371.hero-parallax .hpx-bub-in { align-self: flex-start; background: var(--hpx-wa-bubble-in); border-bottom-left-radius: 4px; } 1372.hero-parallax .hpx-bub-out { align-self: flex-end; background: var(--hpx-wa-bubble-out); border-bottom-right-radius: 4px; } 1373.hero-parallax .hpx-bub-out .t { color: rgba(255,255,255,0.55); } 1374.hero-parallax .hpx-typing { align-self: flex-end; display: inline-flex; gap: 4px; padding: 11px 14px; background: var(--hpx-wa-bubble-out); border-radius: 13px; border-bottom-right-radius: 4px; } 1375.hero-parallax .hpx-typing span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.7); animation: hpx-blink 1.3s infinite; } 1376.hero-parallax .hpx-typing span:nth-child(2) { animation-delay: .2s; } 1377.hero-parallax .hpx-typing span:nth-child(3) { animation-delay: .4s; } 1378@keyframes hpx-blink { 0%,60%,100% { opacity:.3; transform: translateY(0);} 30% { opacity:1; transform: translateY(-3px);} } 1379 1380/* ---------- CRM card interno ---------- */ 1381.hero-parallax .hpx-crm-head { padding: 15px 16px 10px; border-bottom: 1px solid rgba(167,139,250,0.1); } 1382.hero-parallax .hpx-crm-k { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--hpx-cyan); letter-spacing: 0.08em; text-transform: uppercase; } 1383.hero-parallax .hpx-crm-lead { font-size: 15px; font-weight: 600; margin-top: 4px; } 1384.hero-parallax .hpx-crm-stage { margin-top: 9px; display: flex; gap: 5px; } 1385.hero-parallax .hpx-crm-stage i { height: 5px; flex: 1; border-radius: 3px; background: rgba(167,139,250,0.18); } 1386.hero-parallax .hpx-crm-stage i.on { background: linear-gradient(90deg, var(--hpx-violet), var(--hpx-cyan)); } 1387.hero-parallax .hpx-crm-stage-lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--hpx-ink-soft); margin-top: 7px; } 1388.hero-parallax .hpx-crm-stage-lbl b { color: var(--hpx-cyan); } 1389.hero-parallax .hpx-crm-fields { position: relative; overflow: hidden; padding: 13px 16px; display: grid; gap: 11px; } 1390.hero-parallax .hpx-crm-row { position: relative; display: flex; align-items: center; gap: 10px; } 1391.hero-parallax .hpx-crm-ic { width: 28px; height: 28px; border-radius: 9px; background: rgba(167,139,250,0.1); display: grid; place-items: center; flex-shrink: 0; } 1392.hero-parallax .hpx-crm-ic svg { width: 14px; height: 14px; stroke: var(--hpx-violet); } 1393.hero-parallax .hpx-crm-tx .a { font-size: 10px; color: var(--hpx-ink-faint); font-family: 'JetBrains Mono', monospace; } 1394.hero-parallax .hpx-crm-tx .b { font-size: 12.5px; color: var(--hpx-ink); font-weight: 500;
1394 margin-top: 1px; } 1395.hero-parallax .hpx-crm-foot { padding: 11px 16px; border-top: 1px solid rgba(167,139,250,0.1); display: flex; align-items: center; gap: 8px; } 1396.hero-parallax .hpx-ai-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hpx-cyan); box-shadow: 0 0 8px var(--hpx-cyan); animation: hpx-pulse 2s infinite; } 1397.hero-parallax .hpx-crm-foot-tx { font-size: 11px; color: var(--hpx-ink-soft); } 1398.hero-parallax .hpx-crm-foot-tx b { color: var(--hpx-cyan); } 1399@keyframes hpx-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } 1400 1401/* ---------- Stat card interno ---------- */ 1402.hero-parallax .hpx-stat-cap { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--hpx-ink-faint); letter-spacing: 0.08em; text-transform: uppercase; } 1403.hero-parallax .hpx-stat-big { font-size: 34px; font-weight: 800; margin-top: 4px; letter-spacing: -0.02em; 1404 background: linear-gradient(100deg, var(--hpx-violet), var(--hpx-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; } 1405.hero-parallax .hpx-stat-sub { font-size: 11px; color: var(--hpx-ink-soft); margin-top: 2px; } 1406.hero-parallax .hpx-spark { margin-top: 14px; display: flex; align-items: flex-end; gap: 5px; height: 42px; } 1407.hero-parallax .hpx-spark i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--hpx-violet), rgba(34,211,238,0.25)); transform-origin: bottom; animation: hpx-grow 2.6s ease-in-out infinite; } 1408@keyframes hpx-grow { 0%,100% { transform: scaleY(.72);} 50% { transform: scaleY(1);} } 1409 1410/* ---------- Responsivo ---------- */ 1411@media (max-width: 540px) { 1412 .hero-parallax { min-height: 470px; } 1413 .hero-parallax .hpx-stage { height: 470px; max-width: 380px; } 1414 .hero-parallax .hpx-card-wa { width: 280px; left: -2%; } 1415 .hero-parallax .hpx-card-crm { width: 248px; right: -4%; } 1416 .hero-parallax .hpx-card-stat { width: 180px; left: 8%; } 1417 .hero-parallax .hpx-chip-1 { left: 30%; } 1418} 1419 1420/* ---------- Reduced motion: zera animacoes e tilt ---------- */ 1421@media (prefers-reduced-motion: reduce) { 1422 .hero-parallax .hpx-float, 1423 .hero-parallax .hpx-float-b, 1424 .hero-parallax .hpx-float-c, 1425 .hero-parallax .hpx-spark i, 1426 .hero-parallax .hpx-typing span, 1427 .hero-parallax .hpx-ai-dot, 1428 .hero-parallax .hpx-orb { animation: none !important; } 1429 .hero-parallax .hpx-stage { transition: none !important; transform: none !important; } 1430 .hero-parallax .hpx-card { transition: none !important; } 1431} 1432.hero-aside .hero-parallax { width: 100%; } 1433.proof-flat { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 6px; } 1434.proof-flat .proof-pill { box-shadow: 0 18px 50px rgba(0,0,0,.3); } 1435@media (max-width: 820px) { .proof-flat { grid-template-columns: 1fr; } } 1436 1437/* B: cards de capacidades â flex-column robusto (sem overlap) */ 1438.proof-flat .proof-pill { 1439 display: flex; flex-direction: column; align-items: flex-start; gap: 12px; 1440 padding: 24px; border-radius: 18px; position: relative; overflow: hidden; 1441 background: linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.016)); 1442 border: 1px solid rgba(255,255,255,.10); box-shadow: 0 18px 50px rgba(0,0,0,.3); 1443} 1444.proof-flat .proof-pill::before { 1445 content: ""; position: absolute; inset: 0; border-radius: 18px; padding: 1px; 1446 background: linear-gradient(135deg, rgba(167,139,250,.55), transparent 55%, rgba(34,211,238,.45)); 1447 -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); 1448 -webkit-mask-composite: xor; mask-composite: exclude; opacity: .45; transition: opacity .3s; 1449} 1450.proof-flat .proof-pill:hover { transform: translateY(-4px); } 1451.proof-flat .proof-pill:hover::before { opacity: 1; } 1452.proof-flat .proof-ico { width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto; } 1453.proof-flat .proof-ico svg { width: 22px; height: 22px; } 1454.proof-flat .proof-pill strong { font-size: 16px; display: block; } 1455.proof-flat .proof-pill > span > span { display: block; margin-top: 4px; font-size: 13px; } 1456.proof-flat .proof-pill em { 1457 margin-top: 2px; padding: 5px 11px; border-radius: 999px; font-size: 10.5px; 1458 background: rgba(84,212,154,.12); border: 1px solid rgba(84,212,154,.32); color: #88f0bd; 1459} 1460 1461/* C: animacao no texto do hero â gradiente fluindo no 'comecar' + leve respiro */ 1462.display .g { background-size: 220% 100%; animation: gFlow 6.5s ease-in-out infinite; } 1463@keyframes gFlow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } 1464@media (prefers-reduced-motion: reduce) { .display .g { animation: none; } } 1465 1466/* === seções novas + nav/footer (workflow) === */ 1467/* === #produtos â cards do produto comercial AI-first === */ 1468.sales-machine-visual { 1469 margin: clamp(28px,5vw,54px) auto clamp(24px,4vw,38px); 1470 width: min(1040px,100%); 1471 min-height: clamp(340px,42vw,520px); 1472 display: grid; 1473 place-items: center; 1474 position: relative; 1475 perspective: 1200px; 1476 overflow: visible; 1477} 1478.sales-machine-visual::before { 1479 content: ""; 1480 position: absolute; 1481 inset: 10% 7% 0; 1482 background: 1483 radial-gradient(closest-side at 38% 30%, rgba(167,139,250,.34), transparent 70%), 1484 radial-gradient(closest-side at 70% 55%, rgba(34,211,238,.20), transparent 72%); 1485 filter: blur(26px); 1486 opacity: .82; 1487 pointer-events: none; 1488} 1489.sales-console-3d { 1490 width: min(900px,100%); 1491 transform-style: preserve-3d; 1492 transform: rotateX(10deg) rotateY(-13deg) rotateZ(1deg); 1493 animation: salesFloat 7s ease-in-out infinite; 1494} 1495.sales-console-screen { 1496 position: relative; 1497 overflow: hidden; 1498 border-radius: 24px; 1499 min-height: clamp(310px,38vw,430px); 1500 background: 1501 linear-gradient(135deg, rgba(20,12,38,.96), rgba(5,9,22,.96)), 1502 radial-gradient(560px 320px at 70% 0%, rgba(124,58,237,.28), transparent 65%); 1503 border: 1px solid rgba(255,255,255,.14); 1504 box-shadow: 1505 0 44px 90px rgba(0,0,0,.48), 1506 0 0 0 1px rgba(167,139,250,.16) inset, 1507 28px 34px 0 rgba(5,8,18,.42); 1508} 1509.sales-console-screen::after {
1510 content: ""; 1511 position: absolute; 1512 inset: 0; 1513 background: 1514 linear-gradient(110deg, transparent 0 34%, rgba(255,255,255,.12) 44%, transparent 55%), 1515 repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 6px); 1516 mix-blend-mode: screen; 1517 opacity: .18; 1518 pointer-events: none; 1519} 1520.sales-topbar { 1521 height: 52px; 1522 display: flex; 1523 align-items: center; 1524 justify-content: space-between; 1525 gap: 18px; 1526 padding: 0 20px; 1527 border-bottom: 1px solid rgba(255,255,255,.10); 1528 background: rgba(255,255,255,.045); 1529} 1530.sales-brand { display: flex; align-items: center; gap: 11px; min-width: 0; } 1531.sales-brand-mark { 1532 width: 28px; height: 28px; border-radius: 9px; 1533 display: grid; place-items: center; 1534 color: #07040d; font-size: 13px; font-weight: 900; 1535 background: linear-gradient(135deg, var(--violet), var(--cyan)); 1536} 1537.sales-brand strong { color: var(--ink); letter-spacing: .08em; font-size: 13px; } 1538.sales-brand span, .sales-status { 1539 font-family: "JetBrains Mono", ui-monospace, monospace; 1540 color: var(--ink-dim); font-size: 11px; 1541} 1542.sales-status { 1543 display: inline-flex; align-items: center; gap: 8px; 1544 border: 1px solid rgba(84,212,154,.28); 1545 background: rgba(84,212,154,.10); 1546 color: #88f0bd; 1547 border-radius: 999px; 1548 padding: 7px 11px; 1549 white-space: nowrap; 1550} 1551.sales-status::before { 1552 content: ""; 1553 width: 7px; height: 7px; border-radius: 50%; 1554 background: #54d49a; 1555 box-shadow: 0 0 16px rgba(84,212,154,.9); 1556} 1557.sales-app-grid { 1558 position: relative; 1559 z-index: 1; 1560 display: grid; 1561 grid-template-columns: .72fr 1.25fr .9fr; 1562 min-height: calc(clamp(310px,38vw,430px) - 52px); 1563} 1564.sales-sidebar, 1565.sales-chat, 1566.sales-deal { 1567 min-width: 0; 1568 padding: clamp(14px,2vw,20px); 1569} 1570.sales-sidebar { 1571 border-right: 1px solid rgba(255,255,255,.10); 1572 background: rgba(255,255,255,.03); 1573} 1574.sales-pane-title { 1575 display: flex; align-items: center; justify-content: space-between; gap: 12px; 1576 color: var(--ink); 1577 font-size: 12px; 1578 letter-spacing: .04em; 1579 margin-bottom: 14px; 1580} 1581.sales-pill { 1582 color: #88f0bd; 1583 border: 1px solid rgba(84,212,154,.25); 1584 background: rgba(84,212,154,.10); 1585 border-radius: 999px; 1586 padding: 4px 8px; 1587 font-family: "JetBrains Mono", ui-monospace, monospace; 1588 font-size: 10px; 1589 white-space: nowrap; 1590} 1591.sales-thread-list { display: grid; gap: 10px; } 1592.sales-thread { 1593 display: grid; 1594 grid-template-columns: auto 1fr; 1595 gap: 10px; 1596 align-items: center; 1597 padding: 10px; 1598 border-radius: 14px; 1599 border: 1px solid rgba(255,255,255,.08); 1600 background: rgba(255,255,255,.035); 1601} 1602.sales-thread.is-active { 1603 background: linear-gradient(135deg, rgba(124,58,237,.22), rgba(34,211,238,.10)); 1604 border-color: rgba(167,139,250,.34); 1605} 1606.sales-avatar { 1607 width: 28px; height: 28px; border-radius: 10px; 1608 display: grid; place-items: center; 1609 color: #07040d; font-size: 12px; font-weight: 800; 1610 background: linear-gradient(135deg, #c4b5fd, #22d3ee); 1611} 1612.sales-thread-copy strong { display: block; color: var(--ink); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 1613.sales-thread-copy span { display: block; color: var(--ink-dim); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 1614.sales-chat { border-right: 1px solid rgba(255,255,255,.10); } 1615.sales-chat-head { 1616 display: flex; 1617 align-items: center; 1618 justify-content: space-between; 1619 gap: 12px; 1620 padding-bottom: 14px; 1621 border-bottom: 1px solid rgba(255,255,255,.10); 1622} 1623.sales-chat-head strong { color: var(--ink); font-size: 14px; } 1624.sales-chat-head span { display: block; color: var(--ink-dim); font-size: 11px; margin-top: 3px; } 1625.sales-messages { display: grid; gap: 11px; padding-top: 16px; min-height: 238px; align-content: start; } 1626.sales-msg { 1627 max-width: 82%; 1628 padding: 10px 12px; 1629 border-radius: 15px; 1630 color: var(--ink); 1631 font-size: 12.5px; 1632 line-height: 1.45; 1633 background: rgba(255,255,255,.07); 1634 border: 1px solid rgba(255,255,255,.08); 1635} 1636.sales-msg.fd { 1637 margin-left: auto; 1638 background: linear-gradient(135deg, rgba(124,58,237,.36), rgba(34,211,238,.16)); 1639 border-color: rgba(167,139,250,.32); 1640} 1641.sales-typing { 1642 display: inline-flex; 1643 gap: 4px; 1644 align-items: center; 1645 width: fit-content; 1646 border-radius: 999px; 1647 padding: 8px 11px; 1648 background: rgba(255,255,255,.06); 1649} 1650.sales-typing i { 1651 width: 5px; height: 5px; border-radius: 50%; 1652 background: #c4b5fd; 1653 animation: salesTyping 1.2s ease-in-out infinite; 1654} 1655.sales-typing i:nth-child(2) { animation-delay: .14s; } 1656.sales-typing i:nth-child(3) { animation-delay: .28s; } 1657.sales-deal { background: rgba(255,255,255,.025); } 1658.sales-deal-card { 1659 position: relative; 1660 overflow: hidden; 1661 display: grid; 1662 gap: 13px; 1663 padding: 16px; 1664 border-radius: 18px; 1665 border: 1px solid rgba(255,255,255,.10); 1666 background: rgba(6,8,20,.54); 1667} 1668.sales-deal-card.is-filling { 1669 border-color: rgba(34,211,238,.34); 1670 box-shadow: 0 0 26px rgba(34,211,238,.08); 1671} 1672.sales-deal-card.is-filling::after {
1673 content: ""; 1674 position: absolute; 1675 left: 0; 1676 right: 0; 1677 top: 0; 1678 height: 2px; 1679 background: linear-gradient(90deg, transparent, rgba(34,211,238,.9), rgba(84,212,154,.85), transparent); 1680 box-shadow: 0 0 16px rgba(34,211,238,.42); 1681 animation: xvPanelScan 1.55s var(--ease) both; 1682 pointer-events: none; 1683} 1684.sales-deal-card h3 { margin: 0; color: var(--ink); font-size: 15px; } 1685.sales-deal-row { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-dim); font-size: 12px; } 1686.sales-deal-row b { color: var(--ink); font-weight: 600; text-align: right; } 1687.sales-progress { 1688 height: 8px; 1689 border-radius: 999px; 1690 overflow: hidden; 1691 background: rgba(255,255,255,.08); 1692} 1693.sales-progress span { 1694 display: block; 1695 width: 72%; 1696 height: 100%; 1697 border-radius: inherit; 1698 background: linear-gradient(90deg, var(--violet), var(--cyan), #54d49a); 1699} 1700.sales-next { 1701 border-radius: 14px; 1702 padding: 12px; 1703 color: #88f0bd; 1704 background: rgba(84,212,154,.10); 1705 border: 1px solid rgba(84,212,154,.24); 1706 font-size: 12px; 1707 line-height: 1.45; 1708} 1709.sales-float-card { 1710 position: absolute; 1711 z-index: 2; 1712 display: grid; 1713 gap: 3px; 1714 min-width: 150px; 1715 padding: 12px 14px; 1716 border-radius: 16px; 1717 border: 1px solid rgba(255,255,255,.15); 1718 background: rgba(9,7,20,.82); 1719 box-shadow: 0 18px 50px rgba(0,0,0,.34); 1720 backdrop-filter: blur(14px); 1721 transform-style: preserve-3d; 1722} 1723.sales-float-card strong { color: var(--ink); font-size: 13px; } 1724.sales-float-card span { color: var(--ink-dim); font-size: 11px; } 1725.sales-float-card.one { right: -14px; top: 64px; transform: translateZ(70px) rotateY(-4deg); } 1726.sales-float-card.two { left: 42px; bottom: -18px; transform: translateZ(58px) rotateY(5deg); } 1727@keyframes salesFloat { 1728 0%,100% { transform: rotateX(10deg) rotateY(-13deg) rotateZ(1deg) translateY(0); } 1729 50% { transform: rotateX(11deg) rotateY(-10deg) rotateZ(.5deg) translateY(-12px); } 1730} 1731@keyframes salesTyping { 1732 0%,100% { opacity: .35; transform: translateY(0); } 1733 50% { opacity: 1; transform: translateY(-3px); } 1734} 1735.fd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } 1736.fd-card { 1737 position: relative; overflow: hidden; display: flex; flex-direction: column; 1738 padding: 26px 24px 24px; border-radius: 18px; min-height: 320px; 1739 background: linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.016)); 1740 border: 1px solid rgba(255,255,255,.10); 1741 transition: transform .3s var(--ease), border-color .25s; 1742} 1743.fd-card::before { 1744 content: ""; position: absolute; inset: 0; border-radius: 18px; padding: 1px; 1745 background: linear-gradient(135deg, rgba(167,139,250,.55), transparent 55%, rgba(34,211,238,.45)); 1746 -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); 1747 -webkit-mask-composite: xor; mask-composite: exclude; opacity: .45; transition: opacity .3s; 1748 pointer-events: none; 1749} 1750.fd-card:hover { transform: translateY(-4px); } 1751.fd-card:hover::before { opacity: 1; } 1752.fd-card-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; } 1753.fd-avatar { 1754 width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; 1755 color: #07040d; font-weight: 800; font-size: 19px; 1756 background: linear-gradient(135deg, var(--violet), var(--cyan)); 1757 box-shadow: 0 10px 28px rgba(124,58,237,.3); 1758} 1759.fd-id { display: grid; gap: 2px; min-width: 0; } 1760.fd-id strong { font-size: 17px; letter-spacing: .04em; color: var(--ink); } 1761.fd-role { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; color: var(--ink-dim); letter-spacing: .04em; } 1762.fd-badge { 1763 align-self: start; padding: 5px 11px; border-radius: 999px; font-size: 10.5px; font-style: normal; 1764 font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing: .08em; 1765 background: rgba(84,212,154,.12); border: 1px solid rgba(84,212,154,.32); color: #88f0bd; white-space: nowrap; 1766} 1767.fd-quote { 1768 margin-top: 20px; color: var(--ink); font-size: 15px; line-height: 1.55; 1769 font-style: normal; font-weight: 400; 1770} 1771.fd-skills { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 11px; list-style: none; } 1772.fd-skills li { 1773 position: relative; padding-left: 22px; color: var(--ink-dim); font-size: 13.5px; line-height: 1.48; 1774} 1775.fd-skills li b { color: var(--ink); font-weight: 600; } 1776.fd-skills li::before { 1777 content: ""; position: absolute; left: 2px; top: 7px; width: 8px; height: 8px; border-radius: 2px; 1778 background: linear-gradient(135deg, var(--violet), var(--cyan)); 1779} 1780@media (max-width: 1040px) { 1781 .sales-app-grid { grid-template-columns: .82fr 1.18fr; } 1782 .sales-deal { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.10); } 1783 .sales-deal-card { grid-template-columns: 1fr 1fr; align-items: start; } 1784 .fd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } 1785} 1786@media (max-width: 680px) { 1787 .sales-machine-visual { min-height: auto; margin-top: 28px; } 1788 .sales-console-3d { transform: none; animation: none; } 1789 .sales-console-screen { min-height: 0; border-radius: 20px; box-shadow: 0 28px 70px rgba(0,0,0,.42); } 1790 .sales-topbar { height: auto; align-items: flex-start; flex-direction: column; padding: 16px; } 1791 .sales-app-grid { grid-template-columns: 1fr; }
1792 .sales-sidebar, .sales-chat, .sales-deal { border-right: 0; border-top: 1px solid rgba(255,255,255,.10); } 1793 .sales-sidebar { border-top: 0; } 1794 .sales-deal-card { grid-template-columns: 1fr; } 1795 .sales-float-card { display: none; } 1796 .fd-grid { grid-template-columns: 1fr; } 1797 .fd-card { min-height: 0; } 1798} 1799@media (prefers-reduced-motion: reduce) { 1800 .sales-console-3d, .sales-typing i { animation: none; } 1801} 1802 1803/* === #prova-social â depoimentos nomeados + faixa de métricas === */ 1804.quote-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } 1805.quote-card { 1806 position: relative; overflow: hidden; padding: 30px 28px; 1807 border-radius: 18px; border: 1px solid var(--line); 1808 background: 1809 radial-gradient(520px 260px at 100% 0%, rgba(167,139,250,.10), transparent 60%), 1810 rgba(13,8,24,.62); 1811 backdrop-filter: blur(16px); 1812 box-shadow: 0 24px 70px rgba(0,0,0,.3); 1813 transition: transform .3s var(--ease), border-color .25s; 1814} 1815.quote-card:hover { transform: translateY(-4px); border-color: var(--line-strong); } 1816.quote-card::before { 1817 content: "\201C"; position: absolute; right: 22px; top: 2px; 1818 font-size: 96px; font-weight: 800; line-height: 1; 1819 color: transparent; -webkit-text-stroke: 1px rgba(167,139,250,.2); 1820 pointer-events: none; 1821} 1822.quote-card blockquote { position: relative; z-index: 1; color: var(--ink); font-size: 17px; line-height: 1.56; font-weight: 300; } 1823.quote-card blockquote b { font-weight: 650; background: linear-gradient(95deg, var(--violet), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; } 1824.quote-author { display: flex; align-items: center; gap: 13px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); } 1825.quote-avatar { 1826 width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; 1827 color: #07040d; font-weight: 800; background: linear-gradient(135deg, var(--violet), var(--cyan)); 1828} 1829.quote-who { display: grid; gap: 2px; } 1830.quote-who strong { font-size: 15px; color: var(--ink); } 1831.quote-who span { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px; color: var(--ink-dim); letter-spacing: .03em; } 1832.metric-band { 1833 margin-top: 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); 1834 border: 1px solid var(--line); border-radius: 18px; overflow: hidden; 1835 background: rgba(167,139,250,.04); 1836} 1837.mb-item { padding: 26px 22px; border-right: 1px solid var(--line); display: grid; gap: 8px; } 1838.mb-item:last-child { border-right: 0; } 1839.mb-num { 1840 font-size: clamp(2rem, 3.4vw, 2.7rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; 1841 background: linear-gradient(95deg, var(--violet), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; 1842} 1843.mb-lab { color: var(--ink-dim); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; line-height: 1.45; letter-spacing: .02em; } 1844.mb-tag { display: inline-block; margin-top: 6px; padding: 3px 9px; border-radius: 999px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; background: rgba(84,212,154,.12); border: 1px solid rgba(84,212,154,.3); color: #88f0bd; } 1845.mb-case { background: rgba(84,212,154,.05); } 1846.mb-foot { margin-top: 16px; color: var(--ink-faint); font-size: 12.5px; line-height: 1.5; letter-spacing: .01em; } 1847@media (max-width: 920px) { .quote-grid { grid-template-columns: 1fr; } .metric-band { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mb-item:nth-child(2n) { border-right: 0; } .mb-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); } } 1848@media (max-width: 540px) { .metric-band { grid-template-columns: 1fr; } .mb-item { border-right: 0; border-bottom: 1px solid var(--line); } .mb-item:last-child { border-bottom: 0; } } 1849 1850/* ---------- CTAs por dobra + trust strip + barra sticky mobile ---------- */ 1851.section-cta-row { margin-top: 30px; display: flex; } 1852.hero-alt-cta { margin-top: 22px; position: relative; z-index: 3; } 1853.cta-quiet { display: inline-flex; align-items: center; gap: 8px; color: var(--cyan); font-weight: 600; font-size: 15px; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s ease; } 1854.cta-quiet:hover, .cta-quiet:focus-visible { border-bottom-color: var(--cyan); } 1855.trust-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; padding: 14px 22px; margin: clamp(8px, 1.6vw, 16px) auto 0; width: min(1080px, calc(100% - 40px)); border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.02); color: var(--ink-dim); font-size: 13.5px; position: relative; z-index: 2; } 1856.trust-strip b { color: var(--ink); } 1857.trust-strip i { font-style: normal; opacity: .45; } 1858.wa-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(10, 10, 18, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); } 1859.wa-sticky .btn { width: 100%; justify-content: center; } 1860@media (max-width: 680px) { .wa-sticky.on { display: block; } } 1861 1862/* === #processo â 5 passos === */ 1863.proc-steps { list-style: none; display: grid; gap: 0; counter-reset: none; } 1864.proc-step { 1865 position: relative; display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 3vw, 34px); 1866 align-items: start; padding: clamp(20px, 3vw, 28px) 0; 1867 border-top: 1px solid var(--line); 1868} 1869.proc-step:last-child { border-bottom: 1px solid var(--line); } 1870.proc-step::after {
1871 content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 0; 1872 background: linear-gradient(90deg, var(--violet), var(--cyan)); 1873 transition: width .45s var(--ease); 1874} 1875.proc-step:hover::after { width: 100%; } 1876.proc-num { 1877 font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 800; line-height: .9; letter-spacing: -.04em; 1878 color: transparent; -webkit-text-stroke: 1px rgba(167,139,250,.42); 1879 transition: -webkit-text-stroke-color .3s; 1880} 1881.proc-step:hover .proc-num { -webkit-text-stroke-color: var(--cyan); } 1882.proc-body h3 { font-size: clamp(20px, 2.4vw, 27px); line-height: 1.06; letter-spacing: -.03em; color: var(--ink); } 1883.proc-body p { margin-top: 12px; color: var(--ink-dim); font-size: clamp(14px, 1.7vw, 16px); line-height: 1.58; max-width: 64ch; } 1884.proc-body p em { font-style: normal; font-weight: 300; color: var(--ink); } 1885@media (max-width: 680px) { .proc-step { grid-template-columns: 1fr; gap: 8px; } } 1886/* === Nav: dropdown "Sobre" === */ 1887.nav-drop { position: relative; display: inline-flex; align-items: center; } 1888.nav-drop-btn { 1889 display: inline-flex; align-items: center; gap: 7px; 1890 margin: 0; padding: 0; border: 0; background: none; cursor: pointer; 1891 font: inherit; color: var(--ink-dim); font-size: 13px; 1892 transition: color .25s; 1893} 1894.nav-drop-btn:hover, 1895.nav-drop-btn:focus-visible, 1896.nav-drop[data-open] > .nav-drop-btn { color: var(--ink); } 1897.nav-drop-btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; } 1898.nav-caret { width: 11px; height: 8px; transition: transform .25s var(--ease); opacity: .85; } 1899.nav-drop[data-open] .nav-caret { transform: rotate(180deg); } 1900 1901.nav-menu { 1902 position: absolute; top: calc(100% + 12px); left: 50%; 1903 transform: translateX(-50%) translateY(-6px); 1904 min-width: 208px; display: grid; gap: 2px; 1905 padding: 8px; border-radius: 14px; 1906 background: linear-gradient(180deg, rgba(20,16,34,.96), rgba(13,10,24,.97)); 1907 border: 1px solid rgba(167,139,250,.20); 1908 box-shadow: 0 26px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05); 1909 backdrop-filter: blur(20px); 1910 opacity: 0; visibility: hidden; pointer-events: none; 1911 transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; 1912 z-index: 60; 1913} 1914.nav-menu::before { 1915 content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; 1916} 1917.nav-drop[data-open] .nav-menu { 1918 opacity: 1; visibility: visible; pointer-events: auto; 1919 transform: translateX(-50%) translateY(0); 1920} 1921.nav-menu a { 1922 display: block; padding: 9px 12px; border-radius: 9px; 1923 color: var(--ink-dim); font-size: 13px; line-height: 1.2; 1924 transition: color .2s, background .2s; 1925} 1926.nav-menu a:hover, 1927.nav-menu a:focus-visible { 1928 color: var(--ink); 1929 background: linear-gradient(135deg, rgba(167,139,250,.16), rgba(34,211,238,.10)); 1930} 1931.nav-menu a:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; } 1932@media (prefers-reduced-motion: reduce) { 1933 .nav-caret, .nav-menu { transition: none; } 1934} 1935/* Footer: garantir que o "X" novo (path único) preencha como os demais Ãcones */ 1936.socials a svg path { fill: currentColor; } 1937/* WhatsApp/X usam path único â mantém o mesmo tamanho/alinhamento dos sociais existentes */ 1938.socials a svg { display: block; } 1939 1940/* footer escuro â combina com o resto da home */ 1941.site-footer { background: #08040f; color: var(--ink-dim); } 1942.footer-card { background: rgba(255,255,255,.028); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,.45); } 1943.footer-logo { color: rgba(255,255,255,.05); text-shadow: none; } 1944.footer-tagline { color: var(--ink-dim); } 1945.footer-menu-title { color: var(--violet); } 1946.site-footer a, .footer-links a { color: var(--ink-dim); } 1947.site-footer a:hover, .footer-links a:hover { color: var(--ink); } 1948.newsletter h2 { color: var(--ink); } 1949.newsletter h2 span { color: var(--violet); } 1950.newsletter label { color: var(--ink-dim); } 1951.newsletter input { background: rgba(255,255,255,.04); border-color: var(--line); color: var(--ink); } 1952.newsletter input::placeholder { color: var(--ink-faint); } 1953.newsletter button { background: linear-gradient(100deg, var(--violet), var(--cyan)); color: #07040d; } 1954.footer-divider { background: rgba(255,255,255,.08); } 1955.footer-bottom, .footer-bottom * { color: var(--ink-faint); } 1956.site-footer svg { color: var(--ink-dim); fill: currentColor; } 1957 1958/* === MELHORIAS G1-G5 === */ 1959.section-head h2, .stream-copy h2 { font-size: clamp(2rem, 4.6vw, 3.45rem); line-height: 1.03; letter-spacing: -.038em; font-weight: 800; } 1960.section-head h2 em, .stream-copy h2 em { font-style: normal; background: linear-gradient(100deg,#c4b5fd 0%,#a78bfa 45%,#8b5cf6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } 1961.section-copy.lead { font-size: clamp(1.02rem, 1.7vw, 1.26rem); line-height: 1.62; max-width: 72ch; } 1962.section-copy.lead b { color: var(--ink); font-weight: 650; } 1963.section-copy.lead .hlv { background: linear-gradient(100deg,#c4b5fd,#8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; } 1964/* G3 */ 1965.cap-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } 1966.tc-cap { min-height: 286px; } 1967.tc-cap .tc-ico { position: absolute; top: 18px; right: 18px; z-index: 2; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(167,139,250,.22), rgba(34,211,238,.14)); color: var(--cyan); } 1968.tc-cap .tc-ico svg { width: 22px; height: 22px; } 1969@media (max-width: 920px) { .cap-grid { grid-template-columns: 1fr; } } 1970/* G4 fluxo */ 1971.flow-label { font-size: 16px; font-weight: 700; fill: #ece7fb; } 1972.flow-cap { font-size: 12px; } 1973.flow-glow { transform-box: fill-box; transform-origin: center; animation: flowGlowPulse 3.4s ease-in-out infinite; } 1974@keyframes flowGlowPulse { 0%,100% { opacity: .26; transform: scale(1); } 50% { opacity: .6; transform: scale(1.13); } } 1975/* G5 quote-grid 3 col */ 1976.quote-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } 1977@media (max-width: 980px) { .quote-grid { grid-template-columns: 1fr; } } 1978
1979/* tc-cap V2: accent por card + mouse-follow (diferencia do #resposta) */ 1980.cap-grid { perspective: 1400px; } 1981.tc-cap { --acc: 167,139,250; transition: transform .18s ease; 1982 background: radial-gradient(520px 280px at var(--mx,50%) var(--my,50%), rgba(var(--acc),.18), transparent 60%), rgba(13,8,24,.72); } 1983.tc-cap::before { -webkit-text-stroke: 1px rgba(var(--acc),.14); color: rgba(var(--acc),.045); } 1984.tc-cap::after { content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 2px; z-index: 2; 1985 background: linear-gradient(90deg, transparent, rgb(var(--acc)), transparent); opacity: .55; } 1986.tc-cap .tc-ico { background: rgba(var(--acc),.16); color: rgb(var(--acc)); border: 1px solid rgba(var(--acc),.30); box-shadow: 0 0 22px rgba(var(--acc),.18); } 1987.tc-cap .tag { background: linear-gradient(95deg, rgb(var(--acc)), rgba(var(--acc),.5)); color: #06121a; } 1988 1989.powered-ai .pa-creds{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;margin:26px auto 0;} 1990.powered-ai .pa-cred{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.025);color:var(--ink-dim);font-size:13px;font-weight:500;line-height:1;} 1991.powered-ai .pa-cred svg{flex:none;} 1992.powered-ai .pa-cred strong{color:var(--ink);font-weight:700;} 1993 1994.home-faq{padding:clamp(42px,6vw,70px) 0;border-top:1px solid var(--line);position:relative;z-index:2;} 1995.home-faq .home-faq-inner{width:min(820px,calc(100% - 40px));margin:0 auto;} 1996.home-faq .section-kicker{margin-bottom:14px;} 1997.home-faq h2{font-size:clamp(28px,4.6vw,48px);line-height:1.02;letter-spacing:-.03em;font-weight:800;margin-bottom:clamp(20px,3vw,34px);} 1998.home-faq h2 em{font-style:normal;background:linear-gradient(100deg,#c4b5fd 0%,#a78bfa 45%,#8b5cf6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;} 1999.home-faq .faq{margin-top:1.6rem;} 2000.home-faq .faq-item{border-top:1px solid var(--line);padding:1.1rem 0;} 2001.home-faq .faq-item summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-weight:600;font-size:1.05rem;color:var(--ink);} 2002.home-faq .faq-item summary::-webkit-details-marker{display:none;} 2003.home-faq .faq-item summary span{color:var(--cyan);font-family:"JetBrains Mono",ui-monospace,monospace;transition:transform .25s ease;} 2004.home-faq .faq-item[open] summary span{transform:rotate(45deg);} 2005.home-faq .faq-item p{margin-top:.7rem;color:var(--ink-dim);max-width:68ch;line-height:1.6;} 2006.home-faq .faq-cta{margin-top:28px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;} 2007.home-faq .faq-cta p{color:var(--ink-dim);margin:0;} 2008 2009.ip-sec{padding:clamp(48px,7vw,84px) 0;position:relative;z-index:2;} 2010.ip-sec .pa-inner{width:min(1080px,calc(100% - 40px));margin:0 auto;} 2011.ip-hero{padding:clamp(80px,13vh,150px) 0 50px;text-align:center;} 2012.ip-hero .display{font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.04;margin:18px auto;max-width:16ch;} 2013.ip-sec h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:12px 0 6px;} 2014.ip-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px;} 2015.ip-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin-top:34px;} 2016.ip-band .ip-stat{border:1px solid var(--line);border-radius:14px;padding:22px 20px;background:rgba(167,139,250,.05);} 2017.ip-band .ip-num{display:block;font-size:clamp(2rem,4vw,2.8rem);font-weight:800;letter-spacing:-.02em;background:linear-gradient(135deg,var(--violet),var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} 2018.ip-band .ip-lab{display:block;margin-top:8px;color:var(--ink-dim);font-size:14.5px;line-height:1.4;} 2019.ip-prose{max-width:760px;margin:0 auto;} 2020.ip-prose p{color:var(--ink-dim);font-size:clamp(1.02rem,1.6vw,1.16rem);line-height:1.65;margin-top:16px;} 2021.ip-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:30px;} 2022.ip-meta dt{color:var(--ink-faint);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;} 2023.ip-meta dd{margin-top:5px;color:var(--ink);font-size:15px;line-height:1.5;} 2024</style> 2025<style>.footer-sitemap{margin-top:clamp(34px,4.4vw,52px);padding-top:clamp(28px,3.4vw,42px);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:clamp(22px,2.6vw,34px) clamp(18px,2.4vw,30px)}.footer-sitemap .footer-menu-title{margin-top:0;font-size:13px}.footer-sitemap .footer-links{grid-template-columns:1fr;gap:10px;margin-top:14px;font-size:14.5px}</style> 2026 2027<meta property="og:type" content="website" /> 2028<meta property="og:url" content="https://xmacna.ai/en/about" /> 2029<meta property="og:title" content="About XMACNA | Digital Employee Agency" /> 2030<meta property="og:description" content="Meet XMACNA: the Digital Employee agency â AI agents that EXECUTE. Founded in 2023 in Belo Horizonte, with +600 Digital Employees in operation." /> 2031<meta property="og:locale" content="en_US" /> 2032<meta property="og:image" content="https://xmacna.ai/assets/og/i18n/en-sobre-28b564450e79.png" />
2033<meta property="og:image:width" content="1200" /> 2034<meta property="og:image:height" content="630" /> 2035<meta name="twitter:card" content="summary_large_image" /> 2036<meta name="twitter:title" content="About XMACNA | Digital Employee Agency" /> 2037<meta name="twitter:description" content="Meet XMACNA: the Digital Employee agency â AI agents that EXECUTE. Founded in 2023 in Belo Horizonte, with +600 Digital Employees in operation." /> 2038<meta name="twitter:image" content="https://xmacna.ai/assets/og/i18n/en-sobre-28b564450e79.png" />
2039<script type="application/ld+json">{"@context": "https://schema.org", "@graph": [{"@type": "Organization", "@id": "https://xmacna.ai/#org", "name": "XMACNA", "legalName": "XMACNA FUNCIONÃRIOS DIGITAIS LTDA", "url": "https://xmacna.ai/", "logo": "https://xmacna.ai/android-chrome-512x512.png", "description": "Digital Employee Agency â AI agents executing end-to-end processes.", "taxID": "52.546.037/0001-13", "foundingDate": "2023-10-17", "founder": {"@type": "Person", "name": "Lucca Carvalho", "jobTitle": "CEO"}, "address": {"@type": "PostalAddress", "addressLocality": "Belo Horizonte", "addressRegion": "MG", "addressCountry": "BR"}, "contactPoint": {"@type": "ContactPoint", "telephone": "+5531995829348", "contactType": "sales", "areaServed": "BR", "availableLanguage": "pt-BR"}, "sameAs": ["https://www.linkedin.com/company/xmacna", "https://www.instagram.com/xmacna", "https://x.com/xmacna", "https://github.com/xmacna", "https://www.youtube.com/@XMACNA"]}, {"@type": "WebSite", "@id": "https://xmacna.ai/en#website", "url": "https://xmacna.ai/en", "name": "XMACNA", "inLanguage": "en", "publisher": {"@id": "https://xmacna.ai/#org"}}, {"@type": "AboutPage", "@id": "https://xmacna.ai/en/about#webpage", "url": "https://xmacna.ai/en/about", "name": "About XMACNA | Digital Employee Agency", "description": "Meet XMACNA: the Digital Employee agency â AI agents that EXECUTE. Founded in 2023 in Belo Horizonte, with +600 Digital Employees in operation.", "inLanguage": "en", "isPartOf": {"@id": "https://xmacna.ai/en#website"}, "about": {"@id": "https://xmacna.ai/#org"}, "mainEntity": {"@id": "https://xmacna.ai/#org"}}, {"@type": "BreadcrumbList", "itemListElement": [{"@type": "ListItem", "position": 1, "name": "Home", "item": "https://xmacna.ai/en"}, {"@type": "ListItem", "position": 2, "name": "About", "item": "https://xmacna.ai/en/about"}]}]}</script>
2039 2040<link rel="canonical" href="https://xmacna.ai/en/about"> 2041<link rel="alternate" hreflang="pt-BR" href="https://xmacna.ai/sobre"> 2042<link rel="alternate" hreflang="en" href="https://xmacna.ai/en/about"> 2043<link rel="alternate" hreflang="es" href="https://xmacna.ai/es/sobre"> 2044<link rel="alternate" hreflang="x-default" href="https://xmacna.ai/sobre"> 2045<link rel="stylesheet" href="/i18n/language-switcher.css">
2046<script defer src="/i18n/routes.en.js"></script>
vendor: 1 bytes, line 2046
2046
2047<script defer src="/i18n/language-switcher.js"></script>
2047 2048</head> 2049<body data-xm-source-path="/sobre" data-xm-locale="en">
vendor: 68 bytes, lines 2049-2050
2049 2050<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
2050GTM-WLKBRVZG
vendor: 85 bytes, lines 2050-2051
2050" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> 2051
2051<canvas id="voronoi" aria-hidden="true"></canvas> 2052 <div class="scrim" aria-hidden="true"></div> 2053 <div class="shell"> 2054<header class="nav"> 2055 <a class="brand" href="/en" aria-label="XMACNA"> 2056 <span class="brand-id"> 2057 <span class="brand-morph"><canvas id="brandParticles" aria-hidden="true"></canvas></span> 2058 <small>Digital Employees</small> 2059 </span> 2060 </a> 2061 <button type="button" class="nav-burger" aria-expanded="false" aria-controls="nav-principal" aria-label="Open menu"> 2062 <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path class="nb-open" d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path class="nb-close" d="M6 6l12 12M18 6 6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg> 2063 </button> 2064 <nav class="nav-links" id="nav-principal" aria-label="Main navigation"> 2065 <div class="nav-drop" data-drop> 2066 <button type="button" class="nav-drop-btn" aria-haspopup="true" aria-expanded="false" aria-controls="nav-sobre"> 2067 How it works 2068 <svg class="nav-caret" viewBox="0 0 12 8" fill="none" aria-hidden="true"><path d="M1 1.5 6 6.5l5-5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg> 2069 </button> 2070 <div class="nav-menu" id="nav-sobre" role="menu" aria-label="How XMACNA works"> 2071 <a role="menuitem" href="/en#resposta">The method</a> 2072 <a role="menuitem" href="/en#prova">Operation</a> 2073 <a role="menuitem" href="/en#inteligencia">Intelligence</a> 2074 <a role="menuitem" href="/en#produtos">Products</a> 2075 <a role="menuitem" href="/en#processo">Process</a> 2076 <a role="menuitem" href="/en/case-supera">Case studies</a> 2077 <a role="menuitem" href="/en/diagnosis">Free AI assessment</a> 2078 </div> 2079 </div> 2080 <a href="/en/catalog-of-ai-agents">Catalog</a> 2081 <a href="/en/about">About</a> 2082 <a href="/en/posts?xmacna-cache=20260612">Articles</a> 2083 <a href="/en/contact">Contact</a> 2084 <a href="https://wa.me/553195829348?text=Hi+Hermes%21+I+read+about+XMACNA+and+want+to+learn+about+Digital+Employees+for+my+company.+%28sobre%29" target="_blank" rel="noopener">Talk now</a> 2085 </nav> 2086</header><nav class="xm-language-switcher" aria-label="Language"><a href="/sobre" lang="pt-BR" hreflang="pt-BR" data-xm-locale="pt-br">Português</a><a href="/en/about" lang="en" hreflang="en" data-xm-locale="en" aria-current="true">English</a><a href="/es/sobre" lang="es" hreflang="es" data-xm-locale="es">Español</a></nav> 2087<main id="top"> 2088 <section class="ip-sec ip-hero"> 2089 <div class="pa-inner"> 2090 <span class="section-kicker">About XMACNA</span> 2091 <h1 class="display">The <em>Digital Employees</em> agency.</h1> 2092 <p class="lede" style="max-width:700px;margin:0 auto;"><strong>XMACNA</strong> places <strong>AI agents that EXECUTE</strong> to work inside companies â sales, service, and operations â end to end. This is no longer just a chatbot: itâs a <em>Digital Employee</em> who understands, decides, and acts.</p> 2093 <div class="ip-ctas"> 2094 <a class="btn btn-primary" href="https://wa.me/553195829348?text=Hi+Hermes%21+I+read+about+XMACNA+and+want+to+learn+about+Digital+Employees+for+my+company.+%28sobre%29" target="_blank" rel="noopener">Talk to Hermes</a> 2095 <a class="btn btn-secondary" href="/en/diagnosis">AI Assessment · free</a> 2096 </div> 2097 </div> 2098 </section> 2099 2100 <section class="ip-sec"> 2101 <div class="pa-inner"> 2102 <span class="section-kicker">Who we are</span> 2103 <h2>Cutting-edge technology, applied to your <em>business</em>.</h2> 2104 <div class="ip-prose"> 2105 <p>Founded in <strong>2023</strong>, in <strong>Belo Horizonte (MG)</strong>, XMACNA is a <strong>Digital Employee</strong> agency: Artificial Intelligence agents that do more than chat â they <strong>execute real processes</strong>, integrate any system, and operate 24/7.</p> 2106 <p>We bring together a team of carbon and silicon â engineers, cognitive designers, and researchers â with proprietary software and the worldâs top AI models. You focus on business; XMACNA <strong>executes the technology</strong>, at a fraction of the cost of building everything in-house.</p> 2107 </div> 2108 </div> 2109 </section> 2110 2111 <section class="ip-sec"> 2112 <div class="pa-inner">
2113 <span class="section-kicker">Our thesis</span> 2114 <h2>In 5 years, no healthy company will exist <em>without</em> Digital Employees.</h2> 2115 <div class="ip-prose"> 2116 <p>AI is no longer the future â it must be the present. Our mission is to bring applied AI that <strong>delivers real results</strong> to companies of all sizes, transforming how they serve, sell, and operate.</p> 2117 </div> 2118 </div> 2119 </section> 2120 2121 <section class="ip-sec"> 2122 <div class="pa-inner"> 2123 <span class="section-kicker">Real-world results</span> 2124 <h2>Real numbers from those already working with <em>XMACNA</em>.</h2> 2125 <div class="ip-band" aria-label="Real metrics from XMACNA operation"> 2126 <div class="ip-stat"><span class="ip-num">+600</span><span class="ip-lab">Digital Employees in operation</span></div> 2127 <div class="ip-stat"><span class="ip-num">+100%</span><span class="ip-lab"> scheduled visits · Rede Supera</span></div> 2128 <div class="ip-stat"><span class="ip-num">+100%</span><span class="ip-lab"> effective contacts · Rede Supera</span></div> 2129 <div class="ip-stat"><span class="ip-num">6/10</span><span class="ip-lab"> contacts schedule visits · Instituto Mix (from 1 to 10)</span></div> 2130 </div> 2131 </div> 2132 </section> 2133 2134 <section class="ip-sec"> 2135 <div class="pa-inner"> 2136 <span class="section-kicker">The company</span> 2137 <h2>XMACNA Digital Employees.</h2> 2138 <dl class="ip-meta"> 2139 <div><dt>Corporate name</dt><dd>XMACNA DIGITAL EMPLOYEES LTD</dd></div> 2140 <div><dt>CNPJ</dt><dd>52.546.037/0001-13</dd></div> 2141 <div><dt>Foundation</dt><dd>2023, Belo Horizonte (MG)</dd></div> 2142 <div><dt>Headquarters</dt><dd>Sagrada FamÃlia, Belo Horizonte · MG · Brazil</dd></div> 2143 <div><dt>Support</dt><dd>Brazil · pt-BR</dd></div> 2144 </dl> 2145 </div> 2146 </section> 2147 2148 <section class="ip-sec" style="text-align:center;padding-bottom:clamp(70px,10vw,120px);"> 2149 <div class="pa-inner"> 2150 <h2>Ready to have <em>Digital Employees</em>?</h2> 2151 <p class="lede" style="max-width:560px;margin:0 auto;">Talk to Hermes â our Digital Salesperson â and see XMACNA AI truly executing.</p> 2152 <div class="ip-ctas"> 2153 <a class="btn btn-primary" href="https://wa.me/553195829348?text=Hi+Hermes%21+I+read+about+XMACNA+and+want+to+learn+about+Digital+Employees+for+my+company.+%28sobre%29" target="_blank" rel="noopener">Talk to Hermes</a> 2154 <a class="btn btn-secondary" href="/en/partners">Become a partner</a> 2155 </div> 2156 </div> 2157 </section> 2158</main> 2159 </div> 2160<footer class="site-footer" id="contato"> 2161 <div class="footer-card"> 2162 <div class="footer-top"> 2163 <div> 2164 <div class="footer-logo">XMACNA</div> 2165 <p class="footer-tagline">Digital Employees</p> 2166 <div class="footer-menu-title">Menu</div> 2167 <nav class="footer-links" aria-label="Footer links"> 2168 <a href="/en/about">About</a> 2169 <a href="/en/contact">Contact</a> 2170 <a href="/en/terms-and-conditions-of-use">Terms and Conditions of Use</a> 2171 <a href="https://wa.me/553195829348?text=Hi+Hermes%21+I+read+about+XMACNA+and+want+to+learn+about+Digital+Employees+for+my+company.+%28sobre%29" target="_blank" rel="noopener" >Talk to Hermes</a> 2172 <a href="/en/partners">XMACNA Partner</a> 2173 <a href="/en/help">Help Center</a> 2174 <a href="/en/privacy-policy">Privacy Policy</a> 2175 <a href="/en/lgpd">LGPD</a> 2176 </nav> 2177 </div> 2178 2179 <div class="newsletter"> 2180 <svg class="sun" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9 7 7M17 17l2.1 2.1M19.1 4.9 17 7M7 17l-2.1 2.1" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="12" r="4" fill="currentColor"/></svg> 2181 <h2>Chat with <span>Hermes</span></h2> 2182 <p>See a <em>Digital Employee</em> in action â chat now on WhatsApp.</p> 2183 <a class="btn btn-primary" href="https://wa.me/553195829348?text=Hi+Hermes%21+I+read+about+XMACNA+and+want+to+learn+about+Digital+Employees+for+my+company.+%28sobre%29" target="_blank" rel="noopener" >Talk to Hermes</a> 2184 </div> 2185 </div> 2186 2187 <div class="footer-sitemap" aria-label="XMACNA solutions map"> 2188 <div> 2189 <div class="footer-menu-title">Start here</div> 2190 <nav class="footer-links"> 2191 <a href="/en/diagnosis">
2191Free AI assessment</a> 2192 </nav> 2193 </div> 2194 <div> 2195 <div class="footer-menu-title">Concept & product</div> 2196 <nav class="footer-links"> 2197 <a href="/en/digital-employee">Digital Employee</a> 2198 <a href="/en/in-5-years">The thesis of 5 years</a> 2199 <a href="/en/where-to-start">Where to start with AI</a> 2200 <a href="/en/whatsapp-24-7">WhatsApp 24/7 with AI</a> 2201 <a href="/en/integrated-crm">Integrated dashboard</a> 2202 <a href="/en/ai-agent-vs-chatbot">Chatbot vs AI agent</a> 2203 <a href="/en/ai-agents">AI agents for companies</a> 2204 <a href="/en/aphrodite-marketing-ai">Afrodite · Marketing with AI</a> 2205 <a href="/en/process-automation">Process automation with AI</a> 2206 <a href="/en/ai-sdr">AI SDR</a> 2207 <a href="/en/custom-software">Custom software</a> 2208 <a href="/en/ai-will-replace-employees">Will AI replace jobs?</a> 2209 <a href="/en/whatsapp-business-api-guide">WhatsApp Business API Guide</a> 2210 </nav> 2211 </div> 2212 <div> 2213 <div class="footer-menu-title">By sector</div> 2214 <nav class="footer-links"> 2215 <a href="/en/real-estate-ai">AI for Real Estate</a> 2216 <a href="/en/ai-franchise">AI for Franchise</a> 2217 <a href="/en/school-ai">AI for School</a> 2218 <a href="/en/clinic-ai">AI for Clinic</a> 2219 <a href="/en/ai-ecommerce">AI for E-commerce</a> 2220 <a href="/en/ai-low-income-real-estate">AI for MCMV Builder</a> 2221 <a href="/en/ai-saas">AI for SaaS</a> 2222 <a href="/en/industry-ai">AI for Industry</a> 2223 <a href="/en/legal-ai">AI for Legal</a> 2224 <a href="/en/pet-shop-ai">AI for Pet Shop</a> 2225 <a href="/en/ai-gym">AI for Gym</a> 2226 <a href="/en/system-for-clinic">System for Clinic</a> 2227 <a href="/en/logistics-ai">AI for Logistics</a> 2228 <a href="/en/ai-retail">AI for Retail</a> 2229 <a href="/en/ai-accounting">AI for Accounting</a> 2230 <a href="/en/restaurant-ai">AI for restaurant and delivery on WhatsApp</a> 2231 <a href="/en/ai-beauty-salon">AI for beauty salon and barbershop</a> 2232 <a href="/en/ai-insurance">AI for insurance broker</a> 2233 <a href="/en/solar-energy-ai">AI for solar energy</a> 2234 <a href="/en/ai-dentistry">AI for dental clinic and dentist</a> 2235 <a href="/en/construction-ai">AI for builder and developer</a> 2236 <a href="/en/consortium-ai">AI for consortium sales</a> 2237 <a href="/en/ai-travel">AI for travel agency</a> 2238 <a href="/en/ai-credit">AI for credit</a> 2239 <a href="/en/veterinary-ai">AI for veterinary clinic and pet</a> 2240 <a href="/en/ai-nutrition">AI for nutritionist and nutrition office</a> 2241 <a href="/en/internet-provider-ai">AI for internet provider (ISP)</a> 2242 <a href="/en/agribusiness-ai">AI for agribusiness</a> 2243 <a href="/en/carrier-ai">AI for transportation company</a> 2244 <a href="/en/custom-furniture-ai">AI for custom furniture</a> 2245 <a href="/en/ai-online-course">AI for online course</a> 2246 <a href="/en/condo-ai">AI for condominium administration</a> 2247 <a href="/en/lab-ai">AI for clinical analysis laboratory</a> 2248 <a href="/en/rental-property-ai">AI for rental real estate agency</a> 2249 <a href="/en/pharmacy-ai">AI for pharmacy and drugstore on WhatsApp</a> 2250 <a href="/en/ai-psychology">AI for psychologist and psychology clinic</a> 2251 <a href="/en/ai-physiotherapy">AI for physiotherapy clinic and packages</a> 2252 <a href="/en/ai-driving-school">AI for driving school and CFC</a> 2253 </nav> 2254 </div> 2255 <div> 2256 <div class="footer-menu-title">By pain point</div> 2257 <nav class="footer-links"> 2258 <a href="/en/lost-meta-ads-lead">Lost Meta Ads lead</a> 2259 <a href="/en/lost-nighttime-whatsapp">WhatsApp 24/7</a> 2260 <a href="/en/overwhelmed-salesperson">Overloaded team</a> 2261 <a href="/en/clinic-no-show">Clinic no-show</a> 2262 <a href="/en/high-cac">High CAC</a> 2263 <a href="/en/outdated-crm">Outdated dashboard</a> 2264 <a href="/en/forgotten-follow-up">Forgotten follow-up</a> 2265 <a href="/en/abandoned-cart">Abandoned cart</a> 2266 <a href="/en/churn-saas">SaaS churn</a> 2267 <a href="/en/lost-enrollment">Lost enrollment</a> 2268 <a href="/en/lost-property-visit">Real estate visit</a> 2269 <a href="/en/disqualified-mcmv-lead">Disqualified MCMV</a> 2270 <a href="/en/whatsapp-audio-not-transcribed">Audio not transcribed</a> 2271 <a href="/en/brand-voice-lost">Lost brand voice</a> 2272 <a href="/en/slow-response-time">Response time</a> 2273 <a href="/en/hr-recruitment-overload">HR recruitment</a> 2274 <a href="/en/recurring-billing">Recurring billing</a> 2275 <a href="/en/lost-instagram-direct">Instagram Direct</a> 2276 <a href="/en/already-tried-chatbot">Already tried chatbot</a> 2277 <a href="/en/sales-team-without-data">No commercial data</a> 2278 <a href="/en/automated-whatsapp-collection">Automatic billing on WhatsApp</a> 2279 <a href="/en/whatsapp-client-reactivation">Customer reactivation</a> 2280 </nav> 2281 </div> 2282 <div> 2283 <div class="footer-menu-title">Services</div> 2284 <nav class="footer-links"> 2285 <a href="/en/automation-n8n">n8n for companies</a> 2286 <a href="/en/dedicated-squad">Dedicated squad</a> 2287 <a href="/en/outsourced-it">Outsourced IT for SMEs</a> 2288 <a href="/en/ai-consulting">AI consulting</a> 2289 <a href="/en/system-integration">Systems integration</a> 2290 <a href="/en/legacy-system-modernization">Legacy systems modernization</a> 2291 </nav> 2292 </div> 2293 <div> 2294 <div class="footer-menu-title">Comparisons</div> 2295 <nav class="footer-links"> 2296 <a href="/en/prices">How much does an AI agent cost</a> 2297 <a href="/en/ai-roi-calculator">AI ROI in the company</a> 2298 <a href="/en/manychat-brazil-alternative">ManyChat alternative in Brazil</a> 2299 <a href="/en/blip-zenvia-alternative">Alternative to Blip and Zenvia</a> 2300 <a href="/en/botconversa-alternative">Alternative to BotConversa</a> 2301 <a href="/en/digisac-alternative">Digisac alternative</a> 2302 <a href="/en/kommo-alternative">Kommo alternative</a> 2303 <a href="/en/alternative-octadesk">Octadesk alternative</a> 2304 <a href="/en/wati-alternative">Alternative to WATI with AI</a>
2305 <a href="/en/meta-business-ai-vs-digital-employee">Meet the Digital Employee</a> 2306 <a href="/en/huggy-alternative">Alternative to Huggy</a> 2307 <a href="/en/jivochat-alternative">Alternative to JivoChat</a> 2308 <a href="/en/leadlovers-alternative">Alternative to LeadLovers</a> 2309 <a href="/en/sirena-alternative">Alternative to Sirena</a> 2310 <a href="/en/tallos-alternative">Alternative to Tallos</a> 2311 <a href="/en/chatguru-alternative">Alternative to ChatGuru</a> 2312 <a href="/en/typebot-alternative">Alternative to Typebot</a> 2313 <a href="/en/alternative-poli">Alternative to PoliChat</a> 2314 <a href="/en/weni-alternative">Alternative to Weni</a> 2315 <a href="/en/alternative-360dialog">Alternative to 360dialog</a> 2316 <a href="/en/gupshup-alternative">Alternative to Gupshup</a> 2317 </nav> 2318 </div> 2319 <div> 2320 <div class="footer-menu-title">Guides & content</div> 2321 <nav class="footer-links"> 2322 <a href="/en/ai-glossary">AI glossary</a> 2323 <a href="/en/ai-agent-vs-rpa-guide">AI agent vs RPA</a> 2324 <a href="/en/whatsapp-service-automation-guide">Automate WhatsApp</a> 2325 <a href="/en/ai-guide-for-small-businesses">
2325AI for small and medium businesses: the 2026 guide</a> 2326 <a href="/en/guide-to-implement-ai-step-by-step">Implement AI</a> 2327 <a href="/en/guide-what-is-an-ai-agent">What is an AI agent</a> 2328 <a href="/en/guide-how-much-ai-costs-company">How much does AI cost</a> 2329 <a href="/en/frequently-asked-questions-ai">Frequently asked questions</a> 2330 </nav> 2331 </div> 2332 <div> 2333 <div class="footer-menu-title">Integrations</div> 2334 <nav class="footer-links"> 2335 <a href="/en/agendor-integration">Agendor</a> 2336 <a href="/en/bling-integration">Bling</a> 2337 <a href="/en/integrate-hubspot">HubSpot</a> 2338 <a href="/en/integrate-kommo">Kommo</a> 2339 <a href="/en/integrates-nuvemshop">Nuvemshop</a> 2340 <a href="/en/integrate-omie">Omie</a> 2341 <a href="/en/integrate-pipedrive">Pipedrive</a> 2342 <a href="/en/integrate-ploomes">Ploomes</a> 2343 <a href="/en/integrates-rd-station">RD Station</a> 2344 <a href="/en/integrates-salesforce">Salesforce</a> 2345 <a href="/en/integrate-totvs">TOTVS</a> 2346 <a href="/en/integrate-vtex">VTEX</a> 2347 <a href="/en/integrates-conta-azul">ContaAzul AI Integration</a> 2348 <a href="/en/integrate-tiny">Tiny ERP AI Integration</a> 2349 <a href="/en/integrate-zoho">Zoho CRM Integration with AI on WhatsApp</a> 2350 <a href="/en/integrate-sankhya">Sankhya Integration with AI on WhatsApp</a> 2351 <a href="/en/integrates-moskit">Moskit CRM AI Integration</a> 2352 <a href="/en/asaas-integration">Asaas with AI</a> 2353 <a href="/en/shopify-integration">Shopify AI Integration</a> 2354 <a href="/en/integrates-woocommerce">WooCommerce AI Integration</a> 2355 <a href="/en/mercado-livre-integration">Mercado Livre AI Integration</a> 2356 <a href="/en/integrate-tray">Tray AI Integration</a> 2357 <a href="/en/integrate-vindi">Vindi AI Integration</a> 2358 </nav> 2359 </div> 2360 <div> 2361 <div class="footer-menu-title">Cases</div> 2362 <nav class="footer-links"> 2363 <a href="/en/instituto-mix-case">Case Instituto Mix: 6/10 schedule visit</a> 2364 <a href="/en/case-supera">Case Rede Supera</a> 2365 </nav> 2366 </div> 2367 </div> 2368 2369 <div class="footer-divider"></div> 2370 2371 <div class="footer-bottom"> 2372 <div class="copyright"> 2373 <p>© 2026 XMACNA. All rights reserved.</p> 2374 </div> 2375 <div class="socials" aria-label="Social media"> 2376 <a href="https://www.linkedin.com/company/xmacna" target="_blank" rel="noopener" aria-label="LinkedIn"><svg viewBox="0 0 24 24"><path d="M4.98 3.5A2.5 2.5 0 1 1 0 3.5a2.5 2.5 0 0 1 4.98 0ZM.4 8.2h4.2V24H.4V8.2ZM8.2 8.2h4v2.2h.1c.6-1.1 2.1-2.6 4.4-2.6 4.7 0 5.6 3.1 5.6 7.1V24h-4.2v-8.1c0-1.9 0-4.4-2.7-4.4s-3.1 2.1-3.1 4.3V24H8.2V8.2Z"/></svg></a> 2377 <a href="https://www.instagram.com/xmacna" target="_blank" rel="noopener" aria-label="Instagram"><svg viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="18" height="18" rx="5" stroke="currentColor" stroke-width="2.2"/><circle cx="12" cy="12" r="4" stroke="currentColor" stroke-width="2.2"/><circle cx="17.5" cy="6.5" r="1.2" fill="currentColor"/></svg></a> 2378 <a href="https://x.com/xmacna" target="_blank" rel="noopener" aria-label="X (Twitter)"><svg viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77Z"/></svg></a> 2379 <a href="https://wa.me/553195829348?text=Hi+Hermes%21+I+read+about+XMACNA+and+want+to+learn+about+Digital+Employees+for+my+company.+%28sobre%29" target="_blank" rel="noopener" aria-label="WhatsApp"><svg viewBox="0 0 24 24"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.85 9.85 0 0 0 12.04 2Zm0 1.8a8.08 8.08 0 0 1 5.74 2.38 8.07 8.07 0 0 1 2.38 5.73c0 4.48-3.65 8.12-8.12 8.12a8.1 8.1 0 0 1-4.12-1.13l-.3-.18-3.06.8.82-2.99-.2-.31a8.06 8.06 0 0 1-1.24-4.31c0-4.48 3.65-8.12 8.12-8.12Zm-2.72 4.36c-.
237913 0-.34.05-.52.24-.18.2-.69.67-.69 1.64 0 .97.71 1.91.81 2.04.1.13 1.4 2.13 3.39 2.99 1.65.71 1.99.57 2.35.54.36-.03 1.17-.48 1.33-.94.16-.46.16-.86.11-.94-.05-.08-.18-.13-.39-.23-.2-.1-1.17-.58-1.35-.64-.18-.07-.31-.1-.45.1-.13.2-.51.64-.63.77-.12.13-.23.15-.43.05-.2-.1-.85-.31-1.61-1-.6-.53-1-1.19-1.12-1.39-.12-.2-.01-.31.09-.41.09-.09.2-.23.3-.35.1-.12.13-.2.2-.34.06-.13.03-.25-.02-.35-.05-.1-.45-1.08-.62-1.48-.16-.39-.33-.34-.45-.34l-.39-.01Z"/></svg></a> 2380 </div> 2381 </div> 2382 </div> 2383</footer>
2384<script> 2385 2386(() => { 2387 function settleHash() { 2388 if (!location.hash) return; 2389 const target = document.querySelector(location.hash); 2390 if (target) target.scrollIntoView({ block: "start" }); 2391 } 2392 window.addEventListener("load", () => { 2393 setTimeout(settleHash, 120); 2394 setTimeout(settleHash, 700); 2395 }); 2396})(); 2397 2398(() => { 2399 const canvas = document.getElementById('voronoi'); 2400 const ctx = canvas.getContext('2d', { alpha: true }); 2401 const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches; 2402 2403 const VIOLET = [167,139,250]; 2404 const CYAN = [34,211,238]; 2405 2406 let W=0,H=0,DPR=1; 2407 let sites = []; // voronoi seed points {x,y,bx,by,phase} 2408 let cells = []; // computed polygons per site 2409 const mouse = {x:-9999,y:-9999,active:false,vx:0,vy:0,px:-9999,py:-9999}; 2410 let t0 = performance.now(); 2411 2412 // density tuned to viewport; fewer cells on mobile for perf 2413 function siteCount(){ 2414 const area = W*H; 2415 const base = window.innerWidth < 760 ? 26000 : 17000; 2416 return Math.max(34, Math.min(150, Math.floor(area/(base)))); 2417 } 2418 2419 function rand(a,b){ return a + Math.random()*(b-a); } 2420 2421 function buildSites(){ 2422 sites = []; 2423 const n = siteCount(); 2424 // jittered grid for even-ish but organic distribution 2425 const cols = Math.round(Math.sqrt(n * (W/H))); 2426 const rows = Math.max(2, Math.round(n/cols)); 2427 const cw = W/cols, ch = H/rows; 2428 for(let r=0;r<rows;r++){ 2429 for(let c=0;c<cols;c++){ 2430 const bx = c*cw + rand(0.18,0.82)*cw; 2431 const by = r*ch + rand(0.18,0.82)*ch; 2432 sites.push({ bx, by, x:bx, y:by, phase:Math.random()*Math.PI*2, 2433 amp: rand(6,16), spd: rand(.0004,.0011) }); 2434 } 2435 } 2436 } 2437 2438 function resize(){ 2439 DPR = Math.min(window.devicePixelRatio||1, 2); 2440 W = canvas.clientWidth = window.innerWidth; 2441 H = canvas.clientHeight = window.innerHeight; 2442 canvas.width = Math.floor(W*DPR); 2443 canvas.height = Math.floor(H*DPR); 2444 ctx.setTransform(DPR,0,0,DPR,0,0); 2445 buildSites(); 2446 if(reduced){ computeVoronoi(); drawStatic(); } 2447 } 2448 2449 /* ---------- Voronoi via per-cell half-plane clipping ---------- 2450 For each site, start with the screen rect polygon and clip it by the 2451 perpendicular bisector against every nearby site. Robust, no deps. */ 2452 2453 function clipPolygon(poly, ax,ay, bx,by){ 2454 // keep half-plane closer to A than to B: bisector normal = (B-A) 2455 const nx = bx-ax, ny = by-ay; 2456 const mx = (ax+bx)/2, my = (ay+by)/2; 2457 const c = nx*mx + ny*my; // points P with n·P <= c are on A's side 2458 const out = []; 2459 const len = poly.length; 2460 for(let i=0;i<len;i++){ 2461 const p = poly[i], q = poly[(i+1)%len]; 2462 const dp = nx*p[0] + ny*p[1] - c; 2463 const dq = nx*q[0] + ny*q[1] - c; 2464 const pin = dp <= 0, qin = dq <= 0; 2465 if(pin) out.push(p); 2466 if(pin !== qin){ 2467 const tnum = dp/(dp-dq); 2468 out.push([ p[0] + tnum*(q[0]-p[0]), p[1] + tnum*(q[1]-p[1]) ]); 2469 } 2470 } 2471 return out; 2472 } 2473 2474 function computeVoronoi(){ 2475 cells = []; 2476 const pad = 40; 2477 const N = sites.length; 2478 // neighbor radius: clip only against reasonably-near sites for speed 2479 const approxCell = Math.sqrt((W*H)/Math.max(1,N)); 2480 const R = approxCell*2.6; 2481 const R2 = R*R; 2482 for(let i=0;i<N;i++){ 2483 const s = sites[i]; 2484 let poly = [[-pad,-pad],[W+pad,-pad],[W+pad,H+pad],[-pad,H+pad]]; 2485 for(let j=0;j<N;j++){ 2486 if(j===i) continue; 2487 const o = sites[j]; 2488 const dx=o.x-s.x, dy=o.y-s.y; 2489 if(dx*dx+dy*dy > R2) continue; 2490 poly = clipPolygon(poly, s.x,s.y, o.x,o.y); 2491 if(poly.length<3) break; 2492 } 2493 if(poly.length>=3){ 2494 // centroid for shatter offset 2495 let cx=0,cy=0; 2496 for(const p of poly){ cx+=p[0]; cy+=p[1]; } 2497 cx/=poly.length; cy/=poly.length; 2498 cells.push({ poly, cx, cy, site:s }); 2499 } 2500 } 2501 } 2502 2503 function lerpCol(a,b,t){ 2504 return `${Math.round(a[0]+(b[0]-a[0])*t)},${Math.round(a[1]+(b[1]-a[1])*t)},${Math.round(a[2]+(b[2]-a[2])*t)}`; 2505 } 2506 2507 function drawStatic(){ 2508 ctx.clearRect(0,0,W,H);
2509 for(const cell of cells){ drawCell(cell, 0, 0); } 2510 } 2511 2512 function drawCell(cell, shatter, glow){ 2513 const poly = cell.poly; 2514 if(poly.length<3) return; 2515 2516 // shatter = 0..1 explosion factor; push vertices outward from centroid 2517 let pts = poly; 2518 if(shatter>0.001){ 2519 const k = shatter; 2520 pts = poly.map(p=>{ 2521 const dx = p[0]-cell.cx, dy = p[1]-cell.cy; 2522 return [ cell.cx + dx*(1+k*0.55) + cell.site.driftx*k, 2523 cell.cy + dy*(1+k*0.55) + cell.site.drifty*k ]; 2524 }); 2525 } 2526 2527 ctx.beginPath(); 2528 ctx.moveTo(pts[0][0], pts[0][1]); 2529 for(let i=1;i<pts.length;i++) ctx.lineTo(pts[i][0], pts[i][1]); 2530 ctx.closePath(); 2531 2532 // color blends violet->cyan by horizontal position + glow boost 2533 const tcol = Math.min(1, Math.max(0, cell.cx/W*0.7 + glow*0.4)); 2534 const col = lerpCol(VIOLET, CYAN, tcol); 2535 2536 // glass fill â faint, brighter when shattered/near cursor 2537 const fillA = 0.018 + glow*0.10 + shatter*0.05; 2538 ctx.fillStyle = `rgba(${col},${fillA.toFixed(3)})`; 2539 ctx.fill(); 2540 2541 // neon edge 2542 const edgeA = 0.10 + glow*0.78 + shatter*0.35; 2543 ctx.lineWidth = 1 + glow*1.4 + shatter*0.8; 2544 ctx.strokeStyle = `rgba(${col},${Math.min(1,edgeA).toFixed(3)})`; 2545 ctx.shadowColor = `rgba(${col},${Math.min(0.9, glow*0.9+shatter*0.5).toFixed(3)})`; 2546 ctx.shadowBlur = (glow*16 + shatter*10); 2547 ctx.stroke(); 2548 ctx.shadowBlur = 0; 2549 2550 // bright seed node near cursor 2551 if(glow>0.25){ 2552 ctx.beginPath(); 2553 ctx.arc(cell.site.x, cell.site.y, 1.4+glow*1.8, 0, Math.PI*2); 2554 ctx.fillStyle = `rgba(${col},${(glow*0.9).toFixed(3)})`; 2555 ctx.fill(); 2556 } 2557 } 2558 2559 let recomputeAccum = 0; 2560 function frame(now){ 2561 if(document.hidden){requestAnimationFrame(frame);return;} 2562 const dt = Math.min(48, now - (frame._last||now)); 2563 frame._last = now; 2564 const T = (now - t0); 2565 2566 // ease mouse velocity decay 2567 mouse.vx *= 0.86; mouse.vy *= 0.86; 2568 2569 // animate sites: gentle breathing drift + recompose toward base 2570 for(const s of sites){ 2571 const wob_x = Math.cos(T*s.spd + s.phase) * s.amp; 2572 const wob_y = Math.sin(T*s.spd*1.3 + s.phase) * s.amp; 2573 const tx = s.bx + wob_x; 2574 const ty = s.by + wob_y; 2575 // recompose pull (the "re-forms" behaviour) 2576 s.x += (tx - s.x) * 0.08; 2577 s.y += (ty - s.y) * 0.08; 2578 } 2579 2580 // recompute voronoi at ~30fps (clipping is the costly part) 2581 recomputeAccum += dt; 2582 if(recomputeAccum >= 33){ recomputeAccum = 0; computeVoronoi(); } 2583 if(cells.length===0) computeVoronoi(); 2584 2585 ctx.clearRect(0,0,W,H); 2586 2587 const R = window.innerWidth<760 ? 200 : 290; // shatter radius around cursor 2588 const R2 = R*R; 2589 const speed = Math.min(1, Math.hypot(mouse.vx,mouse.vy)/26); // faster move = harder shatter 2590 2591 for(const cell of cells){ 2592 let shatter=0, glow=0; 2593 if(mouse.active){ 2594 const dx = cell.cx - mouse.x, dy = cell.cy - mouse.y; 2595 const d2 = dx*dx+dy*dy; 2596 if(d2 < R2){ 2597 const f = 1 - Math.sqrt(d2)/R; // 0..1 proximity 2598 const ff = f*f*(3-2*f); // smoothstep 2599 glow = ff; 2600 shatter = ff * (0.35 + speed*0.85); // explode harder when moving fast 2601 // direction to push fragments (away from cursor) 2602 const dist = Math.sqrt(d2)||1; 2603 cell.site.driftx = (dx/dist) * 26 * ff; 2604 cell.site.drifty = (dy/dist) * 26 * ff; 2605 } 2606 } 2607 drawCell(cell, shatter, glow); 2608 } 2609 2610 requestAnimationFrame(frame); 2611 } 2612 2613 function setMouse(x,y){ 2614 mouse.vx = x - (mouse.px<0? x : mouse.px); 2615 mouse.vy = y - (mouse.py<0? y : mouse.py); 2616 mouse.px = x; mouse.py = y; 2617 mouse.x = x; mouse.y = y; 2618 mouse.active = true; 2619 } 2620 2621 // ---- events ---- 2622 window.addEventListener('resize', () => { clearTimeout(resize._t); resize._t=setTimeout(resize,120); }, {passive:true}); 2623 if(!reduced){ 2624 window.addEventListener('pointermove', e => setMouse(e.clientX, e.clientY), {passive:true}); 2625 window.addEventListener('pointerleave', () => { mouse.active=false; mouse.x=mouse.y=-9999; }, {passive:true}); 2626 window.addEventListener('touchmove', e => { const t=e.touches[0]; if(t) setMouse(t.clientX,t.clientY); }, {passive:true}); 2627 window.addEventListener('touchend', () => { mouse.active=false; mouse.x=mouse.y=-9999; }, {passive:true}); 2628 } 2629 2630 // ---- boot ---- 2631 resize(); 2632 if(!reduced){ 2633 requestAnimationFrame(frame); 2634 } else { 2635 // static fallback: single clean voronoi mesh 2636 computeVoronoi(); 2637 ctx.clearRect(0,0,W,H); 2638 for(const cell of cells) drawCell(cell, 0, 0.08); 2639 } 2640})(); 2641 2642(() => { 2643 const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches; 2644 const fine = window.matchMedia("(pointer: fine)").matches; 2645 if (reduce || !fine) return; 2646 2647 const display = document.querySelector("[data-tilt]"); 2648 if (display) { 2649 let raf = null; 2650 let tx = 0; 2651 let ty = 0; 2652 function apply() { 2653 display.style.transform = `perspective(900px) rotateY(${tx}deg) rotateX(${ty}deg)`; 2654 display.style.transformStyle = "preserve-3d"; 2655 raf = null; 2656 } 2657 window.addEventListener("mousemove", (event) => { 2658 const rect = display.getBoundingClientRect(); 2659 const cx = (event.clientX - (rect.left + rect.width / 2)) / rect.width; 2660 const cy = (event.clientY - (rect.top + rect.height / 2)) / rect.height; 2661 tx = Math.max(-1, Math.min(1, cx)) * 6; 2662 ty = Math.max(-1, Math.min(1, cy)) * -4; 2663 if (!raf) raf = requestAnimationFrame(apply); 2664 }, { passive: true }); 2665 } 2666
2667 document.querySelectorAll(".type-card-grid").forEach((grid) => { 2668 grid.addEventListener("pointermove", (event) => { 2669 for (const card of grid.querySelectorAll(".type-card")) { 2670 const rect = card.getBoundingClientRect(); 2671 const x = (event.clientX - rect.left) / rect.width; 2672 const y = (event.clientY - rect.top) / rect.height; 2673 const cx = x - .5; 2674 const cy = y - .5; 2675 card.style.setProperty("--mx", `${x * 100}%`); 2676 card.style.setProperty("--my", `${y * 100}%`); 2677 card.style.transform = `rotateY(${cx * 8}deg) rotateX(${-cy * 8}deg) translateY(-4px)`; 2678 } 2679 }, { passive: true }); 2680 grid.addEventListener("pointerleave", () => { 2681 grid.querySelectorAll(".type-card").forEach((card) => { 2682 card.style.transform = ""; 2683 card.style.setProperty("--mx", "50%"); 2684 card.style.setProperty("--my", "50%"); 2685 }); 2686 }); 2687 }); 2688 2689 const stack = document.getElementById("uiStack"); 2690 const proof = document.getElementById("prova"); 2691 if (stack && proof) { 2692 let tx = 0, ty = 0, cx = 0, cy = 0, raf = null; 2693 function animate() { 2694 cx += (tx - cx) * .09; 2695 cy += (ty - cy) * .09; 2696 stack.style.transform = `rotateY(${cx * 10}deg) rotateX(${-cy * 8}deg)`; 2697 const mx = `${50 + cx * 45}%`; 2698 const my = `${50 + cy * 45}%`; 2699 stack.querySelectorAll(".ui-card").forEach((card) => { 2700 card.style.setProperty("--mx", mx); 2701 card.style.setProperty("--my", my); 2702 }); 2703 if (Math.abs(tx - cx) > .001 || Math.abs(ty - cy) > .001) raf = requestAnimationFrame(animate); 2704 else raf = null; 2705 } 2706 proof.addEventListener("pointermove", (event) => { 2707 const rect = proof.getBoundingClientRect(); 2708 tx = ((event.clientX - rect.left) / rect.width) - .5; 2709 ty = ((event.clientY - rect.top) / rect.height) - .5; 2710 if (!raf) raf = requestAnimationFrame(animate); 2711 }, { passive: true }); 2712 proof.addEventListener("pointerleave", () => { 2713 tx = 0; 2714 ty = 0; 2715 if (!raf) raf = requestAnimationFrame(animate); 2716 }); 2717 } 2718})(); 2719 2720(() => { 2721 const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches; 2722 const timeouts = []; 2723 let runId = 0; 2724 let index = 0; 2725 2726 const scenarios = [ 2727 { 2728 chips: ["intention detected", "opportunity created"], 2729 hero: { 2730 agent: "Hermes · Salesperson", 2731 status: "online · AI active", 2732 statCap: "average response", 2733 stat: "3,1s", 2734 statSub: "from first contact to next step", 2735 lead: "Marina Couto", 2736 stage: "Assessment scheduled", 2737 stageOn: 2, 2738 fields: ["WhatsApp · paid media", "XMACNA Sales", "Assessment today"], 2739 foot: "Updated by <b>Digital Employee<\/b>", 2740 messages: [ 2741 { dir: "in", text: "Hi! I want to understand XMACNA Sales for my commercial team.", time: "09
2741:41" }, 2742 { dir: "out", text: "Sure, Marina. I will map lead volume, response time, and where opportunities cool off.", time: "09:41" }, 2743 { dir: "in", text: "Today we get a lot of WhatsApp messages and lose funnel visibility.", time: "09:42" }, 2744 { dir: "out", text: "Perfect. I have already created the opportunity in the Intelligent Dashboard and set the assessment as the next step.", time: "09:42" } 2745 ] 2746 }, 2747 proof: { 2748 panelTitle: "Dashboard that fills itself", 2749 stageOn: 3, 2750 fields: [ 2751 ["origin", "WhatsApp · paid media"], 2752 ["pain", "slow response time"], 2753 ["next step", "assessment scheduled"] 2754 ], 2755 metricTitle: "Response in seconds, 24h", 2756 metric: "3,1s", 2757 metricText: "Average time to first response with a <em>Digital Employee<\/em> active, no queue and not dependent on business hours.", 2758 messages: [ 2759 { dir: "in", text: "I want to start with AI but donât know where." }, 2760 { dir: "out", text: "Let's find the first point of impact: sales, service, operations, or backoffice?" }, 2761 { dir: "in", text: "Sales. The lead arrives via WhatsApp and the team takes time to respond." }, 2762 { dir: "out", text: "First case defined: I qualify immediately and record everything in the Intelligent Dashboard." } 2763 ] 2764 }, 2765 sales: { 2766 threads: [ 2767 ["M", "Marina Couto", "Assessment today", true], 2768 ["A", "Ana Souza", "Return scheduled", false], 2769 ["R", "Rede Norte", "Proposal sent", false] 2770 ], 2771 title: "Marina Couto · WhatsApp", 2772 source: "Source: sales campaign", 2773 pill: "qualifying", 2774 messages: [ 2775 { fd: false, text: "Hi, I wanted to understand how XMACNA would help my sales team." }, 2776 { fd: true, text: "Sure. I will understand your lead volume, response time, and the stage where most opportunities cool off." }, 2777 { fd: false, text: "We have many conversations and little funnel visibility." }, 2778 { fd: true, text: "Perfect. I registered the opportunity and already set the next step in the Intelligent Dashboard." } 2779 ], 2780 deal: ["XMACNA Sales", "Assessment", "Discharge", "Meeting", 72, "Summary, interest, and next steps saved for the sales team."], 2781 floats: [["Qualified lead", "context saved"], ["Dashboard updated", "zero manual typing"]] 2782 } 2783 }, 2784 { 2785 chips: ["suggested visit", "schedule populated"], 2786 hero: { 2787 agent: "DE Education · Commercial", 2788 status: "online · active schedule", 2789 statCap: "educational case", 2790 stat: "6/10", 2791 statSub: "visits scheduled every ten contacts", 2792 lead: "Educational lead", 2793 stage: "Visit scheduled", 2794 stageOn: 3, 2795 fields: ["Local advertisement", "Demonstration class", "Schedule confirmed"], 2796 foot: "Record saved in <b>Intelligent Dashboard<\/b>", 2797 messages: [ 2798 { dir: "in", text: "My son is 10 years old. I wanted to know if the course helps with concentration.", time: "14:03" }, 2799 { dir: "out", text: "It does. I can explain the methodology and check a time for a visit at the nearest location.", time: "14:03" }, 2800 { dir: "in", text: "Can it be after 18h?", time: "14:04" }, 2801 { dir: "out", text: "Perfect. I found a time today at 18h30. Can you confirm the name and location so I can schedule it?", time: "14:04" } 2802 ] 2803 }, 2804 proof: { 2805 panelTitle: "Schedule and funnel updated in real time", 2806 stageOn: 4, 2807 fields: [ 2808 ["origin", "local campaign"], 2809 ["interest", "demonstration class"], 2810 ["next step", "visit confirmed"] 2811 ], 2812 metricTitle: "More visits per contact", 2813 metric: "6/10", 2814 metricText: "In an educational operation, the process went from one visit scheduled every ten contacts to six visits every ten.", 2815 messages: [ 2816 { dir: "in", text: "Is there time to visit the location this week?" }, 2817 { dir: "out", text: "Yes. I will cross-check your availability with the locationâs schedule." }, 2818 { dir: "in", text: "Today after 18h works." }, 2819 { dir: "out", text: "Scheduled. I also saved age, interest, and origin in the Intelligent Dashboard." } 2820 ] 2821 }, 2822 sales: { 2823 threads: [ 2824 ["E", "Educational lead", "Visit confirmed", true], 2825 ["M", "Marina Couto", "Assessment today", false], 2826 ["B", "Bruno Lima", "Technical scope", false] 2827 ], 2828 title: "Educational network · WhatsApp", 2829 source: "Source: local advertisement", 2830 pill: "scheduling", 2831 messages: [ 2832 { fd: false, text: "Iâd like to learn more about the course and schedule a visit." }, 2833 { fd: true, text: "Sure. I will check age, goal, and best location to find a real time in the schedule." }, 2834 { fd: false, text: "Today after 18h would be ideal." }, 2835 { fd: true, text: "Visit confirmed. I updated contact, opportunity, and schedule for the location team to follow up." } 2836 ], 2837 deal: ["Visit scheduled", "Scheduled", "Discharge", "Welc
2837ome family", 86, "Responsible person's data, location, time, and context saved before the visit."], 2838 floats: [["Visit scheduled", "6 in every 10 contacts"], ["Schedule synchronized", "less rework"]] 2839 } 2840 }, 2841 { 2842 chips: ["KPI analyzed", "process prioritized"], 2843 hero: { 2844 agent: "DE Redigir · Operation", 2845 status: "online · context saved", 2846 statCap: "Redigir case", 2847 stat: "30%", 2848 statSub: "improvement in the companyâs main KPIs", 2849 lead: "Redigir Team", 2850 stage: "Operation evolving", 2851 stageOn: 4, 2852 fields: ["Internal assessment", "Processes with AI", "New improvement cycle"], 2853 foot: "Learning saved in <b>Long-Term Memory<\/b>", 2854 messages: [ 2855 { dir: "in", text: "We want to apply AI beyond sales. Can you look at pedagogy, relationship, and IT?", time: "11:20" }, 2856 { dir: "out", text: "Yes. I will separate processes by impact, data dependency, and implementation speed.", time: "11:20" }, 2857 { dir: "in", text: "We need to see results by KPI, not just automation.", time: "11:21" }, 2858 { dir: "out", text: "Agreed. I will record baseline, goal, and improvement cycle for each prioritized front.", time: "11:21" } 2859 ] 2860 }, 2861 proof: { 2862 panelTitle: "AI also modernizes operation", 2863 stageOn: 4, 2864 fields: [ 2865 ["area", "pedagogical · relationship · IT"], 2866 ["goal", "improve main KPIs"], 2867 ["next step", "prioritize processes"] 2868 ], 2869 metricTitle: "Redigir Case", 2870 metric: "30%", 2871 metricText: "Redigir registered an improvement of 30% in the companyâs main KPIs with AI applied in various operation areas.", 2872 messages: [ 2873 { dir: "in", text: "We don't want AI just to sell. We want to improve the whole company." }, 2874 { dir: "out", text: "Understood. I will map processes, available data, and expected impact by area." }, 2875 { dir: "in", text: "The board needs to see results by indicator." }, 2876 { dir: "out", text: "I created a cycle per KPI: baseline, AI action, responsible, and improvement measurement." } 2877 ] 2878 }, 2879 sales: { 2880 threads: [ 2881 ["R", "Redigir · Operations", "KPIs under analysis", true], 2882 ["E", "Educational lead", "Visit confirmed", false], 2883 ["N", "New network", "Prioritized scope", false] 2884 ], 2885 title: "Redigir · Operations", 2886 source: "Source: executive assessment", 2887 pill: "analyzing", 2888 messages: [ 2889 { fd: false, text: "We want to invest in AI but not limit it to sales." }, 2890 { fd: true, text: "Perfect. I will treat it as digital modernization: processes, customized software, data, and AI working together." }, 2891 { fd: false, text: "It needs to become measurable improvement." }, 2892 { fd: true, text: "I registered the main KPIs and created the cycle plan to evolve each front." } 2893 ], 2894 deal: ["Modernization with AI", "Prioritization", "Executive", "Process map", 64, "Fronts, indicators, and next decisions saved for the committee to follow up."], 2895 floats: [["KPI mapped", "30% in the Redigir case"], ["Process prioritized", "beyond commercial"]] 2896 } 2897 }, 2898 { 2899 chips: ["integrated system", "decision recorded"], 2900 hero: { 2901 agent: "DE Custom · XMACNA", 2902 status: "online · multi-area", 2903 statCap: "operation", 2904 stat: "24/7", 2905 statSub: "software, data, and AI in the same flow", 2906 lead: "National network", 2907 stage: "Prioritized scope", 2908 stageOn: 3, 2909 fields: ["Innovation committee", "Custom software + AI", "Technical workshop"], 2910 foot: "Context saved for the <b>carbon and silicon team<\/b>", 2911 messages: [ 2912 { dir: "in", text: "We have legacy systems, many areas, and halted innovation projects.", time: "16:32" }, 2913 { dir: "out", text: "Let's start with the process map and identify where customized software combined with AI generates quick gains.", time: "16:32" }, 2914 { dir: "in", text: "Can it involve service, operations, and finance?", time: "16:33" }, 2915 { dir: "out", text: "Yes. XMACNA designs Digital Employees and custom systems for each prioritized front.", time: "16:33" } 2916 ] 2917 }, 2918 proof: { 2919 panelTitle: "From process to software with AI", 2920 stageOn: 3, 2921 fields: [ 2922 ["input", "innovation committee"], 2923 ["scope", "systems + Digital Employees"], 2924 ["next step", "technical workshop"] 2925 ], 2926 metricTitle: "Operation 24/7", 2927 metric: "24/7",
2928 metricText: "Digital Employees operate integrated with processes, data, and systems to accelerate any area of the company.", 2929 messages: [ 2930 { dir: "in", text: "Our company needs to modernize processes, not buy a standalone tool." }, 2931 { dir: "out", text: "Understood. I will connect the need, existing systems, and design the right Digital Employee." }, 2932 { dir: "in", text: "We want to start with an area that has a clear impact." }, 2933 { dir: "out", text: "I created the initial scope and the next technical workshop to prioritize the first delivery." } 2934 ] 2935 }, 2936 sales: { 2937 threads: [ 2938 ["N", "National network", "Technical workshop", true], 2939 ["R", "Redigir · Operations", "KPIs under analysis", false], 2940 ["E", "Educational lead", "Visit confirmed", false] 2941 ], 2942 title: "National network · Innovation", 2943 source: "Source: executive committee", 2944 pill: "prioritizing", 2945 messages: [ 2946 { fd: false, text: "We need to modernize processes and integrate systems with AI." }, 2947 { fd: true, text: "I will organize the areas by impact, technical complexity, and required data." }, 2948 { fd: false, text: "The first delivery needs to prove value quickly." }, 2949 { fd: true, text: "Initial scope created. The Intelligent Dashboard already has priority, risks, and the next workshop." } 2950 ], 2951 deal: ["Innovation project", "Scope", "Strategic", "Technical workshop", 58, "Need, involved systems, and priority criteria recorded for decision-making."], 2952 floats: [["Integrated system", "software + AI"], ["Decision recorded", "less lost meetings"]] 2953 } 2954 } 2955 ]; 2956 2957 function later(fn, ms) { 2958 const id = window.setTimeout(fn, ms); 2959 timeouts.push(id); 2960 return id; 2961 } 2962 2963 function clearTimers() { 2964 while (timeouts.length) window.clearTimeout(timeouts.pop()); 2965 } 2966 2967 function flash(el) { 2968 if (!el || reduce) return; 2969 el.classList.remove("xv-live-pop"); 2970 void el.offsetWidth; 2971 el.classList.add("xv-live-pop"); 2972 } 2973 2974 function write(el, value, html) { 2975 if (!el) return; 2976 if (html) el.innerHTML = value; 2977 else el.textContent = value; 2978 flash(el); 2979 } 2980 2981 function setChip(chip, value, markerClass) { 2982 if (!chip) return; 2983 const marker = chip.querySelector(markerClass); 2984 chip.textContent = ""; 2985 if (marker) chip.appendChild(marker); 2986 chip.appendChild(document.createTextNode(value ? " " + value : "")); 2987 flash(chip); 2988 } 2989 2990 function setStatus(node, value) { 2991 if (!node) return; 2992 const dot = document.createElement("span"); 2993 dot.className = "ld"; 2994 node.textContent = ""; 2995 node.appendChild(dot); 2996 node.appendChild(document.createTextNode(" " + value)); 2997 } 2998 2999 function setBars(nodes, count) { 3000 nodes.forEach((bar, i) => bar.classList.toggle("on", i < count)); 3001 } 3002 3003 function setBarsLive(nodes, count, token, immediate) { 3004 if (!nodes.length) return; 3005 if (immediate || reduce) { 3006 setBars(nodes, count); 3007 return; 3008 } 3009 nodes.forEach((bar) => bar.classList.remove("on")); 3010 nodes.forEach((bar, i) => { 3011 later(() => { 3012 if (token !== runId || i >= count) return; 3013 bar.classList.add("on"); 3014 flash(bar); 3015 }, 140 + i * 160); 3016 }); 3017 } 3018 3019 function typeInto(target, value, token, done) { 3020 if (!target) return; 3021 if (reduce) { 3022 target.textContent = value; 3023 if (done) done(); 3024 return; 3025 } 3026 let pos = 0; 3027 function step() { 3028 if (token !== runId) return; 3029 pos += 1; 3030 target.textContent = value.slice(0, pos); 3031 if (pos < value.length) { 3032 const prev = value.charAt(pos - 1); 3033 later(step, /[,.?!:;]/.test(prev) ? 78 : 13 + Math.random() * 17); 3034 } else if (done) { 3035 done(); 3036 } 3037 } 3038 step(); 3039 } 3040 3041 function fillRows(panel, rows, values, selector, token, immediate) { 3042 if (!rows.length) return; 3043 if (immediate || reduce) { 3044 rows.forEach((row, i) => write(row.querySelector(selector), values[i] || "")); 3045 return; 3046 } 3047 if (panel) { 3048 panel.classList.remove("is-filling"); 3049 void panel.offsetWidth; 3050 panel.classList.add("is-filling"); 3051 } 3052 rows.forEach((row, i) => { 3053 const target = row.querySelector(selector); 3054 if (!target) return; 3055 row.classList.remove("is-writing"); 3056 target.textContent = ""; 3057 later(() => { 3058 if (token !== runId) return; 3059 row.classList.add("is-writing"); 3060 typeInto(target, values[i] || "", token, () => { 3061 row.classList.remove("is-writing"); 3062 flash(row); 3063 }); 3064 }, 260 + i * 460); 3065 }); 3066 later(() => { 3067 if (token === runId && panel) panel.classList.remove("is-filling"); 3068 }, 1100 + rows.length * 520); 3069 } 3070 3071 function typingNode(kind) { 3072 if (kind === "hero") { 3073 const node = document.createElement("div"); 3074 node.className = "hpx-typing xv-chat-new"; 3075 node.setAttribute("aria-label", "Digital Employee typing"); 3076 node.innerHTML = "<span></span><span></span><span></span>"; 3077 return node; 3078 } 3079 if (kind === "sales") { 3080 const node = document.createElement("span"); 3081 node.className = "sales-typing xv-chat-new"; 3082 node.setAttribute("aria-label", "Digital Employee processing"); 3083 node.innerHTML = "<i></i><i></i><i></i>"; 3084 return node; 3085 } 3086 return null; 3087 } 3088 3089 function appendMessage(container, message, kind, typed, token, done) { 3090 let node; 3091 let target; 3092 const isOut = message.dir === "out" || message.fd; 3093 3094 if (kind === "hero") { 3095 node = document.createElement("div"); 3096 node.className = "hpx-bubble " + (isOut ? "hpx-bub-out" : "hpx-bub-in") + " xv-chat-new"; 3097 if (typed) { 3098 target = document.createElement("span"); 3099 node.appendChild(target); 3100 } else { 3101 node.appendChild(document.createTextNode(message.text + " ")); 3102 } 3103 const t = document.createElement("span"); 3104 t.className = "t"; 3105 t.textContent = message.time || ""; 3106 node.appendChild(t); 3107 } else if (kind === "sales") { 3108 node = document.createElement("p"); 3109 node.className = "sales-msg" + (message.fd ? " fd" : "") + " xv-chat-new"; 3110 if (typed) { 3111 target = node; 3112 } else { 3113 node.textContent = message.text; 3114 } 3115 } else { 3116 node = document.createElement("div"); 3117 node.className = "bubble " + (isOut ? "out" : "in") + " xv-chat-new"; 3118 if (typed) target = node; 3119 else node.textContent = message.text; 3120 } 3121 3122 container.appendChild(node); 3123 if (typed) typeInto(target, message.text, token, done); 3124 else if (done) later(done, 520); 3125 } 3126 3127 function renderMessages(container, messages, kind, token, immediate) { 3128 if (!container) return; 3129 container.innerHTML = ""; 3130 if (immediate) {
3131 messages.forEach((message) => appendMessage(container, message, kind, false, token)); 3132 const typing = typingNode(kind); 3133 if (typing) container.appendChild(typing); 3134 return; 3135 } 3136 3137 let i = 0; 3138 function next() { 3139 if (token !== runId) return; 3140 const message = messages[i++]; 3141 if (!message) { 3142 const typing = typingNode(kind); 3143 if (typing) container.appendChild(typing); 3144 return; 3145 } 3146 const typed = message.dir === "out" || message.fd; 3147 if (typed) { 3148 const typing = typingNode(kind); 3149 if (typing) container.appendChild(typing); 3150 later(() => { 3151 if (token !== runId) return; 3152 if (typing) typing.remove(); 3153 appendMessage(container, message, kind, true, token, () => later(next, 360)); 3154 }, 420); 3155 } else { 3156 appendMessage(container, message, kind, false, token, () => later(next, 360)); 3157 } 3158 } 3159 next(); 3160 } 3161 3162 function applyHero(scenario, token, immediate) { 3163 const hero = document.querySelector("[data-live-hero]"); 3164 if (!hero) return; 3165 setChip(hero.querySelector(".hpx-chip-1"), scenario.chips[0], ".hpx-gd"); 3166 setChip(hero.querySelector(".hpx-chip-2"), scenario.chips[1], ".hpx-gd"); 3167 write(hero.querySelector(".hpx-wa-meta .nm"), scenario.hero.agent); 3168 setStatus(hero.querySelector(".hpx-wa-meta .st"), scenario.hero.status); 3169 write(hero.querySelector(".hpx-stat-cap"), scenario.hero.statCap); 3170 write(hero.querySelector(".hpx-stat-big"), scenario.hero.stat); 3171 write(hero.querySelector(".hpx-stat-sub"), scenario.hero.statSub); 3172 write(hero.querySelector(".hpx-crm-lead"), scenario.hero.lead); 3173 write(hero.querySelector(".hpx-crm-stage-lbl b"), scenario.hero.stage); 3174 setBarsLive(Array.from(hero.querySelectorAll(".hpx-crm-stage i")), scenario.hero.stageOn, token, immediate); 3175 fillRows( 3176 hero.querySelector(".hpx-card-crm"), 3177 Array.from(hero.querySelectorAll(".hpx-crm-row")), 3178 scenario.hero.fields, 3179 ".hpx-crm-tx .b", 3180 token, 3181 immediate 3182 ); 3183 write(hero.querySelector(".hpx-crm-foot-tx"), scenario.hero.foot, true); 3184 renderMessages(hero.querySelector("[data-live-hero-messages]"), scenario.hero.messages, "hero", token, immediate); 3185 } 3186 3187 function applyProof(scenario, token, immediate) { 3188 const proof = document.querySelector("[data-live-proof]"); 3189 if (!proof) return; 3190 setChip(proof.querySelector(".chip-a"), scenario.chips[0], "i"); 3191 setChip(proof.querySelector(".chip-b"), scenario.chips[1], "i"); 3192 write(proof.querySelector(".painel-card h3"), scenario.proof.panelTitle); 3193 setBarsLive(Array.from(proof.querySelectorAll(".stage-bars i")), scenario.proof.stageOn, token, immediate); 3194 const fields = Array.from(proof.querySelectorAll(".field")); 3195 fields.forEach((field, i) => { 3196 const data = scenario.proof.fields[i]; 3197 if (!data) return; 3198 write(field.querySelector("small"), data[0]); 3199 }); 3200 fillRows( 3201 proof.querySelector(".painel-card"), 3202 fields, 3203 scenario.proof.fields.map((field) => field[1]), 3204 "b", 3205 token, 3206 immediate 3207 ); 3208 write(proof.querySelector(".metric-card h3"), scenario.proof.metricTitle); 3209 write(proof.querySelector(".metric-big"), scenario.proof.metric); 3210 write(proof.querySelector(".metric-body p"), scenario.proof.metricText, true); 3211 renderMessages(proof.querySelector("[data-live-proof-messages]"), scenario.proof.messages, "proof", token, immediate); 3212 } 3213 3214 function applySales(scenario, token, immediate) { 3215 const sales = document.querySelector("[data-live-sales]"); 3216 if (!sales) return; 3217 Array.from(sales.querySelectorAll(".sales-thread")).forEach((thread, i) => { 3218 const data = scenario.sales.threads[i]; 3219 if (!data) return; 3220 thread.classList.toggle("is-active", !!data[3]); 3221 write(thread.querySelector(".sales-avatar"), data[0]); 3222 write(thread.querySelector(".sales-thread-copy strong"), data[1]); 3223 write(thread.querySelector(".sales-thread-copy span"), data[2]); 3224 }); 3225 write(sales.querySelector(".sales-chat-head strong"), scenario.sales.title); 3226 write(sales.querySelector(".sales-chat-head div span"), scenario.sales.source); 3227 write(sales.querySelector(".sales-chat-head > .sales-pill"), scenario.sales.pill); 3228 renderMessages(sales.querySelector("[data-live-sales-messages]"), scenario.sales.messages, "sales", token, immediate); 3229 3230 const deal = scenario.sales.deal; 3231 write(sales.querySelector(".sales-deal-card h3"), deal[0]); 3232 fillRows( 3233 sales.querySelector(".sales-deal-card"), 3234 Array.from(sales.querySelectorAll(".sales-deal-row")), 3235 [deal[1], deal[2], deal[3]], 3236 "b", 3237 token, 3238 immediate 3239 ); 3240 const progress = sales.querySelector(".sales-progress span"); 3241 if (progress) progress.style.width = deal[4] + "%"; 3242 write(sales.querySelector(".sales-next"), deal[5]); 3243 const floats = Array.from(sales.querySelectorAll(".sales-float-card"));
3244 floats.forEach((card, i) => { 3245 const data = scenario.sales.floats[i]; 3246 if (!data) return; 3247 write(card.querySelector("strong"), data[0]); 3248 write(card.querySelector("span"), data[1]); 3249 }); 3250 } 3251 3252 function applyScenario(nextIndex, immediate) { 3253 clearTimers(); 3254 runId += 1; 3255 const token = runId; 3256 const scenario = scenarios[nextIndex % scenarios.length]; 3257 applyHero(scenario, token, immediate); 3258 applyProof(scenario, token, immediate); 3259 applySales(scenario, token, immediate); 3260 } 3261 3262 function initReveal() { 3263 if (reduce) return; 3264 const selectors = [ 3265 ".section .section-kicker", 3266 ".section .section-head h2", 3267 ".section .section-copy", 3268 ".type-card", 3269 ".interface-stage", 3270 ".flow-stage", 3271 ".flow-vertical .fv-step", 3272 ".proc-step", 3273 ".sales-machine-visual", 3274 ".fd-card", 3275 ".stream-copy h2", 3276 ".stream-copy p", 3277 ".stream-visual", 3278 ".quote-card", 3279 ".mb-item", 3280 ".home-faq .section-kicker", 3281 ".home-faq h2", 3282 ".home-faq .section-copy", 3283 ".faq-item", 3284 ".site-footer .footer-card" 3285 ]; 3286 const seen = new Set(); 3287 const nodes = []; 3288 selectors.forEach((selector) => { 3289 document.querySelectorAll(selector).forEach((node) => { 3290 if (seen.has(node) || node.closest(".hero")) return; 3291 seen.add(node); 3292 nodes.push(node); 3293 }); 3294 }); 3295 if (!nodes.length) return; 3296 3297 const groups = new Map(); 3298 nodes.forEach((node) => { 3299 const group = node.closest("section, footer") || document.body; 3300 const n = groups.get(group) || 0; 3301 groups.set(group, n + 1); 3302 node.style.setProperty("--xv-delay", Math.min(n * .07, .42).toFixed(2) + "s"); 3303 node.classList.add("xv-reveal"); 3304 }); 3305 document.documentElement.classList.add("xv-motion-ready"); 3306 3307 const show = (node) => node.classList.add("xv-visible"); 3308 const revealVisible = () => { 3309 nodes.forEach((node) => { 3310 if (node.classList.contains("xv-visible")) return; 3311 const rect = node.getBoundingClientRect(); 3312 if (rect.top < window.innerHeight * .94 && rect.bottom > -80) show(node); 3313 }); 3314 }; 3315 3316 if ("IntersectionObserver" in window) { 3317 const io = new IntersectionObserver((entries) => { 3318 entries.forEach((entry) => { 3319 if (entry.isIntersecting) { 3320 show(entry.target); 3321 io.unobserve(entry.target); 3322 } 3323 }); 3324 }, { rootMargin: "0px 0px -10% 0px", threshold: .08 }); 3325 nodes.forEach((node) => io.observe(node)); 3326 } else { 3327 nodes.forEach(show); 3328 return; 3329 } 3330 3331 window.addEventListener("scroll", revealVisible, { passive: true }); 3332 window.addEventListener("resize", revealVisible, { passive: true }); 3333 window.setTimeout(revealVisible, 180); 3334 window.setTimeout(revealVisible, 900); 3335 window.setTimeout(() => nodes.forEach(show), 8000); 3336 } 3337 3338 function boot() { 3339 initReveal(); 3340 applyScenario(0, reduce); 3341 if (!reduce) { 3342 window.setInterval(() => { 3343 if (document.hidden) return; 3344 index = (index + 1) % scenarios.length; 3345 applyScenario(index, false); 3346 }, 7600); 3347 } 3348 } 3349 3350 if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", boot, { once: true }); 3351 else boot(); 3352})(); 3353 3354(() => { 3355 /* PROTO-41: "dados -> direção" â fluxo CONTÃNUO de muitas partÃculas subindo 3356 em colunas de altura crescente (tendência), trilho + seta. Sempre animado. */ 3357 const canvas = document.getElementById('textStream'); 3358 if (!canvas) return; 3359 const ctx = canvas.getContext('2d', { alpha: true }); 3360 const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; 3361 const V=[167,139,250], C=[34,211,238], lerp=(a,b,t)=>a+(b-a)*t; 3362 const COLN=10, PER=30; 3363 let cssW=0,cssH=0,DPR=1,cols=[],parts=[],raf=0,running=false,inView=true,T=0,reveal=0; 3364 function resize(){ DPR=Math.min(window.devicePixelRatio||1,2); cssW=canvas.clientWidth||520; cssH=canvas.clientHeight||440; canvas.width=Math.round(cssW*DPR); canvas.height=Math.round(cssH*DPR); ctx.setTransform(DPR,0,0,DPR,0,0); } 3365 function build(){ 3366 cols=[]; parts=[]; 3367 const padX=cssW*0.085, padB=cssH*0.15, padT=cssH*0.12; 3368 const usableW=cssW-padX*2, usableH=cssH-padB-padT, gap=usableW/COLN; 3369 for(let i=0;i<COLN;i++){ 3370 const x=padX+gap*(i+0.5); 3371 const frac=0.22+(i/(COLN-1))*0.78;
3372 const top=cssH-padB-usableH*frac, base=cssH-padB, mix=i/(COLN-1); 3373 cols.push({x, top, base, col:[Math.round(lerp(V[0],C[0],mix)),Math.round(lerp(V[1],C[1],mix)),Math.round(lerp(V[2],C[2],mix))]}); 3374 for(let k=0;k<PER;k++){ 3375 parts.push({c:i, y:base - Math.random()*(base-top), sp:0.35+Math.random()*1.05, sz:Math.random()<0.22?2.3:1.4, jx:(Math.random()-0.5)*gap*0.5, ph:Math.random()*6.2832}); 3376 } 3377 } 3378 } 3379 function frame(){ 3380 T++; reveal=Math.min(1, reveal+0.012); 3381 ctx.clearRect(0,0,cssW,cssH); 3382 const padX=cssW*0.085, padB=cssH*0.15; 3383 // baseline 3384 ctx.globalCompositeOperation='source-over'; 3385 ctx.strokeStyle='rgba(167,139,250,.14)'; ctx.lineWidth=1; 3386 ctx.beginPath(); ctx.moveTo(padX*0.7, cssH-padB+8); ctx.lineTo(cssW-padX*0.4, cssH-padB+8); ctx.stroke(); 3387 // trilho de tendência (linha que passa pelos topos) + seta 3388 ctx.globalCompositeOperation='lighter'; 3389 const pulse=0.7+0.3*Math.sin(T*0.03); 3390 const grad=ctx.createLinearGradient(cols[0].x,0,cols[COLN-1].x,0); 3391 grad.addColorStop(0,'rgba(167,139,250,'+(0.9*pulse)+')'); grad.addColorStop(1,'rgba(34,211,238,'+(0.9*pulse)+')'); 3392 ctx.strokeStyle=grad; ctx.lineWidth=2.4; ctx.lineJoin='round'; ctx.lineCap='round'; 3393 const n=Math.max(2, Math.round(1+(COLN-1)*reveal)); 3394 ctx.beginPath(); ctx.moveTo(cols[0].x, cols[0].top); 3395 for(let i=1;i<n;i++) ctx.lineTo(cols[i].x, cols[i].top); 3396 ctx.stroke(); 3397 if(reveal>0.96){ const a=cols[COLN-1], b=cols[COLN-2]; const ang=Math.atan2(a.top-b.top,a.x-b.x); 3398 ctx.beginPath(); ctx.moveTo(a.x,a.top); 3399 ctx.lineTo(a.x-13*Math.cos(ang-0.5), a.top-13*Math.sin(ang-0.5)); 3400 ctx.moveTo(a.x,a.top); ctx.lineTo(a.x-13*Math.cos(ang+0.5), a.top-13*Math.sin(ang+0.5)); ctx.stroke(); } 3401 // partÃculas subindo em fluxo contÃnuo 3402 for(let i=0;i<parts.length;i++){ const p=parts[i], col=cols[p.c]; 3403 p.y -= p.sp; 3404 if(p.y < col.top){ p.y = col.base; p.jx=(Math.random()-0.5)*((cssW*0.83/COLN)*0.5); } 3405 const x = col.x + p.jx + Math.sin(p.ph + T*0.02)*1.8; 3406 const r=col.col[0],g=col.col[1],b=col.col[2]; 3407 const climb = (col.base - p.y)/Math.max(1,(col.base-col.top)); 3408 const a = (0.45 + 0.5*climb); 3409 ctx.beginPath(); ctx.fillStyle='rgba('+r+','+g+','+b+','+(0.2*a)+')'; ctx.arc(x,p.y,p.sz*2.4,0,6.2832); ctx.fill(); 3410 ctx.beginPath(); ctx.fillStyle='rgba('+Math.min(255,r+45)+','+Math.min(255,g+45)+','+Math.min(255,b+45)+','+a+')'; ctx.arc(x,p.y,p.sz,0,6.2832); ctx.fill(); 3411 } 3412 ctx.globalCompositeOperation='source-over'; raf=requestAnimationFrame(frame); 3413 } 3414 function staticRender(){ resize(); build(); 3415 ctx.clearRect(0,0,cssW,cssH); ctx.globalCompositeOperation='lighter'; 3416 for(const c of cols){ const rows=10; for(let r=0;r<rows;r++){ const y=c.base-(r/rows)*(c.base-c.top); 3417 ctx.beginPath(); ctx.fillStyle='rgba('+c.col[0]+','+c.col[1]+','+c.col[2]+',0.85)'; ctx.arc(c.x,y,1.5,0,6.2832); ctx.fill(); } } 3418 ctx.globalCompositeOperation='source-over'; } 3419 function play(){ if(running||reduce) return; running=true; raf=requestAnimationFrame(frame); } 3420 function pause(){ running=false; if(raf) cancelAnimationFrame(raf); raf=0; } 3421 function upd(){ if(inView && !document.hidden) play(); else pause(); } 3422 let rt=0; function onResize(){ clearTimeout(rt); rt=setTimeout(function(){ if(reduce){staticRender();return;} resize(); build(); reveal=0; },180); } 3423 function go(){ resize(); if(reduce){ staticRender(); window.addEventListener('resize',onResize); return; } 3424 build(); window.addEventListener('resize',onResize); document.addEventListener('visibilitychange',upd); 3425 if('IntersectionObserver' in window){ const io=new IntersectionObserver(function(e){inView=e[0].isIntersecting;upd();},{threshold:0}); io.observe(canvas); } 3426 upd(); 3427 } 3428 if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',go); else go(); 3429})(); 3430</script>
vendor: 1 bytes, line 3430
3430
3431<script> 3432/* PROTO-41: brand wordmark em partÃculas (header) â dots menores, com vida (shimmer) */ 3433(() => { 3434 const canvas = document.getElementById('brandParticles'); 3435 if (!canvas) return; 3436 const ctx = canvas.getContext('2d', { alpha: true }); 3437 const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; 3438 const V=[167,139,250], C=[34,211,238]; 3439 const lerp=(a,b,t)=>a+(b-a)*t; 3440 let cssW=0,cssH=0,DPR=1,pts=[],parts=[],raf=0,running=false,inView=true,T=0; 3441 function resize(){ DPR=Math.min(window.devicePixelRatio||1,2); cssW=canvas.clientWidth||152; cssH=canvas.clientHeight||30; canvas.width=Math.round(cssW*DPR); canvas.height=Math.round(cssH*DPR); ctx.setTransform(DPR,0,0,DPR,0,0); } 3442 function build(){ 3443 const off=document.createElement('canvas'), o=off.getContext('2d'); 3444 const fam="'Sora','Segoe UI',system-ui,sans-serif"; 3445 let fs=120; o.font='800 '+fs+'px '+fam; 3446 let mw=o.measureText('XMACNA').width||1; 3447 fs=Math.max(14, fs*(Math.min(cssW*0.99, 400)/mw)); 3448 o.font='800 '+fs+'px '+fam; 3449 const m=o.measureText('XMACNA'); const asc=m.actualBoundingBoxAscent||fs*0.72, dsc=m.actualBoundingBoxDescent||fs*0.22; 3450 const pad=Math.ceil(fs*0.18); off.width=Math.ceil(m.width)+pad*2; off.height=Math.ceil(asc+dsc)+pad*2; 3451 o.clearRect(0,0,off.width,off.height); o.fillStyle='#fff'; o.textBaseline='alphabetic'; o.font='800 '+fs+'px '+fam; 3452 o.fillText('XMACNA', pad, pad+asc); 3453 const img=o.getImageData(0,0,off.width,off.height).data; pts=[]; 3454 const step=Math.max(2, Math.round(fs/30)); 3455 for(let y=0;y<off.height;y+=step) for(let x=0;x<off.width;x+=step){ if(img[(y*off.width+x)*4+3]>140) pts.push({x:x,y:y}); } 3456 const oxc=off.width/2, oyc=off.height/2, cx=cssW/2, cy=cssH/2; 3457 pts=pts.map(p=>({x:cx+(p.x-oxc), y:cy+(p.y-oyc)})); 3458 } 3459 function initP(){ 3460 build(); 3461 const N=Math.min(820, Math.max(220, pts.length)); 3462 parts=new Array(N); 3463 for(let i=0;i<N;i++){ 3464 const t=pts[i%pts.length], mix=Math.random(); 3465 parts[i]={x:Math.random()*cssW,y:Math.random()*cssH,vx:0,vy:0, 3466 tx:t.x+(Math.random()-0.5)*1.1, ty:t.y+(Math.random()-0.5)*1.1, hx:t.x, 3467 col:[Math.round(lerp(V[0],C[0],mix)),Math.round(lerp(V[1],C[1],mix)),Math.round(lerp(V[2],C[2],mix))], 3468 ease:0.09+Math.random()*0.05, wob:Math.random()*6.28, sz:Math.random()<0.16?0.85:0.6}; 3469 } 3470 } 3471 function frame(){ 3472 T+=1; ctx.clearRect(0,0,cssW,cssH); ctx.globalCompositeOperation='lighter'; 3473 for(let i=0;i<parts.length;i++){ const p=parts[i]; 3474 p.wob+=0.045; 3475 const dx=(p.tx-p.x)+Math.cos(p.wob+i)*0.18, dy=(p.ty-p.y)+Math.sin(p.wob*1.25+i)*0.18; 3476 p.vx=(p.vx+dx*p.ease)*0.74; p.vy=(p.vy+dy*p.ease)*0.74; p.x+=p.vx; p.y+=p.vy; 3477 // shimmer: onda de brilho viajando pela esquerda->direita 3478 const wave=0.5+0.5*Math.sin(p.hx*0.05 - T*0.05); 3479 const r=p.col[0],g=p.col[1],b=p.col[2]; 3480 const a=0.55+0.45*wave; 3481 ctx.beginPath(); ctx.fillStyle='rgba('+r+','+g+','+b+','+(0.22*a)+')'; ctx.arc(p.x,p.y,p.sz*2.0,0,6.2832); ctx.fill(); 3482 ctx.beginPath(); ctx.fillStyle='rgba('+Math.min(255,r+50)+','+Math.min(255,g+50)+','+Math.min(255,b+50)+','+a+')'; ctx.arc(p.x,p.y,p.sz,0,6.2832); ctx.fill(); 3483 } 3484 ctx.globalCompositeOperation='source-over'; raf=requestAnimationFrame(frame); 3485 } 3486 function staticRender(){ resize(); build(); ctx.clearRect(0,0,cssW,cssH); ctx.globalCompositeOperation='lighter'; 3487 for(let i=0;i<pts.length;i++){ const p=pts[i], mix=(p.x%50)/50; 3488 ctx.beginPath(); ctx.fillStyle='rgba('+Math.round(lerp(V[0],C[0],mix))+','+Math.round(lerp(V[1],C[1],mix))+','+Math.round(lerp(V[2],C[2],mix))+',0.92)'; ctx.arc(p.x,p.y,0.85,0,6.2832); ctx.fill(); } 3489 ctx.globalCompositeOperation='source-over'; } 3490 function play(){ if(running||reduce) return; running=true; raf=requestAnimationFrame(frame); } 3491 function pause(){ running=false; if(raf) cancelAnimationFrame(raf); raf=0; } 3492 function upd(){ if(inView && !document.hidden) play(); else pause(); } 3493 let rt=0; function onResize(){ clearTimeout(rt); rt=setTimeout(function(){ if(reduce){staticRender();return;} resize(); initP(); },180); } 3494 function go(){ resize(); if(reduce){ staticRender(); window.addEventListener('resize',onResize); return; } 3495 initP(); window.addEventListener('resize',onResize); document.addEventListener('visibilitychange',upd); 3496 if('IntersectionObserver' in window){ const io=new IntersectionObserver(function(e){inView=e[0].isIntersecting;upd();},{threshold:0}); io.observe(canvas); } 3497 upd(); 3498 } 3499 function boot(){ let s=false; const g=function(){if(!s){s=true;go();}}; 3500 if(document.fonts&&document.fonts.ready){ const l=document.fonts.load("800 120px 'Sora'").catch(function(){}); Promise.race([document.fonts.ready.then(function(){return l;}), new Promise(function(r){setTimeout(r,2000);})]).then(g).catch(g);} else g(); 3501 setTimeout(g,2200); 3502 } 3503 if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',boot); else boot(); 3504})(); 3505</script>
vendor: 1 bytes, line 3505
3505
3506<script> 3507/* === parallax #08 === */ 3508/* Cards UI Parallax â IIFE self-contained. 3509 Liga o tilt 3D do hero ao ponteiro, posiciona o sheen dos cards e dá 3510 drift de profundidade nas orbs. Guard prefers-reduced-motion + cleanup. 3511 Sem globais externos. Idempotente (nao religa o mesmo .hero-parallax). */ 3512(function () { 3513 'use strict'; 3514 3515 function initOne(root) { 3516 if (!root || root.__hpxParallax) return; 3517 3518 var stage = root.querySelector('[data-hpx-stage]') || root.querySelector('.hpx-stage'); 3519 if (!stage) return; 3520 3521 var cards = Array.prototype.slice.call(root.querySelectorAll('.hpx-card')); 3522 var orbs = Array.prototype.slice.call(root.querySelectorAll('.hpx-orb')); 3523 3524 var reduceMQ = window.matchMedia('(prefers-reduced-motion: reduce)'); 3525 var fineMQ = window.matchMedia('(pointer: fine)'); 3526 3527 var tx = 0, ty = 0, cx = 0, cy = 0, raf = null; 3528 var ease = 0.09; 3529 var active = false; 3530 var listeners = []; 3531 3532 function applyStatic() { 3533 stage.style.transform = ''; 3534 cards.forEach(function (c) { 3535 c.style.removeProperty('--mx'); 3536 c.style.removeProperty('--my'); 3537 }); 3538 orbs.forEach(function (o) { o.style.transform = ''; }); 3539 } 3540 3541 function loop() { 3542 cx += (tx - cx) * ease; 3543 cy += (ty - cy) * ease; 3544 3545 // Tilt do stage (a perspectiva esta no .hero-parallax pai) 3546 stage.style.transform = 'rotateY(' + (cx * 12) + 'deg) rotateX(' + (-cy * 10) + 'deg) translateZ(0)'; 3547 3548 // Posicao do sheen nos cards de vidro 3549 var mx = (50 + cx * 50) + '%'; 3550 var my = (50 + cy * 50) + '%'; 3551 for (var i = 0; i < cards.length; i++) { 3552 cards[i].style.setProperty('--mx', mx); 3553 cards[i].style.setProperty('--my', my); 3554 } 3555 3556 // Drift das orbs (oposto ao ponteiro, por profundidade) -> reforca o paralaxe 3557 for (var j = 0; j < orbs.length; j++) { 3558 var d = parseFloat(orbs[j].getAttribute('data-depth')) || 0.02; 3559 orbs[j].style.transform = 'translate(' + (-cx * 600 * d) + 'px, ' + (-cy * 600 * d) + 'px)'; 3560 } 3561 3562 if (Math.abs(tx - cx) > 0.0005 || Math.abs(ty - cy) > 0.0005) { 3563 raf = requestAnimationFrame(loop); 3564 } else { 3565 raf = null; 3566 } 3567 } 3568 3569 function kick() { if (raf == null) raf = requestAnimationFrame(loop); } 3570 3571 function onMove(e) { 3572 tx = (e.clientX / window.innerWidth) - 0.5; 3573 ty = (e.clientY / window.innerHeight) - 0.5; 3574 kick(); 3575 } 3576 function onLeave() { tx = 0; ty = 0; kick(); } 3577 3578 function bind() { 3579 if (active) return; 3580 active = true; 3581 window.addEventListener('pointermove', onMove, { passive: true }); 3582 window.addEventListener('pointerleave', onLeave, { passive: true }); 3583 listeners.push(['pointermove', onMove], ['pointerleave', onLeave]); 3584 } 3585 function unbind() { 3586 if (!active) return; 3587 active = false; 3588 window.removeEventListener('pointermove', onMove); 3589 window.removeEventListener('pointerleave', onLeave); 3590 listeners.length = 0; 3591 if (raf != null) { cancelAnimationFrame(raf); raf = null; } 3592 tx = ty = cx = cy = 0; 3593 applyStatic(); 3594 } 3595 3596 // Pausa o loop quando o hero sai da tela (perf) 3597 var io = null; 3598 if ('IntersectionObserver' in window) { 3599 io = new IntersectionObserver(function (entries) { 3600 for (var k = 0; k < entries.length; k++) { 3601 if (entries[k].isIntersecting) evaluate(); 3602 else unbind(); 3603 } 3604 }, { threshold: 0.05 }); 3605 io.observe(root); 3606 } 3607 3608 function visHandler() { 3609 if (document.hidden) unbind(); 3610 else evaluate(); 3611 } 3612 document.addEventListener('visibilitychange', visHandler); 3613 3614 // Decide se deve estar ativo: motion permitido + ponteiro fino + visivel 3615 function evaluate() { 3616 if (reduceMQ.matches || !fineMQ.matches || document.hidden) { 3617 unbind(); 3618 applyStatic(); 3619 } else { 3620 bind(); 3621 kick(); 3622 } 3623 } 3624 3625 // Reage a mudancas de preferencia/ponteiro em runtime 3626 function onMQChange() { evaluate(); } 3627 function addMQ(mq, fn) { 3628 if (mq.addEventListener) { mq.addEventListener('change', fn); } 3629 else if (mq.addListener) { mq.addListener(fn); } 3630 } 3631 function removeMQ(mq, fn) { 3632 if (mq.removeEventListener) { mq.removeEventListener('change', fn); } 3633 else if (mq.removeListener) { mq.removeListener(fn); } 3634 }
3635 addMQ(reduceMQ, onMQChange); 3636 addMQ(fineMQ, onMQChange); 3637 3638 // API de cleanup exposta no elemento (chamavel em SPA teardown) 3639 root.__hpxParallax = { 3640 destroy: function () { 3641 unbind(); 3642 if (io) { io.disconnect(); io = null; } 3643 document.removeEventListener('visibilitychange', visHandler); 3644 removeMQ(reduceMQ, onMQChange); 3645 removeMQ(fineMQ, onMQChange); 3646 delete root.__hpxParallax; 3647 } 3648 }; 3649 3650 evaluate(); 3651 } 3652 3653 function initAll() { 3654 var roots = document.querySelectorAll('.hero-parallax'); 3655 for (var i = 0; i < roots.length; i++) initOne(roots[i]); 3656 } 3657 3658 if (document.readyState === 'loading') { 3659 document.addEventListener('DOMContentLoaded', initAll, { once: true }); 3660 } else { 3661 initAll(); 3662 } 3663})(); 3664</script>
vendor: 1 bytes, line 3664
3664
3665<script> 3666/* nav dropdown */ 3667(() => { 3668 const drops = Array.prototype.slice.call(document.querySelectorAll('.nav-drop[data-drop]')); 3669 if (!drops.length) return; 3670 3671 function close(drop) { 3672 if (!drop.hasAttribute('data-open')) return; 3673 drop.removeAttribute('data-open'); 3674 const btn = drop.querySelector('.nav-drop-btn'); 3675 if (btn) btn.setAttribute('aria-expanded', 'false'); 3676 } 3677 function open(drop) { 3678 drops.forEach((d) => { if (d !== drop) close(d); }); 3679 drop.setAttribute('data-open', ''); 3680 const btn = drop.querySelector('.nav-drop-btn'); 3681 if (btn) btn.setAttribute('aria-expanded', 'true'); 3682 } 3683 function toggle(drop) { 3684 if (drop.hasAttribute('data-open')) close(drop); else open(drop); 3685 } 3686 3687 drops.forEach((drop) => { 3688 const btn = drop.querySelector('.nav-drop-btn'); 3689 const menu = drop.querySelector('.nav-menu'); 3690 if (!btn || !menu) return; 3691 3692 btn.addEventListener('click', (e) => { e.stopPropagation(); toggle(drop); }); 3693 3694 // Hover (pointer devices): open on enter, close on leave with grace 3695 let leaveTimer = null; 3696 drop.addEventListener('pointerenter', (e) => { 3697 if (e.pointerType === 'touch') return; 3698 if (leaveTimer) { clearTimeout(leaveTimer); leaveTimer = null; } 3699 open(drop); 3700 }); 3701 drop.addEventListener('pointerleave', (e) => { 3702 if (e.pointerType === 'touch') return; 3703 leaveTimer = setTimeout(() => close(drop), 140); 3704 }); 3705 3706 // Keyboard: open with ArrowDown, focus first item; close on Escape 3707 btn.addEventListener('keydown', (e) => { 3708 if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') { 3709 e.preventDefault(); open(drop); 3710 const first = menu.querySelector('a'); 3711 if (first) first.focus(); 3712 } else if (e.key === 'Escape') { 3713 close(drop); 3714 } 3715 }); 3716 menu.addEventListener('keydown', (e) => { 3717 const items = Array.prototype.slice.call(menu.querySelectorAll('a')); 3718 const idx = items.indexOf(document.activeElement); 3719 if (e.key === 'Escape') { 3720 close(drop); btn.focus(); 3721 } else if (e.key === 'ArrowDown') { 3722 e.preventDefault(); 3723 (items[idx + 1] || items[0]).focus(); 3724 } else if (e.key === 'ArrowUp') { 3725 e.preventDefault(); 3726 (items[idx - 1] || items[items.length - 1]).focus(); 3727 } else if (e.key === 'Tab') { 3728 // let focus leave naturally, then close 3729 setTimeout(() => { if (!drop.contains(document.activeElement)) close(drop); }, 0); 3730 } 3731 }); 3732 }); 3733 3734 // Click outside closes any open dropdown 3735 document.addEventListener('click', (e) => { 3736 drops.forEach((drop) => { if (!drop.contains(e.target)) close(drop); }); 3737 }); 3738 // Global Escape 3739 document.addEventListener('keydown', (e) => { 3740 if (e.key === 'Escape') drops.forEach(close); 3741 }); 3742})(); 3743 3744/* mobile burger (EST-02): disclosure button toggling .nav-links as a full-width panel */ 3745(() => { 3746 const nav = document.querySelector('header.nav'); 3747 const burger = nav && nav.querySelector('.nav-burger'); 3748 if (!nav || !burger) return; 3749 3750 function setOpen(open) { 3751 if (open) nav.setAttribute('data-nav-open', ''); 3752 else nav.removeAttribute('data-nav-open'); 3753 burger.setAttribute('aria-expanded', open ? 'true' : 'false'); 3754 burger.setAttribute('aria-label', open ? "Close menu" : "Open menu"); 3755 } 3756 3757 burger.addEventListener('click', (e) => { 3758 e.stopPropagation(); 3759 setOpen(!nav.hasAttribute('data-nav-open')); 3760 }); 3761 // choosing a link closes the panel 3762 nav.addEventListener('click', (e) => { 3763 if (e.target && e.target.closest && e.target.closest('.nav-links a')) setOpen(false); 3764 }); 3765 // click outside closes 3766 document.addEventListener('click', (e) => { 3767 if (nav.hasAttribute('data-nav-open') && !nav.contains(e.target)) setOpen(false); 3768 }); 3769 // Escape closes and returns focus to the button 3770 document.addEventListener('keydown', (e) => { 3771 if (e.key === 'Escape' && nav.hasAttribute('data-nav-open')) { setOpen(false); burger.focus(); } 3772 }); 3773})(); 3774</script>
vendor: 1 bytes, line 3774
3774
3775<script> 3776(function () { 3777 var bar = document.getElementById('waSticky'); 3778 if (!bar || !('IntersectionObserver' in window)) return; 3779 var hero = document.getElementById('top'); 3780 var foot = document.getElementById('contato'); 3781 var pastHero = false, footVis = false; 3782 function upd() { 3783 var on = pastHero && !footVis; 3784 bar.classList.toggle('on', on); 3785 bar.setAttribute('aria-hidden', on ? 'false' : 'true'); 3786 } 3787 if (hero) new IntersectionObserver(function (es) { 3788 es.forEach(function (e) { pastHero = !e.isIntersecting; }); 3789 upd(); 3790 }).observe(hero); 3791 if (foot) new IntersectionObserver(function (es) { 3792 es.forEach(function (e) { footVis = e.isIntersecting; }); 3793 upd(); 3794 }).observe(foot); 3795})(); 3796</script>
3796 3797</body> 3798</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.