*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:Inter,sans-serif;

background:#111;

color:#eee;

line-height:1.8;

}

p{
    margin-bottom:15px;
}

.hero{
    max-width: 850px;
    margin: 0 auto;
    padding: 0 30px;

position:relative;

max-height:800px;

overflow:hidden;

}

.hero img{

width:100%;

display:block;

}

.overlay{

position:absolute;

left:10%;

bottom:8%;

background:rgba(0,0,0,.55);

padding:40px;

max-width:500px;

backdrop-filter:blur(8px);

}

h1{

font-size:4rem;

margin-bottom:10px;

}

.tagline{

font-size:1.3rem;

color:#ddd;

}

.coming{

margin-top:25px;

display:inline-block;

padding:10px 22px;

background:#d87d1d;

font-weight:600;

letter-spacing:1px;

text-transform:uppercase;

}

section{

max-width:850px;

margin:auto;

padding:80px 30px;

}

h2{

font-size:2rem;

margin-bottom:25px;

color:white;

}

.signup{

background:#1b1b1b;

text-align:center;

}

form{

margin-top:35px;

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

}

input{

padding:15px;

width:320px;

font-size:1rem;

border:none;

border-radius:4px;

}

button{

padding:15px 35px;

border:none;

background:#d87d1d;

color:white;

font-size:1rem;

cursor:pointer;

transition:.25s;

}

button:hover{

background:#f09b3d;

}

.links{

display:flex;

gap:40px;

}

.links a{

color:#d87d1d;

text-decoration:none;

font-size:1.1rem;

}

footer{

padding:60px;

text-align:center;

color:#888;

}

@media(max-width:700px){

.overlay{

left:5%;
right:5%;
bottom:5%;
padding:25px;

}

h1{

font-size:2.5rem;

}

}