@font-face { font-family: "Unbounded"; font-weight: 800; src: url(/fonts/unbounded-latin-800-normal.woff2) format("woff2"); font-display: swap }
@font-face { font-family: "Unbounded"; font-weight: 600; src: url(/fonts/unbounded-latin-600-normal.woff2) format("woff2"); font-display: swap }
@font-face { font-family: "Space Grotesk"; font-weight: 400; src: url(/fonts/space-grotesk-latin-400-normal.woff2) format("woff2"); font-display: swap }
@font-face { font-family: "Space Grotesk"; font-weight: 600; src: url(/fonts/space-grotesk-latin-600-normal.woff2) format("woff2"); font-display: swap }
:root { --bg: #07090c; --ink: #f2f4f7; --mut: #98a2b3; --line: rgba(255,255,255,.1); --acc: #b6ff3b; --acc2: #ffc93c; --card: rgba(15,18,24,.78);
  --head: "Unbounded", system-ui, sans-serif; --body: "Space Grotesk", system-ui, sans-serif; --mono: ui-monospace, Consolas, monospace }
* { box-sizing: border-box }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--body); -webkit-font-smoothing: antialiased }
a { color: var(--acc) }

.hero { position: relative; min-height: min(92vh, 860px); display: grid; align-items: end; overflow: hidden; isolation: isolate }
.hero-art { position: absolute; inset: 0; z-index: -1 }
.hero-art img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: drift 18s ease-in-out infinite alternate; filter: saturate(1.08) }
@keyframes drift { to { transform: scale(1.12) translate(-1.5%, -1%) } }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,9,12,.15) 0%, rgba(7,9,12,.35) 45%, var(--bg) 96%), radial-gradient(120% 80% at 10% 100%, rgba(7,9,12,.85), transparent 60%) }
.hero-in { width: min(1180px, 100%); margin: 0 auto; padding: 120px 22px 46px }
.kick { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font: 600 12.5px var(--mono); letter-spacing: .06em; text-transform: lowercase; color: var(--acc);
  background: rgba(0,0,0,.45); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; backdrop-filter: blur(6px) }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 12px var(--acc); animation: blink 1.4s infinite } @keyframes blink { 50% { opacity: .3 } }
h1 { font: 800 clamp(42px, 8.4vw, 116px)/.95 var(--head); letter-spacing: -.035em; margin: 0; max-width: 13ch; text-shadow: 0 10px 40px rgba(0,0,0,.5) }
.tk { font: 600 clamp(18px, 2.4vw, 28px) var(--head); color: var(--acc); margin: 10px 0 0 }
.tag { font-size: clamp(17px, 1.9vw, 21px); max-width: 52ch; color: #dfe4ea; margin: 14px 0 22px }
.ca { display: inline-flex; gap: 10px; align-items: center; max-width: 100%; font: 13px var(--mono); background: rgba(0,0,0,.55); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; cursor: pointer; backdrop-filter: blur(6px) }
.ca b { color: var(--mut); font-weight: 400 } .ca span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.buy, .row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px }
.btn { display: inline-flex; align-items: center; gap: 8px; font: 600 13px var(--head); text-transform: uppercase; letter-spacing: .03em; color: #07090c; background: var(--acc); border: 0; border-radius: 999px; padding: 13px 20px; cursor: pointer; text-decoration: none }
.btn:hover { box-shadow: 0 0 0 5px color-mix(in srgb, var(--acc) 25%, transparent) } .btn.ghost { background: rgba(0,0,0,.4); color: var(--ink); border: 1px solid var(--line) } .btn.alt { background: var(--acc2) }
.stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px }
.stat { background: rgba(0,0,0,.5); border: 1px solid var(--line); border-radius: 14px; padding: 9px 14px; backdrop-filter: blur(6px) } .stat b { display: block; font: 800 20px var(--head) } .stat small { color: var(--mut); font: 11px var(--mono) }
.stat .up { color: var(--acc) } .stat .dn { color: #ff6b6b }

main { width: min(1180px, 100%); margin: 0 auto; padding: 8px 22px 40px; display: grid; gap: 18px }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 20px 22px; box-shadow: 0 30px 60px rgba(0,0,0,.35) }
.card header { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; margin-bottom: 10px }
.k { margin: 0; font: 600 12px var(--mono); color: var(--acc); text-transform: lowercase; letter-spacing: .05em }
h2 { font: 800 clamp(24px, 3.4vw, 38px) var(--head); margin: 4px 0 0; letter-spacing: -.02em } .mut { color: var(--mut); font-size: 13px; margin: 0 }
.board { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; counter-reset: r }
.board li.r { display: grid; grid-template-columns: 40px 44px minmax(0, 1fr) 110px 90px; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.02) }
.board li.r .n { font: 800 18px var(--head); color: var(--mut); text-align: center }
.board li.r img, .board li.r .ph { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; background: #151a22 }
.board li.r b { font: 600 15px var(--head); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .board li.r small { color: var(--mut); font: 11.5px var(--mono) }
.board li.r .mc { font: 600 15px var(--mono); text-align: right } .board li.r .ch { font: 12.5px var(--mono); text-align: right }
.board li.r.me { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 10%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc) 40%, transparent) inset }
.board li.r.me .n { color: var(--acc) } .board li.r.top .n { color: var(--acc2) }
.board li.gap { text-align: center; color: var(--acc); font: 600 13px var(--mono); padding: 6px }
.lore ul { margin: 8px 0 4px; padding-left: 20px; font-size: 17px } .lore li { margin: 6px 0 }
footer { width: min(1180px, 100%); margin: 0 auto; padding: 0 22px 40px; color: var(--mut); font-size: 12px }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(90px); background: #12161d; border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; transition: transform .25s; z-index: 9 } .toast.on { transform: translateX(-50%) translateY(0) }
@media (max-width: 640px) {
  .hero-in { padding: 90px 18px 30px } .board li.r { grid-template-columns: 30px 38px minmax(0, 1fr) 84px; gap: 9px } .board li.r .ch { display: none } .board li.r img, .board li.r .ph { width: 38px; height: 38px }
}