*{
box-sizing:border-box;
}

html,body{
margin:0;
height:100%;
font-family:Arial,Helvetica,sans-serif;
overflow:hidden;
}

body{
background:
linear-gradient(rgba(0,5,20,.15),rgba(0,5,20,.15)),
url('../assets/background_reference.png')
center/cover no-repeat;
color:white;
}

.hero{
height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
gap:28px;
padding:40px;
}

.logo{
width:clamp(190px,22vw,310px);
}

h1{
font-size:clamp(24px,2.4vw,38px);
margin:0;
}

p{
font-size:clamp(15px,1.3vw,19px);
line-height:1.6;
color:#dbeafe;
margin:0;
}

.status{
font-size:16px;
letter-spacing:12px;
color:#1684ff;
}

.mail{
background:none;
border:none;
font-size:34px;
color:white;
cursor:pointer;
filter:drop-shadow(0 0 12px #1684ff);
}


#modal{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,.75);
place-items:center;
}


form{
background:#06142d;
padding:30px;
border-radius:20px;
width:360px;
display:flex;
flex-direction:column;
gap:12px;
}


input,textarea{
padding:12px;
background:#0f172a;
border:1px solid #2563eb;
color:white;
border-radius:8px;
}


textarea{
height:100px;
}


form button{
padding:12px;
background:#2563eb;
border:none;
color:white;
border-radius:20px;
}


span{
cursor:pointer;
color:#60a5fa;
}