/* ---------- RESET ---------- */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Manrope',sans-serif;

    background:
    radial-gradient(circle at center,
    #162317 0%,
    #111A11 55%,
    #0C120C 100%);

    color:#F8F5EC;

    min-height:100vh;

    overflow-x:hidden;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    padding-top:45px;

}


/* ---------- GLOW ---------- */

.background-glow{

    position:fixed;

    width:700px;

    height:700px;

    background:radial-gradient(circle,
    rgba(255,255,255,.10),
    transparent 70%);

    left:50%;

    top:130px;

    transform:translateX(-50%);

    filter: drop-shadow(0 0 20px rgba(179, 193, 109, 0.08));

    animation:breathe 7s ease-in-out infinite;

    z-index:0;

}

@keyframes breathe{

0%{opacity:.35;}

50%{opacity:.65;}

100%{opacity:.35;}

}


/* ---------- MAIN ---------- */

.container{

    width:90%;

    max-width:760px;

    margin:auto;

    text-align:center;

    position:relative;

    z-index:2;

    padding-bottom:40px;

    animation:fadePage .7s ease;

}


/* ---------- LOGO ---------- */

.logo{

    width:355px;

    margin-bottom:0px;

}


/* ---------- BADGE ---------- */

.badge{

    display:inline-block;

    padding:9px 18px;

    border:1px solid rgba(255,255,255,.18);

    border-radius:999px;

    color:#d9d4cb;

    font-size:.9rem;

    letter-spacing:.08em;

    margin-top:20px;
    margin-bottom:20px;

    background:rgba(255,255,255,.04);

}

.launch-title{

font-size: .9rem;

letter-spacing:.12em;

color:#7C9854;

font-weight:700;

text-transform:uppercase;

text-align:center;

margin-bottom:16px;

width:100%;

}

/* ---------- HEADING ---------- */

h1{

    font-size:3.3rem;

    line-height:1.08;

    font-weight:700;

    margin-bottom:20px;

    letter-spacing:-1px;

}


/* ---------- PARAGRAPHS ---------- */

.description{

    max-width:560px;

    margin:auto;

    font-size:1.15rem;

    line-height:1.85;


}

.description2{

margin-top:12px;

margin-bottom:40px;

font-size:.95rem;

color:rgba(248,245,236,.70);

}


/* ---------- FORM ---------- */

#email-form{

display:flex;

flex-direction:column;

align-items:center;

gap:18px;

margin-top:18px;

}


/* INPUT */

input{

    width:540px;

    max-width:95%;

    padding:20px 28px;

    border-radius:18px;

    border:none;

    outline:none;

    font-size:1rem;

    background:#F8F5EC;

    color:#274b3f;

}


/* BUTTON */

button{

width:260px;

height:56px;

background:#6D8441;

color:white;

font-size:1rem;

font-weight:700;

border-radius:18px;

transition:.25s;

cursor:pointer;

transform:translateY(-2px);

}

button:hover{

background:#79924C;

transform:translateY(-2px);

box-shadow:0 12px 30px rgba(0,0,0,.35);

}

button:active{

    transform:scale(.98);

}


/* ---------- PRIVACY ---------- */

.privacy{

    margin-top:22px;

    font-size:.9rem;

    color:#cfc8bf;

}


/* ---------- FOOTER ---------- */

footer{

    text-align:center;

    padding:35px 20px 25px;

    color:#bdb5aa;

    font-size:.88rem;

    border-top:1px solid rgba(255,255,255,.08);

    padding-top:28px;

}


/* ---------- MOBILE ---------- */

@media(max-width:768px){

.logo{

width:240px;

margin-bottom:45px;

filter:drop-shadow(0 0 18px rgba(170,185,90,.08));
}

h1{

font-size:2.2rem;

}

.description{

font-size:1rem;

line-height:1.7;

}

#email-form{

flex-direction:column;

align-items:center;

margin-top:20px;

}

button{

width:100%;

max-width:360px;

}

input{

width:100%;

max-width:360px;

box-shadow:0 8px 24px rgba(0,0,0,.18);

}

.background-glow{

width:420px;

height:420px;

}

}
/* ---------- SUCCESS ---------- */

.success{

    padding:25px;
    
    animation:fadeIn .6s ease;
    
    }
    
    .tick{
    
    width:70px;
    
    height:70px;
    
    margin:auto;
    
    border-radius:50%;
    
    background:#F8F5EC;
    
    color:#274b3f;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    font-size:2rem;
    
    font-weight:800;
    
    margin-bottom:22px;
    
    }
    
    .success h3{
    
    font-size:2rem;
    
    margin-bottom:12px;
    
    }
    
    .success p{
    
    color:#d8d2c9;
    
    line-height:1.7;
    
    }
    
    @keyframes fadeIn{
    
    from{
    
    opacity:0;
    
    transform:translateY(15px);
    
    }
    
    to{
    
    opacity:1;
    
    transform:translateY(0);
    
    }
    
    }

    input::placeholder{

    color:#9E9E9E;

    font-weight:500;

}

input:focus{

outline:none;

box-shadow:

0 0 0 3px rgba(124,152,84,.25),

0 10px 30px rgba(0,0,0,.18);

}

.footer-icon{

    color:#7C9854;

    margin-right:0px;

}
@keyframes fadePage{

from{

opacity:0;

transform:translateY(12px);

}

to{

opacity:1;

transform:translateY(0);

}

}