/* ==========================================================================
   جشن دلار ۶۰ هزار تومانی — اینوست پراپ
   صفحه مستقل است، پس این فایل مالک کل سند است و سلکتورها عمداً اسکوپ ندارند.

   سیستم رنگ: طلایی = لهجهٔ کمپین (قیمت و CTA اصلی)
              آبی   = رنگ ساختاری (لینک، تب، دکمهٔ ثانویه)
              سبز/قرمز = فقط معنای بازار (نمودار، صرفه‌جویی، افت)
   ========================================================================== */

/* ===== 1. tokens ========================================================== */

:root {
    /* ---- پایه‌های وارونه‌شونده ------------------------------------------
       تمام پوشش‌های نیم‌شفافِ صفحه به‌جای rgba(255,255,255,α) و rgba(0,0,0,α)
       از این دو کانال می‌آیند. تم روشن فقط همین‌ها را عوض می‌کند و هر ۱۰۰
       جای دیگر خودبه‌خود می‌چرخد:
         --sheen  رنگِ «نورِ روی سطح» (در تم تیره سفید، در تم روشن جوهرِ سبز)
         --shade  رنگِ سایه
         --mix-lift/--mix-sink  دو سرِ color-mix برای روشن/تیره کردن یک hue */
    --sheen: 255, 255, 255;
    --shade: 0, 0, 0;
    --mix-lift: #fff;
    --mix-sink: #000;

    /* همان سه رنگ پایه، به شکل کانالی، برای جاهایی که آلفا لازم است */
    --bg-rgb: 7, 11, 10;
    --surface-rgb: 12, 18, 17;
    --accent-rgb: 94, 210, 156;

    /* ---- شدت «پردهٔ رنگی» -------------------------------------------------
       هر جای صفحه که پس‌زمینه‌اش ‎color-mix(--hue N%, transparent)‎ است از این
       پله‌ها می‌آید. روی زمینهٔ تیره، رنگِ روشنِ hue با آلفای کم «درخشش» است؛
       روی کاغذ سفید همان عدد، چون hue تیره است، یک لکهٔ پاستلی پررنگ می‌شود.
       پس تم روشن همین شش عدد را تقریباً نصف می‌کند و کل صفحه با آن آرام
       می‌گیرد — بدون آنکه لازم باشد ۲۳ قانون جداگانه بازنویسی شود. */
    --veil-xs: 5%;
    --veil-sm: 8%;
    --veil-md: 11%;
    --veil-lg: 14%;
    --veil-xl: 18%;
    --veil-2xl: 26%;

    /* پالت رفرنس CodeNest: پس‌زمینهٔ تقریباً مشکیِ سبز + لهجهٔ نعنایی */
    --bg: #070B0A;
    --surface-1: #0C1211;
    --surface-2: #111917;
    --border: rgba(var(--sheen), 0.10);
    --border-2: rgba(var(--sheen), 0.20);

    /* text ramp */
    --text: #FFFFFF;
    --text-2: rgba(var(--sheen), 0.70);
    --text-3: rgba(var(--sheen), 0.45);

    /* لهجهٔ اصلی — همان #5ed29c رفرنس */
    --accent: #5ED29C;
    --accent-2: #8FE3BC;
    --accent-3: #3FA97A;
    --accent-ink: #070B0A;
    --accent-soft: rgba(var(--accent-rgb), 0.12);

    /* لهجهٔ ثانویه — فقط برای «امکانات» و «مراحل» تا صفحه تک‌رنگ نباشد */
    --accent-alt: #6FC3E0;
    --accent-alt-soft: rgba(111, 195, 224, 0.12);

    /* ---- پالت چندرنگ ----------------------------------------------------
       نعنایی همچنان رنگ برند و همه‌ی CTAهاست؛ این‌ها فقط به کاشی آیکون،
       عدد بزرگ و کیکر هر بخش می‌نشینند تا صفحه یک‌دست سبز نباشد.
       هر بخش/کارت با ‎--hue‎ رنگ خودش را می‌گیرد و بقیه‌ی استایل مشترک است. */
    --h-mint: #5ED29C;
    --h-blue: #6AA6FF;
    --h-amber: #F7B84B;
    --h-coral: #FF7D68;
    --h-violet: #A98BFF;

    /* رنگ فعال جاری — سکشن یا کارت بازنویسی‌اش می‌کند */
    --hue: var(--h-mint);

    /* پله‌های پس‌زمینهٔ بخش‌ها: تفاوت باید حس شود، نه دیده شود */
    --tint-0: #070B0A;
    --tint-1: #090E0D;
    --tint-2: #0B1211;
    --tint-accent: #071310;

    /* توکن‌های قدیمی به لهجهٔ جدید نگاشت می‌شوند تا بقیهٔ فایل دست‌نخورده بماند */
    --brand-300: var(--accent-2);
    --brand-400: var(--accent);
    --brand-500: var(--accent-3);
    --brand-600: #2E8760;
    --brand-soft: var(--accent-soft);

    --gold-100: #EAFFF5;
    --gold-200: #C6F3DE;
    --gold-300: var(--accent-2);
    --gold-400: var(--accent);
    --gold-500: var(--accent-3);
    --gold-600: #2E8760;
    --gold-ink: var(--accent-ink);
    --gold-soft: var(--accent-soft);

    /* معنا */
    --pos: var(--accent);
    --pos-soft: var(--accent-soft);
    --neg: #E8836F;
    --neg-soft: rgba(232, 131, 111, 0.12);

    /* radii — رفرنس گرد و نرم است */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-pill: 999px;

    /* elevation */
    --e1: 0 1px 2px rgba(var(--shade), 0.5);
    --e2: 0 10px 30px rgba(var(--shade), 0.45);
    --e3: 0 28px 70px rgba(var(--shade), 0.6);

    /* motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --t-fast: 160ms;
    --t-base: 240ms;
    --t-slow: 380ms;

    /* layout */
    --shell: 1200px;
    --nav-h: 76px;

    /* z-scale */
    --z-scene: 0;
    --z-page: 1;
    --z-nav: 40;
    --z-dock: 50;
    --z-menu: 80;
    --z-boot: 100;
}

/* ===== 1b. تم روشن =========================================================
   تم با ‎data-theme="light"‎ روی ‎<html>‎ سوار می‌شود (اسکریپت کوچکِ داخل
   ‎<head>‎ آن را پیش از اولین رنگ‌آمیزی می‌گذارد تا پرشِ سفید/سیاه نبینیم).

   اینجا فقط توکن عوض می‌شود، نه سلکتور: چون کل فایل پوشش‌هایش را از
   ‎--sheen/--shade/--bg-rgb/--surface-rgb/--accent-rgb‎ می‌گیرد، وارونه‌کردن
   همین چند خط، هر سایه و هر هایلایتِ صفحه را با خودش می‌چرخاند. استثناها —
   ویدیوی هیرو، شیشه، هالهٔ blend و چند مورد دیگر — در بخش ۲۸ می‌آیند.

   رنگ‌های لهجه در این تم تیره‌ترند: نعنایی ‎#5ED29C‎ روی سفید نسبت کنتراست
   ۱.۷ دارد و برای متن غیرقابل‌استفاده است؛ همهٔ hueها به نسخه‌ای رفته‌اند که
   روی ‎#FFFFFF‎ دست‌کم ۴.۵ به ۱ بدهند. */

html[data-theme="light"] {
    --sheen: 7, 19, 16;
    --shade: 12, 42, 33;
    --mix-lift: #0A1512;
    --mix-sink: #FFFFFF;

    --bg: #F5F9F7;
    --bg-rgb: 245, 249, 247;
    --surface-1: #FFFFFF;
    --surface-2: #EFF5F1;
    --surface-rgb: 255, 255, 255;
    --border: rgba(7, 19, 16, 0.12);
    --border-2: rgba(7, 19, 16, 0.22);

    /* پرده‌ها روی کاغذ سفید تقریباً نصف می‌شوند — دلیلش بالای بلوک ‎:root‎ است */
    --veil-xs: 2.5%;
    --veil-sm: 4%;
    --veil-md: 5.5%;
    --veil-lg: 7%;
    --veil-xl: 9%;
    --veil-2xl: 10%;

    /* متن فرعی روی کاغذ باید تیره‌تر از معادل تیره‌اش باشد: پس‌زمینهٔ کارت‌ها
       اینجا خودش یک پردهٔ رنگی دارد و خاکستری کم‌رمق زیرش گم می‌شود */
    --text: #071310;
    --text-2: rgba(7, 19, 16, 0.80);
    --text-3: rgba(7, 19, 16, 0.70);

    --accent: #0B7A53;
    --accent-2: #095F41;
    --accent-3: #0E9464;
    --accent-ink: #FFFFFF;
    --accent-rgb: 11, 122, 83;
    --accent-soft: rgba(11, 122, 83, 0.10);

    --accent-alt: #1B7FA8;
    --accent-alt-soft: rgba(27, 127, 168, 0.12);

    --h-mint: #0B7A53;
    --h-blue: #1D5FD8;
    --h-amber: #96600A;
    --h-coral: #C03A24;
    --h-violet: #6236C9;

    --tint-0: #F5F9F7;
    --tint-1: #FFFFFF;
    --tint-2: #F0F6F2;
    --tint-accent: #ECF7F1;

    --brand-600: #075F3F;
    --gold-100: #04331F;
    --gold-200: #075F3F;
    --gold-600: #075F3F;

    --neg: #C0392B;
    --neg-soft: rgba(192, 57, 43, 0.12);

    /* سایه‌ها روی زمینهٔ روشن باید نازک‌تر باشند وگرنه کارت‌ها کثیف می‌شوند */
    --e1: 0 1px 2px rgba(12, 42, 33, 0.08);
    --e2: 0 10px 30px rgba(12, 42, 33, 0.10);
    --e3: 0 28px 70px rgba(12, 42, 33, 0.14);
}

/* ===== 2. base ============================================================ */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body.df-body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: yekanbakh, Tahoma, sans-serif;
}

/* نسخهٔ انگلیسی: Inter پایه است، نه فونت فارسی */
html[dir="ltr"] body.df-body {
    font-family: Inter, 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.75;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.df-nav-open { overflow: hidden; }

h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.4; letter-spacing: -0.01em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
table { border-collapse: collapse; }

/* اعداد پول همیشه با ارقام هم‌عرض تا ستون‌ها نلرزند */
.df-num {
    font-family: dana, yekanbakh, sans-serif;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    direction: ltr;
    unicode-bidi: isolate;
}

.df-en { font-family: Poppins, dana, sans-serif; direction: ltr; unicode-bidi: isolate; }

.df-shell { width: min(100% - 32px, var(--shell)); margin-inline: auto; }

:where(a, button, [tabindex]):focus-visible {
    outline: 2px solid var(--brand-400);
    outline-offset: 3px;
    border-radius: 6px;
}

.df-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ===== 3. icons =========================================================== */

.df-i {
    width: 20px;
    height: 20px;
    flex: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.df-i--sm { width: 16px; height: 16px; }
.df-i--lg { width: 24px; height: 24px; }

/* ===== 4. ambience ======================================================== */

.df-backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(1000px 560px at 78% -10%, rgba(var(--accent-rgb), 0.20), transparent 60%),
        radial-gradient(760px 460px at 10% 6%, rgba(var(--accent-rgb), 0.09), transparent 60%),
        radial-gradient(900px 600px at 50% 106%, rgba(var(--accent-rgb), 0.10), transparent 62%),
        var(--bg);
}

.df-backdrop::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(var(--sheen), 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--sheen), 0.05) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 85% 65% at 50% 25%, #000 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 85% 65% at 50% 25%, #000 30%, transparent 100%);
}

.df-page { position: relative; z-index: var(--z-page); }

/* ===== 5. scroll progress ================================================= */

.df-progress {
    position: fixed;
    inset-inline: 0;
    top: 0;
    height: 2px;
    z-index: calc(var(--z-nav) + 1);
    background: linear-gradient(90deg, var(--gold-400), var(--brand-400));
    transform: scaleX(0);
    transform-origin: right center;
    pointer-events: none;
}

/* ===== 6. logo ============================================================
   لوگوی وکتوری اینوست پراپ — از logofes.png تریس شده و جای آن را گرفته است.
   هر حرف و هر تکهٔ نشان مسیر مستقل دارد تا لودر بتواند مرحله‌به‌مرحله بسازدش.
   رنگ‌ها عمداً از متغیر می‌آیند نه fill ثابت، تا همین یک فایل روی هدر (زمینهٔ
   تیره) و لودر و هر جای دیگری بنشیند.
   ========================================================================== */

.df-logo { display: block; width: 100%; height: auto; overflow: visible; }

.df-logo__shard,
.df-logo__dollar,
.df-logo__word .df-logo__ch { fill: var(--accent); }

/* «prop» و تیغهٔ گوشهٔ نشان یک پله روشن‌ترند — همان تضاد لوگوی اصلی */
.df-logo__flare,
.df-logo__word--alt .df-logo__ch { fill: var(--accent-2); }

/* نشانِ هدر: با هوور، دلار نفس می‌کشد */
.df-nav__brand .df-logo { width: clamp(124px, 26vw, 152px); }

.df-nav__brand .df-logo__dollar,
.df-nav__brand .df-logo__flare {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform var(--t-slow) var(--ease-out), fill var(--t-base) linear;
}

.df-nav__brand:hover .df-logo__dollar { transform: scale(1.14); fill: var(--accent-2); }
.df-nav__brand:hover .df-logo__flare { transform: translate(3%, -8%); }

/* ===== 6b. boot ===========================================================
   لودر لوگو را جلوی چشم می‌سازد: نشان کشیده می‌شود، دلار نبض می‌زند، حرف‌ها
   بالا می‌آیند و نرخ روی عدد جشنواره قفل می‌شود. زمان‌بندی اینجاست و JS فقط
   عدد را می‌شمارد — پس اگر یکی را عوض کردی، runBoot در جاوااسکریپت را هم ببین.
   ========================================================================== */

.df-boot {
    position: fixed;
    inset: 0;
    z-index: var(--z-boot);
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 20px;
    background: var(--bg);
    overflow: hidden;
    transition: opacity 0.6s var(--ease-out), visibility 0.6s var(--ease-out);
    /* تور ایمنی: اگر جاوااسکریپت نرسید لودر را بردارد، خودش کنار می‌رود */
    animation: df-boot-failsafe 0.5s linear 8s forwards;
}

@keyframes df-boot-failsafe { to { opacity: 0; visibility: hidden; } }

/* هالهٔ ملایم پشت لوگو تا صفحه یک‌دست مشکی نباشد */
.df-boot::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(620px 340px at 50% 44%, rgba(var(--accent-rgb), 0.13), transparent 70%);
}

.df-boot.is-done { opacity: 0; visibility: hidden; }
.df-boot.is-done .df-boot__stage { transform: scale(1.06); filter: blur(6px); }

/* --- بارش دلار (پشت همه چیز) --- */

.df-boot__rain {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    /* وسط قاب خالی می‌ماند تا دلارها روی لوگو و عدد نیفتند */
    mask-image: radial-gradient(closest-side circle at 50% 46%, transparent 0 34%, #000 78%);
    -webkit-mask-image: radial-gradient(closest-side circle at 50% 46%, transparent 0 34%, #000 78%);
}

.df-boot__rain span {
    position: absolute;
    top: -12%;
    font-family: Inter, Poppins, sans-serif;
    font-size: clamp(14px, 2.6vw, 26px);
    font-weight: 800;
    color: var(--accent);
    opacity: 0;
    animation: df-boot-rain 5s linear infinite;
}

/* زمان و مدت هر دلار عمداً نامنظم است؛ با فاصله‌های مساوی، بارش به یک خط
   مورب و ماشینی تبدیل می‌شد */
.df-boot__rain span:nth-child(1) { left:  7%; animation-duration: 5.4s; animation-delay: -2.9s; }
.df-boot__rain span:nth-child(2) { left: 17%; animation-duration: 6.6s; animation-delay: -0.6s; }
.df-boot__rain span:nth-child(3) { left: 27%; animation-duration: 4.9s; animation-delay: -4.1s; color: var(--accent-alt); font-size: 15px; }
.df-boot__rain span:nth-child(4) { left: 38%; animation-duration: 7.2s; animation-delay: -1.9s; }
.df-boot__rain span:nth-child(5) { left: 49%; animation-duration: 5.8s; animation-delay: -3.4s; font-size: 15px; }
.df-boot__rain span:nth-child(6) { left: 60%; animation-duration: 6.1s; animation-delay: -0.2s; color: var(--accent-2); }
.df-boot__rain span:nth-child(7) { left: 71%; animation-duration: 4.6s; animation-delay: -2.2s; }
.df-boot__rain span:nth-child(8) { left: 83%; animation-duration: 6.9s; animation-delay: -5.1s; font-size: 15px; }
.df-boot__rain span:nth-child(9) { left: 92%; animation-duration: 5.1s; animation-delay: -1.2s; color: var(--accent-alt); }

@keyframes df-boot-rain {
    0%   { opacity: 0;    transform: translateY(0) rotate(-8deg); }
    14%  { opacity: 0.34; }
    86%  { opacity: 0.34; }
    100% { opacity: 0;    transform: translateY(116vh) rotate(8deg); }
}

/* --- صحنهٔ لوگو --- */

.df-boot__stage {
    position: relative;
    width: min(78vw, 380px);
    transition: transform 0.6s var(--ease-out), filter 0.6s var(--ease-out);
}

/* درخشش کوتاه وقتی لوگو کامل شد */
.df-boot__logo { animation: df-boot-glow 1.1s var(--ease-out) 1.55s; }

@keyframes df-boot-glow {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(var(--accent-rgb), 0)); }
    45%      { filter: drop-shadow(0 0 26px rgba(var(--accent-rgb), 0.45)); }
}

/* تکه‌های نشان و دلار: اول دور شکل خط کشیده می‌شود، بعد رنگ می‌گیرد و خط محو
   می‌شود. pathLength=100 روی مسیرها هست، پس dasharray مستقل از طول واقعی است. */
.df-boot__logo .df-logo__shard,
.df-boot__logo .df-logo__dollar {
    fill-opacity: 0;
    stroke: var(--accent);
    stroke-width: 2.4;
    stroke-linejoin: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation:
        df-boot-draw 0.9s var(--ease-out) var(--d) forwards,
        df-boot-fill 0.5s var(--ease-out) calc(var(--d) + 0.55s) forwards,
        df-boot-unstroke 0.45s linear calc(var(--d) + 0.8s) forwards;
}

.df-boot__logo .df-logo__shard { --d: calc(var(--i) * 0.14s); }
.df-boot__logo .df-logo__dollar { --d: 0.5s; stroke: var(--text); }

.df-boot__logo .df-logo__flare {
    opacity: 0;
    animation: df-boot-flare 0.6s var(--ease-out) 1s forwards;
}

@keyframes df-boot-draw { to { stroke-dashoffset: 0; } }
@keyframes df-boot-fill { to { fill-opacity: 1; } }
@keyframes df-boot-unstroke { to { stroke-opacity: 0; } }

@keyframes df-boot-flare {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* حرف‌ها یکی‌یکی از پایین بالا می‌آیند — --i را خود مسیر در بلید می‌آورد */
.df-boot__logo .df-logo__ch {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transform: translateY(18px) scale(0.92);
    animation: df-boot-ch 0.6s var(--ease-out) calc(1.05s + var(--i) * 0.05s) forwards;
}

@keyframes df-boot-ch { to { opacity: 1; transform: none; } }

/* حلقه‌هایی که از نماد دلار بیرون می‌زنند؛ مختصات روی مرکز همان نماد است */
.df-boot__pulse {
    position: absolute;
    left: 9.4%;
    top: 52%;
    width: 13%;
    aspect-ratio: 1;
    border: 2px solid var(--accent);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.35);
    animation: df-boot-pulse 1.5s var(--ease-out) 1.15s forwards;
}

.df-boot__pulse--late {
    animation-delay: 1.55s;
    border-color: var(--accent-2);
}

@keyframes df-boot-pulse {
    0%   { opacity: 0.9;  transform: translate(-50%, -50%) scale(0.35); }
    70%  { opacity: 0.12; }
    100% { opacity: 0;    transform: translate(-50%, -50%) scale(2.6); }
}

/* --- نرخ و نوار پیشرفت --- */

.df-boot__rate {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: Inter, sans-serif;
    font-size: clamp(30px, 6vw, 44px);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
    opacity: 0;
    animation: df-boot-in 0.55s var(--ease-out) 0.85s forwards;
}

.df-boot__old {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-3);
    text-decoration-color: var(--neg);
}

.df-boot__unit { font-family: yekanbakh, sans-serif; font-size: 13px; font-weight: 400; color: var(--text-3); }

.df-boot__caption {
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--accent);
    opacity: 0;
    animation: df-boot-in 0.55s var(--ease-out) 1.2s forwards;
}

@keyframes df-boot-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.df-boot__bar {
    width: 168px;
    height: 2px;
    border-radius: 2px;
    background: rgba(var(--sheen), 0.09);
    overflow: hidden;
}

.df-boot__bar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transform: scaleX(0);
    transform-origin: left center;
    animation: df-boot-bar 2.2s var(--ease-in-out) forwards;
}

/* در RTL نوار باید از سمت شروعِ خواندن پر شود */
html[dir="rtl"] .df-boot__bar i { transform-origin: right center; }

@keyframes df-boot-bar { to { transform: scaleX(1); } }

/* ===== 7. buttons ========================================================= */

.df-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
    white-space: nowrap;
    transition: background var(--t-base) ease, border-color var(--t-base) ease, color var(--t-base) ease;
}

/* برق روی دکمه — با هاور یک‌بار از این سر به آن سر می‌رود */
.df-btn::after,
.df-cta::after {
    content: "";
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: -60%;
    width: 45%;
    transform: skewX(-18deg) translateX(-160%);
    background: linear-gradient(90deg, transparent, rgba(var(--sheen), 0.32), transparent);
    pointer-events: none;
}

.df-btn:hover::after,
.df-cta:hover::after { animation: df-shine 780ms var(--ease-out); }

@keyframes df-shine {
    from { transform: skewX(-18deg) translateX(-160%); }
    to   { transform: skewX(-18deg) translateX(560%); }
}

.df-btn--primary { background: var(--accent); color: var(--accent-ink); }
.df-btn--primary:hover { background: var(--accent-2); }

.df-btn--secondary {
    background: transparent;
    border-color: var(--border-2);
    color: var(--text);
}

.df-btn--secondary:hover { border-color: var(--accent); color: var(--accent); }

.df-btn--ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--text-2);
}

.df-btn--ghost:hover { border-color: var(--border-2); color: var(--text); }

.df-btn--sm { min-height: 40px; padding: 0 18px; font-size: 12px; }
.df-btn--lg { min-height: 52px; padding: 0 30px; font-size: 14px; }
.df-btn--block { width: 100%; }
.df-btn--copied { background: var(--accent-2); color: var(--accent-ink); }

/* ===== 8. nav ============================================================= */

.df-nav {
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    padding: 14px 0;
    background: transparent;
}

/* کپسول شناور — از لبه‌های صفحه جدا است و روی اسکرول سطح می‌گیرد */
.df-nav__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(100% - 32px, var(--shell));
    height: 60px;
    margin-inline: auto;
    padding-inline: 14px;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    transition: background var(--t-base) ease,
                border-color var(--t-base) ease,
                backdrop-filter var(--t-base) ease;
}

.df-nav.is-stuck .df-nav__bar {
    background: rgba(var(--bg-rgb), 0.82);
    border-color: var(--border);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.df-nav__brand { display: flex; align-items: center; padding-inline: 6px; }
/* لوگو حالا SVG است و اندازه‌اش در بخش ۶ تعریف شده؛ این خط برای هر <img> باقی‌مانده است */
.df-nav__brand img { height: 26px; width: auto; }

/* خط عمودی جداکننده بین لوگو و لینک‌ها */
.df-nav__rule { width: 1px; height: 22px; background: var(--border); }

.df-nav__spacer { flex: 1; }

/* --- لینک‌های شماره‌دار با نشانگر لغزان --- */

.df-nav__links { position: relative; display: flex; align-items: center; gap: 2px; }

.df-nav__marker {
    position: absolute;
    top: 50%;
    /* لنگر عمداً فیزیکی است: translateX همیشه فیزیکی است، پس با
       inset-inline-start در حالت RTL نشانگر از کادر بیرون می‌زد */
    left: 0;
    height: 36px;
    width: 0;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--hue) var(--veil-lg), transparent);
    border: 1px solid color-mix(in srgb, var(--hue) 24%, transparent);
    opacity: 0;
    transform: translateY(-50%);
    pointer-events: none;
    transition: opacity var(--t-base) ease, background var(--t-base) ease, border-color var(--t-base) ease;
}

.df-nav__links a {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    font-family: Inter, yekanbakh, sans-serif;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    color: rgba(var(--sheen), 0.66);
    transition: color var(--t-fast) ease;
}

/* شمارهٔ ترتیبی — حس فهرست/داشبورد می‌دهد */
.df-nav__n {
    font-size: 9.5px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(var(--sheen), 0.3);
    transition: color var(--t-fast) ease;
}

.df-nav__links a:hover { color: var(--text); }
.df-nav__links a:hover .df-nav__n { color: var(--hue); }
/* پشتیبان: اگر نشانگر لغزان به هر دلیلی جا نیفتد، آیتم فعال باز هم خوانده می‌شود */
.df-nav__links a.is-current {
    color: var(--text);
    background: color-mix(in srgb, var(--hue) var(--veil-md), transparent);
}
.df-nav__links a.is-current .df-nav__n { color: var(--hue); }

/* --- ماژول نرخ زنده --- */

.df-nav__rate {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 38px;
    padding: 0 14px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    font-family: Inter, sans-serif;
}

.df-nav__rate-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6);
    animation: df-rate-pulse 2.4s ease-out infinite;
}

@keyframes df-rate-pulse {
    70% { box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

.df-nav__rate-pair { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: var(--text-3); }
.df-nav__rate-value { font-size: 14px; font-weight: 700; color: var(--text); }
.df-nav__rate-delta { font-size: 11px; font-weight: 600; color: var(--accent); }

/* --- سوییچ زبان --- */

.df-nav__lang {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 3px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
}

.df-nav__lang a {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    height: 30px;
    border-radius: var(--r-pill);
    font-family: Inter, sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-3);
    transition: color var(--t-fast) ease, background var(--t-fast) ease;
}

.df-nav__lang a:hover { color: var(--text); }
.df-nav__lang a.is-active { background: rgba(var(--sheen), 0.08); color: var(--text); }

/* دکمهٔ منو باید هم‌قد ماژول نرخ و سوییچ زبان باشد (۳۸px)، وگرنه در نوار ۶۰
   پیکسلی از ریتم بقیهٔ آیتم‌ها بیرون می‌زند.

   سلکتور عمداً با ‎.df-nav__bar‎ سنگین‌تر شده است: ‎.df-cta‎ پایه در بخش ۱۲
   یعنی *بعدِ* این خط تعریف می‌شود و با وزن برابر، همیشه برنده می‌شد —
   یعنی این مادیفایر بی‌اثر بود و دکمه ۵۰ پیکسلی می‌ماند. */
.df-nav__bar .df-cta--nav {
    min-height: 38px;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* بالا پریدن و هالهٔ دکمه‌های بزرگ برای این اندازه زیادی است */
.df-nav__bar .df-cta--nav:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.24);
}

/* --- برگر --- */

.df-nav__burger {
    display: none;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
}

.df-nav__burger-lines { display: grid; gap: 5px; }
.df-nav__burger-lines i { display: block; width: 16px; height: 1.5px; border-radius: 2px; background: var(--text); }

/* --- منوی موبایل --- */

.df-mobile-nav {
    position: fixed;
    inset: 0;
    z-index: var(--z-menu);
    display: grid;
    place-content: center;
    gap: 4px;
    text-align: center;
    background: rgba(var(--bg-rgb), 0.97);
    backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base) ease, visibility var(--t-base) ease;
}

.df-mobile-nav.is-open { opacity: 1; visibility: visible; }

.df-mobile-nav a {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 32px;
    font-size: 20px;
    font-weight: 600;
    transition: color var(--t-fast) ease;
}

.df-mobile-nav a:hover { color: var(--accent); }
.df-mobile-nav__close { position: absolute; top: 16px; inset-inline-end: 16px; }

/* ===== 9. section frame =================================================== */

.df-section { position: relative; padding: clamp(64px, 7vw, 104px) 0; }

/* پله‌های رنگ: هر بخش کمی از بخش قبل جدا می‌شود بدون اینکه رنگ عوض شود.
   عمداً نیمه‌شفاف‌اند نه رنگ تخت — وگرنه شبکه و هالهٔ ‎.df-backdrop‎ را می‌پوشانند
   و آن‌وقت backdrop-filterِ کارت‌های شیشه‌ای چیزی برای محوکردن ندارد. */
.df-section--t1 { background: rgba(var(--sheen), 0.016); }
.df-section--t2 { background: rgba(var(--sheen), 0.032); }
.df-section--accent { background: color-mix(in srgb, var(--hue) var(--veil-xs), transparent); }

.df-section + .df-section::before { content: none; }

.df-head { max-width: 640px; margin: 0 auto clamp(36px, 4vw, 56px); text-align: center; }

/* هر بخش رنگ خودش را دارد: ‎--hue‎ به کیکر، به «em» تیتر و به کاشی‌های
   داخل همان بخش ارث می‌رسد. رنگ برند (نعنایی) دست‌نخورده روی CTAها می‌ماند. */
.df-sec--mint { --hue: var(--h-mint); }
.df-sec--blue { --hue: var(--h-blue); }
.df-sec--amber { --hue: var(--h-amber); }
.df-sec--coral { --hue: var(--h-coral); }
.df-sec--violet { --hue: var(--h-violet); }

/* هالهٔ رنگیِ کم‌جانِ بالای بخش — همان چیزی که مرز بخش‌ها را حس‌کردنی می‌کند.
   بدون z-index منفی، چون آن‌وقت زیر پس‌زمینهٔ خودِ سکشن گم می‌شود؛ در عوض
   محتوا با ‎.df-shell‎ یک لایه بالاتر می‌رود. */
.df-section[class*="df-sec--"]::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 340px;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(760px 300px at 50% 0%,
                color-mix(in srgb, var(--hue) var(--veil-lg), transparent), transparent 70%);
}

.df-section > .df-shell { position: relative; z-index: 1; }

.df-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 6px 15px 6px 11px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: rgba(var(--sheen), 0.04);
    border-color: color-mix(in srgb, var(--hue) 30%, transparent);
    background: color-mix(in srgb, var(--hue) var(--veil-md), transparent);
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hue);
}

/* آیکون کیکر برگشت — حالا داخل یک نشان رنگی است و بی‌جا نیست */
.df-kicker .df-i {
    display: block;
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

.df-section--alt-accent .df-kicker { color: var(--hue); }

.df-head h2 {
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

/* واژهٔ کلیدی تیتر با گرادیانِ رنگ همان بخش پر می‌شود.
   رنگ تخت پایه است و گرادیان فقط داخل @supports می‌آید؛ وگرنه روی مرورگری که
   color-mix ندارد، background باطل می‌شود ولی color:transparent می‌ماند و
   تیتر نامرئی می‌شود. */
.df-head h2 em {
    font-style: normal;
    color: var(--hue);
}

@supports (color: color-mix(in srgb, red, blue)) {
    .df-head h2 em {
        background: linear-gradient(180deg,
                    color-mix(in srgb, var(--hue) 55%, var(--mix-lift)),
                    var(--hue));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.df-head h2::after { content: none; }

.df-head p { margin-top: 14px; color: var(--text-2); font-size: 15px; line-height: 2; }

/* ===== 10. surfaces ======================================================= */

/* تخت و مینیمال: یک سطح ساده و یک خط مو. بدون شیشه، بدون گرادیان، بدون سایه. */
.df-card {
    position: relative;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: var(--surface-1);
    transition: border-color var(--t-base) ease, background var(--t-base) ease;
}

.df-card:hover { border-color: var(--border-2); }
.df-card--gold { border-color: rgba(var(--accent-rgb), 0.28); }

/* --- کارت شیشه‌ای -----------------------------------------------------------
   پس‌زمینهٔ صفحه شبکه و هالهٔ رنگی دارد، پس backdrop-filter واقعاً چیزی برای
   محوکردن دارد. روی آن یک گرادیان نیمه‌شفاف و یک لبهٔ نوری بالا می‌نشیند تا
   حس شیشه بدهد، به‌علاوهٔ هالهٔ رنگی ملایمِ گوشه که از ‎--hue‎ می‌آید. */
.df-card--glass {
    border-color: rgba(var(--sheen), 0.09);
    background:
        linear-gradient(160deg, rgba(var(--sheen), 0.055), rgba(var(--sheen), 0.012) 42%, rgba(var(--sheen), 0) 70%),
        rgba(var(--surface-rgb), 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        inset 0 1px 0 rgba(var(--sheen), 0.13),
        inset 0 -1px 0 rgba(var(--shade), 0.4),
        0 18px 40px rgba(var(--shade), 0.4);
    overflow: hidden;
    isolation: isolate;
}

/* هالهٔ رنگی گوشه — رنگش را از کارت می‌گیرد، پس هر کارت حال‌وهوای خودش را دارد */
.df-card--glass::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-inline-end: -30%;
    top: -55%;
    width: 78%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--hue) var(--veil-2xl), transparent), transparent 68%);
    opacity: 0.55;
    pointer-events: none;
    transition: opacity var(--t-slow) ease, transform var(--t-slow) var(--ease-out);
}

.df-card--glass:hover {
    border-color: color-mix(in srgb, var(--hue) 34%, transparent);
}

.df-card--glass:hover::before { opacity: 0.9; transform: scale(1.12); }

/* ===== 10b. کاشی آیکون سه‌بعدی ==============================================
   یک مربعِ گردِ شیشه‌ای با نور از بالا، سایهٔ داخلی از پایین و هالهٔ رنگی
   بیرونی. رنگش فقط از ‎--hue‎ می‌آید، پس همان یک کلاس در کل صفحه با
   رنگ‌های مختلف تکرار می‌شود.
   ========================================================================== */

.df-tile {
    position: relative;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex: none;
    border-radius: 19px;
    color: var(--text);

    /* فالبک تخت برای مرورگر بدون color-mix — بدون این، کل background باطل
       می‌شود و کاشی بی‌رنگ می‌ماند */
    background: var(--hue);
    box-shadow: inset 0 1.5px 0 rgba(var(--sheen), 0.5), inset 0 -2px 6px rgba(var(--shade), 0.42);

    background:
        linear-gradient(160deg,
            color-mix(in srgb, var(--hue) 92%, var(--mix-lift) 8%) 0%,
            color-mix(in srgb, var(--hue) 78%, var(--mix-sink) 22%) 52%,
            color-mix(in srgb, var(--hue) 52%, var(--mix-sink) 48%) 100%);

    box-shadow:
        /* لبهٔ نوریِ بالا و سایهٔ داخلیِ پایین = حجم */
        inset 0 1.5px 0 rgba(var(--sheen), 0.55),
        inset 0 -2px 6px rgba(var(--shade), 0.42),
        inset 0 0 0 1px rgba(var(--sheen), 0.10),
        /* پایهٔ کاشی روی سطح کارت */
        0 8px 18px -6px color-mix(in srgb, var(--hue) 55%, transparent),
        0 2px 5px rgba(var(--shade), 0.45);

    transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) ease;
}

/* برقِ کشیدهٔ روی شیشه */
.df-tile::before {
    content: "";
    position: absolute;
    inset: 2px 2px 42% 2px;
    border-radius: 17px 17px 60% 60% / 17px 17px 26% 26%;
    background: linear-gradient(180deg, rgba(var(--sheen), 0.42), rgba(var(--sheen), 0.04));
    pointer-events: none;
}

/* هالهٔ رنگی زیر کاشی */
.df-tile::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 18% 8% -22% 8%;
    border-radius: 50%;
    background: color-mix(in srgb, var(--hue) 60%, transparent);
    filter: blur(13px);
    opacity: 0.5;
    pointer-events: none;
    transition: opacity var(--t-slow) ease;
}

.df-tile .df-i {
    width: 26px;
    height: 26px;
    stroke-width: 1.9;
    filter: drop-shadow(0 1px 1px rgba(var(--shade), 0.4));
}

.df-tile--lg { width: 72px; height: 72px; border-radius: 23px; }
.df-tile--lg::before { border-radius: 21px 21px 60% 60% / 21px 21px 26% 26%; }
.df-tile--lg .df-i { width: 32px; height: 32px; }

.df-tile--sm { width: 46px; height: 46px; border-radius: 15px; }
.df-tile--sm::before { border-radius: 13px 13px 60% 60% / 13px 13px 26% 26%; }
.df-tile--sm .df-i { width: 21px; height: 21px; }

/* عدد به‌جای آیکون (بخش مراحل) */
.df-tile__n {
    font-family: Inter, 'Plus Jakarta Sans', sans-serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 2px rgba(var(--shade), 0.45);
    direction: ltr;
}

.df-tile--lg .df-tile__n { font-size: 25px; }

/* کارت که هاور شد کاشی کمی به سمت بیننده می‌چرخد */
.df-card:hover > .df-tile,
.df-card:hover .df-tile,
.df-tile:hover {
    transform: perspective(420px) rotateX(-9deg) translateY(-3px) scale(1.04);
}

.df-card:hover .df-tile::after { opacity: 0.85; }

/* رنگ‌های آماده — روی هر المانی بگذاری، کاشی و متن‌های هم‌رنگ عوض می‌شوند */
.df-hue-mint { --hue: var(--h-mint); }
.df-hue-blue { --hue: var(--h-blue); }
.df-hue-amber { --hue: var(--h-amber); }
.df-hue-coral { --hue: var(--h-coral); }
.df-hue-violet { --hue: var(--h-violet); }

/* ===== 11. hero (سبک رفرنس CodeNest) ====================================== */

/* پدینگ بالا عمداً از پدینگ پایین کوچک‌تر است: محتوا با align-items:center در
   کادرِ پدینگ وسط می‌نشیند، پس این اختلاف کل بلوک هیرو را بالا می‌کشد.

   ‎var(--nav-h)‎ از پدینگ برداشته شد چون ناوبری sticky است و جای خودش را در
   جریان صفحه اشغال می‌کند؛ نگه‌داشتنش یعنی ۷۶ پیکسل فاصلهٔ دوباره‌شمرده. */
.df-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: clamp(24px, 4vw, 52px) 0 clamp(56px, 8vw, 104px);
    overflow: hidden;
}

/* --- لایهٔ مدیا --- */

.df-hero__media { position: absolute; inset: 0; pointer-events: none; }

/* پارالاکس: --par-y با اسکرول و --par-x/--par-s با حرکت نشانگر ست می‌شوند.
   مقیاس پایه کمی بزرگ‌تر از قاب است تا جابه‌جایی، لبهٔ خالی نسازد. */
.df-hero__video {
    --par-x: 0px;
    --par-y: 0px;
    --par-s: 1;

    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    transform: translate3d(var(--par-x), var(--par-y), 0) scale(calc(1.08 * var(--par-s)));
    will-change: transform;
}

/* گرادیان همیشه از سمتِ *متن* می‌آید تا تیتر روی زمینهٔ آرام بنشیند.

   با دو ستونی‌شدنِ هیرو، متن به ستون مقابل رفت (در فارسی چپ، در انگلیسی
   راست) و این دو قاعده هم با آن جا عوض کردند. سمتِ کارت عمداً روشن می‌ماند:
   شیشه وقتی چیزی برای محو کردن دارد شیشه به‌نظر می‌رسد، و ویدیو دقیقاً
   همان‌جا دیده می‌شود. خوانا ماندنِ لوگو روی تصویرِ متحرک کارِ بلورِ
   ۹ پیکسلیِ ‎.df-glass__pane‎ است. */
.df-hero__fade-side {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--bg) 0%, rgba(var(--bg-rgb), 0.72) 34%, transparent 78%);
}

[dir="ltr"] .df-hero__fade-side {
    background: linear-gradient(to left, var(--bg) 0%, rgba(var(--bg-rgb), 0.72) 34%, transparent 78%);
}

.df-hero__fade-bottom {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--bg) 0%, rgba(var(--bg-rgb), 0.55) 22%, transparent 60%);
}

/* خطوط عمودی شبکه */
.df-hero__grid { position: absolute; inset: 0; display: none; }

.df-hero__grid i {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(var(--sheen), 0.10);
}

.df-hero__glow {
    position: absolute;
    top: 4%;
    inset-inline: 0;
    width: 100%;
    height: clamp(220px, 34vw, 420px);
    mix-blend-mode: screen;
}

/* دو ستونِ روبه‌روی هم: کارت شیشه‌ای در ستون آغازین (راست در فارسی) و
   متن در ستون مقابل. ترتیبِ سورس همان ترتیب ستون‌هاست، پس نسخهٔ انگلیسی
   بدون هیچ قاعدهٔ [dir] خودبه‌خود آینه می‌شود.

   ستون کارت auto است و نه کسری: کارت عرضِ ذاتی خودش را دارد و بقیهٔ ۱۲۰۰
   پیکسل به متن می‌رسد. با تقسیم ۵۰/۵۰ تیتر در ستونی ~۵۷۰ پیکسلی می‌افتاد و
   چون font-size آن بر حسب vw است نه عرضِ ستون، همان ۶۵ پیکسل می‌ماند و
   تیتر به چهار خط می‌شکست.

   align-items: center اجباری است و نه سلیقه‌ای: کارت ارتفاعش را از
   aspect-ratio می‌گیرد و اگر آیتمِ گرید کشیده (stretch) شود، ارتفاعِ کشیده
   بر aspect-ratio می‌چربد و مربع به مستطیل تبدیل می‌شود — آن‌وقت قابِ
   گوشه‌ها و دایرهٔ هاله هر دو خراب می‌شوند. */
.df-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(32px, 5vw, 76px);
}

/* زیر ۹۰۰ پیکسل دو ستون جا نمی‌شود: تیتر با clamp خودش ~۵۰ پیکسل می‌ماند و
   دو دکمهٔ CTA زیر ~۴۵۰ پیکسل به خط دوم می‌افتند. پس به همان چیدمان یک‌ستونی
   برمی‌گردیم و کارت — که در سورس اول است — دوباره بالای متن می‌نشیند.

   عدد ۹۰۰ همان درزی است که «میز پرسش» هم رویش جمع می‌شود. */
@media (max-width: 900px) {
    .df-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        row-gap: clamp(26px, 5vw, 40px);
        justify-items: start;
    }
}

/* --- کارت شیشه‌ای مایع ---

   کارت متن ندارد: فقط نشان برند و کلمهٔ «invest prop» به شکل وکتور. نشان در
   میانهٔ هر دور به نماد دلار باز می‌شود و برمی‌گردد؛ زمان‌بندی و رنگ‌ها در
   glassLockupIn داخل JS است تا با آبشار تیتر هیرو یک ریتم داشته باشد.

   اینجا فقط «حالت استراحت» تعریف می‌شود — یعنی چیزی که بدون جاواسکریپت،
   در حالت آرام و روی prefers-reduced-motion دیده می‌شود: لوگوی کامل و ساکن. */

.df-glass {
    position: relative;
    align-self: center;
    width: clamp(212px, 24vw, 300px);
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 1.7vw, 22px);
    padding: 26px;
    margin: 0;

    border-radius: 30px;
    animation: df-float 7.5s var(--ease-in-out) infinite;
}

/* شناور ماندن کارت — دامنهٔ کوچک تا حواس‌پرتی نشود.

   پایه صفر است. تا پیش از دو ستونی‌شدن، ۵۰- پیکسل بود تا کارت بالای تیتر
   بایستد؛ حالا که کنارِ متن نشسته آن جابه‌جایی فقط بدقوارگی است. عدد باید
   هم اینجا و هم در هر دو ایستگاهِ کیفریم صفر شود: انیمیشن کل transform را
   می‌گیرد، پس عوض‌کردنِ تنها اعلانِ بالا هیچ اثری ندارد.

   با صفر شدنِ پایه، df-float-m موبایل هم دیگر لازم نیست و حذف شد. */
@keyframes df-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

/* سطحِ شیشه — تنها لایه‌ای که backdrop-filter دارد و عمداً بی‌فرزند است.

   چرا جداست: هر رنگ‌آمیزیِ تازه *داخل* یک جعبهٔ backdrop-blur، کامپوزیتور را
   وادار می‌کند کل پس‌زمینهٔ آن جعبه را دوباره بلور کند — هر فریم. داخل این
   کارت یک حلقهٔ بی‌پایان روی ۱۳ مسیر SVG می‌چرخد (glassLockupIn)، یعنی
   دقیقاً همان الگویی که یک‌بار رندرر را کشت. با این جداسازی لوگو *روی* شیشه
   می‌نشیند نه داخلش.

   بلور اینجا از ۴ به ۹ پیکسل رفت و تهِ رنگ کمی پررنگ‌تر شد: کارت حالا آن
   سمتِ هیرو است که ویدیو در آن دیده می‌شود (گرادیانِ df-hero__fade-side
   سمتِ متن را تیره می‌کند، نه سمتِ کارت)، و روی تصویرِ متحرک، ۴ پیکسل بلور
   لوگو را خوانا نگه نمی‌داشت. */
.df-glass__pane {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;

    background: rgba(var(--sheen), 0.045);
    background-blend-mode: luminosity;
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    box-shadow: inset 0 1px 1px rgba(var(--sheen), 0.12);
}

/* قاب یک‌پیکسلی گرادیانی — با mask-composite تنها لبه باقی می‌ماند */
/* z-index لازم است چون کارت حالا لایه‌ای زیر خودش دارد (‎.df-glass__pane‎ روی
   صفر). شبه‌المان‌ها در ترتیبِ درخت پیش از فرزندان می‌آیند، پس بدون این عدد،
   پِین روی قابِ گرادیانی می‌افتاد و لبهٔ کارت ناپدید می‌شد. */
.df-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 1.4px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(var(--sheen), 0.65), rgba(var(--sheen), 0.06));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* برقِ آرامی که هر چند ثانیه یک‌بار از روی شیشه رد می‌شود.

   با background-position جابه‌جا می‌شود و نه با transform: ترنسلیت لازمهٔ
   overflow:hidden روی کارت است و آن، بلورِ ۱۴ پیکسلیِ حرف‌های لوگو را لبِ
   کادر می‌بُرد. گرادیان در کادر خودش می‌ماند، پس چیزی بریده نمی‌شود. */
.df-glass::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(105deg,
        transparent 42%,
        rgba(var(--sheen), 0.13) 50%,
        transparent 58%);
    background-size: 260% 100%;
    background-position: 165% 0;
    animation: df-glass-sheen 9.5s var(--ease-in-out) infinite;
}

/* بیشترِ چرخه ساکن است و برق فقط یک‌بار و سریع رد می‌شود */
@keyframes df-glass-sheen {
    0%, 58%   { background-position: 165% 0; }
    92%, 100% { background-position: -65% 0; }
}

/* گوشه‌های براکتی — همان لحن «[ ۲۰۲۶ ]» که جایش را به لوگو داد.
   هر گوشه دو نوار است؛ هشت گرادیانِ تخت روی یک المان، تا هشت المانِ DOM نشود. */
.df-glass__ticks {
    /* با بزرگ‌ترشدن کارت (۲۲۸→۳۰۰) این دو عدد هم بزرگ شدند، وگرنه براکت‌ها
       نسبت به قاب ریز و بی‌ربط دیده می‌شوند. */
    --tick: 19px;
    --hair: 1.5px;

    position: absolute;
    inset: 13px;
    z-index: 2;
    pointer-events: none;
    opacity: 0.4;

    background-image:
        linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
        linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
        linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
        linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent));
    background-size:
        var(--tick) var(--hair), var(--hair) var(--tick),
        var(--tick) var(--hair), var(--hair) var(--tick),
        var(--tick) var(--hair), var(--hair) var(--tick),
        var(--tick) var(--hair), var(--hair) var(--tick);
    background-position:
        left top, left top,
        right top, right top,
        left bottom, left bottom,
        right bottom, right bottom;
    background-repeat: no-repeat;
}

/* صحنهٔ نشان: مربعِ هم‌اندازهٔ خودِ نشان تا هالهٔ پشتش دقیقاً مرکز بگیرد.

   z-index صریح است چون کارت سه لایهٔ روی‌هم دارد (شیشه ۰، برق ۱، گوشه‌ها ۲)
   و بدون آن، ترتیبِ کشیدن به «موضع‌دار بودن یا نبودنِ» هر فرزند گره می‌خورد —
   مثلاً کلمهٔ لوگو که موضع ندارد، زیرِ لایهٔ شیشه گم می‌شد. */
.df-glass__stage {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* هالهٔ نعنایی پشت نشان؛ وقتی نشان به دلار باز می‌شود، JS این را هم باز می‌کند.
   با inset منفی بزرگ می‌شود و نه با transform، تا اسکیلِ GSAP از صفر شروع کند
   و با ترنسلیتِ وسط‌چین کردن نجنگد. */
.df-glass__halo {
    position: absolute;
    inset: -38%;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.55;
    background: radial-gradient(circle,
        rgba(var(--accent-rgb), 0.32),
        rgba(var(--accent-rgb), 0) 70%);
}

/* overflow:visible الزامی است: نماد دلار موقع تبدیل تا دو برابر بزرگ می‌شود و
   از viewBox می‌زند بیرون، و بلورِ آبشار هم چند پیکسل از لبه رد می‌شود. */
.df-glass__mark {
    position: relative;
    display: block;
    height: clamp(84px, 9.8vw, 122px);
    width: auto;
    overflow: visible;
}

.df-glass__word {
    position: relative;
    z-index: 3;
    display: block;
    width: clamp(116px, 13.6vw, 172px);
    height: auto;
    overflow: visible;
}

.df-serif {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.16em;
    color: var(--accent);
    direction: ltr;
    unicode-bidi: isolate;
}

/* --- تایپوگرافی هیرو --- */

.df-eyebrow {
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--accent);
    margin-bottom: 18px;
}

.df-title {
    font-size: clamp(40px, 5.4vw, 68px);
    font-weight: 900;
    line-height: 1.22;
    letter-spacing: -0.03em;
    color: var(--text);
    max-width: 19ch;
}

.df-title__num {
    font-family: Inter, sans-serif;
    font-weight: 800;
    letter-spacing: -0.045em;
}

.df-title__dot { color: var(--accent); }

/* --- ورود حرف‌به‌حرف تیتر ---

   خط فارسی چسبان است: اگر به هر حرف display:inline-block یا transform بدهیم،
   مرورگر اتصال حروف را می‌شکند و «چالش‌های» به «چ ا ل ش ه ا ی» تبدیل می‌شود
   (اندازه‌گیری شد: عرض همین تیتر از ۳۲۴px به ۳۶۹px می‌پرد).

   پس حرف‌ها فقط با opacity / filter / color حرکت می‌کنند؛ این‌ها مرحلهٔ paint
   هستند و روی shaping اثری ندارند — با همان اندازه‌گیری تأیید شد. خوشبختانه
   همین محدودیت دقیقاً ظاهر «محو و نرم» مورد نظر را هم می‌سازد و جابه‌جایی لازم
   نیست؛ بالا آمدنِ ملایم روی خودِ h1 اعمال می‌شود که بلوک است و اتصال نمی‌شکند.

   رنگِ استراحتِ هر حرف اینجا نیست: مقدارِ پایانیِ همان tween رنگ است و اینلاین
   روی span می‌ماند، چون هر حرف تُن خودش را دارد (رمپ رنگ در JS). عمداً با
   clearProps پاک نمی‌شود، وگرنه تیتر در پایان به سفید می‌پرد. */
.df-title__l { display: inline; }

.df-lead {
    max-width: 512px;
    margin-top: 20px;
    font-size: 14px;
    line-height: 2;
    color: rgba(var(--sheen), 0.70);
}

.df-lead b { color: var(--text); font-weight: 700; }

.df-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* --- CTA گرد کامل --- */

.df-cta {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 26px;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-base) ease, background var(--t-base) ease;
}

.df-cta:hover {
    transform: translateY(-2px);
    background: var(--accent-2);
    box-shadow: 0 12px 34px rgba(var(--accent-rgb), 0.3);
}

.df-cta:active { transform: scale(0.975); }

.df-cta--ghost {
    background: transparent;
    border-color: rgba(var(--sheen), 0.2);
    color: var(--text);
}

.df-cta--ghost:hover {
    background: rgba(var(--sheen), 0.07);
    border-color: rgba(var(--sheen), 0.35);
    box-shadow: none;
}

/* countdown */

.df-count { margin-top: 30px; max-width: 420px; }
.df-count__label { margin-bottom: 10px; color: var(--text-3); font-size: 12.5px; }
.df-count__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.df-count__cell {
    padding: 12px 4px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: rgba(var(--sheen), 0.03);
    text-align: center;
}

.df-count__cell b { display: block; font-size: clamp(20px, 2.8vw, 26px); font-weight: 800; line-height: 1.35; }
.df-count__cell span { color: var(--text-3); font-size: 11.5px; }

@media (min-width: 1025px) {
    .df-hero__grid { display: block; }
}

/* ===== 12. ticker ========================================================= */

.df-ticker {
    position: relative;
    z-index: var(--z-page);
    border-block: 1px solid var(--border);
    background: rgba(var(--surface-rgb), 0.7);
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.df-ticker__track {
    display: flex;
    gap: 36px;
    width: max-content;
    padding: 12px 0;
    animation: df-marquee 42s linear infinite;
}

.df-ticker:hover .df-ticker__track { animation-play-state: paused; }

@keyframes df-marquee { to { transform: translateX(50%); } }

.df-ticker__item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13.5px; color: var(--text-2); }
.df-ticker__item b { color: var(--text); }
.df-ticker__item .up { color: var(--pos); }

/* ===== 13. stats ========================================================== */

/* بنتو: یک کارت قهرمانِ دوردیف، دو کارت جمع‌وجور کنارش، یک کارت تمام‌عرض */
.df-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.df-stat--hero { grid-column: span 3; grid-row: span 2; }
.df-stat--side { grid-column: span 3; }
.df-stat--wide { grid-column: span 6; }

.df-stat {
    display: flex;
    gap: 18px;
    padding: 26px 24px;
    transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) ease;
}

/* کارت قهرمان: کاشی بالا، عدد غول‌پیکر پایین */
.df-stat--hero {
    flex-direction: column;
    justify-content: space-between;
    gap: 26px;
    padding: clamp(26px, 3vw, 34px);
}

.df-stat--hero .df-stat__value { font-size: clamp(42px, 6vw, 68px); }
.df-stat--hero .df-stat__label { font-size: 15px; }

/* کارت‌های کناری و افقی: کاشی کنار متن */
.df-stat--side,
.df-stat--wide { align-items: center; }

.df-stat--wide { padding-block: clamp(22px, 2.4vw, 30px); }
.df-stat--wide .df-stat__value { font-size: clamp(32px, 4.4vw, 48px); }

.df-stat__body { min-width: 0; }

.df-stat__value {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: clamp(28px, 3.4vw, 38px);
    font-weight: 900;
    line-height: 1.2;
    color: var(--hue);
}

.df-stat__suffix { font-size: 0.52em; font-weight: 800; opacity: 0.8; }
.df-stat__unit { font-family: yekanbakh, sans-serif; font-size: 0.4em; color: var(--text-2); }
.df-stat__label { margin-top: 8px; color: var(--text-2); font-size: 13.5px; line-height: 1.85; }

@media (max-width: 860px) {
    .df-stat--hero,
    .df-stat--side,
    .df-stat--wide { grid-column: span 6; grid-row: auto; }
    .df-stat--hero { flex-direction: row; align-items: center; }
    .df-stat--hero .df-stat__value { font-size: clamp(34px, 9vw, 46px); }
}

/* ===== 14. coupon ========================================================= */

.df-coupon {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    margin-top: 16px;
    padding: clamp(24px, 3vw, 32px);
    border-radius: var(--r-xl);
    border: 1px solid color-mix(in srgb, var(--hue) 26%, transparent);
    background:
        radial-gradient(680px 220px at 12% 0%, color-mix(in srgb, var(--hue) var(--veil-lg), transparent), transparent 68%),
        linear-gradient(150deg, rgba(var(--sheen), 0.05), rgba(var(--sheen), 0.01) 46%),
        rgba(var(--surface-rgb), 0.6);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(var(--sheen), 0.12), 0 20px 44px rgba(var(--shade), 0.36);
    overflow: hidden;
}

/* نوار بریده‌بریده مثل لبهٔ بلیت */
.df-coupon::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: repeating-linear-gradient(180deg,
                var(--hue) 0 10px, transparent 10px 20px);
    opacity: 0.6;
}

.df-coupon::after { content: none; }

.df-coupon h3 { font-size: 18px; font-weight: 700; }
.df-coupon p { max-width: 520px; margin-top: 8px; color: var(--text-2); font-size: 14px; }

.df-coupon__box {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 8px 8px 18px;
    border-radius: var(--r-pill);
    border: 1px dashed color-mix(in srgb, var(--hue) 45%, transparent);
    background: rgba(var(--bg-rgb), 0.45);
}

.df-coupon__code {
    font-family: Inter, monospace;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--hue);
    text-shadow: 0 0 24px color-mix(in srgb, var(--hue) 50%, transparent);
    direction: ltr;
}

/* ===== 15. calculator — «مخزن جشنواره» ==================================== */

/* دو ستون: چپ کنسول انتخاب (رنگ ساختاری = --hue بخش)، راست مخزن و رده‌ها
   (همیشه نعنایی، چون دربارهٔ پول است). این تفکیک رنگی عمدی است. */

.df-vault {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    gap: clamp(18px, 2.6vw, 30px);
    padding: clamp(18px, 2.6vw, 28px);
    border-radius: var(--r-xl);
    border: 1px solid var(--border);
    background: rgba(var(--sheen), 0.02);
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--hue) var(--veil-sm), transparent), transparent 58%),
        var(--surface-1);
}

/* ---------------------------------------------------------- کنسول انتخاب */

.df-vault__console { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 22px); min-width: 0; }

.df-cons { display: grid; gap: 16px; }

/* min-width:0 اجباری است: آیتمِ گرید به‌طور پیش‌فرض min-width:auto دارد و زیر
   عرضِ ذاتیِ محتوایش جمع نمی‌شود. بدون این، ریلِ افقیِ بالانس (۹ کلید) کلِ
   ستون را تا ~۸۲۰px پهن می‌کرد و کارت از صفحه بیرون می‌زد. */
.df-cons__step { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }

.df-cons__no {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    border-radius: 50%;
    border: 1px solid var(--border-2);
    border-color: color-mix(in srgb, var(--hue) 42%, transparent);
    color: var(--hue);
    font-size: 12px;
    font-weight: 800;
}

.df-cons__body { flex: 1 1 auto; min-width: 0; }
.df-cons__label { display: block; margin-bottom: 9px; color: var(--text-2); font-size: 13px; }

.df-keys { display: flex; gap: 8px; }
.df-keys--wrap { flex-wrap: wrap; }
.df-keys:not(.df-keys--wrap) .df-key { flex: 1 1 0; }

/* کلید فیزیکی: لبهٔ تیرهٔ پایین نقش ضخامتِ کلید را بازی می‌کند و موقع فشردن جمع می‌شود */
.df-key {
    min-height: 42px;
    padding: 0 14px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: rgba(var(--sheen), 0.035);
    color: var(--text-2);
    font-size: 13.5px;
    font-weight: 700;
    box-shadow: inset 0 -2px 0 rgba(var(--shade), 0.4);
    transition: transform var(--t-fast) var(--ease-out),
                color var(--t-fast) ease,
                border-color var(--t-fast) ease,
                background var(--t-fast) ease;
}

.df-key:hover { color: var(--text); border-color: var(--border-2); }
.df-key:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 rgba(var(--shade), 0.4); }

.df-key.is-active {
    border-color: var(--border-2);
    border-color: color-mix(in srgb, var(--hue) 55%, transparent);
    background: rgba(var(--sheen), 0.07);
    background: color-mix(in srgb, var(--hue) var(--veil-lg), transparent);
    color: var(--hue);
    box-shadow: inset 0 -2px 0 rgba(var(--shade), 0.35);
}

/* ------------------------------------------------------- نوارهای مقایسه */

.df-versus {
    display: grid;
    gap: 13px;
    padding: 16px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: rgba(var(--bg-rgb), 0.45);
}

.df-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: baseline; }
.df-bar__label { color: var(--text-3); font-size: 12px; }
.df-bar b { font-size: 15px; font-weight: 800; }

.df-bar__track {
    grid-column: 1 / -1;
    height: 8px;
    border-radius: var(--r-pill);
    background: rgba(var(--sheen), 0.06);
    overflow: hidden;
}

.df-bar__track i {
    display: block;
    height: 100%;
    width: var(--w, 0%);
    border-radius: var(--r-pill);
    transition: width 820ms var(--ease-out);
}

.df-bar--old b { color: var(--text-2); text-decoration: line-through; }
.df-bar--old .df-bar__track i { background: rgba(var(--sheen), 0.24); }

.df-bar--new b { color: var(--accent); font-size: 19px; }
.df-bar--new .df-bar__track i { background: linear-gradient(90deg, var(--accent-3), var(--accent-2)); }

.df-versus__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
    color: var(--text-3);
    font-size: 12px;
}

.df-versus__foot b { color: var(--text-2); font-size: 13px; }

/* ------------------------------------------------------- مخزن جشنواره */

.df-vault__stage {
    --hue: var(--h-mint);

    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(16px, 2vw, 20px);
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: rgba(var(--bg-rgb), 0.5);
    background:
        radial-gradient(90% 55% at 50% 0%, rgba(var(--accent-rgb), 0.10), transparent 62%),
        rgba(var(--bg-rgb), 0.5);
}

/* درخشش «رده باز شد» — فقط یک بار و کوتاه، وگرنه آزاردهنده می‌شود */
.df-vault__stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(58% 40% at 50% 42%, rgba(var(--accent-rgb), 0.40), transparent 70%);
}

.df-vault__stage.is-levelup::after { animation: dfVaultFlash 820ms var(--ease-out); }

@keyframes dfVaultFlash {
    0% { opacity: 0; }
    22% { opacity: 1; }
    100% { opacity: 0; }
}

.df-tankwrap { display: flex; align-items: center; gap: 14px; height: clamp(228px, 28vw, 280px); }

.df-tank { position: relative; flex: none; height: 100%; }
.df-tank svg { display: block; height: 100%; width: auto; }

.df-tank__well { fill: rgba(var(--shade), 0.55); }
.df-tank__glass { fill: none; stroke: rgba(var(--sheen), 0.16); stroke-width: 2; }
.df-tank__shine { pointer-events: none; }

/* سطح مایع با ترجمهٔ عمودیِ گروه تنظیم می‌شود؛ جاوااسکریپت style.transform را
   می‌نویسد و همین ترنزیشن حرکت را نرم می‌کند (بدون نیاز به GSAP). */
.df-tank__liquid { transition: transform 900ms var(--ease-out); }

.df-tank__wave { fill: url(#dfTankLiquid); }
.df-tank__wave--back { opacity: 0.42; animation: dfWaveBack 6.6s linear infinite; }
.df-tank__wave--front { opacity: 0.94; animation: dfWaveFront 4.2s linear infinite; }

/* یک دورهٔ موج ۱۰۰ واحد است، پس جابه‌جایی ۱۰۰ واحدی بی‌درز تکرار می‌شود */
@keyframes dfWaveFront { from { transform: translateX(0); } to { transform: translateX(-100px); } }
@keyframes dfWaveBack  { from { transform: translateX(-100px); } to { transform: translateX(0); } }

.df-tank__bubbles circle { fill: rgba(var(--sheen), 0.4); animation: dfBubble 5.2s ease-in infinite; }
.df-tank__bubbles circle:nth-child(2) { animation-duration: 7.1s; animation-delay: -2.4s; }
.df-tank__bubbles circle:nth-child(3) { animation-duration: 8.4s; animation-delay: -4.8s; }

@keyframes dfBubble {
    0%   { transform: translateY(70px) scale(0.55); opacity: 0; }
    18%  { opacity: 0.55; }
    82%  { opacity: 0.3; }
    100% { transform: translateY(-120px) scale(1); opacity: 0; }
}

.df-tank__coin {
    fill: var(--h-amber);
    stroke: rgba(var(--sheen), 0.55);
    stroke-width: 0.8;
    animation: dfCoinFall 1.15s cubic-bezier(0.36, 0, 0.66, 1) forwards;
}

@keyframes dfCoinFall {
    0%   { transform: translateY(0) scale(0.7); opacity: 0; }
    12%  { opacity: 1; }
    100% { transform: translateY(300px) scale(1); opacity: 0.12; }
}

.df-tank__readout {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    padding: 0 10px;
    text-align: center;
    pointer-events: none;
}

/* پنجرهٔ نمایش: صفحهٔ تیرهٔ لبه‌دار، نه محوِ مبهم — روی مایعِ روشن هم می‌ماند */
.df-tank__plate {
    display: grid;
    justify-items: center;
    gap: 1px;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(var(--sheen), 0.14);
    background: rgba(var(--bg-rgb), 0.88);
    box-shadow: 0 10px 26px rgba(var(--shade), 0.5);
}

.df-tank__cap { color: var(--text-2); font-size: 11.5px; }

.df-tank__value {
    font-size: clamp(23px, 3vw, 31px);
    font-weight: 900;
    line-height: 1.3;
    color: var(--text);
    text-shadow: 0 2px 20px rgba(var(--shade), 0.8);
}

.df-tank__unit { color: var(--text-3); font-size: 11.5px; }

.df-tank__pct {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    padding: 5px 10px;
    white-space: nowrap;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: rgba(var(--bg-rgb), 0.72);
    color: var(--accent-2);
    font-size: 11px;
    font-weight: 700;
}

.df-tank__pct .df-i { width: 13px; height: 13px; }

/* ---------------------------------------------------------- نردبان رده‌ها */

/* ارتفاع نردبان با ارتفاع داخلی مخزن یکی است (۲۴۸ از ۲۶۸ = ۹۲.۵٪)
   وگرنه نشانه‌ها با سطح مایع جا‌به‌جا می‌افتند */
.df-ranks { position: relative; flex: 1 1 auto; min-width: 0; height: 92.5%; }

.df-rank {
    position: absolute;
    inset-inline-start: 0;
    bottom: calc(var(--at) * 100%);
    display: flex;
    align-items: center;
    gap: 8px;
    transform: translateY(50%);
    opacity: 0.45;
    transition: opacity var(--t-base) ease;
}

.df-rank__pip {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--border-2);
    background: rgba(var(--bg-rgb), 0.85);
    color: transparent;
    transition: background var(--t-base) ease, border-color var(--t-base) ease,
                color var(--t-base) ease, box-shadow var(--t-base) ease;
}

.df-rank__pip .df-i { width: 12px; height: 12px; stroke-width: 2.6; }
.df-rank__name { color: var(--text-3); font-size: 12px; font-weight: 700; white-space: nowrap; }

.df-rank.is-on { opacity: 1; }
.df-rank.is-on .df-rank__pip { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.df-rank.is-on .df-rank__name { color: var(--text); }
.df-rank.is-now .df-rank__pip { box-shadow: 0 0 0 5px var(--accent-soft); }
.df-rank.is-up { animation: dfRankPop 720ms var(--ease-out); }

@keyframes dfRankPop {
    0%   { transform: translateY(50%) scale(1); }
    38%  { transform: translateY(50%) scale(1.2); }
    100% { transform: translateY(50%) scale(1); }
}

/* --------------------------------------------------- نوار پیشرفت تا رده بعد */

.df-rankbar { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 11.5px; }
.df-rankbar__now { color: var(--accent); font-weight: 800; white-space: nowrap; }
.df-rankbar__next { color: var(--text-3); white-space: nowrap; }

.df-rankbar__track {
    flex: 1 1 auto;
    height: 6px;
    border-radius: var(--r-pill);
    background: rgba(var(--sheen), 0.07);
    overflow: hidden;
}

.df-rankbar__track i {
    display: block;
    height: 100%;
    width: var(--w, 0%);
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--accent-3), var(--accent-2));
    transition: width 820ms var(--ease-out);
}

/* ------------------------------------------------------------- قدم بعدی */

.df-nudge {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 8px 12px;
    border-radius: var(--r-md);
    border: 1px dashed var(--border-2);
    border-color: color-mix(in srgb, var(--hue) 40%, transparent);
    background: rgba(var(--sheen), 0.03);
    background: color-mix(in srgb, var(--hue) var(--veil-sm), transparent);
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 600;
    text-align: start;
    transition: border-color var(--t-base) ease, background var(--t-base) ease,
                transform var(--t-fast) var(--ease-out);
}

.df-nudge:hover { border-style: solid; background: color-mix(in srgb, var(--hue) var(--veil-lg), transparent); }
.df-nudge:active { transform: scale(0.99); }
.df-nudge b { color: var(--hue); font-weight: 800; }

.df-nudge__icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    background: rgba(var(--sheen), 0.08);
    background: color-mix(in srgb, var(--hue) var(--veil-xl), transparent);
    color: var(--hue);
}

.df-nudge__text { flex: 1 1 auto; line-height: 1.75; }
.df-nudge__go { flex: none; color: var(--hue); }

.df-nudge.is-max { border-style: solid; cursor: default; }
.df-nudge.is-max .df-nudge__go { display: none; }

@media (max-width: 1024px) {
    .df-vault { grid-template-columns: 1fr; }
}

/* چیدمان کلیدها و اندازهٔ متن‌ها در بخش ۲۷ (موبایل) تعیین می‌شود */
@media (max-width: 720px) {
    .df-tankwrap { height: 220px; gap: 10px; }
}


/* ===== 16. tabs =========================================================== */

.df-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.df-tab {
    min-height: 42px;
    padding: 0 22px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: rgba(var(--surface-rgb), 0.7);
    color: var(--text-2);
    font-size: 14.5px;
    font-weight: 700;
    transition: all var(--t-base) var(--ease-out);
}

.df-tab:hover { color: var(--text); border-color: var(--border-2); }

.df-tab.is-active {
    border-color: transparent;
    background: var(--accent);
    color: var(--accent-ink);
}

.df-tabs--sub { margin-bottom: 34px; }
.df-tabs--sub .df-tab { min-height: 36px; padding: 0 16px; font-size: 13px; border-radius: var(--r-pill); }

.df-tabs--sub .df-tab.is-active {
    border-color: var(--accent);
    background: transparent;
    color: var(--accent);
}

.df-panel[hidden] { display: none; }

/* ===== 17. plan slider + cards =========================================== */

/* قبلاً همهٔ اسلایدها opacity 0.42 داشتند و فقط سه‌تای وسط روشن می‌شدند؛
   روی دسکتاپ که ۳ تا ۴ کارت هم‌زمان دیده می‌شود این یعنی نیمی از کارت‌ها
   پریده‌رنگ بودند. ماسک لبه هم کارت‌های کناری را زیر یک محو سیاه می‌برد.
   حالا همهٔ کارت‌ها تمام‌رنگ‌اند و کلیپ با overflow انجام می‌شود. */
.df-slider {
    /* حاشیهٔ منفی + پدینگ: بلند شدن کارت در هاور بریده نمی‌شود،
       ولی اسلایدهای بیرون قاب کلیپ می‌شوند */
    margin-inline: -14px;
    padding: 14px;
    overflow: hidden;
}

.df-slider .swiper-wrapper { align-items: stretch; }

.df-slider .swiper-slide {
    height: auto;
    opacity: 1;
    transition: opacity var(--t-base) var(--ease-out);
}

.df-slider .swiper-slide-active { z-index: 2; }

/* فقط روی موبایل که اسلاید وسط‌چین است و کناری‌ها «سرک می‌کشند» */
@media (max-width: 639px) {
    .df-slider .swiper-slide:not(.swiper-slide-active) { opacity: 0.6; }
}

.df-slider__ui {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 26px;
}

.df-slider__nav {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--border-2);
    background: transparent;
    color: var(--text-2);
    transition: transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-base) ease,
                border-color var(--t-base) ease;
}

.df-slider__nav:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.df-slider__nav:active { transform: scale(0.94); }
.df-slider__nav[disabled] { opacity: 0.35; pointer-events: none; }

.df-slider__dots { display: flex; align-items: center; gap: 8px; }

.df-slider__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    background: rgba(var(--sheen), 0.28);
    transition: width var(--t-base) var(--ease-out), background var(--t-base) ease;
}

.df-slider__dot.is-active {
    width: 24px;
    background: var(--accent);
}

/* هدف لمسی نقطه‌ها باید ۴۴px باشد بدون اینکه ظاهرشان بزرگ شود */
.df-slider__dot::before {
    content: "";
    position: absolute;
    inset: -18px -6px;
}

.df-slider__dot { position: relative; }

/* کارت پلن — «برگهٔ مشخصات» به‌جای فهرست تکراری.
   هر کارت ‎--hue‎ خودش را دارد؛ رنگ فقط به ریل بالا، برچسب، عدد بالانس و
   کاشی سهم سود می‌نشیند. قیمت و CTA همیشه نعنایی می‌مانند چون معنا دارند. */

.df-plan {
    --hue: var(--h-mint);

    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 26px 22px 22px;
    overflow: hidden;
    background:
        radial-gradient(120% 70% at 50% -20%, rgba(var(--sheen), 0.045), transparent 62%),
        var(--surface-1);
    transition: transform var(--t-base) var(--ease-out),
                border-color var(--t-base) ease,
                box-shadow var(--t-base) ease;
}

.df-plan--h1 { --hue: var(--h-mint); }
.df-plan--h2 { --hue: var(--h-blue); }
.df-plan--h3 { --hue: var(--h-amber); }
.df-plan--h4 { --hue: var(--h-coral); }
.df-plan--h5 { --hue: var(--h-violet); }

/* ریل بالای کارت: تنها جای پررنگِ رنگ رده */
.df-plan__rail {
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--hue) 22%, var(--hue) 78%, transparent);
    opacity: 0.85;
}

.df-plan:hover {
    transform: translateY(-6px);
    border-color: var(--border-2); /* پشتیبان برای مرورگرهای بدون color-mix */
    border-color: color-mix(in srgb, var(--hue) 45%, transparent);
    box-shadow: var(--e2);
}

/* کارت پیشنهادی: سطح روشن‌تر + هالهٔ نعنایی، نه فقط یک بوردر پررنگ‌تر */
.df-plan--featured {
    border-color: rgba(var(--accent-rgb), 0.45);
    background:
        radial-gradient(130% 78% at 50% -18%, rgba(var(--accent-rgb), 0.16), transparent 60%),
        var(--surface-2);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.12), var(--e2);
}

.df-plan--featured .df-plan__rail { height: 4px; opacity: 1; }

/* --- سر کارت --- */

.df-plan__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }

/* عدد بالانس ‎dir=ltr‎ است؛ بدون این دو خط در حالت راست‌چین به لبهٔ چپِ
   ستون می‌چسبد و زیر برچسب شناور به نظر می‌رسد */
.df-plan__id { flex: 1 1 auto; min-width: 0; text-align: right; }
[dir="ltr"] .df-plan__id { text-align: left; }

.df-plan__tag {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    border-color: color-mix(in srgb, var(--hue) 32%, transparent);
    background: rgba(var(--sheen), 0.05);
    background: color-mix(in srgb, var(--hue) var(--veil-md), transparent);
    color: var(--hue);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.df-plan__ribbon {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 10px;
    border-radius: var(--r-pill);
    border: 0;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 11px;
    font-weight: 700;
    flex: none;
}

.df-plan__balance {
    margin-top: 10px;
    font-size: 44px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.03em;
    background-image: linear-gradient(165deg, var(--mix-lift) 34%, var(--hue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.df-plan__balance i { font-style: normal; font-size: 0.56em; vertical-align: 0.32em; opacity: 0.75; }

.df-plan__meta { margin-top: 6px; color: var(--text-3); font-size: 12px; }

/* --- قیمت --- */

.df-plan__price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 14px 12px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: rgba(var(--sheen), 0.028);
}

.df-plan__now { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.df-plan__now b { font-size: 27px; font-weight: 800; line-height: 1.2; color: var(--accent); }
.df-plan__now span { color: var(--text-3); font-size: 12px; }

.df-plan__off {
    display: inline-grid;
    justify-items: center;
    gap: 1px;
    padding: 5px 10px;
    border-radius: var(--r-sm);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.2;
    flex: none;
}

.df-plan__off b { font-size: 14px; font-weight: 800; }

.df-plan__compare {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    font-size: 12px;
}

.df-plan__was { color: var(--text-3); }
.df-plan__was b { margin-inline-start: 4px; color: var(--text-3); font-weight: 600; text-decoration: line-through; }

.df-plan__saving { display: inline-flex; align-items: center; gap: 5px; color: var(--pos); font-weight: 700; }

/* --- کاشی‌های مشخصات: به‌جای پنج ردیف هم‌شکل، شبکهٔ دوستونی --- */

.df-plan__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.df-plan__stat {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    background: rgba(var(--sheen), 0.03);
    border: 1px solid rgba(var(--sheen), 0.055);
}

.df-plan__stat span { color: var(--text-3); font-size: 11px; line-height: 1.5; }

/* عدد ‎dir=ltr‎ است؛ ‎justify-self:start‎ نسبت به همان ltr حل می‌شود و عدد به چپ
   می‌پرد، پس اینجا عمداً کلیدواژهٔ فیزیکی می‌گذاریم */
.df-plan__stat b { justify-self: right; color: var(--text); font-size: 15px; font-weight: 800; }
[dir="ltr"] .df-plan__stat b { justify-self: left; }

/* کاشی تمام‌عرض افقی می‌شود تا نیمهٔ خالی نماند */
.df-plan__stat--wide {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* سهم سود مهم‌ترین عدد کارت است؛ نوار افقی با رنگ رده */
.df-plan__stat--key {
    border-color: var(--border);
    border-color: color-mix(in srgb, var(--hue) 26%, transparent);
    background: rgba(var(--sheen), 0.04);
    background: color-mix(in srgb, var(--hue) var(--veil-sm), transparent);
}

.df-plan__stat--key span { color: var(--text-2); font-size: 12px; }
.df-plan__stat--key b { color: var(--hue); font-size: 17px; }

.df-plan__cta { margin-top: auto; gap: 8px; }
.df-plan__cta .df-i { transition: transform var(--t-fast) var(--ease-out); }
.df-plan__cta:hover .df-i { transform: translateX(var(--df-arrow, -3px)); }
[dir="ltr"] .df-plan__cta { --df-arrow: 3px; }

@media (max-width: 400px) {
    .df-plan { padding: 22px 16px 18px; }
    .df-plan__balance { font-size: 38px; }
    .df-plan__now b { font-size: 23px; }
}

/* ===== 18. feature bento ================================================== */

.df-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }

.df-feature {
    display: flex;
    padding: 26px 24px;
    transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) ease;
}

/* سه ریتم متفاوت: عددیِ بزرگ، کوتاه، پهنِ افقی */
.df-feature--hero {
    grid-column: span 3;
    flex-direction: column;
    gap: 20px;
    padding: clamp(26px, 3vw, 34px);
}

.df-feature--third { grid-column: span 2; flex-direction: column; gap: 16px; }
.df-feature--wide { grid-column: span 3; align-items: flex-start; gap: 18px; }

.df-feature__body { min-width: 0; }

.df-feature__metric {
    margin-bottom: 4px;
    font-size: clamp(34px, 4.6vw, 52px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--hue);
}

@supports (color: color-mix(in srgb, red, blue)) {
    .df-feature__metric {
        background: linear-gradient(180deg, color-mix(in srgb, var(--hue) 45%, var(--mix-lift)), var(--hue));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.df-feature h3 { margin-bottom: 8px; font-size: 17px; }
.df-feature--hero h3 { font-size: 19px; }
.df-feature p { color: var(--text-2); font-size: 14px; }

/* ===== 19. steps timeline ================================================= */

.df-steps { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 16px; }

.df-step { position: relative; padding: 26px 22px; }

.df-step__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

/* شمارهٔ قدم به‌صورت واترمارک بزرگ و کم‌رنگ، نه یک دایرهٔ دیگر */
.df-step__n {
    font-family: Inter, 'Plus Jakarta Sans', sans-serif;
    font-size: 40px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    color: color-mix(in srgb, var(--hue) 26%, transparent);
    transition: color var(--t-slow) ease;
}

.df-step:hover .df-step__n { color: color-mix(in srgb, var(--hue) 48%, transparent); }

/* نوار رنگیِ بالای کارت — چون کارت شیشه‌ای overflow:hidden دارد، خطِ رابط
   بین کارت‌ها بریده می‌شد؛ این نوارِ داخلی همان نقش «مسیر» را بازی می‌کند. */
.df-step::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--hue), transparent);
    opacity: 0.55;
    transition: opacity var(--t-slow) ease;
}

.df-step:hover::after { opacity: 1; }

.df-step h3 { margin-bottom: 8px; font-size: 16.5px; }
.df-step p { color: var(--text-2); font-size: 13.8px; }

/* ===== 20. table ========================================================== */

.df-table-wrap {
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--hue) var(--veil-sm), transparent), transparent 180px),
        rgba(var(--surface-rgb), 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(var(--sheen), 0.08);
    overflow: auto;
}
.df-table { width: 100%; min-width: 660px; }

/* راهنمای کشیدنِ جدول فقط روی موبایل معنا دارد (بخش ۲۷ روشنش می‌کند) */
.df-tablehint { display: none; }
.df-table th, .df-table td { padding: 15px 18px; text-align: start; font-size: 14px; border-bottom: 1px solid var(--border); }

.df-table thead th {
    position: sticky;
    top: 0;
    background: transparent;
    color: var(--text-3);
    font-weight: 800;
    white-space: nowrap;
}

.df-table tbody tr:last-child td { border-bottom: 0; }
.df-table tbody tr:nth-child(even) { background: rgba(var(--sheen), 0.02); }
.df-table tbody tr:hover { background: color-mix(in srgb, var(--hue) var(--veil-sm), transparent); }
.df-table thead th { color: color-mix(in srgb, var(--hue) 60%, var(--mix-lift)); }
.df-table .is-price { color: var(--accent); font-weight: 700; }

/* ===== 21. میز پرسش (Q&A console) =========================================
   به‌جای آکاردئونِ همیشگی: ستون فهرست (جستجو + فیلتر + پرسش‌های شماره‌دار) و
   ستون پاسخ که با انتخاب هر پرسش عوض می‌شود.

   ستون پاسخ absolute است نه یک ستون گرید — چون پنل‌ها داخل آیتم‌ها هستند تا
   روی موبایل بدون markup دوم به آکاردئون تبدیل شوند. ارتفاع بخش را همیشه
   فهرست تعیین می‌کند، پس پنل‌ها روی هم می‌نشینند و محو/ظاهر می‌شوند.
   ========================================================================== */

.df-qa {
    --rail: clamp(250px, 33%, 380px);
    --qa-gap: clamp(18px, 3vw, 34px);

    position: relative;
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    gap: 8px var(--qa-gap);
    align-content: start;
    width: min(100%, 1080px);
    margin-inline: auto;
    /* پنل بلندتر از فهرست نباید از بخش بیرون بزند */
    min-height: 480px;
}

/* همهٔ اجزای فهرست در ستون اول می‌نشینند؛ ستون دوم فقط جا باز می‌کند */
.df-qa__search,
.df-qa__filters,
.df-qa__item { grid-column: 1; }

/* هر سه اینها display صریح دارند و بدون این خط، صفتِ hidden را نادیده می‌گیرند */
.df-qa__item[hidden],
.df-qa__clear[hidden],
.df-qa__empty[hidden] { display: none; }

/* --- خط فرمانِ جستجو --- */

.df-qa__search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding-inline: 15px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: rgba(var(--sheen), 0.03);
    transition: border-color var(--t-base) ease, box-shadow var(--t-base) ease;
}

.df-qa__search:focus-within {
    border-color: color-mix(in srgb, var(--hue) 45%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--hue) 10%, transparent);
}

.df-qa__prompt { font-size: 15px; font-weight: 800; color: var(--hue); }

.df-qa__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    outline: none;
}

.df-qa__input::placeholder { color: var(--text-3); }

/* ضربدرِ داخلی مرورگر با دکمهٔ خودمان دوتا می‌شد */
.df-qa__input::-webkit-search-cancel-button,
.df-qa__input::-webkit-search-decoration { -webkit-appearance: none; display: none; }

.df-qa__clear {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: rgba(var(--sheen), 0.07);
    color: var(--text-2);
    transition: background var(--t-base) ease, color var(--t-base) ease;
}

.df-qa__clear:hover { background: color-mix(in srgb, var(--hue) 25%, transparent); color: var(--text); }

/* --- چیپ‌های موضوع --- */

.df-qa__filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 6px; }

.df-qa__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 33px;
    padding-inline: 11px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: transparent;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-3);
    transition: color var(--t-base) ease, border-color var(--t-base) ease, background var(--t-base) ease;
}

.df-qa__chip .df-i { width: 14px; height: 14px; color: var(--hue); }
.df-qa__chip:hover { color: var(--text); border-color: var(--border-2); }

.df-qa__chip.is-active {
    color: var(--text);
    border-color: color-mix(in srgb, var(--hue) 45%, transparent);
    background: color-mix(in srgb, var(--hue) var(--veil-md), transparent);
}

.df-qa__badge {
    font-style: normal;
    font-size: 10px;
    line-height: 1;
    padding: 3px 6px;
    border-radius: var(--r-pill);
    background: rgba(var(--sheen), 0.08);
    color: var(--text-3);
}

.df-qa__chip.is-active .df-qa__badge {
    background: color-mix(in srgb, var(--hue) var(--veil-2xl), transparent);
    color: var(--text);
}

/* --- ردیف پرسش --- */

.df-qa__q {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 11px 14px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: transparent;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.7;
    text-align: start;
    color: var(--text-2);
    transition: color var(--t-base) ease, background var(--t-base) ease, border-color var(--t-base) ease;
}

.df-qa__num {
    flex: none;
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-3);
    transition: color var(--t-base) ease;
}

.df-qa__text { flex: 1; }

.df-qa__caret {
    display: none;
    flex: none;
    color: var(--text-3);
    transition: transform var(--t-base) var(--ease-out), color var(--t-base) ease;
}

.df-qa__item:hover .df-qa__q { color: var(--text); background: rgba(var(--sheen), 0.03); }

.df-qa__item.is-open .df-qa__q {
    color: var(--text);
    background: color-mix(in srgb, var(--hue) var(--veil-md), transparent);
    border-color: color-mix(in srgb, var(--hue) 32%, transparent);
}

.df-qa__item.is-open .df-qa__num { color: var(--hue); }

/* شاخص رنگیِ پرسش فعال */
.df-qa__item.is-open .df-qa__q::before {
    content: "";
    position: absolute;
    inset-inline-start: -1px;
    top: 50%;
    width: 3px;
    height: 22px;
    margin-top: -11px;
    border-radius: var(--r-pill);
    background: var(--hue);
}

/* --- ستون پاسخ --- */

.df-qa__panel {
    position: absolute;
    inset-inline-start: calc(var(--rail) + var(--qa-gap));
    inset-inline-end: 0;
    top: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition:
        opacity var(--t-slow) var(--ease-out),
        transform var(--t-slow) var(--ease-out),
        visibility 0s linear var(--t-slow);
}

.df-qa__item.is-open .df-qa__panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.df-qa__card {
    position: relative;
    overflow: hidden;
    padding: clamp(20px, 2.4vw, 30px);
    border: 1px solid color-mix(in srgb, var(--hue) 24%, var(--border));
    border-radius: var(--r-xl);
    background:
        linear-gradient(158deg, color-mix(in srgb, var(--hue) var(--veil-sm), transparent), transparent 48%),
        rgba(var(--surface-rgb), 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(var(--sheen), 0.07), 0 24px 60px rgba(var(--shade), 0.4);
}

/* خط موییِ رنگی لبهٔ بالا */
.df-qa__card::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hue), transparent);
    opacity: 0.85;
}

.df-qa__watermark {
    position: absolute;
    inset-inline-end: 4px;
    top: -46px;
    font-size: 190px;
    font-weight: 800;
    line-height: 1;
    color: color-mix(in srgb, var(--hue) 9%, transparent);
    pointer-events: none;
    user-select: none;
}

.df-qa__card-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.df-qa__tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    border: 1px solid color-mix(in srgb, var(--hue) 30%, transparent);
    background: color-mix(in srgb, var(--hue) var(--veil-md), transparent);
    font-size: 11px;
    font-weight: 700;
    color: var(--hue);
}

.df-qa__tag .df-i { width: 13px; height: 13px; }

.df-qa__index { font-size: 12px; font-weight: 700; color: var(--text-2); }
.df-qa__index i { font-style: normal; color: var(--text-3); }

.df-qa__title {
    position: relative;
    margin-bottom: 12px;
    font-size: clamp(17px, 1.6vw, 20px);
    font-weight: 800;
    line-height: 1.6;
    color: var(--text);
}

.df-qa__body {
    position: relative;
    font-size: 14px;
    line-height: 2.05;
    color: var(--text-2);
}

.df-qa__card-foot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.df-qa__card-foot b { display: block; font-size: 13px; color: var(--text); }
.df-qa__card-foot span { font-size: 12px; color: var(--text-3); }

/* --- راهنمای کیبورد --- */

.df-qa__keys {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding-inline-start: 4px;
    font-size: 11px;
    color: var(--text-3);
}

.df-qa__keys kbd {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding-inline: 5px;
    border: 1px solid var(--border-2);
    border-radius: 6px;
    background: rgba(var(--sheen), 0.04);
    font-family: inherit;
    font-size: 11px;
    color: var(--text-2);
}

/* --- حالت خالی --- */

.df-qa__empty {
    grid-column: 1 / -1;
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 34px 20px;
    border: 1px dashed var(--border-2);
    border-radius: var(--r-lg);
    text-align: center;
}

.df-qa__empty b { font-size: 15px; color: var(--text); }
.df-qa__empty span { font-size: 13px; color: var(--text-3); }
.df-qa__empty .df-btn { margin-top: 8px; }

/* --- موبایل: همان DOM، این‌بار آکاردئون --- */

@media (max-width: 900px) {
    .df-qa {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        width: 100%;
    }

    .df-qa__caret { display: block; }
    .df-qa__item.is-open .df-qa__caret { transform: rotate(180deg); color: var(--hue); }

    .df-qa__panel {
        position: static;
        display: grid;
        grid-template-rows: 0fr;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: grid-template-rows var(--t-slow) var(--ease-in-out);
    }

    .df-qa__item.is-open .df-qa__panel { grid-template-rows: 1fr; }

    /* محتوای بسته نباید در دسترس صفحه‌خوان و تب بماند */
    .df-qa__inner {
        overflow: hidden;
        visibility: hidden;
        transition: visibility 0s linear var(--t-slow);
    }

    .df-qa__item.is-open .df-qa__inner { visibility: visible; transition-delay: 0s; }

    .df-qa__card { margin: 8px 0 4px; border-radius: var(--r-lg); }
    .df-qa__watermark { display: none; }
    .df-qa__keys { display: none; }
}

/* ===== 22. final cta ====================================================== */

.df-final {
    position: relative;
    padding: clamp(44px, 6vw, 76px) clamp(20px, 4vw, 56px);
    border-radius: var(--r-xl);
    border: 1px solid rgba(var(--sheen), 0.1);
    background:
        radial-gradient(760px 340px at 50% 0%, rgba(var(--accent-rgb), 0.18), transparent 70%),
        radial-gradient(520px 260px at 8% 108%, rgba(169, 139, 255, 0.16), transparent 70%),
        radial-gradient(520px 260px at 92% 108%, rgba(247, 184, 75, 0.14), transparent 70%),
        linear-gradient(160deg, rgba(var(--sheen), 0.05), rgba(var(--sheen), 0.01) 46%),
        var(--tint-2);
    /* بدون backdrop-filter — دقیقاً به همان دلیلِ فوتر: هالهٔ ::before اینجا
       بی‌وقفه می‌چرخد و اگر ظرفش بلورِ پس‌زمینه داشته باشد، هر فریم کلِ کارتِ
       تمام‌عرض دوباره بلور می‌شود. این کارت درست بالای فوتر است، پس هر دو
       با هم وارد کادر دید می‌شدند. */
    box-shadow:
        inset 0 1px 0 rgba(var(--sheen), 0.15),
        0 30px 70px rgba(var(--shade), 0.45);
    text-align: center;
    overflow: hidden;
}

/* حلقهٔ نوریِ چرخانِ بالای کارت — تنها جای صفحه که این‌قدر تزئینی می‌شویم */
.df-final::before {
    content: "";
    position: absolute;
    inset-inline: 50%;
    top: -180px;
    width: 620px;
    height: 320px;
    translate: -50% 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
                transparent 0deg,
                rgba(var(--accent-rgb), 0.35) 60deg,
                transparent 140deg,
                rgba(106, 166, 255, 0.3) 220deg,
                transparent 300deg);
    filter: blur(46px);
    opacity: 0.75;
    pointer-events: none;
    animation: df-halo 22s linear infinite;
}

@keyframes df-halo { to { rotate: 360deg; } }

.df-final > * { position: relative; }

.df-final h2 { font-size: clamp(24px, 3.4vw, 40px); font-weight: 900; }

/* گرادیانِ متن پشتِ ‎@supports‎ می‌ماند: بدون color-mix، پس‌زمینه بی‌اعتبار
   می‌شود ولی ‎color: transparent‎ سرِ جایش می‌ماند و تیتر نامرئی می‌شود.
   حالت پایه یک رنگ ساده است. */
.df-final h2 em {
    font-style: normal;
    color: var(--accent);
}

@supports (color: color-mix(in srgb, red, blue)) {
    .df-final h2 em {
        background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 55%, var(--mix-lift)), var(--accent));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}
.df-final p { max-width: 560px; margin: 16px auto 0; color: var(--text-2); }
.df-final__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }

/* ===== 23. footer — «ته‌بلیت جشنواره» =====================================
   فوتر عمداً شبیه فوترهای معمول نیست: یک بلیت است که از صفحه کنده شده.
   لبهٔ بالا با ماسک پرفراژ شده، مشخصات در فیلدهای فرم‌مانند می‌آید، مُهر
   گرد نرخ رویش خورده و پایینش بارکدی است که از خود کد تخفیف ساخته می‌شود.
   ========================================================================== */

/* نه backdrop-filter، نه mask روی خود فوتر — و این عمدی است.
   داخل فوتر دو انیمیشن بی‌پایان هست (چرخش متن مُهر و اسکن بارکد). اگر ظرفِ
   آن‌ها هم‌زمان بلور پس‌زمینه و ماسک داشته باشد، مرورگر مجبور است هر فریم
   کلِ نوارِ تمام‌عرض فوتر را دوباره بلور و دوباره ماسک کند و آفscreen بسازد؛
   با ۲۰+ لایهٔ شیشه‌ای دیگر روی صفحه، حافظهٔ کامپوزیتور تمام می‌شود و رندرر
   کشته می‌شود («صفحه کرش می‌کند») — دقیقاً به‌محض رسیدن به فوتر.
   پس‌زمینه اینجا کدر است تا به بلور نیازی نباشد. */
.df-foot {
    --perf: 10px;

    position: relative;
    margin-top: clamp(56px, 8vw, 110px);
    padding: calc(var(--perf) + clamp(46px, 6vw, 74px)) 0 clamp(22px, 3vw, 30px);
    background:
        radial-gradient(720px 300px at 50% 0%, rgba(var(--accent-rgb), 0.10), transparent 68%),
        linear-gradient(180deg, rgba(var(--sheen), 0.05), rgba(var(--sheen), 0.014) 30%, transparent 60%),
        var(--tint-1);
}

/* پرفراژ به‌جای ماسکِ کلِ فوتر، یک نوار ۲۰ پیکسلی روی لبهٔ بالاست: دایره‌ها
   با رنگ پس‌زمینهٔ صفحه کشیده می‌شوند، پس «بریدگی» دیده می‌شود بدون اینکه
   چیزی ماسک شود. خط‌چینِ تا خوردن هم لایهٔ دوم همین نوار است. */
.df-foot__perf {
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: calc(var(--perf) + 8px);
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg,
            rgba(var(--sheen), 0.22) 0 7px, transparent 7px 15px)
            0 calc(var(--perf) + 6px) / 100% 1px repeat-x,
        radial-gradient(circle var(--perf) at 50% 0,
            var(--bg) var(--perf), transparent calc(var(--perf) + 0.5px))
            0 0 / calc(var(--perf) * 3.2) 100% repeat-x;
}

/* --- سربرگ بلیت --- */

.df-foot__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: clamp(24px, 4vw, 56px);
    padding-bottom: clamp(26px, 3.4vw, 40px);
    border-bottom: 1px dashed rgba(var(--sheen), 0.14);
}

.df-foot__brand { display: inline-block; }
.df-foot__logo { width: clamp(150px, 30vw, 186px); }

.df-foot__brand:hover .df-logo__dollar {
    fill: var(--accent-2);
    transform: scale(1.12);
    transform-origin: 71px 78px;
    transition: transform var(--t-base) var(--ease-out), fill var(--t-base) ease;
}

.df-foot__about {
    max-width: 460px;
    margin-top: 18px;
    color: var(--text-2);
    font-size: 13.5px;
    line-height: 2.05;
}

/* فیلدهای بلیت — برچسب ریز بالا، مقدار درشتِ تک‌فاصله پایین */
.df-foot__fields {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px 0 0;
}

.df-foot__field {
    padding: 9px 16px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    border-inline-start: 2px solid var(--hue);
    background: rgba(var(--sheen), 0.03);
}

.df-foot__field dt {
    color: var(--text-3);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.df-foot__field dd {
    margin: 3px 0 0;
    color: var(--hue);
    font-family: Inter, 'Plus Jakarta Sans', monospace;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

.df-foot__social { display: flex; gap: 10px; margin-top: 24px; }

/* کاشی‌های سه‌بعدی همان کاشی آیکون بقیهٔ صفحه‌اند؛ فقط لینک‌اند */
.df-foot__social .df-tile { width: 44px; height: 44px; }
.df-foot__social .df-tile:hover { transform: perspective(420px) rotateX(-10deg) translateY(-3px) scale(1.05); }

/* --- مُهر گرد --- */

/* ستون مُهر: هم‌قدِ بلوک متنِ کنارش کشیده می‌شود و مُهر وسطش می‌ایستد.
   خط‌چین لبهٔ داخلی، مرزِ «ته‌بلیت» را می‌سازد. */
.df-foot__stamp {
    align-self: stretch;
    display: grid;
    place-items: center;
    padding-inline-start: clamp(18px, 3vw, 40px);
    border-inline-start: 1px dashed rgba(var(--sheen), 0.14);
}

/* خودِ مُهر: ارتفاع را از ستون می‌گیرد، پس با بلندشدن متن بزرگ‌تر می‌شود */
.df-foot__stamp-badge {
    position: relative;
    height: min(100%, 232px);
    aspect-ratio: 1;
    width: auto;
    min-height: 132px;
    rotate: -7deg;
    opacity: 0.92;
    transition: rotate var(--t-slow) var(--ease-out), scale 900ms var(--ease-out);
}

.df-foot__stamp-badge:hover { rotate: 0deg; }

/* لحظهٔ «مُهر خوردن»: تا وقتی عدد دارد پایین می‌آید کمی بزرگ‌تر است */
.df-foot__stamp-badge.is-rolling { scale: 1.045; transition-duration: 260ms; }

.df-foot__stamp-badge svg { width: 100%; height: 100%; overflow: visible; }

/* حالت پایه سبز است، نه سفید — اگر جاوااسکریپت نرسید، مُهر همان رنگ برند
   بماند. سفیدشدن فقط حین شمردن اتفاق می‌افتد و برگشتش عمداً کُند است. */
.df-foot__stamp-ring {
    fill: none;
    stroke: color-mix(in srgb, var(--accent) 45%, transparent);
    stroke-width: 2.5;
    transition: stroke 1900ms var(--ease-out);
}

.df-foot__stamp-ring--in { stroke-width: 1; stroke-dasharray: 3 5; }

.df-foot__stamp-rule {
    stroke: color-mix(in srgb, var(--accent) 28%, transparent);
    stroke-width: 1;
    transition: stroke 1900ms var(--ease-out);
}

.df-foot__stamp-badge.is-rolling .df-foot__stamp-ring {
    stroke: rgba(var(--sheen), 0.62);
    transition-duration: 220ms;
}

.df-foot__stamp-badge.is-rolling .df-foot__stamp-rule {
    stroke: rgba(var(--sheen), 0.34);
    transition-duration: 220ms;
}

/* direction:ltr اجباری است. زیر dir="rtl" متنِ روی مسیر از نقطهٔ شروع به
   عقب چیده می‌شود، از مسیر بیرون می‌افتد و مرورگر هیچ گلیفی نمی‌کشد —
   یعنی حلقهٔ نوشته کاملاً ناپدید می‌شود. رشته هم لاتین است، پس ltr درست است. */
.df-foot__stamp-text {
    fill: color-mix(in srgb, var(--accent) 78%, var(--mix-lift));
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    direction: ltr;
    unicode-bidi: isolate;
}

/* متن روی کمان آرام می‌چرخد — تنها حرکت دائمی فوتر */
.df-foot__stamp-spin {
    transform-origin: 80px 80px;
    animation: df-stamp-spin 44s linear infinite;
}

@keyframes df-stamp-spin { to { rotate: 360deg; } }

.df-foot__stamp-core {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 2px;
    text-align: center;
    pointer-events: none;
}

/* عدد مُهر با vw مقیاس می‌گیرد، نه با cqw.
   کانتینر-کوئری اینجا خطرناک بود: عرضِ مُهر از aspect-ratio × ارتفاعِ درصدی
   می‌آمد و فونت هم از همان عرض؛ یعنی چیدمان به خودش ارجاع می‌داد. مُهر
   خودش بین ۱۳۲ تا ۲۳۲ پیکسل کران‌دار است، پس clamp با vw همان نتیجه را
   بدون حلقهٔ چیدمان می‌دهد. */
.df-foot__stamp-core b {
    font-size: clamp(21px, 2.7vw, 33px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--accent);
    /* برگشت از سفید به سبز عمداً خیلی نرم است */
    transition: color 1900ms var(--ease-out), text-shadow 1900ms var(--ease-out);
}

/* حین شمردن سفید و نورانی است؛ رسیدن به سفید سریع، برگشتش کُند */
.df-foot__stamp-badge.is-rolling .df-foot__stamp-core b {
    color: var(--text);
    text-shadow: 0 0 26px rgba(var(--sheen), 0.45);
    transition-duration: 220ms;
}

.df-foot__stamp-core span { color: var(--text-3); font-size: clamp(10px, 1.1vw, 13px); }

/* --- ستون‌های لینک --- */

.df-foot__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 40px);
    padding: clamp(26px, 3.4vw, 38px) 0;
    border-bottom: 1px dashed rgba(var(--sheen), 0.14);
}

.df-foot__col h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text);
}

/* شمارهٔ ستون — همان زبانِ شماره‌های منوی بالا */
.df-foot__idx {
    display: grid;
    place-items: center;
    min-width: 26px;
    height: 22px;
    padding: 0 6px;
    border-radius: 7px;
    border: 1px solid color-mix(in srgb, var(--hue) 38%, transparent);
    background: color-mix(in srgb, var(--hue) var(--veil-md), transparent);
    color: var(--hue);
    font-family: Inter, sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    font-style: normal;
    letter-spacing: 0.04em;
}

.df-foot__col ul { display: grid; gap: 2px; }

.df-foot__col a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 42px;
    padding: 0 12px;
    margin-inline-start: -12px;
    border-radius: var(--r-sm);
    color: var(--text-2);
    font-size: 13.5px;
    transition: color var(--t-fast) ease, background var(--t-fast) ease;
}

.df-foot__col a:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--hue) var(--veil-md), transparent);
}

/* پیکان فقط با هوور از حاشیه می‌آید تو */
.df-foot__arrow {
    color: var(--hue);
    opacity: 0;
    translate: -6px 0;
    transition: opacity var(--t-fast) ease, translate var(--t-base) var(--ease-out);
}

[dir="ltr"] .df-foot__arrow { translate: 6px 0; }
.df-foot__col a:hover .df-foot__arrow { opacity: 1; translate: 0 0; }

/* --- ته‌بلیت: بارکد و سریال --- */

.df-foot__stub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: clamp(20px, 2.6vw, 28px) 0 0;
}

/* بارکد از کد تخفیف ساخته می‌شود؛ عرض هر میله در ‎--w‎ آمده است */
.df-foot__barcode {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 34px;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.df-foot__barcode i {
    display: block;
    width: calc(var(--w) * 2px);
    height: 100%;
    border-radius: 1px;
    background: rgba(var(--sheen), 0.42);
}

.df-foot__barcode i.is-dim { height: 62%; background: rgba(var(--sheen), 0.16); }

/* درخششی که آرام از روی بارکد رد می‌شود — مثل اسکن‌شدن بلیت */
.df-foot__barcode::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 22%;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), transparent);
    animation: df-scan 5.5s var(--ease-in-out) infinite;
    pointer-events: none;
}

.df-foot__barcode { position: relative; }

@keyframes df-scan {
    0%, 12%  { translate: -120% 0; }
    60%, 100% { translate: 560% 0; }
}

.df-foot__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    color: var(--text-3);
    font-size: 12.5px;
}

.df-foot__serial {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--r-sm);
    border: 1px dashed rgba(var(--sheen), 0.16);
    font-family: Inter, monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
}

.df-foot__serial span { color: var(--text-3); }
.df-foot__serial b { color: var(--text-2); font-weight: 700; }
.df-foot__rights { color: var(--text-2); }

/* طول سطر مهار می‌شود؛ تمام‌عرض شدنِ این پاراگراف خواندنش را سخت می‌کرد */
.df-foot__note {
    max-width: 88ch;
    margin-top: 18px;
    color: var(--text-3);
    font-size: 12px;
    line-height: 2.1;
}

@media (max-width: 900px) {
    /* تک‌ستونه که شد، خط‌چینِ عمودیِ لبهٔ مُهر بی‌معنی می‌شود و افقی می‌آید بالای آن */
    .df-foot__head { grid-template-columns: 1fr; }

    .df-foot__stamp {
        justify-self: start;
        padding: clamp(18px, 5vw, 28px) 0 0;
        border-inline-start: 0;
        border-top: 1px dashed rgba(var(--sheen), 0.14);
        width: 100%;
        place-items: center start;
    }

    .df-foot__stamp-badge { height: auto; width: clamp(132px, 34vw, 172px); }
    .df-foot__cols { grid-template-columns: 1fr; gap: 8px; }
    .df-foot__col h4 { margin-bottom: 8px; }
}

/* ===== 24. mobile dock ==================================================== */

.df-dock {
    position: fixed;
    inset-inline: 12px;
    bottom: 12px;
    z-index: var(--z-dock);
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--r-lg);
    border: 1px solid rgba(var(--accent-rgb), 0.28);
    background: rgba(var(--bg-rgb), 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--e3);
    transform: translateY(150%);
    transition: transform var(--t-slow) var(--ease-out);
}

.df-dock.is-visible { transform: translateY(0); }
.df-dock__text { font-size: 12.5px; color: var(--text-2); }
.df-dock__text b { display: block; color: var(--gold-300); font-size: 15px; }

/* ===== 24b. back to top =================================================== */

.df-top {
    position: fixed;
    inset-inline-end: 24px;
    bottom: 24px;
    z-index: var(--z-dock);
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: rgba(var(--bg-rgb), 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text-2);

    /* تا وقتی کاربر پایین نرفته، دکمه نه دیده می‌شود نه قابل فوکوس است */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--t-base) ease,
                visibility var(--t-base) ease,
                transform var(--t-base) var(--ease-out),
                color var(--t-fast) ease,
                border-color var(--t-fast) ease;
}

.df-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.df-top:hover { color: var(--accent); border-color: var(--accent); }
.df-top:active { transform: scale(0.94); }

.df-top .df-i { position: relative; z-index: 1; }

/* حلقهٔ پیشرفت دور دکمه */
.df-top__ring {
    position: absolute;
    inset: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    transform: rotate(-90deg);
    overflow: visible;
}

.df-top__ring circle {
    fill: none;
    stroke-width: 1.5;
    cx: 22;
    cy: 22;
}

.df-top__track { stroke: transparent; }

.df-top__bar {
    stroke: var(--accent);
    stroke-linecap: round;
    /* محیط دایره با r=20 حدود ۱۲۵.۷ است؛ JS فقط offset را عوض می‌کند */
    stroke-dasharray: 125.7;
    stroke-dashoffset: 125.7;
    transition: stroke-dashoffset 120ms linear;
}

@media (max-width: 720px) {
    /* روی موبایل نوار چسبان پایین صفحه است، پس دکمه باید بالاتر بنشیند */
    .df-top { inset-inline-end: 16px; bottom: 88px; width: 42px; height: 42px; }
}

/* ===== 25. reveal ========================================================= */

.df-reveal { opacity: 0; transform: translateY(24px); }

.df-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}

/* ===== 26. lenis ========================================================== */

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ===== 27. responsive ===================================================== */

@media (max-width: 1024px) {
    .df-feature--hero { grid-column: span 6; }
    .df-feature--wide { grid-column: span 6; }
    .df-feature--third { grid-column: span 3; }
    .df-nav__links,
    .df-nav__rule { display: none; }
    .df-nav__burger { display: grid; }
}

/* در عرض‌های میانی، چیپ نرخ جا را برای لینک‌ها باز می‌کند */
@media (max-width: 1240px) {
    .df-nav__rate-pair { display: none; }
}

@media (max-width: 1100px) {
    .df-nav__rate { display: none; }
}

/* ==========================================================================
   موبایل — از اینجا به پایین

   سه قاعده حاکم است:
   ۱) هیچ چیزی تک‌ستونهٔ تمام‌عرض نماند مگر واقعاً لازم باشد؛ کارت‌های کوتاه
      دوستونه می‌شوند (آمار، لینک‌های فوتر، کلیدهای ماشین‌حساب).
   ۲) ردیف‌های کارتِ بلند به‌جای ستون عمودیِ کشیده، «ریل» افقی می‌شوند
      (.df-mrail) — اسکرول-اسنپ بومی، بدون جاوااسکریپت و بدون تداخل با سوایپر.
   ۳) هیچ چیز زیر داک پایین صفحه گم نشود و هیچ سرریز افقی نماند.
   ========================================================================== */

/* ریل موبایل: ظرف را از شبکه به یک نوار افقیِ اسنپ‌دار تبدیل می‌کند.
   کارت اول تا لبهٔ نمایشگر می‌رود ولی هم‌تراز شل صفحه شروع می‌شود، و کارت
   بعدی همیشه کمی «سرک می‌کشد» تا معلوم باشد ادامه دارد. */
@media (max-width: 720px) {
    .df-mrail {
        display: flex;
        flex-wrap: nowrap;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 16px;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        margin-inline: -16px;
        padding: 4px 16px 6px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .df-mrail::-webkit-scrollbar { display: none; }

    .df-mrail > * {
        flex: 0 0 var(--mrail-w, 78%);
        min-width: 0;
        scroll-snap-align: center;
    }
}

@media (max-width: 720px) {
    body.df-body { font-size: 15px; }

    /* گاردِ سرریز افقی. قبلاً فقط روی نسخهٔ انگلیسی بود، در حالی که ریل‌ها و
       اسلایدرها با حاشیهٔ منفی در هر دو جهت ساخته می‌شوند. */
    body.df-body { overflow-x: hidden; }

    /* ---------------------------------------------------------------------
       قابِ مشترکِ بخش‌ها — بزرگ‌ترین برندهٔ فشرده‌سازی.
       پدینگ ۶۴px و سربرگِ ۱۹۰ پیکسلی در ۱۰ بخش یعنی حدود ۳۰۰۰px فقط قاب.
       اندازه‌ها اینجا یک پله کوچک‌تر می‌شوند، نه اینکه سلسله‌مراتب بهم بخورد.
       --------------------------------------------------------------------- */

    .df-section { padding: 44px 0; }
    .df-head { margin-bottom: 24px; }
    .df-head h2 { font-size: 23px; line-height: 1.32; }
    .df-head p { margin-top: 10px; font-size: 13.5px; line-height: 1.85; }
    .df-kicker { margin-bottom: 12px; padding: 5px 12px 5px 9px; letter-spacing: 0.1em; }
    .df-kicker .df-i { width: 13px; height: 13px; }

    .df-hero { padding-top: 24px; }

    .df-coupon { grid-template-columns: 1fr; }
    .df-coupon::before, .df-coupon::after { display: none; }
    .df-nav__rate { display: none; }
    .df-dock { display: flex; }
    .df-slider__ui { gap: 12px; }

    /* داک ثابتِ پایین، انتهای فوتر را می‌پوشاند */
    .df-foot { padding-bottom: 96px; }

    /* --- آمار: دوستونه --- */
    .df-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .df-stat--hero { grid-column: span 2; grid-row: auto; }
    .df-stat--side { grid-column: span 1; }
    .df-stat--wide { grid-column: span 2; }

    .df-stat { padding: 16px 14px; gap: 12px; }
    .df-stat--hero { gap: 14px; padding: 18px 16px; }

    /* در نصفِ عرض، کاشی کنارِ متن جا نمی‌شود */
    .df-stat--side { flex-direction: column; align-items: flex-start; }
    .df-stat--side .df-stat__value { font-size: 26px; }
    .df-stat--hero .df-stat__value { font-size: 40px; }
    .df-stat--wide .df-stat__value { font-size: 28px; }
    .df-stat--side .df-tile { width: 44px; height: 44px; }
    .df-stat__label { font-size: 12.5px; line-height: 1.8; }

    /* --- امکانات و قدم‌ها: ریل افقی --- */
    .df-bento,
    .df-steps { --mrail-w: 78%; }
    .df-feature { height: 100%; padding: 22px 18px; }
    .df-step { height: 100%; padding: 22px 18px; }

    /* در کارتِ باریکِ ریل، کاشی باید بالای متن بنشیند نه کنارش */
    .df-feature--wide { flex-direction: column; gap: 14px; }
    .df-feature__metric { font-size: 38px; }

    /* --- فوتر: ستون‌های لینک دوتایی --- */
    .df-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }

    /* سه گروه در دو ستون یعنی گروه سوم تنها می‌ماند و نصف ردیف خالی می‌شود؛
       پس تمام‌عرض می‌شود و لینک‌هایش خودشان دوستونه می‌روند */
    .df-foot__col:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .df-foot__col:last-child:nth-child(odd) ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px; }
    .df-foot__col h4 { margin-bottom: 6px; font-size: 12.5px; }
    .df-foot__col a { min-height: 44px; padding: 0 10px; margin-inline-start: -10px; font-size: 12.5px; }
    .df-foot__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .df-foot__meta { gap: 8px 12px; }

    /* ---------------------------------------------------------------------
       ماشین‌حساب روی موبایل — «یک نگاه، کل بخش»

       نسخهٔ دسکتاپ عمودی روی هم چیده می‌شد و ۱٫۷ صفحه ارتفاع می‌گرفت. اینجا:
       کلیدها شبکهٔ منظم می‌شوند، مخزن باریک و کوتاه می‌شود و نمایشگر از داخلِ
       مخزن بیرون می‌آید و کنارش می‌نشیند، و نردبان رده‌ها جای خودش را به همان
       نوار پیشرفتِ زیرش می‌دهد (اطلاعات تکراری بود).
       --------------------------------------------------------------------- */

    .df-vault { gap: 14px; padding: 14px; }

    /* نوع و سبک: شبکهٔ سه‌ستونه (۲ و ۳ گزینه دارند و جا می‌شوند) */
    .df-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .df-keys .df-key { flex: none; width: 100%; padding: 0 8px; font-size: 13px; }

    /* بالانس ۹ گزینه دارد و شبکه‌اش سه ردیف می‌شد (۱۴۲px). یک ریل تک‌ردیفه
       همان کار را در ۴۲px انجام می‌دهد و کل ویجت را در یک صفحه جا می‌کند. */
    .df-keys--wrap {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin-inline: -14px;
        padding-inline: 14px;
        scroll-padding-inline: 14px;
    }

    .df-keys--wrap::-webkit-scrollbar { display: none; }
    .df-keys--wrap .df-key { flex: none; width: auto; min-width: 84px; scroll-snap-align: start; }

    .df-vault__console { gap: 14px; }
    .df-cons { gap: 11px; }
    .df-cons__step { gap: 10px; }
    .df-cons__no { width: 22px; height: 22px; font-size: 11px; }
    .df-cons__label { margin-bottom: 6px; font-size: 12.5px; }

    .df-versus { padding: 12px; gap: 10px; }
    .df-bar__label { font-size: 12px; }
    .df-bar b { font-size: 14px; }
    .df-bar--new b { font-size: 17px; }
    .df-bar__track { height: 7px; }
    .df-versus__foot { padding-top: 10px; }

    .df-vault__stage { gap: 12px; padding: 14px; }
    .df-tankwrap { height: auto; gap: 0; }

    /* مخزن و نمایشگر کنار هم: عدد از روی مایع می‌آید بیرون و بزرگ‌تر و
       خواناتر می‌شود، و ۶۰px ارتفاع صرفه‌جویی می‌شود */
    .df-tank { display: flex; align-items: center; gap: 14px; height: auto; flex: 1 1 auto; }
    .df-tank svg { flex: none; height: 168px; width: auto; }

    .df-tank__readout {
        position: static;
        flex: 1 1 auto;
        min-width: 0;
        display: block;
        padding: 0;
        text-align: start;
    }

    /* بیرون از مخزن دیگر پرده لازم نیست */
    .df-tank__plate {
        display: block;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    .df-tank__value { font-size: 30px; }
    .df-tank__pct { margin-top: 10px; }

    /* نردبان عمودی حذف می‌شود؛ همان اطلاعات در نوار پیشرفتِ زیر هست */
    .df-ranks { display: none; }
    .df-rankbar { margin-top: 2px; }

    /* --- میز پرسش: چیپ‌های موضوع به‌جای سه ردیفِ شکسته، یک ریل افقی --- */
    .df-qa__filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin-inline: -16px;
        padding-inline: 16px;
        padding-block: 2px;
        scroll-padding-inline: 16px;
        overscroll-behavior-x: contain;
    }

    .df-qa__filters::-webkit-scrollbar { display: none; }
    .df-qa__chip { flex: none; }

    .df-qa__q { padding-block: 12px; }
    .df-qa__text { font-size: 14px; line-height: 1.7; }

    /* --- جدول مقایسه: اسکرول افقی با نشانهٔ لبه --- */
    .df-table-wrap { -webkit-overflow-scrolling: touch; }
    .df-table th, .df-table td { padding: 12px 14px; font-size: 13px; }

    /* لبهٔ محوشونده روی همان سمتی که جدول از آن بیرون می‌زند:
       در RTL چپ، در LTR راست — یعنی دقیقاً inset-inline-end */
    .df-tablebox { position: relative; border-radius: var(--r-lg); }

    .df-tablehint {
        display: flex;
        align-items: center;
        gap: 7px;
        margin-bottom: 10px;
        color: var(--text-3);
        font-size: 12px;
    }

    .df-tablehint .df-i { color: var(--hue); }

    /* --- کارت پلن: فشرده‌تر بدون از دست دادن سلسله‌مراتب --- */
    .df-plan { gap: 13px; padding: 20px 16px 18px; }
    .df-plan__balance { font-size: 38px; margin-top: 8px; }
    .df-plan__price { padding: 12px 12px 10px; }
    .df-plan__now b { font-size: 24px; }
    .df-plan__stats { gap: 7px; }
    .df-plan__stat { padding: 9px 11px; }
    .df-plan__stat b { font-size: 14px; }

    /* --- فوتر: مُهر و فاصله‌ها یک پله کوچک‌تر --- */
    .df-foot { padding-top: 46px; }
    .df-foot__stamp-badge { width: clamp(112px, 28vw, 140px); }
    .df-foot__cols { padding-block: 22px; }
    .df-foot__about { font-size: 13px; line-height: 1.95; }
    .df-foot__note { margin-top: 14px; line-height: 1.95; }

    /* --- تیترها و اکشن‌ها --- */
    .df-final__actions .df-btn,
    .df-final__actions .df-cta { width: 100%; }
    .df-hero__actions { gap: 10px; }
    .df-final { padding-block: 4px; }

    /* ---------------------------------------------------------------------
       هدف‌های لمسی — حداقل ۴۴px.
       این‌ها روی دسکتاپ با نشانگر دقیق مشکلی نداشتند، ولی روی موبایل همه زیر
       حد استاندارد بودند (لوگو ۱۷px ارتفاع، برگر ۳۴px عرض، تب‌ها ۳۶px).
       --------------------------------------------------------------------- */

    .df-nav__brand { display: inline-flex; align-items: center; min-height: 44px; }

    /* بدون flex:none، برگر در ردیفِ شلوغِ نوار جمع می‌شد و عرضش به ۳۴ می‌رسید */
    .df-nav__burger { flex: none; width: 44px; min-width: 44px; height: 44px; }

    /* نوار بالا در ۴۱۴px جای چهار چیز را ندارد؛ کلید زبان از نوار برداشته
       می‌شود چون همان لینک داخل منوی برگر هم هست. بدون این کار، برچسب CTA
       («شرکت در جشن») بریده می‌شد. */
    .df-nav__lang { display: none; }
    /* سوییچ تم هم به همان دلیل از نوار می‌رود؛ نسخهٔ متنی‌اش داخل منوی برگر است */
    .df-nav__bar .df-nav__theme { display: none; }
    .df-nav__bar .df-cta--nav { flex: none; min-height: 44px; padding: 0 14px; }

    .df-foot__brand { display: inline-flex; align-items: center; min-height: 44px; }

    /* فاصلهٔ کارت تا متن در حالت تک‌ستونی را row-gap همان مدیاکوئریِ ۹۰۰
       می‌دهد؛ اینجا چیزی لازم نیست. جابه‌جایی پایه هم صفر شده، پس نه
       transform می‌خواهد نه کیفریمِ جداگانهٔ موبایل. */

    .df-tab { min-height: 44px; }
    .df-tabs--sub .df-tab { min-height: 42px; font-size: 13.5px; }

    .df-qa__chip { height: 44px; padding-inline: 14px; font-size: 12.5px; }

    /* ورودی جست‌وجو فقط ۱۸px ارتفاع داشت؛ بقیهٔ قابْ پدینگِ ظرف بود و
       ضربه به آن ناحیه فوکوس نمی‌داد */
    .df-qa__input { align-self: stretch; min-height: 44px; font-size: 16px; }

    .df-btn--sm { min-height: 44px; }

    /* --- خوانایی: هیچ متنِ معنادار زیر ۱۲px نماند --- */
    .df-kicker,
    .df-eyebrow,
    .df-stat__unit,
    .df-tank__cap,
    .df-tank__unit,
    .df-tank__pct,
    .df-plan__meta,
    .df-plan__tag,
    .df-plan__ribbon,
    .df-versus__foot,
    .df-rankbar,
    .df-rank__name,
    .df-qa__tag,
    .df-qa__badge,
    .df-qa__num,
    .df-boot__caption { font-size: 12px; }

    .df-plan__off { font-size: 12px; }
    .df-plan__off b { font-size: 15px; }
    .df-foot__field dt { font-size: 12px; }

    /* مانده‌ها عمداً ریز می‌مانند: شماره‌های نشانه‌دار، متنِ دورِ مُهر و
       بارکد — این‌ها تایپوگرافی تزئینی‌اند نه متن خواندنی */
}

/* گوشی‌های باریک: دو ستون هنوز جواب می‌دهد، فقط فشرده‌تر */
@media (max-width: 380px) {
    .df-mrail > * { --mrail-w: 86%; }
    /* فقط شبکهٔ نوع/سبک؛ بالانس روی همهٔ عرض‌ها ریل تک‌ردیفه می‌ماند */
    .df-keys:not(.df-keys--wrap) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .df-stat--hero .df-stat__value { font-size: 34px; }
    .df-foot__cols { gap: 14px 10px; }
}

/* ===== 28. calm mode ======================================================
   صحنهٔ سه‌بعدی هیچ‌وقت متوقف نمی‌شود، فقط در جاوااسکریپت کندتر می‌شود.
   چیزی که اینجا خاموش می‌شود انیمیشن‌های تزئینی است: ورود المان‌ها،
   مارکی، درخشش دکمه‌ها و اسکرول نرم.

   `html.df-calm` را جاوااسکریپت فقط با درخواست صریح می‌گذارد (?calm=1)؛
   در حالت عادی `html.df-motion` می‌نشیند و مدیاکوئریِ پایین را خنثی می‌کند.
   آن مدیاکوئری حالا فقط تور ایمنیِ «جاوااسکریپت اجرا نشده» است، وگرنه روی
   ویندوز سرور و ماشین‌های مجازی کل صفحه بی‌حرکت می‌ماند.
   ========================================================================== */

.df-calm-off,
html.df-calm *,
html.df-calm *::before,
html.df-calm *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
}

html.df-calm { scroll-behavior: auto; }
html.df-calm .df-reveal { opacity: 1; transform: none; }
html.df-calm .df-btn::after,
html.df-calm .df-cta::after { display: none; }
html.df-calm .df-ticker__track { animation: none; }
html.df-calm .df-top__bar { transition: none; }
html.df-calm .df-glass { animation: none; } /* جابه‌جایی پایه از خود .df-glass می‌آید و روی موبایل صفر است */
html.df-calm .df-final::before { animation: none; }
html.df-calm .df-foot__stamp-spin { animation: none; }
html.df-calm .df-foot__barcode::after { display: none; }
html.df-calm .df-hero__video { transform: scale(1.08); }
/* لودر در حالت آرام بدون ساخته‌شدن نمایش داده می‌شود: لوگو از همان اول کامل است */
html.df-calm .df-boot__logo,
html.df-calm .df-boot__logo .df-logo__shard,
html.df-calm .df-boot__logo .df-logo__dollar,
html.df-calm .df-boot__logo .df-logo__flare,
html.df-calm .df-boot__logo .df-logo__ch,
html.df-calm .df-boot__rate,
html.df-calm .df-boot__caption {
    animation: none;
    opacity: 1;
    fill-opacity: 1;
    stroke: none;
    transform: none;
    filter: none;
}

html.df-calm .df-boot__rain,
html.df-calm .df-boot__pulse { display: none; }

/* پشتیبان برای وقتی جاوااسکریپت اجرا نشده: تنظیم سیستم رعایت می‌شود */
@media (prefers-reduced-motion: reduce) {
    html:not(.df-motion) { scroll-behavior: auto; }

    html:not(.df-motion) *,
    html:not(.df-motion) *::before,
    html:not(.df-motion) *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    html:not(.df-motion) .df-reveal { opacity: 1; transform: none; }
    html:not(.df-motion) .df-btn::after,
    html:not(.df-motion) .df-cta::after { display: none; }
    html:not(.df-motion) .df-ticker__track { animation: none; }
    html:not(.df-motion) .df-glass { animation: none; }
    html:not(.df-motion) .df-hero__video { transform: scale(1.08); }
    html:not(.df-motion) .df-foot__stamp-spin { animation: none; }
    html:not(.df-motion) .df-foot__barcode::after { display: none; }
}

/* ===== 28. تم روشن: استثناها ================================================
   بخش ۱b تقریباً همه‌چیز را با وارونه‌کردن توکن‌ها حل می‌کند. آنچه اینجا
   می‌آید، جاهایی است که «وارونه‌کردن رنگ» کافی نیست — لایه‌هایی که ذاتاً
   برای زمینهٔ تیره ساخته شده‌اند: ویدیوی هیرو، هالهٔ blend، شیشه.
   ========================================================================== */

/* ویدیوی پس‌زمینه فوتیج تیره است؛ روی کاغذ سفید باید تا حد یک بافت کمرنگ
   عقب برود، وگرنه یک مستطیل تیره وسط صفحهٔ روشن می‌ماند */
html[data-theme="light"] .df-hero__video { opacity: 0.22; }

/* screen روی زمینهٔ روشن هیچ است (هرچه با سفید screen شود سفید می‌ماند) */
html[data-theme="light"] .df-hero__glow { mix-blend-mode: multiply; opacity: 0.5; }

/* هاله‌های نعنایی پس‌زمینه: همان آلفاها روی کاغذ سفید لکه می‌شوند */
html[data-theme="light"] .df-backdrop {
    background:
        radial-gradient(1000px 560px at 78% -10%, rgba(var(--accent-rgb), 0.09), transparent 60%),
        radial-gradient(760px 460px at 10% 6%, rgba(var(--accent-rgb), 0.05), transparent 60%),
        radial-gradient(900px 600px at 50% 106%, rgba(var(--accent-rgb), 0.06), transparent 62%),
        var(--bg);
}

/* شیشه روی کاغذ سفید معنا ندارد: پشتِ کارت چیزی برای محوکردن نیست، و چون
   کارت نیم‌شفاف است هالهٔ رنگیِ گوشه از پشتش رد می‌شود و کل کارت را پاستلی
   می‌کند — همان چیزی که کارت‌ها را «کثیف» نشان می‌داد.

   پس در تم روشن کارت سفیدِ مات می‌شود و ارتفاعش را از سایه می‌گیرد نه از
   شفافیت. هاله سرِ جایش می‌ماند ولی چون از کادر بیرون زده، فقط به‌صورت یک
   درخششِ گوشه دیده می‌شود؛ دقیقاً همان نقشی که در تم تیره دارد. */
html[data-theme="light"] .df-card--glass {
    background: var(--surface-1);
    /* بدون پس‌زمینهٔ نیم‌شفاف، بلور فقط هزینهٔ GPU است */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(var(--shade), 0.05),
        0 14px 34px rgba(var(--shade), 0.08);
}

/* هالهٔ گوشه: قطرش از خودِ کارت بزرگ‌تر است و چون ‎.df-card--glass‎ با
   ‎isolation: isolate‎ زمینهٔ چیدمان می‌سازد، ‎z-index:-1‎ نمی‌تواند پشتِ
   پس‌زمینهٔ کارت برود و روی آن می‌نشیند. روی کارت تیرهٔ نیم‌شفاف این «درخشش»
   است، ولی روی کارت سفیدِ مات یک لکهٔ پاستلیِ تمام‌کارت می‌شود.
   پس در تم روشن تا حد یک نجوای رنگی کم می‌شود؛ هویت رنگیِ کارت را کاشی
   آیکون، عدد بزرگ و کیکر می‌سازند، نه تینتِ پس‌زمینه. */
html[data-theme="light"] .df-card--glass::before { opacity: 0.45; }

/* روی هاور هم نباید به لکه برگردد */
html[data-theme="light"] .df-card--glass:hover::before { opacity: 0.7; transform: none; }

/* در تم روشن، شیشه باید سفیدِ مات باشد و نه تهِ رنگِ تیره: ‎--sheen‎ در این تم
   ‎7,19,16‎ است، پس همان ‎rgba(var(--sheen), .045)‎ که در تم تیره «نورِ کم‌جان»
   می‌سازد، اینجا یک لکهٔ خاکستری می‌شود. کارت حالا سمتِ روشنِ هیرو نشسته
   (گرادیان سمتِ متن را کم‌رنگ می‌کند نه سمتِ کارت) و بدون این بازنویسی روی
   زمینهٔ روشن گم می‌شد. */
html[data-theme="light"] .df-glass__pane {
    background: rgba(255, 255, 255, 0.52);
    background-blend-mode: normal;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.9),
        0 12px 34px rgba(7, 19, 16, 0.09);
}

/* قابِ کارت هم سفید بود، یعنی سفید روی روشن — عملاً نامرئی. مویی تیره
   می‌شود تا لبهٔ کارت در هر دو تم تعریف داشته باشد. */
html[data-theme="light"] .df-glass::before {
    background: linear-gradient(180deg, rgba(7, 19, 16, 0.20), rgba(7, 19, 16, 0.05));
}

/* ===== 29. سوییچ تم ========================================================
   کنار سوییچ زبان می‌نشیند و هم‌قد آن است (۳۸px). دو آیکون روی هم‌اند و
   با تم جابه‌جا می‌شوند، پس دکمه هرگز جای خالی نمی‌گیرد و نمی‌پرد. */

.df-nav__theme {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--text-3);
    transition: color var(--t-fast) ease, border-color var(--t-fast) ease, background var(--t-fast) ease;
}

.df-nav__theme:hover {
    color: var(--text);
    border-color: var(--border-2);
    background: rgba(var(--sheen), 0.06);
}

.df-nav__theme .df-i { grid-area: 1 / 1; transition: opacity var(--t-fast) ease, transform var(--t-base) var(--ease-out); }

/* تم تیره → ماه دیده می‌شود؛ تم روشن → خورشید */
.df-nav__theme .df-i--sun { opacity: 0; transform: rotate(-45deg) scale(0.6); }
.df-nav__theme .df-i--moon { opacity: 1; transform: none; }

html[data-theme="light"] .df-nav__theme .df-i--sun { opacity: 1; transform: none; }
html[data-theme="light"] .df-nav__theme .df-i--moon { opacity: 0; transform: rotate(45deg) scale(0.6); }

/* داخل منوی موبایل، سوییچ به شکل یک آیتم متنی در می‌آید */
.df-mobile-nav .df-nav__theme {
    width: auto;
    justify-items: start;
    grid-auto-flow: column;
    gap: 10px;
    padding-inline: 16px;
    justify-content: start;
}

@media (prefers-reduced-motion: reduce) {
    .df-nav__theme .df-i { transition: none; }
}

.df-nav__theme-text { font-size: 15px; font-weight: 500; color: var(--text-2); }


/* پنل مقایسه، جدول قوانین و ورودی جستجو در تم تیره «فرورفتگی»شان را از یک
   لایهٔ تیره‌تر می‌گیرند؛ روی کارت سفید همان لایه سفیدِ نامرئی می‌شود و پنل
   با کارت یکی به نظر می‌رسد. اینجا صریحاً سطح دومِ روشن را می‌گیرند. */
html[data-theme="light"] .df-versus,
html[data-theme="light"] .df-qa__search,
html[data-theme="light"] .df-tablebox {
    background: var(--surface-2);
}

html[data-theme="light"] .df-qa__input::placeholder { color: var(--text-3); }