:root{
  --ts-text-dim:#cbd5e1;
  --ts-ring:rgba(255,255,255,.08);
  --ts-grad:linear-gradient(135deg, #046BD2 0%, #6A4FB5 50%, #E03535 100%);
  --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;
  --term-orange:#d19a66;
  --term-magenta:#e06caa;
  --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}

.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){
  .hero{ padding:72px 0 60px; }
  .hero h1{ line-height:1.15; margin:12px 0; }
  .hero .lead{ margin-bottom:8px; }
  .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}

.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%; }

.d-red { background: #ff5f57; }

.d-yellow { background: #febc2e; }

.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-err { color: var(--term-red); }

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

.t-string { color: #98c379; }

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

.t-warn { color: var(--term-yellow); font-weight: 700; }

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

.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);
}

.t-line-warn {
  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(224,108,117,.08);
  border-left: 2px solid var(--term-red);
}

.t-line-hook {
  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(86,182,194,.06);
  border-left: 2px solid var(--term-cyan);
}

.t-badge {
  display: inline-block; padding: 1px 6px; border-radius: 3px; font-weight: 700;
}

.t-badge-ok { background: var(--term-green); color: #000; }

.t-badge-fail { background: var(--term-red); color: #fff; }

.t-badge-hook { background: var(--term-cyan); color: #000; }

.obj-banner { color: var(--term-cyan); }

.frida-banner { color: var(--term-yellow); }

.t-arrow-out { color: var(--term-cyan); font-weight: 700; }

.t-arrow-in { color: var(--term-green); font-weight: 700; }

.t-arrow-warn { color: var(--term-red); font-weight: 700; }

.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(--ts-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; }

.as-window{ border-radius:10px; overflow:hidden; border:1px solid #1e1f22;
  box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 20px 60px rgba(0,0,0,.5);
  background:#2b2b2b; font-family:var(--sans); }

.as-titlebar{ display:flex; align-items:center; gap:10px; padding:8px 14px;
  background:#3c3f41; border-bottom:1px solid #1e1f22; }

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

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

.as-title-text{ color:#bbb; font-size:12px; flex:1; text-align:center; }

.as-toolbar{ display:flex; align-items:center; gap:14px; padding:7px 14px;
  background:#313335; border-bottom:1px solid #1e1f22; font-size:12px; color:#a9b7c6; flex-wrap:wrap; }

.as-run{ display:inline-flex; align-items:center; gap:6px; color:#6ac06a; font-weight:600; }

.as-run .tri{ width:0; height:0; border-left:9px solid #6ac06a; border-top:6px solid transparent; border-bottom:6px solid transparent; }

.as-chip{ display:inline-flex; align-items:center; gap:7px; padding:3px 10px; border-radius:6px;
  background:#2b2b2b; border:1px solid #4b4d50; font-size:11px; color:#cdd3da; }

.as-chip .caret{ color:#808080; }

.as-spacer{ flex:1; min-width:8px; }

.as-tab{ font-size:11px; color:#808080; }

.as-tab.on{ color:#cdd3da; border-bottom:2px solid #4a88c7; padding-bottom:3px; }

.as-main{ display:grid; grid-template-columns:1fr 296px; background:#2b2b2b; }

.as-emu{ display:flex; align-items:center; justify-content:center; padding:26px 20px;
  border-right:1px solid #1e1f22;
  background:radial-gradient(120% 90% at 50% 0%, #323a46 0%, #23272e 60%, #1e2228 100%); }

.as-phone{ width:214px; border-radius:30px; padding:9px; background:#0a0d13;
  border:1px solid #2a2f37; box-shadow:0 18px 40px rgba(0,0,0,.5), inset 0 0 0 2px #04060a; position:relative; }

.as-notch{ position:absolute; top:16px; left:50%; transform:translateX(-50%); width:52px; height:5px; border-radius:3px; background:#04060a; z-index:3; }

.as-screen{ border-radius:22px; overflow:hidden; background:#eef2f7; }

.as-sb{ display:flex; align-items:center; justify-content:space-between; padding:6px 14px 4px; font-size:9px; color:#334155; font-weight:600; }

.as-appbar{ background:linear-gradient(135deg,#0a4d8c,#1272c7); color:#fff; padding:10px 14px; display:flex; align-items:center; justify-content:space-between; }

.as-appbar .brand{ font-weight:800; font-size:13px; letter-spacing:.2px; }

.as-appbar .brand small{ font-weight:500; opacity:.8; }

.as-appbar .mn{ font-size:14px; opacity:.9; }

.as-appcontent{ padding:12px 12px 34px; display:flex; flex-direction:column; gap:10px; }

.as-bal{ background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:12px; box-shadow:0 4px 12px rgba(2,8,23,.06); }

.as-bal .lbl{ font-size:9px; color:#64748b; text-transform:uppercase; letter-spacing:.4px; }

.as-bal .val{ font-size:19px; font-weight:800; color:#0b1220; margin-top:2px; letter-spacing:-.02em; }

.as-bal .acc{ font-size:9px; color:#94a3b8; margin-top:1px; }

.as-actions{ display:flex; justify-content:space-between; gap:2px; }

.as-act{ display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; }

.as-act .ic{ width:34px; height:34px; border-radius:50%; background:#e7f0fb; display:grid; place-items:center; color:#1272c7; }

.as-act .ic svg{ width:16px; height:16px; }

.as-act span{ font-size:8.5px; color:#475569; font-weight:600; }

.as-txlist{ background:#fff; border:1px solid #e2e8f0; border-radius:12px; overflow:hidden; }

.as-txlist .th{ font-size:8.5px; color:#64748b; text-transform:uppercase; letter-spacing:.4px; padding:9px 12px 3px; }

.as-tx{ display:flex; align-items:center; gap:8px; padding:7px 12px; border-top:1px solid #f1f5f9; }

.as-tx .tdot{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:800; }

.as-tx .tdot.in{ background:#dcfce7; color:#16a34a; }

.as-tx .tdot.out{ background:#fee2e2; color:#dc2626; }

.as-tx .tn{ flex:1; min-width:0; font-size:9.5px; color:#1e293b; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.as-tx .tv{ font-size:9.5px; font-weight:700; white-space:nowrap; flex-shrink:0; }

.as-tx .tv.out{ color:#dc2626; }

.as-tx .tv.in{ color:#16a34a; }

.as-intercept{ position:absolute; left:50%; bottom:15px; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  padding:5px 11px; border-radius:999px; background:rgba(11,13,19,.92);
  border:1px solid rgba(224,53,53,.5); box-shadow:0 6px 18px rgba(0,0,0,.5); z-index:4; }

.as-intercept .rd{ width:7px; height:7px; border-radius:50%; background:#ff5a5a; animation:aspulse 1.6s infinite; }

.as-intercept span{ font-size:9.5px; color:#fca5a5; font-weight:700; font-family:var(--mono); }

@keyframes aspulse{ 0%{box-shadow:0 0 0 0 rgba(255,90,90,.55)} 70%{box-shadow:0 0 0 7px rgba(255,90,90,0)} 100%{box-shadow:0 0 0 0 rgba(255,90,90,0)} }

.as-insp{ display:flex; flex-direction:column; background:#313335; }

.as-insp-h{ display:flex; align-items:center; gap:9px; padding:10px 14px; border-bottom:1px solid #1e1f22; }

.as-insp-h .ic{ width:18px; height:18px; color:#4a88c7; flex-shrink:0; }

.as-insp-h .t{ font-size:12px; font-weight:700; color:#cdd3da; }

.as-insp-h .s{ font-size:10px; color:#808080; font-family:var(--mono); }

.as-insp-body{ padding:10px 12px; display:flex; flex-direction:column; gap:7px; }

.as-req{ display:flex; align-items:center; gap:7px; padding:6px 8px; border-radius:7px; background:#2b2b2b; border:1px solid #3c3f41; font-family:var(--mono); font-size:10px; }

.as-req.hot{ border-color:rgba(224,53,53,.4); background:rgba(224,53,53,.06); }

.as-m{ font-weight:700; padding:1px 5px; border-radius:3px; font-size:9px; }

.as-m.post{ background:rgba(74,136,199,.18); color:#7db4e8; }

.as-m.get{ background:rgba(106,192,106,.15); color:#8bd18b; }

.as-req .ep{ flex:1; color:#a9b7c6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.as-req .st{ color:#8bd18b; font-weight:700; }

.as-req .lk{ color:#ff7b7b; font-weight:700; }

.as-cap{ margin-top:2px; padding:9px 10px; border-radius:8px; background:#232428; border:1px solid #3c3f41; }

.as-cap .cl{ font-size:9px; color:#808080; text-transform:uppercase; letter-spacing:.3px; margin-bottom:5px; }

.as-cap code{ font-family:var(--mono); font-size:10px; color:#cdd3da; display:block; white-space:pre-wrap; word-break:break-word; line-height:1.55; }

.as-cap .k{ color:#7db4e8; }

.as-cap .v{ color:#c3e88d; }

.as-insp-foot{ margin-top:auto; padding:9px 12px; border-top:1px solid #1e1f22; font-size:10px; color:#9aa4af; display:flex; align-items:center; gap:7px; }

.as-insp-foot .gd{ width:7px; height:7px; border-radius:50%; background:#6ac06a; flex-shrink:0; }

@media(max-width:760px){
  .as-main{ grid-template-columns:1fr }
  .as-emu{ border-right:none; border-bottom:1px solid #1e1f22 }
}

.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{gap:10px}
  nav ul{display:none !important}
}

@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} }