/* =============================================================================
   The landing page, laid out on the painting.
   ========================================================================== */

/* -------------------------------------------------------------------- hero */
.hero { padding: var(--s9) 0 var(--s7); text-align: center; }
.hero h1 { font-size: var(--t-display); line-height: .92; }
.hero h1 em { font-style: normal; font-weight: 300; color: var(--bone-3); }
.lede { font-size: 1.06rem; color: var(--bone-2); max-width: 58ch; margin: var(--s5) auto 0; }
.hero-cta { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s6); justify-content: center; }
.hero-stats { max-width: 760px; margin: var(--s8) auto 0; }
.hero-stats .stats { grid-template-columns: repeat(4, 1fr); }
.hero-stats .stat { text-align: center; padding: var(--s4) var(--s3); }
@media (max-width: 620px) { .hero-stats .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---- sections arrive as you reach them ---- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ----------------------------------------------------------- the two sides */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 880px) { .compare { grid-template-columns: 1fr; } }
.compare-card { display: flex; flex-direction: column; }
.compare-card .panel-body { flex: 1; }
.compare-card .label { display: block; margin-bottom: var(--s4); }
.compare-card h2 { margin-bottom: var(--s3); font-size: 1.7rem; }
.compare-card p { color: var(--bone-2); font-size: var(--t-sm); }
/* the one with a hook is lit, the way the horizon is */
.compare-card.lit { border-color: rgba(232,236,245,.24); box-shadow: var(--lift-2), inset 0 1px 0 rgba(232,236,245,.14); }

.deep-mark { padding: var(--s4) var(--s5); border-top: 1px solid var(--edge); display: flex; align-items: center; gap: var(--s3); }
.deep-mark .track { flex: 1; }
.deep-mark b { color: var(--bone); }

/* a shared meter: the waterline made small */
.track { height: 6px; border-radius: var(--r-pill); background: rgba(4,7,15,.6); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.5); }
.track i { display: block; height: 100%; width: 100%; border-radius: var(--r-pill); transform: scaleX(var(--p, 0)); transform-origin: left;
  background: linear-gradient(90deg, rgba(42,86,168,.9), var(--bone)); transition: transform .5s var(--ease); }
.deep-mark .track i { transform: none; }

/* ------------------------------------------------------------------- board */
.board-sec { padding-top: var(--s9); scroll-margin-top: 84px; }
.toolbar { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.toolbar .spacer { flex: 1; }
.toolbar .search { width: 240px; height: 42px; }
.toolbar .sort { width: 168px; height: 42px; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
@media (max-width: 1040px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .cards { grid-template-columns: 1fr; } }

.cc {
  display: block; padding: var(--s4); border-radius: var(--r-l);
  background: var(--glass); border: 1px solid var(--edge);
  backdrop-filter: var(--blur); box-shadow: var(--lift);
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.cc:hover { transform: translateY(-3px); border-color: var(--edge-2); box-shadow: var(--lift-2); }
.cc-top { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.cc-avatar { position: relative; flex: none; }
.cc-side { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 9px; line-height: 1; border: 2px solid #0a1830; color: #06101f; }
.cc-avatar.long .cc-side { background: var(--long); }
.cc-avatar.short .cc-side { background: var(--short); color: #1b0603; }
.cc-name { font-weight: 600; display: flex; align-items: baseline; gap: 7px; }
.cc-name .tk { font-family: var(--mono); font-size: var(--t-xs); color: var(--bone-4); font-weight: 400; }
.cc-blurb { font-size: var(--t-sm); color: var(--bone-3); margin-bottom: var(--s3); min-height: 2.7em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-rows { display: grid; gap: 5px; font-size: var(--t-sm); margin-bottom: var(--s3); }
.cc-rows > div { display: flex; justify-content: space-between; gap: var(--s3); }
.cc-rows span { color: var(--bone-4); }
.cc-rows b { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.cc-bar { height: 5px; border-radius: var(--r-pill); background: rgba(4,7,15,.6); overflow: hidden; }
.cc-bar i { display: block; height: 100%; width: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, rgba(42,86,168,.9), var(--bone));
  transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .5s var(--ease); }
.cc-foot { display: flex; justify-content: space-between; gap: var(--s3); margin-top: 9px; font-size: var(--t-xs); color: var(--bone-4); font-family: var(--mono); }

/* ------------------------------------------------------------------- steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6) var(--s5); }
.step { padding-top: var(--s4); border-top: 1px solid var(--edge-2); }
.step .n { font-size: var(--t-micro); letter-spacing: .18em; color: var(--bone-4); }
.step h3 { margin: var(--s3) 0 var(--s2); font-size: 1.16rem; }
.step p { font-size: var(--t-sm); color: var(--bone-2); }
@media (max-width: 880px) { .steps { grid-template-columns: 1fr; gap: var(--s5); } }

/* --------------------------------------------------------------- simulator */
.sim { display: grid; grid-template-columns: 340px 1fr; }
.sim-controls { padding: var(--s5); border-right: 1px solid var(--edge); }
.sim-controls .field:last-child { margin-bottom: 0; }
.sim-out { display: flex; flex-direction: column; }
.sim-out .stats { grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--edge); }
.sim-cover { padding: var(--s5); flex: 1; display: flex; flex-direction: column; justify-content: center; }
.sim-cover-head { display: flex; justify-content: space-between; font-size: var(--t-sm); color: var(--bone-2); margin-bottom: var(--s3); }
.sim-cover-head b { font-family: var(--mono); font-weight: 500; }
.sim-note { margin-top: var(--s3); font-size: var(--t-sm); color: var(--bone-3); }
@media (max-width: 900px) {
  .sim { grid-template-columns: 1fr; }
  .sim-controls { border-right: 0; border-bottom: 1px solid var(--edge); }
  .sim-out .stats { grid-template-columns: repeat(2, 1fr); }
}

.seg { display: flex; gap: var(--s2); }
.seg button {
  flex: 1; height: 46px; border-radius: var(--r-s); border: 1px solid var(--edge);
  background: rgba(4,7,15,.4); color: var(--bone-3); font-size: var(--t-sm); font-weight: 500;
  transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.seg button:hover { color: var(--bone); border-color: var(--edge-2); }
.seg button.on[data-side='long']  { color: var(--long);  border-color: rgba(79,216,164,.45); background: var(--long-bg); }
.seg button.on[data-side='short'] { color: var(--short); border-color: rgba(255,122,107,.45); background: var(--short-bg); }

/* -------------------------------------------------------------------- risk */
.risks { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s7); }
.risk { padding-top: var(--s4); border-top: 1px solid var(--edge); }
.risk h3 { margin-bottom: var(--s2); }
.risk p { font-size: var(--t-sm); color: var(--bone-2); }
@media (max-width: 800px) { .risks { grid-template-columns: 1fr; gap: var(--s5); } }

/* ------------------------------------------------------------------ markets
   A plate of instruments. Every market the vault can be pointed at, with its
   live price, laid out on a grid so the whole list reads at a glance. */
.mkt-strip {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1px; background: var(--edge);
  border: 1px solid var(--edge);
}
.mkt-strip > div {
  display: flex; align-items: center; gap: 11px; padding: 13px 15px;
  background: linear-gradient(180deg, rgba(9,18,36,.88), rgba(4,9,20,.93));
}
.mkt-strip .id { font-family: var(--mono); font-size: var(--t-sm); font-weight: 600; color: var(--bone); }
.mkt-strip .nm { font-size: var(--t-xs); color: var(--bone-4); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt-strip .px { margin-left: auto; text-align: right; font-family: var(--mono); font-size: var(--t-sm); color: var(--bone); }
.mkt-strip .px .ch { font-size: var(--t-xs); margin-top: 2px; }
.mkt-strip .px .up { color: var(--long); }
.mkt-strip .px .down { color: var(--short); }
.mkt-strip .px .dim { color: var(--bone-4); font-size: var(--t-xs); letter-spacing: .06em; }

/* ------------------------------------------------------------- leaderboard
   Every coin the platform has launched, ranked by market cap, read from chain.
   A rank column, the coin, its cap, and how much of that cap the vault could
   actually pay out. That last column is the whole product, so it is the one
   that gets the meter. */
.lb { overflow: hidden; }
.lb-row {
  display: grid; align-items: center; gap: var(--s3);
  grid-template-columns: 34px minmax(0, 1fr) 108px 96px 132px;
  padding: 12px var(--s5);
  border-bottom: 1px solid rgba(232,236,245,.07);
  transition: background .14s var(--ease);
}
.lb-row:last-child { border-bottom: 0; }
a.lb-row:hover { background: rgba(232,236,245,.05); }
.lb-head {
  border-bottom: 1px solid rgba(232,236,245,.1);
  background: rgba(232,236,245,.02);
  padding-block: 9px;
}
.lb-rank {
  font-family: var(--mono); font-size: var(--t-xs); color: var(--bone-4);
  font-variant-numeric: tabular-nums;
}
/* the first three carry a lit rank, because a leaderboard should reward */
.lb-row:nth-child(2) .lb-rank,
.lb-row:nth-child(3) .lb-rank,
.lb-row:nth-child(4) .lb-rank { color: var(--bone); }
.lb-coin { display: flex; align-items: center; gap: 11px; min-width: 0; }
.lb-coin .logo { width: 30px; height: 30px; border-radius: 8px; overflow: hidden; flex: none; }
.lb-nm { min-width: 0; }
.lb-nm b { display: block; font-size: var(--t-sm); font-weight: 600; }
.lb-nm span {
  display: block; font-size: var(--t-xs); color: var(--bone-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb-num {
  font-family: var(--mono); font-size: var(--t-sm); text-align: right;
  font-variant-numeric: tabular-nums;
}
.lb-num.dim { color: var(--bone-4); font-size: var(--t-xs); letter-spacing: .06em; }
.lb-cov { display: flex; flex-direction: column; gap: 5px; }
.lb-cov .track { height: 3px; }
.lb-cov .label { font-size: var(--t-micro); letter-spacing: .1em; }
.lb-side {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .1em;
  padding: 2px 7px; border-radius: 999px; border: 1px solid currentColor;
  align-self: center; justify-self: start; opacity: .85;
  /* The widest of these is SHORT GOOGL 10x at 135px, three more than the track.
     Without this it breaks across two lines and stops looking like a pill; with
     it, those three pixels go into the row's own padding. */
  white-space: nowrap;
}
@media (max-width: 860px) {
  .lb-row { grid-template-columns: 26px minmax(0, 1fr) 92px; padding-inline: var(--s4); }
  .lb-row > .lb-hide { display: none; }
}