/* dmhouse-about-elias.css — قالب «about Elias» (template-parts/body/about-elias.php).
   ⚠ همهٔ قاعده‌ها زیر .dmel. هویت: «داشبورد رشد»؛ فیروزه‌ای (--dmel-teal)، مرجانی (--dmel-coral) و طلایی برند.
   فرم پایانی مشترک در dmhouse-lead-form.css. */

.dmel {
    --dmel-gold: var(--accent-primary);
    --dmel-teal: #22c3b0;
    --dmel-coral: #ff7a59;
    --dmel-copper: #b87333;
    box-sizing: border-box;
    direction: rtl;
}

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

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

.dmel .dmel-sec.section-meld { padding-block: clamp(110px, 12vw, 170px); }

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

.dmel .dmel-hl { color: var(--dmel-teal); }

.dmel .dmel-title,
.dmel .dmel-hero__title { text-align: start; }

.dmel .dmel-title {
    margin: 0 0 22px;
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 900;
    line-height: 1.55;
}

.dmel .dmel-title--center {
    max-width: 860px;
    margin-inline: auto;
    margin-block-end: 44px;
    text-align: center;
}

.dmel .dmel-title--sm { font-size: clamp(22px, 2.4vw, 30px); }

.dmel .dmel-kicker {
    margin: 0 0 30px;
    color: var(--dmel-teal);
    font-size: 15px;
    font-weight: 900;
    text-align: center;
}

.dmel .dmel-lead {
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 2.2;
}

.dmel .dmel-rich > :first-child { margin-block-start: 0; }
.dmel .dmel-rich > :last-child { margin-block-end: 0; }
.dmel .dmel-rich p { margin: 0 0 12px; }

.dmel .dmel-rich a {
    color: var(--dmel-teal);
    font-weight: 700;
    text-decoration: none;
    border-block-end: 1px dashed currentColor;
}

.dmel.is-js .js-lp-reveal {
    opacity: 0;
    translate: 0 26px;
    transition: opacity .6s ease, translate .6s ease;
}

.dmel.is-js .js-lp-reveal.is-in {
    opacity: 1;
    translate: 0 0;
}

.dmel .dmel-split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 60px;
    align-items: center;
}

.dmel .dmel-split__text { min-width: 0; }

.dmel .dmel-split__media {
    display: flex;
    justify-content: center;
    min-width: 0;
}

.dmel .dmel-split__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 26px;
}

/* ══════════ هیرو ══════════ */
/* هیرو با هویت خود برند (درخواست مالک ۱.۱۲۰.۱): سرمه‌ای + مسی #b87333، شبکهٔ ظریف و هالهٔ مسی. */
.dmel .dmel-hero {
    --dmel-hl-c: var(--dmel-copper);
    padding-block: 160px 110px;
    background-color: var(--color-navy);
    background-image:
        radial-gradient(circle at 22% 40%, rgba(184, 115, 51, .22), transparent 44%),
        radial-gradient(circle at 90% 90%, rgba(184, 115, 51, .1), transparent 40%),
        linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: auto, auto, 48px 48px, 48px 48px;
}

.dmel .dmel-hero .dmel-hl { color: var(--dmel-copper); }

.dmel .dmel-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 60px;
    align-items: center;
}

.dmel .dmel-hello {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    padding: 6px 16px 6px 12px;
    border: 1px solid rgba(184, 115, 51, .45);
    border-radius: var(--pill-radius);
    background-color: rgba(184, 115, 51, .1);
    color: #e7b98a;
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 900;
}

/* آیکن دست خطی مینیمال؛ از مچ (پایین) تکان می‌خورد، دو خط حرکت کنارش چشمک می‌زنند. */
.dmel .dmel-hello__hand {
    width: 28px;
    height: 28px;
    color: var(--dmel-copper);
    transform-origin: 45% 90%;
    animation: dmelWave 2.6s ease-in-out infinite;
}

.dmel .dmel-hello__wave { animation: dmelWaveLines 2.6s ease-in-out infinite; }

@keyframes dmelWave {
    0%, 55%, 100% { rotate: 0deg; }
    10%, 30% { rotate: 14deg; }
    20%, 40% { rotate: -8deg; }
}

@keyframes dmelWaveLines {
    0%, 55%, 100% { opacity: 0; }
    15%, 40% { opacity: 1; }
}

/* ۱.۱۲۲.۱: خط معرفی درشت، h1 کوچک و کم‌رنگ زیرش (ترتیب و اندازه به خواست مالک) */
.dmel .dmel-hero__name {
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(34px, 4.8vw, 60px);
    font-weight: 900;
    line-height: 1.3;
    text-align: start;
}

.dmel .dmel-hero__title {
    margin: 0 0 22px;
    color: var(--text-secondary);
    font-size: clamp(17px, 1.6vw, 21px);
    font-weight: 700;
    line-height: 1.8;
    opacity: .85;
}

.dmel .dmel-hero__title .dmel-hl { color: inherit; }

.dmel .dmel-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

.dmel .dmel-role {
    padding: 8px 18px;
    border-radius: var(--pill-radius);
    font-size: 15px;
    font-weight: 800;
}

/* نقش‌ها: یکی پررنگ مسی، بقیه قاب مسی روی سرمه‌ای */
.dmel .dmel-role {
    border: 1px solid rgba(184, 115, 51, .5);
    color: #f1d3b3;
}

.dmel .dmel-role--0 {
    border-color: var(--dmel-copper);
    background-color: var(--dmel-copper);
    color: #fff;
}

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

.dmel .dmel-portrait {
    position: relative;
    width: min(400px, 100%);
    aspect-ratio: 400 / 470;
}

.dmel .dmel-portrait__blob {
    position: absolute;
    inset: 8% 0 0;
    border-radius: 46% 54% 40% 60% / 50% 40% 60% 50%;
    background-image: linear-gradient(160deg, var(--dmel-copper), #5e3a1a 70%, #1b2f52);
    box-shadow: 0 40px 80px -30px rgba(184, 115, 51, .45);
    animation: dmelBlob 12s ease-in-out infinite;
}

/* قوس مسی خط‌چین که آرام دور قاب می‌چرخد */
.dmel .dmel-portrait::before {
    content: "";
    position: absolute;
    inset: 2% -6% -4%;
    border: 2px dashed rgba(184, 115, 51, .55);
    border-radius: 50%;
    animation: dmelSpin 40s linear infinite;
}

@keyframes dmelSpin { to { rotate: 360deg; } }

@keyframes dmelBlob {
    0%, 100% { border-radius: 46% 54% 40% 60% / 50% 40% 60% 50%; }
    50% { border-radius: 58% 42% 55% 45% / 42% 58% 42% 58%; }
}

.dmel .dmel-portrait__photo {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 0 0 200px 200px;
}

.dmel .dmel-portrait__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.dmel .dmel-avatar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.dmel .dmel-avatar__body { fill: #13294b; }
.dmel .dmel-avatar__collar { stroke: var(--dmel-coral); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.dmel .dmel-avatar__head { fill: #f0cba8; }
.dmel .dmel-avatar__hair { fill: #2b1f17; }
.dmel .dmel-avatar__eye { fill: #2b1f17; }
.dmel .dmel-avatar__smile { stroke: #2b1f17; stroke-width: 4; stroke-linecap: round; }

.dmel .dmel-card {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 16px;
    background-color: #fff;
    color: #0a192f;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .55);
    animation: dmelFloat 6s ease-in-out infinite;
}

.dmel .dmel-card--chart { inset-block-start: 14%; inset-inline-end: -8%; }
.dmel .dmel-card--chart svg { width: 80px; height: 40px; }

.dmel .dmel-card__line {
    stroke: var(--dmel-teal);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: dmelDraw 5s ease-in-out infinite;
}

.dmel .dmel-card--chart b { color: var(--dmel-copper); }
.dmel .dmel-hero .dmel-card__line { stroke: var(--dmel-copper); }
.dmel .dmel-hero .dmel-card--seo i { background-color: var(--dmel-copper); }

.dmel .dmel-card--seo {
    inset-block-end: 10%;
    inset-inline-start: -10%;
    direction: ltr;
    animation-delay: -3s;
}

.dmel .dmel-card--seo i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--dmel-coral);
}

@keyframes dmelFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -10px; }
}

@keyframes dmelDraw {
    0%, 10% { stroke-dashoffset: 1; }
    50%, 90% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 1; }
}

/* ══════════ مسیر زمانی ══════════ */
/* صحنهٔ چسبان سمت راست (شروع) + مسیر سمت چپ. ⚠ overflow: clip تا sticky کار کند (hidden ظرف اسکرول می‌سازد). */
.dmel .dmel-story { overflow: clip; }

.dmel .dmel-story__grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr);
    gap: 50px;
    align-items: start;
}

/* ستون چسبان: نقشهٔ مسیر (راست) + کارت صحنهٔ ایستگاه فعلی (چپ). ۱.۱۲۲.۱ */
.dmel .dmel-scenes {
    position: sticky;
    inset-block-start: 110px;
    display: grid;
    grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

.dmel .dmel-journey__map {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 160px);
    overflow: visible;
}

.dmel .dmel-journey__road { stroke: var(--border-color, #e3e8f0); stroke-width: 18; stroke-linecap: round; }
.dmel .dmel-journey__dash { stroke: #fff; stroke-width: 2; stroke-dasharray: 8 8; }
.dmel .dmel-journey__fill {
    stroke: var(--accent-primary);
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset .15s linear;
}

.dmel .dmel-journey__halo { fill: color-mix(in srgb, var(--accent-primary) 18%, transparent); opacity: 0; transition: opacity .4s ease; }
.dmel .dmel-journey__disc { fill: #fff; stroke: var(--border-color, #d6dbe3); stroke-width: 2; transition: fill .4s ease, stroke .4s ease; }
.dmel .dmel-journey__ico { stroke: var(--text-secondary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s ease; }
.dmel .dmel-journey__mile { transition: scale .4s ease; transform-box: fill-box; transform-origin: center; }

.dmel .dmel-journey__mile.is-done .dmel-journey__disc { stroke: var(--accent-primary); }
.dmel .dmel-journey__mile.is-done .dmel-journey__ico { stroke: var(--accent-primary); }

.dmel .dmel-journey__mile.is-on { scale: 1.18; }
.dmel .dmel-journey__mile.is-on .dmel-journey__halo { opacity: 1; animation: dmelGlow 2s ease-in-out infinite; }
.dmel .dmel-journey__mile.is-on .dmel-journey__disc { fill: var(--color-navy); stroke: var(--accent-primary); }
.dmel .dmel-journey__mile.is-on .dmel-journey__ico { stroke: #fff; }

.dmel .dmel-journey__dot circle:first-child { fill: var(--accent-primary); stroke: #fff; stroke-width: 3; }
.dmel .dmel-journey__pulse { fill: none; stroke: var(--accent-primary); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: dmelPulseRing 1.8s ease-out infinite; }

@keyframes dmelPulseRing {
    from { scale: 1; opacity: .9; }
    to { scale: 2.6; opacity: 0; }
}

/* خط مسیر متن هم‌پای اسکرول پر می‌شود (--p از اسکریپت) */
.dmel .dmel-timeline::after {
    content: "";
    position: absolute;
    inset-block-start: 8px;
    inset-inline-start: 43px;
    width: 3px;
    height: calc((100% - 16px) * var(--p, 0));
    border-radius: 3px;
    background-color: var(--accent-primary);
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent-primary) 60%, transparent);
}

.dmel .dmel-scenes__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 6 / 5;
    overflow: hidden;
    border-radius: 30px;
    background-color: var(--color-navy);
    background-image: radial-gradient(circle at 50% 35%, rgba(184, 115, 51, .22), transparent 60%);
    box-shadow: 0 40px 70px -40px rgba(10, 25, 47, .7);
}

.dmel .dmel-scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 18px;
    opacity: 0;
    scale: .94;
    transition: opacity .5s ease, scale .5s ease;
}

.dmel .dmel-scene.is-on { opacity: 1; scale: 1; }

/* انیمیشن داخل هر صحنه فقط وقتی روشن است اجرا می‌شود */
.dmel .dmel-scene * { animation-play-state: paused; }
.dmel .dmel-scene.is-on * { animation-play-state: running; }

.dmel .dmel-sc__label {
    fill: #f1d3b3;
    font-family: inherit;
    font-size: 17px;
    font-weight: 900;
}

/* ۰ مدار → سبد */
.dmel .dmel-sc__wire { stroke: var(--dmel-copper); stroke-width: 4; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: dmelDraw 4s ease-in-out infinite; }
.dmel .dmel-sc__node { fill: #fff; }
.dmel .dmel-sc__bolt { fill: #ffd166; animation: dmelBlink 1.2s steps(1) infinite; }
.dmel .dmel-sc__cart path { stroke: #fff; stroke-width: 4; stroke-linejoin: round; }
.dmel .dmel-sc__cart circle { fill: #fff; }
.dmel .dmel-sc__cart { animation: dmelFloat 3s ease-in-out infinite; }

/* ۱ تیم */
.dmel .dmel-sc__table { fill: #5e3a1a; }
.dmel .dmel-sc__people circle { fill: #f0cba8; animation: dmelPop 3s ease-in-out infinite; }
.dmel .dmel-sc__people circle:nth-child(2) { fill: var(--dmel-copper); animation-delay: .2s; }
.dmel .dmel-sc__people circle:nth-child(3) { fill: #e7b98a; animation-delay: .4s; }
.dmel .dmel-sc__people circle:nth-child(4) { fill: #fff; animation-delay: .6s; }
.dmel .dmel-sc__bulb circle { fill: #ffd166; animation: dmelGlow 2.4s ease-in-out infinite; }
.dmel .dmel-sc__bulb path { stroke: #c7cfdb; stroke-width: 4; stroke-linecap: round; }

/* ۲ جالباسی ← پارک */
.dmel .dmel-sc__shirt path { stroke: #fff; stroke-width: 3; stroke-linejoin: round; }
.dmel .dmel-sc__shirt path:last-child { fill: var(--dmel-copper); }
.dmel .dmel-sc__shirt { transform-origin: 90px 52px; animation: dmelSwing 3s ease-in-out infinite; }
.dmel .dmel-sc__park rect { fill: #1d3c6e; stroke: #c7cfdb; stroke-width: 2; }
.dmel .dmel-sc__park .dmel-sc__win { fill: #ffd166; stroke: none; animation: dmelBlink 2s steps(1) infinite; }
.dmel .dmel-sc__park .dmel-sc__win:nth-of-type(3) { animation-delay: .5s; }
.dmel .dmel-sc__park .dmel-sc__win:nth-of-type(4) { animation-delay: 1s; }
.dmel .dmel-sc__arrow { stroke: var(--dmel-copper); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; animation: dmelDraw 3s ease-in-out infinite; }

/* ۳ لپ‌تاپ و تخته */
.dmel .dmel-sc__laptop rect { fill: #0a192f; stroke: #c7cfdb; stroke-width: 3; }
.dmel .dmel-sc__laptop path { stroke: #c7cfdb; stroke-width: 6; stroke-linecap: round; }
.dmel .dmel-sc__chart { stroke: var(--dmel-copper); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: dmelDraw 3.5s ease-in-out infinite; }
.dmel .dmel-sc__board rect { fill: #12402f; stroke: #8a5a2b; stroke-width: 5; }
.dmel .dmel-sc__board path { stroke: #8a5a2b; stroke-width: 4; stroke-linecap: round; }
.dmel .dmel-sc__board .dmel-sc__chalk { stroke: #fff; stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; animation: dmelDraw 3s ease-in-out infinite .6s; }

/* ۴ ساعت و جمعیت */
.dmel .dmel-sc__clock circle { fill: #1d3c6e; stroke: var(--dmel-copper); stroke-width: 5; }
.dmel .dmel-sc__clock path { stroke: #fff; stroke-width: 4; stroke-linecap: round; }
.dmel .dmel-sc__hand { transform-origin: 100px 130px; animation: dmelSpin 4s linear infinite; }
.dmel .dmel-sc__crowd circle { fill: rgba(255, 255, 255, .15); animation: dmelSeat 4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .15s); }

/* ۵ موشک */
.dmel .dmel-sc__pad { stroke: #c7cfdb; stroke-width: 6; stroke-linecap: round; }
.dmel .dmel-sc__rocket path:first-child { fill: #fff; }
.dmel .dmel-sc__rocket circle { fill: var(--dmel-copper); }
.dmel .dmel-sc__rocket path:nth-of-type(2) { fill: var(--dmel-copper); }
.dmel .dmel-sc__rocket .dmel-sc__flame { fill: #ffb703; transform-origin: 180px 166px; animation: dmelFlame .25s ease-in-out infinite alternate; }
.dmel .dmel-sc__rocket { animation: dmelLift 4s ease-in-out infinite; }

@keyframes dmelBlink { 50% { opacity: .25; } }
@keyframes dmelPop { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes dmelGlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes dmelSwing { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }
@keyframes dmelSeat { 0%, 15% { fill: rgba(255, 255, 255, .15); } 30%, 85% { fill: var(--dmel-copper); } 100% { fill: rgba(255, 255, 255, .15); } }
@keyframes dmelFlame { from { scale: 1 .8; } to { scale: 1 1.15; } }
@keyframes dmelLift { 0%, 20% { translate: 0 0; } 70%, 85% { translate: 0 -40px; } 100% { translate: 0 0; } }

/* ایستگاه فعال پررنگ‌تر */
.dmel .dmel-step__year { transition: background-color .3s ease, color .3s ease; }

.dmel .dmel-timeline {
    position: relative;
    display: grid;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* خط مسیر سمت راست (شروع خواندن)، رنگی که پایین‌تر به طلایی می‌رسد */
.dmel .dmel-timeline::before {
    content: "";
    position: absolute;
    inset-block: 8px;
    inset-inline-start: 43px;
    width: 3px;
    border-radius: 3px;
    background-image: linear-gradient(to bottom, var(--dmel-teal), var(--dmel-coral), var(--dmel-gold));
}

.dmel .dmel-step {
    position: relative;
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.dmel .dmel-step__year {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    min-height: 54px;
    padding: 6px;
    border: 3px solid var(--dmel-teal);
    border-radius: 16px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 900;
    text-align: center;
}

.dmel .dmel-step__text {
    padding: 18px 22px;
    border-radius: 18px;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 15.5px;
    line-height: 2.1;
}

.dmel .dmel-step--counters { grid-template-columns: 90px minmax(0, 1fr); }
.dmel .dmel-step--counters::before { content: ""; }

.dmel .dmel-counters {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmel .dmel-counter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px;
    border-radius: 18px;
    background-color: var(--color-navy);
    color: #fff;
}

.dmel .dmel-counter__num {
    color: var(--dmel-teal);
    font-size: 40px;
    font-weight: 900;
    line-height: 1;
}

.dmel .dmel-counter__label { font-size: 15px; font-weight: 800; }

.dmel .dmel-step--final .dmel-step__year {
    border-color: var(--dmel-gold);
    background-color: var(--dmel-gold);
    color: #0a192f;
}

.dmel .dmel-step--final .dmel-step__text {
    background-color: color-mix(in srgb, var(--dmel-gold) 14%, var(--bg-secondary));
    color: var(--text-primary);
    font-weight: 700;
}

/* ══════════ تجربه‌های مدیریتی ══════════ */
.dmel .dmel-roles-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmel .dmel-org {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 22px 16px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 22px;
    background-color: rgba(255, 255, 255, .04);
    text-align: center;
    transition: border-color .3s ease, translate .3s ease;
}

.dmel .dmel-org:hover { border-color: var(--dmel-teal); translate: 0 -4px; }

.dmel .dmel-org__logo {
    display: block;
    width: 96px;
    height: 96px;
    overflow: hidden;
    border-radius: 50%;
    background-color: #fff;
}

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

.dmel .dmel-org__role {
    color: var(--text-primary);
    font-size: 14.5px;
    font-weight: 800;
    line-height: 1.8;
}

/* ══════════ مدرک‌ها ══════════ */
.dmel .dmel-checks {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmel .dmel-check {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 14px;
    background-color: var(--bg-secondary);
    font-size: 15px;
    font-weight: 700;
}

.dmel .dmel-check__tick {
    position: relative;
    flex: 0 0 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--dmel-teal);
}

.dmel .dmel-check__tick::after {
    content: "";
    position: absolute;
    inset-block-start: 6px;
    inset-inline-start: 9px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    rotate: 45deg;
}

/* مدرک‌ها (۱.۱۲۲.۱): ستون راست (فهرست) چسبان و ظریف، هر مدرک با آیکن موضوعش؛ ستون چپ تصویرها اسکرول می‌شود.
   ⚠ overflow: clip تا sticky کار کند. */
.dmel .dmel-certs { overflow: clip; }
.dmel .dmel-certs .dmel-split { align-items: start; }

.dmel .dmel-certs .dmel-split__text {
    position: sticky;
    inset-block-start: 110px;
}

.dmel .dmel-certlist {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 8px;
    list-style: none;
    border: 1px solid var(--border-color, rgba(10, 25, 47, .08));
    border-radius: 22px;
    background-color: var(--bg-primary);
    box-shadow: 0 24px 50px -40px rgba(10, 25, 47, .5);
}

.dmel .dmel-certlist__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 12px;
    border-radius: 14px;
    color: var(--text-primary);
    font-size: 14.5px;
    font-weight: 700;
    transition: background-color .25s ease;
}

.dmel .dmel-certlist__item + .dmel-certlist__item { border-block-start: 1px dashed var(--border-color, rgba(10, 25, 47, .08)); }
.dmel .dmel-certlist__item:hover { background-color: var(--bg-secondary); }

.dmel .dmel-certlist__ico {
    display: grid;
    flex: 0 0 36px;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 8px;
    border-radius: 10px;
    background-color: color-mix(in srgb, var(--accent-primary) 12%, transparent);
    color: var(--accent-primary);
}

.dmel .dmel-certlist__ico svg { width: 100%; height: 100%; }
.dmel .dmel-certlist__text { flex: 1; line-height: 1.8; }

.dmel .dmel-certlist__badge {
    color: var(--accent-primary);
    font-size: 13px;
    font-weight: 900;
}

.dmel .dmel-certgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmel .dmel-cert a {
    display: block;
    overflow: hidden;
    border: 6px solid #fff;
    border-radius: 14px;
    box-shadow: 0 16px 34px -20px rgba(10, 25, 47, .55);
    transition: rotate .3s ease, scale .3s ease;
}

.dmel .dmel-cert--0 a { rotate: -2deg; }
.dmel .dmel-cert--1 a { rotate: 2deg; }
.dmel .dmel-cert--2 a { rotate: 1deg; }
.dmel .dmel-cert--3 a { rotate: -1.5deg; }

.dmel .dmel-cert a:hover,
.dmel .dmel-cert a:focus-visible { rotate: 0deg; scale: 1.04; }

.dmel .dmel-cert img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 32 / 23;
    object-fit: cover;
}

/* ══════════ دیوار لوگوی مشتری‌ها ══════════ */
.dmel .dmel-wall {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmel .dmel-wall__item {
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 24px;
    background-color: #fff;
    box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .6);
    transition: translate .3s ease;
}

.dmel .dmel-wall__item:nth-child(odd) { translate: 0 10px; }
.dmel .dmel-wall__item:hover { translate: 0 -6px; }

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

/* ══════════ فعالیت‌های آموزشی ══════════ */
.dmel .dmel-classes {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmel .dmel-class {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-inline-start: 4px solid var(--dmel-coral);
    border-radius: 14px;
    background-color: var(--bg-secondary);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.9;
}

.dmel .dmel-class__num {
    flex: 0 0 auto;
    color: var(--dmel-coral);
    font-size: 18px;
    font-weight: 900;
}

/* فعالیت‌های آموزشی: اجزای شناور دور تصویر (۱.۱۲۲.۱) */
.dmel .dmel-teach__media {
    position: relative;
    padding: 34px;
}

.dmel .dmel-teach__media > img { position: relative; z-index: 1; border-radius: 26px; }

.dmel .dmel-tfx {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 16px;
    background-color: #fff;
    color: var(--color-navy);
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 18px 36px -18px rgba(10, 25, 47, .55);
    animation: dmelFloat 6s ease-in-out infinite;
}

.dmel .dmel-tfx svg { flex: 0 0 auto; }

.dmel .dmel-tfx--board {
    inset-block-start: 0;
    inset-inline-start: 0;
    padding: 10px;
    background-color: var(--color-navy);
}

.dmel .dmel-tfx--board svg { width: 120px; height: 80px; }
.dmel .dmel-tfx--board rect { stroke: rgba(255, 255, 255, .35); stroke-width: 2; }
.dmel .dmel-tfx--board path { stroke: rgba(255, 255, 255, .35); stroke-width: 3; stroke-linecap: round; }
.dmel .dmel-tfx--board .dmel-tfx__line { stroke: var(--accent-primary); stroke-dasharray: 1; stroke-dashoffset: 1; animation: dmelDraw 4s ease-in-out infinite; }

.dmel .dmel-tfx--badge {
    inset-block-start: 22%;
    inset-inline-end: -4px;
    padding: 8px 14px;
    animation-delay: -1.5s;
}

.dmel .dmel-tfx--badge svg { width: 22px; height: 22px; color: var(--accent-primary); }

.dmel .dmel-tfx--class {
    inset-block-end: 6px;
    inset-inline-end: 12%;
    padding: 8px 14px;
    animation-delay: -3s;
}

.dmel .dmel-tfx--class i {
    width: 22px;
    height: 22px;
    margin-inline-start: -10px;
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: #e7b98a;
}

.dmel .dmel-tfx--class i:first-child { margin-inline-start: 0; background-color: var(--accent-primary); }
.dmel .dmel-tfx--class i:nth-child(2) { background-color: var(--color-navy); }
.dmel .dmel-tfx--class b { margin-inline-start: 4px; color: var(--accent-primary); }

.dmel .dmel-tfx--ask {
    inset-block-start: 46%;
    inset-inline-start: 2px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50% 50% 50% 6px;
    background-color: var(--accent-primary);
    color: #fff;
    font-size: 22px;
    animation: dmelPop 2.6s ease-in-out infinite;
}

.dmel .dmel-tfx--idea {
    inset-block-start: -6px;
    inset-inline-end: 22%;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 10px;
    border-radius: 50%;
    color: var(--accent-primary);
    animation: dmelGlowPulse 2.4s ease-in-out infinite;
}

.dmel .dmel-tfx--idea svg { width: 100%; height: 100%; }

@keyframes dmelGlowPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-primary) 45%, transparent); }
    50% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent-primary) 0%, transparent); }
}

.dmel .dmel-tfx--clock {
    inset-block-end: 18%;
    inset-inline-start: -2px;
    padding: 8px 14px;
    animation-delay: -4.5s;
}

.dmel .dmel-tfx--clock svg { width: 22px; height: 22px; color: var(--accent-primary); }
.dmel .dmel-tfx__hand { transform-box: view-box; transform-origin: 12px 12px; animation: dmelSpin 4s linear infinite; }

.dmel .dmel-board {
    width: 100%;
    max-width: 440px;
    height: auto;
}

.dmel .dmel-board__frame { fill: #12402f; stroke: #8a5a2b; stroke-width: 10; }
.dmel .dmel-board__legs { stroke: #8a5a2b; stroke-width: 8; stroke-linecap: round; }

.dmel .dmel-board__draw {
    stroke: #fff;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: dmelDraw 6s ease-in-out infinite;
}

/* ══════════ اهداف + لذت ══════════ */
.dmel .dmel-why__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.dmel .dmel-why__card {
    position: relative;
    padding: 34px 30px;
    overflow: hidden;
    border-radius: 28px;
    background-color: var(--bg-secondary);
}

.dmel .dmel-why__ico {
    position: relative;
    display: block;
    width: 58px;
    height: 58px;
    margin-block-end: 18px;
    border-radius: 50%;
}

/* هدف: سه حلقه که می‌تپند */
.dmel .dmel-why__card--target .dmel-why__ico {
    border: 5px solid var(--dmel-teal);
    box-shadow: inset 0 0 0 7px var(--bg-secondary), inset 0 0 0 13px var(--dmel-teal);
    animation: dmelPulse 3s ease-in-out infinite;
}

/* لذت: قلب */
.dmel .dmel-why__card--heart .dmel-why__ico {
    background: radial-gradient(circle at 34% 36%, var(--dmel-coral) 0 30%, transparent 31%), radial-gradient(circle at 66% 36%, var(--dmel-coral) 0 30%, transparent 31%), conic-gradient(from 135deg at 50% 92%, var(--dmel-coral) 0 90deg, transparent 90deg);
    border-radius: 0;
    animation: dmelPulse 1.6s ease-in-out infinite;
}

@keyframes dmelPulse {
    0%, 100% { scale: 1; }
    50% { scale: 1.1; }
}

/* ══════════ ارتباط ══════════ */
.dmel .dmel-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

.dmel .dmel-social {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 16px;
    background-color: var(--color-navy);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    transition: background-color .3s ease, translate .3s ease;
}

.dmel .dmel-social svg { width: 22px; height: 22px; }
.dmel .dmel-social:hover,
.dmel .dmel-social:focus-visible { translate: 0 -3px; }
.dmel .dmel-social--instagram:hover { background-color: #c13584; }
.dmel .dmel-social--whatsapp:hover { background-color: #1fa855; }
.dmel .dmel-social--linkedin:hover { background-color: #0a66c2; }

.dmel .dmel-sub {
    margin: 0 0 14px;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 900;
}

.dmel .dmel-profiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmel .dmel-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color, rgba(10, 25, 47, .12));
    border-radius: 14px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: border-color .3s ease;
}

.dmel .dmel-profile:hover,
.dmel .dmel-profile:focus-visible { border-color: var(--dmel-copper); }

.dmel .dmel-profile__logo {
    display: grid;
    flex: 0 0 40px;
    place-items: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 10px;
    background-color: #fff;
    color: #0a192f;
    font-weight: 900;
}

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

.dmel .dmel-contact__img { box-shadow: 0 30px 60px -30px rgba(10, 25, 47, .45); }
.dmel .dmel-contact .dmel-hl { color: var(--dmel-copper); }

/* ══════════ حرکت کم ══════════ */
@media (prefers-reduced-motion: reduce) {
    .dmel *,
    .dmel *::before,
    .dmel *::after {
        animation: none !important;
        transition: none !important;
    }

    .dmel.is-js .js-lp-reveal { opacity: 1; translate: none; }
    .dmel .dmel-card__line,
    .dmel .dmel-board__draw { stroke-dashoffset: 0; }
}

@media (max-width: 1100px) {
    .dmel .dmel-roles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 992px) {
    .dmel .dmel-hero__grid,
    .dmel .dmel-split,
    .dmel .dmel-why__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .dmel .dmel-hero__media { order: -1; }
    .dmel .dmel-portrait { width: min(300px, 78%); }

    /* تبلت و موبایل (۱.۱۲۲.۲): نقشه هم هست، به‌شکل نوار چسبان فشرده بالای مسیر: نقشهٔ کوچک + کارت صحنهٔ ایستگاه فعلی.
       خط مسیر متن هم هم‌پای اسکرول پر می‌شود. */
    .dmel .dmel-story__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }

    .dmel .dmel-scenes {
        inset-block-start: 64px;
        z-index: 4;
        grid-template-columns: 74px minmax(0, 1fr);
        gap: 12px;
        padding: 10px;
        border: 1px solid var(--border-color, rgba(10, 25, 47, .08));
        border-radius: 20px;
        background-color: var(--bg-primary);
        box-shadow: 0 16px 34px -24px rgba(10, 25, 47, .5);
    }

    .dmel .dmel-journey__map { max-height: 140px; }
    .dmel .dmel-scenes__frame { aspect-ratio: 16 / 9; border-radius: 14px; }
    .dmel .dmel-scene { padding: 4px; }
    .dmel .dmel-certs .dmel-split__text { position: static; }
}

@media (min-width: 768px) and (max-width: 992px) {
    .dmel .dmel-sec { padding-block: 80px; }
    .dmel .dmel-hero { padding-block: 140px 80px; }
}

/* موبایل: بین سکشن‌ها ۲۰px، داخل ۱۵px؛ سکشن‌های موج‌دار ۴۵px؛ هیرو جای هدر. */
@media (max-width: 767px) {
    /* کلاس: اجزای شناور کوچک‌تر و داخل کادر */
    .dmel .dmel-teach__media { padding: 26px 14px; }
    .dmel .dmel-tfx--board svg { width: 84px; height: 56px; }
    .dmel .dmel-tfx--badge,
    .dmel .dmel-tfx--class,
    .dmel .dmel-tfx--clock { font-size: 12px; padding: 6px 10px; }
    .dmel .dmel-tfx--badge { inset-inline-end: 0; }
    .dmel .dmel-tfx--ask,
    .dmel .dmel-tfx--clock { inset-inline-start: 0; }

    .dmel .dmel-sec,
    .dmel .dmel-sec.section-meld {
        margin-block: 20px;
        padding-block: 15px;
    }

    .dmel .dmel-sec.section-meld { padding-block: 45px; }
    .dmel .dmel-sec:first-child { margin-block-start: 0; }
    .dmel .dmel-hero { padding-block: 110px 30px; }
    .dmel .dmel-sec:last-child { margin-block-end: 0; }
    .dmel .dmel-roles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .dmel .dmel-profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dmel .dmel-step,
    .dmel .dmel-step--counters { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
    .dmel .dmel-timeline::before,
    .dmel .dmel-timeline::after { inset-inline-start: 30px; }
    .dmel .dmel-step__year { font-size: 13px; }
    .dmel .dmel-step__text { padding: 14px 16px; font-size: 15px; }
    .dmel .dmel-wall__item { width: 90px; height: 90px; }
    .dmel .dmel-why__card { padding: 24px 20px; }
    .dmel .dmel-card--chart { inset-inline-end: -2%; }
    .dmel .dmel-card--seo { inset-inline-start: -2%; }
}

/* ══════════ یکپارچگی برند (۱.۱۲۱.۰، تصمیم مالک) ══════════
   کل صفحه سرمه‌ای/مسی (نه فقط هیرو)؛ فیروزه‌ای و مرجانی کنار گذاشته شد، رنگ‌های صحنه‌های مسیر همان مسی/زرد. */
.dmel .dmel-hl,
.dmel .dmel-rich a,
.dmel .dmel-kicker,
.dmel .dmel-counter__num { color: var(--accent-primary); }

.dmel .dmel-step__year { border-color: var(--accent-primary); }
.dmel .dmel-timeline::before { background-image: linear-gradient(to bottom, var(--color-navy), var(--accent-primary)); }
.dmel .dmel-check__tick { background-color: var(--accent-primary); }
.dmel .dmel-org:hover { border-color: var(--accent-primary); }
.dmel .dmel-class { border-inline-start-color: var(--accent-primary); }
.dmel .dmel-class__num { color: var(--accent-primary); }

.dmel .dmel-why__card--target .dmel-why__ico {
    border-color: var(--accent-primary);
    box-shadow: inset 0 0 0 7px var(--bg-secondary), inset 0 0 0 13px var(--accent-primary);
}

.dmel .dmel-why__card--heart .dmel-why__ico {
    background: radial-gradient(circle at 34% 36%, var(--accent-primary) 0 30%, transparent 31%), radial-gradient(circle at 66% 36%, var(--accent-primary) 0 30%, transparent 31%), conic-gradient(from 135deg at 50% 92%, var(--accent-primary) 0 90deg, transparent 90deg);
}

.dmel .dmel-role--0,
.dmel .dmel-role--1,
.dmel .dmel-role--2 { color: #f1d3b3; }

.dmel .dmel-role--0 { color: #fff; }
