*{box-sizing:border-box}
body{margin:0;background:#070707;color:#f5f5f5;font-family:Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}

.hero{
min-height:92vh;
position:relative;
background:url('/imagens/avatar01.jpg') center right/cover no-repeat;
display:flex;
align-items:center
}

.overlay{
position:absolute;
inset:0;
background:linear-gradient(90deg,#050505 0%,rgba(5,5,5,.86) 34%,rgba(5,5,5,.35) 70%,rgba(5,5,5,.1) 100%)
}

.hero-content{
position:relative;
z-index:1;
max-width:720px;
padding:64px
}

.tag{
letter-spacing:8px;
color:#f5b000;
font-weight:700
}

h1{
font-size:112px;
line-height:.88;
margin:18px 0;
letter-spacing:-4px
}

h2{
font-size:22px;
color:#f5b000
}

.hero p{
font-size:22px;
line-height:1.35;
color:#ddd;
max-width:560px
}

.actions{
display:flex;
gap:14px;
flex-wrap:wrap;
margin-top:32px
}

.btn{
border:1px solid #555;
padding:16px 20px;
border-radius:12px;
background:#111
}

.btn.primary{
background:#17883c;
border-color:#17883c
}

.stats{
display:grid;
grid-template-columns:repeat(4,1fr);
border-top:1px solid #333;
border-bottom:1px solid #333
}

.stats div{
padding:30px;
border-right:1px solid #333
}

.stats strong{
font-size:42px;
color:#f5b000;
display:block
}

.grid.two{
display:grid;
grid-template-columns:1fr 1fr
}

.card{
padding:55px;
border-bottom:1px solid #333;
border-right:1px solid #333;
background:#0c0c0c
}

.section{
padding:48px 55px;
border-bottom:1px solid #333
}

.videos{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:18px
}

.video{
position:relative;
border:1px solid #444;
padding:10px;
background:#101010;
border-radius:8px
}

.video img{
width:100%;
height:130px;
object-fit:cover;
border-radius:4px
}

.pieces{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:16px
}

.piece{
border:1px solid #444;
background:#111;
padding:8px;
border-radius:8px;
display:block
}

.piece img{
width:100%;
height:180px;
object-fit:contain;
background:#eee;
border-radius:3px
}

.cta{
display:grid;
grid-template-columns:1fr 1fr 140px;
gap:24px;
align-items:center;
padding:50px 55px;
background:#111
}

.cta img{
width:130px;
background:#fff;
padding:8px;
border-radius:10px
}

@media(max-width:900px){
h1{font-size:70px}
.hero-content{padding:36px}
.stats,.grid.two,.videos,.pieces,.cta{
grid-template-columns:1fr
}
}