/* dmhouse-seo-landing.css — لندینگ «خدمات سئو».
   رنگ‌ها و فونت‌ها همگی از توکن‌های قالب می‌آیند (theme-light / theme-dark)، پس هر سکشن
   با عوض‌کردن کلاس تمش، رنگ‌بندی درست را می‌گیرد. هیچ رنگ ثابتی خارج از این توکن‌ها نیست
   مگر جایی که روی تصویر تیره متن سفید لازم است. */

/* ⚠ برخلاف نسخهٔ لوکال، هیچ قاعدهٔ بی‌ریشه‌ای (*، img، a، body) اینجا نیست: این شیوه‌نامه
   روی صفحه‌ای بار می‌شود که هدر و فوتر مشترک سایت را هم دارد و یک قاعدهٔ سراسری به آن‌ها
   نشت می‌کند. همه‌چیز زیر ریشهٔ dmsl-main محدود شده است. */
#dmsl-main,
#dmsl-main *,
#dmsl-main *::before,
#dmsl-main *::after {
    box-sizing: border-box;
}

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

#dmsl-main a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

/* ⚠ base.css سراسری برای h2 وسط‌چینی تعریف کرده؛ عنوان‌هایی که در این صفحه باید
   راست‌چین بمانند، صریح اعلام می‌شوند (فقط عنوان سکشن‌های وسط‌چین استثناست). */
#dmsl-main .dmsl-hero__title,
#dmsl-main .dmsl-brands__title,
#dmsl-main .dmsl-results__title,
#dmsl-main .dmsl-longread__heading,
#dmsl-main .dmsl-qa__title,
#dmsl-main .dmsl-qna__q,
#dmsl-main .dmsl-scard__title,
#dmsl-main .dmsl-card__title,
#dmsl-main .dmsl-step__title {
    text-align: start;
}

.dmsl-skip {
    position: absolute;
    inset-inline-start: -9999px;
    top: 0;
    z-index: 100;
    padding: 10px 18px;
    background-color: var(--color-navy);
    color: #fff;
    border-radius: 0 0 12px 12px;
}

.dmsl-skip:focus {
    inset-inline-start: 16px;
}

/* ═══════════ هیرو ═══════════ */

.dmsl-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(70px, 10vw, 130px);
}

/* ⚠ هیروی این صفحه روشن است تا با هدر سفید سایت یکی شود، پس هیچ موجی نمی‌گیرد؛
   جداسازی را سکشن تیرهٔ «نقشهٔ راه» با موج بالای خودش انجام می‌دهد.
   دو رنگ زیر در پالت پایه با فرض پس‌زمینهٔ تیره نوشته شده‌اند (سفیدِ کم‌رنگ روی تیره)
   و روی زمینهٔ روشن ناپیدا می‌شوند؛ اینجا به تهِ سرمه‌ای کم‌رنگ برمی‌گردند. */
.dmsl-hero .dmsl-eyebrow {
    background-color: rgba(10, 25, 47, .04);
}

/* ستون متن کمی پهن‌تر از تصویر: پاراگراف بلند است و تصویر نسبت ثابت دارد. */
.dmsl-hero__grid {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.dmsl-crumbs {
    margin-block-end: 16px;
    font-size: 13px;
    color: var(--text-secondary);
}

.dmsl-crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmsl-crumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ⚠ رنگ حاشیه روی زمینهٔ روشنِ این هیرو تقریباً ناپیدا بود؛ به رنگ متن فرعی برگشت. */
.dmsl-crumbs__item + .dmsl-crumbs__item::before {
    content: "»";
    color: var(--text-secondary);
    opacity: .55;
}

.dmsl-crumbs__item--current span {
    color: var(--accent-primary);
}

.dmsl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-block-end: 14px;
    padding: 7px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--pill-radius);
    background-color: rgba(255, 255, 255, .04);
    font-size: 13px;
    color: var(--accent-primary);
}

.dmsl-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--accent-primary);
}

.dmsl-hero__title {
    margin: 0 0 18px;
    font-size: clamp(38px, 5.4vw, 68px);
    line-height: 1.35;
    color: var(--text-primary);
}

.dmsl-hero__title-accent {
    color: var(--accent-primary);
    /* خط زیرِ واژهٔ کلیدی، هم‌زبان با نوارهای طلایی صفحهٔ اصلی. */
    position: relative;
    display: inline-block;
}

.dmsl-hero__title-accent::after {
    content: "";
    position: absolute;
    inset-block-end: 6px;
    inset-inline: -2px;
    height: 10px;
    border-radius: 6px;
    background-color: var(--accent-secondary);
    opacity: .35;
    z-index: -1;
}

.dmsl-hero__desc {
    margin: 0 0 30px;
    max-width: 62ch;
    font-size: 16px;
    line-height: 2.2;
    color: var(--text-secondary);
    text-align: justify;
}

.dmsl-hero__desc a {
    font-weight: 700;
    border-block-end: 1px solid currentColor;
}

.dmsl-hero__desc a:hover {
    color: var(--accent-secondary);
}

.dmsl-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

/* ---------- تصویر هیرو ---------- */

/* قاب شیشه‌ای دور تصویر + شیب سه‌بعدی ملایم که با هاور صاف می‌شود.
   ⚠ تهِ رنگ سرمه‌ای است نه سفید: هیروی این صفحه روشن است و سفیدِ کم‌رنگ روی سفید ناپیدا بود. */
.dmsl-hero__figure {
    margin: 0;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 26px;
    background-color: rgba(10, 25, 47, .04);
    box-shadow: var(--card-shadow);
    transform: perspective(1200px) rotateY(-6deg) rotateX(2deg);
    transition: transform var(--transition-slow);
}

.dmsl-hero__figure:hover {
    transform: perspective(1200px) rotateY(0) rotateX(0);
}

.dmsl-hero__figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 18px;
}

.dmsl-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* ═══════════ سکشن «چرا دی ام هاوس» ═══════════ */

.dmsl-why {
    position: relative;
    padding-block: clamp(64px, 8vw, 110px);
    overflow: hidden;
}

.dmsl-sechead {
    text-align: center;
    margin-block-end: clamp(34px, 5vw, 60px);
}

.dmsl-sechead__title {
    margin: 0 0 12px;
    font-size: clamp(26px, 3.4vw, 44px);
    line-height: 1.5;
    color: var(--text-primary);
}

.dmsl-sechead__title span {
    color: var(--accent-primary);
}

.dmsl-sechead__sub {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--accent-primary);
}

.dmsl-rows {
    display: flex;
    flex-direction: column;
    gap: 22px;
    /* مقدار جابه‌جایی افقی را جاوااسکریپت بر پایهٔ پیشرفت اسکرول می‌نویسد. */
    --dmsl-shift: 0px;
}

.dmsl-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    width: min(1550px, 100%);
    margin-inline: auto;
    /* همان پدینگ ظرف مشترک تا در هر زوم و عرضی هم‌تراز بماند. */
    padding-inline: clamp(16px, 3vw, 40px);
    will-change: transform;
    transition: transform .15s linear;
}

/* ردیف اول به چپ می‌رود (کارت تصویرش از چپ بیرون می‌زند) و ردیف دوم به راست. */
.dmsl-row--start {
    transform: translate3d(calc(var(--dmsl-shift) * -1), 0, 0);
}

.dmsl-row--end {
    transform: translate3d(var(--dmsl-shift), 0, 0);
}

.dmsl-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 26px 24px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background-color: var(--bg-secondary);
    box-shadow: var(--card-shadow);
    transition: transform var(--transition-fast), border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.dmsl-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent-primary);
}

.dmsl-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    color: var(--accent-primary);
}

.dmsl-card__icon svg {
    width: 22px;
    height: 22px;
}

.dmsl-card__title {
    margin: 0;
    font-size: 18px;
    line-height: 1.8;
    color: var(--text-primary);
}

.dmsl-card__text {
    margin: 0;
    font-size: 14px;
    line-height: 2;
    color: var(--text-secondary);
    text-align: justify;
}

/* کارت تصویری: بدون پدینگ، تصویر تمام‌قاب. */
.dmsl-card--media {
    padding: 0;
    overflow: hidden;
    background-color: var(--color-navy);
}

.dmsl-card--media img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
}

/* ═══════════ لیست خدمات سئو (کارت‌های چرخشی) ═══════════ */

/* ⚠ فاصلهٔ بالای این سکشن سخاوتمند است چون موج بالای سکشن روی همین ناحیه می‌افتد؛
   با فاصلهٔ کم، عنوان زیر موج می‌چسبید. */
.dmsl-services {
    position: relative;
    padding-block: clamp(90px, 10vw, 140px) clamp(40px, 5vw, 70px);
}

/* بلندی این بسته همان مسافتی است که کاربر باید اسکرول کند تا هر دو چرخش کامل شود؛
   صحنه داخلش سنجاق می‌شود. دو چرخش ⇒ حدود دو صفحهٔ اضافه. */
.dmsl-deck {
    position: relative;
    height: 300vh;
}

.dmsl-deck__pin {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 3vh, 38px);
}

.dmsl-sechead--pinned {
    margin-block-end: 0;
    /* همان پدینگ ظرف مشترک تا در هر زوم و عرضی هم‌تراز بماند. */
    padding-inline: clamp(16px, 3vw, 40px);
}

/* عرض صحنه محدود شده تا کارت‌ها تمام‌عرض و خالی به نظر نرسند. */
.dmsl-deck__stage {
    width: min(1180px, 100%);
    margin-inline: auto;
    /* همان پدینگ ظرف مشترک تا در هر زوم و عرضی هم‌تراز بماند. */
    padding-inline: clamp(16px, 3vw, 40px);
}

.dmsl-deck__inner {
    position: relative;
    height: min(560px, 64vh);
}

/* ⚠ جایگاه پایه = اسلات راست (در راست‌به‌چپ، inset-inline-start یعنی لبهٔ راست).
   اسلات چپ با translateX منفی ساخته می‌شود؛ transform فیزیکی است و با جهت صفحه
   آینه نمی‌شود، پس این صحنه فقط برای چیدمان راست‌به‌چپ درست است. */
.dmsl-scard {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: calc(50% - 11px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 30px 28px;
    border: 1px solid var(--border-color);
    border-radius: 26px;
    background-color: var(--bg-secondary);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transform-origin: center;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* نقش تزئینی گوشهٔ پایین‌ـ‌چپ کارت، تا فضای خالی زیر فهرست پر شود.
   عمداً شبه‌عنصر است نه تصویر، پس چیزی به نشانه‌گذاری و به شبکه اضافه نمی‌کند. */
.dmsl-scard::after {
    content: "";
    position: absolute;
    inset-block-end: -26px;
    inset-inline-end: -26px;
    width: 190px;
    height: 190px;
    opacity: .07;
    pointer-events: none;
    background-color: var(--accent-primary);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3Cpath d='M8 12l2.2 2.2L15 9.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3Cpath d='M8 12l2.2 2.2L15 9.5'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.dmsl-scard__head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dmsl-scard__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    color: var(--accent-primary);
}

.dmsl-scard__icon svg {
    width: 24px;
    height: 24px;
}

.dmsl-scard__title {
    margin: 0;
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.7;
    color: var(--text-primary);
}

.dmsl-scard__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.dmsl-scard__list li {
    position: relative;
    padding-inline-start: 30px;
    font-size: 14px;
    line-height: 1.9;
    color: var(--text-secondary);
}

/* تیک‌ها با شبه‌عنصر ساخته می‌شوند تا هشت آیکون تکراری وارد نشانه‌گذاری نشود. */
.dmsl-scard__list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 7px;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1px solid var(--accent-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5D68F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-size: 12px 12px;
    background-position: center;
    background-repeat: no-repeat;
}

/* راهنمای اسکرول افقی؛ فقط در حالت موبایل دیده می‌شود. */
.dmsl-deck__hint {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.dmsl-deck__hint-arrow {
    display: inline-flex;
    color: var(--accent-primary);
    animation: dmsl-nudge 1.6s ease-in-out infinite;
}

@keyframes dmsl-nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-6px); }
}

/* ═══════════ مراحل اعتماد ═══════════ */

.dmsl-steps {
    position: relative;
    padding-block: clamp(64px, 8vw, 110px);
    /* پیشرفت اسکرول را جاوااسکریپت می‌نویسد: ۰ یعنی حالت پلکانی، ۱ یعنی هم‌ردیف. */
    --dmsl-steps-p: 0;
}

.dmsl-sechead--end {
    text-align: start;
}

.dmsl-steps__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmsl-step {
    /* سه کارت در ردیف اول، دو کارت وسط‌چین در ردیف دوم (چون فقط دو تا می‌مانند). */
    flex: 0 1 calc(33.333% - 15px);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 26px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background-color: var(--bg-secondary);
    box-shadow: var(--card-shadow);
    /* پله‌ها با همین ضرب ساده صاف می‌شوند: هرچه پیشرفت به ۱ نزدیک‌تر، جابه‌جایی کمتر. */
    transform: translateY(calc(var(--dmsl-step-off, 0px) * (1 - var(--dmsl-steps-p))));
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.dmsl-step:nth-child(1) { --dmsl-step-off: 0px; }
.dmsl-step:nth-child(2) { --dmsl-step-off: 34px; }
.dmsl-step:nth-child(3) { --dmsl-step-off: 68px; }

/* ردیف دوم در ابتدا پایین‌تر و محو است و با همان پیشرفت بالا می‌آید. */
.dmsl-step:nth-child(4),
.dmsl-step:nth-child(5) {
    --dmsl-step-off: 110px;
    opacity: calc(var(--dmsl-steps-p) * 1.4 - 0.15);
}

.dmsl-step:hover {
    border-color: var(--accent-primary);
}

.dmsl-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--accent-primary);
    font-family: 'gofteh', 'dana', sans-serif;
    font-size: 24px;
    line-height: 1;
}

.dmsl-step__title {
    margin: 0;
    font-size: 16px;
    line-height: 1.9;
    color: var(--text-primary);
}

/* ═══════════ برندها ═══════════ */

.dmsl-brands {
    position: relative;
    padding-block: clamp(90px, 10vw, 140px);
    overflow: hidden;
}

.dmsl-brands__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(30px, 5vw, 70px);
    align-items: center;
}

.dmsl-brands__text {
    min-width: 0;
}

/* عنوان عمداً بزرگ و پرفضاست: قرار است تمام ستون راست را بگیرد. */
.dmsl-brands__title {
    margin: 14px 0 0;
    font-size: clamp(24px, 3vw, 40px);
    line-height: 1.9;
    color: var(--text-primary);
}

.dmsl-brands__title span {
    color: var(--accent-primary);
}

.dmsl-brands__tracks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    height: clamp(420px, 52vw, 560px);
    /* لبه‌های بالا و پایین محو می‌شوند تا نوارها بریده به نظر نرسند. */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

.dmsl-track-wrap {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.dmsl-track {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}

.dmsl-track-wrap--up .dmsl-track {
    animation: dmslScrollUp 40s linear infinite;
}

.dmsl-track-wrap--down .dmsl-track {
    animation: dmslScrollDown 45s linear infinite;
}

.dmsl-track-wrap--slow .dmsl-track {
    animation-duration: 55s;
}

.dmsl-track-wrap:hover .dmsl-track {
    animation-play-state: paused;
}

@keyframes dmslScrollUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(-33.33%); }
}

@keyframes dmslScrollDown {
    0% { transform: translateY(-33.33%); }
    100% { transform: translateY(0); }
}

.dmsl-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 130px;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background-color: var(--bg-secondary);
    opacity: .45;
    filter: grayscale(100%);
    transition: opacity var(--transition-fast), filter var(--transition-fast),
    transform var(--transition-fast), border-color var(--transition-fast);
}

.dmsl-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.dmsl-brands.theme-dark .dmsl-logo img {
    filter: grayscale(100%) brightness(200%) contrast(100%);
}

.dmsl-logo:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.05);
    border-color: var(--accent-secondary);
}

.dmsl-brands.theme-dark .dmsl-logo:hover img {
    filter: grayscale(0%) brightness(100%);
}

/* ═══════════ پروژه‌های موفق ═══════════ */

/* فاصلهٔ بالای بیشتر: کلاس help-dark یک موج در سقف این سکشن می‌کشد و محتوا نباید زیرش برود. */
.dmsl-results {
    position: relative;
    padding-block: clamp(120px, 14vw, 190px) 0;
    /* ⚠ یک متغیر مشترک برای هم‌ترازی: هم ستون متن با همین فاصله می‌چسبد و هم صحنهٔ
       تصویرها با همین فاصله از بالای ناحیهٔ سنجاق شروع می‌شود. جدا کردن این دو عدد
       دقیقاً همان چیزی بود که متن را چند ده پیکسل بالاتر از قاب تصویر می‌نشاند. */
    --dmsl-stack-top: 14vh;
}

/* ۳۰ درصد متن سمت راست، ۷۰ درصد صحنهٔ تصویرها سمت چپ. */
.dmsl-results__grid {
    display: grid;
    grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
    gap: clamp(24px, 3vw, 44px);
    align-items: start;
}

.dmsl-results__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    text-align: start;
    /* متن همراه صحنهٔ سنجاق‌شده بالا می‌ماند تا در تمام مدت استک دیده شود. */
    position: sticky;
    top: var(--dmsl-stack-top);
}

.dmsl-results__title {
    margin: 0;
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1.7;
    color: var(--text-primary);
}

.dmsl-results__title span {
    color: var(--accent-primary);
}

.dmsl-results__desc {
    margin: 0;
    font-size: 15px;
    line-height: 2.2;
    color: var(--text-secondary);
    text-align: justify;
}

.dmsl-results__desc a {
    font-weight: 700;
    border-block-end: 1px solid currentColor;
}

.dmsl-results__points {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dmsl-results__points li {
    position: relative;
    padding-inline-start: 30px;
    font-size: 15px;
    color: var(--text-primary);
}

.dmsl-results__points li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 6px;
    width: 18px;
    height: 18px;
    background-color: var(--accent-primary);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* استک افقی تصویرهای نتیجه: هر کارت از سمت چپ می‌آید و روی کارت قبلی می‌نشیند.
   بلندی این بسته = مسافت اسکرول لازم برای عبور همهٔ کارت‌ها. */
.dmsl-stack {
    position: relative;
    height: 260vh;
}

/* ⚠ ارتفاع ناحیهٔ سنجاق «به‌اندازهٔ محتوا» است، نه یک صفحهٔ کامل. با ارتفاع ۱۰۰ درصدِ
   پنجره، زیر تصویر یک فضای خالی بزرگ می‌ماند که در پایان اسکرول به چشم می‌آید.
   چسبندگی با top کار می‌کند و به ارتفاع ثابت نیازی ندارد. */
.dmsl-stack__pin {
    position: sticky;
    top: var(--dmsl-stack-top);
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 18px;
}

/* ⚠ کلیدِ رفع سرریز: کارت‌ها از بیرونِ همین قاب وارد می‌شوند، پس باید دقیقاً همین‌جا
   بریده شوند. بدون این، ترنسلیت منفی کارت‌ها را بیرون از صفحه می‌برد و هنگام برگشتِ
   اسکرول، صفحه افقی سرریز می‌کرد. */
/* ⚠ تصویرها contain هستند نه cover: محتوای نمودارها مهم است و نباید بریده شود.
   در عوض، خودِ قاب نسبت ۱۶:۹ گرفته تا فضای خالی کنار تصویر به حداقل برسد؛ اگر تصویرها
   بعداً نسبت دیگری داشتند، همین یک عدد را با نسبت واقعی‌شان هماهنگ کنید. */
/* ⚠ هیچ نسبت یا ارتفاع ثابتی ندارد: ارتفاع را خودِ تصویر اول تعیین می‌کند. با نسبت ثابت،
   زیر تصویرِ کوتاه‌تر یک نوار سفید بزرگ می‌ماند (همان فضای خالی دسکتاپ). */
.dmsl-stack__viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* ارتفاع کارت از خود تصویر می‌آید (fit-content) نه از قاب؛ این‌طور نه تصویر بریده می‌شود
   و نه نوار خالی زیرش می‌ماند. پس فقط لبهٔ بالا میخ می‌شود، نه بالا و پایین. */
/* اولین کارت در جریان عادی می‌ماند تا ارتفاع قاب را بسازد؛ بقیه رویش شناور می‌شوند.
   بدون این، قاب هیچ ارتفاعی نداشت و مجبور بودیم نسبت ثابت بدهیم. */
.dmsl-shot:first-child {
    position: relative;
}

.dmsl-shot {
    position: absolute;
    inset-block: 0 auto;
    inset-inline: 0;
    height: fit-content;
    margin: 0;
    border-radius: 22px;
    overflow: hidden;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    /* سایهٔ بسیار ملایم؛ سایهٔ سنگین این کارت‌های روشن را کثیف نشان می‌داد. */
    box-shadow: 0 10px 26px rgba(10, 25, 47, .06);
    will-change: transform;
}

.dmsl-shot img {
    width: 100%;
    height: auto;
    background-color: #fff;
}

.dmsl-stack__hint {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

/* ═══════════ پرسش‌های پرتکرار ═══════════ */

.dmsl-qa {
    position: relative;
    padding-block: clamp(90px, 10vw, 140px);
}

.dmsl-qa__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 30px);
    align-items: start;
}

.dmsl-qa__card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(24px, 3vw, 38px);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    background-color: var(--bg-secondary);
    transition: border-color var(--transition-fast);
}

.dmsl-qa__card:hover {
    border-color: var(--accent-primary);
}

/* خط کوتاه رنگی بالای عنوان، همان زبان بصری بقیهٔ سکشن‌ها. */
.dmsl-qa__title {
    position: relative;
    margin: 0;
    padding-block-start: 16px;
    font-size: clamp(18px, 2vw, 23px);
    line-height: 1.8;
    color: var(--text-primary);
}

.dmsl-qa__title::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 46px;
    height: 4px;
    border-radius: 4px;
    background-color: var(--accent-primary);
}

.dmsl-qa__text {
    margin: 0;
    font-size: 15px;
    line-height: 2.2;
    color: var(--text-secondary);
    text-align: justify;
}

.dmsl-qa__text a {
    font-weight: 700;
    border-block-end: 1px solid currentColor;
}

/* ═══════════ پرسش‌های تفصیلی (تصویر چسبان + کارت‌های عبوری) ═══════════ */

.dmsl-qna {
    position: relative;
    padding-block: clamp(64px, 8vw, 110px);
}

.dmsl-qna__grid {
    display: grid;
    grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
    gap: clamp(20px, 2.4vw, 36px);
    align-items: start;
}

/* تصویر تمام‌ارتفاع که در کل مسیر عبور کارت‌ها می‌ماند.
   ⚠ فاصلهٔ چسبندگی نمی‌تواند فقط نسبت به ارتفاع پنجره باشد: هدر سایت ثابت است و در
   بزرگ‌نمایی ۱۲۵ درصد ارتفاع منطقی پنجره کوچک می‌شود، پس هشت درصدِ آن از ارتفاع هدر
   کمتر می‌شد و تصویر زیر هدر می‌رفت. کف ثابت تضمین می‌کند این هرگز تکرار نشود. */
.dmsl-qna__media {
    position: sticky;
    top: clamp(110px, 8vh, 160px);
}

/* ⚠ پهنا از ستون می‌آید، نه از ارتفاع پنجره. پیش‌تر ارتفاع روی ۸۴ درصدِ ارتفاع پنجره
   قفل بود و پهنا از روی نسبت تصویر از آن مشتق می‌شد؛ در بزرگ‌نمایی ۱۲۵ درصد ارتفاع
   منطقی پنجره کوچک می‌شود، پس تصویر باریک می‌شد و ستونش را پر نمی‌کرد و فاصلهٔ زیادی
   با ستون کارت‌ها می‌افتاد. حالا پهنا همیشه تمام ستون است و فقط سقف ارتفاع محدود
   می‌شود تا از پنجره بلندتر نشود. */
.dmsl-qna__figure {
    margin: 0;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    width: 100%;
    aspect-ratio: 4 / 5;
    height: auto;
    max-height: min(84vh, 860px);
}

/* ⚠ سوژهٔ تصویر در لبهٔ راست قاب است؛ با نسبت ۴/۵ برش از سمت چپ انجام می‌شود،
   پس نقطهٔ اتکا روی راست قفل می‌شود تا هرگز از کادر بیرون نیفتد.
   ⚠ مبدأ بزرگ‌نمایی هم باید همان لبهٔ راست باشد، نه مرکز: با مبدأ مرکز، بزرگ‌نمایی
   سوژه را از کادر بیرون می‌راند و همان چیزی که قرار بود دیده شود بریده می‌شد. */
.dmsl-qna__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 100% center;
    transform: scale(1.2);
    transform-origin: 100% center;
}

.dmsl-qna__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ⚠ کارت‌ها عمداً چسبان نیستند: خواستهٔ صریح این بود که رد شوند و از بالا بیرون بروند،
   نه اینکه روی هم بمانند. پس اینجا هیچ position: sticky ای نباید اضافه شود. */
.dmsl-qna__card {
    padding: clamp(20px, 2.4vw, 30px);
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background-color: var(--bg-secondary);
    transition: border-color var(--transition-fast);
}

.dmsl-qna__card:hover {
    border-color: var(--accent-primary);
}

.dmsl-qna__q {
    margin: 0 0 10px;
    font-size: clamp(16px, 1.8vw, 20px);
    line-height: 1.9;
    color: var(--text-primary);
}

.dmsl-qna__a {
    margin: 0;
    font-size: 14px;
    line-height: 2.1;
    color: var(--text-secondary);
    text-align: justify;
}

/* ═══════════ فراخوان تماس ═══════════ */

.dmsl-cta {
    position: relative;
    padding-block: clamp(50px, 7vw, 90px);
}

.dmsl-cta__box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(26px, 3.4vw, 42px) clamp(26px, 3.4vw, 48px);
    border-radius: 26px;
    background-color: var(--color-navy);
    overflow: hidden;
}

/* دو هالهٔ محو، هم‌خانوادهٔ اورب‌های هیرو؛ جعبه را از یک مستطیل ساده در می‌آورد. */
.dmsl-cta__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .38;
    pointer-events: none;
}

.dmsl-cta__glow--a {
    width: 260px;
    height: 260px;
    inset-block-start: -110px;
    inset-inline-start: -60px;
    background-color: var(--color-copper);
}

.dmsl-cta__glow--b {
    width: 220px;
    height: 220px;
    inset-block-end: -120px;
    inset-inline-end: 12%;
    background-color: var(--color-gold);
}

.dmsl-cta__text {
    position: relative;
    z-index: 2;
    margin: 0;
    max-width: 60ch;
    font-family: 'gofteh', 'dana', sans-serif;
    font-size: clamp(16px, 1.8vw, 22px);
    line-height: 1.9;
    color: #fff;
}

/* ⚠ رنگ متن با important: قاعدهٔ سراسری پیوندها در base.css رنگ خودش را روی این دکمه
   می‌نشاند و متن سفید را می‌برد. transform هم اینجا تعریف نمی‌شود چون اثر مغناطیسی
   (data-magnetic) خودش transform را در زمان اجرا می‌نویسد و دو تا با هم تداخل می‌کنند. */
.dmsl-cta__btn {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 32px;
    border-radius: var(--pill-radius);
    background-color: var(--color-copper) !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.dmsl-cta__btn:hover {
    background-color: var(--color-gold) !important;
    color: var(--color-navy) !important;
    box-shadow: 0 14px 30px rgba(245, 214, 143, .25);
}

.dmsl-cta__btn .dmsl-cta__btn-icon,
.dmsl-cta__btn span {
    color: inherit !important;
}

.dmsl-cta__btn-icon {
    display: inline-flex;
}

/* ═══════════ متن تفصیلی ═══════════ */

.dmsl-longread {
    position: relative;
    padding-block: clamp(90px, 10vw, 140px);
}

.dmsl-longread__heading {
    margin: 0 0 24px;
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1.8;
    color: var(--text-primary);
}

.dmsl-longread__heading span {
    color: var(--accent-primary);
}

.dmsl-longread__box {
    border: 1px solid var(--border-color);
    border-radius: 24px;
    background-color: var(--bg-secondary);
    padding: 6px;
}

/* ارتفاع محدود + اسکرول داخلی: متن کامل در نشانه‌گذاری می‌ماند ولی صفحه بی‌انتها نمی‌شود.
   ناحیه فوکوس‌پذیر است تا با صفحه‌کلید هم بشود پیمایشش کرد. */
.dmsl-longread__body {
    max-height: 620px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 22px 26px;
    font-size: 15px;
    line-height: 2.2;
    color: var(--text-secondary);
    text-align: justify;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.dmsl-longread__body:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
    border-radius: 20px;
}

.dmsl-longread__body::-webkit-scrollbar {
    width: 8px;
}

.dmsl-longread__body::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: var(--border-color);
}

.dmsl-longread__body > *:first-child {
    margin-block-start: 0;
}

.dmsl-longread__body h3 {
    margin-block: 28px 12px;
    font-size: clamp(18px, 2vw, 23px);
    line-height: 1.8;
    color: var(--text-primary);
    text-align: start;
}

.dmsl-longread__body h4 {
    margin-block: 20px 10px;
    font-size: 16px;
    line-height: 1.9;
    color: var(--text-primary);
    text-align: start;
}

.dmsl-longread__body p {
    margin: 0 0 14px;
}

.dmsl-longread__body ul,
.dmsl-longread__body ol {
    margin: 0 0 18px;
    padding-inline-start: 22px;
}

.dmsl-longread__body li {
    margin-block-end: 10px;
}

.dmsl-longread__body a {
    color: var(--accent-primary);
    font-weight: 700;
    border-block-end: 1px solid currentColor;
}

.dmsl-longread__body strong {
    color: var(--text-primary);
}

/* واژهٔ کلیدی برجسته داخل تیترها. */
.dmsl-hl {
    color: var(--accent-primary);
}

/* ═══════════ واکنش‌گرایی ═══════════ */

@media (max-width: 1199px) {
    .dmsl-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .dmsl-hero {
        padding-block: 48px 60px;
    }

    .dmsl-hero__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* روی موبایل تصویر بالای متن دیده می‌شود؛ ترتیب نشانه‌گذاری تغییری نکرده. */
    .dmsl-hero__media {
        order: -1;
    }

    .dmsl-hero__figure {
        transform: none;
    }

    .dmsl-hero__desc {
        text-align: start;
    }
}

/* زیر ۹۰۰ پیکسل صحنهٔ چرخشی معنا ندارد (فضای دو کارت کنار هم نیست): سنجاق و انیمیشن
   خاموش می‌شود و همان چهار کارت یک ردیف اسکرول افقی می‌شوند، بدون نوار اسکرول ولی با
   راهنمای متنی و کارت نیمه‌بریدهٔ لبه تا کاربر بفهمد ادامه دارد. */
@media (max-width: 900px) {
    .dmsl-deck {
        height: auto;
    }

    .dmsl-deck__pin {
        position: static;
        height: auto;
        display: block;
    }

    .dmsl-deck__stage {
        padding-inline: 0;
    }

    .dmsl-deck__inner {
        position: static;
        height: auto;
        display: flex;
        gap: 16px;
        overflow-x: auto;
        /* همان پدینگ ظرف مشترک تا در هر زوم و عرضی هم‌تراز بماند. */
    padding-inline: clamp(16px, 3vw, 40px);
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .dmsl-deck__inner::-webkit-scrollbar {
        display: none;
    }

    .dmsl-scard {
        position: static;
        flex: 0 0 min(84%, 380px);
        width: auto;
        scroll-snap-align: center;
    }

    .dmsl-scard__list {
        overflow: visible;
    }

    .dmsl-deck__hint {
        display: flex;
    }
}

@media (max-width: 900px) {
    /* برندها: عنوان بالا، نوارها زیرش و کوتاه‌تر. */
    .dmsl-brands__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .dmsl-brands__tracks {
        height: 360px;
        gap: 12px;
    }

    .dmsl-logo {
        height: 96px;
        padding: 12px;
        border-radius: 16px;
    }

    /* نتایج: به‌جای استک اسکرولی، یک ردیف اسکرول افقی با قفل روی هر تصویر.
       نوار اسکرول پنهان است ولی تصویر لبه نیمه‌بریده می‌ماند و راهنما هم دیده می‌شود. */
    .dmsl-results__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .dmsl-results__intro {
        position: static;
    }

    .dmsl-stack {
        height: auto;
        margin-block-start: 16px;
    }

    /* ⚠ ناحیهٔ سنجاق در موبایل معمولی می‌شود ولی فاصلهٔ بالای آن (که برای هم‌ترازی با متن
       بود) باقی می‌ماند و همان شکاف بزرگ بین متن و تصویرها را می‌ساخت. */
    .dmsl-stack__pin {
        padding-block-start: 0;
        gap: 0;
    }

    .dmsl-stack__viewport {
        overflow-x: auto;
        overflow-y: visible;
        border-radius: 0;
    }

    .dmsl-qa__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* موبایل: تصویر حذف و کارت‌های پرسش چسبان می‌شوند تا روی هم استک شوند. */
    .dmsl-qna__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .dmsl-qna__media {
        display: none;
    }

    .dmsl-qna__list {
        display: block;
        padding-block-end: 40px;
    }

    .dmsl-qna__card {
        position: sticky;
        top: 90px;
        margin-block-end: 16px;
        background-color: var(--bg-primary);
        box-shadow: var(--card-shadow);
    }

    .dmsl-qna__card:nth-child(2) { top: 100px; }
    .dmsl-qna__card:nth-child(3) { top: 110px; }
    .dmsl-qna__card:nth-child(4) { top: 120px; }
    .dmsl-qna__card:nth-child(5) { top: 130px; }
    .dmsl-qna__card:nth-child(6) { top: 140px; }
    .dmsl-qna__card:nth-child(7) { top: 150px; }
    .dmsl-qna__card:nth-child(8) { top: 160px; }

    .dmsl-longread__body {
        max-height: 460px;
        padding: 16px;
        font-size: 14px;
    }

    .dmsl-cta__box {
        flex-direction: column;
        align-items: flex-start;
        text-align: start;
    }

    .dmsl-cta__btn {
        width: 100%;
        justify-content: center;
    }

    .dmsl-stack__pin {
        position: static;
        height: auto;
        display: block;
    }

    .dmsl-stack__viewport {
        position: static;
        height: auto;
        display: flex;
        gap: 14px;
        overflow-x: auto;
        padding-block-end: 8px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .dmsl-stack__viewport::-webkit-scrollbar {
        display: none;
    }

    .dmsl-shot {
        position: static;
        flex: 0 0 min(88%, 460px);
        inset: auto;
        scroll-snap-align: center;
        transform: none !important;
    }

    .dmsl-shot img {
        height: auto;
    }

    .dmsl-stack__hint {
        display: flex;
        margin-block-start: 14px;
    }

    /* موبایل: هر مرحله یک ردیف کامل و چسبان؛ با اسکرول روی هم می‌نشینند. */
    .dmsl-steps .dmsl-sechead {
        /* ⚠ عنوان هم باید بچسبد وگرنه هنگام استک‌شدن کارت‌ها از کادر بیرون می‌رود و
           کاربر نمی‌داند این کارت‌ها مربوط به چه بخشی‌اند. */
        position: sticky;
        top: 0;
        z-index: 6;
        margin-block-end: 18px;
        padding-block: 14px;
        background-color: var(--bg-primary);
    }

    .dmsl-steps__list {
        display: block;
        /* بدون این ارتفاع اضافه، آخرین کارت جایی برای چسبیدن ندارد. */
        padding-block-end: 40px;
    }

    .dmsl-step {
        position: sticky;
        display: flex;
        width: 100%;
        margin-block-end: 16px;
        /* پلکانی‌بودن روی موبایل کنار می‌رود؛ استک‌شدن جایش را می‌گیرد. */
        transform: none;
        opacity: 1;
        background-color: var(--bg-primary);
    }

    .dmsl-step:nth-child(1) { top: 90px; z-index: 1; }
    .dmsl-step:nth-child(2) { top: 104px; z-index: 2; }
    .dmsl-step:nth-child(3) { top: 118px; z-index: 3; }
    .dmsl-step:nth-child(4) { top: 132px; z-index: 4; }
    .dmsl-step:nth-child(5) { top: 146px; z-index: 5; }
}

@media (max-width: 767px) {
    .dmsl-row {
        grid-template-columns: minmax(0, 1fr);
        /* در تک‌ستونی، جابه‌جایی افقی بی‌معنا و مزاحم است. */
        transform: none !important;
    }

    .dmsl-card--media img {
        min-height: 200px;
    }
}

@media (max-width: 575px) {
    .dmsl-hero__actions {
        gap: 10px;
    }

    .dm-btn-wrapper .btn-shine {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dmsl-hero__figure,
    .dmsl-card {
        transition: none;
        animation: none;
    }

    .dmsl-row {
        transform: none !important;
    }
}

/* ═══════════ نقشهٔ راه ۱۲ ماهه ═══════════
   ماتریس بدون جدول: ردیف سرستون و هفت ردیف داده همگی از یک متغیر ستون‌بندی مشترک
   تغذیه می‌شوند، پس ستون‌ها هم‌تراز می‌مانند و در موبایل با عوض‌کردن همان یک متغیر
   کل ماتریس روی هم می‌نشیند — بدون تکرار نشانه‌گذاری و بدون هیچ اسکریپتی. */

.dmsl-roadmap {
    --dmsl-rm-cols: minmax(168px, .8fr) repeat(3, minmax(0, 1fr));
    --dmsl-rm-gap: clamp(10px, 1vw, 16px);
    --dmsl-rm-glow: rgba(245, 214, 143, .13);

    position: relative;

    /* ⚠ پس‌زمینه همان سرمه‌ای پایهٔ تم تیره است، نه یک تیرهٔ اختصاصی: هیرو و سکشن بعدی
       هر دو روشن‌اند، پس این سکشن تنها بلوک تیرهٔ این ناحیه است و هر دو موج بالا و
       پایین را می‌گیرد. هیچ خط یا هاله‌ای برای جداسازی لازم نیست — کار را موج می‌کند.
       فاصلهٔ بالا و پایین باید از ارتفاع موج بیشتر بماند وگرنه محتوا زیرش می‌رود. */
    padding-block: clamp(92px, 11vw, 155px);
}

.dmsl-roadmap__matrix {
    display: flex;
    flex-direction: column;
    gap: var(--dmsl-rm-gap);
}

/* ورود آبشاری ردیف‌ها.
   ⚠ کلاس is-armed را اسکریپت در زمان اجرا می‌گذارد، پس بدون جاوااسکریپت هیچ‌کدام از
   این دو قاعده فعال نمی‌شود و جدول کامل دیده می‌شود. هرگز حالت پنهان را پیش‌فرض نکنید. */
.dmsl-roadmap__matrix.is-armed .dmsl-roadmap__header,
.dmsl-roadmap__matrix.is-armed .dmsl-roadmap__row {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
}

.dmsl-roadmap__matrix.is-armed .dmsl-roadmap__header.is-in,
.dmsl-roadmap__matrix.is-armed .dmsl-roadmap__row.is-in {
    opacity: 1;
    transform: none;
}

/* شبکهٔ ایمنی دوم: اسکریپت هم همین را بررسی می‌کند، ولی اگر روزی آن بررسی برداشته شد
   حرکت باز هم برای کاربری که حرکت کمتر خواسته اجرا نمی‌شود. */
@media (prefers-reduced-motion: reduce) {
    .dmsl-roadmap__matrix.is-armed .dmsl-roadmap__header,
    .dmsl-roadmap__matrix.is-armed .dmsl-roadmap__row {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.dmsl-roadmap__header,
.dmsl-roadmap__row {
    display: grid;
    grid-template-columns: var(--dmsl-rm-cols);
    gap: var(--dmsl-rm-gap);
    align-items: stretch;
}

.dmsl-roadmap__corner {
    align-self: end;
    margin: 0;
    padding-block-end: 14px;
    padding-inline-start: 4px;
    font-size: clamp(15px, 1.5vw, 18px);
    font-weight: 700;
    color: var(--text-primary);
}

.dmsl-roadmap__phase {
    position: relative;
    display: grid;
    align-content: start;
    gap: 4px;
    overflow: hidden;
    padding: 16px 18px;
    border: 1px solid rgba(245, 214, 143, .22);
    border-radius: 18px;
    background-color: rgba(255, 255, 255, .035);
    background-image: linear-gradient(160deg, var(--dmsl-rm-glow), rgba(245, 214, 143, 0) 62%);
}

/* نوار نازک بالای هر کارت فاز؛ پررنگی‌اش از فاز اول به سوم کم می‌شود و همین کاهش،
   ترتیب زمانی سه فاز را بدون هیچ متن اضافه‌ای نشان می‌دهد.
   شمارش با nth-of-type است چون اولین فرزندِ ردیف سرستون از نوع دیگری است. */
.dmsl-roadmap__phase::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background-image: linear-gradient(90deg, var(--accent-primary), rgba(245, 214, 143, .08));
}

.dmsl-roadmap__phase:nth-of-type(2)::before {
    opacity: .62;
}

.dmsl-roadmap__phase:nth-of-type(3)::before {
    opacity: .38;
}

.dmsl-roadmap__phase-num {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 14px;
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    color: rgba(245, 214, 143, .12);
    pointer-events: none;
}

.dmsl-roadmap__phase-name {
    position: relative;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-primary);
}

.dmsl-roadmap__phase-text {
    position: relative;
    font-size: clamp(15px, 1.5vw, 17px);
    font-weight: 700;
    line-height: 1.55;
    color: #ffffff;
}

.dmsl-roadmap__phase-time {
    position: relative;
    justify-self: start;
    margin-block-start: 8px;
    padding: 4px 13px;
    border-radius: var(--pill-radius);
    background-color: rgba(245, 214, 143, .14);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-primary);
}

/* ═══ رنگ یک‌درمیانِ ردیف‌ها ═══
   ⚠ تهِ رنگ روی خودِ ردیف به‌صورت متغیر تعریف می‌شود، نه مستقیم روی سلول‌ها: این‌طور
   یک ردیف کامل — برچسب دسته و هر سه سلولش — همیشه یک تهِ رنگ مشترک دارد. در موبایل
   که ردیف به چهار بلوک زیر هم می‌شکند، همین اشتراکِ رنگ است که نشان می‌دهد این چهار
   بلوک یک ردیف‌اند. شمارش با nth-of-type انجام می‌شود تا ردیف سرستون‌ها که از نوع
   دیگری است در نوبت‌بندی حساب نشود. */
.dmsl-roadmap__row {
    --dmsl-rm-cat-bg: rgba(255, 255, 255, .03);
    --dmsl-rm-cell-bg: rgba(255, 255, 255, .022);
    --dmsl-rm-cell-border: var(--border-color);
}

.dmsl-roadmap__row:nth-of-type(even) {
    --dmsl-rm-cat-bg: rgba(255, 255, 255, .075);
    --dmsl-rm-cell-bg: rgba(255, 255, 255, .062);
    --dmsl-rm-cell-border: rgba(255, 255, 255, .085);
}

.dmsl-roadmap__cat {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    overflow: hidden;
    padding: 18px 16px;
    border: 1px solid var(--dmsl-rm-cell-border);
    border-radius: 18px;
    background-color: var(--dmsl-rm-cat-bg);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

/* ریل طلایی بیرونی‌ترین لبهٔ ردیف. با شبه‌عنصر کشیده می‌شود نه با حاشیه، چون حاشیه
   نمی‌تواند طیف رنگی بگیرد. در راست‌به‌چپ، لبهٔ آغازین همان لبهٔ راست است. */
.dmsl-roadmap__cat::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background-image: linear-gradient(180deg, var(--accent-primary), rgba(245, 214, 143, .12));
}

.dmsl-roadmap__cat-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    border-radius: 10px;
    background-color: rgba(245, 214, 143, .14);
    font-size: 13px;
    font-weight: 800;
    color: var(--accent-primary);
}

/* ⚠ شیوه‌نامهٔ پایه به عنوان‌های سطح سه اندازهٔ ۴۸ می‌دهد؛ اینجا باید بازنویسی شود. */
.dmsl-roadmap__cat-title {
    margin: 0;
    font-size: clamp(14px, 1.35vw, 16px);
    font-weight: 700;
    line-height: 1.65;
    text-align: start;
    color: #ffffff;
}

.dmsl-roadmap__cat-sub {
    display: block;
    margin-block-start: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.dmsl-roadmap__cell {
    padding: 16px;
    border: 1px solid var(--dmsl-rm-cell-border);
    border-radius: 18px;
    background-color: var(--dmsl-rm-cell-bg);
    transition: border-color var(--transition-fast), background-color var(--transition-fast),
                box-shadow var(--transition-fast);
}

/* ⚠ در هاور جابه‌جایی نمی‌دهیم: انیمیشن ورودِ آبشاری همین خصوصیت را می‌نویسد و دو
   حرکت روی یک خصوصیت با هم می‌جنگند. تأکید با هاله و رنگ حاشیه ساخته می‌شود. */
.dmsl-roadmap__row:hover .dmsl-roadmap__cell {
    border-color: rgba(245, 214, 143, .34);
    background-color: rgba(245, 214, 143, .05);
    box-shadow: 0 12px 30px -24px rgba(245, 214, 143, .95);
}

.dmsl-roadmap__row:hover .dmsl-roadmap__cat {
    border-color: rgba(245, 214, 143, .34);
    background-color: rgba(245, 214, 143, .07);
}

/* در دسکتاپ نام فاز بالای ستون نوشته شده؛ این برچسب فقط در موبایل لازم می‌شود. */
.dmsl-roadmap__cell-phase {
    display: none;
}

.dmsl-roadmap__items {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmsl-roadmap__items li {
    position: relative;
    padding-inline-start: 18px;
    font-size: clamp(12.5px, 1.15vw, 14px);
    line-height: 1.85;
    color: var(--text-secondary);
}

.dmsl-roadmap__items li::before {
    content: "";
    position: absolute;
    inset-inline-start: 4px;
    inset-block-start: .78em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--accent-primary);
    opacity: .75;
}

/* ماتریس به کارت‌های پشته‌ای تبدیل می‌شود: تنها متغیر ستون‌بندی عوض می‌شود. */
@media (max-width: 991px) {
    .dmsl-roadmap {
        --dmsl-rm-cols: minmax(0, 1fr);
    }

    /* ⚠ تناسب فاصله‌ها در موبایل وارونهٔ دسکتاپ است: چهار بلوکِ یک ردیف باید به هم
       نزدیک و از ردیف بعدی دور باشند، وگرنه با تهِ رنگ یک‌درمیان هم معلوم نمی‌شود
       کدام بلوک به کدام ردیف تعلق دارد. پس فاصلهٔ درون‌ردیف کم و بین‌ردیف زیاد. */
    .dmsl-roadmap__matrix {
        gap: 30px;
    }

    /* سرستون‌ها به یک راهنمای فشرده در بالای ماتریس تبدیل می‌شوند. */
    .dmsl-roadmap__header {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .dmsl-roadmap__corner {
        display: none;
    }

    .dmsl-roadmap__phase {
        padding: 13px 14px;
    }

    .dmsl-roadmap__phase-num {
        display: none;
    }

    .dmsl-roadmap__row {
        gap: 7px;
    }

    .dmsl-roadmap__cell-phase {
        display: inline-block;
        margin: 0 0 11px;
        padding: 3px 13px;
        border-radius: var(--pill-radius);
        background-color: rgba(245, 214, 143, .13);
        font-size: 12px;
        font-weight: 700;
        color: var(--accent-primary);
    }
}

/* در عرض‌های خیلی کم سه کارتِ راهنما کنار هم جا نمی‌شوند و متن حرف‌به‌حرف می‌شکند؛
   روی هم می‌نشینند و عنوان فاز در یک سطر جمع می‌شود. */
@media (max-width: 600px) {
    .dmsl-roadmap__header {
        grid-template-columns: minmax(0, 1fr);
    }

    .dmsl-roadmap__phase {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 8px;
    }

    .dmsl-roadmap__phase-time {
        margin-block-start: 0;
        margin-inline-start: auto;
    }
}