/*
Theme Name: Ant Studio
Theme URI: https://antstudio.example
Description: چایلد تم آژانس دیجیتال مارکتینگ «انت استودیو» روی Hello Elementor. کاملا RTL، فونت فارسی لوکال، سیستم طراحی مطابق elementor-docs/01-design-system.md
Author: Ant Studio
Template: hello-elementor
Version: 1.0.0
Text Domain: ant-studio
*/

/* ============ فونت لوکال ============ */
/*
 * ایران‌یکان X — نسخه‌ی Variable، لوکال (بدون CDN).
 * فونت مالکیتی است: کد لایسنس خود را در assets/fonts/IRANYekanX-LICENSE.txt درج کن
 * و آن فایل را همراه فونت‌ها نگه دار.
 */
@font-face {
	font-family: 'IRANYekanX';
	src: url('assets/fonts/IRANYekanXVF.woff2') format('woff2-variations'),
		url('assets/fonts/IRANYekanXVF.woff') format('woff');
	font-weight: 100 1000;
	font-style: normal;
	font-display: swap;
}

/* ============ توکن‌های سیستم طراحی ============ */
:root {
	/*
	 * پالت هم‌راستا با نسخه‌ی اول رابط (service-451810447265.europe-west2.run.app):
	 * سرمه‌ای #151B2B برای سکشن‌های تیره، پس‌زمینه‌ی روشن #F8FAFC، کارت سفید با بوردر #F1F5F9.
	 */
	--navy: #151B2B;
	--navy-800: #1F2739;
	--ink: #0F172A;
	--brand: #F15A29;
	--brand-hover: #D9481D;
	--slate-50: #F8FAFC;
	--slate-200: #E2E8F0;
	--card-line: #F1F5F9;
	--slate-500: #64748B;
	--white: #FFFFFF;
	--accent: #16C79A;

	/* متن بدنه یک پله تیره‌تر از Slate-500 تا کنتراست روی پس‌زمینه‌ی Slate-50 هم از ۴.۵:۱ رد شود */
	--body: #475569;

	/*
	 * نارنجی برند روی سفید فقط ۳.۳۷:۱ کنتراست دارد و برای «متن» WCAG AA را رد می‌کند.
	 * پس دو مشتق تعریف می‌شود و رنگ اصلی برند دست‌نخورده برای پس‌زمینه/بوردر/آیکون می‌ماند:
	 *   --brand-text : لینک و برچسب روی پس‌زمینه‌ی روشن (۵.۹:۱ روی سفید، ۵.۶:۱ روی Slate-50)
	 * متن روی دکمه‌ی نارنجی سفید است (مثل مرجع) و با ۱۹px/۷۰۰ در رده‌ی «متن بزرگ» AA قرار می‌گیرد.
	 */
	--brand-text: #B23C14;

	--wrap: 1200px;
	--r: 16px;      /* شعاع کارت‌ها، مطابق مرجع */
	--r-btn: 8px;   /* شعاع دکمه‌ها، مطابق مرجع */
	--shadow: 0 8px 30px rgba(11, 27, 52, .06);
	--sec-y: 96px;
	--hero-y: 128px;  /* هیرو در مرجع بلندتر از بقیه سکشن‌هاست */
	--gap: 24px;

	/* شبکه ۱۲ ستونی و مقیاس فاصله‌ی مضرب ۸ (Swiss) */
	--cols: 12;
	--s1: 8px;
	--s2: 16px;
	--s3: 24px;
	--s4: 32px;
	--s5: 48px;
	--s6: 64px;
	--s7: 96px;

	--dur: .25s;
	--ease: cubic-bezier(.2, .8, .2, 1);
}

@media (max-width: 767px) {
	:root {
		--sec-y: 56px;
	}
}

/* ============ پایه ============ */
* {
	box-sizing: border-box;
}

/* عناصر فرم فونت را ارث نمی‌برند و به فونت پیش‌فرض مرورگر می‌افتند */
button, input, select, textarea {
	font-family: inherit;
}

body {
	margin: 0;
	font-family: 'IRANYekanX', Tahoma, sans-serif;
	font-size: 17px;
	line-height: 1.9;
	color: var(--body);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	font-variant-numeric: proportional-nums;
}

h1, h2, h3, h4 {
	color: var(--ink);
	line-height: 1.4;
	margin: 0 0 var(--s2);
	text-wrap: balance;
}

h1 {
	font-size: clamp(34px, 5.6vw, 60px);
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -.4px;
}

h2 {
	font-size: clamp(27px, 3.6vw, 40px);
	font-weight: 700;
	line-height: 1.34;
	letter-spacing: -.2px;
}

h3 {
	font-size: 22px;
	font-weight: 600;
}

/* اعداد در جدول‌ها و شمارنده‌ها هم‌عرض شوند تا در انیمیشن نپرند */
.counter b, .tier li span, .step__n, .kicker span {
	font-variant-numeric: tabular-nums;
}

p {
	margin: 0 0 16px;
}

a {
	color: var(--brand-text);
	text-decoration: none;
}

a:hover {
	color: var(--navy);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

.wrap {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: 24px;
}

.sec {
	padding-block: var(--sec-y);
}

.sec--light {
	background: var(--slate-50);
}

.sec--navy {
	background: var(--navy);
}

.sec--navy, .sec--navy h1, .sec--navy h2, .sec--navy h3 {
	color: var(--white);
}

.sec--navy p {
	color: rgba(255, 255, 255, .78);
}

.sec__head {
	max-width: 46ch;
	margin-bottom: var(--s5);
}

.sec__head--center {
	margin-inline: auto;
	text-align: center;
}

.sec__head h2 {
	margin-bottom: var(--s2);
}

.sec__head p {
	margin: 0;
	font-size: 18px;
}

/*
 * برچسب سکشن به سبک سوئیسی: شماره + خط افقی + عنوان کوتاه.
 * سلسله‌مراتب را بدون افزودن رنگ یا افکت اضافه روشن می‌کند.
 */
.kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: var(--s2);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .4px;
	color: var(--brand-text);
	text-transform: none;
}

.kicker::after {
	content: '';
	height: 1px;
	flex: 1;
	max-width: 72px;
	background: var(--slate-200);
}

.sec__head--center .kicker {
	justify-content: center;
}

.sec__head--center .kicker::before {
	content: '';
	height: 1px;
	flex: 1;
	max-width: 72px;
	background: var(--slate-200);
}

.sec--navy .kicker {
	color: rgba(255, 255, 255, .72);
}

.sec--navy .kicker::after, .sec--navy .kicker::before {
	background: rgba(255, 255, 255, .22);
}

.lead {
	font-size: 19px;
	max-width: 62ch;
}

/* شبکه ۱۲ ستونی برای چیدمان‌های نامتقارن */
.g12 {
	display: grid;
	grid-template-columns: repeat(var(--cols), 1fr);
	gap: var(--s5) var(--gap);
	align-items: start;
}

.g12 > .col-5 {
	grid-column: span 5;
}

.g12 > .col-7 {
	grid-column: span 7;
}

@media (max-width: 900px) {
	.g12 > .col-5, .g12 > .col-7 {
		grid-column: 1 / -1;
	}
}

/* ============ دکمه‌ها ============ */
/* حلقه‌ی فوکوس یکسان برای همه‌ی عناصر تعاملی (کیبورد) */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--brand);
	outline-offset: 3px;
	border-radius: 6px;
}

.sec--navy a:focus-visible, .site-footer a:focus-visible, .hero--dark a:focus-visible {
	outline-color: var(--white);
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 13px 28px;
	border-radius: var(--r-btn);
	/*
	 * ۱۹px/۷۰۰ عمدی است: سفید روی نارنجی ۳.۳۷:۱ می‌شود که برای متن معمولی مردود
	 * ولی برای «متن بزرگ» (≥۱۸.۶۶px و bold) حد WCAG سه‌به‌یک است و قبول می‌شود.
	 * این‌طور هم رنگ دکمه مثل مرجع می‌ماند و هم AA رعایت می‌شود.
	 */
	font-size: 19px;
	font-weight: 700;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.btn:active {
	transform: scale(.98);
}

.btn--primary {
	background: var(--brand);
	color: var(--white);
}

.btn--primary:hover {
	background: var(--brand-hover);
	color: var(--white);
}

.btn--ghost {
	border-color: var(--slate-200);
	color: var(--navy);
	background: transparent;
}

.btn--ghost:hover {
	border-color: var(--brand);
	color: var(--brand-text);
}

.sec--navy .btn--ghost {
	border-color: rgba(255, 255, 255, .35);
	color: var(--white);
}

.btns {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 32px;
}

/* ============ آیکون ============ */
/*
 * display لازم است: span پیش‌فرض inline است و width/height روی آن اعمال نمی‌شود،
 * در نتیجه svg داخلی «۱۰۰٪» را نسبت به عرض کارت حساب می‌کند و غول‌پیکر می‌شود.
 */
.ic {
	display: inline-flex;
	width: 24px;
	height: 24px;
	flex: none;
}

.ic svg {
	width: 100%;
	height: 100%;
	display: block;
}

.ic--lg {
	width: 34px;
	height: 34px;
}

/* فلش «بیشتر» در RTL باید به سمت چپ باشد */
.more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	font-size: 15px;
}

.more .ic {
	width: 18px;
	height: 18px;
	transition: transform .25s;
}

.more:hover .ic {
	transform: translateX(-4px);
}

/* ============ گرید و کارت ============ */
.grid {
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(var(--cols, 3), 1fr);
}

/*
 * پنج کارت روی شبکه‌ی ۶ ستونی: ردیف اول ۳ کارت، ردیف دوم ۲ کارت پهن‌تر.
 * از فشرده‌شدن پنج ستون باریک در ۱۲۰۰px جلوگیری می‌کند (تعادل نامتقارن سوئیسی).
 */
@media (min-width: 1025px) {
	.grid[style*="--cols:5"] {
		grid-template-columns: repeat(6, 1fr);
	}

	.grid[style*="--cols:5"] > * {
		grid-column: span 2;
	}

	.grid[style*="--cols:5"] > :nth-child(4),
	.grid[style*="--cols:5"] > :nth-child(5) {
		grid-column: span 3;
	}
}

@media (max-width: 1024px) {
	.grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.grid {
		grid-template-columns: 1fr;
	}
}

.card {
	position: relative;
	background: var(--white);
	border: 1px solid var(--card-line);
	border-radius: var(--r);
	padding: var(--s4);
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow: hidden;
	transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* خط تاکید بالای کارت — تنها تزئین مجاز، فقط در حالت هاور دیده می‌شود */
.card::before {
	content: '';
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: var(--brand);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--dur) var(--ease);
}

a.card:hover::before, a.card:focus-visible::before {
	transform: scaleX(1);
}

.card h3 {
	margin: 0;
	font-size: 20px;
}

.card p {
	margin: 0;
	font-size: 16px;
	color: var(--body); /* کارت لینک است؛ بدون این، متن رنگ لینک را ارث می‌برد */
}

.card .more {
	margin-top: auto;
	padding-top: 12px;
}

.card__icon {
	color: var(--navy);
	transition: color .3s;
	margin-bottom: 6px;
}

a.card:hover, a.card:focus-visible {
	transform: translateY(-6px);
	border-color: var(--navy);
	box-shadow: var(--shadow);
}

.card:hover .card__icon {
	color: var(--brand);
}

.card--sm {
	padding: 20px;
}

.card--sm h3 {
	font-size: 17px;
}

.sec--navy .card {
	background: var(--navy-800);
	border-color: rgba(255, 255, 255, .12);
	box-shadow: none;
}

.sec--navy .card h3 {
	color: var(--white);
}

.sec--navy .card__icon {
	color: var(--white);
}

/* ============ جای‌نگه‌دار تصویر (تا آپلود تصاویر واقعی) ============ */
/* نسخه‌ی طراحی‌شده: گرادیان برند + آیکون بزرگ محو + برچسب. */
.ph--art {
	background: linear-gradient(135deg, var(--navy) 0%, var(--navy-800) 55%, var(--brand) 100%);
	border: 0;
	color: var(--white);
	position: relative;
	overflow: hidden;
	font-weight: 500;
	text-shadow: 0 1px 12px rgba(11, 27, 52, .45);
}

.ph--art::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .16), transparent 55%);
}

.ph--art .ic--art {
	position: absolute;
	inset-inline-end: -4%;
	bottom: -10%;
	width: 48%;
	height: auto;
	aspect-ratio: 1;
	opacity: .18;
}

.ph--art span {
	position: relative;
	padding: 8px 12px;
}

/* تنوع رنگ بین آیتم‌های یک گالری/گرید تا تکراری به‌نظر نرسد */
.gal > :nth-child(3n+2) .ph--art, .grid > :nth-child(3n+2) .ph--art {
	background: linear-gradient(135deg, var(--navy) 0%, #1b3b6b 60%, var(--accent) 100%);
}

.gal > :nth-child(3n+3) .ph--art, .grid > :nth-child(3n+3) .ph--art {
	background: linear-gradient(200deg, var(--brand-hover) 0%, var(--navy-800) 70%);
}

.collage > :nth-child(even) .ph--art {
	background: linear-gradient(160deg, var(--navy-800), var(--brand));
}

.ph {
	background: var(--slate-50);
	border: 1px dashed var(--slate-200);
	border-radius: var(--r);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 16px;
	font-size: 14px;
	color: var(--slate-500);
	aspect-ratio: var(--ar, 4 / 3);
	overflow: hidden;
}

figure {
	margin: 0;
}

figure img {
	border-radius: var(--r);
	width: 100%;
}

/* تصویری که باید نسبت قاب مشخصی را نگه دارد (گالری ۹:۱۶، مربع، هیرو) */
.fig--ar img {
	aspect-ratio: var(--ar, 4 / 3);
	object-fit: cover;
}

figcaption {
	font-size: 14px;
	padding-top: 10px;
}

/* ============ هیرو ============ */
.hero {
	padding-block: var(--hero-y);
	border-bottom: 1px solid var(--slate-200);
	position: relative;
	overflow: hidden;
}

/* بافت شبکه‌ای بسیار کم‌رنگ در هیروهای روشن — امضای بصری سوئیسی، بدون شلوغی */
.hero:not(.hero--dark)::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, var(--slate-200) 1px, transparent 1px) 0 0 / calc(100% / 6) 100%,
		linear-gradient(180deg, var(--slate-50), transparent 60%);
	opacity: .5;
	pointer-events: none;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, .5), transparent 70%);
}

.hero .wrap {
	position: relative;
}

/* چیدمان نامتقارن ۷/۵ به‌جای دو ستون مساوی */
.hero__grid {
	display: grid;
	gap: var(--s6) var(--s5);
	align-items: center;
	grid-template-columns: 7fr 5fr;
}

@media (max-width: 900px) {
	.hero__grid {
		grid-template-columns: 1fr;
	}
}

.hero--center .hero__body {
	max-width: 880px;
	margin-inline: auto;
	text-align: center;
}

/* تیتر فارسی با کلمات کوتاه نباید سه‌تکه شود؛ balance خودش نقطه‌ی شکست را انتخاب می‌کند */
.hero--center h1 {
	text-wrap: balance;
	max-width: 18ch;
	margin-inline: auto;
}

.hero--center .hero__body .lead {
	max-width: 58ch;
	margin-inline: auto;
}

.hero--center h1 {
	max-width: none;
}

.hero--center .btns {
	justify-content: center;
}

/* قاب تصویر هیرو: یک لایه‌ی جابه‌جاشده پشت تصویر به‌عنوان تنها عنصر تزئینی */
.hero__media {
	position: relative;
}

.hero__media::after {
	content: '';
	position: absolute;
	inset-block: 18px -18px;
	inset-inline: -18px 18px;
	border: 1px solid var(--brand);
	border-radius: var(--r);
	z-index: -1;
	opacity: .45;
}

@media (max-width: 900px) {
	.hero__media::after {
		display: none;
	}
}

/* نوار آمار زیر هیرو — سیگنال اعتماد طبق الگوی Enterprise Gateway */
.hero__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--s3);
	margin-top: var(--s6);
	padding-top: var(--s4);
	border-top: 1px solid var(--slate-200);
}

.hero__stat b {
	display: block;
	font-size: 30px;
	font-weight: 700;
	color: var(--navy);
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}

.hero__stat span {
	font-size: 15px;
}

.hero--dark .hero__stats {
	border-color: rgba(255, 255, 255, .18);
}

.hero--dark .hero__stat b {
	color: var(--white);
}

.hero--dark .hero__stat span {
	color: rgba(255, 255, 255, .72);
}

.hero--dark {
	background: linear-gradient(135deg, var(--navy) 0%, var(--navy-800) 100%);
	background-size: cover;
	background-position: center;
	border-bottom: 0;
}

.hero--dark h1, .hero--dark h2 {
	color: var(--white);
}

.hero--dark p {
	color: rgba(255, 255, 255, .8);
}

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .3px;
	color: var(--brand-text);
	margin-bottom: var(--s3);
}

.hero__eyebrow::before {
	content: '';
	width: 28px;
	height: 2px;
	background: currentColor;
}

.hero--center .hero__eyebrow {
	justify-content: center;
}

.hero--dark .hero__eyebrow {
	color: rgba(255, 255, 255, .85);
}

/* کولاژ هیرو صفحه اصلی: تصویر اول تمام‌عرض، بقیه دوستونه */
.collage {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--s2);
}

.collage > :first-child {
	grid-column: 1 / -1;
}

.collage > :first-child img, .collage > :first-child .ph {
	aspect-ratio: 16 / 9;
}

.collage img, .collage .ph {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

/* آخرین تصویر در ردیف ناقص، تمام‌عرض شود تا جای خالی نماند */
.collage > :last-child:nth-child(even) {
	grid-column: 1 / -1;
}

.collage > :last-child:nth-child(even) img {
	aspect-ratio: 21 / 9;
}

/* ============ زیگ‌زاگ ============ */
.zig {
	display: grid;
	gap: 48px;
	align-items: center;
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 900px) {
	.zig {
		grid-template-columns: 1fr;
	}
}

.zig--flip .zig__media {
	order: 2;
}

/* ============ گام‌ها / تایم‌لاین / قیف ============ */
.steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s2);
	max-width: 860px;
	position: relative;
}

/* خط عمودی پیوستگی فرایند — پشت شماره‌ها */
.steps:not(.steps--funnel)::before {
	content: '';
	position: absolute;
	inset-block: 32px;
	inset-inline-start: 45px; /* هم‌راستا با مرکز دایره‌ی شماره در جهت شروع (راست در RTL) */
	width: 1px;
	background: var(--slate-200);
}

@media (max-width: 767px) {
	.steps:not(.steps--funnel)::before {
		display: none;
	}
}

.step {
	display: flex;
	gap: var(--s3);
	align-items: flex-start;
	background: var(--white);
	border: 1px solid var(--slate-200);
	border-radius: var(--r);
	padding: var(--s3);
	position: relative;
	transition: border-color var(--dur) var(--ease);
}

.step:hover {
	border-color: var(--navy);
}

.step__n {
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--navy);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 15px;
	box-shadow: 0 0 0 6px var(--white);
}

.sec--light .step__n {
	box-shadow: 0 0 0 6px var(--slate-50);
}

.step h3 {
	font-size: 19px;
	margin-bottom: 4px;
}

.step p {
	margin: 0;
	font-size: 16px;
}

/* قیف: هر پله باریک‌تر از پله قبل */
.steps--funnel {
	margin-inline: auto;
	align-items: center;
}

.steps--funnel .step {
	width: 100%;
}

.steps--funnel .step:nth-child(2) {
	width: 92%;
}

.steps--funnel .step:nth-child(3) {
	width: 84%;
}

.steps--funnel .step:nth-child(4) {
	width: 76%;
}

.steps--funnel .step:nth-child(5) {
	width: 68%;
}

@media (max-width: 767px) {
	.steps--funnel .step {
		width: 100% !important;
	}
}

/* ============ باکس مزایا ============ */
.benefits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.benefit {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: var(--white);
	border: 1px solid var(--slate-200);
	border-radius: var(--r);
	padding: var(--s3);
	transition: border-color var(--dur) var(--ease);
}

.benefit:hover {
	border-color: var(--accent);
}

/* آیکون تیک در یک دیسک روشن — تنها جایی که رنگ Accent مجاز است */
.benefit .ic {
	width: 34px;
	height: 34px;
	flex: none;
	padding: 6px;
	border-radius: 50%;
	background: rgba(22, 199, 154, .12);
	color: #0E9B78;
	margin-top: 2px;
}

.benefit span {
	color: var(--navy);
	font-weight: 500;
	line-height: 1.7;
}

/* ============ گالری ============ */
.gal {
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(var(--cols, 3), 1fr);
}

@media (max-width: 767px) {
	.gal {
		grid-template-columns: 1fr;
	}
}

/* گالری نامنظم */
.gal--masonry {
	grid-auto-rows: 10px;
}

.gal--masonry > * {
	grid-row: span 22;
}

.gal--masonry > :nth-child(3n+2) {
	grid-row: span 30;
}

/* گالری فضای‌سفید‌دار (عکاسی محصول) */
.gal--wide {
	--cols: 2;
	gap: 48px;
}

.gal--wide .ph {
	--ar: 4 / 5;
}

/* تامبنیل ۹:۱۶ (کاور ریلز، استوری) */
.gal--thumbs .ph {
	--ar: 9 / 16;
}

.gal img {
	transition: transform .4s;
}

.gal figure {
	overflow: hidden;
	border-radius: var(--r);
}

.gal figure:hover img {
	transform: scale(1.05);
}

/* دو قاب نامتقارن: پست ۱:۱ و استوری ۹:۱۶ */
.frames {
	display: grid;
	grid-template-columns: 6fr 4fr;
	gap: var(--gap);
	align-items: start;
}

@media (max-width: 767px) {
	.frames {
		grid-template-columns: 1fr;
	}
}

.frames .frame--post .ph {
	--ar: 1 / 1;
}

.frames .frame--story .ph {
	--ar: 9 / 16;
}

.frames h3 {
	font-size: 18px;
	margin-bottom: 12px;
}

/* اسپسیمن هویت بصری */
.swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.swatch {
	width: 56px;
	height: 56px;
	border-radius: 10px;
	border: 1px solid var(--slate-200);
}

.specimen__type p {
	margin: 0 0 6px;
	color: var(--navy);
}

/* ============ مقایسه قبل/بعد ============ */
.compare {
	display: grid;
	gap: var(--gap);
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 767px) {
	.compare {
		grid-template-columns: 1fr;
	}
}

.compare__side h3 {
	font-size: 18px;
}

.compare__side--after h3 {
	color: var(--brand);
}

/* ============ تب‌ها ============ */
.tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	border-bottom: 1px solid var(--slate-200);
	margin-bottom: 28px;
}

.tabs__btn {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 12px 18px;
	font: inherit;
	font-weight: 500;
	color: var(--slate-500);
	cursor: pointer;
	margin-bottom: -1px;
}

.tabs__btn[aria-selected="true"] {
	color: var(--brand);
	border-bottom-color: var(--brand);
}

.tabs__panel[hidden] {
	display: none;
}

.tabs__panel ul {
	padding-inline-start: 20px;
}

/* ============ حباب گفتگو ============ */
.chat {
	max-width: 520px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.bubble {
	padding: 14px 18px;
	border-radius: 18px;
	max-width: 82%;
	font-size: 16px;
}

.bubble--q {
	background: var(--slate-50);
	border: 1px solid var(--slate-200);
	color: var(--navy);
	align-self: flex-start;
	border-start-start-radius: 4px;
}

.bubble--a {
	background: var(--brand);
	color: var(--white);
	align-self: flex-end;
	border-start-end-radius: 4px;
}

/* ============ مقایسه پکیج ============ */
.tiers {
	display: grid;
	gap: var(--gap);
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 767px) {
	.tiers {
		grid-template-columns: 1fr;
	}
}

.tier {
	background: var(--white);
	border: 1px solid var(--slate-200);
	border-radius: var(--r);
	padding: 32px 28px;
	box-shadow: var(--shadow);
}

.tier--hl {
	border: 2px solid var(--brand);
	position: relative;
}

.tier__badge {
	position: absolute;
	top: -14px;
	inset-inline-start: 28px;
	background: var(--brand);
	color: var(--white);
	font-size: 13px;
	font-weight: 500;
	padding: 4px 14px;
	border-radius: 999px;
}

.tier ul {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}

.tier li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid var(--slate-200);
	font-size: 16px;
}

.tier li b {
	color: var(--navy);
	font-weight: 500;
}

/* ============ آمار ============ */
.counters {
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	text-align: center;
}

.counter b {
	display: block;
	font-size: clamp(34px, 5vw, 50px);
	font-weight: 700;
	color: var(--navy);
	line-height: 1.3;
}

.sec--navy .counter b {
	color: var(--white);
}

.counter span {
	font-size: 16px;
}

/* ============ نقل‌قول و نظر مشتری ============ */
.quote {
	max-width: 820px;
	margin-inline: auto;
	text-align: center;
	font-size: clamp(22px, 3vw, 32px);
	font-weight: 600;
	color: var(--navy);
	line-height: 1.7;
}

.sec--navy .quote {
	color: var(--white);
}

.tm {
	background: var(--white);
	border: 1px solid var(--slate-200);
	border-radius: var(--r);
	padding: var(--s4) var(--s3) var(--s3);
	position: relative;
}

/* گیومه‌ی بزرگ تزئینی — نشانه‌ی نقل‌قول، نه رنگ اضافه */
.tm::before {
	content: '”';
	position: absolute;
	inset-block-start: 6px;
	inset-inline-end: 20px;
	font-size: 64px;
	line-height: 1;
	color: var(--slate-200);
	font-family: Georgia, serif;
}

.tm p {
	position: relative;
	color: var(--navy);
	font-size: 17px;
}

.tm__who {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
}

.tm__av {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--slate-50);
	border: 1px solid var(--slate-200);
	flex: none;
}

.tm__who b {
	display: block;
	color: var(--navy);
	font-weight: 500;
}

.tm__who small {
	font-size: 14px;
}

/* ============ لوگوی مشتریان ============ */
.logos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--gap);
	align-items: center;
}

.logo {
	height: 64px;
	border-radius: 10px;
	background: var(--white);
	border: 1px solid var(--slate-200);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: var(--slate-500);
	filter: grayscale(1);
	opacity: .75;
	transition: filter .3s, opacity .3s;
}

.logo:hover {
	filter: none;
	opacity: 1;
}

/* ============ FAQ (المان بومی details) ============ */
.faq {
	max-width: 820px;
}

.faq details {
	border: 1px solid var(--slate-200);
	border-radius: var(--r);
	background: var(--white);
	margin-bottom: 12px;
	padding: 4px 20px;
}

.faq summary {
	cursor: pointer;
	list-style: none;
	padding: 16px 0;
	font-weight: 500;
	color: var(--navy);
	display: flex;
	justify-content: space-between;
	gap: 12px;
	align-items: center;
}

.faq summary::-webkit-details-marker {
	display: none;
}

.faq summary .ic {
	transition: transform .25s;
	color: var(--brand);
}

.faq details[open] summary .ic {
	transform: rotate(180deg);
}

.faq p {
	margin: 0 0 16px;
}

/* ============ نوار CTA ============ */
.cta-band {
	text-align: center;
}

.cta-band .wrap > * {
	margin-inline: auto;
}

.cta-band p {
	max-width: 620px;
}

/* ============ هدر ============ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--slate-200);
	transition: box-shadow .3s, padding .3s;
}

.site-header.is-stuck {
	box-shadow: var(--shadow);
}

.site-header__in {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 84px;
	transition: min-height .3s;
}

.site-header.is-stuck .site-header__in {
	min-height: 66px;
}

.brand {
	display: flex;
	align-items: center;
	min-height: 44px;
	gap: 10px;
	font-size: 20px;
	font-weight: 700;
	color: var(--navy);
	flex: none;
}

.brand:hover {
	color: var(--navy);
}

.brand__mark {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--brand);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav {
	margin-inline: auto;
}

.nav > ul {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav a {
	display: block;
	padding: 10px 14px;
	border-radius: 8px;
	color: var(--navy);
	font-weight: 500;
}

.nav a:hover, .nav .is-current > a {
	color: var(--brand-text);
	background: var(--slate-50);
}

/* نشانگر صفحه‌ی جاری: خط نارنجی زیر آیتم، علاوه بر تغییر رنگ (رنگ به‌تنهایی کافی نیست) */
.nav > ul > li.is-current > a {
	position: relative;
}

.nav > ul > li.is-current > a::after {
	content: '';
	position: absolute;
	inset-inline: 14px;
	bottom: 2px;
	height: 2px;
	border-radius: 2px;
	background: var(--brand);
}

.has-mega {
	position: relative;
}

.has-mega > a .ic {
	width: 16px;
	height: 16px;
	display: inline-block;
	vertical-align: -3px;
	margin-inline-start: 4px;
}

/* مگامنو */
.mega {
	position: fixed;
	inset-inline: 0;
	top: var(--mega-top, 84px);
	background: var(--white);
	border-top: 1px solid var(--slate-200);
	box-shadow: var(--shadow);
	padding-block: 36px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity .25s, transform .25s, visibility .25s;
}

.has-mega:hover .mega, .has-mega:focus-within .mega, .mega.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.mega__in {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: 24px;
	display: grid;
	grid-template-columns: repeat(5, 1fr) 260px;
	gap: 28px;
}

@media (max-width: 1200px) {
	.mega__in {
		grid-template-columns: repeat(3, 1fr);
	}
}

.mega__col > a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 0 12px;
	font-weight: 600;
	color: var(--navy);
	border-bottom: 1px solid var(--slate-200);
	margin-bottom: 10px;
}

.mega__col > a .ic {
	color: var(--brand);
	width: 20px;
	height: 20px;
}

.mega__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mega__col ul a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 4px 0;
	font-weight: 400;
	font-size: 15px;
	color: var(--slate-500);
	background: none;
}

.mega__col ul a:hover {
	color: var(--brand);
	background: none;
}

.mega__promo {
	background: var(--navy);
	color: var(--white);
	border-radius: var(--r);
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 8px;
}

.mega__promo b {
	font-size: 18px;
}

.mega__promo p {
	color: rgba(255, 255, 255, .75);
	font-size: 15px;
	margin: 0;
}

.mega__promo a {
	color: var(--white);
	font-weight: 500;
}

.burger {
	appearance: none;
	background: none;
	border: 1px solid var(--slate-200);
	border-radius: 10px;
	padding: 9px;
	color: var(--navy);
	cursor: pointer;
	display: none;
}

.header-cta {
	flex: none;
}

@media (max-width: 1024px) {
	.burger {
		display: flex;
	}

	.header-cta {
		display: none;
	}

	.nav {
		display: none;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		background: var(--white);
		border-bottom: 1px solid var(--slate-200);
		box-shadow: var(--shadow);
		padding: 16px 24px 28px;
		max-height: calc(100dvh - 84px);
		overflow-y: auto;
	}

	.nav.is-open {
		display: block;
	}

	.nav > ul {
		flex-direction: column;
		gap: 2px;
	}

	.mega {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 0 0 8px;
		display: none;
	}

	.mega.is-open {
		display: block;
	}

	.mega__in {
		grid-template-columns: 1fr;
		padding-inline: 0;
		gap: 14px;
	}

	.mega__promo {
		display: none;
	}
}

/* ============ فوتر ============ */
.site-footer {
	background: var(--navy);
	color: rgba(255, 255, 255, .72);
	padding-top: 72px;
	font-size: 16px;
}

.site-footer h3 {
	color: var(--white);
	font-size: 17px;
	margin-bottom: 18px;
}

.site-footer a {
	color: rgba(255, 255, 255, .72);
}

.site-footer a:hover {
	color: var(--white);
}

.site-footer .brand, .site-footer .brand:hover {
	color: var(--white);
	margin-bottom: 16px;
}

.foot__cols {
	display: grid;
	gap: 40px;
	grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
}

@media (max-width: 1024px) {
	.foot__cols {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 600px) {
	.foot__cols {
		grid-template-columns: 1fr;
	}
}

.foot__cols ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* ارتفاع ۴۴px برای هر لینک فوتر — حداقل اندازه‌ی هدف لمسی */
.foot__cols ul a {
	display: flex;
	align-items: center;
	min-height: 44px;
}

.foot__cols ul li {
	display: flex;
	align-items: center;
	min-height: 44px;
}

.socials {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}

.socials a {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--navy-800);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white);
}

.socials a:hover {
	background: var(--brand);
}

.news {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

.news input {
	flex: 1;
	min-width: 0;
	background: var(--navy-800);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 10px;
	padding: 12px 14px;
	color: var(--white);
	font: inherit;
	font-size: 15px;
}

.news input::placeholder {
	color: rgba(255, 255, 255, .45);
}

.foot__bar {
	margin-top: 56px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding-block: 22px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	font-size: 14px;
}

.foot__bar ul a {
	display: flex;
	align-items: center;
	min-height: 44px;
}

.foot__bar ul {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 44px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ============ فرم تماس ============ */
.form {
	background: var(--white);
	border: 1px solid var(--slate-200);
	border-radius: var(--r);
	padding: 32px;
	box-shadow: var(--shadow);
	display: grid;
	gap: 16px;
}

.field {
	display: grid;
	gap: 8px;
}

.field label {
	color: var(--navy);
	font-weight: 500;
	font-size: 15px;
}

.field input, .field select, .field textarea {
	font: inherit;
	font-size: 16px;
	padding: 12px 14px;
	border: 1px solid var(--slate-200);
	border-radius: 10px;
	background: var(--white);
	color: var(--navy);
	width: 100%;
}

.field textarea {
	min-height: 140px;
	resize: vertical;
}

.field input:focus, .field select:focus, .field textarea:focus {
	outline: 2px solid var(--brand);
	outline-offset: 1px;
	border-color: var(--brand);
}

.form__note {
	font-size: 14px;
	margin: 0;
}

.notice {
	border-radius: 10px;
	padding: 14px 18px;
	font-size: 16px;
}

.notice--ok {
	background: rgba(22, 199, 154, .1);
	border: 1px solid var(--accent);
	color: #0d7a5f;
}

.notice--err {
	background: rgba(255, 77, 79, .08);
	border: 1px solid #ff4d4f;
	color: #a8181a;
}

.info {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: grid;
	gap: 18px;
}

.info li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.info .ic {
	color: var(--brand);
	margin-top: 5px;
}

.info b {
	display: block;
	color: var(--navy);
	font-weight: 500;
}

.map {
	border-radius: var(--r);
	overflow: hidden;
	border: 1px solid var(--slate-200);
}

.map iframe {
	display: block;
	width: 100%;
	height: 320px;
	border: 0;
}

/* ============ انیمیشن ورود (معادل whileInView) ============ */
[data-anim] {
	opacity: 0;
	transform: translateY(24px);
}

[data-anim].in-view {
	opacity: 1;
	transform: none;
	transition: opacity .7s ease-out var(--d, 0ms), transform .7s ease-out var(--d, 0ms);
}

/* ورود از کنار در RTL: از راست به مرکز */
[data-anim="side"] {
	transform: translateX(32px);
}

.no-js [data-anim], [data-anim].is-ready {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-anim] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	* {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

.skip-link {
	position: absolute;
	inset-inline-start: -9999px;
}

.skip-link:focus {
	inset-inline-start: 16px;
	top: 12px;
	z-index: 200;
	background: var(--white);
	padding: 10px 16px;
	border-radius: 8px;
	box-shadow: var(--shadow);
}