/* ===========================================================
   PROVA — bento de dados
   "Sites ainda valem o investimento", em números.
   Cada célula: número gigante (Archivo) + explicação + fonte.
   O número É o elemento visual — mesmo espírito do título da Hero.
   =========================================================== */
.proof{
  position:relative;
  background:var(--bg);
  padding:120px 20px 140px;
}

.proof__inner{
  max-width:1240px;
  margin-inline:auto;
}

.proof__head{
  margin-bottom:clamp(40px,6vh,64px);
  max-width:760px;   /* px, não ch: ch mediria na fonte pequena e estrangulava o título */
}

.proof__lead{
  margin-top:20px;
  font-size:clamp(15px,1.4vw,18px);
  font-weight:300;
  letter-spacing:-0.02em;
  line-height:1.5;
  color:var(--cream-50);
  max-width:52ch;
}

.proof__eyebrow{
  display:block;
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--red-edge);
  margin-bottom:16px;
}

.proof__title{
  font-size:clamp(32px,5vw,56px);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.02;
  color:var(--cream);
}

/* ---------- bento ---------- */
.proof__grid{
  display:grid;
  grid-template-columns:1fr;   /* mobile: pilha */
  gap:clamp(12px,1.4vw,18px);
}

/* ---------- célula ---------- */
.proof__card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:clamp(20px,4vw,40px);
  min-height:180px;
  padding:clamp(22px,2.6vw,32px);
  border-radius:16px;
  background:linear-gradient(155deg, var(--surface-1), var(--black-deep));
  border:1px solid var(--cream-10);
}

.proof__num{
  font-size:clamp(44px,5.4vw,80px);
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:.9;
  color:var(--cream);
}

.proof__card--feat .proof__num{font-size:clamp(60px,8.5vw,132px);}

.proof__foot{display:flex;flex-direction:column;gap:12px;}

.proof__label{
  font-size:clamp(14px,1.15vw,16px);
  font-weight:400;
  letter-spacing:-0.02em;
  line-height:1.4;
  color:var(--cream-50);
  max-width:34ch;
}

.proof__source{
  font-size:11px;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--red-edge);
}

/* moldura metálica prateada só na célula-destaque, pra dar hierarquia */
.proof__card--feat::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:var(--silver-metal);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:.3;
  pointer-events:none;
}

/* -----------------------------------------------------------
   BENTO — desktop
   feat ocupa 2×2; s2 é uma coluna alta; s1/s3/s4 preenchem o resto.
   ----------------------------------------------------------- */
@media (min-width:768px){
  .proof{padding:160px 5vw 180px;}

  .proof__grid{
    /* Eram cinco números, viraram três em 2026-07-30. Os dois que saíram
       falavam de COMO fazer um site, não de por que ele importa, então
       enfraqueciam o argumento da dobra. Grade refeita pra três. */
    /* Uma linha só. Com dois cards empilhados na direita, o card grande
       ficava com 512px de altura e um buraco no meio, porque o número mora
       em cima e a legenda no rodapé. Lado a lado os três fecham na mesma
       altura e o destaque vem da largura, não do vazio. */
    grid-template-columns:1.5fr 1fr 1fr;
    grid-auto-rows:minmax(280px,auto);
    grid-template-areas:"feat s1 s2";
  }

  .proof__card--feat{grid-area:feat;}
  .proof__card--s1{grid-area:s1;}
  .proof__card--s2{grid-area:s2;}
}