/* ==========================================================================
   home.css — صفحه نخست: هیرو، بنتو معرفی، چرا طلانیکس
   ========================================================================== */

/* ---------- هیرو ---------- */
.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-bottom: var(--space-lg);
}

/* هاله‌ی نرم و کم‌رنگ پشت هیرو؛ چون تصویر منبع زرد پررنگه، خیلی محو و بلوردار نمایش داده می‌شود
   تا فقط حس گرمای طلایی بدهد و به متن/رنگ‌بندی فعلی سایت آسیب نزند */
.hero::before {
  content: "";
  position: absolute;
  inset: -15% -10%;
  background-image: url('../images/hero/hero-desktop.jpg');
  background-size: cover;
  background-position: center 30%;
  filter: blur(80px) saturate(0.55) brightness(0.85);
  opacity: 0.16;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 35%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 35%, #000 0%, transparent 72%);
  z-index: -1;
  pointer-events: none;
}

@media (max-width: 640px) {
  .hero::before { background-image: url('../images/hero/hero-mobile.jpg'); }
}

/* نشان برند بزرگ‌تر و پررنگ‌تر مخصوص بالای هیرو صفحه اصلی؛ چون این‌جا تنها جای سایت است
   که برند در بزرگ‌ترین و اولین قدم دیده می‌شود */
.page-brand-mark-hero {
  gap: 14px;
  margin-bottom: var(--space-md);
}
.page-brand-mark-hero img {
  width: 92px;
  height: 92px;
  padding: 8px;
}
.page-brand-mark-hero span {
  font-size: var(--fs-xxl);
  letter-spacing: 1px;
}
.hero-title {
  font-size: var(--fs-xxl);
  line-height: 1.35;
  margin-bottom: var(--space-sm);
}
.hero-title .highlight {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-desc {
  color: var(--text-secondary);
  font-size: var(--fs-md);
  max-width: 640px;
  margin: 0 auto var(--space-md);
}

/* ---------- بنتو معرفی (سه بخش) ---------- */
/* این بخش را در home.css جایگزین بخش قبلی «بنتو معرفی» کنید */

.intro-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
}

/* ⬇️ اصلاح شد: به‌جای دستکاری direction، فقط با order جای عکس و متن عوض می‌شود
   این روش در RTL کاملاً پایدار و بدون باگ است */
.intro-row .intro-image { order: 1; }
.intro-row .intro-text  { order: 2; }

.intro-row.reverse .intro-image { order: 2; }
.intro-row.reverse .intro-text  { order: 1; }

/* تصاویر این بخش عمودی (شکل اسکرین‌شات موبایل) هستند، پس به‌جای کشیده‌شدن در کل ستون،
   با عرض محدود و وسط‌چین در ستون خودشان قاب می‌شوند */
.intro-image {
  position: relative;
  max-width: 320px;
  width: 100%;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-deep);
}
.intro-image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(18,179,168,0.15), transparent 60%);
}
.intro-image img { width: 100%; transition: transform var(--transition-slow); }
.intro-row:hover .intro-image img { transform: scale(1.06); }

.intro-number {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  background: var(--grad-teal);
  font-family: var(--font-heading);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-sm);
  box-shadow: var(--glow-teal);
}

.intro-text h2 { font-size: var(--fs-xl); margin-bottom: var(--space-sm); line-height: 1.5; }
.intro-text p { font-size: var(--fs-md); color: var(--text-secondary); }

.intro-cta { text-align: center; margin-top: var(--space-lg); }

.about-brief-text {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  font-size: var(--fs-md);
  line-height: 2.1;
  color: var(--text-secondary);
}

.why-us-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  max-width: 920px;
  margin: 0 auto var(--space-lg);
}

.why-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--space-sm) var(--space-md);
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}
.why-chip:hover { border-color: rgba(199,176,74,0.4); background: rgba(199,176,74,0.06); transform: translateY(-4px); }
.why-chip .check-icon { width: 26px; height: 26px; border-radius: var(--radius-full); background: var(--grad-gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--glow-gold); }
.why-chip .check-icon svg { width: 14px; height: 14px; }
.why-chip span { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.7; }

@media (max-width: 900px) {
  .intro-row, .intro-row.reverse { grid-template-columns: 1fr; }
  .intro-row .intro-image, .intro-row .intro-text,
  .intro-row.reverse .intro-image, .intro-row.reverse .intro-text { order: unset; }
  .why-us-grid { grid-template-columns: 1fr; }
}

/* ---------- چرا طلانیکس - چیپ‌های شیشه‌ای ---------- */
.why-us-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  max-width: 920px;
  margin: 0 auto var(--space-lg);
}

.why-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--space-sm) var(--space-md);
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}
.why-chip:hover {
  border-color: rgba(199,176,74,0.4);
  background: rgba(199,176,74,0.06);
  transform: translateY(-4px);
}
.why-chip .check-icon { width: 26px; height: 26px; border-radius: var(--radius-full); background: var(--grad-gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--glow-gold); }
.why-chip .check-icon svg { width: 14px; height: 14px; }
.why-chip span { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.7; }

@media (max-width: 900px) {
  .intro-row, .intro-row.reverse { grid-template-columns: 1fr; direction: rtl; }
  .why-us-grid { grid-template-columns: 1fr; }
}