/* Salmod «درباره ما». Mobile first. Tokens only. */
body.salmod-about-page {
	margin: 0; background: var(--salmod-bg); color: var(--salmod-fg);
	font-family: "Vazirmatn", Tahoma, sans-serif; font-size: 15.5px; line-height: 1.95;
	-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
body.salmod-about-page *, body.salmod-about-page *::before, body.salmod-about-page *::after { box-sizing: border-box; }
body.salmod-about-page :focus-visible { outline: 2px solid var(--salmod-ring); outline-offset: 2px; }
.ab { max-width: 1240px; margin: 0 auto; padding: 0 16px 48px; overflow-x: clip; }
.ab a { color: inherit; text-decoration: none; }
.ab img { display: block; max-width: 100%; height: auto; }
.ab h1, .ab h2, .ab h3 { margin: 0; color: var(--salmod-primary); line-height: 1.45; text-wrap: balance; }
.ab p { margin: 0 0 12px; }
.ab svg { flex: none; }
.ab-kicker { display: inline-block; margin: 0 0 8px !important; padding: 2px 12px; border-radius: 999px; background: var(--salmod-brand-soft); color: var(--salmod-brand-ink); font-size: 12.5px; font-weight: 800; }
.ab-kicker--light { background: color-mix(in srgb, var(--salmod-on-brand) 18%, transparent); color: var(--salmod-on-brand); }
.ab-bc { display: flex; gap: 6px; margin-bottom: 14px; font-size: 12.5px; color: var(--salmod-muted-fg); }
.ab-bc a:hover { color: var(--salmod-brand-ink); }

/* Buttons */
.ab-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: 16px; font-weight: 800; font-size: 15px; transition: transform .15s ease, background-color .15s ease; }
.ab-btn svg { width: 18px; height: 18px; }
.ab-btn:active { transform: scale(.98); }
.ab-btn--brand { background: linear-gradient(135deg, var(--salmod-brand), var(--salmod-brand-ink)); color: var(--salmod-on-brand) !important; box-shadow: 0 10px 24px color-mix(in srgb, var(--salmod-brand) 30%, transparent); }
.ab-btn--ghost { background: var(--salmod-surface); color: var(--salmod-primary) !important; box-shadow: inset 0 0 0 1px var(--salmod-border); }
.ab-btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--salmod-brand); color: var(--salmod-brand-ink) !important; }
.ab-btn--light { background: var(--salmod-surface); color: var(--salmod-brand-ink) !important; }
.ab-btn--outline { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--salmod-on-brand) 70%, transparent); color: var(--salmod-on-brand) !important; }

/* Hero */
.ab-hero { display: grid; gap: 22px; padding: 22px 0 8px; }
.ab-hero__title { font-size: clamp(26px, 6vw, 46px); font-weight: 900; line-height: 1.35 !important; }
.ab-hero__lead { margin-top: 14px !important; font-size: 16px; color: var(--salmod-muted-fg); max-width: 560px; }
.ab-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ab-hero__media { position: relative; }
.ab-hero__media img { width: 100%; aspect-ratio: 4 / 5; max-height: 560px; object-fit: cover; border-radius: 28px; box-shadow: 0 30px 60px color-mix(in srgb, var(--salmod-primary) 14%, transparent); }
.ab-hero__badge { position: absolute; bottom: 18px; inset-inline-start: -6px; display: flex; flex-direction: column; padding: 12px 18px; border-radius: 18px; background: var(--salmod-surface); box-shadow: 0 14px 34px color-mix(in srgb, var(--salmod-primary) 16%, transparent); }
.ab-hero__badge strong { color: var(--salmod-brand-ink); font-size: 16px; }
.ab-hero__badge span { font-size: 13px; color: var(--salmod-muted-fg); }
@media (min-width: 900px) {
	.ab-hero { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 48px; padding: 40px 0 24px; }
	.ab-hero__badge { inset-inline-start: -28px; bottom: 36px; }
}

/* Numbers */
.ab-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 26px 0 0; }
.ab-stat { padding: 18px 14px; border-radius: 20px; background: var(--salmod-surface); text-align: center; box-shadow: 0 6px 22px color-mix(in srgb, var(--salmod-primary) 5%, transparent); }
.ab-stat strong { display: block; font-size: clamp(22px, 5vw, 30px); font-weight: 900; color: var(--salmod-brand-ink); line-height: 1.4; font-variant-numeric: tabular-nums; }
.ab-stat span { font-size: 13px; color: var(--salmod-muted-fg); }
@media (min-width: 768px) { .ab-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }

/* Story */
.ab-story { display: grid; gap: 22px; margin-top: clamp(40px, 7vw, 80px); align-items: center; }
.ab-story__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 26px; }
.ab-story__text h2 { font-size: clamp(22px, 4vw, 32px); font-weight: 900; margin-bottom: 14px !important; }
.ab-story__text p { color: var(--salmod-fg); }
.ab-quote { margin: 18px 0 0; padding: 14px 18px; border-inline-start: 4px solid var(--salmod-brand); border-radius: 14px; background: var(--salmod-brand-soft); color: var(--salmod-brand-ink); font-weight: 700; }
@media (min-width: 900px) { .ab-story { grid-template-columns: .9fr 1.1fr; gap: 48px; } }

/* Sections */
.ab-sec { margin-top: clamp(40px, 7vw, 80px); }
.ab-sec--soft { padding: clamp(24px, 4vw, 44px) clamp(16px, 3vw, 36px); border-radius: 30px; background: var(--salmod-surface); }
.ab-head { margin-bottom: 20px; }
.ab-head h2 { font-size: clamp(21px, 3.6vw, 30px); font-weight: 900; }
.ab-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ab-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--salmod-brand-ink) !important; white-space: nowrap; }
.ab-link svg { width: 18px; height: 18px; }

/* Timeline */
.ab-timeline { position: relative; margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.ab-timeline li { position: relative; padding: 16px 18px; padding-inline-start: 48px; border-radius: 20px; background: var(--salmod-surface); box-shadow: 0 6px 20px color-mix(in srgb, var(--salmod-primary) 5%, transparent); }
.ab-timeline li::before { content: ""; position: absolute; top: 22px; inset-inline-start: 18px; width: 14px; height: 14px; border-radius: 50%; background: var(--salmod-brand); box-shadow: 0 0 0 5px var(--salmod-brand-soft); }
.ab-timeline__year { display: inline-block; margin-bottom: 4px; font-size: 13px; font-weight: 800; color: var(--salmod-brand-ink); }
.ab-timeline h3 { font-size: 17px; font-weight: 800; }
.ab-timeline p { margin: 4px 0 0; font-size: 14.5px; color: var(--salmod-muted-fg); }
@media (min-width: 900px) {
	.ab-timeline { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
	.ab-timeline::before { content: ""; position: absolute; top: 29px; inset-inline: 30px; height: 2px; background: linear-gradient(to left, var(--salmod-brand), var(--salmod-brand-soft)); }
	.ab-timeline li { padding: 46px 16px 18px; }
	.ab-timeline li::before { top: 22px; inset-inline-start: 16px; }
}

/* Values */
.ab-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.ab-card { padding: 20px; border-radius: 22px; background: var(--salmod-bg); }
.ab-card__ico { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; margin-bottom: 10px; border-radius: 14px; background: var(--salmod-brand-soft); color: var(--salmod-brand); }
.ab-card h3 { font-size: 17px; font-weight: 800; margin-bottom: 4px !important; }
.ab-card p { margin: 0; font-size: 14.5px; color: var(--salmod-muted-fg); }

/* Process */
.ab-steps { counter-reset: ab; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ab-steps li { counter-increment: ab; position: relative; padding: 18px 16px; border-radius: 20px; background: var(--salmod-surface); box-shadow: inset 0 0 0 1px var(--salmod-line-soft); }
.ab-steps li::after { content: counter(ab, persian); position: absolute; top: 12px; inset-inline-end: 14px; font-size: 30px; font-weight: 900; line-height: 1; color: var(--salmod-brand-soft); }
.ab-steps__ico { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; background: var(--salmod-primary); color: var(--salmod-on-primary); margin-bottom: 8px; }
.ab-steps__ico svg { width: 22px; height: 22px; }
.ab-steps h3 { font-size: 16px; font-weight: 800; }
.ab-steps p { margin: 2px 0 0; font-size: 13.5px; color: var(--salmod-muted-fg); }

/* Gallery */
.ab-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ab-gallery a { position: relative; display: block; border-radius: 18px; overflow: hidden; background: var(--salmod-field); }
.ab-gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.ab-gallery span { position: absolute; inset: auto 0 0; padding: 30px 12px 10px; background: linear-gradient(0deg, color-mix(in srgb, var(--salmod-primary) 75%, transparent), transparent); color: var(--salmod-on-primary); font-size: 12.5px; font-weight: 700; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) { .ab-gallery a:hover img { transform: scale(1.05); } }
@media (min-width: 768px) { .ab-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1100px) { .ab-gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Perks */
.ab-perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ab-perk { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 18px; background: var(--salmod-bg); }
.ab-perk > svg { padding: 10px; width: 44px; height: 44px; border-radius: 14px; background: var(--salmod-brand-soft); color: var(--salmod-brand); box-sizing: border-box; }
.ab-perk strong { display: block; color: var(--salmod-primary); }
.ab-perk span { font-size: 13.5px; color: var(--salmod-muted-fg); }

/* Wholesale */
.ab-ws {
	position: relative; overflow: hidden; display: flex; align-items: center; gap: 20px; margin-top: clamp(40px, 7vw, 80px);
	padding: clamp(24px, 4vw, 44px); border-radius: 30px; color: var(--salmod-on-brand);
	background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--salmod-on-brand) 16%, transparent), transparent 55%), linear-gradient(135deg, var(--salmod-brand), var(--salmod-brand-ink));
}
.ab-ws h2 { color: var(--salmod-on-brand); font-size: clamp(21px, 3.6vw, 30px); font-weight: 900; margin-bottom: 8px !important; }
.ab-ws p { opacity: .92; max-width: 640px; }
.ab-ws__ico { display: none; }
@media (min-width: 900px) {
	.ab-ws__ico { display: inline-flex; flex: none; margin-inline-start: auto; width: 140px; height: 140px; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--salmod-on-brand) 14%, transparent); }
	.ab-ws__ico svg { width: 64px; height: 64px; }
}

/* Contact */
.ab-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ab-contact__item { display: flex; align-items: flex-start; gap: 12px; padding: 18px; border-radius: 20px; background: var(--salmod-surface); box-shadow: 0 6px 20px color-mix(in srgb, var(--salmod-primary) 5%, transparent); transition: transform .2s ease, box-shadow .2s ease; }
.ab-contact__item:hover { transform: translateY(-2px); box-shadow: 0 14px 30px color-mix(in srgb, var(--salmod-brand) 14%, transparent); }
.ab-contact__item > svg { padding: 10px; width: 46px; height: 46px; border-radius: 14px; background: var(--salmod-primary); color: var(--salmod-on-primary); box-sizing: border-box; }
.ab-contact__item strong { display: block; color: var(--salmod-primary); }
.ab-contact__item span { display: block; font-size: 14px; color: var(--salmod-fg); }
.ab-contact__item em { display: inline-block; margin-top: 4px; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--salmod-brand-ink); }

/* Closing */
.ab-end { margin-top: clamp(40px, 7vw, 80px); padding: clamp(28px, 5vw, 56px) 16px; border-radius: 30px; text-align: center; background: var(--salmod-surface); }
.ab-end h2 { font-size: clamp(21px, 3.6vw, 32px); font-weight: 900; margin-bottom: 8px !important; }
.ab-end p { color: var(--salmod-muted-fg); max-width: 560px; margin: 0 auto 18px !important; }

@media (prefers-reduced-motion: reduce) { .ab-btn, .ab-gallery img, .ab-contact__item { transition: none; } }