*{margin:0;padding:0;box-sizing:border-box;font-family:Arial, sans-serif;}
body{background:#7c7b7b;color:#fff;display:flex;flex-direction:column;min-height:100vh;}
header{padding:20px;text-align:center;}
header img{max-width:180px;}

.hero{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:20px;}
.hero h1{font-size:2rem;margin-bottom:20px;}
.hero p{font-size:1.2rem;opacity:0.8;}

.construction{margin-top:40px;height:200px;display:flex;align-items:flex-end;}

.building{position:relative;width:120px;height:200px;}

.floor{
  width:100%;
  height:0;
  background:#ccc;
  margin-bottom:2px;
  animation:build 0.8s forwards;
}

.floor1{animation-delay:0.5s;}
.floor2{animation-delay:1.3s;}
.floor3{animation-delay:2.1s;}
.floor4{animation-delay:2.9s;}

@keyframes build{
  from{height:0;}
  to{height:40px;}
}

/* Guindaste simples */
.crane{
  position:absolute;
  left:-30px;
  top:0;
  width:5px;
  height:0;
  background:#ffcc00;
  animation:craneBuild 1s forwards;
  animation-delay:0.2s;
}

@keyframes craneBuild{
  from{height:0;}
  to{height:150px;}
}

footer{text-align:center;padding:15px;font-size:0.9rem;opacity:0.6;}

@media(min-width:768px){
.hero h1{font-size:3rem;}
.hero p{font-size:1.5rem;}
}