/* ============ footer: 4-page menu + for builders ============ */

.footer-nav { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.footer-group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.footer-group a { color: var(--muted-foreground); }
.footer-group a:hover { color: var(--foreground); }
.footer-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.footer-group.footer-builders a { font-size: 12px; }
.footer-group.footer-main a { font-weight: 500; }

/* ============ tokenomics diagrams ============ */

.tk-bars {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 20px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  padding: 22px 22px 18px;
}
.tk-bar { display: grid; grid-template-columns: 190px 1fr 56px; align-items: center; gap: 16px; }
.tk-bar-label b { display: block; font-weight: 600; font-size: 14px; }
.tk-bar-label span { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-foreground); }
.tk-bar-track { height: 22px; border-radius: calc(var(--radius) - 6px); background: color-mix(in oklch, var(--muted) 40%, transparent); overflow: hidden; }
.tk-bar-fill { height: 100%; border-radius: inherit; min-width: 2px; }
.tk-bar-pct { font-family: var(--font-mono); font-size: 13.5px; font-variant-numeric: tabular-nums; text-align: right; color: var(--foreground); }
.tk-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; font-family: var(--font-mono); font-size: 11px; color: var(--muted-foreground); border-top: 1px solid var(--border); padding-top: 12px; }
.tk-legend .sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; vertical-align: middle; }

.tk-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 20px 0; }
.tk-flow-node { padding: 10px 14px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); background: var(--card); font-size: 13.5px; }
.tk-flow-node b { font-weight: 600; }
.tk-flow-node small { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--muted-foreground); }
.tk-flow-arrow { color: var(--muted-foreground); font-family: var(--font-mono); font-size: 16px; }

/* ============ proof feed ============ */

.proof-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 18px 0;
  padding: 16px 18px;
  border: 1px solid color-mix(in oklch, var(--warning) 40%, transparent);
  border-radius: var(--radius);
  background: color-mix(in oklch, var(--warning) 6%, var(--card));
}
.proof-banner .proof-banner-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); margin-top: 7px; flex: none; }
.proof-banner p { color: var(--muted-foreground); font-size: 13.5px; }
.proof-banner b { color: var(--foreground); }

.badge-p {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: calc(var(--radius) - 6px);
  padding: 2px 8px;
  border: 1px solid var(--border);
}
.badge-p.proven { color: var(--success); border-color: color-mix(in oklch, var(--success) 40%, transparent); background: color-mix(in oklch, var(--success) 8%, transparent); }
.badge-p.notlive { color: var(--warning); border-color: color-mix(in oklch, var(--warning) 40%, transparent); }
.badge-p.testnet { color: var(--muted-foreground); }

.proof-note { color: var(--muted-foreground); font-size: 12.5px; min-width: 220px; }

@media (max-width: 760px) {
  .tk-bar { grid-template-columns: 1fr 56px; }
  .tk-bar-label { grid-column: 1 / -1; }
  .footer-nav { align-items: flex-start; }
  .footer-group { justify-content: flex-start; }
}