/* =========================================================
   MELBET AR — page-home.css (hero + homepage blocks)
   design: melbet777.com.br
   ========================================================= */

.hero{position:relative;background:var(--grad-hero);overflow:hidden;padding:var(--space-7) 0}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-5);align-items:center}
.hero h1{color:#fff;font-size:var(--text-4xl);margin:0 0 1.1rem}
.hero h1 .gradient-text{display:block}
.hero .lead{font-size:var(--text-lg);color:var(--color-text-muted);max-width:560px;margin-bottom:1.4rem}
.hero-actions{display:flex;gap:1.25rem;flex-wrap:wrap;margin-bottom:1.6rem}
.hero-stats{display:flex;gap:2.4rem;flex-wrap:wrap}
.hero-stats .stat strong{display:block;font-family:var(--font-heading);font-size:1.7rem;color:#fff}
.hero-stats .stat span{font-size:var(--text-xs);color:var(--color-text-faint);letter-spacing:.04em}

.hero-visual{position:relative;display:flex;align-items:center;justify-content:center}
.hero-device-img{max-width:560px;width:100%;height:auto;border-radius:20px;border:1px solid var(--color-border-strong);box-shadow:var(--shadow)}
.floating-badge{position:absolute;background:var(--color-surface-3);border:1px solid var(--color-border-strong);border-radius:16px;padding:.7rem 1rem;font-family:var(--font-heading);font-weight:600;font-size:.9rem;box-shadow:var(--shadow);display:flex;align-items:center;gap:.5rem}
.fb-1{top:6%;right:2%}
.fb-2{bottom:8%;left:0}

.sec-head{max-width:760px;margin-bottom:var(--space-5)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head p{color:var(--color-text-faint)}

.media-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}
.media-chip{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.8rem;text-align:center;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.media-chip:hover{transform:translateY(-4px);border-color:var(--color-border-strong);box-shadow:var(--shadow)}
.media-chip .chip-img{display:block;width:100%;height:auto;border-radius:16px;margin-bottom:1.2rem;border:1px solid var(--color-border);box-shadow:var(--shadow-sm)}
.media-chip h4{font-size:var(--text-base);margin-bottom:.2rem}
.media-chip p{color:var(--color-text-faint);font-size:var(--text-xs);margin:0}

.feature-banner{margin-top:var(--space-4)}
.feature-banner img{width:100%;height:auto;border-radius:var(--radius-lg);border:1px solid var(--color-border);box-shadow:var(--shadow)}

.pay-info{
  background:linear-gradient(180deg,var(--color-surface) 0%,var(--color-surface-2) 100%);
  border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);
  padding:var(--space-4);box-shadow:var(--shadow-sm);
}
.pay-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.pay-info-item{
  background:rgba(255,255,255,.03);border:1px solid var(--color-border);
  border-radius:var(--radius);padding:1rem 1.1rem;
}
.pay-info-item p{margin:0;color:var(--color-text-faint);font-size:var(--text-sm)}
@media (max-width:640px){.pay-info-grid{grid-template-columns:1fr}}

@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{order:-1;margin-bottom:1rem}
  .hero h1{font-size:var(--text-3xl)}
}
@media (max-width:640px){
  .media-strip{grid-template-columns:1fr}
  .hero .hero-actions .btn{width:100%;justify-content:center}
  .hero-stats{gap:1.4rem 2rem}
  .hero h1{font-size:1.75rem}
}