/* Camada visual — aplica o guia "Frontend Aesthetics" (claude-cookbooks,
   coding/prompting_for_frontend_aesthetics.ipynb) sem mexer no style.min.css:
   - Cor/tema: o escuro do hero da home vira o tema dominante de todas as
     páginas internas; o laranja da marca fica só como acento.
   - Tipografia: contrastes extremos (800 x 400, saltos de tamanho de 3x) e o
     JetBrains Mono usado com decisão em trilhas e metadados.
   - Movimento: UMA entrada orquestrada no hero (animation-delay escalonado),
     CSS puro, desligada com prefers-reduced-motion.
   - Fundos: atmosfera em camadas (brilho, grade, linhas de varredura) em vez
     de cor chapada.
   Carregado depois do style.min.css pelo build_site.py. Para desfazer, basta
   tirar o <link> de visual.css. */

:root{
  --night:#0C0E12;          /* fundo dominante */
  --night-2:#151821;        /* superfície sobre o escuro */
  --night-line:rgba(255,255,255,.08);
  --night-text:#C3C8D2;
  --night-muted:#868C99;
  --glow:rgba(241,90,41,.22);
}

/* ---------- heros internos: tema escuro com atmosfera ---------- */
.svc-hero,.page-hero,.c-hero{
  color:#fff;
  background:
    radial-gradient(760px 420px at 88% 0%,var(--glow),transparent 62%),
    radial-gradient(520px 340px at 0% 100%,rgba(241,90,41,.08),transparent 70%),
    linear-gradient(180deg,var(--night) 0%,#10131A 100%);
  border-bottom:1px solid var(--night-line);
}
/* grade técnica, mais visível no canto do brilho */
.svc-hero::before,.page-hero::before,.c-hero::before{
  background-image:
    linear-gradient(var(--night-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--night-line) 1px,transparent 1px);
  background-size:56px 56px;
  opacity:1;
  -webkit-mask-image:radial-gradient(70% 90% at 80% 10%,#000,transparent 75%);
          mask-image:radial-gradient(70% 90% at 80% 10%,#000,transparent 75%);
}
/* linhas de varredura de monitor (SOC) */
.svc-hero::after,.page-hero::after,.c-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px);
}
.svc-hero-in,.page-hero .wrap,.c-hero-in{position:relative;z-index:1}
.svc-hero-in{padding:56px 24px 88px}
.c-hero-in{padding:56px 24px 64px}

.svc-hero h1,.page-hero h1,.c-hero h1{
  color:#fff;font-weight:800;letter-spacing:-.035em;line-height:1.02;
  font-size:clamp(38px,5vw,64px);
}
.svc-hero .accent,.page-hero .accent,.c-hero .accent{color:var(--accent-2)}
.svc-hero .svc-intro,.page-hero p,.c-hero p{color:var(--night-text);font-weight:400}

/* trilha (breadcrumb) como caminho de terminal */
.svc-hero .breadcrumb,.page-hero .breadcrumb,.c-hero .breadcrumb{
  font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:500;
  color:var(--night-muted);letter-spacing:.02em;
}
.svc-hero .breadcrumb::before,.page-hero .breadcrumb::before,.c-hero .breadcrumb::before{
  content:"$ ";color:var(--accent-2);
}
.svc-hero .breadcrumb a:hover,.page-hero .breadcrumb a:hover,.c-hero .breadcrumb a:hover{color:#fff}

.svc-hero .btn-ghost,.page-hero .btn-ghost,.c-hero .btn-ghost{
  color:#fff;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.04)
}
.svc-hero .btn-ghost:hover,.page-hero .btn-ghost:hover,.c-hero .btn-ghost:hover{
  background:#fff;color:var(--ink);border-color:#fff
}

/* ---------- uma entrada orquestrada (só no hero) ---------- */
@keyframes nts-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes nts-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.svc-hero-in>*,.c-hero-in>*,.page-hero .wrap>*{animation:nts-in .7s cubic-bezier(.2,.7,.2,1) both}
.svc-hero-in>:nth-child(1),.c-hero-in>:nth-child(1),.page-hero .wrap>:nth-child(1){animation-delay:.05s}
.svc-hero-in>:nth-child(2),.c-hero-in>:nth-child(2),.page-hero .wrap>:nth-child(2){animation-delay:.15s}
.svc-hero-in>:nth-child(3),.c-hero-in>:nth-child(3),.page-hero .wrap>:nth-child(3){animation-delay:.27s}
.svc-hero-in>:nth-child(4),.c-hero-in>:nth-child(4),.page-hero .wrap>:nth-child(4){animation-delay:.42s}
.svc-hero-in>:nth-child(n+5),.c-hero-in>:nth-child(n+5),.page-hero .wrap>:nth-child(n+5){animation-delay:.55s}
/* filete laranja que "acende" na base do hero */
.svc-hero-in::after,.c-hero-in::after{
  content:"";position:absolute;left:24px;bottom:0;width:120px;height:2px;
  background:linear-gradient(90deg,var(--accent),transparent);
  transform-origin:left;animation:nts-rule .9s .7s cubic-bezier(.2,.7,.2,1) both;
}

/* ---------- números: contraste extremo ---------- */
.stat-card .sc-num{font-size:clamp(40px,5vw,60px);letter-spacing:-.04em}
.stat-card p{font-weight:500}

/* ---------- seções alternadas: textura em vez de cinza chapado ---------- */
.sec-alt{
  background:
    radial-gradient(rgba(20,22,28,.07) 1px,transparent 1.4px) 0 0/22px 22px,
    var(--bg-2);
}

/* ---------- títulos de seção: mais peso, mais aperto ---------- */
.sec-head h2,.svc-h2{letter-spacing:-.03em}

@media (max-width:600px){
  .svc-hero-in{padding:36px 16px 64px}
  .c-hero-in{padding:36px 16px 48px}
  .svc-hero-in::after,.c-hero-in::after{left:16px}
}

@media (prefers-reduced-motion:reduce){
  .svc-hero-in>*,.c-hero-in>*,.page-hero .wrap>*,
  .svc-hero-in::after,.c-hero-in::after{animation:none}
}

/* faixa "Setores" no rodapé do mega menu de Serviços */
.mega-setores{display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px;margin-top:10px;padding:12px 13px 4px;border-top:1px solid var(--line)}
.mega-setores span{font-size:12.5px;font-weight:700;color:var(--muted);margin-right:8px}
.mega-setores a{font-size:14px;font-weight:600;color:var(--ink-2);padding:6px 10px;border-radius:8px;transition:.2s}
.mega-setores a:hover{background:var(--bg-2);color:var(--accent)}

/* link abaixo dos depoimentos (.quote) */
.quote-inner .quote-cta{margin-top:26px}

/* menu "Conteúdo" (Blog, Cases): abre também pelo teclado */
.has-drop>a{cursor:pointer}
.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.has-drop:hover .caret,.has-drop:focus-within .caret{transform:rotate(180deg)}