/* =====================================================
   CYCLE TECNOLOGIA E PREVENÇÃO — Fundos temáticos das páginas internas
   ---------------------------------------------------------
   Cada página de Serviço/Produto recebe uma classe modificadora
   em .svc-hero e uma camada .svc-hero__fx (sempre com a mesma
   marcação). O tema desenha a metáfora visual do assunto:

     Serviços
       .svc-hero--shield      Gestão em Segurança  — camadas de proteção
       .svc-hero--compliance  Governança / LGPD    — auditoria de documentos
       .svc-hero--target      Pentest              — mira travando o alvo
       .svc-hero--redteam     Red Team             — vetores de ataque
       .svc-hero--soc         SIEM e SOC           — telemetria monitorada
       .svc-hero--code        Code Review          — leitura de código
       .svc-hero--appsec      AppSec               — ciclo DevSecOps
       .svc-hero--infra       Ambientes de TI      — racks de servidores
       .svc-hero--forensic    Forense e Perícia    — impressão digital
       .svc-hero--radar       Threat Intelligence  — vigilância por radar
       .svc-hero--rf          TSCM                 — ondas de radiofrequência

     Produtos
       .svc-hero--pipeline    COST                 — esteira de testes
       .svc-hero--analytics   SIEM SaaS            — painel analítico
       .svc-hero--neural      TECHBRAIN            — rede neural

   Tudo em CSS puro, apenas com as cores da marca, atrás do
   conteúdo e desligado por prefers-reduced-motion.
   ===================================================== */

.svc-hero__fx {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    /* atenua o efeito do lado esquerdo, onde fica o texto */
    -webkit-mask-image: linear-gradient(100deg,
        rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.34) 36%,
        rgba(0,0,0,0.74) 64%, #000 88%);
    mask-image: linear-gradient(100deg,
        rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.34) 36%,
        rgba(0,0,0,0.74) 64%, #000 88%);
}

.svc-hero__fx span {
    position: absolute;
    inset: 0;
    display: block;
}

/* o conteúdo precisa ficar acima de todas as camadas decorativas */
.svc-hero__container { z-index: 3; }


/* =====================================================
   1. Gestão em Segurança — camadas de proteção
   ===================================================== */
/* estrutura fixa: as camadas já instaladas ao redor do ativo */
.svc-hero--shield .svc-hero__fx span:nth-child(1) {
    background: repeating-radial-gradient(circle at 88% 50%,
        transparent 0 58px, rgba(0,194,255,0.22) 58px 60px);
    -webkit-mask-image: radial-gradient(circle at 88% 50%, #000 8%, rgba(0,0,0,0.55) 34%, transparent 62%);
    mask-image: radial-gradient(circle at 88% 50%, #000 8%, rgba(0,0,0,0.55) 34%, transparent 62%);
}

/* camadas novas se formando sobre as fixas */
.svc-hero--shield .svc-hero__fx::before,
.svc-hero--shield .svc-hero__fx::after,
.svc-hero--shield .svc-hero__fx span:nth-child(1)::before,
.svc-hero--shield .svc-hero__fx span:nth-child(1)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 12%;
    width: 380px;
    height: 380px;
    margin: -190px -190px 0 0;
    border: 2px solid rgba(0,194,255,0.85);
    border-radius: 44%;
    box-shadow: 0 0 26px rgba(0,194,255,0.30);
    opacity: 0;
    animation: svcfxShell 6s ease-out infinite;
}
.svc-hero--shield .svc-hero__fx::after                    { animation-delay: 1.5s; }
.svc-hero--shield .svc-hero__fx span:nth-child(1)::before { animation-delay: 3s; }
.svc-hero--shield .svc-hero__fx span:nth-child(1)::after  { animation-delay: 4.5s; }

/* núcleo protegido no centro das camadas */
.svc-hero--shield .svc-hero__fx span:nth-child(2) {
    background: radial-gradient(circle at 88% 50%,
        rgba(0,194,255,0.24) 0%, rgba(0,128,255,0.08) 24%, transparent 50%);
}

@keyframes svcfxShell {
    0%   { transform: scale(0.22); opacity: 0; }
    16%  { opacity: 1; }
    70%  { opacity: 0.5; }
    100% { transform: scale(1.5); opacity: 0; }
}


/* =====================================================
   2. Governança / LGPD — auditoria de documentos
   ===================================================== */
/* colunas de "linhas de texto" simulando páginas de política */
.svc-hero--compliance .svc-hero__fx::before {
    content: '';
    position: absolute;
    inset: -6% -4%;
    background-image: repeating-linear-gradient(to bottom,
        rgba(255,255,255,0.11) 0 2px, transparent 2px 15px);
    -webkit-mask-image: repeating-linear-gradient(to right,
        #000 0 96px, transparent 96px 120px, #000 120px 190px, transparent 190px 232px);
    mask-image: repeating-linear-gradient(to right,
        #000 0 96px, transparent 96px 120px, #000 120px 190px, transparent 190px 232px);
}

/* faixa de auditoria percorrendo os documentos */
.svc-hero--compliance .svc-hero__fx::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 130px;
    background: linear-gradient(to bottom,
        transparent, rgba(0,194,255,0.16) 45%, rgba(0,194,255,0.42) 50%,
        rgba(0,194,255,0.16) 55%, transparent);
    animation: svcfxAudit 7s linear infinite;
}

/* selos de conformidade acendendo */
.svc-hero--compliance .svc-hero__fx span:nth-child(1) {
    background-image:
        radial-gradient(circle, rgba(0,194,255,0.75) 3px, transparent 4px),
        radial-gradient(circle, rgba(0,128,255,0.55) 3px, transparent 4px);
    background-size: 232px 168px, 232px 168px;
    background-position: 74px 40px, 168px 124px;
    animation: svcfxSeal 4.5s ease-in-out infinite;
}

@keyframes svcfxAudit {
    from { top: -140px; }
    to   { top: 100%; }
}

@keyframes svcfxSeal {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 1; }
}


/* =====================================================
   3. Pentest — mira travando o alvo
   ===================================================== */
/* anéis do alvo */
.svc-hero--target .svc-hero__fx::before {
    content: '';
    position: absolute;
    top: 50%; right: 10%;
    width: 620px; height: 620px;
    margin: -310px -310px 0 0;
    border-radius: 50%;
    background: repeating-radial-gradient(circle,
        transparent 0 54px, rgba(0,194,255,0.20) 54px 55px);
    -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 68%);
    mask-image: radial-gradient(circle, #000 20%, transparent 68%);
}

/* retícula */
.svc-hero--target .svc-hero__fx::after {
    content: '';
    position: absolute;
    top: 50%; right: 10%;
    width: 620px; height: 620px;
    margin: -310px -310px 0 0;
    background-image:
        linear-gradient(to right, transparent 49.7%, rgba(0,194,255,0.34) 49.7% 50.3%, transparent 50.3%),
        linear-gradient(to bottom, transparent 49.7%, rgba(0,194,255,0.34) 49.7% 50.3%, transparent 50.3%);
    -webkit-mask-image: radial-gradient(circle, transparent 6%, #000 16%, #000 42%, transparent 60%);
    mask-image: radial-gradient(circle, transparent 6%, #000 16%, #000 42%, transparent 60%);
}

/* colchetes de travamento fechando sobre o alvo */
.svc-hero--target .svc-hero__fx span:nth-child(1) {
    top: 50%; right: 10%; left: auto; bottom: auto;
    width: 300px; height: 300px;
    margin: -150px -150px 0 0;
    border: 2px solid rgba(0,194,255,0.7);
    -webkit-mask-image: linear-gradient(to right, #000 0 22%, transparent 22% 78%, #000 78%),
                        linear-gradient(to bottom, #000 0 22%, transparent 22% 78%, #000 78%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, #000 0 22%, transparent 22% 78%, #000 78%),
                linear-gradient(to bottom, #000 0 22%, transparent 22% 78%, #000 78%);
    mask-composite: intersect;
    animation: svcfxLock 3.6s ease-in-out infinite;
}

/* varredura horizontal procurando falhas */
.svc-hero--target .svc-hero__fx span:nth-child(2)::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; width: 200px;
    background: linear-gradient(to right,
        transparent, rgba(0,128,255,0.20) 60%, rgba(0,194,255,0.5) 100%);
    animation: svcfxSweepX 6s linear infinite;
}

@keyframes svcfxLock {
    0%, 100% { transform: scale(1.22); opacity: 0.35; }
    45%, 60% { transform: scale(1);    opacity: 1; }
}

@keyframes svcfxSweepX {
    from { left: -220px; }
    to   { left: 100%; }
}


/* =====================================================
   4. Red Team — vetores de ataque avançando
   ===================================================== */
.svc-hero--redteam .svc-hero__fx::before {
    content: '';
    position: absolute;
    inset: -20%;
    background-image: repeating-linear-gradient(58deg,
        rgba(255,86,64,0.14) 0 1px, transparent 1px 46px);
}

/* rajadas percorrendo os vetores: núcleo fino e brilhante com esteira curta */
.svc-hero--redteam .svc-hero__fx::after {
    content: '';
    position: absolute;
    inset: -20%;
    background-image: repeating-linear-gradient(58deg,
        transparent 0 150px,
        rgba(255,86,64,0.10) 150px 174px,
        rgba(255,150,110,0.95) 174px 176px,
        transparent 176px 480px);
    filter: drop-shadow(0 0 5px rgba(255,86,64,0.55));
    animation: svcfxStrike 5.5s linear infinite;
}

/* perímetro rompido: brilho quente entrando pela borda */
.svc-hero--redteam .svc-hero__fx span:nth-child(1) {
    background: radial-gradient(ellipse at 96% 32%,
        rgba(255,86,64,0.22) 0%, rgba(255,86,64,0.06) 34%, transparent 62%);
    animation: svcfxBreach 4.5s ease-in-out infinite alternate;
}

/* linha de defesa que resiste */
.svc-hero--redteam .svc-hero__fx span:nth-child(2)::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; right: 22%;
    width: 2px;
    background: linear-gradient(to bottom,
        transparent, rgba(0,194,255,0.45) 30%, rgba(0,194,255,0.45) 70%, transparent);
}

/* 480px ao longo do eixo de 58°: cos/sen mantêm o passo alinhado à repetição */
@keyframes svcfxStrike {
    from { background-position: 0 0; }
    to   { background-position: 407px -254px; }
}

@keyframes svcfxBreach {
    from { opacity: 0.45; }
    to   { opacity: 1; }
}


/* =====================================================
   5. SIEM e SOC — telemetria sob monitoramento
   ===================================================== */
/* linhas finas de monitor */
.svc-hero--soc .svc-hero__fx::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(to bottom,
        rgba(0,194,255,0.10) 0 1px, transparent 1px 6px);
}

/* varredura do painel */
.svc-hero--soc .svc-hero__fx::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 220px;
    background: linear-gradient(to bottom,
        transparent, rgba(0,194,255,0.14) 70%, rgba(0,194,255,0.38) 100%);
    animation: svcfxScanY 6.5s linear infinite;
}

/* barras de eventos por segundo */
.svc-hero--soc .svc-hero__fx span:nth-child(1) {
    top: auto; height: 120px;
    background-image: repeating-linear-gradient(to right,
        rgba(0,128,255,0.42) 0 7px, transparent 7px 20px);
    -webkit-mask-image: linear-gradient(to top, #000, transparent 78%);
    mask-image: linear-gradient(to top, #000, transparent 78%);
    animation: svcfxEvents 3.2s ease-in-out infinite alternate;
}

/* alertas piscando na malha */
.svc-hero--soc .svc-hero__fx span:nth-child(2) {
    background-image:
        radial-gradient(circle, rgba(0,194,255,0.9) 2.5px, transparent 3.5px),
        radial-gradient(circle, rgba(0,128,255,0.7) 2px,   transparent 3px);
    background-size: 268px 196px, 196px 268px;
    background-position: 52px 34px, 140px 96px;
    animation: svcfxBlip 3.4s ease-in-out infinite;
}

@keyframes svcfxScanY {
    from { top: -240px; }
    to   { top: 100%; }
}

@keyframes svcfxEvents {
    from { transform: scaleY(0.45); transform-origin: bottom; }
    to   { transform: scaleY(1);    transform-origin: bottom; }
}

@keyframes svcfxBlip {
    0%, 100% { opacity: 0.2; }
    50%      { opacity: 1; }
}


/* =====================================================
   6. Code Review — leitura linha a linha
   ===================================================== */
/* linhas de código com recuos variados */
.svc-hero--code .svc-hero__fx::before {
    content: '';
    position: absolute;
    inset: -4% 0;
    background-image: repeating-linear-gradient(to bottom,
        rgba(255,255,255,0.13) 0 3px, transparent 3px 22px);
    -webkit-mask-image: repeating-linear-gradient(to right,
        transparent 0 40px, #000 40px 214px, transparent 214px 246px,
        #000 246px 330px, transparent 330px 402px);
    mask-image: repeating-linear-gradient(to right,
        transparent 0 40px, #000 40px 214px, transparent 214px 246px,
        #000 246px 330px, transparent 330px 402px);
}

/* medianiz com numeração */
.svc-hero--code .svc-hero__fx::after {
    content: '';
    position: absolute;
    inset: -4% 0;
    background-image: repeating-linear-gradient(to bottom,
        rgba(0,194,255,0.30) 0 3px, transparent 3px 22px);
    -webkit-mask-image: repeating-linear-gradient(to right,
        #000 0 16px, transparent 16px 402px);
    mask-image: repeating-linear-gradient(to right,
        #000 0 16px, transparent 16px 402px);
}

/* linha em revisão percorrendo o arquivo */
.svc-hero--code .svc-hero__fx span:nth-child(1)::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 22px;
    background: linear-gradient(to right,
        rgba(0,194,255,0.26), rgba(0,128,255,0.10) 62%, transparent);
    border-top: 1px solid rgba(0,194,255,0.34);
    border-bottom: 1px solid rgba(0,194,255,0.34);
    animation: svcfxCaret 7s steps(28) infinite;
}

@keyframes svcfxCaret {
    from { top: -22px; }
    to   { top: 100%; }
}


/* =====================================================
   7. AppSec — ciclo DevSecOps sobre a aplicação
   ===================================================== */
/* anel externo do ciclo */
.svc-hero--appsec .svc-hero__fx::before,
.svc-hero--appsec .svc-hero__fx::after {
    content: '';
    position: absolute;
    top: 50%; right: 12%;
    border-radius: 50%;
    border: 2px dashed rgba(0,194,255,0.42);
}
.svc-hero--appsec .svc-hero__fx::before {
    width: 440px; height: 440px;
    margin: -220px -220px 0 0;
    animation: svcfxSpin 26s linear infinite;
}
.svc-hero--appsec .svc-hero__fx::after {
    width: 300px; height: 300px;
    margin: -150px -150px 0 0;
    border-style: dotted;
    border-color: rgba(0,128,255,0.5);
    animation: svcfxSpin 17s linear infinite reverse;
}

/* malha de componentes da aplicação */
.svc-hero--appsec .svc-hero__fx span:nth-child(1) {
    background-image:
        linear-gradient(to right,  rgba(255,255,255,0.055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.055) 1px, transparent 1px);
    background-size: 62px 62px;
}

/* commit seguro entrando na esteira */
.svc-hero--appsec .svc-hero__fx span:nth-child(2) {
    background: radial-gradient(circle at 88% 50%,
        rgba(0,194,255,0.22) 0%, rgba(0,128,255,0.06) 30%, transparent 56%);
    animation: svcfxBreathe 5s ease-in-out infinite alternate;
}

@keyframes svcfxSpin {
    to { transform: rotate(360deg); }
}

@keyframes svcfxBreathe {
    from { opacity: 0.5; }
    to   { opacity: 1; }
}


/* =====================================================
   8. Ambientes de TI — racks de servidores
   ===================================================== */
/* unidades de rack empilhadas em colunas */
.svc-hero--infra .svc-hero__fx::before {
    content: '';
    position: absolute;
    inset: -8% 0;
    background-image: repeating-linear-gradient(to bottom,
        rgba(255,255,255,0.10) 0 12px, transparent 12px 20px);
    -webkit-mask-image: repeating-linear-gradient(to right,
        #000 0 132px, transparent 132px 176px);
    mask-image: repeating-linear-gradient(to right,
        #000 0 132px, transparent 132px 176px);
}

/* montantes verticais dos racks */
.svc-hero--infra .svc-hero__fx::after {
    content: '';
    position: absolute;
    inset: -8% 0;
    background-image: repeating-linear-gradient(to right,
        rgba(0,128,255,0.30) 0 2px, transparent 2px 132px,
        rgba(0,128,255,0.30) 132px 134px, transparent 134px 176px);
}

/* LEDs de atividade */
.svc-hero--infra .svc-hero__fx span:nth-child(1) {
    background-image: radial-gradient(circle, rgba(0,194,255,0.85) 2px, transparent 3px);
    background-size: 176px 20px;
    background-position: 118px 6px;
    animation: svcfxLed 1.9s steps(2, jump-none) infinite;
}
.svc-hero--infra .svc-hero__fx span:nth-child(2) {
    background-image: radial-gradient(circle, rgba(0,128,255,0.7) 2px, transparent 3px);
    background-size: 176px 40px;
    background-position: 104px 26px;
    animation: svcfxLed 2.7s steps(2, jump-none) infinite reverse;
}

@keyframes svcfxLed {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 1; }
}


/* =====================================================
   9. Forense e Perícia — impressão digital sob análise
   ===================================================== */
.svc-hero--forensic .svc-hero__fx::before {
    content: '';
    position: absolute;
    top: 50%; right: 9%;
    width: 560px; height: 660px;
    margin: -330px -280px 0 0;
    border-radius: 50%;
    background: repeating-radial-gradient(ellipse at 50% 50%,
        transparent 0 15px, rgba(0,194,255,0.30) 15px 17px);
    transform: rotate(-14deg);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 34%, transparent 72%);
    mask-image: radial-gradient(ellipse at 50% 50%, #000 34%, transparent 72%);
}

/* segunda espiral deslocada, quebrando a simetria perfeita */
.svc-hero--forensic .svc-hero__fx::after {
    content: '';
    position: absolute;
    top: 50%; right: 9%;
    width: 400px; height: 500px;
    margin: -230px -220px 0 0;
    border-radius: 50%;
    background: repeating-radial-gradient(ellipse at 46% 54%,
        transparent 0 15px, rgba(0,128,255,0.34) 15px 17px);
    transform: rotate(9deg);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 66%);
    mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 66%);
}

/* faixa de leitura do perito */
.svc-hero--forensic .svc-hero__fx span:nth-child(1)::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 6px;
    background: linear-gradient(to right,
        transparent, rgba(0,194,255,0.55) 45%, rgba(0,194,255,0.9) 72%, transparent);
    box-shadow: 0 0 22px 6px rgba(0,194,255,0.28);
    animation: svcfxLens 5.5s ease-in-out infinite alternate;
}

@keyframes svcfxLens {
    from { top: 14%; }
    to   { top: 84%; }
}


/* =====================================================
   10. Threat Intelligence — vigilância por radar
   ===================================================== */
.svc-hero--radar .svc-hero__fx::before,
.svc-hero--radar .svc-hero__fx::after {
    content: '';
    position: absolute;
    top: 50%; right: 10%;
    width: 680px; height: 680px;
    margin: -340px -340px 0 0;
    border-radius: 50%;
}

/* anéis de alcance */
.svc-hero--radar .svc-hero__fx::before {
    background: repeating-radial-gradient(circle,
        transparent 0 62px, rgba(0,194,255,0.18) 62px 63px);
    -webkit-mask-image: radial-gradient(circle, #000 12%, rgba(0,0,0,0.4) 46%, transparent 70%);
    mask-image: radial-gradient(circle, #000 12%, rgba(0,0,0,0.4) 46%, transparent 70%);
}

/* feixe girando */
.svc-hero--radar .svc-hero__fx::after {
    background: conic-gradient(from 0deg,
        rgba(0,194,255,0.30) 0deg, rgba(0,128,255,0.08) 30deg, transparent 64deg);
    -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,0.5) 42%, transparent 68%);
    mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,0.5) 42%, transparent 68%);
    animation: svcfxSpin 8s linear infinite;
}

/* contatos detectados */
.svc-hero--radar .svc-hero__fx span:nth-child(1) {
    background-image:
        radial-gradient(circle, rgba(0,194,255,0.95) 3px, transparent 4px),
        radial-gradient(circle, rgba(0,194,255,0.6)  2px, transparent 3px);
    background-size: 320px 240px, 240px 320px;
    background-position: 190px 70px, 84px 168px;
    animation: svcfxBlip 4s ease-in-out infinite;
}


/* =====================================================
   11. TSCM — ondas de radiofrequência
   ===================================================== */
.svc-hero--rf .svc-hero__fx::before,
.svc-hero--rf .svc-hero__fx::after,
.svc-hero--rf .svc-hero__fx span:nth-child(1)::before,
.svc-hero--rf .svc-hero__fx span:nth-child(1)::after {
    content: '';
    position: absolute;
    top: 26%; right: 10%;
    width: 620px; height: 620px;
    margin: -310px -310px 0 0;
    border: 2px solid rgba(0,194,255,0.8);
    border-radius: 50%;
    box-shadow: 0 0 24px rgba(0,194,255,0.28);
    opacity: 0;
    animation: svcfxWave 5s ease-out infinite;
}
.svc-hero--rf .svc-hero__fx::after                        { animation-delay: 1.25s; }
.svc-hero--rf .svc-hero__fx span:nth-child(1)::before     { animation-delay: 2.5s; }
.svc-hero--rf .svc-hero__fx span:nth-child(1)::after      { animation-delay: 3.75s; }

/* a fonte emissora, ancorando as ondas */
.svc-hero--rf .svc-hero__fx span:nth-child(1) {
    background: radial-gradient(circle at 90% 26%,
        rgba(0,194,255,0.30) 0%, rgba(0,128,255,0.08) 14%, transparent 34%);
}

/* espectro de frequências varrido na base */
.svc-hero--rf .svc-hero__fx span:nth-child(2) {
    top: auto; height: 96px;
    background-image: repeating-linear-gradient(to right,
        rgba(0,128,255,0.5) 0 3px, transparent 3px 14px);
    -webkit-mask-image:
        linear-gradient(to top, #000, transparent 82%),
        repeating-linear-gradient(to right,
            rgba(0,0,0,0.25) 0 28px, rgba(0,0,0,0.9) 28px 56px,
            rgba(0,0,0,0.45) 56px 92px, #000 92px 124px);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to top, #000, transparent 82%),
        repeating-linear-gradient(to right,
            rgba(0,0,0,0.25) 0 28px, rgba(0,0,0,0.9) 28px 56px,
            rgba(0,0,0,0.45) 56px 92px, #000 92px 124px);
    mask-composite: intersect;
    animation: svcfxSpectrum 9s linear infinite;
}

@keyframes svcfxWave {
    0%   { transform: scale(0.08); opacity: 0; }
    12%  { opacity: 1; }
    65%  { opacity: 0.45; }
    100% { transform: scale(1); opacity: 0; }
}

/* 126px = 9 períodos das barras de 14px, então o loop não salta */
@keyframes svcfxSpectrum {
    from { background-position: 0 0; }
    to   { background-position: -126px 0; }
}


/* =====================================================
   12. COST — esteira automatizada de testes
   ===================================================== */
/* trilhos da esteira */
.svc-hero--pipeline .svc-hero__fx::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(to bottom,
        rgba(0,128,255,0.24) 0 1.5px, transparent 1.5px 74px);
}

/* lotes de teste percorrendo os trilhos */
.svc-hero--pipeline .svc-hero__fx::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(to right,
        rgba(0,194,255,0.85) 0 26px, transparent 26px 300px);
    -webkit-mask-image: repeating-linear-gradient(to bottom,
        #000 0 2.5px, transparent 2.5px 74px);
    mask-image: repeating-linear-gradient(to bottom,
        #000 0 2.5px, transparent 2.5px 74px);
    filter: drop-shadow(0 0 6px rgba(0,194,255,0.6));
    animation: svcfxConveyor 4.5s linear infinite;
}

/* estações de verificação */
.svc-hero--pipeline .svc-hero__fx span:nth-child(1) {
    background-image: radial-gradient(circle, transparent 5px, rgba(0,194,255,0.42) 5px 6.5px, transparent 7px);
    background-size: 300px 74px;
    background-position: 210px 0;
}

/* engrenagem da orquestração */
.svc-hero--pipeline .svc-hero__fx span:nth-child(2)::before {
    content: '';
    position: absolute;
    top: 50%; right: 11%;
    width: 300px; height: 300px;
    margin: -150px -150px 0 0;
    border-radius: 50%;
    border: 14px dashed rgba(0,194,255,0.34);
    animation: svcfxSpin 22s linear infinite;
}

@keyframes svcfxConveyor {
    from { background-position: 0 0; }
    to   { background-position: 300px 0; }
}


/* =====================================================
   13. SIEM SaaS — painel analítico em tempo real
   ===================================================== */
/* grade do gráfico */
.svc-hero--analytics .svc-hero__fx::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to bottom, rgba(255,255,255,0.07) 1px, transparent 1px),
        linear-gradient(to right,  rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 100% 64px, 74px 100%;
}

/* barras do volume de eventos */
.svc-hero--analytics .svc-hero__fx::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 190px;
    background-image: repeating-linear-gradient(to right,
        rgba(0,128,255,0.40) 0 26px, transparent 26px 74px);
    -webkit-mask-image:
        linear-gradient(to top, #000 30%, transparent 92%),
        repeating-linear-gradient(to right,
            rgba(0,0,0,0.30) 0 74px, rgba(0,0,0,0.62) 74px 148px,
            rgba(0,0,0,0.44) 148px 222px, #000 222px 296px);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to top, #000 30%, transparent 92%),
        repeating-linear-gradient(to right,
            rgba(0,0,0,0.30) 0 74px, rgba(0,0,0,0.62) 74px 148px,
            rgba(0,0,0,0.44) 148px 222px, #000 222px 296px);
    mask-composite: intersect;
    animation: svcfxBars 3.6s ease-in-out infinite alternate;
}

/* linha de tendência subindo, contida na metade direita do painel.
   A faixa de cor sai perpendicular ao eixo do gradiente: para a linha
   subir da esquerda para a direita, o eixo precisa apontar para baixo-direita. */
.svc-hero--analytics .svc-hero__fx span:nth-child(1) {
    background: linear-gradient(to bottom right,
        transparent 49.6%, rgba(0,194,255,0.75) 49.85% 50.15%, transparent 50.4%);
    -webkit-mask-image: linear-gradient(to right, transparent 44%, #000 72%);
    mask-image: linear-gradient(to right, transparent 44%, #000 72%);
}

/* leitura contínua dos dados */
.svc-hero--analytics .svc-hero__fx span:nth-child(2)::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; width: 3px;
    background: linear-gradient(to bottom,
        transparent, rgba(0,194,255,0.7) 25%, rgba(0,194,255,0.7) 75%, transparent);
    box-shadow: 0 0 20px 4px rgba(0,194,255,0.3);
    animation: svcfxSweepX 7s linear infinite;
}

@keyframes svcfxBars {
    from { transform: scaleY(0.55); transform-origin: bottom; }
    to   { transform: scaleY(1);    transform-origin: bottom; }
}


/* =====================================================
   14. TECHBRAIN — rede neural
   ===================================================== */
/* sinapses entre as camadas */
.svc-hero--neural .svc-hero__fx::before {
    content: '';
    position: absolute;
    inset: -12%;
    background-image:
        repeating-linear-gradient(24deg,  rgba(0,128,255,0.16) 0 1px, transparent 1px 58px),
        repeating-linear-gradient(-24deg, rgba(0,128,255,0.16) 0 1px, transparent 1px 58px);
}

/* neurônios organizados em camadas */
.svc-hero--neural .svc-hero__fx::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(0,194,255,0.75) 3px, transparent 4.5px),
        radial-gradient(circle, rgba(0,194,255,0.45) 2.5px, transparent 4px);
    background-size: 148px 116px, 148px 116px;
    background-position: 0 0, 74px 58px;
}

/* impulso atravessando a rede */
.svc-hero--neural .svc-hero__fx span:nth-child(1)::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; width: 260px;
    background: linear-gradient(to right,
        transparent, rgba(0,194,255,0.24) 55%, rgba(0,194,255,0.42) 78%, transparent);
    animation: svcfxSweepX 5.5s linear infinite;
}

/* núcleo de processamento */
.svc-hero--neural .svc-hero__fx span:nth-child(2) {
    background: radial-gradient(circle at 86% 46%,
        rgba(0,194,255,0.20) 0%, rgba(0,128,255,0.07) 30%, transparent 58%);
    animation: svcfxBreathe 4.5s ease-in-out infinite alternate;
}


/* =====================================================
   Responsivo — reduz a densidade em telas pequenas
   ===================================================== */
@media (max-width: 768px) {
    .svc-hero__fx {
        -webkit-mask-image: linear-gradient(to bottom,
            rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0.75) 100%);
        mask-image: linear-gradient(to bottom,
            rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0.75) 100%);
    }

    .svc-hero--shield .svc-hero__fx::before,
    .svc-hero--shield .svc-hero__fx::after,
    .svc-hero--shield .svc-hero__fx span::before,
    .svc-hero--shield .svc-hero__fx span::after {
        right: 50%; width: 300px; height: 300px; margin: -150px -150px 0 0;
    }

    .svc-hero--target .svc-hero__fx::before,
    .svc-hero--target .svc-hero__fx::after,
    .svc-hero--radar  .svc-hero__fx::before,
    .svc-hero--radar  .svc-hero__fx::after {
        right: 50%; width: 420px; height: 420px; margin: -210px -210px 0 0;
    }

    .svc-hero--target .svc-hero__fx span:nth-child(1) {
        right: 50%; width: 210px; height: 210px; margin: -105px -105px 0 0;
    }

    .svc-hero--forensic .svc-hero__fx::before { right: 50%; width: 360px; height: 430px; margin: -215px -180px 0 0; }
    .svc-hero--forensic .svc-hero__fx::after  { right: 50%; width: 260px; height: 320px; margin: -150px -140px 0 0; }

    .svc-hero--appsec .svc-hero__fx::before   { right: 50%; width: 280px; height: 280px; margin: -140px -140px 0 0; }
    .svc-hero--appsec .svc-hero__fx::after    { right: 50%; width: 190px; height: 190px; margin: -95px -95px 0 0; }

    .svc-hero--pipeline .svc-hero__fx span:nth-child(2)::before {
        right: 50%; width: 190px; height: 190px; margin: -95px -95px 0 0; border-width: 10px;
    }

    .svc-hero--rf .svc-hero__fx::before,
    .svc-hero--rf .svc-hero__fx::after,
    .svc-hero--rf .svc-hero__fx span:nth-child(1)::before {
        right: 50%; width: 480px; height: 480px; margin: -240px -240px 0 0;
    }

    /* racks mais estreitos: as quatro camadas precisam do mesmo passo de 118px */
    .svc-hero--infra .svc-hero__fx::before {
        -webkit-mask-image: repeating-linear-gradient(to right, #000 0 88px, transparent 88px 118px);
        mask-image: repeating-linear-gradient(to right, #000 0 88px, transparent 88px 118px);
    }
    .svc-hero--infra .svc-hero__fx::after {
        background-image: repeating-linear-gradient(to right,
            rgba(0,128,255,0.30) 0 2px, transparent 2px 88px,
            rgba(0,128,255,0.30) 88px 90px, transparent 90px 118px);
    }
    .svc-hero--infra .svc-hero__fx span:nth-child(1) { background-size: 118px 20px; background-position: 76px 6px; }
    .svc-hero--infra .svc-hero__fx span:nth-child(2) { background-size: 118px 40px; background-position: 64px 26px; }
}


/* =====================================================
   Acessibilidade — sem movimento, mantém só o desenho
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
    .svc-hero__fx,
    .svc-hero__fx *,
    .svc-hero__fx::before,
    .svc-hero__fx::after,
    .svc-hero__fx span::before,
    .svc-hero__fx span::after {
        animation: none !important;
    }

    /* as camadas que só existem enquanto animadas ficariam invisíveis */
    .svc-hero--shield .svc-hero__fx::before,
    .svc-hero--shield .svc-hero__fx::after,
    .svc-hero--shield .svc-hero__fx span:nth-child(1)::before,
    .svc-hero--shield .svc-hero__fx span:nth-child(1)::after,
    .svc-hero--rf .svc-hero__fx::before,
    .svc-hero--rf .svc-hero__fx::after,
    .svc-hero--rf .svc-hero__fx span:nth-child(1)::before,
    .svc-hero--rf .svc-hero__fx span:nth-child(1)::after {
        opacity: 0.6;
    }
    .svc-hero--shield .svc-hero__fx::after                    { transform: scale(0.76); }
    .svc-hero--shield .svc-hero__fx span:nth-child(1)::before { transform: scale(0.54); }
    .svc-hero--shield .svc-hero__fx span:nth-child(1)::after  { transform: scale(0.32); }
    .svc-hero--rf .svc-hero__fx::after                        { transform: scale(0.74); }
    .svc-hero--rf .svc-hero__fx span:nth-child(1)::before     { transform: scale(0.5); }
    .svc-hero--rf .svc-hero__fx span:nth-child(1)::after      { transform: scale(0.26); }
}