/* ========= Details Section ========= */

.dx-section {
    --dx-brand: #9c1f9c;
    --dx-brand-d: #6e1470;
    --dx-brand-l: #b62db3;
    --dx-ink: #2b2131;
    --dx-muted: #655c6d;
    --dx-lilac: #f8eff8;
    --dx-lilac-2: #efdcef;
    --dx-line: #eadbea;
    --dx-wa: #25d366;
    --dx-dur: 7s;
    --dx-ease: cubic-bezier(.2, .8, .2, 1);
    --dx-head: "Playpen Sans Arabic", cursive !important;

    position: relative;
    overflow: hidden;
    padding: clamp(64px, 9vw, 112px) 0;
    background: linear-gradient(180deg, #fbf5fb, #fff8ff);
    font-family: var(--dx-body);
    color: var(--dx-ink);
    line-height: 1.9;
    font-size: 17px;
}

.dx-section *,
.dx-section *::before,
.dx-section *::after { box-sizing: border-box; }


.dx-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 56px;
    align-items: center;
}

/* ---------- text side ---------- */ 

.dx-title {
    margin: 0;
    font-weight: 700 !important;
    font-size: clamp(28px, 3.8vw, 42px);
    line-height: 1.5;
    color: var(--dx-ink);
}

.dx-hl {
    color: var(--dx-brand);
    background: linear-gradient(var(--dx-brand-l), var(--dx-brand-l)) no-repeat 100% 100% / 0 em;
    transition: background-size .9s var(--dx-ease) .4s;
}


.dx-in .dx-hl,
.dx-section:not(.dx-js) .dx-hl { background-size: 100% .14em; }

.dx-lead { margin: 14px 0 26px; color: var(--dx-muted); font-size: 18px; }

.dx-tabs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.dx-tab {
    position: relative;
    overflow: hidden;
    width: 100%;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px 20px 20px;
    border: 1.5px solid transparent;
    border-radius: 22px;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
    opacity: .6;
    transition: opacity .3s, background .3s, border-color .3s, box-shadow .4s, transform .4s var(--dx-ease);
}

.dx-tab:hover { opacity: .9; }

.dx-tab.is-active {
    opacity: 1;
    background: #fff;
    border-color: var(--dx-lilac-2);
    box-shadow: 0 26px 46px -32px rgba(80, 10, 80, .6);
    transform: translateX(-6px);
}

.dx-tab-ico {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: var(--dx-lilac);
    transition: background .3s;
}

.dx-tab-ico svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: var(--dx-brand);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .3s;
}

.dx-tab.is-active .dx-tab-ico { background: linear-gradient(135deg, var(--dx-brand), var(--dx-brand-l)); }
.dx-tab.is-active .dx-tab-ico svg { stroke: #fff; }

.dx-tab-t {
    display: block;
    font-family: var(--dx-head);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.6;
}

.dx-tab-d { display: block; margin-top: 2px; color: var(--dx-muted); font-size: 16px; line-height: 1.85; }

.dx-bar { position: absolute; inset-inline: 0; bottom: 0; height: 3px; }

.dx-bar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--dx-brand), var(--dx-wa));
    transform: scaleX(0);
    transform-origin: right;
}

.dx-tab.is-active .dx-bar i { animation: dxbar var(--dx-dur) linear forwards; }

.dx-paused .dx-bar i { animation-play-state: paused; }

.dx-off *,
.dx-off *::before,
.dx-off *::after { animation-play-state: paused !important; }

/* ---------- stage ---------- */

.dx-stage {
    position: relative;
    width: 100%;
    max-width: 580px;
    margin-inline: auto;
    aspect-ratio: 1 / 1.02;
    border-radius: 44px;
    background:
        radial-gradient(circle at 50% 40%, #fff, transparent 70%),
        linear-gradient(160deg, #f6e6f6, #fdf7fd 60%, #eefaf3);
    border: 1px solid var(--dx-lilac-2);
    box-shadow: 0 50px 90px -56px rgba(110, 20, 112, .7);
    overflow: hidden;
}

.dx-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(156, 31, 156, .18) 1.2px, transparent 1.4px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 70%);
    mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 70%);
}

.dx-glow {
    position: absolute;
    width: 62%;
    aspect-ratio: 1;
    inset-block-start: 18%;
    inset-inline-start: 19%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(156, 31, 156, .28), transparent 68%);
    filter: blur(24px);
    animation: dxbreathe 6s ease-in-out infinite;
}

.dx-scenes {
    position: absolute;
    inset: 0;
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--dx-s, 1));
    transition: transform .25s ease-out;
}

.dx-scene {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    transform: scale(.94) translateY(12px);
    transition: opacity .45s ease, transform .6s var(--dx-ease), visibility .45s;
}

.dx-scene.is-active { opacity: 1; visibility: visible; transform: none; }

.dx-shield {
    position: absolute;
    z-index: 5;
    inset-block-start: 6%;
    inset-inline-end: 6%;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #fff, #f3e4f3);
    box-shadow: 0 18px 36px -12px rgba(110, 20, 112, .55), inset 0 0 0 1px #fff;
    animation: dxfloat 6s ease-in-out infinite;
}

.dx-shield::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: dxring 2.8s ease-out infinite;
}

.dx-shield svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: var(--dx-brand);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- shared mini UI ---------- */

.dx-logo {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--dx-brand), var(--dx-brand-l));
    color: #fff;
    font: 700 15px/1 var(--dx-head);
}

.dx-logo.lg { width: 48px; height: 48px; font-size: 20px; }

/* ================= scene 1 : languages & currencies ================= */

.dx-card {
    width: min(88%, 330px);
    display: grid;
    gap: 12px;
    padding: 16px;
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 44px 70px -36px rgba(80, 10, 80, .6), 0 0 0 1px var(--dx-line);
}

.dx-ph-head { display: flex; align-items: center; gap: 10px; }
.dx-ph-head b { font: 600 16px/1.4 var(--dx-head); }

.dx-lang {
    position: relative;
    margin-inline-start: auto;
    display: flex;
    padding: 3px;
    background: var(--dx-lilac);
    border-radius: 999px;
    direction: ltr;
}

.dx-lang span {
    position: relative;
    z-index: 1;
    width: 38px;
    text-align: center;
    font: 700 12px/26px var(--dx-head);
    color: var(--dx-brand-d);
}

.dx-lang span:nth-child(2) { color: #fff; }

.dx-lang-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 38px;
    height: 26px;
    border-radius: 999px;
    background: var(--dx-brand);
    box-shadow: 0 6px 12px -6px rgba(156, 31, 156, .9);
}

.dx-item {
    display: grid;
    grid-template-columns: 62px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border-radius: 20px;
    background: var(--dx-lilac);
}

.dx-thumb {
    height: 62px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 30px;
    background: linear-gradient(135deg, #f6d9f5, #ecc0ea);
}

.dx-item:nth-of-type(3) .dx-thumb { background: linear-gradient(135deg, #d8f5e3, #b9ecd0); }

.dx-swap { display: grid; }
.dx-item > div { min-width: 0; }
.dx-swap > span { grid-area: 1 / 1; white-space: nowrap; }
.dx-swap .s2,
.dx-swap .s3 { opacity: 0; }

.dx-name { font: 600 14.5px/1.6 var(--dx-head); }
.dx-price { font: 700 17px/1.5 var(--dx-head); color: var(--dx-brand); }

.dx-order {
    padding: 4px 6px;
    min-width: 66px;
    text-align: center;
    border-radius: 12px;
    background: var(--dx-wa);
    color: #04391c;
    font: 700 13px/1.7 var(--dx-head);
    box-shadow: 0 10px 18px -10px rgba(37, 211, 102, .9);
}

.dx-order .dx-swap { justify-items: center; }

.dx-cur { display: flex; gap: 8px; justify-content: center; }

.dx-cur span {
    padding: 2px 16px;
    border-radius: 999px;
    background: var(--dx-lilac);
    color: var(--dx-brand);
    font: 600 13px/1.9 var(--dx-head);
}

.dx-cur span:first-child { background: var(--dx-brand); color: #fff; }

.dx-globe {
    position: absolute;
    inset-block-start: 15%;
    inset-inline-start: 8%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: 16px;
    background: #fff;
    font: 600 13px/1.5 var(--dx-head);
    box-shadow: 0 18px 34px -14px rgba(80, 10, 80, .45);
    animation: dxbob 5s ease-in-out infinite;
}

/* scene-1 animation (all share the same cycle) */
.dx-scene[data-live] .dx-swap .s1 { animation: dxS1 var(--dx-dur) ease infinite; }
.dx-scene[data-live] .dx-swap .s2 { animation: dxS2 var(--dx-dur) ease infinite; }
.dx-scene[data-live] .dx-swap .s3 { animation: dxS3 var(--dx-dur) ease infinite; }
.dx-scene[data-live] .dx-lang-thumb { animation: dxThumb var(--dx-dur) var(--dx-ease) infinite; }
.dx-scene[data-live] .dx-lang span:nth-child(2) { animation: dxLangAR var(--dx-dur) ease infinite; }
.dx-scene[data-live] .dx-lang span:nth-child(3) { animation: dxLangEN var(--dx-dur) ease infinite; }
.dx-scene[data-live] .dx-cur span:nth-child(1) { animation: dxC1 var(--dx-dur) ease infinite; }
.dx-scene[data-live] .dx-cur span:nth-child(2) { animation: dxC2 var(--dx-dur) ease infinite; }
.dx-scene[data-live] .dx-cur span:nth-child(3) { animation: dxC3 var(--dx-dur) ease infinite; }

/* ================= scene 2 : every device ================= */

.dx-devices {
    width: min(88%, 430px);
    display: grid;
    justify-items: center;
    gap: 22px;
}

.dx-frame {
    position: relative;
    width: 100%;
    height: 270px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 44px 70px -36px rgba(80, 10, 80, .6), 0 0 0 1px var(--dx-line);
}

.dx-frame-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 9px 12px;
    background: var(--dx-lilac);
}

.dx-frame-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--dx-lilac-2); }
.dx-frame-bar i:first-child { background: #e6a9e4; }
.dx-frame-bar em {
    margin-inline-start: auto;
    width: 38%;
    height: 8px;
    border-radius: 6px;
    background: #fff;
}

.dx-frame-body {
    flex: 1;
    min-height: 0;
    padding: 10px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 78%, transparent);
    mask-image: linear-gradient(#000 78%, transparent);
}

.dx-banner {
    height: 52px;
    margin-bottom: 10px;
    border-radius: 14px;
    background: linear-gradient(120deg, var(--dx-brand), var(--dx-brand-l) 60%, #d466d2);
    position: relative;
    overflow: hidden;
}

.dx-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
    transform: translateX(-130%);
    animation: dxshine 3.2s ease-in-out infinite;
}

.dx-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
}

.dx-tile { padding: 6px; border-radius: 14px; background: var(--dx-lilac); }

.dx-tile span {
    height: 42px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 22px;
    background: #fff;
}

.dx-tile b,
.dx-tile em { display: block; height: 6px; margin-top: 6px; border-radius: 4px; background: var(--dx-lilac-2); }
.dx-tile em { width: 55%; background: #e8b6e6; }

.dx-devrow { display: flex; gap: 8px; }

.dx-devrow span {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px;
    border-radius: 999px;
    background: #fff;
    color: var(--dx-muted);
    font: 600 13px/1.7 var(--dx-head);
    box-shadow: 0 8px 16px -10px rgba(80, 10, 80, .5);
}

.dx-devrow svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dx-devrow span:first-child { background: var(--dx-brand); color: #fff; }

.dx-scene[data-live] .dx-frame { animation: dxFrame var(--dx-dur) var(--dx-ease) infinite; }
.dx-scene[data-live] .dx-devrow span:nth-child(1) { animation: dxD1 var(--dx-dur) ease infinite; }
.dx-scene[data-live] .dx-devrow span:nth-child(2) { animation: dxD2 var(--dx-dur) ease infinite; }
.dx-scene[data-live] .dx-devrow span:nth-child(3) { animation: dxD3 var(--dx-dur) ease infinite; }

/* ================= scene 3 : social accounts ================= */

.dx-social {
    width: min(88%, 350px);
    display: grid;
    gap: 14px;
    padding: 18px;
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 44px 70px -36px rgba(80, 10, 80, .6), 0 0 0 1px var(--dx-line);
}

.dx-profile { display: flex; align-items: center; gap: 12px; }
.dx-profile b { display: block; font: 600 16px/1.4 var(--dx-head); }
.dx-profile small { display: block; color: var(--dx-muted); font-size: 13px; line-height: 1.4; }

.dx-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }

.dx-links li {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 18px;
    background: var(--dx-lilac);
}

.dx-sico {
    grid-row: 1 / 3;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    font: 700 19px/1 var(--dx-head);
}

.dx-sico svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dx-sico.fb { background: #1877f2; }
.dx-sico.ig { background: linear-gradient(45deg, #feda75, #fa7e1e 30%, #d62976 60%, #962fbf 85%, #4f5bd5); }
.dx-sico.tt { background: #111; }
.dx-sico.sc { background: #fffc00; font-size: 20px; }

.dx-lbl { font: 600 14px/1.5 var(--dx-head); }

.dx-url {
    direction: ltr;
    font: 500 12px/1.6 ui-monospace, Menlo, Consolas, monospace;
    color: var(--dx-muted);
    text-align: left;
}

.dx-url span { display: block; overflow: hidden; white-space: nowrap; width: 27ch; }

.dx-ok {
    grid-row: 1 / 3;
    grid-column: 3;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--dx-wa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.dx-linkpill {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--dx-brand), var(--dx-brand-l));
    color: #fff;
    direction: ltr;
    font: 600 13px/1.7 var(--dx-head);
    box-shadow: 0 14px 26px -12px rgba(156, 31, 156, .85);
}

.dx-scene[data-live] .dx-links li { animation: dxRow .55s var(--dx-ease) calc(.3s + var(--i) * 1s) both; }
.dx-scene[data-live] .dx-url span { animation: dxType .85s steps(27) calc(.65s + var(--i) * 1s) both; }
.dx-scene[data-live] .dx-ok { animation: dxPop .5s var(--dx-ease) calc(1.55s + var(--i) * 1s) both; }
.dx-scene[data-live] .dx-linkpill { animation: dxPop .6s var(--dx-ease) 4.7s both; }

/* ---------- entrance reveal ---------- */

.dx-js .dx-rv {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s var(--dx-ease) var(--d, 0s), transform .8s var(--dx-ease) var(--d, 0s);
}

.dx-js .dx-rv.dx-side { transform: translateX(-46px) scale(.97); }
.dx-js.dx-in .dx-rv { opacity: 1; transform: none; }

/* ---------- keyframes ---------- */

@keyframes dxbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dxfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes dxbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes dxbreathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes dxring { 0% { box-shadow: 0 0 0 0 rgba(156, 31, 156, .35); } 70%, 100% { box-shadow: 0 0 0 22px rgba(156, 31, 156, 0); } }
@keyframes dxshine { 0%, 45% { transform: translateX(-130%); } 80%, 100% { transform: translateX(130%); } }

@keyframes dxS1 { 0%, 28% { opacity: 1; transform: none; } 34%, 95% { opacity: 0; transform: translateY(-9px); } 100% { opacity: 1; transform: none; } }
@keyframes dxS2 { 0%, 30% { opacity: 0; transform: translateY(9px); } 37%, 61% { opacity: 1; transform: none; } 67%, 100% { opacity: 0; transform: translateY(-9px); } }
@keyframes dxS3 { 0%, 63% { opacity: 0; transform: translateY(9px); } 70%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-9px); } }

@keyframes dxThumb { 0%, 30% { transform: translateX(0); } 36%, 63% { transform: translateX(100%); } 69%, 100% { transform: translateX(0); } }
@keyframes dxLangAR { 0%, 30% { color: #fff; } 36%, 63% { color: var(--dx-brand-d); } 69%, 100% { color: #fff; } }
@keyframes dxLangEN { 0%, 30% { color: var(--dx-brand-d); } 36%, 63% { color: #fff; } 69%, 100% { color: var(--dx-brand-d); } }

@keyframes dxC1 { 0%, 30% { background: var(--dx-brand); color: #fff; } 34%, 96% { background: var(--dx-lilac); color: var(--dx-brand); } 100% { background: var(--dx-brand); color: #fff; } }
@keyframes dxC2 { 0%, 30% { background: var(--dx-lilac); color: var(--dx-brand); } 36%, 63% { background: var(--dx-brand); color: #fff; } 67%, 100% { background: var(--dx-lilac); color: var(--dx-brand); } }
@keyframes dxC3 { 0%, 63% { background: var(--dx-lilac); color: var(--dx-brand); } 69%, 94% { background: var(--dx-brand); color: #fff; } 98%, 100% { background: var(--dx-lilac); color: var(--dx-brand); } }

@keyframes dxFrame {
    0%, 22% { width: 100%; border-radius: 16px; }
    36%, 55% { width: 64%; border-radius: 22px; }
    69%, 90% { width: 36%; border-radius: 30px; }
    100% { width: 100%; border-radius: 16px; }
}

@keyframes dxD1 { 0%, 26% { background: var(--dx-brand); color: #fff; } 32%, 96% { background: #fff; color: var(--dx-muted); } 100% { background: var(--dx-brand); color: #fff; } }
@keyframes dxD2 { 0%, 30% { background: #fff; color: var(--dx-muted); } 36%, 58% { background: var(--dx-brand); color: #fff; } 64%, 100% { background: #fff; color: var(--dx-muted); } }
@keyframes dxD3 { 0%, 64% { background: #fff; color: var(--dx-muted); } 70%, 92% { background: var(--dx-brand); color: #fff; } 98%, 100% { background: #fff; color: var(--dx-muted); } }

@keyframes dxRow { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes dxType { from { width: 0; } to { width: 27ch; } }
@keyframes dxPop { from { opacity: 0; transform: scale(.3); } 65% { transform: scale(1.18); } to { opacity: 1; transform: scale(1); } }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
    .dx-grid { grid-template-columns: 1fr; gap: 40px; }
    .dx-head { text-align: center; }
    .dx-tab.is-active { transform: none; }
    .dx-stage { max-width: 520px; }
}

@media (max-width: 480px) {
    .dx-section { font-size: 16px; }
    .dx-stage { aspect-ratio: 1 / 1.22; border-radius: 34px; }
    .dx-scenes { --dx-s: .9; }
    .dx-tab { padding: 16px 14px 18px; gap: 12px; }
    .dx-tab-t { font-size: 18px; }
    .dx-tab-d { font-size: 15px; }
    .dx-shield { width: 50px; height: 50px; inset-block-start: 4%; inset-inline-end: 5%; }
    .dx-shield svg { width: 23px; height: 23px; }
    .dx-globe { display: none; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .dx-section *,
    .dx-section *::before,
    .dx-section *::after { animation: none !important; transition: none !important; }
    .dx-js .dx-rv { opacity: 1; transform: none; }
    .dx-hl { background-size: 100% .14em; }
    .dx-bar i { transform: scaleX(1); }
}