/* dmhouse-mashhad-seo.css — شیوه‌نامهٔ قالب «خدمات سئو در مشهد».
   ⚠ روایت «سئوی محلی مشهد»؛ هیچ صحنه‌ای از قالب مشاوره سئو و آنالیز سئو تکرار نشده است.
   ⚠ المان‌های مشترک (دکمه‌ها، موج، سوالات متداول، جعبهٔ متن سئو، مقیاس تیتر سکشن، ماژول
   نظرها و مسیر دایره‌ای) بازطراحی نمی‌شوند؛ اینجا فقط جایشان تنظیم می‌شود.
   ⚠ متغیرهای اسکرول (--p، --c) پیش‌فرضشان حالت نهایی است؛ بدون اسکریپت یا با کاهش حرکت،
   همه‌چیز کامل دیده می‌شود. پرسپکتیو و جابه‌جایی ماندگار فقط بالای ۹۹۲ پیکسل. */

[hidden] {
    display: none !important;
}

.dmms-main {
    --dmms-pad: clamp(56px, 7vw, 110px);
    --dmms-pad-wave: calc(clamp(50px, 8vw, 120px) + clamp(40px, 5vw, 70px));
    --dmms-gold: #f5d68f;
    --dmms-copper: #b87333;
    --dmms-navy: #0a192f;
    /* ⚠ رنگ فیروزه‌ای نسخهٔ اول (#2bb8a3) در پالت تم نبود و حذف شد؛ همهٔ جاهایش مسی‌طلایی شد. */
    --dmms-amber: #e0a96a;
    --dmms-ease: cubic-bezier(.22, 1, .36, 1);
    overflow: clip;
}

.dmms-sec {
    --p: 1;
    --c: 0;
    position: relative;
    padding-block: var(--dmms-pad);
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.dmms-sec.section-meld {
    padding-block: var(--dmms-pad-wave);
}

/* ═══════════ پیوندها (فقط پیوندهای خود قالب، تک‌به‌تک) ═══════════ */
.dmms-crumbs__link,
.dmms-crumbs__link:visited,
.dmms-hero__lead a,
.dmms-hero__lead a:visited,
.dmms-stair__text a,
.dmms-stair__text a:visited,
.dmms-module__li a,
.dmms-module__li a:visited,
.dmms-p a,
.dmms-p a:visited,
.dmms-read__body a,
.dmms-read__body a:visited {
    color: var(--accent-primary) !important;
}

.dmms-hero__lead a,
.dmms-stair__text a,
.dmms-module__li a,
.dmms-p a {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
}

/* ⚠ پیوند تصویرهای نتایج رنگ ندارد ولی قاعدهٔ صورتی زیرخط/حاشیه نمی‌دهد؛ فقط مطمئن می‌شویم. */
.dmms-deck__card,
.dmms-deck__card:visited {
    color: inherit !important;
}

/* ═══════════ عناصر مشترک ═══════════ */

/* ⚠ مقیاس تیتر سکشن مشترک همهٔ قالب‌های کدی؛ همان اعداد. */
.dmms-title {
    margin: 0 0 14px;
    font-size: clamp(22px, 2.6vw, 34px);
    line-height: 1.7;
    color: var(--text-primary);
    text-align: start;
}

.dmms-title--center,
.dmms-p--center {
    text-align: center;
}

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

.dmms-ico {
    display: block;
    width: 100%;
    height: 100%;
}

.dmms-head {
    margin-block-end: clamp(26px, 4vw, 52px);
}

.dmms-head--split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px 30px;
}

.dmms-rv {
    opacity: 0;
    transform: translate3d(0, 36px, 0);
    transition: opacity .85s var(--dmms-ease), transform .85s var(--dmms-ease);
    transition-delay: calc(var(--dmms-i, 0) * 85ms);
}

.dmms-rv.is-in {
    opacity: 1;
    transform: none;
}

.dmms-split {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: center;
    gap: clamp(28px, 5vw, 80px);
}

.dmms-split--rev > :last-child {
    order: -1;
}

/* ═══════════ هیرو: نقشه ═══════════ */

.dmms-hero {
    padding-block: clamp(85px, 13vw, 190px) clamp(40px, 5vw, 70px);
    overflow: hidden;
}

/* ⚠ هیرو روشن است؛ مرز پایینش با سکشن تیرهٔ بعدی را موج بالای همان سکشن می‌سازد. نور فقط در نیمهٔ بالا. */
.dmms-hero__light {
    position: absolute;
    inset: 0 0 50%;
    background-image: radial-gradient(ellipse 55% 80% at 30% 0%, rgba(224, 169, 106, .12), transparent 100%),
                      radial-gradient(ellipse 40% 70% at 90% 0%, rgba(245, 214, 143, .10), transparent 100%);
    pointer-events: none;
}

.dmms-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 5vw, 80px);
}

.dmms-crumbs {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--text-secondary);
}

.dmms-crumbs__link {
    text-decoration: none;
}

.dmms-hero__title {
    margin: 0;
    font-size: clamp(38px, 6vw, 84px);
    font-weight: 900;
    line-height: 1.3;
    color: var(--text-primary);
    text-align: start;
}

.dmms-hero__divider {
    position: relative;
    display: block;
    width: 140px;
    height: 4px;
    margin: 16px 0 22px;
    overflow: hidden;
    border-radius: 2px;
    background-color: var(--border-color);
}

.dmms-hero__divider i {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, var(--dmms-amber), var(--dmms-gold));
    transform-origin: right;
    animation: dmmsGrowX 1.4s var(--dmms-ease) .3s both;
}

.dmms-hero__lead {
    margin: 0 0 28px;
    font-size: 15.5px;
    line-height: 2.2;
    color: var(--text-secondary);
    text-align: justify;
}

/* ⚠ باگ مغناطیسی: ظرف سراسری dm-btn-wrapper قاعدهٔ display ندارد و اینجا مستقیم در ستون متن
   نشسته، پس یک بلوکِ تمام‌عرض بود. اسکریپت مغناطیسی مرکزِ همین ظرف را می‌گیرد؛ نشانگر روی
   فضای خالی ستون هم دکمه را می‌کشید و مرکز وسط ستون بود نه وسط دکمه. در قالب‌های دیگر ظرف
   داخل یک ردیف flex است و خودبه‌خود هم‌اندازهٔ دکمه می‌شود؛ اینجا همان را صریح می‌کنیم. */
.dmms-hero__cta {
    display: inline-flex;
}

.dmms-hero__figure {
    margin: 0;
    overflow: hidden;
    border-radius: 28px;
}

.dmms-hero__figure img {
    display: block;
    width: 100%;
    height: auto;
}

.dmms-map {
    position: relative;
    aspect-ratio: 1 / .9;
}

/* ⚠ هیرو باید در لپ‌تاپ (حتی با کمی بزرگ‌نمایی) در یک نما جا شود. بودجهٔ ارتفاع = ارتفاع
   پنجره منهای فاصلهٔ بالا (که هدر ثابت را هم پوشش می‌دهد) و پایین هیرو؛ عرض موکاپ از همین
   ارتفاع و نسبت ابعادش به دست می‌آید، پس هرگز از پایین نمی‌زند و در مانیتور بزرگ هم ریز نمی‌شود. */
@media (min-width: 993px) {
    .dmms-hero__visual {
        --hero-h: calc(100vh - clamp(85px, 13vw, 190px) - clamp(40px, 5vw, 70px) - 16px);
        --hero-h: calc(100svh - clamp(85px, 13vw, 190px) - clamp(40px, 5vw, 70px) - 16px);
        width: min(100%, calc(var(--hero-h) / .9));
        justify-self: center;
    }
}

/* متن هیرو در ارتفاع‌های لپ‌تاپ فشرده‌تر می‌شود تا همراه موکاپ در یک نما بماند. */
@media (min-width: 993px) and (max-height: 900px) {
    .dmms-hero__title {
        font-size: clamp(34px, 4.6vw, 70px);
    }

    .dmms-hero__divider {
        margin: 10px 0 14px;
    }

    .dmms-hero__lead {
        margin-bottom: 20px;
        font-size: 14.5px;
        line-height: 2;
    }
}

.dmms-map__board {
    position: absolute;
    /* ⚠ گوشی و نشان رتبه از لبهٔ راست بیرون می‌زنند؛ فاصلهٔ راست بیشتر از چپ است تا کل ترکیب
       (نه فقط قاب) وسط کادر خودش بنشیند. نسخهٔ قبل قاب را به راست چسبانده بود و کل موکاپ کج بود. */
    inset: 0 10% 8% 2%;
    overflow: hidden;
    border-radius: 30px;
    background-color: #0f2440;
    /* سایه برای زمینهٔ روشن هیرو نرم شده؛ سایهٔ سیاه غلیظ روی سفید لکه می‌شد. */
    box-shadow: 0 40px 80px -40px rgba(10, 25, 47, .55), inset 0 0 0 1px rgba(255, 255, 255, .07);
}

.dmms-map__roads {
    position: absolute;
    inset: -20%;
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 2px, transparent 2px),
        linear-gradient(35deg, transparent 48%, rgba(245, 214, 143, .22) 48%, rgba(245, 214, 143, .22) 52%, transparent 52%);
    background-size: 48px 48px, 48px 48px, 100% 100%;
    transform: translate3d(calc(var(--c) * 24px), calc(var(--c) * -30px), 0) rotate(-6deg);
}

.dmms-map__block {
    position: absolute;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, .05);
}

.dmms-map__block--1 { top: 12%; left: 10%; width: 22%; height: 18%; }
.dmms-map__block--2 { top: 20%; right: 12%; width: 26%; height: 22%; background-color: rgba(224, 169, 106, .12); }
.dmms-map__block--3 { bottom: 16%; left: 20%; width: 30%; height: 16%; }
.dmms-map__block--4 { bottom: 26%; right: 18%; width: 16%; height: 14%; background-color: rgba(245, 214, 143, .1); }

.dmms-map__route {
    position: absolute;
    top: 58%;
    left: 12%;
    width: 64%;
    height: 34%;
    border: 3px dashed rgba(224, 169, 106, .6);
    border-color: rgba(224, 169, 106, .6) transparent transparent rgba(224, 169, 106, .6);
    border-radius: 60% 0 0 0;
    clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0);
}

.dmms-map__rival {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50% 50% 50% 0;
    background-color: rgba(255, 255, 255, .25);
    transform: rotate(-45deg);
    opacity: calc(1 - var(--p) * .6);
}

.dmms-map__rival--1 { top: 30%; left: 30%; }
.dmms-map__rival--2 { top: 70%; right: 30%; }
.dmms-map__rival--3 { top: 24%; right: 34%; }

.dmms-map__pin {
    position: absolute;
    top: 42%;
    left: 52%;
    width: 64px;
    height: 64px;
    margin: -64px 0 0 -32px;
    color: var(--dmms-gold);
    transform: translate3d(0, calc((1 - min(1, var(--p) * 1.6)) * -90px), 0);
    filter: none;
}

.dmms-map__pin .dmms-ico {
    position: relative;
    z-index: 1;
    fill: rgba(245, 214, 143, .25);
    stroke-width: 2;
}

.dmms-map__pin i {
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 40px;
    height: 12px;
    margin-left: -20px;
    border-radius: 50%;
    border: 2px solid rgba(245, 214, 143, .7);
    animation: dmmsRipple 2s ease-out infinite;
}

.dmms-phone {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 62%;
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 38%;
    padding: 30px 12px 18px;
    border-radius: 30px;
    background-color: #ffffff;
    box-shadow: 0 40px 70px -30px rgba(10, 25, 47, .5), inset 0 0 0 5px #0a192f;
    transform: translate3d(0, calc(var(--c) * 26px), 0);
}

.dmms-phone__notch {
    position: absolute;
    top: 10px;
    left: 50%;
    width: 36%;
    height: 8px;
    margin-left: -18%;
    border-radius: 4px;
    background-color: var(--dmms-navy);
}

.dmms-phone__search {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: 14px;
    background-color: #eef1f6;
    color: #9aa6b8;
}

.dmms-phone__search .dmms-ico {
    width: 14px;
    height: 14px;
}

.dmms-phone__search i {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background-color: #c3cad6;
}

.dmms-phone__card {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 4px 8px;
    align-items: center;
    padding: 9px;
    border-radius: 12px;
    background-color: #f5f7fa;
}

.dmms-phone__card b {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background-color: #dde3ec;
    font-size: 12px;
    color: #5b6780;
}

.dmms-phone__card i {
    height: 6px;
    border-radius: 3px;
    background-color: #b9c3d3;
}

.dmms-phone__card em {
    display: flex;
    gap: 1px;
    height: 10px;
}

.dmms-phone__card em .dmms-ico {
    width: 10px;
    height: 10px;
    fill: var(--dmms-gold);
    stroke: var(--dmms-copper);
    stroke-width: 1;
}

.dmms-phone__card--you {
    background-image: linear-gradient(90deg, #fff4d6, #fde3ad);
    box-shadow: 0 0 0 2px var(--dmms-copper);
}

.dmms-phone__card--you b {
    background-color: var(--dmms-copper);
    color: #ffffff;
}

.dmms-map__rank {
    position: absolute;
    top: 6%;
    inset-inline-start: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 16px;
    border-radius: 18px;
    background-image: linear-gradient(150deg, #fbe3a6, var(--dmms-copper));
    color: var(--dmms-navy);
    box-shadow: 0 20px 40px -18px rgba(245, 214, 143, .55);
}

.dmms-map__rank small {
    font-size: 11px;
    font-weight: 800;
}

.dmms-map__rank b {
    display: block;
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
}

.dmms-map__rank b.is-tick {
    animation: dmmsTick .45s var(--dmms-ease);
}

@keyframes dmmsTick {
    from { opacity: 0; transform: translateY(10px) scale(.8); }
    to { opacity: 1; transform: none; }
}

/* ═══════════ رشد: پلکان ═══════════ */

/* ⚠ ادامهٔ هیرو: موج بالا خاموش. */
.dmms-stairs__motto {
    margin: 0 0 14px;
    padding: 8px 18px;
    border-radius: 40px;
    background-image: linear-gradient(90deg, rgba(224, 169, 106, .18), rgba(245, 214, 143, .14));
    box-shadow: inset 0 0 0 1px rgba(245, 214, 143, .3);
    font-size: 15px;
    color: var(--dmms-gold);
}

.dmms-stairs__stage {
    position: relative;
}

.dmms-stairs__arrow {
    position: absolute;
    inset: 0 0 40%;
    width: 100%;
    height: 60%;
    overflow: visible;
    pointer-events: none;
}

.dmms-stairs__path {
    fill: none;
    stroke: rgba(245, 214, 143, .45);
    stroke-width: 2;
    stroke-dasharray: 1;
    stroke-dashoffset: calc(1 - var(--p));
    vector-effect: non-scaling-stroke;
}

.dmms-stairs__list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmms-stair {
    position: relative;
    padding: clamp(22px, 2.4vw, 30px);
    overflow: hidden;
    border-radius: 24px;
    background-color: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-color);
    transition: box-shadow .4s ease, background-color .4s ease;
}

.dmms-stair::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    height: 4px;
    background-image: linear-gradient(90deg, var(--dmms-amber), var(--dmms-gold));
    transform: scaleX(.25);
    transform-origin: right;
    transition: transform .6s var(--dmms-ease);
}

.dmms-stair:hover {
    background-color: #0d2340;
    box-shadow: inset 0 0 0 1px rgba(245, 214, 143, .35), 0 30px 60px -40px rgba(0, 0, 0, .9);
}

.dmms-stair:hover::before {
    transform: scaleX(1);
}

@media (min-width: 993px) {
    /* پلکان: ستون راست پایین‌تر، هر ستون به سمت چپ یک پله بالاتر. */
    .dmms-stair:nth-child(3n+1) { margin-block-start: 90px; }
    .dmms-stair:nth-child(3n+2) { margin-block-start: 45px; }
}

.dmms-stair__step {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 18px;
    font-size: 64px;
    font-weight: 900;
    line-height: 1;
    color: rgba(245, 214, 143, .08);
}

.dmms-stair__icon {
    display: block;
    width: 48px;
    height: 48px;
    padding: 11px;
    margin-block-end: 14px;
    border-radius: 50%;
    background-image: linear-gradient(150deg, rgba(224, 169, 106, .3), rgba(245, 214, 143, .2));
    color: var(--dmms-gold);
}

.dmms-stair__title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 800;
    color: var(--text-primary);
}

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

/* ═══════════ لیست خدمات: پنل چهارخانه ═══════════ */

.dmms-panel__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-block-start: clamp(24px, 4vw, 48px);
}

.dmms-panel__hub {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 70px;
    height: 70px;
    margin: -35px;
    padding: 18px;
    border-radius: 50%;
    background-color: var(--dmms-navy);
    color: var(--dmms-gold);
    box-shadow: 0 0 0 10px var(--bg-primary), 0 20px 40px -14px rgba(10, 25, 47, .6);
    transform: rotate(calc(var(--c) * 90deg));
}

.dmms-module {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background-color: #ffffff;
    box-shadow: inset 0 0 0 1px var(--border-color), 0 30px 60px -44px rgba(10, 25, 47, .55);
    transition: box-shadow .4s ease, opacity .85s var(--dmms-ease), transform .85s var(--dmms-ease);
}

.dmms-module:hover {
    box-shadow: inset 0 0 0 1px rgba(184, 115, 51, .5), 0 36px 70px -40px rgba(10, 25, 47, .6);
}

.dmms-module__head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    background-color: var(--dmms-navy);
    background-image: radial-gradient(circle at 100% 0%, rgba(224, 169, 106, .3), transparent 50%);
}

.dmms-module--2 .dmms-module__head,
.dmms-module--3 .dmms-module__head {
    background-image: radial-gradient(circle at 0% 100%, rgba(245, 214, 143, .28), transparent 55%);
}

.dmms-module__art {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    padding: 12px;
    border-radius: 16px;
    background-image: linear-gradient(150deg, #fbe3a6, var(--dmms-copper));
    color: var(--dmms-navy);
    transition: transform .6s var(--dmms-ease);
}

.dmms-module:hover .dmms-module__art {
    transform: rotate(-12deg) scale(1.08);
}

.dmms-module__title {
    flex: 1;
    margin: 0;
    font-size: clamp(17px, 1.8vw, 21px);
    font-weight: 900;
    color: #ffffff;
    text-align: start;
}

.dmms-module__list {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 14px 18px 20px;
    list-style: none;
}

.dmms-module__li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 8px;
    border-radius: 12px;
    font-size: 14.5px;
    line-height: 1.9;
    color: var(--text-secondary);
    transition: background-color .25s ease, color .25s ease;
}

.dmms-module__li:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.dmms-module__tick {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-block-start: 3px;
    padding: 4px;
    border-radius: 7px;
    background-color: rgba(224, 169, 106, .15);
    color: var(--dmms-amber);
}

.dmms-module__tick .dmms-ico path {
    stroke-width: 3;
}

@media (min-width: 993px) {
    .dmms-panel__grid {
        perspective: 1600px;
    }

    .dmms-module.dmms-rv {
        transform: rotateX(18deg) translate3d(0, 50px, -80px);
    }

    .dmms-module.dmms-rv.is-in {
        transform: none;
    }
}

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

.dmms-path__head {
    padding-block-start: var(--dmms-pad);
}

/* ═══════════ برندها ═══════════
   ⚠ جایگاه این سکشن باید روشن بماند (پایین مسیر دایره‌ای). اگر پیکربندی «تیره» انتخاب شده
   باشد، فقط در همین قالب متغیرهای رنگ روی همان سکشن روشن بازتعریف و موج‌ها خاموش می‌شوند
   (همان راه قالب مشهد)؛ شیوه‌نامهٔ خود ماژول دست نمی‌خورد. */
.dmms-main .dm-testimonials-section--brands.theme-dark {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-primary: var(--color-navy, #0A192F);
    --text-secondary: #4a5568;
    --accent-primary: var(--color-copper, #B87333);
    --accent-secondary: var(--color-gold, #F5D68F);
    --border-color: #e2e8f0;
    --card-shadow: 0 2px 10px rgba(10, 25, 47, .08);
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.dmms-main section.dm-testimonials-section--brands.theme-dark.section-meld::before,
.dmms-main section.dm-testimonials-section--brands.theme-dark.section-meld::after {
    display: none;
}

/* ═══════════ پروژه‌های موفق: دستهٔ کارت ═══════════ */

.dmms-proof {
    --spread: clamp(0, (var(--p) - .12) * 2.2, 1);
}

.dmms-proof__inner {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(28px, 5vw, 80px);
}

.dmms-stats {
    display: grid;
    gap: 12px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.dmms-stat {
    position: relative;
    overflow: hidden;
    padding: 16px 20px;
    border-radius: 18px;
    background-color: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-color);
    font-size: clamp(16px, 1.7vw, 19px);
    font-weight: 800;
    color: #ffffff;
    isolation: isolate;
}

.dmms-stat__bar {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(90deg, rgba(224, 169, 106, .25), rgba(245, 214, 143, .12));
    transform-origin: right;
    transform: scaleX(.9);
    transition: transform 1.2s var(--dmms-ease) .2s;
}

.dmms-stat.dmms-rv .dmms-stat__bar { transform: scaleX(0); }
.dmms-stat.dmms-rv.is-in .dmms-stat__bar { transform: scaleX(.9); }

.dmms-deck {
    position: relative;
    aspect-ratio: 4 / 3.2;
}

.dmms-deck__card {
    --k: 0;
    position: absolute;
    top: 12%;
    left: 18%;
    width: 64%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 18px;
    background-color: #ffffff;
    box-shadow: 0 30px 60px -26px rgba(0, 0, 0, .9), 0 0 0 4px #ffffff;
    transform: translate3d(calc(var(--k) * var(--spread) * 20%), calc(var(--k) * var(--k) * var(--spread) * 5%), 0) rotate(calc(var(--k) * (2deg + var(--spread) * 5deg)));
    transition: transform .35s var(--dmms-ease), box-shadow .3s ease;
}

.dmms-deck__card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.dmms-deck__card--1 { --k: -2; z-index: 1; }
.dmms-deck__card--2 { --k: -1; z-index: 2; }
.dmms-deck__card--3 { --k: 0; z-index: 5; }
.dmms-deck__card--4 { --k: 1; z-index: 4; }
.dmms-deck__card--5 { --k: 2; z-index: 3; }

.dmms-deck__card:hover,
.dmms-deck__card:focus-visible {
    z-index: 10;
    box-shadow: 0 40px 70px -24px rgba(0, 0, 0, .95), 0 0 0 4px var(--dmms-gold);
}

.dmms-deck__card:focus-visible {
    outline: none;
}

/* ── لایت‌باکس نتایج ── */
.dmms-lb {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: clamp(16px, 5vw, 70px);
}

.dmms-lb__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background-color: rgba(5, 12, 24, .92);
    cursor: zoom-out;
}

.dmms-lb__stage {
    position: relative;
    z-index: 1;
    margin: 0;
    max-width: min(1100px, 100%);
    animation: dmmsLbIn .35s var(--dmms-ease);
}

.dmms-lb__img {
    display: block;
    max-width: 100%;
    max-height: 80vh;
    border-radius: 16px;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9);
    touch-action: pan-y;
    user-select: none;
}

.dmms-lb__count {
    margin-top: 14px;
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
    text-align: center;
}

.dmms-lb__btn {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 14px;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .1);
    color: #ffffff;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease;
}

.dmms-lb__btn:hover,
.dmms-lb__btn:focus-visible {
    background-color: var(--dmms-gold);
    color: var(--dmms-navy);
    outline: none;
}

.dmms-lb__btn svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dmms-lb__btn--close { top: 18px; left: 18px; }
.dmms-lb__btn--prev { top: 50%; right: 18px; margin-top: -26px; }
.dmms-lb__btn--next { top: 50%; left: 18px; margin-top: -26px; }

/* قفل اسکرول پشت لایت‌باکس؛ کلاس را اسکریپت روی html می‌گذارد. */
.dmms-lb-open,
.dmms-lb-open body {
    overflow: hidden;
}

@keyframes dmmsLbIn {
    from { opacity: 0; transform: scale(.96); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
    .dmms-lb__btn--prev,
    .dmms-lb__btn--next {
        top: auto;
        bottom: 18px;
        margin-top: 0;
    }
}

/* ═══════════ مدت زمان: خط‌کش ═══════════ */

.dmms-ruler {
    --rp: .5;
}

.dmms-ruler__text {
    max-width: 920px;
}

.dmms-ruler__track {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 110px;
    margin-block-start: clamp(28px, 4vw, 50px);
    padding-block-end: 30px;
    border-block-end: 4px solid var(--border-color);
}

.dmms-ruler__band {
    position: absolute;
    inset-block: 0 -4px;
    inset-inline-start: 25%;
    width: 25%;
    border-radius: 14px 14px 0 0;
    background-image: linear-gradient(180deg, rgba(224, 169, 106, .16), rgba(224, 169, 106, .04));
    box-shadow: inset 0 -4px 0 var(--dmms-amber);
}

.dmms-ruler__fill {
    position: absolute;
    inset-block-end: -4px;
    inset-inline-start: 0;
    height: 4px;
    width: calc(var(--rp) * 100%);
    background-image: linear-gradient(270deg, var(--dmms-copper), var(--dmms-gold));
}

.dmms-ruler__tick {
    position: relative;
    width: 2px;
    height: 16px;
    background-color: #cfd6e2;
}

.dmms-ruler__tick--major {
    height: 34px;
    background-color: var(--text-secondary);
}

.dmms-ruler__tick b {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: 12px;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
    transform: translateX(-50%);
}

/* نشانگر ماه: یک برچسب با پیکان رو به خط‌کش که شمارهٔ ماه جاری را با اسکرول می‌شمارد. */
.dmms-ruler__rocket {
    position: absolute;
    inset-block-end: 48px;
    inset-inline-start: calc(var(--rp) * 100%);
    width: 0;
    height: 0;
}

.dmms-ruler__month {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    padding: 8px 16px;
    border-radius: 14px;
    background-image: linear-gradient(150deg, #fbe3a6, var(--dmms-copper));
    font-size: 15px;
    font-weight: 900;
    white-space: nowrap;
    color: var(--dmms-navy);
    box-shadow: 0 14px 30px -12px rgba(184, 115, 51, .7);
    transform: translateX(-50%);
}

.dmms-ruler__month::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -7px;
    border: 7px solid transparent;
    border-top-color: var(--dmms-copper);
}

@media (max-width: 600px) {
    .dmms-ruler__tick b {
        font-size: 11px;
    }

    .dmms-ruler__month {
        padding: 6px 12px;
        font-size: 13px;
    }
}

/* ═══════════ هزینه: ماشین‌حساب ═══════════ */

.dmms-calc__device {
    width: 100%;
    max-width: 330px;
    justify-self: center;
    padding: 22px;
    border-radius: 34px;
    background-image: linear-gradient(160deg, #13305a, #081427);
    box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .08);
    transform: rotate(calc(-8deg + var(--c) * 8deg));
}

.dmms-calc__screen {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    align-items: center;
    padding: 18px;
    margin-block-end: 18px;
    border-radius: 18px;
    background-color: #fdf1d8;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, .15);
}

.dmms-calc__screen i {
    grid-column: 1;
    height: 9px;
    border-radius: 5px;
    background-color: #8f521f;
    transform-origin: right;
    transform: scaleX(calc(.1 + var(--p) * .9));
    transition: transform .3s linear;
}

.dmms-calc__screen i:nth-child(1) { width: 90%; }
.dmms-calc__screen i:nth-child(2) { width: 60%; }
.dmms-calc__screen i:nth-child(3) { width: 75%; }
.dmms-calc__screen i:nth-child(4) { width: 45%; }

.dmms-calc__screen b {
    grid-column: 2;
    grid-row: 1 / span 4;
    font-size: 40px;
    color: #8f521f;
}

.dmms-calc__keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.dmms-calc__keys i {
    aspect-ratio: 1;
    border-radius: 14px;
    background-color: rgba(255, 255, 255, .07);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .3);
    animation: dmmsKey 4.8s ease-in-out infinite;
}

.dmms-calc__keys i:nth-child(4n) { background-color: rgba(245, 214, 143, .25); }
.dmms-calc__keys i:nth-child(3) { animation-delay: .6s; }
.dmms-calc__keys i:nth-child(6) { animation-delay: 1.2s; }
.dmms-calc__keys i:nth-child(9) { animation-delay: 1.8s; }
.dmms-calc__keys i:nth-child(14) { animation-delay: 2.4s; }
.dmms-calc__keys i:nth-child(16) { animation-delay: 3s; background-color: var(--dmms-amber); }
.dmms-calc__keys i:not(:nth-child(3)):not(:nth-child(6)):not(:nth-child(9)):not(:nth-child(14)):not(:nth-child(16)) { animation: none; }

/* ═══════════ رقبا: صندلی انحصاری ═══════════ */

.dmms-seats {
    --lock: clamp(0, (var(--p) - .35) * 3, 1);
}

.dmms-seats__hall {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    max-width: 420px;
    justify-self: center;
    padding: 26px;
    border-radius: 30px;
    background-color: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-color);
}

.dmms-seat {
    position: relative;
    aspect-ratio: 1 / 1.1;
    border-radius: 16px 16px 8px 8px;
    background-color: #dde3ec;
    box-shadow: inset 0 -8px 0 rgba(10, 25, 47, .08);
    opacity: calc(1 - var(--lock) * .55);
    transition: opacity .3s linear;
}

.dmms-seat::after {
    content: "";
    position: absolute;
    inset: 38%;
    background-image: linear-gradient(45deg, transparent 44%, #9aa6b8 44%, #9aa6b8 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, #9aa6b8 44%, #9aa6b8 56%, transparent 56%);
    opacity: var(--lock);
}

.dmms-seat--you {
    display: grid;
    place-items: center;
    padding: 22%;
    background-image: linear-gradient(150deg, #fbe3a6, var(--dmms-copper));
    color: var(--dmms-navy);
    opacity: 1;
    box-shadow: 0 16px 30px -12px rgba(184, 115, 51, .7), 0 0 0 calc(var(--lock) * 6px) rgba(245, 214, 143, .35);
    transform: scale(calc(1 + var(--lock) * .12));
}

.dmms-seat--you::after {
    display: none;
}

.dmms-seat--you .dmms-ico path {
    transform: translateY(calc((1 - var(--lock)) * -3px));
    transition: transform .3s linear;
}

/* ═══════════ سه پرسش: ردیف‌های عدد غول‌پیکر ═══════════
   ⚠ هر ردیف --p خودش را دارد (از اسکریپت صحنه‌ها). --f = میزان «پر شدن» ردیف وقتی به مرکز
   دید می‌رسد. پیش‌فرض --p=۱ یعنی بدون اسکریپت همه‌چیز پر و کامل است.
   ⚠ هیچ ترنسفرمی روی متن نیست؛ جلوه‌ها فقط clip-path، مقیاس خط و شفافیت‌اند. */
.dmms-trio__list {
    position: relative;
    display: flex;
    flex-direction: column;
}

.dmms-trio__rail {
    position: absolute;
    inset-block: 40px;
    inset-inline-start: calc(clamp(110px, 14vw, 210px) / 2);
    width: 2px;
    background-color: rgba(255, 255, 255, .08);
}

.dmms-trio__rail-fill {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, var(--dmms-gold), var(--dmms-copper));
    transform-origin: top;
    transform: scaleY(clamp(0, (var(--p) - .2) * 1.8, 1));
}

.dmms-row {
    --f: clamp(0, (var(--p) - .22) * 2.6, 1);
    position: relative;
    display: grid;
    grid-template-columns: clamp(110px, 14vw, 210px) minmax(0, .9fr) minmax(0, 1.3fr);
    align-items: center;
    gap: clamp(18px, 3vw, 50px);
    padding-block: clamp(28px, 4vw, 54px);
    border-block-start: 1px solid rgba(255, 255, 255, .07);
    transition: background-color .4s ease;
}

.dmms-row:first-of-type {
    border-block-start: 0;
}

.dmms-row::before {
    content: "";
    position: absolute;
    inset: 0 -3vw;
    z-index: -1;
    border-radius: 28px;
    background-image: radial-gradient(ellipse at 15% 50%, rgba(245, 214, 143, .08), transparent 60%);
    opacity: 0;
    transition: opacity .4s ease;
}

.dmms-row:hover::before {
    opacity: 1;
}

/* عدد توخالی، با یک کپی توپر طلایی رویش که از پایین به بالا بریده‌شدنش کم می‌شود. */
.dmms-row__num {
    position: relative;
    z-index: 1;
    justify-self: center;
    font-size: clamp(80px, 11vw, 170px);
    font-weight: 900;
    line-height: 1;
    color: var(--bg-primary);
    -webkit-text-stroke: 2px rgba(245, 214, 143, .45);
}

.dmms-row__num::after {
    content: attr(data-num);
    position: absolute;
    inset: 0;
    background-image: linear-gradient(170deg, #fbe3a6, var(--dmms-copper));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 0;
    clip-path: inset(calc((1 - var(--f)) * 100%) 0 0 0);
}

.dmms-row__title {
    margin: 0 0 16px;
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1.7;
    color: var(--text-primary);
    text-align: start;
}

.dmms-row__line {
    display: block;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background-image: linear-gradient(270deg, var(--dmms-gold), rgba(184, 115, 51, 0));
    transform-origin: right;
    transform: scaleX(var(--f));
}

.dmms-row__text {
    margin: 0;
    font-size: 15px;
    line-height: 2.15;
    color: var(--text-secondary);
    text-align: justify;
    opacity: calc(.35 + var(--f) * .65);
}

/* ═══════════ کلمات کلیدی: ابر ═══════════ */

.dmms-cloud {
    overflow: hidden;
}

.dmms-cloud__chips {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.dmms-chip {
    position: absolute;
    display: block;
    height: 38px;
    padding: 0 16px;
    border-radius: 20px;
    background-color: #ffffff;
    box-shadow: 0 16px 30px -18px rgba(10, 25, 47, .45), inset 0 0 0 1px var(--border-color);
    animation: dmmsFloat 7s ease-in-out infinite;
}

.dmms-chip b {
    display: block;
    width: 60px;
    height: 8px;
    margin-top: 15px;
    border-radius: 4px;
    background-image: linear-gradient(90deg, var(--dmms-copper), var(--dmms-gold));
}

.dmms-chip--1 { top: 10%; right: 6%; translate: calc(var(--c) * 40px) 0; }
.dmms-chip--2 { top: 26%; left: 5%; translate: calc(var(--c) * -50px) 0; animation-delay: -2s; }
.dmms-chip--3 { top: 6%; left: 30%; translate: 0 calc(var(--c) * 30px); animation-delay: -4s; }
.dmms-chip--4 { bottom: 40%; right: 3%; translate: calc(var(--c) * 30px) 0; animation-delay: -1s; }
.dmms-chip--5 { bottom: 12%; left: 8%; translate: calc(var(--c) * -30px) 0; animation-delay: -3s; }
.dmms-chip--6 { bottom: 8%; right: 30%; translate: 0 calc(var(--c) * -30px); animation-delay: -5s; }

.dmms-chip--2 b, .dmms-chip--5 b { width: 40px; background-image: linear-gradient(90deg, var(--dmms-amber), #fbe3a6); }

.dmms-cloud__core {
    position: relative;
    max-width: 880px;
    margin: 0 auto clamp(30px, 4vw, 54px);
    padding: clamp(24px, 3vw, 40px);
    border-radius: 30px;
    background-color: rgba(255, 255, 255, .9);
}

.dmms-cloud__pair {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.dmms-qa {
    position: relative;
    padding: clamp(22px, 2.6vw, 34px);
    padding-block-start: 44px;
    border-radius: 26px;
    background-color: #ffffff;
    box-shadow: inset 0 0 0 1px var(--border-color), 0 30px 60px -46px rgba(10, 25, 47, .6);
}

.dmms-qa__icon {
    position: absolute;
    inset-block-start: -26px;
    inset-inline-start: 26px;
    width: 54px;
    height: 54px;
    padding: 13px;
    border-radius: 18px;
    background-color: var(--dmms-navy);
    color: var(--dmms-gold);
}

.dmms-qa--g .dmms-qa__icon {
    background-color: var(--dmms-amber);
    color: var(--dmms-navy);
}

.dmms-qa__title {
    margin: 0 0 10px;
    font-size: clamp(17px, 1.7vw, 20px);
    font-weight: 900;
    line-height: 1.8;
    color: var(--text-primary);
    text-align: start;
}

.dmms-qa__text {
    margin: 0;
    font-size: 14.5px;
    line-height: 2.1;
    color: var(--text-secondary);
    text-align: justify;
}

/* ═══════════ سوالات متداول ═══════════ */

.dmms-faq.faq-section {
    padding-block: var(--dmms-pad-wave);
}

/* ═══════════ جعبهٔ متن سئو (مقادیر ثابت جعبه‌های سئوی قالب‌های کدی) ═══════════ */

.dmms-read__box {
    position: relative;
    padding: clamp(22px, 2.6vw, 34px);
    border: 1px solid var(--border-color);
    border-radius: 26px;
    background-color: var(--bg-secondary);
}

.dmms-read__box::after {
    content: "";
    position: absolute;
    inset-inline: 1px;
    inset-block-end: 1px;
    height: 70px;
    border-radius: 0 0 26px 26px;
    background-image: linear-gradient(to top, var(--bg-secondary), transparent);
    pointer-events: none;
}

.dmms-read__body {
    max-height: clamp(420px, 58vh, 620px);
    overflow-y: auto;
    padding-inline-end: 16px;
    padding-block-end: 40px;
}

.dmms-read__body:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 6px;
}

.dmms-read__body::-webkit-scrollbar {
    width: 8px;
}

.dmms-read__body::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: rgba(10, 25, 47, .22);
}

.dmms-read__body > :first-child {
    margin-block-start: 0;
}

.dmms-read__body h2 {
    margin: 30px 0 10px;
    font-size: clamp(18px, 1.8vw, 23px);
    line-height: 1.8;
    color: var(--text-primary);
    text-align: start;
}

.dmms-read__body p,
.dmms-read__body li {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 2.1;
    color: var(--text-secondary);
    text-align: start;
}

.dmms-read__body li {
    margin-block-end: 6px;
}

.dmms-read__body ul {
    margin: 0 0 14px;
    padding-inline-start: 20px;
}

.dmms-read__body strong {
    color: var(--text-primary);
}

/* ═══════════ کی‌فریم‌ها ═══════════ */

@keyframes dmmsGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dmmsRipple { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes dmmsFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes dmmsKey { 0%, 12%, 100% { background-color: rgba(255, 255, 255, .07); } 6% { background-color: var(--dmms-gold); } }

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

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

    .dmms-stair:nth-child(n) {
        margin-block-start: 0;
    }

    .dmms-stairs__arrow {
        display: none;
    }
}

@media (max-width: 992px) {
    .dmms-hero__inner,
    .dmms-proof__inner,
    .dmms-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .dmms-hero__visual {
        width: 100%;
        max-width: 540px;
        justify-self: center;
    }

    /* ⚠ قاب نقشه روی دسکتاپ عمداً به یک لبه چسبیده؛ در ستون تکی متقارن می‌شود. */
    .dmms-map__board {
        inset: 0 6% 8% 6%;
    }

    .dmms-phone {
        inset-inline-end: auto;
        inset-inline-start: 0;
        width: 42%;
    }

    .dmms-map__rank {
        inset-inline-start: auto;
        inset-inline-end: 0;
    }

    .dmms-split--rev > :last-child {
        order: 0;
    }

    .dmms-panel__grid,
    .dmms-cloud__pair {
        grid-template-columns: minmax(0, 1fr);
    }

    .dmms-panel__hub {
        display: none;
    }

    /* ردیف‌ها روی تبلت و موبایل: عدد کنار تیتر، متن زیر هر دو؛ ریل کنار عددها می‌ماند. */
    .dmms-row {
        grid-template-columns: clamp(70px, 18vw, 110px) minmax(0, 1fr);
        grid-template-areas: "num head" "text text";
        row-gap: 14px;
    }

    .dmms-row__num {
        grid-area: num;
        font-size: clamp(56px, 14vw, 90px);
    }

    .dmms-row__head {
        grid-area: head;
    }

    .dmms-row__text {
        grid-area: text;
    }

    /* ⚠ در ستون تکی متن تمام‌عرض است و ریل عمودی از رویش رد می‌شد؛ پنهان. */
    .dmms-trio__rail {
        display: none;
    }

    .dmms-deck {
        max-width: 520px;
        width: 100%;
        justify-self: center;
    }

    .dmms-calc__device {
        max-width: 280px;
    }

    .dmms-chip--3,
    .dmms-chip--6 {
        display: none;
    }
}

@media (max-width: 600px) {
    .dmms-stairs__list {
        grid-template-columns: minmax(0, 1fr);
    }

    .dmms-phone {
        padding: 22px 8px 12px;
    }

    .dmms-phone__card em {
        display: none;
    }

    .dmms-map__rank b {
        font-size: 26px;
    }

    .dmms-seats__hall {
        max-width: 300px;
        padding: 18px;
        gap: 10px;
    }

    .dmms-cloud__chips {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dmms-main *,
    .dmms-main *::before,
    .dmms-main *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}