/* dmhouse-web-design.css — «قالب خدمات طراحی سایت».
   همهٔ قاعده‌ها زیر پیشوند dmwd هستند و رنگ‌ها از توکن‌های theme-light / theme-dark قالب
   می‌آیند. تناوب روشن و تیره ثابت است و هر سکشن تیره موج جداکنندهٔ خودش را دارد. */

.dmwd {
    --dmwd-px: 0;
    --dmwd-py: 0;
}

.dmwd-sec {
    position: relative;
    padding-block: clamp(56px, 7vw, 110px);
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

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

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

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

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

.dmwd-title {
    margin: 0 0 14px;
    font-size: clamp(22px, 2.6vw, 34px);
    line-height: 1.7;
    color: var(--text-primary);
    text-align: start;
}

.dmwd-title--bar {
    padding-inline-start: 16px;
    border-inline-start: 4px solid var(--accent-primary);
}

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

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

.dmwd-head {
    max-width: 900px;
    margin-block-end: clamp(24px, 3.5vw, 46px);
}

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

.dmwd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    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;
}

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

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

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

/* ⚠ رنگ پیوند فقط داخل متن‌های آزاد بازنویسی می‌شود، نه روی هر a در صفحه؛ وگرنه نوار
   فیلتر نمونه‌کار و دکمه‌ها هم رنگ می‌گیرند. */
.dmwd-lead a,
.dmwd-lead a:visited,
.dmwd-read__body a,
.dmwd-read__body a:visited,
.dmwd-type__body a,
.dmwd-type__body a:visited {
    color: var(--accent-primary) !important;
    font-weight: 700;
    text-decoration: none;
    border-block-end: 1px dashed currentColor;
}

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

.dmwd-hero {
    overflow: hidden;
    padding-block: clamp(150px, 15vw, 220px) 0;
}

.dmwd-hero__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 60px);
    align-items: center;
    padding-block-end: clamp(40px, 5vw, 70px);
}

.dmwd-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-block-end: 16px;
    font-size: 13px;
    color: var(--text-secondary);
}

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

.dmwd-crumbs a:hover,
.dmwd-crumbs__current {
    color: var(--accent-primary) !important;
}

.dmwd-hero__title {
    margin: 0 0 16px;
    font-size: clamp(32px, 4.6vw, 58px);
    line-height: 1.4;
    color: var(--text-primary);
}

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

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

/* صحنهٔ هیرو: قاب تصویر با کج‌شدگی سه‌بعدی که با ماوس می‌چرخد، دو هالهٔ رنگی پشت آن و
   دو نشان شناور که در جهت مخالف تصویر حرکت می‌کنند (حس عمق). */
.dmwd-hero__visual {
    position: relative;
    isolation: isolate;
    perspective: 1200px;
}

.dmwd-hero__glow {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(4px);
    pointer-events: none;
}

.dmwd-hero__glow--a {
    inset: -14% -10% auto -6%;
    height: 70%;
    background-image: radial-gradient(closest-side, rgba(245, 214, 143, .26), transparent 72%);
    transform: translate3d(calc(var(--dmwd-px) * -26px), calc(var(--dmwd-py) * -22px), 0);
    transition: transform .6s ease-out;
}

.dmwd-hero__glow--b {
    inset: auto -4% -12% 12%;
    height: 55%;
    background-image: radial-gradient(closest-side, rgba(184, 115, 51, .22), transparent 72%);
    transform: translate3d(calc(var(--dmwd-px) * 18px), calc(var(--dmwd-py) * 16px), 0);
    transition: transform .7s ease-out;
}

.dmwd-hero__stage {
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(calc(var(--dmwd-px) * -6deg)) rotateX(calc(var(--dmwd-py) * 4deg));
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

/* ارتفاع ثابت است تا هر تصویری با هر نسبتی چیدمان را جابه‌جا نکند. */
.dmwd-hero__figure {
    margin: 0;
    height: clamp(260px, 32vw, 430px);
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 28px;
    background-color: var(--bg-secondary);
    box-shadow: 0 26px 60px rgba(0, 0, 0, .38);
}

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

/* ═══════════ طرح جایگزینِ تصویر هیرو ═══════════ */

/* ⚠ وقتی تصویری در تنظیمات برگه انتخاب نشده، این طرح جای آن می‌نشیند. پیش از این، کل
   ستون تصویر حذف می‌شد و هیرو یک‌ستونی و نصفه می‌ماند.
   طرحِ این قالب «نمایشگر و گوشی» است، چون موضوع صفحه خودِ طراحیِ سایت است؛ دو قالب
   دیگر طرح خودشان را دارند و هر سه عمداً با هم فرق می‌کنند.
   ⚠ فقط رنگ و شکل؛ نه فیلتر و نه پرسپکتیوِ تازه. هیچ متنی داخلش نیست. */
/* ⚠ طرح با inset صفر روی خودِ قاب می‌نشیند، نه با ارتفاع صد درصد. با ارتفاع نسبی،
   جعبهٔ طرح از قاب بلندتر می‌شد و چون قاب سرریز را می‌بُرد، پایین گوشی حذف می‌شد —
   سی پیکسل، که با اندازه‌گیری معلوم شد نه با نگاه. با inset صفر، جعبه دقیقاً همان
   جعبهٔ قاب است و هیچ‌چیز نمی‌تواند از آن بزند بیرون. */
.dmwd-hero__figure {
    position: relative;
}

.dmwd-mock {
    position: absolute;
    inset: 0;
    display: block;
    padding: clamp(18px, 2vw, 30px);
}

.dmwd-mock__screen {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background-color: rgba(255, 255, 255, .04);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.dmwd-mock__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 14px;
    border-block-end: 1px solid var(--border-color);
    background-color: rgba(255, 255, 255, .04);
}

.dmwd-mock__bar i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: rgba(245, 214, 143, .38);
}

/* نوار نشانی، کشیده تا انتهای نوار ابزار. */
.dmwd-mock__bar b {
    flex: 1;
    height: 10px;
    margin-inline-start: 10px;
    border-radius: var(--pill-radius, 50px);
    background-color: rgba(255, 255, 255, .07);
}

.dmwd-mock__body {
    display: flex;
    flex-direction: column;
    gap: 11px;
    flex: 1;
    padding: clamp(14px, 1.6vw, 22px);
}

.dmwd-mock__hero {
    height: 38%;
    border-radius: 14px;
    background-image: linear-gradient(150deg, rgba(245, 214, 143, .20), rgba(184, 115, 51, .06));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

.dmwd-mock__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    flex: 1;
}

.dmwd-mock__cols i {
    border-radius: 12px;
    background-color: rgba(255, 255, 255, .05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}

.dmwd-mock__line {
    height: 8px;
    border-radius: var(--pill-radius, 50px);
    background-color: rgba(255, 255, 255, .06);
}

.dmwd-mock__line--a { width: 72%; }
.dmwd-mock__line--b { width: 46%; }

/* گوشی روی گوشهٔ آغازینِ پایینِ نمایشگر می‌افتد و کمی از قاب بیرون می‌زند. */
.dmwd-mock__phone {
    position: absolute;
    inset-block-end: clamp(8px, 1.4vw, 20px);
    inset-inline-start: clamp(4px, 1vw, 14px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: clamp(74px, 9vw, 104px);
    aspect-ratio: 9 / 17;
    padding: 12px 9px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background-color: var(--bg-secondary);
    box-shadow: 0 20px 40px -26px rgba(0, 0, 0, .95),
                inset 0 1px 0 rgba(255, 255, 255, .16);
}

.dmwd-mock__notch {
    width: 34%;
    height: 5px;
    border-radius: var(--pill-radius, 50px);
    background-color: rgba(255, 255, 255, .16);
}

.dmwd-mock__pblock {
    width: 100%;
    height: 34%;
    border-radius: 10px;
    background-image: linear-gradient(150deg, rgba(245, 214, 143, .22), rgba(184, 115, 51, .05));
}

.dmwd-mock__pline {
    height: 6px;
    border-radius: var(--pill-radius, 50px);
    background-color: rgba(255, 255, 255, .08);
}

.dmwd-mock__pline--a { width: 100%; }
.dmwd-mock__pline--b { width: 62%; align-self: flex-start; }

.dmwd-mock__pbtn {
    width: 74%;
    height: 14px;
    margin-block-start: auto;
    border-radius: var(--pill-radius, 50px);
    background-image: linear-gradient(170deg, #c98a4d 0%, #b87333 55%, #9c5c25 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34);
}

/* نشان‌های شناور؛ جلوتر از قاب می‌ایستند و آرام بالا و پایین می‌روند. */
.dmwd-hero__chip {
    position: absolute;
    display: grid;
    gap: 2px;
    padding: 12px 18px;
    border-radius: 16px;
    background-color: #ffffff;
    box-shadow: 0 18px 36px rgba(10, 25, 47, .28);
    text-align: center;
    transform: translateZ(60px);
}

.dmwd-hero__chip strong {
    font-size: 17px;
    color: var(--color-copper, #b87333);
}

.dmwd-hero__chip span {
    font-size: 12px;
    color: #4a5568;
}

.dmwd-hero__chip--one {
    inset-block-start: -20px;
    inset-inline-start: 6%;
    animation: dmwdFloat 6s ease-in-out infinite;
}

.dmwd-hero__chip--two {
    inset-block-end: -20px;
    inset-inline-end: 6%;
    animation: dmwdFloat 7s ease-in-out infinite reverse;
}

@keyframes dmwdFloat {
    0%, 100% { transform: translateZ(60px) translateY(0); }
    50% { transform: translateZ(60px) translateY(-10px); }
}

/* ═══ نوار چرخان انواع سایت ═══ */

.dmwd-marquee {
    display: grid;
    gap: 14px;
    padding-block: clamp(10px, 2vw, 22px) clamp(30px, 4vw, 60px);
    /* صحنهٔ سه‌بعدی فقط برای بلندشدن چیپ‌ها در هاور است؛ خودِ ردیف‌ها صاف می‌مانند. */
    overflow: hidden;
    perspective: 1400px;
    -webkit-mask-image: linear-gradient(to left, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(to left, transparent, #000 10%, #000 90%, transparent);
}

/* ⚠ overflow: clip به‌جای hidden، به‌همراه حاشیهٔ برش: با hidden، چیپی که در هاور بالا
   می‌رود از بالا بریده می‌شد. مقدار hidden به‌عنوان پشتیبان مرورگرهای قدیمی می‌ماند. */
.dmwd-marquee__row {
    padding-block: 10px;
    overflow: hidden;
    overflow: clip;
    overflow-clip-margin: 14px;
}

/* ⚠ ردیف‌ها عمداً هیچ چرخش سه‌بعدی ندارند. اندازه‌گیری شد: چرخش حول محور افقی داخل صحنهٔ
   پرسپکتیو، ردیف را ذوزنقه می‌کند؛ لبهٔ دور باریک‌تر می‌شود و دو سرِ نوار خالی می‌ماند.
   این کوچک‌شدگی یکنواخت نیست، پس با مقیاس هم جبران نمی‌شود. حس سه‌بعدی به هاورِ خودِ
   چیپ‌ها منتقل شد که هندسهٔ نوار را دست نمی‌زند. */

/* ⚠ فاصله با مارجینِ خودِ آیتم‌ها ساخته می‌شود، نه با gap ریل: با gap، فاصلهٔ آخرین آیتم
   جزو عرض ریل حساب نمی‌شود و درست سرِ اتصالِ دو ریل یک شکاف می‌افتد.
   ⚠ صفحه راست‌به‌چپ است: ریل دومِ هر ردیف سمتِ چپِ ریل اول می‌نشیند، پس حرکت باید به
   راست باشد (مقدار مثبت) تا ریل دوم جای ریل اول را بگیرد. با مقدار منفی، نوار به سمتی
   می‌رفت که پشتش چیزی نبود و همان، فضای خالیِ طولانی را می‌ساخت. */
.dmwd-marquee__row {
    display: flex;
    flex-wrap: nowrap;
}

.dmwd-marquee__track {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    white-space: nowrap;
    animation: dmwdMarquee 40s linear infinite;
}

.dmwd-marquee__row--back .dmwd-marquee__track {
    animation-name: dmwdMarqueeBack;
    animation-duration: 52s;
}

/* ⚠ توقف با فوکوس هم لازم شد: بدون آن، کاربرِ صفحه‌کلید روی چیپی می‌ایستد که زیر پایش
   در حال حرکت است و لینک عملاً غیرقابل استفاده می‌شود. */
.dmwd-marquee__row:hover .dmwd-marquee__track,
.dmwd-marquee__row:focus-within .dmwd-marquee__track {
    animation-play-state: paused;
}

/* هر ریل دقیقاً به‌اندازهٔ عرض خودش به راست می‌رود؛ در همان لحظه ریل همسان جایش ایستاده. */
@keyframes dmwdMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(100%); }
}

/* ردیف دوم در جهت مخالف: از یک عرض عقب‌تر شروع می‌کند و به صفر می‌رسد. */
@keyframes dmwdMarqueeBack {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0); }
}

/* چیپ‌های نوار — حجم‌دار، نه تخت.
   ⚠ حجم فقط با طیف رنگی و سایه ساخته می‌شود، نه با فیلتر یا بلور: هر نوع filter یا
   backdrop-filter روی این همه چیپِ متحرک، هم متن را در موبایل مات می‌کند و هم هر ریل
   را به یک لایهٔ جدا روی پردازندهٔ گرافیکی می‌برد.
   لایه‌های سایه از بالا به پایین: تابش داخلیِ لبهٔ بالا (حس برجستگی)، سایهٔ داخلیِ لبهٔ
   پایین (حس ضخامت)، و سایهٔ بیرونیِ نرم (فاصله گرفتن از زمینه). */
.dmwd-marquee__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* فاصله روی خودِ آیتم است، نه روی ریل — دلیلش بالای همین بخش نوشته شده. */
    margin-inline-end: 14px;
    padding: 12px 26px;
    border: 1px solid rgba(245, 214, 143, .34);
    border-radius: var(--pill-radius, 50px);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 52%),
                      linear-gradient(120deg, rgba(245, 214, 143, .2), rgba(184, 115, 51, .07));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3),
                inset 0 -2px 6px rgba(0, 0, 0, .3),
                0 6px 14px -8px rgba(0, 0, 0, .55);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

/* ⚠ چیپ‌ها حالا لینک‌اند و قاعدهٔ سراسریِ رنگِ لینک‌ها با !important روی آن‌ها می‌نشیند.
   کلاسِ دوباره‌نوشته وزن انتخابگر را بالا می‌برد تا نوار رنگ خودش را نگه دارد؛ این همان
   الگویی است که برای دکمهٔ ساده هم به کار رفته و به هیچ لینکِ دیگری کار ندارد. */
.dmwd-marquee__item.dmwd-marquee__item,
.dmwd-marquee__item.dmwd-marquee__item:visited {
    color: var(--text-primary) !important;
}

.dmwd-marquee__item--soft.dmwd-marquee__item--soft,
.dmwd-marquee__item--soft.dmwd-marquee__item--soft:visited {
    color: var(--text-secondary) !important;
}

/* ⚠ نشانهٔ پیوند بودن، خودِ شکلِ پیل است نه زیرخط: یک دکمهٔ گردِ کوچک در انتهای هر پیل.
   دایرهٔ جداگانه با پیکان، همان الگویی است که چشم از «کارتِ قابل کلیک» می‌شناسد و برخلاف
   زیرخط، متن را شلوغ نمی‌کند. در حالت عادی هم دیده می‌شود، پس روی لمس — که هاور ندارد —
   هم کار می‌کند.
   ⚠ فاصلهٔ انتهایی پیل کم شد تا دکمهٔ گرد به لبه نچسبد. */
.dmwd-marquee__go {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-inline-start: 2px;
    border: 1px solid rgba(245, 214, 143, .38);
    border-radius: 50%;
    background-color: rgba(245, 214, 143, .10);
    transition: background-color .3s ease, border-color .3s ease;
}

/* ⚠ پیکان به چپ است، چون صفحه راست‌به‌چپ است و «جلو» یعنی چپ. گوشهٔ ساخته‌شده از ضلع
   چپ و پایین به پایین‌ـچپ اشاره دارد و چرخشِ ساعتگردِ چهل‌وپنج درجه (مقدار مثبت) آن را
   صاف به چپ می‌آورد؛ مقدار منفی برعکس، آن را به پایین می‌بَرَد.
   ⚠ اضلاع فیزیکی‌اند: جهت این پیکان یک تصمیم بصری است، نه چیزی که با جهت نوشتار آینه شود. */
.dmwd-marquee__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 .3s ease;
}

.dmwd-marquee__item:hover .dmwd-marquee__go,
.dmwd-marquee__item:focus-visible .dmwd-marquee__go {
    border-color: var(--accent-primary);
    background-color: rgba(245, 214, 143, .24);
}

.dmwd-marquee__item:hover .dmwd-marquee__go::after,
.dmwd-marquee__item:focus-visible .dmwd-marquee__go::after {
    transform: translateX(-1px) rotate(45deg);
}

.dmwd-marquee__item:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 3px;
}

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

.dmwd-marquee__item--soft {
    border-color: var(--border-color);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 46%),
                      linear-gradient(120deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16),
                inset 0 -2px 6px rgba(0, 0, 0, .28),
                0 5px 12px -9px rgba(0, 0, 0, .5);
    color: var(--text-secondary);
}

.dmwd-marquee__item:hover,
.dmwd-marquee__item:focus-visible {
    border-color: var(--accent-primary);
    transform: translateY(-7px) translateZ(38px) rotateX(-7deg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38),
                inset 0 -2px 6px rgba(0, 0, 0, .3),
                0 22px 36px -14px rgba(0, 0, 0, .6);
}

/* نقطه به یک مهرهٔ کوچکِ نورانی تبدیل شد: هالهٔ بیرونی + تابش داخلی. */
.dmwd-marquee__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-image: radial-gradient(circle at 30% 30%, #ffffff, var(--accent-primary) 62%);
    box-shadow: 0 0 0 3px rgba(245, 214, 143, .14), 0 0 8px rgba(245, 214, 143, .55);
}

.dmwd-marquee__item--soft .dmwd-marquee__dot {
    background-image: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .9), var(--text-secondary) 62%);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .07);
}

/* ═══ چهار مرحله ═══ */

/* ⚠ چهار مرحله از شبکهٔ دو در دو به یک مسیر عمودیِ به‌هم‌پیوسته تغییر کرد. دلیلش ترتیب
   است: مرحله‌ها توالی دارند و شبکهٔ دو در دو ترتیب را از بین می‌برد (چشم نمی‌داند بعد
   از مرحلهٔ دو باید به کدام خانه برود). مسیر عمودی همان توالی را نشان می‌دهد و در
   ستون باریکِ کنار کاروسل هم جای بهتری می‌گیرد. */
.dmwd-flow {
    padding: clamp(20px, 2.4vw, 28px);
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background-color: var(--bg-secondary);
}

.dmwd-flow__label {
    margin: 0 0 14px;
    padding-inline-start: 14px;
    border-inline-start: 4px solid var(--accent-primary);
    font-size: clamp(15px, 1.3vw, 17px);
    font-weight: 700;
    line-height: 1.7;
    color: var(--text-primary);
    text-align: start;
}

.dmwd-flow__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ⚠ overflow اینجا باید باز بماند: خط اتصالِ میان مرحله‌ها از کف هر مهره بیرون می‌زند
   و با hidden بریده می‌شد. */
.dmwd-flow__item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    overflow: visible;
}

.dmwd-flow__num {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(245, 214, 143, .35);
    border-radius: 50%;
    background-image: linear-gradient(160deg, rgba(245, 214, 143, .22), rgba(184, 115, 51, .06));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--accent-primary);
    opacity: 1;
}

/* خط اتصال از دلِ خودِ مهره می‌آید تا هم‌راستایی‌اش در راست‌به‌چپ و چپ‌به‌راست خودکار
   باشد؛ ارتفاعش دقیقاً برابر فاصلهٔ عمودی دو مهره است (۱۴+۱۴ پیکسل پدینگ). */
.dmwd-flow__num::after {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    width: 2px;
    height: 28px;
    transform: translateX(50%);
    background-image: linear-gradient(to bottom, rgba(245, 214, 143, .5), rgba(245, 214, 143, .06));
}

.dmwd-flow__item:last-child .dmwd-flow__num::after {
    display: none;
}

.dmwd-flow__title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.8;
    color: var(--text-primary);
}

/* ═══ چهار مرحله + ویترین تصاویر، کنار هم ═══ */

.dmwd-showcase {
    display: grid;
    grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
    gap: clamp(22px, 3vw, 46px);
    align-items: center;
    margin-block-start: clamp(30px, 4vw, 56px);
}

.dmwd-shots {
    position: relative;
    min-width: 0;
}

/* کاروسل ساده و قابل پیش‌بینی: اسکرول افقی با قفل روی هر تصویر و دو دکمهٔ کنترل. */
.dmwd-shots__viewport {
    display: flex;
    gap: clamp(12px, 1.6vw, 20px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-block-end: 6px;
    scrollbar-width: none;
}

.dmwd-shots__viewport::-webkit-scrollbar {
    display: none;
}

.dmwd-shot {
    flex: 0 0 min(78%, 340px);
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background-color: var(--bg-secondary);
    scroll-snap-align: start;
    transition: transform .4s ease, border-color .3s ease;
}

.dmwd-shot img {
    display: block;
    width: 100%;
    height: clamp(160px, 17vw, 230px);
    object-fit: cover;
    object-position: top center;
    filter: grayscale(.25);
    transition: filter .4s ease;
}

.dmwd-shot:hover {
    border-color: var(--accent-primary);
}

.dmwd-shot:hover img {
    filter: none;
}

.dmwd-shots__nav {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-block-start: 14px;
}

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

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

/* ═══ نوار مشاوره ═══ */

/* ⚠ فاصلهٔ بالا و پایینِ نوار مشاوره برابر است؛ نسخهٔ قبلی فقط از بالا فاصله می‌گرفت و
   ناموزون دیده می‌شد. */
.dmwd-head--portfolio {
    margin-block-start: clamp(30px, 4.5vw, 60px);
}

/* بلوک مشاوره: پس‌زمینهٔ ملایم و خط جداکنندهٔ پایین، مرزش را با شبکهٔ نمونه‌کارها روشن
   می‌کند؛ فاصلهٔ بالا و پایین هم برابر است. */
.dmwd-consult {
    position: relative;
    padding: clamp(22px, 2.6vw, 34px);
    border-radius: 24px;
    background-image: linear-gradient(140deg, rgba(184, 115, 51, .07), transparent 65%);
    overflow: hidden;
}

.dmwd-consult--split {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(20px, 3vw, 44px);
    align-items: center;
}

.dmwd-consult__visual {
    min-width: 0;
}

.dmwd-consult__figure {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 20px;
}

.dmwd-consult__figure img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

/* ⚠ راست‌چینی صریح: بدون آن، متن از محیط اطراف وسط‌چین به ارث می‌رسید و از خط عمودی
   فاصله می‌گرفت. */
.dmwd-consult__text {
    position: relative;
    padding-inline-start: clamp(16px, 2vw, 26px);
    border-inline-start: 4px solid var(--accent-primary);
    text-align: start;
}

/* علامت پرسشِ درشت و کم‌رنگ در پس‌زمینه. */
.dmwd-consult__mark {
    position: absolute;
    inset-block-start: -34px;
    inset-inline-end: 0;
    font-size: 140px;
    font-weight: 700;
    line-height: 1;
    color: rgba(184, 115, 51, .08);
    pointer-events: none;
}

.dmwd-consult__title {
    margin: 0 0 18px;
    font-size: clamp(20px, 2.2vw, 30px);
    line-height: 1.7;
    color: var(--text-primary);
    text-align: start;
}

.dmwd-consult__cta {
    align-self: flex-start;
}

/* ═══ قیمت‌ها ═══ */

.dmwd-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.2vw, 28px);
    align-items: start;
}

.dmwd-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(22px, 2.4vw, 32px);
    border: 1px solid var(--border-color);
    border-radius: 26px;
    background-color: var(--bg-secondary);
    overflow: hidden;
    transition: transform .35s ease, border-color .3s ease, box-shadow .3s ease;
}

/* درخشش ملایمی که با هاور از بالای کارت پخش می‌شود. */
.dmwd-plan::before {
    content: "";
    position: absolute;
    inset-block-start: -60%;
    inset-inline: -20%;
    height: 160%;
    background-image: radial-gradient(closest-side, rgba(245, 214, 143, .16), transparent 70%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}

.dmwd-plan:hover {
    transform: translateY(-6px);
    border-color: rgba(245, 214, 143, .45);
    box-shadow: 0 22px 50px rgba(0, 0, 0, .3);
}

.dmwd-plan:hover::before {
    opacity: 1;
}

.dmwd-plan--star {
    border-color: var(--accent-primary);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .25);
}

/* ⚠ برچسب «پیشنهاد ما» در جریان محتوا می‌نشیند، نه به‌صورت روبان مورب روی گوشه:
   نسخهٔ مورب روی نام پکیج و قیمت می‌افتاد و متن را ناخوانا می‌کرد. */
.dmwd-plan--star .dmwd-plan__head::before {
    content: "پیشنهاد ما";
    display: inline-block;
    margin-block-end: 12px;
    padding: 5px 16px;
    border-radius: var(--pill-radius, 50px);
    background-color: var(--accent-primary);
    color: var(--color-navy, #0a192f);
    font-size: 12px;
    font-weight: 700;
}

.dmwd-plan__head {
    margin-block-end: 18px;
    padding-block-end: 16px;
    border-block-end: 1px solid var(--border-color);
}

.dmwd-plan__name {
    margin: 0 0 10px;
    font-size: clamp(18px, 1.8vw, 23px);
    color: var(--text-primary);
}

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

.dmwd-plan__price--ask a,
.dmwd-plan__price--ask a:visited {
    display: inline-flex;
    padding: 6px 18px;
    border-radius: var(--pill-radius, 50px);
    background-color: var(--accent-primary);
    color: var(--color-navy, #0a192f) !important;
    font-size: 14px;
    text-decoration: none;
}

.dmwd-plan__time {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.dmwd-plan__list {
    display: grid;
    gap: 10px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

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

.dmwd-plan__list li::before {
    content: "✓";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    font-weight: 700;
    color: var(--accent-primary);
}

/* ردیف‌های «مازاد بر قیمت پکیج» عمداً کم‌رنگ‌ترند تا با خدمات پایه اشتباه نشوند. */
.dmwd-plan__extra {
    opacity: .75;
    font-size: 13px;
}

.dmwd-plan__extra::before {
    content: "+";
}

.dmwd-plan__cta {
    margin-block-start: auto;
    align-self: flex-start;
}

/* پکیج بهینه‌سازی: کارت پهن با فهرست چندستونی. */
.dmwd-speed {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr) auto;
    gap: clamp(18px, 2.4vw, 34px);
    align-items: center;
    margin-block-start: clamp(20px, 2.6vw, 32px);
    padding: clamp(22px, 2.6vw, 34px);
    border: 1px solid var(--accent-primary);
    border-radius: 26px;
    background-image: linear-gradient(135deg, rgba(245, 214, 143, .14), rgba(184, 115, 51, .05));
}

.dmwd-speed__name {
    margin: 0 0 8px;
    font-size: clamp(17px, 1.7vw, 22px);
    color: var(--text-primary);
}

.dmwd-speed__price {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--accent-primary);
}

.dmwd-speed__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmwd-speed__list li {
    position: relative;
    padding-inline-start: 24px;
    font-size: 13px;
    line-height: 1.9;
    color: var(--text-secondary);
}

.dmwd-speed__list li::before {
    content: "✓";
    position: absolute;
    inset-inline-start: 0;
    color: var(--accent-primary);
}

/* ═══ وی‌آی‌پی ═══ */

/* ⚠ بدون جعبه: متن مستقیم روی زمینهٔ سکشن می‌نشیند و تمایزش را از نشان طلایی، تیتر درشت
   و تصویرِ کنارش می‌گیرد. */
.dmwd-vip__grid {
    display: grid;
    gap: clamp(24px, 3.5vw, 56px);
    align-items: center;
}

.dmwd-vip__grid--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* ⚠ راست‌چینی صریحِ کل ستون: بدون آن، تیتر و متن از محیط اطراف وسط‌چین به ارث می‌رسیدند
   و از لبهٔ راست فاصله می‌گرفتند. */
.dmwd-vip__text {
    text-align: start;
}

.dmwd-vip__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-block-end: 16px;
    border-radius: 20px;
    background-image: linear-gradient(135deg, var(--color-gold, #f5d68f), var(--color-copper, #b87333));
    color: var(--color-navy, #0a192f);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
}

.dmwd-vip__title {
    position: relative;
    margin: 0 0 14px;
    padding-block-end: 14px;
    font-size: clamp(24px, 2.8vw, 38px);
    line-height: 1.6;
    color: var(--text-primary);
    text-align: start;
}

/* خط طلاییِ کوتاه زیر تیتر، به‌جای قاب دور کل بلوک. */
.dmwd-vip__title::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    width: 62px;
    height: 3px;
    border-radius: 3px;
    background-image: linear-gradient(to left, var(--color-gold, #f5d68f), var(--color-copper, #b87333));
}

.dmwd-vip__desc {
    margin: 0 0 24px;
    max-width: 62ch;
    font-size: 16px;
    line-height: 2.2;
    color: var(--text-secondary);
    text-align: start;
}

.dmwd-vip__visual {
    position: relative;
    isolation: isolate;
}

.dmwd-vip__visual::before {
    content: "";
    position: absolute;
    inset: 8% -6% -10% 6%;
    z-index: -1;
    border-radius: 30px;
    background-image: linear-gradient(140deg, rgba(245, 214, 143, .28), rgba(184, 115, 51, .05));
}

.dmwd-vip__figure {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 26px;
    transform: rotate(1.4deg);
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.dmwd-vip__visual:hover .dmwd-vip__figure {
    transform: rotate(0);
}

.dmwd-vip__figure img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

/* ═══ درباره تیم ═══ */

.dmwd-team__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(30px, 4vw, 70px);
    align-items: center;
}

/* تصویر تیم داخل یک قاب شیشه‌ای کج نشسته و با هاور صاف می‌شود؛ پشتش یک هالهٔ طلایی. */
.dmwd-team__visual {
    position: relative;
    isolation: isolate;
}

.dmwd-team__visual::before {
    content: "";
    position: absolute;
    inset: 10% -6% -8% 6%;
    z-index: -1;
    border-radius: 30px;
    background-image: linear-gradient(140deg, rgba(245, 214, 143, .3), rgba(184, 115, 51, .05));
    filter: blur(2px);
}

.dmwd-team__figure {
    margin: 0;
    overflow: hidden;
    border-radius: 26px;
    border: 1px solid var(--border-color);
    transform: rotate(-1.6deg);
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.dmwd-team__visual:hover .dmwd-team__figure {
    transform: rotate(0);
}

.dmwd-team__figure img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.dmwd-badge {
    position: absolute;
    display: grid;
    gap: 2px;
    padding: 14px 22px;
    border-radius: 18px;
    background-color: #ffffff;
    box-shadow: 0 16px 34px rgba(10, 25, 47, .18);
    text-align: center;
}

.dmwd-badge--top {
    inset-block-start: -22px;
    inset-inline-start: 8%;
}

.dmwd-badge--bottom {
    inset-block-end: -22px;
    inset-inline-end: 8%;
}

.dmwd-badge__num {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-copper, #b87333);
}

.dmwd-badge__num--sm {
    font-size: 16px;
}

.dmwd-badge__label {
    font-size: 12px;
    color: #4a5568;
}

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

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

/* شش دلیل، به‌شکل کارت‌های شماره‌دار با نوار طلایی که با هاور از سمت شروع باز می‌شود. */
.dmwd-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: dmwd-check;
}

.dmwd-checks li {
    position: relative;
    counter-increment: dmwd-check;
    padding: 22px 22px 22px 20px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background-color: var(--bg-secondary);
    font-size: 15px;
    line-height: 1.9;
    color: var(--text-primary);
    overflow: hidden;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.dmwd-checks li::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 .5s ease;
}

/* شمارهٔ درشتِ کم‌رنگ در گوشه، به‌جای تیک تکراری. */
.dmwd-checks li::after {
    content: counter(dmwd-check);
    position: absolute;
    inset-block-end: -14px;
    inset-inline-start: 10px;
    font-size: 54px;
    font-weight: 700;
    line-height: 1;
    color: rgba(184, 115, 51, .09);
}

.dmwd-checks li:hover {
    transform: translateY(-4px);
    border-color: rgba(184, 115, 51, .35);
    box-shadow: 0 18px 40px rgba(10, 25, 47, .1);
}

.dmwd-checks li:hover::before {
    transform: scaleX(1);
}

/* ═══ وردپرس و خدمات متمایز ═══ */

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

/* خدمات متمایز: به‌جای چیپ‌های تخت، کارت‌های کوچکِ آیکون‌دار با نوار طلایی و بلندشدن
   ملایم؛ همان شش متن قبلی، فقط خواناتر و چشم‌گیرتر. */
/* ⚠ سه ستون، چون این فهرست دیگر داخل یک ستون نیست و تمام عرض سکشن را دارد. */
.dmwd-chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: clamp(26px, 3.5vw, 44px) 0 0;
    padding: 0;
    list-style: none;
}

/* جملهٔ پل به سکشن بعدی: تمام‌عرض و وسط‌چین، تا پایانِ این بخش معلوم باشد. */
.dmwd-wp__bridge {
    max-width: 74ch;
    margin: clamp(18px, 2.4vw, 28px) auto 0;
    text-align: center;
}

.dmwd-chip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background-color: var(--bg-secondary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
    overflow: hidden;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.dmwd-chip::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background-image: linear-gradient(to bottom, var(--color-gold, #f5d68f), var(--color-copper, #b87333));
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform .4s ease;
}

.dmwd-chip:hover {
    transform: translateY(-4px);
    border-color: rgba(245, 214, 143, .4);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .22);
}

.dmwd-chip:hover::before {
    transform: scaleY(1);
}

.dmwd-chip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background-image: linear-gradient(135deg, rgba(245, 214, 143, .45), rgba(184, 115, 51, .16));
    font-size: 16px;
    color: var(--color-navy, #0a192f);
}

.dmwd-chip__text {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-primary);
}

/* ═══ انواع سایت‌ها ═══ */

.dmwd-types__list {
    display: grid;
    gap: 12px;
}

.dmwd-type {
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background-color: var(--bg-secondary);
    overflow: hidden;
    transition: border-color .3s ease;
}

.dmwd-type.is-open {
    border-color: var(--accent-primary);
    box-shadow: 0 22px 46px -34px rgba(0, 0, 0, .85);
}

.dmwd-type__head {
    margin: 0;
}

.dmwd-type__toggle {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 18px 22px;
    border: 0;
    background: transparent;
    font-family: inherit;
    text-align: start;
    cursor: pointer;
    transition: background-color .3s ease;
}

/* ⚠ حالت هاور و فوکوس روی خودِ دکمه است نه روی کارت: ناحیهٔ کلیک‌پذیر همین دکمه است و
   بازخورد باید دقیقاً همان ناحیه را نشان دهد، وگرنه کاربر فکر می‌کند کل کارت کلیک‌پذیر است. */
.dmwd-type__toggle:hover {
    background-color: rgba(245, 214, 143, .05);
}

.dmwd-type__toggle:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: -4px;
}

.dmwd-type.is-open .dmwd-type__toggle {
    background-color: rgba(245, 214, 143, .07);
}

.dmwd-type__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: rgba(184, 115, 51, .12);
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-primary);
    transition: background-color .3s ease, color .3s ease;
}

/* مهرهٔ شمارهٔ مورد باز، پر می‌شود: نشانهٔ «همین‌جا هستی» در فهرستی با چهارده ردیف. */
.dmwd-type.is-open .dmwd-type__num {
    background-color: var(--accent-primary);
    color: var(--color-navy, #0a192f);
}

.dmwd-type__nav {
    padding: 6px 14px;
    border-radius: var(--pill-radius, 50px);
    background-color: rgba(184, 115, 51, .08);
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-primary);
    white-space: nowrap;
}

.dmwd-type__title {
    font-size: clamp(15px, 1.4vw, 19px);
    line-height: 1.8;
    color: var(--text-primary);
}

/* ⚠ نشانهٔ بازوبسته از «به‌علاوه/منها» به پیکان چرخان تغییر کرد. علتش صرفاً ظاهر نیست:
   به‌علاوه یعنی «افزودن»، در حالی که این دکمه چیزی اضافه نمی‌کند بلکه متنی را باز
   می‌کند؛ پیکان همان معنا را می‌رساند و چرخشش جهت حرکت را هم نشان می‌دهد. */
/* ⚠ مرکزچینی با فلکس انجام می‌شود نه با موقعیت مطلق و درصد. نسخهٔ اول از inset درصدی
   استفاده می‌کرد؛ آن روش برای شکل متقارنِ قبلی (به‌علاوه) جواب می‌داد ولی پیکان متقارن
   نیست و همان‌جا از مرکز خارج شد. فلکس، جعبهٔ هشت‌درهشت را دقیقاً وسط می‌گذارد. */
.dmwd-type__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background-color: rgba(10, 25, 47, .06);
    transition: background-color .3s ease, border-color .3s ease;
}

/* ⚠ حاشیه‌ها فیزیکی‌اند (راست و پایین)، نه منطقی. با حاشیهٔ منطقی، در صفحهٔ راست‌به‌چپ
   لبهٔ «انتها» همان لبهٔ چپ می‌شود و پیکان وارونه می‌شد — علت راست‌نشان‌دادنِ فلش.
   ⚠ جابه‌جایی‌های کوچک برای مرکز دیداری‌اند نه هندسی: جوهرِ پیکان در گوشهٔ جعبه جمع
   است، پس مرکز جعبه با مرکزی که چشم می‌بیند یکی نیست و باید در خلاف جهت نوک جبران شود.
   ⚠ هر دو حالت دقیقاً یک ترتیبِ توابع دارند (translate سپس rotate) تا مرورگر بتواند
   بینشان درون‌یابی نرم انجام دهد. */
.dmwd-type__icon::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-primary);
    border-bottom: 2px solid var(--text-primary);
    /* بسته: نوک به چپ، هم‌زبان با پیکان زیرمنوهای همین سایت در حالت راست‌به‌چپ. */
    transform: translate(2.8px, 0) rotate(135deg);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .3s ease;
}

.dmwd-type.is-open .dmwd-type__icon {
    border-color: var(--accent-primary);
    background-color: rgba(245, 214, 143, .14);
}

/* باز: نوک رو به پایین. */
.dmwd-type.is-open .dmwd-type__icon::before {
    border-color: var(--accent-primary);
    transform: translate(0, -2.8px) rotate(45deg);
}

/* ارتفاع را جاوااسکریپت ست می‌کند؛ بدون جاوااسکریپت همهٔ متن‌ها باز می‌مانند. */
.dmwd-types-ready .dmwd-type__body {
    height: 0;
    overflow: hidden;
    transition: height .4s cubic-bezier(.2, .7, .2, 1);
}

/* خط‌چین بالای متن، مرز میان سرتیتر و توضیح را نشان می‌دهد بدون اینکه کارت را دوتکه کند. */
.dmwd-type__body p {
    margin: 0 22px 22px;
    padding-block-start: 18px;
    border-block-start: 1px dashed var(--border-color);
    font-size: 15px;
    line-height: 2.1;
    color: var(--text-secondary);
    text-align: justify;
}

/* ═══ کاروسل نظرها (همان الگوی قالب صفحه طراحی سایت) ═══ */

.dmwd-quotes__title {
    margin-block-end: clamp(16px, 2vw, 26px);
}

.dmwd-quotes__viewport {
    overflow: hidden;
    padding-block: 10px 24px;
}

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

.dmwd-quotes__item {
    flex: 0 0 calc((100% - 2 * clamp(16px, 2vw, 28px)) / 3);
    min-width: 0;
    height: clamp(330px, 30vw, 420px);
}

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

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

.dmwd-quotes__item.is-active .dmwd-quotes__card {
    transform: scale(1);
    opacity: 1;
    border-color: rgba(245, 214, 143, .4);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

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

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

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

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

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

.dmwd-quotes__name {
    margin: 0 0 3px;
    font-size: 16px;
    color: var(--text-primary);
}

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

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

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

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

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

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

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

.dmwd-quotes__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .22);
    cursor: pointer;
    transition: width .3s ease, background-color .3s ease;
}

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

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

.dmwd-faq__head {
    margin-block-end: clamp(30px, 4vw, 60px);
}

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

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

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

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

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

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

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

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

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

/* بدون تصویر، تک‌ستونه؛ با تصویر، همان الگوی مشترک: عکس یک ستون و آکاردئون ستون دیگر. */
.dmwd-faq__body {
    max-width: 980px;
}

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

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

.dmwd-faq__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(.15);
}

.dmwd-faq__accordion {
    order: 1;
}

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

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

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

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

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

.dmwd-faq__q-text {
    font-family: 'gofteh', 'dana', 'IRANSansX', sans-serif;
    font-size: clamp(18px, 1.8vw, 26px);
    font-weight: 400;
    color: var(--text-primary);
}

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

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

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

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

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

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

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

.dmwd-faq__a {
    height: 0;
    overflow: hidden;
    transition: height .45s cubic-bezier(.2, .7, .2, 1);
}

.dmwd-faq__a p {
    margin: 0;
    max-width: 560px;
    padding: 0 4px 28px;
    font-size: 15px;
    line-height: 1.9;
    color: var(--text-secondary);
}

/* ═══ متن‌های تکمیلی ═══ */

.dmwd-read__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}

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

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

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

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

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

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

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

.dmwd-read__body h4 {
    margin: 20px 0 8px;
    font-size: 16px;
    color: var(--text-primary);
}

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

.dmwd-read__list {
    display: grid;
    gap: 12px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.dmwd-read__list li {
    position: relative;
    padding-inline-start: 28px;
    font-size: 15px;
    line-height: 2.1;
    color: var(--text-secondary);
    text-align: justify;
}

.dmwd-read__list li::before {
    content: "✓";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 4px;
    font-weight: 700;
    color: var(--accent-primary);
}

.dmwd-read__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-block: 16px 22px;
}

.dmwd-read__card {
    padding: 20px 22px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background-color: var(--bg-secondary);
}

.dmwd-read__card h4 {
    margin: 0 0 8px;
}

/* جعبهٔ تماس کنار متن؛ با اسکرول همراه می‌ماند. */
.dmwd-read__cta-box {
    position: sticky;
    top: clamp(96px, 12vh, 140px);
    padding: clamp(22px, 2.4vw, 30px);
    border: 1px solid var(--accent-primary);
    border-radius: 24px;
    background-image: linear-gradient(140deg, rgba(245, 214, 143, .16), rgba(184, 115, 51, .05));
    text-align: center;
}

.dmwd-read__cta-box h3 {
    margin: 0 0 10px;
    font-size: 18px;
    line-height: 1.8;
    color: var(--text-primary);
}

.dmwd-read__cta-box p {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 2;
    color: var(--text-secondary);
}

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

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

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

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

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

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

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

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

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

@media (max-width: 991px) {
    .dmwd-hero__grid,
    .dmwd-team__grid,
    .dmwd-why__grid,
    .dmwd-wp__grid,
    .dmwd-read__grid,
    .dmwd-plans {
        grid-template-columns: minmax(0, 1fr);
    }

    .dmwd-hero__visual {
        order: -1;
    }

    .dmwd-showcase,
    .dmwd-faq__body--split,
    .dmwd-vip__grid--split,
    .dmwd-consult--split {
        grid-template-columns: minmax(0, 1fr);
    }

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

    .dmwd-shot {
        flex-basis: min(86%, 340px);
    }

    /* ⚠ صحنهٔ سه‌بعدی روی موبایل خاموش می‌شود. تجربهٔ ثبت‌شدهٔ همین کدپایه: صرفِ فعال‌بودن
       یک زمینهٔ پرسپکتیو، عنصر را روی لایهٔ جداگانهٔ پردازندهٔ گرافیکی می‌برد و متن روی
       آن لایه در مرورگرهای موبایل مات رندر می‌شود — حتی وقتی هیچ چرخشی در کار نیست.
       چون چرخش فقط در هاور رخ می‌دهد و لمس هاور ندارد، اینجا چیزی از دست نمی‌رود. */
    .dmwd-marquee {
        perspective: none;
    }

    .dmwd-marquee__item {
        transform: none;
    }

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

    /* سه ستون فقط وقتی معنا دارد که عرض سکشن کامل باشد. */
    .dmwd-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .dmwd-type__toggle {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    /* در عرض کم، برچسب کوتاه حذف می‌شود تا عنوان کامل جا بگیرد. */
    .dmwd-type__nav {
        display: none;
    }

    .dmwd-read__cta-box {
        position: static;
    }
}

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

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

    .dmwd-speed__list,
    .dmwd-read__cards,
    .dmwd-flow__list,
    .dmwd-chips {
        grid-template-columns: minmax(0, 1fr);
    }

    /* روی صفحهٔ باریک، چرخش سه‌بعدی هیرو فقط جا می‌گیرد و چیزی اضافه نمی‌کند. */
    .dmwd-hero__stage {
        transform: none;
    }

    .dmwd-hero__chip {
        transform: none;
        animation: none;
    }

    .dmwd-badge--top,
    .dmwd-badge--bottom {
        inset-inline: auto;
        padding: 10px 16px;
    }
}

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

    .dmwd-hero__stage,
    .dmwd-hero__glow {
        transform: none;
        transition: none;
    }

    .dmwd-hero__chip {
        animation: none;
        transform: none;
    }

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