:root{
  --ts-text-dim:#cbd5e1;
  --ts-ring:rgba(255,255,255,.08);
  --ts-grad:linear-gradient(135deg, #046BD2 0%, #6A4FB5 50%, #E03535 100%);
  --mono: 'SF Mono', 'Cascadia Code', 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  --cf-bg: #111827;
  --cf-card: #1f2937;
  --cf-border: #374151;
  --cf-orange: #f6821f;
  --cf-blue: #4299e1;
  --cf-green: #48bb78;
  --cf-red: #f56565;
  --cf-yellow: #ecc94b;
  --cf-purple: #9f7aea;
  --cf-cyan: #38b2ac;
  --cf-text: #e2e8f0;
  --cf-dim: #718096;
  --cf-sidebar: #0f1623;
}

a {
      color: #fff;
      text-decoration: none;
    }

.hero-grid{display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:start}

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

.about .box ul li{margin-bottom: 8px;}

.hero-metrics { text-align: center; margin-top: 32px; }

.metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }

.metric-card { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)); padding: 24px; border: 1px solid var(--ring); border-radius: 20px; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; display: flex; flex-direction: column; }

.metric-card:hover { transform: translateY(-8px); border-color: rgba(255,255,255,.2); box-shadow: var(--shadow); }

.metric-card h3 { font-size: 24px; margin: 20px 0 12px; color: #fff; line-height: 1.2; flex-grow: 1; }

.metric-card p { color: var(--muted); line-height: 1.6; font-size: 16px; }

.metric-icon { width: 160px; height: 160px; margin: 0 auto; display: flex; align-items: center; justify-content: center; background-image: url('data:image/svg+xml;utf8,<svg width="150" height="173" viewBox="0 0 150 173" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M112.5 151.135L75 173L37.5 151.135V107.408L0 85.5422L37.5 63.6763V19.9493L75 0L112.5 19.9493V63.6763L150 85.5422L112.5 107.408V151.135Z" fill="rgba(255,255,255,0.05)"/><path d="M112.5 19.9492V63.6762L75 85.5421L37.5 63.6762V19.9492L75 0L112.5 19.9492Z" fill="rgba(255,255,255,0.08)"/><path d="M75 173V85.542L112.5 107.408V151.135L75 173Z" fill="rgba(0,0,0,0.2)"/><path d="M75 173V85.542L37.5 107.408V151.135L75 173Z" fill="rgba(0,0,0,0.3)"/><path d="M111.75 20.3807L75 41.8643L38.25 20.3807L75 0.864258L111.75 20.3807Z" stroke="rgba(255,255,255,0.2)" stroke-width="1.5"/><path d="M37.5 64.1077V107.835L75 129.701L112.5 107.835V64.1077L75 42.2417L37.5 64.1077Z" stroke="rgba(255,255,255,0.2)" stroke-width="1.5"/></svg>'); background-size: contain; background-repeat: no-repeat; background-position: center; }

.metric-value { font-size: 48px; font-weight: 700; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

@media (max-width:1024px){
  .hero-grid, .about{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(3,1fr)}
  .metrics-grid {grid-template-columns: 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 .actions{gap:10px}
  .hero .actions .btn{white-space:nowrap; padding:14px 14px; font-size:15px}
  .logos{grid-template-columns:repeat(5,1fr); gap:6px;}
  .logos img{height:24px;}
}

@media (max-width:380px){
  .hero .actions{gap:8px}
  .hero .actions .btn{padding:13px 12px; font-size:13.5px}
}

#como-fazemos .cards{margin-top:36px}

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

#como-fazemos .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}

.cf-dashboard {
      border-radius: 14px; overflow: hidden; border: 1px solid var(--cf-border);
      box-shadow: 0 20px 60px rgba(0,0,0,.5); background: var(--cf-bg);
    }

.cf-topbar {
      display: flex; align-items: center; gap: 12px; padding: 10px 16px;
      background: var(--cf-sidebar); border-bottom: 1px solid var(--cf-border);
    }

.cf-logo {
      display: flex; align-items: center; gap: 8px;
      font-weight: 700; font-size: 14px; color: var(--cf-orange);
    }

.cf-logo svg { width: 22px; height: 22px; }

.cf-breadcrumb { font-size: 12px; color: var(--cf-dim); flex: 1; }

.cf-breadcrumb span { color: var(--cf-text); }

.cf-time-badge {
      padding: 4px 10px; border-radius: 6px; font-size: 11px;
      background: rgba(246,130,31,.12); color: var(--cf-orange);
      border: 1px solid rgba(246,130,31,.25); font-weight: 600;
    }

.cf-body { padding: 16px; }

.cf-stats {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px;
    }

@media (max-width: 600px){
  .cf-stats { grid-template-columns: repeat(2, 1fr); }
}

.cf-stat {
      padding: 14px; border-radius: 10px; background: var(--cf-card);
      border: 1px solid var(--cf-border);
    }

.cf-stat .label { font-size: 11px; color: var(--cf-dim); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 4px; }

.cf-stat .val { font-size: 24px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }

.cf-stat .val.orange { color: var(--cf-orange); }

.cf-stat .val.red { color: var(--cf-red); }

.cf-stat .val.green { color: var(--cf-green); }

.cf-stat .val.blue { color: var(--cf-blue); }

.cf-stat .delta { font-size: 11px; margin-top: 4px; font-weight: 600; }

.cf-stat .delta.up { color: var(--cf-red); }

.cf-stat .delta.down { color: var(--cf-green); }

.cf-chart-wrap {
      background: var(--cf-card); border: 1px solid var(--cf-border);
      border-radius: 10px; padding: 16px; margin-bottom: 16px;
    }

.cf-chart-header {
      display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
    }

.cf-chart-title { font-size: 13px; font-weight: 700; color: var(--cf-text); }

.cf-chart-legend { display: flex; gap: 14px; font-size: 11px; color: var(--cf-dim); }

.cf-chart-legend .dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 4px; vertical-align: middle; }

.cf-chart {
      width: 100%; height: 130px; position: relative;
    }

.cf-chart svg { width: 100%; height: 100%; }

.cf-categories {
      display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;
    }

@media (max-width: 600px){
  .cf-categories { grid-template-columns: 1fr; }
}

.cf-cat-panel {
      background: var(--cf-card); border: 1px solid var(--cf-border);
      border-radius: 10px; padding: 16px;
    }

.cf-cat-panel h4 { font-size: 13px; font-weight: 700; color: var(--cf-text); margin-bottom: 12px; }

.cf-cat-row {
      display: flex; align-items: center; gap: 10px; padding: 6px 0;
      border-bottom: 1px solid rgba(55,65,81,.5);
    }

.cf-cat-row:last-child { border-bottom: none; }

.cf-cat-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

.cf-cat-name { font-size: 12px; color: var(--cf-text); flex: 1; font-weight: 500; }

.cf-cat-count { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 45px; text-align: right; }

.cf-cat-bar-bg { width: 80px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.06); flex-shrink: 0; overflow: hidden; }

.cf-cat-bar { height: 100%; border-radius: 3px; }

.cf-events {
      background: var(--cf-card); border: 1px solid var(--cf-border);
      border-radius: 10px; overflow: hidden;
    }

.cf-events-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 16px; border-bottom: 1px solid var(--cf-border);
    }

.cf-events-header h4 { font-size: 13px; font-weight: 700; color: var(--cf-text); }

.cf-events-header .count {
      font-size: 11px; padding: 3px 8px; border-radius: 999px;
      background: rgba(245,101,101,.15); color: var(--cf-red); font-weight: 700;
    }

.cf-events-table { width: 100%; overflow-x: auto; overflow-y: hidden; }

.cf-events-table table { width: 100%; border-collapse: collapse; font-size: 11.5px; white-space: nowrap; }

.cf-events-table th {
      text-align: left; padding: 8px 12px; color: var(--cf-dim);
      font-weight: 600; font-size: 10px; text-transform: uppercase;
      letter-spacing: .4px; border-bottom: 1px solid var(--cf-border);
      background: rgba(0,0,0,.15);
    }

.cf-events-table td {
      padding: 7px 12px; border-bottom: 1px solid rgba(55,65,81,.35); color: var(--cf-text);
    }

.cf-events-table tr:hover td { background: rgba(255,255,255,.02); }

.cf-events-table .action-badge {
      display: inline-block; padding: 2px 7px; border-radius: 4px;
      font-size: 10px; font-weight: 700; text-transform: uppercase;
    }

.action-block { background: rgba(245,101,101,.15); color: var(--cf-red); }

.action-challenge { background: rgba(236,201,75,.15); color: var(--cf-yellow); }

.action-managed { background: rgba(159,122,234,.15); color: var(--cf-purple); }

.cf-events-table .rule-id { color: var(--cf-dim); font-family: var(--mono); font-size: 10.5px; }

.cf-events-table .path { font-family: var(--mono); font-size: 10.5px; color: var(--cf-orange); }

.cf-events-table .flag { font-size: 14px; line-height: 1; }

.cf-events-table .cat-tag {
      display: inline-block; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 600;
    }

.cat-sqli { background: rgba(245,101,101,.12); color: var(--cf-red); }

.cat-xss { background: rgba(246,130,31,.12); color: var(--cf-orange); }

.cat-traversal { background: rgba(159,122,234,.12); color: var(--cf-purple); }

.cat-scanner { background: rgba(66,153,225,.12); color: var(--cf-blue); }

.cat-rce { background: rgba(245,101,101,.2); color: #ff8a8a; }

.cat-ratelimit { background: rgba(56,178,172,.12); color: var(--cf-cyan); }

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

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

.brand{align-items:center; display:flex; font-weight:700; gap:14px; letter-spacing:.2px}

.btn{border:1px solid transparent; gap:10px; transition:transform .15s ease, box-shadow .2s ease, background .2s ease, opacity .2s}

.btn.secondary:hover{transform:translateY(-1px)}

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

.cta{box-shadow:var(--shadow); transition:transform .15s, box-shadow .2s}

a{color:#fff; text-decoration:none}

body{background:#0f172a; color:#e5e7eb; font-family:'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif; line-height:1.6}

footer .wrapper{padding-left:28px !important; padding-right:28px !important}

h1{font-size:clamp(28px, 4vw, 48px); font-weight:700; letter-spacing:-0.02em; line-height:1.12; margin:14px 0 14px}

h1,h2,h3,h4{letter-spacing:-0.015em}

html,body{height:100%}

nav a{border-radius:10px; display:inline-block; padding:10px 12px}

nav a:hover{background:rgba(255,255,255,.06)}

nav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0}

@media(max-width:1024px){
  .footer-grid,.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}
}

/* --- cadeia responsiva restaurada na ordem do site original.
   Precisa ficar no FIM: o css da pagina carrega depois do base.css,
   entao regra de topo vence @media do base (mesma especificidade).
   Reproduz o cascade antigo exatamente. --- */
.cards{grid-template-columns:repeat(3,1fr)}
@media (max-width:1024px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .cards{grid-template-columns:1fr} }

/* --- 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} }
@media (max-width:640px){ .list{grid-template-columns:1fr} }