/* آیگین تریدر - سایتِ معرفی. فونت: Vazirmatn از /app/css/fonts.css */
:root {
  color-scheme: dark light;
  --bg: #0a0d14; --bg2: #0f1420; --card: #141a28; --card2: #1a2133; --fg: #e9edf5; --mute: #9aa6bd; --line: #232c40;
  --acc: #f59e0b; --acc2: #fbbf24; --accfg: #1a1305; --ok: #22c55e; --err: #ef4444; --info: #3b82f6;
  --shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
:root[data-theme="light"] {
  --bg: #f7f5f0; --bg2: #efece4; --card: #ffffff; --card2: #f7f4ec; --fg: #1a1f2b; --mute: #5d6880; --line: #e3ddd0;
  --acc: #d97706; --acc2: #b45309; --accfg: #fff; --shadow: 0 24px 60px rgba(60, 40, 0, .14);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f7f5f0; --bg2: #efece4; --card: #ffffff; --card2: #f7f4ec; --fg: #1a1f2b; --mute: #5d6880; --line: #e3ddd0;
    --acc: #d97706; --acc2: #b45309; --accfg: #fff; --shadow: 0 24px 60px rgba(60, 40, 0, .14);
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: 'Vazirmatn', system-ui, sans-serif; line-height: 1.9; -webkit-font-smoothing: antialiased; }
a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 18px; }
.narrow { max-width: 820px; }
.ltr { direction: ltr; unicode-bidi: embed; display: inline-block; }

/* ---------- هدر ---------- */
.top { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 14px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--fg); font-weight: 800; font-size: 17px; }
.brand:hover { text-decoration: none; }
.brand img { width: 36px; height: 36px; border-radius: 10px; }
.nav { display: flex; gap: 4px; margin-inline-start: 18px; }
.nav a { color: var(--mute); padding: 6px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.nav a:hover, .nav a.on { color: var(--fg); background: var(--card); text-decoration: none; }
.top .sp { flex: 1; }
.iconbtn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--fg); cursor: pointer; font-size: 17px; font-family: inherit; }
.menu-btn { display: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 14px; font-weight: 700; font-size: 15px; border: 1px solid var(--line); background: var(--card); color: var(--fg); cursor: pointer; font-family: inherit; }
.btn:hover { text-decoration: none; border-color: var(--acc); }
.btn.primary { background: var(--acc); color: var(--accfg); border-color: transparent; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.sm { min-height: 38px; padding: 0 16px; font-size: 14px; border-radius: 12px; }
@media (max-width: 860px) {
  .menu-btn { display: inline-block; }
  .nav { display: none; position: absolute; top: 64px; inset-inline: 0; flex-direction: column; background: var(--bg); border-bottom: 1px solid var(--line); padding: 10px 18px 16px; margin: 0; }
  .nav.open { display: flex; }
  .nav a { padding: 12px; font-size: 15px; }
  .top .cta-top { display: none; }
}

/* ---------- بخش‌ها ---------- */
section { padding: 64px 0; }
section.alt { background: var(--bg2); }
h1 { font-size: clamp(28px, 5vw, 46px); line-height: 1.45; margin: 0 0 16px; letter-spacing: -.3px; }
h2 { font-size: clamp(22px, 3.4vw, 32px); line-height: 1.5; margin: 0 0 10px; }
h3 { font-size: 17px; margin: 0 0 6px; }
.lead { color: var(--mute); font-size: clamp(15px, 2vw, 18px); max-width: 620px; margin: 0 0 26px; }
.eyebrow { display: inline-block; color: var(--acc); font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.sec-head { text-align: center; max-width: 680px; margin: 0 auto 38px; }
.sec-head p { color: var(--mute); margin: 0; }
.hero { overflow: hidden; padding: 54px 0 40px; background: radial-gradient(1000px 420px at 85% -10%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 70%); }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: center; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.mini { color: var(--mute); font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip { font-size: 13px; padding: 4px 12px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); color: var(--mute); }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } .hero { padding-top: 36px; } }

/* ---------- کارت‌ها ---------- */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid.g3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px; }
.card p { margin: 0; color: var(--mute); font-size: 14.5px; }
.card .ic { width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--acc) 16%, transparent); display: grid; place-items: center; font-size: 22px; margin-bottom: 12px; }
.steps { counter-reset: s; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.step { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px 22px 22px 22px; }
.step::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--acc); color: var(--accfg); font-weight: 800; margin-bottom: 10px; }
.step p { margin: 0; color: var(--mute); font-size: 14.5px; }

/* ---------- قابِ گوشی ---------- */
.phones { display: flex; justify-content: center; align-items: flex-end; gap: 0; position: relative; min-height: 440px; }
.phone { width: 232px; border-radius: 34px; padding: 9px; background: #05070b; border: 2px solid #2a3348; box-shadow: var(--shadow); flex: none; }
.phone img { border-radius: 26px; width: 100%; height: auto; }
.phones .phone:nth-child(1) { transform: translateX(26px) rotate(-5deg) scale(.92); position: relative; z-index: 1; }
.phones .phone:nth-child(2) { z-index: 2; }
.phones .phone:nth-child(3) { transform: translateX(-26px) rotate(5deg) scale(.92); position: relative; z-index: 1; }
@media (max-width: 860px) { .phone { width: 190px; } .phones { min-height: 380px; } .phones .phone:nth-child(3) { display: none; } .phones .phone:nth-child(1) { transform: translateX(16px) rotate(-4deg) scale(.92); } }
.shots { display: flex; gap: 22px; overflow-x: auto; padding: 8px 4px 26px; scroll-snap-type: x proximity; }
.shot { flex: none; width: 236px; scroll-snap-align: center; text-align: center; }
.shot .phone { width: 100%; }
.shot b { display: block; margin-top: 14px; }
.shot span { color: var(--mute); font-size: 13.5px; display: block; }
.note { color: var(--mute); font-size: 13px; text-align: center; margin-top: 4px; }

/* ---------- قیمتِ زنده ---------- */
.ticker { display: none; margin: 0 0 22px; padding: 14px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); align-items: center; gap: 22px; flex-wrap: wrap; max-width: 620px; }
.ticker.on { display: flex; }
.ticker .k { color: var(--mute); font-size: 12.5px; display: block; }
.ticker .v { font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; }
.ticker .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mute); display: inline-block; margin-inline-end: 6px; }
.ticker .dot.open { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 25%, transparent); }

/* ---------- محتوا (آموزش/قوانین) ---------- */
.page-hero { padding: 46px 0 22px; border-bottom: 1px solid var(--line); background: radial-gradient(900px 300px at 90% -20%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 70%); }
.page-hero h1 { font-size: clamp(26px, 4vw, 38px); margin-bottom: 8px; }
.page-hero p { color: var(--mute); margin: 0; max-width: 680px; }
.doc { display: grid; grid-template-columns: 250px 1fr; gap: 40px; padding: 38px 0 70px; align-items: start; }
.toc { position: sticky; top: 84px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px; font-size: 14px; max-height: calc(100vh - 110px); overflow: auto; }
.toc b { display: block; margin: 2px 8px 8px; color: var(--mute); font-size: 12.5px; }
.toc a { display: block; padding: 6px 10px; border-radius: 9px; color: var(--fg); }
.toc a:hover { background: var(--card2); text-decoration: none; }
.prose h2 { font-size: 23px; margin: 38px 0 10px; padding-top: 6px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 17px; margin: 22px 0 6px; }
.prose p, .prose li { color: var(--fg); opacity: .92; font-size: 15.5px; }
.prose p { margin: 0 0 12px; }
.prose ul, .prose ol { padding-inline-start: 22px; margin: 0 0 14px; }
.prose li { margin-bottom: 4px; }
.prose figure { margin: 16px 0 22px; display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.prose figure .phone { width: 200px; }
.prose figcaption { color: var(--mute); font-size: 13.5px; flex: 1; min-width: 200px; }
.callout { border-radius: 16px; padding: 14px 18px; margin: 14px 0 18px; border: 1px solid var(--line); background: var(--card); font-size: 14.5px; }
.callout.warn { border-color: color-mix(in srgb, var(--acc) 55%, transparent); background: color-mix(in srgb, var(--acc) 9%, var(--card)); }
.callout.risk { border-color: color-mix(in srgb, var(--err) 55%, transparent); background: color-mix(in srgb, var(--err) 8%, var(--card)); }
.callout b:first-child { display: block; margin-bottom: 2px; }
@media (max-width: 860px) { .doc { grid-template-columns: 1fr; gap: 18px; } .toc { position: static; max-height: none; } }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tbl { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--card); margin: 14px 0 18px; }
th, td { padding: 11px 14px; text-align: start; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--mute); font-weight: 600; font-size: 13px; background: var(--card2); }
tr:last-child td { border-bottom: 0; }
td.num { font-variant-numeric: tabular-nums; }

/* ---------- سؤالات ---------- */
details.faq { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 4px 18px; margin-bottom: 10px; }
details.faq summary { cursor: pointer; font-weight: 700; padding: 12px 0; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--acc); font-size: 20px; line-height: 1.4; }
details.faq[open] summary::after { content: "−"; }
details.faq p, details.faq ul { color: var(--mute); margin: 0 0 14px; font-size: 15px; }
.qgroup { margin: 34px 0 12px; font-size: 19px; }

/* ---------- نصب ---------- */
.os { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.os .card ol { margin: 10px 0 0; padding-inline-start: 20px; color: var(--mute); font-size: 14.5px; }
.os .card ol b { color: var(--fg); }
.badge { font-size: 12px; padding: 2px 10px; border-radius: 99px; background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); font-weight: 700; margin-inline-start: 6px; }

/* ---------- فوتر ---------- */
footer.site { border-top: 1px solid var(--line); background: var(--bg2); padding: 44px 0 30px; font-size: 14px; color: var(--mute); }
footer.site .cols { display: grid; gap: 28px; grid-template-columns: 1.4fr repeat(3, 1fr); }
footer.site h4 { color: var(--fg); margin: 0 0 10px; font-size: 14.5px; }
footer.site a { color: var(--mute); display: block; padding: 3px 0; }
footer.site a:hover { color: var(--fg); }
footer.site .fine { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.9; }
@media (max-width: 860px) { footer.site .cols { grid-template-columns: 1fr 1fr; } }
.riskbar { background: color-mix(in srgb, var(--err) 10%, var(--bg)); border-bottom: 1px solid color-mix(in srgb, var(--err) 30%, transparent); color: var(--mute); font-size: 12.5px; text-align: center; padding: 6px 12px; }
.riskbar a { color: var(--fg); text-decoration: underline; }
.contact-list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.contact-list .card { display: none; }
.contact-list .card.on { display: block; }
.contact-list .card a { font-weight: 700; word-break: break-all; }
.empty-contact { color: var(--mute); }

/* ================= ویترینِ اپ (هر بار یک صفحه در کانون) ================= */
.sc { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; outline: none; }
.sc-stage { position: relative; height: 660px; perspective: 1500px; --rx: 0deg; --ry: 0deg; touch-action: pan-y; }
.sc-track { position: absolute; inset: 0; transform-style: preserve-3d; }
.sc-glow { position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--acc) 38%, transparent), transparent 68%); filter: blur(10px); animation: sc-pulse 5s ease-in-out infinite; }
.sc-rings i { position: absolute; left: 50%; top: 50%; border: 1px dashed color-mix(in srgb, var(--acc) 38%, transparent); border-radius: 50%; }
.sc-rings i:nth-child(1) { width: 470px; height: 470px; margin: -235px 0 0 -235px; animation: sc-spin 38s linear infinite; }
.sc-rings i:nth-child(2) { width: 620px; height: 620px; margin: -310px 0 0 -310px; border-style: solid; border-color: color-mix(in srgb, var(--fg) 7%, transparent); animation: sc-spin 60s linear infinite reverse; }
.sc-rings i:nth-child(3) { width: 330px; height: 330px; margin: -165px 0 0 -165px; border-color: color-mix(in srgb, var(--acc) 22%, transparent); animation: sc-spin 24s linear infinite; }
.sc-rings i::after { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 14px var(--acc); }
.sc-item { position: absolute; left: 50%; top: 50%; width: 276px; margin: -300px 0 0 -138px; cursor: pointer; opacity: 0; pointer-events: none;
  transition: transform .85s cubic-bezier(.2, .85, .2, 1), opacity .6s ease, filter .6s ease; will-change: transform, opacity; }
.sc-item .phone { width: 100%; }
.sc-item[data-d="0"] { opacity: 1; z-index: 5; pointer-events: auto; cursor: default; transform: translate3d(0, 0, 80px) rotateX(var(--rx)) rotateY(var(--ry)); }
.sc-item[data-d="0"] .phone { animation: sc-float 6s ease-in-out infinite; border-color: color-mix(in srgb, var(--acc) 55%, #2a3348); box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 6px color-mix(in srgb, var(--acc) 10%, transparent); }
.sc-item[data-d="1"], .sc-item[data-d="-1"] { opacity: .5; z-index: 3; pointer-events: auto; filter: blur(1.4px) brightness(.62) saturate(.8); }
.sc-item[data-d="1"] { transform: translate3d(-64%, 0, -90px) rotateY(32deg) scale(.8); }
.sc-item[data-d="-1"] { transform: translate3d(64%, 0, -90px) rotateY(-32deg) scale(.8); }
.sc-item[data-d="2"], .sc-item[data-d="-2"] { opacity: .16; z-index: 1; filter: blur(3px) brightness(.5); }
.sc-item[data-d="2"] { transform: translate3d(-112%, 0, -220px) rotateY(40deg) scale(.62); }
.sc-item[data-d="-2"] { transform: translate3d(112%, 0, -220px) rotateY(-40deg) scale(.62); }
.sc-item[data-d="far"] { transform: translate3d(0, 0, -300px) scale(.5); }
.sc-info { position: relative; min-height: 380px; }
.sc-count { font-size: 15px; color: var(--mute); margin-bottom: 8px; }
.sc-count b { display: inline-block; direction: ltr; font-size: 46px; color: var(--acc); font-weight: 800; line-height: 1; margin-inline-end: 6px; font-variant-numeric: tabular-nums; }
.sc-texts { position: relative; min-height: 230px; }
.sc-slide { display: none; }
.sc-slide.on { display: block; }
.sc-slide .sc-tag { display: inline-block; font-size: 13px; font-weight: 700; color: var(--accfg); background: var(--acc); padding: 1px 12px; border-radius: 99px; margin-bottom: 10px; }
.sc-slide h3 { font-size: clamp(22px, 3vw, 30px); line-height: 1.5; margin: 0 0 8px; }
.sc-slide p { color: var(--mute); margin: 0 0 16px; font-size: 15.5px; max-width: 460px; }
.sc-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sc-chips li { font-size: 13.5px; padding: 5px 14px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); }
.sc-slide.on .sc-tag, .sc-slide.on h3, .sc-slide.on p, .sc-slide.on .sc-chips li { animation: sc-rise .7s cubic-bezier(.2, .85, .2, 1) both; }
.sc-slide.on h3 { animation-delay: .06s; } .sc-slide.on p { animation-delay: .12s; }
.sc-slide.on .sc-chips li:nth-child(1) { animation: sc-pop .6s .22s cubic-bezier(.3, 1.5, .5, 1) both; }
.sc-slide.on .sc-chips li:nth-child(2) { animation: sc-pop .6s .32s cubic-bezier(.3, 1.5, .5, 1) both; }
.sc-slide.on .sc-chips li:nth-child(3) { animation: sc-pop .6s .42s cubic-bezier(.3, 1.5, .5, 1) both; }
.sc-bar { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; margin: 26px 0 16px; }
.sc-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--acc2), var(--acc)); border-radius: 4px; }
.sc.run .sc-bar i { animation: sc-fill var(--sc-dur, 6s) linear forwards; }
.sc.pause .sc-bar i { animation-play-state: paused; }
.sc-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-tabs button { font: inherit; font-size: 13.5px; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: var(--mute); cursor: pointer; transition: all .25s; }
.sc-tabs button:hover { color: var(--fg); border-color: var(--acc); }
.sc-tabs button[aria-current="true"] { background: var(--acc); color: var(--accfg); border-color: transparent; font-weight: 700; }
@keyframes sc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes sc-pulse { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes sc-spin { to { transform: rotate(360deg); } }
@keyframes sc-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes sc-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes sc-fill { from { width: 0; } to { width: 100%; } }
@media (max-width: 860px) {
  .sc { grid-template-columns: 1fr; gap: 6px; }
  .sc-stage { height: 520px; }
  .sc-item { width: 214px; margin: -232px 0 0 -107px; }
  .sc-item[data-d="1"] { transform: translate3d(-78%, 0, -90px) rotateY(32deg) scale(.78); }
  .sc-item[data-d="-1"] { transform: translate3d(78%, 0, -90px) rotateY(-32deg) scale(.78); }
  .sc-item[data-d="2"], .sc-item[data-d="-2"] { opacity: 0; }
  .sc-rings i:nth-child(2) { display: none; }
  .sc-info { min-height: 0; text-align: center; }
  .sc-slide p { margin-inline: auto; } .sc-chips, .sc-tabs { justify-content: center; }
  .sc-texts { min-height: 250px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-item, .sc-glow, .sc-rings i, .sc-item[data-d="0"] .phone, .sc-slide.on * { animation: none !important; transition-duration: .01s !important; }
}

/* ============ جایگزینِ «باکسِ خالی» تا تصویرِ اپ بالا بیاید (ph = placeholder) ============ */
.phone { position: relative; }
.phone img:not(.ph-logo) { position: relative; z-index: 1; opacity: 0; transform: scale(1.025); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.phone img.ld:not(.ph-logo) { opacity: 1; transform: none; }
.phone .ph { position: absolute; inset: 9px; z-index: 0; border-radius: 26px; overflow: hidden; display: block;
  background: radial-gradient(120% 70% at 50% 28%, #1d2638 0%, #0b101a 55%, #06080d 100%); }
.phone.ready .ph { display: none; }
.ph::after { content: ""; position: absolute; inset: -20% -60%; background: linear-gradient(105deg, transparent 38%, rgba(255, 236, 190, .09) 50%, transparent 62%); animation: ph-sweep 2.6s ease-in-out infinite; }
.ph-glow { position: absolute; left: 50%; top: 36%; width: 78%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(229, 199, 119, .30) 0%, rgba(229, 199, 119, 0) 68%); animation: ph-breathe 2.8s ease-in-out infinite; }
.phone .ph .ph-logo { position: absolute; left: 50%; top: 36%; width: 34%; height: auto; border-radius: 0; transform: translate(-50%, -50%); filter: drop-shadow(0 0 14px rgba(229, 199, 119, .55)); animation: ph-logo 2.8s ease-in-out infinite; }
.ph-ring, .ph-ring.r2 { position: absolute; left: 50%; top: 36%; width: 62%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, rgba(229, 199, 119, 0) 0 45%, #e5c777 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: ph-spin 2.2s linear infinite; }
.ph-ring.r2 { width: 78%; opacity: .55; animation: ph-spin-r 3.6s linear infinite; background: conic-gradient(from 90deg, rgba(184, 137, 59, 0) 0 55%, #b8893b 100%); }
.ph-bars { position: absolute; left: 50%; bottom: 25%; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 7px; height: 40px; }
.ph-bars s { display: block; width: 7px; border-radius: 3px; background: linear-gradient(#f3dc9c, #b8893b); height: 100%; transform-origin: bottom; animation: ph-bar 1.5s ease-in-out infinite; text-decoration: none; }
.ph-bars s:nth-child(1) { animation-delay: -1.3s; } .ph-bars s:nth-child(2) { animation-delay: -1.1s; } .ph-bars s:nth-child(3) { animation-delay: -.9s; }
.ph-bars s:nth-child(4) { animation-delay: -.7s; } .ph-bars s:nth-child(5) { animation-delay: -.5s; } .ph-bars s:nth-child(6) { animation-delay: -.3s; } .ph-bars s:nth-child(7) { animation-delay: -.1s; }
.ph-coin { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c4, #d9a93f 55%, #8a621c); box-shadow: 0 0 10px rgba(229, 199, 119, .5); animation: ph-float 3.6s ease-in-out infinite; }
.ph-coin.c1 { left: 16%; top: 20%; } .ph-coin.c2 { right: 14%; top: 50%; width: 10px; height: 10px; animation-delay: -1.2s; } .ph-coin.c3 { left: 22%; top: 60%; width: 8px; height: 8px; animation-delay: -2.2s; }
.ph-txt { position: absolute; left: 0; right: 0; bottom: 14%; text-align: center; color: #cdb98a; font-size: 12.5px; letter-spacing: .2px; animation: ph-fade 1.8s ease-in-out infinite; }
.ph-bar { position: absolute; left: 22%; right: 22%; bottom: 8%; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ph-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: 3px; background: linear-gradient(90deg, #b8893b, #f3dc9c); animation: ph-load 1.4s ease-in-out infinite; }
@keyframes ph-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes ph-spin-r { to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes ph-sweep { from { transform: translateX(-70%); } to { transform: translateX(70%); } }
@keyframes ph-breathe { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.92); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }
@keyframes ph-logo { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.07); } }
@keyframes ph-bar { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
@keyframes ph-float { 0%, 100% { transform: translateY(0); opacity: .75; } 50% { transform: translateY(-12px); opacity: 1; } }
@keyframes ph-fade { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes ph-load { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
.phone.fail .ph-ring, .phone.fail .ph-ring.r2, .phone.fail .ph-bar::after { animation-play-state: paused; }

/* نوارِ باریکِ پیشرفتِ بارگذاریِ صفحه (فقط با جاوااسکریپت ساخته می‌شود) */
.pgbar { position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 9999; pointer-events: none; transform-origin: right; transform: scaleX(.08);
  background: linear-gradient(270deg, #f3dc9c, #d9a93f 50%, #b8893b); box-shadow: 0 0 10px rgba(229, 199, 119, .7); animation: pg-go 2.4s cubic-bezier(.15, .7, .2, 1) forwards; }
.pgbar.done { animation: none; transform: scaleX(1); opacity: 0; transition: transform .25s ease, opacity .5s .25s ease; }
@keyframes pg-go { to { transform: scaleX(.82); } }

/* قیمتِ زنده: تا داده بیاید اسکلتِ درخشان */
.ticker.loading { display: flex; }
.ticker.loading .v { color: transparent; border-radius: 8px; min-width: 120px; display: inline-block;
  background: linear-gradient(100deg, color-mix(in srgb, var(--mute) 14%, transparent) 30%, color-mix(in srgb, var(--acc) 38%, transparent) 50%, color-mix(in srgb, var(--mute) 14%, transparent) 70%) 0 0 / 220% 100%; animation: tk-shimmer 1.3s linear infinite; }
.ticker.loading .dot { animation: sc-pulse 1.2s ease-in-out infinite; background: var(--acc); }
@keyframes tk-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) {
  .ph *, .ph::after, .pgbar, .ticker.loading .v, .ticker.loading .dot { animation: none !important; }
  .phone img:not(.ph-logo) { transition-duration: .01s; }
}

/* ======================================================================
   نسخهٔ گرافیکی: کارت‌ها، مسیرِ مرحله‌ای، کادرِ نکته، شمارهٔ بخش، تصویرسازی‌ها
   ====================================================================== */
svg.i { display: block; }

/* ---------- کارت‌ها ---------- */
.card { position: relative; overflow: hidden; background: linear-gradient(165deg, var(--card) 0%, var(--card2) 100%); border: 1px solid var(--line); border-radius: 22px; padding: 26px 24px 24px;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s; }
.card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--acc), var(--acc2), transparent); transform: scaleX(.3); opacity: 0; transition: transform .45s, opacity .35s; }
.card:hover { transform: translateY(-7px); border-color: color-mix(in srgb, var(--acc) 50%, var(--line)); box-shadow: 0 24px 50px rgba(0, 0, 0, .22), 0 0 0 4px color-mix(in srgb, var(--acc) 10%, transparent); }
.card:hover::before { opacity: 1; transform: none; }
.card .ic { position: relative; width: 58px; height: 58px; border-radius: 18px; margin-bottom: 16px; display: grid; place-items: center; font-size: 26px; color: var(--acc);
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--acc) 34%, var(--card)), color-mix(in srgb, var(--acc) 12%, var(--card)));
  border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); box-shadow: 0 8px 22px color-mix(in srgb, var(--acc) 20%, transparent), inset 0 1px 0 rgba(255, 255, 255, .18); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.card .ic::after { content: ""; position: absolute; inset: -6px; border-radius: 22px; border: 1.5px solid color-mix(in srgb, var(--acc) 45%, transparent); opacity: 0; transform: scale(.85); }
.card:hover .ic { transform: rotate(-6deg) scale(1.1); }
.card:hover .ic::after { animation: ic-ring 1.3s ease-out infinite; }
.card .ic.num { font-weight: 800; font-size: 24px; color: var(--accfg); background: linear-gradient(145deg, var(--acc2), var(--acc)); border: 0; }
.card .wm { position: absolute; inset-inline-end: -18px; bottom: -22px; color: var(--acc); opacity: .07; pointer-events: none; transform: rotate(-12deg); transition: opacity .4s, transform .6s; }
.card:hover .wm { opacity: .13; transform: rotate(-4deg) scale(1.08); }
.card h3 { margin: 0 0 6px; font-size: 17.5px; }
.card p { position: relative; }
@keyframes ic-ring { 0% { opacity: .9; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.35); } }

/* ---------- ظاهر شدنِ آرام هنگامِ اسکرول ---------- */
.js .rv:not(.in) { opacity: 0; transform: translateY(26px) scale(.98); }
.rv { transition: opacity .7s ease, transform .8s cubic-bezier(.2, .8, .2, 1), border-color .35s, box-shadow .35s; }
.rv.in:hover { transition-duration: .35s; }

/* ---------- مسیرِ مرحله‌ای ---------- */
.journey { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; margin: 22px 0 28px; }
.jn { position: relative; text-align: center; padding: 0 4px; }
.jn-ic { position: relative; z-index: 1; width: 74px; height: 74px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; color: var(--acc);
  background: radial-gradient(circle at 30% 22%, color-mix(in srgb, var(--acc) 34%, var(--card)), var(--card) 75%); border: 2px solid color-mix(in srgb, var(--acc) 55%, transparent);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--acc) 22%, transparent); }
.jn-ic::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--acc) 50%, transparent); opacity: 0; }
.journey.in .jn-ic::after { animation: ic-ring 2.8s ease-out infinite; animation-delay: calc(var(--i) * .5s + 1s); }
.jn-n { position: absolute; top: -6px; inset-inline-end: -8px; min-width: 27px; height: 27px; padding: 0 7px; border-radius: 14px; background: linear-gradient(145deg, var(--acc2), var(--acc)); color: var(--accfg); font-size: 12.5px; display: grid; place-items: center; font-weight: 800; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); }
.jn h4 { margin: 0 0 4px; font-size: 16px; }
.jn p { margin: 0; color: var(--mute); font-size: 13.5px; line-height: 1.85; }
.jn:not(:last-child)::after { content: ""; position: absolute; top: 36px; inset-inline-start: calc(50% + 46px); width: calc(100% + 18px - 92px); height: 3px; border-radius: 2px; opacity: .7;
  background: repeating-linear-gradient(90deg, var(--acc) 0 8px, transparent 8px 16px); background-size: 16px 3px; }
.journey.in .jn:not(:last-child)::after { animation: jn-flow 1.1s linear infinite; }
@keyframes jn-flow { to { background-position: -16px 0; } }
.js .journey:not(.in) .jn { opacity: 0; transform: translateY(24px) scale(.94); }
.jn { transition: opacity .7s ease, transform .8s cubic-bezier(.2, .9, .3, 1.2); transition-delay: calc(var(--i) * .16s); }
/* نسخهٔ کارتی (صفحهٔ اصلی) */
.journey.cards { gap: 22px; }
.journey.cards .jn { background: linear-gradient(165deg, var(--card), var(--card2)); border: 1px solid var(--line); border-radius: 24px; padding: 30px 18px 24px; box-shadow: 0 10px 30px rgba(0, 0, 0, .08); }
.journey.cards .jn:hover { transform: translateY(-7px); border-color: color-mix(in srgb, var(--acc) 50%, var(--line)); box-shadow: 0 24px 50px rgba(0, 0, 0, .2); transition-delay: 0s; transition-duration: .35s; }
.journey.cards .jn:not(:last-child)::after { top: 66px; inset-inline-start: calc(50% + 46px); width: calc(100% + 22px - 92px); z-index: 2; }
.journey.cards .jn::before { content: ""; position: absolute; inset: 0; border-radius: 24px; background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 70%); pointer-events: none; }
.journey.cards .jn h4 { font-size: 18px; }
/* نسخهٔ جدولِ زمانی (ساعت به‌جایِ شماره) */
.journey.tl { grid-template-columns: repeat(3, 1fr); }
.journey.tl .jn-n { inset-inline-end: auto; inset-inline-start: 50%; top: auto; bottom: -13px; transform: translateX(50%); }
[dir="rtl"] .journey.tl .jn-n { transform: translateX(50%); }
.journey.tl .jn-ic { margin-bottom: 26px; }
.journey.tl .jn:nth-child(1) .jn-ic { color: var(--info); border-color: color-mix(in srgb, var(--info) 55%, transparent); }
.journey.tl .jn:nth-child(3) .jn-ic { color: var(--err); border-color: color-mix(in srgb, var(--err) 55%, transparent); }
@media (max-width: 700px) {
  .journey { grid-template-columns: 1fr 1fr; row-gap: 26px; } .jn:not(:last-child)::after { display: none; } .journey.tl { grid-template-columns: 1fr; }
}

/* ---------- کادرِ نکته ---------- */
.co { display: flex; gap: 14px; align-items: flex-start; margin: 18px 0 22px; padding: 16px 18px; border-radius: 18px; background: color-mix(in srgb, var(--info) 8%, var(--card)); border: 1px solid color-mix(in srgb, var(--info) 30%, var(--line)); border-inline-start: 5px solid var(--info); font-size: 14.5px; }
.co.warn { background: color-mix(in srgb, var(--acc) 10%, var(--card)); border-color: color-mix(in srgb, var(--acc) 45%, var(--line)); border-inline-start-color: var(--acc); }
.co.risk { background: color-mix(in srgb, var(--err) 9%, var(--card)); border-color: color-mix(in srgb, var(--err) 45%, var(--line)); border-inline-start-color: var(--err); }
.co-ic { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--info) 70%, #fff), var(--info)); box-shadow: 0 8px 18px color-mix(in srgb, var(--info) 35%, transparent); }
.co.warn .co-ic { background: linear-gradient(145deg, var(--acc2), var(--acc)); box-shadow: 0 8px 18px color-mix(in srgb, var(--acc) 35%, transparent); }
.co.risk .co-ic { background: linear-gradient(145deg, #f87171, var(--err)); box-shadow: 0 8px 18px color-mix(in srgb, var(--err) 35%, transparent); }
.co-b b:first-child { display: block; margin-bottom: 3px; font-size: 15.5px; }

/* ---------- سرتیترِ بخش‌هایِ آموزش ---------- */
.prose h2.sh { display: flex; align-items: center; gap: 14px; font-size: 24px; margin: 52px 0 18px; padding: 0 0 14px; border-bottom: 1px solid var(--line); position: relative; }
.prose h2.sh::after { content: ""; position: absolute; inset-inline-start: 0; bottom: -1px; width: 90px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--acc), var(--acc2)); }
.sh-n { flex: none; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font-weight: 800; font-size: 20px; color: var(--accfg); background: linear-gradient(145deg, var(--acc2), var(--acc)); box-shadow: 0 8px 20px color-mix(in srgb, var(--acc) 35%, transparent); }
.sh-t { flex: 1; }
.sh-ic { flex: none; color: var(--acc); opacity: .55; }

/* ---------- کارت‌هایِ توضیح (h3 + متن) ---------- */
.tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 16px 0 22px; }
.tile { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 20px; background: linear-gradient(165deg, var(--card), var(--card2)); border: 1px solid var(--line); transition: transform .3s, box-shadow .3s, border-color .3s; }
.tile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--acc) 45%, var(--line)); box-shadow: 0 16px 34px rgba(0, 0, 0, .16); }
.tile-ic { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent); }
.tile h3 { margin: 0 0 4px; font-size: 16.5px; } .tile p { margin: 0; font-size: 14px; color: var(--mute); opacity: 1; }

/* ---------- فهرست‌هایِ مرحله‌ای و نشان‌دار ---------- */
.prose ol, .os ol { list-style: none; counter-reset: o; padding: 0; margin: 0 0 18px; }
.prose ol > li, .os ol > li { counter-increment: o; position: relative; padding: 4px 56px 26px 0; min-height: 44px; }
.prose ol > li::before, .os ol > li::before { content: counter(o, persian); position: absolute; inset-inline-start: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px; color: var(--accfg); background: linear-gradient(145deg, var(--acc2), var(--acc)); box-shadow: 0 6px 14px color-mix(in srgb, var(--acc) 30%, transparent); }
.prose ol > li:not(:last-child)::after, .os ol > li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 18px; top: 42px; bottom: 2px; width: 2px; background: linear-gradient(var(--acc), transparent); opacity: .5; }
.prose ul { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.prose ul > li { position: relative; padding: 10px 46px 10px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); margin: 0; }
.prose ul > li::before { content: ""; position: absolute; inset-inline-start: 14px; top: 13px; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--acc) 22%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat; }
.prose ul > li { padding-inline-start: 46px; padding-inline-end: 14px; }

/* ---------- تصویرسازی‌ها ---------- */
.vis { margin: 20px 0 26px; padding: 22px 18px 16px; border-radius: 24px; background: linear-gradient(165deg, var(--card), var(--card2)); border: 1px solid var(--line); box-shadow: 0 12px 34px rgba(0, 0, 0, .1); text-align: center; }
.vis-cap { margin: 8px 0 0; color: var(--mute); font-size: 13.5px; }
.vis svg { direction: ltr; max-width: 560px; width: 100%; height: auto; margin: 0 auto; overflow: visible; }
.vis text { font-family: inherit; font-size: 12.5px; font-weight: 700; fill: var(--mute); }
/* احرازِ هویت */
.vis.kyc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.kyc > div { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.kyc small { color: var(--mute); font-size: 12.5px; }
.kyc-tag { font-size: 12.5px; font-weight: 800; color: var(--accfg); background: var(--acc); padding: 1px 12px; border-radius: 99px; }
.kyc-bub { position: relative; width: min(190px, 100%); padding: 16px 14px; border-radius: 18px; background: color-mix(in srgb, var(--acc) 10%, var(--card)); border: 1.5px solid color-mix(in srgb, var(--acc) 45%, transparent); display: grid; gap: 8px; margin-top: 26px; }
.kyc-bub::after { content: ""; position: absolute; bottom: -8px; inset-inline-end: 26px; width: 14px; height: 14px; background: inherit; border: inherit; border-top: 0; border-inline-start: 0; transform: rotate(45deg); }
.kyc-bub i { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 35%, transparent) 30%, var(--acc) 50%, color-mix(in srgb, var(--acc) 35%, transparent) 70%) 0 0 / 250% 100%; }
.kyc-bub i:nth-child(1) { width: 92%; } .kyc-bub i:nth-child(2) { width: 70%; } .kyc-bub i:nth-child(3) { width: 84%; } .kyc-bub i:nth-child(4) { width: 46%; }
.kyc-face svg { max-width: 150px; }
.kf-ring { fill: none; stroke: color-mix(in srgb, var(--acc) 45%, transparent); stroke-width: 2; stroke-dasharray: 5 7; }
.kf-skin { fill: color-mix(in srgb, var(--acc) 20%, var(--card)); stroke: var(--acc); stroke-width: 2.5; }
.kf-hair { fill: color-mix(in srgb, var(--acc) 55%, #3b2a10); }
.kf-feat circle { fill: var(--fg); } .kf-feat path { stroke: var(--fg); stroke-width: 2.4; stroke-linecap: round; }
.kf-arrows { display: flex; gap: 14px; direction: ltr; }
.kf-a { font-style: normal; font-size: 20px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--acc); opacity: .35; }
.kyc-badge { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 30% 22%, #4ade80, var(--ok)); box-shadow: 0 12px 30px color-mix(in srgb, var(--ok) 40%, transparent); margin-top: 18px; }
.vis.kyc.in .kf-feat { animation: kf-turn 8s ease-in-out infinite; }
.vis.kyc.in .kf-a:nth-child(1) { animation: kf-a1 8s infinite; } .vis.kyc.in .kf-a:nth-child(2) { animation: kf-a2 8s infinite; } .vis.kyc.in .kf-a:nth-child(3) { animation: kf-a3 8s infinite; }
.vis.kyc.in .kyc-bub i { animation: tk-shimmer 2.2s linear infinite; } .vis.kyc.in .kyc-bub i:nth-child(2) { animation-delay: -.5s; } .vis.kyc.in .kyc-bub i:nth-child(3) { animation-delay: -1s; } .vis.kyc.in .kyc-bub i:nth-child(4) { animation-delay: -1.5s; }
.vis.kyc.in .kyc-badge { animation: sc-pulse 2.4s ease-in-out infinite; }
@keyframes kf-turn { 0%, 10% { transform: translate(0, 0); } 18%, 34% { transform: translate(13px, 0); } 42%, 58% { transform: translate(-13px, 0); } 66%, 82% { transform: translate(0, -10px); } 92%, 100% { transform: translate(0, 0); } }
@keyframes kf-a1 { 0%, 12% { opacity: .35; transform: none; } 18%, 34% { opacity: 1; transform: scale(1.18); } 40%, 100% { opacity: .35; transform: none; } }
@keyframes kf-a2 { 0%, 38% { opacity: .35; transform: none; } 42%, 58% { opacity: 1; transform: scale(1.18); } 64%, 100% { opacity: .35; transform: none; } }
@keyframes kf-a3 { 0%, 62% { opacity: .35; transform: none; } 66%, 82% { opacity: 1; transform: scale(1.18); } 88%, 100% { opacity: .35; transform: none; } }
@media (max-width: 700px) { .vis.kyc { grid-template-columns: 1fr; } }
/* هدف و استاپ */
.z-up { fill: color-mix(in srgb, var(--ok) 13%, transparent); } .z-dn { fill: color-mix(in srgb, var(--err) 12%, transparent); }
.ln-t, .ln-e, .ln-s { stroke-width: 2; stroke-dasharray: 7 6; } .ln-t { stroke: var(--ok); } .ln-e { stroke: var(--acc); } .ln-s { stroke: var(--err); }
.tx-t { fill: var(--ok) !important; } .tx-e { fill: var(--acc) !important; } .tx-s { fill: var(--err) !important; }
.pr-path { fill: none; stroke: var(--fg); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.pr-dot { fill: var(--acc); stroke: #fff; stroke-width: 2.5; offset-distance: 100%; offset-rotate: 0deg; }
.vis.tpsl.in .pr-path { animation: pr-draw 7s ease-in-out infinite; } .vis.tpsl.in .pr-dot { animation: pr-move 7s ease-in-out infinite; }
@keyframes pr-draw { 0% { stroke-dashoffset: 100; } 62% { stroke-dashoffset: 0; } 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes pr-move { 0% { offset-distance: 0%; opacity: 1; } 62% { offset-distance: 100%; opacity: 1; } 92% { offset-distance: 100%; opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
/* ATM */
.lg-entry { stroke: var(--acc); stroke-width: 2; stroke-dasharray: 5 5; } .lg-stop { fill: var(--err); opacity: .85; } .lg-tp { fill: var(--ok); opacity: .9; } .lg-end { fill: var(--ok); stroke: var(--card); stroke-width: 3; }
.lg-name { fill: var(--fg) !important; } .lg-lab.red { fill: var(--err) !important; } .lg-lab.grn { fill: var(--ok) !important; } .lg-lab { fill: var(--acc) !important; }
.lg-tp, .lg-stop { transform-box: fill-box; } .lg-tp { transform-origin: left center; } .lg-stop { transform-origin: right center; }
.rf-badge rect { fill: var(--acc); } .rf-badge text { fill: var(--accfg) !important; } .rf-badge { opacity: 0; }
.vis.atm.in .lg-tp { animation: lg-grow 9s cubic-bezier(.3, .7, .3, 1) infinite; } .vis.atm.in .l2 .lg-tp { animation-delay: .35s; } .vis.atm.in .l3 .lg-tp { animation-delay: .7s; }
.vis.atm.in .lg-end { animation: lg-end 9s infinite; } .vis.atm.in .l2 .lg-end { animation-delay: .35s; } .vis.atm.in .l3 .lg-end { animation-delay: .7s; }
.vis.atm.in .lg-stop { animation: lg-stop 9s ease-in-out infinite; } .vis.atm.in .l1 .lg-stop { animation: none; }
.vis.atm.in .rf-badge { animation: rf-show 9s ease-in-out infinite; }
@keyframes lg-grow { 0% { transform: scaleX(0); } 24%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes lg-end { 0%, 20% { opacity: 0; } 28%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lg-stop { 0%, 55% { transform: scaleX(1); } 66%, 90% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
@keyframes rf-show { 0%, 55% { opacity: 0; transform: translateY(6px); } 66%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .jn:not(:last-child)::after, .jn-ic::after, .card .ic::after, .vis *, .kyc-badge { animation: none !important; }
  .js .rv:not(.in), .js .journey:not(.in) .jn { opacity: 1; transform: none; }
  .rf-badge { opacity: 1; }
}
.doc > * { min-width: 0; }
.prose { overflow-wrap: anywhere; }

/* ======================================================================
   بدونِ قابِ مستطیلی: نور، مدار و حرکت به‌جایِ کادر
   (فقط کارت‌هایِ آیکون‌دار؛ کارت‌هایِ نصب/تماس که محتوایِ فهرستی دارند قاب می‌مانند)
   ====================================================================== */
section { position: relative; overflow: hidden; }
section > .wrap, .prose { position: relative; z-index: 1; }
section:not(.hero)::before { content: ""; position: absolute; inset: -25% -10%; z-index: 0; pointer-events: none;
  background: radial-gradient(38% 34% at 18% 32%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 72%), radial-gradient(34% 30% at 84% 68%, color-mix(in srgb, var(--info) 9%, transparent), transparent 72%);
  animation: aurora 16s ease-in-out infinite alternate; }
section.alt::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--acc) 70%, transparent) 0 1.6px, transparent 2.4px), radial-gradient(circle, color-mix(in srgb, var(--acc2) 55%, transparent) 0 1.2px, transparent 2px);
  background-size: 230px 280px, 170px 210px; background-position: 20px 40px, 110px 150px; animation: dust 38s linear infinite; }
@keyframes aurora { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.12); } }
@keyframes dust { to { background-position: 20px -240px, 110px -60px; } }

.card:has(> .ic) { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 8px 10px 6px; text-align: center; overflow: visible; }
.card:has(> .ic)::before, .card:has(> .ic) .wm { display: none; }
.card:has(> .ic):hover { transform: none; box-shadow: none; }
.card:has(> .ic) .ic { width: 88px; height: 88px; margin: 6px auto 24px; border-radius: 50%; animation: ic-float 5.5s ease-in-out infinite;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--acc) 28%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 7px color-mix(in srgb, var(--acc) 7%, transparent); }
.card:has(> .ic) .ic svg { width: 36px; height: 36px; }
.card:has(> .ic) .ic.num { font-size: 32px; }
.card:has(> .ic) .ic::before { content: ""; position: absolute; inset: -15px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--acc) 42%, transparent); animation: spin 22s linear infinite; }
.card:has(> .ic) .ic::after { opacity: 1; inset: -15px; transform: none; border: 0; border-radius: 50%; background: radial-gradient(circle at 50% 0, var(--acc) 0 4.5px, transparent 5.5px); filter: drop-shadow(0 0 5px var(--acc)); animation: spin 7s linear infinite; }
.card:has(> .ic):hover .ic { transform: scale(1.1); animation-play-state: paused; }
.card:has(> .ic):hover .ic::after { animation: spin 2.2s linear infinite; }
.card:has(> .ic) h3 { position: relative; display: inline-block; font-size: 18.5px; margin-bottom: 8px; }
.card:has(> .ic) h3::after { content: ""; display: block; height: 2px; margin: 6px auto 0; width: 34px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--acc), transparent); transition: width .45s; }
.card:has(> .ic):hover h3::after { width: 100%; }
.grid > .card:nth-child(2n) .ic { animation-delay: -1.8s; } .grid > .card:nth-child(3n) .ic { animation-delay: -3.4s; }
@keyframes ic-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* مراحلِ صفحهٔ اصلی: دایره‌هایِ نورانی روی یک مسیرِ زنده */
.journey.cards .jn { background: none; border: 0; box-shadow: none; padding: 4px 6px; border-radius: 0; }
.journey.cards .jn::before { display: none; }
.journey.cards .jn:hover { transform: none; box-shadow: none; }
.journey.cards .jn-ic { width: 96px; height: 96px; margin-bottom: 18px; box-shadow: 0 16px 38px color-mix(in srgb, var(--acc) 30%, transparent), 0 0 0 8px color-mix(in srgb, var(--acc) 7%, transparent); animation: ic-float 5.5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.3s); }
.journey.cards .jn-ic svg { width: 38px; height: 38px; }
.journey.cards .jn-ic::after { opacity: 1; inset: -16px; border: 0; background: radial-gradient(circle at 50% 0, var(--acc) 0 4.5px, transparent 5.5px); filter: drop-shadow(0 0 5px var(--acc)); animation: spin 8s linear infinite; animation-delay: calc(var(--i) * -2s); }
.journey.cards .jn-ic::before { content: ""; position: absolute; inset: -16px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--acc) 38%, transparent); }
.journey.cards .jn-n { width: 32px; height: 32px; font-size: 14px; top: -2px; inset-inline-end: -4px; }
.journey.cards .jn:not(:last-child)::after { top: 47px; height: 4px; opacity: .85; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--acc) 60%, transparent)); }
.journey.cards .jn h4 { font-size: 19px; }

/* بخش‌هایِ آموزش: کارت/کادر/فهرست بدونِ قابِ سنگین */
.tile { background: none; border: 0; box-shadow: none; padding: 6px 4px; border-radius: 0; }
.tile:hover { transform: none; box-shadow: none; }
.tile-ic { width: 54px; height: 54px; border-radius: 50%; position: relative; animation: ic-float 5.5s ease-in-out infinite; box-shadow: 0 8px 20px color-mix(in srgb, var(--acc) 22%, transparent); }
.tile-ic::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(circle at 50% 0, var(--acc) 0 3px, transparent 4px); animation: spin 7s linear infinite; }
.tile-ic::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--acc) 40%, transparent); }
.tiles .tile:nth-child(2) .tile-ic { animation-delay: -1.6s; } .tiles .tile:nth-child(3) .tile-ic { animation-delay: -3.2s; }
.co { border: 0; border-radius: 0 22px 22px 0; background: linear-gradient(270deg, color-mix(in srgb, var(--info) 14%, transparent), transparent 85%); }
.co.warn { background: linear-gradient(270deg, color-mix(in srgb, var(--acc) 16%, transparent), transparent 85%); }
.co.risk { background: linear-gradient(270deg, color-mix(in srgb, var(--err) 14%, transparent), transparent 85%); }
.co-ic { border-radius: 50%; animation: sc-pulse 3s ease-in-out infinite; }
.vis { background: none; border: 0; box-shadow: none; position: relative; }
.vis::before { content: ""; position: absolute; inset: 4% 8%; border-radius: 50%; z-index: -1; filter: blur(34px); background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 17%, transparent), transparent); animation: sc-pulse 5s ease-in-out infinite; }
.prose ul > li { background: none; border: 0; padding-block: 6px; }
.prose ul > li::before { top: 9px; }
@media (prefers-reduced-motion: reduce) {
  section:not(.hero)::before, section.alt::after, .card:has(> .ic) .ic, .card:has(> .ic) .ic::before, .card:has(> .ic) .ic::after, .journey.cards .jn-ic, .journey.cards .jn-ic::after, .tile-ic, .tile-ic::after, .co-ic, .vis::before { animation: none !important; }
}

/* ======================================================================
   الگوهایِ چیدمانِ متفاوت: hub / bignum / rail / rows / pair / spot
   ====================================================================== */
.orbit-ic, .hub-ic, .rl-node, .pr-ic, .sp-big { position: relative; display: grid; place-items: center; color: var(--acc); border-radius: 50%;
  background: radial-gradient(circle at 30% 22%, color-mix(in srgb, var(--acc) 34%, var(--card)), var(--card) 78%); border: 2px solid color-mix(in srgb, var(--acc) 55%, transparent);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--acc) 24%, transparent), 0 0 0 7px color-mix(in srgb, var(--acc) 6%, transparent); }
.hub-ic::before, .rl-node::before, .pr-ic::before, .sp-big::before { content: ""; position: absolute; inset: -13px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--acc) 40%, transparent); animation: spin 24s linear infinite; }
.hub-ic::after, .rl-node::after, .pr-ic::after, .sp-big i { content: ""; position: absolute; inset: -13px; border-radius: 50%; background: radial-gradient(circle at 50% 0, var(--acc) 0 4px, transparent 5px); filter: drop-shadow(0 0 5px var(--acc)); animation: spin 7s linear infinite; }
.sp-big i { display: block; }

/* --- hub: نشانِ برند در مرکز --- */
.hub { display: grid; grid-template-columns: 1fr 236px 1fr; align-items: center; margin: 8px 0 4px; }
.hub-col { display: grid; gap: 38px; }
.hub-i { position: relative; display: flex; align-items: center; gap: 20px; }
.hub-ic { flex: none; width: 70px; height: 70px; animation: ic-float 5.5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.7s); }
.hub-t h3 { margin: 0 0 4px; font-size: 17.5px; } .hub-t p { margin: 0; color: var(--mute); font-size: 14px; line-height: 1.85; }
.hub-col.r .hub-i::after { content: ""; position: absolute; left: -46px; top: 50%; width: 46px; height: 3px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--acc) 0 7px, transparent 7px 14px); animation: jn-flow 1s linear infinite; opacity: .75; }
.hub-col.l .hub-i::after { content: ""; position: absolute; right: -46px; top: 50%; width: 46px; height: 3px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--acc) 0 7px, transparent 7px 14px); animation: jn-flow 1s linear infinite reverse; opacity: .75; }
.hub-core { position: relative; width: 236px; height: 236px; display: grid; place-items: center; }
.hub-core img { position: relative; z-index: 2; width: 100px; height: 100px; filter: drop-shadow(0 0 18px rgba(229, 199, 119, .65)); animation: hub-logo 3.2s ease-in-out infinite; }
@keyframes hub-logo { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.hub-core i { position: absolute; border-radius: 50%; }
.hub-core .c1 { inset: 0; border: 1.5px dashed color-mix(in srgb, var(--acc) 45%, transparent); animation: spin 28s linear infinite; }
.hub-core .c2 { inset: 22px; background: conic-gradient(from 0deg, transparent 0 50%, var(--acc) 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: spin 4.5s linear infinite; }
.hub-core .c3 { inset: 44px; background: radial-gradient(circle, color-mix(in srgb, var(--acc) 30%, transparent), transparent 70%); animation: sc-pulse 3.4s ease-in-out infinite; }
.js .hub:not(.in) .hub-i, .js .hub:not(.in) .hub-core { opacity: 0; transform: translateY(24px) scale(.94); }
.hub-i, .hub-core { transition: opacity .8s ease, transform .9s cubic-bezier(.2, .9, .3, 1.15); }
.hub-i { transition-delay: calc(var(--i) * .14s + .2s); }
@media (max-width: 860px) {
  .hub { grid-template-columns: 1fr; gap: 26px; } .hub-core { order: -1; margin: 0 auto; width: 190px; height: 190px; } .hub-core img { width: 80px; height: 80px; } .hub-col { gap: 30px; }
  .hub-i::after { display: none !important; }
}

/* --- bignum: رقمِ غول‌پیکرِ درخشان --- */
.bn { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 34px; margin-top: 6px; }
.bn-i { position: relative; padding: 6px 4px 18px; }
.bn-n { display: block; font-size: 168px; line-height: 1.35; font-weight: 900; color: transparent; margin-bottom: -78px; margin-top: -24px; user-select: none;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--acc) 62%, transparent);
  background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--acc2) 70%, transparent) 50%, transparent 62%) 0 0 / 260% 100%; -webkit-background-clip: text; background-clip: text; animation: bn-sheen 4.6s linear infinite; }
.bn-i:nth-child(2) .bn-n { animation-delay: -1.5s; } .bn-i:nth-child(3) .bn-n { animation-delay: -3s; }
.bn-i h3 { position: relative; margin: 0 0 8px; font-size: 21px; } .bn-i p { position: relative; margin: 0; color: var(--mute); font-size: 14.5px; }
.bn-u { display: block; width: 56px; height: 3px; margin-top: 18px; border-radius: 3px; background: linear-gradient(90deg, var(--acc), transparent); transition: width .6s; }
.bn-i:hover .bn-u { width: 130px; }
@keyframes bn-sheen { from { background-position: 140% 0; } to { background-position: -140% 0; } }
.js .bn:not(.in) .bn-i { opacity: 0; transform: translateY(34px); } .bn-i { transition: opacity .8s ease, transform .9s cubic-bezier(.2, .9, .3, 1.1); transition-delay: calc(var(--i) * .18s); }

/* --- rail: خطِ زمانیِ زیگزاگ --- */
.rail { position: relative; max-width: 880px; margin: 0 auto; padding: 4px 0; }
.rl-line { position: absolute; inset-block: 0; left: 50%; width: 3px; transform: translateX(-50%); border-radius: 2px; opacity: .55; background: linear-gradient(transparent, var(--acc) 10%, var(--acc) 90%, transparent); }
.rl-line::after { content: ""; position: absolute; left: 50%; top: 0; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: var(--acc2); box-shadow: 0 0 16px 4px var(--acc); animation: rl-run 5.5s ease-in-out infinite alternate; }
@keyframes rl-run { from { top: 0; } to { top: calc(100% - 13px); } }
.rl-i { position: relative; display: grid; grid-template-columns: 1fr 90px 1fr; align-items: center; margin: 38px 0; }
.rl-node { grid-column: 2; grid-row: 1; width: 70px; height: 70px; margin: auto; z-index: 1; }
.rl-t { grid-row: 1; }
.rl-i:nth-of-type(odd) .rl-t { grid-column: 1; padding-inline-end: 10px; } .rl-i:nth-of-type(even) .rl-t { grid-column: 3; padding-inline-start: 10px; }
.rl-t h3 { margin: 0 0 4px; font-size: 18.5px; } .rl-t p { margin: 0; color: var(--mute); font-size: 14.5px; }
.js .rail:not(.in) .rl-i { opacity: 0; transform: translateY(28px); } .rl-i { transition: opacity .8s ease, transform .9s cubic-bezier(.2, .9, .3, 1.1); transition-delay: calc(var(--i) * .2s); }
@media (max-width: 700px) {
  .rl-line { left: auto; right: 35px; } .rl-i { grid-template-columns: 70px 1fr; gap: 18px; }
  .rl-node { grid-column: 1; } .rl-i:nth-of-type(n) .rl-t { grid-column: 2; padding: 0; }
}

/* --- rows: ردیف‌هایِ عریض با لوزیِ آیکون --- */
.rows { max-width: 920px; margin: 0 auto; }
.rw { position: relative; display: flex; align-items: center; gap: 26px; padding: 24px 8px; transition: transform .4s cubic-bezier(.2, .9, .3, 1.2); }
.rw:hover { transform: translateX(-10px); }
.rw-ic { flex: none; width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center; color: var(--accfg); transform: rotate(45deg);
  background: linear-gradient(145deg, var(--acc2), var(--acc)); box-shadow: 0 12px 26px color-mix(in srgb, var(--acc) 32%, transparent); transition: transform .5s cubic-bezier(.3, 1.5, .5, 1); }
.rw-ic svg { transform: rotate(-45deg); } .rw:hover .rw-ic { transform: rotate(135deg) scale(1.08); } .rw:hover .rw-ic svg { transform: rotate(-135deg); }
.rw-t h3 { margin: 0 0 4px; font-size: 20px; } .rw-t p { margin: 0; color: var(--mute); font-size: 14.5px; max-width: 640px; }
.rw-l { position: absolute; inset-inline: 0; bottom: 0; height: 1.5px; background: linear-gradient(90deg, transparent, var(--acc), transparent); transform: scaleX(0); transform-origin: right; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.rows.in .rw-l { transform: scaleX(1); transition-delay: calc(var(--i) * .22s); }
.js .rows:not(.in) .rw { opacity: 0; transform: translateX(34px); } .rw { transition-property: opacity, transform; transition-duration: .8s; transition-delay: calc(var(--i) * .16s); }

/* --- pair: دو چیزِ روبه‌رو --- */
.pr { display: grid; grid-template-columns: 1fr 96px 1fr; gap: 6px; max-width: 920px; margin: 0 auto; align-items: stretch; }
.pr-i { text-align: center; padding: 8px 16px; }
.pr-ic { width: 112px; height: 112px; margin: 6px auto 24px; animation: ic-float 5.5s ease-in-out infinite; }
.pr-i:last-child .pr-ic { color: var(--info); border-color: color-mix(in srgb, var(--info) 55%, transparent); box-shadow: 0 12px 30px color-mix(in srgb, var(--info) 26%, transparent), 0 0 0 7px color-mix(in srgb, var(--info) 6%, transparent); animation-delay: -2.7s; }
.pr-i:last-child .pr-ic::before { border-color: color-mix(in srgb, var(--info) 42%, transparent); } .pr-i:last-child .pr-ic::after { background: radial-gradient(circle at 50% 0, var(--info) 0 4px, transparent 5px); filter: drop-shadow(0 0 5px var(--info)); }
.pr-i h3 { margin: 0 0 8px; font-size: 21px; } .pr-i p { margin: 0 auto; color: var(--mute); font-size: 14.5px; max-width: 360px; }
.pr-mid { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 0; }
.pr-mid i { flex: 1; width: 2px; min-height: 36px; background: linear-gradient(transparent, var(--acc), transparent); }
.pr-mid span { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--acc); border: 1.5px solid color-mix(in srgb, var(--acc) 55%, transparent); background: var(--card); animation: sc-pulse 3s ease-in-out infinite; }
.js .pr:not(.in) .pr-i:first-child { opacity: 0; transform: translateX(60px); } .js .pr:not(.in) .pr-i:last-child { opacity: 0; transform: translateX(-60px); } .pr-i { transition: opacity .9s ease, transform 1s cubic-bezier(.2, .9, .3, 1.1); }
@media (max-width: 760px) { .pr { grid-template-columns: 1fr; } .pr-mid { flex-direction: row; } .pr-mid i { height: 2px; width: auto; min-height: 0; min-width: 40px; background: linear-gradient(90deg, transparent, var(--acc), transparent); } }

/* --- spot: نمایِ تعاملی --- */
.spot { display: grid; grid-template-columns: 290px 1fr; gap: 38px; align-items: center; max-width: 980px; margin: 0 auto; }
.sp-tabs { display: grid; gap: 6px; }
.sp-tab { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 14px 16px; border: 0; background: none; font: inherit; font-weight: 700; color: var(--mute); text-align: start; cursor: pointer; border-radius: 16px; transition: color .3s, background .3s, transform .3s; }
.sp-tab:hover { color: var(--fg); transform: translateX(-4px); }
.sp-tab.on { color: var(--fg); background: linear-gradient(270deg, color-mix(in srgb, var(--acc) 16%, transparent), transparent 92%); }
.sp-ti { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent); }
.sp-tab i { position: absolute; inset-inline: 14px; bottom: 5px; height: 2.5px; border-radius: 2px; background: linear-gradient(90deg, var(--acc2), var(--acc)); transform: scaleX(0); transform-origin: right; }
.sp-tab.on i { animation: sp-prog 5.6s linear forwards; } .spot.hold .sp-tab.on i { animation: none; transform: scaleX(1); }
@keyframes sp-prog { to { transform: scaleX(1); } }
.sp-view { position: relative; min-height: 270px; display: grid; align-items: center; }
.sp-p { text-align: center; } .sp-p:has(ol) { text-align: start; }
.js .sp-p:not(.on) { display: none; } .sp-p.on { animation: sc-rise .7s cubic-bezier(.2, .85, .2, 1) both; }
.sp-big { width: 138px; height: 138px; margin: 8px auto 26px; animation: ic-float 5.5s ease-in-out infinite; } .sp-big svg { width: 58px; height: 58px; }
.sp-p h3 { margin: 0 0 8px; font-size: 25px; } .sp-p p { margin: 0 auto; color: var(--mute); max-width: 480px; }
.sp-p ol { list-style: none; counter-reset: o; padding: 0; margin: 0; }
.sp-p ol > li { counter-increment: o; position: relative; padding: 4px 56px 22px 0; min-height: 44px; }
.sp-p ol > li::before { content: counter(o, persian); position: absolute; inset-inline-start: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px; color: var(--accfg); background: linear-gradient(145deg, var(--acc2), var(--acc)); }
.sp-p ol > li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 18px; top: 42px; bottom: 2px; width: 2px; background: linear-gradient(var(--acc), transparent); opacity: .5; }
.sp-p:has(ol) .sp-big { margin-inline: 0; width: 96px; height: 96px; } .sp-p:has(ol) .sp-big svg { width: 40px; height: 40px; }
@media (max-width: 820px) { .spot { grid-template-columns: 1fr; gap: 18px; } .sp-tabs { display: flex; overflow-x: auto; gap: 4px; padding-bottom: 4px; } .sp-tab { flex: none; padding-inline: 12px; } .sp-tt { white-space: nowrap; } }
@media (prefers-reduced-motion: reduce) {
  .hub *, .rail *, .bn *, .pr *, .spot *, .rw-ic { animation: none !important; }
  .js .hub:not(.in) .hub-i, .js .hub:not(.in) .hub-core, .js .bn:not(.in) .bn-i, .js .rail:not(.in) .rl-i, .js .rows:not(.in) .rw, .js .pr:not(.in) .pr-i { opacity: 1; transform: none; }
  .rows .rw-l { transform: scaleX(1); } .sp-tab i { transform: scaleX(1); }
}