/* ====================== home.css (polished) ====================== */

/* Hero call-to-action buttons */
.hero-cta{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.hero-cta .btn{
  min-width: 160px;
  flex: 1 0 auto;
}
@media (max-width: 520px){
  .hero-cta .btn{ min-width: 100%; } /* stack buttons full-width */
}

/* Hero stats cards */
.hero-stats{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.hero-stats .card{
  padding: 14px 18px;
  border-radius: var(--radius-lg, 14px);
  flex: 1 1 160px;
  text-align: center;
}
.hero-stats .big{
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .2px;
  line-height: 1.3;
}

/* Hero badge (for trust signals, features, etc.) */
.hero-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface, #0f1722) 80%, transparent);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
.hero-badge svg{ width: 16px; height: 16px; flex-shrink: 0; }

/* ====================== Live stats on landing ====================== */
.live-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 1.8rem auto 1.6rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.85rem;
  color: #cbd5e1;
  opacity: 0.95;
}

.live-stats-label {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  color: #e2e8f0;
  opacity: 0.85;
}

.live-stat-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.live-stat-number {
  min-width: 1.8rem;
  text-align: center;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.86);
  border: 1px solid rgba(148, 163, 184, 0.5);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55);
  font-weight: 800;
  font-size: 0.95rem;
  color: #22c55e; /* same green as Create Account */
  transition: transform 0.15s ease, text-shadow 0.15s ease, background 0.15s ease;
}

.live-stat-number.updated {
  transform: translateY(-1px);
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
  background: rgba(21, 30, 51, 0.96);
}

.live-stat-text {
  font-size: 0.82rem;
  color: #e2e8f0;
}

.live-stats-separator {
  font-size: 0.9rem;
  opacity: 0.5;
}

/* Keep it nicely centered under the hero buttons */
.hero .live-stats {
  margin-left: auto;
  margin-right: auto;
}

/* Responsive */
@media (max-width: 640px) {
  .live-stats {
    flex-wrap: wrap;
    row-gap: 0.35rem;
    margin-top: 1.5rem;
    margin-bottom: 1.4rem;
  }

  .live-stats-label {
    flex-basis: 100%;
    text-align: center;
  }
}