/*
 * vatanconnect-theme-home.css — شیوه‌نامهٔ صفحهٔ اول، فقط روی لندینگ بارگذاری می‌شود.
 *
 * ⚠⚠ نسخهٔ ۲٫۰٫۰: عیناً از روی طرح همکار بازنویسی شد
 * (prd/vatanconnect/handoff-2026-09-09/dev-handoff/styles.css).
 *
 * ⚠ **هر قاعده زیر ریشهٔ `.vtc-l` است، بدون استثنا.** نام‌های طرح برهنه‌اند
 * (`.hero`، `.section`، `.btn`، `.step`) و اگر برهنه می‌ماندند روی هر صفحهٔ
 * دیگرِ سایت، روی پنل مشتری و روی هر افزونه‌ای نشت می‌کردند. ریشهٔ مستقل یعنی
 * بازطراحی صفحهٔ اول هیچ سطح دیگری را لمس نمی‌کند — که دقیقاً همان چیزی است
 * که +SHARED-SURFACE می‌خواهد.
 *
 * ⚠ مقدارهای رنگ از توکن‌های قالب می‌آیند، نه از عدد. سه رنگی که قالب نداشت
 * (خاکستریِ کم‌رنگِ طرح و دو تینتِ هشدار) همین‌جا و فقط برای همین ریشه ساخته
 * می‌شوند، تا پالت اصلی به‌خاطر یک صفحه بزرگ‌تر نشود.
 */

/* ============================================================================
   پایه — پیش از هر جزء
   ⚠ جعبه و کف‌های چروکیدگی. بدون این دو، `min-height` روی هر کنترل تبدیل به
   ارتفاعِ محتوا می‌شود و هر ستونِ شبکه زیر عرضِ ذاتیِ محتوایش قفل می‌ماند —
   یعنی همان دو خرابی‌ای که روی گوشی دیده نمی‌شوند و فقط بریده می‌شوند.
   ========================================================================= */

.vtc-l { box-sizing: border-box; }
.vtc-l *,
.vtc-l *::before,
.vtc-l *::after { box-sizing: inherit; }

.vtc-l {
	/* خاکستریِ کم‌رنگِ طرح (`--surface-dim-300`) — فقط متن‌های فرعیِ ریز. */
	--vtc-l-dim: #8a8890;
	/* تینت و لبهٔ جعبهٔ هشدار، از رنگ خطای قالب ساخته می‌شوند. */
	--vtc-l-warn-bg: rgba(162, 75, 69, .07);
	--vtc-l-warn-line: rgba(162, 75, 69, .25);
	/* لبه و زمینهٔ روشنِ روی سطح تیره. */
	--vtc-l-on-dark-bg: rgba(248, 247, 251, .08);
	--vtc-l-on-dark-line: rgba(248, 247, 251, .18);

	/* ⚠ آبیِ **تزئینیِ** طرح، عیناً `#4a80a4`، و فقط برای بومِ قهرمان.
	   این تنها رنگی از طرح است که نمی‌تواند همه‌جا عیناً منتقل شود: روی زمینهٔ
	   صفحه ۴٫۰۱ به ۱ اندازه‌گیری شده — زیر کف ۴٫۵ — و در طرح، رنگِ *هر لینک و
	   هر دکمهٔ فرعی* است. پس متن‌ها روی `--vtc-secondary` می‌مانند که موتور
	   پالت خودش تا کف بالا می‌بَرد، و مقدارِ خامِ طرح فقط جایی می‌نشیند که
	   هیچ‌کس آن را نمی‌خوانَد: نقطه‌ها و خط‌های بوم. */
	--vtc-l-deco-blue: #4a80a4;
}

.vtc-l-container {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--vtc-space-16);
}

/* هر آیتمِ شبکه اجازهٔ کوچک‌شدن می‌گیرد؛ بدون این، یک عدد بلند کل ردیف را
   پهن‌تر از صفحه می‌کند و اگر جدی از والدها `overflow:hidden` داشته باشد،
   بدون هیچ نوار پیمایشی بریده می‌شود. */
.vtc-l-steps > *,
.vtc-l-features > *,
.vtc-l-stats > * { min-width: 0; }

/* ============================================================================
   دکمه‌ها
   ========================================================================= */

.vtc-l-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--vtc-space-2);
	border: none;
	border-radius: var(--vtc-radius);
	font-family: inherit;
	font-weight: 600;
	font-size: 14.5px;
	padding: 11px 22px;
	text-decoration: none;
	cursor: pointer;
}

.vtc-l-btn--accent {
	background: var(--vtc-accent);
	/* ⚠ رنگِ متن روی کهربایی هرگز سفید نمی‌شود: ۱٫۸۸ به ۱ اندازه‌گیری شده بود.
	   `--vtc-on-accent` را خودِ قالب از رنگ انتخابیِ مالک حساب می‌کند. */
	color: var(--vtc-on-accent);
}

.vtc-l-btn--accent:hover,
.vtc-l-btn--accent:focus-visible { background: var(--vtc-accent-hover); color: var(--vtc-on-accent); }

.vtc-l-btn--lg {
	padding: 15px 30px;
	font-size: 15.5px;
	border-radius: var(--vtc-radius-full);
}

.vtc-l-btn svg { flex: 0 0 auto; }

/* ============================================================================
   قهرمان
   ========================================================================= */

.vtc-l-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, var(--vtc-plum-900), var(--vtc-plum-990));
	padding: var(--vtc-space-16);
}

.vtc-l-hero__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.vtc-l-hero__split {
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: var(--vtc-space-12);
	align-items: center;
	max-width: 1200px;
	margin-inline: auto;
}

.vtc-l-hero__split > * { min-width: 0; }

.vtc-l-hero__text { text-align: start; }

.vtc-l-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--vtc-space-2);
	background: var(--vtc-l-on-dark-bg);
	border: 1px solid var(--vtc-l-on-dark-line);
	padding: 8px var(--vtc-space-4);
	border-radius: var(--vtc-radius-full);
	margin: 0 0 var(--vtc-space-6);
}

.vtc-l-badge__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--vtc-accent);
	flex: 0 0 auto;
}

.vtc-l-badge__label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--vtc-on-dark-2);
}

.vtc-l-hero__title {
	font-family: var(--vtc-font-display);
	font-size: 48px;
	line-height: 1.25;
	font-weight: 800;
	color: var(--vtc-on-dark);
	margin: 0 0 var(--vtc-space-5);
	text-wrap: balance;
}

.vtc-l-hero__lead {
	font-size: 18px;
	line-height: 1.8;
	color: var(--vtc-on-dark-2);
	margin: 0 0 var(--vtc-space-8);
}

.vtc-l-hero__ctas { margin: 0 0 var(--vtc-space-6); }

.vtc-l-trust {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--vtc-space-3);
	margin: 0;
	/* ⚠ ۱۳px و نه کمتر: این خط روی زمینهٔ تیره است و همین الان کف است. */
	font-size: 13px;
	font-weight: 500;
	/* ⚠ طرح اینجا `--plum-500` (#7c7383) گذاشته بود که روی زمینهٔ برقع
	   ۳٫۰۹ به ۱ می‌شود — زیر کف خوانایی. یک پله روشن‌تر شد: ۵٫۲۴ به ۱. */
	color: var(--vtc-on-dark-3);
}

.vtc-l-trust__sep { color: var(--vtc-plum-500); }

/* ⚠ `min-width:0` روی خودِ ستون هم لازم است، نه فقط روی کارتِ داخلش: آیتمِ یک
   چیدمانِ انعطافی به‌صورت پیش‌فرض زیر عرضِ ذاتیِ محتوایش کوچک نمی‌شود. */
.vtc-l-hero__calc { display: flex; justify-content: center; min-width: 0; }
.vtc-l-hero__calc > * { max-width: 100%; }

/* ============================================================================
   بخش‌ها و سرِ بخش
   ========================================================================= */

.vtc-l-section { padding-block: var(--vtc-space-24); }
.vtc-l-section--alt { background: var(--vtc-surface); }
.vtc-l-section--tight { padding-block: var(--vtc-space-16); }

.vtc-l-head {
	text-align: center;
	margin-bottom: var(--vtc-space-12);
}

.vtc-l-head__title {
	font-family: var(--vtc-font-display);
	font-size: 28px;
	font-weight: 700;
	color: var(--vtc-brand);
	margin: 0 0 var(--vtc-space-3);
	text-wrap: balance;
}

.vtc-l-head__sub {
	color: var(--vtc-muted);
	font-size: 16px;
	line-height: 1.9;
	margin: 0;
	max-width: 620px;
	margin-inline: auto;
}

.vtc-l-head-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--vtc-space-4);
	flex-wrap: wrap;
	margin-bottom: var(--vtc-space-8);
}

.vtc-l-head-row > div { min-width: 0; }
.vtc-l-head-row .vtc-l-head__sub { margin-inline: 0; }

.vtc-l-tag {
	/* ⚠ طرح ۱۱٫۵ دارد؛ کفِ ثبت‌شدهٔ این پروژه ۱۲ است و `check-ui-invariants`
	   همین سه مورد را گرفت. کف بر طرح مقدم است. */
	font-size: 12px;
	font-weight: 700;
	background: var(--vtc-gold-100);
	color: var(--vtc-gold-990);
	padding: 5px 10px;
	border-radius: var(--vtc-radius-full);
	white-space: nowrap;
}

.vtc-l-tag--block {
	display: inline-block;
	margin-top: var(--vtc-space-2);
	white-space: normal;
}

/* ============================================================================
   چهار مرحله
   ========================================================================= */

.vtc-l-steps-track {
	position: relative;
	max-width: 1200px;
	margin-inline: auto;
}

.vtc-l-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--vtc-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vtc-l-steps__line {
	position: absolute;
	inset-block-start: 25px;
	inset-inline: 12.5%;
	height: 0;
	border-top: 2px dashed var(--vtc-line);
}

.vtc-l-steps__dot {
	position: absolute;
	inset-block-start: 20px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--vtc-accent);
	/* ⚠ منطقی، نه فیزیکی: در راست‌به‌چپ نقطه باید از راست شروع کند. با
	   `left` ثابت، انیمیشن در فارسی برعکسِ ترتیب خواندنِ مرحله‌ها حرکت می‌کرد. */
	inset-inline-start: 12.5%;
	animation: vtc-l-step-dot 6s ease-in-out infinite alternate;
}

@keyframes vtc-l-step-dot {
	0%   { inset-inline-start: 87.5%; }
	33%  { inset-inline-start: 62.5%; }
	66%  { inset-inline-start: 37.5%; }
	100% { inset-inline-start: 12.5%; }
}

.vtc-l-step {
	text-align: center;
	padding-inline: var(--vtc-space-3);
}

.vtc-l-step__num {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--vtc-brand);
	color: var(--vtc-on-brand);
	font-family: var(--vtc-font-display);
	font-size: 19px;
	font-weight: 800;
	margin: 0 auto var(--vtc-space-5);
	font-variant-numeric: tabular-nums;
}

.vtc-l-step__title {
	font-family: var(--vtc-font-display);
	font-size: 18px;
	font-weight: 600;
	color: var(--vtc-brand);
	margin: 0 0 9px;
}

.vtc-l-step__text {
	font-size: 14px;
	color: var(--vtc-muted);
	line-height: 1.75;
	margin: 0;
}

/* ============================================================================
   کارت‌های قابلیت
   ========================================================================= */

.vtc-l-features {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--vtc-space-5);
	max-width: 1200px;
	margin-inline: auto;
}

.vtc-l-feature {
	background: var(--vtc-bg);
	border: 1px solid var(--vtc-line);
	border-radius: var(--vtc-radius-lg);
	padding: var(--vtc-space-6);
}

.vtc-l-feature__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: var(--vtc-radius);
	background: var(--vtc-blue-50);
	color: var(--vtc-secondary);
	margin-bottom: var(--vtc-space-4);
}

.vtc-l-feature__title {
	font-family: var(--vtc-font-display);
	font-size: 18px;
	font-weight: 600;
	color: var(--vtc-brand);
	margin: 0 0 8px;
}

.vtc-l-feature__text {
	font-size: 14px;
	color: var(--vtc-muted);
	line-height: 1.75;
	margin: 0;
}

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

.vtc-l-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--vtc-space-5);
	max-width: 1100px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.vtc-l-stat {
	display: flex;
	align-items: center;
	gap: var(--vtc-space-3);
	background: var(--vtc-surface);
	border: 1px solid var(--vtc-line);
	border-radius: var(--vtc-radius-lg);
	padding: var(--vtc-space-4);
}

.vtc-l-stat__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--vtc-radius-sm);
	background: var(--vtc-blue-50);
	color: var(--vtc-secondary);
	flex: 0 0 auto;
}

.vtc-l-stat__text { min-width: 0; }

.vtc-l-stat__num {
	display: block;
	font-weight: 700;
	font-size: 15px;
	color: var(--vtc-brand);
	font-variant-numeric: tabular-nums;
}

.vtc-l-stat__lbl {
	display: block;
	font-size: 12px;
	color: var(--vtc-muted);
}

/* ============================================================================
   متن بلند توضیحی
   ========================================================================= */

.vtc-l-explainer {
	max-width: 820px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--vtc-space-4);
}

.vtc-l-explainer__item {
	background: var(--vtc-bg);
	border: 1px solid var(--vtc-line);
	border-radius: var(--vtc-radius-lg);
	padding: var(--vtc-space-6) 28px;
}

.vtc-l-explainer__h {
	display: flex;
	align-items: center;
	gap: var(--vtc-space-3);
	font-family: var(--vtc-font-display);
	font-size: 18px;
	font-weight: 600;
	color: var(--vtc-brand);
	margin: 0 0 var(--vtc-space-3);
}

.vtc-l-explainer__n {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--vtc-blue-50);
	color: var(--vtc-secondary);
	font-size: 12.5px;
	font-weight: 800;
	flex: 0 0 auto;
}

.vtc-l-explainer__p {
	font-size: 14.5px;
	line-height: 1.9;
	color: var(--vtc-muted);
	margin: 0;
}

.vtc-l-warning {
	display: flex;
	align-items: flex-start;
	gap: var(--vtc-space-3);
	background: var(--vtc-l-warn-bg);
	border: 1px solid var(--vtc-l-warn-line);
	border-radius: var(--vtc-radius);
	padding: var(--vtc-space-4) var(--vtc-space-5);
	margin: var(--vtc-space-4) 0 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.8;
	color: var(--vtc-danger);
}

.vtc-l-warning svg { flex: 0 0 auto; margin-top: 2px; }

/* ============================================================================
   بنر فراخوان
   ========================================================================= */

.vtc-l-cta {
	padding-block: var(--vtc-space-16);
	background: linear-gradient(135deg, var(--vtc-plum-900), var(--vtc-plum-990));
	text-align: center;
}

.vtc-l-cta__title {
	font-family: var(--vtc-font-display);
	font-size: 27px;
	font-weight: 700;
	color: var(--vtc-on-dark);
	margin: 0 0 var(--vtc-space-3);
}

.vtc-l-cta__text {
	font-size: 14.5px;
	color: var(--vtc-on-dark-2);
	margin: 0 0 var(--vtc-space-6);
}

/* ============================================================================
   پرسش‌های متداول
   ⚠ `<details>` بومی. ظاهر از طرح، رفتار از پلتفرم — بدون جاوااسکریپت هم باز
   می‌شود و متن پاسخ همیشه داخل صفحه است.
   ========================================================================= */

.vtc-l-faq {
	max-width: 800px;
	margin-inline: auto;
}

.vtc-l-faq__item {
	background: var(--vtc-bg);
	border: 1px solid var(--vtc-line);
	border-radius: var(--vtc-radius-lg);
	margin-bottom: var(--vtc-space-3);
	overflow: hidden;
}

.vtc-l-section--alt .vtc-l-faq__item { background: var(--vtc-bg); }

.vtc-l-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vtc-space-4);
	padding: var(--vtc-space-5) var(--vtc-space-6);
	font-size: 14.5px;
	font-weight: 700;
	color: var(--vtc-brand);
	cursor: pointer;
	list-style: none;
}

.vtc-l-faq__q::-webkit-details-marker { display: none; }
.vtc-l-faq__q:focus-visible { outline: 2px solid var(--vtc-secondary); outline-offset: -2px; }

.vtc-l-faq__icon {
	color: var(--vtc-secondary);
	flex: 0 0 auto;
	transition: transform .15s ease;
}

.vtc-l-faq__item[open] .vtc-l-faq__icon { transform: rotate(45deg); }

.vtc-l-faq__a {
	padding: 0 var(--vtc-space-6) var(--vtc-space-5);
	font-size: 13.5px;
	color: var(--vtc-muted);
	line-height: 1.85;
	margin: 0;
}

/* ============================================================================
   چرخ‌فلک نظرها
   ⚠ بدون جاوااسکریپت هیچ کارتی `is-active` نمی‌گیرد، پس چیدمانِ پایه یک
   فهرست عمودیِ کامل است و اسکریپت آن را به چرخ‌فلک ارتقا می‌دهد. عکسِ این
   ترتیب یعنی خرابیِ اسکریپت = چهار کارتِ نامرئی.
   ========================================================================= */

.vtc-l-carousel {
	max-width: 640px;
	margin-inline: auto;
}

.vtc-l-carousel__stage {
	display: flex;
	flex-direction: column;
	gap: var(--vtc-space-4);
}

.vtc-l-voice {
	position: relative;
	background: var(--vtc-surface);
	border: 1px solid var(--vtc-line);
	border-radius: var(--vtc-radius-xl);
	padding: var(--vtc-space-8);
	box-shadow: var(--vtc-shadow-lg);
	margin: 0;
}

.vtc-l-voice__flag {
	position: absolute;
	inset-block-start: var(--vtc-space-4);
	inset-inline-end: var(--vtc-space-4);
	font-size: 12px;   /* کف پروژه؛ طرح ۱۱ داشت */
	font-weight: 700;
	background: var(--vtc-gold-100);
	color: var(--vtc-gold-990);
	padding: 3px 9px;
	border-radius: var(--vtc-radius-full);
}

.vtc-l-voice__mark {
	display: block;
	font-family: var(--vtc-font-display);
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
	color: var(--vtc-gold-700);
	margin-bottom: 6px;
}

.vtc-l-voice__quote {
	font-size: 14.5px;
	line-height: 1.9;
	color: var(--vtc-ink);
	margin: 0 0 var(--vtc-space-5);
}

.vtc-l-voice__who {
	display: flex;
	align-items: center;
	gap: var(--vtc-space-3);
}

.vtc-l-voice__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--vtc-gold-100);
	color: var(--vtc-brand);
	font-family: var(--vtc-font-display);
	font-weight: 800;
	font-size: 14px;
	flex: 0 0 auto;
}

.vtc-l-voice__name {
	display: block;
	font-weight: 700;
	font-size: 13px;
	color: var(--vtc-brand);
}

.vtc-l-voice__tag {
	display: block;
	font-size: 12px;   /* کف پروژه؛ طرح ۱۱٫۵ داشت */
	color: var(--vtc-muted);
}

/* --- ارتقا به چرخ‌فلک: فقط وقتی اسکریپت سوار شده باشد --- */

.vtc-l-carousel.is-live .vtc-l-carousel__stage {
	display: block;
	position: relative;
	min-height: 280px;
}

.vtc-l-carousel.is-live .vtc-l-voice {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	opacity: 0;
	transform: scale(.92) translateY(10px);
	pointer-events: none;
	transition: transform .3s ease, opacity .3s ease;
}

.vtc-l-carousel.is-live .vtc-l-voice.is-active {
	opacity: 1;
	transform: scale(1) translateY(0);
	pointer-events: auto;
	z-index: 3;
}

.vtc-l-carousel.is-live .vtc-l-voice.is-behind-1 { opacity: .55; transform: scale(.95) translateY(14px); z-index: 2; }
.vtc-l-carousel.is-live .vtc-l-voice.is-behind-2 { opacity: .3;  transform: scale(.9)  translateY(24px); z-index: 1; }

.vtc-l-carousel__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--vtc-space-5);
	margin-top: var(--vtc-space-5);
}

.vtc-l-carousel__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--vtc-surface);
	border: 1px solid var(--vtc-line);
	color: var(--vtc-brand);
	cursor: pointer;
}

.vtc-l-carousel__arrow:hover { border-color: var(--vtc-accent); }

.vtc-l-carousel__dots { display: flex; gap: var(--vtc-space-2); }

/*
 * ⚠ نقطه‌های اسلایدر: ظاهر ۷ پیکسل، هدفِ لمسی ۲۴ پیکسل.
 * اندازه‌گیری‌شده روی ۳۷۵: هر پنج نقطه ۷×۷ بودند، یعنی زیر کفِ ۲۴×۲۴ — روی
 * صفحهٔ لمسی عملاً غیرقابل‌زدن. خودِ نقطه با شبه‌عنصر کشیده می‌شود و دکمه فقط
 * ناحیهٔ لمس است، پس طرح دست‌نخورده می‌ماند و هدف بزرگ می‌شود.
 */
.vtc-l-carousel__dot {
	width: 24px;
	height: 24px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background .2s ease;
}

.vtc-l-carousel__dot::before {
	content: '';
	display: block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--vtc-line);
	transition: width .2s ease, background .2s ease;
}

.vtc-l-carousel__dot.is-active::before {
	background: var(--vtc-accent);
	width: 20px;
	border-radius: var(--vtc-radius-sm);
}

/* ============================================================================
   بخش تماس
   ========================================================================= */

.vtc-l-contact__inner {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: var(--vtc-space-10);
	align-items: start;
}

.vtc-l-contact__inner > * { min-width: 0; }
.vtc-l-contact .vtc-l-head__title { text-align: start; }
.vtc-l-contact .vtc-l-head__sub { text-align: start; margin-inline: 0; }

.vtc-l-contact__form {
	background: var(--vtc-surface);
	border: 1px solid var(--vtc-line);
	border-radius: var(--vtc-radius-xl);
	padding: var(--vtc-space-8);
	box-shadow: var(--vtc-shadow-sm);
}

/* ============================================================================
   گوشی و تبلت
   ========================================================================= */

@media (max-width: 900px) {
	.vtc-l-container,
	.vtc-l-hero { padding-inline: var(--vtc-space-6); }

	.vtc-l-hero__split { grid-template-columns: 1fr; }
	.vtc-l-hero__text { text-align: center; }
	.vtc-l-hero__ctas,
	.vtc-l-trust { justify-content: center; }
	.vtc-l-hero__title { font-size: 32px; }
	.vtc-l-hero__lead { font-size: 16px; }

	/* ⚠ روی دسکتاپ، کره پشتِ ستونِ خالیِ کنارِ متن می‌نشیند. در یک ستون، همان
	   کره دقیقاً زیر متنِ توضیح می‌آید و بخشی از جمله را می‌خورَد — روی ۳۷۵
	   دیده شد. کم‌رنگ‌تر می‌شود تا تزئین بماند و رقیبِ متن نشود. */
	.vtc-l-hero__canvas { opacity: .5; }

	.vtc-l-steps,
	.vtc-l-features,
	.vtc-l-stats,
	.vtc-l-contact__inner { grid-template-columns: 1fr; }

	.vtc-l-steps__line,
	.vtc-l-steps__dot { display: none; }

	.vtc-l-section { padding-block: var(--vtc-space-16); }
}

/* ============================================================================
   ظاهرشدن هنگام پیمایش
   ⚠ حالت پایه **دیده‌شده** است و اسکریپت اول `is-armed` را می‌نویسد و بعد
   مشاهده‌گر را سوار می‌کند. اگر اسکریپت اجرا نشود — یا مشاهده‌گر پشتیبانی
   نشود — صفحه کاملاً عادی دیده می‌شود؛ عکسِ این ترتیب یعنی یک صفحهٔ سفید.
   ========================================================================= */

.vtc-l-reveal.is-armed {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s ease, transform .7s ease;
}

.vtc-l-reveal.is-armed.is-in-view {
	opacity: 1;
	transform: none;
}

.vtc-l-reveal.is-armed .vtc-l-steps > *,
.vtc-l-reveal.is-armed .vtc-l-features > *,
.vtc-l-reveal.is-armed .vtc-l-stats > * {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s ease, transform .6s ease;
}

.vtc-l-reveal.is-armed.is-in-view .vtc-l-steps > *,
.vtc-l-reveal.is-armed.is-in-view .vtc-l-features > *,
.vtc-l-reveal.is-armed.is-in-view .vtc-l-stats > * {
	opacity: 1;
	transform: none;
}

.vtc-l-reveal.is-armed .vtc-l-steps > *:nth-child(2),
.vtc-l-reveal.is-armed .vtc-l-features > *:nth-child(2),
.vtc-l-reveal.is-armed .vtc-l-stats > *:nth-child(2) { transition-delay: 80ms; }

.vtc-l-reveal.is-armed .vtc-l-steps > *:nth-child(3),
.vtc-l-reveal.is-armed .vtc-l-features > *:nth-child(3),
.vtc-l-reveal.is-armed .vtc-l-stats > *:nth-child(3) { transition-delay: 160ms; }

.vtc-l-reveal.is-armed .vtc-l-steps > *:nth-child(4),
.vtc-l-reveal.is-armed .vtc-l-features > *:nth-child(4),
.vtc-l-reveal.is-armed .vtc-l-stats > *:nth-child(4) { transition-delay: 240ms; }

.vtc-l-reveal.is-armed .vtc-l-features > *:nth-child(5) { transition-delay: 320ms; }
.vtc-l-reveal.is-armed .vtc-l-features > *:nth-child(6) { transition-delay: 400ms; }

/* ============================================================================
   کاهش حرکت — هر چیزی که خودش حرکت می‌کند، می‌ایستد.
   ⚠ بومِ قهرمان اینجا هم پنهان می‌شود و اسکریپتش هم جدا کنار می‌کشد: یکی از
   این دو ممکن است اجرا نشود، هر دو نه.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	.vtc-l-hero__canvas { display: none; }
	.vtc-l-steps__dot { animation: none; inset-inline-start: 50%; }

	.vtc-l-reveal.is-armed,
	.vtc-l-reveal.is-armed .vtc-l-steps > *,
	.vtc-l-reveal.is-armed .vtc-l-features > *,
	.vtc-l-reveal.is-armed .vtc-l-stats > * {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.vtc-l-carousel.is-live .vtc-l-voice,
	.vtc-l-carousel__dot,
	.vtc-l-carousel__dot::before,
	.vtc-l-faq__icon { transition: none; }
}