/*
 * متجركم — app download page (downloads.php), 2026 design.
 * Builds on the tokens and primitives in site-2026.css; everything here is
 * scoped to the page with the dl- prefix.
 */

.dl-page { overflow-x: clip; }
.dl-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; position: relative; z-index: 1; }
.dl-section { padding: 96px 0; }
.dl-page h1, .dl-page h2, .dl-page h3 { font-family: var(--mx-font-display); }
.dl-page bdi { unicode-bidi: isolate; }

.dl-nowrap { display: inline-block; }

/* ── Hero ─────────────────────────────────────────────────────────── */
.dl-hero { padding: 84px 0 150px; isolation: isolate; }
.dl-hero-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.dl-hero::after {
    content: ""; position: absolute; inset: auto 0 0; height: 140px; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(11, 13, 18, .35));
}
.dl-hero-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.dl-hero-copy { animation: mx-fade-up .9s var(--mx-ease) both; }
.dl-hero h1 {
    font-size: clamp(2.3rem, 5.4vw, 4.4rem); font-weight: 900; line-height: 1.18; letter-spacing: -.015em;
    margin: 1.25rem 0 1.1rem; color: #fff;
}
.dl-hero h1 .mx-gradient-text { background-size: 200% auto; animation: mx-shine 6s linear infinite; padding-bottom: .08em; }
.dl-lead { color: var(--mx-on-dark-2); font-size: 1.12rem; line-height: 2; max-width: 600px; margin: 0 0 2rem; }
.dl-lead bdi { color: var(--mx-on-dark); font-weight: 700; }

.dl-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; }
.dl-cta-main { min-height: 66px; padding: .7rem 1rem .7rem 1.4rem; gap: .9rem; border-radius: 18px; text-align: start; }
.dl-cta-ic {
    width: 44px; height: 44px; border-radius: 13px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .2); font-size: 1.5rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.dl-cta-txt { display: flex; flex-direction: column; gap: .35rem; line-height: 1.1; }
.dl-cta-txt small { font-size: .78rem; font-weight: 700; opacity: .85; }
.dl-cta-txt b { font-family: var(--mx-font-display); font-size: 1.2rem; font-weight: 800; }
.dl-cta-size {
    margin-inline-start: .4rem; padding: .4rem .65rem; border-radius: 10px;
    background: rgba(11, 13, 18, .22); font-size: .82rem; font-weight: 800; white-space: nowrap;
}
.dl-cta-arrow { margin-inline-start: .4rem; }
.dl-cta-alt { min-height: 66px; border-radius: 18px; }
button.dl-cta-main[disabled] { background: rgba(255, 255, 255, .1); opacity: 1; color: rgba(246, 243, 240, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); cursor: not-allowed; }
button.dl-cta-main[disabled] .dl-cta-ic { background: rgba(255, 255, 255, .06); }

.dl-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 1.4rem 0 0; }
.dl-chips li {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .42rem .8rem; border-radius: 999px; font-size: .84rem; font-weight: 700;
    color: var(--mx-on-dark); background: rgba(255, 255, 255, .06); border: 1px solid var(--mx-line-dark);
    backdrop-filter: blur(8px);
}
.dl-chips i { color: var(--mx-orange-2); font-size: .8rem; }
.dl-abi-note, .dl-hero-hint { margin: .9rem 0 0; color: var(--mx-on-dark-2); font-size: .9rem; display: flex; gap: .5rem; align-items: center; }
.dl-abi-note i, .dl-hero-hint i { color: var(--mx-amber); }
.dl-trust { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; padding: 1.5rem 0 0; margin: 1.6rem 0 0; border-top: 1px solid var(--mx-line-dark); max-width: 600px; }
.dl-trust li { color: var(--mx-on-dark-2); font-size: .88rem; font-weight: 700; display: inline-flex; gap: .5rem; align-items: center; }
.dl-trust i { color: #3ddc84; }

/* ── The phone ────────────────────────────────────────────────────── */
.dl-stage { position: relative; height: 660px; display: flex; align-items: center; justify-content: center; }
.dl-halo {
    position: absolute; width: 480px; height: 480px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 91, 31, .55) 0%, rgba(255, 138, 61, .18) 40%, transparent 70%);
    filter: blur(20px);
}
.dl-orbit {
    position: absolute; width: 540px; height: 540px; border-radius: 50%;
    border: 1px dashed rgba(255, 181, 71, .22);
    animation: mx-spin 60s linear infinite;
}
.dl-orbit::before, .dl-orbit::after {
    content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%;
    background: var(--mx-orange-2); box-shadow: 0 0 18px 4px rgba(255, 138, 61, .6);
}
.dl-orbit::before { top: 12%; left: 14%; }
.dl-orbit::after { bottom: 6%; right: 26%; width: 7px; height: 7px; background: var(--mx-amber); }

.dl-phone {
    font-size: 10px; /* every size inside the phone is in em, so it scales from here */
    position: relative; width: 30em; height: 61.5em; padding: .9em;
    border-radius: 4.8em;
    background: linear-gradient(145deg, #2a2f3a 0%, #0c0e13 40%, #1b1f28 100%);
    box-shadow:
        inset 0 0 0 .15em rgba(255, 255, 255, .14),
        inset 0 0 0 .5em #07080b,
        0 4em 8em rgba(0, 0, 0, .55),
        0 0 0 .1em rgba(0, 0, 0, .6);
    transform: perspective(1600px) rotateY(-12deg) rotateX(5deg) rotateZ(1.5deg);
    animation: dl-phone-float 7s ease-in-out infinite;
    z-index: 1;
}
@keyframes dl-phone-float {
    0%, 100% { transform: perspective(1600px) rotateY(-12deg) rotateX(5deg) rotateZ(1.5deg) translateY(0); }
    50% { transform: perspective(1600px) rotateY(-9deg) rotateX(3deg) rotateZ(1deg) translateY(-1.2em); }
}
.dl-phone-btn { position: absolute; right: -.35em; width: .45em; border-radius: 0 .4em .4em 0; background: linear-gradient(90deg, #11141a, #3a404d); }
.dl-phone-btn--power { top: 14em; height: 6em; }
.dl-phone-btn--vol { top: 23em; height: 10em; }

.dl-screen {
    position: relative; height: 100%; border-radius: 4em; overflow: hidden;
    background: linear-gradient(180deg, #fff3ea 0%, #fffaf6 34%, #fffaf6 100%);
    color: var(--mx-text); display: flex; flex-direction: column;
    font-family: var(--mx-font); font-size: 1.2em; line-height: 1.35;
}
.dl-screen::after { /* glass glare */
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: linear-gradient(115deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 32%);
}
.dl-cam { position: absolute; top: .9em; left: 50%; width: 1.05em; height: 1.05em; margin-left: -.525em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2c3546, #05070a 60%); box-shadow: 0 0 0 .2em #0b0d12; z-index: 3; }
.dl-status { display: flex; justify-content: space-between; align-items: center; direction: ltr; padding: .75em 1.7em .2em; font-size: .92em; font-weight: 800; height: 2.6em; }
.dl-sig { display: inline-flex; gap: .45em; font-size: .85em; }
.dl-app { flex: 1; display: flex; flex-direction: column; gap: .8em; padding: .5em 1.15em 0; min-height: 0; overflow: hidden; }

.dl-appbar { display: flex; align-items: center; gap: .65em; }
.dl-appbar img { width: 2.6em; height: 2.6em; border-radius: .8em; background: #fff; box-shadow: 0 .3em .9em rgba(255, 91, 31, .2); object-fit: contain; }
.dl-appbar-t { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.dl-appbar-t b { font-family: var(--mx-font-display); font-size: 1.1em; font-weight: 800; }
.dl-appbar-t small { font-size: .78em; color: var(--mx-text-3); }
.dl-bell { position: relative; width: 2.4em; height: 2.4em; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: var(--mx-text-2); box-shadow: var(--mx-shadow-sm); font-size: .9em; }
.dl-bell::after { content: ""; position: absolute; top: .45em; right: .5em; width: .55em; height: .55em; border-radius: 50%; background: var(--mx-orange); box-shadow: 0 0 0 .15em #fff; }

.dl-paste {
    display: flex; align-items: center; gap: .6em; padding: .45em .45em .45em .8em;
    background: #fff; border: 1px solid var(--mx-line); border-radius: 1.1em; box-shadow: var(--mx-shadow-sm);
    font-size: .88em; color: var(--mx-text-3);
}
.dl-paste > i { color: var(--mx-orange); }
.dl-paste span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-paste b { background: var(--mx-grad); color: #fff; padding: .5em .9em; border-radius: .8em; font-size: .92em; }

.dl-mini-stores { display: flex; gap: .4em; overflow: hidden; -webkit-mask-image: linear-gradient(270deg, #000 85%, transparent); mask-image: linear-gradient(270deg, #000 85%, transparent); }
.dl-mini-stores .mx-store { height: 2.5em; padding: 0 .75em; border-radius: .8em; font-size: .78em; gap: .3em; flex: 0 0 auto; }

.dl-track { background: #fff; border-radius: 1.4em; padding: .85em; box-shadow: 0 .6em 1.8em rgba(20, 14, 10, .08); border: 1px solid var(--mx-line); }
.dl-track-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6em; }
.dl-track-head b { font-family: var(--mx-font-display); font-size: .98em; }
.dl-track-head span { font-size: .72em; font-weight: 800; color: var(--mx-green); background: rgba(22, 160, 103, .1); padding: .3em .6em; border-radius: 999px; }
.dl-map {
    position: relative; aspect-ratio: 240 / 104; border-radius: 1em; overflow: hidden;
    background:
        radial-gradient(circle at 78% 30%, rgba(22, 160, 103, .12) 0 18%, transparent 19%),
        radial-gradient(circle at 20% 85%, rgba(56, 132, 255, .1) 0 22%, transparent 23%),
        #eef1f4;
}
.dl-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dl-road { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; }
.dl-road--thin { stroke-width: 4; stroke: #fdfdfd; }
.dl-route { fill: none; stroke: var(--mx-orange); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 7 6; animation: dl-dash 1.4s linear infinite; }
@keyframes dl-dash { to { stroke-dashoffset: -26; } }
.dl-courier { offset-path: path("M28 76 C56 66 66 34 104 36 S160 74 206 34"); offset-rotate: 0deg; animation: dl-drive 6s var(--mx-ease) infinite; }
.dl-courier-halo { fill: rgba(255, 91, 31, .22); }
.dl-courier-dot { fill: var(--mx-orange); stroke: #fff; stroke-width: 2.4; }
@keyframes dl-drive { 0% { offset-distance: 8%; } 70%, 100% { offset-distance: 68%; } }
.dl-pin {
    position: absolute; width: 2.1em; height: 2.1em; margin: -1.05em 0 0 -1.05em; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: .78em; color: #fff;
    box-shadow: 0 .3em .8em rgba(0, 0, 0, .2), 0 0 0 .2em #fff;
}
.dl-pin--from { left: 11.7%; top: 73%; background: var(--mx-ink-3); }
.dl-pin--to { left: 85.8%; top: 32.7%; background: var(--mx-green); }
.dl-steps-mini { list-style: none; display: flex; justify-content: space-between; padding: 0; margin: .75em 0 0; position: relative; }
.dl-steps-mini::before { content: ""; position: absolute; top: .42em; left: 8%; right: 8%; height: .2em; border-radius: 1em; background: linear-gradient(270deg, var(--mx-orange) 0 66%, #e8e2dd 66%); }
.dl-steps-mini li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: .3em; font-size: .7em; font-weight: 700; color: var(--mx-text-3); }
.dl-steps-mini li i { width: 1.2em; height: 1.2em; border-radius: 50%; background: #e8e2dd; box-shadow: 0 0 0 .22em #fff; }
.dl-steps-mini li.is-done { color: var(--mx-text-2); }
.dl-steps-mini li.is-done i { background: var(--mx-orange); }
.dl-steps-mini li.is-now { color: var(--mx-orange); font-weight: 800; }
.dl-steps-mini li.is-now i { background: #fff; box-shadow: 0 0 0 .22em var(--mx-orange); animation: mx-pulse 2s infinite; }

.dl-orders { display: flex; flex-direction: column; gap: .5em; }
.dl-order { display: flex; align-items: center; gap: .65em; padding: .55em .7em; background: #fff; border: 1px solid var(--mx-line); border-radius: 1.1em; }
.dl-order .mx-store { width: 2.4em; height: 2.4em; padding: 0; border-radius: .75em; font-size: .85em; flex: 0 0 auto; }
.dl-order > div { flex: 1; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.dl-order b { font-size: .85em; }
.dl-order small { font-size: .72em; color: var(--mx-text-3); }
.dl-order > i { font-size: .9em; color: var(--mx-green); }
.dl-order:last-child > i { color: var(--mx-amber); }
.dl-wallet { display: flex; align-items: center; gap: .7em; padding: .7em .8em; border-radius: 1.2em; background: var(--mx-grad-ink); color: #fff; }
.dl-wallet-ic { width: 2.5em; height: 2.5em; border-radius: .8em; background: var(--mx-grad); display: inline-flex; align-items: center; justify-content: center; }
.dl-wallet > div { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.dl-wallet b { font-size: .95em; }
.dl-wallet small { font-size: .74em; color: var(--mx-on-dark-2); }
.dl-wallet > i { font-size: .75em; opacity: .6; }

.dl-tabbar { display: flex; justify-content: space-around; padding: .7em .6em .4em; margin-top: .8em; background: rgba(255, 255, 255, .92); border-top: 1px solid var(--mx-line); }
.dl-tabbar span { display: flex; flex-direction: column; align-items: center; gap: .25em; font-size: .68em; font-weight: 700; color: var(--mx-text-3); }
.dl-tabbar i { font-size: 1.35em; }
.dl-tabbar .is-active { color: var(--mx-orange); }
.dl-gesture { display: block; width: 9em; height: .4em; border-radius: 1em; background: #1b1f27; opacity: .8; margin: .3em auto .7em; }

.dl-float {
    position: absolute; z-index: 2; display: flex; align-items: center; gap: .7rem;
    padding: .7rem .95rem; min-width: 210px; color: var(--mx-on-dark);
    background: rgba(20, 24, 33, .62); box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
    animation: mx-float 6s ease-in-out infinite;
}
.dl-float > div { display: flex; flex-direction: column; line-height: 1.35; }
.dl-float b { font-size: .88rem; }
.dl-float small { font-size: .78rem; color: var(--mx-on-dark-2); }
.dl-float-ic { width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--mx-grad); color: #fff; flex: 0 0 auto; }
.dl-float-ic--ok { background: linear-gradient(135deg, #16a067, #3ddc84); }
.dl-float--notif { top: 36px; left: -24px; }
.dl-float--import { bottom: 80px; right: -10px; animation-delay: -3s; }

/* ── Release card ─────────────────────────────────────────────────── */
.dl-release-sec { padding-top: 0; margin-top: -96px; position: relative; z-index: 2; }
.dl-release-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.dl-release { padding: 32px; border-radius: var(--mx-r-xl); box-shadow: var(--mx-shadow-lg); }
.dl-release-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 24px; }
.dl-release-title { min-width: 0; flex: 1; }
.dl-release-title h2, .dl-plat h2 { font-size: 1.45rem; font-weight: 800; color: var(--mx-text); margin: 0; }
.dl-release-title p { color: var(--mx-text-2); margin: .45rem 0 0; line-height: 1.8; }
.dl-date { display: inline-flex; gap: .35rem; align-items: center; color: var(--mx-text-3); font-size: .85rem; margin-inline-start: .35rem; }
.dl-os { width: 64px; height: 64px; border-radius: 20px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; }
.dl-os--android { background: linear-gradient(145deg, #e9fbf1, #c9f3dc); color: #18a558; box-shadow: inset 0 0 0 1px rgba(24, 165, 88, .18); }
.dl-os--chrome { background: linear-gradient(145deg, #fff3ea, #ffe0cc); color: var(--mx-orange); box-shadow: inset 0 0 0 1px rgba(255, 91, 31, .16); }
.dl-os--apple { background: linear-gradient(145deg, #f3f4f6, #e3e6ea); color: #111; }
.dl-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; font-size: .76rem; font-weight: 800; font-family: var(--mx-font); vertical-align: middle; }
.dl-badge--live { color: var(--mx-green); background: rgba(22, 160, 103, .1); }
.dl-badge--live .mx-pulse { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: dl-live 2s infinite; }
@keyframes dl-live { 0% { box-shadow: 0 0 0 0 rgba(22, 160, 103, .5); } 70% { box-shadow: 0 0 0 8px rgba(22, 160, 103, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 160, 103, 0); } }
.dl-badge--soon { color: var(--mx-text-2); background: #f0f1f3; }

.dl-notes { position: relative; border-radius: var(--mx-r-md); padding: 18px 20px; margin-bottom: 24px; background: linear-gradient(135deg, var(--mx-paper-2), #fff); border: 1px solid var(--mx-line); overflow: hidden; }
.dl-notes::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--mx-grad-fire); }
.dl-notes-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; color: var(--mx-text); }
.dl-notes-head i { color: var(--mx-orange); }
.dl-notes-head span { margin-inline-start: auto; font-size: .78rem; font-weight: 800; color: var(--mx-orange); background: rgba(255, 91, 31, .09); padding: .2rem .55rem; border-radius: 8px; }
.dl-notes-body { color: var(--mx-text-2); line-height: 2; font-size: .96rem; overflow-wrap: anywhere; }

.dl-sub, .dl-alt-title { display: block; font-family: var(--mx-font); font-size: .82rem; font-weight: 800; color: var(--mx-text-3); margin: 0 0 .7rem; letter-spacing: .01em; }
.dl-files { margin-bottom: 24px; }
.abi-alternatives { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.abi-alternatives .dl-alt-title { margin-bottom: 0; }
.dl-file {
    display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--mx-r-md);
    border: 1px solid var(--mx-line); background: #fff; color: var(--mx-text); text-decoration: none;
    transition: transform .35s var(--mx-ease), border-color .35s, box-shadow .35s;
}
.dl-file:hover { color: var(--mx-text); transform: translateY(-2px); border-color: rgba(255, 91, 31, .35); box-shadow: var(--mx-shadow-md); }
.dl-file:focus-visible { outline: 3px solid rgba(255, 138, 61, .55); outline-offset: 2px; }
.dl-file-ic { width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--mx-orange); background: rgba(255, 91, 31, .09); }
.dl-file-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.dl-file-txt b { font-size: .97rem; }
.dl-file-txt small { color: var(--mx-text-3); font-size: .82rem; text-align: right; }
.dl-file-go { color: var(--mx-text-3); }
.dl-file--main { border-color: rgba(255, 91, 31, .35); background: linear-gradient(135deg, #fff, var(--mx-paper-2)); box-shadow: 0 10px 30px rgba(255, 91, 31, .1); }
.dl-file--main .dl-file-ic { color: #fff; background: var(--mx-grad); box-shadow: 0 8px 18px rgba(255, 91, 31, .3); }
.dl-file-tag { flex: 0 0 auto; font-size: .74rem; font-weight: 800; color: var(--mx-orange); background: rgba(255, 91, 31, .1); padding: .3rem .6rem; border-radius: 8px; }
.dl-alt-hint { color: var(--mx-text-3); font-size: .84rem; display: flex; gap: .45rem; align-items: baseline; line-height: 1.7; }

.dl-checksum { border-radius: var(--mx-r-md); padding: 18px; background: var(--mx-ink); color: var(--mx-on-dark); }
.dl-checksum-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.dl-checksum-label { font-size: .86rem; font-weight: 800; color: var(--mx-on-dark-2); display: inline-flex; gap: .45rem; align-items: center; }
.dl-checksum-label i { color: var(--mx-orange-2); }
.dl-checksum code {
    display: block; direction: ltr; text-align: left; color: #ffd2b8; background: rgba(255, 255, 255, .05);
    border: 1px solid var(--mx-line-dark); border-radius: 12px; padding: 12px 14px;
    font-size: .86rem; line-height: 1.7; letter-spacing: .04em; word-break: break-all; user-select: all;
}
.dl-copy {
    display: inline-flex; align-items: center; gap: .45rem; min-height: 38px; padding: .45rem .9rem; border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08); color: #fff;
    font-family: var(--mx-font); font-size: .86rem; font-weight: 800; cursor: pointer;
    transition: background .3s, border-color .3s, transform .3s var(--mx-ease);
}
.dl-copy:hover { background: rgba(255, 255, 255, .16); transform: translateY(-1px); }
.dl-copy:focus-visible { outline: 3px solid rgba(255, 138, 61, .6); outline-offset: 2px; }
.dl-copy.is-ok { background: var(--mx-green); border-color: var(--mx-green); }
.dl-copy.is-err { background: var(--mx-ember); border-color: var(--mx-ember); }
.dl-verify { margin-top: 12px; font-size: .86rem; }
.dl-verify summary { cursor: pointer; color: var(--mx-on-dark-2); font-weight: 700; width: max-content; max-width: 100%; }
.dl-verify summary:hover { color: #fff; }
.dl-verify summary:focus-visible { outline: 2px solid var(--mx-orange-2); outline-offset: 2px; border-radius: 4px; }
.dl-verify p { color: var(--mx-on-dark-2); margin: .6rem 0; line-height: 1.8; }
.dl-cmds { display: flex; flex-direction: column; gap: 6px; }
.dl-cmds code { display: block; background: rgba(255, 255, 255, .05); color: #cfe8d9; border-radius: 8px; padding: 6px 10px; font-size: .8rem; letter-spacing: 0; user-select: text; border: 0; }

.dl-release-msg { color: var(--mx-text-2); line-height: 1.9; }
.dl-btn-block { width: 100%; }
.dl-empty { text-align: center; padding: 18px 8px 4px; border: 1.5px dashed var(--mx-line); border-radius: var(--mx-r-md); }
.dl-empty-ic { display: inline-flex; width: 64px; height: 64px; border-radius: 20px; align-items: center; justify-content: center; font-size: 1.7rem; color: var(--mx-orange); background: rgba(255, 91, 31, .08); }
.dl-empty p { color: var(--mx-text-2); margin: 12px 0 16px; }
.dl-empty .mx-btn { margin-bottom: 14px; width: auto; min-width: 220px; }

.dl-side { display: flex; flex-direction: column; gap: 24px; }
.dl-qr { border-radius: var(--mx-r-xl); padding: 26px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; box-shadow: var(--mx-shadow-lg); }
.dl-qr > * { position: relative; z-index: 1; }
.dl-qr h3 { font-size: 1.3rem; color: #fff; margin: .9rem 0 .4rem; }
.dl-qr p { color: var(--mx-on-dark-2); margin: 0; font-size: .92rem; }
.dl-qr-box { width: 196px; height: 196px; padding: 10px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .06), 0 20px 50px rgba(255, 91, 31, .25); }
.dl-qr-box svg { display: block; width: 100%; height: 100%; }

.dl-safe { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border-radius: var(--mx-r-lg); background: linear-gradient(135deg, #fff7f2, #fff); border: 1px solid #ffd8c5; }
.dl-safe-ic { width: 48px; height: 48px; border-radius: 14px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff; background: var(--mx-grad); box-shadow: 0 10px 24px rgba(255, 91, 31, .28); }
.dl-safe b { font-family: var(--mx-font-display); font-weight: 700; color: var(--mx-text); }
.dl-safe p { margin: .4rem 0 0; color: var(--mx-text-2); line-height: 1.8; font-size: .94rem; }

/* ── Install steps ────────────────────────────────────────────────── */
.dl-install-sec { padding-top: 40px; }
.dl-install-sec .mx-section-head h2, .dl-more-sec .mx-section-head h2 { font-weight: 800; }
.dl-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; position: relative; counter-reset: none; }
.dl-step { position: relative; padding: 18px 22px 26px; }
.dl-step h3 { font-size: 1.18rem; font-weight: 700; margin: 14px 0 8px; color: var(--mx-text); }
.dl-step p { color: var(--mx-text-2); line-height: 1.85; margin: 0; font-size: .96rem; }
.dl-step-n {
    position: absolute; top: 142px; inset-inline-start: 22px; width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--mx-font-display); font-weight: 900; color: #fff; background: var(--mx-grad);
    box-shadow: 0 0 0 5px #fff, var(--mx-glow);
}
.dl-step:not(:last-child)::after { /* dashed connector to the next step */
    content: ""; position: absolute; top: 161px; inset-inline-start: calc(100% - 4px); width: 32px; border-top: 2px dashed rgba(255, 91, 31, .4);
}
.dl-step-vis {
    height: 160px; margin: 0 0 18px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(120% 90% at 50% 0%, var(--mx-paper-2), #fff 70%); border: 1px solid var(--mx-line); padding: 0 18px;
}
.dl-vis-file, .dl-vis-setting, .dl-vis-open {
    width: 100%; max-width: 280px; display: flex; align-items: center; gap: 12px;
    background: #fff; border-radius: 16px; padding: 12px 14px; box-shadow: var(--mx-shadow-md); border: 1px solid var(--mx-line);
}
.dl-vis-file-ic { width: 40px; height: 40px; border-radius: 12px; background: #e9fbf1; color: #18a558; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; flex: 0 0 auto; }
.dl-vis-file-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.dl-vis-file-t b { font-size: .86rem; text-align: right; }
.dl-vis-bar { display: block; height: 6px; border-radius: 6px; background: #f1ebe6; overflow: hidden; }
.dl-vis-bar i { display: block; height: 100%; width: 78%; border-radius: inherit; background: var(--mx-grad); animation: dl-fill 3.2s var(--mx-ease) infinite; }
@keyframes dl-fill { 0% { width: 8%; } 75%, 100% { width: 100%; } }
.dl-vis-dl { color: var(--mx-orange); font-size: 1.5rem; }
.dl-vis-setting > div, .dl-vis-open > div { flex: 1; display: flex; flex-direction: column; line-height: 1.4; min-width: 0; }
.dl-vis-setting b, .dl-vis-open b { font-size: .9rem; }
.dl-vis-setting small, .dl-vis-open small { font-size: .76rem; color: var(--mx-text-3); }
.dl-vis-toggle { position: relative; width: 46px; height: 26px; border-radius: 999px; background: var(--mx-green); flex: 0 0 auto; animation: dl-toggle-bg 3.2s ease-in-out infinite; }
.dl-vis-toggle i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); animation: dl-toggle 3.2s var(--mx-ease) infinite; transform: translateX(20px); }
@keyframes dl-toggle { 0%, 25% { transform: translateX(0); } 45%, 100% { transform: translateX(20px); } }
@keyframes dl-toggle-bg { 0%, 25% { background: #d6d9de; } 45%, 100% { background: var(--mx-green); } }
.dl-vis-open img { width: 46px; height: 46px; border-radius: 14px; background: #fff; box-shadow: 0 6px 16px rgba(255, 91, 31, .22); object-fit: contain; }
.dl-vis-open-btn { padding: .45rem 1rem; border-radius: 10px; background: var(--mx-grad); color: #fff; font-weight: 800; font-size: .85rem; box-shadow: 0 8px 18px rgba(255, 91, 31, .3); }

/* ── Features ─────────────────────────────────────────────────────── */
.dl-head-dark h2 { color: #fff; }
.dl-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dl-feature { padding: 26px; transition: transform .45s var(--mx-ease), border-color .45s, background .45s; }
.dl-feature:hover { transform: translateY(-4px); border-color: rgba(255, 138, 61, .35); background: rgba(255, 255, 255, .09); }
.dl-feature h3 { color: #fff; font-size: 1.12rem; font-weight: 700; margin: 18px 0 8px; line-height: 1.5; }
.dl-feature p { color: var(--mx-on-dark-2); line-height: 1.85; margin: 0; font-size: .95rem; }
.dl-feature-stores { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.dl-feature-stores .mx-store { height: 30px; padding: 0 .65rem; font-size: .78rem; border-radius: 9px; gap: .3rem; }

/* ── Other platforms ──────────────────────────────────────────────── */
.dl-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.dl-plat { display: flex; gap: 20px; align-items: flex-start; padding: 28px; }
.dl-plat-body { flex: 1; min-width: 0; }
.dl-plat h2 { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.dl-plat p { color: var(--mx-text-2); margin: .5rem 0 1.2rem; line-height: 1.8; }
.dl-plat-hint { display: block; color: var(--mx-text-3); margin-top: .9rem; line-height: 1.8; }
.dl-plat-hint code { color: var(--mx-ember); background: var(--mx-paper-2); padding: .1rem .4rem; border-radius: 6px; }
.dl-plat--soon { background: linear-gradient(135deg, #fff, #f7f7f9); }
.dl-plat--soon .mx-btn[disabled] { opacity: .7; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .dl-phone { font-size: 9px; }
    .dl-stage { height: 600px; }
    .dl-float--notif { left: -30px; }
}
@media (max-width: 900px) {
    .dl-section { padding: 72px 0; }
    .dl-hero { padding: 48px 0 120px; }
    .dl-hero-inner { grid-template-columns: 1fr; gap: 12px; }
    .dl-hero-copy { text-align: center; }
    .dl-lead, .dl-trust { margin-inline: auto; }
    .dl-cta, .dl-chips, .dl-trust { justify-content: center; }
    .dl-abi-note, .dl-hero-hint { justify-content: center; }
    .dl-stage { height: 580px; }
    .dl-release-grid { grid-template-columns: 1fr; }
    .dl-qr { display: none; } /* already on a phone: nothing to scan */
    .dl-steps { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
    .dl-step:not(:last-child)::after { display: none; }
    .dl-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dl-more { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .dl-section { padding: 60px 0; }
    .dl-hero { padding: 36px 0 104px; }
    .dl-hero h1 { font-size: clamp(2.05rem, 10vw, 2.6rem); margin-top: 1rem; }
    .dl-lead { font-size: 1rem; line-height: 1.95; margin-bottom: 1.5rem; }
    .dl-cta { flex-direction: column; }
    .dl-cta .mx-btn { width: 100%; }
    .dl-cta-main { justify-content: flex-start; }
    .dl-cta-txt { flex: 1; }
    .dl-trust { gap: .5rem 1rem; justify-content: center; }
    .dl-trust li { font-size: .82rem; }
    .dl-stage { height: 500px; margin-top: 8px; }
    .dl-phone { font-size: 7.6px; }
    .dl-halo { width: 340px; height: 340px; }
    .dl-orbit { width: 360px; height: 360px; }
    .dl-float { min-width: 0; padding: .5rem .7rem; gap: .5rem; border-radius: 16px; }
    .dl-float b { font-size: .78rem; }
    .dl-float small { font-size: .7rem; }
    .dl-float-ic { width: 30px; height: 30px; border-radius: 10px; font-size: .8rem; }
    .dl-float--notif { top: 30px; left: 0; }
    .dl-float--import { bottom: 40px; right: 0; }
    .dl-release-sec { margin-top: -72px; }
    .dl-release { padding: 20px 16px; border-radius: var(--mx-r-lg); }
    .dl-release-head { gap: 12px; }
    .dl-os { width: 52px; height: 52px; border-radius: 16px; font-size: 1.6rem; }
    .dl-release-title h2, .dl-plat h2 { font-size: 1.25rem; }
    .dl-file { gap: 10px; padding: 10px 12px; }
    .dl-file-ic { width: 38px; height: 38px; }
    .dl-file-txt b { font-size: .9rem; }
    .dl-file--main { position: relative; margin-top: 8px; }
    .dl-file-tag { position: absolute; top: -11px; inset-inline-end: 12px; font-size: .7rem; padding: .2rem .55rem; background: #fff; border: 1px solid rgba(255, 91, 31, .35); }
    .dl-checksum { padding: 14px; }
    .dl-checksum code { font-size: .78rem; padding: 10px; }
    .dl-safe { padding: 18px; }
    .dl-features { grid-template-columns: 1fr; }
    .dl-feature { padding: 22px; }
    .dl-plat { flex-direction: column; padding: 22px; gap: 14px; }
    .dl-plat .mx-btn { width: 100%; }
    .dl-step-n { top: 134px; }
    .dl-step-vis { height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
    .dl-phone { animation: none; }
    .dl-courier { offset-distance: 68%; }
    .dl-vis-bar i { width: 100%; }
}