/* ============================================================
   ARX Cyber — Seção 2: Missão (cards + plataforma NIST + stats)
   ============================================================ */
.arx-missao { background: var(--arx-bg); padding-block: 120px 110px; position: relative; overflow: hidden; }
/* glow azul de fundo — layer "Luz" do Figma, posições/cores MEDIDAS do render:
   E1 554×196 @ (959,1189) e E2 430×146 @ (555,1607), cor #1574ff difusa.
   Coordenadas relativas ao topo da seção (Figma y − 836). */
.arx-missao__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(540px 320px at 50% 353px, rgba(21,116,255,.46), rgba(21,116,255,.14) 48%, transparent 86%),
    radial-gradient(520px 300px at 27% 771px, rgba(21,116,255,.34), rgba(21,116,255,.10) 48%, transparent 86%);
}
.arx-missao > .arx-container { position: relative; z-index: 1; }
.arx-missao__head { margin-bottom: 56px; }
.arx-missao__title { max-width: 640px; margin: 12px auto 0; }

/* ---- Cards de serviço ---- */
.arx-cards {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
}
.arx-card-svc {
  position: relative; border-radius: 16px; padding: 24px;
  min-height: 381px; display: flex; flex-direction: column;
  background: #1b1b1b;              /* dark chapado, sem glow interno (medido do Figma) */
  overflow: hidden;
  transition: transform .3s var(--arx-ease);
}
.arx-card-svc::before {   /* borda 1px: azul ARX no canto topo-esquerdo → cinza (medido do Figma) */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: radial-gradient(180% 130% at 0% 0%,
    #1874ec 0%, #2f5fb1 10%, rgba(48,69,101,.9) 22%, #252527 38%, #252527 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

/* ---- Hover: feixe sutil na borda (como nos botões, mais lento) + lift ---- */
.arx-card-svc::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--arx-beam),
    transparent 0deg, transparent 78%,
    rgba(88,150,255,.55) 88%, rgba(160,200,255,.85) 92%, rgba(88,150,255,.55) 96%,
    transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s var(--arx-ease);
  pointer-events: none;
}
.arx-card-svc:hover { transform: translateY(-4px); }
.arx-card-svc:hover::after { opacity: 1; animation: arx-beam-spin 3.5s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .arx-card-svc:hover { transform: none; }
  .arx-card-svc:hover::after { animation: none; opacity: .5; }
}
.arx-card-svc__icon { width: 44px; height: 44px; margin-bottom: 60px; }
.arx-card-svc__icon img { width: 100%; height: 100%; object-fit: contain; }
.arx-card-svc__title { font-size: var(--fs-h3); line-height: 28px; font-weight: var(--fw-semibold); margin-bottom: 12px; }
.arx-card-svc__desc { font-size: var(--fs-base); line-height: var(--lh-base); color: var(--arx-grey-90); }
.arx-card-svc__link {
  margin-top: auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--arx-white-30);
  transition: background-color .3s var(--arx-ease), border-color .3s var(--arx-ease),
              transform .3s var(--arx-ease), box-shadow .3s var(--arx-ease);
}
.arx-card-svc__link img { width: 14px; height: 14px; filter: brightness(0) invert(1); transition: transform .3s var(--arx-ease); }
/* hover no card: seta acende em azul e desliza na diagonal (↗) */
.arx-card-svc:hover .arx-card-svc__link {
  background: var(--arx-blue); border-color: var(--arx-blue);
  transform: translate(2px, -2px);
  box-shadow: 0 4px 18px -6px rgba(21,116,255,.6);
}
.arx-card-svc:hover .arx-card-svc__link img { transform: translate(1px, -1px); }
@media (prefers-reduced-motion: reduce) {
  .arx-card-svc:hover .arx-card-svc__link, .arx-card-svc:hover .arx-card-svc__link img { transform: none; }
}

/* ---- Plataforma Civitas (NIST) ---- */
.arx-platform {   /* specs medidas do Figma 66:4868 (pixel a pixel) */
  position: relative;
  margin-top: 75px; border-radius: 20px; min-height: 424px;
  padding: 60px 80px;
  background:
    radial-gradient(420px 260px at 5% 6%, rgba(33,60,110,.32), transparent 70%),
    linear-gradient(180deg, #0e0f12 0%, #131314 55%, #141414 100%);
  display: grid; grid-template-columns: 426px 1fr; gap: 0; align-items: center;
}
.arx-platform::before {  /* borda 1px: azul no topo-esq + eco no baixo-esq, resto apagado */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background:
    radial-gradient(46% 62% at 0% 0%, #1567df 0%, rgba(21,101,223,.45) 45%, transparent 100%),
    radial-gradient(30% 42% at 0% 100%, rgba(21,80,160,.55), transparent 100%),
    linear-gradient(#1f1f20, #1f1f20);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.arx-nist-col { position: relative; padding-left: 46px; }
.arx-nist-col::before {  /* divisor vertical: 287px (medido, nó 66:4876) */
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 287px; background: rgba(255,255,255,.16);
}
.arx-platform__eyebrow { display: block; margin-bottom: 16px; }
.arx-platform__title { font-size: 40px; line-height: 46px; font-weight: var(--fw-regular); max-width: 400px; }
.arx-platform__title b { color: var(--arx-blue); font-weight: var(--fw-extrabold); }
.arx-platform__btn { margin-top: 28px; }

.arx-nist { display: flex; justify-content: space-between; position: relative; }
.arx-nist::before {   /* linha conectora */
  content: ""; position: absolute; top: 40px; left: 40px; right: 40px; height: 1px;
  background: linear-gradient(90deg, rgba(21,116,255,.15), rgba(21,116,255,.6), rgba(21,116,255,.15));
}
.arx-nist__step { position: relative; width: 15%; text-align: center; }
.arx-nist__circle {
  position: relative;
  width: 81px; height: 81px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(24,24,24,.2);         /* fill do SVG: #181818 20% */
  transition: transform .3s var(--arx-ease), box-shadow .3s var(--arx-ease);
}
.arx-nist__circle::before {  /* stroke 1px em gradiente diagonal (como no SVG) */
  content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 1px;
  background: linear-gradient(100deg, var(--step) 0%, var(--step) 35%,
    color-mix(in srgb, var(--step) 30%, #181818) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.arx-nist__step:hover .arx-nist__circle { transform: translateY(-4px); box-shadow: 0 0 40px -6px var(--step); }
.arx-nist__circle img { width: 34px; height: 34px; object-fit: contain; }
.arx-nist__circle img.arx-flip-y { transform: scaleY(-1); }
/* cor por etapa (segue o Figma) */
.arx-nist__step:nth-child(1) { --step: #1574ff; }  /* DISCOVER  azul   */
.arx-nist__step:nth-child(2) { --step: #04ffb2; }  /* PROTECT */
.arx-nist__step:nth-child(3) { --step: #77ff00; }  /* DETECT */
.arx-nist__step:nth-child(4) { --step: #ff8e0d; }  /* RESPOND */
.arx-nist__step:nth-child(5) { --step: #c036ff; }  /* RECOVER */
.arx-nist__step:nth-child(6) { --step: #ffea00; }  /* GOVERN */
.arx-nist__label { font-size: 13px; font-weight: var(--fw-semibold); letter-spacing: .5px; margin-bottom: 4px; color: var(--step); }
.arx-nist__desc { font-size: 10px; line-height: 14px; color: rgba(255,255,255,.6); }

/* ---- Stats + Reconhecimentos (layout medido: divisor 146px @x677, dir. @x796) ---- */
.arx-metrics { margin-top: 59px; display: grid; grid-template-columns: 677px 1px 1fr; gap: 0; align-items: flex-start; }
.arx-metrics__label { display: block; margin-bottom: 22px; }
.arx-stats { display: flex; gap: 41px; }
.arx-stat { min-width: 146px; }
.arx-stat__num { font-size: 44px; line-height: 44px; font-weight: var(--fw-semibold); color: var(--arx-white); }
.arx-stat__cap { font-size: 16px; color: rgba(255,255,255,.6); margin-top: 6px; }
.arx-metrics__divider { width: 1px; height: 146px; margin-top: -5px; background: rgba(255,255,255,.14); }
.arx-metrics > div:last-child { padding-left: 118px; }

.arx-awards { display: flex; gap: 56px; align-items: flex-start; }
.arx-award { display: flex; flex-direction: column; gap: 14px; max-width: 100px; }
.arx-award__logo { height: 29px; display: flex; align-items: center; }
.arx-award__logo img { max-height: 29px; width: auto; object-fit: contain; filter: brightness(0) invert(1); }
.arx-award__txt { font-size: 20px; line-height: 21px; font-weight: var(--fw-regular); color: rgba(255,255,255,.85); text-transform: uppercase; }

@media (max-width: 1024px) {
  .arx-cards { grid-template-columns: repeat(2, 1fr); }
  .arx-platform { grid-template-columns: 1fr; }
  .arx-nist { flex-wrap: wrap; gap: 24px; justify-content: center; }
  .arx-nist::before { display: none; }
  .arx-nist__step { width: 28%; }
  .arx-metrics { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .arx-cards { grid-template-columns: 1fr; }
  .arx-stats { flex-wrap: wrap; gap: 32px; }
  .arx-platform { padding: 32px 20px; }
}

/* ============================================================
   Missões — jornada de cinco cards (revisão do cliente)
   Substitui .arx-cards/.arx-card-svc nesta seção: cards mais leves,
   ligados por uma trilha, com o do meio em destaque.
   ============================================================ */
.arx-missao__rule {
  display: block; width: 34px; height: 2px; border-radius: 2px;
  background: var(--arx-blue); margin: 16px auto 22px;
}
.arx-missao__title b { color: var(--arx-blue); font-weight: inherit; }
.arx-missao__sub {
  margin-top: 20px; font-size: 18px; line-height: 25px;
  color: var(--arx-grey-90); text-align: center;
}

.mj { position: relative; margin-top: 56px; }
.mj__cards {
  position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px;
}

.mj-card {
  position: relative; display: flex; flex-direction: column;
  padding: 34px 26px 28px; border-radius: 18px;
  background: rgba(255, 255, 255, .022);
  border: 1px solid rgba(255, 255, 255, .09);
  color: var(--arx-white); text-decoration: none;
  transition: transform .35s var(--arx-ease), border-color .35s var(--arx-ease),
              background-color .35s var(--arx-ease);
}
.mj-card:hover { transform: translateY(-6px); border-color: rgba(21,116,255,.55); background: rgba(21,116,255,.05); }
.mj-card.is-destaque { border-color: rgba(21,116,255,.5); background: rgba(21,116,255,.055); }

/* trilha: só nos vãos entre os cards, na altura do ícone */
.mj-card:not(:first-child)::before {
  content: ""; position: absolute; left: -25px; top: 62px;
  width: 26px; height: 1px; background: rgba(21,116,255,.42);
}
.mj-card:not(:first-child)::after {
  content: ""; position: absolute; left: -12px; top: 62px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--arx-blue);
  box-shadow: 0 0 10px rgba(21,116,255,.85); transform: translate(-50%, -50%);
}
/* pulso no topo: sempre no destaque, no hover dos demais */
.mj-card__topo {
  position: absolute; left: 50%; top: -1px; width: 78px; height: 3px;
  transform: translateX(-50%); border-radius: 3px; background: var(--arx-blue);
  box-shadow: 0 0 20px 2px rgba(21,116,255,.9);
  opacity: 0; transition: opacity .35s var(--arx-ease);
}
.mj-card.is-destaque .mj-card__topo, .mj-card:hover .mj-card__topo { opacity: 1; }

.mj-card__ico { width: 72px; height: 72px; flex: none; color: var(--arx-blue); }
.mj-card__titulo {
  margin-top: 32px; font-size: 21px; line-height: 27px;
  font-weight: var(--fw-semibold); color: var(--arx-white);
}
.mj-card__desc {
  margin-top: 16px; flex: 1; font-size: 15px; line-height: 22px; color: var(--arx-grey-70);
}
.mj-card__seta {
  margin-top: 28px; font-size: 20px; line-height: 1; color: var(--arx-blue);
  transition: transform .3s var(--arx-ease);
}
.mj-card:hover .mj-card__seta { transform: translateX(6px); }

/* fecho */
.mj__fecho {
  margin-top: 48px; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.mj__marca { width: 40px; height: 40px; color: var(--arx-blue); }
.mj__fecho p {
  position: relative; display: flex; align-items: center; gap: 22px;
  font-size: 17px; line-height: 24px; color: var(--arx-white);
}
.mj__fecho p::before, .mj__fecho p::after {
  content: ""; width: 128px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(21,116,255,.45));
}
.mj__fecho p::after { background: linear-gradient(90deg, rgba(21,116,255,.45), transparent); }
.mj__fecho b { color: var(--arx-blue); font-weight: inherit; }

/* entrada em cascata */
html.arx-anim .mj-card {
  opacity: 0; transform: translateY(20px);
  transition: opacity .55s var(--arx-ease), transform .55s var(--arx-ease),
              border-color .35s var(--arx-ease), background-color .35s var(--arx-ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
html.arx-anim .mj.is-revealed .mj-card { opacity: 1; transform: none; }
html.arx-anim .mj.is-revealed .mj-card:hover { transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) {
  .mj-card:hover { transform: none; }
  html.arx-anim .mj-card { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Civitas na home (cvh-)
   Adaptação do wireframe do cliente à NOSSA linguagem: mesmo painel
   do .arx-platform original (container de 1280, sem borda, fundo em
   gradiente neutro com halo azul no canto), anel de 81px com o aro de
   1px em gradiente e a linha conectora na receita que já usávamos.
   O que entra do wireframe dele: 6 módulos com descrição, pulso de
   dados percorrendo a conexão e o bloco Civitas Core.
   ============================================================ */
.cvh {
  --cvh-ciclo: 7s;
  position: relative; margin-top: 75px;
  border-radius: 20px; padding: 60px 80px 58px;
  background:
    radial-gradient(420px 260px at 5% 6%, rgba(33,60,110,.32), transparent 70%),
    linear-gradient(180deg, #0e0f12 0%, #131314 55%, #141414 100%);
  overflow: hidden;
}
.cvh__grid {
  --cvh-esq: 46px;
  position: relative; display: grid; grid-template-columns: 426px 1fr; grid-template-rows: auto auto;
  gap: 0; align-items: center; min-height: 424px;
}
.cvh__grid::before {                             /* divisor vertical do layout original */
  content: ""; position: absolute; left: 426px; top: -22px; bottom: -22px; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.18) 8%,
    rgba(255,255,255,.18) 92%, transparent);
}
.cvh__intro { padding-right: 26px; }
.cvh__rule { display: none; }                    /* o eyebrow já separa; filete era do mockup dele */
.cvh__title {
  margin-top: 16px; font-size: 40px; line-height: 46px;
  font-weight: var(--fw-regular); color: var(--arx-white); max-width: 400px;
}
.cvh__title b { color: var(--arx-blue); font-weight: var(--fw-extrabold); }
.cvh__lead { margin-top: 22px; max-width: 380px; font-size: 16px; line-height: 24px; color: var(--arx-grey-90); }
.cvh__btn { margin-top: 28px; }

.cvh__modulos {
  --cvh-anel: 88px;
  --cvh-meio: calc(var(--cvh-anel) / 2);   /* altura do centro do anel: move trilho, trechos e nós juntos */
  position: relative;
  /* Recuo que põe a BORDA do 1º anel em --cvh-esq — o mesmo x onde o texto do
     Core começa. Sai de: borda = P + 7,5%·(W−P) − anel/2, resolvido para P.
     O recuo zera quando 7,5% da caixa já vale --cvh-esq + anel/2; daí para
     cima ele ficaria negativo (o navegador corta em zero) e o alinhamento se
     perderia — por isso a largura para de crescer exatamente nesse ponto. */
  padding-left: calc((var(--cvh-esq) + var(--cvh-anel) / 2 - 7.5%) / 0.925);
  max-width: calc((var(--cvh-esq) + var(--cvh-anel) / 2) / 0.075);
  display: flex; justify-content: space-between; align-items: flex-start;
}

.cvh__modulos::after {                           /* profundidade sob a fileira de anéis */
  content: ""; position: absolute; left: 8%; right: 2%; top: -18px; height: 118px;
  background: radial-gradient(58% 100% at 50% 50%, rgba(21,116,255,.11), transparent 72%);
  filter: blur(16px); pointer-events: none;
}
/* ── O circuito ──
   A linha nasce à esquerda, chega no anel, contorna ele por inteiro e sai do
   outro lado. Um ciclo = 6 contornos + 5 trechos de linha, alternados.
   Etapa i começa em i * 17% do ciclo: contorno em [17i, 17i+9], linha em
   [17i+9, 17i+17]. Cada peça só apaga depois que a seguinte acende, então a
   corrente nunca "pisca" — o brilho anda sem cortes.

   Geometria: o módulo é 15% da caixa de conteúdo e o passo entre centros é 17%,
   proporções constantes em qualquer viewport. O trilho vai de centro a centro,
   logo recua 7,5% da caixa de CONTEÚDO de cada ponta — daí o calc que desconta
   o padding, porque % em `left` resolve contra a caixa de padding. */
.cvh-mod:first-child::before {                   /* trilho: 5 passos a partir do 1º anel */
  content: ""; position: absolute; top: var(--cvh-meio); left: 50%;
  width: 566.67%; height: 1px; margin-top: -.5px;
  background: linear-gradient(90deg, rgba(21,116,255,.15), rgba(21,116,255,.6), rgba(21,116,255,.15));
  /* O anel é translúcido de propósito: o gradiente do painel precisa continuar
     aparecendo por baixo dele, então pintá-lo de opaco deixaria seis remendos
     chapados. Quem sai da frente é o trilho — a máscara abre um furo do
     tamanho do anel a cada passo, e a linha volta a MORRER na borda em vez de
     atravessar o disco, que é o que o desenho sempre disse que ela fazia.
     Um passo = 20% do trilho (5 passos entre os 6 anéis); o furo acompanha
     --cvh-anel sozinho. */
  --cvh-furo: calc(var(--cvh-anel) / 2 + 1px);
  -webkit-mask-image: repeating-linear-gradient(90deg,
      transparent 0, transparent var(--cvh-furo),
      #000 var(--cvh-furo), #000 calc(20% - var(--cvh-furo)),
      transparent calc(20% - var(--cvh-furo)), transparent 20%);
          mask-image: repeating-linear-gradient(90deg,
      transparent 0, transparent var(--cvh-furo),
      #000 var(--cvh-furo), #000 calc(20% - var(--cvh-furo)),
      transparent calc(20% - var(--cvh-furo)), transparent 20%);
}

/* Trecho aceso: vai do anel anterior até este, e existe só a partir do 2º. */
.cvh-mod + .cvh-mod::before {
  /* de borda a borda: parte do anel anterior e para no seguinte, sem entrar
     por baixo de nenhum dos dois */
  content: ""; position: absolute; top: var(--cvh-meio);
  left: calc(-63.33% + var(--cvh-anel) / 2);
  width: calc(113.33% - var(--cvh-anel));
  height: 1px; margin-top: -.5px; border-radius: 1px;
  transform: scaleX(0); transform-origin: left center; opacity: 0;
  background: linear-gradient(90deg, rgba(21,116,255,.55), var(--arx-blue-border));
  box-shadow: 0 0 9px rgba(21,116,255,.85);
}
html.arx-anim .cvh.is-revealed .cvh-mod + .cvh-mod::before {
  animation: cvh-linha var(--cvh-ciclo) cubic-bezier(.35,.1,.25,1) infinite;
  animation-delay: calc((var(--i, 1) - 1) * 0.17 * var(--cvh-ciclo));
}
@keyframes cvh-linha {
  0%, 9%      { transform: scaleX(0); opacity: 1; }   /* espera o anel contornar */
  17%         { transform: scaleX(1); opacity: 1; }   /* desenha até o próximo anel */
  26%         { transform: scaleX(1); opacity: 1; }   /* segura enquanto ele acende */
  34%         { transform: scaleX(1); opacity: 0; }
  34.01%, 100% { transform: scaleX(0); opacity: 0; }
}

/* Contorno do anel: dois arcos que nascem às 9h — onde a linha chega — e
   correm em sentidos opostos até se encontrarem às 3h, de onde a linha segue.
   pathLength="100" faz o dasharray virar porcentagem, então o traço independe
   do raio: mudar o tamanho do anel não quebra a animação. */
.cvh-mod__tracado {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
.cvh-mod__arco {
  fill: none; stroke: var(--arx-blue-border); stroke-width: 1.7; stroke-linecap: round;
  stroke-dasharray: 50 100; stroke-dashoffset: 50; opacity: 0;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 7px rgba(21,116,255,.85));
}
/* o giro leva o início do traçado das 3h para as 9h; o espelho inverte o sentido */
.cvh-mod__arco--cima  { transform: rotate(180deg); }
.cvh-mod__arco--baixo { transform: rotate(180deg) scaleY(-1); }
html.arx-anim .cvh.is-revealed .cvh-mod__arco {
  animation: cvh-contorno var(--cvh-ciclo) cubic-bezier(.35,.1,.25,1) infinite;
  animation-delay: calc(var(--i, 0) * 0.17 * var(--cvh-ciclo));
}
@keyframes cvh-contorno {
  0%           { stroke-dashoffset: 50; opacity: 1; }
  9%           { stroke-dashoffset: 0;  opacity: 1; }
  17%          { stroke-dashoffset: 0;  opacity: 1; }   /* segura enquanto a linha sai */
  26%          { stroke-dashoffset: 0;  opacity: 0; }
  26.01%, 100% { stroke-dashoffset: 50; opacity: 0; }
}

.cvh-mod { position: relative; width: 15%; min-width: 0; text-align: center; }
/* Meio do vão. O módulo é 15% da caixa de CONTEÚDO (não da caixa com o
   padding de 46px), então o passo entre centros é 17% dessa caixa e meio passo
   dá 56,67% da largura do módulo — proporção constante em qualquer viewport. */
.cvh-mod + .cvh-mod::after {
  content: ""; position: absolute; left: -6.67%; top: var(--cvh-meio);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--arx-blue); transform: translate(-50%, -50%); opacity: .4;
}

.cvh-mod__anel {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: var(--cvh-anel); height: var(--cvh-anel); margin: 0 auto 16px; border-radius: 50%;
  /* base da casa + luz vinda de cima, que dá volume sem pintar de azul */
  background:
    radial-gradient(72% 72% at 50% 18%, rgba(255,255,255,.055), transparent 62%),
    rgba(24,24,24,.2);
  transition: transform .3s var(--arx-ease), box-shadow .3s var(--arx-ease);
}
.cvh-mod__anel::after {                          /* halo externo, bem tênue */
  content: ""; position: absolute; inset: -9px; border-radius: 50%;
  border: 1px solid rgba(21,116,255,.13); pointer-events: none;
}
html.arx-anim .cvh-mod__anel::before {           /* aro de 1px em gradiente, técnica da casa */
  content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 1px;
  background: linear-gradient(100deg, var(--arx-blue) 0%, var(--arx-blue) 35%,
    color-mix(in srgb, var(--arx-blue) 30%, #181818) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.cvh-mod:hover .cvh-mod__anel { transform: translateY(-4px); box-shadow: 0 0 40px -6px var(--arx-blue); }
/* o anel (--cvh-anel) não muda: quem cresce é só o desenho dentro dele */
.cvh-mod__ico {
  width: 52px; height: 52px; color: var(--arx-blue);
  transition: transform .3s var(--arx-ease);
}
.cvh-mod:hover .cvh-mod__ico { transform: scale(1.08); }
.cvh-mod__ico .arx-ico__frame { transition: opacity .3s var(--arx-ease); }
.cvh-mod:hover .cvh-mod__ico .arx-ico__frame { opacity: .85; }

.cvh-mod__nome {
  display: block; margin-bottom: 4px; font-size: 13px; letter-spacing: .5px;
  text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--arx-blue);
}
.cvh-mod__sep { display: none; }                 /* era do mockup dele; o original não tem */
.cvh-mod__desc { font-size: 11.5px; line-height: 16px; color: rgba(255,255,255,.62); }

/* Civitas Core — é o que sustenta os seis resultados, então fecha a coluna
   deles. Sem anel e sem caixa: o peso vem da marca, ao centro do bloco de texto. */
.cvh__core {
  margin-top: 30px;
  /* a BORDA da marca cai na guia da coluna — mesma borda do 1º anel, logo acima */
  padding-left: var(--cvh-esq);
  display: flex; align-items: center; gap: 16px;
}
.cvh__core-marca { flex: none; width: 36px; height: 36px; color: var(--arx-blue); }
.cvh__core-txt { display: block; }               /* o span é inline: sem isso nome e descrição não quebram */
.cvh__core-nome {
  display: block; font-size: 13px; letter-spacing: 2.2px;
  text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--arx-blue);
}
.cvh__core-desc {
  display: block; margin-top: 7px;
  font-size: 16px; line-height: 23px; color: rgba(255,255,255,.74);
}

html.arx-anim .cvh-mod {
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--arx-ease), transform .5s var(--arx-ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
html.arx-anim .cvh.is-revealed .cvh-mod { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.arx-anim .cvh .cvh-mod + .cvh-mod::before,
  html.arx-anim .cvh .cvh-mod__arco,
  html.arx-anim .cvh-mod { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   A escala da confiança (esc-) — substitui as métricas e os
   reconhecimentos, que o cliente riscou.
   ============================================================ */
.esc {
  /* mesma receita do painel do Civitas: dentro do container, sem borda, base
     neutra com halo azul. O sangrado de 1660px, a borda e o fundo azulado eram
     do mockup do cliente. */
  position: relative; margin-top: 96px;
  border-radius: 20px; padding: 60px 80px 64px;
  background:
    radial-gradient(620px 320px at 50% 0%, rgba(33,60,110,.30), transparent 68%),
    linear-gradient(180deg, #0e0f12 0%, #131314 55%, #141414 100%);
  overflow: hidden; text-align: center;
}
.esc__title {
  margin-top: 16px; font-size: 40px; line-height: 46px;
  font-weight: var(--fw-regular); color: var(--arx-white);
}
.esc__title b { color: var(--arx-blue); font-weight: var(--fw-extrabold); }
.esc__rule { display: none; }                    /* o eyebrow já separa, como no Civitas */
.esc__sub { margin-top: 18px; font-size: 16px; line-height: 24px; color: var(--arx-grey-90); }

.esc__grid {
  position: relative; z-index: 1;
  margin-top: 54px; display: grid; grid-template-columns: repeat(6, 1fr);
}
.esc-item {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 0 20px 0;
}
.esc-item + .esc-item::before {   /* divisória fina entre os indicadores */
  content: ""; position: absolute; left: 0; top: 12px; bottom: 24px; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.14) 22%,
                              rgba(255,255,255,.14) 78%, transparent);
}
/* anel da casa: base neutra, luz vinda de cima e aro de 1px em gradiente */
.esc-item__anel {
  position: relative; display: grid; place-items: center;
  width: 84px; height: 84px; border-radius: 50%;
  background:
    radial-gradient(72% 72% at 50% 18%, rgba(255,255,255,.055), transparent 62%),
    rgba(24,24,24,.2);
}
.esc-item__anel::after {                         /* halo externo, bem tênue */
  content: ""; position: absolute; inset: -9px; border-radius: 50%;
  border: 1px solid rgba(21,116,255,.13); pointer-events: none;
}
.esc-item__anel::before {                        /* aro de 1px em gradiente, técnica da casa */
  content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 1px;
  background: linear-gradient(100deg, var(--arx-blue) 0%, var(--arx-blue) 35%,
    color-mix(in srgb, var(--arx-blue) 30%, #181818) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
/* anel fixo em 84px; cresce só o ícone */
.esc-item__ico { width: 52px; height: 52px; color: var(--arx-blue); }
.esc-item__num {
  margin-top: 22px; font-size: 44px; line-height: 50px; letter-spacing: -1px;
  font-weight: var(--fw-semibold); color: var(--arx-white); white-space: nowrap;
  font-variant-numeric: tabular-nums;            /* o contador não faz a largura pular */
}
.esc-item__rot {
  margin-top: 12px; font-size: 12.5px; line-height: 17px; letter-spacing: 1.1px;
  text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--arx-blue-border);
}
.esc-item__desc { margin-top: 12px; font-size: 13px; line-height: 19px; color: var(--arx-grey-70); }


html.arx-anim .esc-item {
  opacity: 0; transform: translateY(20px);
  transition: opacity .55s var(--arx-ease), transform .55s var(--arx-ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
html.arx-anim .esc.is-revealed .esc-item { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.arx-anim .esc-item { opacity: 1; transform: none; transition: none; }
}