:root{
  --ink:#111114;
  --ink-soft:#6E6E73;
  --muted:#8E8E93;
  --bg:#FFFFFF;
  --bg-alt:#F7F7F8;
  --line:#EDEDF0;
  --dark:#0A0A0B;
  --dark-ink:#F5F5F7;
  --dark-soft:#A1A1A6;
  --dark-line:#26262A;
  --wrap:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Jost',-apple-system,system-ui,sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---------- topo ---------- */
.nav{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:center;
  padding:18px 24px;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:.5px solid var(--line);
}
.wordmark{display:block;line-height:0}
.wordmark img{display:block;height:21px;width:auto}

/* ---------- abertura ---------- */
.hero{padding-bottom:clamp(56px,9vw,104px)}
#scan{
  display:block;width:100%;
  height:clamp(200px,34vh,320px);
}
.hero-text{
  max-width:960px;margin:0 auto;padding:0 24px;text-align:center;
}
h1{
  margin:0;
  font-size:clamp(29px,4.4vw,46px);
  font-weight:200;line-height:1.15;letter-spacing:-.02em;
}
.benefit{
  margin:20px auto 0;max-width:560px;
  font-size:clamp(15px,1.7vw,19px);font-weight:300;line-height:1.6;
}
.audience{
  margin:16px 0 0;
  font-size:13px;font-weight:300;color:var(--muted);letter-spacing:.2px;
}

/* ---------- botões ----------
   A profundidade vem do movimento, não de sombra pesada: o botão sobe ao
   passar o mouse e afunda ao clicar. O brilho interno no topo e a borda
   escura embaixo dão a espessura. */
.btn{
  display:inline-block;position:relative;
  font-size:14px;font-weight:400;letter-spacing:.2px;
  padding:13px 28px;border-radius:980px;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),
             box-shadow .22s cubic-bezier(.2,.7,.3,1);
}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.btn-dark{
  background:var(--ink);color:#fff;margin-top:28px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1.5px 0 rgba(0,0,0,.35),
    0 2px 4px rgba(17,17,20,.18),
    0 8px 20px rgba(17,17,20,.16);
}
.btn-dark:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1.5px 0 rgba(0,0,0,.35),
    0 4px 8px rgba(17,17,20,.20),
    0 16px 32px rgba(17,17,20,.22);
}
.btn-dark:active{
  transform:translateY(0);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.45),
    0 1px 2px rgba(17,17,20,.20);
}

.btn-light{
  background:var(--dark-ink);color:var(--dark);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1.5px 0 rgba(10,10,11,.20),
    0 2px 6px rgba(0,0,0,.55),
    0 10px 26px rgba(0,0,0,.5);
}
.btn-light:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1.5px 0 rgba(10,10,11,.20),
    0 5px 12px rgba(0,0,0,.6),
    0 18px 38px rgba(0,0,0,.55);
}
.btn-light:active{
  transform:translateY(0);
  box-shadow:
    inset 0 2px 5px rgba(10,10,11,.30),
    0 1px 3px rgba(0,0,0,.5);
}
.btn-light:focus-visible{outline-color:var(--dark-ink)}

/* ---------- precisão ---------- */
.precisao{background:var(--bg-alt);padding:clamp(64px,9vw,116px) 0}
.precisao h2,.contato h2{
  margin:0;text-align:center;
  font-size:clamp(26px,3.9vw,42px);
  font-weight:200;line-height:1.16;letter-spacing:-.02em;
}
.lead{
  margin:18px auto 0;max-width:600px;text-align:center;
  font-size:clamp(14px,1.5vw,17px);font-weight:300;color:var(--ink-soft);line-height:1.7;
}

.cards{
  display:grid;gap:20px;margin-top:clamp(40px,5vw,64px);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.card{
  background:#fff;border-radius:16px;overflow:hidden;padding-bottom:26px;
}
.card img{aspect-ratio:3/2;object-fit:cover;width:100%}
.card .step{
  display:block;margin:22px 22px 0;
  font-size:12px;font-weight:400;letter-spacing:2px;color:var(--muted);
}
.card h3{
  margin:8px 22px 0;
  font-size:19px;font-weight:400;letter-spacing:-.01em;
}
.card p{
  margin:5px 22px 0;
  font-size:14px;font-weight:300;color:var(--ink-soft);
}

.disclaimer{
  margin:26px 0 0;text-align:center;
  font-size:12px;font-weight:300;color:var(--muted);
}

/* ---------- contato: painel claro sobre fundo branco ---------- */
.contato{background:var(--bg);padding:clamp(56px,8vw,104px) 0}
.painel{
  display:grid;grid-template-columns:1fr minmax(240px,380px);
  align-items:center;gap:clamp(24px,4vw,56px);
  background:linear-gradient(158deg,#ECECEF 0%,#F8F8FA 55%,#F3F3F6 100%);
  border-radius:28px;
  padding:clamp(34px,5vw,66px);
}
.painel-texto h2{text-align:left;margin:0}
.painel-texto p{
  margin:14px 0 0;max-width:340px;
  font-size:clamp(14px,1.5vw,17px);font-weight:300;color:var(--ink-soft);line-height:1.7;
}
.painel-texto .btn{margin-top:28px}
.painel-marca{display:flex;justify-content:center}
#marca{display:block;width:100%;height:clamp(150px,17vw,210px)}

/* ---------- rodapé preto ---------- */
.rodape{background:var(--dark);color:var(--dark-ink);padding:26px 0}
.rodape-linha{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
}
/* O arquivo é preto; no rodapé escuro ele é invertido para branco. */
.wordmark-footer{display:block;height:16px;width:auto;filter:invert(1);flex:none}
.rodape p{margin:0;font-size:12.5px;font-weight:300;line-height:1.7}
.rodape-desc{color:#6E6E73;flex:1 1 auto;min-width:180px}
.rodape-contato{color:#7C7C81;display:flex;gap:16px;flex-wrap:wrap;flex:none}
.rodape-contato a{color:var(--dark-soft);transition:color .2s}
.rodape-contato a:hover{color:var(--dark-ink)}

@media (max-width:820px){
  /* Painel de contato empilha: texto em cima, marca embaixo. */
  .painel{grid-template-columns:1fr;text-align:center}
  .painel-texto h2{text-align:center}
  .painel-texto p{margin-left:auto;margin-right:auto}
  .painel-marca{order:-1}
  #marca{height:clamp(120px,26vw,170px)}
  .rodape-linha{justify-content:center;text-align:center;flex-direction:column;gap:14px}
  .rodape-contato{justify-content:center}
}

@media (max-width:700px){
  /* No celular a quebra manual atrapalha — deixa o texto fluir. */
  h1 br,.precisao h2 br{display:none}
  /* Marca acompanha a largura da tela, senão sobra vão embaixo dela. */
  #scan{height:clamp(150px,42vw,230px)}
}

@media (max-width:600px){
  .nav{padding:15px 20px}
  .wordmark img{height:19px}
  .painel{border-radius:20px}
  .painel-texto .btn{width:100%;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
  .btn-dark:hover,.btn-light:hover{transform:none}
}