/* ═══════════════════════════════════════════════════
   Token sale components: live widget, eligibility, sticky buy bar.
   Uses the tokens from css/style.css (:root). Mobile-first.
   ═══════════════════════════════════════════════════ */

/* ═══════════ SHARED: tags + notices ═══════════ */
.tag {
  display: inline-flex; align-items: center; flex-shrink: 0; gap: 4px; padding: 3px 8px; border-radius: 6px;
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4;
}
.tag--gold { color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.tag--blue { color: var(--blue-l); background: color-mix(in srgb, var(--blue) 16%, transparent); }
.tag--muted { color: var(--text-2); background: rgba(255, 255, 255, 0.07); }
.tag--green { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }

.notice {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); line-height: 1.5; border: 1px solid var(--line);
}
.notice .icon { flex-shrink: 0; margin-top: 1px; }
.notice--gold { color: var(--text); background: color-mix(in srgb, var(--gold) 9%, transparent); border-color: color-mix(in srgb, var(--gold) 30%, transparent); }
.notice--gold .icon { color: var(--gold); }
.notice--blue { color: var(--text); background: color-mix(in srgb, var(--blue) 10%, transparent); border-color: color-mix(in srgb, var(--blue) 30%, transparent); }
.notice--muted { color: var(--text-2); background: rgba(255, 255, 255, 0.03); margin-top: var(--sp-5); }


/* ═══════════ SALE WIDGET ═══════════ */
.widget {
  position: relative; overflow: hidden; width: 100%; max-width: 480px; margin: 0 auto;
  background:
    radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--gold) 9%, transparent), transparent 60%),
    linear-gradient(160deg, rgba(18, 30, 43, 0.97), rgba(11, 18, 25, 0.98));
  border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 22px 18px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.widget::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-l), var(--gold)); background-size: 300% 100%;
  animation: sweep 6s linear infinite;
}
@keyframes sweep { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }
.widget__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 26px; }
.widget__head .tag { margin-left: auto; }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 50px; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.status--live { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); }
.status--upcoming { color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); }
.status--muted { color: var(--muted); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-2); }
.status--muted .dot { animation: none; }
.status--live .dot { box-shadow: 0 0 0 0 currentColor; animation: pulse 1.8s var(--ease) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 60%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
.widget__title { font-size: 1.5rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; margin-top: -4px; }
.widget__msg { font-size: var(--fs-sm); color: var(--text-2); }
.widget__foot { font-size: var(--fs-xs); color: var(--muted); text-align: center; }
.widget__secure { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: -6px; font-size: var(--fs-xs); color: var(--muted); }
.widget__secure .icon { color: var(--green); }
.widget__secure strong { color: var(--text); font-weight: 700; font-size: var(--fs-xs); }
.widget__elig { font-size: var(--fs-xs); color: var(--muted); text-align: center; line-height: 1.5; padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.widget__elig .link { font-weight: 600; }

.skeleton { display: grid; gap: 12px; }
.skeleton__bar { display: block; height: 18px; border-radius: 8px; background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.12), rgba(255,255,255,0.05)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; width: 70%; }
.skeleton__bar--wide { width: 100%; }
.skeleton__bar--tall { height: 64px; width: 100%; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; padding: 14px 16px; border-radius: var(--r); background: rgba(0, 0, 0, 0.22); border: 1px solid var(--line); }
.prices__item dt { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.06em; }
.prices__item dd { font-size: 1.5rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

.countdown__label { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.countdown__at { font-size: var(--fs-xs); color: var(--muted); margin-top: 8px; }
.countdown__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.countdown__cell { text-align: center; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 4px; }
.countdown__num { display: block; font-family: var(--font-display); font-size: 1.45rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.countdown__unit { display: block; font-size: var(--fs-2xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }

.raised__head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: var(--fs-sm); margin-bottom: 8px; color: var(--muted); }
.raised__head .mono { color: var(--gold); font-weight: 500; }
.progress-wrap { display: flex; align-items: center; gap: 10px; }
.progress { flex: 1; height: 10px; border-radius: 20px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.progress__fill { position: relative; height: 100%; width: 0; border-radius: 20px; background: linear-gradient(90deg, var(--gold), var(--gold-l)); transition: width 1.6s var(--ease); overflow: hidden; }
.progress__fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); animation: slide 2.4s infinite; }
.progress__pct { font-size: var(--fs-xs); font-weight: 700; color: var(--text); min-width: 3.5ch; text-align: right; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.facts { display: grid; gap: 8px; font-size: var(--fs-sm); }
.facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.facts dt { color: var(--muted); }
.facts dd { font-weight: 600; text-align: right; }

.vesting { background: rgba(0, 0, 0, 0.22); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 10px; }
.vesting__title { font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.08em; }
.vesting__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vesting__grid dt { font-size: var(--fs-2xs); color: var(--muted); line-height: 1.3; text-transform: uppercase; letter-spacing: 0.04em; }
.vesting__grid dd { font-family: var(--mono); font-weight: 500; font-size: 0.95rem; }
.vesting__summary { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5; }
.vesting__example { font-size: var(--fs-xs); color: var(--muted); }
.vtl__bar { display: flex; gap: 3px; height: 8px; }
.vtl__seg { display: block; border-radius: 4px; min-width: 8px; }
.vtl__seg--tge { flex: 0 0 14px; background: var(--gold); box-shadow: 0 0 10px color-mix(in srgb, var(--gold) 50%, transparent); }
.vtl__seg--cliff { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0 4px, rgba(255, 255, 255, 0.05) 4px 8px); }
.vtl__seg--linear { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 70%, transparent), var(--green)); }
.vtl__labels { display: flex; justify-content: space-between; margin-top: 4px; font-size: var(--fs-2xs); color: var(--muted); font-family: var(--mono); }

.pay__label { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; font-weight: 600; }
.pay__list { display: grid; gap: 8px; }
.pay__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.03); }
.pay__icons { display: flex; flex-shrink: 0; }
.pay__icons img { width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 2px var(--card); }
.pay__icons img + img { margin-left: -6px; }
.pay__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.pay__name { font-size: var(--fs-sm); font-weight: 600; }
.pay__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.net-chip { font-size: var(--fs-2xs); color: var(--text-2); padding: 1px 7px; border-radius: 50px; border: 1px solid var(--line-2); white-space: nowrap; }
.pay__item--soon .pay__name { color: var(--text-2); }

/* ═══════════ SHARED SMALL HEADING (eligibility "Read before you buy") ═══════════ */
.plain__h { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-3); }

/* ═══════════ ELIGIBILITY ═══════════ */
.elig { display: grid; gap: var(--sp-3); }
.elig__item { display: flex; gap: var(--sp-4); padding: 18px; border-radius: var(--r); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); }
.elig__icon { display: inline-grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.elig__title { font-size: var(--fs-base); font-weight: 700; margin-bottom: 4px; }
.elig__text { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.65; }
.elig__docs { margin-top: var(--sp-6); text-align: center; }
.elig__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ═══════════ STICKY BUY BAR ═══════════ */
.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
  background: color-mix(in srgb, var(--d1) 94%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--line-2); padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.35);
  animation: rise 0.35s var(--ease);
}
@keyframes rise { from { transform: translateY(100%); } to { transform: none; } }
.sticky-bar__inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.sticky-bar__status { display: inline-grid; place-items: center; width: 10px; flex-shrink: 0; }
.sticky-bar__status.status--live { color: var(--green); }
.sticky-bar__status.status--upcoming { color: var(--gold); }
.sticky-bar__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sticky-bar__price, .sticky-bar__cd { font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-bar__price strong { font-size: var(--fs-sm); }
.sticky-bar__cd { font-variant-numeric: tabular-nums; }
.sticky-bar .btn { flex-shrink: 0; margin-left: auto; }
.sticky-bar__label, .sticky-bar__value { white-space: nowrap; }
.sticky-bar__short { display: none; }
/* Phones (360–419px): short labels, the CTA may take two lines, and a line wraps between its label
   and value instead of being cut, so nothing hides behind the button in any of the five languages. */
@media (max-width: 419.98px) {
  .sticky-bar__inner { gap: 10px; }
  .sticky-bar__full { display: none; }
  .sticky-bar__short { display: inline; }
  .sticky-bar__info { flex: 1 1 auto; }
  .sticky-bar__price, .sticky-bar__cd { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
  .sticky-bar .btn { flex-shrink: 1; max-width: 46%; min-width: 0; padding: 6px 14px; font-size: 0.8rem; line-height: 1.2; white-space: normal; text-wrap: balance; }
}

/* ═══════════ BREAKPOINTS ═══════════ */
@media (max-width: 380px) {
  .widget { padding: 18px 14px; }
  .countdown__grid { gap: 6px; }
  .countdown__num { font-size: 1.25rem; }
  .prices__item dd { font-size: 1.3rem; }
}

@media (min-width: 600px) {
  .widget { padding: 28px; }
  /* facts become a compact 2-column grid of label/value tiles */
  .facts { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .facts > div { flex-direction: column; justify-content: flex-start; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(0, 0, 0, 0.16); }
  .facts > div:last-child { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
  .facts dt { font-size: var(--fs-xs); }
  .facts dd { text-align: left; }
  /* an odd last tile spans the row instead of leaving an empty cell */
  .facts > div.is-wide { grid-column: 1 / -1; }
  .countdown__num { font-size: 1.75rem; }
  .elig { grid-template-columns: repeat(2, 1fr); }
  .sticky-bar__info { flex-direction: row; gap: 24px; align-items: center; }
  .sticky-bar__price, .sticky-bar__cd { font-size: var(--fs-sm); }
}

@media (min-width: 900px) {
  .widget { margin: 0; }
}