:root{

--primary:#A86534;

--bg:#F8F8F6;

--text:#1B1B1B;

--muted:#7D7D7D;

}



*{

margin:0;
padding:0;
box-sizing:border-box;

}



body{

font-family:Inter,sans-serif;

background:var(--bg);

min-height:100vh;

overflow:hidden;

position:relative;

color:var(--text);

}





/* Grid */

.grid{

position:absolute;

inset:0;


/* background-image:


linear-gradient(

rgba(168,101,52,.04) 1px,

transparent 1px

),

linear-gradient(

90deg,

rgba(168,101,52,.04) 1px,

transparent 1px

); */

background-image:

linear-gradient(
rgba(168,101,52,.12) 1px,
transparent 1px
),

linear-gradient(
90deg,
rgba(168,101,52,.12) 1px,
transparent 1px
);

background-size:50px 50px;

background-size:60px 60px;


opacity:.8;


animation:gridMove 20s linear infinite;


}




@keyframes gridMove{


from{

transform:translateY(0);

}


to{

transform:translateY(60px);

}


}




.container{


min-height:100vh;


display:flex;


align-items:center;


justify-content:center;


padding:30px;


position:relative;


z-index:2;


}





.content{


max-width:900px;


width:100%;


padding:70px;


background:white;


border-radius:30px;


border:1px solid #ececec;



box-shadow:


0 10px 40px rgba(0,0,0,.04),


0 2px 10px rgba(0,0,0,.03);



text-align:center;


animation:fadeUp 1s ease;


}




@keyframes fadeUp{


from{

opacity:0;

transform:translateY(40px);

}


to{

opacity:1;

transform:translateY(0);

}


}





.logo{

display:flex;

justify-content:center;


margin-bottom:20px;

}



.logo img{


width:320px;


max-width:90%;


height:auto;


}




.line{


width:100px;


height:2px;


background:var(--primary);


margin:25px auto;


}





.tag{


font-size:12px;


font-weight:500;


letter-spacing:4px;


text-transform:uppercase;


color:var(--muted);


margin-bottom:30px;


}





h1{


font-size:58px;


font-weight:700;


line-height:1.1;


margin-bottom:25px;


}





.description{


max-width:650px;


margin:auto;


font-size:17px;


line-height:1.9;


color:#666;


margin-bottom:50px;


}





.countdown{


display:grid;


grid-template-columns:repeat(4,1fr);


gap:20px;


margin-bottom:50px;


}





.box{


padding:25px;


background:#FAFAFA;


border:1px solid #EAEAEA;


border-radius:18px;


transition:.3s;


}




.box:hover{


transform:translateY(-3px);


border-color:var(--primary);


}





.box span{


font-size:42px;


font-weight:700;


display:block;


margin-bottom:10px;


color:var(--primary);


}




.box small{


font-size:11px;


text-transform:uppercase;


letter-spacing:2px;


color:#999;


}




.notify{


display:flex;


gap:15px;


justify-content:center;


margin-bottom:40px;


}





.notify input{


width:350px;


padding:18px;


border:1px solid #e5e5e5;


border-radius:12px;


outline:none;


font-size:15px;


background:white;


transition:.3s;


}




.notify input:focus{


border-color:var(--primary);


}




.notify button{


padding:18px 35px;


border:none;


border-radius:12px;


background:var(--primary);


color:white;


cursor:pointer;


font-weight:600;


transition:.3s;


}




.notify button:hover{


background:#91552B;


}





.socials{


display:flex;


justify-content:center;


gap:30px;


}




.socials a{


text-decoration:none;


font-size:14px;


color:#666;


transition:.3s;


}




.socials a:hover{


color:var(--primary);


}





/* Tablet */

@media(max-width:900px){


.content{

padding:50px;

}



h1{

font-size:46px;

}


}




/* Mobile */

@media(max-width:768px){


.countdown{


grid-template-columns:repeat(2,1fr);


}




.notify{


flex-direction:column;


}




.notify input{


width:100%;


}




.socials{


flex-wrap:wrap;


gap:20px;


}


}




@media(max-width:500px){


.content{


padding:35px 20px;


}



.logo img{


width:250px;


}



h1{


font-size:34px;


}



.description{


font-size:15px;


}



.box span{


font-size:30px;


}


}