*{box-sizing:border-box}
body{
 margin:0;
 min-height:100vh;
 background:#050505;
 color:#fff;
 font-family:Arial,Helvetica,sans-serif;
 overflow-x:hidden;
}
.bg{
 position:fixed;
 inset:0;
 background:url("images/background.svg") center/cover no-repeat;
 z-index:-1;
}
.container{
 min-height:100vh;
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 text-align:center;
 padding:40px 20px;
 animation:show 1.2s ease;
}
.logo{
 width:min(650px,90vw);
 filter:drop-shadow(0 20px 35px #000);
 margin-bottom:25px;
}
.hero{
 max-width:800px;
 background:rgba(0,0,0,.55);
 border:1px solid rgba(255,0,0,.25);
 border-radius:24px;
 padding:35px;
 backdrop-filter:blur(8px);
}
h1{
 font-size:clamp(32px,5vw,58px);
 margin:0 0 20px;
 color:#fff;
 text-transform:uppercase;
}
p{
 font-size:20px;
 line-height:1.6;
 color:#ddd;
}
.small{color:#e00000;font-weight:bold}
.progress{
 height:8px;
 background:#222;
 border-radius:10px;
 overflow:hidden;
 margin:30px 0;
}
.bar{
 width:70%;
 height:100%;
 background:linear-gradient(90deg,#900,#f00);
 animation:load 3s infinite alternate;
}
.button{
 display:inline-block;
 padding:15px 35px;
 border-radius:40px;
 background:#d00000;
 color:white;
 text-decoration:none;
 font-weight:bold;
 transition:.3s;
}
.button:hover{background:#ff0000;transform:scale(1.05)}
.contact{
 margin-top:25px;
 padding:25px;
 max-width:600px;
}
.contact h2{color:#e00000}
footer{margin-top:20px;color:#777}
@keyframes load{from{width:35%}to{width:85%}}
@keyframes show{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@media(max-width:600px){
 .hero{padding:25px}
 p{font-size:16px}
}