:root{
--black:#111111;
--white:#F5F5F2;
--orange:#D97706;
}

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

body{
font-family:'Sora',sans-serif;
background:url('../bg.png') center center no-repeat;
background-size:cover;
min-height:100vh;
color:var(--white);
}

.overlay{
position:fixed;
inset:0;
background:
linear-gradient(
    rgba(0,0,0,.65),
    rgba(0,0,0,.65)
);
}

.hero{
position:relative;
z-index:2;
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:40px;
}

.logo{
width:140px;
margin-bottom:25px;
}

h1{
font-size:clamp(3rem,8vw,5rem);
letter-spacing:.30em;
font-weight:700;
}

.brew-line{
margin-top:10px;
display:flex;
align-items:center;
gap:15px;
color:var(--white);
letter-spacing:.25em;
}

.brew-line span{
width:50px;
height:2px;
background:var(--orange);
}

h2{
color:var(--orange);
margin-top:40px;
font-size:clamp(1.8rem,4vw,3rem);
}

p{
max-width:700px;
margin-top:25px;
line-height:1.8;
font-size:1.1rem;
}

.notify-btn{
margin-top:40px;
border:none;
padding:18px 45px;
border-radius:999px;
background:var(--orange);
color:white;
cursor:pointer;
font-size:1rem;
font-weight:600;
}

.features{
margin-top:70px;
display:flex;
gap:40px;
flex-wrap:wrap;
justify-content:center;
text-transform:uppercase;
letter-spacing:.15em;
}

.modal{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,.75);
z-index:999;
}

.modal.show{
display:flex;
align-items:center;
justify-content:center;
}

.modal-content{
background:#171717;
padding:40px;
width:min(90%,500px);
border-radius:20px;
}

.modal-content h3{
margin-bottom:15px;
}

.modal-content input{
width:100%;
padding:15px;
margin-top:15px;
border:none;
border-radius:10px;
}

.modal-content button[type=submit]{
width:100%;
margin-top:20px;
padding:15px;
border:none;
background:var(--orange);
color:white;
border-radius:10px;
cursor:pointer;
}

.close-modal{
float:right;
background:none;
border:none;
color:white;
font-size:28px;
cursor:pointer;
}

.modal-content{
    transform:translateY(20px);
    opacity:0;
    transition:.3s ease;
}

.modal.show .modal-content{
    transform:translateY(0);
    opacity:1;
}

#response{
    margin-top:20px;
}

.success{
    color:#4ade80;
    background:rgba(74,222,128,.12);
    border:1px solid rgba(74,222,128,.25);
    padding:12px 15px;
    border-radius:10px;
    text-align:center;
}

.error{
    color:#f87171;
    background:rgba(248,113,113,.12);
    border:1px solid rgba(248,113,113,.25);
    padding:12px 15px;
    border-radius:10px;
    text-align:center;
}

.launching-soon{
    display:inline-block;
    margin-bottom:25px;
    padding:8px 16px;
    border:1px solid rgba(217,119,6,.35);
    border-radius:999px;
    background:rgba(217,119,6,.10);
    color:var(--orange);
    font-size:.85rem;
    font-weight:600;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.hero-secondary{
    max-width:750px;
    margin-top:15px;
    font-size:1rem;
    line-height:1.8;
    color:#d7d7d7;
}