:root{
  --ts-text-dim:#cbd5e1;
  --ts-ring:rgba(255,255,255,.08);
  --bh-bg: #0d1117;
  --bh-panel: #161b22;
  --bh-border: #30363d;
  --bh-node-user: #17d68c;
  --bh-node-computer: #e05252;
  --bh-node-group: #f0c744;
  --bh-node-domain: #569cd6;
  --bh-edge: rgba(255,255,255,.15);
  --bh-attack: #e05252;
  --term-bg: #0c0c0c;
  --term-text: #cccccc;
  --term-green: #4ec660;
  --term-blue: #3b8eea;
  --term-yellow: #e5c07b;
  --term-red: #e06c75;
  --term-cyan: #56b6c2;
  --term-purple: #c678dd;
  --term-dim: #5c6370;
  --mono: 'SF Mono', 'Cascadia Code', 'JetBrains Mono', 'Fira Code', Consolas, 'Liberation Mono', monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.hero-grid{display:grid; grid-template-columns: 1.2fr 1fr; gap:40px; align-items:center}

.stat{background:rgba(255,255,255,.04); border:1px solid var(--ring); border-radius:16px; padding:16px; text-align:center}

.stat b{font-size:22px; display:block}

/* Bloco "A prova" — reutiliza o cartao .stat, em 3 colunas */
.proof-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px}
.proof-grid .stat-n{display:block; font-size:30px; font-weight:900; line-height:1.1; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.proof-grid .stat-d{color:var(--muted); font-size:14px; margin:10px 0 0}
.proof-grid .stat-src{display:block; margin-top:10px; font-family:var(--mono); font-size:11px; color:var(--term-dim)}
@media (max-width:640px){ .proof-grid{grid-template-columns:1fr} }

.about .box{background:rgba(255,255,255,.04); border:1px solid var(--ring); border-radius:18px; padding:22px}

@media (max-width:1024px){
  .hero-grid, .about{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:760px){
  section{padding:32px 0}
  .hero{padding:64px 0 48px}
}

@media (max-width:640px){
  .logos{grid-template-columns:repeat(5,1fr); gap:6px;}
  .logos img{height:24px;}
}

#metodologia .cards{margin-top:36px}

#metodologia .card{padding-top:38px; overflow:visible}

#metodologia .card .chip{position:absolute; top:-16px; left:16px; width:36px; height:36px; display:grid; place-items:center; padding:0; font-size:12px; font-weight:700; background:linear-gradient(135deg, var(--blue), var(--red)); border:none; color:#fff; border-radius:50%; box-shadow:0 6px 16px rgba(4,107,210,.3), 0 0 0 3px rgba(15,23,42,.95); letter-spacing:0}

.bh-window {
    border-radius: 10px; overflow: hidden; border: 1px solid var(--bh-border);
    box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 20px 60px rgba(0,0,0,.5);
    background: var(--bh-bg);
  }

.bh-titlebar {
    display: flex; align-items: center; gap: 10px; padding: 8px 14px;
    background: var(--bh-panel); border-bottom: 1px solid var(--bh-border);
  }

.bh-dots { display: flex; gap: 6px; }

.bh-dots span { width: 12px; height: 12px; border-radius: 50%; }

.bh-dots .d-red { background: #ff5f57; }

.bh-dots .d-yellow { background: #febc2e; }

.bh-dots .d-green { background: #28c840; }

.bh-title-text {
    color: #8b949e; font-size: 12px; font-family: var(--sans); flex: 1; text-align: center;
  }

.bh-title-text strong { color: #e6edf3; }

.bh-toolbar {
    display: flex; align-items: center; gap: 10px; padding: 8px 14px;
    background: var(--bh-panel); border-bottom: 1px solid var(--bh-border);
  }

.bh-search {
    flex: 1; background: var(--bh-bg); border: 1px solid var(--bh-border);
    border-radius: 6px; padding: 6px 10px; color: #8b949e;
    font-family: var(--sans); font-size: 12px;
  }

.bh-query-badge {
    padding: 4px 10px; border-radius: 6px; font-size: 10px; font-weight: 600;
    background: rgba(224,82,82,.15); color: var(--bh-attack);
    border: 1px solid rgba(224,82,82,.25); font-family: var(--mono);
  }

.bh-canvas {
    position: relative; width: 100%; min-height: 340px;
    background:
      radial-gradient(circle at 20% 50%, rgba(23,214,140,.03), transparent 40%),
      radial-gradient(circle at 80% 30%, rgba(224,82,82,.03), transparent 40%),
      var(--bh-bg);
    overflow-x: auto;
  }

.bh-canvas svg { display: block; width: 100%; height: auto; }

.bh-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px; background: var(--bh-panel);
    border-top: 1px solid var(--bh-border);
    font-size: 11px; color: #8b949e; font-family: var(--sans);
  }

.bh-footer .path-info { color: var(--bh-attack); font-weight: 600; }

.term-window {
    border-radius: 10px; overflow: hidden;
    border: 1px solid #333;
    box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 20px 60px rgba(0,0,0,.5);
    background: var(--term-bg);
    font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
  }

.term-titlebar {
    display: flex; align-items: center; gap: 10px; padding: 8px 14px;
    background: #1e1e1e; border-bottom: 1px solid #333;
  }

.term-dots { display: flex; gap: 6px; }

.term-dots span { width: 12px; height: 12px; border-radius: 50%; }

.term-dots .d-red { background: #ff5f57; }

.term-dots .d-yellow { background: #febc2e; }

.term-dots .d-green { background: #28c840; }

.term-title-text {
    color: #888; font-size: 12px; font-family: var(--sans); flex: 1; text-align: center;
  }

.term-body {
    padding: 14px 16px; overflow-x: auto; white-space: pre;
    color: var(--term-text); font-variant-ligatures: none;
  }

.t-prompt { color: var(--term-green); font-weight: 600; }

.t-cmd { color: #fff; }

.t-flag { color: var(--term-purple); }

.t-value { color: var(--term-yellow); }

.t-info { color: var(--term-blue); }

.t-success { color: var(--term-green); }

.t-dim { color: var(--term-dim); }

.t-note {
    display: inline-block; min-width: calc(100% + 32px); margin: 0 -16px;
    padding: 0 16px; background: rgba(59, 142, 234, .12);
    border-left: 2px solid var(--term-blue);
    color: #d3e6ff; font-weight: 600;
  }
.t-note::before { content: "▸ "; color: var(--term-blue); font-weight: 700; }
.t-note::after { content: " ◂"; color: var(--term-blue); font-weight: 700; }

.t-host { color: var(--term-cyan); }

.t-pwned {
    color: #000; background: var(--term-yellow); font-weight: 700;
    padding: 1px 6px; border-radius: 3px;
  }

.t-err { color: var(--term-red); }

.t-line-highlight {
    display: inline-block; min-width: calc(100% + 32px); text-size-adjust: 100%; -webkit-text-size-adjust: 100%; margin: 0 -16px;
    padding: 0 16px; background: rgba(78, 198, 96, .08);
    border-left: 2px solid var(--term-green);
  }

.annotation-bar { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }

.annotation {
    display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px;
    background: rgba(255,255,255,.03); border: 1px solid var(--ts-ring);
    border-radius: 10px; flex: 1; min-width: 220px;
  }

.annotation .num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; background: var(--grad);
    color: #fff; font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 1px;
  }

.annotation .txt { font-size: 13px; color: var(--ts-text-dim); line-height: 1.45; }

.annotation .txt strong { color: #fff; font-weight: 600; }

.chain-box {
    margin-top: 24px; padding: 20px; border-radius: 14px;
    background: rgba(224,82,82,.06); border: 1px solid rgba(224,82,82,.18);
  }

.chain-box h3 { font-size: 16px; font-weight: 700; color: var(--bh-attack); margin-bottom: 14px; }

.chain-steps {
    display: flex; gap: 2px; flex-wrap: wrap; align-items: center; justify-content: center;
  }

.chain-node {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px;
    min-width: 72px;
  }

.chain-icon {
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    font-size: 16px; font-weight: 700; border: 2px solid;
  }

.chain-icon.user { background: rgba(23,214,140,.15); border-color: var(--bh-node-user); color: var(--bh-node-user); }

.chain-icon.computer { background: rgba(224,82,82,.15); border-color: var(--bh-node-computer); color: var(--bh-node-computer); border-radius: 8px; }

.chain-icon.group { background: rgba(240,199,68,.15); border-color: var(--bh-node-group); color: var(--bh-node-group); }

.chain-name { font-size: 10px; color: var(--ts-text-dim); text-align: center; font-weight: 600; max-width: 100px; }

.chain-type { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }

.chain-edge {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 0 4px; color: var(--bh-attack); min-width: 72px;
  }

.chain-edge .arrow { font-size: 18px; line-height: 1; }

.chain-edge .edge-label {
    font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; white-space: nowrap;
    background: rgba(224,53,53,.12); border: 1px solid rgba(224,53,53,.3);
    border-radius: 4px; padding: 2px 6px;
  }

.bh-canvas svg text { font-family: var(--sans); }

@media (max-width: 700px){
  .bh-canvas { min-height: 280px; }
  .chain-steps { gap: 2px; }
  .chain-node { min-width: 70px; padding: 6px 2px; }
  .chain-edge { min-width: 60px; padding: 0 4px; }
  .chain-icon { width: 32px; height: 32px; font-size: 13px; }
  .chain-name { font-size: 9px; max-width: 70px; }
}

.about{display:grid; gap:32px; grid-template-columns:1.1fr 1fr}

.band{align-items:center; background:radial-gradient(600px 200px at 10% -50%, rgba(4,107,210,.25), transparent), radial-gradient(600px 200px at 90% 130%, rgba(224,53,53,.25), transparent), linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--ring); border-radius:22px; display:flex; gap:20px; padding:24px}

.card{background:rgba(255,255,255,.04); border:1px solid var(--ring); border-radius:18px; overflow:hidden; padding:22px; position:relative; transition:transform .2s ease, border-color .2s ease}

.cards{gap:20px; grid-template-columns:repeat(3,1fr)}

@media(max-width:1024px){
  .list{grid-template-columns:1fr}
}

@media(max-width:360px){
  footer .wrapper{padding-left:32px !important; padding-right:32px !important}
}

@media(max-width:640px){
  .band{align-items:flex-start; flex-direction:column}
  nav ul{display:none}
}

@media(min-width:1025px){
  footer .wrapper{padding-left:20px !important; padding-right:20px !important}
}

/* --- mobile: colapsa p/ 1 coluna no celular.
   Fica no FIM e na folha da PAGINA de proposito: o css da pagina
   carrega depois do base.css, entao um @media no base seria anulado
   pela regra de topo daqui (mesma especificidade). --- */
@media (max-width:1024px){ .hero-grid{grid-template-columns:1fr} }
@media (max-width:1024px){ .about{grid-template-columns:1fr} }