/* ======================================================================================
 * صفحه‌ی اصلی (views/index.ejs) — همان تم «سایبرپانک / AI Tool» صفحات پرامپت و /geolocation
 *
 * ترتیب لود: prompts.css (توکن‌ها و اجزای پایه) ← pages.css (کارت دوره/مقاله/ویژگی‌ها، تیتر
 * بخش‌ها) ← همین فایل (فقط اجزای مخصوص صفحه‌ی اصلی: هیرو، چیپ موضوعات، بنر فراخوان).
 * همه‌ی قواعد زیر ‎.pz-home‎ محدود شده‌اند؛ کلاس‌های قبلی style.css دست نخورده‌اند.
 * ====================================================================================== */

/* ============================== ۱. هیرو (وسط‌چین، مثل هیروی صفحات پرامپت) ============================== */
.pz-home .hero-home { background: transparent; color: var(--cy-text); padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 6vw, 72px); }
.pz-home .hm-hero { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 860px; margin: 0 auto; }
.pz-home .hm-hero h1, .pz-home .hm-hero p.lead { text-align: center; width: 100%; }

/* نسخه‌ی فارسیِ eyebrow — بدون letter-spacing/فونت mono (خط فارسی را از هم می‌پاشد) */
.pz-home .hm-eyebrow-fa {
  font-family: inherit; letter-spacing: 0; direction: rtl; font-size: 13px; font-weight: 700;
  padding: 6px 14px; margin-bottom: 20px;
}
.pz-home .hero-home h1 {
  margin: 0; font-size: clamp(28px, 4.6vw, 52px); font-weight: 900; line-height: 1.5; letter-spacing: 0; color: #fff;
  text-shadow: 0 0 28px rgba(34, 227, 245, .18);
}
.pz-home .hero-home h1 .mark { /* قبلاً جعبه‌ی طلایی کج بود؛ حالا متن گرادیانی نئونی مثل بقیه‌ی صفحات */
  display: inline; padding: 0; border-radius: 0; transform: none; color: transparent; white-space: nowrap;
  background: linear-gradient(90deg, var(--cy-cyan), #9ef3ff 40%, var(--cy-magenta));
  -webkit-background-clip: text; background-clip: text;
}
.pz-home .hero-home p.lead { color: var(--cy-text-2); font-size: clamp(14.5px, 1.6vw, 17px); line-height: 2.1; margin: 18px auto 28px; max-width: 62ch; }
.pz-home .hero-home .hero-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: 100%; }
/* هیرو دیگر دکمه ندارد (کاربر خودش اسکرول می‌کند)؛ یک نشانگر تزئینی کوچک «به پایین اسکرول کن» */
.pz-home .hm-scroll { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 6px; color: var(--cy-muted); font-size: 12.5px; }
.pz-home .hm-scroll i {
  width: 24px; height: 38px; border-radius: 14px; border: 1.5px solid rgba(34, 227, 245, .45); position: relative;
  box-shadow: 0 0 14px rgba(34, 227, 245, .15);
}
.pz-home .hm-scroll i::after {
  content: ''; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px;
  background: var(--cy-cyan); box-shadow: 0 0 8px var(--cy-cyan); animation: hm-wheel 1.8s ease-in-out infinite;
}
@keyframes hm-wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .pz-home .hm-scroll i::after { animation: none; } }

/* سکشن GeoLocation (partials/geo-showcase) خودش پنل تیره دارد؛ فقط پس‌زمینه‌ی نوار دورش را با
   پس‌زمینه‌ی مشترک صفحه یکی می‌کنیم تا نوار سبز-تیره‌ی قبلی دیده نشود. */
.pz-home .gs { background: transparent; padding-top: 10px; }

/* ============================== ۲. چیپ موضوعات ============================== */
.pz-home .chip {
  color: #bfefff; font-size: 13px; padding: 8px 16px;
  background: rgba(34, 227, 245, .06); border: 1px solid rgba(34, 227, 245, .3);
  transition: border-color .2s, box-shadow .2s, color .2s;
}
.pz-home .chip:hover { color: #fff; border-color: var(--cy-cyan); box-shadow: 0 0 14px rgba(34, 227, 245, .25); }

/* ============================== ۳. بنر فراخوان ============================== */
.pz-home .cta-banner {
  overflow: visible; border-radius: var(--cy-radius); padding: clamp(30px, 5vw, 50px) clamp(18px, 4vw, 40px);
  border: 1px solid rgba(255, 59, 212, .45);
  background:
    radial-gradient(70% 120% at 85% 0%, rgba(34, 227, 245, .14), transparent 60%),
    radial-gradient(60% 120% at 10% 100%, rgba(255, 59, 212, .14), transparent 60%),
    linear-gradient(180deg, rgba(11, 26, 40, .9), rgba(5, 13, 21, .92));
  box-shadow: 0 0 34px rgba(255, 59, 212, .14), 0 0 40px rgba(34, 227, 245, .08);
}
.pz-home .cta-banner .pz-eyebrow { margin-bottom: 14px; }
.pz-home .cta-banner h2 { font-size: clamp(20px, 2.8vw, 28px); line-height: 1.6; text-shadow: 0 0 24px rgba(34, 227, 245, .18); }
.pz-home .cta-banner p { color: var(--cy-text-2); line-height: 2; max-width: 60ch; margin-inline: auto; }

/* ============================== ۴. ریسپانسیو ============================== */
@media (max-width: 640px) {
  .pz-home .chips-row { gap: 8px; }
  .pz-home .chip { font-size: 12.5px; padding: 7px 13px; }
}