:root {
  --bg: #0b1220;
  --panel: #0f172a;
  --card: #111827;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --brand: #22d3ee;
  --accent: #60a5fa;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(2, 6, 23, .5);

  /* NOVO: camada de degradê de página */
  --pg1: rgba(96,165,250,.10); /* azul suave */
  --pg2: rgba(34,211,238,.08); /* ciano suave */
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

/* Garantir base sólida atrás do body */
html { background: var(--bg); }

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  /* 1) Um ÚNICO degradê linear que cobre todo o body (cresce com o conteúdo)
     2) Seus radiais existentes por baixo
     3) A cor de fundo base no final da pilha
  */
  background:
    linear-gradient(180deg, var(--pg1) 0%, var(--pg2) 45%, rgba(0,0,0,0) 100%),
    radial-gradient(1200px 600px at 20% -10%, #0f223f 0%, transparent 50%),
    radial-gradient(1000px 800px at 120% 10%, #081427 0%, transparent 60%),
    var(--bg);

  /* evita repetição e “linha de corte” */
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;

  /* o degradê linear estica 100% da largura e 100% da ALTURA do body (fim = fim do conteúdo) */
  background-size: 100% 100%, auto, auto, auto;

  /* Safari/iOS às vezes cria seams com fixed; “local” é o mais estável aqui */
  background-attachment: local, scroll, scroll, scroll;

  color: var(--text);
}

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

.container { max-width: 900px; padding: 24px; margin: 0 auto; }
header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo img { max-height: 60px; max-width: 160px; }

.badge { 
  font-size: 12px; 
  padding: 6px 10px; 
  border-radius: 999px; 
  background: rgba(34,211,238,.12); 
  color: var(--brand); 
  border: 1px solid rgba(34,211,238,.35); 
}

h1 { font-size: clamp(26px, 4vw, 40px); margin: 32px 0 16px; }
h2 { margin-top: 28px; font-size: 20px; }
p { color: var(--muted); margin: 12px 0; font-size: 15px; }

.section { 
  margin: 32px 0; 
  padding: 24px; 
  background: var(--card); 
  border-radius: var(--radius); 
  box-shadow: var(--shadow); 
}

footer { border-top: 1px solid rgba(255,255,255,.07); margin-top: 40px; }
.footer-inner { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 12px; 
  align-items: center; 
  justify-content: space-between; 
  padding: 18px 0; 
  color: var(--muted); 
  font-size: 14px; 
}
.rev{ unicode-bidi:bidi-override; direction:rtl; }