/*==========================================================
    BENEFITS SECTION
    این فایل فقط از متغیرهای تعریف‌شده در variables.css استفاده
    می‌کند. باید بعد از variables.css و responsive.css (و فایل
    دکمه‌های پروژه، برای .link-button) فراخوانی شود.

    توجه: چهار متغیری که در نسخه‌ی قبلی استفاده شده بودند ولی در
    variables.css تعریف نشده بودند، اینجا حذف/جایگزین شدند:
      --section-space      -> مقدار مستقیم clamp()
      --font-mono           -> var(--font-body)
      --space-section-md    -> مقدار مستقیم clamp()
      --space-section-sm    -> مقدار مستقیم clamp()
==========================================================*/

.benefits{
    position:relative;
    padding-block:clamp(56px,7vw,110px);
    
}

/* Header */
.section-header{
    max-width:768px;
    margin-inline:auto;
    text-align:center;
    margin-bottom:clamp(40px,5vw,70px);
}

.section-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:7px 16px;
    border-radius:var(--radius-round);
    background:var(--surface-alt);
    border:1px solid var(--border);
    color:var(--primary);
    font-family:var(--font-body);
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.02em;
    margin-bottom:20px;
}
.section-eyebrow .dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--accent-strong);
    box-shadow:0 0 0 4px rgba(var(--accent-strong-rgb),.18);
}

.section-header h2{
    font-family:var(--font-heading);
    font-size:var(--h2-title-size);
    font-weight:var(--title-weight);
    line-height:1.3;
    color:var(--text);
    margin-bottom:20px;
}

.section-header p{
    font-family:var(--font-body);
    font-weight:var(--body-weight);
    color:var(--text-muted);
    font-size:1.05rem;
    line-height:2;
}

/* Grid */
.benefits-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:clamp(20px,3vw,32px);
    list-style:none;
}

/* Card — طرح «پلاک مشخصات فنی» به‌جای کارت شیشه‌ای؛
   خط بالای رنگی مثل چراغ وضعیت دستگاه روشن/خاموش می‌شود و
   نشانه‌های گوشه مثل علامت‌های تراز روی تجهیزات آزمایشگاهی‌اند. */
.benefit-card{
    position:relative;
    padding:clamp(28px,3vw,36px) clamp(24px,3vw,32px);
    border:2px solid var(--border-blue);
    
    
    border-radius:var(--radius-lg);
    background:var(--background);
    transition:border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}




.benefit-card:hover{

    border-top:3px solid var(--border-yellow);
    
    box-shadow:var(--shadow-md);
    transform:translateY(-6px);
}


/* Code tag */
.benefit-card__code{
    display:inline-block;
    font-family:var(--font-body);
    color:var(--text);
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.08em;
    color:var(--secondary);
    background:var(--surface-alt);
    border:1px solid var(--border);
    padding:3px 9px;
    border-radius:var(--radius-sm);
    margin-bottom:18px;
}

.benefit-card-yellow{
    position:relative;

    font-family:var(--font-body);
    padding:clamp(28px,3vw,36px) clamp(24px,3vw,32px);
    border:2px solid var(--border-yellow);
    
    
    border-radius:var(--radius-lg);
    background:var(--background);
    transition:border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}




.benefit-card-yellow:hover{

    border-top:3px solid var(--border-blue);
    
    box-shadow:var(--shadow-md);
    transform:translateY(-6px);
}


/* Code tag */
.benefit-card-yellow__code{
    display:inline-block;
    font-family:var(--font-body);
    color:var(--text);
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.08em;
    color:var(--secondary);
    background:var(--surface-alt);
    border:1px solid var(--border);
    padding:3px 9px;
    border-radius:var(--radius-sm);
    margin-bottom:18px;
}

/* Icon */
.benefit-icon{
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:22px;
    transition:border-color .35s ease, background .35s ease;
}

.benefit-icon img{
    width:60px;
    height:60px;
}

/* Content */
.benefit-card h3{
    font-family:var(--font-heading);
    font-size:var(--font-size-h3);
    font-weight:var(--font-weight-h3);
    margin-bottom:12px;
    color:var(--text);
}

.benefit-card p{
    font-family:var(--font-body);
    font-size:var(--font-size-p);
    font-weight:var(--body-weight);
    color:var(--text);
    line-height:1.9;
}

.benefit-card-yellow h3{
    font-family:var(--font-heading);
    font-size:var(--font-size-h3);
    font-weight:var(--font-weight-h3);
    margin-bottom:12px;
    color:var(--text);
}

.benefit-card-yellow p{
    font-family:var(--font-body);
    font-size:var(--font-size-p);
    font-weight:var(--body-weight);
    color:var(--text);
    line-height:1.9;
}




/* CTA */
.benefits-action{
    margin-top:clamp(40px,6vw,64px);
    text-align:center;
}

/*==========================================================
 Responsive
==========================================================*/
@media (max-width:992px){
    .benefits-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:768px){
    .benefits{ padding-block:clamp(40px,6vw,72px); }
    .section-header h2{ font-size:2rem; }
    .benefits-grid{ grid-template-columns:1fr; }
}

@media (max-width:576px){
    .benefits{ padding-block:clamp(32px,5vw,56px); }
}