/* صفحه‌ی ماژول‌ها: هر ماژول رنگ و نمایش متحرک مخصوص خودش را دارد (.page[data-mod]).
   متغیرها و پایه از site.css می‌آید. */

.page[data-mod] { --m: #22d3ee; --m2: #0fa9c9; --mr: 34,211,238; }
.page[data-mod] .hl { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page[data-mod] .glow.a { background: radial-gradient(circle, rgba(var(--mr), .42), transparent 65%); }
.page[data-mod] .glow.c { background: radial-gradient(circle, rgba(var(--mr), .22), transparent 65%); }
.page[data-mod] .btn:not(.ghost) { background: var(--grad); box-shadow: 0 6px 24px rgba(var(--mr), .3), inset 0 1px 0 rgba(255,255,255,.4); }
.page[data-mod] .btn:not(.ghost):hover { box-shadow: 0 10px 34px rgba(var(--mr), .45), inset 0 1px 0 rgba(255,255,255,.4); }
.page[data-mod] .phero .ic, .page[data-mod] .fic { background: rgba(var(--mr), .13); border-color: rgba(var(--mr), .4); color: var(--m); box-shadow: 0 0 40px rgba(var(--mr), .16); }
.page[data-mod] .feat h3::before { background: var(--m); box-shadow: 0 0 10px rgba(var(--mr), .8); }
.page[data-mod] .feat:hover { border-color: rgba(var(--mr), .35); }
.page[data-mod] .stp::before { background: var(--grad); }
.page[data-mod] .others a:hover { border-color: rgba(var(--mr), .4); background: rgba(var(--mr), .13); }
.page[data-mod] .pill { border-color: rgba(var(--mr), .3); }
.page[data-mod] .final::before { background: radial-gradient(ellipse at 50% 100%, rgba(var(--mr), .45), transparent 65%); }
.page[data-mod] .crumbs a:hover { color: var(--m); }

/* قهرمان دوستونه: متن + نمایش متحرک */
.mhero { display: grid; grid-template-columns: 1fr 1.05fr; gap: 2.4rem; align-items: center; text-align: start; padding: 4rem 0 2rem; }
.mhero .crumbs { text-align: start; }
.mhero .mh-text .ic { margin: 0 0 1.2rem; }
.mhero .mh-text p.lead { margin: 1.1rem 0 0; max-width: 34rem; }
.mhero .mh-text .cta { display: flex; justify-content: flex-start; }
.mh-vis { position: relative; min-width: 0; }
.vis { position: relative; overflow: hidden; padding: 1.2rem; border-radius: 1.4rem; background: linear-gradient(165deg, #15202f, #0e1521);
  border: 1px solid rgba(var(--mr), .3); box-shadow: 0 0 70px rgba(var(--mr), .12), 0 24px 50px rgba(0,0,0,.45); }
.vis::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .4; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 75%); mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 75%); }
.vis > * { position: relative; }
@media (max-width: 54rem) { .mhero { grid-template-columns: 1fr; padding-top: 3rem; } }
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --k { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --c { syntax: "<color>"; inherits: false; initial-value: #22d3ee; }

/* ——— اسناد: آرشیوی و آرام. نسخه‌ها روی هم، مهر معتبر/ابطال ——— */
.vd { height: 21.5rem; }
.vd-path { position: absolute; top: 0; right: 0; display: flex; gap: .4rem; font-size: .66rem; color: #8796ab; z-index: 5; }
.vd-path span { padding: .05rem .65rem; border: 1px solid var(--line-strong); border-radius: 999px; }
.vd-path .on { color: var(--m); border-color: rgba(var(--mr), .4); background: rgba(var(--mr), .1); }
.sheet { position: absolute; width: 60%; height: 15rem; border-radius: .6rem; padding: 1rem 1.1rem; background: linear-gradient(170deg, #1c2a3d, #15202f); border: 1px solid var(--line-strong); box-shadow: 0 18px 40px rgba(0,0,0,.5); overflow: hidden; }
.sheet b { display: block; color: #c3cfde; font-size: .72rem; margin-bottom: .9rem; }
.sheet i { display: block; height: .5rem; border-radius: 4px; background: #2a3b52; margin-bottom: .6rem; }
.sheet i.w { width: 58%; } .sheet i.h { background: rgba(var(--mr), .4); width: 78%; }
.s1 { top: 2.6rem; right: 0; transform: rotate(5deg); opacity: .5; }
.s2 { top: 2.3rem; right: 9%; transform: rotate(2deg); opacity: .8; }
.s3 { top: 1.9rem; right: 19%; border-color: rgba(var(--mr), .55); box-shadow: 0 18px 50px rgba(0,0,0,.5), 0 0 40px rgba(var(--mr), .18); }
.stamp { position: absolute; bottom: 1rem; left: 1rem; font-style: normal; font-weight: 900; font-size: .95rem; padding: .1rem .8rem; border: 2px solid; border-radius: .4rem; transform: rotate(-12deg); opacity: 0; animation: stamp 7s infinite; }
.stamp.arch { color: #7d8ea3; border-color: #7d8ea3; }
.stamp.void { color: #ff8a9c; border-color: #ff8a9c; animation-delay: 1.1s; }
.stamp.ok { color: var(--m); border-color: var(--m); animation-delay: 2.2s; }
@keyframes stamp { 0% { opacity: 0; transform: rotate(-12deg) scale(2.4); } 6% { opacity: 1; transform: rotate(-12deg) scale(1); } 86% { opacity: 1; } 100% { opacity: 0; } }
.scan { position: absolute; left: 0; right: 0; top: 2rem; height: 1.6rem; background: linear-gradient(180deg, transparent, rgba(var(--mr), .28), transparent); animation: scan 3.6s ease-in-out infinite alternate; }
@keyframes scan { to { top: 12rem; } }
.vd-chip { position: absolute; bottom: 0; right: 0; display: flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: 999px; font-size: .7rem; color: #d6f7ff; background: rgba(var(--mr), .1); border: 1px solid rgba(var(--mr), .4); z-index: 6; }
.vd-chip i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--m); box-shadow: 0 0 10px var(--m); animation: cpulse 2s ease-out infinite; }

/* ——— فرآیندها: جریان. توکن‌های متحرک روی نمودار گردش‌کار ——— */
.vp svg { display: block; width: 100%; height: auto; }
/* جریان از راست به چپ (جهت خواندن فارسی): کل نمودار آینه می‌شود و متن‌ها دوباره برمی‌گردند */
.vp svg { transform: scaleX(-1); }
.vp text { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; }
.vp text { fill: #c3cfde; font-family: Vazirmatn, Tahoma, sans-serif; font-size: 11.5px; text-anchor: middle; }
.vp .n rect, .vp .n polygon, .vp .n circle { fill: #182334; stroke: #3c5069; stroke-width: 1.6; }
.vp .n { animation: nlit 6s infinite; animation-delay: var(--d, 0s); }
@keyframes nlit { 0% { filter: none; } 5%, 13% { filter: drop-shadow(0 0 7px rgba(34,211,238,.95)) brightness(1.7); } 24%, 100% { filter: none; } }
.vp path.c { fill: none; stroke: #3a4f68; stroke-width: 2; stroke-dasharray: 5 5; animation: dash 1s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -10; } }
.vp .tag { fill: #6d7c90; font-size: 10px; }

/* ——— فرم‌ساز: سازنده. کشیدن فیلد به فرم و وصل‌شدن به گردش‌کار ——— */
.vf { position: relative; display: grid; grid-template-columns: 5.6rem 1fr; gap: .9rem; height: 21.5rem; }
.vf-pal { display: grid; align-content: start; gap: .5rem; }
.vf-pal span { padding: .5rem .6rem; border-radius: .6rem; background: #1b283a; border: 1px solid var(--line-strong); font-size: .7rem; text-align: center; color: #b6c2d0; height: 2rem; }
.vf-canvas { background: #101826; border: 1px dashed rgba(var(--mr), .35); border-radius: .9rem; padding: .9rem; display: grid; align-content: start; gap: .6rem; }
.vf-title { font-weight: 800; font-size: .85rem; }
.vf-field { display: grid; gap: .25rem; font-size: .66rem; color: #8796ab; }
.vf-field b { display: block; height: 1.6rem; border-radius: .4rem; background: #0b121d; border: 1px solid var(--line-strong); }
.vf-slot { position: relative; min-height: 3.1rem; border-radius: .6rem; border: 1.5px dashed transparent; padding: .2rem; animation: slot 8s infinite; }
.vf-slot .new { opacity: 0; transform: scale(.92); animation: newf 8s infinite; }
@keyframes slot { 0%, 28% { border-color: transparent; background: transparent; } 34%, 50% { border-color: rgba(var(--mr), .7); background: rgba(var(--mr), .07); } 54%, 100% { border-color: transparent; background: transparent; } }
@keyframes newf { 0%, 50% { opacity: 0; transform: scale(.92); } 56%, 93% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
.vf-row { display: flex; align-items: center; justify-content: space-between; padding: .5rem .7rem; border-radius: .6rem; background: #16202e; border: 1px solid var(--line); font-size: .68rem; color: #b6c2d0; }
.tg { position: relative; width: 2rem; height: 1.1rem; border-radius: 99px; background: #2a3a4d; animation: tgc 8s infinite; }
.tg::after { content: ""; position: absolute; top: .15rem; right: .15rem; width: .8rem; height: .8rem; border-radius: 50%; background: #fff; animation: knob 8s infinite; }
@keyframes tgc { 0%, 64% { background: #2a3a4d; } 68%, 94% { background: var(--m2); } 100% { background: #2a3a4d; } }
@keyframes knob { 0%, 64% { right: .15rem; } 68%, 94% { right: 1.05rem; } 100% { right: .15rem; } }
.vf-fly { position: absolute; top: 4.5rem; right: 0; width: 5.6rem; height: 2rem; border-radius: .6rem; display: grid; place-items: center; font-size: .7rem; font-weight: 700; color: #05303b;
  background: var(--grad); box-shadow: 0 10px 28px rgba(var(--mr), .45); animation: fly 8s infinite; z-index: 4; }
.vf-fly::after { content: ""; position: absolute; right: -.35rem; bottom: -.9rem; width: .9rem; height: 1.1rem; background: #fff; clip-path: polygon(0 0, 100% 62%, 55% 66%, 75% 100%, 52% 100%, 32% 72%, 0 100%); filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
@keyframes fly { 0%, 10% { transform: none; opacity: 1; } 16% { transform: scale(1.06) rotate(-2deg); } 38% { transform: translate(-7.4rem, 4.3rem) scale(1.06) rotate(-3deg); opacity: 1; } 44% { transform: translate(-7.4rem, 4.3rem) scale(.9); opacity: 0; } 98% { transform: none; opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ——— بانک دانش: جست‌وجو. تایپ پرسش و ظاهرشدن پاسخ‌های تأییدشده ——— */
.vk { height: 21.5rem; }
.vk-search { display: flex; align-items: center; gap: .6rem; padding: .75rem 1.1rem; border-radius: 999px; background: #0f1826; border: 1px solid rgba(var(--mr), .45); box-shadow: 0 0 30px rgba(var(--mr), .14); font-size: .82rem; }
.vk-search svg { width: 1.15rem; height: 1.15rem; color: var(--m); flex: none; }
.vk-search .type { display: inline-block; white-space: nowrap; clip-path: inset(0 0 0 100%); animation: ktype 9s steps(26, end) infinite; }
.vk-search .caret { width: 2px; height: 1.1rem; background: var(--m); animation: blink 1s steps(2) infinite; }
@keyframes ktype { 0% { clip-path: inset(0 0 0 100%); } 36%, 92% { clip-path: inset(0 0 0 0); } 97%, 100% { clip-path: inset(0 0 0 100%); } }
@keyframes blink { 50% { opacity: 0; } }
.vk-res { position: absolute; left: 0; right: 0; padding: .8rem 1rem; border-radius: .9rem; background: #16202e; border: 1px solid var(--line-strong); opacity: 0; transform: translateY(12px); animation: kres 9s infinite; }
.vk-res b { display: block; font-size: .8rem; margin: .35rem 0 .15rem; }
.vk-res p { font-size: .7rem; color: #8796ab; line-height: 1.8; }
.vk-res .t { font-size: .62rem; padding: .05rem .6rem; border-radius: 999px; background: rgba(var(--mr), .13); color: var(--m); border: 1px solid rgba(var(--mr), .35); }
.vk-res .ok { font-size: .62rem; color: #7d8ea3; margin-inline-start: .5rem; }
.vk-res.r1 { top: 4rem; } .vk-res.r2 { top: 9.4rem; animation-delay: .5s; } .vk-res.r3 { top: 14.8rem; animation-delay: 1s; }
.vk-res.r1 { border-color: rgba(var(--mr), .5); box-shadow: 0 0 34px rgba(var(--mr), .12); }
@keyframes kres { 0%, 38% { opacity: 0; transform: translateY(12px); } 46%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.vk-graph { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; opacity: .22; pointer-events: none; }

/* ——— مشتریان: معامله‌ای. کانبان و بسته‌شدن قرارداد ——— */
.vc { height: 21.5rem; }
.vc-cols { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; height: 100%; }
.vc-col { background: #101826; border: 1px solid var(--line); border-radius: .8rem; padding: .6rem; display: grid; align-content: start; gap: .5rem; }
.vc-col h4 { font-size: .68rem; color: #8796ab; font-weight: 700; margin-bottom: .2rem; }
.vc-card { height: 2.6rem; border-radius: .5rem; background: #1b283a; border: 1px solid var(--line); position: relative; }
.vc-card::after { content: ""; position: absolute; top: .55rem; right: .6rem; left: 35%; height: .4rem; border-radius: 3px; background: #2c3e56; }
.vc-deal { position: absolute; top: 3.4rem; width: calc(25% - 1.65rem); min-width: 4.6rem; height: 3.6rem; right: calc(var(--k) * 25% + var(--k) * .15rem + .6rem); padding: .5rem .6rem; border-radius: .6rem; z-index: 3; font-size: .68rem; font-weight: 800; line-height: 1.6;
  background: linear-gradient(160deg, #143a48, #0f2a36); border: 1px solid rgba(var(--mr), .7); box-shadow: 0 0 26px rgba(var(--mr), .35); animation: deal 8s infinite; color: #dffaff; }
.vc-deal small { display: block; font-weight: 500; color: #7fd6e6; font-size: .6rem; }
@keyframes deal { 0%, 10% { --k: 0; } 24%, 34% { --k: 1; } 48%, 58% { --k: 2; } 72%, 94% { --k: 3; } 100% { --k: 0; } }
.vc-won { position: absolute; left: .7rem; bottom: .8rem; z-index: 4; padding: .45rem .9rem; border-radius: 999px; font-size: .72rem; font-weight: 800; color: #05303b; background: var(--grad); box-shadow: 0 0 34px rgba(var(--mr), .6); opacity: 0; transform: scale(.7); animation: won 8s infinite; }
@keyframes won { 0%, 72% { opacity: 0; transform: scale(.7); } 78%, 94% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
.vc-spark { position: absolute; left: 1.2rem; bottom: 1.6rem; width: 6px; height: 6px; border-radius: 50%; z-index: 4; opacity: 0; background: var(--m); animation: spark 8s infinite; box-shadow: 14px -18px 0 var(--m), -10px -26px 0 #fff, 26px -6px 0 var(--m2), 6px -38px 0 var(--m), -18px -12px 0 var(--m2); }
@keyframes spark { 0%, 74% { opacity: 0; transform: scale(.3); } 80% { opacity: 1; transform: scale(1.2); } 92%, 100% { opacity: 0; transform: scale(1.6); } }

/* ——— پشتیبانی: فوری. حلقه‌های SLA و هشدار پیش از نقض ——— */
.vs { position: relative; display: grid; gap: .7rem; align-content: start; height: 21.5rem; }
.vs-head { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; font-weight: 800; }
.vs-t { display: flex; align-items: center; gap: .9rem; padding: .7rem .9rem; border-radius: .9rem; background: #16202e; border: 1px solid var(--line); }
.vs-t b { font-size: .78rem; display: block; }
.vs-t small { font-size: .64rem; color: #7d8ea3; }
.vs-t em { margin-inline-start: auto; font-style: normal; font-size: .64rem; font-weight: 700; padding: .1rem .65rem; border-radius: 999px; background: rgba(34,211,238,.12); color: #8bf0ff; }
.ring { --c: #22d3ee; width: 2.7rem; height: 2.7rem; flex: none; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255,255,255,.09) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); }
.r1 .ring { --p: 28; animation: ra 6s ease-in-out infinite alternate; }
@keyframes ra { from { --p: 18; } to { --p: 36; } }
.vs-t.warn .ring { animation: rb 7s ease-in-out infinite; }
@keyframes rb { 0% { --p: 52; --c: #22d3ee; } 45% { --p: 76; --c: #ffc45c; } 100% { --p: 95; --c: #ffc45c; } }
.vs-t.warn em { background: rgba(255,196,92,.14); color: #ffd98a; }
.vs-t.breach { border-color: rgba(255,107,129,.55); animation: bpulse 2s ease-in-out infinite; }
.vs-t.breach .ring { --p: 100; --c: #ff6b81; }
.vs-t.breach em { background: rgba(255,107,129,.16); color: #ff9db0; }
@keyframes bpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,129,0); } 50% { box-shadow: 0 0 24px rgba(255,107,129,.3); } }
.vs-alert { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: .6rem; padding: .65rem .9rem; border-radius: .9rem; font-size: .72rem; color: #ffc9d2; background: rgba(255,138,156,.12); border: 1px solid rgba(255,138,156,.5); opacity: 0; transform: translateY(16px); animation: valert 7s infinite; }
.vs-alert i { width: .55rem; height: .55rem; border-radius: 50%; background: #ff6b81; box-shadow: 0 0 10px #ff6b81; flex: none; }
@keyframes valert { 0%, 32% { opacity: 0; transform: translateY(16px); } 40%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(16px); } }

@media (prefers-reduced-motion: reduce) {
  .stamp, .scan, .vp .n, .vp path.c, .vf-slot, .vf-slot .new, .tg, .tg::after, .vf-fly, .vk-search .type, .caret, .vk-res, .vc-deal, .vc-won, .vc-spark, .ring, .vs-t.breach, .vs-alert, .vd-chip i { animation: none !important; }
  .stamp.ok, .vk-res, .vc-won, .vs-alert, .vf-slot .new { opacity: 1; transform: none; }
  .vk-search .type { clip-path: none; }
  .stamp.arch, .stamp.void { opacity: 0; }
  .vp circle animate, .vp animateMotion { display: none; }
}

/* ——— بخش «چطور کار می‌کند» هر ماژول: یک نمایش مخصوص خودش ——— */
/* اسناد: چرخه‌ی عمر */
.lc { display: flex; align-items: stretch; gap: 1.6rem; flex-wrap: wrap; justify-content: center; }
.lc-n { position: relative; flex: 1 1 11rem; max-width: 15rem; padding: 1.1rem 1.2rem; border-radius: 1rem; background: linear-gradient(165deg, #182334, #111a28); border: 1px solid var(--line); animation: lcglow 8s infinite; animation-delay: calc(var(--i) * 1.6s); }
.lc-n:not(.void):not(.arch)::after { content: "←"; position: absolute; left: -1.35rem; top: 50%; translate: 0 -50%; color: rgba(var(--mr), .7); font-weight: 800; }
.lc-st { display: inline-block; font-weight: 800; font-size: .95rem; padding: .05rem .8rem; border-radius: 999px; background: rgba(var(--mr), .12); color: var(--m); border: 1px solid rgba(var(--mr), .35); }
.lc-n small { display: block; margin-top: .6rem; color: var(--muted); font-size: .76rem; line-height: 1.9; }
.lc-n.ok .lc-st { background: rgba(79,224,176,.14); color: #6fe8bd; border-color: rgba(79,224,176,.4); }
.lc-n.void .lc-st { background: rgba(255,138,156,.12); color: #ff9db0; border-color: rgba(255,138,156,.4); }
.lc-fork { display: grid; gap: .8rem; flex: 1 1 12rem; max-width: 15rem; }
@keyframes lcglow { 0%, 62%, 100% { box-shadow: none; border-color: var(--line); } 8%, 20% { box-shadow: 0 0 34px rgba(var(--mr), .3); border-color: rgba(var(--mr), .6); } }
/* فرآیندها: قطعه‌ها */
.shapes { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 54rem) { .shapes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 30rem) { .shapes { grid-template-columns: 1fr; } }
.shp { padding: 1.3rem; border-radius: 1.2rem; background: linear-gradient(165deg, #182334, #111a28); border: 1px solid var(--line); text-align: center; }
.shp svg { width: 6.5rem; height: 4rem; margin: 0 auto .7rem; display: block; fill: rgba(var(--mr), .1); stroke: var(--m); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.shp svg path { fill: none; stroke-dasharray: 5 5; animation: dash 1s linear infinite; }
.shp h3 { font-size: 1rem; font-weight: 800; }
.shp p { margin-top: .4rem; font-size: .8rem; color: var(--muted); line-height: 2; }
/* فرم‌ساز: قاعده */
.rules { max-width: 46rem; margin-inline: auto; display: grid; gap: .8rem; }
.rule { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .9rem 1.1rem; border-radius: 1rem; background: #121b29; border: 1px solid var(--line); font-size: .88rem; }
.rule span { padding: .25rem .8rem; border-radius: .6rem; }
.rule .kw { color: #8d9cb0; font-weight: 700; padding-inline: .2rem; }
.rule .fld { background: rgba(var(--mr), .14); color: var(--m); border: 1px solid rgba(var(--mr), .35); }
.rule .fld2 { background: #1b283a; border: 1px solid var(--line-strong); }
.rule .op { background: #1b283a; border: 1px solid var(--line-strong); }
.rule .out { margin-inline-start: auto; background: var(--grad); color: #05303b; font-weight: 800; }
.rule.hot { border-color: rgba(var(--mr), .55); box-shadow: 0 0 32px rgba(var(--mr), .14); animation: rulehot 4.5s infinite; }
@keyframes rulehot { 0%, 100% { box-shadow: 0 0 10px rgba(var(--mr), .08); } 50% { box-shadow: 0 0 40px rgba(var(--mr), .3); } }
.rules-note { text-align: center; color: #6d7c90; font-size: .72rem; }
/* بانک دانش: کالبد مقاله */
.anat { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.6rem; align-items: center; }
@media (max-width: 52rem) { .anat { grid-template-columns: 1fr; } }
.art { padding: 1.3rem 1.4rem; border-radius: 1.2rem; background: linear-gradient(165deg, #182334, #111a28); border: 1px solid rgba(var(--mr), .3); box-shadow: 0 0 50px rgba(var(--mr), .1); }
.art header { display: flex; justify-content: space-between; align-items: center; font-size: .68rem; }
.a-tag { padding: .05rem .7rem; border-radius: 999px; background: rgba(var(--mr), .13); color: var(--m); border: 1px solid rgba(var(--mr), .35); }
.a-st { color: #6fe8bd; }
.art h3 { font-size: 1.05rem; font-weight: 800; margin: .7rem 0; }
.a-sec { padding: .65rem .8rem; border-radius: .7rem; margin-top: .5rem; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-inline-start: 3px solid transparent; transition: border-color .3s, background .3s; }
.a-sec h4 { font-size: .68rem; color: #8d9cb0; margin-bottom: .2rem; }
.a-sec p { font-size: .8rem; color: #c3cfde; line-height: 1.9; }
.a-tags { display: flex; gap: .4rem; margin-top: .7rem; }
.a-tags span { font-size: .66rem; padding: .05rem .6rem; border-radius: 999px; border: 1px dashed rgba(var(--mr), .4); color: var(--m); }
.legend { list-style: none; display: grid; gap: .8rem; }
.legend li { display: grid; gap: .1rem; padding-inline-start: 1rem; border-inline-start: 3px solid rgba(var(--mr), .35); animation: legpulse 8s infinite; animation-delay: calc(var(--k, 0) * 2s); }
.legend li.l1 { --k: 0; } .legend li.l2 { --k: 1; } .legend li.l3 { --k: 2; } .legend li.l4 { --k: 3; }
.legend b { font-size: .92rem; } .legend span { font-size: .78rem; color: var(--muted); }
@keyframes legpulse { 0%, 30%, 100% { border-color: rgba(var(--mr), .3); } 6%, 22% { border-color: var(--m); } }
/* مشتریان: قیف */
.fun { display: grid; gap: .6rem; justify-items: center; max-width: 44rem; margin-inline: auto; }
.fn { width: var(--w); min-width: 15rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1.3rem; border-radius: .9rem; background: linear-gradient(90deg, rgba(var(--mr), .22), rgba(var(--mr), .08)); border: 1px solid rgba(var(--mr), .35); clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%); }
.fn b { font-size: .98rem; } .fn span { font-size: .74rem; color: #9fe9f5; }
.fn.won { background: linear-gradient(90deg, var(--m), var(--m2)); color: #05303b; border-color: transparent; box-shadow: 0 0 34px rgba(var(--mr), .4); }
.fn.won span { color: #05303b; }
/* پشتیبانی: ساعت‌شمار */
.sla { max-width: 50rem; margin-inline: auto; }
.sla-bar { position: relative; height: 1.1rem; border-radius: 999px; background: linear-gradient(90deg, #22d3ee 0 60%, #ffc45c 75%, #ff8a4c 90%, #ff6b81 100%); box-shadow: 0 0 30px rgba(255,138,156,.18); overflow: hidden; }
.sla-bar i { position: absolute; top: 0; bottom: 0; right: 0; width: 100%; background: rgba(13,20,32,.82); border-inline-end: 3px solid #fff; animation: slaf 9s linear infinite; transform-origin: left; }
@keyframes slaf { 0% { width: 100%; } 100% { width: 0%; } }
.sla-marks { position: relative; height: 8rem; margin-top: .6rem; }
.sm { position: absolute; top: 0; width: 9rem; text-align: center; transform: translateX(50%); padding-top: 1rem; }
.sm::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: .9rem; background: #5d6f86; }
.sm b { display: block; font-size: 1.05rem; } .sm span { font-size: .74rem; color: var(--muted); line-height: 1.8; }
.sm.m0 { right: 0; transform: none; text-align: start; width: 12rem; } .sm.m0::before { left: auto; right: 0; }
.sm.m75 { right: 25%; } .sm.m90 { right: 10%; } .sm.m75 b { color: #ffc45c; } .sm.m90 b { color: #ff9a55; }
.sm.m100 { right: 100%; transform: translateX(100%); text-align: end; } .sm.m100::before { left: auto; right: auto; left: 0; } .sm.m100 b { color: #ff6b81; }
@media (max-width: 40rem) { .sm { width: 6.5rem; } .sm span { font-size: .66rem; } .sm.m0 { width: 8rem; } }
@media (prefers-reduced-motion: reduce) { .lc-n, .shp svg path, .rule.hot, .legend li, .sla-bar i { animation: none !important; } .sla-bar i { width: 25%; } }

/* ——— مدیریت محتوا: انتشار. از پیش‌نویس تا زنده‌شدن روی سایت‌های متصل ——— */
.vm { position: relative; display: grid; grid-template-columns: 1.3fr .3fr 1fr; align-items: center; height: 21.5rem; }
.vm-ed { display: grid; gap: .6rem; padding: 1rem; border-radius: 1rem; background: #101826; border: 1px solid rgba(var(--mr), .4); box-shadow: 0 0 44px rgba(var(--mr), .14); }
.vm-bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .7rem; font-weight: 800; }
.vm-st { position: relative; flex: none; width: 5.2rem; height: 1.35rem; }
.vm-st i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: .62rem; font-weight: 700; border-radius: 999px; border: 1px solid var(--line-strong); background: #1b283a; color: #9aa8bb; opacity: 0; animation: vmst 10s infinite; }
.vm-st .s2 { animation-delay: 2.5s; color: #ffd98a; background: rgba(255,196,92,.12); border-color: rgba(255,196,92,.4); }
.vm-st .s3 { animation-delay: 5s; color: #8bf0ff; background: rgba(var(--mr), .13); border-color: rgba(var(--mr), .4); }
.vm-st .s4 { animation-delay: 7.5s; color: #6fe8bd; background: rgba(79,224,176,.14); border-color: rgba(79,224,176,.45); }
@keyframes vmst { 0% { opacity: 0; transform: translateY(5px); } 3%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; } }
.vm-h { display: block; height: .75rem; width: 62%; border-radius: 5px; background: rgba(var(--mr), .45); }
.vm-l { display: block; height: .5rem; border-radius: 4px; background: #2a3b52; }
.vm-l.w { width: 74%; } .vm-l.w2 { width: 48%; }
.vm-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .2rem; }
.vm-tags span { font-size: .6rem; padding: .05rem .6rem; border-radius: 999px; border: 1px dashed rgba(var(--mr), .4); color: var(--m); }
.vm-roles { display: flex; gap: .35rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.vm-roles span { flex: 1; text-align: center; font-size: .62rem; padding: .25rem 0; border-radius: .5rem; background: #16202e; border: 1px solid var(--line); color: #7d8ea3; }
.vm-roles span:nth-child(1) { animation: vmr1 10s infinite; } .vm-roles span:nth-child(2) { animation: vmr2 10s infinite; } .vm-roles span:nth-child(3) { animation: vmr3 10s infinite; }
@keyframes vmr1 { 0%, 24% { color: var(--m); border-color: rgba(var(--mr), .6); background: rgba(var(--mr), .12); } 26%, 100% { color: #7d8ea3; border-color: var(--line); background: #16202e; } }
@keyframes vmr2 { 0%, 24% { color: #7d8ea3; border-color: var(--line); background: #16202e; } 26%, 49% { color: var(--m); border-color: rgba(var(--mr), .6); background: rgba(var(--mr), .12); } 51%, 100% { color: #7d8ea3; border-color: var(--line); background: #16202e; } }
@keyframes vmr3 { 0%, 49% { color: #7d8ea3; border-color: var(--line); background: #16202e; } 51%, 98% { color: var(--m); border-color: rgba(var(--mr), .6); background: rgba(var(--mr), .12); } 100% { color: #7d8ea3; border-color: var(--line); background: #16202e; } }
.vm-flow { position: relative; height: 100%; }
.vm-flow::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, rgba(var(--mr), .5) 0 6px, transparent 6px 12px); animation: dash 1s linear infinite; }
.vm-pk { position: absolute; top: 50%; right: 0; width: .6rem; height: .6rem; margin-top: -.3rem; border-radius: 50%; background: #c8f9ff; box-shadow: 0 0 14px var(--m); opacity: 0; animation: vmpk 10s infinite; }
.vm-pk.p2 { animation-delay: .25s; }
@keyframes vmpk { 0%, 72% { opacity: 0; right: 0; } 74% { opacity: 1; right: 0; } 84% { opacity: 1; right: calc(100% - .6rem); } 86%, 100% { opacity: 0; right: calc(100% - .6rem); } }
.vm-sites { display: grid; gap: .7rem; }
.vm-site { display: grid; grid-template-columns: 1fr auto; gap: .1rem .5rem; align-items: center; padding: .7rem .8rem; border-radius: .8rem; background: #16202e; border: 1px solid var(--line); animation: vmsite 10s infinite; animation-delay: var(--d, 0s); }
.vm-site b { font-size: .7rem; } .vm-site small { grid-column: 1; font-size: .6rem; color: #7d8ea3; }
.vm-site em { grid-row: 1 / span 2; grid-column: 2; font-style: normal; font-size: .6rem; font-weight: 700; padding: .05rem .6rem; border-radius: 999px; background: rgba(79,224,176,.14); color: #6fe8bd; border: 1px solid rgba(79,224,176,.4); opacity: 0; animation: vmlive 10s infinite; animation-delay: var(--d, 0s); }
@keyframes vmsite { 0%, 80% { border-color: var(--line); box-shadow: none; } 84%, 97% { border-color: rgba(var(--mr), .6); box-shadow: 0 0 28px rgba(var(--mr), .22); } 100% { border-color: var(--line); box-shadow: none; } }
@keyframes vmlive { 0%, 82% { opacity: 0; } 86%, 97% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 30rem) { .vm { grid-template-columns: 1.2fr .15fr 1fr; } .vm-tags, .vm-roles { display: none; } }

/* ——— مدیریت محتوا: یک منبع، چند سایت ——— */
.hub { display: grid; grid-template-columns: 1.15fr .3fr 1fr; align-items: center; max-width: 62rem; margin-inline: auto; }
.hub-src { padding: 1.3rem; border-radius: 1.2rem; background: linear-gradient(165deg, #182334, #111a28); border: 1px solid rgba(var(--mr), .3); box-shadow: 0 0 50px rgba(var(--mr), .1); }
.hub-tag { display: inline-block; font-size: .68rem; font-weight: 800; padding: .05rem .8rem; border-radius: 999px; background: rgba(var(--mr), .13); color: var(--m); border: 1px solid rgba(var(--mr), .35); }
.hub-code { margin-top: .9rem; padding: .9rem 1rem; border-radius: .8rem; background: #0b121d; border: 1px solid var(--line); font-family: ui-monospace, Consolas, monospace; font-size: .74rem; line-height: 1.9; color: #c3cfde; text-align: left; overflow-x: auto; white-space: nowrap; }
.hub-code .k { color: var(--m); font-weight: 800; } .hub-code .s { color: #9fe9f5; } .hub-code .v { color: #ffd98a; } .hub-code .d { color: #6d7c90; }
.hub-beam { display: grid; gap: 4.2rem; padding-inline: .3rem; }
.hub-beam i { display: block; height: 2px; background: repeating-linear-gradient(90deg, rgba(var(--mr), .6) 0 6px, transparent 6px 12px); animation: dash 1s linear infinite; }
.hub-sites { list-style: none; display: grid; gap: .8rem; }
.hub-sites li { display: grid; gap: .15rem; padding: 1rem 1.1rem; border-radius: 1rem; background: linear-gradient(165deg, #182334, #111a28); border: 1px solid var(--line); animation: hubglow 6s infinite; }
.hub-sites li:nth-child(2) { animation-delay: 2s; } .hub-sites li:nth-child(3) { animation-delay: 4s; }
.hub-sites b { font-size: .92rem; } .hub-sites span { font-size: .76rem; color: var(--muted); line-height: 1.9; }
@keyframes hubglow { 0%, 40%, 100% { border-color: var(--line); box-shadow: none; } 8%, 30% { border-color: rgba(var(--mr), .55); box-shadow: 0 0 30px rgba(var(--mr), .2); } }
@media (max-width: 54rem) { .hub { grid-template-columns: 1fr; gap: 1rem; } .hub-beam { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .vm-st i, .vm-roles span, .vm-flow::before, .vm-pk, .vm-site, .vm-site em, .hub-beam i, .hub-sites li { animation: none !important; }
  .vm-st .s4, .vm-site em { opacity: 1; } .vm-st .s1 { opacity: 0; } .vm-pk { opacity: 0; }
}
.lc-fork .lc-n::after { display: none; }

/* ——— مدیریت محتوا: ویرایشگر و پیش‌نمایش زنده. عنوان همان‌طور که تایپ می‌شود، هم‌زمان روی سایت، موبایل و نتیجه‌ی جست‌وجو دیده می‌شود ——— */
.studio { display: grid; grid-template-columns: 1fr 1.1fr; gap: 1.6rem; align-items: center; max-width: 62rem; margin-inline: auto; }
@media (max-width: 54rem) { .studio { grid-template-columns: 1fr; } }
.st-ed { display: grid; gap: .7rem; padding: 1.2rem; border-radius: 1.2rem; background: linear-gradient(165deg, #182334, #111a28); border: 1px solid rgba(var(--mr), .3); box-shadow: 0 0 50px rgba(var(--mr), .1); }
.st-tools { display: flex; align-items: center; gap: .35rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
.st-tools span { min-width: 1.7rem; padding: .15rem .5rem; text-align: center; font-size: .7rem; font-weight: 800; border-radius: .45rem; background: #1b283a; border: 1px solid var(--line-strong); color: #b6c2d0; }
.st-tools em { margin-inline-start: auto; font-style: normal; font-size: .62rem; color: #6fe8bd; }
.st-ed label { display: grid; gap: .3rem; font-size: .66rem; color: #8796ab; }
.st-box { display: flex; align-items: center; min-height: 2rem; padding: .35rem .7rem; border-radius: .55rem; background: #0b121d; border: 1px solid var(--line-strong); font-size: .8rem; color: #e6eef8; }
.st-box:has(.st-type) { border-color: rgba(var(--mr), .5); box-shadow: 0 0 22px rgba(var(--mr), .14); }
.st-box.dim { color: #93a3b8; font-size: .74rem; }
.st-box.body { display: grid; gap: .45rem; padding: .7rem; }
.st-box.body i { display: block; height: .42rem; border-radius: 4px; background: #2a3b52; }
.st-box.body i.w { width: 76%; } .st-box.body i.w2 { width: 50%; }
.st-img { margin-top: .2rem; height: 2.4rem; border-radius: .5rem; display: grid; place-items: center; font-size: .62rem; color: #8bf0ff; background: linear-gradient(120deg, rgba(var(--mr), .28), rgba(var(--mr), .06)); border: 1px dashed rgba(var(--mr), .45); }
.st-type { display: inline-block; white-space: nowrap; clip-path: inset(0 0 0 100%); animation: ktype 9s steps(20, end) infinite; }
.st-box .caret { width: 2px; height: 1rem; margin-inline-start: .15rem; background: var(--m); animation: blink 1s steps(2) infinite; }
.st-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.st-chips span { font-size: .62rem; padding: .05rem .65rem; border-radius: 999px; border: 1px dashed rgba(var(--mr), .4); color: var(--m); }
.st-seo { display: flex; align-items: center; gap: .6rem; font-size: .66rem; color: #8796ab; }
.st-meter { flex: 1; height: .45rem; border-radius: 99px; background: #1b283a; overflow: hidden; }
.st-meter i { display: block; height: 100%; width: 80%; border-radius: 99px; background: var(--grad); transform-origin: right; animation: stmeter 9s infinite; }
@keyframes stmeter { 0%, 10% { transform: scaleX(.25); } 45%, 92% { transform: scaleX(1); } 100% { transform: scaleX(.25); } }
.st-seo b { color: #6fe8bd; font-size: .72rem; }
.st-act { display: flex; gap: .5rem; padding-top: .4rem; }
.st-act span { flex: 1; text-align: center; font-size: .7rem; padding: .45rem 0; border-radius: .6rem; background: #1b283a; border: 1px solid var(--line-strong); color: #b6c2d0; }
.st-act .main { flex: 1.4; background: var(--grad); color: #05303b; font-weight: 800; border-color: transparent; box-shadow: 0 6px 20px rgba(var(--mr), .3); }
.st-pv { position: relative; display: grid; gap: .9rem; padding-bottom: 2.6rem; min-width: 0; }
.st-fade { opacity: 0; animation: stfade 9s infinite; }
@keyframes stfade { 0%, 30% { opacity: 0; transform: translateY(10px); } 46%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.st-serp { padding: .8rem 1rem; border-radius: .9rem; background: #16202e; border: 1px solid var(--line-strong); display: grid; gap: .1rem; width: 82%; justify-self: end; animation-delay: .3s; }
.st-serp small { font-size: .58rem; color: #6d7c90; }
.st-serp b { font-size: .86rem; color: #8ab4ff; font-weight: 700; }
.st-serp span { font-size: .62rem; color: #6fe8bd; direction: ltr; text-align: right; }
.st-serp p { font-size: .7rem; color: #93a3b8; line-height: 1.8; }
.st-browser { border-radius: 1rem; overflow: hidden; background: #101826; border: 1px solid var(--line-strong); box-shadow: 0 20px 44px rgba(0,0,0,.45); }
.st-bar { display: flex; align-items: center; gap: .3rem; padding: .55rem .8rem; background: #16202e; border-bottom: 1px solid var(--line); }
.st-bar i { width: .5rem; height: .5rem; border-radius: 50%; background: #2c3e56; }
.st-bar span { margin-inline-start: .5rem; flex: 1; font-size: .6rem; color: #8796ab; padding: .15rem .7rem; border-radius: 99px; background: #0b121d; direction: ltr; text-align: left; }
.st-page { display: grid; gap: .5rem; padding: .9rem 1rem 1.1rem; }
.st-cover { height: 4.4rem; border-radius: .6rem; background: linear-gradient(120deg, rgba(var(--mr), .5), rgba(var(--mr), .08)), repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 8px, transparent 8px 16px); border: 1px solid rgba(var(--mr), .3); }
.st-page small { font-size: .6rem; color: var(--m); }
.st-page h4 { font-size: 1.05rem; font-weight: 800; min-height: 1.6rem; }
.st-page > div:last-child { display: grid; gap: .4rem; }
.st-page i, .st-phone i { display: block; height: .42rem; border-radius: 4px; background: #2a3b52; }
.st-page i.w, .st-phone i.w { width: 80%; } .st-page i.w2 { width: 52%; }
.st-phone { position: absolute; left: -.4rem; bottom: 0; width: 7.4rem; padding: 1.1rem .6rem .8rem; border-radius: 1.2rem; display: grid; gap: .4rem; background: #0e1623; border: 2px solid #34475f; box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 30px rgba(var(--mr), .12); animation-delay: .15s; }
.st-notch { position: absolute; top: .35rem; left: 50%; width: 2rem; height: .22rem; translate: -50% 0; border-radius: 99px; background: #34475f; }
.st-phone .st-cover { height: 2.2rem; }
.st-phone h4 { font-size: .64rem; font-weight: 800; line-height: 1.6; }
.st-phone i { height: .3rem; }
@media (prefers-reduced-motion: reduce) {
  .st-type, .st-fade, .st-box .caret, .st-meter i { animation: none !important; }
  .st-type { clip-path: none; } .st-fade { opacity: 1; }
}

/* ——— گفتگوی هوشمند: پرسش، ابزار، پاسخ با منبع و تأیید صریح ——— */
.vg { position: relative; display: grid; grid-template-rows: auto auto auto auto 1fr; gap: .65rem; align-content: start; height: 21.5rem; }
.vg-head { display: flex; align-items: center; gap: .6rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); font-size: .8rem; }
.vg-av { width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--grad); box-shadow: 0 0 18px rgba(var(--mr), .5); }
.vg-head em { margin-inline-start: auto; font-style: normal; font-size: .62rem; color: #6fe8bd; }
.vg-head em::before { content: ""; display: inline-block; width: .4rem; height: .4rem; margin-inline-end: .35rem; border-radius: 50%; background: #6fe8bd; box-shadow: 0 0 8px #6fe8bd; }
.vg-msg { max-width: 88%; padding: .55rem .85rem; border-radius: .9rem; font-size: .74rem; line-height: 1.9; }
.vg-msg.u { justify-self: start; background: #1b283a; border: 1px solid var(--line-strong); }
.vg-msg.b { justify-self: end; background: rgba(var(--mr), .1); border: 1px solid rgba(var(--mr), .35); }
.vg-msg .tag { display: inline-block; margin-inline-start: .3rem; font-size: .58rem; padding: .02rem .6rem; border-radius: 999px; background: rgba(var(--mr), .15); color: var(--m); border: 1px solid rgba(var(--mr), .35); }
.vg-tool { justify-self: end; display: flex; align-items: center; gap: .5rem; padding: .4rem .85rem; border-radius: 999px; font-size: .68rem; color: #8bf0ff; border: 1px dashed rgba(var(--mr), .45); }
.vg-tool i { width: .75rem; height: .75rem; border-radius: 50%; border: 2px solid rgba(var(--mr), .3); border-top-color: var(--m); animation: ospin 1s linear infinite; }
.vg-a1 { grid-row: 2; } .vg-a2, .vg-a3 { grid-row: 3; } .vg-a4 { grid-row: 4; }
.vg-ok { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .65rem .9rem; border-radius: .9rem; background: linear-gradient(160deg, #143a48, #0f2a36); border: 1px solid rgba(var(--mr), .6); box-shadow: 0 0 28px rgba(var(--mr), .25); }
.vg-ok small { display: block; font-size: .6rem; color: #7fd6e6; } .vg-ok b { font-size: .74rem; color: #dffaff; }
.vg-ok span { padding: .3rem 1rem; border-radius: 999px; font-size: .68rem; font-weight: 800; color: #05303b; background: var(--grad); }
.vg-input { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: .5rem .5rem .5rem .9rem; border-radius: 999px; background: #0f1826; border: 1px solid var(--line-strong); font-size: .68rem; color: #6d7c90; }
.vg-input i { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; font-style: normal; font-weight: 800; color: #05303b; background: var(--grad); }
.vg-a1 { animation: vga1 12s infinite; } .vg-a2 { animation: vga2 12s infinite; } .vg-a3 { animation: vga3 12s infinite; } .vg-a4 { animation: vga4 12s infinite; }
@keyframes vga1 { 0%, 2% { opacity: 0; transform: translateY(8px); } 6%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes vga2 { 0%, 14% { opacity: 0; transform: translateY(8px); } 18%, 34% { opacity: 1; transform: none; } 38%, 100% { opacity: 0; } }
@keyframes vga3 { 0%, 40% { opacity: 0; transform: translateY(8px); } 45%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes vga4 { 0%, 58% { opacity: 0; transform: translateY(8px); } 64%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }

/* گفتگوی هوشمند: سوئیچ خودکار مدل */
.fo { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.6rem; align-items: center; max-width: 58rem; margin-inline: auto; }
@media (max-width: 50rem) { .fo { grid-template-columns: 1fr; } }
.fo-chat { display: grid; gap: .7rem; padding: 1.2rem; border-radius: 1.2rem; background: linear-gradient(165deg, #182334, #111a28); border: 1px solid rgba(var(--mr), .3); box-shadow: 0 0 50px rgba(var(--mr), .1); }
.fo-q, .fo-a { max-width: 90%; padding: .6rem .9rem; border-radius: .9rem; font-size: .78rem; line-height: 1.9; }
.fo-q { justify-self: start; background: #1b283a; border: 1px solid var(--line-strong); animation: foq 9s infinite; }
.fo-a { justify-self: end; background: rgba(var(--mr), .1); border: 1px solid rgba(var(--mr), .35); animation: foa 9s infinite; }
.fo-notice { justify-self: center; padding: .3rem .9rem; border-radius: 999px; font-size: .66rem; color: #ffd98a; background: rgba(255,196,92,.1); border: 1px solid rgba(255,196,92,.4); animation: fon 9s infinite; }
@keyframes foq { 0%, 2% { opacity: 0; transform: translateY(8px); } 6%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes fon { 0%, 26% { opacity: 0; transform: translateY(8px); } 32%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes foa { 0%, 46% { opacity: 0; transform: translateY(8px); } 52%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.fo-models { list-style: none; display: grid; gap: .8rem; }
.fo-models li { display: flex; align-items: center; gap: .7rem; padding: .9rem 1.1rem; border-radius: 1rem; background: linear-gradient(165deg, #182334, #111a28); border: 1px solid var(--line); }
.fo-models b { font-size: .88rem; }
.fo-models em { margin-inline-start: auto; font-style: normal; font-size: .64rem; font-weight: 700; padding: .05rem .65rem; border-radius: 999px; background: #1b283a; color: #8796ab; }
.fo-dot { width: .6rem; height: .6rem; border-radius: 50%; background: #5d6f86; flex: none; }
.fo-models .m1 { animation: fom1 9s infinite; } .fo-models .m2 { animation: fom2 9s infinite; }
.fo-models .m1 em { animation: fom1e 9s infinite; } .fo-models .m2 em { animation: fom2e 9s infinite; }
.fo-models .m1 .fo-dot { animation: fom1d 9s infinite; } .fo-models .m2 .fo-dot { animation: fom2d 9s infinite; }
@keyframes fom1 { 0%, 22% { border-color: var(--line); } 28%, 92% { border-color: rgba(255,107,129,.55); } 100% { border-color: var(--line); } }
@keyframes fom1e { 0%, 22% { opacity: 0; } 28%, 92% { opacity: 1; background: rgba(255,107,129,.16); color: #ff9db0; } 100% { opacity: 0; } }
@keyframes fom1d { 0%, 22% { background: #6fe8bd; } 28%, 92% { background: #ff6b81; } 100% { background: #6fe8bd; } }
@keyframes fom2 { 0%, 30% { border-color: var(--line); box-shadow: none; } 36%, 92% { border-color: rgba(var(--mr), .6); box-shadow: 0 0 28px rgba(var(--mr), .2); } 100% { border-color: var(--line); box-shadow: none; } }
@keyframes fom2e { 0%, 30% { opacity: 0; } 36%, 92% { opacity: 1; background: rgba(var(--mr), .14); color: #8bf0ff; } 100% { opacity: 0; } }
@keyframes fom2d { 0%, 30% { background: #5d6f86; } 36%, 92% { background: var(--m); box-shadow: 0 0 10px var(--m); } 100% { background: #5d6f86; } }

/* ——— ارتباطات: چند کانال، یک‌جا. پیام‌رسان و تماس ورودی ——— */
.vo { position: relative; display: grid; gap: .8rem; align-content: start; height: 21.5rem; }
.vo-ch { display: flex; gap: .4rem; }
.vo-ch span { flex: 1; text-align: center; font-size: .66rem; padding: .3rem 0; border-radius: 999px; background: #16202e; border: 1px solid var(--line); color: #8796ab; }
.vo-ch .c1 { animation: voc1 10s infinite; } .vo-ch .c2 { animation: voc2 10s infinite; } .vo-ch .c3 { animation: voc3 10s infinite; } .vo-ch .c4 { animation: voc4 10s infinite; }
@keyframes voc1 { 0%, 2% { color: #8796ab; border-color: var(--line); } 6%, 45% { color: var(--m); border-color: rgba(var(--mr), .55); background: rgba(var(--mr), .1); } 50%, 100% { color: #8796ab; border-color: var(--line); background: #16202e; } }
@keyframes voc2 { 0%, 14% { color: #8796ab; border-color: var(--line); } 18%, 30% { color: var(--m); border-color: rgba(var(--mr), .55); background: rgba(var(--mr), .1); } 34%, 100% { color: #8796ab; border-color: var(--line); background: #16202e; } }
@keyframes voc3 { 0%, 30% { color: #8796ab; border-color: var(--line); } 34%, 44% { color: var(--m); border-color: rgba(var(--mr), .55); background: rgba(var(--mr), .1); } 48%, 100% { color: #8796ab; border-color: var(--line); background: #16202e; } }
@keyframes voc4 { 0%, 48% { color: #8796ab; border-color: var(--line); } 54%, 92% { color: #6fe8bd; border-color: rgba(79,224,176,.55); background: rgba(79,224,176,.1); } 100% { color: #8796ab; border-color: var(--line); background: #16202e; } }
.vo-thread { display: grid; gap: .5rem; }
.vo-b { max-width: 84%; padding: .5rem .8rem; border-radius: .9rem; font-size: .72rem; line-height: 1.9; }
.vo-b.l { justify-self: start; background: #1b283a; border: 1px solid var(--line-strong); }
.vo-b.r { justify-self: end; background: rgba(var(--mr), .1); border: 1px solid rgba(var(--mr), .35); }
.vo-m1 { animation: vom1 10s infinite; } .vo-m2 { animation: vom2 10s infinite; } .vo-m3 { animation: vom3 10s infinite; }
@keyframes vom1 { 0%, 3% { opacity: 0; transform: translateY(8px); } 7%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes vom2 { 0%, 15% { opacity: 0; transform: translateY(8px); } 19%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes vom3 { 0%, 28% { opacity: 0; transform: translateY(8px); } 32%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.vo-call { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border-radius: 1rem; background: linear-gradient(160deg, #143a48, #0f2a36); border: 1px solid rgba(var(--mr), .6); box-shadow: 0 0 34px rgba(var(--mr), .25); animation: vocall 10s infinite; }
.vo-call small { display: block; font-size: .6rem; color: #7fd6e6; } .vo-call b { display: block; font-size: .84rem; color: #dffaff; } .vo-call span:not(.vo-ring):not(.ok):not(.no) { font-size: .62rem; color: #9fc7d1; }
.vo-ring { position: relative; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: rgba(79,224,176,.15); border: 1px solid rgba(79,224,176,.5); }
.vo-ring::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(79,224,176,.6); animation: cpulse 1.6s ease-out infinite; }
.vo-ring i { width: .7rem; height: .7rem; border-radius: 50%; background: #6fe8bd; box-shadow: 0 0 12px #6fe8bd; }
.vo-btns { margin-inline-start: auto; display: flex; gap: .4rem; }
.vo-btns span { font-size: .64rem; font-weight: 800; padding: .3rem .85rem; border-radius: 999px; }
.vo-btns .ok { color: #05301f; background: #6fe8bd; } .vo-btns .no { color: #ffc9d2; background: rgba(255,107,129,.2); border: 1px solid rgba(255,107,129,.45); }
@keyframes vocall { 0%, 46% { opacity: 0; transform: translateY(26px); } 53%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(26px); } }

/* ارتباطات: تلفن در مرورگر و پنجره‌ی تماس‌گیرنده */
.cx { display: grid; grid-template-columns: 15rem 1fr; gap: 1.6rem; align-items: center; max-width: 58rem; margin-inline: auto; }
@media (max-width: 50rem) { .cx { grid-template-columns: 1fr; justify-items: center; } .cx-card { width: 100%; } }
.cx-ph { display: grid; gap: .7rem; width: 15rem; padding: 1rem; border-radius: 1.6rem; background: linear-gradient(165deg, #182334, #0e1623); border: 2px solid #34475f; box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 40px rgba(var(--mr), .1); }
.cx-scr { display: grid; gap: .2rem; padding: .8rem; border-radius: .9rem; text-align: center; background: #0b121d; border: 1px solid var(--line); }
.cx-scr small { font-size: .6rem; color: #6fe8bd; } .cx-scr b { font-size: .95rem; direction: ltr; letter-spacing: .04em; }
.cx-time::before { content: "۰۲:۱۴"; font-style: normal; font-size: .68rem; color: #8796ab; }
.cx-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.cx-keys span { display: grid; place-items: center; height: 2rem; border-radius: .6rem; font-size: .8rem; font-weight: 700; color: #b6c2d0; background: #1b283a; border: 1px solid var(--line-strong); }
.cx-end { text-align: center; padding: .5rem 0; border-radius: 999px; font-size: .72rem; font-weight: 800; color: #fff; background: #d94662; box-shadow: 0 6px 18px rgba(217,70,98,.35); }
.cx-card { display: grid; gap: .8rem; padding: 1.2rem; border-radius: 1.2rem; background: linear-gradient(165deg, #182334, #111a28); border: 1px solid rgba(var(--mr), .3); box-shadow: 0 0 50px rgba(var(--mr), .1); }
.cx-top { display: flex; align-items: center; gap: .8rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.cx-top b { display: block; font-size: .9rem; } .cx-top small { font-size: .64rem; color: #8796ab; }
.cx-top em { margin-inline-start: auto; font-style: normal; font-size: .6rem; font-weight: 700; padding: .05rem .65rem; border-radius: 999px; background: rgba(79,224,176,.14); color: #6fe8bd; border: 1px solid rgba(79,224,176,.4); }
.cx-av { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--grad); box-shadow: 0 0 20px rgba(var(--mr), .4); flex: none; }
.cx-sec { padding: .65rem .8rem; border-radius: .7rem; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-inline-start: 3px solid rgba(var(--mr), .5); }
.cx-sec h5 { font-size: .66rem; color: #8d9cb0; margin-bottom: .25rem; font-weight: 700; }
.cx-sec p { font-size: .76rem; color: #c3cfde; line-height: 1.9; }
.cx-note { display: flex; align-items: center; min-height: 1.6rem; font-size: .76rem; color: #e6eef8; }
.cx-note .st-type { animation-name: ktype; animation-timing-function: steps(32, end); }
.cx-note .caret { width: 2px; height: 1rem; margin-inline-start: .15rem; background: var(--m); animation: blink 1s steps(2) infinite; }
.cx-rule { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; border-radius: .7rem; font-size: .7rem; color: #ffd98a; background: rgba(255,196,92,.08); border: 1px dashed rgba(255,196,92,.4); }
.cx-rule i { width: .5rem; height: .5rem; border-radius: 50%; background: #ffc45c; box-shadow: 0 0 8px #ffc45c; flex: none; }
@media (prefers-reduced-motion: reduce) {
  .vg-a1, .vg-a2, .vg-a3, .vg-a4, .vg-tool i, .fo-q, .fo-a, .fo-notice, .fo-models li, .fo-models em, .fo-dot, .vo-ch span, .vo-b, .vo-call, .vo-ring::before, .cx-note .st-type, .cx-note .caret { animation: none !important; }
  .vg-a2 { opacity: 0; } .cx-note .st-type { clip-path: none; }
  .fo-models .m1 em, .fo-models .m2 em { opacity: 1; }
}