/* ==========================================================================
   Canin — «درباره کانین» (about.php).

   همه‌چیز زیر .ab بسته شده — همان الگوی home-modern.css — پس این فایل روی هیچ
   صفحه‌ی دیگری اثر ندارد و style.css دست نخورده می‌ماند. رنگ‌ها از متغیرهای
   خودِ سایت می‌آیند (--primary، --bg، …) تا صفحه با بقیه‌ی کانین یکدست باشد.

   اول گوشی نوشته شده و عرض‌های بزرگ‌تر به آن اضافه می‌کنند، چون بیشترِ
   بازدیدِ کانین از گوشی است.
   ========================================================================== */

.ab {
    --ab-ink: #0b2545;
    --ab-body: #4a5b70;
    --ab-line: #e3edfb;
    display: block;
    background: var(--bg);
    color: var(--text);
}

.ab .container { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 16px; }

.ab svg { flex: none; }

/* --------------------------------------------------------------- shared bits */
.ab-sec { padding: 30px 0 0; }
/* phones: style.css already leaves 70px under the page for the bottom bar */
.ab-last { padding-bottom: 8px; }
.ab-tinted {
    margin-top: 30px;
    padding: 26px 0 28px;
    background: linear-gradient(180deg, #edf4ff, #f6f9ff);
}

.ab-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.6;
    color: var(--ab-ink);
}
.ab-title::before {
    content: "";
    flex: none;
    width: 5px;
    height: 20px;
    border-radius: 99px;
    background: linear-gradient(180deg, var(--primary), #38bdf8);
}

.ab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 13px;
    font-size: 13.5px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}
.ab-btn svg { width: 17px; height: 17px; }
.ab-btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-strong));
    color: #fff;
    box-shadow: 0 8px 20px rgba(22, 119, 255, .28);
}
.ab-btn-line { background: #fff; border: 1.5px solid #cfe0f7; color: var(--primary-strong); }
.ab-btn-white { background: #fff; color: var(--primary-strong); box-shadow: 0 8px 20px rgba(0, 0, 0, .14); }
.ab-btn:hover { filter: brightness(1.05); }

/* icon tile used by «چرا کانین» and «برای چه کسانی» */
.ab-ic {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--surface-2);
    color: var(--primary-strong);
}
.ab-ic svg { width: 21px; height: 21px; }
.ab-ic-blue  { background: #e6f0ff; color: #0757c7; }
.ab-ic-teal  { background: #e2f6f2; color: #0f766e; }
.ab-ic-amber { background: #fff3dd; color: #b45309; }

/* ---------------------------------------------------------------------- hero */
.ab-hero {
    padding: 22px 0 0;
    background:
        radial-gradient(900px 340px at 90% -10%, rgba(22, 119, 255, .14), transparent 60%),
        linear-gradient(180deg, #eef5ff 0%, var(--bg) 84%);
}
.ab-hero-grid { display: grid; gap: 22px; }
.ab-hero-grid > *,
.ab-stats > * { min-width: 0; }

.ab-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--ab-line);
    color: var(--primary-strong);
    font-size: 12px;
    font-weight: 700;
}
.ab-eyebrow svg { width: 14px; height: 14px; }

.ab-hero-copy h1 {
    margin: 12px 0 10px;
    font-size: clamp(22px, 6.2vw, 28px);
    font-weight: 900;
    line-height: 1.55;
    letter-spacing: -.3px;
    color: var(--ab-ink);
    text-wrap: balance;
}
.ab-hero-copy p {
    margin: 0 0 18px;
    max-width: 36em;
    font-size: 14px;
    line-height: 2.05;
    color: var(--ab-body);
}
.ab-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ab-actions .ab-btn { flex: 1 1 140px; }

/* «یک محصول، چند قیمت» — schematic, no real product or shop */
.ab-demo { position: relative; display: flex; justify-content: center; }
.ab-demo-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--ab-line);
    border-radius: 20px;
    box-shadow: 0 18px 44px rgba(16, 60, 120, .12);
}
.ab-demo-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px dashed #d9e6f8;
}
.ab-demo-thumb {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: var(--surface-2);
    color: var(--primary);
}
.ab-demo-thumb svg { width: 25px; height: 25px; stroke-width: 1.7; }
.ab-demo-lines { flex: 1; display: grid; gap: 9px; }
.ab-demo-lines i { display: block; height: 9px; border-radius: 99px; background: #e2ebf8; }
.ab-demo-lines i:last-child { width: 55%; background: #edf2f9; }
.ab-demo-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: #f6f9fe;
    font-size: 12.5px;
    color: #334155;
}
.ab-demo-row.is-best { background: #ecfdf5; border-color: #b7ebd3; }
.ab-demo-shop { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; white-space: nowrap; }
.ab-demo-shop b { width: 24px; height: 24px; border-radius: 50%; background: #d7e5fa; }
.is-best .ab-demo-shop b { background: #9fe3c3; }
.ab-demo-tag {
    padding: 2px 8px;
    border-radius: 99px;
    background: #047857;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}
.ab-demo-price {
    margin-inline-start: auto;
    font-size: 13.5px;
    font-weight: 900;
    color: var(--ab-ink);
    white-space: nowrap;
}
.ab-demo-price small { font-size: 10.5px; font-weight: 600; color: var(--muted); }

/* live numbers */
.ab-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 20px;
}
.ab-stats > div {
    padding: 13px 6px;
    background: #fff;
    border: 1px solid var(--ab-line);
    border-radius: 14px;
    text-align: center;
}
.ab-stats strong {
    display: block;
    font-size: 19px;
    font-weight: 900;
    line-height: 1.4;
    color: var(--primary-strong);
}
.ab-stats span {
    display: block;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--muted);
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------- goal */
.ab-goal {
    position: relative;
    display: grid;
    gap: 13px;
    padding: 20px 18px 20px 18px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ab-line);
    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(16, 60, 120, .05);
}
.ab-goal::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 5px;
    background: linear-gradient(180deg, var(--primary), #38bdf8);
}
.ab-goal-ic {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--primary-strong);
}
.ab-goal-ic svg { width: 23px; height: 23px; }
.ab-goal h2 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.6;
    color: var(--ab-ink);
}
.ab-goal p { margin: 0; font-size: 14px; line-height: 2.1; color: var(--ab-body); }

/* -------------------------------------------------------------- how it works */
.ab-steps {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: abstep;
}
.ab-steps li {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "ic title" "ic desc";
    align-items: start;
    gap: 2px 14px;
    padding: 16px 15px;
    background: #fff;
    border: 1px solid var(--ab-line);
    border-radius: 16px;
    counter-increment: abstep;
}
.ab-step-ic {
    grid-area: ic;
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), var(--primary-strong));
    color: #fff;
    box-shadow: 0 8px 18px rgba(22, 119, 255, .24);
}
.ab-step-ic svg { width: 21px; height: 21px; }
.ab-step-ic::after {
    content: counter(abstep, persian);
    position: absolute;
    top: -8px;
    inset-inline-start: -8px;
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--primary);
    color: var(--primary-strong);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}
.ab-steps b { grid-area: title; font-size: 14.5px; font-weight: 800; line-height: 1.8; color: var(--ab-ink); }
.ab-steps li > span:last-child { grid-area: desc; font-size: 13px; line-height: 1.95; color: var(--ab-body); }

.ab-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 12px 0 0;
    padding: 12px 14px;
    border: 1px solid #f4dfb4;
    border-radius: 14px;
    background: #fff8ec;
    color: #7a4b08;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.95;
}
.ab-note svg { width: 18px; height: 18px; margin-top: 4px; color: #b45309; }

/* ----------------------------------------------------------------- why canin */
.ab-why {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ab-why li {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "ic title" "ic desc";
    align-items: start;
    gap: 2px 13px;
    padding: 15px;
    background: #fff;
    border: 1px solid var(--ab-line);
    border-radius: 16px;
}
.ab-why .ab-ic { grid-area: ic; }
.ab-why b { grid-area: title; font-size: 14.5px; font-weight: 800; line-height: 1.8; color: var(--ab-ink); }
.ab-why li > span:last-child { grid-area: desc; font-size: 13px; line-height: 1.95; color: var(--ab-body); }

/* -------------------------------------------------------------- who it's for */
.ab-who {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ab-who li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 15px;
    background: #fff;
    border: 1px solid var(--ab-line);
    border-radius: 16px;
}
.ab-who li > div { min-width: 0; }
.ab-who b { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.8; color: var(--ab-ink); }
.ab-who div > span { display: block; font-size: 13px; line-height: 1.95; color: var(--ab-body); }

/* --------------------------------------------------------------- for vendors */
.ab-vendor {
    padding: 22px 16px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0, rgba(255, 255, 255, .16), transparent 45%),
        linear-gradient(135deg, var(--primary) 0%, var(--primary-strong) 100%);
    color: #fff;
    box-shadow: 0 16px 34px rgba(7, 87, 199, .24);
}
.ab-vendor h2 {
    margin: 0 0 8px;
    font-size: clamp(18px, 4.9vw, 23px);
    font-weight: 900;
    line-height: 1.6;
    color: #fff;
}
.ab-vendor-copy p { margin: 0; font-size: 13.5px; line-height: 2.05; color: rgba(255, 255, 255, .93); }

.ab-vendor-types { display: grid; gap: 10px; margin-top: 16px; }
.ab-vendor-types > div {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "ic title" "desc desc";
    align-items: center;
    gap: 9px 11px;
    min-width: 0;
    padding: 15px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(4, 44, 110, .18);
}
.ab-vendor-ic {
    grid-area: ic;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--primary-strong);
}
.ab-vendor-ic svg { width: 20px; height: 20px; }
.ab-vendor-types b { grid-area: title; font-size: 14.5px; font-weight: 800; color: var(--ab-ink); }
.ab-vendor-types div > span:last-child { grid-area: desc; font-size: 13px; line-height: 2; color: var(--ab-body); }

.ab-vendor-city {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 12px 0 0;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 14px;
    background: rgba(4, 44, 110, .26);
    font-size: 13px;
    line-height: 2;
    color: #fff;
}
.ab-vendor-city svg { width: 18px; height: 18px; margin-top: 4px; }

.ab-vendor-foot {
    display: grid;
    gap: 14px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .22);
}
.ab-vendor-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ab-vendor-points li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}
.ab-vendor-points svg { width: 15px; height: 15px; stroke-width: 2.6; }

/* ---------------------------------------------------------------- commitment */
.ab-commit {
    padding: 20px 18px;
    background: #fff;
    border: 1px solid var(--ab-line);
    border-radius: 20px;
}
.ab-commit-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.ab-commit-head .ab-title { margin: 0; }
.ab-commit-head .ab-title::before { display: none; }
.ab-commit-ic {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: #ecfdf5;
    color: #047857;
}
.ab-commit-ic svg { width: 22px; height: 22px; }
.ab-commit ul { margin: 0; padding: 0; list-style: none; }
.ab-commit li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 0;
    border-top: 1px solid #edf2fa;
    font-size: 13.5px;
    line-height: 2;
    color: #334155;
}
.ab-commit li:last-child { padding-bottom: 0; }
.ab-commit li svg {
    width: 22px;
    height: 22px;
    margin-top: 3px;
    padding: 5px;
    border-radius: 50%;
    background: #ecfdf5;
    color: #047857;
    stroke-width: 3;
}

/* ------------------------------------------------------------------- contact */
.ab-contact {
    padding: 24px 18px;
    text-align: center;
    background: linear-gradient(180deg, #fff, #f3f8ff);
    border: 1px solid var(--ab-line);
    border-radius: 22px;
}
.ab-contact h2 { margin: 0 0 8px; font-size: 19px; font-weight: 900; line-height: 1.6; color: var(--ab-ink); }
.ab-contact p { margin: 0 auto 16px; max-width: 40em; font-size: 13.5px; line-height: 2.05; color: var(--ab-body); text-wrap: balance; }
.ab-contact-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 14px;
}
.ab-social { display: flex; gap: 8px; }
.ab-social-link {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(20, 82, 150, .06);
    transition: transform .15s ease, box-shadow .15s ease;
}
.ab-social-link:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(20, 82, 150, .14); }
.ab-social-link svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ab-social-link--instagram { color: #d6336c; }
.ab-social-link--telegram  { color: #1d8fd1; }
.ab-social-link--bale      { color: #1aa37a; }

/* very narrow phones: the sample row has no room for the round avatar */
@media (max-width: 359px) {
    .ab-demo-shop b { display: none; }
}

/* ========================================================= tablet and above */
@media (min-width: 640px) {
    .ab .container { padding-inline: 22px; }
    .ab-actions .ab-btn { flex: 0 0 auto; }
    .ab-why { grid-template-columns: repeat(2, 1fr); }
    .ab-vendor { padding: 28px 26px; }
    .ab-vendor-types { grid-template-columns: repeat(2, 1fr); }
    .ab-vendor-foot { grid-template-columns: 1fr auto; align-items: center; }
    .ab-goal { grid-template-columns: auto 1fr; gap: 18px; padding: 24px 26px; }
    .ab-commit { padding: 24px 26px; }
    .ab-contact { padding: 30px 26px; }
}

/* ================================================================== desktop */
@media (min-width: 901px) {
    .ab .container { padding-inline: 24px; }
    .ab-sec { padding-top: 54px; }
    .ab-last { padding-bottom: 64px; }
    .ab-tinted { margin-top: 54px; padding: 46px 0 50px; }
    .ab-title { margin-bottom: 20px; font-size: 23px; }
    .ab-title::before { height: 24px; }
    .ab-btn { min-height: 50px; padding: 0 28px; font-size: 14.5px; border-radius: 14px; }

    .ab-hero { padding-top: 50px; }
    .ab-hero-grid { grid-template-columns: 1.15fr .85fr; align-items: center; gap: 48px; }
    .ab-eyebrow { font-size: 13px; padding: 6px 15px; }
    .ab-hero-copy h1 { margin: 16px 0 14px; font-size: 38px; line-height: 1.5; }
    .ab-hero-copy p { margin-bottom: 26px; font-size: 16px; line-height: 2.15; }

    .ab-demo { justify-content: flex-end; padding: 14px 0; }
    .ab-demo::before {
        content: "";
        position: absolute;
        inset: 0 46px 0 -18px;
        border-radius: 34px;
        background: linear-gradient(135deg, rgba(22, 119, 255, .16), rgba(56, 189, 248, .1));
        transform: rotate(-4deg);
    }
    .ab-demo-card { padding: 20px; border-radius: 24px; }
    .ab-demo-thumb { width: 56px; height: 56px; border-radius: 15px; }
    .ab-demo-row { padding: 13px 12px; font-size: 13.5px; }
    .ab-demo-shop b { width: 28px; height: 28px; }
    .ab-demo-tag { font-size: 11px; padding: 3px 10px; }
    .ab-demo-price { font-size: 15px; }

    .ab-stats {
        gap: 0;
        margin-top: 44px;
        background: #fff;
        border: 1px solid var(--ab-line);
        border-radius: 20px;
        box-shadow: 0 14px 36px rgba(16, 60, 120, .07);
    }
    .ab-stats > div { padding: 24px 10px; background: none; border: 0; border-radius: 0; }
    .ab-stats > div + div { border-inline-start: 1px solid var(--ab-line); }
    .ab-stats strong { font-size: 32px; }
    .ab-stats span { font-size: 14px; }

    .ab-goal { gap: 24px; padding: 34px 38px; border-radius: 24px; }
    .ab-goal-ic { width: 62px; height: 62px; border-radius: 18px; }
    .ab-goal-ic svg { width: 30px; height: 30px; }
    .ab-goal h2 { margin-bottom: 10px; font-size: 24px; }
    .ab-goal p { max-width: 50em; font-size: 15.5px; line-height: 2.2; }

    .ab-steps { grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .ab-steps li {
        grid-template-columns: 1fr;
        grid-template-areas: "ic" "title" "desc";
        align-content: start;
        gap: 6px;
        padding: 26px 24px;
        border-radius: 20px;
    }
    .ab-step-ic { width: 56px; height: 56px; margin-bottom: 10px; border-radius: 16px; }
    .ab-step-ic svg { width: 25px; height: 25px; }
    .ab-step-ic::after { width: 26px; height: 26px; font-size: 13px; }
    .ab-steps b { font-size: 17px; }
    .ab-steps li > span:last-child { font-size: 14px; line-height: 2.05; }
    .ab-note { margin-top: 18px; padding: 14px 18px; font-size: 14px; }

    .ab-why { grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .ab-why li {
        grid-template-columns: 1fr;
        grid-template-areas: "ic" "title" "desc";
        align-content: start;
        gap: 6px;
        padding: 24px 20px;
        border-radius: 20px;
    }
    .ab-ic { width: 52px; height: 52px; border-radius: 15px; }
    .ab-ic svg { width: 24px; height: 24px; }
    .ab-why .ab-ic { margin-bottom: 8px; }
    .ab-why b { font-size: 16px; }
    .ab-why li > span:last-child { font-size: 14px; line-height: 2.05; }

    .ab-who { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .ab-who li { gap: 15px; padding: 22px 20px; border-radius: 20px; }
    .ab-who b { font-size: 16px; }
    .ab-who div > span { font-size: 14px; line-height: 2.05; }

    .ab-vendor { padding: 40px 42px; border-radius: 28px; }
    .ab-vendor h2 { font-size: 28px; }
    .ab-vendor-copy p { max-width: 46em; font-size: 15.5px; line-height: 2.15; }
    .ab-vendor-types { gap: 16px; margin-top: 26px; }
    .ab-vendor-types > div { align-content: start; padding: 22px; border-radius: 20px; }
    .ab-vendor-ic { width: 46px; height: 46px; border-radius: 13px; }
    .ab-vendor-ic svg { width: 22px; height: 22px; }
    .ab-vendor-types b { font-size: 17px; }
    .ab-vendor-types div > span:last-child { font-size: 14px; line-height: 2.1; }
    .ab-vendor-city { margin-top: 16px; padding: 15px 20px; font-size: 14px; }
    .ab-vendor-foot { margin-top: 24px; padding-top: 24px; }
    .ab-vendor-points { gap: 10px 28px; }
    .ab-vendor-points li { font-size: 14.5px; }

    .ab-commit {
        display: grid;
        grid-template-columns: 240px 1fr;
        align-items: center;
        gap: 34px;
        padding: 34px 38px;
        border-radius: 24px;
    }
    .ab-commit-head { flex-direction: column; align-items: flex-start; gap: 14px; margin: 0; }
    .ab-commit-head .ab-title { font-size: 26px; }
    .ab-commit-ic { width: 62px; height: 62px; border-radius: 18px; }
    .ab-commit-ic svg { width: 30px; height: 30px; }
    .ab-commit li { padding: 15px 0; font-size: 15px; }
    .ab-commit li:first-child { padding-top: 0; border-top: 0; }

    .ab-contact { padding: 44px 30px; border-radius: 28px; }
    .ab-contact h2 { font-size: 25px; }
    .ab-contact p { margin-bottom: 22px; font-size: 15.5px; }
    .ab-social-link { width: 50px; height: 50px; }
    .ab-social-link svg { width: 23px; height: 23px; }
}

/* =================================================================== motion
   حرکت‌های صفحه. سبک‌اند: فقط opacity و transform (کارِ کارتِ گرافیک، بدون
   چیدمانِ دوباره‌ی صفحه)، بدون هیچ کتابخانه.

   همه زیر .ab-motion‌اند. این کلاس را اسکریپتِ بالای about.php می‌گذارد، و
   نمی‌گذارد اگر مرورگر قدیمی باشد یا کاربر در دستگاهش «کاهش حرکت» را روشن
   کرده باشد. پس بدون آن کلاس، صفحه همان صفحه‌ی کامل و ثابت است.
   ========================================================================== */
@keyframes ab-up   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ab-row  { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes ab-pop  { 0% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: none; } }
@keyframes ab-float { from { transform: translateY(0); } to { transform: translateY(-8px); } }

/* ۱) بالای صفحه: برچسب، تیتر، متن و دکمه‌ها پشتِ هم بالا می‌آیند */
.ab-motion .ab-hero-copy > * { animation: ab-up .6s cubic-bezier(.2, .7, .2, 1) both; }
.ab-motion .ab-hero-copy > h1 { animation-delay: .08s; }
.ab-motion .ab-hero-copy > p { animation-delay: .16s; }
.ab-motion .ab-hero-copy > .ab-actions { animation-delay: .24s; }

/* ۲) کارتِ نمونه: خودش می‌آید، بعد سه قیمت یکی‌یکی، بعد برچسبِ «کمترین قیمت» */
.ab-motion .ab-demo-card { animation: ab-up .7s .25s cubic-bezier(.2, .7, .2, 1) both; }
.ab-motion .ab-demo-row { animation: ab-row .5s cubic-bezier(.2, .7, .2, 1) both; }
.ab-motion .ab-demo-row:nth-child(2) { animation-delay: .6s; }
.ab-motion .ab-demo-row:nth-child(3) { animation-delay: .75s; }
.ab-motion .ab-demo-row:nth-child(4) { animation-delay: .9s; }
.ab-motion .ab-demo-tag { animation: ab-pop .45s 1.25s both; }

/* ۳) تکه‌های پایین‌تر: با رسیدن به دیدِ کاربر ظاهر می‌شوند (is-in را اسکریپتِ
      پایینِ about.php می‌گذارد و بعد data-rv را برمی‌دارد) */
.ab-motion [data-rv] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}
.ab-motion [data-rv].is-in { opacity: 1; transform: none; }

/* شماره‌ی هر مرحله کمی بعد از کارتِ خودش بیرون می‌پرد */
.ab-motion [data-rv] .ab-step-ic::after { transform: scale(0); }
.ab-motion [data-rv].is-in .ab-step-ic::after {
    transform: none;
    transition: transform .45s cubic-bezier(.3, 1.6, .5, 1) .3s;
}

@media (min-width: 901px) {
    /* ۴) روی کامپیوتر کارتِ نمونه آرام بالا و پایین می‌رود */
    .ab-motion .ab-demo-card {
        animation: ab-up .7s .25s cubic-bezier(.2, .7, .2, 1) both,
                   ab-float 4.5s 1.6s ease-in-out infinite alternate;
    }
}

/* ۵) زیرِ ماوس، کارت‌ها کمی بالا می‌آیند — فقط جایی که ماوس هست */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .ab-steps li,
    .ab-why li,
    .ab-who li {
        transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .ab-steps li:hover,
    .ab-why li:hover,
    .ab-who li:hover {
        transform: translateY(-4px);
        border-color: #cfe0f7;
        box-shadow: 0 14px 30px rgba(16, 60, 120, .1);
    }
    .ab-btn { transition: transform .15s ease, filter .15s ease; }
    .ab-btn:hover { transform: translateY(-2px); }
}