/* ==========================================================================
   یاران کلاود — بلوک‌های تازه
   هرچه بعد از بازطراحی هیرو اضافه شده اینجاست تا main.css شلوغ نشود.
   ========================================================================== */

/* ==========================================================================
   ۱. هیرو
   ========================================================================== */

.hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient(180deg, #FCFEFD 0%, var(--bg-soft) 100%);
	padding-block: var(--sp-8) var(--sp-9);
}

/* شبکهٔ نقطه‌چین — بافت خیلی ملایم، نه پس‌زمینهٔ شلوغ */
.hero::before {
	content: "";
	position: absolute; inset: 0; z-index: -2;
	background-image: radial-gradient(circle at 1px 1px, rgba(11, 37, 64, .07) 1px, transparent 0);
	background-size: 28px 28px;
	mask-image: radial-gradient(120% 90% at 78% 8%, #000 25%, transparent 72%);
	-webkit-mask-image: radial-gradient(120% 90% at 78% 8%, #000 25%, transparent 72%);
}

/* هالهٔ رنگی — عمق می‌دهد بدون اینکه تصویری اضافه شود */
.hero::after {
	content: "";
	position: absolute; z-index: -1;
	inset-block-start: -28%; inset-inline-end: -12%;
	width: 62rem; height: 62rem; border-radius: 50%;
	background:
		radial-gradient(circle at 35% 35%, rgba(13, 148, 136, .20), transparent 58%),
		radial-gradient(circle at 70% 60%, rgba(30, 74, 112, .14), transparent 60%);
	filter: blur(8px);
	pointer-events: none;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.02fr .98fr;
	gap: var(--sp-7);
	align-items: center;
}

/* تیتر باید بزرگ‌ترین چیز صفحه باشد — درس اصلی از ایران‌سرور و لیموهاست */
.hero h1 {
	font-size: clamp(2.2rem, 1.5rem + 3vw, 3.9rem);
	max-width: 18ch;
}

/* تصویرسازی ایزومتریک */
.hero-art { display: grid; place-items: center; }
.hero-art svg { width: 100%; max-width: 520px; height: auto; }

/* نوار جستجوی دامنه، زیر هر دو ستون */
.hero-searchrow {
	margin-top: var(--sp-7);
	display: flex;
	justify-content: center;
}
.hero-searchrow .domain-search { margin-top: 0; max-width: 40rem; width: 100%; }
.hero-searchrow .tld-list { justify-content: center; }

/* برچسب بالای تیتر، با نقطهٔ نبض‌دار */
.hero .eyebrow { background: rgba(255, 255, 255, .75); backdrop-filter: blur(6px); }
.pulse {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--ok); flex-shrink: 0;
	box-shadow: 0 0 0 0 rgba(22, 163, 74, .55);
	animation: yaran-pulse 2.4s var(--ease) infinite;
}
@keyframes yaran-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); }
	70%  { box-shadow: 0 0 0 9px rgba(22, 163, 74, 0); }
	100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

/* ---------- جستجوی دامنه ---------- */
.domain-search { margin-top: var(--sp-6); max-width: 34rem; }

.domain-form {
	display: flex; align-items: center; gap: var(--sp-3);
	background: #fff; border: 1.5px solid var(--border-strong);
	border-radius: var(--r-pill);
	/* منطقی، نه فیزیکی — وگرنه در راست‌به‌چپ فاصله‌ها جابه‌جا می‌شوند */
	padding: 6px;
	padding-inline-start: var(--sp-5);
	box-shadow: var(--shadow-md);
	transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.domain-form:focus-within {
	border-color: var(--brand-500);
	box-shadow: 0 0 0 4px var(--brand-50), var(--shadow-md);
}
.domain-form .icon { color: var(--grey-400); flex-shrink: 0; display: grid; }
.domain-form input {
	flex: 1; min-width: 0; border: 0; outline: 0; background: none;
	font: inherit; font-size: var(--fs-base); color: var(--text);
	padding-block: 10px;
}
.domain-form input::placeholder { color: var(--grey-400); }
.domain-form .btn { flex-shrink: 0; }

.tld-list {
	display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
	margin-top: var(--sp-4); padding: 0; list-style: none;
	font-size: var(--fs-sm); color: var(--text-soft);
}
.tld-list li { display: inline-flex; align-items: baseline; gap: 6px; }
.tld-list b {
	font-family: var(--font-display); font-weight: 700;
	color: var(--ink-800); direction: ltr;
}
.tld-list span { font-variant-numeric: tabular-nums; }

/* ---------- سطر تضمین‌ها ---------- */
.assure {
	display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
	margin-top: var(--sp-6); padding: 0; list-style: none;
	font-size: var(--fs-sm); color: var(--grey-600);
}
.assure li { display: inline-flex; align-items: center; gap: 7px; }
.assure svg { width: 17px; height: 17px; color: var(--brand-600); flex-shrink: 0; }

/* ---------- پنل داشبورد (تصویر هیرو) ---------- */
.panel {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
	transform: perspective(1400px) rotateY(2.2deg) rotateX(1.2deg);
	transition: transform .5s var(--ease);
}
.panel:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }

.panel-head {
	display: flex; align-items: center; gap: var(--sp-3);
	padding: 13px var(--sp-5);
	background: var(--bg-soft); border-bottom: 1px solid var(--border);
}
.panel-dots { display: flex; gap: 6px; }
.panel-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--grey-300); }
.panel-dots i:nth-child(1) { background: #FF5F57; }
.panel-dots i:nth-child(2) { background: #FEBC2E; }
.panel-dots i:nth-child(3) { background: #28C840; }
.panel-title {
	font-size: var(--fs-xs); color: var(--text-soft);
	margin-inline-start: auto; direction: ltr; font-family: var(--font-mono);
}

.panel-body { padding: var(--sp-5); }

/* نمودار کوچک */
.panel-chart { margin-bottom: var(--sp-5); }
.panel-chart-head {
	display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-3);
}
.panel-chart-head .k { font-size: var(--fs-xs); color: var(--text-soft); }
.panel-chart-head .v {
	font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg);
	color: var(--ink-800); margin-inline-start: auto; font-variant-numeric: tabular-nums;
}
.panel-chart svg { width: 100%; height: 72px; display: block; }
.spark-line { fill: none; stroke: var(--brand-500); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.spark-area { fill: url(#sparkFill); }

.panel-rows { display: grid; gap: 9px; }
.panel-row {
	display: flex; align-items: center; gap: var(--sp-3);
	padding: 12px var(--sp-4); border-radius: var(--r-md);
	background: var(--bg-soft); border: 1px solid var(--border);
	font-size: var(--fs-sm);
}
.panel-row .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--ok); }
.panel-row .k { color: var(--text-soft); }
.panel-row .v {
	margin-inline-start: auto; font-weight: var(--w-semi); color: var(--ink-800);
	font-variant-numeric: tabular-nums;
}
.panel-row .v.ok { color: var(--ok); }

/* ==========================================================================
   ۲. نوار اعتماد
   ========================================================================== */

.trustbar { border-block: 1px solid var(--border); background: #fff; }
.trustbar-inner {
	display: flex; align-items: center; flex-wrap: wrap;
	gap: var(--sp-4) var(--sp-7); padding-block: var(--sp-5);
}
.trustbar p {
	margin: 0; font-size: var(--fs-sm); color: var(--text-soft);
	flex-shrink: 0; max-width: 16rem;
}
.trustbar ul {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: var(--sp-5) var(--sp-7); list-style: none; margin: 0; padding: 0;
	flex: 1;
}
.trustbar li {
	display: inline-flex; align-items: center; gap: 9px;
	font-family: var(--font-display); font-weight: 700;
	font-size: var(--fs-base); color: var(--grey-500);
	transition: color .18s var(--ease);
}
.trustbar li:hover { color: var(--ink-700); }
.trustbar svg { width: 20px; height: 20px; flex-shrink: 0; opacity: .8; }

/* ==========================================================================
   ۳. نوار آمار
   ========================================================================== */

.stats-band {
	background: linear-gradient(135deg, var(--ink-900) 0%, var(--ink-800) 45%, var(--brand-900) 100%);
	border-radius: var(--r-xl);
	padding: var(--sp-7) var(--sp-6);
	position: relative; overflow: hidden; isolation: isolate;
}
.stats-band::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.10) 1px, transparent 0);
	background-size: 26px 26px;
	mask-image: linear-gradient(to left, #000, transparent 70%);
	-webkit-mask-image: linear-gradient(to left, #000, transparent 70%);
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.stat { text-align: center; }
.stat b {
	display: block; font-family: var(--font-display); font-weight: 800;
	font-size: var(--fs-3xl); color: #fff; line-height: 1.2;
	font-variant-numeric: tabular-nums;
}
.stat span { display: block; margin-top: 6px; font-size: var(--fs-sm); color: var(--brand-200); }

/* ==========================================================================
   ۴. موقعیت دیتاسنترها
   ========================================================================== */

.locs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.loc {
	position: relative; overflow: hidden;
	background: var(--surface); border: 1px solid var(--border);
	border-radius: var(--r-lg); padding: var(--sp-5);
	transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.loc:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand-200); }
.loc-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }

/* نشان کشور به‌جای اموجی پرچم.
   ویندوز پرچم‌های اموجی را اصلاً رندر نمی‌کند و به‌جایش دو حرف خام
   نشان می‌دهد — یعنی روی سیستم بیشتر کاربران ایرانی خراب می‌شد. */
.loc-flag {
	display: grid; place-items: center; flex-shrink: 0;
	width: 46px; height: 46px; border-radius: 14px;
	font-family: var(--font-display); font-weight: 800; font-size: 15px;
	letter-spacing: .02em; direction: ltr;
	color: #fff; background: linear-gradient(135deg, var(--ink-700), var(--ink-800));
	box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.loc--ir .loc-flag { background: linear-gradient(135deg, #0F9D58, #0B7A70); }
.loc--de .loc-flag { background: linear-gradient(135deg, #1E4A70, #0B2540); }
.loc--nl .loc-flag { background: linear-gradient(135deg, #64748B, #334155); }
.loc-head h3 { margin: 0; font-size: var(--fs-lg); }
.loc-head .city { font-size: var(--fs-xs); color: var(--text-soft); }
.loc dl { margin: 0; display: grid; gap: 8px; font-size: var(--fs-sm); }
.loc dl > div { display: flex; align-items: baseline; gap: var(--sp-2); }
.loc dt { color: var(--text-soft); }
.loc dd {
	margin: 0; margin-inline-start: auto; font-weight: var(--w-semi);
	color: var(--ink-800); font-variant-numeric: tabular-nums;
}
.loc-tag {
	position: absolute; top: var(--sp-4); inset-inline-end: var(--sp-4);
	font-size: var(--fs-xs); font-weight: var(--w-semi);
	padding: 3px 10px; border-radius: var(--r-pill);
	background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-100);
}

/* ==========================================================================
   ۵. نوار مهاجرت
   ========================================================================== */

.migrate {
	display: grid; grid-template-columns: auto 1fr auto; align-items: center;
	gap: var(--sp-5);
	background: linear-gradient(120deg, var(--brand-50), #fff 60%);
	border: 1.5px solid var(--brand-100);
	border-radius: var(--r-xl); padding: var(--sp-6);
}
.migrate-icon {
	width: 58px; height: 58px; border-radius: var(--r-lg);
	display: grid; place-items: center; flex-shrink: 0;
	background: var(--brand-600); color: #fff;
	box-shadow: var(--shadow-brand);
}
.migrate-icon svg { width: 28px; height: 28px; }
.migrate h3 { margin: 0 0 6px; font-size: var(--fs-xl); }
.migrate p { margin: 0; color: var(--grey-600); font-size: var(--fs-base); max-width: 52ch; }

/* ==========================================================================
   ۶. جدول «ما در برابر بقیه»
   ========================================================================== */

.vs-wrap { overflow-x: auto; border-radius: var(--r-xl); border: 1px solid var(--border); background: #fff; }
.vs { width: 100%; border-collapse: collapse; min-width: 640px; }
.vs th, .vs td { padding: 16px var(--sp-5); border-bottom: 1px solid var(--border); }
.vs thead th {
	background: var(--bg-sunken); font-family: var(--font-display);
	font-weight: 800; font-size: var(--fs-base); color: var(--ink-800);
	text-align: center;
}
.vs thead th:first-child { text-align: start; }
.vs thead th.us { background: var(--brand-600); color: #fff; }
.vs tbody th {
	text-align: start; font-weight: var(--w-medium);
	font-size: var(--fs-sm); color: var(--grey-700);
}
.vs td { text-align: center; font-size: var(--fs-sm); color: var(--grey-600); }
.vs td.us { background: var(--brand-50); color: var(--brand-800); font-weight: var(--w-semi); }
.vs tbody tr:last-child th, .vs tbody tr:last-child td { border-bottom: 0; }
.vs .yes, .vs .no { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.vs .yes { background: var(--brand-100); color: var(--brand-700); }
.vs .no  { background: var(--grey-200); color: var(--grey-500); }
.vs .yes svg, .vs .no svg { width: 13px; height: 13px; }

/* ==========================================================================
   ۷. کانال‌های پشتیبانی
   ========================================================================== */

.channels { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.channel {
	display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3);
	padding: var(--sp-5); border-radius: var(--r-lg);
	background: var(--surface); border: 1px solid var(--border);
	transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.channel:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand-200); }
.channel-icon {
	width: 42px; height: 42px; border-radius: var(--r-md); display: grid; place-items: center;
	background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-100);
}
.channel-icon svg { width: 20px; height: 20px; }
.channel b { font-family: var(--font-display); font-size: var(--fs-base); color: var(--ink-800); }
.channel span { font-size: var(--fs-sm); color: var(--text-soft); line-height: var(--lh-snug); }
.channel .meta { margin-top: auto; padding-top: var(--sp-3); font-size: var(--fs-xs); color: var(--brand-700); font-weight: var(--w-semi); }

/* ==========================================================================
   ۸. کارت‌های دستهٔ محصول
   الگو از ایران‌سرور: به‌جای ریختن همهٔ پلن‌ها روی یک صفحه، اول دسته‌ها
   را نشان بده — آیکون، مخاطب، قیمت شروع، دکمه، و یک نوار مشخصات.
   ========================================================================== */

.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }

.cat {
	position: relative; display: flex; flex-direction: column;
	background: var(--surface); border: 1px solid var(--border);
	border-radius: var(--r-xl); padding: var(--sp-6) var(--sp-5) 0;
	transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.cat:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--brand-200); }
.cat--featured { border-color: var(--brand-500); box-shadow: var(--shadow-brand); }

.cat-badge {
	position: absolute; top: -13px; inset-inline-start: 50%; transform: translateX(50%);
	background: var(--amber-500); color: var(--ink-900);
	font-size: var(--fs-xs); font-weight: 700;
	padding: 5px 16px; border-radius: var(--r-pill); white-space: nowrap;
}

.cat-icon {
	width: 56px; height: 56px; border-radius: 16px; margin-inline: auto;
	display: grid; place-items: center; margin-bottom: var(--sp-4);
	background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-100);
}
.cat-icon svg { width: 27px; height: 27px; }

.cat-kicker {
	text-align: center; font-family: var(--font-mono); font-size: var(--fs-xs);
	color: var(--text-soft); letter-spacing: .04em; direction: ltr; margin-bottom: 6px;
}
.cat h3 {
	text-align: center; font-size: var(--fs-lg); margin-bottom: var(--sp-4);
	line-height: var(--lh-heading);
}

.cat-promo {
	display: block; text-align: center; font-size: var(--fs-xs); font-weight: var(--w-semi);
	color: var(--brand-800); background: var(--brand-50); border: 1px solid var(--brand-100);
	border-radius: var(--r-pill); padding: 7px 14px; margin-bottom: var(--sp-5);
	line-height: 1.7;
}

.cat-price { text-align: center; margin-bottom: var(--sp-5); }
.cat-price .from { font-size: var(--fs-sm); color: var(--text-soft); }
.cat-price .amount {
	font-family: var(--font-display); font-weight: 900;
	font-size: var(--fs-2xl); color: var(--ink-800);
	font-variant-numeric: tabular-nums; margin-inline: 6px;
}
.cat-price .unit { font-size: var(--fs-sm); color: var(--text-soft); }

.cat .btn { margin-bottom: var(--sp-5); }

/* نوار مشخصات پایین کارت */
.cat-specs {
	display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-4);
	list-style: none; margin: auto calc(var(--sp-5) * -1) 0; padding: var(--sp-4) var(--sp-5);
	border-top: 1px solid var(--border); background: var(--bg-soft);
	border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.cat-specs li {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: var(--fs-xs); color: var(--grey-600);
}
.cat-specs svg { width: 15px; height: 15px; color: var(--brand-600); flex-shrink: 0; }

/* ==========================================================================
   ۹. نوار ویژگی‌ها (زیر کارت‌های دسته)
   ========================================================================== */

.featurestrip {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4);
	background: var(--surface); border: 1px solid var(--border);
	border-radius: var(--r-xl); padding: var(--sp-5) var(--sp-6);
}
.featurestrip div {
	display: flex; align-items: center; gap: var(--sp-3);
	font-size: var(--fs-sm); font-weight: var(--w-medium); color: var(--ink-700);
}
.featurestrip svg { width: 20px; height: 20px; color: var(--brand-600); flex-shrink: 0; }

/* ==========================================================================
   ۱۰. ظاهر شدن نرم هنگام اسکرول
   ========================================================================== */

/* پیش‌فرض: همه‌چیز دیده می‌شود. نامرئی‌سازی فقط با کلاس js روی <html>
   اعمال می‌شود — وگرنه نبودِ جاوااسکریپت یعنی صفحهٔ سفید. */
@media (prefers-reduced-motion: no-preference) {
	.js .reveal {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity .6s var(--ease), transform .6s var(--ease);
	}
	.js .reveal.is-in { opacity: 1; transform: none; }
	.js .reveal-d1 { transition-delay: .07s; }
	.js .reveal-d2 { transition-delay: .14s; }
	.js .reveal-d3 { transition-delay: .21s; }
}

/* ==========================================================================
   ریسپانسیو
   ========================================================================== */

@media (max-width: 1024px) {
	.stats-grid   { grid-template-columns: repeat(2, 1fr); }
	.channels     { grid-template-columns: repeat(2, 1fr); }
	.locs         { grid-template-columns: 1fr; }
	.cats         { grid-template-columns: repeat(2, 1fr); }
	.featurestrip { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-5); }
}

@media (max-width: 880px) {
	.hero-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
	.hero-art { order: -1; }
	.hero-art svg { max-width: 300px; }
	.hero h1 { max-width: none; }
	.panel { transform: none; }
	.hero::after { inset-block-start: -40%; inset-inline-end: -40%; }
	.migrate { grid-template-columns: auto 1fr; }
	.migrate .btn { grid-column: 1 / -1; }
	.trustbar p { max-width: none; }
}

@media (max-width: 620px) {
	.domain-form { flex-wrap: wrap; border-radius: var(--r-lg); padding: var(--sp-3); }
	.domain-form .icon { display: none; }
	.domain-form input { flex-basis: 100%; padding-inline: var(--sp-3); }
	.domain-form .btn { width: 100%; }
	.stats-grid { gap: var(--sp-6) var(--sp-4); }
	.channels { grid-template-columns: 1fr; }
	.migrate { grid-template-columns: 1fr; text-align: center; justify-items: center; }
	.panel-head { padding-inline: var(--sp-4); }
	.panel-body { padding: var(--sp-4); }
	.cats { grid-template-columns: 1fr; }
	.featurestrip { grid-template-columns: 1fr; padding: var(--sp-5); }
	.hero-searchrow { margin-top: var(--sp-6); }
}

/* ==========================================================================
   ۱۱. مستندات
   ========================================================================== */

.docs-layout {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: var(--sp-7);
	align-items: start;
}
.docs-layout--reading { grid-template-columns: 250px minmax(0, 1fr); }
/* هر دو ستون باید بتوانند از محتوایشان کوچک‌تر شوند */
.docs-side, .docs-main { min-width: 0; }

/* ستون کناری — هنگام اسکرول می‌ماند */
.docs-side { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
.docs-side h2 {
	font-size: var(--fs-base); color: var(--text-soft);
	margin-bottom: var(--sp-3); font-weight: var(--w-semi);
}
.docs-side ul { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: 2px; }
.docs-side li a {
	display: flex; align-items: center; gap: var(--sp-2);
	padding: 9px 13px; border-radius: var(--r-md);
	color: var(--ink-700); font-size: var(--fs-sm); font-weight: var(--w-medium);
}
.docs-side li a:hover { background: var(--brand-50); color: var(--brand-700); }
.docs-side li.is-on a { background: var(--brand-600); color: #fff; }
.docs-side li a span {
	margin-inline-start: auto; font-size: var(--fs-xs);
	color: var(--grey-400); font-variant-numeric: tabular-nums;
}
.docs-side li.is-on a span { color: rgba(255,255,255,.7); }

.docs-toc li a { font-weight: var(--w-normal); }

.docs-help {
	background: var(--bg-soft); border: 1px solid var(--border);
	border-radius: var(--r-lg); padding: var(--sp-4);
}
.docs-help strong { display: block; font-family: var(--font-display); margin-bottom: 6px; }
.docs-help p { font-size: var(--fs-sm); color: var(--text-soft); line-height: var(--lh-snug); margin-bottom: var(--sp-4); }

/* فهرست راهنماها */
.docs-group {
	font-size: var(--fs-xl); margin-top: var(--sp-7); margin-bottom: var(--sp-4);
	scroll-margin-top: calc(var(--header-h) + var(--sp-5));
}
.docs-main > .docs-group:first-child { margin-top: 0; }

.docs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }

.doc-card {
	display: flex; align-items: flex-start; gap: var(--sp-3);
	background: var(--surface); border: 1px solid var(--border);
	border-radius: var(--r-lg); padding: var(--sp-4);
	transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.doc-card:hover {
	transform: translateY(-2px); box-shadow: var(--shadow-md);
	border-color: var(--brand-200);
}
.doc-card-icon {
	width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
	display: grid; place-items: center;
	background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-100);
}
.doc-card-body { display: grid; gap: 4px; min-width: 0; }
.doc-card-body strong {
	font-family: var(--font-display); font-size: var(--fs-base);
	color: var(--ink-800); line-height: var(--lh-heading);
}
.doc-card-body span {
	font-size: var(--fs-sm); color: var(--text-soft); line-height: var(--lh-snug);
}
.doc-card-arrow { color: var(--grey-300); font-size: var(--fs-lg); line-height: 1; flex-shrink: 0; }
.doc-card:hover .doc-card-arrow { color: var(--brand-600); }

.doc-foot {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
	margin-top: var(--sp-7); padding-top: var(--sp-5);
	border-top: 1px solid var(--border);
	font-size: var(--fs-sm); color: var(--text-soft);
}

@media (max-width: 1024px) {
	.docs-layout, .docs-layout--reading { grid-template-columns: 1fr; }
	.docs-side { position: static; }
	/* بدون min-width:0 آیتم گرید کوچک‌تر از محتوایش نمی‌شود و
	   فهرست افقی، کل صفحه را می‌کشد. */
	.docs-side ul {
		grid-auto-flow: column; grid-auto-columns: max-content;
		overflow-x: auto; padding-bottom: var(--sp-2);
		min-width: 0; scrollbar-width: thin;
	}
	.docs-side li a { white-space: nowrap; }
	.docs-toc { grid-auto-flow: row !important; }
}
@media (max-width: 620px) {
	.docs-grid { grid-template-columns: 1fr; }
}