:root {
  --fundo: #070b14;
  --painel: #0e1626;
  --painel-alto: #131f33;
  --borda: #1e2c44;
  --texto: #e6edf7;
  --suave: #93a4bd;
  --acento: #2f7cf6;
  --acento-claro: #63a4ff;
  --raio: 16px;
  --largura: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* Fundo em camadas: dois halos frios sobre o escuro — dá profundidade sem imagem nenhuma. */
  background:
    radial-gradient(1100px 520px at 78% -12%, rgba(47, 124, 246, .20), transparent 62%),
    radial-gradient(900px 520px at 6% 6%, rgba(124, 211, 255, .09), transparent 58%),
    var(--fundo);
  background-attachment: fixed;
  color: var(--texto);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acento-claro); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 24px; }

/* topo */
.topo {
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(12px);
  background: rgba(7, 11, 20, .78);
  border-bottom: 1px solid var(--borda);
}
.topo .container { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.02em; font-size: 18px; color: var(--texto); }
.marca:hover { text-decoration: none; }
.marca .ponto {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--acento), #0b57c9);
  display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 800;
}
.topo nav { display: flex; align-items: center; gap: 22px; }
.topo nav a { color: var(--suave); font-size: 14px; }
/* O botão do topo também é um <a> dentro da nav: sem esta regra ele herdava o cinza e parecia desativado. */
.topo nav a.botao { color: #fff; font-weight: 600; }
.topo nav a:hover { color: var(--texto); text-decoration: none; }
@media (max-width: 760px) { .topo nav a:not(.botao) { display: none; } }

/* botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 11px; font-weight: 600; font-size: 15px;
  background: linear-gradient(180deg, #4a91ff, var(--acento)); color: #fff; border: 1px solid rgba(255, 255, 255, .10);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
  box-shadow: 0 10px 26px -12px rgba(47, 124, 246, .9);
}
.botao:hover { filter: brightness(1.08); text-decoration: none; transform: translateY(-1px); }
.botao.secundario { background: transparent; color: var(--texto); border-color: var(--borda); box-shadow: none; }
.botao.secundario:hover { background: var(--painel); }
.botao.pequeno { padding: 9px 16px; font-size: 14px; border-radius: 9px; }

/* hero */
.hero { padding: 96px 0 72px; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -40% 30% 40% -20%;
  background: radial-gradient(closest-side, rgba(47, 124, 246, .22), transparent 70%);
  pointer-events: none;
}
.hero .container { position: relative; }
.selo {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 999px; font-size: 13px; color: var(--acento-claro);
  background: rgba(47, 124, 246, .12); border: 1px solid rgba(47, 124, 246, .3);
}
h1 {
  font-size: clamp(34px, 5.4vw, 62px); line-height: 1.06; letter-spacing: -.035em;
  margin: 22px 0 18px; font-weight: 800; max-width: 17ch;
}
h1 .realce {
  background: linear-gradient(120deg, var(--acento-claro), #7cd3ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.subtitulo { font-size: clamp(16px, 1.9vw, 20px); color: var(--suave); max-width: 58ch; margin: 0 0 34px; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.nota { margin-top: 16px; font-size: 13px; color: var(--suave); }

/* faixas */
section.bloco { padding: 72px 0; }
.cabecalho-bloco { max-width: 62ch; margin-bottom: 40px; }
.cabecalho-bloco h2 { font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -.03em; margin: 0 0 12px; }
.cabecalho-bloco p { color: var(--suave); margin: 0; font-size: 17px; }

.grade { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.cartao {
  background: linear-gradient(180deg, var(--painel), var(--fundo));
  border: 1px solid var(--borda); border-radius: var(--raio); padding: 26px;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.cartao:hover {
  border-color: #2f4a72;
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -28px rgba(47, 124, 246, .85);
}
.icone {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(47, 124, 246, .14); color: var(--acento-claro); margin-bottom: 16px; font-size: 20px;
}
.cartao h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: -.01em; }
.cartao p { margin: 0; color: var(--suave); font-size: 15px; }

.passos { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: passo; }
.passo {
  border: 1px solid var(--borda); border-radius: var(--raio); padding: 26px; background: var(--painel);
  position: relative;
}
.passo::before {
  counter-increment: passo; content: counter(passo);
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--acento); color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 14px;
}
.passo h3 { margin: 0 0 8px; font-size: 17px; }
.passo p { margin: 0; color: var(--suave); font-size: 15px; }

.chamada {
  border: 1px solid var(--borda); border-radius: 22px; padding: 44px;
  background: linear-gradient(135deg, rgba(47, 124, 246, .16), rgba(47, 124, 246, .02));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px;
}
.chamada h2 { margin: 0 0 6px; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.02em; }
.chamada p { margin: 0; color: var(--suave); }

/* rodapé */
footer {
  border-top: 1px solid var(--borda); padding: 44px 0 34px; margin-top: 40px; color: var(--suave); font-size: 14px;
}
footer .container { display: flex; flex-wrap: wrap; gap: 18px 40px; justify-content: space-between; align-items: flex-start; }
footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
footer nav a { color: var(--suave); }
footer nav a:hover { color: var(--texto); }

/* páginas de texto legal */
.documento { padding: 56px 0 72px; max-width: 78ch; }
.documento h1 { font-size: clamp(28px, 3.6vw, 40px); margin: 0 0 8px; }
.documento .data { color: var(--suave); font-size: 14px; margin-bottom: 34px; }
.documento h2 { font-size: 20px; margin: 34px 0 10px; letter-spacing: -.01em; }
.documento p, .documento li { color: #c8d4e6; }
.documento ul { padding-left: 22px; }
.documento li { margin-bottom: 8px; }
.documento a { color: var(--acento-claro); }
.nota-interna {
  border: 1px dashed #4b5f80; background: rgba(255, 196, 0, .07); color: #d8c48a;
  border-radius: 12px; padding: 14px 16px; font-size: 13px; margin-bottom: 26px;
}
.partes { color: var(--suave); font-size: 14px; border-left: 3px solid var(--borda); padding-left: 14px; }

/* ---------- hero com mockup de celular ---------- */
.hero-grade { display: grid; gap: 56px; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
@media (max-width: 900px) { .hero-grade { grid-template-columns: 1fr; gap: 40px; } }
.mockup { position: relative; display: flex; justify-content: center; }
.mockup::before {
  content: ""; position: absolute; inset: 8% 0 8% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(47, 124, 246, .30), transparent 72%); filter: blur(6px);
}
.celular {
  position: relative; width: min(290px, 78vw); aspect-ratio: 290 / 590; border-radius: 38px;
  background: linear-gradient(180deg, #182338, #0b1220); border: 1px solid #2a3b58;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), inset 0 0 0 6px #05080f;
  padding: 14px; overflow: hidden;
}
.celular .pilula { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 74px; height: 6px; border-radius: 99px; background: #1b2740; }
.tela {
  height: 100%; border-radius: 26px; background: #0a121f; padding: 34px 12px 12px;
  display: flex; flex-direction: column; gap: 9px; overflow: hidden;
}
.bolha {
  max-width: 84%; padding: 9px 11px; border-radius: 12px; font-size: 12px; line-height: 1.35;
  opacity: 0; transform: translateY(8px); animation: entra .5s ease forwards;
}
.bolha.recebida { align-self: flex-start; background: #16233a; color: #dbe6f6; border-bottom-left-radius: 4px; }
.bolha.enviada { align-self: flex-end; background: #1b4f9e; color: #eaf2ff; border-bottom-right-radius: 4px; }
.bolha .hora { display: flex; align-items: center; gap: 3px; justify-content: flex-end; font-size: 9px; color: #b9d2f6; margin-top: 3px; }
.bolha .foto { height: 62px; border-radius: 8px; background: linear-gradient(135deg, #2f7cf6, #7cd3ff); margin-bottom: 6px; }
.bolha .botao-fake { display: block; margin-top: 6px; padding: 6px; border-radius: 7px; background: rgba(255, 255, 255, .14); text-align: center; font-weight: 600; }
.bolha .check { letter-spacing: -3px; }
@keyframes entra { to { opacity: 1; transform: translateY(0); } }
.bolha:nth-child(1) { animation-delay: .2s; }
.bolha:nth-child(2) { animation-delay: 1.0s; }
.bolha:nth-child(3) { animation-delay: 1.9s; }
.bolha:nth-child(4) { animation-delay: 2.7s; }
.bolha:nth-child(5) { animation-delay: 3.4s; }
@media (prefers-reduced-motion: reduce) {
  .bolha { animation: none; opacity: 1; transform: none; }
  .barra i { animation: none !important; }
}

/* ---------- canais ---------- */
.canais { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.canal { border: 1px solid var(--borda); border-radius: var(--raio); padding: 24px; background: var(--painel); }
.canal .etiqueta { font-size: 12px; color: var(--acento-claro); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.canal h3 { margin: 8px 0 8px; font-size: 18px; }
.canal ul { margin: 0; padding-left: 18px; color: var(--suave); font-size: 14px; }
.canal li { margin-bottom: 6px; }

/* ---------- comparação ---------- */
.comparacao { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
.comparacao th, .comparacao td { padding: 14px 16px; border-bottom: 1px solid var(--borda); text-align: left; }
.comparacao thead th { color: var(--suave); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.comparacao thead th:last-child { color: var(--acento-claro); }
.comparacao tbody tr:last-child td { border-bottom: 0; }
.comparacao td:first-child { color: #c8d4e6; }
.comparacao td:last-child { color: var(--texto); font-weight: 600; }
.caixa-tabela { border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; background: var(--painel); }
@media (max-width: 640px) { .comparacao th, .comparacao td { padding: 11px 12px; font-size: 13px; } }

/* ---------- relatório ao vivo ---------- */
.relatorio {
  border: 1px solid var(--borda); border-radius: 18px; background: var(--painel);
  padding: 24px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.kpi { }
.kpi .valor { font-size: 30px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kpi .rotulo { font-size: 12.5px; color: var(--suave); text-transform: uppercase; letter-spacing: .05em; }
.barra { height: 8px; border-radius: 99px; background: #16233a; overflow: hidden; margin-top: 6px; }
.barra i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--acento), #7cd3ff); width: 0; animation: enche 2.6s ease-out forwards; }
.barra.verde i { background: linear-gradient(90deg, #1f9d63, #5be0a0); }
.barra.vermelha i { background: linear-gradient(90deg, #b4442f, #ef7b5f); }
@keyframes enche { from { width: 0; } }
.pulso { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #1f9d63; box-shadow: 0 0 0 0 rgba(31, 157, 99, .7); animation: pulsa 2s infinite; margin-right: 8px; }
@keyframes pulsa { 70% { box-shadow: 0 0 0 8px rgba(31, 157, 99, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 157, 99, 0); } }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq details { border: 1px solid var(--borda); border-radius: 12px; background: var(--painel); padding: 16px 18px; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 15.5px; }
.faq summary::marker { color: var(--acento-claro); }
.faq p { margin: 10px 0 0; color: var(--suave); font-size: 15px; }

/* ---------- aviso de cookies ---------- */
.aviso-cookies {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50;
  background: #0e1626; border: 1px solid var(--borda); border-radius: 14px;
  padding: 16px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .95); font-size: 13.5px; color: var(--suave);
}
.aviso-cookies[hidden] { display: none; }
.aviso-cookies p { margin: 0; flex: 1 1 320px; }
.aviso-cookies .acoes { display: flex; gap: 8px; }
@media (min-width: 900px) { .aviso-cookies { left: auto; width: 420px; } }

/* ---------- documento legal: leitura larga + índice fixo ---------- */
.doc-grade { display: grid; gap: 48px; grid-template-columns: minmax(0, 720px) 240px; align-items: start; }
@media (max-width: 1000px) { .doc-grade { grid-template-columns: minmax(0, 1fr); gap: 0; } .indice-doc { display: none; } }
.doc-texto h1 { max-width: 100%; }
.doc-texto h2 { max-width: 100%; }
.doc-texto p, .doc-texto li { max-width: 68ch; }
.indice-doc { position: sticky; top: 92px; border-left: 1px solid var(--borda); padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
.indice-titulo { margin: 0 0 6px; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--suave); }
.indice-doc a { color: var(--suave); font-size: 13.5px; line-height: 1.35; }
.indice-doc a:hover { color: var(--texto); text-decoration: none; }

/* ---------- border beam: um risco de luz a varrer a borda ---------- */
.canal { position: relative; overflow: hidden; }
.canal::after {
  content: ""; position: absolute; top: 0; left: -45%; width: 45%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--acento-claro), transparent);
  animation: varre 3.4s linear infinite;
}
.canal:nth-child(2)::after { animation-delay: 1.1s; }
.canal:nth-child(3)::after { animation-delay: 2.2s; }
@keyframes varre { to { left: 105%; } }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); padding: 16px 0; }
.marquee-faixa { display: flex; gap: 46px; width: max-content; animation: corre 28s linear infinite; }
.marquee-faixa span { color: var(--suave); font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; }
.marquee-faixa span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--acento); }
@keyframes corre { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-faixa, .canal::after { animation: none; } }

/* ---------- passos com linha ---------- */
.passos-linha { position: relative; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.passos-linha::before {
  content: ""; position: absolute; top: 46px; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--borda) 12%, var(--borda) 88%, transparent);
}
@media (max-width: 760px) { .passos-linha::before { display: none; } }
.passos-linha .passo { background: var(--painel); }

/* ---------- bento ---------- */
.bento { display: grid; gap: 16px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bento > .cartao { grid-column: span 2; }
.bento > .cartao.largo { grid-column: span 3; }
.bento > .cartao.alto { grid-column: span 3; }
@media (max-width: 980px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento > .cartao, .bento > .cartao.largo, .bento > .cartao.alto { grid-column: span 1; } }
@media (max-width: 620px) { .bento { grid-template-columns: 1fr; } }

/* ---------- números que contam ---------- */
.ticker { font-variant-numeric: tabular-nums; }