*{
box-sizing:border-box;
}
body{
margin:0;
background:#050505;
color:white;
font-family:Arial,Helvetica,sans-serif;
overflow-x:hidden;
}
.bg{
position:absolute;
width:600px;
height:600px;
right:5%;
top:80px;
background:#65ff00;
opacity:.15;
filter:blur(180px);
}
header{
height:90px;
padding:0 8%;
display:flex;
justify-content:space-between;
align-items:center;
position:relative;
z-index:2;
}
.logo{
font-size:42px;
font-weight:1000;
letter-spacing:5px;
}
.links a{
color:white;
text-decoration:none;
margin-left:30px;
font-weight:bold;
}
.hero{
min-height:750px;
padding:40px 8%;
display:flex;
align-items:center;
justify-content:space-between;
gap:50px;
}
.content{
max-width:600px;
}
.badge{
display:inline-block;
background:#151515;
border:1px solid #333;
padding:12px 25px;
border-radius:50px;
}
h1{
font-size:82px;
line-height:.95;
margin:25px 0;
font-weight:1000;
}
h1 span{
color:#72ff00;
}
.content p{
font-size:22px;
line-height:1.6;
color:#aaa;
}
.buttons{
margin-top:35px;
}
.buttons a{
padding:16px 35px;
border-radius:40px;
text-decoration:none;
font-weight:900;
display:inline-block;
margin-right:15px;
}
.buy{
background:#72ff00;
color:black;
}
.xbtn{
border:1px solid #555;
color:white;
}
.contract{
margin-top:35px;
background:#111;
border:1px solid #222;
padding:20px;
border-radius:18px;
}
.contract small{
color:#888;
}
.ca-row{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:10px;
font-family:monospace;
}
button{
background:#72ff00;
border:0;
padding:8px 15px;
border-radius:20px;
font-weight:bold;
}
.character{
position:relative;
}
.character img{
width:500px;
position:relative;
z-index:2;
border-radius:30px;
filter:drop-shadow(0 30px 40px black);
}
.circle{
position:absolute;
width:430px;
height:430px;
background:#191919;
border-radius:50%;
top:50px;
left:30px;
}
.story{
display:flex;
justify-content:center;
gap:30px;
padding:40px 8%;
}
.story div{
background:#111;
border:1px solid #222;
padding:35px;
border-radius:25px;
width:260px;
text-align:center;
}
.story p{
color:#888;
}
footer{
padding:40px 8%;
display:flex;
justify-content:space-between;
color:#777;
}
@media(max-width:900px){
.hero{
flex-direction:column;
text-align:center;
}
h1{
font-size:55px;
}
.character img{
width:320px;
}
.story{
flex-direction:column;
align-items:center;
}
}