/* Objetos de apoio: o mesmo acabamento escuro, metal e luz ciano do hero. */
.service-symbol,.flow-icon{--object-face:#65ddef;--object-edge:#0e637b;--object-ink:#d6faff;position:relative;isolation:isolate;overflow:visible}
.services-section .service-symbol{width:66px;height:66px;margin-bottom:25px;border:1px solid #8cd5e65e;border-radius:17px;background:linear-gradient(135deg,#304c5d 0%,#102632 45%,#08161e 100%);color:var(--object-ink);box-shadow:inset 1px 1px 1px #d3faff40,inset -2px -2px 3px #02080f80,3px 4px 0 #041018,4px 5px 0 #294653,0 14px 25px #0005;transform:perspective(300px) rotateY(-13deg) rotateX(8deg);transition:transform .35s ease,border-color .35s ease}
.service-symbol::before,.flow-icon::before{content:"";position:absolute;inset:-9px;z-index:-1;border-radius:25px;background:radial-gradient(ellipse,#43ddf525,transparent 68%);opacity:.65;pointer-events:none}
.service-symbol::after{content:"";position:absolute;left:7px;right:7px;bottom:-9px;height:5px;z-index:-1;border-radius:50%;background:#0007;filter:blur(3px);pointer-events:none}
.service-symbol svg,.flow-icon svg{width:41px;height:41px;overflow:visible;stroke:var(--object-ink);stroke-width:1.5;fill:none;filter:drop-shadow(1px 1px 0 var(--object-edge)) drop-shadow(1px 2px 0 var(--object-edge)) drop-shadow(0 5px 4px #0007)}
.service-icon--commerce svg path:first-child,.service-icon--systems svg rect,.service-icon--ai svg rect,.service-icon--mvp svg path:first-child,.service-icon--sites svg rect{fill:url(#premium-cyan-face) #65ddef;stroke:#bcf6ff}
.service-icon--commerce svg circle,.service-icon--systems svg circle{fill:#c2f4ff;stroke:#5ac4db}
.service-icon--commerce svg path:last-child,.service-icon--systems svg path{stroke:#153e54;stroke-width:2}
.services-section .service-icon--ai,.flow-icon--ai{--object-face:#88b9ff;--object-edge:#244b81;--object-ink:#dcecff}
.service-icon--ai svg rect{fill:url(#premium-blue-face) #88b9ff;stroke:#c3dfff}
.service-icon--ai svg path{stroke:#dceeff;stroke-width:2;fill:#dceeff}
.services-section .service-icon--integration{--object-edge:#14554f;--object-ink:#8cead3}
.service-icon--integration svg path{stroke-width:4;fill:none;stroke:#a1f0df;filter:drop-shadow(-1px -1px 0 #effffb)}
.services-section .service-icon--mvp{--object-edge:#28557e;--object-ink:#c8ecff}
.service-icon--mvp svg path:first-child{fill:url(#premium-blue-face) #88b9ff}
.services-section .service-icon--sites{--object-edge:#0c6578;--object-ink:#d7faff}
.service-icon--sites svg path{stroke:#1b5367;stroke-width:2}
.services-section .service:hover .service-symbol,.services-section .service:focus-within .service-symbol{transform:perspective(300px) rotateY(-5deg) rotateX(3deg) translateY(-3px);border-color:#b3f4ffad}

/* Uma pequena cena contínua. A luz percorre as etapas em ordem, em seis segundos. */
.automation-flow{position:relative;isolation:isolate;gap:40px;padding:20px 0 24px;perspective:1000px}
.automation-flow::before{content:"";position:absolute;z-index:-1;inset:35px -14px 7px;border:1px solid #5eafc425;border-radius:30px;background:radial-gradient(ellipse at 50% 12%,#1d718822,transparent 70%),linear-gradient(180deg,#0b1e2608,#0a1a2466);box-shadow:inset 0 -2px 0 #72c9dd10;pointer-events:none}
.automation-flow .flow-step{--step-delay:0s;padding:25px 18px 23px;border-color:#6faabd2e;border-radius:17px;background:linear-gradient(145deg,#132c36b3,#091720a6);box-shadow:inset 0 1px 0 #cff6ff12,0 12px 24px #0002}
.automation-flow .flow-step:nth-child(2){--step-delay:1.35s}
.automation-flow .flow-step:nth-child(3){--step-delay:2.7s}
.automation-flow .flow-step:nth-child(4){--step-delay:4.05s}
.automation-flow .flow-step:last-child{border-color:#82d6ba42;background:linear-gradient(145deg,#173b3d96,#0a1b25a6)}
.automation-flow .flow-icon{width:74px;height:74px;margin:0 auto 27px;border-radius:20px;border:1px solid #8dd9ec7a;color:var(--object-ink);background:linear-gradient(135deg,#355667 0%,#143141 45%,#0b1d2b 100%);box-shadow:inset 1px 1px 1px #ddfbff45,inset -2px -2px 3px #0006,4px 5px 0 #061620,5px 6px 0 #214655,0 17px 22px #0005;transform:perspective(350px) rotateX(7deg) rotateY(-11deg);animation:flow-object-arrive 6s ease-in-out var(--step-delay) infinite}
.automation-flow .flow-icon::before{inset:-18px;opacity:0;animation:flow-object-light 6s ease-in-out var(--step-delay) infinite}
.flow-icon--whatsapp{--object-edge:#155a40;--object-ink:#e2ffef}
.automation-flow .flow-icon--whatsapp{border-color:#95e3ba80;background:linear-gradient(135deg,#3d7860,#123e32 52%,#0b251f);box-shadow:inset 1px 1px 1px #e7ffef40,inset -2px -2px 3px #0006,4px 5px 0 #062116,5px 6px 0 #2b4e3d,0 17px 22px #0005}
.flow-icon--whatsapp::before{background:radial-gradient(ellipse,#75f7b941,transparent 70%)}
.flow-icon--whatsapp svg path:first-child{fill:url(#premium-green-face) #78e9b2;stroke:#ceffe2}
.flow-icon--whatsapp svg path:last-child{stroke:#155641;stroke-width:2.1;fill:#effff6}
.flow-icon--ai svg path{fill:url(#premium-blue-face) #88b9ff;stroke:#d9edff}
.flow-icon--system svg path{fill:url(#premium-cyan-face) #65ddef;stroke:#b9f1ff;stroke-width:1.7}
.flow-icon--system svg ellipse{fill:#a9f2ff;stroke:#d8fcff}
.flow-icon--payment svg rect{fill:url(#premium-cyan-face) #65ddef;stroke:#b8f5ff}
.flow-icon--payment svg path{stroke:#174f61;stroke-width:2.2;fill:none}
.automation-flow .flow-index{right:14px;top:17px;color:#7a9cac}
.automation-flow .flow-step h3{position:relative;margin-bottom:10px;text-align:center;font-size:1.03rem}
.automation-flow .flow-step p{position:relative;text-align:center;line-height:1.7}
.automation-flow .flow-arrow{--route-delay:.7s;display:grid;right:-39px;top:58px;width:38px;height:30px;background:transparent;font-size:1.45rem;color:#62c8dc99}
.flow-step:nth-child(2) .flow-arrow{--route-delay:2.05s}
.flow-step:nth-child(3) .flow-arrow{--route-delay:3.4s}
.flow-arrow::before{content:"";position:absolute;left:-2px;right:5px;top:50%;height:1px;background:linear-gradient(90deg,#2d657680,#52bfd385);z-index:-1}
.flow-arrow::after{content:"";position:absolute;left:0;top:calc(50% - 2px);width:4px;height:4px;border-radius:50%;background:#b4f8ff;box-shadow:0 0 7px #74efff;opacity:0;animation:flow-route-pulse 6s linear var(--route-delay) infinite;pointer-events:none}
@keyframes flow-object-arrive{0%,20%,100%{translate:0 0}6%,12%{translate:0 -4px}}
@keyframes flow-object-light{0%,20%,100%{opacity:0}6%,12%{opacity:.85}}
@keyframes flow-route-pulse{0%{translate:0 0;opacity:0}2%{opacity:1}15%{translate:32px 0;opacity:1}18%,100%{translate:32px 0;opacity:0}}
.automation-flow.flow-paused *,.automation-flow.flow-paused *::before,.automation-flow.flow-paused *::after{animation-play-state:paused!important}

/* As capturas reais ganham carcaças de notebook, celular e tablet. */
.project-clenda{--device-angle:-4deg;--phone-angle:6deg}
.project-motion{--device-angle:3deg;--phone-angle:-7deg}
.project-acd{--device-angle:-5deg;--phone-angle:6deg}
.project-preview{container-type:inline-size}
.project-art::before{content:"";position:absolute;z-index:2;left:3%;top:calc(48% + 23cqw);width:88%;height:12px;border-radius:2px 2px 11px 11px;clip-path:polygon(4% 0,96% 0,100% 70%,97% 100%,3% 100%,0 70%);background:linear-gradient(180deg,#d0e0e7 0%,#718591 23%,#22343f 58%,#0b1720 100%);box-shadow:0 10px 20px #0008;transform:rotate(var(--device-angle)) translateZ(20px);pointer-events:none}
.project-art::after{content:"";position:absolute;left:7%;right:8%;bottom:16%;height:12%;z-index:-1;border-radius:50%;background:#0007;filter:blur(13px);pointer-events:none}
.project .project-screen{z-index:2;width:80%;left:7%;top:48%;padding:6px 4px 4px;border:3px solid #7592a47a;border-bottom-color:#a1b9c482;border-radius:10px 10px 4px 4px;background:linear-gradient(135deg,#3b5261,#08131c 38%,#233742);box-shadow:inset 0 1px 0 #d8f5ff3d,3px 4px 0 #061019,0 17px 28px #0005;transform:translateY(-50%) rotate(var(--device-angle)) translateZ(24px)}
.project-screen img{border:1px solid #0008;border-radius:3px}
.project-screen::before{content:"";position:absolute;left:50%;top:1px;width:3px;height:3px;border-radius:50%;background:#080f16;box-shadow:inset 0 0 0 1px #86bec44d;pointer-events:none}
.project-screen::after{content:"";position:absolute;inset:6px 4px 4px;pointer-events:none;background:linear-gradient(120deg,#ffffff0c,transparent 38%,transparent 80%,#ffffff03);border-radius:3px}
.project .project-phone{z-index:3;width:22%;right:5%;bottom:14%;padding:2px;border:4px solid #728a967a;border-left-color:#b0c3cc91;border-radius:15px;background:linear-gradient(125deg,#506776,#0b1421);box-shadow:3px 3px 0 #06111a,0 18px 25px #0008;transform:rotate(var(--phone-angle)) translateZ(60px)}
.project-phone img{border-radius:9px}
.project-phone::before{content:"";position:absolute;z-index:1;left:34%;right:34%;top:2px;height:4px;border-radius:0 0 4px 4px;background:#071118;pointer-events:none}
.project-acd .project-art::before{left:11%;top:auto;bottom:17%;width:75%;height:11%;clip-path:none;border-radius:50%;background:#0007;filter:blur(12px);transform:none;z-index:0}
.project-acd .project-screen{width:76%;left:8%;top:48%;padding:6px;border:7px solid #314a5a;border-left-color:#78929f;border-right-color:#1c3241;border-radius:18px;background:linear-gradient(135deg,#7b929f,#132c3b);box-shadow:3px 4px 0 #061420,0 22px 35px #0006;transform:translateY(-50%) rotate(var(--device-angle)) translateZ(24px)}
.project-acd .project-screen img,.project-acd .project-screen::after{border-radius:6px}
.project-acd .project-screen::before{left:2px;top:50%;background:#072435}
.project-preview:is(:hover,:focus-visible) .project-screen{transform:translateY(-50%) rotate(calc(var(--device-angle) * .65)) translateZ(24px) scale(1.01)}
.project-preview:is(:hover,:focus-visible) .project-phone{transform:rotate(calc(var(--phone-angle) * .65)) translateZ(60px) translateY(-5px)}
.project-preview:is(:hover,:focus-visible) .project-art::before{transform:rotate(calc(var(--device-angle) * .65)) translateZ(20px)}
.project-acd .project-preview:is(:hover,:focus-visible) .project-art::before{transform:none}
.project-preview:focus-visible{outline:2px solid #a6efff;outline-offset:-3px}
.cover-caption{z-index:4}
.cover-explore{z-index:4}

@media(max-width:1100px){
  .automation-flow{gap:26px}
  .automation-flow .flow-arrow{right:-26px;width:26px}
  .flow-arrow::after{animation-name:flow-route-pulse-short}
  .automation-flow .flow-step{padding-inline:14px}
  .automation-flow .flow-step h3{font-size:.92rem}
}
@keyframes flow-route-pulse-short{0%{translate:0 0;opacity:0}2%{opacity:1}15%{translate:23px 0;opacity:1}18%,100%{translate:23px 0;opacity:0}}
@media(max-width:900px){
  .automation-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding-block:12px 20px}
  .automation-flow::before{inset:26px -10px 3px}
  .automation-flow .flow-step{padding:24px 20px}
  .automation-flow .flow-step h3{font-size:1.03rem}
  .automation-flow .flow-arrow{display:none}
}
@media(max-width:760px){
  .services-section .service-symbol{width:62px;height:62px}
  .project-art::before{height:14px}
  .project .project-screen{border-radius:12px 12px 4px 4px}
  .project .project-phone{border-radius:20px;border-width:5px}
  .project-phone img{border-radius:12px}
  .project-acd .project-screen{border-radius:19px;border-width:8px}
}
@media(max-width:450px){
  .automation-flow{grid-template-columns:1fr;gap:25px;padding-block:7px 15px}
  .automation-flow::before{inset:30px -8px 0;border-radius:25px}
  .automation-flow .flow-step{display:grid;grid-template-columns:61px 1fr;gap:0 18px;padding:24px 19px;min-height:136px}
  .automation-flow .flow-icon{grid-row:1/3;width:61px;height:61px;margin:0;align-self:center;border-radius:16px}
  .flow-icon svg{width:35px;height:35px}
  .automation-flow .flow-step h3{grid-column:2;text-align:left;margin:2px 10px 7px 0}
  .automation-flow .flow-step p{grid-column:2;text-align:left;font-size:.79rem}
  .automation-flow .flow-index{top:14px;right:13px;font-size:.57rem}
  .automation-flow .flow-arrow{display:grid;left:35px;right:auto;top:auto;bottom:-28px;width:27px;height:30px;transform:rotate(90deg);font-size:1.25rem}
  .flow-arrow::after{animation-name:flow-route-pulse-short}
  .project-art::before{height:11px;top:calc(48% + 23cqw)}
  .project .project-screen{padding:4px 3px 3px;border-width:2px}
  .project-screen::after{inset:4px 3px 3px}
  .project .project-phone{border-width:3px;border-radius:14px}
  .project-phone img{border-radius:8px}
  .project-acd .project-screen{padding:4px;border-width:6px;border-radius:14px}
  .project-acd .project-art::before{top:auto}
}
@media(prefers-reduced-motion:reduce){
  .automation-flow *,.automation-flow *::before,.automation-flow *::after{animation:none!important;transition:none!important}
  .service-symbol{transition:none!important}
  .project-preview:is(:hover,:focus-visible) .project-screen{transform:translateY(-50%) rotate(var(--device-angle))!important}
  .project-preview:is(:hover,:focus-visible) .project-phone{transform:rotate(var(--phone-angle))!important}
}
body.reduced-motion .automation-flow *,body.reduced-motion .automation-flow *::before,body.reduced-motion .automation-flow *::after{animation:none!important}
body.reduced-motion .project .project-screen{transform:translateY(-50%) rotate(var(--device-angle))!important}
body.reduced-motion .project .project-phone{transform:rotate(var(--phone-angle))!important}