/* ============ صفحه‌ی اصلی ============ */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-10) var(--sp-9);
  background:
    radial-gradient(900px 400px at 85% -10%, rgba(139,92,246,.2), transparent 62%),
    radial-gradient(800px 380px at 8% 0%, rgba(63,97,242,.22), transparent 60%),
    var(--surface);
  border-bottom: 1px solid var(--border);
}

.hero .wrap { position: relative; z-index: 2; }
.hero-grid {
  display: grid; gap: var(--sp-8);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
}

.hero h1 {
  font-size: clamp(1.9rem, 5.5vw, 3.1rem);
  margin-bottom: var(--sp-4);
  line-height: 1.3;
}
.hero h1 .grad {
  background: linear-gradient(100deg, var(--brand-500), var(--violet-500) 60%, var(--accent-500));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero .lead { font-size: var(--fs-md); color: var(--text-soft); max-width: 56ch; margin-bottom: var(--sp-6); }
.hero-cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

.hero-stats {
  display: flex; gap: var(--sp-6); flex-wrap: wrap;
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
.hero-stats div b { display: block; font-size: var(--fs-xl); font-weight: 900; color: var(--brand-600); line-height: 1.2; }
.hero-stats div span { font-size: var(--fs-xs); color: var(--text-mute); font-weight: 600; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-stats div b { color: var(--brand-300); } }
:root[data-theme="dark"] .hero-stats div b { color: var(--brand-300); }

/* پیش‌نمایش کد کنار عنوان */
.hero-code {
  border-radius: var(--r-lg);
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  transform: rotate(-1.1deg);
}
.hero-code .bar {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 13px; background: var(--code-bg-2);
  border-bottom: 1px solid var(--code-border);
}
.hero-code .bar i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.hero-code .bar i:nth-child(1) { background: #ff5f57; }
.hero-code .bar i:nth-child(2) { background: #febc2e; }
.hero-code .bar i:nth-child(3) { background: #28c840; }
.hero-code .bar span { margin-inline-start: auto; font-size: var(--fs-xs); color: #7d87a8; font-family: var(--font-mono); }
.hero-code pre {
  margin: 0; padding: 16px 18px;
  font-size: .84rem; line-height: 1.85; color: var(--code-text);
  direction: ltr; text-align: left; overflow-x: auto;
}
.hero-code .out {
  border-top: 1px dashed var(--code-border);
  padding: 11px 18px; font-family: var(--font-mono);
  font-size: .8rem; color: #9fe8b5; direction: ltr; text-align: left;
  white-space: pre-wrap;
}

/* ---------- بخش‌های عمومی ---------- */
.sec { padding-block: var(--sp-9); }
.sec-head { margin-bottom: var(--sp-7); }
.sec-head h2 { margin-bottom: var(--sp-2); }
.sec-head p { color: var(--text-soft); max-width: 62ch; }

/* ---------- کارت جلسه‌ها ---------- */
.lesson-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.lcard {
  display: flex; flex-direction: column;
  position: relative;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none; color: var(--text);
  box-shadow: var(--sh-sm);
  transition: transform .15s, box-shadow .18s, border-color .18s;
  overflow: hidden;
}
.lcard::after {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 3px; background: linear-gradient(90deg, var(--brand-500), var(--violet-500));
  opacity: 0; transition: opacity .18s;
}
.lcard:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-lg);
  border-color: var(--brand-300);
  text-decoration: none;
}
.lcard:hover::after { opacity: 1; }

.lcard-top { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.lcard .em {
  width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 22px;
  background: var(--surface-3);
}
.lcard .no { font-size: var(--fs-xs); color: var(--text-mute); font-weight: 700; }
.lcard h3 { font-size: var(--fs-md); line-height: 1.45; }
.lcard .sum { font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.85; flex: 1; margin-bottom: var(--sp-4); }
.lcard .topics { display: flex; flex-wrap: wrap; gap: 5px; }
.lcard .topics span {
  font-size: .72rem; font-weight: 600;
  padding: 3px 9px; border-radius: var(--r-full);
  background: var(--surface-2); color: var(--text-mute);
  border: 1px solid var(--border);
  font-family: var(--font-mono); direction: ltr;
}
.lcard .done {
  position: absolute; inset-block-start: 14px; inset-inline-end: 14px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--mint-500); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 900;
}

/* ---------- بنر Playground ---------- */
.pg-banner {
  display: grid; gap: var(--sp-6);
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  align-items: center;
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-7);
  background:
    radial-gradient(700px 260px at 12% -30%, rgba(139,92,246,.34), transparent 62%),
    linear-gradient(135deg, #232a5e, #14172a 65%);
  color: #eef0fb;
  box-shadow: var(--sh-lg);
}
.pg-banner h2 { color: #fff; margin-bottom: var(--sp-3); font-size: clamp(1.4rem, 4vw, 2rem); }
.pg-banner p { color: #c3c9e8; margin-bottom: var(--sp-5); line-height: 1.95; }
.pg-banner ul { list-style: none; padding: 0; display: grid; gap: 9px; font-size: var(--fs-sm); color: #d6dbf2; }
.pg-banner li { display: flex; gap: 9px; align-items: flex-start; }
.pg-banner li > span { min-width: 0; }
.pg-banner li b { color: #fff; }

/* ---------- کارت‌های «چه یاد می‌گیری» ---------- */
.why-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.why {
  padding: var(--sp-5); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border);
}
.why .em { font-size: 28px; margin-bottom: var(--sp-3); display: block; }
.why h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.why p { font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.85; }

/* ---------- نوار پیشرفت ---------- */
.progress-bar {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--border); margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.progress-bar .track {
  flex: 1; min-width: 160px; height: 9px; border-radius: var(--r-full);
  background: var(--surface-3); overflow: hidden;
}
.progress-bar .track i {
  display: block; height: 100%; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--brand-500), var(--mint-500));
  transition: width .4s;
}
.progress-bar .lbl { font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; }

/* ---------- ریسپانسیو ---------- */
@media (max-width: 900px) {
  .hero-grid, .pg-banner { grid-template-columns: 1fr; }
  .hero-code { transform: none; }
  .hero { padding-block: var(--sp-8) var(--sp-7); }
}
@media (max-width: 560px) {
  .hero-cta .btn { width: 100%; }
  .hero-stats { gap: var(--sp-4); }
  .pg-banner { padding: var(--sp-6) var(--sp-5); }
}