/* services.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(115px + 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.4; 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:0 0 clamp(16px, 2.4vw, 28px); text-align: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); }

@media(max-width:1024px) and (min-width:769px){
    .hero-section{ padding:0 10px; }
    .hero-box{ padding:24px 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:center; }
    .hero-btn{ justify-content:center; width:100%; }
    .dzf-hero-btn-primary{ width:100%; max-width:280px; justify-content:center; }
}
@media(max-width:520px){
    .hero-box{ padding:16px; border-radius:18px; }
    .hero-desc{ line-height:1.85; }
}
@media(max-width:360px){ .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-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-primary svg{ transition:none; } }

/* ===================================================
   شامل چی می‌شه (سه لایه)
   =================================================== */
.sv-layers{ font-family:inherit; background:var(--bg); padding:var(--dzf-space-xxl) var(--dzf-gutter); scroll-margin-top:24px; }
.sv-layers, .sv-layers *, .sv-layers *::before, .sv-layers *::after{ box-sizing:border-box; }
.sv-layers__inner{ max-width:var(--dzf-container); margin:0 auto; }
.sv-layers__head{ max-width:680px; margin:0 auto 48px; text-align:center; }
.sv-layers__eyebrow{ display:inline-flex; align-items:center; gap:8px; color:var(--primary); font-size:.9rem; font-weight:600; margin-bottom:16px; }
.sv-layers__dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.sv-layers__title{ font-family:var(--dzf-font); font-weight:700; color:var(--primary); font-size:clamp(1.5rem, 3.2vw, 2.2rem); line-height:1.5; margin:0 0 14px; }
.sv-layers__title .hl{ position:relative; display:inline-block; z-index:1; }
.sv-layers__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; }
.sv-layers__desc{ color:var(--primary); opacity:.72; font-size:.98rem; line-height:1.9; margin:0; }
.sv-layers__grid{ display:flex; align-items:stretch; gap:16px; }
.sv-layers__card{ flex:1; min-width:0; background:var(--white); border:1px solid var(--stroke); border-radius:24px; padding:32px 28px; transition:border-color .25s ease, transform .25s ease; }
.sv-layers__card:hover{ border-color:var(--primary); transform:translateY(-4px); }
.sv-layers__connector{ display:flex; align-items:center; justify-content:center; flex-shrink:0; width:28px; color:var(--primary); opacity:.25; }
.sv-layers__connector svg{ width:18px; height:18px; transform:scaleX(-1); }
.sv-layers__icon{ display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; background:var(--accent); color:var(--primary); margin-bottom:18px; }
.sv-layers__icon svg{ width:22px; height:22px; }
.sv-layers__tag{ display:block; color:var(--primary); opacity:.45; font-size:.72rem; font-weight:700; margin-bottom:8px; }
.sv-layers__card h3{ font-family:var(--dzf-font); font-weight:700; font-size:1.15rem; color:var(--primary); margin:0 0 8px; }
.sv-layers__lead{ font-size:.85rem; color:var(--primary); opacity:.65; line-height:1.8; margin:0 0 22px; }
.sv-layers__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; border-top:1px solid var(--stroke); padding-top:18px; }
.sv-layers__list li{ position:relative; padding-right:22px; font-size:.85rem; color:var(--primary); opacity:.78; line-height:1.7; }
.sv-layers__list li::before{ content:""; position:absolute; right:0; top:.35em; width:10px; height:10px; border-radius:50%; background:var(--bg); border:1.5px solid var(--accent); }
@media (max-width:960px){
    .sv-layers__grid{ flex-direction:column; }
    .sv-layers__connector{ width:auto; margin:-4px auto; }
    .sv-layers__connector svg{ transform:rotate(90deg); }
}
@media (max-width:560px){ .sv-layers{ padding:56px var(--dzf-gutter); } .sv-layers__card{ padding:26px 22px; border-radius:20px; } }
@media (prefers-reduced-motion: reduce){ .sv-layers__card{ transition:none; } }

/* ===================================================
   مخاطبان
   =================================================== */
.sv-aud{ font-family:inherit; background:var(--bg); padding:0 var(--dzf-gutter) var(--dzf-space-xxl); }
.sv-aud, .sv-aud *, .sv-aud *::before, .sv-aud *::after{ box-sizing:border-box; }
.sv-aud__inner{ max-width:var(--dzf-container); margin:0 auto; }
.sv-aud__head{ max-width:640px; margin:0 auto 44px; text-align:center; }
.sv-aud__eyebrow{ display:inline-flex; align-items:center; gap:8px; color:var(--primary); font-size:.9rem; font-weight:600; margin-bottom:16px; }
.sv-aud__dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.sv-aud__title{ font-family:var(--dzf-font); font-weight:700; color:var(--primary); font-size:clamp(1.5rem, 3vw, 2.1rem); line-height:1.5; margin:0 0 14px; }
.sv-aud__title .hl{ position:relative; display:inline-block; z-index:1; }
.sv-aud__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; }
.sv-aud__desc{ color:var(--primary); opacity:.72; font-size:.96rem; line-height:1.9; margin:0; }
.sv-aud__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.sv-aud__card{ background:var(--white); border:1px solid var(--stroke); border-radius:24px; padding:30px 26px; transition:border-color .25s ease, transform .25s ease; }
.sv-aud__card:hover{ border-color:var(--primary); transform:translateY(-4px); }
.sv-aud__icon{ display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; background:var(--bg); color:var(--primary); margin-bottom:20px; }
.sv-aud__icon svg{ width:22px; height:22px; }
.sv-aud__card h3{ font-family:var(--dzf-font); font-weight:700; font-size:1.05rem; color:var(--primary); margin:0 0 10px; }
.sv-aud__card p{ margin:0; color:var(--primary); opacity:.68; font-size:.86rem; line-height:1.85; }
@media (max-width:960px){ .sv-aud__grid{ grid-template-columns:1fr; } }
@media (max-width:560px){ .sv-aud{ padding:0 16px 56px; } .sv-aud__card{ padding:26px 22px; border-radius:20px; } }
@media (prefers-reduced-motion: reduce){ .sv-aud__card{ transition:none; } }

/* ===================================================
   مسیر همکاری
   =================================================== */
.sv-proc{ font-family:inherit; background:var(--bg); padding:0 var(--dzf-gutter) var(--dzf-space-xxl); }
.sv-proc, .sv-proc *, .sv-proc *::before, .sv-proc *::after{ box-sizing:border-box; }
.sv-proc__inner{ max-width:var(--dzf-container); margin:0 auto; }
.sv-proc__head{ max-width:640px; margin:0 auto 52px; text-align:center; }
.sv-proc__eyebrow{ display:inline-flex; align-items:center; gap:8px; color:var(--primary); font-size:.9rem; font-weight:600; margin-bottom:16px; }
.sv-proc__dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.sv-proc__title{ font-family:var(--dzf-font); font-weight:700; color:var(--primary); font-size:clamp(1.5rem, 3vw, 2.1rem); line-height:1.5; margin:0 0 14px; }
.sv-proc__title .hl{ position:relative; display:inline-block; z-index:1; }
.sv-proc__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; }
.sv-proc__desc{ color:var(--primary); opacity:.72; font-size:.96rem; line-height:1.9; margin:0; }
.sv-proc__timeline{ position:relative; display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.sv-proc__timeline::before{ content:""; position:absolute; top:22px; right:calc(12.5% + 22px); left:calc(12.5% + 22px); height:1px; background:var(--stroke); }
.sv-proc__step{ position:relative; text-align:center; }
.sv-proc__num{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin:0 auto 20px; border-radius:50%; background:var(--primary); color:var(--accent); font-family:var(--dzf-font); font-weight:700; font-size:1rem; }
.sv-proc__step h3{ font-family:var(--dzf-font); font-weight:700; font-size:1rem; color:var(--primary); margin:0 0 10px; }
.sv-proc__step p{ margin:0; color:var(--primary); opacity:.65; font-size:.84rem; line-height:1.8; }
@media (max-width:860px){ .sv-proc__timeline{ grid-template-columns:1fr 1fr; row-gap:36px; } .sv-proc__timeline::before{ display:none; } }
@media (max-width:560px){ .sv-proc{ padding:0 16px 56px; } .sv-proc__timeline{ grid-template-columns:1fr; row-gap:28px; } }

/* ===================================================
   هزینه
   =================================================== */
.sv-price{ font-family:inherit; background:var(--bg); padding:0 var(--dzf-gutter) var(--dzf-space-xxl); }
.sv-price, .sv-price *, .sv-price *::before, .sv-price *::after{ box-sizing:border-box; }
.sv-price__inner{ max-width:var(--dzf-container); margin:0 auto; }
.sv-price__card{ background:var(--white); border:1px solid var(--stroke); border-radius:28px; padding:clamp(28px, 4vw, 44px); display:flex; align-items:center; gap:28px; }
.sv-price__icon{ display:flex; align-items:center; justify-content:center; width:56px; height:56px; flex-shrink:0; border-radius:50%; background:var(--accent); color:var(--primary); }
.sv-price__icon svg{ width:24px; height:24px; }
.sv-price__text{ flex:1; min-width:0; }
.sv-price__text h2{ font-family:var(--dzf-font); font-weight:700; color:var(--primary); font-size:clamp(1.1rem, 2vw, 1.35rem); margin:0 0 8px; }
.sv-price__text p{ margin:0; color:var(--primary); opacity:.7; font-size:.88rem; line-height:1.85; max-width:640px; }
.sv-price__btn{ flex-shrink:0; display:inline-flex; align-items:center; gap:8px; background:var(--primary); color:var(--bg); border:1px solid var(--primary); border-radius:999px; padding:14px 30px; font-size:.9rem; font-weight:600; text-decoration:none; white-space:nowrap; transition:background-color .25s ease, color .25s ease, transform .25s ease; }
.sv-price__btn svg{ width:14px; height:14px; }
.sv-price__btn:hover, .sv-price__btn:focus-visible{ background:var(--accent); border-color:var(--accent); color:var(--primary); transform:translateY(-3px); }
@media (max-width:760px){ .sv-price__card{ flex-direction:column; text-align:center; } .sv-price__btn{ width:100%; justify-content:center; } }
@media (max-width:560px){ .sv-price{ padding:0 16px 56px; } .sv-price__card{ padding:26px 20px; border-radius:20px; } }
@media (prefers-reduced-motion: reduce){ .sv-price__btn{ transition:none; } }

/* ===================================================
   CTA پایانی
   =================================================== */
.sv-cta{ font-family:inherit; background:var(--bg); padding:0 var(--dzf-gutter) var(--dzf-space-xxl); }
.sv-cta, .sv-cta *, .sv-cta *::before, .sv-cta *::after{ box-sizing:border-box; }
.sv-cta__inner{ max-width:var(--dzf-container); margin:0 auto; }
.sv-cta__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; }
.sv-cta__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; }
.sv-cta__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; }
.sv-cta__title .hl{ position:relative; display:inline-block; z-index:1; }
.sv-cta__title .hl::after{ content:""; position:absolute; right:0; left:0; bottom:.06em; height:.3em; background:var(--accent); opacity:.6; z-index:-1; border-radius:4px; }
.sv-cta__desc{ max-width:560px; margin:0 auto 36px; color:var(--bg); opacity:.8; font-size:1rem; line-height:1.9; }
.sv-cta__actions{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
.sv-cta__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; }
.sv-cta__btn--primary{ background:var(--accent); color:var(--primary); border:1px solid var(--accent); }
.sv-cta__btn--primary:hover, .sv-cta__btn--primary:focus-visible{ background:var(--white); border-color:var(--white); color:var(--primary); transform:translateY(-3px); }
.sv-cta__btn--secondary{ background:transparent; color:var(--bg); border:1px solid rgba(226,227,231,.35); }
.sv-cta__btn--secondary:hover, .sv-cta__btn--secondary:focus-visible{ background:rgba(226,227,231,.08); border-color:var(--bg); color:var(--bg); transform:translateY(-3px); }
@media (max-width:640px){
    .sv-cta{ padding:0 16px 56px; }
    .sv-cta__box{ border-radius:24px; }
    .sv-cta__actions{ flex-direction:column; width:100%; }
    .sv-cta__btn{ width:100%; }
}
@media (prefers-reduced-motion: reduce){ .sv-cta__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-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){
}

/* ---------- موبایل: تصویر بالا، متن پایین ---------- */
@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-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; }
}

/* ---------- پیوند لنگری ---------- */
/* display:flex با عرض محتوا — نه inline-flex.
   ظرف دکمه‌ها inline-flex است، پس پیوند inline کنارشان روی همان
   سطر می‌نشست به‌جای اینکه سطر بعدی برود. */
.sv-jump{
    display:flex;
    width:fit-content;
    align-items:center;
    gap:7px;
    margin-top:clamp(14px, 2vw, 20px);
    font-size:.8rem;
    font-weight:600;
    color:var(--primary);
    opacity:.7;
    text-decoration:none;
    transition:opacity .2s ease;
}
.sv-jump svg{ width:15px; height:15px; }
.sv-jump:hover{ opacity:1; }
.sv-jump:focus-visible{ outline:2px solid var(--primary); outline-offset:3px; border-radius:6px; }

@media (max-width:768px){
    .sv-jump{ margin-inline:auto; }
    .dzf-hero-btn-primary, .dzf-hero-btn-secondary{ width:100%; max-width:280px; justify-content:center; }
}

@media (max-width:420px){
}

/* ============================================================
   هرو بدون تصویر — فقط متن، وسط‌چین
   نسخه‌ی قبلی سه لایه را کنار متن نشان می‌داد و همان سه لایه
   بلافاصله پایین‌تر تکرار می‌شد. حالا هرو فقط وعده را می‌گوید
   و اثباتش کار بخش «شامل چی می‌شه» است.
   ============================================================ */
.hero-section--lean .hero-box{
    flex-direction:column;
    align-items:center;
    text-align:center;
    /* کوتاه‌تر از هرو صفحه‌ی اصلی: اینجا تصویری نیست که ارتفاع بخواهد،
       و لبه‌ی بخش بعدی باید دیده شود تا کاربر به اسکرول ترغیب شود. */
    padding:clamp(34px, 5vw, 60px) var(--dzf-gutter) clamp(30px, 4vw, 48px);
    gap:0;
}

.hero-section--lean .hero-content{
    max-width:720px;
    width:100%;
    text-align:center;
}

.hero-section--lean .hero-eyebrow{ justify-content:center; }

.hero-section--lean .hero-desc{
    margin-inline:auto;
    max-width:60ch;
    text-align:center;
}

.hero-section--lean .hero-btn{ justify-content:center; }
.hero-section--lean .sv-jump{ margin-inline:auto; }

@media (max-width:768px){
    .hero-section--lean .hero-box{
        padding:clamp(26px, 6vw, 40px) var(--dzf-gutter) clamp(24px, 5vw, 36px);
    }
}