/* ==========================================================
   دكانك — قسم "الجولة" (Scroll Story)
   قسم واحد مثبّت أثناء التمرير يحكي قصة المنصة عبر 5 خطوات،
   بجانب معاينة حيّة لمتصفح يتنقّل بين شاشات المنصة الفعلية.
   يستخدم فقط متغيرات نظام التصميم الحالي (لا ألوان ثابتة جديدة)
   حتى يبقى متوافقاً تلقائياً مع الوضع الداكن.
   ========================================================== */

.scroll-story {
    position: relative;
    background: var(--canvas);
    /* متغيرات شدة الحركة — تُعاد كتابتها بمستويات أخف على التابلت،
       وتُصفَّر تقريباً مع تفضيل تقليل الحركة. لا تُغيَّر الألوان أو التخطيط هنا. */
    --story-shift: 18px;
    --story-scale-from: .98;
    --story-blur: 6px;
    --story-dur: .6s;
    --story-ease: cubic-bezier(.4, 0, .2, 1); /* ease-in-out حقيقية لهذا القسم تحديداً */
}

.story-track {
    /* ارتفاع المسار الكامل = عدد الخطوات × ارتفاع الشاشة، يمنح مساحة تمرير لكل خطوة */
    height: calc(var(--story-steps, 5) * 100vh);
    position: relative;
}

.story-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.story-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
    width: 100%;
}

/* ---------------------------------------------------------
   العمود الأيسر — النص المتحرك
   --------------------------------------------------------- */
.story-left {
    position: relative;
    min-width: 0;
}

.story-dots {
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
}

.story-dot {
    width: 28px;
    height: 4px;
    border-radius: 3px;
    background: var(--line-2);
    transition: background .4s var(--ease), width .4s var(--ease);
}

.story-dot.is-active { background: var(--stamp); width: 42px; }
.story-dot.is-done { background: var(--gold); }

.story-steps {
    position: relative;
    /* الارتفاع يُثبَّت فعلياً عبر JS (--story-steps-h = أطول خطوة محتوى)،
       والـ clamp هنا مجرد قيمة احتياطية قبل أن يُحسب JS القياس الدقيق.
       لا يوجد أي "transition" على الـ height نفسه — يُحسب مرة ويثبت. */
    height: var(--story-steps-h, clamp(260px, 34vh, 340px));
}

.story-step {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    opacity: 0;
    transform: translateY(var(--story-shift)) scale(var(--story-scale-from));
    filter: blur(var(--story-blur));
    pointer-events: none;
    will-change: opacity, transform, filter;
    transition:
        opacity var(--story-dur) var(--story-ease),
        transform var(--story-dur) var(--story-ease),
        filter var(--story-dur) var(--story-ease);
}

.story-step.is-active {
    /* يبقى absolute دائماً — أبداً ما يتحوّل لـ relative، حتى لا يفرض
       ارتفاعه الطبيعي على الحاوية ويسبب "قفزة" بين الخطوات. */
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    pointer-events: auto;
}

.story-num {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: .06em;
    color: var(--gold);
    background: var(--gold-soft);
    border-radius: 999px;
    padding: 5px 12px;
    margin-bottom: 14px;
}

.story-step .eyebrow { display: block; margin-bottom: 8px; }

.story-step h2 {
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.25;
    color: var(--ink);
    margin-bottom: 14px;
}

.story-step p {
    color: var(--sage);
    font-size: 16px;
    max-width: 46ch;
    margin-bottom: 20px;
}

.story-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--forest);
    background: var(--ink-2);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-xs);
    border-radius: 999px;
    padding: 9px 16px;
}

html.dark .story-badge { color: var(--paper); }

.story-progress {
    margin-top: 30px;
    height: 4px;
    border-radius: 3px;
    background: var(--line);
    overflow: hidden;
    max-width: 260px;
}

.story-progress-fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--stamp), var(--gold));
    width: calc(var(--scroll-progress, 0) * 100%);
}

/* ---------------------------------------------------------
   العمود الأيمن — معاينة المتصفح (Device Mock)
   --------------------------------------------------------- */
.story-right { min-width: 0; }

.device-mock {
    position: relative;
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transform: perspective(1400px) rotateY(-4deg) rotateX(1deg);
    transition: transform .5s var(--ease);
}

.device-mock::after {
    /* لمعة زجاجية خفيفة أعلى المعاينة لإحساس Glass */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(155deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 30%);
    pointer-events: none;
}

@media (hover: hover) {
    .device-mock:hover { transform: perspective(1400px) rotateY(-1deg) rotateX(0deg); }
}

.device-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 16px;
    background: var(--canvas-2);
    border-bottom: 1px solid var(--line);
    flex-wrap: nowrap;
    overflow: hidden;
}

.device-bar span {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--line-2);
    flex: 0 0 auto; /* النقاط لا تنكمش ولا تنكسر أبداً بأي عرض شاشة */
}
.device-bar span:nth-child(1) { background: var(--stamp); opacity: .55; }
.device-bar span:nth-child(2) { background: var(--gold); opacity: .55; }
.device-bar span:nth-child(3) { background: var(--forest); opacity: .4; }

.device-url {
    margin-inline-start: 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--sage);
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 14px;
    flex: 1 1 auto;
    min-width: 0; /* يسمح للعنصر بالانكماش تحت حجم نصّه بدل ما "يدفع" الصف كامل ويكسره */
    max-width: 220px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.device-url-text {
    display: inline-block;
    transition: transform .32s var(--ease), opacity .32s var(--ease);
}

.device-screen-wrap {
    position: relative;
    aspect-ratio: 16 / 11;
    background: var(--canvas);
}

.device-screen {
    position: absolute;
    inset: 0;
    padding: clamp(16px, 2.6vw, 28px);
    opacity: 0;
    transform: scale(var(--story-scale-from)) translateY(var(--story-shift, 14px));
    filter: blur(var(--story-blur, 4px));
    transition:
        opacity var(--story-dur) var(--story-ease),
        transform var(--story-dur) var(--story-ease),
        filter var(--story-dur) var(--story-ease);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    will-change: opacity, transform, filter;
}

.device-screen.is-active {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
    pointer-events: auto;
}

/* ---- شاشة ١: لوحة التحكم ---- */
.dm-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.dm-stat {
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    box-shadow: var(--shadow-xs);
}
.dm-stat span { display: block; font-size: 11px; color: var(--sage); margin-bottom: 6px; }
.dm-stat strong {
    font-family: var(--font-mono);
    font-size: clamp(15px, 1.6vw, 20px);
    color: var(--ink);
}
.dm-stat strong.up::after { content:''; display:inline-block; width:10px; height:10px; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m18%2015-6-6-6%206%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m18%2015-6-6-6%206%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain; color: var(--forest); margin-inline-start:3px; vertical-align:1px; }

.dm-chart {
    flex: 1;
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    min-height: 90px;
}
.dm-chart i {
    flex: 1;
    background: linear-gradient(180deg, var(--stamp), var(--gold));
    border-radius: 6px 6px 2px 2px;
    height: 8%;
    transition: height 1.1s var(--ease);
}
.device-screen.is-active .dm-chart i { height: var(--h, 40%); }

.dm-orders { background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.dm-orders b { font-size: 12px; color: var(--sage); font-weight: 600; }
.dm-orders ul { margin-top: 8px; display: flex; flex-direction: column; gap: 7px; }
.dm-orders li {
    display: flex; justify-content: space-between; font-size: 13px; color: var(--paper);
    border-bottom: 1px dashed var(--line); padding-bottom: 7px;
}
.dm-orders li:last-child { border-bottom: none; padding-bottom: 0; }
.dm-orders li em { font-style: normal; color: var(--forest); font-family: var(--font-mono); font-size: 12px; }

/* ---- شاشة ٢: بناء المتجر (3 خطوات) ---- */
.builder-list { display: flex; flex-direction: column; gap: 0; flex: 1; justify-content: center; }
.builder-item {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 4px;
    position: relative;
}
.builder-item::before {
    content: "";
    position: absolute; inset-inline-start: 19px; top: -50%; width: 2px; height: 100%;
    background: var(--line);
    z-index: 0;
}
.builder-item:first-child::before { display: none; }
.builder-dot {
    width: 40px; height: 40px; min-width: 40px; border-radius: 50%;
    background: var(--ink-2); border: 1.5px solid var(--line-2);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; color: var(--sage); position: relative; z-index: 1;
    transition: all .5s var(--ease);
}
.builder-item.is-done .builder-dot {
    background: var(--forest); border-color: var(--forest); color: #fff;
}
.builder-item.is-current .builder-dot {
    border-color: var(--stamp); color: var(--stamp); box-shadow: 0 0 0 4px var(--stamp-soft);
}
.builder-text b { display: block; font-size: 14.5px; color: var(--ink); }
.builder-text span { font-size: 12.5px; color: var(--sage); }

.builder-progress { height: 5px; border-radius: 3px; background: var(--line); margin-top: 6px; overflow: hidden; }
.builder-progress i {
    display: block; height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, var(--stamp), var(--forest));
    width: calc(var(--local-progress, 0) * 100%);
}

/* ---- شاشة ٣: الثيمات ---- */
.theme-row { display: flex; gap: 12px; overflow: hidden; padding: 4px 2px; }
.theme-card {
    flex: 1; min-width: 0;
    background: var(--ink-2); border: 1.5px solid var(--line); border-radius: 12px;
    padding: 12px; text-align: center;
    transform: scale(.94); opacity: .6;
    transition: all .5s var(--ease);
}
.theme-card.is-picked {
    transform: scale(1.04); opacity: 1; border-color: var(--stamp);
    box-shadow: var(--shadow-md);
}
.theme-swatch { width: 100%; height: 34px; border-radius: 8px; margin-bottom: 8px; }
.theme-card b { font-size: 13px; color: var(--ink); }

.theme-preview {
    margin-top: 6px; flex: 1;
    border-radius: 12px; border: 1px solid var(--line);
    background: var(--canvas-2);
    display: flex; flex-direction: column; overflow: hidden;
    transition: box-shadow .5s var(--ease);
}
.theme-preview .tp-top { height: 34%; background: var(--tp-color, var(--stamp)); transition: background .6s var(--ease); }
.theme-preview .tp-body { flex: 1; padding: 10px; display: flex; gap: 8px; }
.theme-preview .tp-body i { flex: 1; background: var(--ink-2); border: 1px solid var(--line); border-radius: 8px; }

/* ---- شاشة ٤: المنتجات ---- */
.product-card { background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.product-drop {
    border: 1.5px dashed var(--line-2); border-radius: 10px;
    padding: 16px; text-align: center; color: var(--sage); font-size: 12.5px;
    background: var(--canvas-2);
}
.product-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.product-fields div { background: var(--canvas-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.product-fields span { display: block; font-size: 10.5px; color: var(--sage); }
.product-fields b { font-size: 13px; color: var(--ink); }
.product-publish {
    align-self: flex-start; display: flex; align-items: center; gap: 8px;
    background: var(--stamp); color: #fff; font-size: 13px; font-weight: 700;
    border-radius: 999px; padding: 8px 18px;
}
.product-publish .tick { opacity: 0; transition: opacity .4s var(--ease) .3s; }
.device-screen.is-active .product-publish .tick { opacity: 1; }

/* ---- شاشة ٥: الطلبات ---- */
.orders-flow { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.orders-cart { display: flex; gap: 10px; }
.orders-cart div {
    flex: 1; background: var(--ink-2); border: 1px solid var(--line); border-radius: 10px;
    padding: 10px; font-size: 12.5px; color: var(--paper); text-align: center;
}
.orders-cart div em { display: block; font-style: normal; color: var(--forest); font-size: 11px; margin-top: 4px; }
.order-toast {
    display: flex; align-items: center; gap: 10px;
    background: var(--ink-2); border: 1px solid var(--stamp); border-radius: 12px;
    padding: 10px 14px; box-shadow: var(--shadow-md);
    transform: translateY(-14px); opacity: 0;
    transition: all .6s var(--ease) .2s;
}
.device-screen.is-active .order-toast { transform: translateY(0); opacity: 1; }
.order-toast b { font-size: 13px; color: var(--ink); }
.order-toast span { font-size: 11.5px; color: var(--sage); display: block; }

/* ---------------------------------------------------------
   لابتوب / شاشات متوسطة (1024px - 1279px)
   يبقى القسم مثبّتاً (Pinned/Sticky) بنفس التخطيط تماماً،
   فقط شدة حركة أخف ومسافات أصغر قليلاً لإحساس أهدأ.
   --------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {
    .scroll-story {
        --story-shift: 12px;
        --story-scale-from: .99;
        --story-blur: 3px;
        --story-dur: .5s;
    }
    .story-grid { gap: clamp(22px, 3.6vw, 44px); }
}

/* ===========================================================
   وضع "البطاقات" المشترك — تابلت (768–1023px) وموبايل (أقل من 768px).
   لا يوجد أي تثبيت (sticky/pin) هنا إطلاقاً. نفس العناصر بالضبط
   (بدون أي تغيير على الـ HTML أو الـ JS) تُعاد ترتيبها بصرياً فقط
   عبر display:contents + order، بحيث تتحوّل كل خطوة نصية مع معاينة
   شاشتها إلى "بطاقة مزايا" متتالية تظهر واحدة تلو الأخرى أثناء
   التمرير الطبيعي للصفحة.
   =========================================================== */
@media (max-width: 1023px) {
    .story-track { height: auto; }
    .story-sticky { position: static; height: auto; padding: 56px 0; }

    .story-grid {
        display: flex;
        flex-direction: column;
        gap: 28px;
    }

    /* تفكيك الحاويات الوسيطة بصرياً فقط — عناصرها الفعلية (الخطوات
       ومعاينات الشاشة) تصبح أبناء مباشرين لـ .story-grid فتقدر
       نرتّبها بـ order، بدون لمس ترتيب الـ HTML أو منطق الـ JS. */
    .story-left,
    .story-right,
    .story-steps,
    .device-mock,
    .device-screen-wrap {
        display: contents;
    }

    /* عناصر خاصة بوضع التثبيت (نقاط + شريط تقدّم + شريط متصفح) لا معنى لها هنا */
    .story-dots, .story-progress, .device-bar { display: none; }

    /* ---- بطاقة النص (رقم الخطوة + العنوان + الوصف) ---- */
    .story-step {
        position: relative; /* بالتدفق الطبيعي — يحجز مساحته دائماً، فلا CLS رغم opacity:0 */
        pointer-events: auto;
        background: var(--ink-2);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-md);
        padding: clamp(22px, 3.4vw, 30px);
    }
    .story-step p { max-width: none; }

    /* أيقونة/رسمة صغيرة توضيحية لكل خطوة — زخرفية بحتة عبر CSS فقط */
    .story-step::before {
        display: block;
        font-size: 24px;
        line-height: 1;
        margin-bottom: 12px;
    }
    .story-step[data-step="0"]::before { content:''; display:inline-block; width:18px; height:18px; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%209%209-7%209%207v11a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22%2F%3E%3Cpath%20d%3D%22M9%2022V12h6v10%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%209%209-7%209%207v11a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22%2F%3E%3Cpath%20d%3D%22M9%2022V12h6v10%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain; vertical-align:-.125em; }
    .story-step[data-step="1"]::before { content:''; display:inline-block; width:18px; height:18px; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain; vertical-align:-.125em; }
    .story-step[data-step="2"]::before { content:''; display:inline-block; width:18px; height:18px; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m2%207%204.41-4.41A2%202%200%200%201%207.83%202h8.34a2%202%200%200%201%201.42.59L22%207%22%2F%3E%3Cpath%20d%3D%22M4%2012v8a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-8%22%2F%3E%3Cpath%20d%3D%22M15%2022v-4a2%202%200%200%200-2-2h-2a2%202%200%200%200-2%202v4%22%2F%3E%3Cpath%20d%3D%22M2%207h20%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m2%207%204.41-4.41A2%202%200%200%201%207.83%202h8.34a2%202%200%200%201%201.42.59L22%207%22%2F%3E%3Cpath%20d%3D%22M4%2012v8a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-8%22%2F%3E%3Cpath%20d%3D%22M15%2022v-4a2%202%200%200%200-2-2h-2a2%202%200%200%200-2%202v4%22%2F%3E%3Cpath%20d%3D%22M2%207h20%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain; vertical-align:-.125em; }
    .story-step[data-step="3"]::before { content:''; display:inline-block; width:18px; height:18px; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2016V8a2%202%200%200%200-1-1.73l-7-4a2%202%200%200%200-2%200l-7%204A2%202%200%200%200%203%208v8a2%202%200%200%200%201%201.73l7%204a2%202%200%200%200%202%200l7-4A2%202%200%200%200%2021%2016z%22%2F%3E%3Cpath%20d%3D%22M3.29%207%2012%2012l8.71-5%22%2F%3E%3Cpath%20d%3D%22M12%2022V12%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2016V8a2%202%200%200%200-1-1.73l-7-4a2%202%200%200%200-2%200l-7%204A2%202%200%200%200%203%208v8a2%202%200%200%200%201%201.73l7%204a2%202%200%200%200%202%200l7-4A2%202%200%200%200%2021%2016z%22%2F%3E%3Cpath%20d%3D%22M3.29%207%2012%2012l8.71-5%22%2F%3E%3Cpath%20d%3D%22M12%2022V12%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain; vertical-align:-.125em; }
    .story-step[data-step="4"]::before { content:''; display:inline-block; width:18px; height:18px; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%208A6%206%200%200%200%206%208c0%207-3%209-3%209h18s-3-2-3-9%22%2F%3E%3Cpath%20d%3D%22M13.73%2021a2%202%200%200%201-3.46%200%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%208A6%206%200%200%200%206%208c0%207-3%209-3%209h18s-3-2-3-9%22%2F%3E%3Cpath%20d%3D%22M13.73%2021a2%202%200%200%201-3.46%200%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain; vertical-align:-.125em; }

    /* ---- بطاقة المعاينة (Screenshot / Mockup) ---- */
    .device-screen {
        position: relative;
        inset: auto;
        margin-top: -6px;
        background: var(--canvas);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-xs);
        min-height: 200px;
    }

    /* ترتيب متتابع: خطوة ← معاينتها ← الخطوة التالية ← معاينتها... */
    .story-step[data-step="0"] { order: 1; }
    .device-screen[data-screen="0"] { order: 2; }
    .story-step[data-step="1"] { order: 3; }
    .device-screen[data-screen="1"] { order: 4; }
    .story-step[data-step="2"] { order: 5; }
    .device-screen[data-screen="2"] { order: 6; }
    .story-step[data-step="3"] { order: 7; }
    .device-screen[data-screen="3"] { order: 8; }
    .story-step[data-step="4"] { order: 9; }
    .device-screen[data-screen="4"] { order: 10; }
}

/* ---------------------------------------------------------
   تابلت (768px - 1023px) — بطاقات متحركة: تلاشي + انزلاق + تكبير
   بسيط + بلور خفيف عند الوصول، بلا أي تثبيت/سكرول مستمر.
   --------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
    .scroll-story {
        --story-shift: 20px;
        --story-scale-from: .97;
        --story-blur: 5px;
        --story-dur: .55s;
    }
    .story-grid { gap: 32px; }
}

/* ---------------------------------------------------------
   موبايل حقيقي (أقل من 768px) — بطاقات ثابتة أخف حركة:
   Fade Up + Scale(.98 → 1) بمدة 500ms وتسارع Ease-Out، تُشغَّل
   مرة واحدة فقط عند دخول البطاقة الشاشة (بدون بلور، بدون تكرار).
   --------------------------------------------------------- */
@media (max-width: 767px) {
    .scroll-story {
        --story-shift: 14px;
        --story-scale-from: .98;
        --story-blur: 0px;
        --story-dur: .5s;
        --story-ease: cubic-bezier(0, 0, .2, 1); /* ease-out */
    }
    .story-grid { gap: 20px; }
    .story-step { padding: clamp(18px, 5.5vw, 24px); }
    .story-step::before { font-size: 20px; margin-bottom: 8px; }
}

@media (max-width: 560px) {
    .dm-stats { grid-template-columns: repeat(2, 1fr); }
    .product-fields { grid-template-columns: 1fr; }
    .device-mock { transform: none; }
    .device-bar { padding: 11px 12px; gap: 6px; }
    .device-url { font-size: 11px; padding: 4px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-story {
        --story-shift: 0px;
        --story-scale-from: 1;
        --story-blur: 0px;
    }
    .story-step, .device-screen, .dm-chart i, .theme-card, .order-toast, .product-publish .tick {
        transition-duration: .01ms !important;
    }
}