/* ====================== 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; }