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

[hidden] {
    display: none !important;
}

.dmsa-main {
    --dmsa-pad: clamp(56px, 7vw, 110px);
    --dmsa-pad-wave: calc(clamp(50px, 8vw, 120px) + clamp(40px, 5vw, 70px));
    --dmsa-gold: #f5d68f;
    --dmsa-copper: #b87333;
    --dmsa-navy: #0a192f;
    --dmsa-ok: #34c38f;
    --dmsa-warn: #f5b945;
    --dmsa-bad: #ef3e63;
    --dmsa-ease: cubic-bezier(.22, 1, .36, 1);
    overflow: clip;
}

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

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

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

/* ═══════════ پیوندها ═══════════
   ⚠ فقط پیوندهایی که همین قالب چاپ می‌کند، تک‌به‌تک (الگوی قالب مشهد)؛ قاعدهٔ صورتی سطح
   سایت با important است. پیوند تازه = افزودن به این فهرست. */
.dmsa-crumbs__link,
.dmsa-crumbs__link:visited,
.dmsa-hero__lead a,
.dmsa-hero__lead a:visited,
.dmsa-p a,
.dmsa-p a:visited,
.dmsa-step__text a,
.dmsa-step__text a:visited,
.dmsa-step__li a,
.dmsa-step__li a:visited,
.dmsa-orbit__link,
.dmsa-orbit__link:visited,
.dmsa-layers__ltext a,
.dmsa-layers__ltext a:visited,
.dmsa-bento__text a,
.dmsa-bento__text a:visited,
.dmsa-bento__list a,
.dmsa-bento__list a:visited,
.dmsa-check__text a,
.dmsa-check__text a:visited,
.dmsa-read__body a,
.dmsa-read__body a:visited {
    color: var(--accent-primary) !important;
}

.dmsa-hero__lead a,
.dmsa-p a,
.dmsa-step__text a,
.dmsa-step__li a,
.dmsa-bento__text a,
.dmsa-bento__list a,
.dmsa-check__text a {
    font-weight: 700;
    text-decoration: none;
    border-block-end: 1px dashed currentColor;
}

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

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

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

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

.dmsa-p strong {
    color: var(--text-primary);
}

.dmsa-head {
    max-width: 920px;
    margin-block-end: clamp(28px, 4vw, 54px);
}

.dmsa-head--center {
    margin-inline: auto;
    text-align: center;
}

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

/* نشان کوچک بالای تیترها؛ جای آیکون جعبه‌های منبع. */
.dmsa-badge-ico {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 11px;
    margin-block-end: 12px;
    border-radius: 14px 14px 14px 4px;
    background-image: linear-gradient(150deg, rgba(245, 214, 143, .3), rgba(184, 115, 51, .14));
    box-shadow: inset 0 0 0 1px rgba(184, 115, 51, .35);
    color: var(--accent-primary);
}

.dmsa-rv {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
    transition: opacity .8s var(--dmsa-ease), transform .8s var(--dmsa-ease);
    transition-delay: calc(var(--dmsa-i, 0) * 80ms);
}

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

/* ═══════════ هیرو: اسکنر ═══════════ */

.dmsa-hero {
    overflow: hidden;
}

/* ⚠ موج پایین مشترک سایت (section-meld) — بالای هیرو چیزی نیست، پس موج بالا خاموش است.
   فاصله‌ها به دستور کارفرما یکسان با بقیهٔ هیروهای کدی (۸۵–۱۹۰ بالا، ۴۰–۷۰ پایین).
   ⚠ این هیرو موج پایین دارد (تا ۱۲۰ پیکسل)؛ اگر پایین موکاپ زیر موج رفت، فاصلهٔ پایین همین‌جا زیاد شود. */
.dmsa-hero.section-meld {
    padding-block: clamp(85px, 13vw, 190px) clamp(40px, 5vw, 70px);
}

.dmsa-hero.section-meld::before {
    display: none;
}

/* ⚠ نورها فقط در نیمهٔ بالایی؛ هیچ درخششی نباید به لبهٔ پایین هیرو برسد و خط مرزی بسازد. */
.dmsa-hero__beams {
    position: absolute;
    inset: 0 0 45%;
    background-image:
        radial-gradient(ellipse 45% 70% at 80% 0%, rgba(52, 195, 143, .12), transparent 100%),
        radial-gradient(ellipse 40% 60% at 15% 10%, rgba(245, 214, 143, .10), transparent 100%);
    pointer-events: none;
}

.dmsa-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);
}

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

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

.dmsa-hero__pulse {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    padding: 13px;
    margin-block-end: 10px;
    border-radius: 50%;
    background-color: rgba(52, 195, 143, .14);
    color: var(--dmsa-ok);
}

.dmsa-hero__pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(52, 195, 143, .5);
    animation: dmsaRipple 2.2s ease-out infinite;
}

.dmsa-hero__title {
    margin: 0 0 18px;
    font-size: clamp(40px, 6.4vw, 88px);
    font-weight: 900;
    line-height: 1.25;
    color: #ffffff;
    text-align: start;
}

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

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

/* ── پخش‌کنندهٔ صوتی ── */
.dmsa-audio {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 460px;
    margin-block-end: 26px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 60px;
    background-color: rgba(255, 255, 255, .03);
}

.dmsa-audio__native {
    width: 100%;
    height: 40px;
}

.dmsa-audio.is-custom .dmsa-audio__native,
.dmsa-audio:not(.is-custom) .dmsa-audio__wave {
    display: none;
}

.dmsa-audio__btn {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 13px;
    border: 0;
    border-radius: 50%;
    background-image: linear-gradient(150deg, #fbe3a6, var(--dmsa-copper));
    color: var(--dmsa-navy);
    cursor: pointer;
}

.dmsa-audio__btn .dmsa-ico {
    fill: currentColor;
}

.dmsa-audio__btn:focus-visible {
    outline: 2px solid var(--dmsa-gold);
    outline-offset: 3px;
}

.dmsa-audio__pause,
.dmsa-audio.is-playing .dmsa-audio__play {
    display: none;
}

.dmsa-audio.is-playing .dmsa-audio__pause {
    display: block;
}

.dmsa-audio__play,
.dmsa-audio__pause {
    width: 100%;
    height: 100%;
}

.dmsa-audio__wave {
    --ap: 0;
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    gap: 3px;
    height: 34px;
}

.dmsa-audio__wave i {
    flex: 1;
    height: 30%;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, .25);
    transform-origin: center;
}

.dmsa-audio__wave i:nth-child(3n) { height: 70%; }
.dmsa-audio__wave i:nth-child(4n+1) { height: 50%; }
.dmsa-audio__wave i:nth-child(5n+2) { height: 90%; }
.dmsa-audio__wave i:nth-child(7n) { height: 40%; }

/* پیشرفت پخش با یک لایهٔ طلایی روی موج‌ها. */
.dmsa-audio__wave::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: calc(var(--ap) * 100%);
    background-image: linear-gradient(90deg, rgba(245, 214, 143, .55), rgba(245, 214, 143, .25));
    mix-blend-mode: screen;
    border-radius: 4px;
    pointer-events: none;
}

.dmsa-audio.is-playing .dmsa-audio__wave i {
    background-color: var(--dmsa-gold);
    animation: dmsaEq 1s ease-in-out infinite;
}

.dmsa-audio.is-playing .dmsa-audio__wave i:nth-child(2n) { animation-delay: -.3s; }
.dmsa-audio.is-playing .dmsa-audio__wave i:nth-child(3n) { animation-delay: -.6s; }

.dmsa-audio__time {
    flex: 0 0 auto;
    min-width: 42px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
}

/* ── اسکنر ── */
.dmsa-hero__figure {
    margin: 0;
    overflow: hidden;
    border-radius: 28px;
}

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

.dmsa-scanner {
    position: relative;
    aspect-ratio: 1 / .92;
}

/* ⚠ هیرو در لپ‌تاپ در یک نما: عرض موکاپ از بودجهٔ ارتفاع پنجره (منهای فاصلهٔ بالا و پایین
   هیرو) و نسبت ابعادش ساخته می‌شود؛ نه از پایین می‌زند، نه در مانیتور بزرگ ریز می‌شود. */
@media (min-width: 993px) {
    .dmsa-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) / .92));
        justify-self: center;
    }
}

@media (min-width: 993px) and (max-height: 900px) {
    .dmsa-hero__pulse {
        width: 44px;
        height: 44px;
        padding: 11px;
        margin-block-end: 6px;
    }

    .dmsa-hero__title {
        margin-bottom: 12px;
        font-size: clamp(34px, 4.6vw, 70px);
    }

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

    .dmsa-audio {
        margin-block-end: 18px;
        padding-block: 6px;
    }
}

.dmsa-scanner__site {
    position: absolute;
    /* ⚠ دایرهٔ امتیاز از راست بیرون می‌زند؛ فاصلهٔ راست بیشتر است تا کل ترکیب وسط کادر باشد. */
    inset: 4% 8% 14% 4%;
    overflow: hidden;
    border-radius: 22px;
    background-color: #0f2440;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .95), inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.dmsa-scanner__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    background-color: rgba(255, 255, 255, .04);
}

.dmsa-scanner__bar i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .18);
}

.dmsa-scanner__bar b {
    flex: 1;
    height: 16px;
    margin-inline-start: 10px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, .07);
}

.dmsa-scanner__page {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    padding: 18px;
}

.dmsa-scanner__hero {
    height: 26%;
    border-radius: 12px;
    background-image: linear-gradient(120deg, rgba(245, 214, 143, .3), rgba(184, 115, 51, .1));
}

.dmsa-scanner__row {
    height: 10px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, .12);
}

.dmsa-scanner__row--s {
    width: 60%;
}

.dmsa-scanner__cols {
    display: flex;
    gap: 10px;
    height: 20%;
}

.dmsa-scanner__cols i {
    flex: 1;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, .06);
}

/* خط لیزر: هم به‌صورت حلقه‌ای رفت‌وبرگشت دارد، هم با اسکرولِ هیرو جلوتر می‌رود. */
.dmsa-scanner__laser {
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 60px;
    background-image: linear-gradient(180deg, transparent, rgba(52, 195, 143, .22) 80%, rgba(52, 195, 143, .9) 98%, transparent);
    animation: dmsaScan 3.4s ease-in-out infinite alternate;
    pointer-events: none;
}

.dmsa-scanner__pin {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .08);
    animation: dmsaPop 3.4s ease-in-out infinite;
}

.dmsa-scanner__pin--ok { top: 14%; left: 22%; background-color: var(--dmsa-ok); }
.dmsa-scanner__pin--warn { top: 40%; left: 70%; background-color: var(--dmsa-warn); animation-delay: .7s; }
.dmsa-scanner__pin--bad { top: 62%; left: 30%; background-color: var(--dmsa-bad); animation-delay: 1.4s; }
.dmsa-scanner__pin--ok2 { top: 78%; left: 62%; background-color: var(--dmsa-ok); animation-delay: 2.1s; }

.dmsa-gauge {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    display: grid;
    place-items: center;
    width: 36%;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .9);
    transform: translate3d(0, calc((1 - var(--p)) * 30px), 0);
}

.dmsa-gauge svg {
    position: absolute;
    inset: 8%;
    width: 84%;
    transform: rotate(-90deg);
}

.dmsa-gauge__track,
.dmsa-gauge__fill {
    fill: none;
    stroke-width: 10;
}

.dmsa-gauge__track {
    stroke: #eef1f6;
}

.dmsa-gauge__fill {
    stroke: var(--dmsa-ok);
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - min(1, var(--p) * 1.3) * 100);
    transition: stroke-dashoffset .3s linear;
}

.dmsa-gauge__num {
    position: relative;
    font-size: clamp(22px, 2.6vw, 34px);
    font-weight: 900;
    color: var(--dmsa-navy);
}

.dmsa-gauge__num i {
    font-style: normal;
    font-size: .45em;
    color: #9aa6b8;
}

.dmsa-scanner__log {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 62%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 42%;
    margin: 0;
    padding: 12px;
    list-style: none;
    border-radius: 16px;
    background-color: #ffffff;
    box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9);
    transform: translate3d(calc(var(--c) * 20px), 0, 0);
}

.dmsa-scanner__log-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dmsa-scanner__log-item i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dmsa-scanner__log-item b {
    flex: 1;
    height: 7px;
    border-radius: 4px;
    background-color: #dde3ec;
}

.dmsa-scanner__log-item--ok i { background-color: var(--dmsa-ok); }
.dmsa-scanner__log-item--warn i { background-color: var(--dmsa-warn); }
.dmsa-scanner__log-item--bad i { background-color: var(--dmsa-bad); }

/* ═══════════ چیست: داشبورد ═══════════ */

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

.dmsa-what__cta {
    margin-block-start: 8px;
}

.dmsa-dash {
    position: relative;
    aspect-ratio: 1 / .9;
}

.dmsa-dash__panel {
    position: absolute;
    border-radius: 20px;
    background-color: #ffffff;
    box-shadow: 0 30px 60px -36px rgba(10, 25, 47, .55), inset 0 0 0 1px #e7ebf2;
    transition: transform .4s var(--dmsa-ease);
}

.dmsa-dash__panel--main {
    inset: 8% 0 26% 10%;
    display: flex;
    flex-direction: column;
    padding: 18px;
}

.dmsa-dash__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-block-end: 10px;
}

.dmsa-dash__head i {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background-color: rgba(184, 115, 51, .2);
}

.dmsa-dash__head b {
    width: 40%;
    height: 9px;
    border-radius: 5px;
    background-color: #dde3ec;
}

.dmsa-dash__chart {
    flex: 1;
    width: 100%;
    overflow: visible;
}

.dmsa-dash__area {
    fill: rgba(184, 115, 51, .12);
}

.dmsa-dash__line {
    fill: none;
    stroke: var(--dmsa-copper);
    stroke-width: 3;
    stroke-dasharray: 1;
    stroke-dashoffset: calc(1 - var(--p));
    vector-effect: non-scaling-stroke;
}

.dmsa-dash__bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 44px;
    margin-block-start: 10px;
}

.dmsa-dash__bars i {
    flex: 1;
    border-radius: 4px 4px 1px 1px;
    background-color: var(--dmsa-navy);
    opacity: .85;
    transform-origin: bottom;
    transform: scaleY(calc(.2 + var(--p) * .8));
}

.dmsa-dash__bars i:nth-child(1) { height: 40%; }
.dmsa-dash__bars i:nth-child(2) { height: 65%; }
.dmsa-dash__bars i:nth-child(3) { height: 50%; }
.dmsa-dash__bars i:nth-child(4) { height: 80%; background-color: var(--dmsa-copper); }
.dmsa-dash__bars i:nth-child(5) { height: 60%; }
.dmsa-dash__bars i:nth-child(6) { height: 90%; }
.dmsa-dash__bars i:nth-child(7) { height: 100%; background-color: var(--dmsa-copper); }

.dmsa-dash__panel--donut {
    inset-block-end: 2%;
    inset-inline-start: 0;
    width: 34%;
    aspect-ratio: 1;
    padding: 16px;
}

.dmsa-dash__panel--donut svg {
    width: 100%;
    transform: rotate(-90deg);
}

.dmsa-dash__ring,
.dmsa-dash__seg {
    fill: none;
    stroke-width: 6;
}

.dmsa-dash__ring {
    stroke: #eef1f6;
}

.dmsa-dash__seg--a {
    stroke: var(--dmsa-copper);
    stroke-dasharray: calc(var(--p) * 62) 100;
}

.dmsa-dash__seg--b {
    stroke: var(--dmsa-navy);
    stroke-dasharray: 0 calc(var(--p) * 62) calc(var(--p) * 24) 100;
}

.dmsa-dash__panel--kpi {
    inset-block-start: 0;
    inset-inline-end: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px;
    width: 30%;
    padding: 14px 16px;
    background-color: var(--dmsa-navy);
    color: var(--dmsa-gold);
    font-size: 30px;
    font-weight: 900;
}

.dmsa-dash__panel--kpi i {
    font-style: normal;
    font-size: 18px;
}

.dmsa-dash__panel--kpi span {
    flex-basis: 100%;
    height: 6px;
    border-radius: 3px;
    background-image: linear-gradient(90deg, var(--dmsa-ok) 70%, rgba(255, 255, 255, .15) 70%);
}

.dmsa-dash__panel--users {
    inset-block-end: 6%;
    inset-inline-end: 4%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 38%;
    padding: 14px;
    color: var(--dmsa-copper);
}

.dmsa-dash__panel--users .dmsa-ico {
    width: 26px;
    height: 26px;
}

.dmsa-dash__panel--users span {
    height: 7px;
    border-radius: 4px;
    background-color: #dde3ec;
}

.dmsa-dash__panel--users span:last-child {
    width: 60%;
}

.dmsa-dash__cursor {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 22px;
    height: 22px;
    background-color: var(--dmsa-navy);
    clip-path: polygon(0 0, 100% 60%, 55% 62%, 75% 100%, 60% 100%, 42% 68%, 0 90%);
    animation: dmsaCursor 6s ease-in-out infinite;
}

@media (min-width: 993px) {
    .dmsa-dash {
        perspective: 1200px;
    }

    .dmsa-dash__panel--main { transform: rotateY(calc(var(--c) * -12deg)) rotateX(calc(var(--c) * 6deg)); }
    .dmsa-dash__panel--donut { transform: translate3d(calc(var(--c) * -30px), calc(var(--c) * 40px), 40px); }
    .dmsa-dash__panel--kpi { transform: translate3d(calc(var(--c) * 30px), calc(var(--c) * -50px), 60px); }
    .dmsa-dash__panel--users { transform: translate3d(calc(var(--c) * 20px), calc(var(--c) * 30px), 30px); }
}

/* ═══════════ چرا مهمه: کندو ═══════════ */

.dmsa-hive {
    --hp: clamp(0, (var(--p) - .08) * 2.6, 1);
}

.dmsa-hive__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
    margin: clamp(26px, 4vw, 50px) 0 0;
    padding: 0;
    list-style: none;
}

.dmsa-cell {
    --sx: 0px;
    --sy: 0px;
    --rot: 0deg;
    position: relative;
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 34px 26px 30px;
    text-align: center;
    isolation: isolate;
    transition: transform .25s linear;
}

.dmsa-cell--4 { grid-column: 2 / span 2; }

/* شش‌ضلعیِ کشیده به‌عنوان زمینه؛ متن روی آن است و خودش برش نمی‌خورد. */
.dmsa-cell__hex {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--bg-secondary);
    background-image: linear-gradient(160deg, rgba(245, 214, 143, .08), transparent 60%);
    clip-path: polygon(12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%, 0 50%);
    transition: background-color .45s ease;
}

.dmsa-cell__hex::after {
    content: "";
    position: absolute;
    inset: 2px;
    background-color: var(--bg-primary);
    clip-path: inherit;
    opacity: .6;
}

.dmsa-cell.is-on .dmsa-cell__hex {
    background-color: var(--dmsa-gold);
}

.dmsa-cell.is-on .dmsa-cell__hex::after {
    opacity: .92;
}

.dmsa-cell__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    padding: 13px;
    margin-block-end: 12px;
    background-image: linear-gradient(150deg, #fbe3a6, var(--dmsa-copper));
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    color: var(--dmsa-navy);
    transition: transform .5s var(--dmsa-ease);
}

.dmsa-cell.is-on .dmsa-cell__icon {
    transform: rotate(60deg);
}

.dmsa-cell.is-on .dmsa-cell__icon .dmsa-ico {
    transform: rotate(-60deg);
}

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

.dmsa-cell__text {
    margin: 0;
    padding-inline: 4%;
    font-size: 14px;
    line-height: 2;
    color: var(--text-secondary);
}

@media (min-width: 993px) {
    .dmsa-cell {
        transform: translate3d(calc((1 - var(--hp)) * var(--sx)), calc((1 - var(--hp)) * var(--sy)), 0) rotate(calc((1 - var(--hp)) * var(--rot)));
    }

    .dmsa-cell--1 { --sx: 160px; --sy: -90px; --rot: -10deg; }
    .dmsa-cell--2 { --sx: 0px; --sy: -150px; --rot: 6deg; }
    .dmsa-cell--3 { --sx: -160px; --sy: -90px; --rot: 12deg; }
    .dmsa-cell--4 { --sx: 120px; --sy: 120px; --rot: 8deg; }
    .dmsa-cell--5 { --sx: -120px; --sy: 120px; --rot: -8deg; }
}

/* ═══════════ مراحل: نوار قلب ═══════════ */

.dmsa-ecg {
    --ep: 1;
}

.dmsa-ecg__body {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: clamp(10px, 2vw, 26px);
}

.dmsa-ecg__rail {
    position: relative;
}

.dmsa-ecg__track,
.dmsa-ecg__fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    width: 3px;
    margin-inline-start: -1.5px;
    border-radius: 2px;
}

.dmsa-ecg__track {
    background-image: repeating-linear-gradient(180deg, var(--border-color) 0 8px, transparent 8px 14px);
}

.dmsa-ecg__fill {
    background-image: linear-gradient(180deg, var(--dmsa-copper), var(--dmsa-gold));
    transform: scaleY(var(--ep));
    transform-origin: top;
}

.dmsa-ecg__head {
    position: absolute;
    inset-inline-start: 50%;
    top: calc(var(--ep) * 100%);
    width: 18px;
    height: 18px;
    margin: -9px;
    border-radius: 50%;
    background-color: var(--dmsa-bad);
    box-shadow: 0 0 0 6px rgba(239, 62, 99, .18);
    animation: dmsaHeart 1s ease-in-out infinite;
}

.dmsa-ecg__list {
    display: flex;
    flex-direction: column;
    gap: clamp(22px, 3vw, 36px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmsa-step {
    position: relative;
}

.dmsa-step__beat {
    position: absolute;
    inset-inline-start: calc(-1 * (64px + clamp(10px, 2vw, 26px)));
    top: 28px;
    display: grid;
    place-items: center;
    width: 64px;
}

.dmsa-step__beat b {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 0 0 2px var(--border-color);
    font-size: 17px;
    font-weight: 900;
    color: var(--text-secondary);
    transition: background-color .4s ease, color .4s ease, box-shadow .4s ease;
}

.dmsa-step.is-on .dmsa-step__beat b {
    background-color: var(--dmsa-navy);
    box-shadow: 0 0 0 2px var(--dmsa-copper), 0 10px 20px -8px rgba(184, 115, 51, .6);
    color: var(--dmsa-gold);
}

.dmsa-step__card {
    position: relative;
    padding: clamp(20px, 2.6vw, 32px);
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    background-color: #ffffff;
    box-shadow: 0 24px 50px -40px rgba(10, 25, 47, .6);
    transition: border-color .4s ease, box-shadow .4s ease;
}

/* ضربان روی لبهٔ بالای کارت فعال کشیده می‌شود. */
.dmsa-step__card::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30' preserveAspectRatio='none'%3E%3Cpath d='M0 15h70l8-12 10 24 9-18 7 6h96' fill='none' stroke='%23b87333' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1s var(--dmsa-ease), opacity .3s ease;
}

.dmsa-step.is-on .dmsa-step__card {
    border-color: rgba(184, 115, 51, .45);
    box-shadow: 0 30px 60px -36px rgba(184, 115, 51, .5);
}

.dmsa-step.is-on .dmsa-step__card::before {
    opacity: .7;
    clip-path: inset(0 0 0 0);
}

.dmsa-step__top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-block-end: 10px;
}

.dmsa-step__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 13px;
    background-color: rgba(184, 115, 51, .12);
    color: var(--dmsa-copper);
}

.dmsa-step__title {
    margin: 0;
    font-size: clamp(17px, 1.7vw, 20px);
    font-weight: 800;
    color: var(--text-primary);
}

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

.dmsa-step__text strong {
    color: var(--text-primary);
}

.dmsa-step__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.dmsa-step__li {
    position: relative;
    padding-inline-start: 26px;
    font-size: 14.5px;
    line-height: 2;
    color: var(--text-secondary);
}

.dmsa-step__li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .55em;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--dmsa-ok);
    box-shadow: inset 0 0 0 4px #ffffff, 0 0 0 1px var(--dmsa-ok);
}

.dmsa-step__li strong {
    color: var(--text-primary);
}

.dmsa-step__list--chips {
    flex-direction: row;
    flex-wrap: wrap;
}

.dmsa-step__list--chips .dmsa-step__li {
    padding: 7px 14px 7px 16px;
    padding-inline-start: 30px;
    border-radius: 40px;
    background-color: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-color);
    font-size: 14px;
    line-height: 1.7;
    transition: box-shadow .3s ease;
}

.dmsa-step__list--chips .dmsa-step__li::before {
    inset-inline-start: 10px;
    top: 50%;
    margin-block-start: -7px;
}

.dmsa-step__list--chips .dmsa-step__li:hover {
    box-shadow: inset 0 0 0 1px var(--dmsa-copper);
}

/* ═══════════ چرا ما: مدار ═══════════ */

.dmsa-orbit__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 5vw, 80px);
}

.dmsa-orbit__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 20px 0 28px;
    padding: 0;
    list-style: none;
}

.dmsa-orbit__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background-color: var(--bg-secondary);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    transition: border-color .3s ease, background-color .3s ease;
}

.dmsa-orbit__item:hover {
    border-color: rgba(245, 214, 143, .5);
    background-color: rgba(245, 214, 143, .06);
}

.dmsa-orbit__tick {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 6px;
    border-radius: 50%;
    background-color: var(--dmsa-ok);
    color: var(--dmsa-navy);
}

.dmsa-orbit__tick .dmsa-ico path {
    stroke-width: 3;
}

.dmsa-orbit__link {
    text-decoration: none;
}

.dmsa-orbit__ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.dmsa-orbit__art {
    position: relative;
    width: 100%;
    max-width: 440px;
    justify-self: center;
    aspect-ratio: 1;
}

.dmsa-orbit__ring {
    position: absolute;
    inset: 6%;
    border: 1px dashed rgba(245, 214, 143, .35);
    border-radius: 50%;
    animation: dmsaSpin 60s linear infinite;
}

.dmsa-orbit__ring--2 {
    inset: 26%;
    border-style: solid;
    border-color: rgba(52, 195, 143, .25);
    animation-duration: 40s;
    animation-direction: reverse;
}

.dmsa-orbit__core {
    position: absolute;
    inset: 38%;
    display: grid;
    place-items: center;
    padding: 6%;
    border-radius: 50%;
    background-image: linear-gradient(150deg, #fbe3a6, var(--dmsa-copper));
    color: var(--dmsa-navy);
    box-shadow: 0 0 0 14px rgba(245, 214, 143, .08), 0 0 60px rgba(245, 214, 143, .35);
}

.dmsa-orbit__arm {
    position: absolute;
    inset: 6%;
    transform: rotate(calc(var(--p) * 280deg));
    transition: transform .25s linear;
}

.dmsa-orbit__sat {
    position: absolute;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: -32px;
    padding: 17px;
    border-radius: 20px;
    background-color: #ffffff;
    color: var(--dmsa-copper);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .9);
    transform: rotate(calc(var(--p) * -280deg));
    transition: transform .25s linear;
}

.dmsa-orbit__sat--1 { top: 0; left: 50%; }
.dmsa-orbit__sat--2 { top: 50%; left: 100%; }
.dmsa-orbit__sat--3 { top: 100%; left: 50%; }
.dmsa-orbit__sat--4 { top: 50%; left: 0; background-color: var(--dmsa-ok); color: var(--dmsa-navy); }

/* ═══════════ انواع روش‌ها: لایه‌ها + بنتو ═══════════ */

.dmsa-layers {
    --lp: 1;
}

.dmsa-layers__top {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: center;
    gap: clamp(28px, 5vw, 80px);
    margin-block-end: clamp(34px, 5vw, 64px);
}

.dmsa-layers__labels {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: dmsaL;
}

.dmsa-layers__label {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 16px;
    transition: background-color .35s ease, box-shadow .35s ease;
}

.dmsa-layers__lico {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 9px;
    border-radius: 12px;
    background-color: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-color);
    color: var(--text-secondary);
    transition: background-color .35s ease, color .35s ease;
}

.dmsa-layers__ltext {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.dmsa-layers__label.is-on {
    background-color: #ffffff;
    box-shadow: 0 16px 34px -24px rgba(10, 25, 47, .5), inset 0 0 0 1px rgba(184, 115, 51, .35);
}

.dmsa-layers__label.is-on .dmsa-layers__lico {
    background-color: var(--dmsa-copper);
    color: #ffffff;
}

.dmsa-stack {
    position: relative;
    width: 100%;
    max-width: 420px;
    justify-self: center;
    aspect-ratio: 1 / 1.15;
}

.dmsa-stack__plate {
    --i: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 62%;
    aspect-ratio: 1;
    margin: -31% 0 0 -31%;
    border-radius: 22px;
    background-image: linear-gradient(135deg, #ffffff, #e9edf4);
    box-shadow: 0 1px 0 #cfd6e2, 0 10px 0 -2px #cfd6e2, 0 30px 40px -20px rgba(10, 25, 47, .45);
    transform: translateY(calc((var(--i) - 2) * (26px + var(--lp) * 36px))) scaleY(.58) rotate(-45deg);
    transition: transform .3s linear, background-image .3s ease;
}

.dmsa-stack__plate--1 { --i: 0; z-index: 5; }
.dmsa-stack__plate--2 { --i: 1; z-index: 4; }
.dmsa-stack__plate--3 { --i: 2; z-index: 3; }
.dmsa-stack__plate--4 { --i: 3; z-index: 2; }
.dmsa-stack__plate--5 { --i: 4; z-index: 1; }

.dmsa-stack__face {
    position: absolute;
    inset: 32%;
    color: #9aa6b8;
    transform: rotate(45deg) scaleY(1.72);
}

/* لایه‌ای که برچسبش روشن است طلایی می‌شود (اسکریپت شمارهٔ آن را روی سکشن می‌نویسد). */
.dmsa-layers[data-on="1"] .dmsa-stack__plate--1,
.dmsa-layers[data-on="2"] .dmsa-stack__plate--2,
.dmsa-layers[data-on="3"] .dmsa-stack__plate--3,
.dmsa-layers[data-on="4"] .dmsa-stack__plate--4,
.dmsa-layers[data-on="5"] .dmsa-stack__plate--5 {
    background-image: linear-gradient(135deg, #fbe3a6, var(--dmsa-copper));
    box-shadow: 0 1px 0 #8f521f, 0 10px 0 -2px #8f521f, 0 30px 50px -20px rgba(184, 115, 51, .7);
}

.dmsa-layers[data-on="1"] .dmsa-stack__plate--1 .dmsa-stack__face,
.dmsa-layers[data-on="2"] .dmsa-stack__plate--2 .dmsa-stack__face,
.dmsa-layers[data-on="3"] .dmsa-stack__plate--3 .dmsa-stack__face,
.dmsa-layers[data-on="4"] .dmsa-stack__plate--4 .dmsa-stack__face,
.dmsa-layers[data-on="5"] .dmsa-stack__plate--5 .dmsa-stack__face {
    color: var(--dmsa-navy);
}

.dmsa-bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
}

.dmsa-bento__card {
    position: relative;
    padding: clamp(22px, 2.8vw, 36px);
    overflow: hidden;
    border-radius: 28px;
    background-color: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-color);
    transition: box-shadow .4s ease;
}

.dmsa-bento__card:hover {
    box-shadow: inset 0 0 0 1px rgba(184, 115, 51, .5), 0 30px 60px -40px rgba(10, 25, 47, .55);
}

.dmsa-bento__card--local { grid-column: span 7; }
.dmsa-bento__card--off { grid-column: span 5; grid-row: span 2; background-color: var(--dmsa-navy); box-shadow: none; }
.dmsa-bento__card--tech { grid-column: span 7; }

.dmsa-bento__card--off .dmsa-bento__title,
.dmsa-bento__card--off .dmsa-bento__list li {
    color: #ffffff;
}

.dmsa-bento__card--off .dmsa-bento__text {
    color: #cbd5e0;
}

.dmsa-bento__digit {
    position: absolute;
    inset-block-end: -40px;
    inset-inline-end: 6px;
    font-size: 200px;
    font-weight: 900;
    line-height: 1;
    color: rgba(184, 115, 51, .08);
    pointer-events: none;
}

.dmsa-bento__card--off .dmsa-bento__digit {
    color: rgba(245, 214, 143, .08);
}

.dmsa-bento__icon {
    display: block;
    width: 46px;
    height: 46px;
    padding: 11px;
    margin-block-end: 12px;
    border-radius: 14px;
    background-image: linear-gradient(150deg, #fbe3a6, var(--dmsa-copper));
    color: var(--dmsa-navy);
}

.dmsa-bento__title {
    position: relative;
    margin: 0 0 10px;
    font-size: clamp(18px, 1.9vw, 22px);
    font-weight: 900;
    line-height: 1.7;
    color: var(--text-primary);
    text-align: start;
}

.dmsa-bento__text {
    position: relative;
    margin: 0;
    font-size: 15px;
    line-height: 2.1;
    color: var(--text-secondary);
    text-align: justify;
}

.dmsa-bento__list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.dmsa-bento__list li {
    position: relative;
    padding: 12px 16px;
    padding-inline-start: 40px;
    border-radius: 14px;
    background-color: rgba(255, 255, 255, .05);
    font-size: 14.5px;
    line-height: 1.9;
}

.dmsa-bento__list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 16px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-block-start: -6px;
    background-color: var(--dmsa-gold);
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

/* ═══════════ چک‌لیست: کنسول ═══════════ */

.dmsa-console {
    --cp: 1;
}

.dmsa-console__status {
    position: sticky;
    top: 96px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 720px;
    margin: 0 auto clamp(22px, 3vw, 36px);
    padding: 12px 18px;
    overflow: hidden;
    border-radius: 16px;
    background-color: #050d19;
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(52, 195, 143, .3);
    direction: ltr;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    color: var(--dmsa-ok);
}

.dmsa-console__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--dmsa-ok);
    animation: dmsaBlink 1.2s steps(2) infinite;
}

.dmsa-console__cmd {
    flex: 1;
}

.dmsa-console__cmd::after {
    content: "_";
    animation: dmsaBlink 1s steps(2) infinite;
}

.dmsa-console__count {
    direction: rtl;
    font-family: inherit;
    color: #ffffff;
}

.dmsa-console__bar {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 3px;
    background-color: rgba(255, 255, 255, .06);
}

.dmsa-console__fill {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, var(--dmsa-ok), var(--dmsa-gold));
    transform: scaleX(var(--cp));
    transform-origin: left;
}

.dmsa-console__grid {
    columns: 3 300px;
    column-gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmsa-check {
    break-inside: avoid;
    margin-block-end: 16px;
    padding: 18px 20px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background-color: var(--bg-secondary);
    transition: border-color .4s ease, background-color .4s ease, opacity .6s var(--dmsa-ease), transform .6s var(--dmsa-ease);
}

.dmsa-check:hover {
    border-color: rgba(52, 195, 143, .5);
}

.dmsa-check__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-block-end: 8px;
}

.dmsa-check__box {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 4px;
    border-radius: 7px;
    background-color: var(--dmsa-ok);
    color: var(--dmsa-navy);
    transition: background-color .4s ease, box-shadow .4s ease;
}

.dmsa-check__box .dmsa-ico path {
    stroke-width: 3;
    stroke-dasharray: 22;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .5s var(--dmsa-ease) .2s;
}

.dmsa-check__title {
    flex: 1;
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
}

.dmsa-check__num {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: rgba(52, 195, 143, .7);
}

.dmsa-check__text {
    margin: 0;
    font-size: 14px;
    line-height: 2;
    color: var(--text-secondary);
}

.dmsa-check__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    direction: ltr;
    justify-content: flex-end;
}

.dmsa-check__list li {
    padding: 3px 10px;
    border-radius: 8px;
    background-color: rgba(52, 195, 143, .1);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: #9ee6c8;
    unicode-bidi: isolate;
}

/* بند «در صف» — فقط وقتی اسکریپت مسلحش کرده. */
.dmsa-check.is-pending {
    opacity: .35;
    transform: translate3d(0, 20px, 0);
}

.dmsa-check.is-pending .dmsa-check__box {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25);
}

.dmsa-check.is-pending .dmsa-check__box .dmsa-ico path {
    stroke-dashoffset: 22;
}

/* ═══════════ دوستونی مشترک ═══════════ */

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

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

/* ── قبل و بعد ── */
.dmsa-ba {
    --ba: 50%;
    position: relative;
    width: 100%;
    max-width: 480px;
    justify-self: center;
}

.dmsa-ba__frame {
    position: relative;
    aspect-ratio: 1 / 1.05;
    overflow: hidden;
    border-radius: 28px;
    box-shadow: 0 40px 80px -44px rgba(10, 25, 47, .7);
    direction: ltr;
}

.dmsa-ba__side {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 26px;
}

.dmsa-ba__side--before {
    background-color: #fdeef1;
}

.dmsa-ba__side--after {
    background-color: #e7f8f1;
    clip-path: inset(0 0 0 var(--ba));
}

.dmsa-ba__tag {
    align-self: flex-start;
    padding: 5px 14px;
    border-radius: 20px;
    background-color: var(--dmsa-bad);
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
    direction: rtl;
}

.dmsa-ba__side--after .dmsa-ba__tag {
    align-self: flex-end;
    background-color: var(--dmsa-ok);
    color: var(--dmsa-navy);
}

.dmsa-ba__serp {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
}

.dmsa-ba__res {
    flex: 1;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, .8);
}

.dmsa-ba__res--you {
    background-image: linear-gradient(90deg, #fbe3a6, #e0a96a);
    box-shadow: 0 0 0 2px var(--dmsa-copper);
}

.dmsa-ba__meter {
    height: 14px;
    overflow: hidden;
    border-radius: 7px;
    background-color: rgba(10, 25, 47, .1);
}

.dmsa-ba__meter b {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.dmsa-ba__meter--bad b { width: 28%; background-color: var(--dmsa-bad); }
.dmsa-ba__meter--good b { width: 94%; background-color: var(--dmsa-ok); }

.dmsa-ba__handle {
    position: absolute;
    inset-block: 0;
    left: var(--ba);
    width: 3px;
    margin-left: -1.5px;
    background-color: var(--dmsa-navy);
    pointer-events: none;
}

.dmsa-ba__handle i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    margin: -24px;
    border-radius: 50%;
    background-color: var(--dmsa-navy);
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .7);
}

.dmsa-ba__handle i::before,
.dmsa-ba__handle i::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    margin-top: -6px;
    border-block: 6px solid transparent;
}

.dmsa-ba__handle i::before { left: 10px; border-right: 8px solid var(--dmsa-gold); }
.dmsa-ba__handle i::after { right: 10px; border-left: 8px solid var(--dmsa-gold); }

.dmsa-ba:focus-within .dmsa-ba__handle i {
    box-shadow: 0 0 0 5px var(--dmsa-gold);
}

/* ⚠ خود input روی کل قاب کشیده شده و نامرئی است، ولی کیبورد، لمس و صفحه‌خوان را بومی دارد. */
.dmsa-ba__range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    direction: ltr;
}

/* ── ابزار در برابر کارشناس ── */
.dmsa-duel {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    width: 100%;
    max-width: 480px;
    justify-self: center;
}

.dmsa-duel__meter {
    position: relative;
    aspect-ratio: 1 / .75;
    padding: 16px;
    border-radius: 24px;
    background-color: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-color);
}

.dmsa-duel__meter svg {
    display: block;
    width: 100%;
}

.dmsa-duel__arc {
    fill: none;
    stroke: rgba(255, 255, 255, .15);
    stroke-width: 10;
    stroke-linecap: round;
}

.dmsa-duel__meter--pro .dmsa-duel__arc {
    stroke: rgba(245, 214, 143, .35);
}

.dmsa-duel__needle {
    position: absolute;
    left: 50%;
    top: 62%;
    width: 4px;
    height: 38%;
    margin-left: -2px;
    border-radius: 2px;
    background-color: var(--dmsa-bad);
    transform-origin: 50% 100%;
    translate: 0 -100%;
    animation: dmsaJitter 1.4s ease-in-out infinite;
}

.dmsa-duel__meter--pro .dmsa-duel__needle {
    background-color: var(--dmsa-gold);
    animation: none;
    transform: rotate(calc(-80deg + var(--p) * 110deg));
    transition: transform .3s linear;
}

.dmsa-duel__cap {
    position: absolute;
    left: 50%;
    top: 62%;
    width: 38px;
    height: 38px;
    margin: -19px;
    padding: 8px;
    border-radius: 50%;
    background-color: #ffffff;
    color: var(--dmsa-navy);
}

.dmsa-duel__target {
    position: absolute;
    inset-block-start: -18px;
    inset-inline-start: 50%;
    width: 44px;
    height: 44px;
    margin-inline-start: -22px;
}

.dmsa-duel__target i {
    position: absolute;
    inset: 0;
    border: 2px solid var(--dmsa-gold);
    border-radius: 50%;
    animation: dmsaRipple2 2.4s ease-out infinite;
}

.dmsa-duel__target i:nth-child(2) { inset: 12px; animation-delay: .8s; }
.dmsa-duel__target i:nth-child(3) { inset: 19px; background-color: var(--dmsa-gold); animation: none; }

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

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

/* ═══════════ جعبهٔ متن سئو ═══════════
   ⚠ عیناً همان جعبهٔ قالب‌های کدی دیگر (مقادیر قالب مشهد): همان فاصله، شعاع، ارتفاع
   اسکرول، محوشدگی و اندازهٔ متن‌ها. در منبع جعبه با h2 شروع می‌شود؛ h2 اندازهٔ h3 جعبه‌های
   دیگر را می‌گیرد و h3 اندازهٔ h4 را، تا ظاهر جعبه یکسان بماند. */
.dmsa-read.section-meld::after {
    display: none;
}

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

.dmsa-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;
}

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

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

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

.dmsa-read__body::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: rgba(255, 255, 255, .22);
}

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

.dmsa-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;
}

.dmsa-read__body h3 {
    margin: 22px 0 8px;
    padding-inline-start: 12px;
    border-inline-start: 3px solid var(--accent-primary);
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-primary);
    text-align: start;
}

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

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

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

.dmsa-read__body b {
    color: var(--text-primary);
}

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

@keyframes dmsaRipple { 0% { box-shadow: 0 0 0 0 rgba(52, 195, 143, .5); } 100% { box-shadow: 0 0 0 22px rgba(52, 195, 143, 0); } }
@keyframes dmsaRipple2 { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes dmsaEq { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1.1); } }
@keyframes dmsaScan { from { top: -60px; } to { top: calc(100% - 20px); } }
@keyframes dmsaPop { 0%, 20% { transform: scale(0); } 35%, 85% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes dmsaCursor {
    0%, 100% { top: 40%; left: 50%; }
    30% { top: 22%; left: 72%; }
    60% { top: 64%; left: 30%; }
}
@keyframes dmsaHeart { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.35); } 45% { transform: scale(.95); } }
@keyframes dmsaSpin { to { transform: rotate(360deg); } }
@keyframes dmsaBlink { 50% { opacity: 0; } }
@keyframes dmsaJitter {
    0%, 100% { transform: rotate(-55deg); }
    20% { transform: rotate(40deg); }
    45% { transform: rotate(-20deg); }
    70% { transform: rotate(62deg); }
}

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

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

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

    /* ⚠ روی دسکتاپ قاب سایت عمداً به یک لبه چسبیده تا گزارش و امتیاز کنارش جا شوند؛ در
       ستون تکی همان، موکاپ را کج از وسط نشان می‌داد. اینجا قاب متقارن است. */
    .dmsa-scanner__site {
        inset: 4% 7% 14% 7%;
    }

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

    .dmsa-hive__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dmsa-cell,
    .dmsa-cell--4 {
        grid-column: auto;
    }

    .dmsa-cell--5 {
        grid-column: 1 / -1;
    }

    .dmsa-cell__hex {
        clip-path: polygon(7% 0, 93% 0, 100% 50%, 93% 100%, 7% 100%, 0 50%);
    }

    .dmsa-bento__card--local,
    .dmsa-bento__card--off,
    .dmsa-bento__card--tech {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .dmsa-stack {
        max-width: 300px;
    }

    .dmsa-console__status {
        top: 80px;
    }
}

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

    .dmsa-cell--5 {
        grid-column: auto;
    }

    .dmsa-cell__hex {
        clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%);
    }

    .dmsa-ecg__body {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 12px;
    }

    .dmsa-step__beat {
        inset-inline-start: -46px;
        width: 34px;
    }

    .dmsa-step__beat b {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

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

    .dmsa-orbit__art {
        max-width: 300px;
    }

    .dmsa-orbit__sat {
        width: 50px;
        height: 50px;
        margin: -25px;
        padding: 13px;
    }

    .dmsa-scanner__log {
        display: none;
    }

    .dmsa-duel {
        gap: 10px;
    }

    .dmsa-bento__digit {
        font-size: 140px;
    }
}

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