:root{
  --brand:#DF301C;
  --brand-dark:#b8250f;
  --secondary:#FF9100;
  --soft:#FFF1D1;
  --info:#00B7CD;
  --ink:#450C3F;
  --muted:#6b6472;
  --line:#eee6e2;
  --radius:16px;
  --shadow-sm:0 2px 10px rgba(69,12,63,.06);
  --shadow:0 12px 40px rgba(69,12,63,.10);
}

@font-face {
    font-family: 'iransansdn';
    src: url('fonts/iransansdn.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

*{box-sizing:border-box}
html{overflow-x:hidden;width:100%}
body{
  font-family:'iransansdn', 'Vazirmatn',system-ui,sans-serif;
  color:var(--ink);
  background:#fff;
  font-size:15.5px;
  line-height:2;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100%;
}
/* جلوگیری از خروج عناصر رسانه‌ای/جدول از عرض صفحه در موبایل و تبلت */
img,svg,video,iframe,canvas{max-width:100%;height:auto}
table{max-width:100%}
pre,code{white-space:pre-wrap;word-break:break-word}
/* اینپوت‌های dir=ltr (مثل آدرس سایت) در RTL روی صفحات خیلی باریک سرریز نکنند */
input[style*="direction:ltr"],input[dir="ltr"]{min-width:0}
/* رفع نقص شناسایی‌شده (اسکرول افقی موبایل/تبلت): آیتم‌های Flex به‌طور
   پیش‌فرض کوچک‌تر از عرض محتوای خودشان نمی‌شوند (min-width:auto)؛ فرم
   دامنه در Hero یک input را داخل d-flex قرار می‌دهد که در برخی عرض‌های
   باریک، از عرض کانتینر بیرون می‌زند و باعث اسکرول افقی کل صفحه می‌شود.
   قانون قبلی فقط input[dir=ltr] را پوشش می‌داد، نه کلاس‌های واقعی
   استفاده‌شده مثل .domain-box .form-control. */
.d-flex>.form-control,.d-flex>input,.d-flex>textarea,.d-flex>select{min-width:0}
.container,.container-fluid,.row{max-width:100%}
h1,h2,h3,h4,h5{font-weight:800;line-height:1.7;letter-spacing:-.2px}
a{text-decoration:none;color:var(--brand)}
p{color:#524a59}
.text-muted-2{color:var(--muted)!important}
.container{max-width:1180px}
.section{padding:74px 0}
.section-soft{background:linear-gradient(180deg,#fffaf0,#fff)}
.eyebrow{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--soft);color:#8a4b12;border:1px solid #f5dfae;
  border-radius:999px;padding:.28rem .85rem;font-size:.8rem;font-weight:700;
}
.section-title{font-size:clamp(1.4rem,2.6vw,2.1rem);margin:.8rem 0 .5rem}
.section-sub{color:var(--muted);max-width:640px}
.btn{border-radius:12px;font-weight:700;padding:.62rem 1.25rem}
.btn-brand{background:var(--brand);color:#fff;border:1px solid var(--brand)}
.btn-brand:hover{background:var(--brand-dark);color:#fff;border-color:var(--brand-dark)}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn-ink{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.btn-ink:hover{background:#320829;color:#fff}
.btn-lg{padding:.85rem 1.6rem;font-size:1rem}

/* header */
.site-header{position:sticky;top:0;z-index:1030;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--secondary));display:grid;place-items:center;color:#fff;font-weight:800}
.navbar .nav-link{color:#54495c;font-weight:600;font-size:.93rem;padding:.4rem .7rem!important;border-radius:9px}
.navbar .nav-link:hover,.navbar .nav-link.active{color:var(--brand);background:#fdf1ef}

/* hero */
.hero{background:radial-gradient(900px 420px at 85% -10%,#ffe9c9 0,rgba(255,255,255,0) 60%),linear-gradient(180deg,#fffdf8,#fff);padding:70px 0 60px;border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(1.8rem,4vw,3rem);line-height:1.5}
.hero .lead{font-size:1.05rem;color:#5b5364;max-width:560px}
.domain-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.domain-box .form-control{border:none;box-shadow:none;font-size:.95rem;direction:ltr;text-align:left}
.domain-box .form-control:focus{box-shadow:none}
.trust-line{font-size:.83rem;color:var(--muted)}

/* mockups */
.mock{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.mock-head{display:flex;align-items:center;gap:.4rem;padding:.7rem 1rem;border-bottom:1px solid var(--line);background:#fcfaf9}
.dot{width:9px;height:9px;border-radius:50%;background:#e6dcd8}
.mock-body{padding:1.1rem}
.score-ring{
  width:118px;height:118px;border-radius:50%;
  background:conic-gradient(var(--brand) 0 78%,#f2ece9 78% 100%);
  display:grid;place-items:center;
}
.score-ring>span{width:88px;height:88px;border-radius:50%;background:#fff;display:grid;place-items:center;line-height:1.2;text-align:center;font-weight:800}
.metric{border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem;height:100%}
.metric .k{font-size:.78rem;color:var(--muted)}
.metric .v{font-weight:800;font-size:1.05rem}
.bar{height:7px;border-radius:99px;background:#f2ece9;overflow:hidden}
.bar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--secondary),var(--brand))}
.pill{font-size:.75rem;font-weight:700;border-radius:99px;padding:.15rem .6rem;display:inline-block}
.pill-crit{background:#fdeceb;color:#c0281a}
.pill-high{background:#fff2df;color:#a25c07}
.pill-ok{background:#e6f7f9;color:#00788a}

/* cards */
.card-soft{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem;height:100%;box-shadow:var(--shadow-sm);transition:.18s}
.card-soft:hover{transform:translateY(-3px);border-color:#f0d6cf;box-shadow:var(--shadow)}
.ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:1.15rem;background:var(--soft);color:#a3480f;margin-bottom:.6rem}
.ico-info{background:#e6f7f9;color:#00788a}
.ico-ink{background:#f4e9f3;color:var(--ink)}
.step-num{width:34px;height:34px;border-radius:10px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800}

/* chart */
.chart{display:flex;align-items:flex-end;gap:8px;height:130px}
.chart>i{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--secondary),var(--brand));opacity:.85}

table.mini{font-size:.88rem;margin:0}
table.mini th{color:var(--muted);font-weight:700;font-size:.8rem}
table.mini td{vertical-align:middle}

.accordion-button{font-weight:700;color:var(--ink)}
.accordion-button:not(.collapsed){background:#fff7ea;color:var(--brand);box-shadow:none}
.accordion-button:focus{box-shadow:none;border-color:var(--line)}
.accordion-item{border:1px solid var(--line);border-radius:14px!important;margin-bottom:.6rem;overflow:hidden}

.cta-band{background:linear-gradient(135deg,var(--ink),#6b1360);color:#fff;border-radius:24px;padding:44px}
.cta-band h2,.cta-band p{color:#fff}
.cta-band p{opacity:.85}

/* رفع نقص شناسایی‌شده (صفحه تماس با ما): کارت «پاسخ سریع می‌خواهید؟» با
   همان پس‌زمینه سفید بلافاصله قبل از فوتر قرار می‌گرفت و دکمه‌اش
   («ورود به پنل») تقریباً بدون فاصله به دکمه‌های خودِ فوتر («شروع
   تحلیل رایگان»/«ورود») می‌چسبید — چون هر دو یک نوع دکمه CTA مشابه
   هستند، این نبود فاصله و رنگ باعث حس «به‌هم‌ریختگی/ترکیب‌شدن» عناصر
   می‌شد. پس‌زمینه این کارت را متمایز کردیم تا مرز آن از فوتر مشخص باشد.
   */
footer.site-footer{background:#fffaf3;border-top:1px solid var(--line);padding:52px 0 26px;margin-top:48px}
.bg-quick-help{background:#f6f3fb;border:1px solid #e7e1f5}
footer .f-link{display:block;color:#5b5364;font-size:.92rem;padding:.18rem 0}
footer .f-link:hover{color:var(--brand)}

.badge-cat{background:var(--soft);color:#8a4b12;font-weight:700;border-radius:99px;padding:.2rem .7rem;font-size:.75rem}
.post-thumb{height:150px;border-radius:14px;background:linear-gradient(135deg,#ffe4c4,#ffd0c7)}
.post-thumb.b{background:linear-gradient(135deg,#d7f3f7,#ffe9c9)}
.post-thumb.c{background:linear-gradient(135deg,#f4e0f2,#ffd9c9)}
.toc a{display:block;color:#5b5364;font-size:.9rem;padding:.2rem 0}
.toc a:hover{color:var(--brand)}
.article-body h2{font-size:1.3rem;margin:1.8rem 0 .6rem}
.article-body h3{font-size:1.08rem;margin:1.3rem 0 .5rem}
@media (max-width:767px){.section{padding:52px 0}.cta-band{padding:28px}}

/* ------------------------------------------------------------------
   بهبود ریسپانسیو موبایل/تبلت (قبلاً فقط یک @media در کل فایل بود)
   ------------------------------------------------------------------ */
@media (max-width:991px){
  .container{padding-left:16px;padding-right:16px}
  .section{padding:56px 0}
  h1{font-size:1.9rem}
  .mock{transform:none!important}
}

@media (max-width:767px){
  body{font-size:14.5px}
  h1{font-size:1.6rem}
  .btn-lg{padding:.7rem 1.1rem;font-size:.92rem}
  .navbar .nav-link{padding:.55rem .3rem!important}
  .domain-box .d-flex{gap:.5rem}
  .score-ring{width:96px!important;height:96px!important}
  table.small,.table-responsive table{font-size:.82rem}
}

@media (max-width:479px){
  .container{padding-left:12px;padding-right:12px}
  h1{font-size:1.35rem}
  .eyebrow{font-size:.72rem;padding:.22rem .65rem}
  .btn-lg{width:100%}
  .d-flex.flex-wrap.gap-2.mt-3 > .btn{flex:1 1 100%}
}