@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');

:root{
 --bg:#050505;
 --card:#0d0d0d;
 --line:#242424;
 --white:#fff;
 --gray:#999;
}
*{box-sizing:border-box}
body{
 margin:0;
 min-height:100vh;
 background:radial-gradient(circle at 50% 0,#222,#050505 45%);
 color:var(--white);
 font-family:Inter,Arial,sans-serif;
 overflow-x:hidden;
}
.noise{
 position:fixed;inset:0;pointer-events:none;opacity:.12;
 background-image:linear-gradient(45deg,#fff1 1px,transparent 1px);
 background-size:30px 30px;
}
header{
 position:relative;z-index:2;
 max-width:1200px;margin:auto;padding:28px 30px;
 display:flex;justify-content:space-between;align-items:center;
}
.logo{font-weight:900;font-size:24px;letter-spacing:2px}
nav{display:flex;gap:12px}
nav a,.button{
 border:1px solid var(--line);padding:12px 18px;border-radius:12px;
 color:white;text-decoration:none;font-weight:700;
 background:#0b0b0b;
}
nav a:hover,.button:hover{border-color:#fff}
main{max-width:1200px;margin:auto;padding:40px 30px}
.hero{
 display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;
 min-height:75vh;
}
.hero-image{
 display:flex;justify-content:center;
}
.hero-image img{
 width:min(520px,90vw);
 filter:drop-shadow(0 30px 50px #000);
}
.tag{color:#777;letter-spacing:4px;font-size:13px}
h1{
 font-size:clamp(60px,9vw,120px);
 line-height:.8;margin:20px 0;
 font-weight:900;
}
h1 span{color:#555}
.text{color:#bbb;max-width:450px;font-size:18px}
.buttons{display:flex;gap:12px;margin:30px 0;flex-wrap:wrap}
.secondary{background:#fff;color:#000}
.ca-box{
 background:var(--card);border:1px solid var(--line);
 border-radius:16px;padding:18px;max-width:500px;
}
.ca-box small{color:#777}
.ca-box div{display:flex;gap:10px;margin-top:10px}
code{overflow:hidden;text-overflow:ellipsis;flex:1}
button{
 background:white;border:0;border-radius:8px;padding:8px 12px;font-weight:700;
}
footer{text-align:center;color:#666;padding:30px}
@media(max-width:800px){
 .hero{grid-template-columns:1fr;text-align:center}
 .text{margin:auto}
 .buttons{justify-content:center}
 header{flex-direction:column;gap:20px}
}


/* LIVE DEX CHART */
.dex-section{
 margin:70px 0 30px;
 scroll-margin-top:24px;
}
.dex-heading{
 display:flex;
 align-items:end;
 justify-content:space-between;
 gap:20px;
 margin-bottom:18px;
}
.dex-heading .tag{margin:0 0 8px}
.dex-heading h2{
 margin:0;
 font-size:clamp(38px,6vw,72px);
 line-height:.9;
 letter-spacing:-3px;
}
.dex-external{
 color:#fff;
 text-decoration:none;
 font-size:13px;
 font-weight:900;
 letter-spacing:1px;
 border-bottom:1px solid #555;
 padding-bottom:4px;
 white-space:nowrap;
}
.dex-external:hover{border-color:#fff}
.dex-frame-wrap{
 position:relative;
 width:100%;
 min-height:650px;
 background:#080808;
 border:1px solid var(--line);
 border-radius:18px;
 overflow:hidden;
 box-shadow:0 28px 80px #0008;
}
#dexFrame{
 display:none;
 width:100%;
 height:650px;
 border:0;
 background:#080808;
}
.dex-frame-wrap.is-live #dexFrame{display:block}
.dex-frame-wrap.is-live .dex-placeholder{display:none}
.dex-placeholder{
 position:absolute;
 inset:0;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 gap:12px;
 text-align:center;
 padding:30px;
 color:#777;
}
.dex-placeholder strong{
 color:#fff;
 font-size:clamp(26px,5vw,52px);
 letter-spacing:-2px;
}
.dex-placeholder span{max-width:560px;line-height:1.6}
.dex-placeholder code{color:#bbb}

@media(max-width:800px){
 .dex-section{margin-top:50px}
 .dex-heading{align-items:flex-start;flex-direction:column}
 .dex-heading h2{letter-spacing:-2px}
 .dex-frame-wrap,#dexFrame{min-height:570px;height:570px}
}