/* Ditekia v3 — Funnel Display/Sans + JetBrains Mono; laranja #F06A1D/#C2410C, marinho #14213D */
:root{
  --lj:#F06A1D;--lj-e:#C2410C;--lj-c:#FF9F5A;
  --n0:#070C18;--n1:#0B1222;--n2:#101A30;--n3:#14213D;
  --claro:#F4F5F7;--txt:#14213D;--txt2:#5A6680;
  --l:rgba(255,255,255,.08);--l2:rgba(255,255,255,.14);--lc:#DDE1E8;
  --t:"Funnel Display",system-ui,sans-serif;--b:"Funnel Sans",system-ui,sans-serif;--m:"JetBrains Mono",ui-monospace,monospace;
  --cx:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--n0);color:#fff;font:16px/1.6 var(--b);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--t);font-weight:600;letter-spacing:-.035em;margin:0;line-height:1.02}
p{margin:0}
.sf{color:var(--lj-c)}
.sf .pw{white-space:nowrap}
.sf .pw::before{content:"";display:inline-block;width:.42em;height:.58em;margin-right:.2em;vertical-align:baseline;
  background:linear-gradient(currentColor,currentColor) 0 100%/26% var(--b1,33%) no-repeat,linear-gradient(currentColor,currentColor) 50% 100%/26% var(--b2,66%) no-repeat,linear-gradient(currentColor,currentColor) 100% 100%/26% var(--b3,100%) no-repeat}
.js [data-r] .sf .pw::before{background-size:26% 0,26% 0,26% 0}
.js [data-r].visivel .sf .pw::before{animation:degraus .9s cubic-bezier(.2,.7,.2,1) calc(var(--d,0s) + .45s) both}
@keyframes degraus{0%{background-size:26% 0,26% 0,26% 0}40%{background-size:26% 33%,26% 0,26% 0}70%{background-size:26% 33%,26% 66%,26% 0}100%{background-size:26% 33%,26% 66%,26% 100%}}
.risco{position:relative;white-space:nowrap}
.risco svg{position:absolute;left:.6em;right:0;bottom:-.16em;width:calc(100% - .6em);height:.26em;overflow:visible}
.risco path{fill:none;stroke:var(--lj);stroke-width:5;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600}
.js [data-r].visivel .risco path{animation:risca 1.1s cubic-bezier(.6,0,.2,1) calc(var(--d,0s) + 1.2s) forwards}
.no-js .risco path,html:not(.js) .risco path{stroke-dashoffset:0}
@keyframes risca{to{stroke-dashoffset:0}}
.cx{max-width:var(--cx);margin:0 auto;padding:0 32px}
.fig{display:flex;align-items:center;gap:14px;font:400 11.5px/1 var(--m);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.fig b{font-weight:500;color:var(--lj-c)}
.claro .fig{color:var(--txt2)} .claro .fig b{color:var(--lj-e)}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
:focus-visible{outline:2px solid var(--lj-c);outline-offset:3px}

/* granulado sutil nas áreas escuras */
.grao{position:relative;isolation:isolate}
.grao::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* botões */
.btn{display:inline-flex;align-items:center;gap:10px;font:600 15px/1 var(--t);letter-spacing:-.01em;padding:16px 22px;border-radius:8px;background:var(--lj-e);color:#fff;transition:background .2s,transform .25s cubic-bezier(.2,.7,.2,1);will-change:transform}
.btn:hover{background:#A8380A}
.btn-claro{background:#fff;color:var(--n3)} .btn-claro:hover{background:#E9ECF1}
.btn .ic{width:16px;height:16px}
.lnk{font:500 15px/1 var(--t);color:rgba(255,255,255,.75);display:inline-flex;gap:8px;align-items:center;transition:color .2s}
.lnk:hover{color:#fff}

/* topo */
.topo{position:fixed;top:14px;left:0;right:0;z-index:50;padding:0 20px;pointer-events:none;transition:top .35s}
.barra{pointer-events:auto;max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:8px;padding:8px 8px 8px 20px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(14,22,40,.55);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);box-shadow:0 20px 50px -20px rgba(0,0,0,.6);transition:background .35s,max-width .45s cubic-bezier(.2,.7,.2,1)}
.topo.rolou{top:8px}.topo.rolou .barra{background:rgba(10,16,30,.85);max-width:1080px}
.barra img{height:26px;width:auto}
.barra nav{display:flex;gap:2px;margin-left:32px}
.barra nav a{font:500 14px var(--t);color:rgba(255,255,255,.65);padding:9px 12px;border-radius:8px;display:flex;gap:7px;align-items:baseline;transition:background .2s,color .2s}
.barra nav a i{font:400 10px var(--m);font-style:normal;color:var(--lj-c)}
.barra nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.barra .st{margin-left:auto;display:flex;align-items:center;gap:8px;font:400 11px var(--m);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);padding-right:12px}
.barra .st i{width:6px;height:6px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 4px rgba(61,220,132,.15);animation:pulsa 1.6s infinite}
.barra .btn{padding:11px 12px 11px 16px;font-size:14px;border-radius:9px}
.barra .btn .s{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:rgba(0,0,0,.22);transition:transform .3s}
.barra .btn:hover .s{transform:translateX(3px)}

/* 1 · herói */
.heroi{background:radial-gradient(90% 80% at 80% 30%,#14213D 0%,var(--n1) 50%,var(--n0) 100%);padding:150px 0 0;overflow:hidden}
.heroi-grade{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.heroi h1{font-size:clamp(44px,6.4vw,92px);margin:28px 0 28px;font-weight:600}
.heroi h1 .sf{display:inline-block}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:rgba(255,255,255,.55);max-width:560px}
.lead strong{color:#fff;font-weight:500}
.acoes{display:flex;align-items:center;gap:28px;margin-top:40px;flex-wrap:wrap}
.arte{position:relative;height:clamp(320px,40vw,560px)}
.arte canvas{position:absolute;inset:0;width:100%;height:100%}
.estado{position:absolute;right:0;bottom:6%;display:flex;gap:10px;align-items:center;font:400 11px/1 var(--m);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.estado i{width:6px;height:6px;border-radius:50%;background:var(--lj);box-shadow:0 0 10px var(--lj)}

/* 2 · produto: central da operação */
.palco{perspective:1600px;margin-top:72px;padding-bottom:40px}
.app{--inc:22deg;--esc:.92;transform:rotateX(var(--inc)) scale(var(--esc));transform-origin:50% 0;border-radius:14px;background:linear-gradient(180deg,#121C33,#0C1426);border:1px solid var(--l2);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 60px 120px -30px rgba(0,0,0,.8),0 0 120px -40px rgba(240,106,29,.35);overflow:hidden;will-change:transform}
.app-bar{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--l);font:500 12.5px var(--t);color:rgba(255,255,255,.55)}
.app-bar .pts{display:flex;gap:6px}.app-bar .pts i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.14)}
.tag{margin-left:auto;font:400 10px/1 var(--m);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);border:1px solid var(--l2);padding:5px 8px;border-radius:4px}
.app-corpo{display:grid;grid-template-columns:190px 280px 1fr 300px;min-height:440px}
.app-lado{border-right:1px solid var(--l);padding:16px 10px;display:flex;flex-direction:column;gap:2px;font:500 13px var(--t);color:rgba(255,255,255,.55)}
.app-lado .it{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px}
.app-lado .it.on{background:rgba(255,255,255,.06);color:#fff}
.app-lado .it em{margin-left:auto;font:500 10.5px var(--m);font-style:normal;background:var(--lj-e);color:#fff;border-radius:4px;padding:2px 6px}
.app-lado .sep{font:400 10px var(--m);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.3);padding:16px 10px 6px}
.col{border-right:1px solid var(--l);padding:14px}
.col:last-child{border-right:0}
.col-tit{display:flex;align-items:center;justify-content:space-between;font:600 13px var(--t);margin-bottom:12px}
.col-tit small{font:400 10.5px var(--m);color:rgba(255,255,255,.4);letter-spacing:.06em}
.conv{display:flex;gap:10px;padding:10px;border-radius:8px;margin-bottom:4px;transition:background .3s}
.conv.sel{background:rgba(255,255,255,.06)}
.av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:600 12px var(--t);flex-shrink:0;background:#22314f}
.conv b{display:block;font:600 13px var(--t)}
.conv div>span{display:block;font-size:12px;color:rgba(255,255,255,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.chip{display:inline-flex;align-items:center;gap:5px;margin-top:5px;font:500 10px/1 var(--m);letter-spacing:.04em;padding:4px 6px;border-radius:4px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.6)}
.chip.ia{background:rgba(240,106,29,.14);color:var(--lj-c)}
.chip.ia::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--lj);animation:pulsa 1.2s infinite}
.chip.ok{background:rgba(61,220,132,.1);color:#5FE3A0}
@keyframes pulsa{50%{opacity:.25}}
.chat{display:flex;flex-direction:column;gap:9px}
.msg{max-width:82%;padding:10px 13px;border-radius:12px;font-size:13.5px;line-height:1.45}
.msg.cli{align-self:flex-start;background:rgba(255,255,255,.07);border-bottom-left-radius:4px}
.msg.ia{align-self:flex-end;background:var(--lj-e);border-bottom-right-radius:4px}
.msg.dig{align-self:flex-end;display:flex;gap:4px;background:rgba(194,65,12,.5);padding:12px 13px}
.msg.dig i{width:5px;height:5px;border-radius:50%;background:#fff;animation:pulsa .9s infinite}.msg.dig i:nth-child(2){animation-delay:.15s}.msg.dig i:nth-child(3){animation-delay:.3s}
.passa{display:flex;gap:10px;padding:11px 12px;border-radius:10px;border:1px solid rgba(61,220,132,.28);background:rgba(61,220,132,.07);font-size:12px;color:rgba(255,255,255,.6)}
.passa b{display:block;color:#fff;font:600 12.5px var(--t)}
.js .chat>*{opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.js .chat>.on{opacity:1;transform:none}
.funil{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.etapa{display:grid;grid-template-columns:86px 1fr 22px;align-items:center;gap:10px;font-size:12px;color:rgba(255,255,255,.6)}
.etapa .bar{height:8px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden}
.etapa .bar i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,var(--lj-e),var(--lj));transform-origin:left;transform:scaleX(0);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.visivel .etapa .bar i{transform:scaleX(1)}
.etapa em{font:500 11px var(--m);font-style:normal;text-align:right}
.auto{display:flex;flex-direction:column;gap:7px}
.auto li{list-style:none;display:flex;gap:9px;align-items:center;font-size:12px;color:rgba(255,255,255,.65);padding:8px 10px;border:1px solid var(--l);border-radius:6px}
.auto li .ic{width:14px;height:14px;color:#5FE3A0}
.auto{padding:0;margin:0}

/* faixa */
.faixa{border-top:1px solid var(--l);border-bottom:1px solid var(--l);background:var(--n0);overflow:hidden;padding:20px 0}
.faixa .trilho{display:flex;width:max-content;animation:trilho 50s linear infinite}
.faixa span{font:400 13px var(--m);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);padding:0 28px;white-space:nowrap}
.faixa span b{color:var(--lj-c);font-weight:400;margin-right:28px}
@keyframes trilho{to{transform:translateX(-50%)}}

/* 3 · problema em frase que acende */
.problema{padding:clamp(120px,16vw,220px) 0;background:var(--n0)}
.frase{font:600 clamp(30px,4.4vw,62px)/1.12 var(--t);letter-spacing:-.035em;max-width:1100px;margin-top:40px}
.frase .p{color:rgba(255,255,255,.14);transition:color .4s}
.frase .p.acesa{color:#fff}
.frase .p.acesa.dest{color:var(--lj-c)}
.frase .sf{color:inherit}

/* seções com cabeçalho em duas colunas */
.secao{padding:clamp(96px,12vw,160px) 0}
.cab2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:56px}
.cab2 h2{font-size:clamp(34px,4.4vw,60px);margin-top:22px}
.cab2 p{font-size:18px;color:rgba(255,255,255,.55);max-width:480px;justify-self:end}
.claro .cab2 p{color:var(--txt2)}

/* 4 · bento da infraestrutura */
.infra{background:var(--n1)}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.bx{position:relative;border:1px solid var(--l);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));padding:28px;overflow:hidden;min-height:400px;display:flex;flex-direction:column}
.bx::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(240,106,29,.13),transparent 60%)}
.bx::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1px;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,159,90,.7),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s}
.bx:hover::before,.bx:hover::after{opacity:1}
.b-wa{grid-column:span 3}.b-crm{grid-column:span 3}.b-tr{grid-column:span 2}.b-sis{grid-column:span 4}
.bx .fig{margin-bottom:16px}
.bx h3{font-size:clamp(24px,2.2vw,30px);letter-spacing:-.03em}
.bx>p{color:rgba(255,255,255,.55);margin-top:10px;max-width:440px;font-size:15.5px}
.demo{margin-top:auto;padding-top:26px}
.b-wa .demo{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end}
.kan{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kan h4{font:400 10px var(--m);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin:0 0 8px}
.card{border:1px solid var(--l);background:rgba(255,255,255,.04);border-radius:8px;padding:9px;margin-bottom:7px;font-size:12px}
.card b{display:block;font:600 12.5px var(--t)}
.card small{color:rgba(255,255,255,.45)}
.card.anda{border-color:var(--lj);box-shadow:0 0 0 3px rgba(240,106,29,.14)}
.card.ok{border-color:rgba(61,220,132,.35)} .card.ok small{color:#5FE3A0}
.camps{display:flex;flex-direction:column;gap:8px}
.camp{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--l);border-radius:8px;padding:11px 12px;font-size:12.5px}
.camp b{font:600 13px var(--t);display:block}
.camp small{color:rgba(255,255,255,.45)}
.camp em{font:500 10px var(--m);font-style:normal;color:#5FE3A0;background:rgba(61,220,132,.1);padding:4px 7px;border-radius:4px}
.fluxo{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.fluxo::before{content:"";position:absolute;left:12%;right:12%;top:22px;height:1px;background:var(--l2)}
.fluxo::after{content:"";position:absolute;left:12%;right:12%;top:22px;height:1px;background:var(--lj);transform-origin:left;transform:scaleX(0);transition:transform 2.4s cubic-bezier(.4,0,.2,1)}
.fluxo::after{transform:scaleX(var(--prog,0));transition:transform .8s cubic-bezier(.4,0,.2,1)}
.passo-f{text-align:center;font-size:12.5px;color:rgba(255,255,255,.6);position:relative;padding:0 6px}
.passo-f span{width:44px;height:44px;margin:0 auto 12px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--l2);background:var(--n2);font:500 12px var(--m);color:#fff;transition:background .4s,border-color .4s}
.passo-f.atual span{border-color:var(--lj);box-shadow:0 0 0 4px rgba(240,106,29,.18);background:rgba(240,106,29,.15)}
.passo-f.aceso span{background:var(--lj-e);border-color:var(--lj-e)}
.relat{display:flex;gap:10px;margin-top:18px;padding:12px 14px;border:1px solid var(--l);border-radius:8px;font-size:12.5px;color:rgba(255,255,255,.6)}
.relat b{color:#fff;font:600 13px var(--t)}

/* demonstrações ao vivo */
.vivo{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font:400 10px var(--m);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.vivo i{width:6px;height:6px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 3px rgba(61,220,132,.15);animation:pulsa 1.4s infinite}
.bx .fig{width:100%}
.app-bar .vivo{margin-left:auto;margin-right:10px}
.app-bar .tag{margin-left:0}
.chat{transition:opacity .35s}
.chat.saindo{opacity:0}
.chat-central{min-height:300px}
.chat-bx{min-height:200px;justify-content:flex-end}
.nota-sis{align-self:center;font:400 10px var(--m);letter-spacing:.12em;text-transform:uppercase;color:var(--lj-c);border:1px solid rgba(255,159,90,.3);border-radius:4px;padding:5px 8px}
.kan{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kcol{min-height:190px;border-radius:8px;background:rgba(255,255,255,.02);padding:6px}
.kcol .card{transition:border-color .3s,box-shadow .3s,background .3s}
.card.anda{border-color:var(--lj);box-shadow:0 0 0 3px rgba(240,106,29,.16);background:rgba(240,106,29,.08)}
.card.chegou{animation:chega .6s cubic-bezier(.2,.7,.2,1)}
@keyframes chega{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:none}}
.camp-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.camp-chips span{display:inline-flex;align-items:center;gap:6px;font:500 11.5px var(--t);padding:5px 9px;border-radius:6px;border:1px solid var(--l);color:rgba(255,255,255,.7)}
.camp-chips span::before{content:"";width:5px;height:5px;border-radius:50%;background:#3DDC84}
.feed,.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.feed li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 12px;border:1px solid var(--l);border-radius:8px;background:rgba(255,255,255,.03);opacity:0;transition:opacity .5s}
.feed li.on,.log li.on,.auto li.on{opacity:1}
.feed .src{font:600 12.5px var(--t)}
.feed .o-que{grid-column:1;font-size:12px;color:rgba(255,255,255,.5)}
.feed time,.log time,.auto time{grid-row:1/3;grid-column:2;align-self:center;font:400 10.5px var(--m);color:rgba(255,255,255,.4)}
.feed li:first-child{border-color:rgba(240,106,29,.4)}
.ped{font:400 11px var(--m);letter-spacing:.06em;color:rgba(255,255,255,.5);margin-bottom:14px}
.ped b{color:var(--lj-c);font-weight:500}
.log{margin-top:16px}
.log li{display:flex;gap:6px;align-items:center;font-size:12.5px;color:rgba(255,255,255,.6);padding:9px 12px;border:1px solid var(--l);border-radius:8px;opacity:0;transition:opacity .5s}
.log li b{color:#fff;font:600 12.5px var(--t)}
.log time,.auto time{margin-left:auto}
.auto li{opacity:0;transition:opacity .5s}
.etapa .bar i{transition:transform 1.2s cubic-bezier(.2,.7,.2,1),width .8s cubic-bezier(.2,.7,.2,1)}

/* 5 · porte (claro, editorial) */
.claro{background:var(--claro);color:var(--txt)}
.claro .cab2 h2{color:var(--txt)}
.escada{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:end}
.degrau{display:flex;flex-direction:column;gap:28px;cursor:default}
.deg-tag{display:flex;gap:10px;align-items:baseline;font:600 clamp(28px,2.6vw,38px)/1 var(--t);letter-spacing:-.035em;color:var(--txt);margin-bottom:14px}
.deg-tag b{font:400 12px var(--m);letter-spacing:.1em;color:var(--lj-e)}
.degrau h3{font-size:18px;letter-spacing:-.01em;color:var(--txt);margin-bottom:8px}
.degrau p{color:var(--txt2);font-size:15.5px;max-width:340px}
.deg-rot{display:block;margin:20px 0 10px;font:400 10.5px var(--m);letter-spacing:.12em;text-transform:uppercase;color:var(--txt2)}
.pecas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pecas li{font:500 12.5px var(--t);padding:6px 10px;border-radius:6px;border:1px dashed #C5CBD6;color:#9AA3B5}
.pecas li.on{border:1px solid var(--n3);background:var(--n3);color:#fff}
.barra-deg{position:relative;height:calc(var(--h) * clamp(90px,10vw,140px));border-radius:10px;background:var(--n3);overflow:hidden;display:flex;align-items:flex-end;padding:20px;transform-origin:bottom;transition:background .4s}
.barra-deg::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:22px 22px}
.barra-deg span{position:relative;font:500 15px/1.35 var(--t);color:#fff;max-width:280px}
.topo-deg .barra-deg{background:linear-gradient(180deg,var(--lj) 0%,var(--lj-e) 100%)}
.degrau:hover .barra-deg{background:var(--lj-e)}
.topo-deg:hover .barra-deg{background:linear-gradient(180deg,#FF7A2E,var(--lj-e))}
.js .degrau .barra-deg{transform:scaleY(0)}
.js .degrau.visivel .barra-deg{transform:scaleY(1);transition:transform 1.1s cubic-bezier(.2,.7,.2,1) calc(var(--d,0s) + .25s),background .4s}
.js .degrau .barra-deg span{opacity:0;transition:opacity .5s calc(var(--d,0s) + 1.1s)}
.js .degrau.visivel .barra-deg span{opacity:1}

/* 6 · diferença (tabela) */
.dif{background:var(--n0)}
.tabela{border-top:1px solid var(--l2)}
.tr{display:grid;grid-template-columns:.8fr 1fr 1fr;gap:32px;padding:26px 0;border-bottom:1px solid var(--l);align-items:baseline}
.tr.th{font:400 11.5px var(--m);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);padding:18px 0}
.tr.th .dk{color:var(--lj-c)}
.tr .tema{font:600 17px var(--t);letter-spacing:-.01em}
.tr .ag{color:rgba(255,255,255,.52)}
.tr .nos{color:#fff}

/* 7 · como funciona (linha do tempo) */
.tempo{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin:0;padding:44px 0 0}
.tempo .trilha{position:absolute;top:0;left:0;right:0;height:2px;background:var(--lc)}
.tempo .trilha i{position:absolute;inset:0;background:var(--lj-e);transform-origin:left;transform:scaleX(var(--p,0))}
.tempo li{list-style:none;position:relative}
.tempo li::before{content:"";position:absolute;top:-51px;left:0;width:14px;height:14px;border-radius:50%;background:var(--claro);border:2px solid var(--lc);transition:border-color .3s,background .3s}
.tempo li.feito::before{border-color:var(--lj-e);background:var(--lj-e)}
.tempo .n{font:400 12px var(--m);color:var(--lj-e);letter-spacing:.1em}
.tempo h3{font-size:26px;margin:14px 0 12px;color:var(--txt);letter-spacing:-.03em}
.tempo p{color:var(--txt2);font-size:15.5px}

/* 8 · perguntas */
.faq-g{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px}
.faq-g h2{font-size:clamp(34px,4vw,52px);color:var(--txt);margin-top:22px;position:sticky;top:110px}
.faq details{border-bottom:1px solid var(--lc)}
.faq details:first-child{border-top:1px solid var(--lc)}
.faq summary{list-style:none;cursor:pointer;padding:26px 40px 26px 0;font:600 19px/1.35 var(--t);letter-spacing:-.015em;position:relative;color:var(--txt)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:12px;height:12px;border-right:1.5px solid var(--txt);border-bottom:1.5px solid var(--txt);transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details p{padding:0 40px 26px 0;color:var(--txt2);font-size:16.5px}

/* 9 · final */
.final{padding:clamp(140px,18vw,240px) 0;text-align:center;background:radial-gradient(60% 70% at 50% 100%,rgba(240,106,29,.16),transparent 70%),var(--n0)}
.final h2{font-size:clamp(42px,6.4vw,96px);max-width:1100px;margin:0 auto}
.final p{color:rgba(255,255,255,.55);font-size:19px;margin:28px auto 44px;max-width:560px}
.final .acoes{justify-content:center}
.rodape{border-top:1px solid var(--l);padding:36px 0;font-size:13.5px;color:rgba(255,255,255,.45)}
.rodape .cx{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.rodape img{height:30px;width:auto}
.rodape nav{display:flex;gap:24px;margin-left:auto}
.rodape a:hover{color:#fff}

/* revelar ao rolar */
.js [data-r]{opacity:0;transform:translateY(32px);filter:blur(6px);transition:opacity 1s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform 1s cubic-bezier(.2,.7,.2,1) var(--d,0s),filter 1s var(--d,0s)}
.js [data-r].visivel{opacity:1;transform:none;filter:none}

@media (max-width:1100px){
  .app-corpo{grid-template-columns:1fr 1.2fr}
  .app-lado,.col.lado-dir{display:none}
  .b-wa,.b-crm,.b-sis{grid-column:span 6}.b-tr{grid-column:span 6}
}
@media (max-width:820px){
  .cx{padding:0 18px}
  .barra nav,.barra .st{display:none}.barra .btn{margin-left:auto}
  .topo{padding:0 12px}
  .heroi{padding-top:110px}
  .fig{letter-spacing:.06em;font-size:10.5px;gap:10px}
  .heroi-grade,.cab2,.faq-g{grid-template-columns:1fr}
  .cab2 p{justify-self:start}
  .arte{height:300px}
  .app-corpo{grid-template-columns:1fr;min-height:0}
  .col.inbox{display:none}
  .b-wa,.b-sis,.b-crm,.b-tr{grid-column:span 6}
  .b-wa .demo{grid-template-columns:1fr}
  .b-wa .demo .chat:first-child{display:none}
  .bx{min-height:0}
  .tr{grid-template-columns:1fr;gap:10px}
  .escada{grid-template-columns:1fr;gap:40px}
  .barra-deg{height:auto;min-height:0;width:calc(var(--h) * 33.33%);min-width:62%;transform-origin:left}
  .degrau:nth-child(2) .barra-deg{min-width:78%}.degrau:nth-child(3) .barra-deg{width:100%}
  .js .degrau .barra-deg{transform:scaleX(0)}.js .degrau.visivel .barra-deg{transform:scaleX(1)}
  .tr.th{display:none}
  .tr .ag::before{content:"Agência: ";color:rgba(255,255,255,.52)}
  .tr .nos::before{content:"Ditekia: ";color:var(--lj-c)}
  .tempo{grid-template-columns:1fr;padding:0 0 0 30px;gap:40px}
  .tempo .trilha{top:0;bottom:0;left:6px;right:auto;width:2px;height:auto}
  .tempo .trilha i{transform-origin:top;transform:scaleY(var(--p,0))}
  .tempo li::before{top:4px;left:-30px}
  .faq-g h2{position:static}
  .fluxo{grid-template-columns:repeat(2,1fr);row-gap:20px}.fluxo::before,.fluxo::after{display:none}
  .kcol{min-height:150px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-r],.js .chat>*{opacity:1;transform:none;filter:none}
  .app{transform:none}
}

/* pular para o conteúdo */
.pular{position:absolute;left:-999px;top:8px;z-index:100;background:var(--lj-e);color:#fff;padding:8px 14px;border-radius:8px}
.pular:focus{left:8px}

/* 4b · cérebro da operação */
.cerebro{background:var(--n0)}
.cer{display:grid;grid-template-columns:.85fr 1.15fr;gap:14px;align-items:stretch}
.cer-fontes{border:1px solid var(--l);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:18px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01))}
.cer-rot{font:400 10.5px var(--m);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.cer-fontes ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cer-fontes li{display:flex;align-items:center;gap:9px;padding:11px 12px;border:1px solid var(--l);border-radius:9px;font:500 13.5px var(--t);color:rgba(255,255,255,.72);transition:border-color .35s,background .35s,color .35s,box-shadow .35s}
.cer-fontes li .ic{width:16px;height:16px;color:var(--lj-c)}
.cer-fontes li.usa{border-color:var(--lj);background:rgba(240,106,29,.12);color:#fff;box-shadow:0 0 0 3px rgba(240,106,29,.14)}
.nucleo{margin-top:auto;display:flex;align-items:center;gap:14px;padding:16px;border-radius:12px;border:1px solid rgba(240,106,29,.35);background:radial-gradient(120% 140% at 0% 50%,rgba(240,106,29,.18),transparent 60%)}
.nucleo b{display:block;font:600 16px var(--t)}
.nucleo small{color:rgba(255,255,255,.55);font-size:12.5px}
.nucleo img{transition:filter .4s,transform .4s}
.nucleo.pensa img{filter:drop-shadow(0 0 12px rgba(240,106,29,.9));transform:scale(1.08)}
.cer-tela{border:1px solid var(--l2);border-radius:14px;background:linear-gradient(180deg,#121C33,#0C1426);overflow:hidden;display:flex;flex-direction:column}
.cer-tela .app-bar .vivo{margin-left:auto;margin-right:10px}
.cer-corpo{padding:20px;flex:1;display:flex;flex-direction:column;gap:14px}
.canal{align-self:flex-start;font:400 10.5px var(--m);letter-spacing:.1em;text-transform:uppercase;color:var(--lj-c);border:1px solid rgba(255,159,90,.3);border-radius:4px;padding:5px 8px;transition:opacity .3s}
.cer-chat{min-height:230px;justify-content:flex-end}
.fonte{align-self:flex-end;font:400 11px var(--m);letter-spacing:.04em;color:rgba(255,255,255,.55);display:flex;gap:6px;align-items:center}
.fonte::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lj)}
.cer-ganhos{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;border-top:1px solid var(--l);padding-top:28px}
.cer-ganhos li{color:rgba(255,255,255,.6);font-size:15.5px;line-height:1.55}
.cer-ganhos b{display:block;color:#fff;font:600 17px/1.35 var(--t);letter-spacing:-.01em;margin-bottom:6px}
@media (max-width:820px){
  .cer,.cer-ganhos{grid-template-columns:1fr}
  .cer-ganhos{gap:20px}
}