/* ===== v9 · movimento e profundidade (mockup) ===== */
/* Hero: foto viva, luz que varre a placa, blocos flutuantes em camadas e partículas */
.hero-photo img{transform-origin:60% 40%;will-change:transform;animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{scale:1.03}to{scale:1.12}}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(255,196,120,.20) 50%,transparent 62%);transform:translateX(-130%);animation:sweep 10s ease-in-out infinite}
@keyframes sweep{55%,100%{transform:translateX(130%)}}
.hero-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-depth{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fb{position:absolute;display:block;border-radius:28%;background:linear-gradient(135deg,rgba(62,193,143,.40),rgba(62,193,143,.05));border:1px solid rgba(62,193,143,.42);backdrop-filter:blur(5px);box-shadow:0 24px 50px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.25);will-change:transform}
.fb:before{content:"";position:absolute;inset:0;border-radius:inherit;animation:float 7s ease-in-out infinite}
.fb.b1{width:74px;height:74px;right:3%;top:17%}
.fb.b2{width:40px;height:40px;left:47%;top:15%;background:linear-gradient(135deg,rgba(255,138,0,.55),rgba(255,138,0,.06));border-color:rgba(255,138,0,.5)}
.fb.b3{width:112px;height:112px;right:1%;top:56%;opacity:.55;filter:blur(2px)}
.fb.b4{width:58px;height:58px;left:41%;bottom:17%;opacity:.8;filter:blur(1px)}
.fb.b5{width:30px;height:30px;right:31%;bottom:9%;background:linear-gradient(135deg,rgba(255,138,0,.55),rgba(255,138,0,.06));border-color:rgba(255,138,0,.5)}
.hero-copy{will-change:transform}
/* Introdução: esfera + módulos conectados (textos da introdução) */
.intro-in{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.mods{position:relative;min-height:640px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.mods-ln{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mods-ln path{fill:none;stroke:rgba(23,132,104,.38);stroke-width:1.6;vector-effect:non-scaling-stroke}
.mods-ln path.pl{stroke:var(--or);stroke-width:3.4;stroke-linecap:round;stroke-dasharray:5 95;animation:pls 3.2s linear infinite}
@keyframes pls{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
.mod{position:relative;width:72%;align-self:center;padding:20px 20px 18px;border-radius:22px;background:var(--bg);border:1px solid var(--line);box-shadow:0 20px 36px -22px rgba(4,38,31,.4);color:var(--muted);font-size:14.5px;line-height:1.5;transition:transform .4s var(--ease),box-shadow .4s}
.mod:hover{transform:translateY(-6px);box-shadow:0 30px 46px -22px rgba(4,38,31,.5)}
.mod.m1,.mod.m3{justify-self:start}.mod.m2,.mod.m4{justify-self:end}
.mod b{display:block;color:var(--ink);font-size:19px;letter-spacing:-.02em;margin:12px 0 6px}
.mod .blk,.big.blk{display:grid;place-items:center;border-radius:14px;box-shadow:0 12px 22px rgba(6,66,54,.22),inset 0 2px 0 rgba(255,255,255,.4)}
.mod .blk{width:44px;height:44px;animation:float 7s ease-in-out infinite}.mod .blk svg{width:22px;height:22px;color:#fff}
.mod.m2 .blk{animation-delay:-2s}.mod.m3 .blk{animation-delay:-4s}.mod.m4 .blk{animation-delay:-5s}
.nub{position:absolute;width:13px;height:13px;border-radius:50%;background:var(--or);box-shadow:0 0 0 5px rgba(255,138,0,.18)}
.m1 .nub{right:-7px;bottom:-7px}.m2 .nub{left:-7px;bottom:-7px}.m3 .nub{right:-7px;top:-7px}.m4 .nub{left:-7px;top:-7px}
.core{position:absolute;left:50%;top:50%;width:132px;height:132px;translate:-50% -50%;display:grid;place-items:center;z-index:2}
.core .disc{position:relative;display:grid;place-items:center;width:104px;height:104px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#2fae84,#064236 60%,#021a15);box-shadow:0 22px 44px -10px rgba(4,38,31,.65),inset 0 2px 0 rgba(255,255,255,.25),0 0 0 6px #fff,0 0 0 7px rgba(23,132,104,.25)}
.core .disc svg{width:58px;height:58px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));animation:float 6s ease-in-out infinite}
.core .ring{position:absolute;border-radius:50%;border:1px dashed rgba(23,132,104,.5);animation:spinslow 40s linear infinite}
.core .r1{inset:-6px}.core .r2{inset:-14px;border-color:rgba(255,138,0,.4);animation-direction:reverse;animation-duration:55s}
.core .r2:after{content:"";position:absolute;width:11px;height:11px;border-radius:50%;background:var(--or);left:50%;top:-6px;box-shadow:0 0 14px var(--or)}
.core .halo{position:absolute;inset:-70px;border-radius:50%;background:radial-gradient(closest-side,rgba(62,193,143,.28),transparent);animation:breathe 5s ease-in-out infinite}
@keyframes breathe{50%{scale:1.14;opacity:.7}}
/* Produtos: módulo em destaque, sem telas */
.mod-art{min-height:430px;display:grid;place-items:center}
.mod-art:after{content:"";position:absolute;inset:6% 8%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(62,193,143,.20),transparent);filter:blur(6px)}
.mod-art .big{position:relative;z-index:2;width:158px;height:158px;border-radius:38px;box-shadow:0 36px 60px -18px rgba(6,66,54,.55),inset 0 3px 0 rgba(255,255,255,.45),inset 0 -8px 14px rgba(0,0,0,.15);animation:float 7s ease-in-out infinite;transform:translate3d(0,calc((.5 - var(--p,.5)) * -46px),0) rotate(calc((var(--p,.5) - .5) * 18deg))}
.mod-art .big svg{width:70px;height:70px;color:#fff;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.orbit{position:absolute;left:50%;top:50%;border-radius:50%;border:1px dashed rgba(23,132,104,.32);translate:-50% -50%;animation:spinslow 50s linear infinite}
.orbit.o1{width:320px;height:320px}.orbit.o2{width:470px;height:470px;border-color:rgba(255,138,0,.3);animation-direction:reverse;animation-duration:70s}
.orbit.o1:after,.orbit.o2:after{content:"";position:absolute;width:11px;height:11px;border-radius:50%;background:var(--g4);top:-6px;left:50%;box-shadow:0 0 12px var(--g4)}
.orbit.o2:after{background:var(--or);box-shadow:0 0 12px var(--or);top:auto;bottom:-6px}
.mini{position:absolute;border-radius:28%;background:linear-gradient(135deg,#52dca8,#17936c);opacity:.28;animation:float 8s ease-in-out infinite}
.mini.a{width:54px;height:54px;left:8%;top:6%}.mini.b{width:38px;height:38px;right:10%;bottom:4%;background:linear-gradient(135deg,#ffa51f,#ff6f00);animation-delay:-3s}
.prod-art:before{display:none}
@media (max-width:1180px){.mods{min-height:600px}.mod{width:78%}}
@media (max-width:760px){
  .intro-in{grid-template-columns:1fr}.mods{min-height:0;grid-template-columns:1fr;grid-template-rows:none;gap:18px;padding-top:190px}
  .mods-ln{display:none}.core{top:80px}.mod{width:100%!important;justify-self:stretch!important}.nub{display:none}
  .mods:before{content:"";position:absolute;left:50%;top:150px;bottom:20px;border-left:1px dashed rgba(23,132,104,.4)}
  .mod-art{min-height:340px}.orbit.o2{display:none}.orbit.o1{width:270px;height:270px}.mod-art .big{width:120px;height:120px;border-radius:30px}.mod-art .big svg{width:54px;height:54px}
  .fb.b3,.fb.b4{display:none}
}
@media (prefers-reduced-motion:reduce){.hero-photo img,.hero-photo::after,.core .ring,.orbit,.mods-ln path.pl,.core .halo,.mini{animation:none}}
/* ===== Como funciona: hub holográfico conectado ===== */
.how{position:relative;overflow:hidden;background:radial-gradient(60% 50% at 50% 28%,rgba(23,132,104,.38),transparent 70%),linear-gradient(180deg,#021611,#04261f);color:#fff}
.how:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(62,193,143,.18) 1px,transparent 1px);background-size:30px 30px;-webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent);mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent)}
.how .wrap{position:relative}.how h2{color:#fff}.how .sec-head{margin-bottom:10px}
.flow{position:relative;max-width:1080px;margin:0 auto;padding-bottom:6px}
.hubx{position:relative;width:min(400px,86vw);aspect-ratio:1;margin:0 auto}
.hubx .glow{position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(closest-side,rgba(62,193,143,.38),transparent);animation:breathe 6s ease-in-out infinite}
.rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rings circle{fill:none;transform-box:fill-box;transform-origin:center}
.rings .d{stroke:rgba(62,193,143,.5);stroke-width:1;stroke-dasharray:2 7}.rings .s{stroke:rgba(143,240,200,.35);stroke-width:1.2;stroke-dasharray:140 60;stroke-linecap:round}
.rings .d2{stroke:rgba(255,138,0,.45);stroke-width:1.2;stroke-dasharray:30 14}.rings .s2{stroke:rgba(62,193,143,.6);stroke-width:2;stroke-dasharray:90 40;filter:drop-shadow(0 0 6px #3ec18f)}
.rings .g1{transform-box:view-box;transform-origin:200px 200px;animation:spinslow 60s linear infinite}
.rings .g2{transform-box:view-box;transform-origin:200px 200px;animation:spinslow 36s linear infinite reverse}
.rings .sp line{stroke:rgba(62,193,143,.38);stroke-width:1}
.node{position:absolute;display:grid;place-items:center;width:48px;height:48px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(4,38,31,.85);border:1.5px solid rgba(62,193,143,.7);box-shadow:0 0 22px rgba(62,193,143,.45),inset 0 0 12px rgba(62,193,143,.25);animation:float 6s ease-in-out infinite;animation-delay:calc(var(--i) * -1.1s)}
.node svg{width:22px;height:22px;color:var(--g4)}
.node.or{border-color:rgba(255,138,0,.75);box-shadow:0 0 22px rgba(255,138,0,.45),inset 0 0 12px rgba(255,138,0,.2)}.node.or svg{color:var(--or)}
.coreb{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;translate:-50% -50%;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 28%,rgba(47,174,132,.55),rgba(4,38,31,.95) 70%);border:2px solid #8ff0c8;box-shadow:0 0 40px rgba(62,193,143,.7),0 0 90px rgba(62,193,143,.35),inset 0 0 28px rgba(62,193,143,.5)}
.coreb svg{width:56%;height:56%;filter:drop-shadow(0 0 12px rgba(62,193,143,.9));animation:float 5s ease-in-out infinite}
.flow-ln{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.flow-ln path{fill:none;stroke:rgba(62,193,143,.45);stroke-width:1.4;vector-effect:non-scaling-stroke}
.flow-ln path.pl{stroke:var(--or);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:5 95;animation:pls 3.2s linear infinite}
.steps2{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;position:relative}
.steps2 li{position:relative;padding:26px 24px 24px;border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(14px);box-shadow:0 30px 60px -20px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.22);color:#b9d6ca;font-size:15px;line-height:1.55}
.steps2 li:nth-child(2){translate:0 26px}
.steps2 h3{color:#fff;font-size:20px;letter-spacing:-.02em;margin:16px 0 8px}
.steps2 p{margin:0;color:#b9d6ca}
.steps2 .num{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(145deg,#ffa51f,#ff6f00);font-weight:800;color:#fff;box-shadow:0 12px 22px rgba(255,111,0,.35),inset 0 2px 0 rgba(255,255,255,.4);animation:float 7s ease-in-out infinite}
.steps2 li:before{content:"";position:absolute;left:50%;top:-7px;width:13px;height:13px;margin-left:-6px;border-radius:50%;background:var(--or);box-shadow:0 0 0 5px rgba(255,138,0,.2)}
.steps2 li[data-p]{transform:translate3d(0,calc((.5 - var(--p,.5)) * var(--s,30) * 1px),0)}
@media (max-width:760px){.flow-ln{display:none}.steps2{grid-template-columns:1fr;margin-top:-10px;gap:20px}.steps2 li:nth-child(2){translate:0 0}.node{width:38px;height:38px}.node svg{width:18px;height:18px}
 .flow:before{content:"";position:absolute;left:50%;top:60%;bottom:30px;border-left:1px dashed rgba(62,193,143,.4)}}
@media (prefers-reduced-motion:reduce){.rings .g1,.rings .g2,.node,.hubx .glow,.steps2 .num{animation:none}}
/* ===== Contato: frase de impacto + rede conectada ===== */
.ct-h{font-size:clamp(34px,4.4vw,58px);line-height:1.04;letter-spacing:-.04em}
.ct-h .grad{background:linear-gradient(90deg,var(--g7),#2fae84 40%,var(--or));-webkit-background-clip:text;background-clip:text;color:transparent}
.contact-art.net{position:relative;padding:0;max-width:370px;margin-right:6px}
.net .blk{display:none}
.net-ln{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.net-ln path{fill:none;stroke:rgba(143,240,200,.6);stroke-width:1.4;vector-effect:non-scaling-stroke}
.net-ln path.pl{stroke:var(--or);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:5 95;animation:pls 3.2s linear infinite}
.nhub{position:absolute;z-index:3;left:50%;top:50%;width:84px;height:84px;translate:-50% -50%;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 28%,#2fae84,#064236 65%,#021a15);border:2px solid #8ff0c8;box-shadow:0 0 34px rgba(62,193,143,.75),0 0 0 8px rgba(62,193,143,.15)}
.nhub svg{width:46px;height:46px;animation:float 5s ease-in-out infinite}
.nbr{position:absolute;z-index:3;display:grid;place-items:center;width:62px;height:62px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 18px 34px -8px rgba(0,0,0,.5),0 0 0 4px rgba(255,255,255,.18);animation:float 7s ease-in-out infinite}
.nbr img{width:36px;height:36px;object-fit:contain}
.n1{left:17%;top:20%}.n2{left:85%;top:28%;animation-delay:-2s}.n3{left:15%;top:68%;animation-delay:-4s}.n4{left:84%;top:72%;animation-delay:-5.5s}
.nchip{position:absolute;z-index:4;left:50%;bottom:5%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:14px;background:rgba(4,38,31,.82);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:13px;white-space:nowrap;box-shadow:0 20px 40px -12px rgba(0,0,0,.6);animation:float 8s ease-in-out infinite}
.nchip b{font-size:13.5px}.nchip small{display:none}
.nchip .dot{width:9px;height:9px;border-radius:50%;background:#25d366;box-shadow:0 0 10px #25d366}
@media (max-width:560px){.nbr{width:50px;height:50px}.nbr img{width:28px;height:28px}.nhub{width:66px;height:66px}.nhub svg{width:36px;height:36px}.nchip{font-size:12px}}
/* divisor de conexão (substitui o letreiro) */
.wave{position:relative;height:210px;margin:-24px 0 -30px;pointer-events:none}
.wave canvas{width:100%;height:100%;display:block}
@media (max-width:760px){.wave{height:150px;margin:-10px 0 -20px}}
/* ===== História: painel de vidro, texto digitado e cenas ===== */
.intro-in{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.sg{align-self:center;position:relative;overflow:hidden;border-radius:28px;padding:14px;background:linear-gradient(160deg,#0b5444,#04261f);box-shadow:0 40px 60px -30px rgba(4,38,31,.7)}
.sg-blob{position:absolute;border-radius:50%;filter:blur(34px);opacity:.9;animation:float 9s ease-in-out infinite}
.sg-blob.b1{width:230px;height:230px;left:-60px;top:-40px;background:#3ec18f}
.sg-blob.b2{width:210px;height:210px;right:-50px;bottom:60px;background:#ff8a00;opacity:.6;animation-delay:-4s}
.sg-in{position:relative;padding:20px 22px 18px;border-radius:20px;background:rgba(255,255,255,.07);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.act{margin:0 0 10px}.act:not(:first-child){margin-top:8px}
.sgt.hj,.sgt.am{display:inline-block;padding:5px 14px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;opacity:0;transform:translateY(8px);transition:.5s}
.sgt.hj{color:#ffc27a;border-color:rgba(255,178,94,.55)}.sgt.am{color:#8ff0c8;border-color:rgba(143,240,200,.55)}
.act.show .sgt{opacity:1;transform:none}
.story .tl,.story .answer{position:relative;margin:0 0 4px;font-size:clamp(19px,1.8vw,25px);font-weight:800;letter-spacing:-.03em;line-height:1.16;color:#fff}
.story .tl.bad{color:#ffb25e}
.story .answer{margin-top:4px;font-size:clamp(18px,1.7vw,23px);color:#fff}
.tl .ghost{visibility:hidden}.tl .live{position:absolute;inset:0}
.tl.typing .live:after{content:"";display:inline-block;width:3px;height:.95em;margin-left:3px;vertical-align:-.1em;background:var(--g4);animation:blink .8s steps(1) infinite}
.tl.bad.typing .live:after{background:#ffb25e}
@keyframes blink{50%{opacity:0}}
.scene{height:104px;margin:2px 0 0}.scene svg{width:100%;height:100%;overflow:visible}
.scene.amanha{height:116px}
/* cena: cliente vai embora */
.scene .wait{opacity:0}.scene.hoje.go .wait{animation:waitb 1.6s ease forwards}
@keyframes waitb{0%{opacity:0;transform:translateY(6px)}15%,70%{opacity:1;transform:none}100%{opacity:0}}
.scene .wait .d1,.scene .wait .d2,.scene .wait .d3{animation:dots 1s infinite}.scene .wait .d2{animation-delay:.2s}.scene .wait .d3{animation-delay:.4s}
@keyframes dots{50%{opacity:.25}}
.scene .walker{opacity:0}
.scene.hoje.go .walker{animation:walk 3.6s cubic-bezier(.4,0,.6,1) 1.2s forwards}
@keyframes walk{0%{opacity:1;transform:translate(40px,6px)}8%{opacity:1;transform:translate(40px,6px)}85%{opacity:1}100%{opacity:0;transform:translate(300px,6px)}}
.scene.hoje:not(.go) .walker{opacity:1}
.walker .leg{transform-box:fill-box;transform-origin:50% 0}
.scene.hoje.go .walker .l1{animation:leg .55s ease-in-out 1.6s infinite alternate}.scene.hoje.go .walker .l2{animation:leg .55s ease-in-out 1.6s infinite alternate-reverse}
@keyframes leg{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
/* cena: cliente feliz + gráfico subindo */
.scene.amanha .chart,.scene.amanha .hop,.scene.amanha .conf{opacity:0}.scene.amanha .sale{opacity:0}
.scene.amanha.go .chart,.scene.amanha.go .hop,.scene.amanha.go .conf{opacity:1;transition:opacity .6s}
.scene.amanha .bx{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.04)}
.scene.amanha.go .bx{animation:grow .9s cubic-bezier(.2,.8,.2,1) forwards}
.scene.amanha.go .b2{animation-delay:.15s}.scene.amanha.go .b3{animation-delay:.3s}.scene.amanha.go .b4{animation-delay:.45s}.scene.amanha.go .b5{animation-delay:.6s}
@keyframes grow{to{transform:scaleY(1)}}
.scene.amanha .arrow{stroke-dasharray:100;stroke-dashoffset:100}.scene.amanha .ahead{opacity:0}
.scene.amanha.go .arrow{animation:draw 1.1s ease .7s forwards}.scene.amanha.go .ahead{animation:show .2s ease 1.7s forwards}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes show{to{opacity:1}}
.scene.amanha.go .sale{animation:pop .6s cubic-bezier(.3,1.6,.5,1) 1.9s forwards}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.7)}to{opacity:1;transform:none}}
.scene.amanha.go .hop{animation:hop 1s ease-in-out .4s infinite alternate}
@keyframes hop{to{transform:translate(22px,6px)}}
.scene.amanha.go .hop{animation:none}.scene.amanha.go .hop .p{animation:jump .9s ease-in-out infinite alternate}
@keyframes jump{from{transform:translateY(0)}to{transform:translateY(-9px)}}
.intro-in .story.rv{opacity:1;transform:none}
@media (max-width:760px){.intro-in{grid-template-columns:1fr}.sg-in{padding:20px 16px 20px}.scene{height:110px}.scene.amanha{height:125px}}
@media (prefers-reduced-motion:reduce){.scene .walker{opacity:1!important;animation:none!important}.scene.amanha .bx{transform:none}.scene.amanha .arrow{stroke-dashoffset:0}.scene.amanha .ahead,.scene.amanha .sale,.scene.amanha .chart,.scene.amanha .hop,.scene.amanha .conf{opacity:1}.sgt.hj,.sgt.am{opacity:1;transform:none}.sg-blob,.scene *{animation:none!important}}

/* leveza: pausa tudo fora da tela; transição suave entre ciclos */
.sg.off *,.sg.off{animation-play-state:paused!important}
.sg-in{transition:opacity .7s ease}.sg-in.fade{opacity:0}
.sg-blob{will-change:auto}