/* ============================================================
   فلوریژن — Florigen · Brand landing page
   RTL / Persian · Vazirmatn (body) + Markazi Text (display)
   NOTE: no letter-spacing on Persian text — it breaks glyph joining
   ============================================================ */

/* ---------- tokens ---------- */
:root {
	--paper: #F2EDE2;
	--paper-2: #EAE4D3;
	--ink: #232B1E;
	--ink-soft: #4C5544;
	--moss: #5C6B4F;
	--sage: #D6D9BE;
	--clay: #BC5F35;
	--blush: #E4B69B;
	--hair: rgba(35,43,30,.16);
	--dark: #1B2318;
	--serif: 'Markazi Text','Vazirmatn',serif;
	--sans: 'Vazirmatn',Tahoma,sans-serif;
	--hh: 74px;
}

/* ---------- base ---------- */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box
}

html {
	scroll-behavior: smooth
}

body {
	background: var(--paper);
	color: var(--ink);
	font: 400 1rem/1.95 var(--sans);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden
}
	/* paper grain */
	body::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 200;
		pointer-events: none;
		mix-blend-mode: multiply;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E")
	}

::selection {
	background: var(--clay);
	color: var(--paper)
}

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

a {
	color: inherit;
	text-decoration: none
}

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

.wrap {
	width: min(1220px,92vw);
	margin-inline: auto
}

section {
	scroll-margin-top: calc(var(--hh) + 12px)
}

h1, h2, h3 {
	font-family: var(--serif);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0
}

/* ---------- shared bits ---------- */
.label {
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	font: 600 .82rem/1 var(--sans);
	color: var(--clay)
}

	.label::before {
		content: "";
		width: 34px;
		height: 1px;
		background: currentColor;
		opacity: .7
	}

.pill {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .85rem 1.5rem;
	border-radius: 999px;
	border: 1px solid var(--ink);
	font: 600 .9rem/1 var(--sans);
	color: var(--ink);
	cursor: pointer;
	background: transparent;
	transition: background .3s,color .3s,border-color .3s,transform .3s
}

	.pill.solid {
		background: var(--ink);
		color: var(--paper)
	}

		.pill.solid:hover {
			background: var(--clay);
			border-color: var(--clay);
			transform: translateY(-2px)
		}

	.pill.ghost:hover {
		background: var(--ink);
		color: var(--paper);
		transform: translateY(-2px)
	}

	.pill.light {
		background: var(--paper);
		color: var(--ink);
		border-color: var(--paper)
	}

		.pill.light:hover {
			background: var(--clay);
			border-color: var(--clay);
			color: var(--paper);
			transform: translateY(-2px)
		}

	.pill svg {
		transition: transform .3s
	}

	.pill:hover svg {
		transform: translateX(-3px)
	}
/* RTL: mirrored arrow */

.ulink {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .45rem
}

	.ulink::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		bottom: -4px;
		height: 1px;
		background: currentColor;
		transform-origin: right;
		transition: transform .4s cubic-bezier(.22,1,.3,1)
	}

	.ulink:hover::after {
		transform: scaleX(0)
	}

/* ---------- entrance utilities ---------- */
.fu {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .8s ease var(--d,0s),transform .8s cubic-bezier(.22,1,.3,1) var(--d,0s)
}

.loaded .fu {
	opacity: 1;
	transform: none
}

.js .reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .9s ease var(--d,0s),transform .9s cubic-bezier(.22,1,.3,1) var(--d,0s)
}

	.js .reveal.in {
		opacity: 1;
		transform: none
	}

/* ---------- sprigs & buds (injected) ---------- */
.sprig-slot {
	display: inline-block;
	width: 52px
}

.sprig {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible
}

	.sprig .sp {
		stroke-dasharray: 1;
		stroke-dashoffset: 1
	}

.in .sprig .sp {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1)
}

	.in .sprig .sp:nth-of-type(2) {
		transition-delay: .3s
	}

	.in .sprig .sp:nth-of-type(3) {
		transition-delay: .45s
	}

	.in .sprig .sp:nth-of-type(4) {
		transition-delay: .6s
	}

.bud-slot {
	display: inline-flex;
	width: 28px;
	flex: none
}

.budg {
	display: block;
	width: 100%;
	height: auto
}

/* ---------- header ---------- */
.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	transition: background .35s,box-shadow .35s,color .35s
}

	.site-header .wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: var(--hh)
	}

.brand {
	display: flex;
	align-items: center;
	gap: .55rem;
	font: 500 1.45rem var(--serif);
	z-index: 110
}

	.brand svg {
		width: 21px;
		height: auto
	}

.nav {
	display: flex;
	align-items: center;
	gap: 2rem
}

	.nav a.nl {
		font: 500 .88rem var(--sans);
		position: relative;
		padding: .3rem 0
	}

		.nav a.nl::after {
			content: "";
			position: absolute;
			inset-inline: 0;
			bottom: 0;
			height: 1px;
			background: currentColor;
			transform: scaleX(0);
			transform-origin: left;
			transition: transform .35s cubic-bezier(.22,1,.3,1)
		}

		.nav a.nl:hover::after {
			transform: scaleX(1)
		}

	.nav .pill {
		padding: .55rem 1.15rem;
		font-size: .8rem
	}

.site-header.scrolled {
	background: color-mix(in srgb,var(--paper) 86%,transparent);
	backdrop-filter: blur(12px);
	box-shadow: 0 1px 0 var(--hair)
}

body.menu-open .site-header {
	background: transparent;
	box-shadow: none;
	color: var(--paper)
}

.burger {
	display: none;
	position: relative;
	width: 42px;
	height: 42px;
	background: none;
	border: 0;
	cursor: pointer;
	z-index: 110;
	color: inherit
}

	.burger span {
		position: absolute;
		inset-inline: 9px;
		height: 1.7px;
		background: currentColor;
		transition: transform .35s;
		top: 16px
	}

		.burger span:last-child {
			top: 24px
		}

body.menu-open .burger span:first-child {
	transform: translateY(4px) rotate(45deg)
}

body.menu-open .burger span:last-child {
	transform: translateY(-4px) rotate(-45deg)
}

/* ---------- mobile menu ---------- */
.mmenu {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: var(--dark);
	color: var(--paper);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 9vw;
	visibility: hidden;
	clip-path: inset(0 0 100% 0);
	transition: clip-path .65s cubic-bezier(.76,0,.24,1),visibility 0s .65s
}

body.menu-open .mmenu {
	visibility: visible;
	clip-path: inset(0);
	transition: clip-path .65s cubic-bezier(.76,0,.24,1)
}

.mmenu a {
	font: 400 clamp(1.9rem,7.5vw,2.9rem)/1.4 var(--serif);
	display: flex;
	align-items: baseline;
	gap: 1rem;
	padding: .5rem 0;
	border-bottom: 1px solid rgba(242,237,226,.14);
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .5s,transform .5s
}

	.mmenu a small {
		font: 500 .72rem var(--sans);
		color: var(--blush)
	}

body.menu-open .mmenu a {
	opacity: 1;
	transform: none;
	transition: opacity .5s calc(.25s + var(--i)*.07s),transform .5s calc(.25s + var(--i)*.07s)
}

.mmenu .mm-foot {
	margin-top: 2.4rem;
	font: 500 .9rem var(--sans);
	color: rgba(242,237,226,.7)
}

	.mmenu .mm-foot a {
		color: var(--blush);
		border: 0;
		padding: 0;
		font: inherit;
		opacity: 1;
		transform: none
	}

/* ---------- hero ---------- */
.hero {
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	padding-top: calc(var(--hh) + 2.5vh)
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.08fr .92fr;
	gap: 3vw;
	align-items: center;
	flex: 1
}

.hero-copy {
	position: relative
}

	.hero-copy .label {
		margin-bottom: 2rem
	}

h1 {
	font-size: clamp(3.2rem,7.6vw,7rem);
	line-height: 1.14
}

	h1 .l {
		display: block;
		overflow: hidden;
		padding-bottom: .12em;
		margin-bottom: -.12em
	}

	h1 .li {
		display: block;
		transform: translateY(115%);
		transition: transform 1s cubic-bezier(.22,1,.3,1) var(--d,0s)
	}

.loaded h1 .li {
	transform: none
}

h1 em {
	color: var(--clay)
}

.hero-sprig {
	position: absolute;
	top: -8px;
	inset-inline-start: -84px;
	width: 56px;
	color: var(--moss)
}

.hero-sub {
	margin-top: 1.8rem;
	max-width: 46ch;
	color: var(--ink-soft);
	font-size: 1.05rem
}

.hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 2.4rem
}

.hero-art {
	display: flex;
	justify-content: center
}

.bloom-wrap {
	width: min(44vw,560px)
}

.bloom-svg {
	width: 100%;
	height: auto;
	overflow: visible;
	display: block
}

.ring-rotor {
	transform-box: view-box;
	transform-origin: 220px 205px;
	animation: spin 42s linear infinite
}

@keyframes spin {
	to {
		transform: rotate(360deg)
	}
}

.ring-text {
	font: 600 15.5px var(--sans);
	letter-spacing: .3em;
	text-transform: uppercase;
	fill: var(--ink);
	opacity: 0;
	transition: opacity 1.1s ease 1.1s
}
/* Latin only — keeps tracking */
.loaded .ring-text {
	opacity: .85
}

.bloom-disc {
	transform-box: view-box;
	transform-origin: 220px 205px;
	transform: scale(.72);
	opacity: 0;
	transition: transform 1s cubic-bezier(.22,1,.3,1) .1s,opacity .8s ease .1s
}

.loaded .bloom-disc {
	transform: scale(1);
	opacity: 1
}

.bloom-core {
	transform-box: view-box;
	transform-origin: 220px 232px;
	animation: breathe 7s ease-in-out 2.6s infinite
}

@keyframes breathe {
	0%,100% {
		transform: scale(1)
	}

	50% {
		transform: scale(1.03)
	}
}

.bloom-stem {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 1.3s cubic-bezier(.5,0,.2,1) .2s
}

.loaded .bloom-stem {
	stroke-dashoffset: 0
}

.bl {
	transform-box: fill-box;
	transform-origin: 0% 100%;
	transform: scale(0);
	transition: transform .8s cubic-bezier(.3,1.5,.5,1)
}

.loaded .bloom-stemg g:nth-of-type(1) .bl {
	transition-delay: .85s
}

.loaded .bloom-stemg g:nth-of-type(2) .bl {
	transition-delay: 1s
}

.loaded .bl {
	transform: scale(1)
}

.pt {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	transform: scale(0);
	transition: transform .9s cubic-bezier(.3,1.45,.45,1) calc(.45s + var(--i)*.06s)
}

	.pt.pi {
		transition-delay: calc(1.05s + var(--i)*.045s)
	}

.loaded .pt {
	transform: scale(var(--ts,1))
}

.ring8.inner g:nth-child(odd) .pi {
	fill: #E2B294
}

.ring8.inner g:nth-child(even) .pi {
	fill: #D89A6C
}

.c-c, .c-c2 {
	transform-box: fill-box;
	transform-origin: 50% 50%;
	transform: scale(0);
	transition: transform .6s cubic-bezier(.34,1.56,.64,1)
}

.c-c {
	transition-delay: 1.55s
}

.c-c2 {
	transition-delay: 1.68s
}

.loaded .c-c, .loaded .c-c2 {
	transform: scale(1)
}

.hero-strip {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	border-top: 1px solid var(--hair);
	padding: 1.15rem 0 1.5rem;
	font: 500 .85rem var(--sans);
	color: var(--ink-soft)
}

.scroll-cue {
	display: inline-flex;
	align-items: center;
	gap: .55rem
}

	.scroll-cue svg {
		animation: drop 1.9s ease-in-out infinite
	}

@keyframes drop {
	0%,100% {
		transform: translateY(-2px)
	}

	50% {
		transform: translateY(3px)
	}
}

/* ---------- etymology ---------- */
.etym {
	border-block: 1px solid var(--hair);
	padding: 4.2rem 0
}

.etym-grid {
	display: grid;
	grid-template-columns: 5fr 6fr;
	gap: 4vw;
	align-items: start;
	position: relative
}

.etym-term {
	font: 400 clamp(3rem,5.6vw,4.8rem)/1.1 var(--serif)
}

.etym-pron {
	display: block;
	direction: ltr;
	text-align: start;
	unicode-bidi: isolate;
	font: 500 .9rem var(--sans);
	color: var(--ink-soft);
	margin-top: .4rem
}

.etym-tag {
	display: inline-block;
	margin-top: 1rem;
	font: 600 .8rem var(--sans);
	color: var(--clay);
	border: 1px solid color-mix(in srgb,var(--clay) 45%,transparent);
	padding: .35rem .8rem;
	border-radius: 999px
}

.etym-def {
	font: 400 clamp(1.35rem,2vw,1.75rem)/1.6 var(--serif)
}

.etym-aside {
	margin-top: 1.3rem;
	padding-inline-start: 1.1rem;
	border-inline-start: 2px solid var(--clay);
	font-size: .98rem;
	line-height: 2;
	color: var(--ink-soft);
	max-width: 54ch
}

.etym .sprig-slot {
	position: absolute;
	inset-inline-end: 0;
	top: -6px;
	color: var(--moss);
	width: 46px
}

/* ---------- philosophy ---------- */
.philosophy {
	background: var(--paper-2);
	border-block: 1px solid var(--hair);
	padding: 6.5rem 0 7rem
}

.manifesto {
	margin-top: 2.6rem;
	font: 400 clamp(1.7rem,3.1vw,2.7rem)/1.8 var(--serif);
	max-width: 28em
}

	.manifesto em {
		color: var(--clay)
	}

	.manifesto .w {
		display: inline-block;
		opacity: .13;
		transform: translateY(.35em);
		transition: opacity .7s ease var(--d),transform .7s cubic-bezier(.22,1,.3,1) var(--d)
	}

	.manifesto.in .w {
		opacity: 1;
		transform: none
	}

.phil-sprig {
	margin-top: 2.4rem;
	color: var(--clay);
	width: 44px
}

/* ---------- collection ---------- */
.collection {
	padding: 7rem 0 5rem
}

.sec-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 2rem;
	margin-bottom: 3.6rem
}

	.sec-head h2 {
		font-size: clamp(2.3rem,4.8vw,4rem)
	}

		.sec-head h2 em {
			color: var(--clay)
		}

.sec-note {
	font-size: .95rem;
	color: var(--ink-soft);
	max-width: 32ch;
	text-align: end
}

.blk {
	display: grid;
	grid-template-columns: repeat(12,1fr);
	gap: 2.5rem 3vw;
	margin-bottom: 6.5rem;
	align-items: end
}

.blk-media {
	grid-column: 1/7;
	position: relative
}

.blk-info {
	grid-column: 8/13;
	padding-bottom: .6rem
}

.blk.alt .blk-media {
	grid-column: 6/13;
	order: 2
}

.blk.alt .blk-info {
	grid-column: 1/6;
	order: 1;
	align-self: start
}

.blk.third .blk-media {
	grid-column: 2/8
}

.blk.third .blk-info {
	grid-column: 9/13;
	align-self: center
}

.blk.last {
	margin-bottom: 2rem
}

.ph {
	position: relative;
	overflow: hidden;
	background: var(--paper-2)
}

	.ph.arch {
		border-radius: 999px 999px 12px 12px
	}

	.ph.r45 {
		aspect-ratio: 4/5
	}

	.ph.r11 {
		aspect-ratio: 1/1
	}

	.ph img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		filter: sepia(.24) saturate(.82) contrast(1.03);
		transition: transform 1.2s cubic-bezier(.22,1,.3,1)
	}

.blk-media:hover .ph img {
	transform: scale(1.045)
}

.ph::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--moss);
	mix-blend-mode: soft-light;
	opacity: .55;
	pointer-events: none
}

.blk-cap {
	margin-top: 1rem;
	font: 500 .8rem var(--sans);
	color: var(--ink-soft)
}

.blk-num {
	font: 400 clamp(2.6rem,4.5vw,4rem)/1 var(--serif);
	color: var(--clay)
}

.blk-info h3 {
	font-size: clamp(2rem,3vw,2.8rem);
	margin: .8rem 0 .6rem
}

.blk-info p {
	color: var(--ink-soft);
	max-width: 40ch
}

.blk-link {
	margin-top: 1.5rem;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font: 600 .88rem var(--sans);
	color: var(--ink)
}

	.blk-link svg {
		transform: scaleX(-1);
		transition: transform .3s
	}
	/* RTL: mirror ↗ to ↖ */
	.blk-link:hover svg {
		transform: scaleX(-1) translate(-2px,-2px)
	}

.blk-media .sprig-slot {
	position: absolute;
	z-index: 2;
	width: 50px;
	color: var(--moss);
	top: -26px;
	inset-inline-end: 6%
}

.blk.alt .blk-media .sprig-slot {
	inset-inline-start: 3%;
	top: auto;
	bottom: -22px;
	transform: rotate(48deg);
	color: var(--clay)
}

@media(min-width:901px) {
	.blk.overlap {
		margin-top: -3.2rem
	}
}

/* ---------- standards / index list ---------- */
.standby {
	padding: 6.5rem 0 7.5rem;
	border-top: 1px solid var(--hair)
}

.idx-list {
	margin-top: 1rem;
	border-top: 1px solid var(--hair)
}

.idx-row {
	display: grid;
	grid-template-columns: 80px 1.1fr 1.4fr 70px;
	gap: 2rem;
	align-items: center;
	padding: 2rem 1.6rem;
	margin: 0 -1.6rem;
	border-bottom: 1px solid var(--hair);
	border-radius: 14px;
	transition: background .35s ease,color .35s ease
}

.idx-num {
	font: 400 1.6rem var(--serif);
	color: var(--clay);
	transition: color .35s
}

.idx-row h3 {
	font-size: clamp(1.6rem,2.5vw,2.2rem)
}

.idx-row p {
	color: var(--ink-soft);
	font-size: .96rem;
	line-height: 1.9;
	transition: color .35s
}

.idx-arrow {
	justify-self: end;
	width: 40px;
	height: 40px;
	border: 1px solid var(--hair);
	border-radius: 50%;
	display: grid;
	place-items: center;
	transition: .35s
}

	.idx-arrow svg {
		width: 16px;
		height: 16px;
		transform: scaleX(-1);
		transition: transform .35s
	}

@media(hover:hover) {
	.idx-row:hover {
		background: var(--ink);
		color: var(--paper)
	}

		.idx-row:hover .idx-num {
			color: var(--blush)
		}

		.idx-row:hover p {
			color: color-mix(in srgb,var(--paper) 75%,transparent)
		}

		.idx-row:hover .idx-arrow {
			background: var(--paper);
			color: var(--ink);
			border-color: var(--paper)
		}

			.idx-row:hover .idx-arrow svg {
				transform: scaleX(-1) rotate(45deg)
			}
}

.idx-preview {
	position: fixed;
	top: 0;
	left: 0; /* گوشهٔ فیزیکی — جای‌گذاری با transform در JS انجام می‌شود */
	width: 230px;
	height: 290px;
	border-radius: 130px 130px 12px 12px;
	overflow: hidden;
	pointer-events: none;
	z-index: 60;
	opacity: 0;
	transition: opacity .3s ease;
	box-shadow: 0 24px 60px -18px rgba(24,30,18,.45);
	will-change: transform
}

	.idx-preview.on {
		opacity: 1
	}

	.idx-preview img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		filter: sepia(.22) saturate(.85)
	}

/* ---------- interactive garden ---------- */
.garden {
	background: var(--dark);
	color: var(--paper);
	padding: 6.5rem 0 0
}

	.garden .label {
		color: var(--blush)
	}

.garden-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 3rem;
	padding-bottom: 3rem
}

	.garden-head h2 {
		font-size: clamp(2.6rem,5.4vw,4.6rem)
	}

		.garden-head h2 em {
			color: var(--blush)
		}

.garden-copy {
	margin-top: 1.2rem;
	max-width: 56ch;
	color: color-mix(in srgb,var(--paper) 78%,transparent);
	font-size: 1rem
}

.garden-side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1.1rem;
	padding-bottom: .4rem
}

.garden-count {
	font: 500 .88rem var(--sans);
	color: color-mix(in srgb,var(--paper) 62%,transparent)
}

.garden-side small {
	font-size: .85rem;
	color: color-mix(in srgb,var(--paper) 55%,transparent)
}

.garden-stage {
	position: relative;
	height: min(72vh,660px);
	min-height: 400px;
	cursor: crosshair;
	border-top: 1px solid rgba(242,237,226,.14);
	user-select: none
}

	.garden-stage svg {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		display: block
	}

.garden-hint {
	position: absolute;
	inset-inline-start: 50%;
	bottom: 13%;
	transform: translateX(50%);
	font: 500 .88rem var(--sans);
	color: color-mix(in srgb,var(--paper) 72%,transparent);
	pointer-events: none;
	white-space: nowrap;
	animation: pulse 2.6s ease-in-out infinite;
	transition: opacity .6s
}

.garden-stage.planted .garden-hint {
	opacity: 0;
	animation: none
}

@keyframes pulse {
	0%,100% {
		opacity: .55
	}

	50% {
		opacity: 1
	}
}

@keyframes sway {
	from {
		transform: rotate(-2.1deg)
	}

	to {
		transform: rotate(2.3deg)
	}
}

.swayer {
	transform-box: fill-box;
	transform-origin: 50% 100%
}

.gstem {
	stroke-linecap: round
}

.gleaf, .gpetal, .gcore {
	transform-box: fill-box
}

.gleaf {
	transform-origin: 0% 100%
}

.gpetal {
	transform-origin: 50% 100%
}

.gcore {
	transform-origin: 50% 50%
}

/* ---------- instagram marquee ---------- */
.gram {
	padding: 6rem 0 0;
	border-top: 1px solid var(--hair)
}

a.mq {
	display: block;
	direction: ltr; /* ← the actual fix: wide track must anchor LEFT, not right */
	margin-top: 3rem;
	border-block: 1px solid var(--hair);
	padding: 2.2rem 0;
	overflow: hidden
}

.mq-track {
	display: flex;
	width: max-content;
	direction: ltr;
	animation: mq 32s linear infinite
}
/* margin-right:auto حذف شد — بی‌اثر بود */
.mq:hover .mq-track {
	animation-play-state paused
}

.mq:hover .mq-track {
	animation-play-state: paused
}

.mq:hover .mq-track {
	animation-play-state: paused
}

.mq-set {
	display: flex;
	align-items: center;
	gap: clamp(2rem,4vw,3.6rem);
	padding-right: clamp(2rem,4vw,3.6rem)
}

.mq-img {
	width: 118px;
	height: 148px;
	border-radius: 999px 999px 8px 8px;
	overflow: hidden;
	flex: none;
	background: var(--paper-2)
}

	.mq-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		filter: sepia(.24) saturate(.82);
		pointer-events: none
	}

.mq-t {
	font: 400 clamp(1.7rem,3.4vw,2.6rem)/1 var(--serif);
	white-space: nowrap;
	transition: color .3s
}

.mq-h {
	font: 600 clamp(1rem,1.8vw,1.3rem) var(--sans);
	letter-spacing: .06em;
	white-space: nowrap;
	color: var(--clay)
}

.mq:hover .mq-t {
	color: var(--clay)
}

/* form ltr animation */
/*@keyframes mq {
    to {
        transform: translateX(-25%)
    }
}*/

/* form ltr animation */
@keyframes mq {
	from {
		transform: translateX(-25%)
	}

	to {
		transform: translateX(0)
	}
}

/* ---------- footer ---------- */
.footer {
	background: var(--dark);
	color: var(--paper);
	/*margin-top: 6rem;*/
	padding: 5rem 0 2rem
}

.f-word {
	font: 400 clamp(4rem,14vw,12rem)/1.05 var(--serif);
	display: flex;
	align-items: flex-start;
	gap: .08em
}

	.f-word .bud-slot {
		width: clamp(24px,4vw,52px);
		margin-top: .14em;
		color: var(--blush)
	}

.f-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1.4fr;
	gap: 3rem;
	padding: 3.4rem 0 3rem;
	border-bottom: 1px solid rgba(242,237,226,.16);
	margin-top: 2.2rem
}

.f-col h4 {
	font: 600 .95rem var(--sans);
	color: color-mix(in srgb,var(--paper) 55%,transparent);
	margin-bottom: 1.1rem
}

.f-col a.fl {
	display: block;
	padding: .3rem 0;
	color: color-mix(in srgb,var(--paper) 82%,transparent);
	transition: color .25s,transform .25s
}

	.f-col a.fl:hover {
		color: var(--blush);
		transform: translateX(-5px)
	}
/* RTL: slide left */
.f-news p {
	color: color-mix(in srgb,var(--paper) 72%,transparent);
	font-size: .95rem;
	max-width: 40ch;
	margin-bottom: 1.4rem
}

.nl-form {
	display: flex;
	gap: 1rem;
	align-items: flex-end
}

	.nl-form input {
		flex: 1;
		background: transparent;
		border: 0;
		border-bottom: 1px solid rgba(242,237,226,.35);
		color: var(--paper);
		font: 400 1rem var(--sans);
		padding: .6rem 0;
		outline: none;
		transition: border-color .3s;
		border-radius: 0
	}

		.nl-form input::placeholder {
			color: color-mix(in srgb,var(--paper) 45%,transparent)
		}

		.nl-form input:focus {
			border-color: var(--paper)
		}

.f-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding-top: 1.6rem;
	font: 500 .8rem var(--sans);
	color: color-mix(in srgb,var(--paper) 55%,transparent)
}

	.f-bottom a {
		display: inline-flex;
		align-items: center;
		gap: .5rem;
		color: color-mix(in srgb,var(--paper) 75%,transparent);
		transition: color .25s
	}

		.f-bottom a:hover {
			color: var(--blush)
		}

/* ---------- toast ---------- */
.toast {
	position: fixed;
	inset-inline-start: 50%;
	bottom: 28px;
	transform: translateX(50%) translateY(16px);
	background: var(--ink);
	color: var(--paper);
	z-index: 210;
	padding: .8rem 1.5rem;
	border-radius: 999px;
	font: 500 .92rem var(--sans);
	opacity: 0;
	pointer-events: none;
	transition: .35s;
	box-shadow: 0 12px 34px rgba(20,25,15,.3);
	border: 1px solid rgba(242,237,226,.16)
}

	.toast.show {
		opacity: 1;
		transform: translateX(50%) translateY(0)
	}

/* ---------- responsive ---------- */
@media(max-width:900px) {
	.hero {
		min-height: auto;
		padding-bottom: 1rem
	}

	.hero-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem
	}

	.bloom-wrap {
		width: min(80vw,380px);
		margin: 0 auto 1.5rem
	}

	.hero-sprig {
		display: none
	}

	.hero-strip .hs-mid {
		display: none
	}

	.etym-grid {
		grid-template-columns: 1fr;
		gap: 1.6rem
	}

	.etym .sprig-slot {
		display: none
	}

	.sec-head {
		flex-direction: column;
		align-items: flex-start
	}

	.sec-note {
		text-align: start
	}

	.blk, .blk.alt, .blk.third {
		grid-template-columns: 1fr;
		gap: 1.6rem;
		margin-bottom: 4.5rem
	}

		.blk .blk-media, .blk.alt .blk-media, .blk.third .blk-media {
			grid-column: 1/-1;
			order: 0
		}

		.blk .blk-info, .blk.alt .blk-info, .blk.third .blk-info {
			grid-column: 1/-1;
			order: 1
		}

	.idx-row {
		grid-template-columns: 48px 1fr 46px;
		gap: .5rem 1.2rem;
		padding: 1.6rem 1rem;
		margin: 0 -1rem
	}

		.idx-row p {
			grid-row: 2;
			grid-column: 2/4
		}

	.idx-arrow {
		grid-row: 1;
		grid-column: 3;
		width: 34px;
		height: 34px
	}

	.garden-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.6rem
	}

	.garden-side {
		align-items: flex-start
	}

	.f-grid {
		grid-template-columns: 1fr;
		gap: 2.4rem
	}

	.f-bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: .7rem
	}
}

@media(max-width:860px) {
	.nav {
		display: none
	}

	.burger {
		display: block
	}
}

@media(max-width:560px) {
	.nl-form {
		flex-direction: column;
		align-items: stretch
	}

	.hero-cta .pill {
		padding: .8rem 1.2rem
	}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce) {
	html {
		scroll-behavior: auto
	}

	*, *::before, *::after {
		animation: none !important;
		transition: none !important
	}

	.js .reveal, .manifesto .w, h1 .li, .fu, .pt, .bl, .c-c, .c-c2, .bloom-disc {
		opacity: 1 !important;
		transform: none !important
	}

	.bloom-stem, .sprig .sp {
		stroke-dashoffset: 0 !important
	}

	.ring-text {
		opacity: .85 !important
	}
}


.mobile-bottom-navigation {
	display: none !important;
}