/* dmhouse-seo-coaching.css — قالب «کوچینگ سئو» (template-parts/body/seo-coaching.php).
   ⚠ همهٔ قاعده‌ها زیر ریشهٔ .dmcc. رنگ‌ها از توکن‌های base.css و کلاس‌های theme-dark / theme-light
   هر سکشن می‌آیند، پس روشن/تیره بودن هر سکشن فقط با همان کلاس عوض می‌شود.
   پرسش‌ها: مؤلفهٔ مشترک dmhouse-seo-faq.css · لوگوها: ماژول dmhouse-testimonials.css. */

.dmcc {
    box-sizing: border-box;
    direction: rtl;
}

.dmcc *,
.dmcc *::before,
.dmcc *::after {
    box-sizing: inherit;
}

.dmcc [hidden] {
    display: none !important;
}

.dmcc .dmcc-sec {
    position: relative;
    padding-block: 110px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    overflow: hidden;
}

/* ── موج بین سکشن‌های سفید و سرمه‌ای (section-meld در base.css) ──
   موج لایهٔ ۱ است؛ محتوا بالای آن می‌نشیند و سکشن موج‌دار فاصلهٔ بیشتری می‌گیرد تا موج روی
   متن نیفتد (ارتفاع موج تا ۱۲۰px). */
.dmcc .dmcc-sec.section-meld {
    padding-block: clamp(110px, 12vw, 170px);
}

.dmcc .dmcc-sec.section-meld > .page-container {
    position: relative;
    z-index: 2;
}

/* فرم آخرین سکشن است و زیرش فوتر سرمه‌ای می‌آید؛ موج پایین مثل بقیهٔ صفحه‌ها خاموش. */
.dmcc .dmcc-form.section-meld::after {
    display: none;
}

.dmcc .dmcc-hl {
    color: var(--accent-primary);
}

.dmcc .dmcc-title {
    margin: 0 0 22px;
    color: var(--text-primary);
    font-size: clamp(26px, 3.2vw, 40px);
    font-weight: 900;
    line-height: 1.5;
}

/* ⚠ base.css تیترها (h2، …) را وسط‌چین می‌کند و بر ارث‌بری از والد می‌برد؛ تیترهای این قالب صریحاً
   راست‌چین (start) می‌شوند و هر تگی که ادمین انتخاب کند همین را می‌گیرد. */
.dmcc .dmcc-title,
.dmcc .dmcc-form__title {
    text-align: start;
}

.dmcc .dmcc-title--center {
    margin-inline: auto;
    margin-block-end: 56px;
    text-align: center;
    max-width: 760px;
}

/* ══════════ هیرو ══════════ */
.dmcc .dmcc-hero {
    padding-block: 170px 120px;
}

.dmcc .dmcc-hero__glow {
    position: absolute;
    inset-block-start: -180px;
    inset-inline-start: -120px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(184, 115, 51, 0.28), transparent 65%);
    pointer-events: none;
}

.dmcc .dmcc-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 64px;
    align-items: center;
}

.dmcc .dmcc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-block-end: 22px;
    padding: 8px 18px;
    border: 1px solid var(--border-color);
    border-radius: var(--pill-radius);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 700;
}

.dmcc .dmcc-eyebrow__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--accent-primary);
    box-shadow: 0 0 0 4px rgba(245, 214, 143, 0.18);
}

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

.dmcc .dmcc-hero__sub {
    margin: 0 0 22px;
    color: var(--accent-primary);
    font-size: clamp(18px, 2vw, 23px);
    font-weight: 800;
    line-height: 1.8;
}

.dmcc .dmcc-hero__desc {
    margin: 0 0 34px;
    max-width: 640px;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 2.2;
    text-align: justify;
}

.dmcc .dmcc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.dmcc .dmcc-tel {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 800;
    text-decoration: none;
}

.dmcc .dmcc-tel__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--accent-primary);
    font-size: 15px;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.dmcc .dmcc-tel:hover .dmcc-tel__ico,
.dmcc .dmcc-tel:focus-visible .dmcc-tel__ico {
    background-color: var(--accent-primary);
    color: var(--bg-primary);
}

.dmcc .dmcc-trust {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 28px 0 0;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
}

.dmcc .dmcc-trust i {
    color: var(--accent-primary);
}

.dmcc .dmcc-hero__media {
    display: flex;
    justify-content: center;
    min-width: 0;
}

.dmcc .dmcc-portrait {
    position: relative;
    width: min(420px, 100%);
    aspect-ratio: 4 / 5;
}

.dmcc .dmcc-portrait img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 220px 220px 32px 32px;
    object-fit: cover;
}

.dmcc .dmcc-portrait__ring {
    position: absolute;
    inset: -14px;
    border: 1px solid rgba(245, 214, 143, 0.45);
    border-radius: 234px 234px 44px 44px;
    pointer-events: none;
}

/* ══════════ چرا الیاس علیپور ══════════ */
.dmcc .dmcc-why__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
    gap: 56px;
    align-items: center;
}

.dmcc .dmcc-why__main {
    min-width: 0;
    padding-inline-start: 28px;
    border-inline-start: 3px solid var(--accent-primary);
}

.dmcc .dmcc-why__text {
    margin: 0;
    color: var(--text-secondary);
    font-size: 17px;
    line-height: 2.3;
    text-align: justify;
}

/* صحنهٔ دو مسیر */
.dmcc .dmcc-why__visual {
    position: relative;
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--border-color);
    border-radius: 28px;
    background-color: var(--bg-secondary);
}

/* ⚠ RTL: صحنه آینه می‌شود تا مسیر از راستِ پایین (شروع) به چپِ بالا (هدف) برود. */
.dmcc .dmcc-routes {
    display: block;
    width: 100%;
    height: auto;
    transform: scaleX(-1);
}

.dmcc .dmcc-routes__maze,
.dmcc .dmcc-routes__direct {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    stroke-linecap: round;
}

.dmcc .dmcc-routes__maze {
    stroke: #a0aec0;
    stroke-width: 2.5;
}

.dmcc .dmcc-routes__direct {
    stroke: var(--color-copper);
    stroke-width: 5;
}

.dmcc .dmcc-routes__start {
    fill: var(--color-navy);
}

.dmcc .dmcc-routes__goal {
    fill: var(--color-gold);
    stroke: var(--color-copper);
    stroke-width: 3;
    transform-origin: 390px 40px;
    transform: scale(0);
}

/* حلقهٔ ۹ ثانیه‌ای: آزمون و خطا کشیده می‌شود، بعد مسیر مستقیم، هدف می‌درخشد، همه پاک و از نو. */
.dmcc .dmcc-why__visual.is-in .dmcc-routes__maze {
    animation: dmccMaze 9s ease infinite;
}

.dmcc .dmcc-why__visual.is-in .dmcc-routes__direct {
    animation: dmccDirect 9s cubic-bezier(.65, 0, .35, 1) infinite;
}

.dmcc .dmcc-why__visual.is-in .dmcc-routes__goal {
    animation: dmccGoal 9s cubic-bezier(.34, 1.56, .64, 1) infinite;
}

@keyframes dmccMaze {
    0% { stroke-dashoffset: 1; opacity: 1; }
    30%, 85% { stroke-dashoffset: 0; opacity: 1; }
    95%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes dmccDirect {
    0%, 22% { stroke-dashoffset: 1; opacity: 1; }
    42%, 85% { stroke-dashoffset: 0; opacity: 1; }
    95%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes dmccGoal {
    0%, 40% { transform: scale(0); }
    48%, 85% { transform: scale(1); }
    95%, 100% { transform: scale(0); }
}

.dmcc .dmcc-routes__tag {
    position: absolute;
    padding: 4px 12px;
    border-radius: var(--pill-radius);
    font-size: 12px;
    font-weight: 800;
}

.dmcc .dmcc-routes__tag--maze {
    inset-block-start: 26%;
    inset-inline-start: 40%;
    background-color: var(--bg-primary);
    color: var(--text-secondary);
    border: 1px dashed #a0aec0;
}

.dmcc .dmcc-routes__tag--direct {
    inset-block-start: 8%;
    inset-inline-end: 34%;
    background-color: var(--color-navy);
    color: var(--color-gold);
}

.dmcc .dmcc-why__points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.dmcc .dmcc-point {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--pill-radius);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
}

.dmcc .dmcc-point__tick {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: var(--color-copper);
}

/* ══════════ مناسب چه کسانی ══════════ */
.dmcc .dmcc-aud__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.dmcc .dmcc-aud__card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    padding: 36px 32px;
    border: 1px solid var(--border-color);
    border-radius: 28px;
    background-color: var(--bg-secondary);
}

.dmcc .dmcc-aud__name {
    margin: 0;
    color: var(--text-primary);
    font-size: 22px;
    font-weight: 900;
}

.dmcc .dmcc-aud__block {
    padding: 18px 20px;
    border-radius: 18px;
}

.dmcc .dmcc-aud__block p {
    margin: 8px 0 0;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 2.1;
}

.dmcc .dmcc-aud__block--problem {
    background-color: rgba(255, 255, 255, 0.04);
}

.dmcc .dmcc-aud__block--solution {
    border: 1px solid rgba(245, 214, 143, 0.35);
    background-color: rgba(245, 214, 143, 0.06);
}

.dmcc .dmcc-aud__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 800;
}

.dmcc .dmcc-aud__block--solution .dmcc-aud__label {
    color: var(--accent-primary);
}

/* ══════════ آمار ══════════ */
.dmcc .dmcc-stats {
    padding-block: 80px;
}

.dmcc .dmcc-stats__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmcc .dmcc-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 30px 20px;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    text-align: center;
}

.dmcc .dmcc-stat__value {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: var(--accent-primary);
    font-size: clamp(38px, 4.4vw, 56px);
    font-weight: 900;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.dmcc .dmcc-stat__suffix {
    font-size: 0.6em;
}

.dmcc .dmcc-stat__label {
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 700;
}

/* ══════════ در جلسات چه می‌گذرد — نقشهٔ راه ══════════
   جادهٔ عمودی وسط؛ ایستگاه فرد سمت راست، زوج سمت چپ (در RTL: inline-start / inline-end).
   --dmcc-road (۰ تا ۱) را اسکریپت با اسکرول می‌نویسد؛ بی‌اسکریپت جاده کامل پر است. */
.dmcc .dmcc-road {
    --dmcc-road: 1;
    position: relative;
    max-width: 1000px;
    margin-inline: auto;
    padding-block-end: 90px;
}

.dmcc .dmcc-road__track {
    position: absolute;
    inset-block: 0 70px;
    inset-inline-start: calc(50% - 7px);
    width: 14px;
    border-radius: 14px;
    background-color: var(--color-navy);
    background-image: repeating-linear-gradient(to bottom, rgba(245, 214, 143, .55) 0 14px, transparent 14px 30px);
    background-size: 2px 100%;
    background-position: center top;
    background-repeat: no-repeat;
}

.dmcc .dmcc-road__fill {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    height: calc(var(--dmcc-road) * 100%);
    border-radius: 14px;
    background-color: var(--color-copper);
}

.dmcc .dmcc-road__car {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: calc(var(--dmcc-road) * 100%);
    width: 26px;
    height: 26px;
    border: 4px solid var(--color-gold);
    border-radius: 50%;
    background-color: var(--color-copper);
    box-shadow: 0 0 0 8px rgba(184, 115, 51, .2);
    transform: translate(50%, -50%);
}

.dmcc .dmcc-road__list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 34px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmcc .dmcc-stop {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr);
    align-items: center;
}

.dmcc .dmcc-stop__node {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    padding: 15px;
    border: 3px solid var(--color-gold);
    border-radius: 50%;
    background-color: var(--bg-primary);
    color: var(--color-copper);
    z-index: 1;
    transform: scale(.4);
    opacity: 0;
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease;
}

.dmcc .dmcc-stop__card {
    grid-row: 1;
    grid-column: 1;
    position: relative;
    padding: 24px 26px;
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background-color: var(--bg-primary);
    box-shadow: var(--card-shadow);
    opacity: 0;
    transform: translateX(30px);
    transition: transform .6s ease, opacity .6s ease, border-color var(--transition-fast);
}

.dmcc .dmcc-stop:nth-child(even) .dmcc-stop__card {
    grid-column: 3;
    transform: translateX(-30px);
}

/* زبانهٔ کوچک کارت رو به جاده */
.dmcc .dmcc-stop__card::after {
    content: "";
    position: absolute;
    inset-block-start: calc(50% - 8px);
    inset-inline-end: -8px;
    width: 16px;
    height: 16px;
    border-block-start: 1px solid var(--border-color);
    border-inline-end: 1px solid var(--border-color);
    background-color: inherit;
    transform: rotate(-45deg);
}

.dmcc .dmcc-stop:nth-child(even) .dmcc-stop__card::after {
    inset-inline-end: auto;
    inset-inline-start: -8px;
    transform: rotate(135deg);
}

.dmcc .dmcc-stop.is-in .dmcc-stop__node {
    transform: scale(1);
    opacity: 1;
}

.dmcc .dmcc-stop.is-in .dmcc-stop__card {
    transform: none;
    opacity: 1;
}

.dmcc .dmcc-stop__card:hover {
    border-color: var(--accent-primary);
}

/* ۱.۱۲۲.۳ — نقشهٔ راه آرام و خوانا: فاصلهٔ اسکرول کافی بین ایستگاه‌ها، ایستگاه فعلی پررنگ و درخشان،
   گذشته‌ها مسی، بقیه کم‌رنگ. نشانگر دقیقاً روی گرهٔ ایستگاه فعلی می‌ایستد (اسکریپت). */
.dmcc.is-js .dmcc-road__list { gap: 14vh; }

.dmcc.is-js .dmcc-stop.is-in .dmcc-stop__card { opacity: .5; transition: opacity .4s ease, transform .5s ease, border-color .3s ease, box-shadow .3s ease; }
.dmcc.is-js .dmcc-stop.is-done .dmcc-stop__card { opacity: .75; }
.dmcc.is-js .dmcc-stop.is-on .dmcc-stop__card {
    opacity: 1;
    border-color: var(--accent-primary);
    box-shadow: 0 24px 50px -30px color-mix(in srgb, var(--accent-primary) 60%, transparent);
}

.dmcc .dmcc-stop__node { transition: background-color .35s ease, color .35s ease, scale .35s ease, box-shadow .35s ease; }
.dmcc .dmcc-stop.is-done .dmcc-stop__node { background-color: var(--color-copper); color: #fff; }

.dmcc .dmcc-stop.is-on .dmcc-stop__node {
    scale: 1.15;
    background-color: var(--color-navy);
    color: var(--color-gold);
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-copper) 25%, transparent);
}

.dmcc .dmcc-road__fill { transition: height .12s linear; }
.dmcc .dmcc-road__car { transition: inset-block-start .12s linear; }

.dmcc .dmcc-stop__num {
    display: inline-block;
    margin-block-end: 8px;
    padding: 2px 12px;
    border-radius: var(--pill-radius);
    background-color: var(--color-navy);
    color: var(--color-gold);
    font-size: 12px;
    font-weight: 800;
}

.dmcc .dmcc-stop__title {
    margin: 0 0 6px;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 900;
}

.dmcc .dmcc-stop__desc {
    margin: 0;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 2.1;
}

.dmcc .dmcc-road__goal {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 50%;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 900;
    transform: translateX(50%);
}

.dmcc .dmcc-road__flag {
    display: inline-flex;
    width: 56px;
    height: 56px;
    padding: 13px;
    border-radius: 50%;
    background-color: var(--color-copper);
    color: #fff;
    animation: dmccPulse 2.4s ease-in-out infinite;
}

/* ══════════ پرسش‌ها و متن سئویی — طرح صفحه‌های طراحی سایت (dmhouse-service.css)، دست‌نخورده ══════════
   فقط وقتی تصویری انتخاب نشده، پرسش‌ها تک‌ستونه و وسط‌چین می‌شوند. */
.dmcc .dmcc-faq .dmcc-faq__body--solo {
    grid-template-columns: minmax(0, 1fr);
    max-width: 900px;
    margin-inline: auto;
}

/* سکشن متن سئویی بلافاصله بعد از پرسش‌هاست؛ فاصلهٔ بالا کم می‌شود تا دو سکشن سفید از هم جدا نیفتند. */
.dmcc .dmcc-long {
    padding-block-start: 20px;
}

/* ══════════ متن ویرایشگر (پیوند، پررنگ، فهرست) داخل بخش‌ها ══════════ */
.dmcc .dmcc-rich > :first-child {
    margin-block-start: 0;
}

.dmcc .dmcc-rich > :last-child {
    margin-block-end: 0;
}

.dmcc .dmcc-rich p {
    margin: 0 0 12px;
}

.dmcc .dmcc-rich a {
    color: var(--accent-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.dmcc .dmcc-rich strong {
    color: var(--text-primary);
}

.dmcc .dmcc-rich ul,
.dmcc .dmcc-rich ol {
    margin: 0 0 12px;
    padding-inline-start: 22px;
}

/* ══════════ فرم پایانی — همان طرح قالب مشاوره سئو (dmsc-form)، زیر پیشوند همین قالب ══════════
   ⚠ پوستهٔ خروجی افزونهٔ فرم‌ساز (dmf-*) important دارد: شیوه‌نامهٔ خود افزونه هم‌وزن است و ترتیب
   بارگذاری تضمینی ندارد — همان الگوی فرم همهٔ صفحه‌های دیگر. */
.dmcc .dmcc-form {
    overflow: hidden;
}

.dmcc .dmcc-form__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.dmcc .dmcc-form__orb--a {
    inset-block-start: 10%;
    inset-inline-start: -10%;
    width: 50vw;
    height: 50vw;
    background-image: radial-gradient(closest-side, rgba(245, 214, 143, .16), transparent);
}

.dmcc .dmcc-form__orb--b {
    inset-block-end: -20%;
    inset-inline-end: -10%;
    width: 40vw;
    height: 40vw;
    background-image: radial-gradient(closest-side, rgba(184, 115, 51, .22), transparent);
}

.dmcc .dmcc-form__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: clamp(24px, 5vw, 80px);
}

.dmcc .dmcc-form__rocket {
    display: block;
    width: clamp(80px, 9vw, 130px);
    margin-block-end: 16px;
    animation: dmccFloat 5s ease-in-out infinite;
}

.dmcc .dmcc-form__rocket svg {
    display: block;
    width: 100%;
    fill: none;
    stroke: var(--color-gold);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dmcc .dmcc-form__flame {
    fill: var(--color-copper);
    stroke: none;
    transform-box: fill-box;
    transform-origin: top;
    animation: dmccFlame .35s ease-in-out infinite alternate;
}

.dmcc .dmcc-form__title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(32px, 5vw, 68px);
    font-weight: 900;
    line-height: 1.4;
}

.dmcc .dmcc-form__desc {
    margin-block-start: 18px;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 2.2;
}

.dmcc .dmcc-form__wrap {
    min-width: 0;
    padding: clamp(22px, 3vw, 44px);
    border: 1px solid rgba(245, 214, 143, .22);
    border-radius: 30px;
    background-color: rgba(255, 255, 255, .03);
}

.dmcc .dmcc-form__wrap--tel {
    display: flex;
    justify-content: center;
}

.dmcc .dmcc-form__wrap .dmf-form {
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
}

/* ⚠ چیدمان را خود فرم‌ساز تعیین می‌کند: هر فیلد کلاس عرضش را دارد (dmf-col-100 تمام‌عرض،
   dmf-col-50 نیم‌عرض، …). شبکه دوستونه است ولی فقط فیلدهای نیم‌عرض کنار هم می‌نشینند؛ پیش‌تر همه
   به‌زور دوستونه می‌شدند و «پیام شما» کنار فهرست کشویی می‌افتاد. */
.dmcc .dmcc-form__wrap .dmf-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 22px !important;
}

.dmcc .dmcc-form__wrap .dmf-field-wrap {
    display: flex !important;
    flex-direction: column !important;
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
}

.dmcc .dmcc-form__wrap .dmf-field-wrap.dmf-col-50,
.dmcc .dmcc-form__wrap .dmf-field-wrap.dmf-col-33,
.dmcc .dmcc-form__wrap .dmf-field-wrap.dmf-col-25 {
    grid-column: auto !important;
}

.dmcc .dmcc-form__wrap .dmf-field-wrap label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.dmcc .dmcc-form__wrap .dmf-field-wrap input:not([type="radio"]):not([type="checkbox"]),
.dmcc .dmcc-form__wrap .dmf-field-wrap select,
.dmcc .dmcc-form__wrap .dmf-field-wrap textarea {
    width: 100% !important;
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 14px !important;
    color: #ffffff !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    font-family: inherit !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color .3s ease, background-color .3s ease !important;
}

.dmcc .dmcc-form__wrap .dmf-field-wrap textarea {
    resize: vertical !important;
    min-height: 110px !important;
}

.dmcc .dmcc-form__wrap .dmf-field-wrap select option {
    background: var(--color-navy) !important;
    color: #ffffff !important;
}

.dmcc .dmcc-form__wrap .dmf-field-wrap input::placeholder,
.dmcc .dmcc-form__wrap .dmf-field-wrap textarea::placeholder {
    color: rgba(255, 255, 255, .45) !important;
}

.dmcc .dmcc-form__wrap .dmf-field-wrap input:focus,
.dmcc .dmcc-form__wrap .dmf-field-wrap select:focus,
.dmcc .dmcc-form__wrap .dmf-field-wrap textarea:focus {
    border-color: var(--color-gold) !important;
    background: rgba(245, 214, 143, .06) !important;
}

.dmcc .dmcc-form__wrap .dmf-choices {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    gap: 10px !important;
}

.dmcc .dmcc-form__wrap .dmf-choice {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, .85) !important;
    cursor: pointer !important;
}

.dmcc .dmcc-form__wrap .dmf-choice input {
    accent-color: var(--color-gold) !important;
}

.dmcc .dmcc-form__wrap .dmf-req {
    color: var(--color-gold) !important;
}

.dmcc .dmcc-form__wrap .dmf-form-msg {
    border-radius: 12px !important;
    padding: 12px 16px !important;
    margin-bottom: 0 !important;
    font-size: 14px !important;
}

.dmcc .dmcc-form__wrap .dmf-form-msg.dmf-ok {
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid var(--color-gold) !important;
    color: #ffffff !important;
}

.dmcc .dmcc-form__wrap .dmf-form-msg.dmf-err {
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid #ff6b6b !important;
    color: #ff6b6b !important;
}

.dmcc .dmcc-form__wrap .dmf-actions {
    display: flex !important;
    margin-top: 4px !important;
}

.dmcc .dmcc-form__wrap .dmf-submit {
    width: auto !important;
    padding: 16px 38px !important;
    border: 0 !important;
    border-radius: 50px !important;
    background: linear-gradient(135deg, #fbe3a6, #e0a96a 55%, #b87333) !important;
    color: var(--color-navy) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    box-shadow: 0 16px 30px -14px rgba(245, 214, 143, .6) !important;
    transition: box-shadow .3s ease, filter .3s ease !important;
}

.dmcc .dmcc-form__wrap .dmf-submit:hover:not(:disabled) {
    box-shadow: 0 22px 40px -14px rgba(245, 214, 143, .85) !important;
}

/* ══════════ صحنه‌ها ══════════ */
.dmcc .dmcc-ico {
    display: block;
    width: 100%;
    height: 100%;
}

/* هیرو: کارت‌های شناور دور عکس */
.dmcc .dmcc-float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    background-color: rgba(10, 25, 47, .82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
    color: #fff;
    animation: dmccFloat 6s ease-in-out infinite;
}

.dmcc .dmcc-float__ico {
    display: inline-flex;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 9px;
    border-radius: 12px;
    background-color: var(--color-copper);
    color: #fff;
}

.dmcc .dmcc-float__txt {
    display: flex;
    flex-direction: column;
    line-height: 1.5;
}

.dmcc .dmcc-float small {
    color: #cbd5e0;
    font-size: 11px;
}

.dmcc .dmcc-float b {
    color: var(--color-gold);
    font-size: 17px;
    font-weight: 900;
}

.dmcc .dmcc-float--rank {
    inset-block-start: 12%;
    inset-inline-start: -16%;
}

.dmcc .dmcc-float--rank b {
    font-size: 24px;
}

.dmcc .dmcc-float--chart {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    inset-block-end: 22%;
    inset-inline-end: -18%;
    animation-delay: -2s;
}

/* ⚠ RTL: نمودار آینه می‌شود تا رشد از راست به چپ کشیده شود. */
.dmcc .dmcc-spark {
    width: 120px;
    height: 50px;
    transform: scaleX(-1);
}

.dmcc .dmcc-spark__area {
    fill: rgba(245, 214, 143, .16);
}

/* حلقهٔ ۶ ثانیه‌ای: کشیده می‌شود، می‌ماند، پاک و از نو. */
.dmcc .dmcc-spark__line {
    stroke: var(--color-gold);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: dmccLineLoop 6s ease infinite;
}

@keyframes dmccLineLoop {
    0%, 8% { stroke-dashoffset: 1; opacity: 1; }
    45%, 88% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

/* ══════════ صحنهٔ وکتوری هیرو (وقتی عکسی بارگذاری نشده) ══════════ */
.dmcc .dmcc-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 220px 220px 32px 32px;
    background: radial-gradient(circle at 50% 30%, rgba(245, 214, 143, .16), transparent 60%), #0d203b;
}

.dmcc .dmcc-art__board {
    fill: rgba(255, 255, 255, .05);
    stroke: rgba(245, 214, 143, .45);
    stroke-width: 2;
}

.dmcc .dmcc-art__grid {
    stroke: rgba(255, 255, 255, .08);
    stroke-width: 1.5;
}

.dmcc .dmcc-art__chart {
    stroke: var(--color-gold);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: dmccLineLoop 7s ease infinite;
}

.dmcc .dmcc-art__peak {
    fill: var(--color-copper);
    transform-box: fill-box;
    transform-origin: center;
    animation: dmccPeak 7s ease infinite;
}

.dmcc .dmcc-art__leg {
    stroke: rgba(245, 214, 143, .45);
    stroke-width: 3;
}

.dmcc .dmcc-art__mentor circle,
.dmcc .dmcc-art__mentor path:not(.dmcc-art__point) {
    fill: var(--color-copper);
}

.dmcc .dmcc-art__point {
    stroke: var(--color-gold);
    stroke-width: 6;
    stroke-linecap: round;
    transform-box: fill-box;
    transform-origin: bottom right;
    animation: dmccPoint 3.5s ease-in-out infinite;
}

.dmcc .dmcc-art__learner circle,
.dmcc .dmcc-art__learner path {
    fill: rgba(255, 255, 255, .28);
}

.dmcc .dmcc-art__bubble rect {
    fill: #fff;
}

.dmcc .dmcc-art__bubble circle {
    fill: var(--color-navy);
    animation: dmccBlinkDot 1.4s ease-in-out infinite;
}

.dmcc .dmcc-art__bubble circle:nth-of-type(2) { animation-delay: .2s; }
.dmcc .dmcc-art__bubble circle:nth-of-type(3) { animation-delay: .4s; }

.dmcc .dmcc-art__bubble {
    animation: dmccFloat 5s ease-in-out infinite;
}

@keyframes dmccPeak {
    0%, 40% { transform: scale(0); }
    50%, 88% { transform: scale(1); }
    100% { transform: scale(0); }
}

@keyframes dmccPoint {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-6deg); }
}

@keyframes dmccBlinkDot {
    0%, 100% { opacity: .3; }
    50% { opacity: 1; }
}

.dmcc .dmcc-float--session {
    inset-block-end: 4%;
    inset-inline-start: -8%;
    animation-delay: -4s;
}

/* مناسب چه کسانی: آیکون‌ها و پیکان متحرک مسئله ← راه حل */
.dmcc .dmcc-aud__ico {
    display: inline-flex;
    width: 22px;
    height: 22px;
}

.dmcc .dmcc-aud__ico--loop {
    color: #a0aec0;
    animation: dmccSpin 6s linear infinite;
}

.dmcc .dmcc-aud__ico--rise {
    color: var(--accent-primary);
}

.dmcc .dmcc-aud__bridge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-block: -6px;
}

.dmcc .dmcc-aud__bridge i {
    width: 12px;
    height: 12px;
    border-inline-end: 3px solid var(--accent-primary);
    border-block-end: 3px solid var(--accent-primary);
    transform: rotate(45deg);
    opacity: .2;
    animation: dmccChevron 1.6s ease-in-out infinite;
}

.dmcc .dmcc-aud__bridge i:nth-child(2) { animation-delay: .2s; }
.dmcc .dmcc-aud__bridge i:nth-child(3) { animation-delay: .4s; }

.dmcc .dmcc-aud__card {
    opacity: 0;
    transform: translateY(30px);
    transition: transform .7s ease, opacity .7s ease;
}

.dmcc .dmcc-aud__card.is-in {
    opacity: 1;
    transform: none;
}

/* آمار: حلقهٔ پیشرفت */
.dmcc .dmcc-stat {
    position: relative;
    border: 0;
}

.dmcc .dmcc-stat__ring {
    width: 150px;
    height: 150px;
    margin-block-end: -112px;
    /* ⚠ RTL: حلقه از بالا و پادساعتگرد (راست به چپ) پر می‌شود. */
    transform: rotate(-90deg) scaleY(-1);
}

.dmcc .dmcc-stat__track,
.dmcc .dmcc-stat__fill {
    fill: none;
    stroke-width: 4;
}

.dmcc .dmcc-stat__track {
    stroke: var(--border-color);
}

.dmcc .dmcc-stat__fill {
    stroke: var(--color-gold);
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

/* حلقهٔ ۸ ثانیه‌ای: پر می‌شود، می‌ماند، خالی و از نو. */
.dmcc .dmcc-stat.is-in .dmcc-stat__fill {
    animation: dmccRing 8s cubic-bezier(.65, 0, .35, 1) infinite;
}

@keyframes dmccRing {
    0% { stroke-dashoffset: 1; }
    30%, 85% { stroke-dashoffset: .22; }
    100% { stroke-dashoffset: 1; }
}

.dmcc .dmcc-stat__value {
    min-height: 74px;
    align-items: center;
}

.dmcc .dmcc-stat__label {
    margin-block-start: 40px;
}

@keyframes dmccFlame {
    from { transform: scaleY(.7); }
    to { transform: scaleY(1.15); }
}

@keyframes dmccFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes dmccDraw {
    to { stroke-dashoffset: 0; }
}

@keyframes dmccSpin {
    to { transform: rotate(360deg); }
}

@keyframes dmccChevron {
    0%, 100% { opacity: .2; }
    50% { opacity: 1; }
}

@keyframes dmccPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(184, 115, 51, .5); }
    50% { box-shadow: 0 0 0 10px rgba(184, 115, 51, 0); }
}

/* بی‌حرکت برای کسی که حرکت را خاموش کرده: همه‌چیز در حالت نهایی. */
@media (prefers-reduced-motion: reduce) {
    .dmcc *,
    .dmcc *::before,
    .dmcc *::after {
        animation: none !important;
        transition: none !important;
    }

    .dmcc .dmcc-spark__line,
    .dmcc .dmcc-routes__maze,
    .dmcc .dmcc-routes__direct,
    .dmcc .dmcc-art__chart {
        stroke-dashoffset: 0;
    }

    .dmcc .dmcc-stat__fill {
        stroke-dashoffset: .22;
    }

    .dmcc .dmcc-routes__goal,
    .dmcc .dmcc-art__peak,
    .dmcc .dmcc-stop__node,
    .dmcc .dmcc-stop__card,
    .dmcc .dmcc-aud__card {
        opacity: 1;
        transform: none;
    }
}

/* ⚠ بی‌جاوااسکریپت (یا پیش از اجرای آن) محتوا پنهان نمی‌ماند: حالت «پنهان تا دیده شود» فقط وقتی
   فعال است که اسکریپت کلاس is-js را روی ریشه گذاشته باشد. */
/* انتخابگرها عمداً یک سطح سنگین‌ترند تا بدون !important بر قاعدهٔ زوج/فرد و موبایل ببرند. */
.dmcc:not(.is-js) .dmcc-road .dmcc-stop .dmcc-stop__card,
.dmcc:not(.is-js) .dmcc-road .dmcc-stop .dmcc-stop__node,
.dmcc:not(.is-js) .dmcc-aud__grid .dmcc-aud__card {
    opacity: 1;
    transform: none;
}

/* ══════════ موبایل و تبلت ══════════ */
@media (max-width: 992px) {
    .dmcc .dmcc-sec {
        padding-block: 80px;
    }

    .dmcc .dmcc-hero {
        padding-block: 130px 80px;
    }

    .dmcc .dmcc-hero__grid,
    .dmcc .dmcc-why__grid,
    .dmcc .dmcc-form__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .dmcc .dmcc-form__wrap .dmf-grid {
        grid-template-columns: 1fr !important;
    }

    .dmcc .dmcc-hero__media {
        order: -1;
    }

    .dmcc .dmcc-portrait {
        width: min(300px, 70%);
    }

    /* کارت‌های شناور روی موبایل کوچک‌تر و داخل قاب، تا صفحه از کنار بیرون نزند. */
    .dmcc .dmcc-float {
        padding: 8px 10px;
        gap: 6px;
    }

    .dmcc .dmcc-float--rank {
        inset-inline-start: -12%;
    }

    .dmcc .dmcc-float--chart {
        inset-inline-end: -12%;
    }

    .dmcc .dmcc-float--session {
        display: none;
    }

    .dmcc .dmcc-float__ico {
        width: 30px;
        height: 30px;
        padding: 7px;
    }

    .dmcc .dmcc-spark {
        width: 84px;
        height: 36px;
    }

    /* جاده: یک ستون، جاده کنار راست و کارت‌ها همه یک طرف. */
    .dmcc .dmcc-road__track {
        inset-inline-start: 23px;
    }

    .dmcc .dmcc-stop {
        grid-template-columns: 60px minmax(0, 1fr);
        column-gap: 14px;
    }

    .dmcc .dmcc-stop__node {
        grid-column: 1;
        width: 50px;
        height: 50px;
        padding: 12px;
    }

    .dmcc .dmcc-stop__card,
    .dmcc .dmcc-stop:nth-child(even) .dmcc-stop__card {
        grid-column: 2;
        transform: translateX(-24px);
    }

    /* ⚠ هم‌وزن قاعدهٔ زوج بالا و پس از آن، تا کارت زوجِ دیده‌شده هم سر جایش بنشیند. */
    .dmcc .dmcc-road .dmcc-stop.is-in .dmcc-stop__card {
        transform: none;
    }

    .dmcc .dmcc-stop__card::after,
    .dmcc .dmcc-stop:nth-child(even) .dmcc-stop__card::after {
        inset-inline-end: auto;
        inset-inline-start: -8px;
        transform: rotate(135deg);
    }

    .dmcc .dmcc-road__goal {
        inset-inline-start: 0;
        transform: none;
    }
}

@media (max-width: 768px) {
    .dmcc .dmcc-aud__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .dmcc .dmcc-aud__card {
        padding: 26px 20px;
    }

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

    .dmcc .dmcc-form__wrap {
        padding: 22px 16px;
    }

    .dmcc .dmcc-why__main {
        padding-inline-start: 18px;
    }
}