:root{
    --pgco-brand:#19284F;
    --pgco-accent:#EF4444;
    --pgco-muted:#6E7A90;
    --pgco-bg:#F7F8FA;
    --pgco-card:#FFFFFF;
    --pgco-text:#1B2748;
    --pgco-border:#E5E8EF;
    --container:1200px;

    /* کنترل فاصله افقی داخل بنر */
    --hero-pad-x-mobile: 14px;
    --hero-pad-x-desktop: 0px;
}

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

.pg-home{
    background:var(--pgco-bg);
    padding:16px 12px calc(var(--footer-h,70px) + 12px);
    min-height:100vh;
}
.pg-home__wrap{max-width:var(--container);margin:0 auto;}

.pg-anim{opacity:0; transform:translateY(24px); transition:.4s ease;}
.pg-anim.pg-inview{opacity:1; transform:translateY(0);}


/* =========================================================
   HERO (Banner)
========================================================= */

.pg-home-hero{
    position: relative;
    margin-bottom: 35px;
    isolation: isolate;
}

.pg-home-hero__card{
    position:relative;
    z-index:1;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.07);

    background: linear-gradient(135deg,
    rgba(56,62,74,.98) 0%,
    rgba(52,58,70,.98) 55%,
    rgba(48,54,66,.98) 100%);

    box-shadow: 0 16px 50px rgba(0,0,0,.16);
    overflow:hidden;

    padding: 18px 16px 18px;
}

@media (min-width: 992px){
    .pg-home-hero__card{
        padding: 30px 28px 34px;
        border-radius: 34px;
    }
}

.pg-home-hero__grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
}

.pg-home-hero__content{ order: 1; }
.pg-home-hero__visual{ order: 2; }

@media (min-width: 992px){
    .pg-home-hero__grid{
        grid-template-columns: 1.12fr .88fr;
        gap: 30px;
        align-items:center;
        min-height: 510px;
    }
}

/* کنترل فاصله افقی داخل محتوا */
.pg-home-hero__content{
    color:#fff;
    min-width: 0;
    padding-inline: var(--hero-pad-x-mobile);
}
.pg-home-hero__content *{ max-width: 100%; }

/* فاصله تیتر با بالای کادر */
@media (min-width: 992px){
    .pg-home-hero__content{
        padding-top: 2px;
        padding-inline: var(--hero-pad-x-desktop);
    }
}
@media (max-width: 991px){
    .pg-home-hero__content{ padding-top: 22px; }
}

/* تیتر */
.pg-home-hero__title{
    margin:0;
    font-weight:900;
    line-height:1.5;
    font-size:22px;
    letter-spacing:-.2px;
}
.pg-home-hero__title span{ color: #3084df; }
.pg-home-hero__title span{ display:inline-block; }
.pg-home-hero__title span::after{ content:"\A"; white-space:pre; }

@media (min-width: 992px){
    .pg-home-hero__title{
        font-size:38px;
        margin:-25px 10px 50px 0;
    }
}

/* ✅ موبایل: فاصله تیتر با چیپ‌ها بیشتر + فونت کمی بزرگ‌تر */
@media (max-width: 560px){
    .pg-home-hero__title{
        font-size: 26px;
        line-height: 1.60;
        margin-bottom: 24px; /* فاصله با چیپ‌ها */
    }
}


/* چیپ‌ها */
.pg-home-hero__chips{
    display:flex;
    gap:12px;
    margin: 0 0 12px 0;   /* ✅ بالا از تیتر می‌گیریم (margin-bottom تیتر) */
    flex-wrap: nowrap;
    min-width:0;
}

/* چیپ */
.pg-chip{
    flex: 1 1 0;
    min-width: 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    padding: 14px 14px;
    border-radius: 18px;

    margin: 0;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow:
            inset 0 0 0 1px rgba(0,0,0,.18),
            0 10px 26px rgba(0,0,0,.14);
}

.pg-chip__text{
    color: rgba(255,255,255,.92);
    font-weight:900;
    font-size:14px;
    line-height:1.1;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
}

@media (min-width: 992px){
    .pg-home-hero__chips{
        align-items: stretch;
        gap: 10px;
        margin: 8px 0 10px;
    }
    .pg-chip{
        padding: 14px 12px;
        align-items: center;
    }
    .pg-chip__text{
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.25;
    }
}

/* ✅ موبایل: دایره چیپ + عکسش کوچیک‌تر (متن حتما جا می‌گیره) */
@media (max-width: 560px){
    .pg-home-hero__chips{
        gap: 6px;
        margin: 0 0 12px 0;
    }
    .pg-chip{
        padding: 8px 8px;
        border-radius: 14px;
        gap: 6px;
    }
    .pg-chip__text{
        font-size: 11px;
        line-height: 1.15;
    }
    .pg-chip__icon{
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
    }
    .pg-chip__icon img{
        width: 20px;
        height: 20px;
    }
}

/* آیکون دایره */
.pg-chip__icon{
    width:65px;
    height:65px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex: 0 0 auto;
    box-shadow: 0 10px 22px rgba(0,0,0,.22);
}
.pg-chip__icon img{
    width:55px;
    height:55px;
    object-fit:contain;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.20));
}

.pg-home-hero__chips .pg-chip:nth-child(1) .pg-chip__icon{ background: #dcdcdc; }
.pg-home-hero__chips .pg-chip:nth-child(2) .pg-chip__icon{ background: rgb(209, 92, 92); }
.pg-home-hero__chips .pg-chip:nth-child(3) .pg-chip__icon{ background: rgba(50, 76, 145, 0.9); }

/* ✅ متن زیر چیپ‌ها: فاصله بالا/پایین بیشتر */
.pg-home-hero__desc{
    margin: 14px 0 14px;     /* ✅ بیشتر شد */
    color: rgba(255,255,255,.72);
    font-size:15px;
    line-height:1.85;
    max-width: 70ch;
    overflow-wrap: anywhere;
}
@media (max-width: 560px){
    .pg-home-hero__desc{
        font-size: 14px;
        line-height: 1.9;
        margin: 18px 0 18px;   /* ✅ موبایل بیشتر */
    }
}

/* دکمه‌ها */
.pg-home-hero__actions{
    margin-top: 0; /* چون desc خودش spacing می‌ده */
}

/* موبایل: دو دکمه کنار هم */
@media (max-width: 560px){
    .pg-home-hero__actions{
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap:10px;
        align-items:stretch;
    }
}
@media (min-width: 561px){
    .pg-home-hero__actions{
        display:flex;
        gap:12px;
        flex-wrap:wrap;
    }
}

.pg-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:14px 28px;
    border-radius:16px;
    text-decoration:none !important;
    font-weight:900;
    font-size:14px;

    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;

    min-width:0;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.pg-btn:hover{ transform: translateY(-2px); }

.pg-btn--primary{
    background: var(--pgco-accent);
    color:#fff;
    box-shadow: 0 14px 34px rgba(239,68,68,.22);
}
.pg-btn--ghost{
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.92);
}

@media (max-width: 560px){
    .pg-btn{
        padding: 12px 10px;
        border-radius: 14px;
        font-size: 13px;
    }
}


/* ===========================
   VISUAL (3 images)
=========================== */

.pg-home-hero__visual{
    position:relative;
    overflow: visible;
}

.pg-stack{
    position:relative;
    width:100%;
    height: clamp(240px, 46vw, 420px);
    display:block;
}

.pg-pos{
    position:absolute;
    left:50%;
    top:50%;
    transform: translate3d(-50%, -50%, 0);
    transform-origin: 50% 50%;
    will-change: transform;
    pointer-events:none;
}

.pg-pos--back{ z-index: 1; }
.pg-pos--mid{  z-index: 2; }
.pg-pos--front{z-index: 3; }

.pg-float{
    display:block;
    will-change: transform;
    animation: pg-float-onlyY 2.9s ease-in-out infinite;
}
.pg-pos--front .pg-float{ animation-delay: 0s; }
.pg-pos--mid   .pg-float{ animation-delay: .22s; }
.pg-pos--back  .pg-float{ animation-delay: .44s; }

@keyframes pg-float-onlyY{
    0%,100%{ transform: translate3d(0,0,0); }
    50%{ transform: translate3d(0,-16px,0); }
}

.pg-stack__img{
    display:block;
    height:auto;
    width: clamp(170px, 26vw, 320px);
    max-width: none;
    user-select:none;
    pointer-events:none;
    filter: drop-shadow(0 18px 34px rgba(0,0,0,.30));
}

.pg-pos--front .pg-stack__img{ width: clamp(185px, 28vw, 340px); }
.pg-pos--mid   .pg-stack__img{ width: clamp(170px, 25vw, 310px); }
.pg-pos--back  .pg-stack__img{ width: clamp(155px, 23vw, 285px); opacity: .95; }

@media (min-width: 992px){
    .pg-home-hero__visual{ padding: 0; }

    .pg-pos--back{
        transform: translate3d(-50%, -50%, 0) translate3d(100px, -25px, 0) rotate(2deg);
    }
    .pg-pos--mid{
        transform: translate3d(-50%, -50%, 0) translate3d(-110px, -16px, 0) rotate(-2deg);
    }
    .pg-pos--front{
        transform: translate3d(-50%, -50%, 0) translate3d(10px, 86px, 0) rotate(-2deg);
    }
}

/* ✅ موبایل: عکس‌ها کوچیک‌تر + فاصله عرضی کمتر (شبیه دسکتاپ) */
@media (max-width: 991px){
    .pg-home-hero__visual{
        margin-top: 10px;
        display:flex;
        justify-content:center;
    }
    .pg-stack{
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
    }
    .pg-pos{ top: 56%; }

    /* کوچیک‌تر */
    .pg-stack__img{ width: clamp(170px, 50vw, 310px); }
    .pg-pos--front .pg-stack__img{ width: clamp(182px, 53vw, 328px); }
    .pg-pos--mid   .pg-stack__img{ width: clamp(170px, 50vw, 310px); }
    .pg-pos--back  .pg-stack__img{ width: clamp(158px, 47vw, 292px); }

    /* فاصله افقی کمتر (نزدیک‌تر به دسکتاپ) */
    .pg-pos--back{
        transform: translate3d(-50%, -50%, 0) translate3d(78px, -22px, 0) rotate(2deg);
    }
    .pg-pos--mid{
        transform: translate3d(-50%, -50%, 0) translate3d(-84px, -10px, 0) rotate(-2deg);
    }
    .pg-pos--front{
        transform: translate3d(-50%, -50%, 0) translate3d(0px, 46px, 0) rotate(-2deg);
    }
}

/* Rings */
.pg-home-hero__ring,
.pg-home-hero__ring2{
    position:absolute;
    z-index:0;
    border-radius:999px;
    pointer-events:none;
    will-change: transform;
    animation: pg-ring-onlyY 3.6s ease-in-out infinite;
}

@keyframes pg-ring-onlyY{
    0%,100%{ transform: translate3d(0,0,0); }
    50%{ transform: translate3d(0,-18px,0); }
}

.pg-home-hero__ring{
    right: -64px;
    top: 44%;
    width: 220px;
    height: 220px;
    background: rgba(74,163,255,.26);
    animation-delay: .15s;
}

.pg-home-hero__ring2{
    left: -56px;
    top: 18%;
    width: 150px;
    height: 150px;
    background: rgba(0,0,0,.22);
    animation-delay: .55s;
}

@media (prefers-reduced-motion: reduce){
    .pg-float,
    .pg-home-hero__ring,
    .pg-home-hero__ring2{ animation:none; }
}


/* =========================================================
   Separator
========================================================= */
.pg-home-sep{
    width:92%;
    max-width:1080px;
    height:1px;
    background:rgba(0,0,0,.03);
    border-bottom:1px solid rgba(107,114,128,.22);
    margin:16px auto 16px;
    border-radius:999px;
}

/* ردیف عنوان + لینک */
.pg-home-row-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin: 20px auto;
}
.pg-home-row-title{
    font-size:16px;
    font-weight:900;
    color:var(--pgco-text);
    margin:0;
}
h2.pg-home-row-title{
    font-size:22px;
    font-weight:900;
    color:var(--pgco-text);
    margin:0 15px 0 0;
}
.pg-home-row-link{
    font-size:14px;
    color:var(--pgco-accent);
    text-decoration:none !important;
    font-weight:600;
    transition:color .15s ease;
}
.pg-home-row-link:hover{
    color:var(--pgco-brand);
    text-decoration: none;
}

/* دسته‌بندی‌ها */
.pg-home-cats__grid{
    display:flex;
    gap:14px;
    margin-bottom: 12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px;
}
.pg-home-cats__grid::-webkit-scrollbar{display:none;}

.pg-home-cat{
    min-width: calc(50% - 10px);
    scroll-snap-align:start;
    background:var(--pgco-card);
    border:1px solid var(--pgco-border);
    border-radius:18px;
    padding:14px;
    text-decoration:none !important;
    color:inherit;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    box-shadow:0 3px 10px rgba(0,0,0,.03);
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.pg-home-cat:hover{
    transform:translateY(-3px);
    box-shadow:0 6px 18px rgba(0,0,0,.05);
    background:rgba(110,122,144,.08);
}
.pg-home-cat__icon{
    width:70px;
    height:70px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border:1px solid var(--pgco-border);
    background:none;
    margin-bottom:8px;
}
.pg-home-cat__icon img{ width:46px; height:46px; object-fit:contain; }
.pg-home-cat__icon-ph{
    width:30px; height:30px; border-radius:10px; background:rgba(24,39,77,.25);
}
.pg-home-cat__title{ font-weight:900; font-size:15px; margin-bottom:4px; }
.pg-home-cat__desc{ font-size:12px; color:var(--pgco-muted); line-height:1.4; }

.pg-home-cats__dots{
    display:flex;
    gap:6px;
    justify-content:center;
    margin-bottom:18px;
}
.pg-home-cats__dots button{
    width:7px;
    height:7px;
    border-radius:999px;
    border:none;
    background:rgba(25,40,79,.2);
    cursor:pointer;
    transition:.15s;
}
.pg-home-cats__dots button.is-active{
    width:16px;
    background:var(--pgco-accent);
}

/* محصولات پرفروش */
.pg-home-best{
    background:#fff;
    border:1px solid rgba(0,0,0,.015);
    border-radius:18px;
    padding:8px 14px 32px 6px;
    margin:25px auto;
    box-shadow:0 4px 20px rgba(0,0,0,.02);
}
.pg-home-best__grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:14px;
}
.pg-home-best__empty{
    padding:14px;
    border:1px dashed var(--pgco-border);
    border-radius:14px;
    text-align:center;
    color:var(--pgco-muted);
    font-size:13px;
}

/* چرا پیمان‌گزاران */
.pg-home-why{
    background:transparent;
    margin:25px auto;
}
.pg-home-why__grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:14px;
}
.pg-home-why__card{
    background:#fff;
    border:1px solid var(--pgco-border);
    border-radius:16px;
    padding:14px 14px 12px;
    display:flex;
    flex-direction:column;
    gap:6px;
    box-shadow:0 2px 12px rgba(0,0,0,.02);
}
.pg-home-why__icon{
    width:52px;
    height:52px;
    border-radius:14px;
    border:1px solid var(--pgco-border);
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    overflow:hidden;
}
.pg-home-why__icon img{ width:34px; height:34px; object-fit:contain; }
.pg-home-why__icon-ph{
    width:20px; height:20px; border-radius:6px; background:rgba(25,40,79,.25);
}
.pg-home-why__title{
    font-weight:900;
    font-size:18px;
    color:var(--pgco-text);
}
.pg-home-why__desc{
    font-size:12px;
    color:var(--pgco-muted);
    line-height:1.5;
}

@media (min-width: 992px){
    .pg-home{ padding:24px 16px 90px; }

    .pg-home-cats__grid{
        display:grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow:visible;
    }
    .pg-home-cats__dots{ display:none; }

    .pg-home-best__grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pg-home-why__grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pg-home-row-title{ font-size:18px; }
    .pg-home-sep{ margin:18px auto 20px; }
}

/* ✅ Mobile chips – tighter text/icon gap + bigger line-height */
@media (max-width: 560px){

    .pg-chip{
        gap: 6px;                 /* فاصله متن با دایره کمتر */
        align-items: flex-start;
    }

    .pg-chip__icon{
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }
    .pg-chip__icon img{
        width: 35px;
        height: 35px;
    }

    .pg-chip__text{
        font-size: 12px;
        line-height: 1.65;        /* ✅ line-height بیشتر */
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        min-width: 0;

        word-break: break-word;
        overflow-wrap: anywhere;
    }
}