/* ======================================================================
   Anzan — بخش‌های بازسازی‌شده صفحه اصلی (نسخه ۲۱)
   مزیت‌ها، نظر مشتریان، مراحل خرید، بنرها و کارت لیست قیمت
   پیشوند: hs-   |   رنگ‌ها از theme-tokens.css
   ====================================================================== */

.hs {
    --hs-ink: var(--az-ink, #0b1324);
    --hs-text: var(--az-text, #1f2a44);
    --hs-muted: var(--az-muted, #5e6b85);
    --hs-border: var(--az-border, #e4e9f2);
    --hs-soft: var(--az-soft, #eef3fb);
    --hs-bg: var(--az-bg, #f5f7fb);
    --hs-primary: var(--az-primary, #1454d6);
    --hs-primary-rgb: var(--az-primary-rgb, 20 84 214);
    --hs-accent: var(--az-accent, #ff5a36);
    --hs-accent-rgb: var(--az-accent-rgb, 255 90 54);
    --hs-grad: var(--az-grad, linear-gradient(135deg, #0a2358 0%, #1454d6 55%, #2f6bff 100%));
    --hs-grad-dark: var(--az-grad-dark, linear-gradient(135deg, #070d1a 0%, #0b1324 50%, #1b2a4a 100%));
    --hs-r: 20px;
    --hs-r-lg: 28px;
    --hs-shadow-sm: 0 2px 8px -4px rgb(11 19 36 / .12), 0 10px 30px -22px rgb(11 19 36 / .3);
    --hs-shadow: 0 26px 60px -34px rgb(var(--hs-primary-rgb) / .5);
    --hs-ease: cubic-bezier(.2, .8, .2, 1);
}

.hs-section { padding: clamp(36px, 5vw, 64px) 0; content-visibility: auto; contain-intrinsic-size: 1px 720px; }
.hs-section--tight { padding-top: clamp(16px, 2vw, 24px); }
.hs-container { width: min(1280px, 100% - 32px); margin-inline: auto; }

/* ---------------------------------------------------------------------
   ۱) مزیت‌ها — «چرا ما؟»
   --------------------------------------------------------------------- */
.hs-why { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 18px; align-items: stretch; }
.hs-why__card {
    position: relative; display: flex; flex-direction: column; gap: 12px; overflow: hidden;
    padding: clamp(20px, 2.4vw, 30px); border-radius: var(--hs-r-lg);
    background: #fff; border: 1px solid var(--hs-border); box-shadow: var(--hs-shadow-sm);
    transition: transform .35s var(--hs-ease), box-shadow .35s var(--hs-ease), border-color .35s;
}
.hs-why__card:hover { transform: translateY(-6px); box-shadow: var(--hs-shadow); border-color: rgb(var(--hs-primary-rgb) / .28); }
.hs-why__card--lead { background: var(--hs-grad-dark); border-color: transparent; color: #fff; }
.hs-why__card--lead::after {
    content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(circle, rgb(var(--hs-primary-rgb) / .55), transparent 70%);
    top: -90px; left: -70px; pointer-events: none;
}
.hs-why__ic {
    width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; flex: none;
    background: rgb(var(--hs-primary-rgb) / .1); color: var(--hs-primary); font-size: 1.4rem;
    transition: transform .35s var(--hs-ease);
}
.hs-why__card:hover .hs-why__ic { transform: rotate(-6deg) scale(1.05); }
.hs-why__card--lead .hs-why__ic { background: rgb(255 255 255 / .14); color: #fff; box-shadow: 0 0 0 1px rgb(255 255 255 / .18); }
.hs-why__card h3 { margin: 0; font-size: clamp(1rem, .95rem + .3vw, 1.2rem); font-weight: 900; line-height: 1.7; color: var(--hs-ink); position: relative; }
.hs-why__card--lead h3 { color: #fff; }
.hs-why__card p { margin: 0; font-size: .89rem; line-height: 2.1; color: var(--hs-muted); position: relative; }
.hs-why__card--lead p { color: rgb(255 255 255 / .78); }
.hs-why__link {
    margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 800;
    color: var(--hs-primary); position: relative;
}
.hs-why__card--lead .hs-why__link { color: #fff; }
.hs-why__link i { transition: transform .25s var(--hs-ease); }
.hs-why__card:hover .hs-why__link i { transform: translateX(-4px); }
.hs-why__n {
    position: absolute; left: clamp(16px, 2vw, 26px); top: clamp(16px, 2vw, 26px);
    font-size: 2.6rem; font-weight: 900; line-height: 1; color: rgb(var(--hs-primary-rgb) / .07);
}
.hs-why__card--lead .hs-why__n { color: rgb(255 255 255 / .12); }

/* ---------------------------------------------------------------------
   ۲) نظر مشتریان
   --------------------------------------------------------------------- */
.hs-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hs-quote {
    position: relative; display: flex; flex-direction: column; gap: 14px; margin: 0;
    padding: clamp(20px, 2.2vw, 28px); border-radius: var(--hs-r-lg);
    background: #fff; border: 1px solid var(--hs-border); box-shadow: var(--hs-shadow-sm);
    transition: transform .35s var(--hs-ease), box-shadow .35s var(--hs-ease);
}
.hs-quote::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 4px; border-radius: var(--hs-r-lg) var(--hs-r-lg) 0 0;
    background: linear-gradient(90deg, var(--hs-primary), var(--hs-accent)); opacity: 0; transition: opacity .3s;
}
.hs-quote:hover { transform: translateY(-5px); box-shadow: var(--hs-shadow); }
.hs-quote:hover::before { opacity: 1; }
.hs-quote__mark {
    position: absolute; left: clamp(18px, 2vw, 26px); top: clamp(14px, 2vw, 20px);
    font-size: 3.4rem; line-height: 1; font-family: Georgia, serif; color: rgb(var(--hs-primary-rgb) / .1);
}
.hs-quote__stars { display: inline-flex; gap: 3px; color: #f59e0b; font-size: .85rem; }
.hs-quote blockquote { margin: 0; font-size: .92rem; line-height: 2.15; color: var(--hs-text); position: relative; }
.hs-quote figcaption { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--hs-border); display: flex; align-items: center; gap: 12px; }
.hs-avatar {
    flex: none; width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; overflow: hidden;
    background: var(--hs-grad); color: #fff; font-weight: 900; font-size: 1.05rem;
}
.hs-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hs-quote figcaption strong { display: block; font-size: .9rem; font-weight: 800; color: var(--hs-ink); }
.hs-quote figcaption em { font-style: normal; font-size: .76rem; color: var(--hs-muted); }
.hs-quote__badge { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 800; color: #16a34a; background: #dcfce7; padding: 4px 9px; border-radius: 999px; }

/* ---------------------------------------------------------------------
   ۳) مراحل خرید
   --------------------------------------------------------------------- */
.hs-steps { position: relative; display: grid; gap: 18px; grid-template-columns: repeat(var(--hs-steps, 4), minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.hs-steps::before {
    content: ""; position: absolute; top: 38px; right: 8%; left: 8%; height: 2px;
    background: repeating-linear-gradient(90deg, rgb(var(--hs-primary-rgb) / .28) 0 10px, transparent 10px 20px);
}
.hs-step { position: relative; text-align: center; padding: 8px 10px 0; }
.hs-step__dot {
    position: relative; z-index: 1; width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 26px;
    display: grid; place-items: center; background: #fff; border: 1px solid var(--hs-border);
    color: var(--hs-primary); font-size: 1.5rem; box-shadow: var(--hs-shadow-sm);
    transition: transform .35s var(--hs-ease), box-shadow .35s var(--hs-ease), background .3s, color .3s;
}
.hs-step:hover .hs-step__dot { transform: translateY(-5px); background: var(--hs-grad); color: #fff; box-shadow: var(--hs-shadow); }
.hs-step__n {
    position: absolute; top: -8px; right: -8px; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 10px;
    display: grid; place-items: center; background: var(--hs-accent); color: #fff; font-size: .78rem; font-weight: 900;
    box-shadow: 0 8px 18px -8px rgb(var(--hs-accent-rgb) / .9);
}
.hs-step strong { display: block; font-size: .98rem; font-weight: 900; color: var(--hs-ink); margin-bottom: 6px; }
.hs-step p { margin: 0; font-size: .84rem; line-height: 2; color: var(--hs-muted); }

/* ---------------------------------------------------------------------
   ۴) بنرها
   --------------------------------------------------------------------- */
.hs-hero-banner { display: block; border-radius: var(--hs-r-lg); overflow: hidden; box-shadow: var(--hs-shadow-sm); transition: transform .4s var(--hs-ease), box-shadow .4s var(--hs-ease); }
.hs-hero-banner:hover { transform: translateY(-4px); box-shadow: var(--hs-shadow); }
.hs-hero-banner img { display: block; width: 100%; height: auto; }

.hs-banners { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.hs-banners--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hs-banners--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hs-banner {
    position: relative; display: block; border-radius: var(--hs-r); overflow: hidden; background: var(--hs-soft);
    box-shadow: var(--hs-shadow-sm); transition: transform .4s var(--hs-ease), box-shadow .4s var(--hs-ease);
}
.hs-banner img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .6s var(--hs-ease); }
.hs-banner:hover { transform: translateY(-5px); box-shadow: var(--hs-shadow); }
.hs-banner:hover img { transform: scale(1.04); }
.hs-banner__cap {
    position: absolute; inset: auto 0 0; padding: 26px 16px 14px; color: #fff; font-weight: 800; font-size: .9rem;
    background: linear-gradient(0deg, rgb(11 19 36 / .78), transparent);
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s;
}
.hs-banner:hover .hs-banner__cap { opacity: 1; transform: none; }
.hs-banner__cap i { font-size: 1rem; }

/* ---------------------------------------------------------------------
   ۵) کارت لیست قیمت
   --------------------------------------------------------------------- */
.hs-promo {
    position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; gap: clamp(16px, 2.5vw, 32px); margin-top: 26px;
    padding: clamp(22px, 3vw, 38px); border-radius: var(--hs-r-lg);
    background: var(--hs-grad); color: #fff; box-shadow: var(--hs-shadow);
}
.hs-promo::before, .hs-promo::after { content: ""; position: absolute; border-radius: 50%; background: rgb(255 255 255 / .08); pointer-events: none; }
.hs-promo::before { width: 320px; height: 320px; top: -140px; left: -80px; }
.hs-promo::after { width: 200px; height: 200px; bottom: -110px; left: 28%; }
.hs-promo > * { position: relative; z-index: 1; }
.hs-promo__ic {
    width: clamp(64px, 7vw, 86px); height: clamp(64px, 7vw, 86px); border-radius: 26px; display: grid; place-items: center;
    background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .2); font-size: clamp(1.6rem, 2.4vw, 2.2rem);
}
.hs-promo__badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #16a34a; font-size: .74rem; font-weight: 800; margin-bottom: 10px; }
.hs-promo h3 { margin: 0 0 8px; font-size: clamp(1.15rem, 1rem + .9vw, 1.6rem); font-weight: 900; color: #fff; line-height: 1.7; }
.hs-promo p { margin: 0; font-size: .89rem; line-height: 2; color: rgb(255 255 255 / .82); max-width: 62ch; }
.hs-promo__btn {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    height: 50px; padding: 0 24px; border-radius: 16px; background: #fff; color: var(--hs-ink) !important;
    font-weight: 900; font-size: .92rem; transition: transform .25s var(--hs-ease), box-shadow .25s;
}
.hs-promo__btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgb(0 0 0 / .5); }

/* نمایش تدریجی (فقط وقتی اسکریپت لود شده) */
.hm-js .hs-reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--hs-ease), transform .7s var(--hs-ease); }
.hm-js .hs-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .hm-js .hs-reveal { opacity: 1; transform: none; }
    .hs * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------------
   واکنش‌گرا
   --------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .hs-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hs-why__card--lead { grid-column: 1 / -1; }
    .hs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hs-steps::before { display: none; }
    .hs-banners--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .hs-why, .hs-quotes, .hs-banners, .hs-banners--3, .hs-banners--2 { grid-template-columns: 1fr; }
    .hs-steps { grid-template-columns: 1fr; gap: 10px; }
    .hs-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; text-align: right; align-items: start; padding: 12px; background: #fff; border: 1px solid var(--hs-border); border-radius: var(--hs-r); }
    .hs-step__dot { width: 56px; height: 56px; margin: 0; border-radius: 18px; font-size: 1.2rem; }
    .hs-promo { grid-template-columns: auto minmax(0, 1fr); }
    .hs-promo__btn { grid-column: 1 / -1; justify-content: center; }
    .hs-quote__mark { font-size: 2.6rem; }
}