/* Lachev — folha compartilhada das landings de serviço (Software sob demanda
   e RPA sob demanda). Mesmos tokens e classes da home (index.html); a home
   segue com CSS inline de propósito, esta folha só evita duplicar em duas
   páginas. */
:root{
  --bg:#0b0b0c; --bg-2:#111113; --surface:rgba(255,255,255,.035); --line:rgba(201,164,76,.18);
  --ink:#f3efe6; --muted:#9a968c;
  --gold:#c9a44c; --gold-light:#f1d68a; --gold-dark:#8a6a24; --gold-glow:rgba(201,164,76,.35);
  --metal:linear-gradient(110deg,#8a6a24 0%,#c9a44c 25%,#f7e3a1 50%,#c9a44c 75%,#8a6a24 100%);
  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:76px; overflow-x:hidden; overflow-x:clip}
body{margin:0; background:var(--bg); color:var(--ink); min-height:100%; font:16px/1.65 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-x:clip}
a{color:inherit}
::selection{background:var(--gold); color:#0b0b0c}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px; position:relative}

/* fundo: grade + brilhos (sem canvas aqui, página mais leve) */
.fundo{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none}
.grid-bg{position:absolute; inset:0;
  background-image:linear-gradient(rgba(201,164,76,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(201,164,76,.06) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 55% at 50% 0%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 0%,#000 30%,transparent 100%)}
.glow{position:absolute; border-radius:50%; filter:blur(90px); opacity:.35; background:radial-gradient(circle,var(--gold) 0%,transparent 70%); animation:drift 18s ease-in-out infinite alternate}
.glow.a{width:520px; height:520px; top:-160px; right:-120px}
.glow.b{width:420px; height:420px; bottom:-180px; left:-140px; animation-delay:-9s; opacity:.22}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(-40px,60px,0) scale(1.15)}}
main, .rodape{position:relative; z-index:1}

/* topo */
header{position:fixed; top:0; left:0; right:0; z-index:5; padding:14px 0;
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  background:rgba(11,11,12,.45); border-bottom:1px solid transparent; transition:border-color .3s ease, background .3s ease, padding .3s ease}
header.scrolled{border-bottom-color:var(--line); background:rgba(11,11,12,.7); padding:10px 0; box-shadow:0 8px 30px rgba(0,0,0,.35)}
main{padding-top:68px}
.bar{display:flex; align-items:center; justify-content:space-between; gap:16px}
.logo{display:flex; align-items:center; gap:12px; text-decoration:none}
.logo img{width:38px; height:38px; border-radius:50%; box-shadow:0 0 18px var(--gold-glow)}
.logo b{font-weight:800; letter-spacing:.14em; font-size:17px; background:var(--metal); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent}
.logo small{display:block; font-size:9.5px; letter-spacing:.22em; color:var(--muted); font-weight:500; margin-top:-2px}
.nav{display:flex; gap:28px; font-size:13.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.nav a{text-decoration:none; position:relative; padding:4px 0; transition:color .2s}
.nav a::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold); transition:width .25s ease}
.nav a:hover, .nav a.ativo{color:var(--gold-light)} .nav a:hover::after, .nav a.ativo::after{width:100%}
@media (max-width:620px){ .nav{display:none} }

/* hero */
.hero{min-height:calc(88vh - 68px); display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; padding:48px 0 56px}
@media (max-width:860px){ .hero{grid-template-columns:1fr; min-height:0; padding-top:36px} }
.eyebrow{display:inline-flex; align-items:center; gap:10px; font:500 12px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--gold-light);
  border:1px solid var(--line); padding:9px 14px; border-radius:99px; background:rgba(201,164,76,.06); margin-bottom:26px}
.eyebrow i{width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 0 rgba(74,222,128,.6); animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.6)} 70%{box-shadow:0 0 0 9px rgba(74,222,128,0)} 100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
h1{font-size:clamp(34px,5.2vw,60px); line-height:1.06; letter-spacing:-.025em; margin:0 0 22px; font-weight:800}
.shine{background:var(--metal); background-size:250% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 6s linear infinite}
@keyframes shine{to{background-position:250% center}}
.lede{font-size:clamp(16px,2vw,19px); color:var(--muted); margin:0 0 34px; max-width:56ch}
.cta{display:flex; flex-wrap:wrap; gap:14px}
.btn{display:inline-flex; align-items:center; gap:10px; padding:13px 24px; border-radius:10px; text-decoration:none; font-weight:600; font-size:15px;
  border:1px solid transparent; position:relative; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease, border-color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--metal); background-size:200% auto; color:#0b0b0c; box-shadow:0 8px 30px var(--gold-glow)}
.btn-primary:hover{background-position:right center; box-shadow:0 12px 40px var(--gold-glow)}
.btn-ghost{border-color:var(--line); color:var(--ink); background:var(--surface)}
.btn-ghost:hover{border-color:var(--gold)}

/* arte do hero: "terminal"/painel com linhas que aparecem */
.hero-art{position:relative; user-select:none}
.term{border:1px solid var(--line); border-radius:16px; background:rgba(17,17,19,.85); backdrop-filter:blur(8px); box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(201,164,76,.06); overflow:hidden; animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
.term .tb{display:flex; gap:7px; padding:12px 14px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.02)}
.term .tb i{width:10px; height:10px; border-radius:50%; background:rgba(201,164,76,.35)} .term .tb i:first-child{background:#e5534b} .term .tb i:nth-child(2){background:#e0b341} .term .tb i:nth-child(3){background:#4ade80}
.term .tb span{margin-left:auto; font:500 11px/1 var(--mono); color:var(--muted); letter-spacing:.1em}
.term pre{margin:0; padding:18px 18px 20px; font:13px/1.75 var(--mono); color:#d9d4c8; white-space:pre-wrap; word-break:break-word}
.term .l{display:block; opacity:0; transform:translateX(-6px); animation:lin .5s ease forwards}
.term .l:nth-child(1){animation-delay:.2s}.term .l:nth-child(2){animation-delay:.9s}.term .l:nth-child(3){animation-delay:1.6s}.term .l:nth-child(4){animation-delay:2.3s}.term .l:nth-child(5){animation-delay:3s}.term .l:nth-child(6){animation-delay:3.7s}.term .l:nth-child(7){animation-delay:4.4s}
@keyframes lin{to{opacity:1; transform:none}}
.term .ok{color:#4ade80} .term .g{color:var(--gold-light)} .term .m{color:var(--muted)}
.term .cur::after{content:"▍"; animation:blink 1s steps(2) infinite; color:var(--gold)}
@keyframes blink{50%{opacity:0}}

/* seções */
section{padding:84px 0}
.head{margin-bottom:40px; max-width:640px}
.kicker{font:500 12px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; display:flex; align-items:center; gap:10px}
.kicker::before{content:""; width:28px; height:1px; background:var(--gold)}
h2{font-size:clamp(28px,3.6vw,40px); letter-spacing:-.02em; margin:0 0 10px; font-weight:800; line-height:1.1}
.head p{color:var(--muted); margin:0; font-size:16.5px}

/* cards (brilho segue o mouse) */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
.card{--mx:50%; --my:50%; position:relative; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px; display:flex; flex-direction:column;
  overflow:hidden; text-decoration:none; transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s}
.card::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s; background:radial-gradient(420px circle at var(--mx) var(--my),rgba(201,164,76,.16),transparent 45%)}
.card::after{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(300px circle at var(--mx) var(--my),var(--gold-light),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
.card:hover{transform:translateY(-6px); box-shadow:0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(201,164,76,.15)}
.card:hover::before, .card:hover::after{opacity:1}
.icon{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; margin-bottom:16px; color:var(--gold-light);
  background:linear-gradient(135deg,rgba(201,164,76,.22),rgba(201,164,76,.05)); border:1px solid var(--line)}
.icon svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.card h3{margin:0 0 8px; font-size:18px; letter-spacing:-.01em; font-weight:700}
.card p{margin:0; color:var(--muted); font-size:14.6px}

/* passos */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; counter-reset:step}
.step{border:1px solid var(--line); border-radius:16px; padding:26px; background:var(--surface); position:relative; overflow:hidden}
.step::before{counter-increment:step; content:"0" counter(step); position:absolute; right:18px; top:10px; font:800 56px/1 var(--mono); color:rgba(201,164,76,.08)}
.step h3{margin:0 0 8px; font-size:17px}
.step p{margin:0; color:var(--muted); font-size:14.5px}
.step small{display:block; margin-top:12px; font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--gold)}

/* lista "sinais" / "para quem": duas colunas de checks */
.checks{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px 28px; list-style:none; margin:0; padding:0}
.checks li{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:#d9d4c8; font-size:15px}
.checks li::before{content:"✓"; flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; color:#0b0b0c; background:var(--metal); background-size:200% auto}

/* faixa "ponte" entre os dois serviços */
.ponte{border:1px solid var(--line); border-radius:18px; padding:26px 28px; background:linear-gradient(120deg,rgba(201,164,76,.08),rgba(17,17,19,.9) 60%);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.ponte b{display:block; font-size:18px; margin-bottom:4px} .ponte p{margin:0; color:var(--muted); font-size:14.5px; max-width:60ch}

/* faq */
.faq{display:grid; gap:10px; max-width:820px}
.faq details{border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden}
.faq summary{cursor:pointer; list-style:none; padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; gap:14px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font:500 20px/1 var(--mono); color:var(--gold); transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0; padding:0 22px 20px; color:var(--muted); font-size:15px}

/* contato / cta */
#contato .panel{position:relative; overflow:hidden; border:1px solid var(--line); border-radius:22px; padding:48px; background:linear-gradient(160deg,rgba(201,164,76,.09),rgba(17,17,19,.9) 45%)}
#contato .panel::before{content:""; position:absolute; width:380px; height:380px; right:-120px; top:-140px; border-radius:50%; background:radial-gradient(circle,var(--gold-glow),transparent 70%); filter:blur(30px); pointer-events:none}
@media (max-width:620px){ #contato .panel{padding:30px 22px} }
#contato .panel > p{color:var(--muted); margin:8px 0 0; max-width:56ch}
.contatos{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px; margin-top:32px}
.contato{display:flex; gap:14px; align-items:flex-start}
.contato .ic{width:40px; height:40px; flex:none; border-radius:11px; display:grid; place-items:center; font-size:18px; background:rgba(201,164,76,.1); border:1px solid var(--line)}
.contato b{display:block; font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.contato a, .contato span.val{text-decoration:none; font-weight:600; font-size:15px; word-break:break-word}
.contato a:hover{color:var(--gold-light)}

/* rodapé (mesmo da home) */
.rodape{border-top:1px solid var(--line); margin-top:20px; padding:44px 0 40px; color:var(--muted); font-size:13px}
.rodape .cols{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:28px}
.rodape .marca{display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:800; letter-spacing:.16em; font-size:14px}
.rodape .marca img{width:34px; height:34px; border-radius:9px}
.rodape .marca small{display:block; font-size:9px; letter-spacing:.3em; color:var(--gold); font-weight:600}
.rodape .sobre{margin:14px 0 0; max-width:340px; line-height:1.6}
.rodape h4{margin:0 0 12px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-light); font-family:var(--mono); font-weight:600}
.rodape ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.rodape ul a, .rodape ul button{color:var(--muted); text-decoration:none; background:none; border:0; padding:0; font:inherit; cursor:pointer; transition:color .2s}
.rodape ul a:hover, .rodape ul button:hover{color:var(--gold-light)}
.rodape .linha{margin-top:36px; padding-top:18px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-family:var(--mono); font-size:12px}
.rodape .linha span:last-child{color:var(--gold-dark)}
@media (max-width:760px){ .rodape .cols{grid-template-columns:1fr 1fr} .rodape .cols > div:first-child{grid-column:1/-1} }

/* revelação por scroll */
.rv{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1; transform:none}
.rv.d1{transition-delay:.08s} .rv.d2{transition-delay:.16s} .rv.d3{transition-delay:.24s} .rv.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .rv{opacity:1; transform:none} .term .l{opacity:1; transform:none}
}