.page{
  min-height:100svh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:40px 16px 84px;
  position:relative;
}

.hero{
  width:min(var(--container),100%);
  text-align:center;
  padding:14px 22px 30px;
  background:transparent;
  border-radius:20px;
  box-shadow:none;
  position:relative;
  margin-top:-70px;
}

.hero__banner{
  width:100%;
  border-radius:18px;
  overflow:hidden;
  margin-bottom:10px;
}

.hero__banner img{
  width:100%;
  height:auto;
  max-height:220px;
  object-fit:contain;
  display:block;
}

.hero__title{
  font-size:56px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.7px;
  color:var(--blue);
  margin:6px 0 6px;
  line-height:1.02;
  -webkit-text-stroke:0.65px var(--blue);
  text-shadow:0 0 0 var(--blue),.6px 0 var(--blue),-.6px 0 var(--blue);
}

.hero__sub{
  max-width:680px;
  margin:0 auto 18px;
  padding:0 18px;
  font-size:16px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.85px;
  color:var(--blue);
  opacity:.92;
  line-height:1.35;
}

@media (max-width:768px){
  .hero{margin-top:-40px;}
  .hero__banner img{max-height:160px;}
}

@media (max-width:560px){
  .page{padding:26px 14px 84px;}
  .hero{padding:12px 12px 22px;margin-top:-20px;}
  .hero__banner{margin-bottom:8px;}
  .hero__title{font-size:34px;letter-spacing:.5px;-webkit-text-stroke:0.55px var(--blue);}
  .hero__sub{font-size:13px;letter-spacing:.7px;margin-bottom:16px;padding:0 10px;}
}

/* ================================
   DESKTOP ALIGN FIX
   deixa card, wheel e botão iguais
================================ */

@media (min-width:1024px){

  .promoCard,
  .wheelWrap,
  .actions{
    width:100%;
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
  }

  .actions .btn{
    width:100%;
  }

}

/* =========================
   HERO DESKTOP REFINEMENT
========================= */

@media (min-width:1024px){

  .page{
    min-height:100vh;
    display:flex;
    align-items:center;      /* centraliza vertical */
    justify-content:center;
    padding:20px 16px 60px;
  }

  .hero{
    width:100%;
    max-width:680px;         /* diminui largura geral */
    margin:0 auto;
    padding:10px 20px 24px;
  }

  .hero__banner img{
    max-height:234px;        /* banner menor */
  }

  .hero__title{
    font-size:48px;          /* título menor */
  }

  .hero__sub{
    font-size:14px;
    margin-bottom:16px;
  }

}