/* dmhouse-service.css — «قالب صفحه طراحی سایت».
   ساختار و رفتار از لندینگ آزمایشی گرفته شده، ولی همه‌چیز اینجا مستقل و پیشونددار است و
   هیچ کلاسی از شیوه‌نامه‌های دیگر قرض گرفته نمی‌شود.
   تناوب روشن/تیره ثابت است و رنگ‌ها از توکن‌های تم می‌آیند. */

.dmsv {
    --dmsv-px: 0;
    --dmsv-py: 0;
    --dmsv-scroll: 0px;
}

/* هر سکشن خودش تمام‌عرض است و فرزندش داخل ظرف مهار می‌شود. */
.dmsv-sec {
    position: relative;
    padding-block: clamp(56px, 7vw, 110px);
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* ═══ موج جداکنندهٔ سکشن‌های تیره ═══
   ⚠ موجِ محلی این قالب حذف شد و جایش موجِ سراسری سایت (section-meld در base.css)
   می‌نشیند، تا شکل موج در همهٔ صفحه‌ها یکی باشد. نسخهٔ محلی فقط یک لایه ماسک داشت و
   رنگش سفیدِ ثابت بود؛ نسخهٔ سراسری دو لایه دارد و رنگش را از سکشن مجاور می‌گیرد.
   اینجا فقط دو چیز می‌ماند که مالِ خودِ قالب است: فاصلهٔ سکشن موج‌دار، و خاموش‌کردن
   موجِ بالای هیرو (بالای هیرو چیزی نیست که موج به آن وصل شود). */
.dmsv-sec.section-meld {
    padding-block: calc(clamp(50px, 8vw, 120px) + clamp(40px, 5vw, 70px));
}

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

.dmsv-sec > .page-container {
    position: relative;
    z-index: 5;
}

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

/* ⚠ بعضی از عنوان‌هایی که این کلاس را دارند دیگر تیتر نیستند و پاراگراف‌اند. قلم و وزن
   را پیش‌تر از قاعدهٔ سراسریِ تیترها می‌گرفتند، پس اینجا صریح نوشته شد؛ برای آن‌هایی که
   هنوز تیترند دقیقاً همان مقدار قبلی است، پس هیچ‌جا چیزی عوض نمی‌شود.
   همین کار برای هر کلاسِ دیگری که تگش عوض شد تکرار شده است. */
.dmsv-title {
    font-family: 'gofteh';
    font-weight: bold;
    margin: 0 0 14px;
    font-size: clamp(22px, 2.6vw, 34px);
    line-height: 1.7;
    color: var(--text-primary);
    text-align: start;
}

.dmsv-mark {
    color: var(--accent-primary);
}

/* ⚠ رنگ پیوند فقط داخل «متن‌های آزاد» بازنویسی می‌شود، نه روی هر a در صفحه. نسخهٔ قبلی
   عمومی بود و نوار فیلتر نمونه‌کار و دکمهٔ مشاورهٔ همان نوار را هم رنگ و خط‌چین‌دار کرد.
   important لازم است چون شیوه‌نامهٔ سراسری سایت روی a و a:visited رنگ قدیمی را با
   important می‌گذارد. */
/* ⚠ هیرو جداگانه و با وزن بالاتر نوشته شده: شیوه‌نامهٔ سایت زنده روی پیوندها قاعده‌های
   important با وزن بالا دارد و نسخهٔ کوتاه اینجا در هیرو باخت می‌خورد. */
.dmsv .dmsv-hero .dmsv-hero__desc a,
.dmsv .dmsv-hero .dmsv-hero__desc a:link,
.dmsv .dmsv-hero .dmsv-hero__desc a:visited,
.dmsv .dmsv-hero .dmsv-hero__desc a:hover,
.dmsv .dmsv-hero .dmsv-hero__desc a:focus,
.dmsv .dmsv-hero .dmsv-hero__desc a:active,
.dmsv-hero__desc a,
.dmsv-hero__desc a:visited,
.dmsv-services__desc a,
.dmsv-services__desc a:visited,
.dmsv-answer__desc a,
.dmsv-answer__desc a:visited,
.dmsv-answer__step-desc a,
.dmsv-answer__step-desc a:visited,
.dmsv-support__desc a,
.dmsv-support__desc a:visited,
.dmsv-support__desc-text a,
.dmsv-support__desc-text a:visited,
.dmsv-longread__inner a,
.dmsv-longread__inner a:visited,
.dmsv-lead a,
.dmsv-lead a:visited,
.dmsv-card__desc a,
.dmsv-card__desc a:visited,
.dmsv-why__desc a,
.dmsv-why__desc a:visited,
.dmsv-qpair__a a,
.dmsv-qpair__a a:visited,
.dmsv-faq__a a,
.dmsv-faq__a a:visited {
    color: var(--accent-primary) !important;
    font-weight: 700;
    text-decoration: none;
    border-block-end: 1px dashed currentColor;
}

.dmsv-lead {
    margin: 0;
    font-size: 15px;
    line-height: 2.1;
    color: var(--text-secondary);
    text-align: start;
}

/* ⚠ محتوای همهٔ فیلدهای متنی از ویرایشگر می‌آید و داخل پاراگراف و فهرست بسته می‌شود؛
   پس اندازه و رنگ باید به فرزندان هم برسد، نه فقط به خود ظرف. */
.dmsv-lead > :first-child,
.dmsv-card__desc > :first-child,
.dmsv-why__desc > :first-child,
.dmsv-qpair__a > :first-child,
.dmsv-support__desc-text > :first-child,
.dmsv-answer__step-desc > :first-child,
.dmsv-faq__a-inner > :first-child {
    margin-block-start: 0;
}

.dmsv-lead > :last-child,
.dmsv-card__desc > :last-child,
.dmsv-why__desc > :last-child,
.dmsv-qpair__a > :last-child,
.dmsv-support__desc-text > :last-child,
.dmsv-answer__step-desc > :last-child,
.dmsv-faq__a-inner > :last-child {
    margin-block-end: 0;
}

.dmsv-lead p,
.dmsv-card__desc p,
.dmsv-why__desc p,
.dmsv-qpair__a p,
.dmsv-support__desc-text p,
.dmsv-answer__step-desc p,
.dmsv-faq__a-inner p {
    margin: 0 0 10px;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    text-align: inherit;
}

.dmsv-lead ul,
.dmsv-card__desc ul,
.dmsv-why__desc ul,
.dmsv-qpair__a ul,
.dmsv-support__desc-text ul,
.dmsv-faq__a-inner ul,
.dmsv-lead ol,
.dmsv-card__desc ol,
.dmsv-why__desc ol,
.dmsv-qpair__a ol,
.dmsv-support__desc-text ol,
.dmsv-faq__a-inner ol {
    margin: 0 0 10px;
    padding-inline-start: 20px;
}

.dmsv-lead li,
.dmsv-card__desc li,
.dmsv-why__desc li,
.dmsv-qpair__a li,
.dmsv-support__desc-text li,
.dmsv-faq__a-inner li {
    margin-block-end: 6px;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* ⚠ برچسب بالای عنوان دیگر نسخهٔ محلی ندارد: کلاس سراسری dm-eyebrow در base.css
   استفاده می‌شود و مرجعش صفحهٔ اصلی است. */

.dmsv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: var(--pill-radius, 50px);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .3s ease, background-color .3s ease, color .3s ease;
}

.dmsv-btn--primary {
    background-color: var(--accent-primary);
    color: var(--color-navy, #0a192f) !important;
}

.dmsv-btn--ghost {
    border: 1px solid var(--border-color);
    color: var(--text-primary) !important;
}

.dmsv-btn:hover {
    transform: translateY(-2px);
}

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

.dmsv-hero {
    overflow: hidden;
    padding-block: clamp(170px, 17vw, 250px) calc(clamp(50px, 8vw, 120px) + clamp(40px, 5vw, 70px));
}

.dmsv-hero__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 60px);
    align-items: center;
}

.dmsv-hero__text {
    min-width: 0;
}

/* بردکرام از ماژول بلاگ می‌آید و شیوه‌نامهٔ آن اینجا بار نمی‌شود؛ پس ظاهر مینیمالش
   همین‌جا تعریف می‌شود. */
.dmsv-hero .dmhb-crumbs {
    margin-block-end: 16px;
    font-size: 13px;
    color: var(--text-secondary);
}

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

.dmsv-hero .dmhb-crumbs__item::after {
    content: "»";
    margin-inline: 6px;
    color: var(--text-secondary);
}

.dmsv-hero .dmhb-crumbs__item--current::after {
    content: none;
}

.dmsv-hero .dmhb-crumbs a,
.dmsv-hero .dmhb-crumbs a:visited {
    color: var(--text-secondary) !important;
    text-decoration: none;
}

.dmsv-hero .dmhb-crumbs a:hover,
.dmsv-hero .dmhb-crumbs__item--current {
    color: var(--accent-primary) !important;
}

.dmsv-hero__title {
    margin: 0 0 16px;
    font-size: clamp(34px, 5vw, 62px);
    line-height: 1.35;
    color: var(--text-primary);
}

.dmsv-hero__desc p {
    margin: 0 0 12px;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 2.1;
    color: var(--text-secondary);
    text-align: justify;
}

.dmsv-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-block: 22px 26px;
}

.dmsv-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(18px, 3vw, 40px);
    margin: 0;
    padding-block-start: 20px;
    border-block-start: 1px solid var(--border-color);
}

.dmsv-hero__stats dt {
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 700;
    color: var(--accent-primary);
}

.dmsv-hero__stats dd {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.dmsv-hero__visual {
    position: relative;
    isolation: isolate;
}

.dmsv-hero__visual::before {
    content: "";
    position: absolute;
    inset: -12% -8% -18% -8%;
    z-index: -1;
    border-radius: 50%;
    background-image: radial-gradient(closest-side, rgba(245, 214, 143, .22), transparent 72%);
    transform: translate3d(calc(var(--dmsv-px) * -26px), calc(var(--dmsv-py) * -22px), 0);
    transition: transform .6s ease-out;
}

/* ارتفاع ثابت است تا هر تصویری با هر نسبتی، چیدمان را جابه‌جا نکند. */
.dmsv-hero__figure {
    margin: 0;
    height: clamp(260px, 34vw, 460px);
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    background-color: var(--bg-secondary);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
    transform: translate3d(calc(var(--dmsv-px) * 12px), calc(var(--dmsv-py) * 12px + var(--dmsv-scroll)), 0);
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.dmsv-hero__figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04);
}

/* ═══ نمونه‌کارها ═══ */

.dmsv-portfolio__cta {
    display: flex;
    justify-content: center;
    margin-block-start: clamp(28px, 4vw, 52px);
}

/* ═══ خدمات: گرید ۵۰/۵۰ با ردیف‌های استک‌شونده ═══
   خانهٔ اولِ ردیف نخست، متن سکشن است؛ هر ردیف در همان نقطهٔ بالای صفحه می‌چسبد و ردیف
   بعدی با اسکرول روی ردیف قبلی می‌نشیند. */

.dmsv-services__stack {
    display: block;
}

.dmsv-services__row {
    position: sticky;
    top: clamp(90px, 12vh, 130px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 26px);
    align-items: stretch;
    /* ⚠ پدینگ عمودی صفر است: پدینگ، نواری هم‌رنگ سکشن بالای کارت‌ها می‌ساخت که با اسکرول
       حرکت می‌کرد. پس‌زمینه می‌ماند تا فقط شکاف میان دو کارت را بپوشاند. */
    background-color: var(--bg-primary);
    padding-block: 0;
}

.dmsv-services__row:nth-of-type(1) { z-index: 11; }
.dmsv-services__row:nth-of-type(2) { z-index: 12; }
.dmsv-services__row:nth-of-type(3) { z-index: 13; }
.dmsv-services__row:nth-of-type(4) { z-index: 14; }
.dmsv-services__row:nth-of-type(5) { z-index: 15; }
.dmsv-services__row:nth-of-type(6) { z-index: 16; }

.dmsv-services__row + .dmsv-services__row {
    margin-block-start: clamp(40px, 8vh, 90px);
}

.dmsv-services__head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding-block: clamp(8px, 1.6vw, 20px);
}

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

.dmsv-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: clamp(300px, 38vh, 420px);
    padding: clamp(20px, 2.4vw, 28px);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    overflow: hidden;
    background-color: var(--color-navy, #0a192f);
    transition: transform .3s ease, border-color .3s ease;
}

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

.dmsv-card__image {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.dmsv-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.dmsv-card:hover .dmsv-card__image img {
    transform: scale(1.05);
}

.dmsv-card__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(6, 17, 33, .95) 0%, rgba(6, 17, 33, .55) 45%, rgba(6, 17, 33, .2) 75%),
        linear-gradient(to bottom, rgba(6, 17, 33, .85) 0%, rgba(6, 17, 33, .45) 45%, rgba(6, 17, 33, .65) 100%);
}

.dmsv-card__badge,
.dmsv-card__body {
    position: relative;
    z-index: 2;
}

.dmsv-card__badge {
    align-self: flex-start;
    padding: 6px 14px;
    border-radius: var(--pill-radius, 50px);
    background-color: rgba(245, 214, 143, .16);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-gold, #f5d68f);
}

.dmsv-card__body {
    margin-block-start: auto;
}

.dmsv-card__title {
    font-family: 'gofteh';
    font-weight: bold;
    margin: 0 0 8px;
    font-size: clamp(18px, 1.8vw, 24px);
    line-height: 1.7;
    color: #ffffff;
}

.dmsv-card__desc {
    margin: 0;
    font-size: 14px;
    line-height: 2;
    color: rgba(255, 255, 255, .88);
    text-align: justify;
}

/* ⚠ سکشن «اعتماد برندها» دیگر پوستهٔ خودش را ندارد؛ کامل از ماژول نظرها می‌آید تا
   خروجی‌اش با بقیهٔ قالب‌ها یکی باشد. قاعده‌های آن سکشن در شیوه‌نامهٔ همان ماژول است. */

/* ═══ چرا ما ═══ */

.dmsv-why__grid {
    display: grid;
    grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
    gap: clamp(24px, 3vw, 48px);
    align-items: start;
}

.dmsv-why__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    position: sticky;
    top: 14vh;
}

/* ⚠ چیدمان ستونی (columns) عمداً به‌کار نرفته: ترتیب خواندنش عمودی می‌شود و کارت‌ها
   وسط ستون می‌شکنند. با گرید دوستونی و دو کارتِ «بلند» در ابتدا و انتها، مجموع ارتفاع
   ستون‌ها برابر می‌ماند و لبهٔ پایین یک خط صاف است. */
.dmsv-why__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* ⚠ ردیف‌ها هم‌ارتفاع می‌شوند: بدون این، کارتی که دو ردیف را می‌گیرد ارتفاع دو ردیفِ
       نابرابر را جمع می‌کرد و کارت‌های کنارش قد متفاوت پیدا می‌کردند. */
    grid-auto-rows: 1fr;
    gap: clamp(14px, 1.6vw, 22px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmsv-why__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(20px, 2.2vw, 28px);
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background-color: var(--bg-secondary);
    transition: transform .3s ease, border-color .3s ease;
}

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

/* کارت اول دو ردیف را می‌گیرد؛ همین ریتم نامتقارن، ستون‌ها را هم‌ارتفاع و لبهٔ پایین را
   صاف نگه می‌دارد. */
.dmsv-why__card--tall {
    grid-row: span 2;
    justify-content: center;
}

.dmsv-why__num {
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 700;
    line-height: 1;
    color: var(--accent-primary);
    opacity: .55;
}

.dmsv-why__title {
    font-family: 'gofteh';
    font-weight: bold;
    margin: 0;
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-primary);
}

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

/* ═══ پرسش و پاسخ کوتاه ═══ */

.dmsv-answer__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 60px);
    align-items: start;
}

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

.dmsv-answer__short {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 22px;
    padding: 16px 20px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background-color: rgba(245, 214, 143, .08);
    font-size: clamp(15px, 1.2vw, 18px);
    font-weight: 700;
    color: var(--text-primary);
}

.dmsv-answer__mark {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--accent-primary);
    color: var(--color-navy, #0a192f);
}

.dmsv-answer__steps {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmsv-answer__steps > li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 16px 18px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background-color: var(--bg-secondary);
}

.dmsv-answer__num {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent-primary);
}

.dmsv-answer__body {
    display: grid;
    gap: 6px;
}

.dmsv-answer__step-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.dmsv-answer__step-desc {
    font-size: 14px;
    line-height: 1.9;
    color: var(--text-secondary);
}

/* ═══ پشتیبانی ═══ */

.dmsv-support__head {
    max-width: 900px;
    margin-block-end: clamp(28px, 4vw, 48px);
}

.dmsv-support__desc p {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 2.1;
    color: var(--text-secondary);
}

.dmsv-support__lead {
    margin: 0;
    font-weight: 700;
    color: var(--text-primary);
}

.dmsv-support__cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 1.8vw, 24px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmsv-support__card {
    position: relative;
    overflow: hidden;
    padding: clamp(22px, 2.2vw, 32px);
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background-color: var(--bg-primary);
    box-shadow: var(--card-shadow, 0 2px 10px rgba(10, 25, 47, .08));
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.dmsv-support__card::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background-image: linear-gradient(to left, var(--color-gold, #f5d68f), var(--color-copper, #b87333));
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .6s ease;
}

.dmsv-support__card:hover {
    transform: translateY(-6px);
    border-color: rgba(184, 115, 51, .35);
    box-shadow: 0 20px 44px rgba(10, 25, 47, .12);
}

.dmsv-support__card:hover::before {
    transform: scaleX(1);
}

.dmsv-support__num {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 18px;
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
    color: rgba(10, 25, 47, .06);
}

.dmsv-support__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-block-end: 14px;
    border-radius: 16px;
    background-image: linear-gradient(135deg, rgba(245, 214, 143, .55), rgba(184, 115, 51, .18));
    font-size: 21px;
    color: var(--color-navy, #0a192f);
}

.dmsv-support__title {
    font-family: 'gofteh';
    font-weight: bold;
    margin: 0 0 10px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-primary);
}

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

/* ═══ مقایسهٔ دو روش ═══
   ⚠ تب‌بندی برداشته شد: روش اول تمام‌عرض می‌آید و روش دوم (نسخهٔ ارزان) زیرش، به شکل
   کارت «پیشنهاد به‌صرفه» که عمداً از روش اول پرسروصداتر است.
   ⚠ هیچ ترنسفرم، فیلتر یا پرسپکتیوی روی جعبه‌های متن‌دار نیست؛ هر حرکتی فقط روی آیکون
   تزئینی و نوار درخشش است، تا متن در موبایل روی لایهٔ گرافیکی جدا نرود و تار نشود. */

.dmsv-duo__intro {
    margin-block-end: clamp(22px, 2.8vw, 36px);
    text-align: center;
}

.dmsv-duo__lead {
    margin-inline: auto;
    max-width: 900px;
    text-align: center;
}

/* ═══ حالت تکی ═══ */

/* وقتی فقط یک روش محتوا دارد، انتخابگری در کار نیست و پنل تنها، تمام عرضِ ظرف را
   می‌گیرد. عنوان سکشن هم دیگر لازم نیست وسط‌چین بماند چون چیزی برای مقایسه نیست. */
.dmsv-duo--solo .dmsv-duo__panel {
    padding: clamp(24px, 3vw, 40px) clamp(22px, 2.8vw, 38px);
}

.dmsv-duo--solo .dmsv-duo__panels {
    width: 100%;
}

/* ═══ پنل محتوا ═══ */

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

/* ── جداکنندهٔ «یا» میان دو روش: یک خط طلایی با مهرهٔ تپنده، بدون کلمه ── */
.dmsv-duo__or {
    position: relative;
    display: flex;
    justify-content: center;
    height: clamp(46px, 5vw, 70px);
}

.dmsv-duo__or::before {
    content: "";
    width: 2px;
    height: 100%;
    background-image: linear-gradient(to bottom, transparent, rgba(245, 214, 143, .75), transparent);
}

.dmsv-duo__or-dot {
    position: absolute;
    inset-block-start: 50%;
    width: 14px;
    height: 14px;
    margin-block-start: -7px;
    border-radius: 50%;
    background-color: #f5d68f;
    box-shadow: 0 0 0 6px rgba(245, 214, 143, .18);
    animation: dmsvDealPulse 2.4s ease-in-out infinite;
}

/* ═══ کارت روش دوم: «پیشنهاد به‌صرفه» ═══
   ⚠ رنگ کارت عمداً از تم سکشن مستقل است (سرمه‌ای عمیق با قاب طلایی): این کارت باید
   در سکشن روشن و تیره به یک اندازه چشم را بگیرد. پس متغیرهای رنگ روی خودش بازتعریف
   می‌شوند و متن‌های درونش همیشه روشن‌اند.
   ⚠ ورود با اسکرول فقط شفافیت و clip-path است، نه ترنسفرم؛ کارت متن دارد. */
.dmsv-deal {
    --dmsv-deal-p: 1;
    --text-primary: #ffffff;
    --text-secondary: #d3dbe8;
    --accent-primary: #f5d68f;
    --accent-secondary: #e0a96a;
    --border-color: rgba(245, 214, 143, .28);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    align-items: center;
    gap: clamp(20px, 3vw, 48px);
    padding: clamp(26px, 3.4vw, 52px);
    overflow: hidden;
    isolation: isolate;
    border-radius: 30px;
    background-color: #0a192f;
    background-image:
        radial-gradient(circle at 12% 50%, rgba(245, 214, 143, .20), transparent 42%),
        radial-gradient(circle at 100% 0%, rgba(184, 115, 51, .30), transparent 45%),
        linear-gradient(135deg, #0d213d 0%, #07111f 100%);
    color: var(--text-primary);
    box-shadow: 0 40px 80px -40px rgba(10, 25, 47, .85),
                inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* قاب طلایی با گرادیان چرخان: لایهٔ رنگی زیر، و یک ماسکِ «فقط لبه» رویش. */
.dmsv-deal::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    padding: 1.5px;
    border-radius: inherit;
    background-image: conic-gradient(from var(--dmsv-deal-angle, 0deg), #f5d68f, #b87333 25%, rgba(245, 214, 143, .15) 50%, #b87333 75%, #f5d68f);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: dmsvDealSpin 8s linear infinite;
}

@property --dmsv-deal-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

/* نوار درخشش مورب که هر چند ثانیه از روی کارت رد می‌شود؛ ترنسفرم فقط روی همین نوار. */
.dmsv-deal__shine {
    position: absolute;
    inset-block: -20%;
    left: -30%;
    z-index: -1;
    width: 22%;
    background-image: linear-gradient(90deg, transparent, rgba(245, 214, 143, .10), transparent);
    transform: skewX(-18deg);
    animation: dmsvDealShine 6s ease-in-out infinite;
    pointer-events: none;
}

.dmsv-deal__body {
    min-width: 0;
}

.dmsv-deal__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-block-end: 14px;
    padding: 6px 14px 6px 6px;
    border-radius: var(--pill-radius, 50px);
    background-image: linear-gradient(90deg, rgba(245, 214, 143, .22), rgba(184, 115, 51, .12));
    box-shadow: inset 0 0 0 1px rgba(245, 214, 143, .40);
    font-size: 13px;
    font-weight: 800;
    color: #f5d68f;
}

.dmsv-deal__badge-ico {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-image: linear-gradient(160deg, #fbe3a6, #b87333);
    font-size: 14px;
    font-weight: 900;
    color: #0a192f;
}

.dmsv-deal__title {
    margin: 0 0 14px;
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 900;
    line-height: 1.55;
    color: #ffffff;
    text-align: start;
}

.dmsv-deal__title .dmsv-mark {
    background-image: linear-gradient(90deg, #fbe3a6, #e0a96a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.dmsv-deal__text p,
.dmsv-deal__text li {
    font-size: 15.5px;
    color: #d3dbe8;
}

.dmsv-deal__text strong,
.dmsv-deal__text b {
    color: #ffffff;
}

.dmsv-deal__cta {
    display: inline-flex;
    margin-block-start: clamp(20px, 2.4vw, 30px);
}

/* ⚠ روی زمینهٔ همیشه‌تیرهٔ کارت، دکمهٔ درخشان نسخهٔ توپر طلایی می‌گیرد تا از دکمهٔ
   حاشیه‌دارِ روش اول پررنگ‌تر دیده شود. رنگ‌ها با تکرار کلاس بالاتر از قاعدهٔ پیوندِ
   سراسری می‌نشینند. */
.dmsv-deal__cta .btn-shine.btn-shine {
    padding: 16px 34px;
    border-color: #f5d68f;
    background-image: linear-gradient(135deg, #fbe3a6, #e0a96a 55%, #b87333);
    box-shadow: 0 14px 30px -12px rgba(245, 214, 143, .55);
}

.dmsv-deal__cta .btn-shine.btn-shine span {
    color: #0a192f;
    font-size: 16px;
}

/* ⚠ هاور دکمهٔ سراسری رنگ متن را به --accent-secondary می‌برد، که روی همین کارت طلایی است و
   روی زمینهٔ طلایی دکمه تقریباً ناپدید می‌شد. هاور اینجا متن را سرمه‌ای نگه می‌دارد و فقط
   زمینه را روشن‌تر می‌کند. وزن سلکتور عمداً از قاعدهٔ هاور سراسری بالاتر است تا ترتیب
   بارگذاری شیوه‌نامه‌ها تعیین‌کننده نباشد. */
.dmsv-deal .dmsv-deal__cta .btn-shine.btn-shine:hover,
.dmsv-deal .dmsv-deal__cta .btn-shine.btn-shine:focus-visible {
    border-color: #ffffff;
    background-image: linear-gradient(135deg, #fff1cc, #f2c98a 55%, #d08a45);
    box-shadow: 0 18px 36px -12px rgba(245, 214, 143, .75);
}

.dmsv-deal .dmsv-deal__cta .btn-shine.btn-shine:hover span,
.dmsv-deal .dmsv-deal__cta .btn-shine.btn-shine:focus-visible span {
    color: #0a192f;
}

.dmsv-deal__cta .btn-shine.btn-shine:after {
    background: #ffffff;
    opacity: .45;
}

/* ── آیکون ── */
.dmsv-deal__art {
    position: relative;
    width: 100%;
    max-width: 320px;
    justify-self: center;
    aspect-ratio: 1;
}

.dmsv-deal__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.dmsv-deal__svg g,
.dmsv-deal__svg path,
.dmsv-deal__svg circle,
.dmsv-deal__svg rect {
    transform-box: fill-box;
    transform-origin: center;
}

.dmsv-deal__orbit {
    animation: dmsvDealRotate 40s linear infinite;
}

.dmsv-deal__orbit--in {
    animation-duration: 26s;
    animation-direction: reverse;
}

/* برچسب قیمت با اسکرول کمی می‌چرخد و بعد آرام تاب می‌خورد؛ دو ترنسفرم روی دو لایه
   تا با هم نجنگند: چرخشِ اسکرولی روی خودِ گروه، تاب روی کل بوم نیست. */
.dmsv-deal__tag {
    transform: rotate(calc(-14deg + var(--dmsv-deal-p) * 8deg)) translateY(calc((1 - var(--dmsv-deal-p)) * 26px));
    transition: transform .25s linear;
}

.dmsv-deal__strike {
    transform-origin: left center;
    transform: scaleX(var(--dmsv-deal-p));
}

.dmsv-deal__new {
    animation: dmsvDealBlink 2.8s ease-in-out infinite;
    fill: #0a192f;
}

.dmsv-deal__arrow {
    animation: dmsvDealDrop 2.2s cubic-bezier(.55, 0, .45, 1) infinite;
}

.dmsv-deal__coin {
    transform: translateY(calc((1 - var(--dmsv-deal-p)) * -60px));
    opacity: calc(.25 + var(--dmsv-deal-p) * .75);
}

.dmsv-deal__coin--2 {
    transform: translateY(calc((1 - var(--dmsv-deal-p)) * -95px));
}

.dmsv-deal__coin--3 {
    transform: translateY(calc((1 - var(--dmsv-deal-p)) * -130px));
}

.dmsv-deal__coins {
    animation: dmsvDealBounce 3.2s ease-in-out infinite;
}

.dmsv-deal__pct {
    animation: dmsvDealWobble 4.5s ease-in-out infinite;
}

.dmsv-deal__spark {
    animation: dmsvDealTwinkle 2.6s ease-in-out infinite;
}

.dmsv-deal__spark--2 { animation-delay: .9s; }
.dmsv-deal__spark--3 { animation-delay: 1.6s; }

/* هاور روی دسکتاپ: برچسب کمی جلو می‌آید و سکه‌ها می‌پرند. */
@media (hover: hover) {
    .dmsv-deal:hover .dmsv-deal__coins {
        animation-duration: 1.1s;
    }

    .dmsv-deal:hover .dmsv-deal__pct {
        animation-duration: 1.4s;
    }
}

/* ورود کارت با اسکرول: فقط وقتی اسکریپت مسلحش کرده باشد. */
.dmsv-deal.is-armed {
    clip-path: inset(0 calc((1 - var(--dmsv-deal-in, 0)) * 12%) round 30px);
    opacity: calc(.35 + var(--dmsv-deal-in, 0) * .65);
}

@keyframes dmsvDealSpin { to { --dmsv-deal-angle: 360deg; } }
@keyframes dmsvDealRotate { to { transform: rotate(360deg); } }
@keyframes dmsvDealShine {
    0%, 55% { left: -30%; }
    100% { left: 130%; }
}
@keyframes dmsvDealPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(245, 214, 143, .18); }
    50% { box-shadow: 0 0 0 12px rgba(245, 214, 143, 0); }
}
@keyframes dmsvDealBlink {
    0%, 100% { fill: #0a192f; }
    50% { fill: #1f7a57; }
}
@keyframes dmsvDealDrop {
    0% { transform: translateY(-14px); opacity: 0; }
    35% { opacity: 1; }
    100% { transform: translateY(18px); opacity: 0; }
}
@keyframes dmsvDealBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@keyframes dmsvDealWobble {
    0%, 100% { transform: rotate(-10deg) scale(1); }
    50% { transform: rotate(12deg) scale(1.08); }
}
@keyframes dmsvDealTwinkle {
    0%, 100% { opacity: .15; transform: scale(.6); }
    50% { opacity: 1; transform: scale(1); }
}

@media (max-width: 767px) {
    .dmsv-deal {
        grid-template-columns: minmax(0, 1fr);
        text-align: start;
    }

    .dmsv-deal__art {
        order: -1;
        max-width: 190px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dmsv-deal::before,
    .dmsv-deal__shine,
    .dmsv-duo__or-dot,
    .dmsv-deal__coins,
    .dmsv-deal__pct,
    .dmsv-deal__orbit,
    .dmsv-deal__new,
    .dmsv-deal__arrow,
    .dmsv-deal__spark {
        animation: none;
    }

    .dmsv-deal.is-armed {
        clip-path: none;
        opacity: 1;
    }
}

.dmsv-duo__title {
    margin: 0 0 14px;
    font-size: clamp(20px, 2.2vw, 27px);
    line-height: 1.7;
    color: var(--text-primary);
    text-align: start;
}

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

.dmsv-duo__text p:last-child {
    margin-block-end: 0;
}

.dmsv-duo__text strong,
.dmsv-duo__text b {
    color: var(--text-primary);
}

.dmsv-duo__text a,
.dmsv-duo__text a:visited {
    font-weight: 700;
    color: var(--accent-primary);
    border-block-end: 1px solid currentColor;
}

.dmsv-duo__text ul,
.dmsv-duo__text ol {
    margin: 0 0 12px;
    padding-inline-start: 20px;
}

.dmsv-duo__text li {
    margin-block-end: 6px;
    font-size: 15px;
    line-height: 2.1;
    color: var(--text-secondary);
}

.dmsv-duo__cta {
    display: inline-flex;
    margin-block-start: clamp(18px, 2vw, 26px);
}



/* ═══ مقایسه ═══ */

.dmsv-compare__head {
    max-width: 900px;
    margin-block-end: clamp(28px, 4vw, 48px);
}

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

.dmsv-compare__plan {
    padding: clamp(22px, 2.4vw, 34px);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    background-color: var(--bg-secondary);
}

.dmsv-compare__plan--star {
    border-color: var(--accent-primary);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}

.dmsv-compare__plan-head {
    margin-block-end: 20px;
    padding-block-end: 18px;
    border-block-end: 1px solid var(--border-color);
}

.dmsv-compare__tag {
    display: inline-block;
    margin-block-end: 10px;
    padding: 5px 14px;
    border-radius: var(--pill-radius, 50px);
    background-color: rgba(245, 214, 143, .14);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-primary);
}

.dmsv-compare__name {
    font-family: 'gofteh';
    font-weight: bold;
    line-height: inherit;
    margin: 0 0 6px;
    font-size: clamp(19px, 1.8vw, 24px);
    color: var(--text-primary);
}

.dmsv-compare__price {
    margin: 0;
    font-size: clamp(16px, 1.6vw, 20px);
    font-weight: 700;
    color: var(--accent-primary);
}

.dmsv-compare__note {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.9;
    color: var(--text-secondary);
}

.dmsv-compare__yes {
    font-weight: 700;
    color: #2f9e6a;
}

.dmsv-compare__no {
    color: var(--text-secondary);
}

.dmsv-compare__cta {
    display: flex;
    margin-block-start: 20px;
}

.dmsv-compare__list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmsv-compare__list > li {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 12px;
    align-items: baseline;
    padding-block-end: 12px;
    border-block-end: 1px dashed var(--border-color);
}

.dmsv-compare__list > li:last-child {
    padding-block-end: 0;
    border-block-end: 0;
}

.dmsv-compare__k {
    font-size: 13px;
    color: var(--text-secondary);
}

.dmsv-compare__v {
    font-size: 14px;
    line-height: 1.9;
    color: var(--text-primary);
}

/* ═══ دو پرسش پرتکرار ═══ */

.dmsv-qpair__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 2.6vw, 40px);
    margin-block-start: clamp(20px, 3vw, 36px);
}

.dmsv-qpair__item {
    position: relative;
    padding-block-start: 8px;
    padding-inline-start: 58px;
}

.dmsv-qpair__index {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-primary);
}

.dmsv-qpair__q {
    margin: 0 0 12px;
    font-size: clamp(17px, 1.5vw, 21px);
    line-height: 1.8;
    color: var(--text-primary);
}

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

.dmsv-qpair__meta {
    display: inline-block;
    margin: 0;
    padding: 6px 14px;
    border-radius: var(--pill-radius, 50px);
    background-color: rgba(184, 115, 51, .1);
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-primary);
}

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

.dmsv-faq__head {
    margin-block-end: clamp(36px, 5vw, 70px);
}

.dmsv-faq__marquee {
    direction: ltr;
    width: 200px;
    margin-block-end: 18px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.dmsv-faq__track {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    white-space: nowrap;
    animation: dmsvMarquee 22s linear infinite;
}

.dmsv-faq__mq {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--text-secondary);
}

.dmsv-faq__star {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--accent-primary);
}

.dmsv-faq__sep {
    color: var(--border-color);
}

@keyframes dmsvMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.dmsv-faq__title {
    font-family: 'gofteh';
    margin: 0;
    /* ۱.۱۲۲.۲: کوچک‌تر به خواست مالک، هم‌اندازهٔ لندینگ‌های تازه (قبلاً تا ۱۲۰px) */
    font-size: clamp(30px, 5vw, 64px);
    line-height: 1.1;
    font-weight: 700;
    text-align: start;
}

.dmsv-faq__t-strong {
    color: var(--text-primary);
}

.dmsv-faq__t-soft {
    color: #b8bcc4;
}

.dmsv-faq__body {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(28px, 4vw, 60px);
    align-items: start;
}

.dmsv-faq__image {
    order: 2;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    aspect-ratio: 1 / 1;
}

.dmsv-faq__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dmsv-faq__accordion {
    order: 1;
}

.dmsv-faq__item {
    border-block-end: 1px solid var(--border-color);
}

.dmsv-faq__item:first-child {
    border-block-start: 1px solid var(--border-color);
}

.dmsv-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 26px 4px;
    border: none;
    background: transparent;
    font-family: inherit;
    text-align: start;
    cursor: pointer;
}

.dmsv-faq__q-main {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}

.dmsv-faq__num,
.dmsv-faq__slash {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
}

/* ⚠ عیناً مثل صفحهٔ تماس با ما و لندینگ سئو: همان خانوادهٔ قلم عنوان‌ها و وزن عادی.
   بدون تعیین صریح، وزن را از خودِ دکمه به ارث می‌برد و درشت‌تر دیده می‌شود. */
.dmsv-faq__q-text {
    font-family: 'gofteh', 'dana', 'IRANSansX', sans-serif;
    font-size: clamp(18px, 1.8vw, 26px);
    font-weight: 400;
    color: var(--text-primary);
}

.dmsv-faq__icon {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--color-navy, #0a192f);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), background-color .3s ease;
}

.dmsv-faq__icon::before,
.dmsv-faq__icon::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    background-color: #ffffff;
    transform: translate(50%, -50%);
}

.dmsv-faq__icon::before {
    width: 15px;
    height: 2px;
}

.dmsv-faq__icon::after {
    width: 2px;
    height: 15px;
    transition: transform .3s ease;
}

.dmsv-faq__item.is-open .dmsv-faq__icon::after {
    transform: translate(50%, -50%) scaleY(0);
}

.dmsv-faq__item:hover .dmsv-faq__q-main {
    transform: translateX(14px);
}

.dmsv-faq__item:hover .dmsv-faq__icon {
    transform: translateX(-14px);
    background-color: var(--accent-primary);
}

/* ارتفاع پاسخ را جاوااسکریپت ست می‌کند. */
.dmsv-faq__a {
    height: 0;
    overflow: hidden;
    transition: height .45s cubic-bezier(.2, .7, .2, 1);
}

/* ⚠ همان اندازه و فاصلهٔ قبلی، فقط یک لایه بالاتر: محتوای پاسخ حالا از ویرایشگر می‌آید و
   خودش پاراگراف دارد، پس قاعده روی ظرف نشسته تا خروجی دقیقاً مثل قبل دیده شود. */
.dmsv-faq__a-inner {
    max-width: 520px;
    padding: 0 4px 28px;
    font-size: 15px;
    line-height: 1.9;
    color: var(--text-secondary);
}

/* ═══ کاروسل نظرها ═══
   سه کارت هم‌زمان؛ کارت میانی بزرگ‌تر و پررنگ‌تر. ارتفاع همهٔ کارت‌ها برابرِ بلندترین
   کارت است، چون ریل روی محور عمودی کشیده می‌شود نه وسط‌چین. */

/* عنوان کاروسل عیناً مثل نسخهٔ لوکال: درشت‌تر از تیتر معمولی سکشن‌ها. */
.dmsv-quotes__title {
    margin: 0 0 clamp(20px, 3vw, 40px);
    font-size: clamp(22px, 2.4vw, 34px);
    line-height: 1.6;
}

.dmsv-quotes__title + .dmsv-lead {
    margin-block-start: -18px;
}

.dmsv-quotes__viewport {
    overflow: hidden;
    padding-block: 10px 24px;
    margin-block-start: clamp(20px, 3vw, 36px);
}

.dmsv-quotes__track {
    display: flex;
    align-items: stretch;
    gap: clamp(16px, 2vw, 28px);
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform .6s ease;
    will-change: transform;
}

/* ⚠ ارتفاع ثابت است، نه وابسته به طول متن: با متن‌های کوتاه و بلند، ارتفاع ریل در هر
   جابه‌جایی بالا و پایین می‌پرید. متنِ بلندتر داخل همان کادر کوتاه می‌شود. */
.dmsv-quotes__item {
    flex: 0 0 calc((100% - 2 * clamp(16px, 2vw, 28px)) / 3);
    min-width: 0;
    height: clamp(330px, 30vw, 420px);
}

.dmsv-quotes__card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "logo who"
        "text text";
    align-content: start;
    gap: 8px 14px;
    height: 100%;
    padding: clamp(24px, 2.4vw, 36px);
    border: 1px solid var(--border-color);
    border-radius: 28px;
    overflow: hidden;
    background-color: var(--bg-secondary);
    transform: scale(.94);
    opacity: .5;
    transition: transform .6s ease, opacity .6s ease, border-color .3s ease, box-shadow .3s ease;
}

.dmsv-quotes__card::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background-image: linear-gradient(to left, var(--color-gold, #f5d68f), var(--color-copper, #b87333));
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .6s ease;
}

.dmsv-quotes__item.is-active .dmsv-quotes__card {
    transform: scale(1);
    opacity: 1;
    border-color: rgba(245, 214, 143, .4);
    /* سایه عمداً بسیار ملایم است؛ نسخهٔ قبلی لکهٔ تیرهٔ درشتی زیر کارت می‌ساخت. */
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

.dmsv-quotes__item.is-active .dmsv-quotes__card::before {
    transform: scaleX(1);
}

.dmsv-quotes__mark {
    position: absolute;
    inset-block-start: -18px;
    inset-inline-start: 14px;
    font-size: 120px;
    line-height: 1;
    color: rgba(245, 214, 143, .09);
    pointer-events: none;
}

.dmsv-quotes__logo {
    grid-area: logo;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    padding: 9px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background-color: rgba(255, 255, 255, .9);
}

.dmsv-quotes__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.dmsv-quotes__author {
    grid-area: who;
    align-self: center;
}

.dmsv-quotes__name {
    font-family: 'gofteh';
    font-weight: bold;
    line-height: inherit;
    margin: 0 0 3px;
    font-size: 16px;
    color: var(--text-primary);
}

.dmsv-quotes__role {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--pill-radius, 50px);
    background-color: rgba(245, 214, 143, .12);
    font-size: 12px;
    color: var(--accent-primary);
}

.dmsv-quotes__text {
    grid-area: text;
    margin: 6px 0 0;
    padding-block-start: 16px;
    border-block-start: 1px solid var(--border-color);
    font-size: 15px;
    line-height: 2.1;
    color: var(--text-secondary);
    /* راست‌چین ساده؛ جاستیفای در ستون باریک، فاصلهٔ واژه‌ها را زشت می‌کند. */
    text-align: start;
    /* متن بلندتر از کادر، با سه‌نقطه کوتاه می‌شود تا ارتفاع ثابت بماند. */
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
}

.dmsv-quotes__item.is-active .dmsv-quotes__text {
    font-size: 16px;
    color: var(--text-primary);
}

.dmsv-quotes__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-block-start: clamp(18px, 2vw, 30px);
}

.dmsv-quotes__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background-color: rgba(245, 214, 143, .12);
    color: var(--accent-primary);
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease, transform .3s ease;
}

.dmsv-quotes__btn:hover {
    background-color: var(--accent-primary);
    color: var(--color-navy, #0a192f);
    transform: translateY(-2px);
}

/* حالت غیرفعال دیگر پیش نمی‌آید (کاروسل حلقه‌ای است)، ولی برای مرورگرهایی که به هر دلیل
   دکمه را غیرفعال می‌کنند نگه داشته شده. */
.dmsv-quotes__btn:disabled {
    opacity: .35;
    cursor: default;
    transform: none;
}

.dmsv-quotes__dots {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline: 6px;
}

.dmsv-quotes__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(120, 130, 150, .35);
    cursor: pointer;
    transition: width .3s ease, background-color .3s ease;
}

.dmsv-quotes__dot.is-on {
    width: 26px;
    border-radius: var(--pill-radius, 50px);
    background-color: var(--accent-primary);
}

/* ═══ متن بلند ═══ */

/* ⚠ جعبه و ارتفاعِ اسکرول با سه قالب کدی دیگر یکسان شد. قاعده‌های اختصاصیِ این جعبه
   (فهرست، نقل‌قول، جدول، تصویر) دست‌نخورده مانده‌اند: محتوای این یکی از ویرایشگر
   می‌آید و می‌تواند هر کدام از آن‌ها را داشته باشد، برخلاف سه قالب دیگر که متنشان
   ثابت است. حذفشان یعنی خراب‌شدن صفحه‌هایی که از آن‌ها استفاده کرده‌اند. */
.dmsv-longread__box {
    position: relative;
    margin-block-start: 18px;
    padding: clamp(22px, 2.6vw, 34px);
    border: 1px solid var(--border-color);
    border-radius: 26px;
    background-color: var(--bg-secondary);
}

/* ⚠ محوشدن لبهٔ پایین با یک لایهٔ گرادیانی ساخته می‌شود، نه با ماسک روی خودِ متن:
   ماسک، متن را به لایهٔ گرافیکی جدا می‌برد و روی موبایل حروف تار می‌شوند. */
.dmsv-longread__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;
}

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

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

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

/* متن سئویی از ویرایشگر کامل می‌آید، پس تیتر و فهرست و نقل‌قول هم لازم است. */
.dmsv-longread__inner h2,
.dmsv-longread__inner h3,
.dmsv-longread__inner h4,
.dmsv-longread__inner h5 {
    margin: 22px 0 10px;
    line-height: 1.8;
    color: var(--text-primary);
    text-align: start;
}

.dmsv-longread__inner h2 {
    font-size: clamp(19px, 1.9vw, 24px);
}

.dmsv-longread__inner h3 {
    font-size: clamp(17px, 1.7vw, 20px);
}

.dmsv-longread__inner h4,
.dmsv-longread__inner h5 {
    font-size: 16px;
}

.dmsv-longread__inner :first-child {
    margin-block-start: 0;
}

.dmsv-longread__inner ul,
.dmsv-longread__inner ol {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.dmsv-longread__inner li {
    position: relative;
    margin-block-end: 12px;
    padding-inline-start: 30px;
    font-size: 15px;
    line-height: 2;
    color: var(--text-secondary);
}

/* نشانهٔ فهرست نقطه‌ای: همان تیک برنجی نسخهٔ قبلی. */
.dmsv-longread__inner ul > li::before {
    content: "✓";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--accent-primary);
}

/* فهرست شماره‌دار شمارهٔ واقعی خودش را نگه می‌دارد. */
.dmsv-longread__inner ol {
    counter-reset: dmsv-ol;
}

.dmsv-longread__inner ol > li {
    counter-increment: dmsv-ol;
}

.dmsv-longread__inner ol > li::before {
    content: counter(dmsv-ol, persian) ".";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    font-weight: 700;
    color: var(--accent-primary);
}

.dmsv-longread__inner li strong,
.dmsv-longread__inner p strong {
    color: var(--text-primary);
}

.dmsv-longread__inner blockquote {
    margin: 0 0 16px;
    padding: 14px 18px;
    border-inline-start: 3px solid var(--accent-primary);
    border-radius: 12px;
    background-color: rgba(184, 115, 51, .07);
}

.dmsv-longread__inner blockquote p:last-child {
    margin-block-end: 0;
}

.dmsv-longread__inner img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
}

.dmsv-longread__inner table {
    width: 100%;
    margin-block-end: 16px;
    border-collapse: collapse;
    font-size: 14px;
}

.dmsv-longread__inner th,
.dmsv-longread__inner td {
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    text-align: start;
    color: var(--text-secondary);
}

.dmsv-longread__inner th {
    color: var(--text-primary);
    background-color: rgba(184, 115, 51, .07);
}

.dmsv-longread__inner::-webkit-scrollbar {
    width: 8px;
}

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

/* ═══ دیدگاه‌ها ═══
   ⚠ نشانه‌گذاری و شیوه‌نامهٔ دیدگاه‌ها همان‌های بلاگ‌اند و روی متغیرهای dmhb تکیه دارند؛
   آن متغیرها روی ریشهٔ بلاگ تعریف شده‌اند که اینجا وجود ندارد. پس همان توکن‌ها را با
   رنگ‌های همین سکشن اینجا تعریف می‌کنیم تا نه فایل دومی لازم باشد نه رنگ‌ها غلط بیفتد. */
/* ⚠ همان قاعدهٔ قالب خدمات طراحی سایت: پیوندهای خودِ وردپرس در فرم دیدگاه رنگ قدیمی سایت
   را با important می‌گیرند و باید با انتخابگر پدر-فرزندی بازنویسی شوند. */
.dmsv-comments__box .logged-in-as a,
.dmsv-comments__box .logged-in-as a:visited,
.dmsv-comments__box .comment-notes a,
.dmsv-comments__box .comment-notes a:visited,
.dmsv-comments__box .comment-reply-link,
.dmsv-comments__box .comment-reply-link:visited,
.dmsv-comments__box #cancel-comment-reply-link,
.dmsv-comments__box #cancel-comment-reply-link:visited,
.dmsv-comments__box .comment-author a,
.dmsv-comments__box .comment-author a:visited,
.dmsv-comments__box .comment-metadata a,
.dmsv-comments__box .comment-metadata a:visited {
    color: var(--accent-primary) !important;
}

.dmsv-comments__box .logged-in-as a:hover,
.dmsv-comments__box .comment-reply-link:hover,
.dmsv-comments__box #cancel-comment-reply-link:hover {
    color: var(--accent-secondary) !important;
}

.dmsv-comments__box {
    --dmhb-bg: transparent;
    --dmhb-surface: var(--bg-secondary);
    --dmhb-surface-2: var(--bg-primary);
    --dmhb-text: var(--text-primary);
    --dmhb-muted: var(--text-secondary);
    --dmhb-border: var(--border-color);
    --dmhb-accent: var(--accent-primary);
    --dmhb-accent-soft: var(--accent-secondary);
    --dmhb-radius: 16px;
    --dmhb-shadow: 0 12px 30px rgba(10, 25, 47, .14);
    margin-block-start: clamp(18px, 2.4vw, 30px);
}

/* ═══ ورود پلکانی با اسکرول ═══ */

.dmsv-reveal-ready .js-dmsv-reveal {
    opacity: 0;
    transform: translateY(30px) scale(.97);
    transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
}

.dmsv-reveal-ready .js-dmsv-reveal.is-in {
    opacity: 1;
    transform: none;
}

.logged-in-as a {
    color: var(--accent-primary) !important;
}

/* ═══ ریسپانسیو ═══ */

@media (max-width: 991px) {
    .dmsv-hero {
        padding-block: 140px 100px;
    }

    .dmsv-hero__grid,
    .dmsv-answer__grid,
    .dmsv-why__grid,
    .dmsv-qpair__grid,
    .dmsv-faq__body {
        grid-template-columns: minmax(0, 1fr);
    }

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

    .dmsv-hero__visual {
        order: -1;
    }

    /* موبایل: ردیف دوستونی معنا ندارد، پس استک روی خودِ کارت‌ها می‌نشیند.
       ⚠ ظرف ردیف باید از چیدمان برداشته شود؛ عنصر چسبان فقط داخل جعبهٔ والدش می‌چسبد و
       تا وقتی هر کارت داخل ردیف خودش باشد، به‌محض تمام‌شدن آن ردیف رها می‌شود. */
    .dmsv-services__row {
        display: contents;
    }

    .dmsv-services__head {
        position: sticky;
        top: 88px;
        z-index: 30;
        margin-block-end: 18px;
        padding-block: 10px 14px;
        background-color: var(--bg-primary);
    }

    .dmsv-card {
        position: sticky;
        /* پله‌های کوچکِ پشت‌سرهم تا لبهٔ کارت زیرین دیده شود؛ عدد پایه = جای نشستن متن. */
        top: calc(210px + (var(--dmsv-i, 0) * 12px));
        z-index: calc(10 + var(--dmsv-i, 0));
        margin-block-end: 46px;
    }

    .dmsv-why__intro {
        position: static;
    }

    /* موبایل: کارت‌ها ساده زیر هم؛ هم‌ارتفاعی و دوردیفه‌بودن هر دو برداشته می‌شوند. */
    .dmsv-why__cards {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
    }

    .dmsv-why__card--tall {
        grid-row: auto;
    }

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

    .dmsv-faq__image {
        order: 0;
        max-width: 420px;
        aspect-ratio: 4 / 3;
    }

    .dmsv-quotes__item {
        flex-basis: calc((100% - clamp(16px, 2vw, 28px)) / 2);
    }

    .dmsv-card {
        min-height: 300px;
    }
}

@media (max-width: 640px) {
    .dmsv-quotes__item {
        flex-basis: 100%;
    }

    .dmsv-quotes__card,
    .dmsv-quotes__item.is-active .dmsv-quotes__card {
        transform: none;
        opacity: 1;
    }
}

@media (max-width: 575px) {
    .dmsv-why__cards,
    .dmsv-support__cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    /* ⚠ موج دیگر مالِ این قالب نیست؛ خاموش‌کردن انیمیشنش کارِ شیوه‌نامهٔ سراسری است. */
    .dmsv-faq__track {
        animation: none;
    }

    .dmsv-hero__figure,
    .dmsv-hero__visual::before {
        transform: none;
        transition: none;
    }

    .dmsv-reveal-ready .js-dmsv-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}