/* ==========================================================================
   صفحه‌ی اصلی – نسخه‌ی ۲
   بخش‌های تمام‌عرض، شبکه‌ی Bento برای امکانات و انیمیشن مخصوص هر مطلب.
   همه‌ی کلاس‌ها با پیشوند اختصاصی‌اند تا به صفحه‌های دیگر دست نزنند.
   ========================================================================== */
:root {
    --dk: #072321;
    --dk2: #0b3330;
    --dk-line: rgba(255,255,255,.12);
    --mint: #7fe3d6;
    --blue: #3b82f6;
    --bad: #e5484d;
    --ease: cubic-bezier(.2,.8,.2,1);
}

/* توجه: روی html نباید overflow-x تعریف شود؛ body در site.css overflow-x:hidden دارد و اگر html هم overflow بگیرد، position:sticky از کار می‌افتد. */

/* بخش تمام‌عرض: از ستون ۱۱۲۰ بیرون می‌زند ولی محتوا هم‌تراز می‌ماند */
.full {
    margin-inline: calc(50% - 50vw);
    padding-inline: max(20px, calc(50vw - 540px));
    position: relative;
}

.sec-h {margin: 45px 0 0 0; text-align: center;}
.sec-h h2 { margin: 0; font-size: clamp(1.55rem, 3.2vw, 2.3rem); line-height: 1.5; font-weight: 800 }
.sec-h .sub { margin: 10px 0 25px; font-size: 1.02rem }
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
    padding: 3px 14px 3px 12px; border-radius: 99px; font-size: .82rem; font-weight: 700;
    background: #e3f7f4; color: var(--brand-dark); border: 1px solid #bfeae3
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(31,181,164,.2); animation: eyePulse 2.4s ease-in-out infinite }
@keyframes eyePulse { 50% { box-shadow: 0 0 0 8px rgba(31,181,164,0) } }

/* ظاهر شدن هنگام اسکرول */
.rvx { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 70ms) }
.rvx.in { opacity: 1; transform: none }

/* ---------- Hero: شبکه‌ی نقطه‌ای ظریف + درخشش ---------- */
.hero { position: relative }
.hero::before {
    content: ""; position: absolute; z-index: -1; inset: -40px calc(50% - 50vw) 0;
    background-image: radial-gradient(rgba(14,127,116,.16) 1.2px, transparent 1.3px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000 20%, transparent 75%);
}

/* ---------- آمار: نوار تمام‌عرض ---------- */
.stats { margin: 28px 0 0 !important; gap: 0 !important; background: var(--card); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; box-shadow: 0 20px 50px rgba(14,127,116,.08) }
.stats .stat { border: 0; border-radius: 0; padding: 28px 30px; background: transparent; position: relative }
.stats .stat + .stat::before { content: ""; position: absolute; inset: 22px auto 22px 0; width: 1px; background: var(--line) }
.stats .stat strong { font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1.2; background: linear-gradient(135deg, var(--brand-dark), var(--brand) 60%, var(--mint)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent }

/* ==========================================================================
   امکانات: شبکه‌ی Bento
   ========================================================================== */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px }
.bc {
    grid-column: span 4; display: flex; flex-direction: column; overflow: hidden; position: relative;
    background: var(--card); border: 1px solid var(--line); border-radius: 26px;
    transition: transform .35s var(--ease), box-shadow .35s, border-color .35s
}
.bc:hover { transform: translateY(-5px); border-color: var(--brand); box-shadow: 0 24px 50px rgba(14,127,116,.14) }
.bc.c5 { grid-column: span 5 } .bc.c6 { grid-column: span 6 } .bc.c7 { grid-column: span 7 } .bc.c8 { grid-column: span 8 }
.bc .viz {
    position: relative; height: 188px; padding: 16px 18px; overflow: hidden; direction: rtl;
    background: linear-gradient(160deg, #f1fbf9, #e6f7f4); border-bottom: 1px solid var(--line)
}
.bc .viz::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(14,127,116,.14) 1px, transparent 1.2px); background-size: 16px 16px; opacity: .7; pointer-events: none }
.bc .viz > * { position: relative }
.bc .txt { padding: 20px 22px 24px }
.bc h3 { font-size: 1.08rem; margin-bottom: 6px }
.bc p { color: var(--muted); font-size: .93rem }
.bc.dark { background: linear-gradient(160deg, var(--dk2), var(--dk)); border-color: var(--dk-line); color: #fff }
.bc.dark .viz { background: rgba(255,255,255,.04); border-color: var(--dk-line) }
.bc.dark .viz::before { background-image: radial-gradient(rgba(127,227,214,.18) 1px, transparent 1.2px) }
.bc.dark p { color: #a8c9c5 }
.bc.dark .lnk { color: var(--mint); border-color: rgba(127,227,214,.5) }

/* اجزای مشترک انیمیشن‌ها: حالت پیش‌فرض = خاموش، .on = روشن */
.mini { display: block; border-radius: 99px; background: rgba(14,127,116,.14); height: 8px }
.pill-s { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 99px; font-size: .74rem; font-weight: 700; background: #fff; border: 1px solid var(--line); color: var(--muted); transition: .4s var(--ease); white-space: nowrap }

/* ۱) ویزارد */
.v-wiz .wz-track { position: absolute; right: 30px; left: 30px; top: 31px; height: 3px; background: rgba(14,127,116,.18); border-radius: 3px }
.v-wiz .wz-fill { position: absolute; right: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); background: linear-gradient(270deg, var(--brand), var(--mint)); border-radius: 3px; transition: width .7s var(--ease) }
.v-wiz .wz-steps { display: flex; justify-content: space-between; position: relative }
.v-wiz .wz-s { display: grid; justify-items: center; gap: 6px; font-size: .7rem; color: var(--muted); width: 20% }
.v-wiz .wz-s i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid rgba(14,127,116,.25); font-style: normal; font-weight: 700; font-size: .78rem; transition: .45s var(--ease) }
.v-wiz .wz-s.on i { background: var(--brand); border-color: var(--brand); color: #fff }
.v-wiz .wz-s.cur i { box-shadow: 0 0 0 7px rgba(31,181,164,.2); transform: scale(1.12) }
.v-wiz .wz-s.cur { color: var(--ink); font-weight: 700 }
.v-wiz .wz-form { margin-top: 18px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); display: grid; gap: 9px; box-shadow: 0 8px 20px rgba(14,127,116,.08) }
.v-wiz .wz-form .row { display: flex; gap: 10px; align-items: center }
.v-wiz .wz-form .mini { flex: 1; transform-origin: right; transform: scaleX(.25); transition: transform .8s var(--ease) }
.v-wiz[data-s="0"] .wz-form .mini:nth-child(1), .v-wiz .wz-form .mini { transition-delay: calc(var(--k, 0) * 90ms) }
.v-wiz .wz-form .row:nth-child(2) .mini { --k: 1 } .v-wiz .wz-form .row:nth-child(3) .mini { --k: 2 }
.v-wiz.sc[data-s="1"] .wz-form .mini, .v-wiz.sc[data-s="3"] .wz-form .mini { transform: scaleX(1); background: rgba(31,181,164,.45) }
.v-wiz.sc[data-s="2"] .wz-form .mini, .v-wiz.sc[data-s="4"] .wz-form .mini, .v-wiz.sc[data-s="0"] .wz-form .mini { transform: scaleX(.6) }

/* ۲) اعتبارسنجی */
.v-chk { display: grid; gap: 6px; align-content: start }
.v-chk .crow { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: .8rem; transition: .45s var(--ease); opacity: .55 }
.v-chk .crow .dot { width: 20px; height: 20px; border-radius: 50%; background: #e8f0ef; display: grid; place-items: center; flex: none; transition: .4s var(--ease) }
.v-chk .crow .dot svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: .3s }
.v-chk .crow .mini { flex: 1 }
.v-chk .crow.on { opacity: 1 }
.v-chk .crow.on .dot { background: var(--ok) } .v-chk .crow.on .dot svg { opacity: 1 }
.v-chk .crow.bad.on { border-color: #f3c5c7; background: #fff6f6; animation: shake .5s }
.v-chk .crow.bad.on .dot { background: var(--bad) }
.v-chk .crow.bad.on .dot svg { transform: rotate(45deg) } /* علامت ✓ → ✗ */
.v-chk .crow.bad.on2 { border-color: #bfe8d0; background: #f2fcf6; animation: none }
.v-chk .crow.bad.on2 .dot { background: var(--ok) } .v-chk .crow.bad.on2 .dot svg { transform: none }
.v-chk .bdg { position: absolute; left: 14px; top: 12px; min-width: 96px; height: 26px }
.v-chk .bdg u { position: absolute; inset: 0; display: grid; place-items: center; text-decoration: none; font-size: .72rem; font-weight: 700; border-radius: 99px; transition: .35s; opacity: 0; transform: translateY(6px) }
.v-chk .bdg u:first-child { background: #fde8e9; color: #b4232a } .v-chk .bdg u:last-child { background: #dcf7e8; color: #12804a }
.v-chk .bdg.on u:first-child, .v-chk .bdg.on2 u:last-child { opacity: 1; transform: none }
.v-chk .bdg.on2 u:first-child { opacity: 0 }
.v-chk .scan { position: absolute; left: 0; right: 0; height: 40px; top: -40px; background: linear-gradient(180deg, transparent, rgba(31,181,164,.28), transparent); animation: scan 3.4s linear infinite; pointer-events: none }
@keyframes scan { to { top: 100% } }
@keyframes shake { 20% { transform: translateX(-5px) } 50% { transform: translateX(5px) } 80% { transform: translateX(-3px) } }

/* ۳) شناسه‌ی یکتا */
.v-tid { display: grid; align-content: center; gap: 14px; justify-items: center }
.v-tid .tk { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; direction: ltr; font-family: ui-monospace, Consolas, monospace; font-weight: 700; font-size: .86rem }
.v-tid .tk span { padding: 5px 8px; border-radius: 10px; background: #fff; border: 1px solid var(--line); opacity: 0; transform: translateY(12px) scale(.9); transition: .5s var(--ease) }
.v-tid .tk span.on { opacity: 1; transform: none }
.v-tid .tk span:nth-child(1) { color: #0e7f74 } .v-tid .tk span:nth-child(2) { color: #3b82f6 } .v-tid .tk span:nth-child(3) { color: #b7791f } .v-tid .tk span:nth-child(4) { color: #6d3bd6 }
.v-tid .tl { display: flex; gap: 6px; direction: rtl; font-size: .68rem; color: var(--muted) }
.v-tid .tl i { font-style: normal; padding: 2px 8px; border-radius: 99px; background: rgba(255,255,255,.7); border: 1px dashed var(--line) }
.v-tid .tcheck { font-size: .74rem; font-weight: 700; color: #12804a; opacity: 0; transition: .4s }
.v-tid .tcheck.on { opacity: 1 }

/* ۴) صف ارسال */
.v-q { display: grid; align-content: center; gap: 10px }
.v-q .lane { height: 30px; border-radius: 99px; background: rgba(14,127,116,.1); position: relative; overflow: hidden }
.v-q .pk { position: absolute; top: 5px; right: 6px; width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); animation: pk 3.6s var(--ease) infinite; animation-delay: calc(var(--d) * 1s); opacity: 0 }
.v-q .lane:nth-child(2) .pk { background: linear-gradient(135deg, #5b9bff, #2563eb) }
.v-q .lane:nth-child(3) .pk { background: linear-gradient(135deg, #f6bf4d, #d98a0b) }
@keyframes pk { 0% { opacity: 0; transform: translateX(0) } 10% { opacity: 1 } 70% { opacity: 1; transform: translateX(calc(-100cqw + 40px)) } 85%, 100% { opacity: 0; transform: translateX(calc(-100cqw + 40px)) scale(1.5) } }
.v-q .lane { container-type: inline-size }
.v-q .lane::after { content: "✓"; position: absolute; left: 8px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--ok); color: #fff; font-size: .75rem; display: grid; place-items: center; opacity: .9 }
.v-q small { text-align: center; color: var(--muted); font-size: .72rem }

/* ۵) چند شماره اقتصادی */
.v-eco { display: grid; gap: 8px; align-content: center }
.v-eco .er { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: .78rem; transition: .4s }
.v-eco .er b { flex: 1; font-weight: 600 }
.v-eco .er em { font-style: normal; font-size: .66rem; padding: 1px 8px; border-radius: 99px; background: #fff3d6; color: #98620a }
.v-eco .sw { width: 34px; height: 20px; border-radius: 99px; background: #cfdedc; position: relative; transition: .4s }
.v-eco .sw::after { content: ""; position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: .4s var(--ease); box-shadow: 0 1px 3px rgba(0,0,0,.2) }
.v-eco .er.on .sw { background: var(--brand) } .v-eco .er.on .sw::after { transform: translateX(-14px) }
.v-eco .er:not(.on) { opacity: .6 }
.v-eco .er.cur { border-color: var(--brand); box-shadow: 0 6px 16px rgba(31,181,164,.18) }

/* ۶) داشبورد */
.v-dash { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; align-items: end }
.v-dash .bars { display: flex; align-items: flex-end; gap: 7px; height: 130px; padding: 0 4px; border-bottom: 2px solid rgba(14,127,116,.2) }
.v-dash .bars i { flex: 1; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--brand), #9be8de); height: 0; transition: height 1s var(--ease); transition-delay: calc(var(--k) * 60ms) }
.bc.in .v-dash .bars i { height: calc(var(--h) * 1%); animation: barLive 3.2s ease-in-out infinite; animation-delay: calc(1.2s + var(--k) * .18s) }
@keyframes barLive { 50% { filter: brightness(1.12) saturate(1.2); transform: scaleY(1.04); transform-origin: bottom } }
.v-dash .side { display: grid; justify-items: center; gap: 6px }
.v-dash .ring { width: 92px; height: 92px; transform: rotate(-90deg) }
.v-dash .ring circle { fill: none; stroke-width: 10; stroke-linecap: round }
.v-dash .ring .bg { stroke: rgba(14,127,116,.14) }
.v-dash .ring .fg { stroke: var(--brand); stroke-dasharray: 226; stroke-dashoffset: 226; transition: stroke-dashoffset 1.6s var(--ease) .3s }
.v-dash .ring .fg2 { stroke: #f0a51e; stroke-dasharray: 226; stroke-dashoffset: 226; transition: stroke-dashoffset 1.6s var(--ease) .5s }
.bc.in .v-dash .ring .fg { stroke-dashoffset: 62 } .bc.in .v-dash .ring .fg2 { stroke-dashoffset: 200 }
.v-dash .side small { font-size: .72rem; color: var(--muted) }
.v-dash .lv { position: absolute; top: 14px; left: 18px; display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; color: var(--brand-dark) }
.v-dash .lv::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: eyePulse 1.6s infinite; box-shadow: 0 0 0 4px rgba(31,181,106,.25) }

/* ۷) اصلاح / برگشت / ابطال */
.v-fix { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: center }
.v-fix .doc { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 8px; position: relative; box-shadow: 0 8px 20px rgba(14,127,116,.08); overflow: hidden }
.v-fix .doc .mini { transition: .5s }
.v-fix .doc .stamp { position: absolute; left: 8px; top: 8px; font-size: .66rem; font-weight: 800; padding: 1px 8px; border-radius: 6px; border: 2px solid; transform: rotate(-8deg) scale(.6); opacity: 0; transition: .45s var(--ease) }
.v-fix .stamp.a { color: var(--brand-dark); border-color: var(--brand) } .v-fix .stamp.b { color: #98620a; border-color: #f0a51e } .v-fix .stamp.c { color: var(--bad); border-color: var(--bad) }
.v-fix[data-s="1"] .stamp.a, .v-fix[data-s="2"] .stamp.b, .v-fix[data-s="3"] .stamp.c { opacity: 1; transform: rotate(-8deg) }
.v-fix[data-s="3"] .doc .mini { background: rgba(229,72,77,.25) }
.v-fix[data-s="3"] .doc::after { content: ""; position: absolute; right: 0; left: 0; top: 50%; height: 2px; background: var(--bad); transform-origin: right; animation: strike .5s var(--ease) both }
@keyframes strike { from { transform: scaleX(0) } }
.v-fix .acts { display: grid; gap: 7px }
.v-fix .acts .pill-s.cur { background: var(--brand); color: #fff; border-color: var(--brand); transform: translateX(-6px); box-shadow: 0 8px 18px rgba(31,181,164,.3) }

/* ۸) جستجوی شناسه */
.v-find { display: grid; gap: 9px; align-content: start }
.v-find .inp { display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--brand); border-radius: 12px; padding: 8px 12px; font-size: .86rem; min-height: 38px; box-shadow: 0 0 0 4px rgba(31,181,164,.15) }
.v-find .inp svg { width: 16px; height: 16px; stroke: var(--brand-dark); fill: none; stroke-width: 2; flex: none }
.v-find .inp .tx::after { content: ""; display: inline-block; width: 2px; height: 1em; background: var(--brand-dark); margin-right: 2px; vertical-align: -2px; animation: blink 1s steps(2) infinite }
@keyframes blink { 50% { opacity: 0 } }
.v-find .res { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: .78rem; opacity: 0; transform: translateY(8px); transition: .45s var(--ease) }
.v-find .res.on { opacity: 1; transform: none }
.v-find .res code { direction: ltr; font-family: ui-monospace, Consolas, monospace; color: var(--brand-dark); font-weight: 700 }
.v-find .res .cp { font-size: .68rem; padding: 1px 9px; border-radius: 99px; background: #e3f7f4; color: var(--brand-dark); font-weight: 700; transition: .3s }
.v-find .res.on2 .cp { background: var(--ok); color: #fff }
.v-find .res.on2 { border-color: #bfe8d0 }

/* ۹) هشدار مبلغ غیرعادی */
.v-amt .warn .w2 { display: none } .v-amt .warn.on2 .w1 { display: none } .v-amt .warn.on2 .w2 { display: inline }
.v-amt { padding-top: 62px !important; display: flex; align-items: flex-end; gap: 9px; padding-bottom: 8px }
.v-amt .col { flex: 1; display: flex; align-items: flex-end; height: 100% }
.v-amt .col i { width: 100%; border-radius: 8px 8px 0 0; background: rgba(31,181,164,.4); height: var(--h) }
.v-amt .col.spike i { background: linear-gradient(180deg, #f0a51e, #f6c96b); height: 6%; transition: height .9s var(--ease) }
.v-amt .col.spike.on i { height: 92% }
.v-amt .col small { font-size: .62rem; color: var(--muted) }
.v-amt .warn { position: absolute; top: 12px; left: 14px; right: 14px; padding: 7px 12px; border-radius: 12px; background: #fff7e3; border: 1px solid #f3d58a; color: #8a5a07; font-size: .74rem; font-weight: 700; display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(-10px); transition: .45s var(--ease) }
.v-amt .warn.on { opacity: 1; transform: none; animation: shake .6s }
.v-amt .warn.on2 { background: #e8f8ef; border-color: #b9e6cc; color: #12804a; animation: none }

/* ۱۰) هشدار اعتبار کم */
.v-low { display: grid; align-content: center; gap: 14px }
.v-low .gauge { height: 22px; border-radius: 99px; background: rgba(14,127,116,.14); position: relative; overflow: hidden }
.v-low .gauge i { position: absolute; right: 0; top: 0; bottom: 0; width: 88%; background: linear-gradient(270deg, var(--brand), #9be8de); border-radius: 99px; transition: width 1.1s var(--ease), background .6s }
.v-low[data-s="1"] .gauge i { width: 58% } .v-low[data-s="2"] .gauge i, .v-low[data-s="3"] .gauge i, .v-low[data-s="4"] .gauge i { width: 22%; background: linear-gradient(270deg, #f0a51e, #f6c96b) }
.v-low .gauge::after { content: ""; position: absolute; top: 0; bottom: 0; right: 30%; width: 2px; background: repeating-linear-gradient(180deg, var(--ink) 0 4px, transparent 4px 8px); opacity: .5 }
.v-low .al { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: .78rem; opacity: 0; transform: translateY(8px); transition: .45s var(--ease) }
.v-low .al.on { opacity: 1; transform: none; border-color: #f3d58a; background: #fffaf0 }
.v-low .al svg { width: 20px; height: 20px; stroke: #d98a0b; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 10% }
.v-low .al.on svg { animation: ring 1s ease-in-out 2 }
.v-low .al .sms { margin-right: auto; font-size: .66rem; padding: 1px 8px; border-radius: 99px; background: #e3f7f4; color: var(--brand-dark); font-weight: 700; opacity: 0; transition: .4s }
.v-low .al.on2 .sms { opacity: 1 }
@keyframes ring { 20% { transform: rotate(18deg) } 40% { transform: rotate(-16deg) } 60% { transform: rotate(10deg) } 80% { transform: rotate(-6deg) } }

/* ۱۱) گزارش خطاها */
.v-err { display: grid; gap: 8px; align-content: start }
.v-err .tabs { display: flex; gap: 6px }
.v-err .tabs .pill-s.cur { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark) }
.v-err .er2 { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: .76rem; opacity: 0; transform: translateX(26px); transition: .5s var(--ease) }
.v-err .er2.on { opacity: 1; transform: none }
.v-err .er2 .t { font-size: .66rem; font-weight: 700; padding: 1px 8px; border-radius: 99px; flex: none }
.v-err .er2 .t.a { background: #fde8e9; color: #b4232a } .v-err .er2 .t.b { background: #fff3d6; color: #98620a } .v-err .er2 .t.c { background: #e6efff; color: #2457b8 }
.v-err .er2 .mini { flex: 1 }

/* ۱۲) اعتبار شفاف */
.v-cred { display: grid; align-content: center; gap: 10px }
.v-cred .bal { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px }
.v-cred .bal b { font-size: 1.5rem; color: var(--brand-dark); font-variant-numeric: tabular-nums }
.v-cred .bal small { color: var(--muted); font-size: .72rem }
.v-cred .tx { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: .74rem; opacity: 0; transform: translateY(-10px); transition: .45s var(--ease) }
.v-cred .tx.on { opacity: 1; transform: none }
.v-cred .tx .mini { flex: 1 } .v-cred .tx i { font-style: normal; color: var(--bad); font-weight: 700; direction: ltr }

/* ==========================================================================
   الگوها: دو نوار متحرک تمام‌عرض
   ========================================================================== */
.mq-wrap.full { padding-inline: 0 }
.mq-wrap { margin-top: 10px; display: grid; gap: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) }
.mq { display: flex; overflow: hidden; direction: ltr }
.mq-in { display: flex; gap: 14px; padding-left: 14px; flex: none; min-width: 100%; justify-content: space-around; animation: mq 46s linear infinite }
.mq.rev .mq-in { animation-direction: reverse; animation-duration: 54s }
.mq:hover .mq-in { animation-play-state: paused }
@keyframes mq { to { transform: translateX(-100%) } }
.pc { direction: rtl; flex: none; display: flex; align-items: center; gap: 14px; padding: 14px 22px 14px 18px; min-width: 250px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; transition: .3s var(--ease) }
.pc:hover { transform: translateY(-4px); border-color: var(--brand); box-shadow: 0 16px 34px rgba(14,127,116,.14) }
.pc .pi { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; flex: none; background: linear-gradient(135deg, #e3f7f4, #c9f0ea) }
.pc .pi svg { width: 24px; height: 24px; stroke: var(--brand-dark); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.pc b { display: block; line-height: 1.5 } .pc span { color: var(--muted); font-size: .82rem; display: block; line-height: 1.5 }

/* ==========================================================================
   نگاهی به پنل
   ========================================================================== */
.tourx { display: grid; grid-template-columns: .9fr 1.1fr; gap: 36px; align-items: center }
.tx-list { display: grid; gap: 8px }
.tx-item { border-radius: 20px; padding: 14px 18px; cursor: pointer; border: 1px solid transparent; position: relative; overflow: hidden; transition: .35s var(--ease); text-align: right; background: transparent; font: inherit; color: inherit; width: 100% }
.tx-item h3 { font-size: 1.02rem; display: flex; align-items: center; gap: 10px }
.tx-item h3 i { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: #e3f7f4; flex: none; transition: .35s }
.tx-item h3 svg { width: 18px; height: 18px; stroke: var(--brand-dark); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round }
.tx-item p { color: var(--muted); font-size: .9rem; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .4s, margin .4s }
.tx-item.cur { background: var(--card); border-color: var(--line); box-shadow: 0 16px 36px rgba(14,127,116,.1) }
.tx-item.cur h3 i { background: var(--brand) } .tx-item.cur h3 svg { stroke: #fff }
.tx-item.cur p { max-height: 160px; opacity: 1; margin-top: 8px }
.tx-item::after { content: ""; position: absolute; right: 0; left: 0; bottom: 0; height: 3px; background: var(--brand); transform: scaleX(0); transform-origin: right }
.tx-item.cur.run::after { animation: dur var(--dur, 4.6s) linear both }
.tx-item a { color: var(--brand-dark); font-weight: 700; border-bottom: 1.5px solid rgba(31,181,164,.4) }

.win { border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 40px 80px rgba(14,127,116,.2); overflow: hidden; transform: perspective(1200px) rotateY(6deg) rotateX(2deg); transition: transform .6s var(--ease) }
.win:hover { transform: none }
.win-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #f0f8f7; border-bottom: 1px solid var(--line) }
.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: #cfe3e0 } .win-bar i:nth-child(1) { background: #ff6b6b } .win-bar i:nth-child(2) { background: #f6c452 } .win-bar i:nth-child(3) { background: #4cd08c }
.win-bar .url { margin-right: 10px; flex: 1; text-align: center; font-size: .74rem; color: var(--muted); background: #fff; border-radius: 99px; padding: 2px 10px; direction: ltr }
.win-body { position: relative; height: 330px }
.pane { position: absolute; inset: 0; padding: 20px; opacity: 0; transform: translateY(14px); pointer-events: none; transition: .5s var(--ease); display: grid; gap: 12px; align-content: start }
.pane.cur { opacity: 1; transform: none }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.kpi { padding: 10px 12px; border-radius: 14px; background: #f1fbf9; border: 1px solid var(--line) } .kpi small { color: var(--muted); font-size: .68rem; display: block } .kpi b { font-size: 1.15rem; color: var(--brand-dark) }
.kpi.w b { color: #b7791f } .kpi.r b { color: var(--bad) }
.mbars { display: flex; align-items: flex-end; gap: 6px; height: 120px; border-bottom: 2px solid var(--line); padding: 0 6px }
.mbars i { flex: 1; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--brand), #a5ece3); height: 4% ; transition: height .9s var(--ease); transition-delay: calc(var(--k) * 55ms) }
.pane.cur .mbars i { height: calc(var(--h) * 1%) }
.trow { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); font-size: .78rem; opacity: 0; transform: translateX(20px); transition: .5s var(--ease); transition-delay: calc(var(--k) * 90ms) }
.pane.cur .trow { opacity: 1; transform: none }
.trow .mini { flex: 1 } .st { font-size: .66rem; font-weight: 700; padding: 1px 9px; border-radius: 99px } .st.ok { background: #dcf7e8; color: #12804a } .st.no { background: #fde8e9; color: #b4232a } .st.wt { background: #fff3d6; color: #98620a }
.chat { display: grid; gap: 9px }
.bub { max-width: 78%; padding: 9px 14px; border-radius: 16px; font-size: .78rem; opacity: 0; transform: scale(.85); transition: .5s var(--ease); transition-delay: calc(var(--k) * 260ms) }
.pane.cur .bub { opacity: 1; transform: none }
.bub.me { background: var(--brand); color: #fff; border-bottom-right-radius: 4px; justify-self: start; transform-origin: bottom right }
.bub.su { background: #eef5f4; border-bottom-left-radius: 4px; justify-self: end; transform-origin: bottom left }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--line); font-size: .8rem }
.setrow .sw { width: 38px; height: 22px; border-radius: 99px; background: #cfdedc; position: relative; transition: .5s var(--ease) .5s; flex: none }
.setrow .sw::after { content: ""; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: .5s var(--ease) .5s; box-shadow: 0 1px 3px rgba(0,0,0,.2) }
.pane.cur .setrow.t .sw { background: var(--brand) } .pane.cur .setrow.t .sw::after { transform: translateX(-16px) }
.arts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.art { border-radius: 14px; border: 1px solid var(--line); overflow: hidden; opacity: 0; transform: translateY(16px); transition: .5s var(--ease); transition-delay: calc(var(--k) * 110ms) } .pane.cur .art { opacity: 1; transform: none }
.art .th { height: 62px; background: linear-gradient(135deg, #bff0e9, #e3f7f4) } .art .bd { padding: 8px 10px; display: grid; gap: 6px }
.fin { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-radius: 16px; background: linear-gradient(120deg, var(--brand-dark), var(--brand)); color: #fff } .fin b { font-size: 1.4rem } .fin small { opacity: .85 }

/* ---------- ابزار شناسه کالا: نوار تمام‌عرض ---------- */
.tool { position: relative; overflow: hidden; background: linear-gradient(135deg, #ffffff, #eefaf8) !important }
.tool::before { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; left: -90px; top: -120px; background: radial-gradient(circle, rgba(31,181,164,.25), transparent 70%); animation: drift 12s ease-in-out infinite alternate }

/* ---------- نوار پایانی ---------- */
.band { position: relative; overflow: hidden; margin-top: 90px !important; border-radius: 0 !important; margin-inline: calc(50% - 50vw); padding: 70px max(20px, calc(50vw - 540px)) !important; background: linear-gradient(120deg, var(--dk), var(--brand-dark) 55%, var(--brand)) !important; background-size: 200% 100% !important; animation: bandMove 14s ease-in-out infinite alternate }
@keyframes bandMove { to { background-position: 100% 0 } }
.band::before, .band::after { content: ""; position: absolute; border-radius: 50%; border: 7px solid rgba(255,255,255,.28); pointer-events: none }
.band::before { width: 340px; height: 340px; left: -80px; top: -140px; animation: spin 40s linear infinite; border-style: dashed }
.band::after { width: 220px; height: 220px; right: 28%; bottom: -120px; animation: spin 30s linear infinite reverse }
@keyframes spin { to { transform: rotate(360deg) } }
.band > * { position: relative; z-index: 1 }
.band h2 { font-size: clamp(1.5rem, 3.4vw, 2.3rem) }
.band + * { margin-top: 0 }
main.wrap > .band:last-child { margin-bottom: -1px }

/* ==========================================================================
   واکنش‌گرایی
   ========================================================================== */
@media (max-width: 1000px) {
    .bc, .bc.c5, .bc.c6, .bc.c7, .bc.c8 { grid-column: span 6 }
    .tourx { grid-template-columns: 1fr } .win { transform: none }
}
@media (max-width: 680px) {
    .sec-h { margin: 56px 0 24px }
    .bento { gap: 12px }
    .bc, .bc.c5, .bc.c6, .bc.c7, .bc.c8 { grid-column: span 12 }
    .bc .viz { height: 168px }
    .stats { grid-template-columns: 1fr !important }
    .stats .stat + .stat::before { inset: 0 24px auto 24px; width: auto; height: 1px }
    .win-body { height: 350px } .band { padding-block: 50px !important }
    .v-dash { grid-template-columns: 1fr }
    .v-dash .side { display: none }
}

/* کاهش حرکت: وضعیت نهایی ثابت، بدون انیمیشن */
@media (prefers-reduced-motion: reduce) {
    .rvx { opacity: 1; transform: none; transition: none }
    .mq-in, .v-chk .scan, .v-q .pk, .band, .band::before, .band::after, .tool::before, .bc.in .v-dash .bars i, .eyebrow::before { animation: none !important }
    .mq { overflow-x: auto } .mq-in { min-width: 0 }
    .bc.in .v-dash .bars i { height: calc(var(--h) * 1%) }
    .v-q .pk { opacity: 1; transform: translateX(-50%) }
}

/* ==========================================================================
   «از کجا شروع کنیم؟» و «سؤالات متداول» – هم‌طراح با Index1
   ========================================================================== */
.sx { padding-block: 50px }
.sx-tint { background: none }
#faq-sec + .band { margin-top: 0 !important }
.sx .eyebrow { display: inline-block; font-size: .8rem; font-weight: 800; letter-spacing: .02em; color: var(--brand-dark); background: #dff5f1; border: 1px solid #bfeae3; padding: 3px 14px; border-radius: 99px; margin-bottom: 0 }
.sx .eyebrow::before { display: none }
.sx-head { text-align: center; max-width: 720px; margin: 0 auto 44px }
.sx-head h2, .faq-side h2 { margin: 10px 0 0; font-size: clamp(1.55rem, 3.2vw, 2.3rem); line-height: 1.5; font-weight: 800; text-wrap: balance }

.sx .start3 { grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; padding: 0; list-style: none }
.sx .start3::before { content: ""; position: absolute; top: 34px; inset-inline: 16%; border-top: 2px dashed #bfeae3; z-index: 0 }
.sx .start3 li { position: relative; z-index: 1; background: none; border: 0; padding: 0 12px; text-align: center }
.sx .start3 .sn { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 18px; border-radius: 22px; font-size: 1.6rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--brand-dark), var(--brand)); box-shadow: 0 14px 30px rgba(31,181,164,.35) }
.sx .start3 b { font-size: 1.15rem; color: var(--ink) }
.sx .start3 p { max-width: 320px; margin: 6px auto 0 }

.faq-grid { display: grid; grid-template-columns: .8fr 1.4fr; gap: 56px; align-items: start }
.faq-side { position: sticky; top: 100px }
.faq-side .sub { margin: 14px 0 22px; color: var(--muted) }
.sx .faq details { border-radius: 18px; padding: 0 22px; box-shadow: 0 4px 14px rgba(14,127,116,.05) }
.sx .faq details[open] { box-shadow: 0 14px 34px rgba(14,127,116,.12) }
.sx .faq summary::after { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #e3f7f4; font-size: 1.2rem }

@media (max-width: 1000px) {
    .faq-grid { grid-template-columns: 1fr; gap: 28px }
    .faq-side { position: static; text-align: center }
}
@media (max-width: 860px) {
    .sx .start3 { grid-template-columns: 1fr; gap: 34px }
    .sx .start3::before, .sx-clear .start3::after { display: none }
}
@media (max-width: 640px) { .sx { padding-block: 56px; margin-top: 60px } .sx-head { margin-bottom: 30px } }

/* ---------- «از کجا شروع کنیم؟»: بدون پس‌زمینه (شفاف)، فقط انیمیشن ---------- */
.sx-clear .start3::before { top: 34px }
/* خط پیشرفت: هنگام دیده شدن از قدم ۱ تا ۳ کشیده می‌شود */
.sx-clear .start3::after { content: ""; position: absolute; top: 33px; inset-inline: 16%; height: 4px; border-radius: 4px; background: linear-gradient(270deg, var(--brand), var(--mint)); box-shadow: 0 0 14px rgba(31,181,164,.5); transform: scaleX(0); transform-origin: right; z-index: 0 }
.sx-clear .start3.in::after { animation: lineGo 2.4s cubic-bezier(.4,0,.2,1) .3s forwards }
@keyframes lineGo { to { transform: scaleX(1) } }
.sx-clear .start3 li { transition: transform .35s var(--ease) }
.sx-clear .start3 li:hover { transform: translateY(-6px) }
.sx-clear .start3 .sn { position: relative; box-shadow: 0 14px 30px rgba(31,181,164,.35); transform: scale(.4) rotate(-12deg); opacity: 0 }
.sx-clear .start3.in .sn { animation: snPop .8s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--n) * 1.1s + .3s) }
@keyframes snPop { from { transform: scale(.4) rotate(-12deg); opacity: 0 } to { transform: none; opacity: 1 } }
/* موج حلقه‌ای دور هر عدد */
.sx-clear .start3 .sn::after { content: ""; position: absolute; inset: -2px; border-radius: 24px; border: 2px solid var(--brand); opacity: 0 }
.sx-clear .start3.in .sn::after { animation: ripple 2.8s ease-out infinite; animation-delay: calc(var(--n) * 1.1s + 1.2s) }
@keyframes ripple { 0% { transform: scale(1); opacity: .7 } 70%, 100% { transform: scale(1.7); opacity: 0 } }
.sx-clear .start3 li:nth-child(1) { --n: 0 } .sx-clear .start3 li:nth-child(2) { --n: 1 } .sx-clear .start3 li:nth-child(3) { --n: 2 }
@media (prefers-reduced-motion: reduce) {
    .sx-clear .start3.in::after, .sx-clear .start3.in .sn, .sx-clear .start3.in .sn::after { animation: none !important }
    .sx-clear .start3::after { transform: scaleX(1) } .sx-clear .start3 .sn { opacity: 1; transform: none }
}

/* نوار پایانی به فوتر می‌چسبد (بدون فاصله‌ی بین این دو) */
.band { margin-bottom: 0 !important }
main.wrap { padding-bottom: 0 }
.sf.sf-flush { margin-top: 0; border-top: 0 }
.sf.sf-flush::before { display: none }