/* =========================================================================
   Ghorbanies Lab — استایل اصلی
   راست‌چین · کاغذِ کرم · اکسنتِ قرمز · سیستمِ گره‌های تحلیلی
   ========================================================================= */

:root {
	/* رنگ‌ها */
	--paper:       #f4ece0;
	--paper-2:     #efe4d4;
	--paper-deep:  #e7d9c4;
	--sheet:       #f7f1e7;
	--ink:         #1c1c1c;
	--ink-soft:    #463f37;
	--ink-faint:   #8a8073;
	--red:         #d94b3d;
	--red-deep:    #b83a2e;
	--note:        #f0d27a;
	--note-2:      #e9c45f;
	--line:        rgba(28, 28, 28, .16);
	--line-soft:   rgba(28, 28, 28, .08);

	/* فونت */
	--font-body: "Vazirmatn", "Tahoma", system-ui, sans-serif;
	--font-display: "Estedad", "Vazirmatn", "Tahoma", sans-serif;
	--font-hand: "Caveat", "Vazirmatn", cursive;
	/* یادداشت: --font-display ابتدا Estedad را امتحان می‌کند (اگر محلی میزبانی شود)،
	   وگرنه روی Vazirmatn وزنِ ۹۰۰ می‌افتد که حالا مطمئن از jsDelivr بار می‌شود. */

	/* اندازه */
	--shell: 1340px;
	--radius: 4px;
	--ease: cubic-bezier(.22, .61, .36, 1);
}

/* فونتِ اصلیِ فارسی از jsDelivr بارگذاری می‌شود (در ایران در دسترس است،
   برخلافِ Google Fonts که اغلب بلاک است). فونتِ متغیر = همهٔ وزن‌ها در یک فایل. */
@font-face {
	font-family: "Vazirmatn";
	/* محلی اول (پایداری صددرصد؛ مستقل از اینترنت)، سپس jsDelivr به‌عنوان پشتیبان. */
	src: url("../fonts/vazirmatn-arabic.woff2") format("woff2"),
	     url("https://cdn.jsdelivr.net/npm/@fontsource-variable/vazirmatn/files/vazirmatn-arabic-wght-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Vazirmatn";
	src: url("../fonts/vazirmatn-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
	font-family: "Caveat";
	src: url("../fonts/caveat-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Caveat";
	src: url("../fonts/caveat-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* میزبانیِ کاملاً محلی (پیشنهادی برای پایداریِ صددرصد):
   فایل‌های woff2 را در assets/fonts/ بگذارید و src بالا را به مسیرِ محلی تغییر دهید، مثلاً:
   src: url("../fonts/Vazirmatn[wght].woff2") format("woff2");

   برای تیترِ سنگین‌ترِ اختصاصی (Estedad/Peyda/IRANYekanX) فایلِ Black را در assets/fonts/
   بگذارید، @font-face زیر را فعال و --font-display را به همان نام تغییر دهید:
@font-face {
	font-family: "Estedad";
	src: url("../fonts/Estedad-Black.woff2") format("woff2");
	font-weight: 900; font-display: swap;
}
*/

/* -------------------------------------------------------------- پایه ---- */
html { scroll-behavior: smooth; }

body {
	font-family: var(--font-body);
	color: var(--ink);
	background-color: var(--paper);
	background-image:
		linear-gradient(var(--line-soft) 1px, transparent 1px),
		linear-gradient(90deg, var(--line-soft) 1px, transparent 1px),
		radial-gradient(120% 90% at 80% -10%, rgba(255, 255, 255, .5), transparent 60%),
		radial-gradient(90% 80% at -5% 110%, rgba(210, 190, 160, .35), transparent 55%);
	background-size: 30px 30px, 30px 30px, 100% 100%, 100% 100%;
	line-height: 1.75;
	font-size: 17px;
	overflow-x: hidden;
}

.shell {
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 56px);
}

.skip-link {
	position: absolute;
	right: -9999px;
	top: 0;
	background: var(--ink);
	color: var(--paper);
	padding: 10px 16px;
	z-index: 999;
}
.skip-link:focus { right: 16px; top: 12px; }

.ink-red { color: var(--red); }
.scrawl { font-family: var(--font-hand); }
.tick { color: var(--red); }

:focus-visible {
	outline: 2px solid var(--red);
	outline-offset: 3px;
	border-radius: 3px;
}

/* -------------------------------------------------------------- دکمه‌ها ---- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 13px 26px;
	border-radius: 999px;
	font-weight: 600;
	font-size: .98rem;
	text-decoration: none;
	border: 1.5px solid transparent;
	transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s;
	cursor: pointer;
}
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark:hover { transform: translateY(-2px); background: #000; }
.btn--dark .btn__arrow { width: 30px; transition: transform .25s var(--ease); }
.btn--dark:hover .btn__arrow { transform: translateX(-4px); }
.btn--ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn--red { background: var(--red); color: #fff; padding: 9px 22px; box-shadow: 0 6px 16px -8px rgba(217, 75, 61, .8); }
.btn--red:hover { background: var(--red-deep); transform: translateY(-1px); }

/* ============================================================== هدر ==== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--paper) 88%, transparent);
	backdrop-filter: saturate(120%) blur(8px);
	border-bottom: 1px solid var(--line);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 76px;
}
.brand { display: flex; align-items: center; gap: 14px; order: 3; }
.brand__text { display: flex; flex-direction: column; text-decoration: none; line-height: 1.35; }
.brand__name { font-weight: 800; font-size: 1.12rem; }
.brand__role { font-size: .82rem; color: var(--ink-faint); }
.brand__mark { display: inline-flex; color: var(--ink); text-decoration: none; }
.brand__mark svg { display: block; }
.brand__sg { height: 44px; width: auto; }
.footer-mark { display: inline-flex; color: var(--ink); vertical-align: middle; margin-inline-end: 10px; }
.footer-mark svg { width: 30px; height: 30px; display: block; }

.site-nav { order: 2; }
.site-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.4vw, 38px);
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-nav__list a {
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
	color: var(--ink-soft);
	padding-bottom: 4px;
	position: relative;
	transition: color .2s;
}
.site-nav__list a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -2px;
	height: 2px;
	background: var(--red);
	transform: scaleX(0);
	transition: transform .25s var(--ease);
}
.site-nav__list a:hover { color: var(--ink); }
.site-nav__list a:hover::after,
.site-nav__list .current-menu-item a::after { transform: scaleX(1); }
.site-nav__list .current-menu-item a { color: var(--ink); }

.header-cta { order: 1; display: flex; align-items: center; gap: 12px; }

.nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	width: 42px; height: 42px;
	border: 1px solid var(--line);
	background: transparent;
	border-radius: 10px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.nav-toggle span { width: 20px; height: 2px; background: var(--ink); transition: .25s; }

/* ============================================================= چیدمان اصلی ==== */
.front-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
	gap: clamp(28px, 4vw, 72px);
	padding-top: clamp(40px, 6vw, 84px);
	padding-bottom: clamp(48px, 6vw, 96px);
	align-items: start;
}
.front-grid > * { min-width: 0; }

/* ستونِ بوم تحلیلی: یک «میدانِ کاغذی» با مرزِ ظریف */
.paper-field {
	position: relative;
	padding: clamp(20px, 2.4vw, 34px);
	border-inline-start: 1px dashed var(--line);
}

/* ================================================================ هیرو ==== */
.hero__eyebrow {
	font-family: var(--font-hand);
	font-size: 1.35rem;
	color: var(--ink-soft);
	margin: 0 0 14px;
	letter-spacing: .02em;
}
.hero__title {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(1.8rem, 3vw, 3.2rem);
	line-height: 1.34;
	letter-spacing: -0.005em;
	margin: 0 0 26px;
	overflow-wrap: break-word;
}
/* تیتر را به عرضِ ستونِ خودش گره می‌زنیم تا در چیدمانِ دوستونی هرگز سرریز/درشت نشود */
@supports (container-type: inline-size) {
	.front-grid__hero { container-type: inline-size; }
	.hero__title { font-size: clamp(1.7rem, 7cqi, 3.3rem); }
}
.hero__title .line { display: block; }
.hero__title .ink-red { position: relative; white-space: nowrap; }
.hero__title .ink-red::after {
	content: "";
	position: absolute;
	inset-inline: -4px;
	bottom: .06em;
	height: .14em;
	background: var(--red);
	opacity: .16;
	border-radius: 2px;
	transform: rotate(-.4deg);
}
.hero__sub {
	font-size: 1.12rem;
	color: var(--ink-soft);
	max-width: 30ch;
	margin: 0 0 34px;
	line-height: 2;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; }
.hero__actions .btn { white-space: nowrap; }

/* ===================================================== سیستمِ گره‌ها (امضا) ==== */
.lens { margin-bottom: clamp(28px, 4vw, 48px); position: relative; }
.lens__head {
	font-family: var(--font-hand);
	font-size: 1.5rem;
	color: var(--ink-soft);
	margin: 0 0 6px;
	display: flex;
	align-items: center;
	gap: 8px;
	letter-spacing: .01em;
}
.lens__star { color: var(--red); font-size: 1rem; }
.lens__canvas { position: relative; }
.lens__svg {
	width: 100%;
	height: auto;
	overflow: visible;
	color: var(--ink-soft);
}

/* خطوطِ اتصال */
.lens__link {
	stroke: var(--ink-soft);
	stroke-width: 1.6;
	stroke-dasharray: 4 5;
	transition: stroke .3s var(--ease), opacity .3s, stroke-width .3s;
	opacity: .85;
}
.lens__link.is-lit { stroke: var(--red); stroke-dasharray: none; stroke-width: 2.2; opacity: 1; }
.lens__link.is-mute { opacity: .25; }

/* حلقه‌های بازخورد */
.lens__loop { stroke: var(--ink-faint); stroke-width: 1.4; stroke-dasharray: 2 6; opacity: .55; }
.lens__loop--red { stroke: var(--red); opacity: .6; }

/* گره */
.lens-node { cursor: pointer; }
.lens-node__halo { fill: transparent; transition: fill .3s; }
.lens-node__ring {
	fill: var(--paper);
	stroke: var(--ink);
	stroke-width: 1.8;
	transition: stroke .3s var(--ease), stroke-width .3s, fill .3s;
}
.lens-node__num {
	font-family: var(--font-hand);
	font-size: 17px;
	font-weight: 700;
	fill: var(--ink-soft);
	transition: fill .3s;
}
.lens-node__label {
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 700;
	fill: var(--ink);
	transition: fill .3s, opacity .3s;
}

/* حالت فعال: گره قرمز می‌شود */
.lens-node.is-active .lens-node__ring { stroke: var(--red); stroke-width: 2.6; }
.lens-node.is-active .lens-node__halo { fill: rgba(217, 75, 61, .1); }
.lens-node.is-active .lens-node__num { fill: var(--red); }
.lens-node.is-active .lens-node__label { fill: var(--red); }

/* حالت محو: تمرکز روی گرهٔ فعال (focus-based UI) */
.lens.is-focusing .lens-node.is-dim { opacity: .32; }
.lens.is-focusing .lens-node.is-dim .lens-node__label { opacity: .5; }
.lens-node { transition: opacity .3s var(--ease); }

.lens-detail {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin: 14px 0 0;
	max-width: 360px;
	background: var(--sheet);
	border: 1px solid var(--line-soft);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 10px 24px -18px rgba(0,0,0,.4);
	transition: transform .3s var(--ease), box-shadow .3s;
}
.lens.is-focusing .lens-detail { transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgba(0,0,0,.5); }
.lens-detail__tab {
	flex: none;
	width: 52px;
	display: grid;
	place-items: center;
	font-family: var(--font-hand);
	font-size: 1.5rem;
	font-weight: 700;
	color: #fff;
	background: var(--red);
	transition: background .25s;
}
.lens-detail__body { padding: 10px 14px; flex: 1; }
.lens-detail__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.05rem;
	color: var(--ink);
}
.lens-detail__q {
	margin: 2px 0 0;
	font-family: var(--font-hand);
	font-size: 1.15rem;
	color: var(--ink-soft);
	line-height: 1.4;
}
.lens-detail__hint {
	flex: none;
	align-self: center;
	padding-inline: 12px;
	font-size: .72rem;
	color: var(--ink-faint);
	white-space: nowrap;
}
.lens.is-focusing .lens-detail__hint { opacity: 0; }

/* ================================================================= BPMN ==== */
.bpmn-sheet {
	margin: 26px 0 0;
	background: var(--sheet);
	border: 1px solid var(--line-soft);
	border-radius: 3px;
	padding: 16px 20px 20px;
	box-shadow: 0 16px 34px -22px rgba(0,0,0,.45);
	transform: rotate(-.5deg);
}
.bpmn-sheet__title {
	margin: 0 0 6px;
	font-size: 1.45rem;
	color: var(--ink-soft);
	display: flex; align-items: center; gap: 8px;
}
.bpmn-sheet__tag {
	font-family: var(--font-body);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--red);
	border: 1px solid var(--red);
	border-radius: 4px;
	padding: 1px 6px;
}
.bpmn { width: 100%; height: auto; overflow: visible; }
.bpmn-pool rect { fill: none; stroke: var(--ink-faint); stroke-width: 1.4; }
.bpmn-pool line { stroke: var(--ink-faint); stroke-width: 1.2; }
.bpmn-flow { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.bpmn-flow--yes { stroke: var(--red); }
.bpmn-loop { fill: none; stroke: var(--ink-soft); stroke-width: 1.6; stroke-dasharray: 4 5; stroke-linecap: round; }
.bpmn-task { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.bpmn-start { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.bpmn-end { fill: var(--paper); stroke: var(--red); stroke-width: 3.4; }
.bpmn-gate { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.bpmn-gate-x { stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
.bpmn-pool-name { font-family: var(--font-body); font-size: 12px; font-weight: 700; fill: var(--ink-faint); }
.bpmn-lane { font-family: var(--font-body); font-size: 12px; font-weight: 700; fill: var(--ink-faint); }
.bpmn-label { font-family: var(--font-display); font-size: 14px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.bpmn-label--in { fill: var(--ink); }
.bpmn-edge { font-family: var(--font-hand); font-size: 15px; fill: var(--ink-soft); text-anchor: middle; }
.bpmn-edge--red { fill: var(--red); }

/* ================================================================= یادداشت ==== */
.note {
	position: relative;
	margin-top: 22px;
	margin-inline-start: auto;
	max-width: 290px;
	background: linear-gradient(170deg, var(--note), var(--note-2));
	padding: 22px 24px 26px;
	border-radius: 2px;
	box-shadow: 0 14px 30px -18px rgba(80, 60, 10, .6);
	transform: rotate(-1.4deg);
}
.note::after {
	content: "";
	position: absolute;
	inset-inline: 14px;
	bottom: -6px;
	height: 10px;
	background: rgba(0, 0, 0, .07);
	filter: blur(5px);
	border-radius: 50%;
}
.note__pin {
	position: absolute;
	top: 10px;
	inset-inline-start: 14px;
	color: var(--red);
	font-size: 1.1rem;
}
.note__title { margin: 0 0 12px; font-size: 1.18rem; font-weight: 800; text-align: center; }
.note__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.note__item { display: flex; align-items: center; gap: 10px; font-size: .98rem; font-weight: 600; }
.note__box {
	width: 18px; height: 18px;
	border: 1.5px solid rgba(60, 45, 10, .7);
	border-radius: 3px;
	display: grid; place-items: center;
	font-size: .8rem;
	color: rgba(40, 30, 5, .85);
	flex: none;
}
.note__item.is-open .note__text { color: var(--red-deep); }
.note__item.is-open .note__box { border-color: var(--red-deep); }
.note__tags {
	list-style: none;
	margin: 16px 0 0;
	padding-top: 12px;
	border-top: 1px dashed rgba(70, 50, 10, .4);
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-family: var(--font-hand);
	font-size: 1rem;
	color: rgba(60, 45, 10, .8);
}

/* ============================================================== اوراق تحلیل ==== */
.papers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: clamp(16px, 2vw, 26px);
	margin-top: clamp(24px, 3vw, 40px);
}
.paper {
	position: relative;
	background: var(--sheet);
	padding: 22px 22px 26px;
	border: 1px solid var(--line-soft);
	border-radius: 2px;
	box-shadow: 0 12px 26px -20px rgba(40, 30, 15, .7);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), transparent 30%);
}
.paper--a { transform: rotate(-2deg); }
.paper--b { transform: rotate(1.5deg); }
.paper--c { transform: rotate(-1deg); }
.paper:hover { transform: rotate(0) translateY(-3px); transition: transform .35s var(--ease); }
.paper__title { margin: 0 0 14px; font-size: 1.05rem; font-weight: 800; }
.paper .scrawl, .scrawl-fa { font-family: var(--font-hand); }
.paper__clip {
	position: absolute;
	top: -10px; inset-inline-end: 18px;
	width: 14px; height: 40px;
	border: 2.5px solid var(--ink-faint);
	border-radius: 8px;
	transform: rotate(8deg);
}

/* KPI */
.paper__bars { width: 100%; height: auto; margin-bottom: 8px; }
.paper__bars .bar { fill: var(--ink-soft); opacity: .82; }
.paper__bars .bar--red { fill: var(--red); opacity: 1; }
.paper__kpis { margin: 6px 0 0; }
.kpi-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 5px 0;
	border-bottom: 1px dashed var(--line-soft);
}
.kpi-row dt { font-size: 1.05rem; color: var(--ink-soft); }
.kpi-row dd { margin: 0; display: flex; align-items: center; gap: 6px; font-weight: 700; }
.kpi-row__v { direction: ltr; unicode-bidi: isolate; }
.kpi-row__arrow { color: #2f7d4f; font-weight: 700; }
.kpi-row.is-down .kpi-row__v,
.kpi-row.is-down .kpi-row__arrow { color: var(--red); }

/* نقشهٔ اشتقاقی */
.paper__map { width: 100%; height: auto; margin-bottom: 10px; }
.knot-box { fill: none; stroke: var(--ink); transition: stroke .3s, fill .3s; }
@keyframes knot-pulse {
	0%   { stroke: var(--red); fill: rgba(217, 75, 61, .16); }
	24%  { stroke: var(--red); fill: rgba(217, 75, 61, .16); }
	30%  { stroke: var(--ink); fill: none; }
	100% { stroke: var(--ink); fill: none; }
}
.knot-box { animation: knot-pulse 4.4s linear infinite; }
.knot-box--1 { animation-delay: 0s; }
.knot-box--2 { animation-delay: 1.1s; }
.knot-box--3 { animation-delay: 2.2s; }
.knot-box--4 { animation-delay: 3.3s; }
@media (prefers-reduced-motion: reduce) {
	.knot-box { animation: none; }
	.knot-box--3 { stroke: var(--red); fill: rgba(217, 75, 61, .16); }
}
.paper__questions { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.paper__questions li {
	font-size: .88rem;
	color: var(--ink-soft);
	line-height: 1.5;
	text-wrap: balance;
}

/* روندها */
.paper__trend { width: 100%; height: auto; }
.paper__trend .trend-line { stroke: var(--ink); stroke-width: 2; }
.paper__trend .trend-line--red { stroke: var(--red); stroke-width: 2; }
.paper__trend .dot { fill: var(--ink); }
.paper__legend { display: flex; gap: 18px; margin-top: 10px; font-size: .85rem; color: var(--ink-soft); }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-inline-start: 6px; vertical-align: middle; }
.swatch--ink { background: var(--ink); }
.swatch--red { background: var(--red); }
.swatch--faint { background: var(--ink-faint); }
.swatch--line { background: var(--paper-deep); border: 1px solid var(--ink-faint); }

.paper__months {
	list-style: none; margin: 6px 0 0; padding: 0;
	display: flex; justify-content: space-between;
	font-size: .82rem; color: var(--ink-faint);
	font-family: var(--font-body);
}
.paper__months li { white-space: nowrap; }
.paper__focus { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 16px; }
.paper__pie { width: 54px; height: 54px; flex: none; }
.paper__legend {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 4px 12px; font-size: .74rem;
}
.paper__legend li { display: flex; align-items: center; gap: 5px; color: var(--ink-soft); white-space: nowrap; }
.paper__legend .swatch { margin: 0; width: 10px; height: 10px; flex: none; }
.paper__focus-note { margin: 12px 0 0; font-size: .95rem; color: var(--red-deep); text-align: center; }

/* ====================================================== مهارت‌ها + آمار ==== */
.ledger {
	margin-top: clamp(34px, 5vw, 56px);
	padding-top: 28px;
	border-top: 1px solid var(--line);
}
.ledger__skills {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	padding-bottom: 24px;
	border-bottom: 1px dashed var(--line);
}
.skill-mark {
	text-align: center;
	padding: 12px 8px;
	border-radius: 10px;
	transition: transform .3s var(--ease), background .3s;
}
.skill-mark__icon { color: var(--red); display: inline-block; transition: transform .3s; }
.skill-mark__icon svg { width: 38px; height: 38px; }
.skill-mark__label { display: block; margin-top: 8px; font-size: .92rem; font-weight: 600; color: var(--ink-soft); transition: color .3s; }
.skill-mark:hover,
.skill-mark.is-active { background: var(--paper-2); transform: translateY(-4px); }
.skill-mark:hover .skill-mark__icon,
.skill-mark.is-active .skill-mark__icon { transform: translateY(-2px) scale(1.08); }
.skill-mark:hover .skill-mark__label,
.skill-mark.is-active .skill-mark__label { color: var(--ink); }

.ledger__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	padding-top: 22px;
	text-align: center;
}
.stat__value { display: block; font-weight: 900; font-size: 1.9rem; color: var(--red); line-height: 1.1; transition: transform .3s var(--ease); }
.stat.is-counting .stat__value { transform: scale(1.08); }
.stat__label { display: block; margin-top: 4px; font-size: .88rem; color: var(--ink-faint); }

/* ============================================================== پرسش‌ها ==== */
.prompts-wrap { padding-bottom: clamp(28px, 5vw, 64px); }
.prompts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: clamp(14px, 2vw, 26px);
	padding-top: 30px;
	border-top: 1px solid var(--line);
	align-items: start;
}
.prompt {
	text-align: center;
	padding: 14px 10px;
	border-radius: 10px;
	cursor: default;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: transform .3s var(--ease), background .3s;
}
.prompt__icon { color: var(--ink-soft); display: inline-block; transition: color .3s, transform .3s; }
.prompt__icon svg { width: 44px; height: 44px; }
.prompt__text {
	margin: 12px 0 0; font-size: .92rem; font-weight: 600;
	color: var(--ink-soft); line-height: 1.6;
	position: relative; display: inline-block;
}
.prompt__text::after {
	content: ""; position: absolute; inset-inline: 50%; bottom: -6px; height: 2px;
	width: 0; background: var(--red); border-radius: 2px;
	transform: translateX(50%); transition: width .3s var(--ease);
}
.prompt:hover,
.prompt.is-active {
	background: var(--paper-2);
	transform: translateY(-4px);
}
.prompt:hover .prompt__icon,
.prompt.is-active .prompt__icon { color: var(--red); transform: translateY(-2px) scale(1.06); }
.prompt:hover .prompt__text,
.prompt.is-active .prompt__text { color: var(--ink); }
.prompt:hover .prompt__text::after,
.prompt.is-active .prompt__text::after { width: 70%; }
@media (prefers-reduced-motion: reduce) {
	.prompt, .prompt__icon { transition: none; }
	.prompt:hover, .prompt.is-active { transform: none; }
}

/* =========================================================== صفحات داخلی ==== */
.stream { padding-block: clamp(40px, 6vw, 80px); max-width: 920px; }
.stream__head { margin-bottom: 36px; }
.stream__title { font-weight: 900; font-size: clamp(1.9rem, 4vw, 2.8rem); margin: 0 0 8px; }
.stream__sub { color: var(--ink-faint); margin: 0; }
.stream__list { display: grid; gap: 4px; }
.entry {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 22px;
	padding: 26px 0;
	border-bottom: 1px dashed var(--line);
	align-items: start;
}
.entry__num { font-family: var(--font-hand); font-size: 1.8rem; color: var(--red); }
.entry__meta time { display: block; font-size: .82rem; color: var(--ink-faint); margin-top: 4px; }
.entry__title { margin: 0 0 8px; font-size: 1.4rem; font-weight: 800; }
.entry__title a { text-decoration: none; }
.entry__title a:hover { color: var(--red); }
.entry__excerpt { margin: 0 0 10px; color: var(--ink-soft); }
.entry__more { text-decoration: none; font-weight: 700; color: var(--red); }

/* ⚠️ نامش `.single` نیست و نباید بشود.
   وردپرس روی هر نوشتهٔ تکی کلاسِ `single` را به **خودِ body** می‌دهد، پس قاعده‌ای
   به نامِ `.single` روی کلِ صفحه می‌نشیند: بدنه ۷۶۰ پیکسل می‌شود و همه‌چیز —
   شاملِ نوارِ بالا — به یک ستونِ باریک می‌چسبد. روی سایتِ زنده دیده شد.
   همین برای `.home` و `.page` و `.archive` و `.search` و `.blog` هم برقرار است. */
.post-single { padding-block: clamp(40px, 6vw, 80px); max-width: 760px; margin-inline: auto; }
/* ⚠️ بیشترِ یادداشت‌ها تصویرِ شاخص ندارند و سرآیندِ لخت، صفحه را ناتمام نشان
   می‌داد. راهِ حل تصویرِ تزئینی نیست — سرآیندی است که خودش طراحی شده:
   کارتِ کاغذی با لبهٔ قرمز، همان گرامرِ بقیهٔ سایت. */
.single__head {
  background: var(--sheet); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--red);
  padding: clamp(22px, 3vw, 38px); margin-bottom: clamp(28px, 4vw, 44px);
}
.single__eyebrow { font-family: var(--font-hand); font-size: 1.25rem; color: var(--ink-soft); margin: 0 0 10px; }
.single__title { font-weight: 900; font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.2; margin: 0 0 14px; }
.single__meta { color: var(--ink-faint); font-size: .9rem; margin-bottom: 0; }
.single__cover { margin: 0 0 32px; border-radius: var(--radius); overflow: hidden; }
.single__cover img { width: 100%; display: block; }
/* ⚠️ متنِ بلندِ فارسی **جاستیفای** می‌شود. بدونِ آن لبهٔ چپ دندانه‌دار می‌ماند و
   متن «روی هوا» دیده می‌شود — گزارشِ خودِ کاربر روی نوشتهٔ زنده.
   `text-align-last:right` تا سطرِ آخر کش نیاید، و `hyphens:none` چون فارسی
   خط‌تیرهٔ پایانِ سطر ندارد. */
.prose { font-size: 1.1rem; line-height: 2; color: var(--ink-soft);
  text-align: justify; text-align-last: right; hyphens: none; }
/* بلوکِ «عدد» — لنگرِ بصریِ هر یادداشت، به‌جای تصویرِ شاخص.
   عمداً جاستیفای نمی‌شود و درشت است: کارش گرفتنِ چشم در اولین ثانیه است. */
.prose .note-lede {
  border-inline-start: 3px solid var(--red);
  padding-inline-start: clamp(16px, 2vw, 26px);
  margin: 0 0 clamp(26px, 3.4vw, 40px);
}
.prose .note-lede p { text-align: right; }
.prose .note-lede p:first-child { font-size: clamp(1.3rem, 2.6vw, 1.75rem); line-height: 1.65; color: var(--ink); font-weight: 800; }
.prose .note-lede p:first-child strong { font-weight: 900; }
.prose .note-lede p + p { margin-top: .8em; font-size: 1rem; color: var(--ink-soft); line-height: 1.9; }

/* سرتیتر و نقلِ‌قول جاستیفای نمی‌شوند — آنجا فاصله‌های کشیده زشت است. */
.prose h2, .prose h3, .prose blockquote, .prose li { text-align: right; text-align-last: auto; }
.prose h2, .prose h3 { color: var(--ink); font-weight: 800; margin-top: 1.8em; }
.prose a { color: var(--red); }
.prose img { border-radius: var(--radius); }
.prose blockquote {
	border-inline-start: 3px solid var(--red);
	margin-inline: 0;
	padding-inline-start: 20px;
	font-family: var(--font-hand);
	font-size: 1.4rem;
	color: var(--ink);
}

.pagination { margin-top: 40px; }
.pagination .nav-links { display: flex; gap: 10px; flex-wrap: wrap; }
.pagination a, .pagination .current {
	padding: 8px 14px;
	border: 1px solid var(--line);
	border-radius: 8px;
	text-decoration: none;
}
.pagination .current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.empty { color: var(--ink-faint); font-size: 1.1rem; }

/* ================================================================ پاورقی ==== */
.site-footer {
	margin-top: clamp(40px, 6vw, 80px);
	border-top: 1px solid var(--line);
	background: var(--paper-2);
}
.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	padding-block: 40px;
}
.site-footer__tag { font-family: var(--font-hand); font-size: 1.3rem; color: var(--ink-soft); margin: 6px 0 0; }
.site-footer__list { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.site-footer__list a { text-decoration: none; color: var(--ink-soft); }
.site-footer__list a:hover { color: var(--red); }
.site-footer__meta { font-size: .85rem; color: var(--ink-faint); }
.widget-title { font-size: 1rem; font-weight: 800; margin: 0 0 10px; }

/* ============================================================ آشکارسازی ==== */
/* ⚠️ زیرِ `html.ghlab-js`: بدونِ جاوااسکریپت هیچ‌چیز پنهان نمی‌شود.
   پیش از این، اگر lens.js بار نمی‌شد **کلِ بخش‌های صفحهٔ اصلی نامرئی می‌ماندند**
   — یعنی یک نقصِ ساکت که هیچ سنجه‌ای نمی‌گرفتش. */
html.ghlab-js .reveal { opacity: 0; transform: translateY(22px); }
html.ghlab-js .reveal.is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }

/* ============================================================== واکنش‌گرا ==== */
@media (max-width: 1080px) {
	.front-grid { grid-template-columns: 1fr; }
	.paper-field { border-inline-start: none; padding-inline: 0; }
	.note { margin-inline: auto; }
}

@media (max-width: 760px) {
	body { font-size: 16px; }
	.site-nav { display: none; }
	.nav-toggle { display: flex; }
	.site-nav.is-open {
		display: block;
		position: absolute;
		inset-inline: 16px;
		top: 72px;
		background: var(--paper);
		border: 1px solid var(--line);
		border-radius: 14px;
		padding: 14px;
		box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .5);
	}
	.site-nav.is-open .site-nav__list { flex-direction: column; gap: 4px; }
	.site-nav.is-open .site-nav__list a { display: block; padding: 8px 6px; }
	.ledger__skills, .ledger__stats { grid-template-columns: 1fr 1fr; }
	.prompts { grid-template-columns: 1fr 1fr; }
	.entry { grid-template-columns: 60px 1fr; gap: 14px; }
	.lens__caption, .hero__eyebrow { font-size: 1.15rem; }
}

@media (max-width: 420px) {
	.ledger__skills { grid-template-columns: 1fr; }
	.hero__actions { flex-wrap: wrap; }
}

/* ========================================================= کاهش حرکت ==== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	html.ghlab-js .reveal { opacity: 1; transform: none; }
}

/* ================================================= انیمیشنِ نشانه ==== */
/* طولِ مسیرها برای اثرِ «کشیده‌شدنِ قلم»:
   قوس ≈ ۱۶۹، جریانِ اول ≈ ۱۵٫۷، جریانِ دوم ≈ ۱۳٫۹ */
.mk-arc { stroke-dasharray: 170; stroke-dashoffset: 0; }
.mk-fl  { stroke-dasharray: 16;  stroke-dashoffset: 0; }
.mk-fl2 { stroke-dasharray: 14;  stroke-dashoffset: 0; }

@keyframes ghlab-draw   { from { stroke-dashoffset: var(--dash); } to { stroke-dashoffset: 0; } }
@keyframes ghlab-pop    { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes ghlab-fade   { from { opacity: 0; } to { opacity: 1; } }

/* ---- پردهٔ ورود ---- */
.ghlab-intro {
	position: fixed; inset: 0; z-index: 9999;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
}
/* پس‌زمینه لایهٔ جداست تا بتواند مستقل از نشانه محو شود */
.ghlab-intro__bg {
	position: absolute; inset: 0;
	background: var(--ink);
	background-image: linear-gradient(rgba(244, 236, 224, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(244, 236, 224, .07) 1px, transparent 1px);
	background-size: 30px 30px; background-position: center;
	transition: transform .8s cubic-bezier(.7, 0, .25, 1), opacity .45s ease .25s;
	will-change: transform;
}
.ghlab-intro__mk { position: relative; width: min(46vw, 230px); height: auto; color: var(--paper); will-change: transform, opacity; }

/* لحظهٔ پرواز: پس‌زمینه محو می‌شود و نشانه روی سایتِ آماده حرکت می‌کند */
.ghlab-intro.is-flying .ghlab-intro__bg { transform: translateY(-101%); opacity: 0; }
.ghlab-intro.is-flying .ghlab-intro__mk {
	transition: transform .7s cubic-bezier(.5, .05, .2, 1), opacity .18s ease .56s;
}
.ghlab-intro.is-flying .ghlab-intro__mk { opacity: 0; }
.ghlab-intro.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

/* لوگوی هدر تا پایانِ پرواز پنهان است تا دو نشانه هم‌زمان دیده نشوند */
body.ghlab-intro-lock .brand__sg { opacity: 0; }
.brand__sg { transition: opacity .25s ease, transform .4s var(--ease); }

/* اجرای انیمیشن روی پرده */
.ghlab-intro.is-playing .mk-arc { --dash: 170; stroke-dashoffset: 170; animation: ghlab-draw 1s cubic-bezier(.65,.02,.25,1) forwards; }
.ghlab-intro.is-playing .mk-fl  { --dash: 16;  stroke-dashoffset: 16;  animation: ghlab-draw .34s .82s ease forwards; }
.ghlab-intro.is-playing .mk-fl2 { --dash: 14;  stroke-dashoffset: 14;  animation: ghlab-draw .3s 1.1s ease forwards; }
.ghlab-intro.is-playing .mk-nd,
.ghlab-intro.is-playing .mk-nd2 { opacity: 0; animation: ghlab-fade .3s 1.02s ease forwards; }
.ghlab-intro.is-playing .mk-sq  { opacity: 0; transform-box: fill-box; transform-origin: center;
	animation: ghlab-pop .45s 1.32s cubic-bezier(.2,1.5,.4,1) forwards; }

/* تا وقتی پرده هست، اسکرول قفل باشد */
body.ghlab-intro-lock { overflow: hidden; }

/* ---- تکرارِ انیمیشن روی هاورِ لوگوی هدر ---- */
.brand__mark { -webkit-tap-highlight-color: transparent; }
.brand__sg { transition: transform .4s var(--ease); }
.brand__mark:hover .brand__sg { transform: scale(1.05); }
.brand__sg.is-replay .mk-arc { --dash: 170; animation: ghlab-draw .8s cubic-bezier(.65,.02,.25,1); }
.brand__sg.is-replay .mk-fl  { --dash: 16;  animation: ghlab-draw .3s .55s ease backwards; }
.brand__sg.is-replay .mk-fl2 { --dash: 14;  animation: ghlab-draw .28s .78s ease backwards; }
.brand__sg.is-replay .mk-sq  { transform-box: fill-box; transform-origin: center;
	animation: ghlab-pop .4s 1s cubic-bezier(.2,1.5,.4,1) backwards; }

@media (prefers-reduced-motion: reduce) {
	.ghlab-intro { cursor: pointer; display: none; }
	.brand__sg.is-replay * { animation: none !important; }
}

/* ================================================= بخشِ ارتباط ==== */
.contact-hub {
	padding-block: clamp(46px, 6vw, 78px);
	border-bottom: 1px solid var(--line);
}
.contact-hub__eyebrow {
	display: inline-block; font-size: .72rem; letter-spacing: .26em;
	color: var(--red); text-transform: uppercase; margin-bottom: 10px;
}
.contact-hub__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.5rem, 3vw, 2.3rem); margin: 0 0 8px; }
.contact-hub__sub { color: var(--ink-soft); margin: 0 0 34px; max-width: 46ch; }

/* --- نشانه‌های ارتباط --- */
.contact-hub__links { display: flex; gap: clamp(22px, 4vw, 44px); flex-wrap: wrap; }

.clink {
	appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
	font: inherit; color: inherit; text-decoration: none;
	display: inline-flex; flex-direction: column; align-items: center; gap: 12px;
}
.clink__disc {
	position: relative; width: 84px; height: 84px; border-radius: 50%;
	background: var(--sheet); border: 1px solid var(--line);
	display: grid; place-items: center;
	transition: transform .4s var(--ease), border-color .4s, background .4s, box-shadow .4s;
}
.clink__face {
	position: absolute; inset: 0; display: grid; place-items: center;
	transition: opacity .38s var(--ease), transform .5s var(--ease);
}
.clink__face svg { width: 40px; height: 40px; color: var(--ink); }
.clink__face--brand svg { width: 46px; height: 46px; }

/* حالتِ عادی: آیکنِ سرویس دیده می‌شود، لوگو پنهان و کمی چرخیده */
.clink__face--main  { opacity: 1; transform: rotate(0) scale(1); }
.clink__face--brand { opacity: 0; transform: rotate(-25deg) scale(.65); }

/* هاور/فوکوس: تبدیل به نشانهٔ برند */
.clink:hover .clink__face--main,
.clink:focus-visible .clink__face--main { opacity: 0; transform: rotate(25deg) scale(.65); }
.clink:hover .clink__face--brand,
.clink:focus-visible .clink__face--brand { opacity: 1; transform: rotate(0) scale(1); }
.clink:hover .clink__disc,
.clink:focus-visible .clink__disc {
	transform: translateY(-5px);
	border-color: var(--red);
	background: var(--paper2, #efe4d4);
	box-shadow: 0 18px 30px -22px rgba(60, 40, 25, .85);
}
.clink:active .clink__disc { transform: translateY(-2px) scale(.97); }

.clink__cap { font-size: .9rem; font-weight: 600; color: var(--ink-soft); transition: color .35s; }
.clink:hover .clink__cap, .clink:focus-visible .clink__cap { color: var(--red); }

/* --- پیامِ شناور --- */
.ctoast {
	position: fixed; inset-inline-start: 50%; bottom: 32px;
	transform: translate(-50%, 18px);
	background: var(--ink); color: var(--paper);
	font-size: .92rem; font-weight: 600;
	padding: 11px 20px; border-radius: 999px;
	box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .7);
	opacity: 0; pointer-events: none; z-index: 9998;
	transition: opacity .32s ease, transform .32s var(--ease);
}
.ctoast.is-on { opacity: 1; transform: translate(-50%, 0); }
.ctoast::before { content: "✓"; color: var(--red); font-weight: 900; margin-inline-end: 8px; }

@media (prefers-reduced-motion: reduce) {
	.clink__face, .clink__disc, .ctoast { transition-duration: .001ms; }
}

/* ================================================= یادداشت‌ها ==== */
.notes { padding-block: clamp(46px, 6vw, 82px); border-top: 1px solid var(--line); }

.notes__head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 24px; flex-wrap: wrap; margin-bottom: 30px;
}
.notes__eyebrow {
	display: inline-block; font-family: var(--font-hand);
	font-size: 1.15rem; color: var(--red); margin-bottom: 2px;
}
.notes__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.5rem, 3vw, 2.3rem); margin: 0 0 6px; }
.notes__sub { color: var(--ink-soft); margin: 0; max-width: 48ch; }

.notes__all {
	display: inline-flex; align-items: center; gap: 8px;
	text-decoration: none; color: var(--ink-soft); font-weight: 700; font-size: .94rem;
	padding-bottom: 4px; border-bottom: 1px solid var(--line);
	transition: color .3s, border-color .3s;
}
.notes__all svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.notes__all:hover { color: var(--red); border-color: var(--red); }
.notes__all:hover svg { transform: translateX(-4px); }

/* --- شبکهٔ کارت‌ها --- */
.notes__grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(14px, 2vw, 22px);
}

.note-card { display: flex; }
.note-card__link {
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; width: 100%;
	background: var(--sheet); border: 1px solid var(--line); border-radius: 16px;
	text-decoration: none; color: inherit;
	transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.note-card__link::before {
	content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
	width: 3px; background: var(--red);
	transform: scaleY(0); transform-origin: top;
	transition: transform .4s var(--ease); z-index: 2;
}
.note-card__link:hover, .note-card__link:focus-visible {
	transform: translateY(-5px);
	border-color: var(--red);
	box-shadow: 0 22px 40px -30px rgba(60, 40, 25, .85);
}
.note-card__link:hover::before, .note-card__link:focus-visible::before { transform: scaleY(1); }

/* تصویر یا نقشِ جایگزین */
.note-card__thumb {
	display: block; aspect-ratio: 16 / 9; overflow: hidden;
	background: var(--paper2, #efe4d4); border-bottom: 1px solid var(--line);
}
.note-card__thumb img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .55s var(--ease);
}
.note-card__link:hover .note-card__thumb img { transform: scale(1.05); }
.note-card__thumb--blank { display: grid; place-items: center; }
.note-card__thumb--blank svg { width: 62%; height: auto; opacity: .75; transition: transform .5s var(--ease); }
.note-card__link:hover .note-card__thumb--blank svg { transform: translateY(-3px) scale(1.04); }

.note-card__body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 16px; }

.note-card__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.note-card__num { font-weight: 900; font-size: .82rem; color: var(--red); }
.note-card__cat {
	font-size: .72rem; color: var(--ink-faint);
	padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px;
	transition: border-color .3s, color .3s;
}
.note-card__link:hover .note-card__cat { border-color: var(--red); color: var(--red); }

.note-card__title {
	display: block; font-weight: 800; font-size: 1.06rem; line-height: 1.6;
	margin-bottom: 8px; transition: color .3s;
}
.note-card__link:hover .note-card__title { color: var(--red-deep); }

.note-card__excerpt { display: block; font-size: .9rem; color: var(--ink-soft); line-height: 1.85; margin-bottom: 16px; }

.note-card__foot {
	display: flex; align-items: center; justify-content: space-between;
	margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line);
}
.note-card__date { font-size: .8rem; color: var(--ink-faint); }
.note-card__go { color: var(--ink-faint); display: inline-flex; transition: color .3s, transform .4s var(--ease); }
.note-card__go svg { width: 18px; height: 18px; }
.note-card__link:hover .note-card__go { color: var(--red); transform: translateX(-4px); }

/* --- حالتِ خالی --- */
.notes__empty {
	text-align: center; padding: 46px 20px;
	border: 1px dashed var(--line); border-radius: 16px; background: var(--sheet);
}
.notes__empty-mark { display: block; margin: 0 auto 14px; max-width: 150px; }
.notes__empty-mark svg { width: 100%; height: auto; opacity: .8; }
.notes__empty p { color: var(--ink-faint); margin: 0 0 16px; }

/* ------ ساختِ نشانه روی کارتِ یادداشت (یک‌بار، در نخستین هاور) ------ */
.note-card__thumb { position: relative; }

.note-card__build {
	position: absolute; inset: 0; z-index: 3;
	display: grid; place-items: center;
	background: var(--paper2, #efe4d4);
	transition: opacity .5s ease, transform .6s var(--ease);
}
.note-card__build svg { width: 46%; height: auto; overflow: visible; }

/* حالتِ ساکن پیش از هاور: فقط گره‌ها و مربع، بدونِ قوس */
.nb-n1, .nb-n2 { fill: var(--ink-faint); }
.nb-f1, .nb-f2 { fill: none; stroke: var(--ink-faint); stroke-width: 2.2; stroke-linecap: round; }
.nb-sq { fill: var(--red); }
.nb-arc { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }

/* پیش از پخش: قوس نامرئی، بقیه کم‌رنگ */
.note-card__build .nb-arc { stroke-dasharray: 170; stroke-dashoffset: 170; }

@keyframes nb-draw { from { stroke-dashoffset: var(--d); } to { stroke-dashoffset: 0; } }
@keyframes nb-pop  { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes nb-ink  { to { fill: var(--ink); stroke: var(--ink); } }

/* --- توالیِ پخش --- */
.note-card.is-building .nb-n1 { opacity: 0; transform-box: fill-box; transform-origin: center;
	animation: nb-pop .3s .05s cubic-bezier(.2,1.5,.4,1) forwards, nb-ink .3s .05s forwards; }
.note-card.is-building .nb-f1 { --d: 12; stroke-dasharray: 12; stroke-dashoffset: 12;
	animation: nb-draw .32s .34s ease forwards, nb-ink .32s .34s forwards; }
.note-card.is-building .nb-n2 { opacity: 0; transform-box: fill-box; transform-origin: center;
	animation: nb-pop .28s .64s cubic-bezier(.2,1.5,.4,1) forwards, nb-ink .28s .64s forwards; }
.note-card.is-building .nb-f2 { --d: 10; stroke-dasharray: 10; stroke-dashoffset: 10;
	animation: nb-draw .3s .9s ease forwards, nb-ink .3s .9s forwards; }
.note-card.is-building .nb-sq { opacity: 0; transform-box: fill-box; transform-origin: center;
	animation: nb-pop .4s 1.18s cubic-bezier(.2,1.5,.4,1) forwards; }
/* قوسِ G مثلِ دست‌نویس کشیده می‌شود */
.note-card.is-building .nb-arc { --d: 170;
	animation: nb-draw .95s 1.5s cubic-bezier(.6,.02,.25,1) forwards; }

/* پس از کامل‌شدنِ نشانه: جمع می‌شود و کنار می‌رود تا تصویر آشکار شود */
.note-card.is-built .note-card__build {
	opacity: 0;
	transform: translate(-26%, -22%) scale(.34);
}
.note-card.is-built .nb-arc { stroke-dashoffset: 0; }

/* در کارتِ بدونِ تصویر، لایه می‌ماند ولی نشانه کامل و ساکن است */
.note-card__thumb--blank .note-card__build { background: var(--paper2, #efe4d4); }
.note-card.is-built .note-card__thumb--blank .note-card__build {
	opacity: 1; transform: none;
}
.note-card.is-built .note-card__thumb--blank .nb-n1,
.note-card.is-built .note-card__thumb--blank .nb-n2 { fill: var(--ink-faint); }
.note-card.is-built .note-card__thumb--blank .nb-f1,
.note-card.is-built .note-card__thumb--blank .nb-f2 { stroke: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) {
	.note-card__build { transition: none; }
	.note-card__build .nb-arc { stroke-dashoffset: 0; }
	.note-card.is-built .note-card__build { opacity: 0; transform: none; }
}

/* ================================================= ابزارها (محصول‌ها) ==== */
/* درِ ورودیِ دو محصولِ زنده. زبانِ بصری همان کارتِ یادداشت است تا بخشِ تازه
   وصله به‌نظر نرسد: کاغذِ sheet، مرزِ نازک، نوارِ قرمزِ کناری در هاور. */
/* ⚠️ `scroll-margin-top` اجباری است، تزئین نیست: نوارِ بالای سایت `position: sticky`
   با `min-height: 76px` است، پس پرشِ «ابزارها» بدونِ این خط سرِ بخش را **زیرِ نوار**
   می‌اندازد و کاربر فکر می‌کند لینک کار نکرده. ۷۷ = ۷۶ + ۱ مرز. */
.products { padding-block: clamp(46px, 6vw, 82px); border-top: 1px solid var(--line); scroll-margin-top: 96px; }

.products__head { margin-bottom: 30px; }
.products__eyebrow {
	display: inline-block; font-family: var(--font-hand);
	font-size: 1.15rem; color: var(--red); margin-bottom: 2px;
}
.products__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.5rem, 3vw, 2.3rem); margin: 0 0 6px; text-wrap: balance; }
.products__sub { color: var(--ink-soft); margin: 0; max-width: 60ch; }

.products__grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: clamp(16px, 2vw, 24px);
}

.pcard {
	position: relative; overflow: hidden;
	display: flex; flex-direction: column;
	background: var(--sheet); border: 1px solid var(--line); border-radius: 16px;
	padding: clamp(20px, 2.4vw, 30px);
	transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.pcard::before {
	content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
	width: 3px; background: var(--red);
	transform: scaleY(0); transform-origin: top;
	transition: transform .4s var(--ease);
}
.pcard:hover, .pcard:focus-within {
	transform: translateY(-4px);
	border-color: var(--red);
	box-shadow: 0 22px 40px -30px rgba(60, 40, 25, .85);
}
.pcard:hover::before, .pcard:focus-within::before { transform: scaleY(1); }

.pcard__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.pcard__num { font-weight: 900; font-size: .82rem; color: var(--red); }
.pcard__name { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.35rem, 2.4vw, 1.8rem); margin: 0; }
/* ⚠️ رنگ‌ها اینجا با نسبتِ تضاد **اندازه‌گیری** شده‌اند، نه انتخابِ سلیقه‌ای:
   `--red` روی `--sheet` نسبتِ ۳٫۷۲ می‌دهد و از ۴٫۵ کمتر است، پس `--red-deep`
   نشست. همین برای `--ink-faint` (۳٫۴۵) که جایش `--ink-soft` آمد.
   سوئیت این را می‌سنجد؛ اگر کسی به رنگِ روشن‌تر برگرداند، قرمز می‌شود. */
.pcard__essence {
	font-size: .86rem; color: var(--red-deep);
	padding: 3px 11px; border: 1px solid var(--red); border-radius: 999px;
	white-space: nowrap;
}

.pcard__master { font-size: 1.06rem; font-weight: 700; line-height: 1.75; margin: 0 0 6px; }
.pcard__cat { font-size: .9rem; color: var(--ink-soft); margin: 0 0 14px; }
.pcard__problem { font-size: .94rem; color: var(--ink-soft); line-height: 1.9; margin: 0 0 16px; }

.pcard__keys { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 9px; }
.pcard__keys li {
	display: flex; align-items: flex-start; gap: 10px;
	font-size: .92rem; line-height: 1.7;
}
/* مربعِ قرمز — همان امضای برند که در لوگو گرهٔ تصمیم است */
.pcard__sq {
	flex: none; width: 9px; height: 9px; margin-top: 8px;
	background: var(--red); border-radius: 1.5px;
}

.pcard__who {
	font-size: .9rem; color: var(--ink-soft); margin: 0 0 18px;
	padding-top: 12px; border-top: 1px dashed var(--line);
}
.pcard__who-lbl { font-family: var(--font-hand); font-size: 1.05rem; color: var(--red-deep); margin-inline-end: 6px; }

.pcard__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
/* `touch-action` تأخیرِ ۳۰۰ میلی‌ثانیه‌ایِ دوبار-ضربه را برمی‌دارد — این دو دکمه
   مسیرِ رسیدن به محصول‌اند و بیشترِ بازدید از گوشی می‌آید. */
.pcard__cta .btn { font-size: .92rem; padding: 11px 22px; touch-action: manipulation; }

@media (max-width: 760px) {
	/* تک‌ستونه: minmax(320px) روی عرضِ ۳۷۵ با پدینگِ shell سرریز می‌دهد */
	.products__grid { grid-template-columns: 1fr; }
	.pcard__essence { white-space: normal; }
	.pcard__cta .btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================ صفحهٔ معرفیِ محصول ==== */
/* مقصدِ دکمه‌های بخشِ ابزارها. همان زبانِ بصریِ سایت: کاغذ، خطِ نازک، تک‌رنگِ قرمز. */
.prod { padding-block: clamp(28px, 4vw, 56px) clamp(46px, 6vw, 86px); }

.prod__crumb { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--ink-soft); margin-bottom: clamp(20px, 3vw, 34px); flex-wrap: wrap; }
.prod__crumb a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line); }
.prod__crumb a:hover { color: var(--red-deep); border-color: var(--red); }
.prod__crumb-now { color: var(--ink); font-weight: 700; }

/* --- سرآیند --- */
.prod__hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(20px, 4vw, 54px); align-items: center; }
.prod__essence {
	display: inline-block; font-size: .86rem; color: var(--red-deep);
	padding: 4px 13px; border: 1px solid var(--red); border-radius: 999px; margin-bottom: 14px;
}
.prod__name { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.1rem, 5.4vw, 3.5rem); line-height: 1.25; margin: 0 0 8px; text-wrap: balance; }
.prod__cat { font-size: .96rem; color: var(--ink-soft); margin: 0 0 22px; }
.prod__hook { font-size: clamp(1.1rem, 2.1vw, 1.35rem); line-height: 1.85; font-weight: 700; margin: 0 0 12px; text-wrap: pretty; }
.prod__master { font-size: 1rem; color: var(--ink-soft); line-height: 1.9; margin: 0 0 26px; max-width: 46ch; }
.prod__note { font-size: .84rem; color: var(--ink-soft); margin: 14px 0 0; max-width: 44ch; }

.prod__hero-art { display: grid; place-items: center; }
.prod__hero-art svg { width: 100%; max-width: 380px; height: auto; color: var(--ink); }

.prod__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.prod__cta .btn { touch-action: manipulation; }

/* --- تیترِ بخش‌ها --- */
.prod__h2 {
	font-family: var(--font-display); font-weight: 900;
	font-size: clamp(1.35rem, 2.8vw, 2rem); margin: 0 0 20px; text-wrap: balance;
}

.prod > section { padding-block: clamp(34px, 5vw, 62px); border-top: 1px solid var(--line); margin-top: clamp(30px, 4vw, 52px); }

/* --- «این را می‌شناسید؟» --- */
.prod__beat-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 14px; max-width: 62ch; }
.prod__beat-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 1.02rem; line-height: 1.85; }
.prod__sq { flex: none; width: 10px; height: 10px; margin-top: 9px; background: var(--red); border-radius: 1.5px; }
.prod__problem {
	font-size: .98rem; color: var(--ink-soft); line-height: 1.95; margin: 0; max-width: 62ch;
	padding-inline-start: 16px; border-inline-start: 3px solid var(--line);
}

/* --- «چه‌کار می‌کند» --- */
.prod__block-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: clamp(14px, 2vw, 22px); }
.pblock {
	background: var(--sheet); border: 1px solid var(--line); border-radius: 16px;
	padding: clamp(18px, 2vw, 26px);
	transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.pblock:hover { border-color: var(--red); transform: translateY(-3px); }
.pblock__num { font-weight: 900; font-size: .8rem; color: var(--red-deep); }
.pblock__name { font-weight: 800; font-size: 1.08rem; margin: 6px 0 10px; }
.pblock__example { font-size: .96rem; line-height: 1.8; margin: 0 0 12px; }
.pblock__proof { font-size: .86rem; color: var(--ink-soft); line-height: 1.8; margin: 0; padding-top: 11px; border-top: 1px dashed var(--line); }

/* --- «برای چه کسی است و برای چه کسی نیست» --- */
.prod__fit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(14px, 2vw, 22px); }
.pfit { padding: clamp(18px, 2vw, 26px); border-radius: 16px; border: 1px solid var(--line); background: var(--sheet); }
.pfit__lbl { display: block; font-family: var(--font-hand); font-size: 1.15rem; margin-bottom: 8px; }
.pfit p { margin: 0; font-size: .98rem; line-height: 1.9; }
.pfit--yes { border-inline-start: 3px solid var(--red); }
.pfit--yes .pfit__lbl { color: var(--red-deep); }
/* «برای شما نیست» عمداً کم‌رنگ‌تر است، ولی نه کم‌تضادتر — رنگش همان ink-soft است. */
.pfit--no { background: transparent; border-style: dashed; }
.pfit--no .pfit__lbl { color: var(--ink-soft); }
.prod__fit-note { margin: 18px 0 0; font-size: .9rem; color: var(--ink-soft); max-width: 60ch; }

/* --- «قدمِ بعدی» --- */
.prod__talk { scroll-margin-top: 96px; }
.prod__promise { font-size: clamp(1.05rem, 2vw, 1.28rem); font-weight: 700; line-height: 1.85; margin: 0 0 10px; max-width: 54ch; text-wrap: pretty; }
.prod__talk-sub { font-size: .98rem; color: var(--ink-soft); line-height: 1.9; margin: 0 0 22px; max-width: 56ch; }

@media (max-width: 860px) {
	/* تصویر زیرِ متن می‌رود و کوچک‌تر می‌شود — روی گوشی متن باید اول بیاید. */
	.prod__hero { grid-template-columns: 1fr; }
	.prod__hero-art { order: 2; }
	.prod__hero-art svg { max-width: 300px; }
	.prod__cta .btn { flex: 1 1 auto; justify-content: center; }
}

/* خطِ «روشِ درونِ محصول» — حکمِ lead ۱۴۰۵/۰۵/۲۶.
   غریبه باید از همان کارت بفهمد داخلِ محصول چه روشی است. کم‌رنگ‌تر از شعار،
   پررنگ‌تر از پانویس — و رنگش `--ink-soft` است نه `--ink-faint` (تضاد ۹٫۲۲). */
.pcard__method { font-size: .9rem; color: var(--ink-soft); margin: -8px 0 14px; font-weight: 700; }
.prod__method { font-size: .96rem; color: var(--ink-soft); margin: -14px 0 22px; font-weight: 700; }


/* ---- تنفسِ اسکرول: کارت‌ها هنگام اسکرول یک‌درصد جمع می‌شوند و بعد برمی‌گردند ----
   ⚠️ عمداً `scale` است نه `transform`: کارت‌ها از قبل روی هاور
   transform دارند و اگر اینجا هم transform بنویسیم یکی دیگری را پاک می‌کند. */
.note-card, .pcard { transition: scale .35s cubic-bezier(.25, .46, .45, .94); }
html.is-scrolling .note-card,
html.is-scrolling .pcard { scale: .988; }
@media (prefers-reduced-motion: reduce) {
	html.is-scrolling .note-card,
	html.is-scrolling .pcard { scale: 1; }
}

/* ================================ سه عددِ بازشونده در دفترِ مهارت‌ها ==== */
/* ⚠️ نوار با هاور **و** با کلیک باز می‌شود. هاورِ تنها روی گوشی هیچ‌وقت
   اتفاق نمی‌افتد، و آن یعنی قابلیتی که نصفِ بازدیدکننده‌ها هرگز نمی‌بینند. */
.stat--pop { position: relative; }
.stat__btn {
	display: block; width: 100%; padding: 0;
	background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
	text-align: center; border-radius: var(--radius);
}
.stat__btn:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.stat__chev {
	display: block; width: 7px; height: 7px; margin: 7px auto 0;
	border-inline-end: 1.6px solid var(--ink-faint); border-block-end: 1.6px solid var(--ink-faint);
	transform: rotate(45deg); opacity: .5;
	transition: transform .3s var(--ease), opacity .2s ease;
}
.stat--pop:hover .stat__chev,
.stat__btn[aria-expanded="true"] .stat__chev { opacity: 1; }
.stat__btn[aria-expanded="true"] .stat__chev { transform: rotate(-135deg); }

.stat__panel {
	position: absolute; z-index: 40; top: calc(100% + 10px);
	inset-inline-start: 50%; transform: translateX(-50%) translateY(-6px);
	width: max-content; max-width: min(300px, 82vw);
	background: var(--sheet); border: 1px solid var(--line);
	border-block-start: 3px solid var(--red);
	box-shadow: 0 14px 34px rgba(28, 28, 28, .13);
	padding: 12px 6px 8px; text-align: start;
	opacity: 0; visibility: hidden;
	transition: opacity .22s ease, transform .28s var(--ease), visibility 0s .28s;
}
.stat__panel.is-open {
	opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
	transition: opacity .22s ease, transform .28s var(--ease), visibility 0s;
}
.stat__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.stat__list li { display: block; }
.stat__list a, .stat__list span {
	display: block; padding: 8px 14px; font-size: .92rem; line-height: 1.6;
	color: var(--ink-soft); text-decoration: none;
}
.stat__list a { color: var(--ink); font-weight: 700; }
.stat__list a:hover, .stat__list a:focus-visible { background: var(--paper-2); color: var(--red-deep); }
.stat__more {
	display: block; margin-top: 6px; padding: 9px 14px;
	border-block-start: 1px solid var(--line-soft);
	font-size: .86rem; font-weight: 800; color: var(--red); text-decoration: none;
}
.stat__more:hover, .stat__more:focus-visible { background: var(--paper-2); }

/* «سال تجربه» خودش لینک است */
.stat--go { display: block; text-decoration: none; color: inherit; border-radius: var(--radius); }
.stat--go:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.stat__hint {
	display: block; margin-top: 6px; font-size: .74rem; color: var(--ink-faint);
	opacity: 0; transform: translateY(-3px); transition: opacity .25s ease, transform .25s var(--ease);
}
.stat--go:hover .stat__hint, .stat--go:focus-visible .stat__hint { opacity: 1; transform: none; }
.stat--go:hover .stat__value { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
	.stat__panel, .stat__hint, .stat__chev { transition-duration: .001s; }
}

/* ========================= اجزای دیداریِ یادداشت («کاغذِ شطرنجی») ==== */
/* ⚠️ قاعدهٔ سختِ این بخش: **حالتِ پایانی، حالتِ پیش‌فرض است.**
   نقطهٔ شروعِ انیمیشن فقط زیرِ `html.ghlab-js` تعریف می‌شود — یعنی اگر
   جاوااسکریپت اصلاً اجرا نشود، نمودارها کامل و درست دیده می‌شوند، نه صفر.
   (نمودارِ صفر یک تصویرِ دروغ است؛ متنِ بدونِ تصویر فقط ساده است.)
   و عددها همیشه در خودِ HTML نوشته‌اند، نه ساختهٔ اسکریپت. */

/* ⚠️ بیرون‌زدن از ستون با حاشیهٔ منفی، نه با `left: 50%`.
   `left: 50%` نسبت به **ستون** حساب می‌شود نه صفحه؛ و چون ستون خودش وسطِ
   صفحه است، صفحهٔ داده ۱۶۸ پیکسل از لبه بیرون می‌زد. با حاشیهٔ منفی، پهنا
   هرگز از فضای واقعیِ موجود بیشتر نمی‌شود و روی هیچ عرضی سرریز نمی‌کند.
   (`100%` = عرضِ ستون · `100vw` = عرضِ صفحه · ۲۰px حاشیهٔ امن هر طرف) */
/* مدت و شتابِ مشترکِ همهٔ نمودارها. lens.js همین مقدار را از CSS می‌خواند،
   پس شمارنده و میله هرگز از هم نمی‌افتند — یک عدد، یک مالک. */
:root {
	--nd-dur: 1100ms;
	--nd-ease: cubic-bezier(.23, 1, .32, 1);
}

.nd-plate {
	margin-block: clamp(40px, 6vw, 72px);
	margin-inline: calc(-1 * min(140px, max(0px, (100vw - 100% - 40px) / 2)));
}
/* ⚠️ `.prose` روی کلِ بدنه `text-align-last: right` می‌گذارد، و یک متنِ
   یک‌خطی **تماماً سطرِ آخر است** — پس هر `text-align: center`ی که اینجا
   بنویسیم بی‌اثر می‌ماند و بی‌صدا راست می‌چسبد. `auto` یعنی «هرچه
   text-align گفت»، و آن دقیقاً همان چیزی است که این اجزا می‌خواهند. */
.prose .nd-plate,
.prose .nd-plate * { text-align-last: auto; }

.nd-cap { font-family: var(--font-hand); font-size: 1.5rem; color: var(--red); line-height: 1.3; margin: 0; }
.nd-src { margin: 18px 0 0; font-size: .78rem; color: var(--ink-faint); text-align: center; }

/* ① افت — دو ستون، هرکدام داخلِ قابِ «۱۰۰» */
.nd-drop { display: flex; gap: clamp(24px, 5vw, 72px); align-items: flex-end; justify-content: center; }
.nd-bar { width: min(190px, 32vw); text-align: center; }
.nd-bar__num {
	font-size: clamp(2.4rem, 6.5vw, 4.2rem); font-weight: 900; line-height: 1;
	letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); margin-bottom: 14px;
}
.nd-bar__num sup { font-size: .42em; font-weight: 800; vertical-align: .9em; color: var(--ink-faint); }
.nd-bar__frame {
	position: relative; height: 270px; border: 1px solid var(--line);
	background: repeating-linear-gradient(to top, transparent 0 29px, var(--line-soft) 29px 30px);
}
.nd-bar__fill { position: absolute; left: 0; right: 0; bottom: 0; background: var(--ink); transform-origin: bottom; }
.nd-bar--b .nd-bar__fill { background: var(--red); }
.nd-bar--b .nd-bar__num { color: var(--red); }
.nd-bar__lbl { margin-top: 14px; font-size: .88rem; color: var(--ink-soft); line-height: 1.6; }
.nd-gap { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 100px; max-width: 200px; }

/* ② نسبت — صد نقطه */
.nd-dots { display: grid; grid-template-columns: repeat(20, 1fr); gap: 7px; max-width: 640px; margin-inline: auto; }
.nd-dots i { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; }
.nd-dots i.on { background: var(--red); border-color: var(--red-deep); }

/* ③ خیز در زمان — افقی، چون داده «مدت» است نه «سهم» */
/* ⚠️ ستونِ سوم عرضِ **ثابت** دارد. با `auto` دو ردیف دو عرضِ متفاوت می‌گرفتند و
   آن یعنی دو نوار روی دو مقیاسِ متفاوت — نموداری که دروغ می‌گوید. */
.nd-rise { display: flex; flex-direction: column; gap: 22px; max-width: 760px; margin-inline: auto; }
.nd-rise__row { display: grid; grid-template-columns: 104px 1fr 116px; gap: 16px; align-items: center; }
.nd-rise__yr { font-size: .86rem; color: var(--ink-faint); }
.nd-rise__track { height: 34px; background: var(--sheet); border: 1px solid var(--line-soft); position: relative; overflow: hidden; }
.nd-rise__fill { position: absolute; top: 0; bottom: 0; right: 0; background: var(--ink-soft); transform-origin: right; }
.nd-rise__row--now .nd-rise__fill { background: var(--red); }
.nd-rise__val { font-weight: 900; font-size: 1.05rem; white-space: nowrap; }
.nd-rise__row--now .nd-rise__val { color: var(--red); }

/* ④ مسیر — دو خطِ ساخته‌شده، یک خطِ نساخته */
.nd-flow { max-width: 780px; margin-inline: auto; }
.nd-flow__lane { display: grid; grid-template-columns: 130px 1fr 130px; align-items: center; gap: 18px; padding: 15px 0; }
.nd-flow__node {
	background: var(--sheet); border: 1px solid var(--line); padding: 13px 10px;
	text-align: center; font-size: .88rem; font-weight: 700; line-height: 1.45;
}
.nd-flow__mid { position: relative; height: 46px; }
.nd-flow__mid svg { width: 100%; height: 100%; overflow: visible; display: block; }
.nd-flow__mid path { fill: none; stroke-width: 2; stroke-linecap: round; }
.nd-flow__mid .ln { stroke: var(--ink-soft); }
.nd-flow__mid .ghost { stroke: var(--red); stroke-dasharray: 7 8; opacity: .9; }
.nd-flow__lane--missing .nd-flow__node { border-style: dashed; border-color: var(--red); color: var(--red); background: transparent; }
.nd-flow__tag { font-family: var(--font-hand); font-size: 1.35rem; color: var(--red); text-align: center; margin: 6px 0 0; }
.nd-flow__lbl {
	position: absolute; left: 50%; transform: translateX(-50%); top: -3px;
	font-size: .75rem; color: var(--ink-faint); background: var(--paper); padding: 0 9px; white-space: nowrap;
}

/* ⑤ کارتِ وضعیت — برای یادداشتی که عدد ندارد، حکم دارد */
.nd-rec { background: var(--sheet); border: 1px solid var(--line); max-width: 640px; margin-inline: auto; }
.nd-rec__row { display: grid; grid-template-columns: 130px 1fr; border-block-end: 1px solid var(--line-soft); }
.nd-rec__row:last-child { border-block-end: 0; }
.nd-rec__k { padding: 15px 18px; font-size: .83rem; color: var(--ink-faint); background: rgba(28, 28, 28, .03); }
.nd-rec__v { padding: 15px 18px; font-size: .95rem; color: var(--ink-soft); line-height: 1.75; }
.nd-chip { display: inline-block; background: var(--red); color: #fff; font-weight: 800; font-size: .8rem; padding: 4px 14px; }

/* جدول معنایی: محتوای کامل حالتِ پایه است؛ پیمایش افقی فقط داخلِ قاب. */
.nd-table-wrap { max-width: 860px; margin-inline: auto; overflow-x: auto; }
.nd-table-wrap:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.nd-table { width: 100%; border-collapse: collapse; background: var(--sheet); font-size: .9rem; }
.nd-table caption { caption-side: bottom; padding-top: 16px; font-size: .78rem; color: var(--ink-soft); text-align: center; }
.nd-table th, .nd-table td { text-align: right; vertical-align: top; padding: 16px 20px; border-bottom: 1px solid var(--line); line-height: 1.85; }
.nd-table th { color: var(--ink); background: var(--paper); }
.nd-table__row { opacity: 1; transform: none; --nd-row-gap: 50ms; }
.nd-table__row--mark { background: rgba(190, 48, 42, .07); }
.nd-table__row--mark td:first-child { border-inline-start: 3px solid var(--red); font-weight: 700; }
html.ghlab-js .nd-rv .nd-table__row { opacity: 0; transform: translateY(8px); transition: opacity var(--nd-dur) var(--nd-ease), transform var(--nd-dur) var(--nd-ease); transition-delay: calc(var(--nd-row-index) * var(--nd-row-gap)); }
html.ghlab-js .nd-rv.is-in .nd-table__row { opacity: 1; transform: none; }
html.ghlab-js .nd-table__row--mark.is-settling { animation: nd-table-breathe 380ms var(--nd-ease); }
@keyframes nd-table-breathe { 50% { background-color: rgba(190, 48, 42, .18); } }
@media (prefers-reduced-motion: reduce) {
	html.ghlab-js .nd-rv .nd-table__row { opacity: 1; transform: none; transition: none; }
	html.ghlab-js .nd-table__row--mark.is-settling { animation: none; }
}
@media (max-width: 680px) {
	.nd-table { min-width: 520px; font-size: .84rem; }
	.nd-table th, .nd-table td { padding: 12px; }
	.nd-table-wrap { overscroll-behavior-inline: contain; }
}

/* ⑦ خطِ زمان — جوابِ «چه اتفاقی، در چه ترتیب زمانی؟» */
.nd-timeline { list-style: none; max-width: 760px; margin: 0 auto; padding: 0; position: relative; }
.nd-timeline::before { content: ""; position: absolute; inset-block: 20px; inset-inline-start: 112px; border-inline-start: 1px solid var(--line); }
.nd-timeline__event {
	display: grid; grid-template-columns: 96px 1fr; gap: 34px; align-items: start;
	position: relative; padding: 12px 0; opacity: 1; translate: none; scale: 1;
}
.nd-timeline__event::before {
	content: ""; position: absolute; inset-inline-start: 106px; inset-block-start: 22px;
	width: 13px; aspect-ratio: 1; border: 2px solid var(--paper); border-radius: 50%; background: var(--ink-soft);
}
.nd-timeline__event:last-child::before { background: var(--red); }
.nd-timeline__when { color: var(--ink-faint); font-size: .8rem; line-height: 1.7; text-align: left; }
.nd-timeline__what { background: var(--sheet); border: 1px solid var(--line-soft); padding: 13px 16px; line-height: 1.75; }

/* ⑧ ماتریس — جوابِ «روی دو محورِ مستقل، کدام خانه؟» */
.nd-matrix { max-width: 760px; margin-inline: auto; display: grid; grid-template-columns: 90px 1fr; grid-template-areas: "yh grid" "yl grid" ". x"; gap: 10px 16px; }
.nd-matrix__grid { grid-area: grid; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--line); gap: 1px; }
.nd-matrix__cell { min-height: 136px; display: flex; align-items: center; justify-content: center; padding: 18px; background: var(--sheet); line-height: 1.75; text-align: center; opacity: 1; translate: none; scale: 1; }
.nd-matrix__cell--b, .nd-matrix__cell--c { background: var(--paper); }
.nd-matrix__y { color: var(--ink-faint); font-size: .78rem; line-height: 1.6; writing-mode: vertical-rl; justify-self: center; }
.nd-matrix__y--high { grid-area: yh; align-self: start; }
.nd-matrix__y--low { grid-area: yl; align-self: end; }
.nd-matrix__x { grid-area: x; display: flex; justify-content: space-between; color: var(--ink-faint); font-size: .78rem; }

/* ⑨ مرحله‌ها — جوابِ «فرایند اکنون کجاست و چه چیزی مانده؟» */
.nd-steps { list-style: none; max-width: 900px; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(var(--nd-step-count, 4), minmax(0, 1fr)); gap: 12px; }
.nd-steps__item { position: relative; min-width: 0; background: var(--sheet); border: 1px solid var(--line); padding: 18px 16px; opacity: 1; translate: none; scale: 1; }
.nd-steps__item--now { border-color: var(--red); box-shadow: inset 0 3px 0 var(--red); }
.nd-steps__item--waiting { border-style: dashed; color: var(--ink-soft); }
.nd-steps__state { display: block; color: var(--ink-faint); font-size: .72rem; margin-bottom: 10px; }
.nd-steps__item--now .nd-steps__state { color: var(--red); font-weight: 800; }
.nd-steps__name { display: block; font-size: .93rem; line-height: 1.6; margin-bottom: 8px; }
.nd-steps__detail { display: block; color: var(--ink-soft); font-size: .82rem; line-height: 1.7; }

/* ---- نقطهٔ شروعِ انیمیشن: فقط وقتی جاوااسکریپت هست ---- */
html.ghlab-js .nd-rv .nd-bar__fill { transform: scaleY(0); transition: transform var(--nd-dur) var(--nd-ease); }
html.ghlab-js .nd-rv.is-in .nd-bar__fill { transform: scaleY(1); }
html.ghlab-js .nd-rv .nd-rise__fill { transform: scaleX(0); transition: transform var(--nd-dur) var(--nd-ease); }
html.ghlab-js .nd-rv.is-in .nd-rise__fill { transform: scaleX(1); }
html.ghlab-js .nd-rv .nd-dots i {
	opacity: .3; transform: scale(.55); background: transparent;
	transition: opacity .45s var(--ease), transform .45s var(--ease), background-color .45s var(--ease);
}
html.ghlab-js .nd-rv.is-in .nd-dots i { opacity: 1; transform: scale(1); }
html.ghlab-js .nd-rv.is-in .nd-dots i.on { background: var(--red); }
html.ghlab-js .nd-rv .nd-flow__mid .ln { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1s var(--ease); }
html.ghlab-js .nd-rv.is-in .nd-flow__mid .ln { stroke-dashoffset: 0; }
html.ghlab-js .nd-rv .nd-flow__mid .ghost { opacity: 0; transition: opacity .6s var(--ease) .9s; }
html.ghlab-js .nd-rv.is-in .nd-flow__mid .ghost { opacity: .9; }
html.ghlab-js .nd-rv .nd-timeline__event {
	opacity: 0; translate: 0 8px; scale: .97;
	transition: opacity var(--nd-dur) var(--nd-ease), translate var(--nd-dur) var(--nd-ease), scale var(--nd-dur) var(--nd-ease);
	transition-delay: calc(var(--nd-item-index) * 60ms);
}
html.ghlab-js .nd-rv .nd-matrix__cell {
	opacity: 0; translate: 0 8px; scale: .97;
	transition: opacity var(--nd-dur) var(--nd-ease), translate var(--nd-dur) var(--nd-ease), scale var(--nd-dur) var(--nd-ease);
	transition-delay: calc(var(--nd-item-index) * 60ms);
}
html.ghlab-js .nd-rv .nd-steps__item {
	opacity: 0; translate: 0 8px; scale: .97;
	transition: opacity var(--nd-dur) var(--nd-ease), translate var(--nd-dur) var(--nd-ease), scale var(--nd-dur) var(--nd-ease);
	transition-delay: calc(var(--nd-item-index) * 60ms);
}
html.ghlab-js .nd-rv.is-in .nd-timeline__event,
html.ghlab-js .nd-rv.is-in .nd-matrix__cell,
html.ghlab-js .nd-rv.is-in .nd-steps__item { opacity: 1; translate: none; scale: 1; }

@media (prefers-reduced-motion: reduce) {
	html.ghlab-js .nd-rv .nd-bar__fill { transform: scaleY(1); }
	html.ghlab-js .nd-rv .nd-rise__fill { transform: scaleX(1); }
	html.ghlab-js .nd-rv .nd-dots i { opacity: 1; transform: none; }
	html.ghlab-js .nd-rv .nd-dots i.on { background: var(--red); }
	html.ghlab-js .nd-rv .nd-flow__mid .ln { stroke-dashoffset: 0; }
	html.ghlab-js .nd-rv .nd-flow__mid .ghost { opacity: .9; }
	html.ghlab-js .nd-rv .nd-timeline__event,
	html.ghlab-js .nd-rv .nd-matrix__cell,
	html.ghlab-js .nd-rv .nd-steps__item { opacity: 1; translate: none; scale: 1; transition: none; }
}

@media (max-width: 680px) {
	.nd-dots { grid-template-columns: repeat(10, 1fr); }
	.nd-flow__lane { grid-template-columns: 1fr; gap: 8px; text-align: center; }
	.nd-flow__mid { height: 54px; }
	.nd-gap { display: none; }
	.nd-rise__row { grid-template-columns: 1fr; gap: 6px; }
	.nd-rec__row { grid-template-columns: 96px 1fr; }
	.nd-timeline::before { inset-inline-start: 8px; }
	.nd-timeline__event { grid-template-columns: 1fr; gap: 5px; padding-inline-start: 30px; }
	.nd-timeline__event::before { inset-inline-start: 2px; }
	.nd-timeline__when { text-align: right; }
	.nd-matrix { grid-template-columns: 42px 1fr; gap: 8px; }
	.nd-matrix__cell { min-height: 112px; padding: 11px; font-size: .82rem; }
	.nd-steps { grid-template-columns: 1fr; }
	.nd-steps__item { padding: 14px; }
}


/* ---- عددهای شمارنده ---- */
.nd-n { font-variant-numeric: tabular-nums; display: inline-block; }

/* عددِ درشتِ بالای صد نقطه */
.nd-dots__num {
	margin: 0 0 18px; text-align: center; line-height: 1;
	font-size: clamp(2.6rem, 7vw, 4.4rem); font-weight: 900; letter-spacing: -.03em;
	color: var(--red); font-variant-numeric: tabular-nums;
}
.nd-dots__num sup { font-size: .38em; font-weight: 800; vertical-align: .95em; color: var(--ink-faint); }

/* ---- «نفسِ» رسیدن: لحظه‌ای که عدد به مقصد می‌رسد ----
   ⚠️ فقط `scale` و `opacity` حرکت می‌کنند (روی GPU)، نه اندازهٔ قلم —
   تغییرِ font-size کلِ سطر را دوباره می‌چیند و پرش می‌سازد. */
html.ghlab-js .nd-rv .nd-n,
html.ghlab-js .nd-rv .nd-bar__fill,
html.ghlab-js .nd-rv .nd-rise__fill { transform-origin: center; }
html.ghlab-js .nd-rv .nd-n { transition: transform .34s var(--nd-ease); }
html.ghlab-js .nd-rv .is-settling > .nd-n,
html.ghlab-js .nd-rv .is-settling .nd-n { transform: scale(1.07); }

/* میله در همان لحظه یک پلهٔ روشن می‌گیرد و برمی‌گردد */
html.ghlab-js .nd-rv .nd-bar__fill,
html.ghlab-js .nd-rv .nd-rise__fill { transition-property: transform, filter; }
html.ghlab-js .nd-rv .is-settling .nd-bar__fill,
html.ghlab-js .nd-rv .is-settling .nd-rise__fill { filter: brightness(1.18); }

/* ---- صد نقطه یکی‌یکی پر می‌شوند، نه همه با هم ----
   تأخیرِ هر نقطه را lens.js می‌گذارد (۱۰۰ قاعدهٔ nth-child نوشتنی نیست). */
html.ghlab-js .nd-rv .nd-dots i { transition-duration: .34s; }

@media (prefers-reduced-motion: reduce) {
	html.ghlab-js .nd-rv .nd-n { transition: none; transform: none; }
	html.ghlab-js .nd-rv .is-settling .nd-bar__fill,
	html.ghlab-js .nd-rv .is-settling .nd-rise__fill { filter: none; }
}