/**
 * پوستهٔ تیره + سکشن‌های صفحهٔ اصلی.
 *
 * بخش‌های ۱ تا ۳ و ۱۱ پوستهٔ مشترک‌اند (پس‌زمینه، نوار بالا، دکمه‌ها،
 * پابرگ) و روی هر صفحه‌ای که کلاس body.bt-dark دارد می‌نشینند — الان
 * صفحهٔ اصلی و صفحهٔ اکسپرت پراپ. بخش‌های ۴ تا ۱۰ مخصوص سکشن‌های
 * صفحهٔ اصلی‌اند: هیرو، کارت‌های اکسپرت، مدیریت ریسک، چالش پراپ و
 * پلتفرم‌ها. همهٔ قواعد به bt-dark محدودند تا بقیهٔ سایت دست‌نخورده بماند.
 */

/* ---------------------------------- *
 * 1. متغیرها و پوستهٔ تیره
 * ---------------------------------- */

body.bt-dark {
	--bt-bg: #0b0b0e;
	--bt-surface: #15161b;
	--bt-surface-2: #1b1d23;
	--bt-border: rgba(255, 255, 255, 0.07);
	--bt-border-strong: rgba(255, 255, 255, 0.12);
	--bt-text: #f4f5f7;
	--bt-muted: #9aa1ad;
	--bt-dim: #6e7481;
	--bt-orange: #f0801e;
	--bt-orange-hover: #ff9236;
	--bt-green: #22c55e;
	--bt-amber: #f0a01e;
	--bt-radius: 18px;

	/* پوستهٔ شیشه‌ای مشترک کارت‌ها */
	--bt-glass: rgba(22, 23, 29, 0.55);
	--bt-glass-soft: rgba(26, 28, 35, 0.42);
	--bt-glass-blur: blur(18px) saturate(140%);
	--bt-glass-sheen: linear-gradient(
		160deg,
		rgba(255, 255, 255, 0.075),
		rgba(255, 255, 255, 0.02) 42%,
		rgba(255, 255, 255, 0) 72%
	);
	--bt-glass-highlight: rgba(255, 255, 255, 0.09);

	color: var(--bt-text);
	background-color: var(--bt-bg);
}

/*
 * هالهٔ نوری پس‌زمینه: نور مورب منشوری، برداشته‌شده از طرح.
 *
 * لایهٔ پایین باندهای رنگی است (فیروزه‌ای ← سفید ← نارنجی ← بنفش) و
 * لایهٔ بالا با رنگ خودِ پس‌زمینه، بالا و پایین قاب را محو می‌کند تا
 * نور در وسط صفحه بنشیند. رنگ شفاف به‌جای کلیدواژهٔ transparent صریح
 * نوشته شده، وگرنه میان‌یابی از مشکی رد می‌شود و لبه‌ها کدر می‌افتد.
 */
body.bt-dark::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		linear-gradient(
			to bottom,
			var(--bt-bg) 3%,
			rgba(11, 11, 14, 0) 27%,
			rgba(11, 11, 14, 0) 64%,
			var(--bt-bg) 95%
		),
		linear-gradient(
			104deg,
			rgba(11, 11, 14, 0) 24%,
			rgba(100, 165, 200, 0.17) 46%,
			rgba(180, 195, 205, 0.13) 56%,
			rgba(240, 170, 150, 0.14) 66%,
			rgba(120, 105, 240, 0.14) 84%,
			rgba(120, 105, 240, 0.12) 100%
		);
}

body.bt-dark #page {
	position: relative;
	z-index: 1;
}

body.bt-dark .container {
	max-width: 1200px;
}

body.bt-dark .site-content {
	padding-top: 0;
}

/*
 * پرش نرم به لنگرها. برای کاربری که حرکت کمتر خواسته است، همان پرش
 * آنیِ پیش‌فرض می‌ماند.
 */
@media (prefers-reduced-motion: no-preference) {
	html:has(body.bt-dark) {
		scroll-behavior: smooth;
	}
}

/*
 * نوار بالای صفحه چسبان است و روی مقصدِ لنگر می‌افتد، پس هدف باید به
 * اندازهٔ ارتفاع نوار از بالا فاصله بگیرد.
 */
.bt-experts {
	scroll-margin-top: 7rem;
}

/* ---------------------------------- *
 * 2. نوار بالای صفحه (شیشه‌ای شناور)
 * ---------------------------------- */

body.bt-dark .site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	padding: 1.25rem 0 0.75rem;
	border-bottom: 0;
}

body.bt-dark .site-header .container {
	gap: 1.5rem;
	padding: 0.7rem 1.1rem;
	background: rgba(20, 21, 26, 0.82);
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius);
	box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

body.bt-dark .site-title a {
	color: var(--bt-text);
}

body.bt-dark .site-description {
	display: none;
}

body.bt-dark .main-navigation {
	margin-inline: auto;
}

body.bt-dark .main-navigation a {
	color: var(--bt-muted);
	font-size: 0.95rem;
}

body.bt-dark .main-navigation a:hover,
body.bt-dark .main-navigation a:focus {
	color: var(--bt-text);
	opacity: 1;
	text-decoration: none;
}

body.bt-dark .main-navigation .current-menu-item > a {
	color: var(--bt-text);
}

/* کشویی سربرگ هم‌خانوادهٔ خودِ نوار است: شیشه‌ای، تیره و با همان لبه. */
body.bt-dark .main-navigation .sub-menu {
	background: rgba(20, 21, 26, 0.92);
	border-color: var(--bt-border);
	box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.9);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

body.bt-dark .main-navigation .sub-menu a:hover,
body.bt-dark .main-navigation .sub-menu a:focus {
	color: var(--bt-text);
	background: rgba(255, 255, 255, 0.06);
}

/* ---------------------------------- *
 * 3. دکمه‌ها
 * ---------------------------------- */

body.bt-dark .bt-btn,
body.bt-dark .site-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.6rem 1.15rem;
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.6;
	color: #fff;
	background: var(--bt-orange);
	/* لبهٔ شفاف، تا دکمهٔ خطی (ghost) دقیقاً هم‌ارتفاع دکمهٔ پُر بماند. */
	border: 1px solid transparent;
	border-radius: 10px;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

body.bt-dark .bt-btn:hover,
body.bt-dark .bt-btn:focus,
body.bt-dark .site-cta:hover,
body.bt-dark .site-cta:focus {
	color: #fff;
	background: var(--bt-orange-hover);
	opacity: 1;
	text-decoration: none;
}

body.bt-dark .bt-btn--lg {
	padding: 0.55rem 1.35rem;
	font-size: 0.95rem;
}

/*
 * دکمهٔ خطی برای برچسب «بزودی». چون لینک نیست و کاری انجام نمی‌دهد،
 * حالت hover هم ندارد؛ وگرنه قاعدهٔ hover دکمهٔ پُر روی آن می‌نشست.
 */
body.bt-dark .bt-btn--ghost,
body.bt-dark .bt-btn--ghost:hover,
body.bt-dark .bt-btn--ghost:focus {
	color: var(--bt-text);
	background: transparent;
	border-color: var(--bt-orange);
	cursor: default;
}

body.bt-dark .site-cta {
	padding: 0.5rem 0.95rem;
	font-size: 0.9rem;
}

/* ---------------------------------- *
 * 4. هیرو
 * ---------------------------------- */

.bt-hero {
	padding: 4.5rem 0 1rem;
}

.bt-hero__inner {
	display: grid;
	grid-template-columns: 1fr 1.08fr;
	align-items: center;
	gap: 3.5rem;
}

.bt-hero__title {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin: 0 0 1.4rem;
	font-size: clamp(1.85rem, 2.9vw, 2.4rem);
	font-weight: 800;
	line-height: 1.4;
	color: var(--bt-text);
}

/* نشانِ هیرو کمی دیرتر از نشانِ سربرگ پلک می‌زند. */
.bt-logo--hero::after {
	animation-delay: 1.9s;
}

/* لوگوی سفارشی به‌جای نشان + متنِ عنوان hero. */
.bt-hero__logo {
	display: block;
	width: auto;
	height: clamp(2.4rem, 4.4vw, 3.2rem);
	max-width: 100%;
}

.bt-hero__lead {
	margin: 0 0 0.3rem;
	max-width: 20.25rem;
	font-size: 0.95rem;
	line-height: 2.05;
	color: var(--bt-muted);
}

.bt-hero__actions {
	margin: 1.75rem 0 0;
}

/* ---------------------------------- *
 * 5. کارت‌های نمایشی
 * ---------------------------------- */

/*
 * قابِ کارت‌ها یک «کانتینر» است تا اندازهٔ درونی کارت‌ها به عرضِ خودِ قاب
 * گره بخورد، نه به عرض صفحه. با این کار همان ترکیبِ روی‌هم‌افتادهٔ دسکتاپ
 * در موبایل هم می‌ماند و فقط کوچک می‌شود. جای کارت‌ها درصدی است، پس نسبت
 * ابعاد (aspect-ratio) چیدمان را در هر عرضی حفظ می‌کند.
 */
.bt-hero__visual {
	position: relative;
	container-type: inline-size;
	aspect-ratio: 24 / 11;
	/*
	 * عرضِ صریح لازم است: container-type عرضِ ذاتیِ عنصر را صفر می‌کند، پس
	 * هر جا کشیده‌شدنِ آیتم گرید غیرفعال شود (مثلاً با margin-inline: auto
	 * در موبایل) قاب به صفر می‌رود و کارت‌ها بیرون می‌زنند.
	 */
	width: 100%;
}

/*
 * کارت‌ها شیشه‌ای‌اند: پس‌زمینهٔ نیمه‌شفاف روی بلورِ پشت‌زمینه،
 * درخششی مورب برای بازتاب شیشه و لبهٔ روشن بالا — هم‌خانوادهٔ نوار بالای صفحه.
 * چون کارت‌ها روی هم می‌افتند، هر کارت جلویی کارت پشتی را هم بلور می‌کند.
 */
.bt-card {
	/*
	 * --bt-u یکای مقیاسِ درونِ کارت‌هاست: جای «۱rem» را می‌گیرد و با عرض قاب
	 * بالا و پایین می‌رود (۲.۸cqw ≈ ۱۶px در عرضِ دسکتاپ). سقفش نمی‌گذارد در
	 * تبلت از اندازهٔ دسکتاپ بزرگ‌تر شود و کفش نمی‌گذارد در گوشی‌های باریک
	 * متن‌ها ناخوانا شوند. چون متغیر ارث می‌رسد، اندازه‌ها روی هم ضرب نمی‌شوند.
	 */
	--bt-u: clamp(0.62rem, 2.8cqw, 1rem);

	position: absolute;
	font-size: var(--bt-u);
	background: var(--bt-glass-sheen), var(--bt-glass);
	/* بدون قاب و بدون سایه؛ فقط ته‌رنگ شیشه‌ای لبهٔ کارت را نشان می‌دهد. */
	border: 0;
	border-radius: calc(var(--bt-u) * 0.875);
	backdrop-filter: var(--bt-glass-blur);
	-webkit-backdrop-filter: var(--bt-glass-blur);
}

/*
 * بدون پشتیبانی از container query، یکای کارت با عرضِ صفحه تخمین زده می‌شود.
 * دقتش کمتر است ولی چون قاب در موبایل تقریباً تمام‌عرض است، نتیجه نزدیک است.
 */
@supports not (container-type: inline-size) {
	.bt-card {
		--bt-u: clamp(0.62rem, 2.6vw, 1rem);
	}
}

.bt-card--candles {
	z-index: 0;
	top: 0;
	left: 10%;
	right: 22%;
	height: 64%;
	overflow: hidden;
	/* کارت عقب کمی شفاف‌تر است تا عمق لایه‌ها دیده شود. */
	background: var(--bt-glass-sheen), var(--bt-glass-soft);
}

.bt-card--candles svg {
	display: block;
	width: 100%;
	height: 100%;
	padding: calc(var(--bt-u) * 0.9) var(--bt-u) 0;
	box-sizing: border-box;
}

/*
 * کندل‌ها آرام کم و زیاد می‌شوند تا نمودار زنده به نظر برسد. دامنه عمداً
 * کم است (زیر ۵ درصد) و مبدأ مقیاس و تأخیر هر کندل در خودِ قالب (hero.php)
 * روی گروه نوشته می‌شود.
 */
.bt-candle {
	animation: bt-candle-breathe 3.4s ease-in-out infinite alternate;
}

@keyframes bt-candle-breathe {
	from {
		transform: scaleY(0.965);
	}

	to {
		transform: scaleY(1.05);
	}
}

.bt-card--volume {
	z-index: 1;
	left: 0;
	top: 30%;
	bottom: 0;
	width: 32%;
	display: flex;
	flex-direction: column;
	padding: calc(var(--bt-u) * 0.8) calc(var(--bt-u) * 0.9) calc(var(--bt-u) * 0.85);
}

.bt-card--prop {
	z-index: 1;
	right: 0;
	bottom: 0;
	width: 67%;
	padding: calc(var(--bt-u) * 0.85) var(--bt-u) var(--bt-u);
}

/*
 * بدون پشتیبانی از backdrop-filter، پس‌زمینهٔ مات جایگزین می‌شود تا متن خوانا بماند.
 * کارت‌های اکسپرت (سکشن ۲) و پنل ریسک (سکشن ۳) هم همین پوسته را دارند.
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.bt-card,
	.bt-expert,
	.bt-panel {
		background: var(--bt-glass-sheen), var(--bt-surface);
	}

	.bt-card--candles {
		background: var(--bt-glass-sheen), var(--bt-surface-2);
	}
}

.bt-card__label {
	display: block;
	font-size: 0.72em;
	color: var(--bt-dim);
}

.bt-spark {
	display: block;
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	margin: calc(var(--bt-u) * 0.4) 0;
}

.bt-card__value {
	display: block;
	/* tabular-nums جای monospace را می‌گیرد تا ارقام هم‌عرض بمانند. */
	font-variant-numeric: tabular-nums;
	font-size: 0.95em;
	font-weight: 600;
	color: var(--bt-text);
	text-align: left;
}

/* کارت چالش پراپ */

.bt-prop__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--bt-u) * 0.75);
	margin-bottom: calc(var(--bt-u) * 0.85);
}

.bt-prop__firm {
	font-size: 0.7em;
	letter-spacing: 0.06em;
}

.bt-prop__firm-muted,
.bt-prop__dot {
	color: var(--bt-dim);
}

.bt-prop__firm-strong {
	color: var(--bt-text);
}

.bt-badge {
	padding: calc(var(--bt-u) * 0.15) calc(var(--bt-u) * 0.6);
	font-size: 0.68em;
	color: #cfe0ff;
	background: rgba(80, 130, 220, 0.16);
	border: 1px solid rgba(120, 165, 240, 0.24);
	border-radius: 999px;
}

.bt-prop__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bt-prop__row + .bt-prop__row {
	margin-top: calc(var(--bt-u) * 0.6);
}

.bt-prop__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--bt-u) * 0.5);
	margin-bottom: calc(var(--bt-u) * 0.28);
	font-size: 0.7em;
}

.bt-prop__name {
	color: var(--bt-muted);
}

.bt-prop__pct {
	font-variant-numeric: tabular-nums;
	color: var(--bt-dim);
}

.bt-progress {
	direction: ltr;
	height: calc(var(--bt-u) * 0.3125);
	overflow: hidden;
	background: rgba(255, 255, 255, 0.07);
	border-radius: 999px;
}

/*
 * نوار یک‌بار، هنگام باز شدن صفحه، از صفر تا درصد خودش پر می‌شود. عرضِ
 * نهایی همان مقدار درون‌خطیِ قالب است و انیمیشن فقط آن را در راستای افقی
 * باز می‌کند، پس اگر انیمیشن اجرا نشود هم نوار درست دیده می‌شود.
 */
.bt-progress__bar {
	display: block;
	height: 100%;
	border-radius: 999px;
	transform-origin: left center;
	animation: bt-progress-fill 1.2s cubic-bezier(0.22, 0.7, 0.3, 1) both;
}

/* هر نوار کمی دیرتر از نوار بالای خودش پر می‌شود. */
.bt-prop__row:nth-child(2) .bt-progress__bar {
	animation-delay: 0.14s;
}

.bt-prop__row:nth-child(3) .bt-progress__bar {
	animation-delay: 0.28s;
}

@keyframes bt-progress-fill {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

.bt-progress__bar--green {
	background: var(--bt-green);
}

.bt-progress__bar--amber {
	background: var(--bt-amber);
}

/* ---------------------------------- *
 * 6. حامیان
 * ---------------------------------- */

.bt-partners {
	padding: 5.25rem 0 1.5rem;
	text-align: center;
}

.bt-partners__list {
	direction: ltr; /* ردیف لوگوها ترتیب چپ‌به‌راست دارد. */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 3.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bt-partners__item {
	display: inline-flex;
	align-items: center;
	opacity: 0.85;
	transition: opacity 0.15s ease;
}

.bt-partners__item:hover {
	opacity: 1;
}

/*
 * لوگوهای حامیان ابعاد یکسان ندارند؛ ارتفاع سقف‌دار
 * آن‌ها را هم‌اندازه نشان می‌دهد و نسبت تصویر حفظ می‌شود.
 */
.bt-partners__logo {
	display: block;
	width: auto;
	height: auto;
	max-height: 2rem;
	max-width: min(11rem, 100%);
}

/* ---------------------------------- *
 * 7. سکشن ۲ — کارت‌های اکسپرت
 * ---------------------------------- */

.bt-experts {
	padding: 3.5rem 0 5rem;
}

.bt-experts__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* هم‌پوستهٔ کارت‌های شیشه‌ای هیرو (.bt-card). */
.bt-expert {
	/* ستونی است تا دکمه بتواند با margin خودکار به کف کارت بچسبد. */
	display: flex;
	flex-direction: column;
	padding: 1.6rem 1.5rem 1.5rem;
	background: var(--bt-glass-sheen), var(--bt-glass);
	/* بدون قاب و بدون سایه؛ فقط ته‌رنگ شیشه‌ای لبهٔ کارت را نشان می‌دهد. */
	border: 0;
	border-radius: var(--bt-radius);
	backdrop-filter: var(--bt-glass-blur);
	-webkit-backdrop-filter: var(--bt-glass-blur);
	transition: transform 0.25s ease;
}

/*
 * با نشانگر ماوس، کارت کمی بزرگ‌تر می‌شود. فوکوسِ درونِ کارت (رسیدن با
 * کیبورد به دکمه) هم همین حالت را می‌گیرد تا رفتار یکسان بماند.
 */
.bt-expert:hover,
.bt-expert:focus-within {
	transform: scale(1.03);
}

/* برای کاربری که حرکت کمتر خواسته است، فقط بزرگ‌نمایی برداشته می‌شود. */
@media (prefers-reduced-motion: reduce) {
	.bt-expert {
		transition: none;
	}

	.bt-expert:hover,
	.bt-expert:focus-within {
		transform: none;
	}
}

/* آیکون در سمت شروع (راست) کارت می‌نشیند. */
.bt-expert__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	width: 3rem;
	height: 3rem;
	margin-bottom: 1.6rem;
	color: var(--bt-orange);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--bt-border);
	border-radius: 12px;
}

.bt-expert__icon svg {
	display: block;
	width: 1.4rem;
	height: 1.4rem;
}

/* در طرح، آیکون لامپ نارنجی نیست و با رنگ متن دیده می‌شود. */
.bt-expert__icon--bulb {
	color: var(--bt-text);
}

.bt-expert__title {
	margin: 0 0 0.85rem;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.65;
	color: var(--bt-text);
}

.bt-expert__text {
	margin: 0;
	font-size: 0.85rem;
	line-height: 2.1;
	color: var(--bt-muted);
}

/*
 * margin بالای خودکار، دکمه‌ها را کف کارت و در نتیجه در همهٔ
 * کارت‌ها هم‌تراز نگه می‌دارد، حتی وقتی متن‌ها هم‌اندازه نیستند.
 */
.bt-expert__action {
	margin: auto 0 0;
	padding-top: 1.75rem;
	text-align: end;
}

/* ---------------------------------- *
 * 8. سکشن ۳ — مدیریت ریسک و سفارش
 * ---------------------------------- */

.bt-risk {
	padding: 1.5rem 0 6rem;
}

/* ستون اول (متن) سمت راست و ستون دوم (تصویر) سمت چپ می‌نشیند. */
.bt-risk__inner {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	align-items: center;
	gap: 3.5rem;
}

.bt-risk__title {
	margin: 0 0 1.1rem;
	font-size: clamp(1.35rem, 2.2vw, 1.8rem);
	font-weight: 800;
	line-height: 1.75;
	color: var(--bt-text);
}

.bt-risk__lead {
	margin: 0 0 1.6rem;
	max-width: 26rem;
	font-size: 0.95rem;
	line-height: 2.05;
	color: var(--bt-muted);
}

/*
 * فهرست تیک‌دار — مشترک بین سکشن «مدیریت ریسک» و سکشن «چالش پراپ»،
 * پس اسمش به سکشن گره نخورده است.
 */
.bt-checklist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bt-checklist__item {
	position: relative;
	padding-inline-start: 1.85rem;
	font-size: 0.9rem;
	line-height: 2;
	color: var(--bt-muted);
}

.bt-checklist__item + .bt-checklist__item {
	margin-top: 0.55rem;
}

/*
 * تیک با دو ضلع یک مربعِ چرخیده ساخته شده تا سکشن به فایل آیکون
 * یا نشانه‌گذاری اضافه در هر ردیف نیاز نداشته باشد.
 */
.bt-checklist__item::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.3rem;
	top: 0.75rem;
	width: 0.4rem;
	height: 0.72rem;
	border: solid var(--bt-orange);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.bt-risk__actions {
	margin: 2rem 0 0;
}

/* عرض قاب دقیقاً به اندازهٔ تصویر است تا پوشش گرادیانت از تصویر بیرون نزند. */
.bt-risk__media {
	position: relative;
	max-width: 34rem;
	margin: 0 auto;
}

/*
 * پنل تنظیمات — بازسازی همان چیزی که کاربر در متاتریدر می‌بیند،
 * با همان پوستهٔ شیشه‌ای کارت‌های هیرو و اکسپرت.
 *
 * text-align: start لازم است چون body راست‌چین است و پنل dir="ltr" دارد؛
 * بدون آن، برچسب‌های لاتین به راستِ ستون می‌چسبند.
 */
.bt-panel {
	padding: 1.5rem 2rem 1.9rem;
	text-align: start;
	background: var(--bt-glass-sheen), var(--bt-glass);
	border: 1px solid var(--bt-border-strong);
	border-radius: 16px;
	box-shadow:
		0 26px 60px -30px rgba(0, 0, 0, 0.95),
		inset 0 1px 0 var(--bt-glass-highlight);
	backdrop-filter: var(--bt-glass-blur);
	-webkit-backdrop-filter: var(--bt-glass-blur);
}

.bt-panel__legend {
	margin: 0 0 1rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: #e8aa43;
}

.bt-panel__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem 1.1rem;
}

.bt-panel__grid + .bt-panel__legend {
	margin-top: 1.5rem;
}

.bt-panel__field {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	min-width: 0;
}

.bt-panel__label {
	font-size: 0.78rem;
	line-height: 1.5;
	color: #d7d7d7;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bt-panel__value {
	padding: 0.6rem 0.85rem;
	font-size: 0.85rem;
	/* ارقام هم‌عرض، تا مقادیر مثل خروجی واقعی نرم‌افزار بنشینند. */
	font-variant-numeric: tabular-nums;
	line-height: 1.6;
	color: #fff;
	text-align: center;
	/* باکس‌ها هم شیشه‌ای‌اند: روشناییِ کمِ روی پوستهٔ پنل، نه رنگ ثابت. */
	background: rgba(255, 255, 255, 0.055);
	border: 1px solid var(--bt-border-strong);
	border-radius: 12px;
}

/* فیلدهای انتخابی در پنل، پررنگ‌تر و آبی‌اند. */
.bt-panel__value--accent {
	background: rgba(72, 116, 190, 0.3);
	border-color: rgba(125, 168, 240, 0.34);
}

/*
 * تعویض عدد پشتِ یک محو کوتاه انجام می‌شود (assets/js/panel-live.js)، وگرنه
 * پرش ناگهانی رقم‌ها بیش از حد به چشم می‌آید.
 */
.bt-panel__value {
	transition: opacity 0.22s ease;
}

.bt-panel__value.is-live-swap {
	opacity: 0.5;
}

/*
 * یک‌سوم پایین پنل در پس‌زمینهٔ صفحه محو می‌شود تا حس «ادامه دارد» بدهد.
 * رنگ همان --bt-bg است تا لبهٔ پایینی پنل دیده نشود.
 */
.bt-risk__media::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 34%;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(11, 11, 14, 0),
		rgba(11, 11, 14, 0.72) 45%,
		rgba(11, 11, 14, 1) 82%
	);
}

/* ---------------------------------- *
 * 9. سکشن ۴ — عبور از چالش پراپ
 * ---------------------------------- */

.bt-challenge {
	padding: 3rem 0 5.5rem;
}

.bt-challenge__inner {
	display: grid;
	grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
	align-items: center;
	gap: clamp(2.5rem, 7vw, 8rem);
}

/*
 * پنل سمت راست می‌نشیند (ستون اول در RTL) ولی در سورس بعد از متن
 * می‌آید تا خواندن صفحه با عنوان سکشن شروع شود.
 */
.bt-calc {
	grid-column: 1;
	grid-row: 1;
}

.bt-challenge__copy {
	grid-column: 2;
	grid-row: 1;
}

.bt-challenge__title {
	margin: 0 0 0.9rem;
	font-size: clamp(1.4rem, 2.1vw, 1.7rem);
	font-weight: 800;
	line-height: 1.6;
	color: var(--bt-text);
}

.bt-challenge__lead {
	/* فاصله تا فهرست تیک‌دار، هم‌اندازهٔ همان فاصله در سکشن مدیریت ریسک. */
	margin: 0 0 1.6rem;
	max-width: 38rem;
	font-size: 0.95rem;
	line-height: 2;
	color: var(--bt-muted);
}

.bt-challenge__actions {
	margin: 1.6rem 0 0;
}

/* پنل تنظیمات — نمای نمادین، نه فرم واقعی. */
.bt-calc {
	padding: 1rem 1rem 0;
	background: var(--bt-glass-sheen), var(--bt-glass);
	border: 1px solid var(--bt-border-strong);
	border-radius: var(--bt-radius);
	box-shadow:
		0 30px 70px -34px rgba(0, 0, 0, 0.95),
		inset 0 1px 0 var(--bt-glass-highlight);
	backdrop-filter: var(--bt-glass-blur);
	-webkit-backdrop-filter: var(--bt-glass-blur);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.bt-calc {
		background: var(--bt-glass-sheen), var(--bt-surface);
	}
}

/*
 * محتوا رو به پایین محو می‌شود تا پیدا باشد تنظیمات ادامه دارد و این
 * فقط گوشه‌ای از پنل واقعی اکسپرت است. mask به‌جای گرادیانتِ هم‌رنگ پس‌زمینه
 * است، چون پنل روی هالهٔ نوری صفحه می‌نشیند و رنگ پشتش یکدست نیست.
 */
.bt-calc__body {
	--bt-calc-fade: linear-gradient(
		to bottom,
		#000 73%,
		rgba(0, 0, 0, 0.45) 88%,
		rgba(0, 0, 0, 0) 100%
	);

	padding-bottom: 1rem;
	mask-image: var(--bt-calc-fade);
	-webkit-mask-image: var(--bt-calc-fade);
}

.bt-calc__field + .bt-calc__field {
	margin-top: 1.05rem;
}

.bt-calc__label {
	display: block;
	margin-bottom: 0.6rem;
	font-size: 0.78rem;
	line-height: 1.7;
	color: var(--bt-muted);
}

/* گزینه‌ها هم‌عرض‌اند، چه دوتا باشند چه سه‌تا. */
.bt-calc__options {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 0.45rem;
}

.bt-calc__opt {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.2rem;
	padding: 0.3rem 0.5rem;
	font-size: 0.82rem;
	line-height: 1.6;
	text-align: center;
	color: var(--bt-muted);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
	border: 1px solid var(--bt-border);
	border-radius: 11px;
}

.bt-calc__opt--on {
	color: var(--bt-text);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
	border-color: var(--bt-border-strong);
}

/* گزینهٔ فعالِ هشدار با لبهٔ نارنجی مشخص می‌شود. */
.bt-calc__opt--alert.bt-calc__opt--on {
	border-color: rgba(240, 128, 30, 0.6);
}

.bt-calc__field--inline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.bt-calc__field--inline .bt-calc__label {
	margin-bottom: 0;
}

.bt-calc__input {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 4.8rem;
	min-height: 2.2rem;
	padding: 0.3rem 0.7rem;
	font-size: 0.82rem;
	font-variant-numeric: tabular-nums;
	color: var(--bt-text);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
	border: 1px solid var(--bt-border);
	border-radius: 11px;
}

.bt-calc__specs {
	margin: 1.15rem 0 0;
}

.bt-calc__spec {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.8rem;
	line-height: 1.8;
}

.bt-calc__spec + .bt-calc__spec {
	margin-top: 0.35rem;
}

.bt-calc__spec dt {
	color: var(--bt-muted);
}

.bt-calc__spec dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
	color: var(--bt-dim);
}

/* ---------------------------------- *
 * 10. سکشن ۵ — قابلیت استفاده در متاتریدر ۴ و ۵
 * ---------------------------------- */

.bt-platforms {
	padding: 1rem 0 6.5rem;
}

/*
 * متن ستون اول است و در چیدمان راست‌به‌چپ سمت راست می‌نشیند؛ کاشی‌ها
 * ستون دوم و سمت چپ. فاصلهٔ دو ستون کشسان است و space-between هر ستون
 * را به لبهٔ خودش می‌چسباند، همان‌طور که در طرح دیده می‌شود.
 */
.bt-platforms__inner {
	display: grid;
	grid-template-columns: minmax(0, 23rem) auto;
	align-items: center;
	justify-content: space-between;
	gap: clamp(2.5rem, 8vw, 9rem);
}

.bt-platforms__title {
	margin: 0 0 1rem;
	font-size: clamp(1.35rem, 2.1vw, 1.7rem);
	font-weight: 800;
	line-height: 1.7;
	color: var(--bt-text);
}

.bt-platforms__lead {
	margin: 0;
	font-size: 0.95rem;
	line-height: 2.05;
	color: var(--bt-muted);
}

.bt-platforms__actions {
	margin: 1.75rem 0 0;
}

/*
 * آرت‌ورک ردیف کاشی‌ها. عرضش کشسان و کمتر از عرض واقعی فایل است تا روی
 * نمایشگرهای پرتراکم هم تیز بماند؛ height: auto نسبت تصویر را در برابر
 * صفت‌های width/height که وردپرس خودش می‌گذارد حفظ می‌کند.
 */
.bt-platforms__image {
	display: block;
	width: clamp(15rem, 30vw, 23rem);
	max-width: 100%;
	height: auto;
}

/* ردیف جایگزین، وقتی آرت‌ورک در دسترس نیست. */
.bt-platforms__list {
	display: flex;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * هر کاشی یک مربع است با همان پوستهٔ شیشه‌ای کارت‌های صفحه.
 * aspect-ratio نگهش می‌دارد تا در هیچ عرضی کشیده نشود.
 */
.bt-platform {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(4.75rem, 8.6vw, 6.9rem);
	aspect-ratio: 1;
	color: #c3cad6;
	background: var(--bt-glass-sheen), var(--bt-glass);
	border: 1px solid var(--bt-border-strong);
	border-radius: 16px;
	box-shadow:
		0 26px 60px -30px rgba(0, 0, 0, 0.95),
		inset 0 1px 0 var(--bt-glass-highlight);
	backdrop-filter: var(--bt-glass-blur);
	-webkit-backdrop-filter: var(--bt-glass-blur);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.bt-platform {
		background: var(--bt-glass-sheen), var(--bt-surface);
	}
}

/* کاشی متاتریدر ۴: هم‌خانوادهٔ کاشی ۵ ولی آرام‌تر، تا ۵ شاخصِ ردیف بماند. */
.bt-platform--mt4 {
	color: #bed4ea;
	background:
		radial-gradient(120% 118% at 28% 16%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 62%),
		linear-gradient(158deg, #2b3a4e, #1a2331 72%);
	border-color: rgba(140, 175, 215, 0.2);
}

/* کاشی متاتریدر ۵: نشانِ شاخص سکشن، با آبیِ روشن طرح. */
.bt-platform--mt5 {
	color: #fff;
	background:
		radial-gradient(118% 118% at 30% 16%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 60%),
		linear-gradient(158deg, #3f9ade, #205fb3 60%, #17408d);
	border-color: rgba(150, 200, 255, 0.36);
	box-shadow:
		0 26px 55px -26px rgba(28, 92, 180, 0.85),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.bt-platform__mark {
	display: block;
	width: 48%;
	height: 48%;
}

/*
 * لوگوی آپلودی کل کاشی را پر می‌کند، پس بهتر است تصویر مربع باشد؛
 * cover تصویر غیرمربع را به‌جای کش‌آمدن، برش می‌دهد.
 */
.bt-platform__logo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

/* شمارهٔ نسخه در گوشهٔ کاشی می‌نشیند، مثل نشانکِ آیکون خودِ نرم‌افزار. */
.bt-platform__badge {
	position: absolute;
	inset-block-end: 0.5rem;
	inset-inline-end: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 1.5rem;
	padding: 0 0.3rem;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1;
	color: #12151b;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.6);
}

/* ---------------------------------- *
 * 11. پابرگ روی پوستهٔ تیره
 * ---------------------------------- */

/*
 * پابرگ روی پوستهٔ تیره تمام‌عرض است: خودِ پابرگ سطح شیشه‌ای را می‌گیرد
 * و تا لبه‌های صفحه کشیده می‌شود، پس container دیگر قاب کارت نمی‌گیرد و
 * فقط بالشتک کناری می‌دهد. مرزِ بالا را یک خط نازک نشان می‌دهد.
 */
body.bt-dark .site-footer {
	/* نوار حق نشر همین بالشتک را با حاشیهٔ منفی خنثی می‌کند، پس متغیر شد. */
	--bt-footer-pad: clamp(1.25rem, 4vw, 4.5rem);

	margin-top: 1rem;
	padding: 0;
	color: var(--bt-muted);
	background: rgba(23, 24, 29, 0.72);
	border-top: 1px solid var(--bt-border);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

/* بدون سقفِ عرض، تا محتوای پابرگ هم مثل خودِ نوار تمام‌عرض بماند. */
body.bt-dark .site-footer .container {
	max-width: none;
	padding: 2.1rem var(--bt-footer-pad) 0;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	body.bt-dark .site-footer {
		background: var(--bt-surface);
	}
}

/* لوگوی پابرگ کمی کوچک‌تر از لوگوی سربرگ است. */
body.bt-dark .site-footer .custom-logo {
	height: 28px;
}

body.bt-dark .site-footer__about {
	max-width: 22rem;
	font-size: 0.82rem;
	line-height: 1.95;
	color: var(--bt-muted);
}

body.bt-dark .site-footer__social a,
body.bt-dark .site-footer__social span:not(.screen-reader-text) {
	color: #c5cbd6;
}

body.bt-dark .site-footer__social a {
	transition: color 0.15s ease;
}

body.bt-dark .site-footer__social a:hover,
body.bt-dark .site-footer__social a:focus {
	color: var(--bt-text);
}

/* لوگوی حامیان سفید و تک‌رنگ است؛ کمی کم‌رنگ‌تر روی زمینهٔ تیره می‌نشیند. */
body.bt-dark .site-footer__partners li {
	opacity: 0.8;
	transition: opacity 0.15s ease;
}

body.bt-dark .site-footer__partners li:hover {
	opacity: 1;
}

/*
 * در طرح، نوار حق نشر تا لبه‌های کارت کشیده می‌شود و ته‌رنگش یک پله
 * تیره‌تر از خودِ کارت است؛ پس بالشتک افقی container با حاشیهٔ منفی
 * خنثی می‌شود و به‌جای خط جداکننده، همین اختلاف رنگ مرز را نشان می‌دهد.
 * گوشه‌های پایین به اندازهٔ شعاع کارت (منهای ضخامت قاب) گرد می‌شوند تا
 * نوار از قاب بیرون نزند.
 */
body.bt-dark .site-footer__bottom {
	margin: 1.9rem calc(-1 * var(--bt-footer-pad)) 0;
	padding: 1.15rem var(--bt-footer-pad);
	background: rgba(0, 0, 0, 0.22);
	border-top: 0;
	border-radius: 0 0 calc(var(--bt-radius) - 1px) calc(var(--bt-radius) - 1px);
}

body.bt-dark .site-info {
	font-size: 0.82rem;
	color: var(--bt-dim);
}

body.bt-dark .site-footer a {
	color: var(--bt-muted);
}

body.bt-dark .site-footer a:hover,
body.bt-dark .site-footer a:focus {
	color: var(--bt-text);
	opacity: 1;
	text-decoration: none;
}

/* ---------------------------------- *
 * 12. واکنش‌گرایی
 * ---------------------------------- */

/* چهار کارت زیر این عرض باریک و متن‌شان شکسته می‌شود، پس دو ستونه می‌شوند. */
@media (max-width: 1024px) {
	.bt-experts__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {
	.bt-hero {
		padding-top: 2.25rem;
	}

	.bt-hero__inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.bt-hero__copy {
		order: 1;
	}

	/*
	 * کارت‌ها از هم باز نمی‌شوند؛ همان ترکیبِ روی‌هم‌افتاده می‌ماند و فقط
	 * کوچک می‌شود (اندازه‌های درونی به --bt-u گره خورده‌اند). سقفِ عرض
	 * نمی‌گذارد ترکیب در تبلت از حالت دسکتاپ بزرگ‌تر شود.
	 */
	.bt-hero__visual {
		order: 2;
		max-width: 36rem;
		margin-inline: auto;
	}

	.bt-partners__list {
		gap: 2rem;
	}

	.bt-risk__inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.bt-risk__lead {
		max-width: none;
	}

	/* پنل زیر متن می‌رود و وسط‌چین می‌ماند تا در عرض کم کشیده نشود. */
	.bt-challenge__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.25rem;
	}

	.bt-challenge__copy,
	.bt-calc {
		grid-column: 1;
		grid-row: auto;
	}

	.bt-calc {
		max-width: 24rem;
		margin-inline: auto;
	}

	.bt-challenge__lead {
		max-width: none;
	}

	/* کاشی‌ها زیر متن می‌روند و وسط‌چین می‌مانند. */
	.bt-platforms__inner {
		grid-template-columns: minmax(0, 1fr);
		justify-content: normal;
		gap: 2.25rem;
	}

	.bt-platforms__image {
		margin-inline: auto;
	}

	.bt-platforms__list {
		justify-content: center;
	}
}

/*
 * فهرست موبایل روی پوستهٔ تیره. چیدمان و رفتارش در style.css تعریف شده و
 * اینجا فقط رنگ‌ها عوض می‌شوند: خطوط جداکنندهٔ روشنِ پیش‌فرض روی نوار
 * تیره بیش از حد به چشم می‌آیند.
 */
@media (max-width: 782px) {
	/* فاصلهٔ گشادِ دسکتاپ در عرض گوشی، لوگو و دکمه‌ها را به هم می‌چسباند. */
	body.bt-dark .site-header .container {
		gap: 0.6rem;
	}

	body.bt-dark .menu-toggle {
		color: var(--bt-text);
		border-color: var(--bt-border-strong);
	}

	/* فهرست وسط‌چینِ دسکتاپ در موبایل تمام‌عرض می‌شود. */
	body.bt-dark .main-navigation {
		margin-inline: 0;
	}

	body.bt-dark .main-navigation ul,
	body.bt-dark .main-navigation li + li {
		border-color: var(--bt-border);
	}

	body.bt-dark .main-navigation a {
		font-size: 1rem;
	}

	/* زیرمنو در موبایل داخل خودِ فهرست باز است، پس قاب و ته‌رنگ لازم ندارد. */
	body.bt-dark .main-navigation .sub-menu {
		background: none;
		border: 0;
		box-shadow: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	body.bt-dark .main-navigation .sub-menu a {
		font-size: 0.95rem;
	}

	body.bt-dark .main-navigation .sub-menu a:hover,
	body.bt-dark .main-navigation .sub-menu a:focus {
		background: none;
	}
}

@media (max-width: 600px) {
	.bt-hero__lead {
		max-width: none;
	}

	.bt-partners {
		padding-top: 3rem;
	}

	.bt-experts {
		padding: 2.5rem 0 3.5rem;
	}

	.bt-experts__grid {
		grid-template-columns: 1fr;
	}

	.bt-risk {
		padding: 0 0 3.5rem;
	}

	/* در عرض کم، پنل جمع‌وجورتر می‌شود تا برچسب‌ها بریده نشوند. */
	.bt-panel {
		padding: 1.2rem 1.2rem 1.6rem;
	}

	.bt-panel__grid {
		gap: 0.85rem 0.7rem;
	}

	.bt-panel__label {
		font-size: 0.72rem;
	}

	.bt-panel__value {
		padding: 0.5rem 0.6rem;
		font-size: 0.8rem;
	}

	.bt-platforms {
		padding: 0 0 3.5rem;
	}

	/* سه کاشی باید کنار هم در عرض گوشی جا شوند، پس با عرض صفحه کوچک می‌شوند. */
	.bt-platform {
		width: clamp(4rem, 25vw, 5.5rem);
	}
}

/* هم‌پای style.css، تا دکمهٔ ورود در گوشی‌های باریک ردیف سربرگ را نشکند. */
@media (max-width: 420px) {
	body.bt-dark .site-cta {
		padding: 0.5rem 0.7rem;
		font-size: 0.85rem;
	}
}