/* ==========================================================================
   Component — Hero
   بخش معرفی بالای صفحه؛ کاملاً ریسپانسیو و راست‌چین.
   ========================================================================== */
.hero {
  padding-block: var(--section-padding-y);
  text-align: center;
  background: linear-gradient(
    180deg,
    var(--color-primary-soft) 0%,
    var(--color-bg) 100%
  );
}

.hero__content {
  max-width: 46rem;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.hero__title {
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-4);
}

.hero__subtitle {
  font-size: clamp(1rem, 2.5vw, var(--font-size-xl));
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
  max-width: 40rem;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* روی موبایل دکمه‌ها تمام‌عرض و زیر هم */
@media (max-width: 479.98px) {
  .hero__actions {
    flex-direction: column;
  }

  .hero__actions .btn--primary,
  .hero__actions .btn--ghost {
    width: 100%;
  }
}