/* =====================================================================
   Safis Tecnologia — identidade do site
   ---------------------------------------------------------------------
   Empresa de tecnologia: automação de trabalho repetitivo de computador.
   Não é site de contabilidade e não deve parecer um.

   Base: quase-preto de grafite azulado. Acento: cobre — herda a única cor
   que existia na marca antiga da Safis, sem trazer o resto dela, e evita
   os dois clichês de site gerado por IA (verde-ácido no preto, degradê
   roxo no branco).

   Tipos: Bricolage Grotesque nos títulos (tem personalidade e larguras
   variáveis), Archivo no texto corrido, JetBrains Mono nos rótulos e
   dados técnicos.
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --breu:#0C0D11; --painel:#14161D; --painel-2:#1A1D26; --campo:#101218;
  --linha:#232733; --linha-2:#333949;
  --gelo:#EDEFF4; --gelo-2:#A3A9B8; --gelo-3:#6C7382;
  --cobre:#E5893F; --cobre-esc:#C46F2A; --cobre-fraco:rgba(229,137,63,.12);
  --verde:#3ECF8E; --verde-fraco:rgba(62,207,142,.12);
  --display:'Bricolage Grotesque','Archivo',system-ui,sans-serif;
  --sans:'Archivo','Segoe UI',system-ui,sans-serif;
  --mono:'JetBrains Mono',Consolas,monospace;
  --r:12px;
  --dentro:1120px;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--breu);color:var(--gelo);
     font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
body::before{               /* atmosfera: um brilho frio no alto, discreto */
  content:'';position:fixed;inset:0 0 auto 0;height:520px;pointer-events:none;z-index:0;
  background:radial-gradient(1100px 420px at 18% -10%,rgba(229,137,63,.10),transparent 70%),
             radial-gradient(900px 400px at 82% -15%,rgba(62,207,142,.05),transparent 70%)}
main,header,footer{position:relative;z-index:1}
a{color:var(--cobre);text-decoration:none}
::selection{background:var(--cobre);color:#14161D}
:focus-visible{outline:2px solid var(--cobre);outline-offset:3px;border-radius:3px}

.dentro{max-width:var(--dentro);margin:0 auto;padding:0 26px}

/* ===== marca ===== */
.marca{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--gelo)}
.marca .glifo{width:32px;height:32px;flex:none}
.marca .nome{font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.02em;line-height:1}
.marca .nome b{color:var(--cobre);font-weight:800}
.marca .nome small{display:block;font-family:var(--mono);font-size:9.5px;font-weight:500;
     letter-spacing:.2em;text-transform:uppercase;color:var(--gelo-2);margin-top:3px}

/* ===== topo ===== */
header.topo{position:sticky;top:0;z-index:40;background:rgba(12,13,17,.82);
     backdrop-filter:blur(12px);border-bottom:1px solid var(--linha)}
header.topo .dentro{display:flex;align-items:center;gap:26px;min-height:70px}
header.topo nav{margin-left:auto;display:flex;align-items:center;gap:26px}
header.topo nav a:not(.botao){color:var(--gelo-2);font-size:14.5px;font-weight:500}
header.topo nav a:not(.botao):hover{color:var(--gelo)}
@media(max-width:860px){header.topo nav .oculta{display:none}}

/* ===== botões ===== */
.botao{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:600;
     font-size:15px;padding:12px 20px;border-radius:9px;border:1px solid var(--cobre);
     background:var(--cobre);color:#17181D;transition:transform .14s,background .14s,border-color .14s}
.botao:hover{background:var(--cobre-esc);border-color:var(--cobre-esc);transform:translateY(-1px)}
.botao.vazio{background:transparent;color:var(--gelo);border-color:var(--linha-2)}
.botao.vazio:hover{background:var(--painel-2);border-color:var(--gelo-3);transform:translateY(-1px)}
.botao.pequeno{padding:9px 15px;font-size:13.5px}

/* ===== rótulos de seção ===== */
.olho{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;
     font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--cobre);margin-bottom:16px}
.olho::before{content:'';width:26px;height:1px;background:var(--cobre);opacity:.6}

h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.06}
h1{font-size:clamp(36px,6.2vw,68px)}
h2{font-size:clamp(27px,3.9vw,40px);line-height:1.1}
h3{font-size:19px;letter-spacing:-.02em;line-height:1.25}
.guia{color:var(--gelo-2);font-size:18px;max-width:58ch}
section{padding:88px 0;border-top:1px solid var(--linha)}
section:first-of-type{border-top:0}

/* ===== abertura ===== */
.abertura{padding:76px 0 84px}
.abertura h1{max-width:17ch;margin-bottom:22px}
.abertura h1 em{font-style:normal;color:var(--cobre)}
.abertura .guia{margin-bottom:34px}
.acoes{display:flex;gap:12px;flex-wrap:wrap}
.pos-acoes{font-family:var(--mono);font-size:12px;color:var(--gelo-3);margin-top:20px}

/* ===== esteira: a assinatura da página =====
   Uma automação, etapa por etapa. É o que a empresa faz, em abstrato. */
.esteira{margin-top:56px;background:var(--painel);border:1px solid var(--linha);
     border-radius:var(--r);padding:26px 24px 24px;overflow:hidden}
.esteira .cabeca{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;
     letter-spacing:.16em;text-transform:uppercase;color:var(--gelo-3);
     padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--linha)}
.esteira .cabeca .pulso{width:7px;height:7px;border-radius:50%;background:var(--verde);
     box-shadow:0 0 0 0 rgba(62,207,142,.6);animation:pulsar 2.4s ease-out infinite}
@keyframes pulsar{0%{box-shadow:0 0 0 0 rgba(62,207,142,.55)}70%{box-shadow:0 0 0 11px rgba(62,207,142,0)}100%{box-shadow:0 0 0 0 rgba(62,207,142,0)}}
.etapas{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
.etapa{padding:0 16px;position:relative;opacity:0;animation:surgir .5s ease-out forwards}
.etapa:first-child{padding-left:0}
.etapa:last-child{padding-right:0}
.etapa::after{content:'';position:absolute;top:13px;right:-6px;width:12px;height:12px;
     border-top:1px solid var(--linha-2);border-right:1px solid var(--linha-2);
     transform:rotate(45deg)}
.etapa:last-child::after{display:none}
.etapa .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--gelo-3);
     display:block;margin-bottom:12px}
.etapa .marca-ok{width:26px;height:26px;border-radius:50%;border:1px solid var(--verde);
     color:var(--verde);display:flex;align-items:center;justify-content:center;font-size:13px;
     margin-bottom:13px;background:var(--verde-fraco)}
.etapa strong{display:block;font-family:var(--display);font-weight:700;font-size:15.5px;
     letter-spacing:-.01em;margin-bottom:5px}
.etapa span{font-size:13.5px;color:var(--gelo-2);display:block}
@keyframes surgir{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.esteira .rodape{margin-top:24px;padding-top:18px;border-top:1px solid var(--linha);
     font-family:var(--mono);font-size:12.5px;color:var(--gelo-2)}
.esteira .rodape b{color:var(--verde);font-weight:500}
@media(max-width:860px){
  .etapas{grid-template-columns:1fr 1fr}
  .etapa{padding:14px 12px}
  .etapa::after{display:none}
}
@media(max-width:520px){.etapas{grid-template-columns:1fr}}

/* ===== catálogo de sistemas ===== */
.sistemas{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;margin-top:38px}
@media(max-width:860px){.sistemas{grid-template-columns:1fr}}
.sistema{background:var(--painel);border:1px solid var(--linha);border-radius:var(--r);
     padding:30px 28px;display:flex;flex-direction:column;transition:border-color .18s,transform .18s}
.sistema:hover{border-color:var(--linha-2);transform:translateY(-2px)}
.sistema.destaque{border-color:rgba(229,137,63,.4);
     background:linear-gradient(180deg,rgba(229,137,63,.06),transparent 58%),var(--painel)}
.sistema .estado{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
     padding:4px 10px;border-radius:20px;align-self:flex-start;margin-bottom:18px}
.sistema .estado.rodando{background:var(--verde-fraco);color:var(--verde)}
.sistema .estado.medida{background:var(--cobre-fraco);color:var(--cobre)}
.sistema h3{font-size:26px;margin-bottom:5px}
.sistema .sub{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--gelo-3);
     text-transform:uppercase;margin-bottom:16px}
.sistema p{color:var(--gelo-2);font-size:15.5px;margin-bottom:18px}
.sistema ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.sistema li{font-size:14.5px;color:var(--gelo-2);padding-left:22px;position:relative}
.sistema li::before{content:'▸';position:absolute;left:0;color:var(--cobre)}
.sistema .pe{margin-top:auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
     padding-top:20px;border-top:1px solid var(--linha)}
.sistema .valor{font-family:var(--mono);font-size:13px;color:var(--gelo-3)}
.sistema .valor b{color:var(--gelo);font-size:17px;font-weight:600}

/* ===== capacidades ===== */
.grade-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:1px;
     margin-top:38px;background:var(--linha);border:1px solid var(--linha);border-radius:var(--r);
     overflow:hidden}
.capacidade{background:var(--breu);padding:28px 24px;transition:background .18s}
.capacidade:hover{background:var(--painel)}
.capacidade .icone{color:var(--cobre);margin-bottom:16px;display:block}
.capacidade h3{font-size:17px;margin-bottom:8px}
.capacidade p{font-size:14.5px;color:var(--gelo-2)}

/* ===== processo ===== */
.passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px;margin-top:38px}
.passo{border-top:2px solid var(--linha-2);padding-top:20px}
.passo:first-child{border-top-color:var(--cobre)}
.passo .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--cobre);
     display:block;margin-bottom:9px}
.passo h3{font-size:17px;margin-bottom:7px}
.passo p{font-size:14.5px;color:var(--gelo-2)}

/* ===== quem faz ===== */
.quem{display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:start;margin-top:34px}
@media(max-width:860px){.quem{grid-template-columns:1fr;gap:30px}}
.quem p{color:var(--gelo-2);margin-bottom:16px}
.quem p b{color:var(--gelo);font-weight:600}
.fatos{background:var(--painel);border:1px solid var(--linha);border-radius:var(--r);padding:8px 22px}
.fato{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
     padding:16px 0;border-bottom:1px solid var(--linha)}
.fato:last-child{border-bottom:0}
.fato .rot{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
     color:var(--gelo-3)}
.fato .val{font-family:var(--display);font-weight:700;font-size:17px;text-align:right}
.fato .val small{display:block;font-family:var(--mono);font-size:11px;font-weight:400;
     color:var(--gelo-3);letter-spacing:.04em;margin-top:2px}

/* ===== fecho ===== */
.fecho{border:1px solid rgba(229,137,63,.34);border-radius:var(--r);padding:46px 40px;
     background:linear-gradient(135deg,rgba(229,137,63,.10),transparent 62%),var(--painel);
     display:flex;gap:30px;align-items:center;flex-wrap:wrap;margin:20px 0 0}
.fecho h2{max-width:22ch;margin:0}
.fecho .lado{margin-left:auto;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.fecho .zap{font-family:var(--mono);font-size:12.5px;color:var(--gelo-3)}

/* ===== rodapé ===== */
footer{border-top:1px solid var(--linha);padding:44px 0 60px;font-size:14.5px;color:var(--gelo-2)}
footer .linhas{display:flex;gap:46px;flex-wrap:wrap;justify-content:space-between}
footer .coluna h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
     color:var(--gelo-3);font-weight:500;margin-bottom:14px}
footer .coluna a{display:block;color:var(--gelo-2);margin-bottom:8px}
footer .coluna a:hover{color:var(--cobre)}
footer .fim{margin-top:38px;padding-top:22px;border-top:1px solid var(--linha);
     font-family:var(--mono);font-size:11.5px;color:var(--gelo-3);display:flex;gap:20px;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .etapa{opacity:1}
}