*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  background: var(--bg-0);
}

body {
  position: relative;
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--ink-1);
  background: var(--bg-0);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* grão fixo — mesma camada da malha, estritamente atrás de tudo. Sem
   máscara e sem opacity de elemento: a transparência mora dentro do SVG,
   então nenhum filho é afetado */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--grain);
  background-repeat: repeat;
  background-size: 180px 180px;
}

/* a contrapartida do grão acima: é esta regra que põe todo o conteúdo na
   frente da camada fixa em z-index 0. Também é o que sustenta o header
   (z-index 60) e o modal (z-index 100) — mexer aqui reordena os dois */
body > * {
  position: relative;
  z-index: 1;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  color: inherit;
}

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink-0);
}

::selection {
  background: var(--acc);
  color: var(--acc-ink);
}

:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

/* ---------- Faixas ---------- */

.band {
  position: relative;
  padding-block: var(--space-3xl);
  /* clip em vez de hidden: hidden faz da faixa um contêiner de rolagem e
     mata o position:sticky da coluna do curso. A linha de cima fica de
     reserva para quem não entende clip */
  overflow: hidden;
  overflow: clip;
}

.band > .container {
  position: relative;
  z-index: 2;
}

/* A grade era uma camada fixa no body, ancorada no topo da página: descia
   junto com a rolagem e vazava por cima das faixas verdes. Agora ela é
   propriedade da faixa preta e de mais ninguém — cada faixa desenha a sua,
   alinhada ao próprio bloco. Vive num pseudo porque a máscara que apaga as
   bordas não pode alcançar o conteúdo da seção. */
.band:not(.band--forest)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--grid);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(115% 75% at 50% 50%, #000 0%, transparent 76%);
  mask-image: radial-gradient(115% 75% at 50% 50%, #000 0%, transparent 76%);
}

.band--tight {
  padding-block: var(--space-2xl);
}

/* ---------- Faixas verdes ---------- */

/* O ritmo da página é faixa verde / faixa preta, e não decoração. Dentro
   de uma faixa verde o contexto inteiro muda: cartão deixa de ser um
   fundo mais escuro e passa a ser véu branco, senão a elevação inverte —
   --bg-2 é mais escuro que --forest. Redefinindo os tokens no escopo da
   seção, todo componente interno se adapta sozinho.
   O acento também sobe um degrau: --acc cai a 4,56:1 sobre #1E3A2F,
   enquanto --acc-hi dá 7,67:1. */
.hero,
.band--forest,
.site-footer {
  --surface: rgba(255, 255, 255, 0.06);
  --surface-hi: rgba(255, 255, 255, 0.1);
  --border: rgba(255, 255, 255, 0.16);
  --border-hi: rgba(255, 255, 255, 0.24);
  --border-acc: rgba(255, 255, 255, 0.22);
  /* cartão preto translúcido. O véu branco que estava aqui deixava o cartão
     MAIS CLARO que a faixa e invertia a elevação: em vez de um objeto
     pousado sobre o verde, um buraco de luz.
     Translúcido e não chapado: a 0.58 o gradiente ainda atravessa, então o
     cartão do alto da faixa fica um pouco mais escuro que o de baixo e o
     verde continua vivo por trás da grade. Chapado, a grade de cartões
     apagaria o gradiente no trecho inteiro que ela cobre. */
  --card: rgba(17, 17, 17, 0.58);
  --acc: var(--acc-hi);
  /* mesma razão do --acc: a cauda do degradê de texto sobe para --acc-hi,
     senão a segunda metade do título esmaece contra o verde */
  --g-text: linear-gradient(135deg, #FFFFFF 0%, #C0E9D4 48%, #8EDCB4 100%);

  /* o cinza mais fraco da escala precisa subir aqui: #A8A8A8 cairia a
     5,50:1 na ponta clara do gradiente. Este dá 6,28:1 — AA com folga, e
     ainda deixa um degrau visível para --ink-2 (9,06:1). Levá-lo a AAA
     exigiria #C4C4C4, indistinguível de --ink-2 e o degrau morreria */
  --ink-3: #B8B8B8;

  /* verde sobre verde perde força: o CTA vira branco chapado (19,22:1 no
     rótulo) e o halo do botão deixa de ser verde */
  --btn-bg: #FFFFFF;
  --btn-ink: var(--bg-0);
  --shadow-btn: 0 14px 30px -14px rgba(0, 0, 0, 0.75), 0 2px 6px -2px rgba(0, 0, 0, 0.55);
  --shadow-btn-hover: 0 20px 38px -14px rgba(0, 0, 0, 0.9), 0 3px 8px -2px rgba(0, 0, 0, 0.6);
  --shadow-btn-active: 0 6px 16px -10px rgba(0, 0, 0, 0.8);
  /* sobre o verde o botão já é branco chapado: o mesmo halo do fundo preto
     estouraria a borda. Alphas mais baixos, mesma leitura de luz */
  --glow-btn: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 0 22px -8px rgba(255, 255, 255, 0.3);
  --glow-btn-hover: 0 0 0 1px rgba(255, 255, 255, 0.28), 0 0 30px -6px rgba(255, 255, 255, 0.45);
  --glow-btn-active: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 14px -8px rgba(255, 255, 255, 0.22);
}

/* o grão entra na própria background-image da faixa: camada de fundo do
   elemento, que por definição pinta atrás de todo o conteúdo dele. Não é
   sobreposição, não usa opacity, não afeta filho nenhum.
   O verde deixou de ser chapado: é o gradiente do addept.ai, que entra
   charcoal no canto superior direito e sai floresta no inferior esquerdo.
   Chapado, três faixas verdes viravam um bloco só; com o gradiente, cada
   faixa tem canto escuro e canto verde e o olho reconhece o corte. */
.band--forest {
  background-image: var(--grain-strong), var(--g-forest);
  background-repeat: repeat, no-repeat;
  background-size: 180px 180px, cover;
  border-block: 1px solid rgba(255, 255, 255, 0.1);
}

/* ---------- Blocos de texto ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  /* 10% acima do mono padrão: é o rótulo que abre cada seção */
  font-size: calc(var(--size-mono) * 1.1);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acc);
  margin-bottom: var(--space-sm);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-acc);
  border-radius: var(--radius-pill);
  background: rgba(var(--acc-rgb), 0.07);
  font-family: var(--font-mono);
  font-size: var(--size-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acc);
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 10px 1px rgba(var(--acc-rgb), 0.9);
  flex: none;
}

.dot--pulse {
  animation: pulse 2.4s var(--ease) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.75); }
}

.accent {
  color: var(--acc);
}

/* gradiente de texto: branco escorrendo para o verde de marca */
.accent-grad {
  background: var(--g-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-head {
  max-width: 760px;
  margin-bottom: var(--space-xl);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head h2 {
  font-size: var(--size-h2);
  margin-bottom: var(--space-md);
}

.section-head p {
  font-size: var(--size-body-lg);
  color: var(--ink-1);
}

.section-head p a {
  color: var(--acc);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Entrada em cena ---------- */

/* só esconde se o JS estiver de pé para revelar depois */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .dot--pulse { animation: none; }
}

@media (max-width: 820px) {
  .band { padding-block: var(--space-2xl); }
}