/* =====================================================================
   Home — hero, resumo da SMN, fundador, faixas de IA e talentos, cases,
   clientes e chamada final.
   ===================================================================== */

/* --- hero ------------------------------------------------------------- */

.smn-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 12vw, 118px) var(--gutter, 20px) clamp(80px, 14vw, 128px);
}

.smn-hero__brilho {
  position: absolute;
  top: -180px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Escurece o pé do hero para o conteúdo seguinte emendar sem corte. */
.smn-hero__veu {
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 60% at 50% 4%, rgba(45, 45, 84, 0), rgba(24, 24, 45, .55));
  pointer-events: none;
}

.smn-hero__miolo {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.smn-hero__sub {
  max-width: 580px;
  margin: 30px auto 0;
  font-size: var(--smn-lead);
  line-height: 1.6;
  color: var(--smn-txt-forte);
}

.smn-hero__acoes {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 42px;
  flex-wrap: wrap;
}

.smn-hero__rolar {
  margin-top: 66px;
  font: 500 11px var(--smn-fonte-mono);
  letter-spacing: var(--smn-trilha-selo);
  color: rgba(var(--smn-texto-rgb), .4);
}

.smn-selo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 500 11px var(--smn-fonte-mono);
  letter-spacing: var(--smn-trilha-selo);
  color: var(--smn-verde-suave);
  background: var(--smn-verde-veu);
  border: 1px solid var(--smn-verde-borda);
  padding: 8px 15px;
  border-radius: var(--smn-raio-pill);
  margin-bottom: 32px;
}

.smn-selo__pulso {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--smn-verde);
  box-shadow: 0 0 10px var(--smn-verde);
  animation: smnPulse 2.4s ease-in-out infinite;
}

/* --- seções de duas colunas --------------------------------------------- */
/* O número de colunas vem do estado da largura da janela e segue inline. */

.smn-dupla {
  display: grid;
  align-items: center;
  gap: clamp(36px, 5vw, 64px);
}

.smn-dupla--talentos {
  gap: clamp(32px, 4vw, 60px);
}

/* --- resumo da SMN -------------------------------------------------------- */

.smn-sobre {
  padding: 96px var(--gutter, 24px);
}

.smn-estatisticas {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  margin-top: 38px;
}

.smn-estatistica__numero {
  font-family: var(--smn-fonte-titulo);
  font-weight: 600;
  font-size: 38px;
  color: var(--smn-verde);
  line-height: 1;
}

.smn-estatistica__rotulo {
  margin-top: 6px;
  font: 500 12px var(--smn-fonte-mono);
  color: rgba(var(--smn-texto-rgb), .55);
  letter-spacing: .04em;
}

/* --- fundador -------------------------------------------------------------- */

.smn-ceo {
  padding: 96px var(--gutter, 24px);
}

.smn-ceo__papel {
  margin-top: 10px;
  font: 600 15px var(--smn-fonte-texto);
  color: rgba(143, 224, 177, .9);
}

.smn-ceo__fatos {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 26px;
}

.smn-ceo__fato {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(var(--smn-texto-rgb), .75);
}

.smn-ceo__marcador {
  flex: none;
  margin-top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--smn-verde);
}

.smn-ceo__destaque {
  color: var(--smn-verde);
  font-weight: 600;
}

/* --- faixas de IA e talentos ------------------------------------------------- */

.smn-faixa-ia {
  position: relative;
  overflow: hidden;
  padding: 88px var(--gutter, 24px);
  background: linear-gradient(180deg, var(--smn-superficie), var(--smn-superficie-alt));
}

.smn-faixa-talentos {
  padding: 88px var(--gutter, 24px);
}

.smn-faixa__cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

.smn-faixa__intro {
  max-width: 640px;
}

.smn-passos {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.smn-passo__sigla {
  font: 700 12px var(--smn-fonte-mono);
  letter-spacing: -.03em;
  color: var(--smn-verde);
}

/* --- cases ---------------------------------------------------------------------- */

.smn-cases {
  scroll-margin-top: 110px;
  padding: 88px var(--gutter, 24px);
  background: linear-gradient(180deg, var(--smn-superficie-alt), var(--smn-superficie));
}

.smn-cases__intro {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 48px;
}

.smn-case {
  display: block;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--smn-raio-card-g);
  overflow: hidden;
  transition: transform var(--smn-t-hover) ease, border-color var(--smn-t-hover) ease;
}

.smn-case__corpo {
  padding: 22px;
}

.smn-case__tag {
  font: 500 10px var(--smn-fonte-mono);
  letter-spacing: .14em;
  color: var(--smn-verde);
}

.smn-case__titulo {
  margin-top: 10px;
  font: 600 19px var(--smn-fonte-titulo);
  color: var(--smn-branco);
}

.smn-case__desc {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--smn-txt-fraco);
}

.smn-case__ver {
  margin-top: 16px;
  font: 600 13px var(--smn-fonte-texto);
  color: var(--smn-verde);
}

/* --- clientes ------------------------------------------------------------------- */

.smn-clientes {
  padding: 84px var(--gutter, 24px);
}

.smn-clientes__rotulo {
  font: 500 12px var(--smn-fonte-mono);
  letter-spacing: .22em;
  color: var(--smn-txt-tenue);
  margin-bottom: 38px;
}

/* Esmaece as pontas para os logos entrarem e saírem sem corte seco. */
.smn-marquee {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.smn-marquee__janela {
  overflow: hidden;
}

.smn-marquee__trilho {
  display: flex;
  width: max-content;
  animation: smnMarqueeL 64s linear infinite;
}

/* --- chamada final ---------------------------------------------------------------- */

.smn-chamada {
  padding: 40px var(--gutter, 24px) 100px;
}

.smn-chamada__painel {
  position: relative;
  overflow: hidden;
  padding: 72px 48px;
  border-radius: 26px;
  background: linear-gradient(120deg, var(--smn-painel), var(--smn-painel-alt));
  border: 1px solid rgba(var(--smn-verde-rgb), .25);
  text-align: center;
}