/* =========================================================
   آکادمی حسابداران ابزارساز - استایل اصلی سایت
   رنگ‌های برند:
   - سرمه‌ای اصلی: #38597e
   - سرمه‌ای تیره: #28415d
   - طلایی: #d99420
   - طلایی هاور: #c48216
   - آبی روشن: #5bbfe5
   - پس‌زمینه: #fafbfc
   ========================================================= */

:root {
  --brand-navy: #38597e;
  --brand-navy-dark: #28415d;
  --brand-gold: #d99420;
  --brand-gold-hover: #c48216;
  --brand-light-blue: #5bbfe5;
  --brand-soft-yellow: #f9b552;
  --brand-page-bg: #fafbfc;
  --brand-text: #222222;
  /* عرض و پدینگ مشترک هدر و محتوای صفحه؛ لبه‌ها همه جا هم‌راستا می‌مانند */
  --container-max: 1200px;
  --container-pad: 24px;
  --hero-banner-h: 9rem;
  /* شکل‌های تزئینی طرح Canva (static/img) */
  --shape-blue: url("../img/shape-blue.2591d9cf8c51.png");
  --shape-orange: url("../img/shape-orange.f1f5229c593a.png");
  --shape-star: url("../img/shape-star.a8643c541c56.png");  /* ارتفاع نوار سرمه‌ای هیرو (تصویر دست روی آن می‌نشیند) */
  --font-main: 'Ayandeh', 'Vazirmatn', Tahoma, sans-serif;

  /* ==========================================================
     🎛️ کنترل سراسری سایز فونت
     با تغییر «--fs» اندازه تمام فونت‌های سایت یکجا کم/زیاد می‌شود.
     ۱    = اندازه پیش‌فرض
     ۰.۹  = ۱۰٪ کوچک‌تر   ← مقدار فعلی
     ۰.۸۵ = ۱۵٪ کوچک‌تر
     ۱.۱  = ۱۰٪ بزرگ‌تر
     ========================================================== */
  --fs: 0.85;
  font-size: calc(16px * var(--fs));

  /* ---------- وزن‌های فونت (فقط وزن‌های موجود Ayandeh) ----------
     300 = Light | 400 = Regular | 700 = Bold | 900 = Black
     هرگز از 500/600/800 استفاده نکنید چون فونت ندارد و مرورگر
     به نزدیک‌ترین وزن می‌افتد و ناهماهنگی بصری ایجاد می‌شود. */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-bold: 700;
  --fw-black: 900;
}

/* ---------- فونت آینده (Ayandeh) ---------- */
@font-face {
  font-family: 'Ayandeh';
  src: url("../font/Ayandeh-Light.080910bdc158.woff2") format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ayandeh';
  src: url("../font/Ayandeh-Regular.91237ccdb5d0.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ayandeh';
  src: url("../font/Ayandeh-Bold.1f2e9de85832.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ayandeh';
  src: url("../font/Ayandeh-Black.ad2ae342cf6d.woff2") format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

* ,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  font-family: var(--font-main);
  -webkit-tap-highlight-color: transparent;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;  /* حذف حاشیه پیش‌فرض ۸px مرورگر تا هدر، بنر و فوتر تمام‌عرض باشند */
  background-color: var(--brand-page-bg);
  color: var(--brand-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; }

::selection { background: #fef3c7; color: #78350f; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ---------- انیمیشن‌های شناور ---------- */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(3deg); }
}
@keyframes floatReverse {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(8px) rotate(-3deg); }
}
.animate-float-1 { animation: floatSlow 4.5s ease-in-out infinite; }
.animate-float-2 { animation: floatReverse 5s ease-in-out infinite; }
.animate-float-3 { animation: floatSlow 6s ease-in-out infinite 1s; }
.animate-float-4 { animation: floatReverse 4s ease-in-out infinite 0.5s; }

/* ---------- کانتینر ---------- */
.container-site {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ---------- Header ---------- */
.site-header {
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 40;
}
/* کانتینر مرکزی هدر: هم‌عرض و هم‌پدینگ با .container-site تا لوگو با لبه محتوا تراز باشد */
.header-container {
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--container-pad);
  height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
/* برند (راست) و دکمه‌ها (چپ) هم‌عرض‌اند تا منو دقیقاً وسط بماند */
.site-brand, .header-left { flex: 1 1 0; min-width: max-content; }

/* ---------- برند: آیکون + لوگوی متنی ---------- */
.site-brand {
  display: flex; align-items: center; gap: 12px;
  justify-content: flex-start; user-select: none;
  transition: opacity .2s;
}
.site-brand:hover { opacity: .8; }
.brand-icon {
  width: 2.75rem; height: 2.75rem; flex-shrink: 0; display: block;
  filter: drop-shadow(0 4px 8px rgba(56, 89, 126, .25));
  transition: transform .25s;
}
.site-brand:hover .brand-icon { transform: rotate(-6deg); }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-label {
  font-size: .92rem; line-height: 1.2; font-weight: var(--fw-bold); color: var(--brand-navy);  /* سرمه‌ای: کنتراست ۶.۹:۱ روی سفید */
  margin-bottom: .2rem;
}
.brand-name { font-size: 1.2rem; font-weight: var(--fw-black); color: #262626; line-height: 1.1; white-space: nowrap; }
.brand-img { height: 3.25rem; width: auto; max-width: 12rem; object-fit: contain; display: block; }

/* منوی وسط‌چین */
.main-nav {
  display: flex; align-items: center; gap: 2.25rem;
  font-weight: var(--fw-bold); font-size: 0.95rem; height: 100%;
}
.main-nav a {
  color: #475569; height: 100%; display: inline-flex; align-items: center;
  position: relative; transition: color .2s;
}
.main-nav a:hover { color: var(--brand-gold); }
/* خط زیرین آیتم فعال (استاندارد) */
.main-nav a.active { color: #111827; }
.main-nav a.active::after {
  content: ''; position: absolute; bottom: 0; right: 0; left: 0;
  height: 3px; border-radius: 3px 3px 0 0; background: var(--brand-gold);
}

.header-left { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-navy); color: #fff;
  padding: .75rem 2rem; border-radius: 9999px;
  font-weight: var(--fw-bold); font-size: 0.9375rem; border: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: all .2s;
}
.btn-primary:hover {
  background: #2c4866; transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(56, 89, 126, 0.22);
}

.mobile-toggle {
  display: none; padding: .5rem; border-radius: .75rem;
  background: transparent; border: none; color: #374151;
}
.mobile-toggle:hover { background: #f3f4f6; }
.mobile-toggle svg { width: 1.5rem; height: 1.5rem; }

.mobile-menu {
  display: none; background: #fff; border-bottom: 1px solid #e5e7eb;
  padding: 1rem 1.5rem;
}
.mobile-menu a {
  display: block; padding: .5rem 0; font-weight: 700; color: #4b5563;
  border-bottom: 1px solid #f9fafb;
}
.mobile-menu a.active { color: #111827; }
.mobile-menu .btn-primary { text-align: center; margin-top: .75rem; color: #fff; }

@media (max-width: 900px) {
  .main-nav { display: none; }
  .mobile-toggle { display: inline-flex; }
  .header-container { height: 4.75rem; gap: 1rem; }
}
.mobile-menu.open { display: block; }

/* ---------- مقادیر عمومی بخش‌ها ---------- */
.section { padding: 4rem 0; position: relative; overflow: hidden; }
/* آخرین بخش اصلی قبل از فوتر: فاصله‌ی ایمن تضمین‌شده تا هیچ‌وقت به فوتر نچسبد */
body > main > .section:last-child,
body > main > section:last-child,
body > .section:last-of-type { padding-bottom: 6rem; }
.section-alt { background: rgba(248, 250, 252, 0.5); }
.section-title {
  font-size: clamp(1.875rem, calc(4vw * var(--fs)), 3rem);
  font-weight: 900; color: #111827; text-align: center;
  margin-bottom: 3rem;
}
.section-title-sm { font-size: clamp(1.5rem, calc(3vw * var(--fs)), 2rem); }

/* ---------- کارت سفید استاندارد ---------- */
.card-white {
  background: #fff; border-radius: 32px;
  box-shadow: 0 10px 30px -4px rgba(18, 43, 73, 0.07), 0 4px 10px -2px rgba(18, 43, 73, 0.03);
  border: 1px solid #f3f4f6;
}

/* ---------- Hero ---------- */
.hero {
  position: relative; background: #fff;
  padding-top: 2.5rem; padding-bottom: 0;
}
.hero-grid {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 3rem;
  padding-bottom: 3rem;
}
.hero-text { flex: 1 1 45%; text-align: right; }
.hero-text h1 {
  font-size: clamp(1.875rem, calc(4vw * var(--fs)), 3rem); font-weight: 900;
  color: #262626; line-height: 1.4; margin-bottom: 1.5rem;
}
.hero-text p {
  color: #374151; font-size: clamp(1.125rem, calc(2vw * var(--fs)), 1.25rem);
  font-weight: var(--fw-regular); line-height: 1.9; margin-bottom: 1.5rem;
}
/* تصویر هیرو: سمت چپ؛ پایینش روی نوار سرمه‌ای می‌نشیند و مچ دست دقیقاً روی لبه پایین نوار تمام می‌شود.
   margin منفی = padding پایین گرید + فاصله نوار + ارتفاع نوار */
.hero-illustration {
  flex: 1 1 45%; display: flex; justify-content: flex-end;  /* RTL: flex-end یعنی چپ */
  align-self: flex-end; position: relative; z-index: 2;
  margin-bottom: calc(-1 * (3rem + 1.5rem + var(--hero-banner-h)));
}
.hero-art { position: relative; width: 100%; max-width: 560px; aspect-ratio: 702 / 609; }
.hero-layer, .hero-layer img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* «نفس کشیدن» تصویر: دست خیلی آرام از مچ باز و بسته می‌شود (لبه پایین ثابت می‌ماند)،
   لپ‌تاپ و دو گروه سکه با سرعت و فاز متفاوت شناورند تا حرکت طبیعی و غیرهم‌زمان باشد */
.hero-hand     { transform-origin: 0 100%; animation: heroBreathe 6s ease-in-out infinite; }
.hero-laptop   { animation: heroFloat 5s ease-in-out infinite; }
.hero-coins-a  { animation: heroCoinsUp 4.2s ease-in-out infinite; }
.hero-coins-b  { animation: heroCoinsDown 4.8s ease-in-out -1.6s infinite; }
@keyframes heroBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-2.2%) rotate(-1.2deg); }
}
@keyframes heroCoinsUp {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.8%); }
}
@keyframes heroCoinsDown {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(1.4%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-layer { animation: none; }
}

.btn-gold {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-gold); color: #fff;
  font-weight: var(--fw-bold); font-size: 1.15rem;
  padding: .875rem 3rem; border-radius: 9999px; border: none;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1);
  transition: all .3s;
}
.btn-gold:hover {
  background: var(--brand-gold-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(217, 148, 32, 0.3);
}

.hero-banner {
  width: 100%; background: var(--brand-navy);
  height: var(--hero-banner-h); display: flex; align-items: center;
  margin-top: 1.5rem; position: relative; z-index: 1;
}
.hero-banner-inner { width: 100%; }
.hero-banner-inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.btn-course-banner {
  display: inline-flex; align-items: center; justify-content: center; gap: 1rem;
  background: #fff; color: #111827;
  padding: 1rem 3rem; border-radius: 9999px;
  font-size: 1.25rem; font-weight: 900;
  max-width: 100%;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1);
  transition: all .3s;
}
.btn-course-banner:hover { transform: translateY(-2px); box-shadow: 0 20px 25px -5px rgba(0,0,0,.1); }
.btn-course-banner .arrow { color: var(--brand-gold); transition: transform .2s; }
.btn-course-banner:hover .arrow { transform: translateX(-6px); }

/* ---------- کارت چه چیزی خلق کنم ---------- */
.about-card-inner { padding: 3rem; }
.about-heading { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.about-heading h2 { font-size: clamp(1.5rem, calc(3vw * var(--fs)), 2.25rem); font-weight: 900; color: #111827; }
.about-text {
  color: #374151; font-size: 1.125rem; line-height: 2.3;
  text-align: justify;
}

/* ---------- گرید کارت‌ها (دستاوردها/دوره‌ها) ---------- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
/* (ریسپانسیو گریدها در بخش انتهایی فایل مدیریت می‌شود) */

.feature-card {
  background: #fff; border-radius: 28px; padding: 2rem 1.75rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  height: 100%;                             /* هم‌قد شدن کارت‌های یک ردیف */
  transition: transform .3s, box-shadow .3s;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 20px 30px -10px rgba(18,43,73,.15); }
.feature-card .icon { width: 5rem; height: 5rem; margin-bottom: 1.25rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.feature-card .icon svg { width: 4rem; height: 4rem; color: var(--brand-light-blue); }
.feature-card h3 {
  font-weight: var(--fw-bold); font-size: 1.2rem; color: #111827;
  margin-bottom: 1rem; line-height: 1.7; min-height: 3.4rem;
  display: flex; align-items: center; justify-content: center;
}
.feature-card p {
  color: #4b5563; font-size: .9rem; font-weight: var(--fw-regular);
  line-height: 2; text-align: justify; flex-grow: 1; margin: 0;
}

/* ---------- کارت دوره ---------- */
.course-card {
  background: #fff; border-radius: 32px; padding: 2rem;


  border: 1px solid #eef1f5;
  box-shadow: 0 12px 28px -8px rgba(18, 43, 73, 0.12), 0 4px 10px -4px rgba(18, 43, 73, 0.06);
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  height: 100%;                             /* هم‌قد شدن کارت‌های یک ردیف */
  transition: box-shadow .3s;
}
.course-card:hover { box-shadow: 0 25px 35px -10px rgba(18,43,73,.15); }
.course-card .body,
.course-card > div:not([class]) { flex-grow: 1; width: 100%; }
.course-card-body { flex-grow: 1; width: 100%; display: flex; flex-direction: column; }
.course-card-body .thumb { margin-top: 0; }
.course-card h3 {
  font-weight: var(--fw-bold); font-size: 1.2rem; color: #111827;
  margin-bottom: 1rem; line-height: 1.7; min-height: 3.4rem;
  display: flex; align-items: center; justify-content: center;
}
.course-card .thumb { width: 7rem; height: 7rem; margin: .75rem auto; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.course-card .thumb svg { width: 100%; height: 100%; }
.course-card p {
  color: #374151; font-size: .9rem; font-weight: var(--fw-regular);
  line-height: 2; text-align: justify; margin: 1.25rem 0 0; flex-grow: 1;
}

.btn-course-gold,
.btn-course-gray,
.btn-course-soon {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: .8rem 1rem; border: none; border-radius: 9999px;
  font-weight: var(--fw-bold); font-size: 1rem; line-height: 1.4;
  text-align: center; margin-top: auto; cursor: pointer;
  transition: all .2s;
}
.btn-course-gold {
  background: var(--brand-gold); color: #fff;
}
.btn-course-gold:hover { background: var(--brand-gold-hover); box-shadow: 0 8px 20px rgba(217,148,32,.3); }
.btn-course-gray {
  background: #f3f4f6; color: #1f2937;
}
.btn-course-gray:hover { background: #e5e7eb; }

/* دکمه «به زودی» — عیناً مثل دکمه خاکستری، فقط غیرقابل کلیک */
.btn-course-soon {
  background: #f3f4f6; color: #1f2937;
  cursor: not-allowed; user-select: none;
}
.btn-course-soon:hover { background: #f3f4f6; }

/* ---------- درباره ی من ---------- */
.about-card-inner-pad { padding: 3rem; }
.about-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; align-items: center; }
@media (max-width: 768px) { .about-grid { grid-template-columns: 1fr; } }
.avatar-frame {
  width: 14rem; height: 14rem; border-radius: 9999px; background: var(--brand-navy);
  padding: .5rem; margin: 0 auto; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1);
}
.avatar-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 9999px; }
/* عکس مدرس خودش دایره‌ای با پس‌زمینه سرمه‌ای است؛ قاب و حاشیه اضافه لازم نیست (طبق طرح Canva) */
.avatar-frame:has(img) { padding: 0; background: transparent; }

/* ---------- سوالات متداول ---------- */
.faq-list { display: flex; flex-direction: column; gap: 1rem; max-width: 56rem; margin: 0 auto; }
.faq-item {
  background: #fff; border-radius: 1.5rem; border: 1px solid rgba(229,231,235,.8);
  box-shadow: 0 1px 2px rgba(0,0,0,.05); overflow: hidden;
  transition: box-shadow .3s;
}
.faq-item:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1); }
.faq-q {
  width: 100%; padding: 1.25rem 2rem; background: transparent; border: none;
  display: flex; align-items: center; justify-content: space-between;
  color: #1f2937; font-weight: 700; font-size: 1.125rem; text-align: right;
}
.faq-q .q-text { width: 100%; text-align: center; }
.faq-chevron { color: #9ca3af; transition: transform .3s; display: inline-flex; }
.faq-chevron svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-a {
  display: none; padding: .25rem 2rem 1.25rem; color: #4b5563;
  font-size: 1rem; line-height: 1.8; text-align: right;
  border-top: 1px solid #f3f4f6;
}
.faq-item.open .faq-a { display: block; }

/* ---------- CTA ---------- */
.cta-section { padding: 4rem 0 0; text-align: center; background: #fff; }
.cta-section h2 { font-size: clamp(1.875rem, calc(4vw * var(--fs)), 3rem); font-weight: 900; color: #111827; margin-bottom: 2.5rem; }
.btn-frame {
  display: inline-block; padding: .25rem;
  border: 1px solid rgba(165, 180, 252, .8); border-radius: 28px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05); margin-bottom: 4rem;
}

/* ---------- Footer ---------- */
.site-footer-main {
  width: 100%; background: var(--brand-navy); color: #fff;
  margin-top: auto; position: relative; overflow: hidden;
}
.site-footer-main::before {
  content: ''; position: absolute; top: 0; right: 0; left: 0; height: 4px;
  background: linear-gradient(90deg, var(--brand-gold), var(--brand-light-blue), var(--brand-gold));
}
.footer-top { padding: 3.5rem 0 2.5rem; }
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 2.5rem;
}
/* (ریسپانسیو فوتر در بخش انتهایی فایل مدیریت می‌شود) */

.footer-col { text-align: right; }
.footer-col-brand { max-width: 22rem; }

.footer-logo { display: inline-block; text-align: right; margin-bottom: 1rem; }
.footer-logo-img { height: 3rem; width: auto; max-width: 12rem; object-fit: contain; display: block; }
.footer-logo-1 { display: block; font-weight: var(--fw-black); font-size: 1.15rem; color: #fff; line-height: 1.2; }
.footer-logo-2 { display: block; font-weight: var(--fw-black); font-size: 1rem; color: var(--brand-gold); margin-top: .2rem; }

.footer-about {
  color: rgba(255,255,255,.7); font-size: .875rem; line-height: 2;
  text-align: justify; margin-bottom: 1.25rem;
}

.footer-social { display: flex; gap: .65rem; }
.footer-social a {
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.85);
  display: flex; align-items: center; justify-content: center;
  transition: all .25s; border: 1px solid rgba(255,255,255,.08);
}
.footer-social a:hover {
  background: var(--brand-gold); color: #fff; transform: translateY(-3px);
  border-color: var(--brand-gold);
}
.footer-social svg { width: 1.25rem; height: 1.25rem; }

.footer-title {
  color: #fff; font-weight: var(--fw-bold); font-size: 1.05rem; margin-bottom: 1.25rem;
  position: relative; padding-bottom: .75rem;
}
.footer-title::after {
  content: ''; position: absolute; bottom: 0; right: 0;
  width: 2.25rem; height: 3px; border-radius: 9999px; background: var(--brand-gold);
}

.footer-links { display: flex; flex-direction: column; gap: .7rem; }
.footer-links a {
  color: rgba(255,255,255,.72); font-size: .9rem; font-weight: var(--fw-regular);
  transition: all .2s; display: inline-block;
}
.footer-links a:hover { color: var(--brand-gold); transform: translateX(-5px); }

.footer-contact { display: flex; flex-direction: column; gap: 1rem; }
.footer-contact li { display: flex; align-items: center; gap: .6rem; color: rgba(255,255,255,.75); font-size: .9rem; }
.footer-contact a { color: rgba(255,255,255,.75); transition: color .2s; }
.footer-contact a:hover { color: var(--brand-gold); }
.footer-contact .fi {
  width: 2.1rem; height: 2.1rem; border-radius: 9999px; flex-shrink: 0;
  background: rgba(217,148,32,.15); color: var(--brand-gold);
  display: flex; align-items: center; justify-content: center;
}
.footer-contact .fi svg { width: 1.05rem; height: 1.05rem; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 1.5rem 0; background: rgba(0,0,0,.12);
}
.footer-bottom-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.footer-bottom p { color: rgba(255,255,255,.6); font-size: .82rem; text-align: center; }
.footer-bottom-links { display: flex; align-items: center; gap: .6rem; }
.footer-bottom-links a { color: rgba(255,255,255,.6); font-size: .82rem; transition: color .2s; }
.footer-bottom-links a:hover { color: var(--brand-gold); }
.footer-bottom-links span { color: rgba(255,255,255,.3); }
.footer-instagram {
  display: inline-flex; align-items: center; gap: .55rem; color: rgba(255,255,255,.85); font-size: .85rem; font-weight: 700;
  padding: .3rem .4rem .3rem .9rem; border-radius: 9999px; background: rgba(255,255,255,.08); transition: background .2s, color .2s;
}
.footer-instagram:hover { background: rgba(255,255,255,.16); color: #fff; }
.footer-instagram-logo {
  width: 2rem; height: 2rem; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.footer-instagram-logo svg { width: 1.2rem; height: 1.2rem; }
/* (ریسپانسیو نوار پایین فوتر در بخش انتهایی فایل مدیریت می‌شود) */

/* ---------- اشکال تزئینی شناور ---------- */
.deco { position: absolute; pointer-events: none; }
.deco svg { display: block; }

/* ---------- مودال ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; padding: 1rem;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: #fff; width: 100%; max-width: 32rem; border-radius: 32px;
  padding: 2rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
  position: relative; border: 1px solid #f3f4f6;
}
.modal-close {
  position: absolute; top: 1.5rem; left: 1.5rem; color: #9ca3af;
  background: #f3f4f6; border: none; border-radius: 9999px; padding: .5rem;
  transition: all .2s;
}
.modal-close:hover { color: #374151; background: #e5e7eb; }
.modal-close svg { width: 1.25rem; height: 1.25rem; display: block; }

.quiz-badge {
  display: inline-block; background: #fef3c7; color: #78350f;
  font-size: .75rem; font-weight: 700; padding: .25rem .75rem;
  border-radius: 9999px; margin-bottom: .75rem;
}
.quiz-option {
  width: 100%; text-align: right; padding: 1rem; border-radius: 1rem;
  border: 1px solid #e5e7eb; background: #fff; color: #1f2937; font-weight: var(--fw-regular);
  display: flex; align-items: center; justify-content: space-between;
  transition: all .2s; margin-bottom: .75rem;
}
.quiz-option:hover { border-color: var(--brand-gold); background: rgba(255,251,235,.5); }
.quiz-option .arrow { color: var(--brand-gold); font-weight: 700; }

.form-label { display: block; font-size: .75rem; font-weight: 700; color: #374151; margin-bottom: .375rem; }
.form-input {
  width: 100%; padding: .75rem 1rem; border-radius: 1rem;
  border: 1px solid #e5e7eb; font-size: .875rem; font-weight: var(--fw-regular);
  transition: border-color .2s;
}
.form-input:focus { outline: none; border-color: var(--brand-navy); }
.form-input.ltr { text-align: left; direction: ltr; }

.success-box { text-align: center; padding: 1.5rem 0; }
.success-icon {
  width: 3.5rem; height: 3.5rem; background: #d1fae5; color: #059669;
  border-radius: 9999px; display: flex; align-items: center; justify-content: center;
  margin: 0 auto .75rem;
}

/* ---------- پیام‌های جنگو ---------- */
.messages-list { max-width: 1400px; margin: 0 auto; padding: 1rem 1.5rem 0; }
.alert {
  padding: .875rem 1.25rem; border-radius: 1rem; margin-bottom: .75rem;
  font-size: .9rem; font-weight: var(--fw-bold); text-align: right;
}
.alert-success { background: #d1fae5; color: #065f46; }
.alert-error   { background: #fee2e2; color: #991b1b; }
.alert-info    { background: #dbeafe; color: #1e40af; }

/* ---------- فرم‌های ورود/ثبت نام ---------- */
.auth-wrap { max-width: 28rem; margin: 3rem auto; }
.auth-card { background: #fff; border-radius: 32px; padding: 2.5rem; box-shadow: 0 10px 30px -4px rgba(18,43,73,.07); border: 1px solid #f3f4f6; }
.auth-card h2 { font-size: 1.75rem; font-weight: 900; color: #111827; text-align: center; margin-bottom: 1.5rem; }
.auth-help { text-align: center; margin-top: 1.25rem; color: #6b7280; font-size: .9rem; }
.auth-help a { color: var(--brand-navy); font-weight: 700; }

/* ---------- صفحه محتوا (جزئیات) ---------- */
.page-hero {
  background: #fff; padding: 3.5rem 0; text-align: center;
  border-bottom: 1px solid #f3f4f6;
}
.page-hero h1 { font-size: clamp(1.75rem, calc(4vw * var(--fs)), 2.75rem); font-weight: 900; color: #111827; }
.page-hero .crumb { margin-top: .75rem; color: #6b7280; font-size: .9rem; }
.page-hero .crumb a { color: var(--brand-navy); font-weight: var(--fw-bold); }

.content-card {
  background: #fff; border-radius: 32px; padding: 2.5rem 3rem;
  border: 1px solid #f3f4f6; box-shadow: 0 10px 30px -4px rgba(18,43,73,.07);
  line-height: 2.1; color: #374151; font-size: 1.05rem; text-align: justify;
}
.content-card h2 { color: #111827; font-weight: var(--fw-bold); margin: 1.5rem 0 1rem; }

.post-meta { color: #9ca3af; font-size: .85rem; margin-top: .5rem; }

.empty-state { text-align: center; padding: 4rem 1rem; color: #9ca3af; }
.empty-state .icon { font-size: 3rem; margin-bottom: 1rem; }

/* =========================================================
   ریسپانسیو جامع — تطبیق روی همه نمایشگرها
   Breakpoints:
   - 1280px : لپ‌تاپ کوچک
   - 1024px : تبلت افقی
   - 768px  : تبلت عمودی
   - 480px  : موبایل
   - 360px  : موبایل کوچک
   ========================================================= */

/* اطمینان از عدم سرریز افقی روی همه دستگاه‌ها */
/* clip به‌جای hidden: سرریز افقی را مثل قبل پنهان می‌کند ولی position: sticky (هدر و سایدبار مقاله) را خراب نمی‌کند */
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}
img, svg, video { max-width: 100%; height: auto; }
.content-card, .about-text, .feature-card p, .course-card p { word-wrap: break-word; overflow-wrap: break-word; }

/* ---------- 1280px : لپ‌تاپ کوچک ---------- */
@media (max-width: 1280px) {
  .grid-4 { gap: 1.5rem; }
  .grid-3 { gap: 1.5rem; }
}

/* ---------- 1024px : تبلت افقی ---------- */
@media (max-width: 1024px) {
  .section { padding: 3.25rem 0; }
  .section-title { margin-bottom: 2.25rem; }
  .hero-grid { gap: 2rem; }
  .footer-top { padding: 3rem 0 2rem; }

  /* گرید ۴تایی → ۲ ستون | گرید ۳تایی → ۲ ستون */
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }

  /* فوتر: از ۴ ستون به ۲ ستون */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* ---------- 768px : تبلت عمودی و پایین‌تر ---------- */
@media (max-width: 768px) {
  .section { padding: 2.75rem 0; overflow: visible; }
  .section-title { margin-bottom: 1.75rem; }

  /* عناصر تزئینی شناور روی موبایل مزاحم‌اند → مخفی */
  .section > .deco { display: none; }

  /* کارت‌ها با فاصله امن از لبه (برای سایه و نفس‌کشیدن) */
  .grid-4, .grid-3 { padding: 0 .5rem; gap: 1.25rem; }

  /* Hero: تصویر بالای متن + وسط‌چین کامل */
  .hero-grid { flex-direction: column-reverse; gap: 1.5rem; padding-bottom: 2rem; text-align: center; }
  .hero-text { flex: 1 1 100%; }
  .hero-text h1 { margin-bottom: 1rem; }
  .hero-illustration { flex: 1 1 100%; width: 100%; margin-bottom: 0; justify-content: center; align-self: center; }
  .hero-art { max-width: 340px; }
  /* موبایل: نوار سرمه‌ای زیر تصویر نیست؛ لبه بریده مچ دست محو شود */
  .hero-hand {
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 22%);
            mask-image: linear-gradient(to top, transparent 0, #000 22%);
  }

  /* سکه‌های شناور را روی موبایل کم‌رنگ‌تر و جمع‌وجورتر */
  .deco { transform: scale(.85); }

  /* بنر دوره‌ها تمام‌عرض */
  .hero-banner { height: auto; padding: 1.75rem 0; margin-top: 1rem; }
  .btn-course-banner { padding: .85rem 1.75rem; font-size: 1.1rem; width: 100%; justify-content: center; }

    /* کارت‌ها: تک‌ستونی و تمام‌عرض با فاصله امن از لبه (برای سایه و نفس‌کشیدن) */
  .grid-4, .grid-3 {
    grid-template-columns: 1fr;
    max-width: 32rem;
    margin: 0 auto;
    align-items: start;    /* جلوگیری از کشیده‌شدن و روی‌هم‌افتادن کارت‌ها */
  }
  /* در حالت تک‌ستونی ارتفاع خودکار باشد تا محتوا باعث همپوشانی نشود */
  .grid-4 > .feature-card,
  .grid-3 > .feature-card,
  .grid-3 > .course-card { height: auto; }
  /* کاهش پدینگ کارت‌ها */
  .feature-card { padding: 1.75rem 1.5rem; }
  .course-card { padding: 1.75rem 1.5rem; }
  .about-card-inner, .about-card-inner-pad { padding: 1.75rem 1.25rem; }

  /* متن درباره من: تراز وسط روی موبایل */
  .about-text { text-align: center; line-height: 2.1; font-size: 1.05rem; }
  .about-grid { gap: 1.75rem; }

  /* آواتار کوچک‌تر */
  .avatar-frame { width: 10rem; height: 10rem; }

  /* FAQ: گوشه‌ها نرم‌تر تا متن درست بشینه */
  .faq-item { border-radius: 1.25rem; }
  .faq-q { padding: 1.1rem 1.25rem; font-size: 1rem; }
  .faq-q .q-text { text-align: right; }
  .faq-a { padding: .25rem 1.25rem 1.1rem; }

  /* CTA */
  .cta-section { padding: 3rem 0 0; }
  .btn-frame { margin-bottom: 3rem; }

  /* فوتر: وسط‌چین روی موبایل */
  .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer-col, .footer-col-brand { max-width: 100%; text-align: center; }
  .footer-logo { text-align: center; }
  .footer-social { justify-content: center; }
  .footer-about { text-align: center; }
  .footer-title { text-align: center; }
  .footer-title::after { right: 50%; transform: translateX(50%); }
  .footer-links { align-items: center; }
  .footer-links a:hover { transform: none; }
  .footer-contact li { justify-content: center; }
  .footer-news { max-width: 24rem; margin: 0 auto; }

  /* نوار پایین فوتر: ستونی */
  .footer-bottom-inner { flex-direction: column; text-align: center; }
  .footer-social { justify-content: center; }

  /* مودال: تمام‌عرض و ارتفاع امن */
  .modal-box { padding: 1.5rem; border-radius: 24px; }

  /* فرم ورود */
  .auth-card { padding: 1.75rem 1.25rem; }
  .auth-card h2 { font-size: 1.5rem; }
  .auth-wrap { margin: 2rem auto; padding: 0 .5rem; }

  /* صفحه محتوا */
  .page-hero { padding: 2.5rem 0; }
  .content-card { padding: 1.5rem; font-size: 1rem; }
}

/* ---------- 480px : موبایل ---------- */
@media (max-width: 480px) {
  :root { --container-pad: 16px; }
  .header-container { height: 4.5rem; }

  /* موبایل: فقط آیکون + نام اصلی */
  .brand-label { display: none; }
  .brand-icon { width: 2.4rem; height: 2.4rem; }
  .brand-name { font-size: 1rem; }

  /* هدر: دکمه ثبت نام کوچک‌تر بشه تا جا بشه */
  .btn-primary { padding: .6rem 1.25rem; font-size: .875rem; }
  .header-left { gap: .5rem; }

  .section { padding: 2.25rem 0; }

  /* Hero */
  .hero-text h1 { line-height: 1.5; }
  .btn-gold { padding: .8rem 2.25rem; font-size: 1.05rem; width: 100%; }

  /* دکمه بنر دوره */
  .btn-course-banner { font-size: 1rem; padding: .8rem 1.25rem; gap: .6rem; }

  /* فونت تیترها کمی کوچک‌تر */
  .section-title { font-size: clamp(1.5rem, 6vw * var(--fs), 1.9rem); }

  /* کارت‌ها */
  .feature-card, .course-card { padding: 1.5rem 1.25rem; }
  .feature-card h3, .course-card h3 { font-size: 1.1rem; min-height: auto; }
  .course-card .thumb { width: 5.5rem; height: 5.5rem; }

  /* آواتار */
  .avatar-frame { width: 8.5rem; height: 8.5rem; }

  /* آیکون دستاورد */
  .feature-card .icon { width: 4rem; height: 4rem; }
  .feature-card .icon svg { width: 3rem; height: 3rem; }

  /* مودال */
  .modal-box { padding: 1.25rem; }
  .modal-close { top: 1rem; left: 1rem; }
  .quiz-option { padding: .85rem; font-size: .9rem; }

  /* FAQ */
  .faq-q { font-size: .95rem; padding: 1rem; }

  /* فوتر */
  .footer-top { padding: 2.5rem 0 2rem; }
}

/* ---------- 360px : موبایل بسیار کوچک ---------- */
@media (max-width: 360px) {
  .header-container { gap: .5rem; }
  .brand-name { font-size: .9rem; }
  .brand-icon { width: 2.2rem; height: 2.2rem; }
  .site-brand { gap: 8px; }
  .btn-primary { padding: .55rem 1rem; font-size: .8rem; }
  .hero-text h1 { line-height: 1.5; }
  .btn-gold, .btn-course-banner { font-size: .95rem; }
}

/* ---------- دستگاه‌های لمسی: حذف هاور ناخواسته ---------- */
@media (hover: none) {
  .feature-card:hover { transform: none; }
  .btn-primary:hover, .btn-gold:hover, .btn-course-banner:hover { transform: none; }
  .footer-links a:hover { transform: none; }
}

/* ---------- چاپ ---------- */
@media print {
  .site-header, .site-footer-main, .modal-overlay, .deco, .hero-banner, .support-widget { display: none !important; }
  body { background: #fff; }
  .section { padding: 1rem 0; }
}

/* =========================================================
   کلاس‌های کمکی (جایگزین استایل‌های درون‌خطی قالب‌ها)
   آخر فایل آمده‌اند تا مثل استایل درون‌خطی قبلی، بر قوانین ریسپانسیو اولویت داشته باشند.
   ========================================================= */
[hidden] { display: none !important; }

.container-md { max-width: 64rem; }
.container-sm { max-width: 56rem; }

.img-contain { width: 100%; height: 100%; object-fit: contain; }
.img-cover   { width: 100%; height: 100%; object-fit: cover; border-radius: 1rem; }

/* ---------- دکمه‌ها و فرم‌ها ---------- */
.btn-block { width: 100%; margin-top: .5rem; padding: .875rem; }
.btn-gold.btn-block { font-size: 1rem; }
.btn-inline { display: inline-flex; width: auto; margin-top: 1.5rem; padding: .6rem 2rem; }
.btn-cta-lg { font-size: 1.25rem; padding: .875rem 3rem; }
.form-row { margin-bottom: 1rem; }
.field-error { color: #dc2626; font-size: .8rem; margin-top: .25rem; }

/* ---------- Hero ---------- */
.hero-dot { border-radius: 9999px; }
.hero-dot-1 { top: 3rem; left: 25%; width: .75rem; height: .75rem; background: #fde68a; opacity: .5; }
.hero-dot-2 { top: 7rem; right: 3rem; width: 1rem; height: 1rem; background: #bae6fd; opacity: .4; }
.hero-cta { padding-top: .5rem; }
.btn-course-banner .arrow svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
/* دکمه دوم نوار هیرو (ساخت ابزار برای من): هم‌اندازه، ولی شفاف با حاشیه سفید */
.hero-banner-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.btn-banner-alt { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.85); }
.btn-banner-alt:hover { background: #fff; color: #111827; }
@media (max-width: 768px) {  /* از همین عرض، ارتفاع نوار خودکار است */
  .hero-banner-actions { flex-direction: column; align-items: stretch; gap: .75rem; }
}


.deco-blob { width: 2.1rem; height: 2.1rem; background: center / contain no-repeat; animation: decoFloat 6s ease-in-out infinite; }
.deco-blob-1 { top: 2.5rem; right: 4rem; background-image: var(--shape-orange); rotate: -20deg; }
.deco-blob-2 { top: 4rem; left: 5rem; background-image: var(--shape-blue); animation-delay: -2s; }

/* ---------- درباره ---------- */
.about-heading-icon { display: inline-flex; flex-shrink: 0; }
/* لامپ طرح Canva: هم‌اندازه دو خط تیتر (فایل: static/img/idea.png) */
.about-heading-icon img { width: 5.5rem; height: 5.5rem; object-fit: contain; display: block; }
@media (max-width: 480px) {
  .about-heading-icon img { width: 4.25rem; height: 4.25rem; }
}
.about-star { text-align: center; margin-bottom: 1rem; }
.about-star svg { width: 1.5rem; height: 1.5rem; color: #fbbf24; }
.avatar-frame svg { width: 100%; height: 100%; }
.about-name { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 900; color: #111827; margin-bottom: 1rem; }
.about-name-tight { margin-bottom: .5rem; }
.teacher-title { margin-bottom: 1rem; }

/* ---------- وبلاگ و دوره ---------- */
.post-card { align-items: stretch; text-align: right; }
.post-card h3 { font-size: 1.25rem; }
.post-card-sm h3 { font-size: 1.1rem; }
.post-cover { width: 100%; height: 12rem; object-fit: cover; border-radius: 20px; margin-bottom: 1rem; }
.page-hero .post-meta { margin-top: .75rem; }
.content-cover { width: 100%; border-radius: 20px; margin-bottom: 1.5rem; }
.course-cover { width: 100%; border-radius: 32px; margin-bottom: 2rem; }
.content-card h2:first-child { margin-top: 0; }
.feature-list { padding-right: 1.5rem; line-height: 2.2; }
.content-actions { margin-top: 2rem; text-align: center; }
.section-title-spaced { margin-top: 3rem; }
.empty-state { grid-column: 1 / -1; }

/* ---------- مودال‌ها و آزمون ---------- */
.modal-title { font-size: 1.5rem; font-weight: 900; color: #111827; margin-bottom: .5rem; }
.modal-sub { color: #6b7280; font-size: .875rem; margin-bottom: 1.5rem; }
.success-title { font-size: 1.25rem; font-weight: 900; color: #111827; margin-bottom: .5rem; }
.success-text { color: #4b5563; font-size: .9rem; }
.quiz-result { text-align: center; padding: .75rem 0; }
.quiz-result-text { color: #4b5563; font-size: .9rem; line-height: 1.8; margin-bottom: 1.25rem; }
.quiz-suggest {
  text-align: right; background: rgba(255,251,235,.7); padding: 1.25rem;
  border-radius: 1rem; border: 1px solid #fde68a; margin-bottom: 1.5rem;
}
.quiz-suggest-title { font-weight: 700; color: #78350f; font-size: 1rem; }
.quiz-suggest p { color: #374151; font-size: .85rem; line-height: 1.8; margin-top: .5rem; }

/* آزمون «مسیر مناسب من» (static/js/quiz/) */
.quiz-box { max-width: 34rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.quiz-progress { margin: 0 0 1.25rem 3.25rem; }        /* جا برای دکمه بستن سمت چپ */
.quiz-progress-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; }
.quiz-progress-head .quiz-badge { margin-bottom: 0; }
.quiz-back { background: none; border: none; padding: .25rem 0; color: #6b7280; font-size: .8rem; font-weight: 700; cursor: pointer; }
.quiz-back:hover { color: var(--brand-navy); }
.quiz-bar { height: .4rem; background: #f3f4f6; border-radius: 9999px; overflow: hidden; }
.quiz-bar span { display: block; height: 100%; background: var(--brand-gold); border-radius: inherit; transition: width .35s ease; }
.quiz-question { font-size: 1.2rem; line-height: 1.9; margin-bottom: .5rem; outline: none; }
.quiz-options { margin-top: 1.25rem; }
.quiz-option { font-size: .92rem; line-height: 1.8; gap: .75rem; cursor: pointer; }
.quiz-option:focus-visible { outline: 2px solid var(--brand-navy); outline-offset: 2px; }
.quiz-option.is-selected { border-color: var(--brand-gold); background: #fffbeb; font-weight: 700; }
.quiz-option .arrow { flex-shrink: 0; }
.quiz-enter { animation: quiz-in .3s ease; }
@keyframes quiz-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.quiz-result-icon {
  width: 4rem; height: 4rem; margin: 0 auto 1rem; border-radius: 20px;
  background: #eef3f8; color: var(--brand-navy); display: flex; align-items: center; justify-content: center;
}
.quiz-result-icon svg { width: 2.2rem; height: 2.2rem; }
.quiz-kicker { color: var(--brand-gold); font-weight: 700; font-size: .85rem; margin-bottom: .35rem; }
.quiz-result-title { font-size: 1.25rem; line-height: 1.9; outline: none; }
.quiz-result .quiz-result-text { margin-top: .5rem; }
.quiz-result .quiz-suggest { text-align: center; }
.quiz-result .quiz-suggest p { margin: 0; font-weight: 700; color: #78350f; }
.quiz-cta { gap: .5rem; }
.quiz-alt { display: inline-block; margin-top: .9rem; color: var(--brand-navy); font-size: .85rem; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.quiz-alt:hover { color: var(--brand-gold); }
.quiz-note { color: #9ca3af; font-size: .75rem; line-height: 1.8; margin-top: 1.25rem; }
.quiz-restart { background: none; border: none; color: #6b7280; font-size: .8rem; margin-top: .35rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.quiz-restart:hover { color: var(--brand-navy); }
@media (prefers-reduced-motion: reduce) { .quiz-enter { animation: none; } .quiz-bar span { transition: none; } }

/* ---------- ورود / ثبت نام ---------- */
.section-auth { padding-top: 3rem; }
.auth-form { display: flex; flex-direction: column; gap: 1rem; }
.auth-card input[type="text"],
.auth-card input[type="password"] {
  width: 100%; padding: .75rem 1rem; border-radius: 1rem;
  border: 1px solid #e5e7eb; font-size: .875rem;
}
.auth-card input:focus { outline: none; border-color: #38597e; }
.auth-card .helptext { font-size: .75rem; color: #9ca3af; }

/* ---------- فوتر ---------- */
.footer-soon { color: rgba(255,255,255,.5); font-size: .9rem; }

/* =========================================================
   حساب کاربری، پنل و فروشگاه
   ========================================================= */
.link-btn {
  background: none; border: 0; padding: 0; font: inherit; font-size: .875rem;
  color: var(--brand-navy); font-weight: var(--fw-bold); cursor: pointer;
}
.link-btn:hover { color: var(--brand-gold); }
.link-btn:disabled { color: #9ca3af; cursor: default; }
.link-danger { color: #dc2626; }

.auth-note { color: #6b7280; font-size: .85rem; line-height: 1.9; text-align: center; margin-bottom: 1rem; }
.auth-note a, .auth-row-end a { color: var(--brand-navy); font-weight: var(--fw-bold); }
.auth-row-end { text-align: left; font-size: .8rem; }
.auth-form .auth-note { margin-bottom: 0; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.helptext, .helptext ul { font-size: .75rem; color: #9ca3af; margin-top: .25rem; line-height: 1.8; }
.resend-form { text-align: center; margin-top: 1rem; }

/* هدر: سبد خرید */
.cart-link {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: 9999px; color: #334155; transition: background .2s;
}
.cart-link:hover { background: #f3f4f6; }
.cart-link svg { width: 1.45rem; height: 1.45rem; }
.cart-badge {
  position: absolute; top: .1rem; left: .05rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem;
  border-radius: 9999px; background: var(--brand-gold); color: #fff;
  font-size: .7rem; font-weight: 700; line-height: 1.15rem; text-align: center;
}

/* صفحه دوره: خرید */
.buy-box { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.buy-price { font-size: 1.6rem; font-weight: 900; color: #111827; }
.buy-price small { font-size: .9rem; font-weight: 400; color: #6b7280; }
.buy-owned { color: #059669; font-weight: 700; }

/* پنل کاربری */
.panel-stack { display: flex; flex-direction: column; gap: 1.5rem; }
.license-row { padding: 1rem 0; border-bottom: 1px solid #f3f4f6; }
.license-row:last-of-type { border-bottom: 0; }
.license-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.license-course { font-weight: 700; color: #111827; }
.license-key { display: flex; align-items: center; gap: .75rem; margin-top: .75rem; }
.license-key code {
  flex: 1; min-width: 0; overflow-wrap: anywhere; background: #f8fafc; border: 1px dashed #cbd5e1;
  border-radius: .75rem; padding: .6rem .9rem; font-family: Consolas, monospace; font-size: .85rem; text-align: left;
}
.license-key .btn-copy { width: auto; margin-top: 0; padding: .55rem 1.25rem; font-size: .85rem; }
.license-note { color: #6b7280; font-size: .85rem; margin-top: .5rem; }
.license-help { color: #6b7280; font-size: .85rem; margin-top: 1rem; }
.license-help a { color: var(--brand-navy); font-weight: 700; }
.panel-logout { margin-top: 1.5rem; border-top: 1px solid #f3f4f6; }

.badge { display: inline-block; padding: .15rem .65rem; border-radius: 9999px; font-size: .72rem; font-weight: 700; }
.badge-issued, .badge-paid { background: #d1fae5; color: #065f46; }
.badge-pending { background: #fef3c7; color: #92400e; }
.badge-failed { background: #fee2e2; color: #991b1b; }
.badge-test { background: #e0e7ff; color: #3730a3; }

.table-wrap { overflow-x: auto; }
.simple-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.simple-table th, .simple-table td { padding: .7rem .5rem; border-bottom: 1px solid #f3f4f6; text-align: right; }
.simple-table th { color: #6b7280; font-weight: 700; }

/* سبد خرید */
.cart-row { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #f3f4f6; }
.cart-title { flex: 1; font-weight: 700; color: #111827; }
.cart-price { color: #374151; white-space: nowrap; }
.cart-total { display: flex; justify-content: space-between; align-items: center; padding-top: 1.25rem; font-size: 1.05rem; }
.cart-total strong { font-size: 1.3rem; color: #111827; }

/* نتیجه پرداخت */
.result-card { text-align: center; }
.result-list { text-align: right; margin: 1rem 0; padding-right: 1.25rem; line-height: 2.1; color: #374151; }
.fail-icon {
  width: 3.5rem; height: 3.5rem; margin: 0 auto .75rem; border-radius: 9999px;
  background: #fee2e2; color: #dc2626; font-size: 1.4rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}

@media (max-width: 480px) {
  .form-grid-2 { grid-template-columns: 1fr; }
  .cart-link { width: 2.3rem; height: 2.3rem; }
  .cart-row { flex-wrap: wrap; }
}

/* =========================================================
   متن پست وبلاگ (خروجی ویرایشگر پنل ادمین)
   وزن‌های فونت آینده: نازک ۳۰۰ · معمولی ۴۰۰ · ضخیم ۷۰۰ · خیلی ضخیم ۹۰۰
   ========================================================= */
.post-body { line-height: 2.2; color: #374151; font-size: 1.05rem; }
.post-body > * + * { margin-top: 1rem; }
.post-body h2, .post-body h3, .post-body h4 { color: #111827; font-weight: 900; line-height: 1.6; margin-top: 2rem; }
.post-body h2 { font-size: 1.6rem; }
.post-body h3 { font-size: 1.3rem; }
.post-body h4 { font-size: 1.1rem; font-weight: 700; }
.post-body b, .post-body strong { font-weight: 700; color: #111827; }
.post-body .text-thin { font-weight: 300; }
.post-body .text-heavy { font-weight: 900; color: #111827; }
.post-body a { color: var(--brand-navy); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.post-body ul, .post-body ol { padding-right: 1.5rem; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body blockquote {
  border-right: 4px solid var(--brand-gold); background: #fffbeb;
  padding: 1rem 1.25rem; border-radius: 1rem; color: #78350f;
}
.post-body img { max-width: 100%; height: auto; border-radius: 20px; display: block; margin: 1.5rem auto; }
.post-body img.note-float-left { float: left; margin: .5rem 0 1rem 1.5rem; max-width: 50%; }
.post-body img.note-float-right { float: right; margin: .5rem 1.5rem 1rem 0; max-width: 50%; }
.post-body::after { content: ''; display: block; clear: both; }
.post-body hr { border: 0; border-top: 1px solid #e5e7eb; margin: 2rem 0; }
.post-body table { width: 100%; border-collapse: collapse; }
.post-body td, .post-body th { border: 1px solid #e5e7eb; padding: .5rem .75rem; }
@media (max-width: 480px) {
  .post-body img.note-float-left, .post-body img.note-float-right { float: none; max-width: 100%; margin: 1rem auto; }
}

/* =========================================================
   صفحه جزئیات مقاله: محتوا + سایدبار
   ========================================================= */
.post-section { overflow: visible; }            /* overflow:hidden بخش‌ها sticky را از کار می‌اندازد */
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 780px) 300px;  /* RTL: ستون اول (راست) متن، ستون دوم (چپ) سایدبار */
  justify-content: space-between;  /* متن به لبه راست، سایدبار به لبه چپ کانتینر (هم‌راستا با هدر) */
  gap: 32px;
  align-items: start;
}
.post-main { min-width: 0; padding: 2.25rem 2.5rem; }
.post-body h2, .post-body h3 { scroll-margin-top: 100px; }

.post-sidebar {
  position: sticky; top: 90px;
  display: flex; flex-direction: column; gap: 1.25rem;
}

.side-card {
  background: #fff; border: 1px solid #eef1f5; border-radius: 24px;
  padding: 1.35rem 1.4rem; box-shadow: 0 10px 30px -12px rgba(18,43,73,.12);
}
.side-title { font-weight: 700; font-size: .95rem; color: #111827; }

/* فهرست مطالب */
.toc-card summary { list-style: none; cursor: default; margin-bottom: .85rem; }
.toc-card summary::-webkit-details-marker { display: none; }
.toc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .15rem; }
.toc-list a {
  display: block; padding: .45rem .75rem; border-radius: .75rem;
  border-right: 2px solid transparent;
  color: #4b5563; font-size: .88rem; line-height: 1.7; transition: all .2s;
}
.toc-list a:hover { background: #f8fafc; color: var(--brand-navy); }
.toc-list a.active { background: #fffbeb; border-right-color: var(--brand-gold); color: #111827; font-weight: 700; }
.toc-level-3 a { padding-right: 1.6rem; font-size: .82rem; }

/* کارت دوره */
.cta-card {
  background: linear-gradient(160deg, #fffbeb 0%, #fef3c7 100%);
  border-color: #fde68a; text-align: center;
}
.cta-eyebrow {
  display: inline-block; font-size: .72rem; font-weight: 700; color: #92400e;
  background: rgba(217,148,32,.14); border-radius: 9999px; padding: .2rem .75rem;
}
.cta-title { font-size: 1.15rem; font-weight: 900; color: #111827; margin: .75rem 0 .4rem; line-height: 1.6; }
.cta-text { font-size: .85rem; color: #57534e; line-height: 1.9; }
.cta-price { font-weight: 900; color: #111827; margin-top: .6rem; }
.cta-price small { font-weight: 400; color: #78716c; font-size: .8rem; }
.cta-btn { display: flex; width: 100%; justify-content: center; margin-top: 1rem; padding: .75rem 1rem; font-size: .95rem; }

/* کارت نویسنده */
.author-card { display: flex; align-items: center; gap: .9rem; transition: border-color .2s; }
.author-card:hover { border-color: #cbd5e1; }
.author-avatar {
  width: 3.5rem; height: 3.5rem; flex-shrink: 0; border-radius: 9999px; overflow: hidden;
  background: var(--brand-navy); box-shadow: 0 0 0 3px #fff, 0 0 0 4px #e5e7eb;
}
.author-avatar img, .author-avatar svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.author-info { display: flex; flex-direction: column; min-width: 0; }
.author-label { font-size: .72rem; color: #9ca3af; }
.author-name { font-size: .98rem; font-weight: 900; color: #111827; }
.author-bio { font-size: .78rem; color: #6b7280; line-height: 1.7; }

/* تبلت و موبایل: یک ستون؛ فهرست بالای متن (بسته)، بقیه کارت‌ها زیر متن */
@media (max-width: 1024px) {
  .post-layout { display: flex; flex-direction: column; gap: 1.25rem; }
  .post-sidebar { display: contents; }
  .toc-card { order: -1; }
  .toc-card summary { cursor: pointer; margin-bottom: 0; display: flex; justify-content: space-between; align-items: center; }
  .toc-card summary::after { content: '▾'; color: var(--brand-gold); transition: transform .2s; }
  .toc-card[open] summary { margin-bottom: .85rem; }
  .toc-card[open] summary::after { transform: rotate(180deg); }
  .post-main { padding: 1.5rem; }
}
/* سرتیترها justify نشوند؛ در موبایل خطوط کوتاه‌اند و justify فاصله‌های بزرگ بین کلمات می‌سازد */
.post-body h2, .post-body h3, .post-body h4, .post-body blockquote, .post-body li { text-align: right; }
@media (max-width: 480px) {
  .post-body { text-align: right; }
}


/* =========================================================
   شکل‌های تزئینی کنار تیترها (قطره آبی، نیم‌دایره نارنجی، ستاره)
   با ::before/::after به خود تیتر چسبیده‌اند تا در هر عرض صفحه کنار متن بمانند.
   هر بخش ترکیب خودش را دارد: پیش‌فرض، .shapes-2 (دوره‌ها)، .shapes-3 (سوالات)
   ========================================================= */
.section-title, .cta-section h2, .page-hero h1 {
  position: relative; display: table; margin-left: auto; margin-right: auto;
}
.section-title::before, .section-title::after,
.cta-section h2::before, .cta-section h2::after,
.page-hero h1::before, .page-hero h1::after {
  content: ''; position: absolute; pointer-events: none;
  width: 1.9rem; height: 1.9rem;
  background: center / contain no-repeat;
  animation: decoFloat 5.5s ease-in-out infinite;
}
.section-title::after, .cta-section h2::after, .page-hero h1::after { animation-duration: 6.5s; animation-delay: -2.5s; }

/* پیش‌فرض (چه چیزهایی بدست میارم؟ / مطالب مرتبط): ستاره چپ، نیم‌دایره نارنجی بالا راست */
.section-title::before { background-image: var(--shape-star); left: -3.4rem; top: .35em; rotate: 12deg; }
.section-title::after  { background-image: var(--shape-orange); right: -3.2rem; top: -1rem; rotate: -25deg; }

/* دوره‌ها: دو قطره آبی دو طرف */
.section-title.shapes-2::before { background-image: var(--shape-blue); left: -3.2rem; top: -.6rem; rotate: 0deg; }
.section-title.shapes-2::after  { background-image: var(--shape-blue); right: -3.2rem; top: .1rem; rotate: 0deg; transform: scaleX(-1); }

/* سوالات متداول: ستاره بالا راست، قطره آبی چپ */
.section-title.shapes-3::before { background-image: var(--shape-blue); left: -3rem; top: .3em; rotate: -10deg; }
.section-title.shapes-3::after  { background-image: var(--shape-star); right: -2.8rem; top: -1.2rem; rotate: 20deg; }

/* فراخوان پایین صفحه: قطره آبی چپ، ستاره بالا راست */
.cta-section h2::before { background-image: var(--shape-blue); left: -3.2rem; top: -.4rem; }
.cta-section h2::after  { background-image: var(--shape-star); right: -2.8rem; top: -1.3rem; rotate: -15deg; }

/* تیتر صفحات داخلی (وبلاگ، دوره‌ها، درباره، سبد خرید و ...): کوچک‌تر */
.page-hero h1::before, .page-hero h1::after { width: 1.5rem; height: 1.5rem; }
.page-hero h1::before { background-image: var(--shape-blue); left: -2.6rem; top: .25em; }
.page-hero h1::after  { background-image: var(--shape-star); right: -2.3rem; top: -.9rem; rotate: 15deg; }

@keyframes decoFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}
@media (prefers-reduced-motion: reduce) {
  .deco-blob, .section-title::before, .section-title::after, .cta-section h2::before, .cta-section h2::after,
  .page-hero h1::before, .page-hero h1::after { animation: none; }
}

/* موبایل: کوچک‌تر و نزدیک‌تر به متن تا از صفحه بیرون نزنند */
@media (max-width: 480px) {
  .section-title::before, .section-title::after,
  .cta-section h2::before, .cta-section h2::after,
  .page-hero h1::before, .page-hero h1::after { width: 1.3rem; height: 1.3rem; }
  .section-title::before, .cta-section h2::before, .page-hero h1::before { left: -1.7rem; }
  .section-title::after, .cta-section h2::after, .page-hero h1::after { right: -1.5rem; top: -1rem; }
}

/* =========================================================
   کتابخانه ابزارها (/tools) — روی همان کامپوننت‌های سایت:
   page-hero، course-card، thumb، btn-course-gold، badge، form-input، grid-3
   ========================================================= */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.page-hero-sub { max-width: 40rem; margin: .9rem auto 0; color: #4b5563; font-size: 1.05rem; line-height: 1.9; }

.tools-search { display: flex; gap: .75rem; max-width: 40rem; margin: 0 auto 1.5rem; }
.tools-search .form-input { flex: 1; min-width: 0; padding: .8rem 1.1rem; font-size: .95rem; }
.tools-search .btn-primary { flex-shrink: 0; padding: .75rem 1.75rem; }

.tools-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-bottom: 2.5rem; }
.filter-chip {
  padding: .45rem 1.15rem; border-radius: 9999px; border: 1px solid #e5e7eb; background: #fff;
  color: #4b5563; font-size: .9rem; font-weight: var(--fw-bold); transition: all .2s;
}
.filter-chip:hover { border-color: var(--brand-navy); color: var(--brand-navy); }
.filter-chip.active { background: var(--brand-navy); border-color: var(--brand-navy); color: #fff; }

.tools-result-note { text-align: center; color: #6b7280; font-size: .9rem; margin: -1.25rem 0 2rem; }
.tools-result-note a { color: var(--brand-navy); font-weight: 700; }

.tool-card { text-align: center; }
.tool-card .tool-thumb { width: 5.5rem; height: 5.5rem; margin: 0 auto 1rem; }
.tool-card h3 { min-height: 0; margin-bottom: .5rem; }
.tool-card h3 a { color: inherit; }
.tool-card h3 a:hover { color: var(--brand-navy); }
.tool-card p { text-align: center; margin: 1rem 0 1.5rem; }
.tool-meta { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.tool-category { font-size: .78rem; color: #6b7280; }
.tool-category::before { content: '·'; margin-left: .5rem; color: #cbd5e1; }
.badge-access-free { background: #d1fae5; color: #065f46; }
.badge-access-authenticated { background: #e0e7ff; color: #3730a3; }
.badge-access-subscription { background: #fef3c7; color: #92400e; }

/* صفحه هر ابزار */
.tool-detail-head { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; }
.tool-detail-head .tool-thumb { width: 5.5rem; height: 5.5rem; margin: 0; flex-shrink: 0; }
.tool-detail-head .tool-meta { justify-content: flex-start; margin-top: .5rem; }
.tool-detail-short { font-size: 1.1rem; font-weight: 700; color: #111827; line-height: 1.9; }
.tool-run { margin-top: 2rem; border-top: 1px solid #f3f4f6; padding-top: 1.5rem; }
.tool-soon {
  text-align: center; color: #6b7280; background: #f8fafc; border: 1px dashed #cbd5e1;
  border-radius: 1rem; padding: 1.25rem;
}
.tool-locked {
  text-align: center; background: linear-gradient(160deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fde68a; border-radius: 24px; padding: 1.75rem 1.5rem;
}
.tool-locked strong { display: block; font-size: 1.05rem; color: #111827; line-height: 1.9; }
.tool-locked-actions { margin-top: 1.1rem; }
.tool-locked-actions { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; }

@media (max-width: 480px) {
  .tools-search { flex-direction: column; }
  .tools-search .btn-primary { width: 100%; }
  /* فیلترها روی موبایل یک ردیف افقی قابل اسکرول */
  .tools-filters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: .5rem;
                   margin-left: calc(-1 * var(--container-pad)); margin-right: calc(-1 * var(--container-pad));
                   padding-left: var(--container-pad); padding-right: var(--container-pad); scrollbar-width: none; }
  .tools-filters::-webkit-scrollbar { display: none; }
  .filter-chip { flex-shrink: 0; }
  .tool-detail-head { flex-direction: column; text-align: center; }
  .tool-detail-head .tool-meta { justify-content: center; }
}

/* =========================================================
   ویجت پشتیبانی آنلاین (گوشه پایین سمت راست)
   ========================================================= */
.support-widget { position: fixed; right: 20px; bottom: 20px; z-index: 45; }  /* زیر مودال‌ها (۵۰) */
.support-toggle {
  position: relative;
  width: 3.9rem; height: 3.9rem; border-radius: 9999px; border: 0;
  background: var(--brand-navy); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 25px -6px rgba(40, 65, 93, .55); transition: transform .2s, background .2s;
}
.support-toggle:hover { transform: translateY(-2px); background: var(--brand-navy-dark); }
.support-toggle:focus-visible { outline: 3px solid var(--brand-gold); outline-offset: 3px; }
.support-toggle svg { width: 1.75rem; height: 1.75rem; }
.support-toggle .icon-close, .support-widget.is-open .support-toggle .icon-chat { display: none; }
.support-widget.is-open .support-toggle .icon-close { display: block; }

.support-badge {
  position: absolute; top: -2px; left: -2px; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem;
  border-radius: 9999px; background: var(--brand-gold); color: #fff; border: 2px solid #fff;
  font-size: .72rem; font-weight: 700; line-height: 1.1rem; text-align: center;
}
.support-panel {
  position: absolute; right: 0; bottom: calc(100% + 14px);
  width: 360px; height: min(540px, calc(100vh - 140px));
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 24px; border: 1px solid #eef1f5;
  box-shadow: 0 25px 50px -12px rgba(18, 43, 73, .35);
  transform-origin: bottom right; animation: supportIn .2s ease-out;
}
@keyframes supportIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

.support-head {
  display: flex; align-items: center; gap: .75rem; padding: 1rem 1.1rem;
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-dark) 100%); color: #fff;
}
.support-avatar {
  width: 2.6rem; height: 2.6rem; border-radius: 9999px; flex-shrink: 0;
  background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center;
}
.support-avatar svg { width: 1.4rem; height: 1.4rem; }
.support-title { flex: 1; display: flex; flex-direction: column; line-height: 1.5; }
.support-title strong { font-weight: 900; font-size: 1rem; }
.support-status { font-size: .75rem; opacity: .9; display: inline-flex; align-items: center; gap: .35rem; }
.support-status i { width: .5rem; height: .5rem; border-radius: 9999px; background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.25); }
.support-close { background: rgba(255,255,255,.12); border: 0; color: #fff; width: 2rem; height: 2rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; }
.support-close:hover { background: rgba(255,255,255,.22); }
.support-close svg { width: 1rem; height: 1rem; }

.support-messages { flex: 1; overflow-y: auto; padding: 1rem; background: #f8fafc; display: flex; flex-direction: column; gap: .6rem; }
.support-msg { max-width: 85%; padding: .6rem .85rem; border-radius: 16px; font-size: .88rem; line-height: 1.9; }
.support-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.support-msg-bot { align-self: flex-start; background: #fff; border: 1px solid #eef1f5; color: #374151; border-top-right-radius: 4px; }
.support-msg-agent { align-self: flex-start; background: #fffbeb; border: 1px solid #fde68a; color: #1f2937; border-top-right-radius: 4px; }
.support-msg-author { display: block; font-size: .7rem; font-weight: 700; color: #92400e; }
.support-msg-me { align-self: flex-end; background: var(--brand-navy); color: #fff; border-top-left-radius: 4px; }
.support-msg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .15rem; font-size: .68rem; opacity: .75; }
.support-state.ok { color: #86efac; font-weight: 700; }
.support-state.err { color: #fecaca; }
.support-retry { background: #fff; color: var(--brand-navy); border: 0; border-radius: 9999px; padding: .05rem .6rem; font-size: .68rem; font-weight: 700; }

.support-form { border-top: 1px solid #eef1f5; padding: .75rem; display: flex; flex-direction: column; gap: .5rem; background: #fff; }
.support-contact { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.support-contact[hidden] { display: none; }
.support-contact input, .support-compose textarea {
  width: 100%; border: 1px solid #e5e7eb; border-radius: 12px; padding: .55rem .75rem;
  font-size: .82rem; color: #111827; background: #fff; font-family: inherit;
}
.support-contact input:focus, .support-compose textarea:focus { outline: none; border-color: var(--brand-navy); }
.support-contact-error { margin: 0; font-size: .75rem; color: #dc2626; font-weight: 700; }
.support-contact-error[hidden] { display: none; }
.support-contact-summary { margin: 0; font-size: .75rem; color: #6b7280; }
.support-edit { background: none; border: 0; padding: 0; color: var(--brand-navy); font-weight: 700; font-size: .75rem; }
.support-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.support-compose { display: flex; align-items: flex-end; gap: .5rem; }
.support-compose textarea { resize: none; min-height: 2.6rem; max-height: 120px; line-height: 1.7; font-size: .88rem; }
.support-send {
  width: 2.6rem; height: 2.6rem; flex-shrink: 0; border: 0; border-radius: 12px;
  background: var(--brand-gold); color: #fff; display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.support-send:hover { background: var(--brand-gold-hover); }
.support-send svg { width: 1.2rem; height: 1.2rem; }

@media (max-width: 480px) {
  .support-widget { right: 14px; bottom: 14px; }
  .support-toggle { width: 3.4rem; height: 3.4rem; }
  .support-panel { position: fixed; right: 10px; left: 10px; bottom: 84px; width: auto; height: min(70vh, 540px); }
}
@media (prefers-reduced-motion: reduce) { .support-panel { animation: none; } }

/* =========================================================
   صفحه «ساخت ابزار» (/build-tool) — روی کامپوننت‌های موجود:
   page-hero، card-white، feature-card، course-card، content-card، form-input
   قوانین عمومی زیر .build-page محدود شده‌اند تا روی صفحات دیگر اثر نگذارند.
   ========================================================= */
/* ریتم عمودی یکسان + تفکیک واضح بخش‌های یک‌درمیان */
.build-page .section { padding: 3.5rem 0; }
.build-page .section-alt { background: #f3f6fa; border-top: 1px solid #e9eef4; border-bottom: 1px solid #e9eef4; }
.build-page .section-title { margin-bottom: 2.25rem; }
/* بلوک‌های تکی (مسئله، نمونه‌ها، اعتماد، فرم) همه یک عرض دارند */
.build-page .build-narrow { max-width: 58rem; margin-left: auto; margin-right: auto; }

/* هیرو: دو دکمه هم‌اندازه */
.build-hero-actions { display: flex; justify-content: center; align-items: stretch; gap: 1rem; flex-wrap: wrap; margin-top: 1.75rem; }
.build-hero-actions a { min-width: 15rem; padding: .85rem 2rem; font-size: 1.05rem; margin: 0; }
.build-hero-actions .build-secondary { background: #fff; color: var(--brand-navy); box-shadow: inset 0 0 0 2px var(--brand-navy); }
.build-hero-actions .build-secondary:hover { background: var(--brand-navy); color: #fff; box-shadow: 0 8px 20px rgba(56, 89, 126, .22); }

/* مسئله ← راه‌حل */
.build-problem { text-align: center; padding: 2.5rem; }
.build-problem h2 { font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 900; color: #111827; line-height: 1.7; margin: 0; }
.build-problem > p { color: #4b5563; margin: .75rem auto 1.5rem; max-width: 38rem; line-height: 2; }
.build-examples { list-style: none; padding: 0; margin: 0 auto 1.75rem; max-width: 44rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.build-examples li {
  display: flex; align-items: center; gap: .6rem; text-align: right;
  background: #f8fafc; border: 1px solid #e9eef4; border-radius: 16px; padding: .75rem 1rem;
  font-size: .88rem; line-height: 1.8; color: #374151;
}
.build-examples li::before { content: ""; flex: 0 0 .5rem; height: .5rem; border-radius: 9999px; background: var(--brand-gold); }

/* چه ابزارهایی: آیکن‌ها هم‌رنگ برند و هم‌اندازه */
.build-grid { gap: 1.5rem; }
.build-grid .feature-card { padding: 1.75rem 1.25rem; border: 1px solid #eef1f5; }
.build-grid .feature-card .build-icon { width: 4rem; height: 4rem; margin-bottom: 1rem; border-radius: 20px; background: #eef3f8; color: var(--brand-navy); }
.build-grid .feature-card .build-icon svg { width: 2.4rem; height: 2.4rem; color: var(--brand-navy); }
.build-grid .feature-card h3 { font-size: 1.02rem; min-height: 3.5rem; margin-bottom: .5rem; }
.build-grid .feature-card p { text-align: center; font-size: .86rem; line-height: 1.9; }

/* نمونه ابزارها */
.case-card { text-align: right; align-items: stretch; }
.case-card h3 a { color: inherit; }
.case-image { width: 100%; height: 11rem; object-fit: cover; border-radius: 20px; margin-bottom: 1rem; }
.case-facts { margin: 1rem 0 1.25rem; font-size: .85rem; line-height: 1.9; }
.case-facts dt { font-weight: 700; color: #111827; }
.case-facts dd { margin: 0 0 .5rem; color: #4b5563; }
.build-empty { text-align: center; padding: 2rem 2.5rem; color: #4b5563; line-height: 2; }
.build-empty p { margin: 0; }
.build-empty .btn-inline { margin-top: 1.25rem; }

/* مراحل: وسط‌چین مثل بقیه کارت‌ها، عنوان‌ها هم‌ارتفاع */
.build-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.build-steps li {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: #fff; border: 1px solid #eef1f5; border-radius: 24px; padding: 1.75rem 1.25rem;
}
.step-num {
  width: 2.75rem; height: 2.75rem; border-radius: 9999px; background: var(--brand-navy); color: #fff; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.1rem; margin-bottom: 1rem;
}
.build-steps h3 {
  font-size: 1rem; font-weight: 700; color: #111827; line-height: 1.8; margin: 0 0 .5rem;
  min-height: 3.6rem; display: flex; align-items: center; justify-content: center;
}
.build-steps p { font-size: .86rem; color: #4b5563; line-height: 1.9; margin: 0; }

/* مخاطبان */
.build-audience { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; }
.build-audience li {
  display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center;
  background: #fff; border: 1px solid #eef1f5; border-radius: 24px; padding: 1.5rem 1rem;
  color: var(--brand-navy); font-weight: 700; font-size: .92rem; line-height: 1.8;
}
.build-audience li span { color: #111827; }
.build-audience svg { width: 2.6rem; height: 2.6rem; flex-shrink: 0; }

/* اعتماد */
.build-trust { display: grid; grid-template-columns: auto 1fr; gap: 2.25rem; align-items: center; padding: 2.5rem; }
.build-avatar { width: 9rem; height: 9rem; }
.build-trust h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 900; color: #111827; line-height: 1.7; margin: 0; }
.build-trust-name { color: var(--brand-navy); font-weight: 700; font-size: .9rem; margin: .35rem 0 .75rem; }
.build-trust p { color: #4b5563; line-height: 2; }
.build-trust-points { margin: 1rem 0 0; padding-right: 1.25rem; color: #374151; font-size: .9rem; line-height: 2; }

/* فرم */
.build-form-card { text-align: right; padding: 2.5rem; }
.build-form-intro { color: #4b5563; margin: 0 0 1.5rem; text-align: right; }
.build-form-card .auth-form { gap: 1.15rem; }
.build-form-card .form-grid-2 { gap: 1.1rem; }
.build-form-card select.form-input { appearance: auto; }
.build-form-card textarea.form-input { resize: vertical; min-height: 8rem; line-height: 1.9; }
.build-form-card .helptext { font-size: .8rem; color: #6b7280; line-height: 1.9; margin-top: .4rem; }
.build-submit { width: 100%; justify-content: center; margin-top: .5rem; }
.hp-wrap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* انتخاب فایل فارسی (input اصلی مخفی ولی در دسترس صفحه‌خوان و کیبورد) */
.build-file { position: relative; }
.build-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.build-file-box {
  display: flex; align-items: center; gap: .9rem; cursor: pointer; margin-top: .35rem;
  border: 1.5px dashed #cbd5e1; border-radius: 14px; background: #f8fafc; padding: .6rem .7rem;
  transition: border-color .2s, background .2s;
}
.build-file-box:hover, .build-file-input:focus-visible + .build-file-box { border-color: var(--brand-navy); background: #fff; }
.build-file-btn { flex-shrink: 0; background: var(--brand-navy); color: #fff; font-weight: 700; font-size: .85rem; border-radius: 10px; padding: .5rem 1.1rem; }
.build-file-name { color: #6b7280; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.build-file-name.has-file { color: #111827; font-weight: 700; }

@media (max-width: 1024px) {
  .build-steps { grid-template-columns: repeat(2, 1fr); }
  .build-audience { grid-template-columns: repeat(3, 1fr); }
  .build-steps h3 { min-height: 0; }
}
@media (max-width: 640px) {
  .build-page .section { padding: 2.75rem 0; }
  .build-page .section-title { margin-bottom: 1.75rem; }
  .build-examples { grid-template-columns: 1fr; }
  .build-grid .feature-card h3 { min-height: 0; }
  .build-steps, .build-audience { grid-template-columns: 1fr; }
  .build-audience li { flex-direction: row; text-align: right; padding: 1rem 1.25rem; }
  .build-trust { grid-template-columns: 1fr; text-align: center; padding: 1.75rem 1.25rem; }
  .build-avatar { margin: 0 auto; }
  .build-trust-points { text-align: right; }
  .build-problem, .build-empty, .build-form-card { padding: 1.75rem 1.25rem; }
  .build-hero-actions a { width: 100%; min-width: 0; }
}

/* ================= صفحه «مشاوره خودکارسازی» (همان ظاهر صفحه قبلی ساخت ابزار + فرم چندمرحله‌ای) ================= */
.consult-subtitle { font-size: 1.1rem; font-weight: 900; color: #111827; margin: 1.75rem 0 1rem; }
.consult-benefits { margin-bottom: 0; }
.consult-session { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; padding: 2.5rem; }
.consult-session h2, .consult-cancel h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 900; color: #111827; margin: 0 0 1rem; }
.consult-points { margin: 0; padding-right: 1.25rem; color: #374151; line-height: 2.1; }
.consult-price {
  min-width: 16rem; text-align: center; background: #f8fafc; border: 1px solid #e9eef4; border-radius: 20px; padding: 1.5rem;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.consult-price-label { color: #6b7280; font-size: .85rem; }
.consult-price strong { font-size: 1.6rem; font-weight: 900; color: var(--brand-navy); }
.consult-price strong small { font-size: .85rem; font-weight: 700; }
.consult-price p { margin: 0 0 .5rem; color: #4b5563; font-size: .85rem; line-height: 1.9; }
.consult-price .btn-gold { margin: 0; }
.consult-cancel { padding: 2.25rem 2.5rem; }
.consult-closed { text-align: center; color: #4b5563; line-height: 2; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 16px; padding: 1.5rem; }

/* فرم چندمرحله‌ای (بی جاوااسکریپت همه مرحله‌ها با هم دیده می‌شوند) */
.consult-step { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.consult-step legend { font-weight: 900; color: var(--brand-navy); font-size: 1rem; margin-bottom: .25rem; padding: 0; }
.consult-step[hidden] { display: none; }
.consult-progress { display: none; list-style: none; padding: 0; margin: 0 0 .5rem; gap: .4rem; }
.js-steps .consult-progress { display: grid; grid-template-columns: repeat(6, 1fr); }
.consult-progress li { display: flex; flex-direction: column; align-items: center; gap: .3rem; font-size: .72rem; color: #9ca3af; text-align: center; line-height: 1.6; }
.consult-progress li span {
  width: 2rem; height: 2rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
  background: #eef1f5; color: #6b7280; font-weight: 900; font-size: .85rem;
}
.consult-progress li.is-active { color: var(--brand-navy); font-weight: 700; }
.consult-progress li.is-active span { background: var(--brand-navy); color: #fff; }
.consult-progress li.is-done span { background: var(--brand-gold); color: #fff; }
.consult-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: .25rem; }
/* «قبلی»، «بعدی» و «ثبت» هم‌اندازه: هر کدام نیمی از عرض (تنها یکی ← تمام عرض) */
.consult-nav > button { flex: 1 1 0; margin: 0; width: auto; min-height: 3rem; justify-content: center; font-size: 1rem; }
.consult-step .consult-nav { display: none; }
.js-steps .consult-step .consult-nav { display: flex; }
.consult-step:last-of-type .consult-nav { display: flex; }
.consult-prev { display: none; }
.js-steps .consult-prev { display: inline-flex; }
.consult-tasks { display: grid; grid-template-columns: 1fr 9rem; gap: 1rem; align-items: start; }
.consult-choice .consult-options { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .35rem; }
.consult-option { cursor: pointer; }
.consult-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.consult-option span {
  display: inline-block; border: 1.5px solid #cbd5e1; border-radius: 12px; padding: .55rem 1.2rem; font-size: .9rem; color: #374151;
  transition: border-color .2s, background .2s;
}
.consult-option input:checked + span { border-color: var(--brand-navy); background: var(--brand-navy); color: #fff; font-weight: 700; }
.consult-option input:focus-visible + span { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.consult-tehran-hint { margin: 0; }
.consult-tehran-hint.is-on { color: var(--brand-navy); font-weight: 700; }
.consult-pay { background: #f8fafc; border: 1px solid #e9eef4; border-radius: 16px; padding: 1.25rem 1.5rem; }
.consult-pay p { margin: 0 0 .75rem; color: #4b5563; line-height: 1.9; }
.consult-pay dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.25rem; margin: 0; }
.consult-pay dt { color: #6b7280; font-size: .85rem; }
.consult-pay dd { margin: 0; font-weight: 700; color: #111827; }
.consult-card { font-size: 1.15rem; letter-spacing: .08em; text-align: right; }
.consult-cancel-note { font-size: .82rem; color: #6b7280; line-height: 1.9; }
.consult-cancel-note ul { margin: .25rem 0 0; padding-right: 1.1rem; }

@media (max-width: 640px) {
  .consult-session { grid-template-columns: 1fr; padding: 1.75rem 1.25rem; }
  .consult-price { min-width: 0; }
  .consult-cancel { padding: 1.75rem 1.25rem; }
  .consult-tasks { grid-template-columns: 1fr 6.5rem; }
  .js-steps .consult-progress li { font-size: 0; gap: 0; }
}