/* index.php — page-specific styles (extracted) */

/* ===================================================
   Hero
   =================================================== */
.hero-section{
    max-width:var(--dzf-container);
    margin:0 auto;
    padding:0 20px;
    box-sizing:border-box;
}
.hero-section *,
.hero-section *::before,
.hero-section *::after{
    box-sizing:border-box;
}
.hero-box{
    position:relative;
    display:flex;
    flex-direction:row-reverse;
    align-items:center;
    justify-content:space-between;
    flex-wrap:nowrap;
    gap:clamp(16px, 4vw, 40px);
    border:1px solid var(--stroke);
    border-radius:var(--dzf-radius-card);
    padding:clamp(20px, 4vw, 30px) clamp(20px, 6vw, 60px);
    overflow:visible;
    min-height:220px;
    margin-top:calc(85px + var(--dzf-hero-gap));
}
.hero-content{
    flex:1 1 260px;
    text-align:right;
    max-width:560px;
    min-width:0;
}
.hero-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--primary);
    font-size:clamp(.8rem, 1.4vw, 1rem);
    font-weight:600;
    margin-bottom:clamp(8px, 1.4vw, 14px);
}
.hero-eyebrow::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--accent);
    flex-shrink:0;
    display:inline-block;
}
.hero-title{
    font-family:var(--dzf-font);
    font-weight:700;
    color:var(--primary);
    font-size:clamp(1.35rem, 3.4vw, 2.6rem);
    line-height:1.35;
    margin:0 0 clamp(10px, 1.8vw, 18px);
    word-break:break-word;
    text-wrap:balance;
}
.hero-title .hl{
    position:relative;
    display:inline-block;
    z-index:1;
}
.hero-title .hl::after{
    content:"";
    position:absolute;
    right:0;
    left:0;
    bottom:.06em;
    height:.3em;
    background:var(--accent);
    opacity:.55;
    z-index:-1;
    border-radius:4px;
}
.hero-desc{
    color:var(--primary);
    opacity:.82;
    font-size:clamp(.8rem, 1.3vw, 1rem);
    line-height:1.9;
    margin-bottom:clamp(16px, 2.4vw, 28px);
    text-align:justify;
    text-align-last:right;
}
.hero-btn{
    display:inline-flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    max-width:100%;
}
.hero-btn a{
    -webkit-tap-highlight-color:transparent;
    outline-offset:3px;
    text-decoration:none;
}
.dzf-hero-btn-primary{
    background:var(--primary);
    color:var(--bg);
    border:1px solid var(--primary);
    border-radius:999px;
    padding:clamp(11px, 1.6vw, 14px) clamp(20px, 2.6vw, 30px);
    min-height:46px;
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    line-height:1;
    transition:background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
    white-space:nowrap;
    font-size:clamp(.85rem, 1.2vw, 1rem);
    font-weight:600;
    cursor:pointer;
}
.dzf-hero-btn-primary svg{ transition:transform .25s ease; }
.dzf-hero-btn-primary:hover,
.dzf-hero-btn-primary:focus-visible{
    background:var(--accent);
    border-color:var(--accent);
    color:var(--primary);
    transform:translateY(-3px);
}
.dzf-hero-btn-primary:hover svg{ transform:translateX(-4px); }
.dzf-hero-btn-primary:active{ transform:translateY(0); }
.dzf-hero-btn-primary:focus-visible{ outline:2px solid var(--primary); }

.dzf-hero-btn-secondary{
    background:transparent;
    color:var(--primary);
    border:1px solid var(--stroke);
    border-radius:999px;
    padding:clamp(11px, 1.6vw, 14px) clamp(20px, 2.6vw, 30px);
    min-height:46px;
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:clamp(.85rem, 1.2vw, 1rem);
    font-weight:600;
    line-height:1;
    transition:background .25s ease, border-color .25s ease, transform .25s ease;
    white-space:nowrap;
}
.dzf-hero-btn-secondary:hover{
    background:var(--dzf-white);
    border-color:var(--primary);
    transform:translateY(-3px);
}

@media(max-width:1024px) and (min-width:769px){
    .hero-section{ padding:0 10px; }
    .hero-box{ padding:34px 32px; }
}
@media(max-width:768px){
    .hero-box{ margin-top:var(--dzf-space-xl); }
    .hero-section{ padding:0 10px; }
    .hero-box{
        flex-direction:column;
        flex-wrap:wrap;
        text-align:center;
        padding:20px;
        min-height:0;
        height:auto;
        gap:0;
        overflow:hidden;
    }
    .hero-content{ text-align:center; max-width:100%; width:100%; order:2; flex:0 0 auto; }
    .hero-eyebrow{ justify-content:center; }
    .hero-desc{ text-align:justify; text-align-last:center; }
    .hero-btn{ justify-content:center; width:100%; }
    .dzf-hero-btn-primary, .dzf-hero-btn-secondary{ width:100%; max-width:280px; justify-content:center; }
}
@media(max-width:520px){
    .hero-box{ padding:16px; border-radius:18px; }
    .hero-visual{ margin-bottom:16px; max-width:320px; }
    .hero-desc{ line-height:1.85; }
}
@media(max-width:360px){
    .hero-visual{ width:100%; max-width:none; }
    .hero-box{ padding:14px; }
}
@media(max-width:900px) and (max-height:500px) and (orientation:landscape){
    .hero-box{ flex-direction:row-reverse; text-align:right; padding:16px 24px; }
    .hero-content{ text-align:right; order:initial; }
    .hero-visual{ width:35%; max-width:200px; margin-top:0; margin-bottom:0; order:initial; }
    .hero-btn{ justify-content:flex-start; width:auto; }
    .dzf-hero-btn-primary{ width:auto; }
}
@media(prefers-reduced-motion: reduce){
    .dzf-hero-btn-primary, .dzf-hero-btn-secondary, .dzf-hero-btn-primary svg{ transition:none; }
}

/* ===================================================
   Before / After (Shift)
   =================================================== */
.dzf-shift{
    font-family:inherit; background:var(--bg); padding:var(--dzf-space-xxl) var(--dzf-gutter); box-sizing:border-box;
}
.dzf-shift *, .dzf-shift *::before, .dzf-shift *::after{ box-sizing:border-box; }
.dzf-shift__inner{ max-width:var(--dzf-container); margin:0 auto; }
.dzf-shift__head{ text-align:center; max-width:780px; margin:0 auto 56px; }
.dzf-shift__title{ font-family:'Dana', sans-serif; font-weight:700; color:var(--primary); font-size:clamp(1.35rem, 2.7vw, 2rem); line-height:1.5; margin:0 0 16px; text-wrap:balance; }
.dzf-shift__desc{ color:var(--primary); opacity:.75; font-size:1rem; line-height:1.9; margin:0; }
.dzf-shift__grid{ display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:28px; }
.dzf-shift__col{ display:flex; flex-direction:column; border-radius:var(--dzf-radius-card); padding:32px 28px; border:1px solid var(--stroke); }
.dzf-shift__col--before{ background:var(--white); }
.dzf-shift__col--after{ background:var(--primary); }
.dzf-shift__tag{ display:inline-block; font-size:.78rem; font-weight:600; padding:6px 16px; border-radius:999px; margin-bottom:16px; }
.dzf-shift__tag--before{ background:var(--bg); color:var(--primary); opacity:.85; }
.dzf-shift__tag--after{ background:var(--accent); color:var(--primary); }
.dzf-shift__col-title{ font-family:'Dana', sans-serif; font-weight:600; font-size:1.25rem; margin:0 0 20px; color:var(--primary); }
.dzf-shift__col--after .dzf-shift__col-title{ color:var(--white); }
/* ستون راست شش چیپ دارد و ستون چپ هفت ردیف؛ ارتفاع دو کارت با
   align-items:stretch یکی می‌شود، پس ستون کوتاه‌تر ته کارت یک حفره
   می‌ساخت. flex:1 به‌همراه align-content:space-between فاصله را بین
   ردیف‌های چیپ پخش می‌کند، نه در انتها. */
.dzf-shift__scatter{
    list-style:none; margin:0 0 20px; padding:0; position:relative;
    display:flex; flex-wrap:wrap; align-content:space-between;
    flex:1; min-height:0;
}
.dzf-shift__scatter li{ position:relative; display:inline-block; margin:0 9px 13px 0; padding:14px 18px; background:var(--bg); border:1px dashed var(--stroke); border-radius:var(--dzf-radius-chip); font-size:.84rem; font-weight:600; color:var(--primary); transform:rotate(var(--r)); opacity:.9; }
.dzf-shift__scatter li small{ display:block; font-weight:400; opacity:.65; margin-top:5px; font-size:.74rem; }
.dzf-shift__col-note{ font-size:.88rem; line-height:1.8; color:var(--primary); opacity:.7; margin:auto 0 0; }
.dzf-shift__col-note--after{ color:var(--bg); opacity:.85; }
.dzf-shift__layers{ display:flex; flex-direction:column; gap:16px; margin-bottom:22px; position:relative; }
.dzf-shift__layers::before{ content:""; position:absolute; top:8px; bottom:8px; right:5px; width:1px; background:rgba(226,227,231,.25); }
.dzf-shift__layer{ display:flex; align-items:flex-start; gap:12px; position:relative; }
.dzf-shift__layer-dot{ width:11px; height:11px; border-radius:50%; background:var(--accent); margin-top:4px; flex-shrink:0; position:relative; z-index:1; }
.dzf-shift__layer strong{ display:block; color:var(--white); font-family:'Dana', sans-serif; font-weight:600; font-size:.95rem; margin-bottom:4px; unicode-bidi:plaintext; }
.dzf-shift__layer p{ margin:0; color:var(--bg); opacity:.75; font-size:.82rem; line-height:1.7; }

/* ردیف حافظه: روی همان ریل، ولی از جنس دیگر.
   نشانگرش حلقه‌ی توخالی است نه نقطه‌ی توپر، و یک خط‌چین بالایش
   مرز «ماژول» و «لایه» را نشان می‌دهد — بدون اینکه از پشته جدا شود. */
.dzf-shift__layer--mem{
    margin-top:6px; padding-top:16px;
    border-top:1px dashed rgba(226,227,231,.24);
}
.dzf-shift__layer--mem .dzf-shift__layer-dot{
    background:transparent;
    border:2px solid var(--accent);
    margin-top:20px;
}
.dzf-shift__layer--mem strong{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dzf-shift__layer--mem strong i{
    font-style:normal; font-size:.68rem; font-weight:700;
    padding:3px 10px; border-radius:999px;
    background:rgba(226,227,231,.12);
    color:var(--bg); opacity:.85;
}
/* ریل باید تا وسط حلقه ادامه پیدا کند، نه تا انتهای ردیف */
.dzf-shift__layers::before{ bottom:auto; height:calc(100% - 34px); }
.dzf-shift__arrow{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--white); border:1px solid var(--stroke); color:var(--primary); align-self:center; flex-shrink:0; }
.dzf-shift__arrow svg{ width:20px; height:20px; transform:scaleX(-1); }
@media (max-width:900px){
    .dzf-shift__grid{ grid-template-columns:1fr; }
    .dzf-shift__arrow{ margin:0 auto; }
    .dzf-shift__arrow svg{ transform:rotate(90deg); }
}
@media (max-width:520px){
    .dzf-shift{ padding:56px var(--dzf-gutter); }
    .dzf-shift__col{ padding:24px 20px; border-radius:18px; }
    .dzf-shift__scatter{ min-height:0; }
}

/* ===================================================
   Why Us
   =================================================== */
.dzf-why{ font-family:inherit; background:var(--bg); padding:var(--dzf-space-xxl) var(--dzf-gutter); }
.dzf-why, .dzf-why *, .dzf-why *::before, .dzf-why *::after{ box-sizing:border-box; }
.dzf-why__inner{ max-width:var(--dzf-container); margin:0 auto; }
.dzf-why__head{ text-align:center; max-width:780px; margin:0 auto 56px; }
.dzf-why__title{ font-family:var(--dzf-font); font-weight:700; color:var(--primary); font-size:clamp(1.35rem, 2.7vw, 2rem); line-height:1.5; margin:0 0 16px; text-wrap:balance; }
.dzf-why__desc{ color:var(--primary); opacity:.8; font-size:1rem; line-height:1.9; margin:0; }
.dzf-why__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; align-items:stretch; }
.dzf-why__card{ background:var(--white); border:1px solid var(--stroke); border-radius:24px; padding:32px 28px; display:flex; flex-direction:column; }
.dzf-why__card--highlight{ background:var(--primary); border-color:var(--primary); }
.dzf-why__badge{ display:inline-block; align-self:flex-start; font-size:.75rem; font-weight:600; padding:6px 16px; border-radius:999px; margin-bottom:18px; }
.dzf-why__badge--muted{ background:var(--bg); color:var(--primary); opacity:.85; }
.dzf-why__badge--accent{ background:var(--accent); color:var(--primary); }
.dzf-why__card-title{ font-family:var(--dzf-font); font-weight:700; font-size:1.15rem; color:var(--primary); margin:0 0 6px; }
.dzf-why__card-title--light{ color:var(--white); }
.dzf-why__card-sub{ font-size:.85rem; line-height:1.7; min-height:2.9em; color:var(--primary); opacity:.65; margin:0 0 22px; }
.dzf-why__card-sub--light{ color:var(--bg); opacity:.75; }
.dzf-why__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.dzf-why__list--muted li{ position:relative; padding-right:20px; font-size:.88rem; line-height:1.8; color:var(--primary); opacity:.7; }
.dzf-why__list--muted li::before{ content:""; position:absolute; right:0; top:.6em; width:6px; height:6px; border-radius:50%; background:var(--primary); opacity:.35; }
.dzf-why__list--check li{ display:flex; align-items:flex-start; gap:10px; font-size:.9rem; line-height:1.7; color:var(--bg); }
.dzf-why__check{ width:20px; height:20px; flex-shrink:0; margin-top:2px; }
@media (max-width:980px){
    .dzf-why__grid{ grid-template-columns:1fr; }
    .dzf-why__card--highlight{ order:-1; }
}
@media (max-width:520px){
    .dzf-why{ padding:56px var(--dzf-gutter); }
    .dzf-why__card{ padding:24px 20px; border-radius:18px; }
}

/* ===================================================
   Values (DISIPHEE grid)
   =================================================== */

/* ===================================================
   CTA پایانی
   =================================================== */
.dzf-cta-final{ font-family:inherit; background:var(--bg); padding:var(--dzf-space-xxl) var(--dzf-gutter); }
.dzf-cta-final, .dzf-cta-final *, .dzf-cta-final *::before, .dzf-cta-final *::after{ box-sizing:border-box; }
.dzf-cta-final__box{ max-width:var(--dzf-container); margin:0 auto; background:var(--primary); border:1px solid var(--primary); border-radius:32px; padding:clamp(48px, 8vw, 88px) clamp(24px, 6vw, 60px); text-align:center; }
.dzf-cta-final__badge{ display:inline-block; background:var(--accent); color:var(--primary); font-size:.78rem; font-weight:600; padding:6px 18px; border-radius:999px; margin-bottom:22px; }
.dzf-cta-final__title{ font-family:var(--dzf-font); font-weight:700; color:var(--white); font-size:clamp(1.6rem, 3.6vw, 2.6rem); line-height:1.4; margin:0 0 18px; text-wrap:balance; }
.dzf-cta-final__hl{ position:relative; display:inline-block; z-index:1; }
.dzf-cta-final__hl::after{ content:""; position:absolute; right:0; left:0; bottom:.06em; height:.3em; background:var(--accent); opacity:.6; z-index:-1; border-radius:4px; }
.dzf-cta-final__desc{ max-width:680px; margin:0 auto 36px; color:var(--bg); opacity:.8; font-size:1rem; line-height:1.9; }
.dzf-cta-final__actions{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
.dzf-cta-final__btn{ display:inline-flex; align-items:center; justify-content:center; padding:14px 32px; border-radius:999px; font-size:15px; font-weight:600; text-decoration:none; line-height:1; transition:transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease; white-space:nowrap; }
.dzf-cta-final__btn--primary{ background:var(--accent); color:var(--primary); border:1px solid var(--accent); }
.dzf-cta-final__btn--primary:hover, .dzf-cta-final__btn--primary:focus-visible{ background:var(--white); border-color:var(--white); color:var(--primary); transform:translateY(-3px); }
.dzf-cta-final__btn--secondary{ background:transparent; color:var(--bg); border:1px solid rgba(226,227,231,.35); }
.dzf-cta-final__btn--secondary:hover, .dzf-cta-final__btn--secondary:focus-visible{ background:rgba(226,227,231,.08); border-color:var(--bg); color:var(--bg); transform:translateY(-3px); }
@media (max-width:640px){
    .dzf-cta-final{ padding:56px var(--dzf-gutter); }
    .dzf-cta-final__box{ border-radius:24px; }
    .dzf-cta-final__actions{ flex-direction:column; width:100%; }
    .dzf-cta-final__btn{ width:100%; }
}
@media (prefers-reduced-motion: reduce){ .dzf-cta-final__btn{ transition:none; } }

/* ===================================================
   هرو — نسخه‌ی تمام‌عرض (Full-bleed)
   کادر و استروک حذف شده؛ فرم‌های ارگانیک پشت تصویر
   فقط با پالت رسمی: #E2E3E7 و #FCC101
   =================================================== */
.hero-section{
    max-width:none;
    width:100%;
    margin:0;
    padding:0;
    background:var(--white);
    position:relative;
    overflow:hidden;            /* فرم‌ها اسکرول افقی نسازند */
}

.hero-box{
    max-width:calc(var(--dzf-container) + (var(--dzf-gutter) * 2));
    margin:0 auto !important;
    padding:clamp(40px, 5vw, 68px) var(--dzf-gutter) clamp(40px, 5vw, 64px);
    background:transparent;
    border:none;
    border-radius:0;
    min-height:0;
    overflow:visible;
    gap:clamp(24px, 5vw, 72px);
    position:relative;
}

/* فرم اصلی — «هسته‌ای» که تصویر روی آن می‌نشیند */

/* تصویر دیگر از کادر بیرون نمی‌زند — داخل باند تمام‌عرض می‌نشیند */
.hero-visual{
    margin-top:0;
    margin-bottom:0;
    /* سهم بیشتری از عرض می‌گیرد: با نسخه‌ی قبلی، کارت وسط یک فضای
       سفید بزرگ شناور بود و کوچک به نظر می‌رسید. */
    flex:0 1 560px;
    width:50%;
    position:relative;
    z-index:2;
    align-self:center;
}

.hero-content{
    position:relative;
    z-index:2;
    flex:1 1 320px;
    max-width:580px;
}

/* تایپوگرافی درشت‌تر، مثل هروهای مرجع */
.hero-title{
    font-weight:800;
    letter-spacing:-.015em;
    line-height:1.42;
    font-size:clamp(1.6rem, 4.2vw, 3.1rem);
    margin:0 0 clamp(14px, 2vw, 22px);
}
.hero-title .hl::after{
    height:.32em;
    bottom:.04em;
    opacity:.7;
    border-radius:3px;
}
.hero-desc{
    color:var(--dzf-muted);
    opacity:1;
    font-size:clamp(.88rem, 1.35vw, 1.05rem);
    line-height:2;
    max-width:52ch;
    margin:0 0 clamp(20px, 2.6vw, 32px);
}
.hero-eyebrow{ margin-bottom:clamp(10px, 1.6vw, 16px); }

/* ---------- تبلت ---------- */
@media (max-width:1024px){
    .hero-visual{ flex-basis:460px; width:47%; }
}

/* ---------- موبایل: تصویر بالا، متن پایین ---------- */
@media (max-width:768px){
    .hero-box{
        flex-direction:column;
        text-align:center;
        padding:clamp(24px, 5vw, 40px) var(--dzf-gutter) clamp(40px, 7vw, 56px);
        gap:clamp(16px, 4vw, 28px);
    }
    .hero-visual{
        order:1;
        width:100%;
        max-width:400px;
        flex:0 0 auto;
        align-self:center;
        margin-inline:auto;
    }
    .hero-content{
        order:2;
        max-width:100%;
        text-align:center;
    }
    .hero-desc{
        margin-inline:auto;
        text-align:center;
        text-align-last:center;
    }
    .hero-btn{ justify-content:center; }
    .hero-eyebrow{ justify-content:center; }
}

@media (max-width:480px){
    /* زیر ۳۴۰ سه کاشی دارایی به هم می‌چسبند و برچسب‌هایشان می‌شکند */
    .hero-visual{ max-width:340px; }
    .hs-assets li{ font-size:.68rem; padding:10px 4px; }

    /* متن «چهار تصمیم پایه ثبت شد» قبلاً اینجا پنهان می‌شد، چون در یک
       سطر کنار سه نقطه جا نمی‌شد. حذفش راه‌حل نبود — تنها جمله‌ای است
       که به آن سه نقطه معنا می‌دهد. حالا به‌جای پنهان شدن، به سطر
       بعدی می‌رود و تمام عرض را می‌گیرد. */
    .hs-dna{
        flex-wrap:wrap;
        row-gap:8px;
    }
    .hs-dna__meta{
        margin-inline-start:0;
        width:100%;
        font-size:.68rem;
        white-space:normal;
    }
}

/* همه‌ی استروک‌های این بخش دقیقاً ۱ پیکسل‌اند.
   مقدارهای اعشاری مثل ۱.۵px روی نمایشگرهای معمولی به ۱ یا ۲ پیکسل
   گرد می‌شوند و ضخامت خط بین دستگاه‌ها فرق می‌کند. */

/* ============================================================
   دیزیفی — تصویر بخش Hero
   کارت برند زنده، با یک توالی «ساخته‌شدن» هنگام ورود.
   بدون سایه و بدون گرادیان، طبق برند بوک؛ عمق فقط از
   لایه‌چینی و استروک می‌آید.
   ============================================================ */

.hs-stage{
    position:relative;
    width:100%;
    max-width:480px;
    margin-inline:auto;
    direction:rtl;
}

/* ---------- توالی ورود ----------
   هدف این است که بازدیدکننده در نگاه اول نبیند «یک کارت»، بلکه ببیند
   «یک برند که دارد ساخته می‌شود»: اول هسته، بعد دارایی‌ها، بعد سلامت.
   همان سه لایه‌ی محصول، ولی به‌جای توضیح، نمایش.
   هر مرحله با تأخیر می‌آید؛ کل توالی حدود ۲ ثانیه است. */
@keyframes hsIn{
    from{ opacity:0; transform:translateY(14px) scale(.985); }
    to  { opacity:1; transform:none; }
}
@keyframes hsPop{
    0%  { opacity:0; transform:scale(.4); }
    70% { transform:scale(1.12); }
    100%{ opacity:1; transform:scale(1); }
}
@keyframes hsSlide{
    from{ opacity:0; transform:translateY(10px); }
    to  { opacity:1; transform:none; }
}

.hs-card{
    background:var(--dzf-white);
    border:1px solid var(--stroke);
    border-radius:28px;
    padding:clamp(18px, 2.6vw, 24px);
    display:flex;
    flex-direction:column;
    gap:clamp(13px, 1.9vw, 17px);
    animation:hsIn .7s cubic-bezier(.22,.9,.3,1) backwards;
}

/* ---------- سربرگ کارت ---------- */
.hs-head{
    display:flex;
    align-items:center;
    gap:12px;
    animation:hsSlide .5s .15s cubic-bezier(.22,.9,.3,1) backwards;
}
.hs-mark{
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px; height:46px;
    flex-shrink:0;
    border-radius:15px;
    background:var(--accent);
    color:var(--primary);
}
/* نشان برند در قاب زرد. مسیر لوگو حاشیه‌ی داخلی کمی دارد،
   پس ۲۳px در قاب ۴۶px متعادل درمی‌آید. */
.hs-mark svg{ width:23px; height:23px; }

.hs-id{ flex:1; min-width:0; }
.hs-id strong{
    display:block;
    font-size:1rem;
    font-weight:700;
    color:var(--primary);
    line-height:1.6;
}
.hs-id span{
    display:block;
    font-size:.72rem;
    color:var(--primary);
    opacity:.55;
}

/* نشانگر مرحله — «۴ از ۴ مرحله» چیز مشخصی می‌گوید: آنبوردینگ تمام شده */
.hs-step{
    flex-shrink:0;
    padding:6px 12px;
    border-radius:999px;
    background:var(--accent);
    font-size:.7rem;
    font-weight:700;
    color:var(--primary);
    white-space:nowrap;
}

/* ---------- ردیف DNA ---------- */
.hs-dna{
    display:flex;
    align-items:center;
    gap:9px;
    padding:12px 14px;
    border-radius:17px;
    background:var(--bg);
    animation:hsSlide .5s .3s cubic-bezier(.22,.9,.3,1) backwards;
}
.hs-lbl{
    font-size:.7rem;
    font-weight:700;
    color:var(--primary);
    opacity:.5;
    letter-spacing:.04em;
}
.hs-sw{
    width:20px; height:20px;
    border-radius:50%;
    flex-shrink:0;
    animation:hsPop .45s cubic-bezier(.34,1.4,.5,1) backwards;
}
.hs-sw--a{ background:var(--accent);   animation-delay:.45s; }
.hs-sw--b{ background:var(--primary);  animation-delay:.55s; }
.hs-sw--c{ background:var(--dzf-white); border:1px solid var(--stroke); animation-delay:.65s; }

.hs-dna__meta{
    margin-inline-start:auto;
    font-size:.72rem;
    color:var(--primary);
    opacity:.6;
    white-space:nowrap;
    animation:hsSlide .4s .75s ease-out backwards;
}

/* ---------- دارایی‌ها ---------- */
.hs-assets{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:10px;
    margin:0;
    padding:0;
    list-style:none;
}
.hs-assets li{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:12px 6px;
    border:1px solid var(--stroke);
    border-radius:17px;
    font-size:.72rem;
    font-weight:600;
    color:var(--primary);
    animation:hsIn .5s cubic-bezier(.22,.9,.3,1) backwards;
}
/* یکی‌یکی می‌آیند — همان حس «دارایی‌ها ساخته می‌شوند» */
.hs-assets li:nth-child(1){ animation-delay:.85s; }
.hs-assets li:nth-child(2){ animation-delay:.98s; }
.hs-assets li:nth-child(3){ animation-delay:1.11s; }

/* عناصر u و s و em و b اینجا فقط ظرف شکل‌اند، نه معنای متنی —
   والدشان aria-hidden است، پس صفحه‌خوان اصلاً واردشان نمی‌شود.
   خط‌کشی و ایتالیک پیش‌فرضشان خنثی می‌شود. */
.hs-thumb b, .hs-thumb u, .hs-thumb i, .hs-thumb s, .hs-thumb em{
    display:block;
    font-style:normal;
    text-decoration:none;
    flex-shrink:0;
}

/* ---------- پیش‌نمایش دارایی‌ها ----------
   زمینه سفید با استروک، و هر پیش‌نمایش شکل واقعی همان خروجی را دارد. */
.hs-thumb{
    position:relative;
    display:flex;
    width:100%;
    height:46px;
    border-radius:11px;
    background:var(--dzf-white);
    border:1px solid var(--stroke);
    overflow:hidden;
}

/* لوگو: سه شکل پایه‌ی طراحی. دایره پر و زرد است تا نگاه اول
   روی همان بیفتد و کاشی مرده به نظر نرسد. */
.hs-thumb--logo{
    align-items:center;
    justify-content:center;
    background:var(--bg);
}
.hs-thumb--logo svg{
    width:23px; height:23px;
    color:var(--primary);
    opacity:.8;
}
/* وب‌سایت: پنجره‌ی مرورگر با نوار بالا */
.hs-thumb--site{
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:0 0 7px;
}
.hs-thumb--site em{
    display:flex;
    align-items:center;
    gap:3px;
    height:12px;
    padding:0 6px;
    background:var(--bg);
    border-bottom:1px solid var(--stroke);
}
.hs-thumb--site em s{
    width:3.5px; height:3.5px;
    border-radius:50%;
    background:var(--primary);
    opacity:.32;
}
.hs-thumb--site em s:first-child{ background:var(--accent); opacity:1; }
.hs-thumb--site i{
    height:4px;
    margin-inline:7px;
    border-radius:2px;
    background:var(--primary);
    opacity:.3;
}
.hs-thumb--site i:first-of-type{ width:60%; opacity:.7; }
.hs-thumb--site i:last-of-type { width:38%; background:var(--accent); opacity:1; }

/* محتوا: کارت پست — یک بلوک تصویر و دو خط متن */
.hs-thumb--copy{
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:7px;
}
.hs-thumb--copy b{
    height:16px;
    border-radius:5px;
    background:var(--bg);
    border:1px solid var(--stroke);
}
.hs-thumb--copy i{
    height:4px;
    border-radius:2px;
    background:var(--primary);
    opacity:.3;
}
.hs-thumb--copy i:first-of-type{ width:100%; opacity:.6; }
.hs-thumb--copy i:last-of-type { width:55%; }

/* ---------- نوار سلامت ---------- */
.hs-health{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    border-radius:19px;
    background:var(--primary);
    animation:hsSlide .55s 1.25s cubic-bezier(.22,.9,.3,1) backwards;
}
.hs-ring{
    position:relative;
    display:block;
    width:56px; height:56px;
    flex-shrink:0;
}
.hs-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.hs-ring__bg{
    fill:none;
    stroke:var(--bg);
    stroke-width:7;
    opacity:.22;
}
.hs-ring__fg{
    fill:none;
    stroke:var(--accent);
    stroke-width:7;
    stroke-linecap:round;
    /* محیط دایره با r=30 حدود ۱۸۸.۵ است؛ ۷۲٪ آن ۱۳۵.۷ */
    stroke-dasharray:135.7 188.5;
    stroke-dashoffset:188.5;
    animation:
        hsFill   1.1s 1.5s cubic-bezier(.22,.9,.3,1) forwards,
        hsBreath 4.5s 2.7s ease-in-out infinite;
}
@keyframes hsFill{ to{ stroke-dashoffset:0; } }

/* بعد از پر شدن، حلقه آرام نفس می‌کشد و نقطه‌ی نور دور می‌زند.
   دامنه عمداً کم است: حرکت پررنگ در بالای صفحه نگاه را از دکمه‌ها
   می‌دزدد. هدف «زنده بودن» است، نه جلب توجه. */
@keyframes hsBreath{
    0%,100%{ opacity:1; }
    50%    { opacity:.7; }
}
@keyframes hsOrbit{
    from{ transform:rotate(0deg); }
    to  { transform:rotate(360deg); }
}

@keyframes hsOrbitIn{ to{ opacity:.9; } }

.hs-ring__orbit{
    fill:var(--accent);
    transform-origin:36px 36px;
    opacity:0;
    animation:
        hsOrbitIn .4s 2.7s ease-out forwards,
        hsOrbit   9s  2.7s linear infinite;
}

.hs-ring b{
    position:absolute;
    inset:0;
    display:flex;
    /* baseline بود و همین عدد را به بالای حلقه می‌چسباند:
       در ظرفی که ارتفاعش کامل است، baseline معنای مرکز نمی‌دهد. */
    align-items:center;
    justify-content:center;
    gap:1px;
    font-size:.95rem;
    font-weight:700;
    color:var(--dzf-white);
    animation:hsSlide .4s 1.75s ease-out backwards;
}
/* درصد کوچک‌تر و کم‌رنگ‌تر: عدد باید اول خوانده شود، نه نشانه‌اش */
/* درصد دقیقاً کنار عدد می‌نشیند، نه بالای آن.
   نسخه‌ی قبلی با align-self بالا می‌رفت و از عدد جدا می‌افتاد. */
.hs-ring b i{
    font-style:normal;
    font-size:.6rem;
    font-weight:600;
    opacity:.7;
    /* یک پیکسل پایین‌تر تا با کف رقم‌ها هم‌تراز شود */
    transform:translateY(1px);
}

.hs-health__txt{ min-width:0; }
.hs-health__txt strong{
    display:block;
    font-size:.85rem;
    font-weight:700;
    color:var(--dzf-white);
    line-height:1.7;
}
.hs-health__txt span{
    display:block;
    font-size:.72rem;
    color:var(--bg);
    opacity:.72;
}

/* ---------- قرص شناور ---------- */
.hs-toast{
    position:absolute;
    left:clamp(-18px, -2.5vw, -8px);
    /* روی مرکز نوار سلامت می‌نشیند، نه پایین‌تر از آن:
       ۲۴px پدینگ کارت + نیمی از ارتفاع نوار، منهای نیم ارتفاع خود قرص. */
    bottom:clamp(32px, 5.5vw, 48px);
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 15px;
    border:1px solid var(--stroke);
    border-radius:999px;
    background:var(--dzf-white);
    font-size:.74rem;
    font-weight:600;
    color:var(--primary);
    white-space:nowrap;
    animation:hsIn .6s 2.15s cubic-bezier(.34,1.3,.5,1) backwards;
}
.hs-toast span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:20px; height:20px;
    border-radius:50%;
    background:var(--accent);
    color:var(--primary);
    flex-shrink:0;
}
.hs-toast span svg{ width:12px; height:12px; }

/* ============================================================
   واکنش‌گرایی
   ============================================================ */
@media(max-width:768px){
    .hs-stage{ max-width:400px; }
    /* در عرض کم، قرص شناور روی محتوای اصلی می‌افتد */
    .hs-toast{ display:none; }
}

/* هیچ حرکتی نباید اجباری باشد: در این حالت همه‌چیز
   مستقیم در وضعیت نهایی رسم می‌شود، بدون هیچ تأخیری. */
@media (prefers-reduced-motion: reduce){
    .hs-card, .hs-head, .hs-dna, .hs-dna__meta, .hs-sw,
    .hs-assets li, .hs-health, .hs-ring b, .hs-toast, .hs-ring__orbit{
        animation:none !important;
    }
    .hs-ring__orbit{ opacity:0; }
    .hs-ring__fg{ animation:none; stroke-dashoffset:0; }
}

/* ===================================================
   انیمیشن ورود عناصر (data-reveal)
   حالت نامرئی فقط وقتی فعال است که home.js کلاس dzf-reveal-on را
   روی <html> گذاشته باشد. بدون جاوااسکریپت، هیچ عنصری مخفی نمی‌شود.
   =================================================== */
.dzf-reveal-on [data-reveal]{
    opacity:0;
    transform:translateY(18px);
}
.dzf-reveal-on [data-reveal].is-in{
    opacity:1;
    transform:translateY(0);
    transition:opacity .55s cubic-bezier(.22,.61,.36,1) var(--d, 0ms),
               transform .55s cubic-bezier(.22,.61,.36,1) var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce){
    .dzf-reveal-on [data-reveal]{ opacity:1 !important; transform:none !important; }
}

/* ===================================================
   پلتفرم — چهار ماژول

   منطق طراحی: بخش خاکستری، کارت سفید. نسخه‌ی قبلی هر دو را
   خاکستری کرده بود و کارت‌ها از زمینه جدا نمی‌شدند — همان چیزی
   که کل بخش را تخت نشان می‌داد. حالا تضاد از خودِ پالت می‌آید،
   نه از سایه (که برند بوک ممنوع کرده).
   =================================================== */
.dzf-plat{
    font-family:inherit;
    background:var(--bg);
    padding:var(--dzf-space-xxl) var(--dzf-gutter);
    /* بخش قبلی هم خاکستری است؛ این خط مو مرز دو بخش را مشخص می‌کند */
    border-top:1px solid var(--stroke);
}
.dzf-plat, .dzf-plat *, .dzf-plat *::before, .dzf-plat *::after{ box-sizing:border-box; }
.dzf-plat__inner{ max-width:var(--dzf-container); margin:0 auto; }
.dzf-plat__head{ text-align:center; max-width:760px; margin:0 auto 48px; }
.dzf-plat__title{ font-family:var(--dzf-font); font-weight:700; color:var(--primary); font-size:clamp(1.5rem, 3vw, 2.2rem); line-height:1.4; margin:0 0 14px; text-wrap:balance; }
.dzf-plat__lead{ font-size:1.05rem; font-weight:600; color:var(--primary); line-height:1.8; margin:0 0 10px; text-wrap:balance; }
.dzf-plat__desc{ color:var(--primary); opacity:.65; font-size:.92rem; line-height:1.9; margin:0; }

.dzf-plat__grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; }

.dzf-plat__card{
    position:relative;
    display:flex; flex-direction:column;
    background:var(--white);
    border:1px solid var(--stroke);
    border-radius:24px;
    overflow:hidden;                 /* تا لینک پایین با گوشه‌ها هم‌شکل بماند */
    transition:border-color .25s ease, transform .25s ease;
}
.dzf-plat__card:hover{ border-color:var(--primary); transform:translateY(-4px); }

/* نوار زرد بالای کارت — تنها نشانه‌ی هاور، به‌جای سایه.
   از راست باز می‌شود، هم‌جهت با خود متن. */
.dzf-plat__card::before{
    content:""; position:absolute; top:0; right:0; left:0; height:3px;
    background:var(--accent);
    transform:scaleX(0); transform-origin:right;
    transition:transform .32s cubic-bezier(.22,.61,.36,1);
}
.dzf-plat__card:hover::before,
.dzf-plat__card:focus-within::before{ transform:scaleX(1); }

.dzf-plat__top{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:16px;
    padding:30px 30px 0;
}
.dzf-plat__id{ min-width:0; }
.dzf-plat__en{
    display:block;
    font-size:.76rem; font-weight:700;
    letter-spacing:.06em;
    color:var(--primary); opacity:.45;
    direction:ltr; unicode-bidi:plaintext;
    margin-bottom:6px;
}
.dzf-plat__name{
    font-family:var(--dzf-font); font-weight:700;
    font-size:1.32rem; line-height:1.4;
    color:var(--primary); margin:0;
}
/* عدد بزرگِ کم‌رنگ: ترتیب را می‌گوید و بار بصری صفحه را بالا نمی‌برد */
.dzf-plat__num{
    flex-shrink:0;
    font-family:var(--dzf-font); font-weight:800;
    font-size:2.6rem; line-height:.9;
    color:var(--primary); opacity:.11;
    direction:ltr;
}

.dzf-plat__text{
    padding:0 30px;
    margin:14px 0 22px;
    font-size:.9rem; line-height:1.9;
    color:var(--primary); opacity:.7;
}

/* چیپ‌ها به‌جای فهرست دوستونی نقطه‌دار.
   با شش قلمِ نابرابر، دو ستون همیشه لبه‌ی دندانه‌دار می‌سازد؛
   چیپ خودش می‌پیچد و ردیف‌ها همیشه پر می‌مانند. */
.dzf-plat__items{
    list-style:none; margin:0 0 26px; padding:0 30px;
    display:flex; flex-wrap:wrap; gap:8px;
}
.dzf-plat__items li{
    padding:7px 14px;
    border-radius:999px;
    background:var(--bg);
    font-size:.79rem; font-weight:600; line-height:1.6;
    color:var(--primary); opacity:.85;
    unicode-bidi:plaintext;
}

/* لینک پایانی تمام‌عرضِ کارت است، نه یک دکمه‌ی شناور.
   کارت را با یک خط مو می‌بندد و ناحیه‌ی کلیک را بزرگ می‌کند. */
.dzf-plat__cta{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px;
    margin-top:auto;
    padding:17px 30px;
    border-top:1px solid var(--stroke);
    font-size:14.5px; font-weight:600; color:var(--primary);
    transition:background-color .22s ease, color .22s ease;
}
.dzf-plat__cta svg{ width:16px; height:16px; flex-shrink:0; transition:transform .25s ease; }
.dzf-plat__cta:hover{ background:var(--accent); color:var(--primary); }
.dzf-plat__cta:hover svg{ transform:translateX(-5px); }
.dzf-plat__cta:focus-visible{ outline:2px solid var(--primary); outline-offset:-2px; }

.dzf-plat__foot{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:20px;
    margin-top:20px;
    padding:24px 30px;
    background:var(--white);
    border:1px solid var(--stroke);
    border-radius:24px;
}
.dzf-plat__foot strong{ font-family:var(--dzf-font); font-weight:700; font-size:1.08rem; color:var(--primary); }
.dzf-plat__btn{
    display:inline-flex; align-items:center; justify-content:center;
    flex-shrink:0;
    padding:13px 32px; border-radius:999px;
    background:var(--primary); color:var(--bg);
    border:1px solid var(--primary);
    font-size:15px; font-weight:600; line-height:1;
    transition:background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.dzf-plat__btn:hover{ background:var(--accent); border-color:var(--accent); color:var(--primary); transform:translateY(-3px); }

@media (max-width:900px){
    .dzf-plat__grid{ grid-template-columns:1fr; }
}
@media (max-width:520px){
    .dzf-plat{ padding:56px var(--dzf-gutter); }
    .dzf-plat__card{ border-radius:18px; }
    .dzf-plat__top{ padding:24px 20px 0; }
    .dzf-plat__text{ padding:0 20px; }
    .dzf-plat__items{ padding:0 20px; }
    .dzf-plat__cta{ padding:15px 20px; }
    .dzf-plat__name{ font-size:1.18rem; }
    .dzf-plat__num{ font-size:2.1rem; }
    .dzf-plat__foot{ flex-direction:column; align-items:stretch; text-align:center; padding:22px 20px; border-radius:18px; }
    .dzf-plat__btn{ width:100%; }
}
@media (prefers-reduced-motion: reduce){
    .dzf-plat__card, .dzf-plat__card::before, .dzf-plat__cta,
    .dzf-plat__cta svg, .dzf-plat__btn{ transition:none; }
    .dzf-plat__card:hover{ transform:none; }
}

/* ===================================================
   چطور کار می‌کند — چهار گام
   =================================================== */
.dzf-how{ font-family:inherit; background:var(--bg); padding:var(--dzf-space-xxl) var(--dzf-gutter); }
.dzf-how, .dzf-how *, .dzf-how *::before, .dzf-how *::after{ box-sizing:border-box; }
.dzf-how__inner{ max-width:var(--dzf-container); margin:0 auto; }
.dzf-how__head{ text-align:center; max-width:780px; margin:0 auto 56px; }
.dzf-how__title{ font-family:var(--dzf-font); font-weight:700; color:var(--primary); font-size:clamp(1.35rem, 2.7vw, 2rem); line-height:1.5; margin:0 0 16px; text-wrap:balance; }
.dzf-how__desc{ color:var(--primary); opacity:.75; font-size:1rem; line-height:1.9; margin:0; }

/* خط عمودی پشت گام‌ها: پیوستگی مسیر را نشان می‌دهد.
   با ::before روی خودِ لیست کشیده شده تا برای گام آخر هم قطع شود. */
.dzf-how__steps{ list-style:none; margin:0; padding:0; position:relative; display:flex; flex-direction:column; gap:20px; }
.dzf-how__steps::before{
    content:""; position:absolute; z-index:0;
    top:32px; bottom:32px; right:27px; width:2px;
    background:var(--stroke);
}
.dzf-how__step{ position:relative; z-index:1; display:flex; align-items:flex-start; gap:20px; }
.dzf-how__num{
    display:flex; align-items:center; justify-content:center;
    width:56px; height:56px; flex-shrink:0;
    border-radius:999px;
    background:var(--accent); color:var(--primary);
    border:4px solid var(--bg);
    font-weight:700; font-size:1rem; direction:ltr;
}
.dzf-how__body{
    flex:1; min-width:0;
    background:var(--white);
    border:1px solid var(--stroke);
    border-radius:var(--dzf-radius-card);
    padding:26px 28px;
}
.dzf-how__step-title{ font-family:var(--dzf-font); font-weight:700; font-size:1.1rem; color:var(--primary); margin:0 0 8px; }
.dzf-how__step-text{ font-size:.92rem; line-height:1.9; color:var(--primary); opacity:.75; margin:0 0 16px; }
.dzf-how__out{
    display:flex; align-items:flex-start; gap:10px;
    margin:0; padding-top:14px;
    border-top:1px dashed var(--stroke);
    font-size:.88rem; line-height:1.7; font-weight:600; color:var(--primary);
}
.dzf-how__out span{
    flex-shrink:0;
    background:var(--accent); color:var(--primary);
    font-size:.72rem; font-weight:700;
    padding:4px 12px; border-radius:999px;
}

.dzf-how__foot{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:24px;
    margin-top:40px; padding:28px 32px;
    background:var(--white);
    border:1px solid var(--stroke);
    border-radius:var(--dzf-radius-card);
}
.dzf-how__foot p{ margin:0; font-size:.95rem; line-height:1.9; color:var(--primary); opacity:.75; }
.dzf-how__foot strong{ font-weight:700; opacity:1; font-size:1.05rem; }
.dzf-how__btn{
    display:inline-flex; align-items:center; justify-content:center;
    flex-shrink:0;
    padding:13px 32px; border-radius:999px;
    background:var(--primary); color:var(--bg);
    border:1px solid var(--primary);
    font-size:15px; font-weight:600; line-height:1;
    transition:background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.dzf-how__btn:hover{ background:var(--accent); border-color:var(--accent); color:var(--primary); transform:translateY(-3px); }

@media (max-width:640px){
    .dzf-how{ padding:56px var(--dzf-gutter); }
    .dzf-how__steps::before{ display:none; }
    .dzf-how__step{ flex-direction:column; gap:0; }
    .dzf-how__num{ width:46px; height:46px; margin-bottom:-23px; margin-right:20px; position:relative; z-index:2; }
    .dzf-how__body{ width:100%; padding:34px 20px 22px; border-radius:18px; }
    .dzf-how__foot{ flex-direction:column; align-items:stretch; text-align:center; padding:24px 20px; border-radius:18px; }
    .dzf-how__btn{ width:100%; }
}
@media (prefers-reduced-motion: reduce){
    .dzf-how__btn{ transition:none; }
}

/* ===================================================
   نوار «لایه‌ی مشترک» زیر شش ماژول پلتفرم
   حافظه ماژول نیست، پس کاشی نمی‌شود. آکولاد خط‌چین رو به بالا
   رابطه را بدون یک کلمه توضیح می‌گوید.
   =================================================== */
.dzf-plat__layer{ margin-top:20px; }
.dzf-plat__brace{
    display:block; height:16px; margin:0 8%;
    border:1.5px dashed var(--primary);
    border-bottom:none;
    border-radius:14px 14px 0 0;
    opacity:.45;
}
.dzf-plat__layerbox{
    padding:24px 28px;
    background:var(--white);
    border:1.5px dashed var(--primary);
    border-radius:22px;
}
.dzf-plat__layerhead{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.dzf-plat__layertag{
    padding:5px 14px; border-radius:999px;
    background:var(--accent); color:var(--primary);
    font-size:.72rem; font-weight:700;
}
.dzf-plat__layeren{
    font-size:.86rem; font-weight:700; letter-spacing:.04em;
    color:var(--primary); direction:ltr; unicode-bidi:plaintext;
}
.dzf-plat__layerbox p{ margin:0; font-size:.9rem; line-height:2; color:var(--primary); opacity:.72; }

@media (max-width:520px){
    .dzf-plat__layerbox{ padding:20px 18px; border-radius:18px; }
    .dzf-plat__brace{ margin:0 12%; }
}

/* ===================================================
   بخش «در نهایت چه چیزی دارید»
   =================================================== */
.dzf-gets{ font-family:inherit; background:var(--white); padding:var(--dzf-space-xxl) var(--dzf-gutter); }
.dzf-gets, .dzf-gets *, .dzf-gets *::before, .dzf-gets *::after{ box-sizing:border-box; }
.dzf-gets__inner{ max-width:var(--dzf-container); margin:0 auto; }
.dzf-gets__head{ text-align:center; max-width:760px; margin:0 auto 48px; }
.dzf-gets__title{
    font-family:var(--dzf-font); font-weight:700; color:var(--primary);
    font-size:clamp(1.4rem, 2.9vw, 2rem); line-height:1.45;
    margin:0 0 14px; text-wrap:balance;
}
.dzf-gets__desc{ color:var(--primary); opacity:.7; font-size:.95rem; line-height:1.95; margin:0; }

.dzf-gets__grid{
    list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
}
.dzf-get{
    display:flex; align-items:flex-start; gap:16px;
    background:var(--bg); border:1px solid var(--stroke);
    border-radius:20px; padding:24px 22px;
    transition:border-color .25s ease, transform .25s ease;
}
.dzf-get:hover{ border-color:var(--primary); transform:translateY(-3px); }
.dzf-get__n{
    flex-shrink:0; font-family:var(--dzf-font);
    font-weight:800; font-size:1.35rem; line-height:1.2;
    color:var(--primary); opacity:.16; direction:ltr;
}
.dzf-get strong{ display:block; font-size:.96rem; font-weight:700; color:var(--primary); margin-bottom:8px; }
.dzf-get p{ margin:0; font-size:.84rem; line-height:1.95; color:var(--primary); opacity:.7; }

@media (max-width:960px){ .dzf-gets__grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){
    .dzf-gets{ padding:56px var(--dzf-gutter); }
    .dzf-gets__grid{ grid-template-columns:1fr; }
    .dzf-get{ padding:20px 18px; border-radius:16px; }
}

/* ===================================================
   بخش «شما کدامید؟»
   =================================================== */
.dzf-pick{ font-family:inherit; background:var(--bg); padding:var(--dzf-space-xxl) var(--dzf-gutter); }
.dzf-pick, .dzf-pick *, .dzf-pick *::before, .dzf-pick *::after{ box-sizing:border-box; }
.dzf-pick__inner{ max-width:var(--dzf-container); margin:0 auto; }
.dzf-pick__head{ text-align:center; max-width:740px; margin:0 auto 40px; }
.dzf-pick__title{
    font-family:var(--dzf-font); font-weight:700; color:var(--primary);
    font-size:clamp(1.4rem, 2.9vw, 2rem); line-height:1.45;
    margin:0 0 14px; text-wrap:balance;
}
.dzf-pick__desc{ color:var(--primary); opacity:.7; font-size:.95rem; line-height:1.95; margin:0; }

.dzf-pick__stages{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:28px; }
.dzf-pick__stage{
    display:flex; flex-direction:column;
    background:var(--white); border:1px solid var(--stroke);
    border-radius:22px; padding:26px 24px;
    position:relative; overflow:hidden;
    transition:border-color .25s ease, transform .25s ease;
}
.dzf-pick__stage::before{
    content:""; position:absolute; top:0; right:0; left:0; height:3px;
    background:var(--accent); transform:scaleX(0); transform-origin:right;
    transition:transform .32s cubic-bezier(.22,.61,.36,1);
}
.dzf-pick__stage:hover{ border-color:var(--primary); transform:translateY(-4px); }
.dzf-pick__stage:hover::before{ transform:scaleX(1); }
.dzf-pick__stage strong{ font-size:1.05rem; font-weight:700; color:var(--primary); margin-bottom:10px; }
.dzf-pick__stage p{ margin:0 0 20px; font-size:.87rem; line-height:1.95; color:var(--primary); opacity:.7; }
.dzf-pick__hint{
    display:flex; align-items:center; gap:8px;
    margin-top:auto; padding-top:16px;
    border-top:1px solid var(--stroke);
    font-size:.82rem; font-weight:600; color:var(--primary);
}
.dzf-pick__hint svg{ width:14px; height:14px; flex-shrink:0; opacity:.5; transition:transform .25s ease; }
.dzf-pick__stage:hover .dzf-pick__hint svg{ transform:translateX(-4px); }

.dzf-pick__inds{
    padding:26px 28px;
    background:var(--white); border:1px solid var(--stroke); border-radius:22px;
}
.dzf-pick__indt{ display:block; margin-bottom:20px; font-size:.84rem; font-weight:600; color:var(--primary); opacity:.65; }

/* سه گروه، همان گروه‌بندی مگامنو — تا کاربر همان نقشه‌ی ذهنی را
   دوباره ببیند و دنبال صنفش نگردد. */
.dzf-pick__group + .dzf-pick__group{ margin-top:18px; padding-top:18px; border-top:1px solid var(--stroke); }
.dzf-pick__gt{
    display:block; margin-bottom:12px;
    font-size:.76rem; font-weight:700; color:var(--primary); opacity:.5;
}
.dzf-pick__inds ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.dzf-pick__inds ul a{
    display:inline-block; padding:9px 16px; border-radius:999px;
    border:1px solid var(--stroke);
    font-size:.83rem; font-weight:600; color:var(--primary);
    transition:background-color .22s ease, border-color .22s ease;
}
.dzf-pick__inds ul a:hover{ background:var(--accent); border-color:var(--accent); }

.dzf-pick__more{
    display:flex; align-items:center; justify-content:center; gap:8px;
    margin-top:22px; padding:13px 28px; border-radius:999px;
    background:var(--primary); color:var(--bg);
    border:1px solid var(--primary);
    font-size:14.5px; font-weight:600;
    transition:background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.dzf-pick__more svg{ width:15px; height:15px; transition:transform .25s ease; }
.dzf-pick__more:hover{ background:var(--accent); border-color:var(--accent); color:var(--primary); transform:translateY(-3px); }
.dzf-pick__more:hover svg{ transform:translateX(-4px); }

@media (max-width:900px){ .dzf-pick__stages{ grid-template-columns:1fr; } }
@media (max-width:560px){
    .dzf-pick{ padding:56px var(--dzf-gutter); }
    .dzf-pick__stage{ padding:22px 18px; border-radius:18px; }
    .dzf-pick__inds{ padding:18px; border-radius:18px; }
}

@media (prefers-reduced-motion: reduce){
    .dzf-get, .dzf-pick__stage, .dzf-pick__stage::before, .dzf-pick__more,
    .dzf-pick__hint svg, .dzf-pick__inds ul a{ transition:none !important; }
    .dzf-get:hover, .dzf-pick__stage:hover, .dzf-pick__more:hover{ transform:none; }
}

/* ===================================================
   قواعد مشترک بخش‌های صفحه‌ی اصلی

   ابرو و تأکید زرد در هر هفت بخش یکسان‌اند. قبلاً هر بخش نسخه‌ی
   خودش را داشت — دوازده قانون تکراری که با هر تغییر باید دوازده‌بار
   ویرایش می‌شدند و به‌مرور از هم فاصله می‌گرفتند.
   =================================================== */
.dzf-shift .hero-eyebrow,
.dzf-plat .hero-eyebrow,
.dzf-how .hero-eyebrow,
.dzf-gets .hero-eyebrow,
.dzf-why .hero-eyebrow,
.dzf-pick .hero-eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    color:var(--primary); font-size:.9rem; font-weight:600;
    margin-bottom:14px;
}
.dzf-shift .hero-eyebrow::before,
.dzf-plat .hero-eyebrow::before,
.dzf-how .hero-eyebrow::before,
.dzf-gets .hero-eyebrow::before,
.dzf-why .hero-eyebrow::before,
.dzf-pick .hero-eyebrow::before{
    content:""; flex-shrink:0; display:inline-block;
    width:7px; height:7px; border-radius:50%;
    background:var(--accent);
}

.dzf-shift__title .hl,
.dzf-plat__title .hl,
.dzf-how__title .hl,
.dzf-gets__title .hl,
.dzf-why__title .hl,
.dzf-pick__title .hl{ position:relative; display:inline-block; z-index:1; }

.dzf-shift__title .hl::after,
.dzf-plat__title .hl::after,
.dzf-how__title .hl::after,
.dzf-gets__title .hl::after,
.dzf-why__title .hl::after,
.dzf-pick__title .hl::after{
    content:""; position:absolute; right:0; left:0; bottom:.06em;
    height:.3em; border-radius:4px;
    background:var(--accent); opacity:.55; z-index:-1;
}