/* ============================================================
   سیستم بصری سایت مارکتینگ نوکیو
   برگرفته از موکاپ طراح (NoQ24.dc.html) — مقادیر عیناً از همون‌جا
   استخراج شدن، نه از استایل قبلی سایت.

   موکاپ استایل‌ها رو inline داشت (خروجی ابزار طراحی). این‌جا به کلاس‌های
   معنادار تبدیل شدن، ولی سیستم ریسپانسیو خودِ موکاپ (اتریبیوت data-g)
   عیناً حفظ شده تا رفتار در اندازه‌های مختلف همون چیزی باشه که طراحی شده.
   ============================================================ */

/* ---------- فونت ---------- */
@font-face{font-family:'IRANSansX';src:url('/fonts/IRANSansX-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IRANSansX';src:url('/fonts/IRANSansX-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'IRANSansX';src:url('/fonts/IRANSansX-DemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'IRANSansX';src:url('/fonts/IRANSansX-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'IRANSansX';src:url('/fonts/IRANSansX-ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'IRANSansX';src:url('/fonts/IRANSansX-Black.woff2') format('woff2');font-weight:900;font-display:swap}

@font-face{font-family:'IRANSansXFaNum';src:url('/fonts/IRANSansXFaNum-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IRANSansXFaNum';src:url('/fonts/IRANSansXFaNum-DemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'IRANSansXFaNum';src:url('/fonts/IRANSansXFaNum-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'IRANSansXFaNum';src:url('/fonts/IRANSansXFaNum-ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap}

/* ---------- توکن‌ها ---------- */
:root{
  --ink:#0B1F3A;
  --ink-soft:#4B5560;
  --ink-mute:#7C878C;
  --canvas:#FBFCFC;
  --surface:#FFFFFF;
  --sunken:#F1F4F3;
  --hairline:#E2E6E7;
  --hairline-strong:#CBD2D2;
  --primary:#1B7FFF;
  --primary-hover:#0061dd;
  --primary-bg:#E6F1FF;
  --primary-text:#0061dd;
  --accent-ai:#00D4FF;
  --accent-ai-deep:#007F99;
  --accent-ai-bg:#E3FBFF;
  --success:#0F9D58;
  --success-bg:#E7F7EE;
  --danger:#C0392B;
  --ink-deep:#04101d;
  --ink-raised:#12315c;
  --ink-line:#0E284B;
  --on-dark-soft:#C1D2E4;
  --on-dark-mute:#9fa7b1;

  --shadow-card:rgba(11,31,58,.08) 0 4px 16px 0;
  --shadow-lift:rgba(11,31,58,.12) 0 12px 32px -4px;
  --shadow-deep:rgba(4,16,29,.20) 0 16px 40px -8px;
  --shadow-drawer:rgba(4,16,29,.24) 0 0 40px -4px;
}

/* ---------- پایه ---------- */
html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:'IRANSansX','Vazirmatn','Segoe UI',Tahoma,sans-serif;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-hover)}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit}
::selection{background:var(--primary-bg)}
img{max-width:100%}
/* اتریبیوت hidden باید بر هر display دیگه‌ای غالب باشه، وگرنه دراور
   روی دسکتاپ هم دیده می‌شه چون کلاسش display:flex داره. */
[hidden]{display:none!important}

/* عددهای فارسی در جاهایی که عدد، خودش محتواست (قیمت، آمار) */
.fanum{font-family:'IRANSansXFaNum','IRANSansX',sans-serif}

/* ---------- تایپوگرافی ---------- */
h1,.display{margin:0 0 24px;font-size:40px;font-weight:700;line-height:1.3}
h2{margin:0 0 16px;font-size:32px;font-weight:700;line-height:1.35}
h3{margin:0;font-size:20px;font-weight:600;line-height:1.4}
.lede{margin:0 0 48px;font-size:18px;font-weight:400;line-height:1.7;color:var(--ink-soft);max-width:640px}
.small{font-size:14px;line-height:1.7;color:var(--ink-soft)}
.caption{font-size:13px;line-height:1.6;color:var(--ink-mute)}

/* ---------- چیدمان ---------- */
.wrap{max-width:1200px;margin:0 auto;width:100%}
main>section{padding:96px 24px}
main>section.tight{padding:64px 24px}
.band-surface{background:var(--surface);border-block:1px solid var(--hairline)}
.band-sunken{background:var(--primary-bg);border-top:1px solid var(--hairline)}
.band-dark{background:linear-gradient(180deg,var(--ink),var(--ink-deep))}

/* گریدهای موکاپ — نام‌ها عیناً از data-g خود موکاپ */
[data-g]{display:grid}
/* نسبت عیناً موکاپ: ستون متن ۵۹۶px می‌شود که دقیقاً عرض لازم برای یک‌خطی
   ماندن تیتر است. فاصله گرفتن از ربات با چسباندن عکس به چپ حل شده، نه با
   باریک‌کردن این ستون. */
[data-g="hero"]{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:center}
[data-g="two"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
[data-g="three"]{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
[data-g="four"]{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
[data-g="five"]{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
[data-g="plans"]{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;align-items:stretch}
[data-g="footer"]{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:48px}

/* ---------- ناوبری ---------- */
.nav{position:sticky;top:0;z-index:40;height:64px;background:rgba(251,252,252,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--hairline)}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand-logo{height:34px;width:auto;display:block}
.brand-mark{width:30px;height:30px;border-radius:8px;background:var(--ink);display:flex;align-items:center;justify-content:center;color:var(--accent-ai);font-size:15px;font-weight:800}
.brand-name{font-size:19px;font-weight:800;color:var(--ink)}
.nav-links{display:flex;align-items:center;gap:4px;flex:1;font-size:14px}
.nav-links a{padding:8px 12px;border-radius:8px;font-weight:500;color:var(--ink-soft)}
.nav-links a:hover{background:var(--sunken);color:var(--ink)}
.nav-links a.on{font-weight:700;color:var(--ink);background:var(--sunken)}
.nav-right{display:flex;align-items:center;gap:8px;flex:none;margin-inline-start:auto}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;padding:0;border-radius:8px;border:1px solid var(--hairline);background:transparent;color:var(--ink)}

.drawer-scrim{position:fixed;inset:0;z-index:70;background:rgba(4,16,29,.5);display:flex;justify-content:flex-start}
.drawer{width:284px;max-width:84vw;height:100%;background:var(--surface);padding:16px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-drawer);animation:noqIn .18s ease both}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.drawer a:not(.btn){padding:14px 12px;border-radius:8px;font-size:16px;font-weight:500;color:var(--ink-soft)}
.drawer a.on:not(.btn){font-weight:700;color:var(--ink);background:var(--sunken)}
.drawer-close{width:40px;height:40px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:8px;border:1px solid var(--hairline);background:transparent;color:var(--ink-soft)}

/* ---------- دکمه‌ها ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:8px;font-size:15px;font-weight:700;line-height:1.3;border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover);color:#fff}
.btn-ghost{background:var(--surface);border-color:var(--hairline-strong);color:var(--ink)}
.btn-ghost:hover{background:var(--sunken);color:var(--ink)}
.btn-cyan{background:var(--accent-ai);color:var(--ink);padding:8px 16px}
.btn-sm{padding:8px 16px;font-size:15px}
.nav-cta{padding:12px 24px;border-radius:8px;background:var(--primary);color:#fff;font-size:15px;font-weight:700;line-height:1.3;border:none}
.nav-cta:hover{background:var(--primary-hover);color:#fff}

/* ---------- برچسب‌ها ---------- */
.pill{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:9999px;font-size:13px;font-weight:600;line-height:1.3}
.pill-ai{background:var(--accent-ai-bg);color:var(--accent-ai-deep)}
.pill-ai .dot{width:6px;height:6px;border-radius:9999px;background:var(--accent-ai)}
.pill-success{background:var(--success-bg);color:var(--success)}
.pill-primary{background:var(--primary-bg);color:var(--primary-text)}
.pill-dark{background:var(--ink-raised);color:#66e5ff}

/* ---------- کارت‌ها ---------- */
.card{padding:24px;border:1px solid var(--hairline);border-radius:16px;background:var(--surface)}
.card-pad-lg{padding:32px}
.card-shadow{box-shadow:var(--shadow-card)}

/* کارت مشکل — نقطه‌ی قرمز کنار متن */
.pain{display:flex;gap:16px;align-items:flex-start;padding:24px;border:1px solid var(--hairline);border-radius:16px;background:var(--surface)}
.pain .mark{flex:none;width:8px;height:8px;margin-top:12px;border-radius:9999px;background:var(--danger)}
.pain .t{font-size:16px;font-weight:500;line-height:1.75;margin:0 0 4px}
.pain .d{font-size:14px;line-height:1.7;color:var(--ink-mute);margin:0}

/* کارت قابلیت — نوار رنگی بالا، قابل انتخاب */
.cap{flex:1 1 auto;min-height:fit-content;display:flex;flex-direction:column;width:100%;text-align:start;padding:0;border:none;border-radius:12px;background:var(--surface);overflow:hidden;box-shadow:var(--shadow-card)}
.cap .rail{height:2px;background:var(--hairline)}
.cap.on .rail{background:var(--primary)}
.cap .body{flex:1;display:flex;gap:12px;align-items:flex-start;padding:20px 24px}
.cap .sq{flex:none;margin-top:10px;width:8px;height:8px;border-radius:2px;background:var(--hairline-strong)}
.cap.on .sq{background:var(--primary)}
.cap .t{font-size:20px;font-weight:600;line-height:1.4;margin:0 0 4px;color:var(--ink-soft)}
.cap.on .t{color:var(--ink)}
.cap .d{font-size:14px;line-height:1.7;color:var(--ink-mute);margin:0}

/* ---------- قیمت‌گذاری ---------- */
.plan{padding:32px;border-radius:16px;background:var(--surface);border:1px solid var(--hairline);display:flex;flex-direction:column;gap:16px}
.plan.featured{border-color:var(--primary);box-shadow:var(--shadow-lift)}
.plan-name{font-size:20px;font-weight:600;line-height:1.4}
.plan-for{font-size:13px;line-height:1.6;color:var(--ink-mute)}
.plan-price{font-family:'IRANSansXFaNum','IRANSansX',sans-serif;font-size:32px;font-weight:800;line-height:1.15}
.plan-unit{font-size:14px;color:var(--ink-mute);margin-inline-start:6px}
.plan-feats{display:flex;flex-direction:column;gap:8px;flex:1;margin:0;padding:0;list-style:none}
.plan-feats li{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.7;color:var(--ink-soft)}
.plan-feats li::before{content:"";flex:none;margin-top:9px;width:6px;height:6px;border-radius:9999px;background:var(--primary)}

.billing-row{margin:0 0 32px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.billing-toggle{display:flex;align-items:center;gap:8px;padding:4px;border-radius:12px;border:1px solid var(--hairline);background:var(--surface)}
.billing-toggle button{display:flex;align-items:center;gap:8px;padding:8px 16px;border:none;border-radius:8px;background:transparent;color:var(--ink-soft);font-size:15px;font-weight:500;line-height:1.3}
.billing-toggle button.active{background:var(--primary-bg);color:var(--primary-text);font-weight:700}
.billing-toggle .ring{flex:none;width:18px;height:18px;border-radius:9999px;border:2px solid var(--hairline-strong);display:flex;align-items:center;justify-content:center}
.billing-toggle button.active .ring{border-color:var(--primary)}
.billing-toggle .ring i{width:8px;height:8px;border-radius:9999px;background:transparent}
.billing-toggle button.active .ring i{background:var(--primary)}
.billing-save{font-size:14px;font-weight:600;line-height:1.7;color:var(--success)}

/* ---------- جدول مقایسه ---------- */
.cmp-wrap{border:1px solid var(--hairline);border-radius:16px;background:var(--surface);overflow:hidden}
[data-scrollx]{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{width:100%;border-collapse:collapse}
.cmp thead th{padding:12px 16px;text-align:start;background:var(--sunken);border-bottom:1px solid var(--hairline);font-size:13px;font-weight:600;line-height:1.3;color:var(--ink)}
.cmp thead th.hi{color:var(--primary-text)}
.cmp td,.cmp tbody th{padding:12px 16px;text-align:start;border-bottom:1px solid var(--hairline);font-size:14px;line-height:1.7}
.cmp tbody th{font-weight:500;color:var(--ink)}
.cmp tbody td{color:var(--ink-soft)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:none}
.cmp .yes{color:var(--success);font-weight:700}
.cmp .no{color:var(--ink-mute)}

/* ---------- سؤال‌های متداول ---------- */
.faq{max-width:820px;border:1px solid var(--hairline);border-radius:16px;background:var(--surface);overflow:hidden}
.faq-item{border-bottom:1px solid var(--hairline)}
.faq-item:last-child{border-bottom:none}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;background:none;border:none;text-align:start;font-size:16px;font-weight:500;line-height:1.75;color:var(--ink)}
.faq-q:hover{background:var(--canvas)}
.faq-sign{flex:none;width:24px;height:24px;border-radius:9999px;background:var(--sunken);color:var(--ink-soft);display:flex;align-items:center;justify-content:center;font-size:14px}
.faq-a{padding:0 24px 16px;font-size:14px;line-height:1.7;color:var(--ink-soft);max-width:660px;margin:0}

/* ---------- مرحله‌ها ---------- */
.step{padding-top:24px;border-top:2px solid var(--hairline)}
.step.on{border-top-color:var(--primary)}
.step .n{display:inline-flex;width:40px;height:40px;border-radius:9999px;background:var(--primary-bg);color:var(--primary-text);align-items:center;justify-content:center;font-size:20px;font-weight:600;margin-bottom:12px;font-family:'IRANSansXFaNum','IRANSansX',sans-serif}
.step .t{font-size:16px;font-weight:500;line-height:1.75;margin:0}
.step .d{font-size:13px;line-height:1.6;color:var(--ink-mute);margin:0}

/* ---------- نوار آمار تیره ---------- */
.stat .n{font-family:'IRANSansXFaNum','IRANSansX',sans-serif;font-size:40px;font-weight:800;line-height:1.15;color:var(--accent-ai)}
.stat .t{margin-top:8px;font-size:16px;line-height:1.75;color:#fff}
.stat .d{font-size:13px;line-height:1.6;color:var(--on-dark-mute)}
.band-dark h2{color:#fff}

/* ---------- بخش تیره‌ی جمع‌وجور (کارت درون صفحه) ---------- */
.dark-card{padding:24px;border-radius:16px;background:var(--ink)}
.dark-card .t{font-size:16px;font-weight:500;line-height:1.75;color:#fff;margin:0 0 8px}
.dark-card .d{font-size:14px;line-height:1.7;color:var(--on-dark-mute);margin:0 0 16px}

/* ---------- فرم ---------- */
.field{display:flex;flex-direction:column;gap:8px}
.field>span{font-size:13px;font-weight:600;line-height:1.3;color:var(--ink-soft)}
.field input,.field textarea{padding:10px 12px;border-radius:8px;border:1px solid var(--hairline-strong);background:var(--surface);color:var(--ink);font-size:16px;line-height:1.75;outline:none}
.field input:focus,.field textarea:focus{border-color:var(--primary)}
.field textarea{resize:vertical;min-height:6.5rem}
.chip{padding:8px 16px;border-radius:9999px;border:1px solid var(--hairline-strong);background:var(--surface);color:var(--ink-soft);font-size:14px;font-weight:600;line-height:1.3}
.chip[aria-pressed="true"]{border-color:var(--primary);background:var(--primary-bg);color:var(--primary-text)}
.chip.sq{border-radius:8px;font-family:'IRANSansXFaNum','IRANSansX',sans-serif}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- CTA پایانی ---------- */
.cta-center{max-width:720px;margin:0 auto;text-align:center}
.cta-center .lede{margin:0 0 32px;max-width:none}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- فوتر ---------- */
.site-footer{background:var(--surface);border-top:1px solid var(--hairline);padding:64px 24px 32px}
.site-footer .col-t{font-size:13px;font-weight:600;line-height:1.3;color:var(--ink);margin-bottom:12px}
.site-footer .col a{display:block;font-size:14px;line-height:1.7;color:var(--ink-mute);margin-bottom:8px}
.site-footer .col a:hover{color:var(--ink)}
.site-footer .tagline{margin:0;font-size:14px;line-height:1.7;color:var(--ink-mute);max-width:320px}
.footer-base{max-width:1200px;margin:32px auto 0;padding-top:24px;border-top:1px solid var(--hairline);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;line-height:1.6;color:var(--ink-mute)}

/* ---------- انیمیشن ---------- */
@keyframes noqIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes noqDot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:.9;transform:translateY(-2px)}}
@keyframes noqFlow{0%{background-position:8% 12%,0% 50%}50%{background-position:92% 78%,100% 50%}100%{background-position:8% 12%,0% 50%}}
@media (prefers-reduced-motion:reduce){[data-anim-bg]{animation:none!important}}

/* ============================================================
   ریسپانسیو — عیناً همون نقاط شکست موکاپ
   ============================================================ */
@media (max-width:1023px){
  [data-g="hero"],[data-g="two"]{grid-template-columns:minmax(0,1fr)!important;gap:32px!important}
  /* زیر این عرض، ارتفاع هیرو باید از محتوا بیاید (مثل موکاپ). با باقی‌ماندن
     aspect-ratio، ارتفاع به زور روی عرض/۱.۷۹ قفل می‌شد و متن از کادر بیرون
     می‌زد — همان چیزی که در موبایل خراب دیده می‌شد. */
  .hero-sec{aspect-ratio:auto!important;max-height:none!important;min-height:0!important}
  [data-g="plans"],[data-g="four"],[data-g="three"],[data-g="footer"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  [data-g="five"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  [data-caps]{min-height:0!important}
  [data-scrollx] [data-row]{min-width:760px}
}
@media (max-width:899px){
  .nav-links{display:none!important}
  .burger{display:flex!important}
  .hero-sec{height:auto!important;min-height:0!important;padding:64px 20px 48px!important}
}
@media (max-width:767px){
  main>section,.site-footer{padding-inline:20px!important}
  main>section{padding-block:56px!important}
  [data-g="plans"],[data-g="four"],[data-g="three"],[data-g="five"],[data-g="footer"]{grid-template-columns:minmax(0,1fr)!important}
  [data-g="five"]{gap:24px!important}
  h1,.display{font-size:32px!important;line-height:1.3!important}
  h2{font-size:26px!important;line-height:1.35!important}
  .lede{font-size:16px!important}
  .card,.plan{padding:20px!important}
  .hero-sec{padding:48px 20px 40px!important}
  .cta-row{flex-direction:column!important;align-items:stretch!important}
  .cta-row>a,.cta-row>button{width:100%;text-align:center;justify-content:center}
}
@media (max-width:479px){
  main>section{padding-block:44px!important}
  h1,.display{font-size:27px!important}
  h2{font-size:23px!important}
}

/* ---------- هیرو (بنر تمام‌عرض، متن روی تصویر) ---------- */
/* عکس بنر ۲۰۰۰×۱۱۱۵ است. با cover روی نمایشگر پهن، ارتفاع لازم از ظرف بیشتر
   می‌شود و بالای تصویر (سر ربات) بریده می‌شود. به‌جایش ارتفاع از نسبت خود
   عکس می‌آید تا هیچ‌وقت برشی رخ ندهد، و پس‌زمینه هم‌رنگ خود تصویر است تا
   لبه‌ها دیده نشوند. */
.hero-sec{
  padding:96px 24px 64px;
  background-color:var(--ink);
  background-image:url('/hero-banner-2.jpg');
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  /* بدون width صریح، ترکیب aspect-ratio با max-height باعث می‌شود مرورگر
     عرض را هم از نسبت حساب کند (۸۴۰×۱.۷۹=۱۵۰۶) و سکشن تمام‌عرض نماند؛
     نتیجه‌اش نوار سفیدِ کنار بنر بود. */
  width:100%;
  aspect-ratio:2000/1115;
  min-height:560px;
  max-height:800px;
  display:flex;
  align-items:center;
}
/* از این عرض به بالا، ظرف پهن‌تر از نسبت عکس می‌شود؛ برای اینکه چیزی بریده
   نشود عکس را کامل نگه می‌داریم و دو طرفش با همان سرمه‌ای پر می‌شود. */
/* از این عرض به بالا ظرف پهن‌تر از نسبت عکس می‌شود. به‌جای بریدن، عکس کامل
   نگه داشته می‌شود و به راست می‌چسبد (جایی که متن است)؛ فضای خالیِ سمت چپ با
   دقیقاً همان رنگی پر می‌شود که از لبه‌ی چپ خود عکس نمونه‌برداری شده
   (rgb(10,27,47))، تا درزی دیده نشود. */
@media (min-width:1024px){
  /* دو لایه از همان عکس: لایه‌ی زیر با cover کل عرض را پر می‌کند (فقط نقش
     پرکننده دارد)، لایه‌ی رو عکسِ کاملِ نبریده است که به چپ می‌چسبد.
     چسباندن به چپ عمدی است — ربات در نیمه‌ی چپ تصویر است؛ اگر عکس به راست
     بچسبد، با پهن‌تر شدن صفحه ربات به سمت ستون متن هل داده می‌شود و زیرش
     می‌افتد. چون هر دو لایه یک عکس‌اند، محل اتصال درز رنگی ندارد. */
  .hero-sec{
    background-image:url('/hero-banner-2.jpg'),url('/hero-banner-2.jpg');
    background-size:auto 100%,cover;
    background-position:left center,center center;
    background-repeat:no-repeat,no-repeat;
    max-height:840px;
  }
}

/* در این بازه عکس تقریباً هم‌عرض ظرف است، پس ربات دقیقاً تا وسط می‌آید و
   نوک انگشتش به لبه‌ی تیتر می‌رسد. یک جابه‌جایی کوچک به چپ کافی است؛ چیزی
   از ربات بریده نمی‌شود چون سمت چپ تصویر فضای خالی است و لایه‌ی پرکننده‌ی
   پشت، سمت راست را می‌پوشاند. */
@media (min-width:1024px) and (max-width:1499px){
  .hero-sec{background-position:-60px center,center center}
}

.hero-sec h1{color:#fff;margin:0 0 24px}
.hero-lede{margin:0 0 32px;font-size:18px;line-height:1.7;color:var(--on-dark-soft);max-width:520px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:899px){
  .hero-sec{background-image:url('/hero-mobile-2.jpg')}
}

/* ---------- بخش «چطور کار می‌کند»: کارت‌های قابلیت + دموی زنده ---------- */
.how-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
@media (max-width:1023px){.how-grid{grid-template-columns:minmax(0,1fr);gap:32px}}
.caps{display:flex;flex-direction:column;gap:12px;min-width:0}
.demo-panel{
  /* ارتفاع باید قطعی باشد، نه فقط حداقل: با min-height تنها، هر پیام جدید
     پنل را کش می‌آورد (۵۶۰ → ۲۶۲۴ پیکسل بعد از سه پیام) چون ستون فلکس برای
     جا دادن محتوا بزرگ می‌شود و chat-scroll هیچ‌وقت به اسکرول نمی‌رسد. */
  display:flex;flex-direction:column;height:560px;border-radius:24px;padding:8px;
  box-shadow:var(--shadow-deep);min-width:0;
  background:
    radial-gradient(90% 70% at 88% 0%, rgba(0,212,255,.30) 0%, rgba(0,212,255,0) 58%),
    linear-gradient(160deg,#04101d 0%,#0B1F3A 28%,#123A73 52%,#1B7FFF 80%,#D6E8FF 100%);
  background-size:180% 180%,210% 210%;
  animation:noqFlow 24s ease-in-out infinite;
}
.demo-head{display:flex;align-items:center;gap:10px;padding:12px 8px}
.demo-avatar{width:48px;height:48px;border-radius:9999px;background:var(--accent-ai);display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:24px;font-weight:800}
.demo-name{font-size:16px;font-weight:600;line-height:1.4;color:#fff}
.demo-status{font-size:11px;color:#8CFF96}
.demo-frame{flex:1;min-height:0;border-radius:16px;overflow:hidden;background:#F9F9F9;border:1px solid rgba(255,255,255,.65)}
.demo-frame iframe{width:100%;height:100%;min-height:440px;border:0;display:block}
@media (max-width:1023px){.demo-panel{height:520px}}
@media (max-width:767px){.demo-panel{height:540px;border-radius:20px}}

/* ---------- مطالعه‌ی موردی ---------- */
.case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:stretch;padding:32px;border:1px solid var(--hairline);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-card)}
@media (max-width:1023px){.case{grid-template-columns:minmax(0,1fr);gap:32px}}
.case-logo{border-radius:12px;background:linear-gradient(135deg,var(--primary-bg) 0%,#F5FAFF 100%);border:1px solid var(--hairline);display:flex;align-items:center;justify-content:center;min-height:200px;padding:24px}
.case-logo img{width:100%;max-width:360px;height:auto;border-radius:8px;background:#fff;padding:18px 22px;box-shadow:0 2px 14px rgba(11,31,58,.08)}

/* ---------- صفحه‌ی درباره‌ی ما ---------- */
.about-hero{background:var(--ink);padding:96px 24px 64px}
.about-hero .grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center}
@media (max-width:1023px){.about-hero .grid{grid-template-columns:minmax(0,1fr);gap:32px}}
.about-hero .tag{display:inline-block;padding:4px 10px;border-radius:9999px;background:var(--ink-raised);color:#66e5ff;font-size:13px;font-weight:600;line-height:1.3;margin-bottom:24px}
.about-hero h1{color:#fff}
.about-hero .lede{color:var(--on-dark-soft);max-width:560px;margin:0}
.about-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.about-stat{padding:20px;border-radius:12px;background:var(--ink-raised)}
.about-stat .n{font-family:'IRANSansXFaNum','IRANSansX',sans-serif;font-size:32px;font-weight:800;line-height:1.15;color:var(--accent-ai)}
.about-stat .t{margin-top:4px;font-size:14px;line-height:1.7;color:#fff}

.story-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:start}
@media (max-width:1023px){.story-grid{grid-template-columns:minmax(0,1fr);gap:32px}}
.story-grid p{font-size:16px;line-height:1.75;color:var(--ink-soft);margin:0 0 16px}

.principle{padding:24px;border:1px solid var(--hairline);border-radius:16px;background:var(--surface);display:flex;gap:16px;align-items:flex-start;margin-bottom:16px}
.principle .n{flex:none;width:40px;height:40px;border-radius:12px;background:var(--primary-bg);color:var(--primary-text);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;font-family:'IRANSansXFaNum','IRANSansX',sans-serif}
.principle .t{font-size:20px;font-weight:600;line-height:1.4;margin:0 0 4px}
.principle .d{font-size:14px;line-height:1.7;color:var(--ink-soft);margin:0}

.section-head{margin-bottom:48px}
.section-head h2{margin:0 0 16px}
.section-head p{margin:0;font-size:18px;line-height:1.7;color:var(--ink-soft);max-width:640px}

.milestones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@media (max-width:1023px){.milestones{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.milestones{grid-template-columns:minmax(0,1fr)}}
.milestone{padding-top:24px;border-top:2px solid var(--primary)}
.milestone .when{font-family:'IRANSansXFaNum','IRANSansX',sans-serif;font-size:13px;font-weight:600;line-height:1.3;color:var(--primary-text);margin:0 0 8px}
.milestone .t{font-size:16px;font-weight:500;line-height:1.75;margin:0 0 4px}
.milestone .d{font-size:13px;line-height:1.6;color:var(--ink-mute);margin:0}

.team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@media (max-width:1023px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479px){.team-grid{grid-template-columns:minmax(0,1fr)}}
.team-card{padding:24px;border:1px solid var(--hairline);border-radius:16px;background:var(--surface)}
.team-photo{border-radius:12px;background:repeating-linear-gradient(135deg,var(--sunken) 0 8px,var(--hairline) 8px 16px);aspect-ratio:1/1;margin-bottom:16px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.team-photo span{font-size:12px;color:var(--ink-mute);background:var(--surface);padding:6px 10px;border-radius:8px}
.team-card .nm{font-size:16px;font-weight:600;line-height:1.75;margin:0}
.team-card .rl{font-size:14px;line-height:1.7;color:var(--ink-mute);margin:0}

/* نوار CTA درون صفحه (نسخه‌ی روشن، مطابق موکاپ) */
.cta-band{background:var(--primary-bg);border-radius:16px;padding:48px 32px;text-align:center}
.cta-band h2{margin:0 0 16px}
.cta-band p{margin:0 auto 32px;font-size:18px;line-height:1.7;color:var(--ink-soft);max-width:52ch}

/* ---------- هیروی موبایل ----------
   در موبایل به‌جای بنر ربات، چیدمان مرکزی با نشان برند استفاده می‌شود:
   بنر افقی روی صفحه‌ی باریک یا ربات را می‌بُرد یا متن را روی تصویر شلوغ
   می‌انداخت. پس‌زمینه‌ی سرمه‌ای می‌ماند تا با هیروی دسکتاپ یکدست باشد. */
.hero-badge{display:none}

@media (max-width:1023px){
  .hero-sec{
    background-image:none!important;
    background-color:var(--ink)!important;
    text-align:center;
    padding:56px 20px 56px!important;
  }
  .hero-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:88px;
    height:88px;
    border-radius:9999px;
    background:rgba(255,255,255,.07);
    margin:0 auto 24px;
  }
  .hero-badge img{width:56px;height:56px;border-radius:18px;display:block}
  .hero-sec .pill{margin-inline:auto}
  .hero-sec h1{font-size:30px;line-height:1.4}
  .hero-lede{max-width:34rem;margin-inline:auto}
  /* دکمه‌ی اصلی در موبایل اول می‌آید — در طرح مرجع هم دکمه‌ی برجسته
     اولین چیزی است که دیده می‌شود. */
  .hero-actions{flex-direction:column;align-items:stretch;gap:12px}
  .hero-actions .btn{width:100%}
  .hero-actions .btn-primary{order:-1}
}

/* ---------- گفتگوی داخل پنل دمو ----------
   سه المان اختصاصی این بخش که جای دیگری در سایت نیست:
   بج «هوش مصنوعی پاسخ داد»، بج «پاسخ انسانی»، و چیپ منبع. */
.chat-scroll{flex:1;min-height:0;display:flex;flex-direction:column;gap:24px;overflow-y:auto;padding-inline-end:8px}
.chat-scroll{scrollbar-width:thin;scrollbar-color:var(--hairline-strong) transparent}
.chat-scroll::-webkit-scrollbar{width:4px}
.chat-scroll::-webkit-scrollbar-thumb{background:var(--hairline-strong);border-radius:9999px}

.msg{display:flex;gap:8px;align-items:flex-end;animation:noqIn .22s ease both}
.msg .av{flex:none;width:32px;height:32px;border-radius:9999px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.msg .col{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:78%}
.msg .bubble{padding:12px 16px;font-size:16px;line-height:1.75}
.msg .time{font-family:'IRANSansXFaNum','IRANSansX',sans-serif;font-size:13px;line-height:1.6;color:var(--ink-mute)}

/* پیام بازدیدکننده */
.msg.me{justify-content:flex-end}
.msg.me .av{background:var(--primary-bg);color:var(--primary-text);order:2}
.msg.me .col{align-items:flex-end}
.msg.me .bubble{background:var(--primary);color:#fff;border-radius:16px 16px 4px 16px}

/* پیام دستیار */
.msg.bot .av{background:var(--accent-ai);color:var(--ink)}
.msg.bot .col{align-items:flex-start}
.msg.bot .bubble{background:var(--surface);color:var(--ink);border:1px solid var(--hairline);border-radius:16px 16px 16px 4px}

/* پیام اپراتور انسانی */
.msg.human .av{background:var(--ink);color:#fff}
.msg.human .bubble{background:var(--sunken);color:var(--ink);border:1px solid var(--hairline);border-radius:16px 16px 16px 4px}

/* بج‌ها — نشان می‌دهند چه کسی جواب داده */
.badge{padding:4px 10px;border-radius:9999px;font-size:13px;font-weight:600;line-height:1.3;align-self:flex-start}
.badge-ai{background:var(--accent-ai-bg);color:var(--accent-ai-deep)}
.badge-human{background:var(--ink);color:#fff}

/* چیپ منبع — سندی که جواب از آن آمده */
.cite{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:8px;border:1px solid var(--hairline-strong);background:var(--surface);color:var(--ink-soft);font-size:13px;line-height:1.6;max-width:100%}
.cite .dot{flex:none;width:5px;height:5px;border-radius:9999px;background:var(--accent-ai)}
.cite span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* نشانگر «در حال تایپ» */
.typing{align-self:flex-start;display:flex;gap:4px;align-items:center;padding:12px 16px;border-radius:16px;background:var(--sunken);margin-inline-start:40px}
.typing i{width:6px;height:6px;border-radius:9999px;background:var(--ink-mute);animation:noqDot 1.4s infinite}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}

/* چیپ‌های پیشنهاد سؤال و کادر ورودی */
.ask-chips{display:flex;flex-wrap:wrap;gap:8px}
.ask-chip{padding:6px 12px;border-radius:9999px;border:1px solid var(--hairline-strong);background:var(--surface);color:var(--ink-soft);font-size:13px;line-height:1.6;cursor:pointer}
.ask-chip:hover{background:var(--sunken);color:var(--ink)}
.ask-form{display:flex;gap:8px;align-items:center;border-top:1px solid var(--hairline);padding-top:12px}
.ask-form input{flex:1;padding:10px 12px;border-radius:8px;border:1px solid var(--hairline-strong);background:var(--surface);color:var(--ink);font-size:16px;line-height:1.75;outline:none}
.ask-form input:focus{border-color:var(--primary)}
.ask-send{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:8px;border:none;background:var(--primary);color:#fff}
.ask-send:hover{background:var(--primary-hover)}
.ask-send:disabled{opacity:.5;cursor:not-allowed}
.powered{display:flex;align-items:center;justify-content:center;gap:6px;padding-top:4px;font-size:13px;line-height:1.6;color:var(--ink-mute)}
.powered a{font-weight:600;color:var(--ink-soft)}

/* بدنه‌ی سفید داخل پنل گرادیانی */
.chat-body{backdrop-filter:blur(20px) saturate(150%);border:1px solid rgba(255,255,255,.65);box-shadow:rgba(4,16,29,.14) 0 8px 28px -10px;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;background:#F9F9F9}

/* ---- بازنویسی‌های موبایلِ دمو ----
   این‌ها باید انتهای فایل بمانند: بلاک واکنش‌گرای بالای فایل بالاتر از تعریف
   .ask-chips است و با specificity برابر، قاعده‌ی بعدی برنده می‌شود. */
@media (max-width:767px){
  /* سه چیپ پیشنهاد روی عرض موبایل به سه سطر می‌شکستند و ۱۲۲ پیکسل از پنل ۵۴۰
     پیکسلی را می‌گرفتند. یک سطر افقیِ قابل‌اسکرول همان سه پیشنهاد را نگه
     می‌دارد و ارتفاع را به خودِ گفتگو برمی‌گرداند. */
  .ask-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .ask-chips::-webkit-scrollbar{display:none}
  .ask-chips>*{flex:0 0 auto}
}

/* ==== بلاگ ====================================================
   بلاگ قبلاً استایل‌شیت جدای خودش را داشت و برای همین نه هدر سایت را
   می‌گرفت نه فونت‌ها را. حالا از همین سیستم بصری استفاده می‌کند. */

.blog-lede{margin:0 0 32px;font-size:18px;line-height:1.7;color:var(--ink-soft);max-width:640px}
.blog-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:48px}
.blog-cat{padding:8px 16px;border-radius:9999px;border:1px solid var(--hairline-strong);background:var(--surface);color:var(--ink-soft);font-size:13px;font-weight:600;line-height:1.3}
.blog-cat.on{border-color:var(--primary);background:var(--primary-bg);color:var(--primary-text)}

/* کاور واقعی هنوز نداریم؛ به‌جای الگوی راه‌راهِ جای‌نگهدار، یک بلوک
   رنگیِ آرام می‌نشیند تا ناتمام به نظر نرسد. */
.post-cover{border-radius:8px;background:linear-gradient(135deg,var(--primary-bg) 0%,#F5FAFF 100%);border:1px solid var(--hairline);aspect-ratio:16/9;overflow:hidden}
.post-cover img{width:100%;height:100%;object-fit:cover;display:block}

.post-featured{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:32px;align-items:center;padding:32px;margin-bottom:48px;border-radius:16px;border:1px solid var(--hairline);background:var(--surface);box-shadow:var(--shadow-card);color:inherit}
.post-featured:hover{color:inherit}
.post-featured .post-cover{aspect-ratio:4/3;border-radius:12px}
.post-featured h2{margin:0 0 12px;font-size:32px;font-weight:700;line-height:1.35;color:var(--ink)}
.post-featured p{margin:0 0 16px;font-size:16px;line-height:1.75;color:var(--ink-soft)}
.post-featured-foot{display:flex;gap:16px;align-items:center;flex-wrap:wrap}

.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.post-card{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:16px;border:1px solid var(--hairline);background:var(--surface);color:inherit}
.post-card:hover{box-shadow:rgba(11,31,58,.08) 0 4px 16px 0;color:inherit}
.post-card h3{margin:0;font-size:20px;font-weight:600;line-height:1.4;color:var(--ink)}
.post-card p{margin:0;font-size:14px;line-height:1.7;color:var(--ink-soft);flex:1}
.post-tag{align-self:flex-start;padding:4px 10px;border-radius:9999px;background:var(--sunken);color:var(--ink-soft);font-size:13px;font-weight:600;line-height:1.3}
.post-meta{font-family:'IRANSansXFaNum','IRANSansX',sans-serif;font-size:13px;line-height:1.6;color:var(--ink-mute)}
.post-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--hairline)}
.post-more{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;line-height:1.3;color:var(--primary)}

/* ---- صفحه‌ی تک‌مقاله ---- */
.article-crumb{font-size:13px;line-height:1.6;color:var(--ink-mute);margin-bottom:24px}
.article-grid{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:48px;align-items:start}
.toc{position:sticky;top:96px;display:flex;flex-direction:column;gap:4px;padding:20px;border-radius:16px;border:1px solid var(--hairline);background:var(--surface)}
.toc-title{font-size:13px;font-weight:600;line-height:1.3;color:var(--ink-mute);margin-bottom:8px}
.toc a{padding:8px 12px;border-radius:8px;font-size:14px;line-height:1.7;color:var(--ink-soft)}
.toc a.on{color:var(--primary-text);background:var(--primary-bg)}
.toc-meta{margin-top:16px;padding-top:16px;border-top:1px solid var(--hairline);font-family:'IRANSansXFaNum','IRANSansX',sans-serif;font-size:13px;line-height:1.6;color:var(--ink-mute)}

.article{min-width:0}
.article-kicker{display:inline-block;padding:4px 10px;border-radius:9999px;background:var(--primary-bg);color:var(--primary-text);font-size:13px;font-weight:600;line-height:1.3;margin-bottom:16px}
.article h1{margin:0 0 16px;font-size:40px;font-weight:700;line-height:1.3;color:var(--ink)}
.article-lede{margin:0 0 32px;font-size:18px;line-height:1.7;color:var(--ink-soft)}
.article-hero{border-radius:12px;aspect-ratio:16/9;margin-bottom:48px}
.article-sec{margin-bottom:48px;scroll-margin-top:96px}
.article-sec h2{margin:0 0 16px;font-size:24px;font-weight:600;line-height:1.4;color:var(--ink);display:flex;align-items:center;gap:12px}
.article-sec .snum{flex:none;width:40px;height:40px;border-radius:9999px;background:var(--primary-bg);color:var(--primary-text);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600}
.article-sec p{margin:0 0 16px;font-size:16px;line-height:1.75;color:var(--ink-soft)}
.article-sec ul,.article-sec ol{margin:0 0 16px;padding-inline-start:24px;font-size:16px;line-height:1.75;color:var(--ink-soft)}
.article-sec li{margin-bottom:8px}

.ba{border:1px solid var(--hairline);border-radius:16px;background:var(--surface);overflow:hidden}
.ba-head,.ba-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ba-head{background:var(--sunken);border-bottom:1px solid var(--hairline);font-size:13px;font-weight:600;line-height:1.3;color:var(--ink-soft)}
.ba-head div{padding:12px 16px}
.ba-row{border-bottom:1px solid var(--hairline);font-size:14px;line-height:1.7}
.ba-row:last-child{border-bottom:none}
.ba-row .before{padding:12px 16px;color:var(--ink-mute)}
.ba-row .after{padding:12px 16px;color:var(--ink)}

.tip{padding:24px;border-radius:16px;background:var(--sunken);border:1px solid var(--hairline);margin-bottom:48px}
.tip p{margin:0;font-size:16px;line-height:1.75;color:var(--ink)}
.takeaways{padding:24px;border-radius:16px;border:1px solid var(--hairline);background:var(--surface);margin-bottom:48px}
.takeaways ol{margin:0;padding-inline-start:20px;font-size:16px;line-height:1.75;color:var(--ink-soft)}
.takeaways li{margin-bottom:8px}

@media (max-width:1023px){
  .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post-featured{grid-template-columns:minmax(0,1fr)}
  .article-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .toc{position:static}
}
@media (max-width:767px){
  .post-grid{grid-template-columns:minmax(0,1fr)}
  .article h1{font-size:30px}
  .post-featured h2{font-size:24px}
  .ba-head,.ba-row{grid-template-columns:minmax(0,1fr)}
  .ba-row .before{border-bottom:1px solid var(--hairline)}
}

/* ---- بدنه‌ی مقاله‌های موجود ----
   این مقاله‌ها از قبل همان سازه‌های طراحی را داشتند (سرتیتر شماره‌دار،
   جدول قبل/بعد، جعبه‌ی نکته و جمع‌بندی) ولی با کلاس‌های استایل‌شیت جدا.
   متنشان دست نمی‌خورد؛ فقط با همین سیستم بصری استایل می‌گیرند. */
.article-body{min-width:0;font-size:16px;line-height:1.75;color:var(--ink-soft)}
.article-body p{margin:0 0 16px}
.article-body .lede{font-size:18px;line-height:1.7;color:var(--ink-soft);margin-bottom:32px}
.article-body b{color:var(--ink);font-weight:700}
.article-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;padding:2px 6px;border-radius:6px;background:var(--sunken);color:var(--ink)}

.article-body .snum{display:flex;align-items:center;gap:12px;margin:48px 0 16px;scroll-margin-top:96px}
.article-body .snum:first-child{margin-top:0}
.article-body .snum .n{flex:none;width:40px;height:40px;border-radius:9999px;background:var(--primary-bg);color:var(--primary-text);display:flex;align-items:center;justify-content:center;font-family:'IRANSansXFaNum','IRANSansX',sans-serif;font-size:20px;font-weight:600}
.article-body .snum h2{margin:0;font-size:24px;font-weight:600;line-height:1.4;color:var(--ink)}
.article-body h2{margin:48px 0 16px;font-size:24px;font-weight:600;line-height:1.4;color:var(--ink);scroll-margin-top:96px}

.article-body ul.plain,.article-body ol.plain{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px}
.article-body ul.plain li,.article-body ol.plain li{display:flex;gap:12px;align-items:flex-start}
.article-body .dot{flex:none;margin-top:9px;width:6px;height:6px;border-radius:9999px;background:var(--primary)}
.article-body .num{flex:none;width:26px;height:26px;border-radius:9999px;background:var(--sunken);color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:'IRANSansXFaNum','IRANSansX',sans-serif;font-size:13px;font-weight:700}

.article-body .tbl-wrap{overflow-x:auto;border:1px solid var(--hairline);border-radius:16px;background:var(--surface);margin:0 0 24px}
.article-body table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.7}
.article-body th{padding:12px 16px;text-align:start;background:var(--sunken);border-bottom:1px solid var(--hairline);font-size:13px;font-weight:600;color:var(--ink-soft)}
.article-body td{padding:12px 16px;border-bottom:1px solid var(--hairline)}
.article-body tr:last-child td{border-bottom:none}
.article-body .before{color:var(--ink-mute)}
.article-body .after{color:var(--ink)}

.article-body .tip-box,.article-body .takeaway-box,.article-body .sources-box{padding:24px;border-radius:16px;border:1px solid var(--hairline);margin:0 0 32px}
.article-body .tip-box{background:var(--sunken)}
.article-body .takeaway-box,.article-body .sources-box{background:var(--surface)}
.article-body .mono-label{display:inline-block;padding:4px 10px;border-radius:9999px;background:var(--primary-bg);color:var(--primary-text);font-size:13px;font-weight:600;line-height:1.3;margin-bottom:12px}
.article-body .idx{color:var(--primary);font-weight:700}
.article-body .sources-box a{word-break:break-word}