/* ۱۲۷ کیلوبایت CSS که تا ۱۴۰۵/۰۵/۳۰ درونخطی در entekhab.php بود.
چرا بیرون آمد و چرا دیگر خطر کهنگی ندارد — بالای خط در entekhab.php.
⚠️ این فایل دستی ویرایش نشود مگر آگاهانه: نسخه آدرسش از filemtime میآید،
پس هر ویرایشی خودبهخود کش را باطل میکند. */
/* ==========================================================================
انتخاب رشته v3 — استایل اختصاصی صفحه (فضای نام exr-)
قاعدهها: RTL فقط با خواص logical · هاور فقط داخل @media(hover:hover)
· متن سفید فقط روی سطح تیره · سکشنهای تزئیندار overflow:clip
· انیمیشن فقط روی transform/opacity · همهچیز زیر prefers-reduced-motion خاموش
========================================================================== */
.exr{overflow-x:clip}
.exr .wrap{position:relative;z-index:1}
.exr-sec{position:relative;padding-block:92px;overflow:clip}
.exr-alt{background:var(--paper-2)}
/* تیتر و کیکر سکشنها — مستقل از sec-head سراسری تا اسکریپت صفحه اصلی رویش reveal نگذارد */
.exr-head{text-align:center;max-width:700px;margin-inline:auto;margin-bottom:20px}
.exr-head h2{font-size:clamp(1.7rem,3.1vw,2.55rem);line-height:1.55;font-weight:900;color:var(--ink)}
.exr-head p{font-size:1.02rem;line-height:2.1;color:var(--muted);margin-top:12px}
/* کیکر — همان زبان بصری نسخه ۶ صفحه اصلی (.sec-kicker):
کپسول پسزمینهدار حذف شد؛ لوزی چرخان + متن گرادیانی + خط نفسکشنده زیرش. */
.exr-kick{position:relative;display:flex;width:fit-content;margin-inline:auto;align-items:center;gap:10px;
font-size:1.02rem;font-weight:800;letter-spacing:.15px;
background:none;border:0;box-shadow:none;border-radius:0;padding:0 0 11px;margin-bottom:22px;
background-image:linear-gradient(120deg,var(--teal-dark),var(--amber-dark) 140%);
-webkit-background-clip:text;background-clip:text;color:transparent}
.exr-kick::before{content:"";width:9px;height:9px;flex-shrink:0;border-radius:3px;
background:var(--grad-brand);transform:rotate(45deg);box-shadow:0 0 0 5px rgba(0,151,109,.14);
animation:exrKickSpin 3.4s ease-in-out infinite}
.exr-kick::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;border-radius:2px;
background:linear-gradient(90deg,transparent,var(--teal) 20%,var(--amber) 55%,var(--teal) 85%,transparent);
animation:exrKickLine 2.6s ease-in-out infinite}
@keyframes exrKickSpin{0%,100%{transform:rotate(45deg) scale(1)}50%{transform:rotate(225deg) scale(1.2)}}
/* پالس شفافیت، نه اسکرول background-position — قاعده کارایی همین پروژه */
@keyframes exrKickLine{0%,100%{opacity:.5}50%{opacity:1}}
/* در ستونهای چپچین (رادار و «چرا ما») کیکر نباید وسطچین شود */
.exr-radar-txt .exr-kick,.exr-about-txt .exr-kick{margin-inline:0}
/* ---------- ۱) هیرو ---------- */
/* ⚠️ پالت این هیرو عمداً با هیروی صفحه اصلی فرق دارد.
شکایت کاربر: «هیروش خیلی شبیه هیروی اول سایت است، آدم متوجه نمیشود صفحه
عوض شده.» صفحه اصلی سرمهای آبیـفیروزهای است؛ اینجا پایه بنفش نیلی
(indigo/plum) با تأکید فیروزهای است. برند حفظ میشود چون دکمهها و
تأکیدها همان فیروزهاند، ولی در نگاه اول «یک صفحه دیگر» است. */
/* ارتفاع هیرو فشردهتر شد (بود 82/66): روی نمایشگر ۱۰۸۰ با نوارهای مرورگر،
ردیف آمار زیر لبه صفحه میافتاد و کاربر فکر میکرد صفحه ناقص است. */
.exr-hero{position:relative;overflow:clip;padding:58px 0 44px;color:#fff;isolation:isolate;
background:
radial-gradient(1100px 700px at 86% -14%,rgba(139,127,240,.42),transparent 62%),
radial-gradient(900px 620px at 6% 108%,rgba(0,151,109,.32),transparent 62%),
radial-gradient(700px 500px at 50% 50%,rgba(242,184,75,.1),transparent 66%),
linear-gradient(158deg,#0A0620 0%,#1B1140 44%,#10254A 100%)}
/* نوار مسیر — سریعترین نشانه «اینجا یک صفحه داخلی است، نه صفحه اصلی» */
.exr-crumb{position:relative;z-index:2;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
margin-bottom:22px;font-size:.82rem;font-weight:700;color:#fff}
/* حاشیه منفی + padding: ناحیه لمس به ۴۴px میرسد بدون اینکه چیدمان تکان بخورد */
.exr-crumb a{color:#fff;transition:color .2s ease;
padding:11px 6px;margin:-11px -6px}
.exr-crumb svg{width:13px;height:13px;flex:none;opacity:.5}
.exr-crumb b{color:#C9BCFF;font-weight:800}
/* شبکه نقطهای ماسکدار — عمق بدون شلوغی */
.exr-hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.4px);
background-size:34px 34px;
-webkit-mask-image:radial-gradient(80% 75% at 50% 32%,#000 25%,transparent 100%);
mask-image:radial-gradient(80% 75% at 50% 32%,#000 25%,transparent 100%)}
/* آسمان پرستاره — چشمکزدن پلکانی، لایه پارالاکس */
.exr-stars{position:absolute;inset:0;z-index:-1;pointer-events:none}
.exr-stars circle{fill:#fff;animation:exrTw 4.2s ease-in-out infinite}
@keyframes exrTw{0%,100%{opacity:.16}50%{opacity:.85}}
/* شهابها — هر چند ثانیه یک عبور کوتاه */
.exr-shoot{position:absolute;top:12%;inset-inline-start:64%;width:130px;height:2px;z-index:-1;
border-radius:2px;pointer-events:none;opacity:0;transform:rotate(-24deg);
background:linear-gradient(90deg,transparent,rgba(160,225,255,.9));
animation:exrShoot 9s linear infinite}
.exr-shoot.s2{top:56%;inset-inline-start:12%;width:100px;animation-delay:4.6s;animation-duration:12s}
@keyframes exrShoot{
0%{opacity:0;translate:0 0}
2%{opacity:.95}
7%{opacity:0;translate:-210px 96px}
100%{opacity:0;translate:-210px 96px}}
/* شفقهای شناور — translate آزاد میماند تا پارالاکس موس رویش سوار شود */
.exr-aur{position:absolute;border-radius:50%;filter:blur(84px);mix-blend-mode:screen;
pointer-events:none;z-index:-1;animation:exrAur 17s ease-in-out infinite alternate}
.exr-aur.a1{width:660px;height:660px;top:-230px;inset-inline-start:-170px;
background:radial-gradient(circle,rgba(0,151,109,.5),transparent 62%)}
/* شفق بنفش — همان چیزی که این هیرو را از هیروی صفحه اصلی جدا میکند */
.exr-aur.a2{width:580px;height:580px;bottom:-260px;inset-inline-end:-150px;
background:radial-gradient(circle,rgba(139,127,240,.5),transparent 62%);animation-delay:-8s}
.exr-aur.a3{width:400px;height:400px;top:26%;inset-inline-end:24%;opacity:.6;
background:radial-gradient(circle,rgba(242,184,75,.26),transparent 62%);animation-delay:-4s}
@keyframes exrAur{
0%{transform:scale(1) rotate(0deg)}
50%{transform:scale(1.09) rotate(5deg)}
100%{transform:scale(.95) rotate(-4deg)}}
/* نورافکنی که دنبال موس میآید — فقط دسکتاپ از JS مقدار میگیرد */
.exr-spot{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s ease;
background:radial-gradient(560px circle at var(--sx,50%) var(--sy,40%),rgba(127,212,255,.13),transparent 62%)}
.exr-spot.on{opacity:1}
/* مدارهای چرخان + سیارهها */
.exr-orbit{position:absolute;z-index:-1;pointer-events:none;animation:exrOrbit 42s linear infinite}
.exr-orbit.o1{width:560px;height:560px;top:-190px;inset-inline-end:-130px}
.exr-orbit.o2{width:380px;height:380px;bottom:-120px;inset-inline-start:-90px;animation-duration:34s;animation-direction:reverse}
@keyframes exrOrbit{to{transform:rotate(360deg)}}
/* آیکنهای شناور شیشهای */
.exr-shape{position:absolute;z-index:0;width:52px;height:52px;border-radius:16px;padding:12px;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);
pointer-events:none;animation:exrFloat 7s ease-in-out infinite}
.exr-shape svg{width:100%;height:100%;display:block}
.exr-shape.f1{top:16%;inset-inline-start:44%;animation-delay:-2s}
.exr-shape.f2{top:64%;inset-inline-start:52%;width:46px;height:46px;animation-delay:-4.5s}
.exr-shape.f3{top:24%;inset-inline-end:4%;width:44px;height:44px;animation-delay:-1s}
@keyframes exrFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-16px) rotate(4deg)}}
.exr-hero-in{display:grid;grid-template-columns:1.25fr .88fr;gap:46px;align-items:center}
/* ورود پلکانی متنهای هیرو */
.exr-hero-txt>*{animation:exrUp .8s cubic-bezier(.2,.8,.2,1) backwards}
.exr-hero-txt>*:nth-child(1){animation-delay:.05s}
.exr-hero-txt>*:nth-child(2){animation-delay:.14s}
.exr-hero-txt>*:nth-child(3){animation-delay:.23s}
.exr-hero-txt>*:nth-child(4){animation-delay:.32s}
.exr-hero-txt>*:nth-child(5){animation-delay:.44s}
@keyframes exrUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.exr-hkick{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.09);
border:1px solid rgba(255,255,255,.2);padding:9px 18px;border-radius:100px;
font-size:.87rem;font-weight:700;margin-bottom:20px;backdrop-filter:blur(8px)}
.exr-hkick .exr-live i{margin-inline-end:0}
.exr-hero h1{font-size:clamp(2.05rem,3.4vw,3.05rem);line-height:1.45;font-weight:900;
margin-bottom:16px;letter-spacing:-.5px}
.exr-hero h1 b{position:relative;white-space:nowrap;
background:linear-gradient(90deg,#1FF0BE,#7FD4FF 40%,#1FF0BE 80%);background-size:220% 100%;
-webkit-background-clip:text;background-clip:text;color:transparent;animation:exrGrad 5.5s linear infinite}
@keyframes exrGrad{to{background-position:-220% 0}}
/* خطخطی زیر کلمه کلیدی — با ورود صفحه کشیده میشود */
.exr-scrib{position:absolute;inset-inline:-2%;bottom:-10px;width:104%;height:12px;pointer-events:none}
.exr-scrib path{stroke:#1FF0BE;stroke-width:4.5;fill:none;stroke-linecap:round;opacity:.85;
stroke-dasharray:1;stroke-dashoffset:1;animation:exrDraw 1s .7s cubic-bezier(.4,0,.2,1) forwards}
@keyframes exrDraw{to{stroke-dashoffset:0}}
.exr-lead{font-size:clamp(1.02rem,1.4vw,1.13rem);line-height:2.1;color:#fff;
max-width:54ch;margin-bottom:26px}
.exr-lead b{color:#7FD4FF;font-weight:800}
.exr-cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px}
.exr-cta{position:relative;overflow:clip;display:inline-flex;flex-direction:column;align-items:flex-start;
gap:3px;padding:15px 30px;font-size:1.07rem;border-radius:18px}
/* ⚠️ این برق قبلاً inset-inline-start را انیمیت میکرد — یعنی هر فریم یک
چیدمان مجدد. حالا همان مسیر با transform طی میشود (فقط لایه گرافیکی).
۴۱۳٪ = مسافت قبلی (۱۹۰٪ عرض دکمه) تقسیم بر عرض خود نوار (۴۶٪). */
.exr-cta::after{content:"";position:absolute;top:0;bottom:0;width:46%;inset-inline-start:-60%;
transform:translateX(0) skewX(-18deg);
background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
animation:exrShine 3.4s ease-in-out infinite}
@keyframes exrShine{
0%,55%{transform:translateX(0) skewX(-18deg)}
90%,100%{transform:translateX(-413%) skewX(-18deg)}}
.exr-cta-sub{font-size:.75rem;font-weight:600;opacity:.9}
.exr-btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 26px;
border-radius:18px;font-size:1rem;font-weight:700;color:#fff;background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);transition:background .3s ease,border-color .3s ease}
/* چراغ زنده */
.exr-live{display:inline-flex;align-items:center;gap:8px;font-weight:700}
/* ⚠️ حلقه نبض قبلاً با box-shadow ساخته میشد = رنگآمیزی دوباره در هر فریم،
آن هم روی ۴ نمونه. حالا یک حلقه واقعی که فقط scale/opacity میگیرد. */
.exr-live i{position:relative;width:9px;height:9px;border-radius:50%;background:#1FF0BE;flex:none}
.exr-live i::after{content:"";position:absolute;inset:0;border-radius:50%;
background:rgba(31,240,190,.5);animation:exrPulse 2.2s ease-out infinite}
@keyframes exrPulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(3.2);opacity:0}}
/* آمار اعتماد — همان نگاه اول، ردیف باریک زیر دکمههای هیرو */
.exr-hstats{display:flex;flex-wrap:wrap;gap:16px 36px;margin-top:28px;
padding-top:22px;border-top:1px solid rgba(255,255,255,.15)}
.exr-hstat b{display:flex;align-items:baseline;gap:2px;
font-size:clamp(1.5rem,2vw,1.95rem);font-weight:900;line-height:1.35;
background:linear-gradient(120deg,#fff,#9BE8D2);-webkit-background-clip:text;background-clip:text;color:transparent}
/* عدد داخل b باید هماندازه بقیه اعداد بماند و گرادیان b را بگیرد */
.exr-hstat b span{font-size:inherit;font-weight:inherit;color:inherit;display:inline;margin:0;line-height:inherit}
.exr-hstat i{font-style:normal;font-size:1.28rem;font-weight:900;color:#1FF0BE;line-height:1}
/* ⚠️ فقط فرزند مستقیم: قبلاً این قانون span داخل عدد را هم میگرفت و عدد را ۱۲px میکرد */
.exr-hstat>span{display:block;font-size:.79rem;color:#fff;margin-top:2px;line-height:1.8}
/* کارت پرونده — قاب سهبعدی */
.exr-card-wrap{position:relative;perspective:1100px;display:grid;place-items:center;
animation:exrUp .9s .3s cubic-bezier(.2,.8,.2,1) backwards}
.exr-card{position:relative;width:100%;max-width:390px;border-radius:30px;padding:28px 26px;
background:linear-gradient(165deg,rgba(255,255,255,.11),rgba(255,255,255,.05));
border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(16px);
box-shadow:0 40px 90px -32px rgba(0,0,0,.75);transform-style:preserve-3d;will-change:transform}
.exr-card::before{content:"";position:absolute;top:0;inset-inline:20%;height:1.5px;
background:linear-gradient(90deg,transparent,#1FF0BE,transparent)}
.exr-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}
.exr-card-top b{font-size:.98rem;font-weight:800}
.exr-card-top .exr-live{font-size:.72rem;color:#fff;background:rgba(31,240,190,.1);
border:1px solid rgba(31,240,190,.3);padding:5px 11px;border-radius:100px}
/* حلقه شمارش معکوس — SVG با گرادیان و درپوش گرد */
.exr-ring-wrap{position:relative;width:196px;margin:0 auto 16px}
.exr-ring{width:100%;height:auto;transform:rotate(-90deg);filter:drop-shadow(0 0 22px rgba(31,240,190,.35))}
.exr-ring-bg{fill:none;stroke:rgba(255,255,255,.12);stroke-width:9}
.exr-ring-fg{fill:none;stroke:url(#exrRG);stroke-width:9;stroke-linecap:round;
stroke-dasharray:370.7;stroke-dashoffset:370.7}
.exr-ring-in{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.exr-ring-in b{font-size:3.4rem;font-weight:900;line-height:1.1;color:#fff}
.exr-ring-in span{font-size:.9rem;font-weight:700;color:#fff}
.exr-card-note{font-size:.8rem;line-height:1.95;color:#fff;text-align:center;margin-bottom:18px}
.exr-cap-row{font-size:.8rem;color:#fff}
.exr-cap{height:8px;border-radius:100px;background:rgba(255,255,255,.13);overflow:hidden;margin-top:8px}
.exr-cap i{display:block;height:100%;width:var(--w,34%);border-radius:100px;
background:linear-gradient(90deg,#F2B84B,#E8636F);transform:scaleX(0);transform-origin:right center;
transition:transform 1.6s .4s cubic-bezier(.22,1,.36,1)}
.exr-cap.go i{transform:scaleX(1)}
.exr-card-foot{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);
font-size:.86rem;color:#fff;text-align:center}
.exr-card-foot b{color:#1FF0BE}
/* چیپهای شناور دور کارت */
.exr-chip{position:absolute;z-index:2;display:flex;align-items:center;gap:9px;
background:rgba(10,26,47,.66);border:1px solid rgba(255,255,255,.2);border-radius:100px;
padding:9px 16px;font-size:.8rem;font-weight:700;color:#fff;backdrop-filter:blur(10px);
box-shadow:0 16px 40px -16px rgba(0,0,0,.7);animation:exrFloat 6.5s ease-in-out infinite;pointer-events:none}
.exr-chip svg{width:17px;height:17px;flex:none}
.exr-chip.c1{top:-4px;inset-inline-start:-26px;animation-delay:-1.8s}
.exr-chip.c2{top:44%;inset-inline-end:-34px;animation-delay:-3.6s}
/* ⚠️ قبلاً bottom:-8px بود و دقیقاً روی خط «اول نوبت میگیرند» میافتاد.
حالا کاملاً بیرون کارت آویزان است؛ حساب دامنه شناوری ±۱۶px هم در آن هست
(در بدترین حالت فقط تا داخل padding پایین کارت بالا میآید، نه روی متن). */
.exr-chip.c3{bottom:-38px;inset-inline-start:14px;animation-delay:-5.2s}
/* ---------- ۲) نوار قبولیهای واقعی ---------- */
.exr-proof{position:relative;overflow:clip;background:#071527;color:#fff;
border-block:1px solid rgba(255,255,255,.08);padding-block:22px}
.exr-proof-cap{display:flex;align-items:center;justify-content:center;gap:10px;
font-size:.88rem;font-weight:800;color:#fff;margin-bottom:16px;padding-inline:20px;
text-align:center;flex-wrap:wrap}
.exr-proof-cap{font-feature-settings:"ss01"}
.exr-proof-txt{text-wrap:balance}
.exr-proof-cap b{color:#1FF0BE;white-space:nowrap} /* عدد هرگز وسطش نشکند */
/* پانویس صادقانه نوار — کوچک و کمرنگ، ولی موجود */
.exr-proof-note{max-width:74ch;margin:14px auto 0;padding-inline:20px;text-align:center;
font-size:.76rem;line-height:1.95;color:#fff}
.exr-mq{overflow:clip;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.exr-mq+.exr-mq{margin-top:12px}
.exr-mq-t{display:flex;gap:12px;width:max-content;padding-inline:6px;
animation:exrMq 52s linear infinite;will-change:transform}
.exr-mq.r2 .exr-mq-t{animation-duration:64s;animation-direction:reverse}
@keyframes exrMq{to{transform:translateX(50%)}} /* RTL: مثبت = حرکت روان */
.exr-pf{display:flex;align-items:center;gap:10px;white-space:nowrap;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
border-radius:100px;padding:10px 18px;font-size:.86rem;color:#fff}
.exr-pf b{color:#1FF0BE;font-weight:800}
.exr-pf svg{width:15px;height:15px;flex:none;opacity:.8}
/* ---------- ۳) آمار «چرا فرق دارد» ---------- */
.exr-why{background:var(--paper-2)}
.exr-why::before{content:"";position:absolute;inset-inline-start:-140px;top:-140px;width:420px;height:420px;
border-radius:50%;background:radial-gradient(circle,rgba(0,151,109,.08),transparent 65%);pointer-events:none}
/* ══════════════════════════════════════════════════════════════════════
پنل «نسبت وقت به اثر» (.exr-tw)
⚠️ زمینه/لبه/سایه اینجا نوشته نمیشود: کلاس lg-dark در مارکآپ هست و
رسپی شیشه تیره خود سایت را میآورد. هر اعلان background اینجا آن را
میکشد. فقط چیدمان و تایپوگرافی.
══════════════════════════════════════════════════════════════════════ */
.exr-tw{position:relative;overflow:hidden;margin-top:34px;
padding:34px 32px 28px;border-radius:var(--g-r)}
/* خط مویی طلایی روی لبه بالا — امضای «لاکچری» و تنها جای طلا در این پنل */
.exr-tw::before{content:"";position:absolute;top:0;inset-inline:14%;height:1px;
background:linear-gradient(90deg,transparent,rgba(242,184,75,.85),transparent)}
/* بازتاب نور ملایم گوشه */
.exr-tw-sheen{position:absolute;inset-inline-start:-10%;top:-60%;width:52%;height:190%;
pointer-events:none;transform:rotate(14deg);
background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.055),rgba(255,255,255,0))}
/* ── سه عدد نمایشی ─────────────────────────────────────────────────── */
/* سه ستون **دقیقاً مساوی** — قرینگی از اینجا میآید. نسبت ۵۲:۱:۲۰۸ فقط
در نوار پایین است. */
.exr-tw-top{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:26px}
.exr-tw-u{display:flex;flex-direction:column;align-items:center;text-align:center;
min-width:0;padding:4px 16px;position:relative}
/* جداکننده مویی عمودی بین ستونها (نه قبل از ستون اول) */
.exr-tw-u + .exr-tw-u::before{content:"";position:absolute;inset-inline-start:0;
top:10%;height:80%;width:1px;
background:linear-gradient(180deg,transparent,rgba(255,255,255,.22),transparent)}
/* نقطه رنگی که ستون را به تکه نوار زیرش گره میزند */
.exr-tw-dot{width:9px;height:9px;border-radius:50%;margin-bottom:12px;background:#1FF0BE;
box-shadow:0 0 0 4px rgba(31,240,190,.16)}
.exr-tw-u.is-m .exr-tw-dot{background:#F2B84B;box-shadow:0 0 0 4px rgba(242,184,75,.20)}
.exr-tw-u.is-b .exr-tw-dot{background:#7B6BE8;box-shadow:0 0 0 4px rgba(123,107,232,.20)}
/* ⚠️ اندازه برای هر سه یکی است. اگر عدد وسط کوچکتر شود، قرینگی میشکند —
تمایزش فقط رنگی است. */
.exr-tw-u b{font-size:clamp(2.1rem,4.4vw,3.3rem);font-weight:900;line-height:1;
letter-spacing:-.01em;
background:linear-gradient(160deg,#fff,#9FE9D6);
-webkit-background-clip:text;background-clip:text;color:transparent;
/* ⚠️ اگر مرورگر background-clip:text را نفهمد، color:transparent متن را
نامرئی میکند. این @supports عکس آن را میگیرد. */
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
.exr-tw-u b{color:#fff;background:none}
}
.exr-tw-u.is-m b{background:linear-gradient(160deg,#FFD79A,#F2B84B);
-webkit-background-clip:text;background-clip:text;color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
.exr-tw-u.is-m b{color:#F2B84B;background:none}
}
.exr-tw-u em{font-style:normal;font-size:.82rem;font-weight:800;color:#fff;
opacity:.72;margin-top:4px}
/* ارتفاع ثابت تا اگر یک برچسب دو خطی شد، سه ستون همتراز بمانند */
.exr-tw-cap{display:block;font-size:.86rem;font-weight:700;line-height:1.75;color:#fff;
opacity:.92;margin-top:8px;min-height:3.5em;max-width:14em}
/* ── نوار ──────────────────────────────────────────────────────────── */
.exr-tw-bar{position:relative;display:flex;align-items:stretch;height:42px;
border-radius:99px;overflow:hidden;
background:rgba(0,0,0,.30);
box-shadow:inset 0 2px 6px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,255,255,.10)}
/* ⚠️ ۲۷۰deg نه ۹۰: زاویه گرادیان با RTL برنمیگردد و نوار از راست پر میشود */
.exr-tw-a{flex:52 1 0;background:linear-gradient(270deg,#00976D,#1FF0BE)}
.exr-tw-b{flex:208 1 0;background:linear-gradient(270deg,#0F5EA8,#7B6BE8)}
/* لحظه تصمیم: ستون نورانی طلایی با هاله بیرونی */
.exr-tw-m{flex:0 0 10px;position:relative;background:#F2B84B;
box-shadow:0 0 0 1px rgba(255,255,255,.55),0 0 22px 6px rgba(242,184,75,.65)}
.exr-tw-m i{position:absolute;inset-inline-start:50%;margin-inline-start:-1px;
top:-8px;bottom:-8px;width:2px;background:rgba(255,231,178,.9);border-radius:2px}
/* براقی شیشهای روی نوار */
.exr-tw-gloss{position:absolute;inset:0 0 auto 0;height:46%;pointer-events:none;
border-radius:99px 99px 40px 40px;
background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0))}
/* ── ردیف آمار ────────────────────────────────────────────────────── */
.exr-tw-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}
.exr-tw-s{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px}
.exr-tw-s b{font-size:1.7rem;font-weight:900;line-height:1;color:#1FF0BE}
.exr-tw-s i{font-style:normal;font-size:.86rem;font-weight:800;color:#1FF0BE;opacity:.85}
.exr-tw-s span{flex:1 1 100%;font-size:.82rem;font-weight:600;line-height:1.75;
color:#fff;opacity:.86;margin-top:2px}
@media(max-width:860px){
.exr-tw{padding:26px 20px 22px}
/* نسبت ۵۲:۱:۲۰۸ در یک ردیف باریک خوانا نیست — عددها ستونی، نوار میماند */
.exr-tw-top{grid-template-columns:1fr;gap:18px}
.exr-tw-u{align-items:flex-start;text-align:start;padding:0 0 0 0;
padding-inline-start:14px;border-inline-start:3px solid rgba(255,255,255,.22)}
.exr-tw-u + .exr-tw-u::before{display:none}
.exr-tw-dot{display:none}
.exr-tw-cap{min-height:0;max-width:none}
.exr-tw-u.is-a{border-inline-start-color:#1FF0BE}
.exr-tw-u.is-m{border-inline-start-color:#F2B84B}
.exr-tw-u.is-b{border-inline-start-color:#7B6BE8}
.exr-tw-bar{height:32px}
.exr-tw-stats{grid-template-columns:1fr;gap:16px}
.exr-tw-sheen{display:none}
}
.exr-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:28px}
.exr-stat{position:relative;background:var(--paper-2);border:1px solid var(--line);border-radius:24px;
padding:30px 20px 26px;text-align:center;overflow:clip;transition:transform .35s ease,box-shadow .35s ease}
.exr-stat::before{content:"";position:absolute;inset:-45% -25% auto;height:75%;opacity:.5;pointer-events:none;
background:radial-gradient(closest-side,color-mix(in srgb,var(--sc,#00976D) 16%,transparent),transparent)}
.exr-stat-ic{width:46px;height:46px;margin:0 auto 14px;border-radius:15px;display:grid;place-items:center;
background:color-mix(in srgb,var(--sc,#00976D) 13%,#fff);color:var(--sc,#00976D)}
.exr-stat-ic svg{width:23px;height:23px}
.exr-stat-n{display:flex;align-items:baseline;justify-content:center;gap:6px;margin-bottom:10px}
.exr-stat-n b{font-size:clamp(2.5rem,4.2vw,3.4rem);font-weight:900;line-height:1;
background:linear-gradient(135deg,var(--sc,#00976D),var(--ink));-webkit-background-clip:text;
background-clip:text;color:transparent}
/* واحد/علامت کنار عدد — قبلاً ۱.۰۲rem بود و کنار عدد ۳.۴rem گم میشد */
.exr-stat-n i{font-style:normal;font-size:clamp(1.3rem,2.1vw,1.75rem);font-weight:900;
line-height:1;color:var(--sc,#00976D)}
.exr-stat p{font-size:.89rem;line-height:2;color:var(--muted)}
/* ==========================================================================
۴) «انتخاب رشته ۵ محوری» — بخش برندشده روش کار
بازطراحی کامل. چیدمان قبلی دو ستونی بود: ستون راست (متن + ۵ ردیف) خیلی
بلند میشد و در یک صفحه جا نمیشد، و ستون چپ (نمودار) بیشترش خالی میماند.
حالا: سر بخش تمامعرض ← صحنه سهستونه نمودار (دو طرفش محتوای واقعی) →
پنج کارت محور در یک ردیف. هیچ ستونی نه خالی میماند نه غولپیکر میشود.
========================================================================== */
.exr-method{overflow:clip}
.exr-method::after{content:"";position:absolute;inset-inline-end:-180px;bottom:-180px;width:520px;height:520px;
border-radius:50%;background:radial-gradient(circle,rgba(0,144,220,.12),transparent 65%);pointer-events:none}
.exr-method-head{position:relative;z-index:1;text-align:center;max-width:840px;margin-inline:auto}
.exr-method-head h2{font-size:clamp(1.9rem,4vw,3.1rem);line-height:1.45;font-weight:900;color:var(--ink)}
/* نام روش — باید در نگاه اول «یک چیز مال ما» بهنظر برسد، نه یک صفت.
از پنل با گذاشتن متن بین دو ستاره ساخته میشود (ent_rich آن را میکند). */
.exr-method-head h2 b{position:relative;display:inline-block;white-space:nowrap;font-weight:900;
background:linear-gradient(115deg,#00603F,#00976D 35%,#0090DC 75%);
-webkit-background-clip:text;background-clip:text;color:transparent}
.exr-method-head h2 b::after{content:"";position:absolute;inset-inline:-2%;bottom:-6px;height:5px;
border-radius:4px;
background:linear-gradient(90deg,transparent,#00976D 18%,#0090DC 55%,#F2B84B 88%,transparent);
transform:scaleX(0);transform-origin:right center;
transition:transform 1.1s .25s cubic-bezier(.22,1,.36,1)}
.play .exr-method-head h2 b::after{transform:scaleX(1)}
.exr-method-lead{font-size:clamp(1rem,1.35vw,1.1rem);line-height:2.15;color:var(--muted);margin-top:18px}
.exr-method-lead b{color:var(--ink);font-weight:800}
/* دو کارت «روش معمول ↔ روش ما» — تفاوت را در یک نگاه نشان میدهد */
.exr-vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:14px;
max-width:900px;margin:30px auto 0}
.exr-vs-c{position:relative;border-radius:18px;padding:18px 20px;text-align:start}
.exr-vs-c b{display:block;font-size:.95rem;font-weight:800;margin-bottom:6px}
.exr-vs-c p{font-size:.86rem;line-height:1.95}
.exr-vs-a{background:rgba(179,58,32,.07);border:1px solid rgba(179,58,32,.22)}
.exr-vs-a b{color:#8E2E19}.exr-vs-a p{color:var(--muted)}
.exr-vs-b{background:rgba(0,151,109,.09);border:1px solid rgba(0,151,109,.3)}
.exr-vs-b b{color:var(--teal-dark)}.exr-vs-b p{color:var(--ink);opacity:.85}
.exr-vs-x{align-self:center;font-size:1.3rem;font-weight:900;color:var(--muted);opacity:.5}
/* ── نشان «اولین بار در ایران» ──────────────────────────────────────────
عمداً بالای تیتر و کوچک است: ادعای بزرگ وقتی درشت نوشته شود بیاعتبار
بهنظر میرسد؛ وقتی مثل یک مهر کنار نام روش بنشیند، باور میشود. */
.exr-first{display:inline-flex;align-items:center;gap:9px;margin:14px auto 4px;
padding:8px 16px 8px 12px;border-radius:100px;
background:linear-gradient(120deg,rgba(0,151,109,.13),rgba(0,144,220,.13));
border:1px solid rgba(0,151,109,.34)}
.exr-first b{font-size:.83rem;font-weight:800;color:var(--teal-dark);letter-spacing:.1px}
.exr-first-i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;flex:none;
color:#fff;background:var(--grad-brand);box-shadow:0 6px 16px -8px rgba(0,151,109,.9)}
.exr-first-i svg{width:15px;height:15px}
.play .exr-first-i{animation:exrFirstPop .9s .2s cubic-bezier(.34,1.56,.64,1) both}
@keyframes exrFirstPop{0%{transform:scale(.2) rotate(-40deg)}100%{transform:scale(1) rotate(0)}}
/* ── «این پنج محور از کجا آمد؟» ──────────────────────────────────────────
چهار جمله واقعی + جمعبندی. این بلوک کار فروش را میکند، نه نمودار:
نمودار میگوید «چطور»، این میگوید «چرا» — و خریدار اول «چرا» را میخواهد. */
.exr-born{margin-top:56px}
/* لینک به مقاله کامل روش — عمداً کمرنگتر از دکمههای اصلی صفحه است تا
با دکمه پیشثبتنام رقابت نکند و کسی را از مسیر خرید بیرون نبرد. */
.exr-born-more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;
font-size:.88rem;font-weight:800;color:var(--teal-dark);text-decoration:none;
border-bottom:1.5px solid rgba(0,151,109,.35);padding-bottom:2px}
.exr-born-more:hover{border-bottom-color:var(--teal-dark)}
.exr-born-h{text-align:center;max-width:760px;margin:0 auto 30px}
.exr-born-h h3{font-size:clamp(1.25rem,2.4vw,1.72rem);font-weight:900;color:var(--ink);line-height:1.6}
.exr-born-h p{font-size:.95rem;line-height:2.1;color:var(--muted);margin-top:10px}
/* ⚠️ عمداً **تکستونه**: پنج کارت در یک ردیف روی هر عرضی باریک میشود و در
عرضهای متوسط به ۳+۲ یا ۴+۱ میشکند — یعنی همان «دو ردیف نامتقارن» که
کاربر گفت نباید پیش بیاید. ردیف تمامعرض در هر عرضی متقارن است، و چون
هر ردیف چهار ناحیه پر دارد (شماره · نقل قول · برداشت · محور)، فضای خالی
هم نمیسازد. */
.exr-born-list{list-style:none;display:grid;gap:12px}
.exr-born-c{position:relative;display:grid;
grid-template-columns:auto minmax(210px,29%) 1fr auto;align-items:center;gap:6px 20px;
overflow:clip;padding:18px 24px;border-radius:18px;border:1px solid var(--line)}
/* نوار رنگی روی لبه آغاز ردیف (در RTL یعنی سمت راست) */
.exr-born-c::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:var(--c)}
.exr-born-n{font-size:.82rem;font-weight:900;letter-spacing:.5px;color:var(--cd);opacity:.55}
/* گیومه درشت کمرنگ، چسبیده به خود جمله — ردیف را «نقل قول» میکند نه «ویژگی» */
.exr-born-q{font-size:2.1rem;line-height:0;font-weight:900;color:var(--c);opacity:.45;
margin-inline-end:6px;vertical-align:-.35em}
.exr-born-said{font-size:.97rem;font-weight:800;line-height:1.85;color:var(--ink)}
.exr-born-c p{font-size:.85rem;line-height:1.95;color:var(--muted)}
/* «شیشه تینتخورده» — رسپی شیشه سایت با یک لایه رنگی نازک رویش.
⚠️ دو تله اندازهگیریشده که هر دو را خوردهام:
۱) پایه کاملاً **شفاف** ⇐ تینت روی کاغذ آبی صفحه مینشیند و کنتراست متن
رنگی تا ۴٫۰۶ میافتد (مردود AA).
۲) پایه کاملاً **سفید مات** ⇐ عدد درست میشود ولی چیپ «شیشه» نیست، یک
قرص پاستیلی تخت است — دقیقاً همان چیزی که کاربر گفت «حالت شیشهای
اعمال نشده». پایه سفید **نیمهشفاف** هر دو را با هم دارد. */
.exr-tglass{
background:
linear-gradient(0deg,color-mix(in srgb,var(--c) 13%,transparent),color-mix(in srgb,var(--c) 13%,transparent)),
radial-gradient(126% 64% at 16% -14%,rgba(255,255,255,.88),rgba(255,255,255,0) 56%),
linear-gradient(152deg,rgba(255,255,255,.78),rgba(255,255,255,.6) 48%,rgba(255,255,255,.7));
border:1px solid rgba(255,255,255,.6);
border-top-color:rgba(255,255,255,.94);
border-bottom-color:color-mix(in srgb,var(--c) 26%,transparent);
box-shadow:0 1px 2px rgba(10,26,47,.1),
0 10px 22px -16px rgba(10,26,47,.5),
inset 0 1px 0 rgba(255,255,255,.95),
inset 0 -1px 0 rgba(255,255,255,.45)}
@supports not (color:color-mix(in srgb,red 10%,transparent)){
.exr-tglass{background:linear-gradient(152deg,rgba(255,255,255,.85),rgba(255,255,255,.7));
border-color:var(--line)}
}
.exr-born-ax{display:inline-flex;align-items:center;gap:7px;justify-self:end;
padding:7px 14px;border-radius:100px;font-size:.75rem;font-weight:800;color:var(--cd);
white-space:nowrap}
.exr-born-ax::before{content:"↤";font-size:.8rem;opacity:.7}
/* جمعبندی — شیشه سبز کمرنگ، همخانواده بقیه سطحهای صفحه */
.exr-born-sum{--c:#00976D;margin-top:16px;padding:22px 26px;border-radius:20px;
font-size:.98rem;line-height:2.15;color:var(--ink)}
.exr-born-sum b{font-weight:900;color:var(--teal-dark)}
/* ── موتور پشت نمرهها ─────────────────────────────────────────────────
سه ورودی ← ریل متحرک ← هسته ← ریل ← پنج خروجی.
⚠️ عرض ستون ریل **ثابت** است (--rail-w) چون کیفریم نقطهها با همان
عدد جابهجا میشود؛ اگر ستون سیال شود، نقطهها یا زود میایستند یا رد میشوند. */
.exr-eng{margin-top:58px;--rail-w:58px}
/* ⚠️ «حس خالیبودن» که کاربر گزارش داد از این میآمد که سه ستون در فضای باز
شناور بودند. حالا کل نمودار روی یک **صحنه** مینشیند (سطح نرم کمرنگ با
لبه)، سر ستونها برچسب گرفتهاند، و ستون میانی بهجای یک دایره تنها، یک
ستون کامل است. صحنه عمداً *شیشه کامل* نیست چون کارتهای داخلش شیشهاند و
شیشه تودرتو در این پروژه ممنوع است. */
.exr-eng-flow{display:grid;align-items:center;gap:14px;margin-top:26px;
grid-template-columns:minmax(250px,1.06fr) var(--rail-w) minmax(190px,auto) var(--rail-w) minmax(215px,.92fr);
grid-template-rows:auto 1fr;
padding:22px 24px 26px;border-radius:26px;
background:
radial-gradient(760px 340px at 50% -10%,rgba(0,144,220,.13),transparent 70%),
radial-gradient(600px 300px at 8% 110%,rgba(0,151,109,.10),transparent 68%),
linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.12));
border:1px solid rgba(255,255,255,.55)}
/* برچسب سر ستونها — هم فضای بالای صحنه را پر میکند هم نمودار را میفهماند */
.exr-eng-col-h{grid-row:1;align-self:center;text-align:center;
font-size:.76rem;font-weight:900;letter-spacing:.4px;color:var(--muted);opacity:.9;
padding:5px 0;border-bottom:1.5px dashed rgba(10,26,47,.18)}
.exr-eng-col-h.h-in{grid-column:1}
.exr-eng-col-h.h-core{grid-column:3}
.exr-eng-col-h.h-out{grid-column:5}
.exr-eng-src{grid-area:2/1;display:grid;gap:12px}
.exr-eng-card{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
column-gap:13px;row-gap:5px;padding:16px 18px;border-radius:18px;border:1px solid var(--line)}
.exr-eng-ic{grid-row:1/3;align-self:start;display:grid;place-items:center;width:40px;height:40px;flex:none;
border-radius:13px;color:#fff;background:var(--eic,var(--grad-brand));
box-shadow:0 10px 22px -12px var(--eish,rgba(0,151,109,.9))}
.exr-eng-ic svg{width:21px;height:21px}
.exr-eng-card b{font-size:.94rem;font-weight:800;color:var(--ink);line-height:1.6}
.exr-eng-card p{font-size:.81rem;line-height:1.9;color:var(--muted)}
.exr-eng-data{--eic:linear-gradient(135deg,#00976D,#00B98A);--eish:rgba(0,151,109,.9)}
.exr-eng-ai {--eic:linear-gradient(135deg,#0090DC,#5B4BE8);--eish:rgba(0,144,220,.9)}
.exr-eng-human{--eic:linear-gradient(135deg,#E8636F,#F2B84B);--eish:rgba(232,99,111,.9)}
.exr-eng-rail{position:relative;min-height:80px;grid-row:2}
.exr-eng-rail.r1{grid-column:2}
.exr-eng-rail.r2{grid-column:4}
.exr-eng-rail::before{content:"";position:absolute;top:50%;left:0;right:0;height:2px;
transform:translateY(-50%);border-radius:2px;
background:linear-gradient(90deg,rgba(0,144,220,.06),rgba(0,144,220,.5),rgba(0,151,109,.5),rgba(0,151,109,.06))}
.exr-eng-rail i{position:absolute;top:50%;right:0;width:7px;height:7px;margin-top:-3.5px;
border-radius:50%;background:#00976D;box-shadow:0 0 10px rgba(0,151,109,.85);opacity:0}
.play .exr-eng-rail i{animation:exrRailX 2.6s linear infinite}
.play .exr-eng-rail i:nth-child(2){animation-delay:.87s}
.play .exr-eng-rail i:nth-child(3){animation-delay:1.74s}
@keyframes exrRailX{
0%{transform:translateX(0);opacity:0}
14%{opacity:1}
86%{opacity:1}
100%{transform:translateX(calc(-1 * var(--rail-w)));opacity:0}
}
/* نسخه عمودی همان حرکت، برای وقتی موتور روی گوشی ستونی میشود */
@keyframes exrRailY{
0%{transform:translateY(0);opacity:0}
14%{opacity:1}
86%{opacity:1}
100%{transform:translateY(52px);opacity:0}
}
/* ستون میانی: هسته + برچسب + یک خط توضیح. قبلاً فقط یک دایره بود و بالا و
پایینش ~۱۶۰px فضای خالی میماند. */
.exr-eng-mid{grid-area:2/3;display:grid;justify-items:center;gap:14px}
.exr-eng-core{position:relative;display:grid;place-items:center;justify-self:center;
width:172px;height:172px;border-radius:50%}
/* حلقه رنگی چرخان — رنگهایش عین رنگ همان پنج محور در نمودار است */
.exr-eng-ring{position:absolute;inset:0;border-radius:50%;
background:conic-gradient(#00976D,#0090DC,#F2B84B,#8B7FF0,#E8636F,#00976D);
-webkit-mask:radial-gradient(circle,transparent 60%,#000 61%);
mask:radial-gradient(circle,transparent 60%,#000 61%);
opacity:.85}
.play .exr-eng-ring{animation:exrCoreSpin 16s linear infinite}
@keyframes exrCoreSpin{to{transform:rotate(360deg)}}
.exr-eng-core-in{position:relative;display:grid;place-items:center;width:108px;height:108px;
border-radius:50%;background:linear-gradient(150deg,#fff,#EAF3FC);
box-shadow:0 18px 40px -22px rgba(10,26,47,.7),inset 0 1px 0 rgba(255,255,255,.9);
transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.exr-eng-ring{transition:scale .5s cubic-bezier(.2,.8,.2,1)}
.exr-eng-core-n{font-size:2.5rem;font-weight:900;line-height:1;
background:linear-gradient(135deg,var(--teal-dark),#0090DC);
-webkit-background-clip:text;background-clip:text;color:transparent}
.exr-eng-core-t{font-size:.78rem;font-weight:800;color:var(--muted);margin-top:2px}
.exr-eng-core-lb{font-size:.87rem;font-weight:900;color:var(--ink);text-align:center}
.exr-eng-core-p{font-size:.78rem;line-height:1.85;color:var(--muted);text-align:center;max-width:200px}
.exr-eng-out{grid-area:2/5;display:flex;flex-direction:column;gap:8px}
.exr-eng-chip{display:flex;align-items:center;gap:9px;padding:10px 15px;border-radius:100px;
font-size:.83rem;font-weight:800;color:var(--cd)}
.exr-eng-chip i{width:9px;height:9px;border-radius:3px;flex:none;background:var(--c);transform:rotate(45deg)}
.exr-eng-tot{--c:#00976D;margin-top:6px;padding:14px 16px;border-radius:16px;text-align:center;
font-size:.82rem;line-height:1.8;color:var(--muted)}
.exr-eng-tot b{display:block;margin-top:4px;font-size:.9rem;font-weight:900;color:var(--teal-dark)}
/* صحنه نمودار — سه ستون تا هیچ طرفی خالی نماند */
.exr-stage{display:grid;grid-template-columns:1fr minmax(300px,440px) 1fr;gap:30px;
align-items:center;margin-top:46px}
.exr-stage-note{border-radius:18px;padding:20px}
.exr-stage-note h4{font-size:.98rem;font-weight:800;color:var(--ink);margin-bottom:9px;
display:flex;align-items:center;gap:8px}
.exr-stage-note h4::before{content:"";width:8px;height:8px;border-radius:3px;flex:none;
background:linear-gradient(135deg,var(--teal),var(--blue,#0090DC));transform:rotate(45deg)}
.exr-stage-note p{font-size:.85rem;line-height:2;color:var(--muted)}
.exr-stage-note p+p{margin-top:9px}
/* جمعبندی نمره — کنار نمودار، نه ته یک ستون بلند */
.exr-sum{border-radius:18px;padding:22px 20px;text-align:center;
border:1.5px dashed rgba(0,151,109,.5);background:rgba(0,151,109,.07)}
.exr-sum>span{display:block;font-size:.85rem;font-weight:700;color:var(--muted)}
.exr-sum>b{display:block;font-size:3.1rem;font-weight:900;line-height:1.1;margin-block:4px;
background:linear-gradient(135deg,var(--teal-dark),#0090DC);
-webkit-background-clip:text;background-clip:text;color:transparent}
.exr-sum>b i{font-style:normal;font-size:.82rem;font-weight:700;-webkit-text-fill-color:var(--muted);color:var(--muted)}
.exr-sum>em{display:block;font-style:normal;font-size:.88rem;font-weight:800;color:var(--ink);margin-top:6px}
.exr-sum-lv{display:inline-block;margin-top:10px;padding:6px 14px;border-radius:100px;
font-size:.8rem;font-weight:800;color:#fff;background:var(--grad-brand)}
.exr-radar-wrap{position:relative;display:grid;place-items:center}
.exr-radar-orbit{position:absolute;width:min(92%,470px);aspect-ratio:1;border-radius:50%;
border:1.5px dashed rgba(0,151,109,.3);animation:exrOrbit 44s linear infinite}
.exr-radar-orbit::before{content:"";position:absolute;top:-6px;inset-inline-start:50%;width:11px;height:11px;
border-radius:50%;background:var(--amber);box-shadow:0 0 14px rgba(0,144,220,.8)}
.exr-radar-glow{position:absolute;width:60%;aspect-ratio:1;border-radius:50%;
background:radial-gradient(circle,rgba(0,151,109,.16),transparent 65%);pointer-events:none}
.exr-radar{position:relative;width:min(100%,440px);height:auto;overflow:visible;
transition:transform .5s cubic-bezier(.2,.8,.2,1)}
/* نمره کل، وسط نمودار — نمودار را از «تزئین» به «خلاصه» تبدیل میکند */
.exr-rd-tot{opacity:0;transition:opacity .6s 1.15s ease}
.play .exr-rd-tot{opacity:1}
.exr-rd-tot .n{font-family:inherit;font-size:34px;font-weight:900;fill:var(--teal-dark)}
.exr-rd-tot .u{font-family:inherit;font-size:11.5px;font-weight:700;fill:var(--muted)}
/* پنج کارت محور — یک ردیف، نه یک ستون بلند */
.exr-axes{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:44px}
.exr-axis{position:relative;display:flex;flex-direction:column;gap:8px;overflow:clip;
padding:24px 18px 18px;border-radius:20px;border:1px solid var(--line);cursor:default;
transition:transform .35s ease,box-shadow .35s ease,border-color .3s ease}
/* نوار رنگی بالای کارت — رنگ همان رنگ محور در نمودار است، پس چشم وصلشان میکند */
.exr-axis::before{content:"";position:absolute;top:0;inset-inline:0;height:4px;background:var(--c)}
.exr-mx-n{font-size:.76rem;font-weight:900;letter-spacing:.5px;color:var(--cd);opacity:.65}
.exr-mx-t{font-size:1rem;font-weight:800;color:var(--ink);line-height:1.65}
.exr-axis p{font-size:.82rem;line-height:1.95;color:var(--muted);flex:1}
.exr-mx-foot{display:flex;align-items:center;gap:10px;margin-top:4px}
.exr-mx-v{font-size:1.45rem;font-weight:900;line-height:1;color:var(--cd);flex:none}
.exr-axis-bar{flex:1;height:7px;border-radius:100px;background:rgba(10,26,47,.09);overflow:hidden}
.exr-axis-bar i{display:block;height:100%;width:var(--w,0%);border-radius:100px;background:var(--c);
transform:scaleX(0);transform-origin:right center;transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.play .exr-axis-bar i{transform:scaleX(1)}
.exr-axis.hi{border-color:var(--c);transform:translateY(-6px);box-shadow:var(--shadow)}
.exr-note{font-size:.82rem;color:var(--muted);opacity:.85;text-align:center;margin-top:22px}
/* شبکه و محورها — با ورود به دید، پلکانی جان میگیرند */
.exr-rd-ring{fill:none;stroke:rgba(10,26,47,.12);stroke-width:1;transform-box:fill-box;
transform-origin:center;transform:scale(.4);opacity:0;
transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .6s ease}
.play .exr-rd-ring{transform:scale(1);opacity:1}
.play .exr-rd-ring:nth-child(2){transition-delay:.07s}
.play .exr-rd-ring:nth-child(3){transition-delay:.14s}
.play .exr-rd-ring:nth-child(4){transition-delay:.21s}
.exr-rd-ax{stroke:rgba(10,26,47,.12);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;
transition:stroke-dashoffset .9s ease}
.play .exr-rd-ax{stroke-dashoffset:0}
/* چندضلعی مقادیر — فنری باز میشود و بعد آرام نفس میکشد */
.exr-rd-poly{fill:rgba(0,151,109,.2);stroke:#00976D;stroke-width:2.5;stroke-linejoin:round;
transform-box:fill-box;transform-origin:center;transform:scale(.2);opacity:0;
transition:transform .95s .25s cubic-bezier(.3,1.45,.5,1),opacity .5s .25s ease}
.play .exr-rd-poly{transform:scale(1);opacity:1;animation:exrBreath 5.5s 1.4s ease-in-out infinite}
@keyframes exrBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
/* رأسها + هاله + پلاک درصد */
.exr-rd-pt circle.d{fill:#fff;stroke-width:3;transform-box:fill-box;transform-origin:center;
transform:scale(0);transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.exr-rd-pt circle.h{fill:none;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.play .exr-rd-pt circle.d{transform:scale(1)}
.play .exr-rd-pt circle.h{animation:exrHalo 2.8s ease-out infinite}
@keyframes exrHalo{0%{opacity:.55;transform:scale(.6)}70%,100%{opacity:0;transform:scale(2.1)}}
.exr-rd-pt .lb{opacity:0;transform:translateY(6px);transform-box:fill-box;
transition:opacity .5s ease,transform .5s ease}
.play .exr-rd-pt .lb{opacity:1;transform:none}
.exr-rd-pt rect{fill:#fff;stroke:rgba(10,26,47,.14);rx:11}
.exr-rd-pt text{font-family:inherit;font-size:13.5px;font-weight:800}
.play .exr-rd-pt[data-i="0"] circle.d{transition-delay:0.55s}
.play .exr-rd-pt[data-i="0"] .lb{transition-delay:0.75s}
.play .exr-rd-pt[data-i="1"] circle.d{transition-delay:0.64s}
.play .exr-rd-pt[data-i="1"] .lb{transition-delay:0.84s}
.play .exr-rd-pt[data-i="2"] circle.d{transition-delay:0.73s}
.play .exr-rd-pt[data-i="2"] .lb{transition-delay:0.93s}
.play .exr-rd-pt[data-i="3"] circle.d{transition-delay:0.82s}
.play .exr-rd-pt[data-i="3"] .lb{transition-delay:1.02s}
.play .exr-rd-pt[data-i="4"] circle.d{transition-delay:0.91s}
.play .exr-rd-pt[data-i="4"] .lb{transition-delay:1.11s}
/* پیوند هاور بین فهرست و نمودار */
.exr-radar.dim .exr-rd-pt{opacity:.25;transition:opacity .3s ease}
.exr-radar.dim .exr-rd-pt.hi{opacity:1}
.exr-radar .exr-rd-pt{transition:opacity .3s ease}
.exr-rd-pt.hi circle.d{transform:scale(1.45)}
.exr-rd-c{fill:var(--teal);opacity:0;transition:opacity .4s .9s ease}
.play .exr-rd-c{opacity:1}
/* ---------- ۵) سه سطح + نوار توزیع ---------- */
.exr-levels-sec{background:var(--paper-2)}
/* شفقهای ملایم پشت کارتها — بدون رنگ زیرین، «شیشه» چیزی برای شکستن ندارد
و مثل یک کارت سفید ساده دیده میشود. */
.exr-levels-sec::before,.exr-levels-sec::after{content:"";position:absolute;border-radius:50%;
pointer-events:none;z-index:0;filter:blur(72px)}
.exr-levels-sec::before{width:520px;height:520px;top:16%;inset-inline-start:-130px;
background:radial-gradient(circle,rgba(0,151,109,.3),transparent 66%)}
.exr-levels-sec::after{width:470px;height:470px;bottom:-130px;inset-inline-end:-110px;
background:radial-gradient(circle,rgba(0,144,220,.28),transparent 66%)}
.exr-dist{max-width:760px;margin:38px auto 14px}
.exr-dist-bar{display:flex;height:34px;border-radius:100px;overflow:clip;
background:rgba(10,26,47,.07);box-shadow:inset 0 1px 3px rgba(10,26,47,.12)}
.exr-dist-bar i{display:grid;place-items:center;font-style:normal;font-size:.8rem;font-weight:800;color:#fff;
transform:scaleX(0);transform-origin:right center;transition:transform 1s cubic-bezier(.22,1,.36,1)}
.exr-dist-bar i.d1{width:20%;background:linear-gradient(135deg,#F2B84B,#E8974B)}
.exr-dist-bar i.d2{width:55%;background:var(--grad-brand);transition-delay:.15s}
.exr-dist-bar i.d3{width:25%;background:linear-gradient(135deg,#0090DC,#7FD4FF);transition-delay:.3s}
.play .exr-dist-bar i{transform:scaleX(1)}
.exr-dist-leg{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:14px;
font-size:.85rem;font-weight:700;color:var(--muted)}
.exr-dist-leg span{display:inline-flex;align-items:center;gap:7px}
.exr-dist-leg span::before{content:"";width:11px;height:11px;border-radius:4px;background:var(--c)}
.exr-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px;align-items:stretch}
.exr-level{position:relative;background:var(--paper);border:1px solid var(--line);
border-radius:26px;padding:30px 26px;overflow:clip;transition:transform .35s ease,box-shadow .35s ease}
/* (سیستم «شیشه مایع» پایینتر، قبل از بلوک هاور، یکجا تعریف شده — آنجا باید
باشد تا بر تعریف پایه همه کارتهای صفحه سوار شود.) */
.exr-level.on{background:linear-gradient(170deg,#0A1A2F,#123057);color:#fff;border:0;
box-shadow:0 30px 60px -24px rgba(10,26,47,.65);transform:translateY(-10px) scale(1.02)}
.exr-level.on::before{content:"";position:absolute;inset:0;border-radius:26px;padding:1.5px;
background:linear-gradient(140deg,#1FF0BE,transparent 40%,transparent 60%,#0090DC);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.exr-level.on::after{content:"";position:absolute;inset:-40% -30% auto;height:70%;opacity:.5;pointer-events:none;
background:radial-gradient(closest-side,rgba(31,240,190,.2),transparent)}
.exr-lv-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.exr-lv-top b{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
background:var(--teal-soft);color:var(--teal-dark);font-weight:900;font-size:1.05rem;flex:none}
.exr-lv-top span{font-size:1.22rem;font-weight:800;color:var(--ink)}
.exr-level.on .exr-lv-top b{background:var(--grad-brand);color:#fff;box-shadow:var(--glow-teal)}
.exr-level.on .exr-lv-top span{color:#fff}
.exr-level p{font-size:.93rem;line-height:2.05;color:var(--muted);margin-bottom:15px}
.exr-level.on p{color:#fff}
.exr-lv-tag{display:inline-block;font-size:.8rem;font-weight:700;color:var(--teal-dark);
background:var(--teal-soft);padding:6px 14px;border-radius:100px}
.exr-level.on .exr-lv-tag{background:rgba(31,240,190,.14);color:#1FF0BE}
.exr-lv-badge{position:absolute;top:18px;inset-inline-end:18px;font-size:.72rem;font-weight:800;
color:#0A1A2F;background:#1FF0BE;padding:5px 12px;border-radius:100px;
box-shadow:0 8px 22px -8px rgba(31,240,190,.9)}
/* ---------- ۶) چهار مرحله ---------- */
/* ⚠️ خط سیر قبلاً top:26px بود، یعنی دقیقاً *پشت* کارتها؛ و چون کارتها زمینه
مات دارند، عملاً هیچجز چند میلیمتر داخل فاصله بین کارتها دیده نمیشد.
حالا کل خط در یک نوار خالی بالای کارتها مینشیند (padding-top) و کامل پیداست. */
.exr-steps-wrap{position:relative;margin-top:44px;padding-top:56px}
/* خط سیر گرادیانی + دنبالهدار */
.exr-steps-line{position:absolute;top:26px;inset-inline:7%;height:3px;border-radius:100px;
background:linear-gradient(90deg,var(--teal),var(--amber));opacity:.6;
transform:scaleX(0);transform-origin:right center;transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
.play .exr-steps-line{transform:scaleX(1)}
.exr-comet{position:absolute;top:21px;inset-inline-start:7%;width:13px;height:13px;border-radius:50%;
background:#1FF0BE;box-shadow:0 0 18px 4px rgba(31,240,190,.65);opacity:0;pointer-events:none;z-index:2}
.play .exr-comet{animation:exrComet 2.2s .35s cubic-bezier(.45,0,.3,1) forwards}
@keyframes exrComet{0%{opacity:1;inset-inline-start:6%}88%{opacity:1}100%{opacity:0;inset-inline-start:92%}}
/* گرههای روی خط، بالای مرکز هر کارت — درصدها از عرض واقعی ستونهای ۴تایی
با فاصله ۲۰px حساب شدهاند (نه ۱۲.۵/۳۷.۵/… که فاصلهها را نادیده میگیرد). */
.exr-node{position:absolute;top:20px;width:15px;height:15px;border-radius:50%;z-index:1;
background:var(--paper-2);border:3px solid var(--teal);pointer-events:none;
box-shadow:0 0 0 4px rgba(0,151,109,.12);
transform:translateX(50%);animation:exrNode 2.6s ease-in-out infinite}
.exr-node.n1{inset-inline-start:11.8%}
.exr-node.n2{inset-inline-start:37.3%;animation-delay:.35s}
.exr-node.n3{inset-inline-start:62.7%;animation-delay:.7s}
.exr-node.n4{inset-inline-start:88.2%;animation-delay:1.05s;border-color:var(--amber);
box-shadow:0 0 0 4px rgba(242,184,75,.18)}
@keyframes exrNode{0%,100%{transform:translateX(50%) scale(1)}50%{transform:translateX(50%) scale(1.3)}}
.exr-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
.exr-steps li{position:relative;background:var(--paper-2);border:1px solid var(--line);
border-radius:24px;padding:30px 24px;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.exr-step-n{position:relative;z-index:1;width:52px;height:52px;border-radius:17px;display:grid;place-items:center;
background:var(--grad-brand);color:#fff;font-size:1.3rem;font-weight:900;margin-bottom:16px;
box-shadow:var(--glow-teal);transform:scale(.4);opacity:0;
transition:transform .55s cubic-bezier(.3,1.5,.5,1),opacity .4s ease}
.play .exr-step-n{transform:scale(1);opacity:1}
.play .exr-steps li:nth-child(1) .exr-step-n{transition-delay:0.3s}
.play .exr-steps li:nth-child(2) .exr-step-n{transition-delay:0.75s}
.play .exr-steps li:nth-child(3) .exr-step-n{transition-delay:1.2s}
.play .exr-steps li:nth-child(4) .exr-step-n{transition-delay:1.65s}
.exr-steps h3{font-size:1.14rem;font-weight:800;margin-bottom:10px;color:var(--ink)}
.exr-steps p{font-size:.9rem;line-height:2.05;color:var(--muted)}
/* ---------- ۷) درباره دکتر ---------- */
.exr-about{background:var(--paper-2)}
.exr-about-grid{display:grid;grid-template-columns:.74fr 1.26fr;gap:58px;align-items:center}
.exr-about-vis{position:relative;padding-inline-start:14px;padding-block-end:16px}
.exr-about-ring{position:absolute;inset:-30px;z-index:0;animation:exrOrbit 50s linear infinite}
.exr-about-ring circle{fill:none;stroke:rgba(0,151,109,.32);stroke-width:2;stroke-dasharray:4 14;stroke-linecap:round}
.exr-about-vis img{position:relative;z-index:1;width:100%;height:auto;border-radius:26px;
box-shadow:var(--shadow);display:block}
.exr-about-vis::before{content:"";position:absolute;inset:26px -8px -14px 26px;border-radius:26px;
background:var(--grad-brand);opacity:.22;z-index:0}
.exr-about-badge{position:absolute;z-index:2;inset-block-end:-6px;inset-inline-start:-2px;
background:var(--grad-brand);color:#fff;border-radius:20px;padding:14px 22px;
box-shadow:var(--glow-teal);text-align:center;animation:exrFloat 7s ease-in-out infinite}
.exr-about-badge b{display:block;font-size:1.65rem;font-weight:900;line-height:1.25}
.exr-about-badge span{font-size:.76rem;font-weight:600;opacity:.94}
.exr-about-txt .exr-head{text-align:start;margin-inline:0;max-width:none;margin-bottom:8px}
.exr-about-txt>p{font-size:1.03rem;line-height:2.2;color:var(--muted);margin-bottom:20px}
.exr-about-txt>p b{color:var(--ink);font-weight:800}
.exr-about-list{list-style:none;display:grid;gap:13px;margin-bottom:26px}
.exr-about-list li{position:relative;padding-inline-start:34px;font-size:.97rem;line-height:2;color:var(--muted)}
.exr-about-list li b{color:var(--ink);font-weight:800}
.exr-about-list li svg{position:absolute;inset-inline-start:0;top:5px;width:22px;height:22px}
.exr-about-list li svg circle{fill:var(--teal-soft)}
.exr-about-list li svg path{stroke:var(--teal-dark);stroke-width:2.4;fill:none;stroke-linecap:round;
stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s ease}
.play .exr-about-list li svg path{stroke-dashoffset:0}
.play .exr-about-list li:nth-child(1) svg path{transition-delay:0.2s}
.play .exr-about-list li:nth-child(2) svg path{transition-delay:0.38s}
.play .exr-about-list li:nth-child(3) svg path{transition-delay:0.56s}
.play .exr-about-list li:nth-child(4) svg path{transition-delay:0.74s}
.exr-line-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:15px;
font-size:.97rem;font-weight:800;color:var(--teal-dark);border:1.5px solid var(--teal);
transition:background .3s ease,color .3s ease,transform .3s ease}
/* ---------- ۸) طرحها ---------- */
.exr-plans .plan-grid{margin-top:44px}
.exr-plans .p-foot-np{justify-content:stretch}
.exr-plans .p-foot-np .p-btn{width:100%;justify-content:center}
.exr-plans-cta{text-align:center;margin-top:38px}
.exr-plans-cta p{font-size:1rem;color:var(--muted);margin-bottom:16px}
.exr-plans-cta p b{color:var(--ink);font-weight:800}
/* ---------- ۹) پیشثبتنام ---------- */
/* ⚠️ padding از ۹۶ به ۴۴ آمد. اندازهگیریشده: کل سکشن ۱۱۶۳px بود در برابر ویوپورت
۹۰۰px — یعنی در زوم ۱۰۰٪ هیچوقت یکجا دیده نمیشد و کاربر همین را گزارش کرد.
هدف نهایی ~۸۴۰px است نه دقیقاً ۹۰۰، چون هدر چسبان (۷۳px) بالای کادر دید مینشیند. */
.exr-pish-sec{position:relative;background:var(--paper-2);padding-block:44px;overflow:clip}
/* رنگ پشت پنل — بدون این، «شیشه تیره» چیزی برای شکستن ندارد و صاف دیده میشود */
.exr-pish-sec::before,.exr-pish-sec::after{content:"";position:absolute;border-radius:50%;
pointer-events:none;filter:blur(90px);z-index:0}
.exr-pish-sec::before{width:560px;height:560px;top:-160px;inset-inline-end:-140px;
background:radial-gradient(circle,rgba(0,144,220,.34),transparent 66%)}
.exr-pish-sec::after{width:520px;height:520px;bottom:-180px;inset-inline-start:-130px;
background:radial-gradient(circle,rgba(0,151,109,.32),transparent 66%)}
/* ---------- شیشه تیره ----------
همان منطق .exr-glass ولی وارونه: بدنه تیره نیمهشفاف، لبه روشن.
لایه اول background بازتاب نور است (بهجای pseudo، چون ::before گرفته است). */
.exr-pish{position:relative;overflow:clip;border-radius:clamp(26px,3vw,42px);color:#fff;isolation:isolate;
max-width:1200px;margin-inline:auto;display:grid;grid-template-columns:1.06fr .94fr;gap:48px;
padding:clamp(34px,4.5vw,58px);
background:
/* ⚠️ این چهار لایه در عمل **دیده نمیشوند**: بلوک .exr-proof,.exr-pish,.exr-final
در انتهای همین فایل کل background را بازمینویسد. عمداً نگه داشته شدهاند تا
اگر روزی آن بلوک برداشته شد پنل بیزمینه نماند — ولی برای تنظیم رنگ، آنجا را
عوض کن نه اینجا. (یکبار همینجا را عوض کردم و هیچ اثری نداشت.) */
radial-gradient(120% 62% at 18% -16%,rgba(255,255,255,.16),rgba(255,255,255,0) 58%),
radial-gradient(820px 520px at 100% 0%,rgba(0,144,220,.34),transparent 60%),
radial-gradient(720px 540px at 0% 100%,rgba(0,151,109,.36),transparent 60%),
linear-gradient(165deg,rgba(7,19,36,.86),rgba(11,33,64,.9));
/* 🔴🔴 backdrop-filter از اینجا **برداشته شد** و برنگردانش — علت اصلی «تیکهتیکهبودن»
این صفحه بود (گزارش کاربر ۱۴۰۵/۰۵/۲۷، اندازهگیریشده روی لوکال).
چرا اینقدر گران بود: این پنل ۱۰۷۲×۱۴۷۶ رندر میشود، یعنی **۱٫۵۸ مگاپیکسل** —
برابر ۷۹٪ کل سطح backdrop-filter دیدنی کل صفحه (مجموع ۱٫۹۹ مگاپیکسل).
و برخلاف transform/opacity، backdrop-filter **کش نمیشود**: هر بار محتوای پشتش
نسبت به آن جابهجا شود باید دوباره محاسبه شود، یعنی در اسکرول **هر فریم**.
چرا حذفش دیده نمیشود: زمینه واقعی این پنل از بلوک .exr-proof,.exr-pish,.exr-final
(ته همین فایل) میآید که لایه زیرینش rgba(10,26,47,.90)⟶rgba(18,41,77,.94) است
بهعلاوه سه رادیال روی آن. ضرب عبور نور: بین 3.6٪ و 10٪ — یعنی دستبالا یکدهم
پسزمینه اصلاً به چشم میرسد، آن هم از پشت سرمهای تیره. پشت پنل هم
.exr-pish-sec است با background:var(--paper-2) که تقریباً تخت است، و بلور ۲۶ پیکسلی
روی سطح تخت هیچ فرقی نمیسازد. یعنی هزینه هر فریم را میدادیم برای اثری که
عملاً دیده نمیشد.
⚠️ اگر روزی زمینه را شفافتر کردی (آلفای زیر ~۰٫۶)، آنوقت شاید ارزشش را داشته
باشد — ولی همان موقع دوباره همین عدد را اندازه بگیر، حدس نزن. */
border:1px solid rgba(255,255,255,.16);
box-shadow:0 44px 96px -36px rgba(10,26,47,.85),
inset 0 1px 0 rgba(255,255,255,.26),
inset 0 -60px 90px -70px rgba(127,212,255,.5)}
/* درخشش لبه بالا — همان باریکه نوری که لبه شیشه واقعی میگیرد */
.exr-pish-sheen{position:absolute;top:0;inset-inline:12%;height:1px;z-index:1;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(31,240,190,.85),rgba(127,212,255,.7),transparent)}
.exr-pish::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.4;
background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1.4px);background-size:30px 30px;
-webkit-mask-image:radial-gradient(75% 85% at 30% 30%,#000 20%,transparent 100%);
mask-image:radial-gradient(75% 85% at 30% 30%,#000 20%,transparent 100%)}
.exr-pish-aur{position:absolute;z-index:-1;width:480px;height:480px;border-radius:50%;top:-180px;
inset-inline-start:32%;filter:blur(80px);mix-blend-mode:screen;pointer-events:none;
background:radial-gradient(circle,rgba(31,240,190,.22),transparent 62%);
animation:exrAur 15s ease-in-out infinite alternate}
/* همان زبان کیکر نسخه ۶، ولی نسخه روی زمینه تیره — دقیقاً مثل
#plans .sec-kicker در صفحه اصلی: کپسول ندارد، گرادیانش روشنتر است. */
.exr-pish-kick{position:relative;display:flex;width:fit-content;align-items:center;gap:10px;
background:none;border:0;border-radius:0;padding:0 0 9px;margin-bottom:13px;
font-size:1rem;font-weight:800;letter-spacing:.15px;
/* ⚠️ اندازهگیریشده: با #A6E4FF روی روشنترین نقطه پنل ۳٫۹۷ میشد و کیکر ۱۶px است
(متن بزرگ حساب نمیشود). تیرهکردن زمینه بهتنهایی کافی نبود، پس خود گرادیان
هم یک پله روشنتر شد. */
background-image:linear-gradient(120deg,#DFFDF5,#DDF3FF 140%);
-webkit-background-clip:text;background-clip:text;color:transparent}
.exr-pish-kick::before{content:"";width:9px;height:9px;flex-shrink:0;border-radius:3px;
background:linear-gradient(135deg,#1FF0BE,#0090DC);transform:rotate(45deg);
box-shadow:0 0 0 5px rgba(31,240,190,.16);animation:exrKickSpin 3.4s ease-in-out infinite}
.exr-pish-kick::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;border-radius:2px;
background:linear-gradient(90deg,transparent,#1FF0BE 20%,#7FD4FF 55%,#1FF0BE 85%,transparent);
animation:exrKickLine 2.6s ease-in-out infinite}
/* ⚠️ ستون چپ گلوگاه ارتفاع بود (۸۵۳ از ۹۷۱ پیکسل پنل)، نه کارت پرداخت.
همه کاهشها اینجا متمرکز شده: سقف تیتر، فاصلهها و تنفس فهرست مزایا. */
.exr-pish h2{font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:900;margin-bottom:10px;line-height:1.38}
/* 🔴 `text-align:justify` برداشته شد. روی متن فارسی کوتاه (سه خط) مرورگر برای
پرکردن خط، فاصله بین کلمهها را تا چند برابر باز میکند و جمله شبیه متن
شکسته دیده میشود — دقیقاً همان چیزی که در اسکرینشات معلوم بود.
⚠️ فارسی kashida لازم دارد نه inter-word؛ `text-justify:inter-word` روی
خطهای کوتاه همیشه همین حفرهها را میسازد. برای پاراگراف بلند قابلتحمل
است، برای لید سهخطی نه. */
.exr-pish-lead{font-size:.99rem;line-height:1.9;color:#fff;margin-bottom:20px}
/* ⚠️ «جاده مارپیچ» و فهرست ۱۲ ردیفی `.exr-perks` هر دو برداشته شدند و
جایشان اینفوگرافیک پایین آمد. دلیل در همانجا نوشته شده. */
/* ══════════════════════════════════════════════════════════════════════════
اینفوگرافیک مزایا
══════════════════════════════════════════════════════════════════════════
🔴 نسخه قبلی چهار کارت **کاملاً متنی** در یک شبکه ۲×۲ بود. گزارش کاربر:
«چهار مربع ساده، صرفاً متنبیس، چشم را خسته میکند». و حق داشت: این آخرین
نقطه تصمیم فروش است و کسی که تا اینجا آمده، چهار پاراگراف پنجخطی را
نمیخواند. حالا هر کارت یک **نمودار واقعی** دارد (pish_viz()) و متن فقط
زیرنویس نمودار است.
⚠️ شبکه عمداً نامتقارن است: کارت زنجیره شغلی و کارت حلقههای بومی افقیاند
و کل عرض را میگیرند (`.exr-ic-w`)، دو کارت دیگر نیمعرض. چهار خانه
هماندازه دقیقاً همان چیزی بود که «مربع ساده» بهنظر میرسید.
⚠️ همه انیمیشنهای ورودی پشت `.exr-info.on` هستند و `on` را جاوااسکریپت
میگذارد — پس کاربر بدون JS نمودار **کامل و ساکن** میبیند، نه یک کارت
خالی. اگر شرط `.on` را برداری، نمودارها برای آن کاربر نامرئی میشوند.
══════════════════════════════════════════════════════════════════════════ */
.exr-info{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin-bottom:22px}
.exr-ic{position:relative;isolation:isolate;overflow:hidden;border-radius:20px;
padding:17px 18px 16px;display:flex;flex-direction:column;gap:13px;
background:
radial-gradient(130% 92% at 100% 0%,rgba(127,247,216,.12),transparent 58%),
linear-gradient(155deg,rgba(255,255,255,.135),rgba(255,255,255,.045));
border:1px solid rgba(127,247,216,.24);
box-shadow:0 22px 46px -32px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.16);
transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s ease,box-shadow .35s ease}
.exr-ic-w{grid-column:1/-1}
/* باریکه نور لبه بالا — همان امضای شیشهای خود پنل، در مقیاس کارت */
.exr-ic::before{content:"";position:absolute;top:0;inset-inline:14%;height:1px;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(31,240,190,.85),rgba(127,212,255,.6),transparent)}
/* ⚠️ `z-index:-1` روی این لکه امن است چون کارت `isolation:isolate` دارد:
لکه زیر محتوا و **بالای** زمینه کارت مینشیند و از کارت بیرون نمیزند. */
.exr-ic-gl{position:absolute;z-index:-1;inset-block-start:-46%;inset-inline-end:-26%;
width:190px;height:190px;border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgba(127,247,216,.2),transparent 68%)}
@media(hover:hover){
.exr-ic:hover{transform:translateY(-3px);border-color:rgba(127,247,216,.5);
box-shadow:0 30px 58px -30px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.24)}
}
.exr-ic-h{display:flex;align-items:flex-start;gap:11px}
.exr-ic-i{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:12px;
color:#fff;background:linear-gradient(135deg,#00A87A,#0090DC);
box-shadow:0 10px 22px -12px rgba(0,144,220,.95),inset 0 1px 0 rgba(255,255,255,.3)}
.exr-ic-i svg{width:22px;height:22px}
/* ⚠️ line-height اینجا ۱٫۴ است نه ۱٫۶۵ی که بقیه صفحه دارد: عنوان کارت
نیمعرض تا سه خط میرود و با ۱٫۶۵ سر کارت ۱۱۵px میشد — یعنی یکسوم
ارتفاع کارت پیش از آنکه نمودار شروع شود. */
.exr-ic-tt{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
.exr-ic-tt b{font-size:.97rem;font-weight:900;color:#fff;line-height:1.4}
/* ⚠️ نام کلاس `exr-nb` است نه `exr-first`: نسخه قبلی `exr-first` بود و همان
نام نشان بخش «روش پنجمحوری» را داشت، پس این رنگ طلایی آن کپسول شیشهای
را هم طلایی میکرد. دو نشان متفاوت، دو نام. */
.exr-nb{font-style:normal;font-size:.7rem;font-weight:900;letter-spacing:.2px;white-space:nowrap;
padding:4px 10px;border-radius:99px;color:#3A2400;
background:linear-gradient(120deg,#FFE9BC,#F4C86B 68%,#FFE0A0);
box-shadow:0 5px 14px -6px rgba(244,200,107,.75)}
.exr-ic-p{margin:0;font-size:.87rem;line-height:1.95;color:rgba(255,255,255,.9)}
.exr-ic-p b{font-weight:800;color:#7FF7D8}
/* ── زنجیره رشته ⟵ شغل ⟵ درآمد ─────────────────────────────────────────── */
.exr-flow{display:flex;align-items:stretch;gap:6px}
.exr-fl-n{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;
text-align:center;padding:11px 6px;border-radius:14px;
background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.14)}
.exr-fl-n b{display:block;font-size:1.42rem;font-weight:900;line-height:1.25;letter-spacing:-.3px;
background:linear-gradient(120deg,#BDFBE9,#BEE7FF);
-webkit-background-clip:text;background-clip:text;color:transparent}
.exr-fl-n>span:not(.exr-fl-rng){display:block;margin-top:3px;font-size:.74rem;font-weight:700;
color:rgba(255,255,255,.74)}
.exr-fl-a{width:34px;height:16px;flex:none;align-self:center;color:rgba(127,247,216,.8)}
.exr-fl-d{stroke-dasharray:5 5}
/* بازه درآمد عدد ندارد چون به شغل و شهر بستگی دارد — پس یک نوار بازه است،
نه یک عدد ساختگی. */
.exr-fl-rng{display:block;position:relative;height:9px;border-radius:99px;margin:2px 4px 0;
overflow:hidden;background:rgba(255,255,255,.14)}
.exr-fl-rng i{position:absolute;inset-block:0;inset-inline-start:23%;width:54%;border-radius:99px;
background:linear-gradient(90deg,#3FEFC4,#7FD4FF)}
.exr-meter-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
margin-bottom:7px;font-size:.76rem;line-height:1.7;color:rgba(255,255,255,.74)}
.exr-meter-h b{flex:none;font-weight:900;font-size:.79rem;color:#7FF7D8}
.exr-meter-b{position:relative;height:8px;border-radius:99px;overflow:hidden;
background:rgba(255,255,255,.11);box-shadow:inset 0 1px 2px rgba(0,0,0,.32)}
/* ⚠️ زاویه گرادیان RTL نمیشود (90deg همیشه «به راست» است)، پس عمداً 270deg
است: نوار از راست پر میشود و باید نوک **چپش** روشنترین رنگ را داشته باشد. */
.exr-meter-b i{position:absolute;inset-block:0;inset-inline-start:0;width:var(--w,0%);border-radius:99px;
background:linear-gradient(270deg,#00A87A,#3FEFC4 55%,#7FD4FF)}
/* ── نمودار سه سرنوشت ممکن ──────────────────────────────────────────────── */
.exr-chart svg{display:block;width:100%;height:auto}
.exr-lgd{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;
justify-content:space-between;gap:5px 10px}
.exr-lgd li{display:flex;align-items:center;gap:5px;font-size:.75rem;font-weight:700;
white-space:nowrap;color:rgba(255,255,255,.88)}
.exr-lgd i{width:14px;height:3px;border-radius:2px;flex:none;background:var(--c)}
.exr-drv{margin:8px 0 0;font-size:.75rem;line-height:1.7;color:rgba(255,255,255,.6)}
/* ── ۴ حرف در برابر ۸ کارکرد ─────────────────────────────────────────────── */
.exr-cog{display:flex;flex-direction:column;gap:10px}
.exr-cog-r{padding:10px 12px 11px;border-radius:14px;
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.exr-cog-r.is-new{border-color:rgba(63,239,196,.42);
background:linear-gradient(150deg,rgba(63,239,196,.17),rgba(127,212,255,.07))}
.exr-cog-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:9px}
.exr-cog-h span{font-size:.79rem;font-weight:700;color:rgba(255,255,255,.72)}
.exr-cog-h b{flex:none;font-size:.82rem;font-weight:900;color:rgba(255,255,255,.62)}
.exr-cog-r.is-new .exr-cog-h span{color:#fff}
.exr-cog-r.is-new .exr-cog-h b{color:#7FF7D8}
/* بلوکها برچسب لاتین ندارند و عمداً: در کارتی به عرض ~۲۷۰px هشت برچسب زیر
۱۰px میافتاد. نام کارکردها یکجا و در اندازه خوانا زیر نمودار آمده. */
.exr-cog-bl{display:flex;gap:4px}
.exr-cog-bl i{flex:1;height:12px;border-radius:4px;background:rgba(255,255,255,.22)}
.exr-cog-r.is-new .exr-cog-bl i{background:linear-gradient(180deg,#7FF7D8,#25C8E0);
box-shadow:0 3px 10px -4px rgba(63,239,196,.9)}
.exr-cog-n{margin:0;text-align:center;font-size:.75rem;font-weight:700;letter-spacing:.45px;
color:rgba(255,255,255,.58)}
/* ── چهار حلقه بومیگزینی ───────────────────────────────────────────────────
🔴 اسم این کلاس اول `exr-ring` بود و **با حلقه شمارش معکوس همین صفحه**
(خط ~۷۸۸) تصادم داشت: آن قاعده `transform:rotate(-90deg)` و `width:100%`
دارد، پس این جعبه ۹۰ درجه میچرخید و فهرست کنارش به ستون ۲۱ پیکسلی
له میشد. ⚠️ پیش از افزودن هر کلاس `exr-*` تازه، اول در همین بلوک
جستوجویش کن — این دومین تصادم نام همین بخش بود. */
.exr-bmg{display:flex;align-items:center;gap:20px}
.exr-bmg svg{width:126px;height:126px;flex:none}
.exr-rg-l{list-style:none;margin:0;padding:0;flex:1;min-width:0;display:grid;gap:8px}
/* ⚠️ nowrap لازم است: بدون آن «بومی ناحیهای» در ستون باریک میشکند و هر
ردیف دوخطی میشود ⟹ فهرست از خود حلقهها بلندتر و از کارت بیرون میزند. */
.exr-rg-l li{display:flex;align-items:center;gap:8px;font-size:.83rem;line-height:1.6;
white-space:nowrap}
.exr-rg-l>li>i{width:12px;height:12px;flex:none;border-radius:50%;border:2px solid var(--c)}
.exr-rg-l li>span{width:20px;height:20px;flex:none;display:grid;place-items:center;border-radius:6px;
font-size:.72rem;font-weight:900;color:rgba(255,255,255,.78);background:rgba(255,255,255,.1)}
.exr-rg-l b{font-weight:800;color:#fff}
.exr-rg-l em{font-style:normal;margin-inline-start:auto;flex:none;
font-size:.79rem;font-weight:800;color:#7FF7D8}
.exr-more-h{font-size:.83rem;font-weight:800;color:#7FF7D8;margin-bottom:9px}
.exr-mini2{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:7px 14px}
.exr-mini2 li{display:flex;align-items:flex-start;gap:8px;font-size:.84rem;line-height:1.75;color:#fff;opacity:.92}
/* ⚠️ تیک SVG جایگزین شبهعنصر CSS شد: آن نسخه با `border-inline-start` ساخته
میشد و در RTL به `border-right` ترجمه میشد ⟹ بهجای تیک، یک زاویه برعکس. */
.exr-ck{width:16px;height:16px;flex:none;margin-top:3px;color:#3FEFC4}
/* ── ورود پلکانی ─────────────────────────────────────────────────────────
کلاس `on` را جاوااسکریپت میگذارد، پس بدون JS همهچیز دیده میشود.
⚠️ همین قاعده برای **نمودارها** هم هست: هر حالت «هنوز کشیده نشده» باید
پشت `.exr-info.on` باشد، وگرنه کاربر بدون JS کارت بینمودار میبیند. */
.exr-info.on .exr-ic,.exr-mini2.on li{opacity:0;transform:translateY(12px);
transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1);
transition-delay:calc(var(--i,0) * .06s)}
.exr-info.on .exr-ic.in{opacity:1;transform:none}
.exr-mini2.on li.in{opacity:.92;transform:none}
/* خط گذشته نمودار: با `pathLength="1"` نیازی به اندازهگیری طول مسیر نیست */
.exr-info.on .exr-ln{stroke-dasharray:1;stroke-dashoffset:1;
transition:stroke-dashoffset 1s .25s cubic-bezier(.35,0,.15,1)}
.exr-info.on .exr-ic.in .exr-ln{stroke-dashoffset:0}
/* ⚠️ سه خط پیشبینی **نقطهچیناند** (یعنی dasharray اشغال است) پس با
dashoffset کشیده نمیشوند — با بازشدن یک clipPath از روی نقطه انشعاب
کشیده میشوند. `transform-box:fill-box` لازم است وگرنه مبدأ transform
گوشه کل SVG میشود نه لبه خود مستطیل. */
.exr-info.on .exr-clip{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);
transition:transform 1s .5s cubic-bezier(.3,0,.2,1)}
.exr-info.on .exr-ic.in .exr-clip{transform:scaleX(1)}
.exr-info.on .exr-meter-b i{width:0;transition:width 1.1s .35s cubic-bezier(.22,1,.36,1)}
.exr-info.on .exr-ic.in .exr-meter-b i{width:var(--w,0%)}
.exr-info.on .exr-cog-bl i{opacity:0;transform:scaleY(.25);transform-origin:bottom;
transition:transform .42s cubic-bezier(.34,1.5,.64,1),opacity .3s;
transition-delay:calc(.3s + var(--i,0) * .05s)}
.exr-info.on .exr-ic.in .exr-cog-bl i{opacity:1;transform:none}
.exr-info.on .exr-rg{transform-box:fill-box;transform-origin:center;transform:scale(.55);opacity:0;
transition:transform .6s cubic-bezier(.34,1.4,.64,1),opacity .45s;
transition-delay:var(--d,0s)}
.exr-info.on .exr-ic.in .exr-rg{transform:none;opacity:1}
/* جریان نقطهچین زنجیره — فقط بعد از دیدهشدن کارت، تا اسکرول را سنگین نکند */
.exr-info.on .exr-ic.in .exr-fl-d{animation:exrFlowD 1.5s linear infinite}
@keyframes exrFlowD{to{stroke-dashoffset:-20}}
@media(prefers-reduced-motion:reduce){
.exr-info.on .exr-ic,.exr-mini2.on li{opacity:1;transform:none;transition:none}
.exr-mini2.on li{opacity:.92}
.exr-info.on .exr-ln{stroke-dashoffset:0;transition:none}
.exr-info.on .exr-clip{transform:none;transition:none}
.exr-info.on .exr-meter-b i{width:var(--w,0%);transition:none}
.exr-info.on .exr-cog-bl i{opacity:1;transform:none;transition:none}
.exr-info.on .exr-rg{opacity:1;transform:none;transition:none}
.exr-info.on .exr-ic.in .exr-fl-d{animation:none}
.exr-ic{transition:none}
}
@media(max-width:620px){
.exr-info,.exr-mini2{grid-template-columns:1fr}
.exr-ic-w{grid-column:auto}
.exr-ic-tt b{font-size:.95rem}
/* سه گره زنجیره + دو فلش در عرض ~۲۸۰px جا نمیشود مگر با فلش باریکتر.
شکستن خط (wrap) اینجا جواب نمیدهد: فلش تنها در ردیف دوم بیمعنی است. */
.exr-flow{gap:4px}
.exr-fl-a{width:20px}
.exr-fl-n{padding:10px 4px}
.exr-fl-n b{font-size:1.16rem}
.exr-fl-n>span:not(.exr-fl-rng){font-size:.7rem}
.exr-bmg{flex-direction:column;align-items:stretch;gap:14px}
.exr-bmg svg{align-self:center}
}
/* 🔴 کارت قیمت چسبان شد: ستون چپ بعد از کارت **خالی** میماند و کاربر وسط
خواندن مزایا دیگر دکمه پیشثبتنام را نمیبیند — یعنی درست وقتی قانع شده،
راه اقدام از جلوی چشمش رفته.
⚠️ `align-self:start` لازم است وگرنه آیتم گرید کل ارتفاع را میگیرد و
چسبندگی جایی برای حرکت ندارد.
⚠️ زیر ۹۸۰px ستونها یکی میشوند و کارت **بعد از** فهرست میآید؛ چسباندنش
آنجا فقط جلوی محتوا را میگیرد. */
.exr-pish-r{display:grid;place-items:center;align-self:start;
position:sticky;top:clamp(72px,9vh,104px)}
@media(max-width:980px){.exr-pish-r{position:static;align-self:auto}}
/* ---------- کارت پرداخت: شیشه تیره ----------
⚠️ این کارت قبلاً سفید مات بود و کاربر گزارش داد «حس نسخه شیشهای جدید را ندارد» —
دقیقاً همان ایرادی که یکبار برای کارتهای طرح صفحه اصلی هم داده بود.
قاعده ثابتشده این پروژه: **روی سطح تیره، شیشه هم تیره میشود و متنش سفید.**
سفید نیمهشفاف روی زمینه تیره «کارت کدر» خوانده میشود، نه شیشه.
چون بدنه تیره شد، هر رنگ متن تیرهای که از --ink/--muted میآمد باید صریحاً
بازنویسی شود؛ فهرست کاملش پایینتر آمده و هیچکدام جا نیفتاده. */
.exr-pish-card{position:relative;isolation:isolate;border-radius:28px;padding:26px 24px 24px;
width:100%;max-width:360px;text-align:center;color:#fff;
background:
radial-gradient(126% 58% at 16% -12%,rgba(31,240,190,.16),rgba(31,240,190,0) 58%),
radial-gradient(110% 80% at 100% 104%,rgba(0,144,220,.2),rgba(0,144,220,0) 62%),
linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,.05) 52%,rgba(255,255,255,.09)),
linear-gradient(150deg,rgba(5,15,30,.82),rgba(8,26,50,.76));
/* 🔴 این هم به همان دلیل .exr-pish برداشته شد (۰٫۲۴ مگاپیکسل، ۱۲٪ دیگر از سطح کل).
نکته اضافه: پشت این کارت **خود .exr-pish** است، یعنی یک گرادیان نرم سرمهای.
بلور ۲۲ پیکسلی روی گرادیان نرم همان گرادیان نرم را میدهد — صفر مطلق تغییر دیداری.
⚠️ بلوک @supports not (backdrop-filter) چند خط پایینتر از قبل حالت کدر این کارت
را تعریف کرده و طراحی از اول آن را پذیرفته بود؛ یعنی این ظاهر تازه نیست.
⚠️ این دو با هم ۹۲٪ سطح backdrop-filter صفحه بودند. */
border:1px solid rgba(255,255,255,.2);
border-top-color:rgba(255,255,255,.4);
box-shadow:0 36px 84px -28px rgba(0,0,0,.85),
inset 0 1px 0 rgba(255,255,255,.28),
inset 0 -22px 44px -32px rgba(127,212,255,.4)}
/* بازنویسی کامل رنگهای متن — هرکدام جا بیفتد، تیره روی تیره میشود */
.exr-pish-card .exr-pish-price b{color:#fff}
.exr-pish-card .exr-pish-price span{color:#fff}
.exr-pish-card .exr-pish-off{color:#fff}
.exr-pish-card .exr-pish-off b{color:#1FF0BE}
.exr-pish-card .exr-pish-hint{color:#fff}
.exr-pish-card .exr-pish-mini li{color:#fff}
.exr-pish-card .exr-pish-mini{border-top-color:rgba(255,255,255,.18)}
.exr-pish-card .exr-pish-mini svg path{stroke:#1FF0BE}
/* دو کادر کهربایی هم نسخه تیره گرفتند (زمینه روشنشان روی کارت تیره لکه میشد) */
/* ⚠️ با #FFD473 روی زمینه ۰٫۱۶ اندازهگیری شد: ۳٫۷۹ — زیر حد، و متن ۱۲٫۵px است.
هم زمینه رقیقتر شد (کامپوزیت تیرهتر) هم رنگ متن روشنتر. */
.exr-pish-card .exr-pish-days{background:rgba(242,184,75,.10);color:#FFE7BC;
border:1px solid rgba(242,184,75,.32)}
.exr-pish-card .exr-pish-days b{color:#FFF3DA}
.exr-pish-card .exr-pish-after{color:#E4EEFA;opacity:.92}
.exr-pish-card .exr-pish-warn{background:rgba(242,184,75,.14);border-color:rgba(242,184,75,.38);color:#FFD473}
/* قاب گرادیانی چرخان دور کارت.
⚠️ حالا که بدنه کارت شفاف است، این گرادیان باید واقعاً «قاب» شود؛ وگرنه از
پشت شیشه سرتاسر کارت دیده میشود. با ماسک xor فقط لبه ۲.۵ پیکسلی میماند. */
.exr-pish-card::before{content:"";position:absolute;inset:-2.5px;border-radius:30px;z-index:-1;
padding:2.5px;
background:conic-gradient(from var(--exa,0deg),#1FF0BE,#0090DC,#F2B84B,#1FF0BE);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
animation:exrSpin 5.5s linear infinite}
/* مرورگر بدون backdrop-filter: کارت کدر **تیره** شود (نه سفید) — متن سفید است */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.exr-pish-card{background:linear-gradient(150deg,#0B1F3C,#081A32)}
}
@property --exa{syntax:'';initial-value:0deg;inherits:false}
@keyframes exrSpin{to{--exa:360deg}}
/* ⚠️ گرادیان قبلی #C98016→#E8636F بود و متن سفید روی **هر دو** سرش میافتاد:
۳٫۱۹ و ۳٫۲۶. چون فونت .8rem (۱۲٫۸px) است، قاعده متن درشت بولد (از ۱۴px)
اعمال نمیشود و کف ۴٫۵ است نه ۳٫۰. هر دو سر یک پله تیره شد — نه بزرگکردن
فونت، چون این بج چسبیده به لبه کارت است و ارتفاعش جا ندارد.
حالا: #9A5E0D = ۵٫۲۸ و #BE3247 = ۵٫۶۲. */
.exr-pish-badge{position:absolute;top:-15px;inset-inline-start:50%;transform:translateX(50%);
background:linear-gradient(135deg,#9A5E0D,#BE3247);color:#fff;font-size:.8rem;font-weight:800;
padding:7px 18px;border-radius:100px;white-space:nowrap;
box-shadow:0 10px 24px -10px rgba(232,99,111,.9);animation:exrBadge 2.6s ease-in-out infinite}
@keyframes exrBadge{0%,100%{transform:translateX(50%) translateY(0)}50%{transform:translateX(50%) translateY(-4px)}}
/* مهر «بازگشت وجه» — دو حلقه نقطهچین چرخان */
.exr-stamp{position:absolute;top:-34px;inset-inline-end:-26px;width:92px;height:92px;pointer-events:none}
.exr-stamp .r1x,.exr-stamp .r2x{position:absolute;inset:0;border-radius:50%}
.exr-stamp .r1x{border:2px dashed rgba(31,240,190,.75);animation:exrOrbit 16s linear infinite}
.exr-stamp .r2x{inset:8px;border:1.5px dashed rgba(255,255,255,.5);animation:exrOrbit 12s linear infinite reverse}
.exr-stamp span{position:absolute;inset:0;display:grid;place-content:center;text-align:center;
font-size:.62rem;font-weight:900;line-height:1.7;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.exr-pish-price{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:10px 0 5px}
.exr-pish-price b{font-size:clamp(2.1rem,3.4vw,2.6rem);font-weight:900;line-height:1;color:var(--ink)}
.exr-pish-price span{font-size:.95rem;font-weight:700;color:var(--muted)}
.exr-pish-off{font-size:.86rem;color:var(--muted);margin-bottom:13px}
.exr-pish-off b{color:var(--teal-dark);font-weight:800}
.exr-pish-days{display:inline-flex;align-items:center;gap:8px;background:#FBEFD8;color:#8A5709;
font-size:.78rem;font-weight:800;padding:6px 13px;border-radius:100px;margin-bottom:15px}
.exr-pish-days i{font-style:normal}
/* 🔴 هشدار «بعد از این تاریخ چه میشود». عمداً کهربایی نیست و کنار شمارش معکوس
لکه دوم رنگی نمیسازد — این یک اطلاع عملیاتی است نه یک نشان فوریت. */
.exr-pish-after{margin:-7px 0 14px;font-size:.775rem;font-weight:600;line-height:1.95;
color:var(--ink);opacity:.9;text-align:start}
.exr-pish-btn{width:100%;justify-content:center;font-size:1.04rem;padding-block:14px;border-radius:16px}
.exr-pish-hint{font-size:.78rem;color:var(--muted);margin-top:9px}
.exr-pish-warn{background:#FBEFD8;border:1px solid #E8C88A;color:#8A5709;border-radius:14px;
padding:12px 14px;font-size:.84rem;line-height:1.85;margin-bottom:13px;text-align:start}
/* عنوان کوچک بالای هر فهرست — بدونش هفت ردیف پشت سر هم مثل دیوار خوانده میشود */
.exr-pish-mini-h{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
font-size:.78rem;font-weight:800;color:var(--teal-dark);letter-spacing:.1px}
.exr-pish-card .exr-pish-mini-h{color:#1FF0BE;border-top-color:rgba(255,255,255,.18)}
/* فهرست دوم بلافاصله زیر عنوان خودش میآید، پس خط جداکننده دوباره نمیخواهد */
.exr-pish-mini,.exr-pish-mini-h + .exr-pish-mini{list-style:none;display:grid;gap:7px;
margin-top:9px;padding-top:0;border-top:0}
/* ⚠️ وسطچین بود؛ با سه ردیف کوتاه جواب میداد ولی با ده ردیف چندکلمهای
لبه راست ناهموار میسازد و چشم جایی برای شروع پیدا نمیکند. */
.exr-pish-mini li{display:flex;align-items:flex-start;gap:9px;font-size:.82rem;color:var(--muted);
font-weight:600;text-align:start;line-height:1.85}
.exr-pish-mini svg{width:16px;height:16px;flex:none;margin-top:4px}
.exr-pish-mini svg path{stroke:var(--teal-dark);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* ---------- ۳٫۵) شغلمحور — ستون تمایز ----------
🔴 چرا این بخش ساخته شد: کل صفحه درباره «روش» حرف میزد و روش را هر کسی
میتواند ادعا کند. سه چیزی که رقیب **نمیتواند** بسازد (داده شغل و درآمد،
بومیگزینی محاسبهشده، بازه رتبه از کارنامه واقعی) هیچجای صفحه نبودند.
⚠️ دو کارت اول عمداً به /mashaghel و /kodam-daneshgah لینکاند: ممیزی
لینکسازی نشان داد این دو صفحه هرکدام فقط **یک** لینک محتوایی داشتند. */
.exr-job{background:linear-gradient(168deg,#0A0620 0%,#171038 52%,#0E2246 100%);color:#fff;
padding-block:86px;position:relative;overflow:clip;isolation:isolate}
.exr-job::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.42;
background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.4px);background-size:32px 32px;
-webkit-mask-image:radial-gradient(72% 66% at 50% 30%,#000 22%,transparent 100%);
mask-image:radial-gradient(72% 66% at 50% 30%,#000 22%,transparent 100%)}
.exr-job .exr-head h2{color:#fff}
.exr-job .exr-head p{color:#C9D4EA}
/* کیکر «اولین بار در ایران» — روی زمینه تیره متن گرادیانی خوانا نیست، پس اینجا کپسول است */
.exr-job-first{display:flex;width:fit-content;margin-inline:auto;align-items:center;gap:8px;
padding:8px 16px;border-radius:99px;margin-bottom:18px;
font-size:.85rem;font-weight:800;color:#0A0620;
background:linear-gradient(100deg,#1FF0BE,#F2B84B);
box-shadow:0 8px 26px -12px rgba(31,240,190,.7)}
.exr-job-first i{width:8px;height:8px;border-radius:50%;background:#0A0620;flex:none;
animation:exrJobDot 2s ease-in-out infinite}
@keyframes exrJobDot{0%,100%{opacity:.35}50%{opacity:1}}
/* دو ستون مقایسه — «آنها» در برابر «ما» */
.exr-job-vs{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:900px;
margin:34px auto 0;align-items:stretch}
.exr-job-col{border-radius:20px;padding:24px 22px;border:1px solid rgba(255,255,255,.13);
background:rgba(255,255,255,.05)}
.exr-job-col h3{font-size:1.05rem;font-weight:900;margin:0 0 4px;display:flex;align-items:center;gap:9px}
.exr-job-col .exr-job-sub{font-size:.82rem;color:#93A3C2;margin:0 0 15px}
.exr-job-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.exr-job-col li{font-size:.93rem;line-height:1.95;display:flex;gap:9px;align-items:flex-start;color:#DDE5F3}
.exr-job-col li span{flex:none;width:19px;height:19px;border-radius:50%;margin-top:5px;
display:grid;place-items:center;font-size:.7rem;font-weight:900}
/* ستون «آنها» عمداً کمرنگتر است — مقایسه باید در نگاه اول دیده شود، نه با خواندن */
.exr-job-them{opacity:.72}
.exr-job-them li span{background:rgba(232,99,111,.22);color:#FF9AA4}
.exr-job-us{border-color:rgba(31,240,190,.4);background:rgba(31,240,190,.08);
box-shadow:0 24px 60px -34px rgba(31,240,190,.6)}
.exr-job-us li span{background:rgba(31,240,190,.2);color:#1FF0BE}
.exr-job-us h3{color:#1FF0BE}
/* سه دارایی — با عدد زنده */
/* 🔴 با دارایی چهارم، repeat(3,1fr) یک کارت **یتیم** در ردیف دوم میساخت —
همان باگی که یکبار در شبکه ۵تایی همین صفحه خورده بودیم. حالا ۲×۲ روی
دسکتاپ که قرینه است، و تکستونی روی گوشی. */
.exr-job-assets{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:1040px;margin:26px auto 0}
@media(max-width:760px){.exr-job-assets{grid-template-columns:1fr}}
.exr-asset{border-radius:20px;padding:24px 20px;border:1px solid rgba(255,255,255,.13);
background:rgba(255,255,255,.05);display:flex;flex-direction:column;gap:9px;
transition:transform .25s ease,border-color .25s ease}
.exr-asset b.exr-asset-n{font-size:2.1rem;font-weight:900;line-height:1.2;
background-image:linear-gradient(100deg,#1FF0BE,#7FD4FF);
-webkit-background-clip:text;background-clip:text;color:transparent}
/* واریانت متنی — کارت وسط عدد ندارد و با اندازه عددی، ریتم سه کارت را میشکست */
.exr-asset b.exr-asset-n.txt{font-size:1.5rem;letter-spacing:-.3px}
.exr-asset h4{font-size:1rem;font-weight:900;margin:0;color:#fff}
.exr-asset p{font-size:.87rem;line-height:2;color:#B6C4DC;margin:0;flex:1}
.exr-asset a{font-size:.86rem;font-weight:800;color:#1FF0BE;
padding:10px 0 0;display:inline-flex;align-items:center;gap:6px}
.exr-asset-tag{position:absolute;inset-block-start:0;inset-inline-end:0}
@media(hover:hover){
.exr-asset:hover{transform:translateY(-4px);border-color:rgba(31,240,190,.45)}
.exr-asset a:hover{color:#7FD4FF}
}
.exr-job-cta{display:flex;justify-content:center;margin-top:32px}
/* ---------- نوار فوریت — «هر روزی که میگذرد» ---------- */
/* ⚠️ همه عددهای این نوار **واقعی**اند (روز باقیمانده و شمار پرداختشده).
فوریت ساختگی یکبار جواب میدهد و بعد برند را میسوزاند. */
.exr-urg{border-block:1px solid var(--line);background:var(--paper-2);padding-block:30px}
.exr-urg-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 26px;text-align:center}
.exr-urg-i{display:flex;align-items:center;gap:10px;font-size:.94rem;font-weight:700;color:var(--ink)}
/* ⚠️ همان تله .exr-proof-cap: کادر flex است، پس **کل** متن باید داخل یک
باشد. اگر متن آزاد بماند، هر تکه متن و هر یک آیتم فلکس جدا میشود و
جمله تکهتکه میشکند — یکبار «محدود» وسط جمله افتاد وسط خط خودش. */
.exr-urg-t{line-height:1.9}
/* بزرگنمایی فقط برای **عدد**. تأکید متنی با .em میآید، وگرنه جمله از هم میپاشد. */
.exr-urg-t b.n{font-size:1.5rem;font-weight:900;color:var(--teal-dark);vertical-align:-2px}
.exr-urg-t b.em{font-weight:900;color:var(--teal-dark)}
.exr-urg-i.hot .exr-urg-t b.n{color:#C0492F}
.exr-urg-i svg{width:22px;height:22px;flex:none;stroke:var(--muted);fill:none;stroke-width:1.9}
.exr-urg-sep{width:1px;height:30px;background:var(--line)}
@media(max-width:760px){
.exr-job-vs,.exr-job-assets{grid-template-columns:1fr}
.exr-urg-sep{display:none}
.exr-urg-in{gap:12px 18px}
}
/* ---------- ۱۰) اشتباههای رایج ---------- */
.exr-mistakes{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:44px}
.exr-mis{position:relative;background:var(--paper-2);border:1px solid var(--line);border-radius:20px;
padding:26px 26px 26px;padding-inline-start:66px;overflow:clip;
transition:transform .35s ease,box-shadow .35s ease}
.exr-mis::before{content:"";position:absolute;top:0;inset-inline:0;height:3px;
background:linear-gradient(90deg,#E8636F,transparent 70%);opacity:.7}
.exr-mis-x{position:absolute;inset-inline-start:22px;top:26px;width:30px;height:30px;border-radius:50%;
background:#FBE2E2;color:#B33A20;display:grid;place-items:center;font-size:.88rem;font-weight:900}
.exr-mis h3{font-size:1.07rem;font-weight:800;margin-bottom:8px;color:var(--ink)}
.exr-mis p{font-size:.91rem;line-height:2;color:var(--muted)}
.exr-disc{margin-top:30px;font-size:.86rem;line-height:2.05;color:var(--muted);
background:var(--paper-2);border:1px dashed var(--line);border-radius:16px;padding:17px 20px}
/* ---------- ۱۱) ابزارهای رایگان ---------- */
.exr-tools-sec{background:var(--paper-2)}
.exr-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-top:44px}
/* 🔴 auto-fit تنها کافی نبود: روی نمایشگر بزرگ ۴ کارت بالا و **یکی تنها** پایین
میافتاد — گزارش کاربر: «تقارن ندارد». حالا سه چیدمان عمدی داریم و هیچکدام
کارت یتیم نمیسازد. عنوان بخش هم «این پنج را ببین» است، پس یکردیف پنجتایی
روی دسکتاپ دقیقاً همان چیزی است که تیتر وعده میدهد. */
@media(min-width:1060px){
.exr-tools{grid-template-columns:repeat(5,1fr);gap:14px}
/* در ستون باریکتر، فاصلهها و آیکن کمی جمع میشوند تا متن نفس بکشد */
.exr-tool{padding:24px 19px;border-radius:20px}
.exr-tool-i{width:48px;height:48px;border-radius:15px;margin-bottom:13px}
.exr-tool-i svg{width:24px;height:24px}
.exr-tool h3{font-size:1.04rem}
.exr-tool p{font-size:.85rem;line-height:1.95;margin-bottom:13px}
.exr-tool b{font-size:.85rem}
}
/* بین ۷۶۰ و ۱۰۶۰: ۳+۲ وسطچین. شبکه ۶ ستونی و هر کارت ۲ ستون؛ دو کارت آخر
یک ستون جابهجا میشوند تا دقیقاً وسط بیفتند. */
@media(min-width:760px) and (max-width:1059px){
.exr-tools{grid-template-columns:repeat(6,1fr)}
.exr-tools > .exr-tool{grid-column:span 2}
.exr-tools > .exr-tool:nth-child(4){grid-column:2 / span 2}
.exr-tools > .exr-tool:nth-child(5){grid-column:4 / span 2}
}
/* بین ۵۲۰ و ۷۶۰: ۲+۲+۱ و کارت پنجم دقیقاً وسط. شبکه ۴ ستونی، هر کارت ۲ ستون. */
@media(min-width:520px) and (max-width:759px){
.exr-tools{grid-template-columns:repeat(4,1fr);gap:16px}
.exr-tools > .exr-tool{grid-column:span 2}
.exr-tools > .exr-tool:nth-child(5){grid-column:2 / span 2}
}
@media(max-width:519px){ .exr-tools{grid-template-columns:1fr} }
.exr-tool{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:24px;
padding:30px 26px;display:block;color:inherit;overflow:clip;
transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.exr-tool::before{content:"";position:absolute;inset:auto -30% -55% -30%;height:80%;opacity:0;
background:radial-gradient(closest-side,rgba(0,151,109,.18),transparent);transition:opacity .4s ease;
pointer-events:none}
.exr-tool-i{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;margin-bottom:16px;
background:var(--grad-brand);color:#fff;box-shadow:var(--glow-teal)}
.exr-tool-i svg{width:28px;height:28px}
.exr-tool h3{font-size:1.16rem;font-weight:800;margin-bottom:9px;color:var(--ink)}
.exr-tool p{font-size:.91rem;line-height:2;color:var(--muted);margin-bottom:16px}
.exr-tool b{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;font-weight:800;color:var(--teal-dark)}
.exr-tool b svg{width:16px;height:16px;transition:translate .3s ease}
/* ---------- خلاصه بومیگزینی روی صفحه مادر ---------- */
/* ⚠️ این بلوک عمداً **کوچک** است. محتوای کامل صفحه خودش را دارد؛ اگر اینجا
بزرگ شود، دوباره همان مشکل «دو نیت روی یک صفحه» برمیگردد. */
.exr-bzt{display:grid;grid-template-columns:1fr 1.15fr;gap:20px;margin-top:38px;
align-items:stretch}
.exr-bzt-list{display:grid;gap:8px;align-content:start;
border-radius:18px;padding:18px 20px}
.exr-bzt-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:9px 0;border-bottom:1px solid rgba(255,255,255,.7)}
.exr-bzt-row:last-child{border-bottom:0}
.exr-bzt-t{font-size:.92rem;font-weight:700;color:var(--ink)}
.exr-bzt-cta{border-radius:18px;padding:22px 24px;display:flex;flex-direction:column;
align-items:flex-start;gap:10px}
.exr-bzt-cta b{font-size:1.05rem;font-weight:800;color:var(--ink)}
.exr-bzt-cta span{font-size:.92rem;line-height:2;color:var(--muted)}
.exr-bzt-cta .btn{margin-top:6px}
@media(max-width:860px){
.exr-bzt{grid-template-columns:1fr;gap:14px}
.exr-bzt-cta{padding:20px}
.exr-bzt-cta .btn{width:100%;text-align:center}
}
/* ---------- صفحه مستقل بومیگزینی ---------- */
.bzp-hero{padding-block:64px 24px}
.bzp-hero h1{font-size:clamp(1.6rem,3.1vw,2.4rem);line-height:1.55;font-weight:900;color:var(--ink)}
.bzp-body{padding-block:12px 80px}
/* ---------- ۱۲) بومیگزینی — داخل کارتهای sx-sec ---------- */
/* 🔴 نسخه اول این بخش زمینههای نیمهشفاف سفید داشت چون روی زمینه رنگی صفحه
مینشست. حالا داخل .sx-sec (کارت **سفید**) است، پس سفیدِ نیمهشفاف روی
سفید یعنی نامرئی. همان تینت #F4F8FDی خود .sx-sec .sx-card استفاده میشود
تا با بقیه صفحه تخمین رتبه یکی باشد. */
/* ⚠️ .sx-wrap پایه ۸۲۰px است؛ این بخش جدولمحور است و کمی بازتر لازم دارد.
بازکردن روی **کارت** انجام میشود نه روی پاراگراف — درس ثبتشده
«سمت چپ باکسها خالیه» در app.css. */
.bz-wrap{max-width:900px;margin-inline:auto}
/* دو کارت ۸۰٪ و ۶۰٪ — همان .sx-cmpی صفحه تخمین رتبه، فقط عدد بزرگتر است
چون اینجا خودِ عدد پیام است نه برچسبش. */
.bz-cmp .c b{font-size:2rem;font-weight:900;color:var(--teal-dark);line-height:1.2;margin:2px 0 6px}
.bz-cmp .c em{font-size:.76rem;line-height:1.8}
.bz-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
background:#F4F8FD;border:1px solid rgba(10,26,47,.10);border-radius:16px;margin:18px 0 4px}
.bz-tbl{width:100%;border-collapse:collapse;font-size:.93rem;min-width:520px}
.bz-tbl th{text-align:start;font-weight:800;color:var(--ink);font-size:.85rem;
padding:13px 17px;background:rgba(10,26,47,.045);
border-bottom:1px solid rgba(10,26,47,.10);white-space:nowrap}
.bz-tbl td{padding:12px 17px;border-bottom:1px solid rgba(10,26,47,.08);line-height:1.9}
.bz-tbl tr:last-child td{border-bottom:0}
.bz-tbl td:first-child{color:var(--ink);font-weight:700;white-space:nowrap}
/* چهار رنگ نوع گزینش. ترتیب معنایی است: هرچه بوم تنگتر رنگ گرمتر — استانی
ارزشمندترین است و باید در نگاه اول از کشوری جدا شود.
⚠️ فقط رنگ تمایز را نمیسازد؛ متن هر تگ خودش نوع گزینش را میگوید. */
.bz-tag{display:inline-block;padding:4px 12px;border-radius:999px;
font-size:.79rem;font-weight:800;white-space:nowrap;line-height:1.7}
.bz-tag.t0{background:#EDE7FB;color:#4B3A86}
.bz-tag.t1{background:#FDECD9;color:#8A4B12}
.bz-tag.t2{background:var(--teal-soft);color:var(--teal-dark)}
.bz-tag.t3{background:#E4EBF7;color:#2E4A78}
.bz-tag.t4{background:rgba(10,26,47,.06);color:var(--muted)}
.bz-ghotb{display:inline-block;padding:3px 11px;border-radius:8px;
background:rgba(10,26,47,.05);font-size:.82rem;font-weight:700}
.bz-groups{display:grid;gap:12px;margin-top:18px}
.bz-grp{background:#F4F8FD;border:1px solid rgba(10,26,47,.10);border-radius:16px;overflow:hidden}
.bz-grp>summary{list-style:none;cursor:pointer;padding:16px 20px;
display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bz-grp>summary::-webkit-details-marker{display:none}
/* ⚠️ +/− بهجای مثلث پیشفرض: مثلث در RTL سمت اشتباه میافتد و در سافاری
اصلاً استایل نمیگیرد. همان تصمیم سؤالات متداول. */
.bz-grp>summary::after{content:"+";margin-inline-start:auto;font-size:1.3rem;font-weight:700;
color:var(--teal-dark);line-height:1}
.bz-grp[open]>summary::after{content:"−"}
.bz-grp-t{font-weight:800;color:var(--ink);font-size:.98rem}
.bz-grp>summary small{font-size:.83rem;font-weight:600;color:var(--muted)}
.bz-grp-in{padding:0 20px 18px}
.bz-row{padding-top:16px;border-top:1px solid rgba(10,26,47,.09)}
.bz-rowh{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--muted);margin-bottom:10px}
.bz-chips{display:flex;flex-wrap:wrap;gap:7px}
.bz-chips span{background:#fff;border:1px solid rgba(10,26,47,.10);border-radius:10px;
padding:6px 11px;font-size:.83rem;color:var(--ink);line-height:1.8}
.bz-chips-off span{background:transparent;border-style:dashed;color:var(--muted)}
.bz-disc{margin-top:20px;font-size:.85rem;line-height:2;color:var(--muted);
padding-top:14px;border-top:1px dashed rgba(10,26,47,.16)}
@media(max-width:720px){
/* ⚠️ دو کارت ۸۰٪ و ۶۰٪ روی گوشی نباید کنار هم بمانند: فهرست جدول ب سیزده
نام دارد و در ستون باریک ده خط میشود، در حالی که کارت کناری دو خط است. */
.bz-cmp{grid-template-columns:1fr}
.bz-cmp .c b{font-size:1.7rem}
.bz-grp>summary{padding:14px 16px}
.bz-grp-in{padding:0 16px 16px}
}
/* ---------- صفحه گروه (انتخاب رشته تجربی/ریاضی/انسانی) ---------- */
/* ⚠️ بقیه اجزا (کارت شمارهدار، جدول، چیپ رتبه، نوار درصد) از سیستم مشترک
میآید. اینجا فقط ردیف آمار مخصوص همین صفحه است. */
.grp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0 6px}
.grp-st{background:#F4F8FD;border:1px solid rgba(10,26,47,.10);border-radius:14px;
padding:16px 12px;text-align:center}
.grp-st b{display:block;font-size:1.32rem;font-weight:900;color:var(--teal-dark);line-height:1.3}
.grp-st span{display:block;font-size:.79rem;color:var(--muted);margin-top:4px;line-height:1.7}
@media(max-width:720px){
.grp-stats{grid-template-columns:repeat(2,1fr)}
.grp-st b{font-size:1.15rem}
}
/* ---------- چیپهای گروه روی صفحه مادر ---------- */
.exr-grp-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.exr-grp-links a{border-radius:99px;padding:10px 20px;font-size:.94rem;font-weight:800;
color:var(--teal-dark);text-decoration:none;line-height:1.7}
/* ---------- صفحه «با رتبه X چه رشتهای قبول میشوم؟» ---------- */
/* ⚠️ این صفحه از همان سیستم sx-ی /takhmin-rotbe استفاده میکند (کارت
شمارهدار، .sx-lead، .sx-key، .sx-warn، .hl، .numchip) و جدولهایش از
.bz-tbl/.bz-scrollی صفحه بومیگزینی. اینجا فقط چیزهایی میماند که واقعاً
مخصوص این صفحهاند. دو سیستم موازی نداریم — خواسته صریح کاربر. */
.brt-hero{padding-block:64px 24px}
.brt-crumb{font-size:.84rem;color:var(--muted);margin-bottom:22px;text-align:center}
.brt-crumb a{color:var(--teal-dark);text-decoration:none}
.brt-crumb span{margin-inline:6px;opacity:.5}
.brt-crumb b{color:var(--ink);font-weight:700}
.brt-hero h1{font-size:clamp(1.55rem,3vw,2.35rem);line-height:1.6;font-weight:900;color:var(--ink)}
.brt-body{padding-block:12px 80px}
/* ⚠️ ستون «دانشگاههای پرتکرار» سه نام کامل دارد، پس این جدول از جدولهای
بومیگزینی پهنتر است و کف عرض بیشتری میخواهد. داخل .bz-scroll میلغزد. */
.brt-tbl{min-width:620px}
.brt-uni{font-size:.85rem;color:var(--muted)}
.brt-other td{opacity:.72}
/* نوار درصد. ⚠️ عرض از --w میآید که در PHP روی p*2.2 سقفدار حساب شده، نه
روی خود درصد: بیشترین سهم واقعی حدود ۴۵٪ است و با مقیاس ۱:۱ همه نوارها
کوتاه و غیرقابل مقایسه میشدند.
⚠️ رنگ تنها حامل معنا نیست؛ خود عدد داخل نوار نوشته میشود. */
.brt-bar{position:relative;display:block;min-width:92px;height:24px;border-radius:8px;
background:rgba(10,26,47,.05);overflow:hidden}
.brt-bar::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:var(--w,0%);
background:linear-gradient(90deg,rgba(0,151,109,.32),rgba(0,144,220,.28))}
.brt-bar i{position:relative;z-index:1;display:block;line-height:24px;padding-inline:9px;
font-style:normal;font-size:.83rem;font-weight:800;color:var(--ink)}
.brt-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
.brt-chips a{background:#F4F8FD;border:1.5px solid rgba(0,151,109,.34);
border-radius:99px;padding:8px 15px;font-size:.87rem;font-weight:800;
color:var(--teal-dark);text-decoration:none;line-height:1.7;
transition:border-color .18s,transform .18s}
.brt-chips a:hover{border-color:var(--teal-dark);transform:translateY(-2px)}
.brt-chips-g a{font-weight:700;color:var(--ink);border-color:rgba(10,26,47,.16)}
@media(max-width:860px){
.brt-hero{padding-block:44px 18px}
.brt-body{padding-block:8px 56px}
}
/* ---------- ۱۳) با رتبه خودت (لینک به خانواده ba-rotbe) ---------- */
.exr-brl{display:grid;gap:12px;margin-top:34px}
.exr-brl-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
border-radius:16px;padding:16px 20px}
.exr-brl-g{font-weight:800;color:var(--ink);font-size:.95rem;flex:none;min-width:88px}
.exr-brl-chips{display:flex;flex-wrap:wrap;gap:8px}
/* ⚠️ چیپها زمینه خودشان را دارند و **به رسپی شیشه اضافه نمیشوند**: روی
ردیفی که خودش شیشه است، شیشه روی شیشه یعنی هیچکدام خوانده نمیشود. */
.exr-brl-chips a{background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9);
border-radius:10px;padding:7px 13px;font-size:.89rem;font-weight:700;
color:var(--teal-dark);text-decoration:none;line-height:1.7}
.exr-brl-note{margin-top:18px;font-size:.89rem;line-height:2;color:var(--muted);text-align:center}
.exr-brl-note a{color:var(--teal-dark);font-weight:700}
@media(max-width:860px){
.exr-brl-row{gap:10px;padding:14px 16px}
.exr-brl-g{min-width:0;width:100%}
}
/* ---------- ۱۴) سؤالات متداول ---------- */
.exr-faq{display:grid;gap:13px;margin-top:38px}
.exr-faq details{background:var(--paper-2);border:1.5px solid var(--line);border-radius:18px;
overflow:clip;transition:border-color .3s ease,box-shadow .3s ease}
.exr-faq details[open]{border-color:var(--teal);box-shadow:var(--shadow-sm)}
.exr-faq summary{padding:19px 22px;font-size:1.02rem;font-weight:700;color:var(--ink);cursor:pointer;
list-style:none;display:flex;align-items:center;gap:13px;min-height:44px}
.exr-faq summary::-webkit-details-marker{display:none}
.exr-faq summary::after{content:'+';margin-inline-start:auto;width:30px;height:30px;flex:none;
display:grid;place-items:center;border-radius:50%;background:var(--teal-soft);color:var(--teal-dark);
font-size:1.25rem;font-weight:500;transition:transform .35s ease}
.exr-faq details[open] summary::after{transform:rotate(45deg)}
.exr-faq-a{padding:0 22px 21px;font-size:.93rem;line-height:2.15;color:var(--muted)}
/* ---------- ۱۴) CTA پایانی ---------- */
.exr-final-sec{background:var(--paper-2);padding-block:96px}
.exr-final{position:relative;overflow:clip;border-radius:clamp(26px,3vw,42px);color:#fff;text-align:center;
max-width:1200px;margin-inline:auto;padding:clamp(46px,6vw,74px) 34px;isolation:isolate;
background:
radial-gradient(760px 460px at 50% -30%,rgba(0,144,220,.38),transparent 65%),
linear-gradient(170deg,#071324,#0C2545);
box-shadow:0 44px 96px -36px rgba(10,26,47,.85)}
.exr-final::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.35;
background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.4px);background-size:32px 32px;
-webkit-mask-image:radial-gradient(70% 90% at 50% 20%,#000 20%,transparent 100%);
mask-image:radial-gradient(70% 90% at 50% 20%,#000 20%,transparent 100%)}
.exr-final .exr-orbit{inset-inline-end:-120px;top:-140px;width:420px;height:420px;opacity:.7}
.exr-final h2{font-size:clamp(1.75rem,3.5vw,2.65rem);font-weight:900;margin-bottom:16px;line-height:1.55}
.exr-final h2 b{color:#1FF0BE;font-size:1.3em;text-shadow:0 0 32px rgba(31,240,190,.5)}
.exr-final p{font-size:1.04rem;line-height:2.15;color:#fff;max-width:56ch;margin:0 auto 30px}
.exr-final-cta{display:flex;flex-wrap:wrap;gap:15px;justify-content:center}
.exr-final-cta .btn{border-radius:18px;padding-block:15px;font-size:1.05rem}
.exr-final-mini{margin-top:22px;font-size:.84rem;color:#fff}
/* ---------- نوار چسبان CTA ----------
🔴 تا امروز فقط روی گوشی بود. روی دسکتاپ، کاربری که تا انتهای صفحه میرفت هیچ
دکمهای جلوی چشمش نداشت و باید تا بالا اسکرول میکرد — یعنی رها میکرد.
⚠️ روی دسکتاپ کپسول وسطچین است، نه نوار تمامعرض: نوار تمامعرض چسبان روی
نمایشگر بزرگ حس تبلیغ مزاحم میدهد و برعکس عمل میکند.
⚠️ وسطچینی با margin-inline:auto انجام میشود، نه با transform — چون خود
transform برای انیمیشن بالاآمدن استفاده شده و دوتایی به هم میریزند. */
.exr-fab{position:fixed;bottom:0;inset-inline:0;z-index:90;display:none;
padding:10px 14px calc(10px + env(safe-area-inset-bottom));
background:rgba(7,19,36,.94);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.14);
transform:translateY(110%);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.exr-fab.show{transform:none}
.exr-fab a{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:50px;
border-radius:15px;background:var(--grad-brand);color:#fff;font-weight:800;font-size:1rem;
box-shadow:var(--glow-teal)}
.exr-fab small{color:#fff;font-weight:600;font-size:.78rem}
@media(min-width:861px){
.exr-fab{display:block;bottom:18px;max-width:620px;margin-inline:auto;
border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:9px;
box-shadow:0 26px 60px -26px rgba(0,0,0,.7)}
}
/* ⚠️ دکمه گرد «ارتباط با ما» (.fab در app.css) ثابت است روی
bottom:16px و دقیقاً همانجا که این نوار چسبان بالا میآید — یعنی روی
دکمه «پیشثبتنام» میافتاد و هر دو را خراب میکرد.
وقتی نوار بالا آمده باشد، دکمه گرد بالاتر میرود. */
body:has(.exr-fab.show) .fab{
bottom:calc(84px + env(safe-area-inset-bottom, 0px));
transition:bottom .4s cubic-bezier(.22,1,.36,1)}
body:has(.exr-fab.show) .fab .fab-menu{bottom:calc(100% + 10px)}
/* ---------- ظاهرشدن تدریجی هنگام اسکرول ---------- */
.exr-rv{opacity:0;transform:translateY(22px);
transition:opacity .6s cubic-bezier(.16,.8,.2,1),transform .6s cubic-bezier(.16,.8,.2,1)}
.exr-rv.in{opacity:1;transform:none}
/* بعد از پایان ورود، لایه گرافیکی اختصاصی آزاد شود تا حافظه GPU جمع نشود */
.exr-rv.done{transition:none;will-change:auto}
@media(max-width:860px){
/* روی گوشی جابهجایی کمتر + منحنی کندشوندهتر = حس «رسیدن»، نه «پریدن».
مسافت زیاد روی صفحه کوچک، خودش تکاندهنده بهنظر میرسد. */
.exr-rv{transform:translateY(14px);
transition-duration:.72s;transition-timing-function:cubic-bezier(.16,1,.3,1)}
}
/* ==========================================================================
شیشه مایع (Liquid Glass) — سیستم سراسری این صفحه
عمداً *اینجا* تعریف شده (بعد از تعریف پایه همه کارتها و قبل از هاور و
واکنشگرا) تا با ویژگی یکسان بر پسزمینه آنها سوار شود، ولی قانونهای
هاور و موبایل که تخصیص بالاتری دارند دستنخورده بمانند.
⚠️ بازتاب نور بهجای ::before، بهصورت یک لایه اضافی background نوشته شده.
دلیل: pseudoی خیلی از این کارتها از قبل اشغال است (درخشش exr-stat،
هاله هاور exr-tool، خط بالای exr-mis) و استفاده از ::before آنها را
بیصدا از بین میبرد.
⚠️ شیشه بدون رنگ در پسزمینه دیده نمیشود؛ برای همین درست پایینتر به
همه سکشنها یک «ملات رنگی» ملایم داده شده.
========================================================================== */
.exr-glass,
.exr-stat,
.exr-steps li,
.exr-axis,
.exr-tool,
.exr-mis,
.exr-faq details,
.exr-plans .plan{
background:
radial-gradient(128% 58% at 16% -14%,rgba(255,255,255,.92),rgba(255,255,255,0) 56%),
linear-gradient(150deg,rgba(255,255,255,.80),rgba(255,255,255,.46) 52%,rgba(255,255,255,.66));
-webkit-backdrop-filter:blur(18px) saturate(185%);
backdrop-filter:blur(18px) saturate(185%);
border:1px solid rgba(255,255,255,.78);
box-shadow:0 20px 44px -26px rgba(10,26,47,.45),
inset 0 1px 0 rgba(255,255,255,.95),
inset 0 -20px 36px -30px rgba(10,26,47,.3)}
/* طرح «پیشنهاد ما» نباید حلقه سبزش را از دست بدهد (شورتهند border آن را میپوشاند) */
.exr-plans .plan.hot{border-color:rgba(0,151,109,.5);
box-shadow:0 0 0 2px rgba(0,151,109,.45),0 24px 50px -26px rgba(0,151,109,.5)}
/* مرورگر بدون backdrop-filter: کدرتر شود تا متن هرگز کمکنتراست نشود */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.exr-glass,.exr-stat,.exr-steps li,.exr-axis,.exr-tool,.exr-mis,.exr-faq details,.exr-plans .plan{
background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(255,255,255,.86))}
}
/* ملات رنگی سکشنها — فقط لایه تصویر عوض میشود، رنگ پایه هر سکشن سر جایش میماند
⚠️ اندازهگیریشده (۱۴۰۵/۰۵/۱۲): این دو هاله فقط گوشهها را رنگ میکنند و در
ارتفاع ~۱۰۰۰ پیکسلی این سکشنها، **زیر خود کارتها دقیقاً کاغذ خام است**
(نمونهبرداری روی canvas: rgb(198,217,240) = --paper، بدون هیچ تغییری).
دقیقاً همین وضع در سکشنهای صفحه اصلی هم هست، پس این تفاوت دو صفحه نیست —
قویترکردنش هم کارتی را کمسفیدتر نمیکند. اگر روزی خواستی زمینه رنگیتر شود،
باید شعاع را هماندازه خود سکشن بگیری، نه فقط آلفا را بالا ببری. */
.exr-sec{background-image:
radial-gradient(720px 460px at 14% 16%,rgba(0,151,109,.14),transparent 62%),
radial-gradient(660px 480px at 86% 84%,rgba(0,144,220,.14),transparent 62%)}
/* ---------- هاور — فقط دستگاه hoverدار ---------- */
@media(hover:hover){
.exr-btn-ghost:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.4)}
/* ⚠️ اینجا قبلاً background روشن میشد؛ چون .exr-hstat نه گردی دارد نه padding،
نتیجه یک «مستطیل سفید» دقیقاً چسبیده به متن بود. فقط بالا آمدن میماند. */
.exr-hstat:hover{transform:translateY(-5px)}
.exr-stat:hover{transform:translateY(-6px);box-shadow:var(--shadow-sm)}
.exr-level:hover{transform:translateY(-8px);box-shadow:var(--shadow-sm)}
.exr-level.on:hover{transform:translateY(-14px) scale(1.02)}
.exr-steps li:hover{transform:translateY(-6px);box-shadow:var(--shadow-sm);border-color:var(--teal)}
.exr-mis:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.exr-mis:hover .exr-mis-x{animation:exrShake .45s ease}
.exr-tool:hover{transform:translateY(-7px);box-shadow:var(--shadow-sm);border-color:var(--teal)}
.exr-tool:hover::before{opacity:1}
.exr-tool:hover b svg{translate:-5px 0}
.exr-faq summary:hover{background:var(--teal-soft)}
.exr-line-btn:hover{background:var(--teal);color:#fff;transform:translateY(-2px)}
.exr-mq:hover .exr-mq-t{animation-play-state:paused}
.exr-cta:hover{transform:translateY(-3px)}
/* عمق سهبعدی فقط روی هاور اضافه میشود، نه در حالت عادی.
⚠️ چرا نه در حالت عادی: همین کارتها data-rv دارند و JS در پایان
انیمیشن ورود transform:none رویشان میگذارد؛ هر transform پایهای
همانجا پاک میشد. هاور بعد از آن میآید، پس امن است. */
.exr-born-c,.exr-eng-card{transition:transform .35s cubic-bezier(.2,.8,.2,1),
box-shadow .35s ease,border-color .3s ease}
.exr-born-c:hover{transform:perspective(900px) rotateY(-4deg) translateY(-6px);
box-shadow:var(--shadow);border-color:var(--c)}
.exr-eng-card:hover{transform:perspective(900px) rotateY(-5deg) translateY(-4px);
box-shadow:var(--shadow-sm)}
.exr-eng-card:hover .exr-eng-ic{transform:scale(1.08) rotate(-4deg)}
.exr-eng-ic{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
}
@keyframes exrShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}65%{transform:rotate(11deg)}}
/* ---------- واکنشگرا ---------- */
/* لپتاپهای کوتاه: هیرو جمعتر تا آمار در نمای اول بماند */
@media(min-width:981px) and (max-height:780px){
.exr-hero{padding:58px 0 50px}
.exr-hero h1{font-size:clamp(2rem,3vw,2.7rem)}
.exr-hstats{margin-top:22px;padding-top:18px}
.exr-ring-wrap{width:170px}
.exr-ring-in b{font-size:2.9rem}
}
@media(max-width:1080px){
/* زیر این عرض، کارتها دو ستونه/تکستونه میشوند و خط افقی معنا ندارد */
.exr-steps-line,.exr-comet,.exr-node{display:none}
.exr-steps-wrap{padding-top:0}
.exr-chip.c2{inset-inline-end:-10px}
}
@media(max-width:1180px){
/* پنج کارت محور در عرض متوسط باریک و ناخوانا میشوند → سهتا و بعد دوتا */
.exr-axes{grid-template-columns:repeat(3,1fr)}
/* ردیفهای داستان تکستونهاند؛ فقط ناحیه نقل قول باریکتر میشود */
.exr-born-c{grid-template-columns:auto minmax(180px,32%) 1fr auto;gap:6px 14px;padding:16px 18px}
/* ریل کوتاهتر میشود؛ --rail-w همزمان کیفریم نقطهها را درست نگه میدارد */
.exr-eng{--rail-w:40px}
.exr-eng-flow{padding:18px 16px 22px}
.exr-eng-core{width:150px;height:150px}
.exr-eng-core-in{width:96px;height:96px}
.exr-stage{grid-template-columns:1fr minmax(280px,400px);gap:24px}
.exr-stage-note{grid-column:1/-1;order:3}
}
@media(max-width:980px){
.exr-sec{padding-block:70px}
.exr-hero{padding:80px 0 66px}
.exr-hero-in,.exr-about-grid,.exr-pish{grid-template-columns:1fr;gap:40px}
.exr-stage{grid-template-columns:1fr;gap:26px;justify-items:center}
.exr-stage>*{width:100%;max-width:520px}
.exr-stage-note{order:0}
.exr-vs{grid-template-columns:1fr;gap:12px}
.exr-vs-x{transform:rotate(90deg);justify-self:center}
.exr-axes{grid-template-columns:repeat(2,1fr)}
/* موتور از افقی به عمودی میرود: ریل هم باید بچرخد، وگرنه یک خط افقی
بیربط بین دو کارت رویهم میماند. نقطهها روی محور Y حرکت میکنند.
⚠️ جایگذاریهای صریح grid-area باید خنثی شوند، وگرنه در چیدمان تکستونه
همه روی ستون/ردیف خودشان گیر میکنند و روی هم میافتند. */
.exr-eng-flow{grid-template-columns:1fr;grid-template-rows:none;gap:0}
.exr-eng-flow>*{grid-area:auto!important}
/* ⚠️ با خنثیشدن grid-area، بچهها به ترتیب DOM میچینند — یعنی هر سه
برچسب سر ستون پشتسرهم بالای همهچیز میافتند و از محتوایشان جدا
میشوند (اندازهگیریشده: هر سه در ۸۰px بالای کارتها). با order هر برچسب
میرود بالای بخش خودش. */
.exr-eng-col-h.h-in{order:1}
.exr-eng-src{order:2}
.exr-eng-rail.r1{order:3}
.exr-eng-col-h.h-core{order:4}
.exr-eng-mid{order:5}
.exr-eng-rail.r2{order:6}
.exr-eng-col-h.h-out{order:7}
.exr-eng-out{order:8}
.exr-eng-col-h{margin-top:8px;border-bottom:none;border-top:1.5px dashed rgba(10,26,47,.18);padding-top:10px}
.exr-eng-col-h.h-in{margin-top:0;border-top:none;padding-top:0}
.exr-eng-mid{margin-block:6px}
.exr-born-c{grid-template-columns:auto 1fr;gap:4px 14px;align-items:start}
.exr-born-c p{grid-column:2}
.exr-born-ax{grid-column:2;justify-self:start;margin-top:8px}
.exr-eng-out{max-width:420px;width:100%;margin-inline:auto}
.exr-eng-rail{min-height:52px}
.exr-eng-rail::before{top:0;bottom:0;left:50%;right:auto;width:2px;height:auto;
transform:translateX(-50%);
background:linear-gradient(180deg,rgba(0,144,220,.06),rgba(0,144,220,.5),rgba(0,151,109,.5),rgba(0,151,109,.06))}
.exr-eng-rail i{top:0;right:50%;margin:0 -3.5px 0 0}
.play .exr-eng-rail i{animation-name:exrRailY}
.exr-stats{grid-template-columns:repeat(2,1fr)}
/* ⚠️ .exr-tools عمداً از این ردیف برداشته شد: چیدمان پنجکارتی نردبان خودش را
دارد (۵ / ۳+۲ / ۲+۲+۱ / ۱) و این رول کل آن را زیر ۹۸۰ تکستونی میکرد. */
.exr-levels{grid-template-columns:1fr}
.exr-level.on{transform:none}
.exr-steps{grid-template-columns:repeat(2,1fr)}
.exr-about-vis{max-width:360px;margin-inline:auto}
.exr-card-wrap{max-width:420px;margin-inline:auto}
.exr-shape.f1,.exr-shape.f2{display:none}
.exr-pish-sec,.exr-final-sec{padding-block:70px}
}
@media(max-width:640px){
/* ⚠️ backdrop-filter روی ~۲۰ کارت، روی گوشی گرانترین چیز صفحه است و
مستقیم باعث لرزش اسکرول میشود. روی موبایل خاموش و بهجایش کدرتر —
ظاهر تقریباً یکی است، هزینهاش صفر. */
.exr-glass,.exr-stat,.exr-steps li,.exr-axis,.exr-tool,.exr-mis,.exr-faq details,.exr-plans .plan,
.exr-born-c,.exr-eng-card{
-webkit-backdrop-filter:none;backdrop-filter:none;
background:
radial-gradient(128% 58% at 16% -14%,rgba(255,255,255,.85),rgba(255,255,255,0) 56%),
linear-gradient(150deg,rgba(255,255,255,.93),rgba(255,255,255,.8));
box-shadow:0 14px 30px -22px rgba(10,26,47,.4),inset 0 1px 0 rgba(255,255,255,.9)}
/* نقطههای ریل روی گوشی کاملاً خاموش (همان تصمیم راند پنجم:
هر انیمیشن تزئینی همیشهدرحالاجرا روی موبایل هزینه اسکرول دارد) */
.exr-eng-rail i{display:none}
.exr-eng-rail{min-height:34px}
.play .exr-eng-ring{animation:none}
.exr-eng-core{width:132px;height:132px;margin-block:4px 32px}
.exr-eng-core-in{width:86px;height:86px}
.exr-eng-core-n{font-size:2rem}
.exr-born-q{font-size:1.7rem}
/* شیشه تینتخورده هم روی گوشی کدرتر میشود، مثل بقیه سطحهای صفحه */
.exr-tglass{background:
linear-gradient(0deg,color-mix(in srgb,var(--c) 12%,transparent),color-mix(in srgb,var(--c) 12%,transparent)),
linear-gradient(150deg,rgba(255,255,255,.9),rgba(255,255,255,.78))}
/* ⚠️ کارت پرداخت حالا شیشه **تیره** است، پس نسخه موبایلش هم باید تیره باشد.
این قانون قبلاً سفید ۰٫۹۷ میگذاشت و چون بعد از تعریف اصلی میآید، روی گوشی
متن سفید کارت روی زمینه سفید میافتاد و کاملاً ناخوانا میشد. بلور روی گوشی
همچنان حذف است (هزینه اسکرول)، فقط کدری جایش را میگیرد. */
.exr-pish-card{-webkit-backdrop-filter:none;backdrop-filter:none;
background:
radial-gradient(126% 58% at 16% -12%,rgba(31,240,190,.14),rgba(31,240,190,0) 58%),
linear-gradient(150deg,rgba(9,24,45,.96),rgba(12,32,60,.94))}
/* سه انیمیشن باقیمانده که روی گوشی واقعاً هزینه دارند — همه تزئینیاند و
خاموشکردنشان چیزی از محتوا کم نمیکند:
۱) چشمک ۴۴ ستاره: هرچند فقط opacity است، هر ۴۴ دایره داخل *یک* SVGاند و
SVG برای هرکدام لایه جدا نمیسازد ← کل SVG هر فریم دوباره کشیده میشود.
۲) چرخش قاب conic کارت پرداخت: با هر درجه، کل گرادیان دوباره تولید میشود.
۳) جریان گرادیان تیتر هیرو: background-position یعنی رنگآمیزی دوباره. */
.exr-stars circle{animation:none;opacity:.45}
.exr-pish-card::before{animation:none}
.exr-hero h1 b{animation:none;background-position:0 0}
/* بلور سنگین و لایههای اضافی روی گوشیهای ضعیف قاب میاندازند */
.exr-aur{filter:blur(46px);animation-duration:24s}
.exr-aur.a3,.exr-orbit.o2,.exr-shoot.s2,.exr-shape.f3{display:none}
.exr-hero{padding:64px 0 58px}
.exr-hstats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 10px;margin-top:30px}
.exr-stats,.exr-mistakes,.exr-steps,.exr-axes{grid-template-columns:1fr}
.exr-method-head h2{font-size:clamp(1.6rem,7vw,2rem)}
.exr-sum>b{font-size:2.6rem}
.exr-cta-row .btn,.exr-cta-row .exr-btn-ghost{width:100%;justify-content:center;align-items:center}
.exr-cta{align-items:center}
/* چهار مرحله روی گوشی — کارتهای شیشهای جدا از هم.
⚠️ نسخه قبلی `background:none` میگذاشت ولی `box-shadow` شیشه را پاک نمیکرد،
پس چهار قاب توخالی چسبیدهبههم دیده میشد — همان «بههم چسبیده و بیفاصله».
حالا کارتها واقعاً کارتاند و بینشان فاصله هست؛ خط چیندار هم حذف شد چون
بین کارتهای جدا معنایی ندارد و فقط شلوغی میآورد. */
.exr-steps{gap:14px}
.exr-steps li{padding:18px 18px 20px;padding-inline-start:72px;border-radius:20px}
.exr-steps li::before{display:none}
.exr-step-n{position:absolute;inset-inline-start:16px;top:16px;margin:0}
.exr-chip.c1{inset-inline-start:-6px}
.exr-chip.c2{inset-inline-end:-6px}
.exr-ring-wrap{width:172px}
.exr-ring-in b{font-size:2.9rem}
.exr-stamp{top:-26px;inset-inline-end:-10px;width:80px;height:80px}
.exr-pish-card{max-width:100%}
.exr-dist-bar{height:30px}
.exr-dist-bar i{font-size:.68rem}
.exr-final-cta .btn{width:100%;justify-content:center}
.exr-fab{display:block}
.exr-proof-cap{font-size:.8rem}
/* ---------- شکستن متن روی صفحه باریک ----------
شکایت «متن دوتکه میشود و میآید خط پایین» دو علت جدا داشت:
۱) کادرهای flex که متن آزاد داخلشان بود (رفعش در خود مارکآپ انجام شد)
۲) شکست پیشفرض مرورگر که آخرین کلمه را تنها میاندازد. `balance` تیترها را
بین خطها پخش میکند و `pretty` جلو تککلمه یتیم در پاراگراف را میگیرد. */
.exr-head h2,.exr-method-head h2,.exr-hero h1,.exr-pish h2,.exr-final-cta h2,
.exr-stage-note h4,.exr-vs-c b,.exr-mx-t,.exr-level .exr-lv-top span,
.exr-steps li h3,.exr-stat p,.exr-born-h h3,.exr-born-said,.exr-eng-card b{text-wrap:balance}
.exr-head p,.exr-method-lead,.exr-lead,.exr-stage-note p,.exr-vs-c p,
.exr-axis p,.exr-steps li p,.exr-level p,.exr-pish-lead,
.exr-proof-note,.exr-note,.exr-born-h p,.exr-born-c p,.exr-eng-card p,
.exr-born-sum{text-wrap:pretty}
/* واحدها و اعداد نباید از هم جدا شوند */
.exr-hstat b,.exr-stat-n,.exr-axes-sum>b{white-space:nowrap}
}
/* ---------- کاهش حرکت — همهچیز ساکن ولی مرئی ---------- */
@media(prefers-reduced-motion:reduce){
.exr *,.exr *::before,.exr *::after{animation:none!important;transition:none!important}
.exr-rv{opacity:1;transform:none}
/* نقطههای ریل موتور بدون انیمیشن معنی ندارند (پیشفرضشان opacity:0 است) */
.exr-eng-rail i{display:none}
.exr-rd-ring,.exr-rd-poly,.exr-rd-pt circle.d,.exr-rd-pt .lb,.exr-rd-c{transform:none;opacity:1}
.exr-rd-ax{stroke-dashoffset:0}
.exr-axis-bar i,.exr-dist-bar i,.exr-cap i,.exr-steps-line{transform:scaleX(1)}
.exr-step-n{transform:scale(1);opacity:1}
.exr-about-list li svg path{stroke-dashoffset:0}
.exr-ring-fg{stroke-dashoffset:calc(370.7 - 370.7 * var(--exr-elapsed) / 100)}
.exr-spot{display:none}
}
/* ══════════════════════════════════════════════════════════════════════════
★ همترازی با «شیشه مایع» بقیه سایت
عمداً انتهای style است تا بر تعریفهای بالاتر سوار شود.
قاعدهها همانهاییاند که در assets/app.css اندازهگیری و تأیید شدند؛
اینجا فقط روی کلاسهای exr- پیاده میشوند تا این صفحه از سایت جدا نیفتد.
══════════════════════════════════════════════════════════════════════════ */
/* ۰) میدان رنگی زیر همه سکشنها — دلیل اصلی «شیشهای بهنظر نمیرسد».
⚠️ دو راند قبل اندازه گرفتم و ثبت کردم که زیر کارتها **کاغذ خام** است
(نمونهبرداری canvas: دقیقاً rgb(198,217,240)) چون هالهها ۷۲۰×۴۶۰ بودند و در
سکشن ~۱۰۰۰ پیکسلی فقط گوشهها را رنگ میکردند. همانجا هم نوشتم راه درست
«شعاع را هماندازه خود سکشن بگیر، نه اینکه آلفا را بالا ببری» — این همان است.
شیشه بدون چیزی پشتش، شیشه دیده نمیشود؛ کدریاش هرچه باشد فرقی نمیکند.
⚠️ واحدها عمداً درصد خود سکشناند نه پیکسل، تا در سکشن کوتاه و بلند
یکجور کار کند. */
.exr-sec,.exr-alt,.exr-why,.exr-method,.exr-levels-sec,.exr-about,
.exr-pish-sec,.exr-tools-sec,.exr-final-sec{position:relative}
.exr-aura{position:absolute;inset:-6% -4%;z-index:0;pointer-events:none;
background:
/* ⚠️ آلفاها اندازهگیریشدهاند، نه سلیقهای: با .20/.19/.13 تیرهترین نقطه
میدان rgb(167,198,224) میشد و متن سبز تیره روی آن ۴٫۳۰ میداد (مردود AA).
با این مقادیر رنگ حس میشود ولی بدترین نقطه هم بالای ۴٫۵ میماند. */
radial-gradient(58% 46% at 16% 14%,rgba(0,151,109,.15),transparent 68%),
radial-gradient(54% 44% at 86% 82%,rgba(0,144,220,.14),transparent 68%),
radial-gradient(46% 40% at 62% 40%,rgba(139,127,240,.10),transparent 70%);
will-change:transform}
/* حرکت آرام و بیپایان — فقط transform، پس هزینه رنگآمیزی دوباره ندارد */
@media(hover:hover) and (pointer:fine){
.exr-aura{animation:exrAura 26s ease-in-out infinite alternate}
}
@keyframes exrAura{
0%{transform:translate3d(0,0,0) scale(1)}
50%{transform:translate3d(-2.5%,1.8%,0) scale(1.06)}
100%{transform:translate3d(2%,-1.6%,0) scale(1.03)}
}
/* محتوا باید روی میدان بنشیند، نه زیرش */
.exr-sec > .wrap,.exr-pish-sec > .wrap,.exr-final-sec > .wrap,
.exr-tools-sec > .wrap,.exr-about > .wrap{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){ .exr-aura{animation:none} }
@media(max-width:640px){
/* روی گوشی بدون انیمیشن و کمی ملایمتر — همان تصمیم همیشگی این پروژه */
.exr-aura{animation:none;opacity:.85}
}
/* ۱) سکشنهای سفید تخت — منبع «خط جداکننده» و دلیل دیدهنشدن شیشه.
جعبه سفید مات لبهاش ناگهان قطع میشد و درز افقی میساخت. حالا هرکدام
یک هاله رنگی نرم میگیرند که خیلی قبل از لبه به صفر میرسد. */
.exr-alt{background:
radial-gradient(880px 500px at 88% 6%,rgba(0,144,220,.16),transparent 68%)}
.exr-why{background:
radial-gradient(860px 480px at 10% 8%,rgba(0,151,109,.16),transparent 68%),
radial-gradient(720px 440px at 94% 92%,rgba(120,90,220,.11),transparent 66%)}
.exr-levels-sec{background:
radial-gradient(900px 520px at 50% 10%,rgba(120,90,220,.15),transparent 70%)}
.exr-about{background:
radial-gradient(840px 480px at 14% 10%,rgba(0,144,220,.15),transparent 68%)}
.exr-pish-sec{background:
radial-gradient(900px 520px at 84% 6%,rgba(0,151,109,.16),transparent 68%),
radial-gradient(700px 420px at 8% 94%,rgba(212,175,55,.10),transparent 66%)}
.exr-tools-sec{background:
radial-gradient(860px 490px at 12% 8%,rgba(212,175,55,.14),transparent 68%),
radial-gradient(740px 440px at 92% 90%,rgba(0,144,220,.13),transparent 66%)}
/* ⚠️ این یکی مستقیماً همان «موج خراب پایین صفحه» بود: یک سکشن سفید مات
درست بالای موج سرمهای فوتر مینشست، پس سه نوار رنگی بیربط پشت هم
دیده میشد (سفید ← آبی روشن ← سرمهای). با برداشتن سفید مات، موج
مستقیم از پسزمینه خود صفحه بیرون میآید. */
.exr-final-sec{background:
radial-gradient(900px 520px at 50% 96%,rgba(0,144,220,.14),transparent 70%)}
/* ۲) کارتهای شیشهای روشن — همان رسپی سایت.
⚠️ بلور برداشته شد: پشت این کارتها یک گرادیان نرم است و بلور گرادیان
نرم تقریباً خودش میشود؛ روی گوشی همین چند کارت اسکرول را میلرزاند.
کدری در عوض از .46 بالا آمد تا بدون بلور هم «شیشه» خوانده شود. */
.exr-glass,.exr-stat,.exr-steps li,.exr-axis,.exr-tool,.exr-mis,
.exr-faq details,.exr-plans .plan,.exr-level,.exr-born-c,.exr-eng-card,
.exr-brl-row,.exr-bzt-list,.exr-bzt-cta,.exr-grp-links a{
background:
radial-gradient(126% 64% at var(--gx,16%) var(--gy,-14%),
rgba(255,255,255,.88),rgba(255,255,255,0) 56%),
radial-gradient(88% 58% at 96% 106%,rgba(0,144,220,.10),rgba(0,144,220,0) 62%),
radial-gradient(78% 54% at 3% 102%,rgba(0,151,109,.08),rgba(0,151,109,0) 60%),
linear-gradient(152deg,rgba(255,255,255,.66),rgba(255,255,255,.42) 48%,
rgba(255,255,255,.55));
-webkit-backdrop-filter:none;backdrop-filter:none;
border:1px solid rgba(255,255,255,.60);
border-top-color:rgba(255,255,255,.94);
border-bottom-color:rgba(196,226,255,.46);
box-shadow:
0 1px 2px rgba(10,26,47,.14),
0 26px 56px -30px rgba(10,26,47,.52),
inset 0 1px 0 rgba(255,255,255,.98),
inset 1px 0 0 rgba(255,255,255,.62),
inset 0 -1px 0 rgba(255,255,255,.50),
inset 0 -3px 7px -4px rgba(255,255,255,.62),
inset 0 -26px 40px -34px rgba(10,26,47,.28),
inset 0 22px 34px -30px rgba(130,200,255,.50);
transition:box-shadow .3s cubic-bezier(.2,.8,.2,1),
border-color .3s cubic-bezier(.2,.8,.2,1)}
/* طرح «پیشنهاد ما» نباید حلقه سبزش را از دست بدهد (شورتهند border میپوشاندش) */
.exr-plans .plan.hot{border-color:rgba(0,151,109,.5);
border-top-color:rgba(255,255,255,.94);
box-shadow:0 0 0 2px rgba(0,151,109,.45),0 30px 60px -28px rgba(0,151,109,.5),
inset 0 1px 0 rgba(255,255,255,.98)}
/* ۳) پنلهای تیره — همان رسپی .lg-dark سایت: رنگ سرمهای میماند، فقط
نور اضافه میشود (تابش گوشه، لبه روشن، نور عبوری از لبه پایین).
⚠️ **زمینه .exr-pish اینجا تعیین میشود، نه در تعریف اصلیاش بالاتر.**
یکبار آلفای شفقها را آن بالا عوض کردم و هیچ اثری نداشت، چون این بلوک
دیرتر میآید و کل background را بازمینویسد. هر تنظیم رنگی پنلهای تیره
باید همینجا انجام شود. */
.exr-proof,.exr-pish,.exr-final{
background:
/* از .18 به .15 — تابش سفید روی کیکر میافتاد و کنتراستش را پایین میآورد */
radial-gradient(126% 64% at var(--gx,16%) var(--gy,-14%),
rgba(255,255,255,.15),rgba(255,255,255,0) 56%),
radial-gradient(90% 60% at 98% 104%,rgba(0,144,220,.20),rgba(0,144,220,0) 60%),
radial-gradient(80% 54% at 2% 100%,rgba(0,214,160,.12),rgba(0,214,160,0) 58%),
linear-gradient(152deg,rgba(10,26,47,.90),rgba(18,41,77,.94));
border:1px solid rgba(255,255,255,.18);
border-top-color:rgba(255,255,255,.34);
border-bottom-color:rgba(127,212,255,.16);
box-shadow:
0 2px 4px rgba(0,0,0,.22),
0 34px 66px -32px rgba(0,0,0,.62),
inset 0 1px 0 rgba(255,255,255,.30),
inset 0 -1px 0 rgba(127,212,255,.22),
inset 0 -3px 8px -5px rgba(127,212,255,.34)}
/* ۴) هیروی صفحه هم لبه پایینش «موج» میگیرد، به همان روش صفحات دیگر:
خود هیرو بریده میشود، نه اینکه یک شکل توپر همرنگ رویش بگذاریم —
پس هیچ رنگ سومی بین هیرو و محتوا نمیافتد. */
@supports ((mask-image:url('data:image/svg+xml;utf8,')) or (-webkit-mask-image:url('data:image/svg+xml;utf8,'))){
.exr-hero{
-webkit-mask-image:linear-gradient(#000,#000),url('data:image/svg+xml;utf8,');
mask-image:linear-gradient(#000,#000),url('data:image/svg+xml;utf8,');
-webkit-mask-size:100% calc(100% - 69px),100% 70px;
mask-size:100% calc(100% - 69px),100% 70px;
-webkit-mask-position:top left,bottom left;
mask-position:top left,bottom left;
-webkit-mask-repeat:no-repeat,no-repeat;
mask-repeat:no-repeat,no-repeat;
padding-bottom:96px}
}
/* ۵) نوار چسبان پایین: ثابت + بلور = هر فریم اسکرول یک رستر دوباره.
تقریباً مات میشود؛ چون نوار باریک است تفاوتش دیده نمیشود. */
.exr-fab{-webkit-backdrop-filter:none;backdrop-filter:none;
background:rgba(7,19,36,.985)}
/* ۶) ظاهرشدن تدریجی — کوتاهتر و نزدیکتر، هماندازه صفحه اصلی */
.exr-rv{transform:translateY(14px);
transition:opacity .42s cubic-bezier(.2,.8,.2,1),
transform .42s cubic-bezier(.2,.8,.2,1)}
@media(max-width:860px){
/* ⚠️ روی گوشی انیمیشن ظاهرشدن کاملاً خاموش است — همین بود که «تیکهتیکه»
دیده میشد: دهها عنصر همزمان opacity/transform را عوض میکردند، درست
وقتی مرورگر مشغول اسکرول بود. */
.exr-rv,.exr-rv.in{opacity:1!important;transform:none!important;
transition:none!important}
/* لایههای تزئینی گران روی گوشی */
.exr-hero::before,.exr-final::before{display:none}
.exr-glass,.exr-stat,.exr-steps li,.exr-axis,.exr-tool,.exr-mis,
.exr-faq details,.exr-plans .plan,.exr-level{
background:
radial-gradient(126% 62% at 16% -14%,rgba(255,255,255,.94),rgba(255,255,255,0) 58%),
linear-gradient(152deg,rgba(255,255,255,.84),rgba(255,255,255,.68));
box-shadow:
0 1px 2px rgba(10,26,47,.10),
0 18px 36px -26px rgba(10,26,47,.44),
inset 0 1px 0 rgba(255,255,255,.95),
inset 0 -1px 0 rgba(255,255,255,.5)}
}
/* ══════════════════════════════════════════════════════════════════════════
ماژول ریدیزاین مینیمال — ۱۴۰۵/۰۵/۲۵
عمداً **ته فایل** است تا هر قاعدهای که بازنویسی میکند بدون !important
ببرد، و برگرداندنش یک برش ساده باشد. همان الگوی ماژول hm- در app.css.
══════════════════════════════════════════════════════════════════════════ */
/* ── ۱) هیرو کوتاهتر ─────────────────────────────────────────────────────
گزارش کاربر: «کوتاهترش کن مثل صفحه اصلی». اندازهگیری نشان داد ارتفاع را
**ستون متن** میسازد (۴۸۰px) نه کارت (۴۱۶px)، و بزرگترین تکهاش h1 با
line-height ۱٫۴۵ بود.
⚠️ padding-bottom در دو جا نوشته میشود: یکی اینجا و یکی داخل بلوک
@supportsی ماسک موج (چون آنجا باید جای ۷۰ پیکسلی موج را باز کند).
اگر فقط یکی را عوض کنی، روی مرورگرهای دارای mask هیچ اتفاقی نمیافتد. */
.exr-hero{padding:28px 0 44px}
@supports ((mask-image:url('data:image/svg+xml;utf8,')) or (-webkit-mask-image:url('data:image/svg+xml;utf8,'))){
/* ⚠️ کف این عدد ۷۰px است (ارتفاع خود موج). کمترش یعنی متن روی موج میافتد. */
.exr-hero{padding-bottom:76px}
}
.exr-crumb{margin-bottom:12px}
.exr-hero h1{font-size:clamp(1.86rem,2.9vw,2.5rem);line-height:1.3}
/* بولتهای هیرو — 42ch عمدی است: هر بولت باید در **یک خط** بشکند وگرنه
دوباره پاراگراف دیده میشود. همان قاعده .hero2 .rd-bulی صفحه اصلی. */
.exr-hero .rd-bul{margin-top:14px;gap:6px;max-width:42ch}
.exr-hero .rd-bul li{font-size:.99rem;line-height:1.68}
.exr-cta-row{margin-top:18px;margin-bottom:0}
/* کارت کنار هم جمعتر شد تا در ارتفاع تازه بنشیند و ستون متن را نکشد */
.exr-card{padding:24px 22px}
.exr-card-top{margin-bottom:14px}
.exr-ring-wrap{width:168px;margin-bottom:12px}
.exr-card-foot{margin-top:14px;padding-top:13px}
/* ── ۲) بخش «همه از رشته شروع میکنند» روشن شد ────────────────────────────
🔴 گزارش کاربر با اسکرینشات: «نقطه اتصال هیرو با پایینش یهجوره، وسطش
فقط سفیده».
علت دقیق: لبه پایین هیرو با mask-image به شکل موج **بریده** میشود، پس
آنچه در برش موج دیده میشود زمینه body است (--paper، آبی روشن). تا دیروز
بعد هیرو نوار تیره «قبولیهای واقعی» میآمد و حالا که آن حذف شده، ترتیب شده
بود تیره ⟵ نوار روشن ⟵ تیره؛ همان «سفید وسط».
راه حل (پیشنهاد خود کاربر): سکشن زیر هیرو روشن شود تا موج به آن **وصل**
شود، نه اینکه بینشان بیفتد. حالا: هیروی تیره ⟵ موج ⟵ بخش روشن.
⚠️ رنگهای برند (#1FF0BE / #3FEFC4) روی زمینه روشن کنتراست ندارند. هر جا
لازم بود به --teal-dark رفت. دو مورد **inline** در مارکآپ بودند و همانجا
عوض شدند، وگرنه این بلوک اثری رویشان نداشت. */
.exr-job{background:transparent;color:var(--ink)}
.exr-job::before{opacity:.5;
background-image:radial-gradient(rgba(10,26,47,.16) 1px,transparent 1.4px)}
/* هاله رنگی سکشنهای روشن، تا این بخش هم تخت خالی نباشد */
.exr-job::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
background-image:
radial-gradient(720px 460px at 14% 16%,rgba(0,151,109,.16),transparent 62%),
radial-gradient(660px 480px at 86% 84%,rgba(0,144,220,.16),transparent 62%)}
.exr-job .exr-head h2{color:var(--ink)}
.exr-job .exr-head p{color:var(--muted)}
/* کپسول «برای نخستینبار در ایران» — گرادیان تیره روی زمینه روشن */
.exr-job-first{color:#fff;background:linear-gradient(100deg,var(--teal-dark),#0A6E9E);
box-shadow:0 10px 26px -14px rgba(0,96,63,.65)}
.exr-job-first i{background:#8CF3D6}
/* دو ستون مقایسه و چهار کارت دارایی ⟵ همان شیشه روشن بقیه سایت */
.exr-job-col,.exr-asset{border-color:var(--line);
background:
radial-gradient(126% 62% at 16% -14%,rgba(255,255,255,.92),rgba(255,255,255,0) 58%),
linear-gradient(152deg,rgba(255,255,255,.8),rgba(255,255,255,.62));
box-shadow:0 1px 2px rgba(10,26,47,.08),0 20px 40px -30px rgba(10,26,47,.4)}
.exr-job-col h3{color:var(--ink)}
.exr-job-col .exr-job-sub,.exr-asset p{color:var(--muted)}
.exr-job-col li{color:var(--ink)}
/* ⚠️ opacity:.72ی ستون «روش رایج» روی زمینه روشن متن را به خاکستری کمجان
میبرد — همان تله opacity صفحه اصلی. کمرنگی عمدی حالا فقط با رنگ. */
.exr-job-them{opacity:1}
.exr-job-them li{color:var(--muted)}
.exr-job-them li span{background:#FBE2E2;color:#B33A20}
.exr-job-us{border-color:rgba(0,151,109,.42);
box-shadow:0 1px 2px rgba(10,26,47,.08),0 24px 54px -32px rgba(0,151,109,.5)}
.exr-job-us h3{color:var(--teal-dark)}
.exr-job-us li span{background:var(--teal-soft);color:var(--teal-dark)}
.exr-asset b.exr-asset-n{background-image:linear-gradient(100deg,var(--teal-dark),#0A6E9E)}
.exr-asset h4{color:var(--ink)}
.exr-asset a{color:var(--teal-dark)}
@media(hover:hover){
.exr-asset:hover{border-color:rgba(0,151,109,.5)}
.exr-asset a:hover{color:#0A6E9E}
}
/* دکمه پایان همین بخش روی زمینه روشن مینشیند، پس زیرنویسش باید تیره شود */
.exr-job .exr-cta-sub{color:rgba(255,255,255,.92)}
/* ── ۳) ریتم عمودی ────────────────────────────────────────────────────────
۹۲px بالا و پایین هر سکشن، در یازده سکشن یعنی ~۲کیلوپیکسل فقط فاصله.
۷۴px هنوز «هوا» دارد (کمترش صفحه فشرده و ارزان میشود) ولی ~۳۲۰px از طول
صفحه کم میکند. ⚠️ کمتر از این نرو: خود کاربر یکبار گفت کارت تخت چسبیده
«وردپرسی» بهنظر میرسد و فاصله بخشی از همان حس لوکس است. */
.exr-sec,.exr-job,.exr-final-sec{padding-block:74px}
/* ── ۴) هیروی گوشی ────────────────────────────────────────────────────────
🔴 ۱۴۰۵/۰۵/۲۶ — **کارت روزشمار روی گوشی کلاً حذف شد** (خواسته صریح کاربر با
اسکرینشات: «این روزشمار تو گوشی نباشه کلاً»).
دور قبل فقط فشرده شده بود (حلقه کوچکتر + پانویس پنهان) چون نگران حذف
تزئین بودم؛ ولی روی ۳۷۵px همین کارت فشرده هم ~۳۲۰px از هیرو را میخورد و
دکمه اصلی را از فولد پایین میبرد.
⚠️ فوریت گم نمیشود: عدد «روز مانده» روی گوشی سه جای دیگر هست — نوار چسبان
#entFab، نشان کارت #pish و عنوان دعوت پایانی.
⚠️ display:none روی .exr-card-wrap است نه .exr-card، وگرنه