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

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

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

.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:20px}

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

section{padding:72px 0}

.card-link{display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:14px; font-weight:600; color:var(--accent); transition:gap .2s ease}

.card:hover .card-link{gap:10px}

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

.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)}
  .cards.cves{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .quotes{grid-template-columns:1fr}
}

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

@media (max-width:640px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .card-link{display:none}
  .cards.cves{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
}

.card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}

.card-icon{display:inline-grid; place-items:center; width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg, rgba(4,107,210,.18), rgba(224,53,53,.12)); border:1px solid var(--ring); color:#e2e8f0; flex-shrink:0}

.card-icon svg{width:22px; height:22px}

.chip.ataque{background:rgba(224,53,53,.13); border-color:rgba(224,53,53,.30); color:#fecaca}

.chip.defesa{background:rgba(4,107,210,.16); border-color:rgba(4,107,210,.36); color:#bfdbfe}

.eyebrow{display:block; font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; margin-bottom:10px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:700}

.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; counter-reset:step}

.step{position:relative; background:rgba(255,255,255,.04); border:1px solid var(--ring); border-radius:18px; padding:20px 18px}

.step-num{font-family:var(--mono); font-weight:700; font-size:24px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; display:block; margin-bottom:8px}

.step h3{margin:0 0 8px; font-size:16px}

.step p{margin:0; font-size:13.5px; color:var(--muted)}

.step.hl{overflow:hidden}

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

.chip.grad{background:linear-gradient(135deg, #046bd2, #e03535); border:none; color:#fff !important; font-weight:700; font-size:11px; box-shadow:0 2px 8px rgba(4,107,210,.3)}

.cards.cves{grid-template-columns:repeat(4,1fr)}

.cve-id{font-family:var(--mono); font-size:12.5px; letter-spacing:.02em; color:var(--accent); display:block; margin-bottom:6px}

.chip.cve-pub{background:rgba(224,53,53,.13); border-color:rgba(224,53,53,.30); color:#fecaca}

.chip.cve-pend{background:rgba(255,255,255,.06); border-color:var(--ring); color:#cbd5e1}

.chip.cve-crit{background:rgba(224,53,53,.22); border-color:rgba(224,53,53,.45); color:#fca5a5; font-weight:700}

.cards.cves .card h3{font-size:16.5px; line-height:1.35}

.cards.cves .card p{font-size:13.5px; color:var(--muted)}

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

.quote{background:rgba(255,255,255,.04); border:1px solid var(--ring); border-radius:18px; padding:22px; display:flex; flex-direction:column; gap:14px}

.quote p{margin:0; font-size:15px; color:#e2e8f0}

.quote p::before{content:"\201C"; font-size:34px; line-height:0; vertical-align:-10px; margin-right:4px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800}

.quote cite{margin-top:auto; font-size:13px; color:#94a3b8 !important; font-family:var(--mono); font-style:normal; display:block}

.insight-meta{font-family:var(--mono); font-size:12px; color:var(--muted); display:block; margin-bottom:8px}

.section-head{display:flex; align-items:end; justify-content:space-between; gap:16px; flex-wrap:wrap}

.section-head .more{font-size:14px; font-weight:600; color:var(--accent); white-space:nowrap; margin-bottom:26px}

@media (max-width:1024px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .cards.cves{grid-template-columns:repeat(2,1fr)}
  .quotes{grid-template-columns:1fr}
}

@media (max-width:640px){
  .steps{grid-template-columns:1fr}
  .cards.cves{grid-template-columns:1fr}
}

.report-list{list-style:none; display:flex; flex-wrap:wrap; gap:8px 18px; margin:12px 0 0; padding:0}

.report-list li{font-size:13.5px; color:#cbd5e1; display:inline-flex; align-items:center; gap:7px}

.report-list li::before{content:"✓"; font-family:var(--mono); font-weight:700; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

@media (max-width:640px){
  .hero-card{ display:none !important; }
  #ts-relatorio-band{ display:none; }
  .logos{ grid-template-columns:repeat(5,1fr); gap:6px; }
  .logos img{ height:24px; }
  #insights .cards .card:nth-child(3){ display:none; }
  #contato{ display:none; }
}

.about{display:grid; gap:32px; grid-template-columns: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.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)}

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

.card{background:rgba(255,255,255,.04); border:1px solid var(--ring); border-radius:18px; color:inherit; cursor:pointer; display:block; overflow:hidden; padding:22px; position:relative; text-decoration:none; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease}

.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(99,179,255,.4); box-shadow:0 8px 32px rgba(99,179,255,.08); transform:translateY(-4px)}

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

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

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

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

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

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{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}
  .card{border-color:rgba(99,179,255,.2); padding-right:48px; position:relative}
  .card::after{color:var(--accent); content:"→"; font-size:18px; opacity:.7; position:absolute; right:20px; top:50%; transform:translateY(-50%)}
  .card:active{background:rgba(99,179,255,.08); border-color:rgba(99,179,255,.5); transform:scale(0.97); transition:transform .1s ease}
  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. --- */
@media (max-width:640px){ .band{align-items:flex-start} }
.band{align-items:center}
.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} }