/* =========================================
   Base Layout & Mobile (Mobile-First)
========================================= */
.benefits-section {
    margin-top: 16px;
}

.benefits-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding: 0 16px;
}

/* کارت اصلی (کانتینر سایه) */
.benefit-card {
    position: relative;
    width: 100%;
    max-width: 364px;
    height: 175px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 20px 14px 14px 20px;
    box-sizing: border-box;
    cursor: pointer;
    gap: 15px;

    /* سایه دقیق فیگما */
    filter: drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.16));
}

/* لایه بوردر سفید با شیپ ماسک */
.benefit-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #FFFFFF;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='12 6 364 175' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M29.3184 10.6863C32.319 7.68571 36.3886 6 40.6321 6L347.377 6C351.621 6 355.69 7.68571 358.691 10.6863L371.318 23.3135C374.319 26.3142 376.005 30.3841 376.005 34.6278L376 152.372C376 156.615 374.314 160.684 371.314 163.685L358.686 176.312C355.686 179.313 351.616 180.999 347.372 180.999L40.6272 180.999C36.3837 180.999 32.314 179.313 29.3135 176.312L16.6863 163.685C13.6856 160.685 11.9998 156.615 12 152.371L12.0044 34.6271C12.0046 30.3838 13.6903 26.3144 16.6907 23.314L29.3184 10.6863Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='12 6 364 175' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M29.3184 10.6863C32.319 7.68571 36.3886 6 40.6321 6L347.377 6C351.621 6 355.69 7.68571 358.691 10.6863L371.318 23.3135C374.319 26.3142 376.005 30.3841 376.005 34.6278L376 152.372C376 156.615 374.314 160.684 371.314 163.685L358.686 176.312C355.686 179.313 351.616 180.999 347.372 180.999L40.6272 180.999C36.3837 180.999 32.314 179.313 29.3135 176.312L16.6863 163.685C13.6856 160.685 11.9998 156.615 12 152.371L12.0044 34.6271C12.0046 30.3838 13.6903 26.3144 16.6907 23.314L29.3184 10.6863Z'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    z-index: -2;
    transition: all 0.4s ease;
}

/* لایه پس‌زمینه تیره داخلی (۴ پیکسل فاصله برای نمایش بوردر) */
.benefit-card::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    background: #112931;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='12 6 364 175' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M29.3184 10.6863C32.319 7.68571 36.3886 6 40.6321 6L347.377 6C351.621 6 355.69 7.68571 358.691 10.6863L371.318 23.3135C374.319 26.3142 376.005 30.3841 376.005 34.6278L376 152.372C376 156.615 374.314 160.684 371.314 163.685L358.686 176.312C355.686 179.313 351.616 180.999 347.372 180.999L40.6272 180.999C36.3837 180.999 32.314 179.313 29.3135 176.312L16.6863 163.685C13.6856 160.685 11.9998 156.615 12 152.371L12.0044 34.6271C12.0046 30.3838 13.6903 26.3144 16.6907 23.314L29.3184 10.6863Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='12 6 364 175' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M29.3184 10.6863C32.319 7.68571 36.3886 6 40.6321 6L347.377 6C351.621 6 355.69 7.68571 358.691 10.6863L371.318 23.3135C374.319 26.3142 376.005 30.3841 376.005 34.6278L376 152.372C376 156.615 374.314 160.684 371.314 163.685L358.686 176.312C355.686 179.313 351.616 180.999 347.372 180.999L40.6272 180.999C36.3837 180.999 32.314 179.313 29.3135 176.312L16.6863 163.685C13.6856 160.685 11.9998 156.615 12 152.371L12.0044 34.6271C12.0046 30.3838 13.6903 26.3144 16.6907 23.314L29.3184 10.6863Z'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    z-index: -1;
    transition: all 0.4s ease;
}

/* هدر کارت شامل آیکون و تایتل */
.card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    flex-shrink: 0;
}

/* باکس سبز رنگ آیکون */
.card-icon-box {
    width: 64px;
    height: 64px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    filter: drop-shadow(0px 2.67px 5.33px rgba(0, 0, 0, 0.32));
}

/* لایه حاشیه آیکون */
.card-icon-box::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.24);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='8 4 96 96' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.7655 6.23452C19.1962 4.80378 21.1367 4 23.1601 4L88.8399 4C90.8633 4 92.8038 4.80378 94.2345 6.23452L101.765 13.7655C103.196 15.1962 104 17.1367 104 19.1601V84.8399C104 86.8633 103.196 88.8038 101.765 90.2345L94.2345 97.7655C92.8038 99.1962 90.8633 100 88.8399 100H23.1601C21.1367 100 19.1962 99.1962 17.7655 97.7655L10.2345 90.2345C8.80378 88.8038 8 86.8633 8 84.8399L8 19.1601C8 17.1367 8.80378 15.1962 10.2345 13.7655L17.7655 6.23452Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='8 4 96 96' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.7655 6.23452C19.1962 4.80378 21.1367 4 23.1601 4L88.8399 4C90.8633 4 92.8038 4.80378 94.2345 6.23452L101.765 13.7655C103.196 15.1962 104 17.1367 104 19.1601V84.8399C104 86.8633 103.196 88.8038 101.765 90.2345L94.2345 97.7655C92.8038 99.1962 90.8633 100 88.8399 100H23.1601C21.1367 100 19.1962 99.1962 17.7655 97.7655L10.2345 90.2345C8.80378 88.8038 8 86.8633 8 84.8399L8 19.1601C8 17.1367 8.80378 15.1962 10.2345 13.7655L17.7655 6.23452Z'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    z-index: -2;
}

/* لایه رنگ سبز آیکون */
.card-icon-box::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: var(--accent-green);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='8 4 96 96' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.7655 6.23452C19.1962 4.80378 21.1367 4 23.1601 4L88.8399 4C90.8633 4 92.8038 4.80378 94.2345 6.23452L101.765 13.7655C103.196 15.1962 104 17.1367 104 19.1601V84.8399C104 86.8633 103.196 88.8038 101.765 90.2345L94.2345 97.7655C92.8038 99.1962 90.8633 100 88.8399 100H23.1601C21.1367 100 19.1962 99.1962 17.7655 97.7655L10.2345 90.2345C8.80378 88.8038 8 86.8633 8 84.8399L8 19.1601C8 17.1367 8.80378 15.1962 10.2345 13.7655L17.7655 6.23452Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='8 4 96 96' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.7655 6.23452C19.1962 4.80378 21.1367 4 23.1601 4L88.8399 4C90.8633 4 92.8038 4.80378 94.2345 6.23452L101.765 13.7655C103.196 15.1962 104 17.1367 104 19.1601V84.8399C104 86.8633 103.196 88.8038 101.765 90.2345L94.2345 97.7655C92.8038 99.1962 90.8633 100 88.8399 100H23.1601C21.1367 100 19.1962 99.1962 17.7655 97.7655L10.2345 90.2345C8.80378 88.8038 8 86.8633 8 84.8399L8 19.1601C8 17.1367 8.80378 15.1962 10.2345 13.7655L17.7655 6.23452Z'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    z-index: -1;
}

.card-title {
    font-weight: 725;
    font-size: 15px;
    color: #FFFFFF;
    line-height: 1.3;
    text-align: center;
    margin: 0;
}

/* متن توضیحات کارت در موبایل */
.card-desc {
    display: block;
    width: 193px;
    font-weight: 450;
    font-size: 13.5px;
    line-height: 182%;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    opacity: 0.8;
    text-align: justify;
    margin: 0;
    margin-top: 14px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================
   Desktop View (min-width: 769px)
========================================= */
@media (min-width: 769px) {
    .benefits-section {
        margin-top: 96px;
    }

    .benefits-grid {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 24px;
        margin-top: 40.5px;
        padding: 0;
    }

    .benefit-card {
        width: 302px;
        max-width: 302px;
        height: 302px;
        flex-direction: column;
        justify-content: center;
        padding: 37px;
        filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.16));
    }

    /* تعویض ماسک کارت به ابعاد ۳۰۲ در ۳۰۲ دسکتاپ */
    .benefit-card::after,
    .benefit-card::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='24 12 302 302' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.7206 19.0294C59.2214 14.5286 65.3259 12 71.6911 12L278.309 12C284.674 12 290.779 14.5286 295.279 19.0294L318.971 42.7206C323.471 47.2214 326 53.3259 326 59.6911V266.309C326 272.674 323.471 278.779 318.971 283.279L295.279 306.971C290.779 311.471 284.674 314 278.309 314H71.6911C65.3259 314 59.2214 311.471 54.7206 306.971L31.0294 283.279C26.5286 278.779 24 272.674 24 266.309L24 59.6911C24 53.3259 26.5286 47.2214 31.0294 42.7206L54.7206 19.0294Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg viewBox='24 12 302 302' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.7206 19.0294C59.2214 14.5286 65.3259 12 71.6911 12L278.309 12C284.674 12 290.779 14.5286 295.279 19.0294L318.971 42.7206C323.471 47.2214 326 53.3259 326 59.6911V266.309C326 272.674 323.471 278.779 318.971 283.279L295.279 306.971C290.779 311.471 284.674 314 278.309 314H71.6911C65.3259 314 59.2214 311.471 54.7206 306.971L31.0294 283.279C26.5286 278.779 24 272.674 24 266.309L24 59.6911C24 53.3259 26.5286 47.2214 31.0294 42.7206L54.7206 19.0294Z'/%3E%3C/svg%3E");
    }

    /* هاور زرد دسکتاپ */
    .benefit-card:hover {
        align-items: flex-start;
    }

    .benefit-card:hover::after {
        background: #FFD970;
    }

    .benefit-card:hover::before {
        background: var(--accent-gold);
    }

    .card-header {
        width: 100%;
        gap: 38.5px;
    }

    .card-icon-box {
        width: 96px;
        height: 96px;
        filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.32));
    }

    .card-icon-box::before {
        top: 3px;
        left: 3px;
        right: 3px;
        bottom: 3px;
    }

    .benefit-card:hover .card-icon-box {
        width: 80px;
        height: 80px;
        filter: none;
    }

    .benefit-card:hover .card-icon-box {
        background: #112931;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='24 12 302 302' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.7206 19.0294C59.2214 14.5286 65.3259 12 71.6911 12L278.309 12C284.674 12 290.779 14.5286 295.279 19.0294L318.971 42.7206C323.471 47.2214 326 53.3259 326 59.6911V266.309C326 272.674 323.471 278.779 318.971 283.279L295.279 306.971C290.779 311.471 284.674 314 278.309 314H71.6911C65.3259 314 59.2214 311.471 54.7206 306.971L31.0294 283.279C26.5286 278.779 24 272.674 24 266.309L24 59.6911C24 53.3259 26.5286 47.2214 31.0294 42.7206L54.7206 19.0294Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg viewBox='24 12 302 302' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.7206 19.0294C59.2214 14.5286 65.3259 12 71.6911 12L278.309 12C284.674 12 290.779 14.5286 295.279 19.0294L318.971 42.7206C323.471 47.2214 326 53.3259 326 59.6911V266.309C326 272.674 323.471 278.779 318.971 283.279L295.279 306.971C290.779 311.471 284.674 314 278.309 314H71.6911C65.3259 314 59.2214 311.471 54.7206 306.971L31.0294 283.279C26.5286 278.779 24 272.674 24 266.309L24 59.6911C24 53.3259 26.5286 47.2214 31.0294 42.7206L54.7206 19.0294Z'/%3E%3C/svg%3E");
    }

    .benefit-card:hover .card-icon-box::after {
        background: #112931;
    }

    .benefit-card:hover .card-icon-box::before {
        opacity: 0;
    }


    .card-title {
        font-size: 24px;
    }

    .card-desc {
        display: none;
        width: 100%;
        color: #112931;
        opacity: 0;
        font-size: 16px;
    }

    .benefit-card:hover .card-header {
        flex-direction: row-reverse;
        gap: 20px;
        justify-content: flex-start;
        align-items: center;
    }

    .benefit-card:hover .card-title {
        color: #112931;
        text-align: right;
    }

    .benefit-card:hover .card-desc {
        display: block;
        margin-top: 36px;
        animation: fadeIn 0.4s forwards;
    }
}