/* dmhouse-mashhad.css — شیوه‌نامهٔ قالب «طراحی سایت در مشهد».
   ⚠ هیچ‌جای این پرونده filter، backdrop-filter، perspective یا translateZ ندارد. حسِ
   شیشه و برجستگی فقط از رنگ، گرادیان و سایه ساخته می‌شود؛ هر چهار خصوصیتِ بالا عنصر
   را روی لایهٔ گرافیکی جدا می‌برند و در موبایل متن روی آن مات می‌شود.
   ⚠ رنگ‌ها از متغیرهای تم خوانده می‌شوند تا سکشن روشن و تیره هر دو درست دربیایند. */

/* ⚠ ویژگی hidden امتیاز ۰-۱-۰ دارد و هر کلاسی که display بدهد آن را می‌بازد؛ بدون این
   قاعده، عنصری که اسکریپت پنهانش کرده کاملاً دیده می‌شود و خطایی هم نمی‌دهد. */
[hidden] {
    display: none !important;
}

.dmmh-main {
    overflow: clip;
}

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

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

/* ⚠ رنگ پیوندها. یک قاعدهٔ سطح سایت، رنگ هر پیوند را از متغیر رنگِ اصلیِ سازندهٔ صفحه
   می‌گیرد و با important می‌نشاند — همان صورتی. هیچ ویژگی سلکتوری بر important غلبه
   نمی‌کند، پس تنها راه، important در برابر important است.

   ⚠⚠ اینجا عمداً هیچ قاعدهٔ فراگیری روی «هر پیوندِ داخل قالب» نوشته نشده، و این یک
   اصلاح پس از یک خرابی واقعی است: نسخهٔ اول یک قاعدهٔ فراگیر داشت و رنگ پیوندهای
   خروجی شورت‌کدها را هم عوض می‌کرد — کارت‌های نمونه‌کار، که استایل خودشان را دارند و
   این قالب حق دست‌زدن به آن‌ها را ندارد.
   قاعده: فقط پیوندهایی که خودِ همین قالب چاپشان می‌کند، تک‌به‌تک نام برده می‌شوند.
   هر پیوند تازه‌ای که در این قالب اضافه شود باید به همین فهرست هم اضافه شود، وگرنه
   صورتی می‌ماند. این هزینه، در برابر دست‌درازی به مؤلفه‌های مشترک، پذیرفته شده است. */
.dmmh-hero__lead a,
.dmmh-hero__lead a:visited,
.dmmh-kind__text a,
.dmmh-kind__text a:visited,
.dmmh-team__lead a,
.dmmh-team__lead a:visited,
.dmmh-cost__lead a,
.dmmh-cost__lead a:visited,
.dmmh-way__text a,
.dmmh-way__text a:visited,
.dmmh-asks__link,
.dmmh-asks__link:visited,
.dmmh-head__link,
.dmmh-head__link:visited,
.dmmh-read__body a,
.dmmh-read__body a:visited,
.dmmh-jump:hover,
.dmmh-jump:focus-visible,
.dmmh-map__value:hover {
    color: var(--accent-primary) !important;
}

.dmmh-jump,
.dmmh-jump:visited,
.dmmh-way__cta,
.dmmh-way__cta:visited,
.dmmh-btn--ghost,
.dmmh-btn--ghost:visited,
.dmmh-map__value,
.dmmh-map__value:visited {
    color: var(--text-primary) !important;
}

/* ⚠ پیوندهای جعبهٔ دیدگاه‌ها عمداً اینجا نیستند: آن مؤلفه شیوه‌نامهٔ خودش را دارد و
   رنگ پیوندهایش را خودش با اجبار می‌نشاند. نوشتن قاعده برای آن‌ها یعنی همان
   دست‌درازی‌ای که قرار شد نکنیم. */

.dmmh-btn--ghost:hover,
.dmmh-btn--ghost:focus-visible {
    color: var(--accent-primary) !important;
}

/* دکمه‌های توپر متن سفید دارند. */
.dmmh-btn--solid,
.dmmh-btn--solid:visited,
.dmmh-btn--solid:hover,
.dmmh-kind__cta,
.dmmh-kind__cta:visited,
.dmmh-kind__cta:hover {
    color: #fff !important;
}

/* ⚠ فاصلهٔ سکشن‌ها از یک مقیاس واحد خوانده می‌شود، نه عددِ جداگانه در هر سکشن. هر
   سکشنی که نیاز به فاصلهٔ متفاوت دارد، فقط همین متغیر را عوض می‌کند. */
/* ⚠ همان مقیاسی که قالب‌های خدمات و طراحی سایت دارند، عیناً. فاصلهٔ سکشن موج‌دار هم
   با همان فرمولِ آن دو نوشته می‌شود: ارتفاع موج به‌علاوهٔ فاصلهٔ تنفس. با این کار هر
   چهار قالب کدی یک ریتم عمودی دارند و اگر روزی عوض شود، در یک نقطهٔ هر قالب عوض
   می‌شود نه در تک‌تک سکشن‌ها. */
.dmmh-main {
    --dmmh-pad: clamp(56px, 7vw, 110px);
    --dmmh-pad-wave: calc(clamp(50px, 8vw, 120px) + clamp(40px, 5vw, 70px));
}

.dmmh-sec {
    position: relative;
    padding-block: var(--dmmh-pad);
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

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

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

.dmmh-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-block-end: clamp(24px, 3vw, 40px);
}

.dmmh-head--center {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* ⚠ برچسب و سرتیتر زیر هم، هر دو چسبیده به لبهٔ آغازین. کلاس پایه چیدمان دوسرِ ردیف
   دارد (برای سکشن‌هایی که کنار عنوان یک دکمه دارند) و روی سکشنی که فقط برچسب و عنوان
   دارد، آن دو را به دو سرِ صفحه پرت می‌کرد. */
.dmmh-head--stack {
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
}

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

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

.dmmh-head--center .dmmh-title {
    text-align: center;
}

.dmmh-kind__title,
.dmmh-asks__q,
.dmmh-why__title {
    text-align: start;
}

.dmmh-title span {
    color: var(--accent-primary);
}

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

.dmmh-head__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid var(--border-color);
    border-radius: var(--pill-radius, 50px);
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-primary);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.dmmh-head__link:hover,
.dmmh-head__link:focus-visible {
    border-color: var(--accent-primary);
    background-color: var(--bg-secondary);
}

/* ⚠ فلش در راست‌به‌چپ باید به سمت چپ باشد؛ خودِ نشانه در نشانه‌گذاری به همان سمت
   کشیده شده و اینجا هیچ چرخشی لازم نیست. چرخاندنِ آن، جهت را برعکس می‌کند. */
.dmmh-head__link svg {
    transition: transform var(--transition-fast);
}

.dmmh-head__link:hover svg {
    transform: translateX(-3px);
}

/* دکمه‌ها */
.dmmh-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 26px;
    border-radius: var(--pill-radius, 50px);
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    transition: box-shadow var(--transition-fast), background-color var(--transition-fast),
                border-color var(--transition-fast), color var(--transition-fast);
}

.dmmh-btn--solid {
    background-image: linear-gradient(170deg, #c98a4d 0%, #b87333 52%, #9c5c25 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .40),
                inset 0 -1px 0 rgba(60, 32, 8, .38),
                0 6px 14px -10px rgba(90, 52, 18, .95);
    color: #fff;
}

.dmmh-btn--solid:hover,
.dmmh-btn--solid:focus-visible {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55),
                inset 0 -1px 0 rgba(60, 32, 8, .40),
                0 10px 20px -12px rgba(90, 52, 18, .95);
}

.dmmh-btn--ghost {
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.dmmh-btn--ghost:hover,
.dmmh-btn--ghost:focus-visible {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

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

.dmmh-hero {
    padding-block: clamp(96px, 11vw, 150px) clamp(48px, 6vw, 84px);
    overflow: hidden;
}

/* ⚠ درخشش با گرادیان شعاعی است نه با filter: blur — همان چیزی که در موبایل متن را
   تار می‌کند. گرادیان شعاعی خودش لبهٔ نرم دارد و به لایهٔ جدا نیاز ندارد. */
.dmmh-hero__glow {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
}

.dmmh-hero__glow--a {
    inset-block-start: -14%;
    inset-inline-end: -8%;
    width: min(56vw, 640px);
    aspect-ratio: 1;
    background-image: radial-gradient(circle at 50% 50%,
                      rgba(184, 115, 51, .17) 0%,
                      rgba(184, 115, 51, .07) 42%,
                      rgba(184, 115, 51, 0) 70%);
}

.dmmh-hero__glow--b {
    inset-block-end: -22%;
    inset-inline-start: -12%;
    width: min(48vw, 520px);
    aspect-ratio: 1;
    background-image: radial-gradient(circle at 50% 50%,
                      rgba(10, 25, 47, .10) 0%,
                      rgba(10, 25, 47, .04) 45%,
                      rgba(10, 25, 47, 0) 70%);
}

.dmmh-hero__grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* ⚠ محو شدن شبکه با ماسک انجام نمی‌شود؛ ماسک لایهٔ گرافیکی جدا می‌سازد و در موبایل
       متن روی آن مات می‌شود. به‌جایش یک لایهٔ گرادیانِ هم‌رنگِ سکشن روی خودِ شبکه
       می‌نشیند و آن را از بالا و پایین به پس‌زمینه می‌بَرَد. لایهٔ اول رویِ همه است. */
    background-image: linear-gradient(to bottom,
                      var(--bg-primary) 0%,
                      rgba(255, 255, 255, 0) 22%,
                      rgba(255, 255, 255, 0) 62%,
                      var(--bg-primary) 100%),
                      linear-gradient(to left, var(--border-color) 1px, transparent 1px),
                      linear-gradient(to bottom, var(--border-color) 1px, transparent 1px);
    background-size: 100% 100%, 62px 62px, 62px 62px;
    opacity: .5;
    pointer-events: none;
}

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

.dmmh-hero__pin {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-block-end: 18px;
    padding: 7px 16px;
    border: 1px solid rgba(184, 115, 51, .38);
    border-radius: var(--pill-radius, 50px);
    background-color: var(--bg-secondary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .70);
    font-size: 13px;
    font-weight: 800;
    color: var(--accent-primary);
}

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

.dmmh-hero__lead {
    margin: 0 0 28px;
    max-width: 62ch;
    font-size: 15px;
    line-height: 2.15;
    color: var(--text-secondary);
    text-align: start;
}

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

.dmmh-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.dmmh-hero__stage {
    position: relative;
    min-width: 0;
}

.dmmh-hero__frame {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 28px;
    background-color: var(--bg-secondary);
    background-image: linear-gradient(180deg,
                      rgba(255, 255, 255, .55) 0%,
                      rgba(255, 255, 255, .12) 46%,
                      rgba(255, 255, 255, 0) 47%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85),
                0 30px 60px -46px rgba(10, 25, 47, .85);
    /* ⚠ نسبت ابعاد تنها معیار نبود و همان بود که قاب را کشیده می‌کرد: روی نمایشگر پهن،
       ستون تصویر عریض می‌شود و ارتفاعش هم به همان نسبت بالا می‌رود. سقف ارتفاع، آن را
       مهار می‌کند؛ کف ارتفاع هم می‌گذارد در نمایشگر باریک بیش از حد کوتاه نشود. */
    aspect-ratio: 5 / 4.4;
    min-height: 320px;
    max-height: 470px;
}

.dmmh-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* طرح انتزاعیِ جایگزینِ تصویر */
.dmmh-hero__mock {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    padding: clamp(20px, 3vw, 34px);
}

.dmmh-hero__mockbar {
    display: flex;
    gap: 7px;
    margin-block-end: 6px;
}

.dmmh-hero__mockbar i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(184, 115, 51, .35);
}

.dmmh-hero__mockrow {
    height: 12px;
    border-radius: 8px;
    background-color: rgba(10, 25, 47, .09);
}

.dmmh-hero__mockrow--w1 { width: 78%; }
.dmmh-hero__mockrow--w2 { width: 56%; }
.dmmh-hero__mockrow--w3 { width: 66%; background-color: rgba(184, 115, 51, .26); }

.dmmh-hero__mockgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    flex: 1;
    margin-block-start: 8px;
}

.dmmh-hero__mockgrid i {
    border-radius: 16px;
    background-color: rgba(10, 25, 47, .06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.dmmh-hero__chip {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 18px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background-color: var(--bg-primary);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .70), rgba(255, 255, 255, 0) 55%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95),
                0 16px 30px -24px rgba(10, 25, 47, .9);
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.dmmh-hero__chip b {
    font-size: 17px;
    color: var(--accent-primary);
}

.dmmh-hero__chip--one {
    inset-block-start: 12%;
    inset-inline-start: -14px;
}

.dmmh-hero__chip--two {
    inset-block-end: 10%;
    inset-inline-end: -14px;
}


/* ═══════════ دو کارت لنگر زیر هیرو ═══════════ */

/* ⚠ جای تیکر را دو کارت ثابت گرفت. نوار متحرک برای شش پیوندِ بیرونی معنی داشت؛ برای دو
   لنگرِ داخلِ همان صفحه، حرکت فقط حواس را پرت می‌کرد. */
.dmmh-jumps {
    padding-block: clamp(20px, 2.4vw, 32px);
}

.dmmh-jumps__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 1.6vw, 20px);
}

.dmmh-jump {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border: 1px solid rgba(184, 115, 51, .30);
    border-radius: var(--pill-radius, 50px);
    background-color: rgba(184, 115, 51, .07);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color var(--transition-fast), background-color var(--transition-fast),
                color var(--transition-fast);
}

.dmmh-jump:hover,
.dmmh-jump:focus-visible {
    border-color: var(--accent-primary);
    background-color: rgba(184, 115, 51, .18);
}

.dmmh-jump__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border: 1px solid rgba(184, 115, 51, .34);
    border-radius: 14px;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 55%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
    color: var(--accent-primary);
}

/* ⚠ پیکان رو به پایین است، نه رو به چپ: مقصدِ این دو کارت پایینِ همین صفحه است نه یک
   صفحهٔ دیگر، و شکلِ نشانه باید همان را بگوید. گوشهٔ ساخته‌شده از ضلع چپ و پایین با
   چرخش منفیِ چهل‌وپنج درجه رو به پایین می‌ایستد. */
.dmmh-jump__go {
    position: relative;
    display: inline-flex;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border: 1px solid rgba(184, 115, 51, .45);
    border-radius: 50%;
    background-color: rgba(184, 115, 51, .12);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.dmmh-jump__go::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 7px;
    height: 7px;
    border-left: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: translateY(-1px) rotate(-45deg);
    transition: transform var(--transition-fast);
}

.dmmh-jump:hover .dmmh-jump__go,
.dmmh-jump:focus-visible .dmmh-jump__go {
    border-color: var(--accent-primary);
    background-color: rgba(184, 115, 51, .28);
}

.dmmh-jump:hover .dmmh-jump__go::after,
.dmmh-jump:focus-visible .dmmh-jump__go::after {
    transform: translateY(2px) rotate(-45deg);
}

@media (max-width: 767px) {
    .dmmh-jumps__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .dmmh-jump {
        padding: 14px 16px;
        font-size: 15px;
    }
}

/* ═══════════ هزینه و دو راهِ پیشِ رو ═══════════ */

/* ⚠ این سکشن تنها سکشنِ تیرهٔ صفحه است که موجِ پایین ندارد: سکشن بعد از آن، مسیر
   دایره‌ای است که خودش دو لایهٔ روشن و تیره دارد و با اسکرول عوض می‌شود؛ یک موج در آن
   مرز، فقط شلوغی می‌سازد. چون موج پایین حذف شده، فاصلهٔ پایینِ سکشن هم باید به اندازهٔ
   عادی برگردد — وگرنه یک فضای خالیِ به اندازهٔ ارتفاع موج باقی می‌ماند. */
.dmmh-cost.section-meld {
    padding-block: var(--dmmh-pad-wave) var(--dmmh-pad);
}

.dmmh-main section.dmmh-cost.theme-dark.section-meld::after {
    display: none;
}

/* ⚠ سقف عرض برداشته شد: حالا که اطلاعات کلیدی به کارت‌ها منتقل شده، این متن نقش مقدمهٔ
   تمام‌عرضِ سکشن را دارد و کوتاه نگه‌داشتنش فقط یک ستون خالی کنارش می‌ساخت. */
.dmmh-cost__lead {
    margin-block-end: clamp(28px, 3.4vw, 48px);
}

/* ⚠ چیدمان با flex نوشته شده نه grid، و این تصمیمِ کلیدیِ این سکشن است: تعاملِ «باز
   شدنِ یکی و عقب رفتنِ دیگری» با نسبتِ رشدِ آیتم‌های flex ساخته می‌شود. با grid باید
   خودِ ستون‌ها را عوض می‌کردیم که هم پرش می‌سازد و هم نرم میان‌یابی نمی‌شود. */
.dmmh-cost__ways {
    display: flex;
    align-items: stretch;
    gap: clamp(14px, 2vw, 26px);
}

.dmmh-way {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    padding: clamp(22px, 2.4vw, 34px);
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 26px;
    background-color: var(--bg-secondary);
    box-shadow: 0 18px 40px -32px rgba(10, 25, 47, .9);
    transition: flex-grow .5s cubic-bezier(.22, 1, .36, 1), border-color .4s ease,
                background-color .4s ease, box-shadow .4s ease, opacity .4s ease;
}

/* هالهٔ گوشه — فقط یک گرادیان شعاعی، بدون فیلتر و بدون لایهٔ گرافیکی. */
.dmmh-way__glow {
    position: absolute;
    inset-block-start: -40%;
    inset-inline-start: -20%;
    width: 70%;
    height: 160%;
    background-image: radial-gradient(closest-side, rgba(184, 115, 51, .16), transparent);
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
}

.dmmh-way > *:not(.dmmh-way__glow) {
    position: relative;
}

/* ⚠ «انتخاب» با هاور یا فوکوسِ داخلِ هر مسیر نشان داده می‌شود: همان مسیر پهن‌تر و
   روشن‌تر می‌شود و مسیر دیگر باریک و کم‌رنگ. هیچ‌چیز پنهان نمی‌شود، پس مقایسه سرِ جایش
   می‌ماند — برخلاف الگوی تب که یکی از دو گزینه را کاملاً کنار می‌گذارد. */
.dmmh-cost__ways:hover .dmmh-way:hover,
.dmmh-cost__ways:focus-within .dmmh-way:focus-within {
    flex-grow: 1.55;
    border-color: rgba(184, 115, 51, .5);
    background-color: var(--bg-primary);
    box-shadow: 0 26px 52px -30px rgba(10, 25, 47, .95);
}

.dmmh-cost__ways:hover .dmmh-way:hover .dmmh-way__glow,
.dmmh-cost__ways:focus-within .dmmh-way:focus-within .dmmh-way__glow {
    opacity: 1;
}

.dmmh-cost__ways:hover .dmmh-way:not(:hover),
.dmmh-cost__ways:focus-within .dmmh-way:not(:focus-within) {
    flex-grow: .8;
    opacity: .72;
}

/* ⚠ کلمهٔ «یا» عمداً نوشته نشده؛ همین خطِ عمودی با گرهٔ مسیِ میانی، همان دوراهی را
   می‌گوید بدون اینکه واژه‌ای اضافه شود. */
/* ⚠ خودِ خط، یک ظرفِ flex شد تا گره را وسط بنشاند. راه قبلی — چهار صفرِ inset و حاشیهٔ
   خودکار — درست به نظر می‌رسید ولی نبود: وقتی عنصر از ظرفش پهن‌تر است، استاندارد اجازه
   نمی‌دهد دو حاشیهٔ خودکار هر دو منفی و برابر شوند و در صفحهٔ راست‌به‌چپ حاشیهٔ سمت راست
   را صفر می‌کند؛ نتیجه‌اش همان گرهِ متمایل به چپ بود.
   مرکزچینیِ flex این استثنا را ندارد: آیتمی که از ظرف پهن‌تر باشد، از دو طرف قرینه
   بیرون می‌زند — بی‌توجه به جهت نوشتار. */
.dmmh-cost__split {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1px;
    align-self: stretch;
    background-image: linear-gradient(180deg, transparent, var(--border-color) 18%, var(--border-color) 82%, transparent);
}

.dmmh-cost__knot {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background-image: linear-gradient(170deg, #c98a4d 0%, #b87333 52%, #9c5c25 100%);
    box-shadow: 0 0 0 5px var(--bg-primary), 0 0 0 6px var(--border-color);
    transform: rotate(45deg);
}

.dmmh-way__tag {
    align-self: flex-start;
    margin-block-end: 12px;
    padding: 6px 15px;
    border: 1px solid rgba(184, 115, 51, .3);
    border-radius: var(--pill-radius, 50px);
    background-color: rgba(184, 115, 51, .09);
    font-size: 12px;
    font-weight: 800;
    color: var(--accent-primary);
}

.dmmh-way__title {
    margin: 0 0 12px;
    font-size: clamp(19px, 2.1vw, 26px);
    line-height: 1.7;
    color: var(--text-primary);
    text-align: start;
}

.dmmh-way__text {
    flex: 1;
    margin: 0;
    font-size: 14px;
    line-height: 2.05;
    color: var(--text-secondary);
    text-align: start;
}

.dmmh-way__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 9px;
    margin: 20px 0 0;
    padding: 14px 18px;
    border: 1px solid rgba(184, 115, 51, .22);
    border-radius: 16px;
    background-image: linear-gradient(140deg, rgba(184, 115, 51, .12), transparent);
}

.dmmh-way__price-from {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.dmmh-way__price-val {
    font-family: 'gofteh';
    font-size: clamp(19px, 2vw, 24px);
    font-weight: 900;
    color: var(--accent-primary);
}

.dmmh-way__cta {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 10px;
    margin-block-start: 22px;
    padding: 12px 22px;
    border: 1px solid var(--border-color);
    border-radius: var(--pill-radius, 50px);
    background-color: var(--bg-primary);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.dmmh-way__cta:hover,
.dmmh-way__cta:focus-visible {
    border-color: var(--accent-primary);
    background-color: var(--bg-secondary);
}

/* پیکان رو به چپ: مقصد این دو، صفحهٔ دیگری است نه جایی در همین صفحه. */
.dmmh-way__go {
    position: relative;
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border: 1px solid rgba(184, 115, 51, .4);
    border-radius: 50%;
    color: var(--accent-primary);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.dmmh-way__go::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 6px;
    height: 6px;
    border-left: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: translateX(1px) rotate(45deg);
    transition: transform var(--transition-fast);
}

.dmmh-way__cta:hover .dmmh-way__go,
.dmmh-way__cta:focus-visible .dmmh-way__go {
    border-color: var(--accent-primary);
    background-color: rgba(184, 115, 51, .12);
}

.dmmh-way__cta:hover .dmmh-way__go::after,
.dmmh-way__cta:focus-visible .dmmh-way__go::after {
    transform: translateX(-2px) rotate(45deg);
}

/* ⚠ زیر ۹۹۲ پیکسل، دو مسیر زیر هم می‌آیند و خطِ عمودیِ میانی به یک خطِ افقیِ نازک با
   همان گره تبدیل می‌شود. تعاملِ باز و بستهٔ شدن هم خاموش می‌شود: روی صفحهٔ لمسی هاور
   می‌چسبد و یکی از دو مسیر برای همیشه کم‌رنگ می‌ماند. */
@media (max-width: 992px) {
    .dmmh-cost__ways {
        flex-direction: column;
    }

    /* ⚠ پایهٔ انعطاف باید به «خودکار» برگردد، نه فقط رشدش صفر شود. در چیدمان ستونی، پایهٔ
       صفر یعنی ارتفاعِ صفر، و چون این کارت‌ها overflow پنهان دارند، حداقلِ خودکارِ ارتفاع
       هم از کار می‌افتد؛ نتیجه دو کارتِ کاملاً جمع‌شده بود. */
    .dmmh-way,
    .dmmh-cost__ways:hover .dmmh-way:hover,
    .dmmh-cost__ways:hover .dmmh-way:not(:hover),
    .dmmh-cost__ways:focus-within .dmmh-way:focus-within,
    .dmmh-cost__ways:focus-within .dmmh-way:not(:focus-within) {
        flex: 0 0 auto;
        opacity: 1;
    }

    .dmmh-cost__split {
        width: 100%;
        height: 1px;
        background-image: linear-gradient(90deg, transparent, var(--border-color) 18%, var(--border-color) 82%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dmmh-way,
    .dmmh-way__glow {
        transition: none;
    }
}

/* ═══════════ تیم ═══════════ */

.dmmh-team__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

.dmmh-team__media {
    position: relative;
    min-width: 0;
}

/* لکهٔ رنگیِ پشت تصویر؛ گرادیان شعاعی است نه سایهٔ محو. */
.dmmh-team__shape {
    position: absolute;
    inset: -8% -6%;
    z-index: 0;
    border-radius: 50%;
    background-image: radial-gradient(circle at 50% 50%,
                      rgba(184, 115, 51, .16) 0%,
                      rgba(184, 115, 51, .05) 48%,
                      rgba(184, 115, 51, 0) 72%);
    pointer-events: none;
}

/* الگوی نقطه‌چینِ گوشه؛ عمق می‌دهد بدون اینکه چیزی به محتوا اضافه کند. */
.dmmh-team__dots {
    position: absolute;
    z-index: 0;
    inset-block-end: -18px;
    inset-inline-end: -18px;
    width: clamp(110px, 14vw, 180px);
    aspect-ratio: 1;
    background-image: radial-gradient(rgba(184, 115, 51, .32) 1.5px, transparent 1.6px);
    background-size: 14px 14px;
    opacity: .7;
    pointer-events: none;
}

/* ⚠ قاب کمی کج است و آرام بالا و پایین می‌رود. چرخش و شناوری فقط روی قاب تصویر است،
   نه روی هیچ عنصر متنی: انیمیشنِ تبدیل روی متن، در بعضی مرورگرها حروف را یک درجه
   نرم می‌کند و قرار بود هیچ‌جای این صفحه متن تار نشود. */
.dmmh-team__frame {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 28px;
    background-color: var(--bg-secondary);
    box-shadow: 0 30px 60px -44px rgba(10, 25, 47, .9);
    transform: rotate(-1.6deg);
    animation: dmmh-team-float 7s ease-in-out infinite alternate;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.dmmh-team__media:hover .dmmh-team__frame {
    transform: rotate(0deg) scale(1.012);
    animation-play-state: paused;
}

@keyframes dmmh-team-float {
    from { transform: rotate(-1.6deg) translateY(0); }
    to   { transform: rotate(-1.6deg) translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
    .dmmh-team__frame {
        animation: none;
    }
}

.dmmh-team__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 11;
    object-fit: cover;
}

/* براکت مسیِ دو گوشه؛ فقط دو خط، ولی قاب را از یک مستطیل ساده درمی‌آورد. */
.dmmh-team__corner {
    position: absolute;
    z-index: 2;
    width: 46px;
    height: 46px;
    pointer-events: none;
}

.dmmh-team__corner--a {
    inset-block-start: 14px;
    inset-inline-start: 14px;
    border-block-start: 2px solid rgba(184, 115, 51, .65);
    border-inline-start: 2px solid rgba(184, 115, 51, .65);
    border-start-start-radius: 12px;
}

.dmmh-team__corner--b {
    inset-block-end: 14px;
    inset-inline-end: 14px;
    border-block-end: 2px solid rgba(184, 115, 51, .65);
    border-inline-end: 2px solid rgba(184, 115, 51, .65);
    border-end-end-radius: 12px;
}

/* طرح جایگزینِ تصویر تیم: چند نفر پشت یک میز، فقط با شکل. */
.dmmh-team__mock {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 14px;
    aspect-ratio: 16 / 11;
    padding: 0 12% 16%;
    background-image: linear-gradient(180deg, rgba(184, 115, 51, .10), rgba(184, 115, 51, .02));
}

.dmmh-team__mockrow {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 12%;
}

.dmmh-team__mockrow i {
    width: 22%;
    aspect-ratio: 1;
    border-radius: 50% 50% 34% 34%;
    background-color: rgba(10, 25, 47, .13);
}

.dmmh-team__mockrow i:nth-child(2) {
    width: 26%;
    background-color: rgba(184, 115, 51, .28);
}

.dmmh-team__mockdesk {
    height: 14px;
    border-radius: 6px;
    background-color: rgba(10, 25, 47, .16);
}

/* ═══ نمایان‌شدن با اسکرول ═══
   ⚠ حالت اولیه را جاوااسکریپت می‌سازد (کلاس is-armed روی سکشن)؛ بدون جاوااسکریپت
   هیچ‌چیز پنهان یا جابه‌جا نیست و سکشن کامل دیده می‌شود.
   ⚠ حالت پایانی transform: none است نه translateY صفر، تا بعد از پایان حرکت هیچ
   لایهٔ گرافیکیِ اضافه‌ای زیر متن باقی نماند. */
.dmmh-team.is-armed .dmmh-team__media,
.dmmh-team.is-armed .dmmh-team__text {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}

.dmmh-team.is-armed .dmmh-team__text {
    transition-delay: .12s;
}

.dmmh-team.is-armed.is-in .dmmh-team__media,
.dmmh-team.is-armed.is-in .dmmh-team__text {
    opacity: 1;
    transform: none;
}

/* خط تأکیدیِ بالای عنوان. */
.dmmh-team__bar {
    display: block;
    width: 54px;
    height: 4px;
    margin-block-end: 18px;
    border-radius: 4px;
    background-image: linear-gradient(to left, var(--color-gold, #f5d68f), var(--color-copper, #b87333));
}

.dmmh-team__title {
    margin-block-end: 16px;
}

.dmmh-team__lead {
    margin-block-start: 0;
}

.dmmh-team__badge {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 18px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background-color: var(--bg-primary);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .70), rgba(255, 255, 255, 0) 55%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95),
                0 16px 30px -24px rgba(10, 25, 47, .9);
    font-size: 12px;
    color: var(--text-secondary);
}

/* ⚠ این نشان‌ها با لایهٔ سفید ساخته شده‌اند که برای زمینهٔ روشن تنظیم شده بود؛ روی سکشن
   تیره همان لایه، نشان را به یک لکهٔ شیری تبدیل می‌کرد. فقط شدتِ سفید کم می‌شود، نه
   ساختار — بقیهٔ رنگ‌ها از متغیرهای تم می‌آیند و خودشان درست می‌چرخند. */
.dmmh-team.theme-dark .dmmh-team__badge {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 55%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18),
                0 16px 30px -22px rgba(0, 0, 0, .95);
}

.dmmh-team__badge b {
    font-size: 17px;
    color: var(--accent-primary);
}

.dmmh-team__badge--count {
    inset-block-start: 8%;
    inset-inline-start: -12px;
}

.dmmh-team__badge--warranty {
    inset-block-end: 8%;
    inset-inline-end: -12px;
}

/* ═══════════ مسیر طراحی ═══════════ */

.dmmh-path {
    padding-block-end: 0;
}

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

/* ⚠ ارتفاع سکشن نسبت مستقیم با تعداد کارت‌ها دارد: به ازای هر کارت یک «گام» اسکرول.
   عمداً کوتاه گرفته شده (نصف ارتفاع پنجره به ازای هر کارت) چون سکشنِ مسیر دایره‌ای هم
   صفحه را نگه می‌دارد و دو نگه‌داشتنِ طولانی پشت سر هم، حس قفل‌شدن صفحه می‌دهد. */
.dmmh-why {
    padding-block: 0;
}

.dmmh-why__sticky {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    padding-block: clamp(56px, 7vw, 104px);
}

.dmmh-why__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 22px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmmh-why__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* کارت‌ها عمداً بلند و پرحجم‌اند: چهار کارت کنار هم روی نمایشگر پهن، اگر کوتاه
       باشند مثل چهار برچسب دیده می‌شوند نه چهار دلیلِ خریدن. */
    min-height: clamp(300px, 28vw, 380px);
    padding: clamp(26px, 2.6vw, 36px);
    border: 1px solid var(--border-color);
    border-radius: 26px;
    background-color: var(--bg-secondary);
    background-image: linear-gradient(180deg,
                      rgba(255, 255, 255, .80) 0%,
                      rgba(255, 255, 255, .20) 44%,
                      rgba(255, 255, 255, 0) 45%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95),
                0 10px 24px -20px rgba(10, 25, 47, .75);
    transition: opacity .45s ease, box-shadow .45s ease, border-color .45s ease,
                background-color .45s ease;
}

/* ⚠ حالتِ خاموش را جاوااسکریپت می‌سازد (کلاس is-ready روی خودِ فهرست)، نه شیوه‌نامه:
   بدون جاوااسکریپت هر چهار کارت روشن و کامل خوانده می‌شوند و هیچ متنی نیمه‌پنهان
   نمی‌ماند. کم‌رنگی هم با opacity است نه با رنگِ متن، تا کنتراست متنِ فعال دست‌نخورده
   بماند و در حالت خاموش هم متن خوانا بماند. */
.dmmh-why__grid.is-ready .dmmh-why__card {
    opacity: .48;
}

.dmmh-why__grid.is-ready .dmmh-why__card.is-on {
    opacity: 1;
    border-color: rgba(184, 115, 51, .45);
    background-color: var(--bg-primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),
                inset 0 0 0 1px rgba(184, 115, 51, .18),
                0 22px 44px -30px rgba(10, 25, 47, .85);
}

.dmmh-why__num {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 20px;
    font-size: clamp(52px, 5vw, 76px);
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(184, 115, 51, .28);
    transition: -webkit-text-stroke-color .45s ease;
    pointer-events: none;
}

.dmmh-why__grid.is-ready .dmmh-why__card.is-on .dmmh-why__num {
    -webkit-text-stroke-color: rgba(184, 115, 51, .55);
}

/* خط زیر عنوان که با فعال‌شدن کارت کشیده می‌شود؛ نشانِ حرکت، بدون جابه‌جایی چیزی. */
.dmmh-why__title::after {
    content: "";
    display: block;
    width: 34px;
    height: 3px;
    margin-block-start: 12px;
    border-radius: 3px;
    background-color: rgba(184, 115, 51, .28);
    transition: width .45s ease, background-color .45s ease;
}

.dmmh-why__grid.is-ready .dmmh-why__card.is-on .dmmh-why__title::after {
    width: 74px;
    background-image: linear-gradient(to left, var(--color-gold, #f5d68f), var(--color-copper, #b87333));
}

/* ⚠ align-self لازم است: کارت یک ستون انعطافی است و پیش‌فرضِ آن، عضو را تا کل عرض
   می‌کشد؛ بدون این خط مربعِ نشان به یک نوار تمام‌عرض تبدیل می‌شود. */
.dmmh-why__icon {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(184, 115, 51, .30);
    border-radius: 19px;
    background-image: linear-gradient(180deg, rgba(184, 115, 51, .16), rgba(184, 115, 51, .04));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
    color: var(--accent-primary);
    transition: background-image .45s ease, color .45s ease;
}

.dmmh-why__grid.is-ready .dmmh-why__card.is-on .dmmh-why__icon {
    background-image: linear-gradient(170deg, #c98a4d 0%, #b87333 52%, #9c5c25 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45),
                0 6px 14px -10px rgba(90, 52, 18, .95);
    color: #fff;
}

.dmmh-why__title {
    margin: auto 0 0;
    font-size: clamp(17px, 1.8vw, 21px);
    line-height: 1.7;
    color: var(--text-primary);
}

.dmmh-why__text {
    margin: 0;
    font-size: 14.5px;
    line-height: 2.05;
    color: var(--text-secondary);
    text-align: start;
}

/* ═══════════ سه نوع طراحی ═══════════ */

/* ⚠ سه ستون به دو ستون تغییر کرد چون کارت آموزشی حذف شد. با سه ستون، دو کارتِ باقی‌مانده
   دو سومِ عرض را می‌گرفتند و یک ستونِ خالی کنارشان می‌ماند. */
.dmmh-kinds__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 26px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmmh-kinds__cell {
    display: flex;
    min-width: 0;
}

/* ⚠ «شیشه‌ای» اینجا یعنی: پس‌زمینهٔ نیمه‌شفاف + یک لایهٔ نورِ بالا که نزدیک میانه قطع
   می‌شود + لبهٔ روشن. هیچ‌کدام از این سه، تاری تولید نمی‌کنند. اعلانِ اولِ رنگ یک
   عقب‌نشینی است برای مرورگری که color-mix را نشناسد. */
.dmmh-kind {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    padding: clamp(26px, 2.8vw, 38px);
    overflow: hidden;
    border-radius: 28px;
    background-color: var(--bg-secondary);
    background-color: color-mix(in srgb, var(--bg-secondary) 72%, transparent);
    /* ⚠ دو ایستگاهِ آخر پیش‌تر روی ۴۴ و ۴۵ درصد بودند، یعنی کل محوشدن در یک درصد اتفاق
       می‌افتاد و چشم آن را به‌شکل یک خطِ برش وسط کارت می‌دید. حالا محوشدن تا ته کارت
       کشیده شده و مرزی باقی نمی‌ماند. */
    background-image: linear-gradient(180deg,
                      rgba(255, 255, 255, .16) 0%,
                      rgba(255, 255, 255, .07) 38%,
                      rgba(255, 255, 255, .02) 68%,
                      rgba(255, 255, 255, 0) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10),
                inset 0 1px 0 rgba(255, 255, 255, .34),
                0 26px 50px -40px rgba(0, 0, 0, .95);
    transition: box-shadow .4s ease, transform .4s ease;
}

/* گوشهٔ براق: یک قوسِ نورانی که فقط روی گوشهٔ بالاییِ آغازین می‌نشیند. */
.dmmh-kind::before {
    content: "";
    position: absolute;
    inset-block-start: -55%;
    inset-inline-start: -35%;
    width: 90%;
    aspect-ratio: 1;
    border-radius: 50%;
    background-image: radial-gradient(circle at 50% 50%,
                      rgba(245, 214, 143, .22) 0%,
                      rgba(245, 214, 143, .06) 45%,
                      rgba(245, 214, 143, 0) 68%);
    pointer-events: none;
}

/* برقِ لغزان روی کارت؛ فقط با تغییر موقعیتِ یک گرادیان، بدون فیلتر. */
.dmmh-kind__sheen {
    position: absolute;
    inset-block: 0;
    inset-inline-start: -60%;
    width: 45%;
    background-image: linear-gradient(105deg,
                      rgba(255, 255, 255, 0) 0%,
                      rgba(255, 255, 255, .13) 50%,
                      rgba(255, 255, 255, 0) 100%);
    transition: transform .8s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
}

.dmmh-kind:hover .dmmh-kind__sheen {
    transform: translateX(-320%);
}

.dmmh-kind:hover {
    box-shadow: inset 0 0 0 1px rgba(245, 214, 143, .26),
                inset 0 1px 0 rgba(255, 255, 255, .50),
                0 34px 60px -42px rgba(0, 0, 0, 1);
}

/* ⚠ نشان حالا نقشِ پس‌زمینهٔ کارت است: بزرگ، کم‌رنگ، گوشهٔ بالاییِ پایانی، و پشت متن.
   شفافیت عمداً خیلی پایین است تا کنتراست متن دست‌نخورده بماند — نشانِ تزئینی هرگز
   نباید خوانایی را بگیرد. */
.dmmh-kind__mark {
    position: absolute;
    inset-block-start: -30px;
    inset-inline-end: -34px;
    z-index: 0;
    color: rgba(245, 214, 143, .07);
    pointer-events: none;
    transition: color .5s ease, transform .5s ease;
}

.dmmh-kind:hover .dmmh-kind__mark {
    color: rgba(245, 214, 143, .12);
    transform: rotate(-6deg);
}

/* هر چیزی که متن دارد باید بالاتر از نقشِ پس‌زمینه بنشیند. */
.dmmh-kind__title,
.dmmh-kind__text,
.dmmh-kind__cta {
    position: relative;
    z-index: 1;
}

.dmmh-kind__title {
    margin: 0;
    padding-block-end: 14px;
    border-block-end: 1px solid rgba(245, 214, 143, .16);
    font-size: clamp(18px, 2vw, 23px);
    line-height: 1.7;
    color: var(--text-primary);
}

.dmmh-kind__text {
    flex: 1;
    margin: 0;
    font-size: 14px;
    line-height: 2.05;
    color: var(--text-secondary);
    text-align: start;
}

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

/* ⚠ متن دیگر تنها چیزِ کارت نیست، پس کششِ ارتفاع از آن گرفته شد و به فهرست داده شد؛
   وگرنه متن کش می‌آمد و فهرست و قیمت به هم می‌چسبیدند. */
.dmmh-kind__text {
    flex: 0 0 auto;
}

.dmmh-kind__list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 18px 0 0;
    padding: 18px 0 0;
    border-block-start: 1px solid rgba(245, 214, 143, .16);
    list-style: none;
}

.dmmh-kind__li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--text-secondary);
}

/* ⚠ تیک با دو ضلعِ یک مربعِ چرخیده کشیده شده، نه با نویسه: نویسهٔ تیک در هر قلم شکل و
   وزنِ دیگری دارد و در قلم فارسی این قالب تضمینی نیست. اضلاع فیزیکی‌اند چون شکل تیک
   به جهت نوشتار ربطی ندارد. */
.dmmh-kind__tick {
    position: relative;
    width: 18px;
    height: 18px;
    margin-block-start: 5px;
    flex: 0 0 auto;
    border-radius: 50%;
    background-color: rgba(184, 115, 51, .22);
}

.dmmh-kind__tick::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 4px;
    height: 8px;
    border-right: 2px solid var(--accent-primary);
    border-bottom: 2px solid var(--accent-primary);
    transform: translateY(-1px) rotate(45deg);
}

/* شروع قیمت — نوارِ جمع‌بندیِ کارت، درست بالای دکمه. */
.dmmh-kind__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 9px;
    margin: 20px 0;
    padding: 14px 18px;
    border: 1px solid rgba(245, 214, 143, .22);
    border-radius: 16px;
    background-image: linear-gradient(140deg, rgba(184, 115, 51, .18), rgba(255, 255, 255, .04));
}

.dmmh-kind__price-from {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.dmmh-kind__price-val {
    font-family: 'gofteh';
    font-size: clamp(19px, 2vw, 24px);
    font-weight: 900;
    color: var(--accent-primary);
}

.dmmh-kind__cta {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 9px;
    padding: 12px 22px;
    border-radius: var(--pill-radius, 50px);
    background-image: linear-gradient(170deg, #c98a4d 0%, #b87333 52%, #9c5c25 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .40),
                inset 0 -1px 0 rgba(60, 32, 8, .38),
                0 8px 16px -12px rgba(90, 52, 18, .95);
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    transition: box-shadow var(--transition-fast);
}

.dmmh-kind__cta:hover,
.dmmh-kind__cta:focus-visible {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .60),
                inset 0 -1px 0 rgba(60, 32, 8, .40),
                0 14px 26px -14px rgba(90, 52, 18, .95);
}

.dmmh-kind__cta svg {
    transition: transform var(--transition-fast);
}

.dmmh-kind__cta:hover svg {
    transform: translateX(-3px);
}

/* ═══════════ پرسش‌ها (ستون فقرات) ═══════════ */

.dmmh-asks__spine {
    position: relative;
}

.dmmh-asks__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ریلِ عمودی، دقیقاً وسط. */
.dmmh-asks__rail {
    position: absolute;
    inset-block: 12px;
    inset-inline-start: 50%;
    width: 2px;
    margin-inline-start: -1px;
    border-radius: 2px;
    background-color: var(--border-color);
    overflow: hidden;
}

.dmmh-asks__rail-fill {
    display: block;
    width: 100%;
    height: 0;
    border-radius: 2px;
    background-image: linear-gradient(180deg, var(--accent-secondary), var(--accent-primary));
    transition: height .25s linear;
}

.dmmh-asks__item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr);
    align-items: start;
    margin-block-end: clamp(18px, 2.4vw, 30px);
}

.dmmh-asks__item:last-child {
    margin-block-end: 0;
}

/* بندهای فرد سمت آغاز، زوج‌ها سمت پایان — زیگزاگ حول ریل. */
.dmmh-asks__item .dmmh-asks__card {
    grid-column: 1;
}

.dmmh-asks__item:nth-child(even) .dmmh-asks__card {
    grid-column: 3;
}

.dmmh-asks__node {
    grid-column: 2;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-block-start: 16px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background-color: var(--bg-primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9),
                0 0 0 6px var(--bg-primary);
    font-size: 15px;
    font-weight: 800;
    color: var(--text-secondary);
    transition: border-color .35s ease, background-image .35s ease, color .35s ease,
                box-shadow .35s ease;
}

.dmmh-asks__item.is-on .dmmh-asks__node {
    border-color: transparent;
    background-image: linear-gradient(170deg, #c98a4d 0%, #b87333 52%, #9c5c25 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45),
                0 0 0 6px var(--bg-primary),
                0 8px 16px -12px rgba(90, 52, 18, .95);
    color: #fff;
}

.dmmh-asks__card {
    padding: clamp(20px, 2.2vw, 30px);
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background-color: var(--bg-secondary);
    background-image: linear-gradient(180deg,
                      rgba(255, 255, 255, .70) 0%,
                      rgba(255, 255, 255, .18) 42%,
                      rgba(255, 255, 255, 0) 43%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95),
                0 12px 26px -22px rgba(10, 25, 47, .8);
    transition: border-color .35s ease, box-shadow .35s ease;
}

.dmmh-asks__item.is-on .dmmh-asks__card {
    border-color: rgba(184, 115, 51, .38);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),
                0 20px 38px -28px rgba(10, 25, 47, .9);
}

.dmmh-asks__q {
    margin: 0 0 12px;
    font-size: clamp(17px, 1.9vw, 21px);
    line-height: 1.75;
    color: var(--text-primary);
}

.dmmh-asks__a {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 2.1;
    color: var(--text-secondary);
    text-align: start;
}

.dmmh-asks__a:last-child {
    margin-block-end: 0;
}

.dmmh-asks__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.dmmh-asks__chips li {
    padding: 7px 14px;
    border: 1px solid rgba(184, 115, 51, .28);
    border-radius: var(--pill-radius, 50px);
    background-color: rgba(184, 115, 51, .07);
    font-size: 13px;
    color: var(--text-primary);
}

.dmmh-asks__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-block-start: 14px;
    padding: 10px 20px;
    border: 1px solid rgba(184, 115, 51, .38);
    border-radius: var(--pill-radius, 50px);
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-primary);
    transition: background-color var(--transition-fast);
}

.dmmh-asks__link:hover,
.dmmh-asks__link:focus-visible {
    background-color: rgba(184, 115, 51, .10);
}

.dmmh-asks__link svg {
    transition: transform var(--transition-fast);
}

.dmmh-asks__link:hover svg {
    transform: translateX(-3px);
}

/* ═══════════ کاروسل نظرها ═══════════ */

/* ⚠ استایل این سکشن اینجا نیست. کاروسل نظرها یک مؤلفهٔ مشترک است و تنها جای شیوه‌نامه‌اش
   assets/components/dmhouse-quotes.css است، تا ظاهرش در همهٔ صفحه‌ها یکی بماند.
   نسخهٔ محلیِ قبلی همین‌جا بود و حذف شد؛ همان بود که ظاهر این صفحه را با بقیه ناهمگون

/* ═══════════ جعبهٔ متن سئو ═══════════ */

/* ⚠ این جعبه عیناً همان جعبهٔ سه قالب کدی دیگر است: همان فاصله، همان شعاع، همان
   ارتفاعِ اسکرول و همان اندازهٔ متن‌ها.
   ⚠ سناریو هم عوض شد: پیش از این سقفِ ارتفاع با دکمهٔ «ادامهٔ متن» باز می‌شد، ولی سه
   قالب دیگر بعد از یک ارتفاع مشخص اسکرول می‌خورند. حالا این هم همان می‌کند و دکمه
   حذف شده است. کل متن همیشه در نشانه‌گذاری هست و چیزی از موتور جستجو پنهان نمی‌ماند؛
   فقط صفحه چند هزار کلمه بلندتر نمی‌شود. */
.dmmh-read__box {
    position: relative;
    padding: clamp(22px, 2.6vw, 34px);
    border: 1px solid var(--border-color);
    border-radius: 26px;
    background-color: var(--bg-secondary);
}

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

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

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

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

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

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

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

.dmmh-read__body h4 {
    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;
}

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

.dmmh-read__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 16px;
    padding: 0;
    list-style: none;
}

.dmmh-read__chips li {
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--pill-radius, 50px);
    font-size: 13px;
    color: var(--text-primary);
}

/* ═══════════ دیدگاه‌ها ═══════════ */

/* ⚠ این جعبه هیچ استایل تازه‌ای ندارد و فقط توکن‌های ماژول دیدگاه‌ها را به توکن‌های این
   صفحه گره می‌زند. نبودِ همین چند خط، دیدگاه‌ها را کاملاً بی‌استایل می‌آورد: شیوه‌نامهٔ
   دیدگاه‌ها بار می‌شود ولی هر رنگ و فاصله‌اش به متغیری اشاره دارد که در این صفحه
   تعریف نشده است. همان الگوی قالب قیمت طراحی سایت. */
.dmmh-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(0, 0, 0, .35);
}

/* ═══════════ نقشه ═══════════ */

.dmmh-map__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(22px, 3vw, 40px);
    align-items: stretch;
}

/* کارت اطلاعات: همان زبان شیشه‌ایِ بقیهٔ سکشن‌های تیره. */
.dmmh-map__panel {
    display: flex;
    flex-direction: column;
    padding: clamp(26px, 2.8vw, 40px);
    border-radius: 28px;
    background-color: var(--bg-secondary);
    background-color: color-mix(in srgb, var(--bg-secondary) 72%, transparent);
    background-image: linear-gradient(180deg,
                      rgba(255, 255, 255, .14) 0%,
                      rgba(255, 255, 255, .04) 42%,
                      rgba(255, 255, 255, 0) 43%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10),
                inset 0 1px 0 rgba(255, 255, 255, .30),
                0 26px 50px -40px rgba(0, 0, 0, .95);
}

/* ⚠ کارت اطلاعات یک ستون انعطافی است و پیش‌فرضِ آن، هر عضو را تا کل عرض می‌کشد؛ برچسب
   با اینکه inline-block اعلام شده بود، تمام‌عرض می‌شد و پس‌زمینه‌اش کشیده می‌آمد.
   align-self هم عرض را به اندازهٔ متن و فاصلهٔ درونی‌اش برمی‌گرداند و هم وسط می‌نشاندش.
   (همین تله یک بار روی مربع نشان‌های سکشن «چرا ما» هم افتاده بود.) */
.dmmh-map__panel .dm-eyebrow {
    align-self: center;
}

.dmmh-map__title {
    margin-block-end: clamp(20px, 2.4vw, 30px);
    text-align: center;
}

.dmmh-map__frame {
    overflow: hidden;
    border-radius: 28px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10),
                0 26px 50px -40px rgba(0, 0, 0, .95);
}

.dmmh-map__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: clamp(280px, 34vw, 420px);
    border: 0;
}

.dmmh-map__info {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 0 clamp(22px, 2.6vw, 32px);
    padding: 0;
    list-style: none;
}

.dmmh-map__row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background-color: rgba(245, 214, 143, .05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}

.dmmh-map__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.dmmh-map__label {
    font-size: 12px;
    color: var(--text-secondary);
}

.dmmh-map__value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    transition: color var(--transition-fast);
}

.dmmh-map__cta {
    align-self: flex-start;
    margin-block-start: auto;
}

.dmmh-map__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border: 1px solid rgba(184, 115, 51, .30);
    border-radius: 14px;
    background-image: linear-gradient(180deg, rgba(245, 214, 143, .16), rgba(245, 214, 143, .03));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
    color: var(--accent-primary);
}

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

@media (min-width: 993px) {
    .dmmh-hero__inner {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    }

    .dmmh-team__inner {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    }

    .dmmh-why__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* کارت اطلاعات باریک‌تر از نقشه؛ نقشه چیزی است که باید دیده شود. */
    .dmmh-map__inner {
        grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    }
}

@media (max-width: 992px) {
    /* ⚠ در موبایل کارت‌ها گرید دو در دو می‌شوند و روشن‌شدنِ پی‌درپی خاموش است: با گرید،
       «ترتیب» دیگر معنا ندارد و کم‌رنگ‌کردنِ سه کارت فقط خواندن را سخت می‌کند.
       سکشن هم دیگر صفحه را نگه نمی‌دارد. */
    .dmmh-why__sticky {
        position: static;
        min-height: 0;
        padding-block: clamp(56px, 7vw, 104px);
    }

    .dmmh-why__grid.is-ready .dmmh-why__card,
    .dmmh-why__grid.is-ready .dmmh-why__card.is-on {
        opacity: 1;
    }

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

    /* ستون فقرات به یک ستون می‌آید و ریل به لبهٔ آغازین می‌چسبد. */
    .dmmh-asks__rail {
        inset-inline-start: 22px;
        margin-inline-start: 0;
    }

    .dmmh-asks__item {
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 16px;
    }

    .dmmh-asks__node {
        grid-column: 1;
        margin-block-start: 12px;
    }

    .dmmh-asks__item .dmmh-asks__card,
    .dmmh-asks__item:nth-child(even) .dmmh-asks__card {
        grid-column: 2;
    }
}

@media (max-width: 720px) {
    .dmmh-hero__chip--one {
        inset-block-start: 8px;
        inset-inline-start: 8px;
    }

    .dmmh-hero__chip--two {
        inset-block-end: 8px;
        inset-inline-end: 8px;
    }

    .dmmh-team__badge--count {
        inset-inline-start: 8px;
    }

    .dmmh-team__badge--warranty {
        inset-inline-end: 8px;
    }

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

    .dmmh-head {
        align-items: flex-start;
    }
}

@media (max-width: 560px) {
    /* ⚠ گرید دو در دو حتی در گوشی هم می‌ماند (خواستهٔ صریح)، فقط اندازه‌ها کوچک‌تر
       می‌شوند تا خوانایی از بین نرود. */
    .dmmh-why__card {
        padding: 16px 14px;
        border-radius: 18px;
        gap: 9px;
    }

    .dmmh-why__icon {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

    .dmmh-why__title {
        font-size: 14px;
        line-height: 1.75;
    }

    .dmmh-why__text {
        font-size: 12.5px;
        line-height: 1.95;
        text-align: start;
    }

    .dmmh-why__num {
        font-size: 26px;
        inset-block-start: 10px;
        inset-inline-end: 12px;
    }

    .dmmh-hero__title {
        line-height: 1.45;
    }
}