/* ============================================================
   TreeSec — _service.css
   Estilo da FAMILIA das paginas de servico (pentest-web-api,
   pentest-infra, pentest-mobile, defesa-continua,
   remediacao-pos-pentest, simulacao-phishing).
   Gerado pela consolidacao das regras de topo que eram IDENTICAS
   (por valor) e estavam duplicadas nessas paginas — espelha o
   _insight.css. Carregado via front-matter `styles: _service`,
   ENTRE o base.css e o css especifico de cada pagina. So' entra
   aqui o que e' identico em (quase) todas as paginas de servico;
   o que uma pagina faz diferente fica no styles/<pagina>.css dela.
   ============================================================ */

.hero{padding:90px 0 70px; position:relative; overflow:hidden}

.kicker{display:inline-block; padding:6px 10px; border:1px solid var(--ring); border-radius:999px; color:var(--muted); font-size:12px; letter-spacing:.3px; text-transform:uppercase}

.lead{font-size:clamp(16px,2vw,19px); color:#c7d2fe}

.actions{display:flex; gap:14px; margin-top:26px}

.hero-card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--ring); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}

section{padding:72px 0}

.chip{display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; background:rgba(255,255,255,.08); border:1px solid var(--ring); color:#e2e8f0}

.logos{display:grid; grid-template-columns:repeat(5,1fr); gap:18px; align-items:center; opacity:.9}

.logos img{max-width:100%; height:48px; object-fit:contain; filter:grayscale(20%)}

.list .item{background:rgba(255,255,255,.04); border:1px solid var(--ring); border-radius:14px; padding:14px 16px}

.list .item b{display:block; margin-bottom:6px}

.btn.primary:active{opacity:.95; transform:translateY(0)}

.btn.primary:hover{box-shadow:0 10px 30px rgba(4,107,210,.32); transform:translateY(-1px)}

.btn.secondary:active{transform:translateY(0)}

.card h3{font-size:20px; margin:6px 0 10px}

.card::before{-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; background:var(--grad); border-radius:inherit; content:""; inset:0; mask-composite:exclude; opacity:0; padding:1px; pointer-events:none; position:absolute; transition:opacity .25s ease}

.card:hover{border-color:rgba(255,255,255,.18); transform:translateY(-4px)}

.card:hover::before{opacity:1}

.cta:hover{box-shadow:0 10px 30px rgba(4,107,210,.28); transform:translateY(-1px)}

.list{display:grid; gap:16px; grid-template-columns:repeat(2,1fr)}

.social{display:flex; gap:10px}