:root{--bg:#07110f;--card:#101a18;--ink:#f4f7f6;--mute:#9aaba4;--line:rgba(150,190,175,.16);--g:#1fcf9f;--g2:#14956c}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:radial-gradient(900px 420px at 50% -10%,rgba(31,207,159,.16),transparent 55%),var(--bg);color:var(--ink);font:15px/1.5 "Segoe UI",system-ui,sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;padding:14px 22px;background:rgba(7,17,15,.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.logo img{height:28px;width:auto}
.nav{display:flex;gap:6px;align-items:center;flex:1}
.nav a,.chev{color:#d5e4df;font-weight:650;font-size:14px;padding:8px 12px;border-radius:999px;background:transparent;border:0;font-family:inherit;cursor:pointer}
.chev::after{content:"";display:inline-block;width:5px;height:5px;margin-left:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.nav a:hover,.chev:hover,.nav a.on{background:rgba(255,255,255,.06);color:#fff}
.drop{position:relative}
.menu{display:none;position:absolute;top:100%;left:0;min-width:210px;padding:14px 8px 8px;border:0;background:transparent;z-index:30}
.drop:hover .menu,.drop:focus-within .menu,.drop.open .menu{display:grid}
.menu a{display:block;border-radius:10px}
.menu-btn{display:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:transparent;color:#d7e6e1;place-items:center}
.menu-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.tools{margin-left:auto;display:flex;gap:8px;align-items:center}
.icon,.avatar{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:#d7e6e1;background:rgba(255,255,255,.03)}
.icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.avatar{background:#14956c;color:#04241c;font-weight:800;border:0}
.hero-wrap{padding:28px 22px 8px}
.hero{position:relative;overflow:hidden;text-align:center;border:1px solid rgba(31,207,159,.18);border-radius:28px;padding:64px 24px 36px;background:radial-gradient(520px 220px at 50% 0,rgba(31,207,159,.18),transparent 70%),linear-gradient(180deg,#10211c,#0c1715)}
.hero h1{margin:0;font-size:52px;line-height:1.08;letter-spacing:-1.4px}
.hero h1 span{color:var(--g)}
.caret{display:inline-block;width:3px;height:.82em;margin-left:4px;background:var(--g);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero p{max-width:640px;margin:14px auto 0;color:var(--mute)}
.hero-actions{display:flex;justify-content:center;gap:12px;margin-top:22px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 18px;border-radius:999px;background:linear-gradient(180deg,#3ee0b0,#17b889);color:#04241c;font-weight:800}
.btn.ghost{background:transparent;color:#e7f6f1;border:1px solid rgba(255,255,255,.16)}
.btn.light{background:#fff;color:#0d3b2e}
.stats{display:flex;justify-content:center;gap:42px;list-style:none;margin:28px 0 0;padding:0}
.stats strong{display:block;font-size:22px}
.stats span{color:var(--mute);font-size:13px}
.float{position:absolute;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:22px}
.float.btc{left:7%;top:22%;background:radial-gradient(circle at 30% 30%,#ffe08a,#e2a31a);color:#5a3b00}
.float.usdt{right:8%;top:18%;background:radial-gradient(circle at 30% 30%,#b9ffe8,#12b98a);color:#043226}
.float.eth{left:18%;bottom:18%;width:28px;height:28px;background:#16352e;color:#8ee0c8;font-size:12px}
.block{width:min(1120px,calc(100% - 36px));margin:28px auto}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:14px}
.head h2,.center h2,.ready h2,.journey h2{margin:0;font-size:28px}
.head p,.center p{margin:4px 0 0;color:var(--mute)}
.head a{color:var(--g);font-weight:700}
.announce{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;min-width:0}
.block,.announce,.grid,.why-grid,.mkt,.promo{min-width:0}
.promo{position:relative;overflow:hidden;min-height:210px;border-radius:18px;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid var(--line)}
.promo i{position:absolute;right:-28px;top:-30px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.42),transparent 62%)}
.promo b{display:block;font-size:20px;margin-bottom:6px}
.promo span{color:#d5e4df;font-size:14px}
.promo a{align-self:flex-start;margin-top:14px;color:#04241c;background:#fff;border-radius:999px;padding:6px 12px;font-weight:800;font-size:13px}
.promo.a{background:linear-gradient(145deg,#12352c,#0d6b58)}
.promo.b{background:linear-gradient(145deg,#1a2740,#12325a)}
.promo.c{background:linear-gradient(145deg,#3a2414,#8a4b16)}
.ticker{overflow:hidden;margin-top:14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0}
.ticker-track{display:flex;gap:28px;width:max-content;animation:marquee 28s linear infinite}
.ticker span{color:var(--mute);font-size:13px;white-space:nowrap}
.ticker b{color:var(--ink);font-weight:700}
@keyframes marquee{to{transform:translateX(-50%)}}
.tabs{display:flex;gap:8px;margin-bottom:14px}
.tabs button{border:0;background:transparent;color:var(--mute);border-radius:999px;padding:8px 14px;cursor:pointer;font:inherit;font-weight:700}
.tabs button.on{background:rgba(31,207,159,.16);color:var(--g)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.mkt{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px}
.mkt.hide{display:none}
.mkt-top{display:flex;align-items:center;gap:10px}
.mkt-top div{flex:1;min-width:0}
.mkt-top strong,.mkt-top small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkt-top small{color:var(--mute);font-size:12px}
.coin{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;flex:none}
.coin.gold{background:#c99216;color:#3a2800}.coin.orange{background:#e07a1a}.coin.blue{background:#3b82f6}.coin.yellow{background:#e2b423;color:#3a2800}.coin.purple{background:#7c5cff}.coin.green{background:#12b98a}
.mkt em{font-style:normal;font-weight:800;font-size:13px}
.up{color:#3ee0b0}.down{color:#ff8d8a}
.mkt-bot{display:flex;justify-content:space-between;gap:8px;margin-top:14px;color:var(--mute);font-size:13px}
.mkt-bot b{color:var(--ink);font-size:16px}
.why{text-align:center}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px;text-align:left}
.why-grid article{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.why-grid span{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#14352c;color:var(--g);font-size:18px}
.why-grid h3{margin:12px 0 6px;font-size:16px}
.why-grid p{margin:0;color:var(--mute);font-size:13px}
.ready{text-align:center;border-radius:22px;padding:42px 20px;background:radial-gradient(500px 180px at 50% 0,rgba(255,255,255,.16),transparent 60%),linear-gradient(180deg,#12886a,#0c4f3e)}
.ready p{color:#d7f6ec;margin:8px 0 16px}
.journey{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:8px 0 20px}
.journey p{color:var(--mute);max-width:640px}
.foot{background:#08110f;border-top:1px solid var(--line);padding:28px 22px 16px}
.foot-grid{width:min(1120px,100%);margin:0 auto;display:grid;grid-template-columns:1.4fr .8fr .8fr .8fr;gap:18px}
.foot img{height:26px;width:auto;margin-bottom:8px}
.foot p,.foot a,.foot span{display:block;color:var(--mute);font-size:14px;margin:6px 0}
.foot h3{margin:0 0 8px;font-size:14px}
.foot a:hover{color:var(--g)}
.foot-bar{width:min(1120px,100%);margin:18px auto 0;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:8px;color:var(--mute);font-size:12px}
@media(max-width:980px){
  .announce,.why-grid,.grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .hero h1{font-size:40px}
}
@media(max-width:760px){
  .top{flex-wrap:wrap;padding:12px 14px}
  .menu-btn{display:grid}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:4px;padding:10px 12px 14px;background:#0c1715;border-bottom:1px solid var(--line);white-space:normal}
  .nav.open{display:flex}
  .nav a,.chev{text-align:left}
  .drop .menu{position:static;min-width:0;border:0;background:transparent;padding:0 0 0 10px}
  .drop:hover .menu{display:none}
  .drop.open .menu,.drop:focus-within .menu{display:grid}
  .hero-wrap{padding:16px 12px 0}
  .hero{padding:42px 16px 24px}
  .hero h1{font-size:32px}
  .float{display:none}
  .stats{gap:18px}
  .block{width:calc(100% - 24px)}
  .announce,.why-grid,.journey,.foot-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
  .mkt-top{flex-wrap:wrap}
  .mkt-top strong,.mkt-top small{white-space:normal;overflow:visible}
  .mkt em{flex-basis:100%;padding-left:46px}
  .journey{align-items:flex-start}
  .foot-bar{flex-direction:column}
}
@media(max-width:420px){
  .stats{flex-direction:column;gap:10px}
  .hero-actions .btn{width:100%}
}
.page{width:min(1120px,calc(100% - 36px));margin:28px auto 48px}
.page.narrow{width:min(760px,calc(100% - 36px))}
.page h1{margin:0;font-size:32px}
.lead{color:var(--mute);margin:6px 0 18px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:14px}
.page-head .lead{margin-bottom:0}
.stat-pill{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 14px;text-align:center}
.stat-pill strong{display:block;font-size:22px}
.stat-pill span{color:var(--mute);font-size:12px}
.tools-row{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.search{width:min(280px,100%);background:#0c1715;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:10px 14px;font:inherit}
.sheet{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:auto}
table.board{width:100%;border-collapse:collapse;min-width:760px}
table.board th,table.board td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
table.board th{color:var(--mute);font-size:12px;font-weight:700}
table.board td .coin{display:inline-grid;width:28px;height:28px;margin-right:8px;vertical-align:middle;font-size:13px}
.btn.tiny{min-height:32px;padding:0 12px;font-size:13px}
.star{border:0;background:transparent;color:#d7e6e1;font-size:18px;cursor:pointer}
.star.on{color:#e2b423}
.muted{color:var(--mute);font-size:13px}
.empty{margin:0;padding:28px;color:var(--mute);text-align:center}
.article-list{display:grid;gap:12px}
.article-card{display:grid;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.article-card small,.crumbs{color:var(--mute);font-size:13px}
.article-card span{color:#d5e4df}
.crumbs a:hover{color:var(--g)}
.prose{padding:18px}
.prose p{margin:0}
.form{display:grid;gap:12px}
.form label{display:grid;gap:6px;color:var(--mute);font-size:13px}
.form input,.form textarea{width:100%;background:#0c1715;color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font:inherit}
.note{background:rgba(31,207,159,.12);color:#bff6e4;border-radius:12px;padding:10px 12px}
.note.bad{background:rgba(255,109,109,.12);color:#ffc7c5}
.wallet-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wallet{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.bal{font-size:28px;margin:14px 0 6px}
.addr{color:var(--mute);word-break:break-all;font-size:13px}
@media(max-width:760px){
  .page,.page.narrow{width:calc(100% - 24px)}
  .page-head,.wallet-grid{display:grid;grid-template-columns:1fr}
  table.board{min-width:0}
  table.board thead{display:none}
  table.board,.sheet{overflow:visible}
  table.board tr{display:grid;gap:4px;padding:12px 14px;border-bottom:1px solid var(--line)}
  table.board td{display:flex;justify-content:space-between;gap:12px;border:0;padding:3px 0;white-space:normal}
  table.board td::before{content:attr(data-label);color:var(--mute)}
}
