*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: "Poppins", sans-serif;
}

body{
background: linear-gradient(-45deg, #fffff8, #e6f7f5, #d4f0ec, #f0edce, #b0e2da);
    background-size: 400% 400%;
    animation: gradientShift 8s ease infinite;
height:100vh;
overflow:hidden;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.landing{
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
position:relative;
}

/* Logo */

.logo{
position:absolute;
top:30px;
left:40px;
display:flex;
align-items:center;
gap:8px;
font-weight:600;
font-size:18px;
}

.logo img{
    width: 113px;
    height: 24px;
}

.logo-dot{
width:14px;
height:14px;
border-radius:50%;
border:3px solid #03C4A1;
}

.logo-text{
letter-spacing:1px;
}

.accent{
color:#03C4A1;
}

/* Center content */

.hero{
text-align:center;
}

.hero h1{
font-size:32px;
font-weight:700;
margin-bottom:10px;
}

.hero p{
font-size:13px;
color:#555;
opacity:0;
transition:opacity .6s ease;
}

.hero p.show{
opacity:1;
}

.hidden{
opacity:0;
}

/* Bottom Panel */

.auth-panel{

position:absolute;
bottom:-300px;
width:100%;
max-width:600px;
height: 244px;
background:linear-gradient(
180deg,
#1A1A1A,
#1A1A1A
);

padding:40px;
border-top-left-radius:50px;
border-top-right-radius:50px;

display:flex;
flex-direction:column;
gap:20px;

align-items:center;

animation:slideUp 1.2s ease forwards;

}

@keyframes slideUp{

0%{
bottom:-350px;
}

100%{
bottom:0;
}

}

/* Google Button */

.google-btn{

width:100%;
height: 42px;
background:#eaeaea;
border:none;
padding:10px;

border-radius:40px;

font-size:16px;

display:flex;
align-items:center;
justify-content:center;
gap:6px;

cursor:pointer;
font-weight: 600;

}

.google-icon{

font-weight:700;
color:#03C4A1;
font-size: 25px;
}

.google-icon img{
    width: 27px;
    height: 27px;
}

/* Login + Signup */

.auth-actions{

display:flex;
gap:20px;
width:100%;
height: 48px;

}

.login-btn{

flex:1;

padding:10px;

border-radius:30px;

background:transparent;

border:2px solid #03C4A1;

color:#03C4A1;

font-size:15px;

cursor:pointer;
height: 48px;
font-weight: bold;

}

.signup-btn{

flex:1;

padding:10px;

border-radius:30px;

background:#03C4A1;

border:none;

color:white;

font-size:15px;

cursor:pointer;
height: 48px;
font-weight: bold;
}

button{
transition:all .25s ease;
}

button:hover{
transform:scale(1.05);
}