/* ============================================================
   صفحه اصلی — فقط روی front page لود می‌شود
   رنگ‌ها از توکن‌ها می‌آیند؛ سرمه‌ای ساختاری از نمونه تأییدشده.
   ============================================================ */

.isic-home { --ink: #0A1A30; --ink-2: #12293F; --line-dark: rgba(255,255,255,.14); }

/* ---------- قهرمان ---------- */
.isic-hero {
	position: relative;
	overflow: hidden;
	color: #fff;
	background:
		radial-gradient(900px 520px at 12% 0%, color-mix(in srgb, var(--brand-400) 22%, transparent), transparent 62%),
		radial-gradient(700px 480px at 92% 88%, color-mix(in srgb, var(--brand-600) 34%, transparent), transparent 60%),
		linear-gradient(168deg, #0A1A30 0%, #12293F 58%, #0A1A30 100%);
}
.isic-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
	background-size: 76px 76px;
	-webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 78%);
	mask-image: radial-gradient(circle at 50% 40%, #000, transparent 78%);
	opacity: .5;
}
.isic-hero > * { position: relative; z-index: 2; }

.isic-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: .72rem;
	letter-spacing: .16em;
	font-weight: 600;
	color: var(--brand-200);
	border: 1px solid color-mix(in srgb, var(--brand-400) 42%, transparent);
	background: color-mix(in srgb, var(--brand-400) 12%, transparent);
	padding: 7px 16px;
	border-radius: 999px;
	margin: 0;
}
.isic-hero h1 {
	font-weight: 900;
	font-size: clamp(2.1rem, 5.1vw, 3.85rem);
	line-height: 1.28;
	letter-spacing: -.02em;
	margin: 1.5rem 0 1.125rem;
}
.isic-hero h1 em { font-style: normal; color: var(--brand-300); }
.isic-hero .isic-lede {
	font-size: 1.08rem;
	line-height: 2;
	color: #C3D3E4;
	max-width: 34em;
	margin: 0;
}

/* دکمه‌های قهرمان */
.isic-hero .wp-block-button__link {
	border-radius: 999px;
	padding: 13px 28px;
	font-weight: 700;
	font-size: .96rem;
	transition: transform .18s, box-shadow .25s, background .2s;
}
.isic-hero .isic-btn-primary .wp-block-button__link {
	background: var(--brand-600);
	color: #fff;
	box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--brand-500) 80%, transparent);
}
.isic-hero .isic-btn-primary .wp-block-button__link:hover {
	background: var(--brand-500);
	transform: translateY(-2px);
}
.isic-hero .isic-btn-ghost .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 1px solid var(--line-dark);
}
.isic-hero .isic-btn-ghost .wp-block-button__link:hover {
	background: rgba(255,255,255,.07);
	transform: translateY(-2px);
}

/* ---------- گواهی دیجیتال ---------- */
.isic-cred-stage { perspective: 1400px; display: flex; justify-content: center; }

.isic-cred {
	position: relative;
	width: 100%;
	max-width: 430px;
	aspect-ratio: 1.586;
	border-radius: 20px;
	padding: 24px;
	color: #fff;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: linear-gradient(140deg, var(--brand-500) 0%, var(--brand-700) 46%, #16114F 100%);
	box-shadow: 0 36px 70px -26px rgba(0,0,0,.75),
	            0 0 0 1px rgba(255,255,255,.13) inset;
	transform-style: preserve-3d;
	transition: transform .55s cubic-bezier(.22,1,.36,1);
}
.isic-cred-stage:hover .isic-cred { transform: rotateY(-7deg) rotateX(4deg) translateY(-6px); }

/* برق روی سطح */
.isic-cred::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	mix-blend-mode: screen;
	background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.42) 48%,
	            rgba(190,160,255,.30) 54%, transparent 68%);
	transform: translateX(-40%);
	transition: transform .6s ease-out;
}
.isic-cred-stage:hover .isic-cred::before { transform: translateX(40%); }

.isic-cred::after {
	content: "";
	position: absolute;
	inset-inline-start: -30%;
	bottom: -58%;
	width: 150%;
	height: 110%;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--brand-300) 34%, transparent), transparent 65%);
	pointer-events: none;
}

.isic-cred__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	z-index: 2;
}
.isic-cred__logo { font-weight: 900; font-size: 1.42rem; letter-spacing: .06em; line-height: 1.2; }
.isic-cred__logo small {
	display: block;
	font-size: .55rem;
	letter-spacing: .2em;
	opacity: .72;
	font-weight: 500;
}

/* مهر تأیید هولوگرافیک — جایگزین تراشه کارت قدیمی */
.isic-cred__seal {
	width: 46px; height: 46px; border-radius: 50%;
	background: conic-gradient(from 210deg, #F6D68A, #C9962F 30%, #F1CE7E 55%, #A3E7FF 75%, #F6D68A);
	box-shadow: 0 1px 3px rgba(0,0,0,.4) inset, 0 0 0 1px rgba(255,255,255,.25);
	display: grid; place-items: center;
	flex-shrink: 0;
}
.isic-cred__seal svg { width: 22px; height: 22px; }

.isic-cred__body {
	display: flex; gap: 16px; align-items: flex-end;
	position: relative; z-index: 2;
}
.isic-cred__portrait {
	width: 66px; height: 80px; border-radius: 8px; flex-shrink: 0;
	background: linear-gradient(160deg, rgba(255,255,255,.28), rgba(255,255,255,.08));
	border: 1px solid rgba(255,255,255,.32);
	display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
}
.isic-cred__fields { flex: 1; min-width: 0; }
.isic-cred__label { font-size: .55rem; letter-spacing: .18em; opacity: .62; margin-bottom: 1px; }
.isic-cred__value { font-weight: 700; font-size: 1rem; line-height: 1.5; margin-bottom: 7px; }
.isic-cred__value.is-mono { font-size: .84rem; letter-spacing: .06em; font-weight: 500; }

.isic-cred__strip {
	position: relative; z-index: 2;
	display: flex; justify-content: space-between; align-items: center;
	border-top: 1px solid rgba(255,255,255,.2);
	padding-top: 11px;
	font-size: .66rem;
	letter-spacing: .1em;
}
.isic-cred__verified { color: #8DF2C4; }

/* ---------- نوار آمار ---------- */
.isic-stats {
	background: var(--ink, #0A1A30);
	color: #fff;
	border-top: 1px solid rgba(255,255,255,.14);
}
.isic-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: rgba(255,255,255,.14);
}
.isic-stat {
	background: #0A1A30;
	padding: 26px 20px;
	text-align: center;
}
.isic-stat b { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1.3; }
.isic-stat span {
	display: block;
	font-size: .62rem;
	letter-spacing: .18em;
	color: #7E96AF;
	margin-top: 4px;
}

/* ---------- کارت خدمات ---------- */
.isic-svc {
	background: #fff;
	border: 1px solid rgba(10,26,48,.1);
	border-radius: 16px;
	padding: 30px 26px;
	height: 100%;
	transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .25s;
}
.isic-svc:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--brand-400) 50%, transparent);
	box-shadow: 0 22px 44px -22px rgba(10,26,48,.4);
}
.isic-svc__icon {
	width: 46px; height: 46px; border-radius: 12px;
	background: var(--brand-50);
	color: var(--brand-700);
	display: grid; place-items: center;
	margin-bottom: 18px;
}
.isic-svc h3 { font-size: 1.12rem; font-weight: 800; margin: 0 0 .5rem; color: #0A1A30; }
.isic-svc p { font-size: .94rem; line-height: 1.95; color: #4A5F75; margin: 0 0 1rem; }
.isic-svc a.isic-more {
	font-size: .88rem; font-weight: 600; color: var(--brand-700); text-decoration: none;
}
.isic-svc a.isic-more:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- بخش ویژه ---------- */
.isic-checks { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 13px; }
.isic-checks li {
	display: flex; gap: 12px; align-items: flex-start;
	font-size: 1rem; line-height: 1.9; color: #33495F;
}
.isic-checks li::before {
	content: "";
	flex-shrink: 0; margin-top: .55em;
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--brand-500);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-400) 22%, transparent);
}

/* ---------- فراخوان پایانی ---------- */
.isic-final {
	background: linear-gradient(140deg, var(--brand-700) 0%, #1B1160 55%, #0A1A30 100%);
	color: #fff;
	border-radius: 24px;
	overflow: hidden;
	position: relative;
}
.isic-final::after {
	content: "";
	position: absolute; inset-inline-end: -12%; top: -40%;
	width: 60%; aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--brand-300) 30%, transparent), transparent 65%);
	pointer-events: none;
}
.isic-final > * { position: relative; z-index: 2; }
.isic-final .wp-block-button__link {
	border-radius: 999px; padding: 14px 30px; font-weight: 700;
	background: #fff; color: #1B1160;
	transition: transform .18s, background .2s;
}
.isic-final .wp-block-button__link:hover { background: var(--brand-100); transform: translateY(-2px); }

/* ---------- واکنش‌گرا ---------- */
@media (max-width: 980px) {
	.isic-stats__grid { grid-template-columns: repeat(2, 1fr); }
	.isic-hero .wp-block-columns { flex-wrap: wrap-reverse !important; }
}
@media (max-width: 600px) {
	.isic-cred { padding: 20px; border-radius: 16px; }
	.isic-cred__logo { font-size: 1.2rem; }
	.isic-cred__portrait { width: 54px; height: 66px; }
	.isic-stat { padding: 20px 12px; }
	.isic-stat b { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
	.isic-cred, .isic-cred::before, .isic-svc,
	.isic-hero .wp-block-button__link { transition: none; }
	.isic-cred-stage:hover .isic-cred { transform: none; }
	.isic-cred-stage:hover .isic-cred::before { transform: translateX(-40%); }
	.isic-svc:hover { transform: none; }
}

/* ---------- کارت خدمات با تصویر ---------- */
.isic-svc.has-img { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.isic-svc__img {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--brand-50);
}
.isic-svc__img img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.isic-svc.has-img:hover .isic-svc__img img { transform: scale(1.05); }
.isic-svc__txt { padding: 24px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.isic-svc__txt p { flex: 1; }

/* ---------- نوار متحرک دوره‌ها ---------- */
.isic-marquee-wrap {
	background: linear-gradient(150deg, #0A1A30 0%, #12293F 55%, #0A1A30 100%);
	color: #fff;
	overflow: hidden;
}
.isic-marquee {
	/*
	   جهت روی خودِ کانتینر ltr می‌شود، نه فقط روی ردیف.
	   در RTL ردیفی که از کانتینر پهن‌تر است از لبه راست به چپ سرریز می‌کند،
	   پس translateX منفی محتوا را تخلیه می‌کند و چیزی از راست جایگزین نمی‌شود.
	   با ltr ردیف از چپ لنگر می‌اندازد، به راست سرریز می‌کند و حلقه بسته می‌شود.
	*/
	direction: ltr;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.isic-marquee__row {
	direction: ltr;
	display: flex;
	flex-wrap: nowrap;
	/* gap صفر است و فاصله روی خود تراشه‌ها می‌نشیند، تا -۵۰٪ دقیقاً
	   برابر یک نسخه کامل شود و در هر دور پرش نداشته باشیم */
	gap: 0;
	width: max-content;
	animation: isic-slide 52s linear infinite;
	will-change: transform;
}
.isic-marquee__row + .isic-marquee__row {
	margin-top: 12px;
	animation-direction: reverse;
	animation-duration: 64s;
}
.isic-marquee:hover .isic-marquee__row { animation-play-state: paused; }

/* متن هر تراشه راست‌چین می‌ماند؛ فاصله فیزیکی چون کانتینر ltr است */
.isic-chip {
	direction: rtl;
	margin-right: 12px;
	flex: 0 0 auto;
}

@keyframes isic-slide { to { transform: translateX(-50%); } }

.isic-chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	white-space: nowrap;
	padding: 11px 18px;
	border-radius: 999px;
	font-size: .9rem;
	font-weight: 500;
	color: #D8E4F0;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.13);
	transition: border-color .25s, color .25s, background .25s;
}
.isic-chip:hover {
	color: #fff;
	background: color-mix(in srgb, var(--brand-500) 22%, transparent);
	border-color: color-mix(in srgb, var(--brand-400) 55%, transparent);
}
.isic-chip::before {
	content: "";
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--brand-300);
	flex-shrink: 0;
}
.isic-chip.is-skill::before { background: #8DF2C4; }

@media (max-width: 600px) {
	.isic-chip { font-size: .82rem; padding: 9px 14px; }
	.isic-marquee__row { animation-duration: 38s; }
}

@media (prefers-reduced-motion: reduce) {
	.isic-marquee__row { animation: none; }
	.isic-marquee {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.isic-svc.has-img:hover .isic-svc__img img { transform: none; }
}