*{
box-sizing:border-box;
-webkit-tap-highlight-color:transparent;
}

:root{
--bg:#080b0d;
--gold:#d99b35;
--gold2:#ffd66a;
--text:#f3e6c8;
--muted:#9f9275;
}

html,body{
margin:0;
padding:0;
min-height:100%;

font-family:Georgia,serif;

background:
linear-gradient(
rgba(0,0,0,.55),
rgba(0,0,0,.9)
),
url("/assets/backgrounds/forest.svg")
center/cover fixed;

color:var(--text);
}


body{
padding-bottom:90px;
}


.top{
height:65px;

display:flex;
align-items:center;
justify-content:space-between;

padding:10px 15px;

background:#080909;
border-bottom:1px solid #5a411c;
}


.logo{
display:flex;
align-items:center;
gap:10px;
}


.logo img{
width:45px;
height:45px;
}


.logo b{
display:block;
color:var(--gold2);
letter-spacing:2px;
}


.logo small{
font-size:10px;
color:#aaa;
}


.round{

width:38px;
height:38px;

border-radius:50%;

background:#111;

border:1px solid var(--gold);

color:var(--gold2);

}



.page{
display:none;
}


.page.active{
display:block;
}



.hero{

text-align:center;

padding:35px 15px;

}


.hero h1{

font-size:38px;

color:var(--gold2);

text-shadow:0 5px 15px #000;

}



h2{

color:var(--gold2);

padding:0 15px;

}



.card{

margin:15px;

padding:20px;

background:
linear-gradient(
145deg,
#191919,
#0b0b0b
);


border:1px solid #5a411c;

border-radius:15px;


box-shadow:
0 10px 30px #000;

}



.card img{

display:block;

width:70px;
height:70px;

margin:auto;

}



.card h3{

text-align:center;

font-size:25px;

color:#ffe5a0;

}



.card p{

text-align:center;

color:var(--muted);

}



.price{

text-align:center;

font-size:30px;

font-weight:bold;

}



.buy-button{

width:100%;

padding:14px;

margin-top:15px;

border:0;

border-radius:10px;

background:
linear-gradient(
90deg,
#b97818,
#ffd66a
);

font-weight:bold;

}



.bottom{

position:fixed;

bottom:0;

left:0;

right:0;


height:75px;


display:flex;


background:#090909;

border-top:1px solid #5a411c;

}



.bottom button{

flex:1;

background:none;

border:0;

color:#c9b98b;

font-size:14px;

}