*{ box-sizing:border-box; }
html{ color-scheme:light; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{
  margin:0; background:var(--ln-bg); color:var(--ln-ink);
  font-family:var(--ln-corpo); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{ text-decoration:none; color:inherit; }
:focus-visible{ outline:2px solid var(--ln-indigo); outline-offset:4px; border-radius:4px; }

:root{
  --ln-ink:#13151A; --ln-ink2:#5B6472; --ln-ink3:#5F6975;
  --ln-linha:#DCE3EC; --ln-divisor:#B9C4D6; --ln-card:#FFFFFF; --ln-bg:#EDF3F8; --ln-bg2:#E1EAF3;
  --ln-indigo:#32389F; --ln-indigo-forte:#262C7D; --ln-indigo-fraco:#E7E8F7;
  --ln-verde:#2FAF6B; --ln-verde-fraco:#E3F6EC;
  --ln-ambar:#A6690A; --ln-ambar-fraco:#FBF1DC;
  --ln-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --ln-corpo:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  /* rotulo/legenda usa a fonte do sistema, nao monoespacada: mono demais lembra ferramenta de IA */
  --ln-mono:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
}

.pagina{ max-width:1080px; margin:0 auto; padding:0 24px 0; position:relative; }

/* revelacao ao rolar, igual ao resto do site (o JS poe .rev e depois .in) */
.js .rev{ opacity:0; }
.js .rev.in{ opacity:1; animation:sobe .7s cubic-bezier(.2,.7,.2,1) backwards; animation-delay:calc(var(--i,0) * 70ms); }
@keyframes sobe{ from{ opacity:0; transform:translateY(14px); } }

/* TOPO: nav real, substitui o selo solto de antes */
.topo{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 0 0; flex-wrap:wrap; }
.topo .marca{ display:flex; align-items:center; gap:8px; font-family:var(--ln-display); font-weight:700; font-size:16px; color:var(--ln-ink); }
.topo .marca i{ width:8px; height:8px; border-radius:50%; background:var(--ln-indigo); display:block; flex:none; }
.nav-links{ display:flex; gap:28px; }
.nav-links a{ font-size:14px; color:var(--ln-ink2); transition:color .15s ease; }
@media (hover:hover){ .nav-links a:hover{ color:var(--ln-ink); } }
.topo-direita{ display:flex; align-items:center; gap:20px; }
.topo-direita .idioma{ color:var(--ln-ink3); }
.topo-direita .idioma span{ color:var(--ln-ink); }
@media (hover:hover){ .topo-direita .idioma a:hover{ color:var(--ln-indigo); } }
.botao-nav{ background:var(--ln-indigo); color:#fff; font-family:var(--ln-display); font-weight:600; font-size:13.5px; padding:9px 18px; border-radius:8px; transition:background .15s ease; white-space:nowrap; }
@media (hover:hover){ .botao-nav:hover{ background:var(--ln-indigo-forte); } }
@media (max-width:720px){ .nav-links{ display:none; } }

.voltar-rodape{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px 8px 10px; border:1.5px solid var(--ln-indigo); border-radius:999px;
  color:var(--ln-ink); font-family:var(--ln-display); font-size:13.5px; font-weight:700;
  transition:background .15s ease, color .15s ease;
}
.voltar-rodape svg{ color:var(--ln-indigo); flex:none; transition:transform .18s ease, color .15s ease; }
@media (hover:hover){
  .voltar-rodape:hover{ background:var(--ln-indigo); color:#fff; }
  .voltar-rodape:hover svg{ color:#fff; transform:translateX(-2px); }
}

/* HERO: duas colunas, texto e print flutuante, inspirado na Linea Prompt */
.hero{ max-width:1080px; margin:0 auto; padding:52px 12px 0; }
.hero-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:80px; align-items:center; }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; gap:40px; } }
.hero-texto{ max-width:520px; }
.hero .status{
  display:inline-flex; align-items:center; gap:8px; background:var(--ln-card); border:1px solid var(--ln-linha);
  padding:7px 16px; border-radius:999px; font-size:12.5px; color:var(--ln-ink2); margin-bottom:24px;
}
.hero .status i{ width:7px; height:7px; border-radius:50%; background:var(--ln-verde); display:block; flex:none; }
.hero h1{
  font-family:var(--ln-display); font-weight:700; font-size:clamp(32px,4.6vw,50px); line-height:1.08;
  letter-spacing:-.025em; margin:0 0 20px;
}
.hero h1 .sw{ position:relative; display:inline-block; }
.hero h1 .sw::after{ content:""; position:absolute; left:0; right:0; bottom:-.1em; height:4px; background:var(--ln-indigo); border-radius:2px; }
.js .hero h1 .sw::after{ transform-origin:left; transform:scaleX(0); }
.js .hero h1.in .sw::after{ animation:risca .5s .5s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes risca{ to{ transform:scaleX(1); } }
.hero .sub{ font-size:clamp(16px,1.6vw,18px); line-height:1.55; color:var(--ln-ink2); max-width:50ch; margin:0 0 28px; }
.hero .sub strong{ color:var(--ln-ink); font-weight:600; }
@media (max-width:760px){ .hero .sub br.quebra-sub{ display:none; } }
.ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:20px; }
.botao-grande{
  padding:13px 24px; border-radius:10px; background:var(--ln-indigo); color:#fff;
  font-family:var(--ln-display); font-weight:600; font-size:14.5px; transition:background .15s ease;
}
@media (hover:hover){ .botao-grande:hover{ background:var(--ln-indigo-forte); } }
.link-secundario{
  display:inline-flex; align-items:center; gap:7px; padding:12px 21px; border-radius:10px;
  background:var(--ln-card); border:1px solid var(--ln-linha); color:var(--ln-ink);
  font-family:var(--ln-display); font-weight:600; font-size:14.5px; transition:border-color .15s ease, background .15s ease;
}
.link-secundario svg{ transition:transform .15s ease; }
@media (hover:hover){
  .link-secundario:hover{ border-color:var(--ln-ink3); background:#F7FAFD; }
  .link-secundario:hover svg{ transform:translateY(2px); }
}
/* PRODUCT SHOT: video em loop rolando pelo painel real, dados de exemplo */
.hero-visual{ position:relative; }
.shot-float{
  position:absolute; top:-16px; right:-12px; z-index:3; display:flex; align-items:center; gap:6px;
  background:#fff; border:1px solid var(--ln-linha); border-radius:10px; padding:8px 14px;
  font-family:var(--ln-mono); font-size:11px; font-weight:600; color:var(--ln-indigo);
  box-shadow:0 14px 28px -10px rgba(19,21,26,.25);
}
.shot-janela-wrap{
  position:relative; border-radius:16px; overflow:hidden; background:var(--ln-card);
  border:1px solid var(--ln-linha); box-shadow:0 30px 70px -28px rgba(19,21,26,.18);
}
.shot-janela{ display:flex; align-items:center; gap:10px; padding:12px 16px; background:#F7FAFD; border-bottom:1px solid var(--ln-linha); }
.shot-janela .bolinhas{ display:flex; gap:6px; flex:none; }
.shot-janela .bolinhas span{ width:9px; height:9px; border-radius:50%; display:block; }
.shot-janela .bolinhas span:nth-child(1){ background:#FF5F57; }
.shot-janela .bolinhas span:nth-child(2){ background:#FFBD2E; }
.shot-janela .bolinhas span:nth-child(3){ background:#28C840; }
.shot-janela .titulo-janela{ font-family:var(--ln-mono); font-size:12px; color:var(--ln-ink2); }
.shot-video{ display:block; width:100%; height:auto; }

.shot-play-toggle{
  position:absolute; right:14px; bottom:14px; z-index:2;
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; border:1px solid var(--ln-linha); background:#fff;
  color:var(--ln-ink2); cursor:pointer; flex:none; padding:0; transition:background .15s ease, color .15s ease;
  box-shadow:0 10px 24px -8px rgba(19,21,26,.32);
}
@media (hover:hover){ .shot-play-toggle:hover{ background:var(--ln-indigo-fraco); color:var(--ln-indigo); } }
.shot-play-toggle svg{ display:block; }
.shot-play-toggle .ic-play{ display:none; }
.shot-play-toggle.pausado .ic-pause{ display:none; }
.shot-play-toggle.pausado .ic-play{ display:block; }

.shot-legenda{ margin:14px 0 0; font-family:var(--ln-mono); font-size:13px; color:var(--ln-ink3); text-align:right; }

.feed-vivo .topo-shot{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.feed-vivo .saldo{ font-family:var(--ln-display); font-weight:700; font-size:16px; color:var(--ln-ink); }
.feed-vivo .saldo small{ display:block; font-family:var(--ln-mono); font-weight:400; font-size:11px; color:var(--ln-ink3); letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
.badge-ok{ display:inline-flex; align-items:center; gap:6px; font-family:var(--ln-mono); font-size:11px; color:var(--ln-verde); background:var(--ln-verde-fraco); padding:4px 10px; border-radius:999px; white-space:nowrap; }
.badge-ok .pulso{ width:6px; height:6px; border-radius:50%; background:var(--ln-verde); flex:none; }

/* SECTIONS */
.secao{ padding:88px 12px; }
.secao.escura{
  background:var(--ln-bg2);
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding-left:max(36px, calc((100vw - 1080px)/2 + 36px));
  padding-right:max(36px, calc((100vw - 1080px)/2 + 36px));
}
.secao-cabeca{ max-width:1032px; margin:0 0 48px; }
.secao-cabeca h2{ font-family:var(--ln-display); font-weight:700; font-size:clamp(26px,3.6vw,38px); letter-spacing:-.02em; margin:0 0 14px; line-height:1.15; color:var(--ln-ink); }
.secao-cabeca .desc{ color:var(--ln-ink2); font-size:16px; margin:0; }

/* LISTA NUMERADA: motivos e passo a passo, linha usa a largura toda (numero | titulo | descricao) */
.lista-numerada{ max-width:1032px; margin:0; }
.item-numerado{
  display:grid; grid-template-columns:40px minmax(200px,300px) minmax(0,1fr);
  grid-template-areas:"num title desc"; column-gap:32px; align-items:baseline;
  padding:22px 0; border-top:1px solid var(--ln-divisor);
}
.item-numerado:first-child{ border-top:none; padding-top:0; }
.item-numerado .num{ grid-area:num; font-family:var(--ln-mono); font-weight:600; font-size:13px; color:var(--ln-indigo); line-height:1.6; }
.item-numerado h3{ grid-area:title; font-family:var(--ln-display); font-size:17px; margin:0; color:var(--ln-ink); }
.item-numerado p{ grid-area:desc; font-size:14.5px; color:var(--ln-ink2); line-height:1.6; margin:0; }
@media (max-width:760px){
  .item-numerado{
    grid-template-columns:28px 1fr; row-gap:6px;
    grid-template-areas:"num title" "num desc";
  }
}

/* TIMELINE: passo a passo, linha central com marcadores alternando lado, usa a largura toda */
.timeline{ max-width:1032px; margin:0; }
.timeline-item{
  display:grid; grid-template-columns:1fr 48px 1fr; column-gap:32px; align-items:start;
  position:relative; padding-bottom:40px;
}
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item:not(:last-child)::before{
  content:""; position:absolute; left:50%; top:48px; bottom:-40px; width:2px; background:var(--ln-linha); transform:translateX(-1px);
}
.secao.escura .timeline-item:not(:last-child)::before{ background:var(--ln-linha); }
.timeline-marcador{
  grid-column:2; width:48px; height:48px; border-radius:50%; background:var(--ln-indigo); color:#fff;
  display:flex; align-items:center; justify-content:center; flex:none;
  font-family:var(--ln-display); font-weight:700; font-size:16px; font-variant-numeric:tabular-nums;
  letter-spacing:.02em; position:relative; z-index:1;
}
.timeline-item.esquerda .timeline-corpo{ grid-column:1; }
.timeline-item.esquerda .timeline-spacer{ grid-column:3; }
.timeline-item.direita .timeline-corpo{ grid-column:3; }
.timeline-item.direita .timeline-spacer{ grid-column:1; }
.timeline-corpo h3{ font-family:var(--ln-display); font-size:17px; margin:0 0 6px; color:var(--ln-ink); }
.timeline-corpo p{ font-size:14.5px; color:var(--ln-ink2); line-height:1.6; margin:0; }
@media (max-width:760px){
  .timeline-item{ grid-template-columns:48px 1fr; column-gap:24px; }
  .timeline-item:not(:last-child)::before{ left:24px; transform:none; }
  .timeline-marcador{ grid-column:1; grid-row:1; }
  .timeline-item.esquerda .timeline-corpo, .timeline-item.direita .timeline-corpo{ grid-column:2; grid-row:1; }
  .timeline-item .timeline-spacer{ display:none; }
}

/* BANNER DE REGRA: destaque grande acima do bento, classificar pela sua regra */
.regra-banner{
  background:var(--ln-card); border:1px solid var(--ln-linha); box-shadow:0 1px 2px rgba(19,21,26,.03);
  border-radius:16px; padding:28px 32px; margin:0 0 20px;
  max-width:1032px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px;
}
.regra-banner .regra-texto{ flex:1 1 320px; }
.regra-cabeca{ display:flex; align-items:flex-start; gap:14px; margin:0 0 10px; }
.regra-cabeca h3{ padding-top:7px; }
.regra-cabeca .ic{
  width:40px; height:40px; border-radius:11px; margin:0; flex:none;
  background:var(--ln-indigo-fraco); color:var(--ln-indigo);
  display:flex; align-items:center; justify-content:center;
}
.regra-cabeca .ic svg{ width:19px; height:19px; }
.regra-banner h3{ font-family:var(--ln-display); font-weight:700; font-size:22px; margin:0; color:var(--ln-ink); }
.regra-banner p{ font-size:14.5px; color:var(--ln-ink2); line-height:1.6; margin:0; max-width:48ch; }
.regra-prioridade{ display:flex; align-items:flex-start; gap:10px; flex:none; }
.regra-passo{
  display:flex; flex-direction:column; align-items:center; gap:8px; font-family:var(--ln-mono); font-size:11.5px;
  color:var(--ln-ink3); text-align:center; width:96px;
}
.regra-seta{ margin-top:9px; }
.regra-n{
  width:36px; height:36px; border-radius:50%; background:var(--ln-indigo-fraco); color:var(--ln-indigo);
  display:flex; align-items:center; justify-content:center; font-family:var(--ln-display); font-weight:700; font-size:14px;
}
.regra-passo.ativo{ color:var(--ln-ink); font-weight:600; }
.regra-passo.ativo .regra-n{ background:var(--ln-indigo); color:#fff; }
.regra-seta{ color:var(--ln-ink3); font-size:16px; flex:none; }
@media (max-width:760px){
  .regra-banner{ flex-direction:column; align-items:flex-start; justify-content:flex-start; padding:28px 24px; }
  .regra-banner .regra-texto{ flex:0 0 auto; }
  /* No celular a ordem desce: bolinha e nome lado a lado, seta pra baixo
     centrada sob a bolinha. */
  .regra-prioridade{ flex-direction:column; gap:6px; }
  .regra-passo{ flex-direction:row; gap:12px; width:auto; text-align:left; }
  .regra-seta{ width:36px; margin:0; text-align:center; rotate:90deg; }
}

/* DIFERENCIAIS: grade 2x2 de cards, mesmo tratamento visual dos outros cards da página */
.bento{ max-width:1032px; margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:640px){ .bento{ grid-template-columns:1fr; } }

.feature{
  padding:26px 24px; text-align:left; background:var(--ln-card); border:1px solid var(--ln-linha);
  border-radius:16px; box-shadow:0 1px 2px rgba(19,21,26,.03);
}
.feature .ic{ width:40px; height:40px; border-radius:11px; background:var(--ln-indigo-fraco); display:flex; align-items:center; justify-content:center; margin:0; color:var(--ln-indigo); flex:none; }
.feature .ic.ambar{ background:var(--ln-ambar-fraco); color:var(--ln-ambar); }
.feature h3{ font-family:var(--ln-display); font-size:18px; margin:0; padding-top:7px; color:var(--ln-ink); }
.feature p{ font-size:14.5px; color:var(--ln-ink2); line-height:1.6; margin:0; }
.feature-cabeca{ display:flex; align-items:flex-start; gap:14px; margin:0 0 10px; }

.diagrama-wrap{
  max-width:1032px; margin:0; background:var(--ln-card);
  border:1px solid var(--ln-linha); border-radius:20px; padding:28px 16px; overflow-x:auto;
  box-shadow:0 1px 2px rgba(19,21,26,.03);
}
.diagrama-wrap svg{ width:100%; height:auto; aspect-ratio:768/222; display:block; margin:0 auto; }
.fluxo-linha{ stroke-dasharray:5 5; }
@media (prefers-reduced-motion:no-preference){
  .fluxo-linha{ animation:fluxo 1.2s linear infinite; }
}
@keyframes fluxo{ to{ stroke-dashoffset:-20; } }

/* FEED AO VIVO */
.feed-vivo{
  max-width:1032px; margin:0; border-radius:18px; background:var(--ln-card);
  border:1px solid var(--ln-linha); box-shadow:0 1px 2px rgba(19,21,26,.03);
  padding:24px 26px 0; overflow:hidden;
}
.feed-janela{
  height:260px; overflow:hidden; position:relative;
  mask-image:linear-gradient(180deg, transparent, #000 12%, #000 85%, transparent);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 12%, #000 85%, transparent);
}
.feed-lista{ list-style:none; margin:0; padding:4px 0 28px; }
@media (prefers-reduced-motion:no-preference){
  .feed-lista{ animation:feed-rola 16s linear infinite; }
}
@keyframes feed-rola{ to{ transform:translateY(-50%); } }
.feed-item{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:13px 0; border-bottom:1px solid var(--ln-linha); font-size:14px;
}
.feed-item .quem{ color:var(--ln-ink); font-weight:500; }
.feed-item .tag{
  font-family:var(--ln-mono); font-size:11.5px; padding:3px 9px; border-radius:999px; white-space:nowrap; margin-left:10px;
}
.tag.g{ background:var(--ln-indigo-fraco); color:var(--ln-indigo); }
.tag.a{ background:var(--ln-ambar-fraco); color:var(--ln-ambar); }
.feed-item .valor{ font-variant-numeric:tabular-nums; color:var(--ln-ink2); margin-left:auto; padding-right:4px; }

.fechamento{ text-align:center; padding:52px 12px 96px; }
.fechamento h2{ font-family:var(--ln-display); font-weight:700; font-size:clamp(30px,5vw,48px); letter-spacing:-.02em; margin:0 0 18px; line-height:1.1; color:var(--ln-ink); }
.fechamento h2 span{ color:var(--ln-indigo); }
.fechamento p{ color:var(--ln-ink2); font-size:16.5px; max-width:480px; margin:0 auto 24px; }
.fechamento .ctas{ justify-content:center; margin-bottom:0; }

/* CONFIGURAÇÃO: passos numerados antes do fechamento, mesma bolinha do regra-n,
   uma linha só (1 esquerda, 2 meio, 3 direita), preenchendo a largura da seção */
.config-passos{ list-style:none; margin:0; padding:0; max-width:1032px; display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.config-passos li{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; font-size:18px; color:var(--ln-ink2); line-height:1.5; }
.config-passos .regra-n-sm{
  width:48px; height:48px; border-radius:50%; background:var(--ln-card); color:var(--ln-indigo);
  box-shadow:0 1px 2px rgba(19,21,26,.08);
  display:flex; align-items:center; justify-content:center; font-family:var(--ln-display); font-weight:700; font-size:19px; flex:none;
}
.config-passos strong{ color:var(--ln-ink); }
@media (max-width:760px){ .config-passos{ grid-template-columns:1fr; gap:28px; } }

.rodape-projeto{
  margin:0; padding:24px 0 48px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--ln-mono); font-size:12.5px; color:var(--ln-ink2); border-top:1px solid var(--ln-linha);
}
.rodape-projeto a{ color:var(--ln-indigo); }