:root{
  --bg: #07070A;
  --card: rgba(255,255,255,0.06);
  --muted: #A3A3B2;
  --border: rgba(255,255,255,0.12);
  --txt: #E6E6F0;
  --sol-1:#00f5a0;
  --sol-2:#00d2ff;
  --sol-3:#7c3aed;
  --sol-4:#ff2ecd;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,0.5);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:24px}
.nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(7,7,10,0.85) 0%, rgba(7,7,10,0.55) 100%);
  border-bottom:1px solid var(--border);
}
.nav .inner{display:flex;align-items:center;gap:18px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:38px;height:38px}
.brand .name{font-weight:800;font-size:22px;letter-spacing:0.5px;background:linear-gradient(90deg,var(--sol-1),var(--sol-2),var(--sol-3),var(--sol-4));-webkit-background-clip:text;background-clip:text;color:transparent}
.menu{display:flex;gap:14px;flex-wrap:wrap}
.menu a{padding:10px 14px;border-radius:12px;border:1px solid transparent}
.menu a:hover{border-color:var(--border);background-color:rgba(255,255,255,0.04)}
.cta{display:flex;gap:12px;align-items:center}
.btn{
  padding:12px 18px;border-radius:14px;border:1px solid var(--border);
  background:var(--card);cursor:pointer;font-weight:600
}
.btn:hover{transform: translateY(-1px);box-shadow: var(--shadow)}
.btn.primary{border:none;background:linear-gradient(90deg,var(--sol-1),var(--sol-2),var(--sol-3),var(--sol-4));color:#0a0b0f}
.hero{position:relative;overflow:hidden}
.hero .container{padding-top:72px;padding-bottom:48px;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.hero h1{font-size: clamp(36px, 4.6vw, 64px);line-height:1.05;margin:0 0 12px;font-weight:900;letter-spacing:0.2px}
.gradient-text{background:linear-gradient(90deg,var(--sol-1),var(--sol-2),var(--sol-3),var(--sol-4));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size: clamp(16px, 2.2vw, 20px);color:var(--muted)}
.hero .art{
  position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--border);
  background: radial-gradient(1200px 600px at 0% 0%, rgba(0,213,255,0.08), transparent),
              radial-gradient(800px 400px at 100% 100%, rgba(255,46,205,0.08), transparent),
              #0b0c11;
  box-shadow: var(--shadow)
}
.hero .art img.bg{position:absolute;inset:-20%;opacity:0.6;filter:saturate(140%) blur(0px)}
.hero .art canvas{position:relative;width:100%;height:420px;display:block}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.badge{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,0.06);border:1px solid var(--border);font-size:12px;color:var(--muted)}
.grid{display:grid;gap:18px}
.grid.features{grid-template-columns:repeat(3,1fr);margin-top:40px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow: var(--shadow);position:relative;overflow:hidden}
.card h3{margin:10px 0 6px}
.card p{color:var(--muted)}
.card .icon{width:48px;height:48px}
.section{padding:60px 0;border-top:1px solid var(--border)}
.section h2{font-size: clamp(28px, 3vw, 40px);margin:0 0 6px}
.section p.lead{color:var(--muted)}
.market-preview .items{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.item{background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:16px;padding:12px;transition:transform 0.15s ease}
.item:hover{transform: translateY(-2px) scale(1.01)}
.item .thumb{aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:linear-gradient(135deg, rgba(0,255,200,0.2),rgba(123,58,237,0.2));display:flex;align-items:center;justify-content:center}
.item .thumb span{font-size:28px;font-weight:800;opacity:0.8}
.item .row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:14px}
.faq{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.faq details{padding:16px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,0.04)}
footer{padding:40px 0;border-top:1px solid var(--border);color:var(--muted)}
.tag{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,0.06)}

.banner{padding:14px;border-radius:16px;border:1px solid var(--border);background:linear-gradient(90deg, rgba(0,245,160,0.06), rgba(0,210,255,0.06), rgba(124,58,237,0.06), rgba(255,46,205,0.06))}

.form{display:grid;gap:14px}
.input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,0.06);color:var(--txt)}
.select{padding:12px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,0.06);color:var(--txt)}

.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0 20px}
.search{flex:1;min-width:200px}
.grid.market{grid-template-columns:repeat(5,1fr)}
.toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:#111;border:1px solid var(--border);padding:12px 16px;border-radius:12px;opacity:0;transition:opacity .2s ease;box-shadow: var(--shadow)}
.toast.show{opacity:1}

.modal{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center;z-index:100}
.modal .panel{background:#0b0c11;border:1px solid var(--border);border-radius:18px;width:min(520px,92vw);padding:20px;box-shadow: var(--shadow)}
.modal.show{display:flex}

@media (max-width: 1024px){
  .hero .container{grid-template-columns:1fr;gap:22px}
  .grid.features{grid-template-columns:1fr 1fr}
  .market-preview .items{grid-template-columns:repeat(2,1fr)}
  .grid.market{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 640px){
  .menu{display:none}
  .grid.features{grid-template-columns:1fr}
  .faq{grid-template-columns:1fr}
  .grid.market{grid-template-columns:repeat(2,1fr)}
}

.x-link{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,0.06);margin-left:8px}
.x-link:hover{transform:translateY(-1px);box-shadow:var(--shadow);}
.x-link svg{width:20px;height:20px;color:#E6E6F0}