/* Hood Synapse — landing page
   Terminal-flavoured dark theme: black slate, one yellow accent, IBM Plex Mono. */

:root {
  --bg: #0A0A08;
  --bg-2: #050505;
  --panel: #050505;
  --border: #262620;
  --border-hi: #3A3A2E;
  --yellow: #D8F500;
  --yellow-dim: #A8BF00;
  --text: #EDEDE4;
  --dim: #9C9C90;
  --faint: #62625A;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; background:var(--bg); }
body {
  background: transparent; color: var(--text);
  font-family: var(--mono); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
::selection { background: var(--yellow); color:#0A0A08; }
.wrap { max-width:1180px; margin:0 auto; padding:0 28px; }

/* ---------- header ---------- */
header {
  position:sticky; top:0; z-index:50;
  background: rgba(10,10,8,0.88); backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.hd { display:flex; align-items:center; gap:16px; height:64px; }
.logo { display:flex; align-items:center; gap:11px; font-weight:700; font-size:16px; letter-spacing:-0.02em; }
.logo svg { width:26px; height:26px; display:block; }
.logo b { font-weight:700; }
.logo span { color: var(--faint); font-weight:500; }
nav { display:flex; gap:22px; margin-left:26px; }
nav a { font-size:13px; color:var(--dim); transition:color .15s; }
nav a:hover { color: var(--yellow); }
.hd-right { margin-left:auto; display:flex; align-items:center; gap:14px; }
.live-chip {
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; color:var(--dim);
  border:1px solid var(--border); border-radius:100px; padding:6px 13px;
}
.dot { width:7px; height:7px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 3px rgba(216,245,0,0.16); animation:blip 1.4s steps(1) infinite; }
@keyframes blip { 50% { opacity:.25; } }
.btn {
  font-family:var(--mono); font-size:13px; font-weight:600;
  border:1px solid var(--border-hi); border-radius:7px; padding:9px 16px;
  color:var(--text); background:transparent; cursor:pointer; transition:all .16s;
}
.btn:hover { border-color:var(--yellow); color:var(--yellow); }
.btn-y { background:var(--yellow); color:#0A0A08; border-color:var(--yellow); }
.btn-y:hover { background:#E4FF1F; color:#0A0A08; }

/* ---------- hero: node map ---------- */
.hero { padding:76px 0 70px; border-bottom:1px solid var(--border); position:relative; overflow:hidden; }
.hero::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 0%, rgba(216,245,0,0.09), transparent 60%),
    radial-gradient(ellipse 45% 45% at 50% 100%, rgba(216,245,0,0.04), transparent 65%);
  pointer-events:none;
}
.hero .wrap { position:relative; }
.hero-head { text-align:center; max-width:720px; margin:0 auto; }
h1 { font-size:clamp(34px,5vw,58px); font-weight:700; line-height:1.08; letter-spacing:-0.035em; margin-bottom:18px; }
h1 em { font-style:normal; color:var(--yellow); }
.lead { font-size:15px; color:var(--dim); line-height:1.75; max-width:600px; margin:0 auto 26px; }
.lead b { color:var(--text); font-weight:600; }
.hero-cta { display:flex; justify-content:center; align-items:center; gap:11px; margin-bottom:8px; }
.btn-gh { display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:14px; font-weight:600;
  background:transparent; color:var(--text); border:1px solid var(--border-hi); border-radius:100px;
  padding:12px 22px; transition:all .18s; }
.btn-gh:hover { border-color:var(--yellow); color:var(--yellow); transform:translateY(-1px); }
.btn-gh svg { width:17px; height:17px; fill:currentColor; }
.btn-pill { font-family:var(--mono); font-size:14px; font-weight:700; background:var(--yellow); color:#0A0A08; border:none; border-radius:100px; padding:13px 28px; transition:all .18s; }
.btn-pill:hover { background:#E4FF1F; transform:translateY(-1px); }

/* node map */
.map { position:relative; height:430px; margin-top:34px; }
.map svg.wires { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.map svg.wires path { fill:none; stroke:rgba(216,245,0,0.35); stroke-width:1.5; stroke-dasharray:3 7; animation:dashflow 24s linear infinite; }
@keyframes dashflow { to { stroke-dashoffset:-400; } }
.node {
  position:absolute; display:block; transform:translate(-50%,-50%);
  background:#050505; backdrop-filter:blur(6px);
  border:1px solid var(--border-hi); border-radius:13px;
  padding:16px 22px; text-align:center; min-width:158px;
  transition:border-color .2s;
}
.node:hover { border-color:var(--yellow); transform:translate(-50%,-50%) translateY(-2px); }
.node::after { content:""; position:absolute; top:9px; right:9px; width:5px; height:5px; border-radius:50%; background:var(--yellow); opacity:.7; }
.node .nt { font-size:13.5px; font-weight:700; color:var(--text); }
.node .ns { font-size:10.5px; color:var(--yellow-dim); margin-top:5px; letter-spacing:0.06em; }
.node.core {
  min-width:196px; padding:24px 26px; border-color:var(--border-hi);
  background:#050505;
  box-shadow:0 0 60px rgba(216,245,0,0.10);
}
.node.core svg { width:34px; height:34px; margin:0 auto 11px; display:block; color:var(--yellow); }
.node.core .nt { font-size:14.5px; }
.node.core .ns { color:var(--dim); }
.node.core::after { display:none; }
@media (max-width:600px){
  .map { height:auto; margin-top:26px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .map svg.wires { display:none; }
  .node { position:static; transform:none; width:100%; min-width:0; }
  .node.core { grid-column:1 / -1; }
}

/* ---------- section ---------- */
section { padding:78px 0; border-bottom:1px solid var(--border); }
.sec-num { font-size:12px; color:var(--yellow); letter-spacing:0.16em; margin-bottom:16px; }
h2 { font-size:clamp(24px,3.2vw,34px); font-weight:700; letter-spacing:-0.025em; margin-bottom:14px; }
.sec-desc { font-size:14.5px; color:var(--dim); line-height:1.8; max-width:660px; margin-bottom:38px; }

/* ---------- console strip ---------- */
.console { display:flex; align-items:stretch; border:1px solid var(--border-hi); border-radius:12px; background:var(--panel); overflow:hidden; }
.cs { flex:1; padding:22px 26px; display:flex; flex-direction:column; gap:9px; position:relative; }
.cs + .cs { border-left:1px dashed var(--border); }
.cs .k { font-size:10.5px; letter-spacing:0.15em; color:var(--faint); text-transform:uppercase; }
.cs .v { font-size:27px; font-weight:700; line-height:1.05; letter-spacing:-0.02em; }
.cs .v.y { color:var(--yellow); }
.cs .s { font-size:11px; color:var(--dim); }
.cs:first-child { background:linear-gradient(135deg, rgba(216,245,0,0.07), transparent 60%); }
@media (max-width:600px){ .console { flex-wrap:wrap; } .cs { min-width:50%; border-top:1px dashed var(--border); } }

.feed { margin-top:16px; border:1px solid var(--border); border-radius:11px; background:var(--panel); overflow:hidden; }
.feed-h { display:flex; align-items:center; gap:10px; padding:13px 18px; border-bottom:1px solid var(--border); font-size:12px; letter-spacing:0.1em; color:var(--faint); text-transform:uppercase; }
.feed-h .r { margin-left:auto; text-transform:none; letter-spacing:0; color:var(--dim); }
.frow {
  display:grid; grid-template-columns:150px 90px 1fr 130px; gap:14px; align-items:center;
  padding:11px 18px; border-bottom:1px solid rgba(38,38,32,0.6); font-size:12.5px;
  animation:slide .3s ease;
}
@keyframes slide { from { opacity:0; transform:translateY(-5px); } }
.frow:last-child { border-bottom:none; }
.frow .b { color:var(--yellow); font-weight:600; }
.frow .m { color:var(--dim); }
.frow .h { color:var(--faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.frow .t { color:var(--faint); text-align:right; }

/* ---------- code ---------- */
.code {
  border:1px solid var(--border); border-radius:11px; overflow:hidden; background:var(--bg-2); margin-bottom:16px;
}
.code-h { display:flex; align-items:center; gap:9px; padding:11px 16px; border-bottom:1px solid var(--border); font-size:11.5px; color:var(--faint); }
.code-h .lang { margin-left:auto; color:var(--yellow-dim); }
.code pre { padding:16px; overflow-x:auto; font-size:12.5px; line-height:1.75; }
.code code { color:#D6D6C8; }
.tk-c { color:var(--faint); }
.tk-s { color:var(--yellow); }
.tk-k { color:#9FD4FF; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ---------- spec table ---------- */
.spec { border:1px solid var(--border); border-radius:11px; overflow:hidden; }
.srow { display:grid; grid-template-columns:210px 1fr; gap:18px; padding:15px 20px; border-bottom:1px solid rgba(38,38,32,0.6); font-size:13.5px; }
.srow:last-child { border-bottom:none; }
.srow .sk { color:var(--faint); }
.srow .sv { color:var(--text); word-break:break-all; }
.srow .sv b { color:var(--yellow); font-weight:600; }

/* ---------- yellow band ---------- */
.band { background:var(--yellow); color:#0A0A08; padding:54px 0; border-bottom:1px solid var(--border); }
.band h3 { font-size:clamp(22px,3vw,30px); font-weight:700; letter-spacing:-0.025em; margin-bottom:10px; }
.band p { font-size:14.5px; opacity:.78; max-width:600px; line-height:1.7; }
.band .row { display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.band .btn-b { background:#0A0A08; color:var(--yellow); border:none; margin-left:auto; }
.band .btn-b:hover { background:#1A1A14; color:var(--yellow); }

/* ---------- footer ---------- */
footer { padding:44px 0 54px; }
.fgrid { display:flex; gap:40px; align-items:flex-start; flex-wrap:wrap; }
.fbrand { display:flex; align-items:center; gap:11px; font-weight:700; font-size:15px; }
.fbrand svg { width:22px; height:22px; }
.flinks { margin-left:auto; display:flex; gap:30px; }
.flinks a { font-size:13px; color:var(--dim); }
.flinks a:hover { color:var(--yellow); }
.disc { margin-top:32px; padding-top:22px; border-top:1px solid var(--border); font-size:11.5px; color:var(--faint); line-height:1.9; }

@media (max-width:600px){
  .grid { grid-template-columns:repeat(2,1fr); }
  .two { grid-template-columns:1fr; }
  nav, .live-chip { display:none; }
  .frow { grid-template-columns:110px 70px 1fr; }
  .frow .t { display:none; }
  .srow { grid-template-columns:1fr; gap:4px; }
}

.x-btn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border:1px solid var(--border-hi); border-radius:8px; color:var(--dim); transition:all .16s; }
.x-btn:hover { color:#0A0A08; background:var(--yellow); border-color:var(--yellow); }
.fbot { display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:28px; padding-top:20px; border-top:1px solid var(--border);
  font-size:12.5px; color:var(--faint); }
.fbot .cr b { color:var(--dim); font-weight:600; }
.fbot .x-inline { margin-left:auto; display:inline-flex; align-items:center; gap:8px; color:var(--dim); }
.fbot .x-inline:hover { color:var(--yellow); }
@media (max-width:600px){ .fbot .x-inline { margin-left:0; } }


/* ---------- soft glow field (dedalus-style) ---------- */
.bg-waves { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:#0A0A08; }
.bg-waves .glow {
  position:absolute; inset:-40%;
  background:
    radial-gradient(38% 42% at 26% 36%, rgba(216,245,0,0.55), transparent 62%),
    radial-gradient(30% 38% at 66% 26%, rgba(234,255,51,0.42), transparent 60%),
    radial-gradient(42% 46% at 74% 66%, rgba(168,191,0,0.48), transparent 62%),
    radial-gradient(28% 32% at 40% 80%, rgba(216,245,0,0.38), transparent 60%);
  filter: blur(70px) saturate(1.08);
  animation: glowdrift 28s ease-in-out infinite alternate;
}
@keyframes glowdrift {
  0%   { transform: translate(-3%,-2%) scale(1.05) rotate(0deg); }
  50%  { transform: translate(3%,3%)   scale(1.14) rotate(2deg); }
  100% { transform: translate(-2%,2%)  scale(1.06) rotate(-1deg); }
}
.bg-waves .grain {
  position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(0,0,0,0.6) 0.9px, transparent 1.5px);
  background-size: 5px 5px;
}
.bg-waves::after {
  content:""; position:absolute; inset:0;
  background: radial-gradient(ellipse 82% 62% at 50% 42%, transparent 28%, rgba(10,10,8,0.55) 88%);
}
@media (prefers-reduced-motion: reduce){ .bg-waves .glow { animation:none; } }


/* ---------- live terminal console ---------- */
.term { border:1px solid var(--border-hi); border-radius:12px; overflow:hidden; background:#050505;
  font-size:13px; box-shadow:0 0 50px rgba(216,245,0,0.05); }
.term-bar { display:flex; align-items:center; gap:8px; padding:11px 16px; background:#050505; border-bottom:1px solid var(--border); }
.term-bar .td { width:10px; height:10px; border-radius:50%; background:#2A2A22; }
.term-bar .td:nth-child(1) { animation: scan1 3.6s ease-in-out infinite; }
.term-bar .td:nth-child(2) { animation: scan2 3.6s ease-in-out infinite; }
.term-bar .td:nth-child(3) { animation: scan3 3.6s ease-in-out infinite; }
@keyframes scan1 {
  0%,100% { background:var(--yellow); box-shadow:0 0 9px rgba(216,245,0,0.65); }
  16%,84% { background:#2A2A22; box-shadow:0 0 0 rgba(216,245,0,0); }
}
@keyframes scan2 {
  0%,9% { background:#2A2A22; box-shadow:none; }
  25% { background:var(--yellow); box-shadow:0 0 9px rgba(216,245,0,0.65); }
  41%,59% { background:#2A2A22; box-shadow:none; }
  75% { background:var(--yellow); box-shadow:0 0 9px rgba(216,245,0,0.65); }
  91%,100% { background:#2A2A22; box-shadow:none; }
}
@keyframes scan3 {
  0%,34% { background:#2A2A22; box-shadow:none; }
  50% { background:var(--yellow); box-shadow:0 0 9px rgba(216,245,0,0.65); }
  66%,100% { background:#2A2A22; box-shadow:none; }
}
.term-title { font-size:11.5px; color:var(--faint); margin-left:8px; letter-spacing:0.03em; }
.term-live { margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-size:11px; color:var(--yellow-dim); text-transform:none; }
.term-live::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 3px rgba(216,245,0,0.16); animation:blip 1.4s steps(1) infinite; }
.term-body { padding:18px 20px; line-height:2.0; }
.tl { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tl .pr { color:var(--yellow); margin-right:10px; }
.tl .cmd { color:var(--text); }
.tl .ar { color:var(--faint); margin:0 9px; }
.tl .ov { color:var(--yellow-dim); }
.tl .ov.y { color:var(--yellow); font-weight:600; }
.tl .dim2 { color:var(--faint); margin-left:9px; }
.tl-stream { margin-top:8px; color:var(--text); }
.cur { display:inline-block; width:5px; height:10px; background:var(--yellow); margin-left:3px; vertical-align:-1px; animation:blip 1.1s steps(1) infinite; }
.term-feed { margin-top:10px; border-top:1px dashed var(--border); padding-top:11px; }
.tfl { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--dim); animation:slide .3s ease; padding:1px 0; }
.tfl .ar2 { color:var(--yellow); margin-right:10px; }
.tfl .bk { color:var(--yellow); font-weight:600; }
.tfl .tx { color:var(--dim); }
.tfl .hs { color:var(--faint); }
.tfl .tm { color:var(--faint); }
@media (max-width:600px){ .term-body { font-size:12px; } }


/* ---------- index / history section ---------- */
.idx-head { display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:26px; }
.idx-badge { display:inline-flex; align-items:center; gap:8px; font-size:11.5px; color:var(--dim);
  border:1px solid var(--border-hi); border-radius:100px; padding:6px 13px; margin-left:auto; }
.idx-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
.idx-card { border:1px solid var(--border); border-radius:11px; background:#050505; padding:18px 20px; }
.idx-card .k { font-size:10.5px; letter-spacing:0.13em; color:var(--faint); text-transform:uppercase; }
.idx-card .v { font-size:24px; font-weight:700; margin-top:8px; letter-spacing:-0.02em; }
.idx-card .v.y { color:var(--yellow); }
.idx-card .s { font-size:11px; color:var(--dim); margin-top:5px; }

.chart-box { border:1px solid var(--border); border-radius:12px; background:#050505; overflow:hidden; }
.chart-h { display:flex; align-items:center; gap:10px; padding:13px 18px; border-bottom:1px solid var(--border);
  font-size:11.5px; letter-spacing:0.1em; color:var(--faint); text-transform:uppercase; }
.chart-h .r { margin-left:auto; text-transform:none; letter-spacing:0; color:var(--dim); }
.chart-body { padding:20px 18px 14px; }
.bars { display:flex; align-items:flex-end; gap:5px; height:170px; }
.bar { max-width:56px; }
.bars.few { justify-content:flex-start; }
.bar { flex:1; min-width:6px; background:linear-gradient(180deg, var(--yellow), rgba(216,245,0,0.28));
  border-radius:3px 3px 0 0; position:relative; transition:opacity .15s; min-height:3px; }
.bar:hover { opacity:.75; }
.bar .tip { display:none; position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:#0B0B08; border:1px solid var(--border-hi); border-radius:7px; padding:7px 10px;
  font-size:11px; color:var(--text); white-space:nowrap; z-index:5; }
.bar:hover .tip { display:block; }
.bar .tip b { color:var(--yellow); }
.chart-x { display:flex; justify-content:space-between; margin-top:10px; font-size:10.5px; color:var(--faint); }
.chart-empty { padding:40px 18px; text-align:center; color:var(--faint); font-size:13px; }
@media (max-width:600px){ .idx-grid { grid-template-columns:1fr 1fr; } }

/* ---------- tokens ---------- */
.tok-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.tok-tab { font-family:var(--mono); font-size:12px; color:var(--dim); background:transparent;
  border:1px solid var(--border-hi); border-radius:100px; padding:7px 15px; cursor:pointer; transition:all .15s; }
.tok-tab:hover { color:var(--text); border-color:var(--yellow); }
.tok-tab.on { background:var(--yellow); color:#0A0A08; border-color:var(--yellow); font-weight:700; }
.tok-tab b { font-weight:400; opacity:.65; margin-left:5px; }

.tok-box { border:1px solid var(--border); border-radius:12px; background:#050505; overflow:hidden; }
.tok-head { display:flex; align-items:center; gap:10px; padding:13px 18px; border-bottom:1px solid var(--border);
  font-size:11.5px; letter-spacing:0.1em; color:var(--faint); text-transform:uppercase; }
.tok-head .r { margin-left:auto; text-transform:none; letter-spacing:0; color:var(--dim); }
.tok-row { display:grid; grid-template-columns:24px 24px minmax(0,1fr) 66px 88px 58px 76px 76px 66px 70px; gap:9px; align-items:center;
  padding:12px 18px; border-bottom:1px solid rgba(38,38,32,.55); font-size:13px; animation:slide .3s ease; }
.tok-row:last-child { border-bottom:none; }
.tok-row .n { color:var(--faint); font-size:11.5px; }
.tok-row .sym { color:var(--yellow); font-weight:700; }
.tok-id { display:flex; flex-direction:column; gap:1px; min-width:0; }
.tok-row .nm { color:var(--faint); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tok-row .tx { text-align:right; color:var(--dim); font-size:12.5px; }

/* market columns */
.tok-row .price { text-align:right; color:var(--text); font-size:12.5px; font-variant-numeric:tabular-nums; }
.tok-row .chg { text-align:right; font-size:12.5px; color:var(--faint); font-variant-numeric:tabular-nums; }
.tok-row .chg.up { color:#7FE6A6; }
.tok-row .chg.down { color:#FF8B7A; }
.tok-row .liq { text-align:right; color:var(--dim); font-size:12.5px; font-variant-numeric:tabular-nums; }
.tok-row .vol { text-align:right; color:var(--dim); font-size:12.5px; font-variant-numeric:tabular-nums; }
.tok-row .hold { text-align:right; color:var(--dim); font-size:12.5px; font-variant-numeric:tabular-nums; }
.tok-meta { display:none; }

.tok-cols { display:grid; grid-template-columns:24px 24px minmax(0,1fr) 66px 88px 58px 76px 76px 66px 70px; gap:9px;
  padding:9px 18px; border-bottom:1px solid var(--border); background:rgba(255,255,255,.012);
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.tok-cols .num { text-align:right; }

.tok-foot { margin-top:14px; font-size:11.5px; line-height:1.75; color:var(--faint); max-width:760px; }
.tok-foot b { color:var(--dim); font-weight:600; }
.tok-kind { font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:5px;
  text-align:center; border:1px solid var(--border-hi); color:var(--dim); }
.tok-kind.equity  { color:#7FD1FF; border-color:rgba(127,209,255,.3); background:rgba(127,209,255,.07); }
.tok-kind.fund    { color:#C9A6FF; border-color:rgba(201,166,255,.3); background:rgba(201,166,255,.07); }
.tok-kind.private { color:#FFC27F; border-color:rgba(255,194,127,.3); background:rgba(255,194,127,.07); }
.tok-kind.stable  { color:#7FE6A6; border-color:rgba(127,230,166,.3); background:rgba(127,230,166,.07); }
.tok-kind.meme    { color:var(--yellow-dim); border-color:rgba(168,191,0,.28); background:rgba(168,191,0,.06); }
.tok-kind.infra   { color:#9BB4C4; border-color:rgba(155,180,196,.3); background:rgba(155,180,196,.07); }
.tok-kind.lp      { color:#B9AE96; border-color:rgba(185,174,150,.28); background:rgba(185,174,150,.06); }

.tok-row.unpriced { cursor:help; }
.tok-row.unpriced .price, .tok-row.unpriced .chg,
.tok-row.unpriced .liq, .tok-row.unpriced .vol { color:var(--faint); }
.tok-box.refreshing #tok-list { opacity:.45; transition:opacity .12s; }
.tok-empty { padding:34px 18px; text-align:center; color:var(--faint); font-size:13px; }

/* logo, or a monogram when the chain has no artwork for the token */
.tok-logo { position:relative; display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:7px; overflow:hidden; flex-shrink:0;
  font-size:9px; font-weight:700; letter-spacing:.02em;
  background:#141410; border:1px solid var(--border-hi); color:var(--faint); }
.tok-logo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  background:#141410; opacity:0; transition:opacity .22s ease; }
.tok-logo img.on { opacity:1; }
.tok-logo.equity  { color:#7FD1FF; border-color:rgba(127,209,255,.28); }
.tok-logo.fund    { color:#C9A6FF; border-color:rgba(201,166,255,.28); }
.tok-logo.private { color:#FFC27F; border-color:rgba(255,194,127,.28); }
.tok-logo.stable  { color:#7FE6A6; border-color:rgba(127,230,166,.28); }
.tok-logo.meme    { color:var(--yellow-dim); border-color:rgba(168,191,0,.24); }
.tok-logo.infra   { color:#9BB4C4; border-color:rgba(155,180,196,.26); }
.tok-logo.lp      { color:#B9AE96; border-color:rgba(185,174,150,.24); }
@media (max-width:600px){
  .tok-row { grid-template-columns:24px 84px 1fr 72px; }
  .tok-row .tx { display:none; }
}

/* ═══════════ visual polish ═══════════ */

/* deeper base: subtle grain over the whole page so the black reads as material,
   not as an empty div */
body::after {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(216,245,0,.045) 1px, transparent 0);
  background-size:3px 3px;
  mix-blend-mode:screen;
}
header, section, footer, .band { position:relative; z-index:1; }

/* a new block lands: brief yellow wash, then it settles into the feed */
@keyframes land {
  0%   { background:rgba(216,245,0,.16); border-left-color:var(--yellow); }
  70%  { background:rgba(216,245,0,.04); }
  100% { background:transparent; border-left-color:transparent; }
}
.tfl { border-left:2px solid transparent; padding-left:10px; margin-left:-12px;
       animation:slide .3s ease, land 2s ease-out; }

/* terminal: faint scanlines + a soft inner glow, like a screen rather than a box */
.term { position:relative; }
.term::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2; border-radius:12px;
  background:repeating-linear-gradient(180deg,
    rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
}
.term::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2; border-radius:12px;
  box-shadow:inset 0 0 90px rgba(216,245,0,.05);
}

/* the live number breathes when it changes */
@keyframes tick { 0% { color:#F4FF8A; text-shadow:0 0 14px rgba(216,245,0,.5); } 100% { color:var(--yellow); text-shadow:none; } }
.ticked { animation:tick .7s ease-out; }

/* cards lift a touch and pick up a yellow edge on hover */
.idx-card, .stat, .tok-box, .chart-box, .spec {
  transition:border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.idx-card:hover, .stat:hover {
  border-color:var(--border-hi); transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(216,245,0,.07);
}

/* token rows: a yellow rail slides in on hover */
.tok-row { position:relative; transition:background .18s ease; }
.tok-row::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--yellow); transform:scaleY(0); transform-origin:center;
  transition:transform .2s ease;
}
.tok-row:hover { background:rgba(216,245,0,.028); }
.tok-row:hover::before { transform:scaleY(1); }

/* chart bars grow in on first paint */
@keyframes grow { from { transform:scaleY(0); } to { transform:scaleY(1); } }
.bar { transform-origin:bottom; animation:grow .5s cubic-bezier(.2,.8,.3,1) both; }

/* the live dot gets a slow halo instead of a hard blink */
@keyframes halo {
  0%   { box-shadow:0 0 0 0 rgba(216,245,0,.35); }
  70%  { box-shadow:0 0 0 7px rgba(216,245,0,0); }
  100% { box-shadow:0 0 0 0 rgba(216,245,0,0); }
}
.dot { animation:blip 1.4s steps(1) infinite, halo 2.8s ease-out infinite; }

/* hero headline lit from behind */
.hero-head h1 { text-shadow:0 0 60px rgba(216,245,0,.10); }

@media (prefers-reduced-motion: reduce) {
  .tfl, .bar, .ticked, .dot { animation:none !important; }
}

/* ---------- for agents ---------- */
.agent-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.agent-tools { border:1px solid var(--border); border-radius:12px; background:#050505; overflow:hidden; }
.agent-tools .h { padding:13px 18px; border-bottom:1px solid var(--border); font-size:11.5px;
  letter-spacing:.1em; color:var(--faint); text-transform:uppercase; display:flex; align-items:center; gap:9px; }
.agent-tool { display:grid; grid-template-columns:158px 1fr; gap:14px; padding:12px 18px;
  border-bottom:1px solid rgba(38,38,32,.55); font-size:12.5px; }
.agent-tool:last-child { border-bottom:none; }
.agent-tool .t { color:var(--yellow); }
.agent-tool .d { color:var(--dim); line-height:1.55; }
.agent-ask { border-left:2px solid var(--border-hi); padding:11px 0 11px 16px; margin:0 0 12px; }
.agent-ask q { color:var(--text); font-style:italic; }
.agent-ask q::before, .agent-ask q::after { content:'"'; color:var(--faint); }
@media (max-width:860px){ .agent-grid { grid-template-columns:1fr; } .agent-tool { grid-template-columns:1fr; gap:3px; } }

/* ---------- footer ---------- */
.fcols { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; padding-bottom:34px; }
.fcol { display:flex; flex-direction:column; gap:9px; }
.fcol .fh { font-size:10.5px; letter-spacing:.14em; color:var(--faint); text-transform:uppercase; margin-bottom:4px; }
.fcol a { font-size:13px; color:var(--dim); transition:color .15s; }
.fcol a:hover { color:var(--yellow); }
.fcol-brand .fbrand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:15px; margin-bottom:4px; }
.fcol-brand .fbrand svg { width:22px; height:22px; }
.ftag { font-size:12.5px; color:var(--faint); line-height:1.65; max-width:300px; margin:0 0 6px; }
.fsocial { display:flex; gap:9px; margin-top:4px; }
.fsocial a { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  border:1px solid var(--border-hi); border-radius:8px; color:var(--dim); transition:all .16s; }
.fsocial a:hover { color:#0A0A08; background:var(--yellow); border-color:var(--yellow); }
.fbot { display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding-top:20px; border-top:1px solid var(--border); font-size:12px; color:var(--faint); }
.fbot .cr b { color:var(--dim); font-weight:600; }
.fbot .fnote { margin-left:auto; }
@media (max-width:860px){
  .fcols { grid-template-columns:1fr 1fr; gap:28px; }
  .fcol-brand { grid-column:1 / -1; }
  .fbot .fnote { margin-left:0; }
}

/* ---------- $SYNAPSE teaser ---------- */
.tkt { display:grid; grid-template-columns:1fr 260px; gap:48px; align-items:center; }
.tkt-copy h2 { margin-bottom:16px; }
.tkt-coin { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.tkt-glow { position:absolute; width:230px; height:230px; border-radius:50%;
  background:radial-gradient(circle, rgba(216,245,0,0.20), transparent 62%);
  filter:blur(28px); animation:coinpulse 5s ease-in-out infinite; }
.tkt-coin img { position:relative; width:200px; height:200px; display:block; transition:transform .25s; }
.tkt-coin:hover img { transform:translateY(-4px) scale(1.03); }
.tkt-tag { position:relative; margin-top:16px; font-size:10.5px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint); }
@keyframes coinpulse { 50% { opacity:.55; transform:scale(1.06); } }
@media (prefers-reduced-motion: reduce){ .tkt-glow { animation:none; } }
@media (max-width:860px){ .tkt { grid-template-columns:1fr; gap:32px; } }


/* ═══════════ small screens ═══════════
   Most of the page already reflows on its own. Three things do not: the console,
   the token table and the code samples are all fixed-width by nature, and at 375px
   they were being clipped — the data was not scrolled off, it was simply gone. */
@media (max-width:640px){

  /* the console is a terminal; letting it scroll sideways is what a terminal does */
  .term-body { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .term-body > * { min-width:max-content; }
  .term-bar { gap:7px; }
  .term-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
  .term-live { flex-shrink:0; }

  /* code samples scroll rather than truncate */
  pre { overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* The token table drops to two lines per row. Rank, category and transfer count
     move out of the way, but price keeps liquidity beside it — a price shown with
     no idea of the depth behind it is the one number on this page worth mistrusting. */
  .tok-cols { display:none; }
  .tok-row {
    grid-template-columns:26px minmax(0,1fr) auto;
    grid-template-areas:
      "logo sym  price"
      "logo liq  chg"
      "meta meta meta";
    gap:2px 10px;
    padding:12px 14px;
  }
  .tok-row .n,
  .tok-row .tok-kind,
  .tok-row .vol,
  .tok-row .hold,
  .tok-row .tx { display:none; }
  .tok-meta {
    display:block; grid-area:meta; margin-top:5px; padding-top:6px;
    border-top:1px solid rgba(38,38,32,.7);
    font-size:10.5px; color:var(--faint); letter-spacing:.01em;
  }
  .tok-row .tok-logo { grid-area:logo; align-self:center; }
  .tok-id { grid-area:sym; }
  .tok-id .nm { display:none; }
  .tok-row .price { grid-area:price; }
  .tok-row .liq { grid-area:liq; text-align:left; font-size:11.5px; }
  .tok-row .liq::before { content:"liq "; color:var(--faint); }
  .tok-row .chg { grid-area:chg; }

  .tok-tab { font-size:11.5px; padding:6px 11px; }
  .tok-foot { font-size:11px; }

  /* the node map reads better stacked than as two clipped columns */
  .map { grid-template-columns:1fr; }

  section { padding:56px 0; }
  .wrap { padding:0 18px; }
}