.waitlist-ff-counter {
  --wl-counter-accent: #8b5cf6;
  --wl-counter-accent-2: #22d3ee;
  --wl-number-color: #f8f7ff;
  position: relative;
  display: block;
  padding: 1.4rem;
  border: 1px solid var(--wl-border, rgba(255,255,255,.14));
  border-radius: 22px;
  background: rgba(255,255,255,.055);
  color: var(--wl-text, #f8f7ff);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
}

.waitlist-ff-counter__value-row {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: .08em;
  color: var(--wl-number-color);
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 850;
  line-height: 1;
  letter-spacing: -.05em;
}

.waitlist-ff-counter__number {
  color: var(--wl-number-color);
  font-variant-numeric: tabular-nums;
}

.waitlist-ff-counter--hero .waitlist-ff-counter__number,
.waitlist-ff-counter--glass .waitlist-ff-counter__number,
.waitlist-ff-counter--stacked .waitlist-ff-counter__number,
.waitlist-ff-counter--milestone .waitlist-ff-counter__number {
  background: linear-gradient(90deg, #fff, var(--wl-counter-accent) 42%, var(--wl-counter-accent-2));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: wlShimmer 7s linear infinite;
}

.waitlist-ff-counter__label { margin-top: .55rem; color: var(--wl-muted, #c3bdd4); }
.waitlist-ff-counter__secondary { margin-top: .45rem; color: rgba(255,255,255,.58); font-size: .86rem; }
.waitlist-ff-counter__eyebrow {
  margin-bottom: .7rem;
  color: var(--wl-counter-accent-2);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.waitlist-ff-counter__notice { margin-top: .8rem; color: #fbbf24; font-size: .8rem; }

/* Hero */
.waitlist-ff-counter--hero {
  border: 0;
  background: transparent;
  backdrop-filter: none;
  padding: .5rem;
}
.waitlist-ff-counter--hero .waitlist-ff-counter__value-row { font-size: clamp(3.5rem, 10vw, 8rem); }

/* Glass */
.waitlist-ff-counter--glass {
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.05));
  box-shadow: 0 24px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
}
.waitlist-ff-counter--glass::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--wl-counter-accent) 32%, transparent), transparent 55%);
}

/* Odometer */
.waitlist-ff-counter--odometer { text-align: center; }
.waitlist-ff-counter__odometer {
  display: inline-flex;
  padding: .32em .46em;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: #090611;
  box-shadow: inset 0 0 25px rgba(0,0,0,.7), 0 12px 35px rgba(0,0,0,.3);
  color: #f8f7ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(2.6rem, 8vw, 6rem);
  font-weight: 800;
  letter-spacing: .12em;
}

/* Live activity */
.waitlist-ff-counter--activity {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
}
.waitlist-ff-counter__activity-dot {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 0 rgba(52,211,153,.55);
  animation: wlPulse 1.8s infinite;
}
.waitlist-ff-counter--activity .waitlist-ff-counter__value-row {
  justify-content: flex-start;
  font-size: clamp(2rem, 5vw, 3.8rem);
}

/* Circular */
.waitlist-ff-counter--circular { display: grid; place-items: center; background: transparent; border: 0; }
.waitlist-ff-counter__ring {
  width: min(100%, 310px);
  aspect-ratio: 1;
  padding: 14px;
  border-radius: 50%;
  background: conic-gradient(var(--wl-counter-accent-2) var(--wl-progress), rgba(255,255,255,.1) 0);
  box-shadow: 0 0 45px color-mix(in srgb, var(--wl-counter-accent) 24%, transparent);
}
.waitlist-ff-counter__ring-inner {
  display: grid;
  place-content: center;
  width: 100%;
  height: 100%;
  padding: 1rem;
  border-radius: 50%;
  background: rgb(22,14,37);
}
.waitlist-ff-counter__ring .waitlist-ff-counter__value-row { font-size: clamp(2rem, 6vw, 4rem); }

/* Stats bar */
.waitlist-ff-counter__stats {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1rem;
  align-items: stretch;
}
.waitlist-ff-counter__stat {
  display: grid;
  place-content: center;
  min-height: 110px;
  padding: 1rem;
  border-left: 1px solid rgba(255,255,255,.1);
}
.waitlist-ff-counter__stat:first-child { border-left: 0; }
.waitlist-ff-counter__stat strong { font-size: 2rem; line-height: 1; }
.waitlist-ff-counter__stat span { margin-top: .4rem; color: var(--wl-muted, #c3bdd4); font-size: .82rem; }
.waitlist-ff-counter__stat--primary .waitlist-ff-counter__value-row { font-size: clamp(2.2rem, 5vw, 4rem); }

/* Split */
.waitlist-ff-counter--split {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2rem;
  text-align: left;
}
.waitlist-ff-counter--split .waitlist-ff-counter__value-row { justify-content: flex-end; }

/* Timeline */
.waitlist-ff-counter--timeline {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2rem;
  align-items: center;
  text-align: left;
}
.waitlist-ff-counter__timeline { display: grid; gap: .7rem; }
.waitlist-ff-counter__timeline > div { display: grid; grid-template-columns: 65px 1fr; gap: .7rem; align-items: center; }
.waitlist-ff-counter__timeline span { color: var(--wl-muted, #c3bdd4); font-size: .78rem; }
.waitlist-ff-counter__timeline i {
  display: block;
  width: var(--bar);
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--wl-counter-accent), var(--wl-counter-accent-2));
}
.waitlist-ff-counter__timeline .is-current i { box-shadow: 0 0 18px color-mix(in srgb, var(--wl-counter-accent-2) 55%, transparent); }

/* Stacked */
.waitlist-ff-counter--stacked {
  text-align: center;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}
.waitlist-ff-counter--stacked .waitlist-ff-counter__value-row { font-size: clamp(3rem, 9vw, 7rem); }

/* Badge */
.waitlist-ff-counter--badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  width: auto;
  padding: .65rem 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(139,92,246,.2), rgba(34,211,238,.12));
  font-weight: 750;
}
.waitlist-ff-counter--badge .waitlist-ff-counter__badge-icon { color: var(--wl-counter-accent-2); }
.waitlist-ff-counter--badge .waitlist-ff-counter__number { font-size: 1.1rem; }
.waitlist-ff-counter--badge .waitlist-ff-counter__label { margin: 0; }

/* Dashboard */
.waitlist-ff-counter__dashboard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
}
.waitlist-ff-counter__today {
  padding: .7rem .85rem;
  border: 1px solid rgba(52,211,153,.22);
  border-radius: 14px;
  background: rgba(52,211,153,.08);
  text-align: right;
}
.waitlist-ff-counter__today strong { display: block; color: #6ee7b7; font-size: 1.1rem; }
.waitlist-ff-counter__today span { color: var(--wl-muted, #c3bdd4); font-size: .7rem; }
.waitlist-ff-counter__sparkline {
  display: flex;
  align-items: end;
  gap: 5px;
  height: 88px;
  margin-top: 1.2rem;
}
.waitlist-ff-counter__sparkline i {
  flex: 1;
  height: 50%;
  border-radius: 4px 4px 1px 1px;
  background: linear-gradient(180deg, var(--wl-counter-accent-2), var(--wl-counter-accent));
  opacity: .82;
}

/* Milestone */
.waitlist-ff-counter__milestone-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.waitlist-ff-counter__goal { color: var(--wl-muted, #c3bdd4); font-size: 1.1rem; }
.waitlist-ff-counter__progress {
  height: 14px;
  margin: 1rem 0 .65rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
}
.waitlist-ff-counter__progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--wl-counter-accent), var(--wl-counter-accent-2));
  box-shadow: 0 0 20px color-mix(in srgb, var(--wl-counter-accent-2) 45%, transparent);
  transition: width .8s ease;
}
.waitlist-ff-counter__milestone-meta { display: flex; justify-content: space-between; gap: 1rem; }
.waitlist-ff-counter__milestone-meta .waitlist-ff-counter__label { margin: 0; }

@keyframes wlPulse {
  0% { box-shadow: 0 0 0 0 rgba(52,211,153,.55); }
  70% { box-shadow: 0 0 0 14px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

@media (max-width: 680px) {
  .waitlist-ff-counter__stats,
  .waitlist-ff-counter--split,
  .waitlist-ff-counter--timeline { grid-template-columns: 1fr; }
  .waitlist-ff-counter__stat { border-left: 0; border-top: 1px solid rgba(255,255,255,.1); }
  .waitlist-ff-counter__stat:first-child { border-top: 0; }
  .waitlist-ff-counter--split .waitlist-ff-counter__value-row { justify-content: flex-start; }
}