PageSourceSearch

https://xmacna.ai/en/about

html xmacna.ai collected 2026-10-05 13:23:12 UTC 159,431 bytes, 3,798 lines download raw bytes

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&amp;family=JetBrains+Mono:wght@400;500;600;700&amp;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&amp;family=JetBrains+Mono:wght@400;500;600;700&amp;display=swap" />
16<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@200;300;400;500;600;700;800&amp;family=JetBrains+Mono:wght@400;500;600;700&amp;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 &amp; 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 &amp; 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.