@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;700;900&display=swap');
*{box-sizing:border-box}
body{
margin:0;background:#050505;color:#f4f4f4;font-family:Inter,Arial;
overflow-x:hidden
}
.noise{position:fixed;inset:0;opacity:.05;pointer-events:none;background-image:url("assets/paidape.png");background-size:cover}
header{
position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;
padding:28px 6%;border-bottom:1px solid #222;background:#080808cc
}
.brand{font-weight:900;font-size:28px}.brand span{color:#888}
nav a,.links a{color:white;text-decoration:none;margin-left:25px;font-weight:700}
.hero{
min-height:90vh;display:grid;grid-template-columns:1fr 1fr;gap:40px;
padding:60px 6%;align-items:center
}
.hero-art img{
width:100%;max-width:620px;border-radius:35px;
box-shadow:0 0 80px #111
}
h1,h2{
font-family:Anton,Impact,sans-serif;letter-spacing:2px
}
h1{font-size:76px;line-height:.95;margin:0 0 25px}
h2{font-size:48px;text-align:center}
p{font-size:20px;line-height:1.7;color:#c8c8c8}
.btn{
display:inline-block;background:#fff;color:#000;padding:18px 35px;
border-radius:40px;font-weight:900;text-decoration:none;margin-top:20px
}
.story,.roadmap,.chart,footer{padding:80px 8%}
.story p{text-align:center;max-width:900px;margin:auto}
.cards{
display:grid;grid-template-columns:repeat(4,1fr);gap:20px
}
.cards div{
background:#111;border:1px solid #292929;padding:28px;border-radius:22px;
min-height:170px
}
.frame{
background:#000;border:1px solid #222;border-radius:25px;overflow:hidden;height:600px
}
iframe{width:100%;height:100%}
footer{text-align:center;background:#080808}
@media(max-width:900px){
.hero{grid-template-columns:1fr}
h1{font-size:50px}
.cards{grid-template-columns:1fr}
nav{display:none}
}