/* landing.css: the parts of the landing page that are Kova's own. Everything
   else is the donor's Webflow styling, left as it was. */

:root {
  --q-ink: #060606;
  --q-mint: #50f7c3;
  --q-green: #0e9f6e;
  --q-red: #d64545;
  --q-amber: #b7791f;
  --q-line-dark: rgba(255, 255, 255, 0.1);
  --q-line-light: rgba(6, 6, 6, 0.1);
  --q-mono: "PP Supply Mono", "Ppsupplymono", ui-monospace, monospace;
  --q-sans: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@keyframes q-pulse {
  0% { box-shadow: 0 0 0 0 rgba(80, 247, 195, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(80, 247, 195, 0); }
  100% { box-shadow: 0 0 0 0 rgba(80, 247, 195, 0); }
}

@keyframes q-spin {
  to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------ status bar */

.q-status__dot,
.q-live {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  flex: 0 0 auto;
}
.q-status[data-state="live"] .q-status__dot,
.q-live.is-live {
  background: var(--q-mint);
  animation: q-pulse 2s ease-out infinite;
}
.q-status[data-state="snapshot"] .q-status__dot { background: #f5b544; }
.q-status[data-state="error"] .q-status__dot { background: #ff6b6b; }
.q-status[data-state="error"] .ps-ca__label { color: #ff6b6b; }
.q-status .ps-ca__value { min-width: 0; font-variant-numeric: tabular-nums; }
.q-status__link { text-decoration: none; white-space: nowrap; }

@media (max-width: 767px) {
  /* a phone has room for the dot and the figures, not for a label beside them */
  .q-status__link,
  .q-status .ps-ca__label { display: none; }
  .q-status .ps-ca__value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ------------------------------------------------------------------ hero */

.q-hero {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 24px 12px;
  font-family: var(--q-mono);
  color: #fff;
}
.q-hero__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.q-hero__block { margin-left: auto; color: rgba(255, 255, 255, 0.4); font-variant-numeric: tabular-nums; }
.q-hero__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.q-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--q-line-dark);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(80, 247, 195, 0.07), rgba(255, 255, 255, 0.015) 60%);
  color: #fff;
  text-decoration: none;
  transition: border-color 0.16s ease, transform 0.16s ease;
}
.q-card:hover { border-color: rgba(80, 247, 195, 0.5); transform: translateY(-2px); }
.q-card__top { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.q-card__top b { font-family: var(--q-sans); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.q-card__top em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.q-card__price { font-family: var(--q-sans); font-size: 40px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
/* one tick per active pool, placed between the cheapest and the richest */
.q-card__range { position: relative; height: 26px; margin: 0 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.q-card__range i { position: absolute; bottom: 0; width: 2px; margin-left: -1px; border-radius: 1px; background: rgba(255, 255, 255, 0.42); }
.q-card__range i.is-mid { width: 3px; margin-left: -1.5px; background: var(--q-mint); }
.q-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.q-card__best { min-height: 1.3em; font-size: 12px; color: var(--q-mint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* one line; whatever does not fit fades out instead of wrapping under the cards */
.q-hero__strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px 22px;
  min-height: 1.4em;
  margin-top: 18px;
  overflow: hidden;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
  mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.q-hero__strip a { color: inherit; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.q-hero__strip a:hover { color: #fff; }
.q-hero__strip b { margin-right: 6px; font-weight: 400; color: #fff; }
.q-hero__strip em { margin-left: 6px; font-style: normal; color: var(--q-mint); }

@media (max-width: 991px) {
  .q-hero { padding: 8px 16px 12px; }
  .q-card__price { font-size: 34px; }
}

@media (max-width: 767px) {
  .q-hero__head { font-size: 11px; }
  .q-hero__block { display: none; }
  /* three cards side by side do not fit a phone; they become a row to swipe */
  .q-hero__cards {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(250px, 82%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .q-card { scroll-snap-align: start; }
  .q-hero__strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
}

/* --------------------------------------------------------- ticker marquee */

.marquee.q-marquee,
.marquee-content.scroll.q-tape { grid-column-gap: 1rem; column-gap: 1rem; }
.marquee-content.q-tape { overflow: visible; }
.q-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--q-line-light);
  border-radius: 999px;
  background: #fff;
  color: var(--q-ink);
  font-family: var(--q-mono);
  font-size: 14px;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 0.16s ease;
}
.q-chip:hover { border-color: var(--q-ink); }
.q-chip b { font-family: var(--q-sans); font-weight: 600; letter-spacing: -0.01em; }
.q-chip span { font-variant-numeric: tabular-nums; }
.q-chip em { font-style: normal; font-size: 12px; color: rgba(6, 6, 6, 0.5); }

@media (max-width: 479px) {
  .marquee-content.scroll.q-tape { min-width: max-content; max-width: none; }
}

[data-q-stat],
[data-q-count] { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------- orb */

.background-video .q-orb { display: block; width: 100%; height: 100%; }
.q-orb__ring { transform-box: view-box; transform-origin: 50% 50%; animation: q-spin var(--q-spin, 60s) linear infinite; }
.q-orb__ring--rev { animation-direction: reverse; }
.q-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  background: var(--q-ink);
  color: var(--q-mint);
  font-family: var(--q-sans);
  font-weight: 600;
  font-size: 15px;
}

@media (max-width: 479px) {
  .q-mini { width: 20px; height: 20px; font-size: 10px; }
}

/* ---------------------------------------------------------------- widgets */

.half-img-wrap:has(.q-widget) { aspect-ratio: auto; }
.q-widget {
  position: relative;
  margin: 64px 36px 36px;
  overflow: hidden;
  border: 1px solid var(--q-line-light);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(6, 6, 6, 0.04), 0 18px 40px -24px rgba(6, 6, 6, 0.28);
  font-family: var(--q-mono);
  color: var(--q-ink);
}
.q-widget .q-live { background: rgba(6, 6, 6, 0.25); }
.q-widget .q-live.is-live { background: var(--q-mint); }
.q-widget__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--q-line-light);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.q-widget__bar b { font-weight: 400; }
.q-widget__bar em { margin-left: auto; font-style: normal; color: rgba(6, 6, 6, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-widget__body { overflow-x: auto; }
.q-widget__foot {
  padding: 10px 16px;
  border-top: 1px solid var(--q-line-light);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(6, 6, 6, 0.5);
}

.q-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.q-table th {
  padding: 10px 16px;
  text-align: right;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(6, 6, 6, 0.45);
  white-space: nowrap;
}
.q-table td { padding: 9px 16px; text-align: right; white-space: nowrap; border-top: 1px solid rgba(6, 6, 6, 0.06); }
.q-table th:first-child,
.q-table td:first-child { text-align: left; }
.q-table td b { font-family: var(--q-sans); font-weight: 600; }
.q-table td small { display: block; font-size: 11px; color: rgba(6, 6, 6, 0.45); }
.q-table a { color: inherit; text-decoration: none; }
.q-table a:hover { text-decoration: underline; }
.q-table tr.is-best td { background: rgba(80, 247, 195, 0.14); }
.q-up { color: var(--q-green); }
.q-down { color: var(--q-red); }
.q-flag { color: var(--q-amber); }
.q-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; text-transform: uppercase; background: rgba(6, 6, 6, 0.06); }
.q-pill.is-buy { background: rgba(80, 247, 195, 0.28); color: #06694a; }
.q-pill.is-sell { background: rgba(214, 69, 69, 0.12); color: #a12f2f; }

@media (max-width: 991px) {
  .q-widget { margin: 56px 20px 20px; }
}

@media (max-width: 479px) {
  .q-widget { margin: 48px 10px 10px; }
  .q-table th,
  .q-table td { padding: 8px 10px; font-size: 12px; }
}

/* --------------------------------------------------------- builder badges */

/* Ticker badges in place of the donor's avatars. Width comes from each slot's
   max-width in the donor CSS; the label scales with the badge. */
.q-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  aspect-ratio: 1;
  container-type: inline-size;
  border: 1px solid rgba(80, 247, 195, 0.35);
  background: radial-gradient(circle at 30% 25%, rgba(80, 247, 195, 0.38), rgba(80, 247, 195, 0.08) 55%, rgba(6, 6, 6, 0.92));
  box-shadow: 0 0 40px -10px rgba(80, 247, 195, 0.45);
  color: #fff;
}
.q-badge b { font-family: var(--q-sans); font-weight: 600; font-size: 24cqi; letter-spacing: -0.02em; }

@media (prefers-reduced-motion: reduce) {
  .q-orb__ring,
  .q-live,
  .q-status__dot { animation: none !important; }
  .q-card { transition: none; }
}