/*
    صفحه‌ی نخستِ shopcore — معرفیِ آرتاشاپ.

    این فایل عمداً از توکن‌های پنل جدا است. پنل یک ابزارِ کارِ روزانه است و
    تراکم می‌خواهد؛ این صفحه یک ویترین است و باید در سه ثانیه بگوید محصول چیست.
    با همان توکن‌ها، صفحه شبیهِ یک فرمِ اداری می‌شد.

    ولی رنگِ خام هم پخش نشده: همه‌چیز از یک لایه‌ی توکنِ محلی می‌آید که هر دو
    حالتِ روشن و تیره را با هم تعریف می‌کند. حالتِ تیره معکوسِ روشن نیست — هر
    جفت جدا انتخاب شده، وگرنه خاکستری‌های میانی به جایی می‌رفتند که متن دیگر
    خوانده نمی‌شود.

    قلم و بازنشانی از admin.css می‌آید که سراسری بار می‌شود؛ اینجا فقط همین یک
    صفحه تعریف شده.
*/

.sl {
    /* ── سطح و متن ─────────────────────────────────────────────────────── */
    --sl-bg: #FFFFFF;
    --sl-surface: #F8FAFC;
    --sl-elevated: #FFFFFF;

    --sl-text: #0B1220;      /* ۱۷:۱ روی سفید */
    --sl-muted: #55607A;     /* ۷:۱ روی سفید */
    --sl-border: #E3E8F0;

    /* ── برند ──────────────────────────────────────────────────────────── */
    --sl-brand: #1D4ED8;
    --sl-brand-strong: #1E3A8A;
    --sl-accent: #F59E0B;
    --sl-on-brand: #FFFFFF;

    /* پس‌زمینه‌ی قهرمان همیشه تیره است، در هر دو حالت: یک ویترین باید یک
       نقطه‌ی ثابتِ تمرکز داشته باشد و جابه‌جا شدنش با تنظیمِ سیستمِ بازدیدکننده،
       هویتِ صفحه را از بین می‌برد. */
    --sl-hero-bg: #070C1A;
    --sl-hero-text: #F8FAFF;
    --sl-hero-muted: #A9B4CE;
    --sl-hero-line: rgba(255, 255, 255, .14);

    --sl-shadow-sm: 0 1px 2px rgba(11, 18, 32, .06);
    --sl-shadow: 0 8px 24px rgba(11, 18, 32, .08);
    --sl-shadow-lg: 0 24px 60px rgba(11, 18, 32, .16);

    --sl-radius: 14px;
    --sl-radius-lg: 22px;

    /* گامِ فاصله — همان گامِ ۴ پیکسلیِ پروژه، فقط بازتر */
    --sl-s2: 8px;
    --sl-s3: 12px;
    --sl-s4: 16px;
    --sl-s5: 24px;
    --sl-s6: 32px;
    --sl-s7: 48px;
    --sl-s8: 72px;
    --sl-s9: 104px;

    --sl-wrap: 1140px;
    --sl-ease: 220ms cubic-bezier(.4, 0, .2, 1);

    color: var(--sl-text);
    background: var(--sl-bg);

    /* ۱۷ پیکسل: این صفحه خوانده می‌شود، نه اسکن. زیرِ ۱۶ پیکسل هم iOS خودش
       زوم می‌کند. */
    font-size: 17px;
    line-height: 1.75;
    overflow-x: hidden;
}

@media (prefers-color-scheme: dark) {
    .sl {
        --sl-bg: #0A0F1E;
        --sl-surface: #0F1729;
        --sl-elevated: #131C31;

        --sl-text: #EEF2FB;
        --sl-muted: #A2AEC6;
        --sl-border: #243049;

        --sl-brand: #7DA2FF;
        --sl-brand-strong: #A9C2FF;

        --sl-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --sl-shadow: 0 8px 24px rgba(0, 0, 0, .45);
        --sl-shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
    }
}

.sl-wrap {
    width: 100%;
    max-width: var(--sl-wrap);
    margin-inline: auto;
    padding-inline: var(--sl-s5);
}

/* ── قهرمان ─────────────────────────────────────────────────────────────── */

.sl-hero {
    position: relative;
    isolation: isolate;
    padding-block: var(--sl-s8) var(--sl-s9);
    background: var(--sl-hero-bg);
    color: var(--sl-hero-text);
    overflow: hidden;
}

/*
    دو هاله‌ی نرم به‌جای یک تصویر: هیچ فایلی بار نمی‌شود، در هر اندازه‌ای تیز
    می‌ماند، و با قاعده‌ی «هیچ منبعِ بیرونی» هم نمی‌جنگد.
*/
.sl-hero::before,
.sl-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .55;
    pointer-events: none;
}

.sl-hero::before {
    inset-block-start: -180px;
    inset-inline-end: -120px;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, #2563EB, transparent 68%);
}

.sl-hero::after {
    inset-block-end: -220px;
    inset-inline-start: -140px;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, #F59E0B, transparent 66%);
    opacity: .38;
}

.sl-hero__grid {
    display: grid;
    gap: var(--sl-s7);
    align-items: center;
}

.sl-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sl-s2);
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sl-hero-text);
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--sl-hero-line);
    border-radius: 999px;
}

.sl-badge__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34D399;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, .18);
}

.sl-title {
    margin: var(--sl-s5) 0 0;
    font-size: clamp(34px, 6vw, 60px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;

    /* سطرها هم‌اندازه می‌شوند و یک کلمه‌ی تنها در خطِ آخر نمی‌ماند. */
    text-wrap: balance;
}

.sl-title__accent {
    background: linear-gradient(90deg, #93C5FD, #FBBF24);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sl-lead {
    margin: var(--sl-s4) 0 0;
    max-width: 46ch;
    font-size: clamp(17px, 2.2vw, 20px);
    color: var(--sl-hero-muted);
}

.sl-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sl-s3);
    margin-block-start: var(--sl-s6);
}

.sl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sl-s2);

    /* ۵۶ پیکسل: این دکمه بیشتر با انگشت زده می‌شود تا با ماوس */
    min-height: 56px;
    padding-inline: var(--sl-s6);

    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 999px;
    transition: transform var(--sl-ease), box-shadow var(--sl-ease), background var(--sl-ease);
}

/*
    دکمه‌ی اصلی آبیِ برند است و نه کهربایی.

    کهربایی در این صفحه یک معنای مشخص دارد: «ثبت شد، حتی آفلاین». وقتی دکمه‌ی
    دانلود هم همان رنگ باشد، آن معنا رقیق می‌شود و chipِ ماکت دیگر چیزی نمی‌گوید
    — یک رنگ که همه‌جا باشد، هیچ‌جا معنا ندارد.
*/
.sl-btn--primary {
    color: var(--sl-on-brand);
    background: linear-gradient(135deg, #2563EB, var(--sl-brand));
    box-shadow: 0 12px 30px rgba(29, 78, 216, .38);
}

.sl-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(29, 78, 216, .48);
}

.sl-btn--ghost {
    color: var(--sl-hero-text);
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--sl-hero-line);
}

.sl-btn--ghost:hover { background: rgba(255, 255, 255, .12); }

.sl-btn:focus-visible {
    outline: 3px solid #FBBF24;
    outline-offset: 3px;
}

.sl-btn__note {
    font-size: 13px;
    font-weight: 500;
    opacity: .8;
}

.sl-hero__meta {
    margin-block-start: var(--sl-s5);
    font-size: 14px;
    color: var(--sl-hero-muted);
}

/* ── ماکتِ گوشی ─────────────────────────────────────────────────────────── */

/*
    با CSS کشیده شده و نه یک تصویر: عکسِ واقعیِ صفحه هنوز نداریم، و یک عکسِ
    قلابی بدتر از یک طرحِ صادقانه است. ضمناً هیچ بایتی هم بار نمی‌شود.
*/
.sl-phone {
    position: relative;
    width: min(300px, 78vw);
    margin-inline: auto;
    padding: 14px;
    background: linear-gradient(160deg, #1B2740, #0C1526);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 38px;
    box-shadow: var(--sl-shadow-lg);
}

.sl-phone__screen {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 16px;
    background: #F6F8FC;
    border-radius: 26px;
    min-height: 420px;
}

.sl-phone__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    color: #64748B;
}

.sl-phone__total {
    margin-block-start: 2px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #1D4ED8, #2563EB);
    border-radius: 16px;
    color: #FFFFFF;
}

.sl-phone__total b {
    display: block;
    font-size: 26px;
    letter-spacing: -.01em;
}

.sl-phone__total span { font-size: 12px; opacity: .85; }

.sl-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 13px;
    background: #FFFFFF;
    border: 1px solid #E7ECF5;
    border-radius: 13px;
    font-size: 13px;
    color: #0B1220;
}

/*
    نقطه‌ی کهربایی «در صف» کنارِ هر فروش. همان رنگی که در chipِ پایانی هم
    هست — یک رنگ، یک معنا.
*/
.sl-row::before {
    content: "";
    position: absolute;
    inset-inline-start: 4px;
    width: 6px;
    height: 6px;
    background: var(--sl-accent);
    border-radius: 50%;
}

.sl-row { position: relative; }

.sl-row__price { font-weight: 700; color: #1D4ED8; }

.sl-chip {
    align-self: flex-start;
    margin-block-start: auto;
    padding: 7px 13px;
    font-size: 12px;
    font-weight: 700;
    color: #7C2D12;
    background: #FEF3C7;
    border: 1px solid #FCD34D;
    border-radius: 999px;
}

/*
    ── چرخه‌ی دوازده‌ثانیه‌ای ──────────────────────────────────────────────

    صحنه‌ی ۱ (۰ تا ~۱۲٪): اینترنت قطع، جمعِ پیش از فروش، ردیف‌ها نیستند. کوتاه
    نگه داشته شده: گوشیِ خالی بیش از یکی دو ثانیه، شبیهِ خرابیِ رندر است نه
    یک صحنه.
    صحنه‌ی ۲ (~۱۲ تا ۵۰٪): سه فروش یکی‌یکی می‌آیند و جمع بالا می‌رود.
    صحنه‌ی ۳ (~۵۰ تا ۱۰۰٪): اینترنت برمی‌گردد و هر سه به بقیه می‌رسند، و
    بیشترِ چرخه روی همین تصویرِ کامل می‌ماند.

    متنِ پایه (بدونِ هیچ انیمیشنی) صحنه‌ی ۳ است — یعنی اسکرین‌شات و
    پیش‌نمایشِ لینک، تصویرِ کاملِ محصول را نشان می‌دهند و نه یک صفحه‌ی نیمه.
*/
.sl-phone__net,
.sl-phone__sum { position: relative; display: inline-block; }

.sl-phone__net--off,
.sl-phone__sum--before {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    white-space: nowrap;
    opacity: 0;
}

.sl-phone__net--off { color: #94A3B8; }

.sl-row,
.sl-chip { animation: slScene 12s ease-in-out infinite; }

.sl-row--a { animation-name: slRowA; }
.sl-row--b { animation-name: slRowB; }
.sl-row--c { animation-name: slRowC; }
.sl-chip { animation-name: slChip; }

.sl-phone__net--on,
.sl-phone__sum--after { animation: slAfter 12s ease-in-out infinite; }

.sl-phone__net--off,
.sl-phone__sum--before { animation: slBefore 12s ease-in-out infinite; }

@keyframes slScene { from { opacity: 1; } to { opacity: 1; } }

@keyframes slRowA {
    0%, 12% { opacity: 0; transform: translateY(6px); }
    18%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes slRowB {
    0%, 24% { opacity: 0; transform: translateY(6px); }
    30%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes slRowC {
    0%, 36% { opacity: 0; transform: translateY(6px); }
    42%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes slChip {
    0%, 52% { opacity: 0; transform: translateY(4px); }
    58%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes slAfter {
    0%, 50% { opacity: 0; }
    58%, 100% { opacity: 1; }
}

@keyframes slBefore {
    0%, 48% { opacity: 1; }
    56%, 100% { opacity: 0; }
}

/* ── نوارِ اعتماد ───────────────────────────────────────────────────────── */

/*
    نوار روی لبه‌ی قهرمان می‌نشیند و باید رویش دیده شود.

    قهرمان position: relative است، پس در لایه‌ی عناصرِ جای‌گرفته می‌کشد و بر
    هر همسایه‌ی ایستا سایه می‌اندازد — حتی اگر بعد از آن بیاید. بدونِ این دو
    خط، سطرِ اولِ هر خانه (همان عددِ درشت) پشتِ قهرمان پنهان می‌ماند و نوار
    نصفه دیده می‌شود.
*/
.sl-strip {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--sl-s4);
    margin-block-start: calc(var(--sl-s8) * -1);
    padding: var(--sl-s5);
    background: var(--sl-elevated);
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius-lg);
    box-shadow: var(--sl-shadow);
}

.sl-strip__item { text-align: center; }

.sl-strip__num {
    display: block;
    font-size: 26px;
    font-weight: 700;
    color: var(--sl-brand);
}

.sl-strip__label {
    font-size: 14px;
    color: var(--sl-muted);
}

/* ── بخش‌ها ─────────────────────────────────────────────────────────────── */

.sl-section { padding-block: var(--sl-s8); }

.sl-section--tint { background: var(--sl-surface); }

.sl-head {
    max-width: 62ch;
    margin-inline: auto;
    margin-block-end: var(--sl-s7);
    text-align: center;
}

.sl-tag {
    display: inline-block;
    margin-block-end: var(--sl-s3);
    font-size: 14px;
    font-weight: 700;
    color: var(--sl-accent);
}

.sl-h2 {
    margin: 0;
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 700;
    line-height: 1.35;
}

.sl-sub {
    margin: var(--sl-s3) 0 0;
    color: var(--sl-muted);
}

/* ── سه لحظه، و «برای چه کسی» ───────────────────────────────────────────── */

.sl-moments {
    display: grid;
    gap: var(--sl-s5);
}

.sl-moment {
    padding: var(--sl-s6);
    background: var(--sl-elevated);
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius);
}

/*
    نقلِ‌قولِ خودِ مغازه‌دار، با خطِ برند در کنارش. عمداً پررنگ‌تر از جواب است:
    خواننده باید اول لحظه را بشناسد، بعد جواب را بخواند.
*/
.sl-moment__quote {
    margin: 0 0 var(--sl-s4);
    padding-inline-start: var(--sl-s4);
    border-inline-start: 3px solid var(--sl-brand);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.7;
}

.sl-moment__who {
    margin: 0 0 var(--sl-s3);
    font-size: 19px;
    font-weight: 700;
}

.sl-moment p { margin: 0; color: var(--sl-muted); }

/* ── چهار ستون ──────────────────────────────────────────────────────────── */

.sl-pillars {
    display: grid;
    gap: var(--sl-s5);
}

.sl-pillar {
    padding: var(--sl-s6);
    background: var(--sl-elevated);
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius);
}

/*
    تنها جایی که دو ستون برابر نیستند: بستنِ صندوق و نمای زنده همان چیزی است که
    هیچ رقیبِ موبایلی ندارد، و در شبکه‌ی مساوی همان‌قدر دیده می‌شد که فروشِ سریع.
*/
.sl-pillar--wide {
    background: color-mix(in srgb, var(--sl-brand) 6%, var(--sl-elevated));
    border-color: color-mix(in srgb, var(--sl-brand) 22%, var(--sl-border));
}

.sl-pillar__title {
    margin: 0 0 var(--sl-s4);
    font-size: 20px;
    font-weight: 700;
}

.sl-pillar__note {
    margin: var(--sl-s4) 0 0;
    padding-block-start: var(--sl-s4);
    border-block-start: 1px solid var(--sl-border);
    color: var(--sl-muted);
    font-size: 15px;
}

/* ── فهرستِ مشترک ───────────────────────────────────────────────────────── */

.sl-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--sl-s3);
    color: var(--sl-muted);
}

/*
    نشانه‌ی فهرست یک تیکِ ساخته‌شده با border است و نه یک نویسه یا SVG: در هر
    اندازه‌ی قلمی تیز می‌ماند و هیچ فایلی هم بار نمی‌کند.
*/
.sl-list li {
    position: relative;
    padding-inline-start: var(--sl-s5);
    line-height: 1.85;
}

.sl-list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 3px;
    inset-block-start: .55em;
    width: 6px;
    height: 11px;

    /* دو ضلع از یک مربع، چرخیده: یک تیکِ واقعی. جهتش در راست‌به‌چپ هم همان
       می‌ماند چون چرخش به جهتِ متن کاری ندارد. */
    border: solid var(--sl-brand);
    border-width: 0 2px 2px 0;
    transform: rotate(40deg);
}

.sl-list b { color: var(--sl-text); }

/* ── گروه‌های امکانات ───────────────────────────────────────────────────── */

.sl-groups {
    display: grid;
    gap: var(--sl-s6) var(--sl-s7);
}

/*
    گروه‌ها کارتِ سایه‌دار نیستند: کارت برای چیزی است که باید انتخاب شود و اینجا
    هیچ انتخابی در کار نیست. یک خطِ بالایی و عنوان کافی است.
*/
.sl-group {
    padding-block-start: var(--sl-s4);
    border-block-start: 2px solid var(--sl-brand);
}

.sl-group__title {
    margin: 0 0 var(--sl-s4);
    font-size: 17px;
    font-weight: 700;
}

/* ── جدولِ مقایسه ───────────────────────────────────────────────────────── */

.sl-tablewrap {
    overflow-x: auto;
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius);
    background: var(--sl-elevated);
}

.sl-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 15px;
}

.sl-table th,
.sl-table td {
    padding: var(--sl-s3) var(--sl-s4);
    text-align: center;
    border-block-end: 1px solid var(--sl-border);
    color: var(--sl-muted);
}

.sl-table thead th {
    font-size: 14px;
    color: var(--sl-text);
    background: var(--sl-surface);
}

.sl-table tbody th {
    text-align: start;
    font-weight: 600;
    color: var(--sl-text);
    white-space: nowrap;
}

/*
    ستونِ خودمان در موبایل می‌چسبد: با اسکرولِ افقی، خواننده فراموش می‌کند کدام
    ستون کدام است و جدول به یک شبکه‌ی بی‌معنا تبدیل می‌شود.
*/
.sl-table__mine {
    position: sticky;
    inset-inline-end: 0;
    font-weight: 700;
    color: var(--sl-text);
    background: color-mix(in srgb, var(--sl-brand) 8%, var(--sl-elevated));
}

.sl-table thead .sl-table__mine {
    background: color-mix(in srgb, var(--sl-brand) 16%, var(--sl-surface));
}

/* ── تعهدها ─────────────────────────────────────────────────────────────── */

.sl-promises {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--sl-s4);
}

.sl-promises li {
    padding: var(--sl-s5);
    background: var(--sl-elevated);
    border: 1px solid var(--sl-border);
    border-inline-start: 3px solid var(--sl-brand);
    border-radius: var(--sl-radius);
    color: var(--sl-muted);
}

.sl-promises b { color: var(--sl-text); }

/* ── طرح‌ها ─────────────────────────────────────────────────────────────── */

.sl-plans {
    display: grid;
    gap: var(--sl-s5);
}

/*
    موتیفِ رسیدِ حرارتی: لبه‌ی دندانه‌دارِ پایینِ کارت. همان شیئی که مغازه‌دار هر
    روز در دست دارد — و تنها تزیینِ صفحه که معنا هم دارد.
*/
.sl-plan {
    position: relative;
    padding: var(--sl-s6) var(--sl-s6) var(--sl-s7);
    background: var(--sl-elevated);
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius) var(--sl-radius) 0 0;
    box-shadow: var(--sl-shadow-sm);
    text-align: center;
    -webkit-mask-image: radial-gradient(circle at 8px 100%, transparent 7px, #000 8px);
    mask-image: radial-gradient(circle at 8px 100%, transparent 7px, #000 8px);
    -webkit-mask-size: 16px 100%;
    mask-size: 16px 100%;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
}

.sl-plan--featured {
    border-color: var(--sl-brand);
    box-shadow: var(--sl-shadow);
}

.sl-plan__flag {
    display: inline-block;
    margin-block-end: var(--sl-s3);
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--sl-on-brand);
    background: var(--sl-brand);
    border-radius: 999px;
}

.sl-plan__name {
    margin: 0 0 var(--sl-s2);
    font-size: 22px;
    font-weight: 700;
}

.sl-plan__devices {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    color: var(--sl-brand);
}

.sl-plan__hint,
.sl-plan__price {
    margin: var(--sl-s2) 0 0;
    color: var(--sl-muted);
    font-size: 15px;
}

.sl-plans__note {
    margin: var(--sl-s5) 0 0;
    text-align: center;
    color: var(--sl-muted);
}

/* ── در راه ─────────────────────────────────────────────────────────────── */

.sl-next {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--sl-s3);
}

/*
    خط‌چین و نه خطِ پر: چشم همان‌جا می‌فهمد این‌ها هنوز ساخته نشده‌اند، پیش از
    آنکه زیرتیتر را بخواند.
*/
.sl-next li {
    padding: var(--sl-s4) var(--sl-s5);
    border: 1px dashed var(--sl-border);
    border-radius: var(--sl-radius);
    color: var(--sl-muted);
}

/* ── پرسش‌ها ────────────────────────────────────────────────────────────── */

.sl-faq {
    display: grid;
    gap: var(--sl-s3);
}

.sl-faq__item {
    background: var(--sl-elevated);
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius);
}

.sl-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sl-s4);
    padding: var(--sl-s4) var(--sl-s5);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.sl-faq__item summary::-webkit-details-marker { display: none; }

/*
    نشانه‌ی باز و بسته با CSS ساخته می‌شود. بدونش، details روی بعضی مرورگرها
    هیچ نشانه‌ای ندارد و کاربر نمی‌فهمد می‌شود بازش کرد.
*/
.sl-faq__item summary::after {
    content: "+";
    font-size: 22px;
    line-height: 1;
    color: var(--sl-brand);
}

.sl-faq__item[open] summary::after { content: "−"; }

.sl-faq__item p {
    margin: 0;
    padding: 0 var(--sl-s5) var(--sl-s5);
    color: var(--sl-muted);
}

/* ── همکاری ─────────────────────────────────────────────────────────────── */

.sl-partner__text {
    margin: 0;
    font-size: 18px;
    line-height: 1.9;
}

.sl-partner__contact { margin: var(--sl-s5) 0 0; }

/* ── گام‌ها ─────────────────────────────────────────────────────────────── */

.sl-steps {
    counter-reset: sl-step;
    display: grid;
    gap: var(--sl-s5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sl-steps li {
    position: relative;
    padding-inline-start: 60px;
}

/* شماره‌ها فارسی، مثل هر عددِ دیگری در این محصول */
.sl-steps li::before {
    counter-increment: sl-step;
    content: counter(sl-step, persian);
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 19px;
    font-weight: 700;
    color: var(--sl-on-brand);
    background: linear-gradient(135deg, var(--sl-brand), var(--sl-brand-strong));
    border-radius: 14px;
}

.sl-steps b { display: block; }
.sl-steps p { margin: 2px 0 0; color: var(--sl-muted); }

/* ── نکته‌ی نصب ─────────────────────────────────────────────────────────── */

.sl-note {
    max-width: 72ch;
    margin-inline: auto;
    padding: var(--sl-s5);
    background: var(--sl-elevated);
    border: 1px solid var(--sl-border);
    border-inline-start: 4px solid var(--sl-accent);
    border-radius: var(--sl-radius);
}

.sl-note h3 { margin: 0 0 var(--sl-s2); font-size: 18px; }
.sl-note p { margin: 0; color: var(--sl-muted); }

/* ── فراخوانِ پایانی ────────────────────────────────────────────────────── */

.sl-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--sl-s8) var(--sl-s5);
    text-align: center;
    background: linear-gradient(135deg, #0B1220, #16274A);
    color: #FFFFFF;
    border-radius: var(--sl-radius-lg);
}

.sl-cta h2 {
    margin: 0 0 var(--sl-s3);
    font-size: clamp(24px, 3.6vw, 34px);
}

.sl-cta p {
    margin: 0 auto var(--sl-s6);
    max-width: 52ch;
    color: #B7C2DA;
}

/* ── پابرگ ──────────────────────────────────────────────────────────────── */

.sl-foot {
    padding-block: var(--sl-s6);
    border-block-start: 1px solid var(--sl-border);
    color: var(--sl-muted);
    font-size: 14px;
}

.sl-foot__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sl-s4);
    align-items: center;
    justify-content: space-between;
}

.sl-foot a {
    color: var(--sl-brand);
    text-decoration: none;
}

.sl-foot a:hover { text-decoration: underline; }

.sl-foot a:focus-visible {
    outline: 2px solid var(--sl-brand);
    outline-offset: 3px;
    border-radius: 4px;
}


/* ── صفحه‌های صنفی ─────────────────────────────────────────────────────── */

/* متنِ گروهی که فهرست نیست — «آنچه منتقل نمی‌شود» نباید تیک بخورد. */
.sl-group__note {
    margin: 0;
    color: var(--sl-muted);
    line-height: 1.85;
}

.sl-link {
    color: var(--sl-brand);
    text-decoration: none;
}

.sl-link:hover { text-decoration: underline; }

.sl-link:focus-visible {
    outline: 2px solid var(--sl-brand);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── خرده‌کاری‌های چیدمان ────────────────────────────────────────────────── */

/*
    پرشِ به محتوا برای کسی که با صفحه‌کلید یا صفحه‌خوان می‌آید. تا وقتی فوکوس
    نگرفته دیده نمی‌شود، ولی حذفش یعنی هر بازدید با پیمودنِ کلِ ناوبریِ قهرمان
    شروع شود.
*/
.sl-skip {
    position: absolute;
    inset-inline-start: -9999px;
    z-index: 2;
    padding: var(--sl-s3) var(--sl-s4);
    background: var(--sl-brand);
    color: var(--sl-on-brand);
    border-radius: 0 0 var(--sl-radius) 0;
}

.sl-skip:focus-visible { inset-inline-start: 0; }

/* بخش‌هایی که متنِ خواندنی دارند، نه شبکه: عرضِ کوتاه‌تر یعنی سطرِ کوتاه‌تر. */
.sl-wrap--narrow { max-width: 820px; }

/*
    شمارنده‌ی مغازه‌ها زیرِ نوارِ اعتماد و ریز: تا وقتی عددش خودش استدلال نشده،
    اصلاً رندر نمی‌شود؛ و وقتی شد، نباید از خودِ نوار بلندتر به نظر برسد.
*/
.sl-strip__proof {
    margin: var(--sl-s4) 0 0;
    text-align: center;
    color: var(--sl-muted);
    font-size: 14px;
}

.sl-foot__contact { margin: var(--sl-s2) 0 0; }

.sl-foot__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sl-s4);
}

.sl-foot__admin { font-size: 13px; opacity: .75; }

/* ── واکنش‌گرایی ────────────────────────────────────────────────────────── */

/*
    موبایل حالتِ پایه است چون بیشترِ بازدیدها از گوشی می‌آید، ولی صفحه روی
    دسکتاپ رها نشده: از ۷۲۰ پیکسل ستون‌ها باز می‌شوند و از ۱۰۲۴ قهرمان دوستونی
    می‌شود و ماکت کنارِ متن می‌نشیند.
*/
@media (min-width: 720px) {
    .sl-strip { grid-template-columns: repeat(4, 1fr); }
    .sl-steps { grid-template-columns: repeat(3, 1fr); }
    .sl-moments { grid-template-columns: repeat(3, 1fr); }
    .sl-groups { grid-template-columns: repeat(2, 1fr); }
    .sl-plans { grid-template-columns: repeat(3, 1fr); }
    .sl-pillars { grid-template-columns: repeat(2, 1fr); }
    .sl-wrap { padding-inline: var(--sl-s6); }
}

@media (min-width: 1024px) {
    .sl-hero { padding-block: var(--sl-s9) calc(var(--sl-s9) + var(--sl-s6)); }

    .sl-hero__grid {
        grid-template-columns: 1.08fr .92fr;
        gap: var(--sl-s8);
    }

    .sl-groups { grid-template-columns: repeat(3, 1fr); }

    /*
        ستونِ «چشمتان در مغازه» تمامِ عرض را می‌گیرد: مهم‌ترین تمایزِ محصول
        نباید هم‌اندازه‌ی بقیه دیده شود.
    */
    .sl-pillar--wide { grid-column: 1 / -1; }

    /* هرگز از ستونِ خودش پهن‌تر نمی‌شود: min با ۱۰۰٪ یعنی در هیچ عرضی سرریز
       نمی‌کند، حتی اگر ستون باریک‌تر از ۳۲۰ شود. */
    .sl-phone { width: min(320px, 100%); margin-inline: 0 auto; }
}

/* ── حرکت ───────────────────────────────────────────────────────────────── */

/*
    حرکتِ کمتر یعنی صحنه‌ی پایانی، ثابت.

    نه «بدونِ انیمیشن با صحنه‌ی اول»: کسی که حرکت را خاموش کرده باید همان
    تصویرِ کاملی را ببیند که بقیه در ثانیه‌ی دوازدهم می‌بینند — سه فروشِ ثبت‌شده
    و پیامِ رسیدنشان.
*/
@media (prefers-reduced-motion: reduce) {
    .sl-row,
    .sl-chip,
    .sl-phone__net--on,
    .sl-phone__sum--after {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .sl-phone__net--off,
    .sl-phone__sum--before { animation: none; opacity: 0; }

    .sl-btn { transition: none; }

    .sl-btn--primary:hover { transform: none; }
}