/* ═══════════════════════════════════════════════════════════════════ پرشین میزبان — استایل صفحه‌ی «خرید هاست دانشجویی» /assets/css/hosting-student.css ─────────────────────────────────────────────────────────────────── ۰۰ فونت‌ها ۰۱ توکن‌های مشترک ۰۲ هیرو .psh- ۰۳ سازگاری پروژه .pss- ۰۴ رایگان یا دانشجویی .psf- ۰۵ تعرفه .psp- ۰۶ از صفر تا انتشار .psd- ۰۷ سوالات و فراخوان .psq- .psz- ═══════════════════════════════════════════════════════════════════ */ /* ═══ ۰۰ · فونت‌ها ═══════════════════════════════════════════════════ */ @font-face{font-family:'PMNum';font-weight:400;font-style:normal;font-display:swap; src:url('/assets/fonts/IRANSansXFaNum-Regular.woff2') format('woff2'); unicode-range:U+06F0-06F9,U+0660-0669,U+002C,U+002E,U+060C,U+066A-066C} @font-face{font-family:'PMNum';font-weight:700;font-style:normal;font-display:swap; src:url('/assets/fonts/IRANSansXFaNum-Bold.woff2') format('woff2'); unicode-range:U+06F0-06F9,U+0660-0669,U+002C,U+002E,U+060C,U+066A-066C} @font-face{font-family:'PMMono';font-weight:400;font-style:normal;font-display:swap; src:url('/assets/fonts/JetBrainsMono-Regular.woff2') format('woff2'); unicode-range:U+0020-002B,U+002D,U+002F-007E} @font-face{font-family:'PMMono';font-weight:700;font-style:normal;font-display:swap; src:url('/assets/fonts/JetBrainsMono-Bold.woff2') format('woff2'); unicode-range:U+0020-002B,U+002D,U+002F-007E} @font-face{font-family:'Morabba';font-weight:700;font-style:normal;font-display:swap; src:url('/assets/fonts/Morabba-Bold.woff2') format('woff2')} @font-face{font-family:'Morabba';font-weight:900;font-style:normal;font-display:swap; src:url('/assets/fonts/Morabba-Black.woff2') format('woff2')} /* ═══ ۰۱ · توکن‌های مشترک ═══════════════════════════════════════════ ⚠️ توکن‌ها روی خودِ سکشن‌ها هم تعریف شده‌اند، پس هر سکشن مستقل است. ═══════════════════════════════════════════════════════════════════ */ .page-hosting-student{ --mono:'PMNum','PMMono',ui-monospace,'SFMono-Regular','Roboto Mono',monospace; --display:'Morabba','IRANSansX','IRANSans',system-ui,sans-serif; --pad:clamp(18px,4vw,40px); } .psh *,.psh *::before,.psh *::after,.pss *,.pss *::before,.pss *::after,.psf *,.psf *::before,.psf *::after,.psp *,.psp *::before,.psp *::after,.psd *,.psd *::before,.psd *::after,.psq *,.psq *::before,.psq *::after,.psz *,.psz *::before,.psz *::after,.pme *,.pme *::before,.pme *::after{box-sizing:border-box} .psh img,.pss img,.psf img,.psp img,.psd img,.psq img,.psz img,.pme img{max-width:100%;height:auto;display:block} .psd-num,.psf-num,.psh-num,.psp-num,.psq-num,.psz-num{font-family:var(--mono);direction:ltr;unicode-bidi:isolate; font-variant-numeric:tabular-nums;letter-spacing:-.02em} .psf-sr,.psq-sr{position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap} /* ═══ ۰۲ · هیرو .psh- ══════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ فونت‌ها — اگر بلوک دیگری در همین صفحه هست، این را حذف کنید ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ ۰. پایه — زمردی روی شب سبز ═══════════════════════════════════════════════════════════════════ */ .psh{ --ink:#040A08; --em:#0F766E; --em-2:#34D399; --em-3:#6EE7B7; --em-d:#065F53; --mint:#A7F3D0; --amber:#F5A524; --amber-2:#FFD27A; --tx:#F1F8F5; --tx-2:#A6BDB3; --tx-3:#7A9189; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.20); position:relative;isolation:isolate;overflow:hidden; background:var(--ink);color:var(--tx); padding-block:clamp(28px,4vw,54px) 0; -webkit-font-smoothing:antialiased; } .psh-wrap{width:min(1260px,100% - 2*var(--pad));margin-inline:auto;position:relative} .psh :is(a,button):focus-visible{outline:2px solid var(--em-2);outline-offset:3px;border-radius:11px} /* ═══════════════════════════════════════════════════════════════════ ۱. پس‌زمینه — چهار لایه ═══════════════════════════════════════════════════════════════════ */ .psh-light{position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(44% 54% at 30% 46%, rgba(52,211,153,.22) 0%, rgba(15,118,110,.13) 34%, transparent 68%), radial-gradient(80% 50% at 70% -12%, rgba(245,165,36,.10) 0%, transparent 60%), linear-gradient(180deg,#08150F 0%,#050E0A 54%,var(--ink) 100%); animation:pshBreathe 20s ease-in-out infinite} @keyframes pshBreathe{0%,100%{opacity:.93}50%{opacity:1}} /* شبکه‌ی مویی — کاغذ شطرنجی دفتر ریاضی */ .psh-grid{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.4; background-image:linear-gradient(rgba(110,231,183,.07) 1px,transparent 1px), linear-gradient(90deg,rgba(110,231,183,.07) 1px,transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(68% 60% at 32% 46%,#000,transparent 74%); mask-image:radial-gradient(68% 60% at 32% 46%,#000,transparent 74%)} .psh-grain{position:absolute;inset:-120%;z-index:2;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:pshGrain 8s steps(6) infinite} @keyframes pshGrain{ 0%{transform:translate(0,0)} 16%{transform:translate(-3%,2%)} 33%{transform:translate(2%,-3%)} 50%{transform:translate(-2%,-2%)} 66%{transform:translate(3%,1%)} 83%{transform:translate(-1%,3%)} 100%{transform:translate(0,0)}} .psh-vig{position:absolute;inset:0;z-index:3;pointer-events:none; background:radial-gradient(122% 98% at 44% 42%,transparent 38%,rgba(0,0,0,.70) 100%)} /* ═══════════════════════════════════════════════════════════════════ ۲. چیدمان ═══════════════════════════════════════════════════════════════════ */ .psh-layout{position:relative;z-index:5; display:grid;grid-template-columns:1.04fr .96fr; gap:clamp(16px,3vw,44px);align-items:end} /* ═══════════════════════════════════════════════════════════════════ ۳. ستون متن ═══════════════════════════════════════════════════════════════════ */ .psh-tx{padding-block:clamp(20px,3.4vw,46px) clamp(24px,3.6vw,52px)} .psh-flag{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:100px; border:1px solid rgba(52,211,153,.30);background:rgba(52,211,153,.09); color:var(--em-3);font-size:.77rem;font-weight:700;margin-bottom:20px; backdrop-filter:blur(8px)} .psh-flag i{width:7px;height:7px;border-radius:50%;background:var(--em-2);flex:none; box-shadow:0 0 0 0 rgba(52,211,153,.7);animation:pshPulse 2.6s infinite} @keyframes pshPulse{70%{box-shadow:0 0 0 10px rgba(52,211,153,0)} 100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}} .psh-h1{font-family:var(--display);font-size:clamp(2.1rem,5.6vw,3.7rem);font-weight:900; line-height:1.16;letter-spacing:-.026em;margin:0 0 18px;color:#fff; text-shadow:0 2px 36px rgba(0,0,0,.65)} .psh-h1 b{font-weight:inherit;color:var(--em-2)} @supports (background-clip:text) or (-webkit-background-clip:text){ .psh-h1 b{color:transparent;-webkit-background-clip:text;background-clip:text; background-image:linear-gradient(100deg,#A7F3D0 0%,#34D399 46%,#FFD27A 100%)}} /* ⭐ حقیقت — بدون احراز هویت */ .psh-truth{position:relative;margin:0 0 22px;padding:15px 18px 15px 20px;border-radius:14px; font-size:clamp(.93rem,1.5vw,1.03rem);line-height:2;color:#CBE3D8; background:linear-gradient(120deg,rgba(52,211,153,.11),rgba(245,165,36,.05)); border:1px solid rgba(52,211,153,.22); border-inline-start:3px solid var(--em-2)} .psh-truth strong{color:#fff;font-weight:800} .psh-truth b{color:var(--em-3);font-weight:800} /* ⭐ قیمت — لنگر ماهانه */ .psh-price{display:inline-flex;flex-direction:column;gap:2px; padding-inline-start:15px;margin-bottom:22px; border-inline-start:2px solid var(--amber)} .psh-price small{font-size:.76rem;font-weight:600;color:var(--tx-3)} .psh-price b{font-family:var(--display);font-size:clamp(1.6rem,3.4vw,2.15rem);font-weight:900; color:#fff;line-height:1.24} .psh-price b i{font-style:normal;font-size:.46em;font-weight:700;color:var(--tx-2)} .psh-price em{font-style:normal;font-size:.75rem;color:var(--tx-3);line-height:1.9;margin-top:4px} .psh-price em span{color:var(--amber-2);font-weight:700} .psh-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px} .psh-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:inherit; font-weight:800;font-size:.96rem;padding:16px 28px;border-radius:13px;line-height:1; text-decoration:none;border:1px solid transparent;white-space:nowrap; transition:transform .14s ease,box-shadow .26s ease,background .24s ease} .psh-btn:active{transform:translateY(1px)} .psh-btn svg{flex:none} .psh-btn--main{color:#04231C; background:linear-gradient(135deg,#A7F3D0,#34D399 54%,#0F766E); box-shadow:0 14px 34px -12px rgba(52,211,153,.9),inset 0 1px 0 rgba(255,255,255,.45)} .psh-btn--main:hover{box-shadow:0 20px 46px -12px rgba(52,211,153,1)} .psh-btn--ghost{color:#E8F5EE;border-color:var(--line-2);background:rgba(255,255,255,.04); backdrop-filter:blur(8px)} .psh-btn--ghost:hover{border-color:rgba(245,165,36,.55);color:var(--amber-2); background:rgba(245,165,36,.09)} .psh-tx .pm-ir-rating{margin:6px 0 0} /* ═══════════════════════════════════════════════════════════════════ ۴. ستون تصویر ═══════════════════════════════════════════════════════════════════ */ .psh-fig{position:relative;margin:0;align-self:end;min-width:0} .psh-fig::before{content:"";position:absolute;z-index:0;pointer-events:none; inset-block-start:14%;inset-inline-start:8%;width:74%;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle,rgba(52,211,153,.26),rgba(15,118,110,.1) 48%,transparent 70%); filter:blur(32px);animation:pshAura 7s ease-in-out infinite} @keyframes pshAura{0%,100%{opacity:.72;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}} .psh-fig::after{content:"";position:absolute;z-index:1;pointer-events:none; inset-block-end:-2px;inset-inline-start:50%;translate:-50% 0; width:64%;height:28px;border-radius:50%; background:radial-gradient(ellipse,rgba(0,0,0,.78),transparent 70%);filter:blur(11px)} .psh-fig>img{position:relative;z-index:2;width:100%;max-width:540px;margin-inline:auto; filter:drop-shadow(0 26px 54px rgba(0,0,0,.7))} /* کارت‌های شناور */ .psh-chip{position:absolute;z-index:4;display:flex;align-items:center;gap:11px; padding:11px 15px;border-radius:13px; border:1px solid var(--line-2);background:rgba(5,14,10,.82); backdrop-filter:blur(14px) saturate(1.2); box-shadow:0 18px 40px -22px rgba(0,0,0,.95); animation:pshFloat 6s ease-in-out infinite} @keyframes pshFloat{0%,100%{translate:0 0}50%{translate:0 -8px}} .psh-chip b{display:block;font-size:.86rem;font-weight:800;color:#fff;line-height:1.5} .psh-chip small{display:block;font-size:.72rem;color:var(--tx-3);margin-top:2px} .psh-chip-ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center; color:#04231C;background:linear-gradient(140deg,var(--em-3),var(--em))} .psh-chip--a{inset-block-start:26%;inset-inline-start:-6%} .psh-chip--b{inset-block-start:56%;inset-inline-end:-4%;animation-delay:1.7s} .psh-chip--b .psh-chip-ic{color:#2A1B00; background:linear-gradient(140deg,var(--amber-2),var(--amber))} /* ═══════════════════════════════════════════════════════════════════ ۵. نوار مزایا ═══════════════════════════════════════════════════════════════════ */ .psh-deck{position:relative;z-index:5;border-block-start:1px solid var(--line); background:rgba(5,14,10,.62);backdrop-filter:blur(14px)} .psh-deck ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)} .psh-deck li{display:flex;align-items:center;gap:13px; padding:20px clamp(10px,1.6vw,20px);border-inline-start:1px solid var(--line)} .psh-deck li:first-child{border-inline-start:0} .psh-deck li>svg{flex:none;color:var(--em-2)} .psh-deck b{display:block;font-size:.9rem;font-weight:800;color:#fff;line-height:1.5} .psh-deck small{display:block;font-size:.75rem;color:var(--tx-3);margin-top:2px} /* ⭐ عنصر امضا: ترمینال — پایتون و Node واقعاً اجرا می‌شوند */ .psh-deck--term{background:linear-gradient(180deg,rgba(52,211,153,.1),transparent)} .psh-term{position:relative;flex:none;width:52px;height:30px;border-radius:6px;overflow:hidden; background:rgba(0,0,0,.5);border:1px solid rgba(52,211,153,.3)} .psh-term-bar{position:absolute;inset-block-start:0;inset-inline:0;height:7px; background:rgba(52,211,153,.16)} .psh-term-bar i{position:absolute;inset-block-start:2px;width:3px;height:3px;border-radius:50%; background:rgba(110,231,183,.7)} .psh-term-bar i:nth-child(1){inset-inline-start:4px} .psh-term-bar i:nth-child(2){inset-inline-start:10px} .psh-term-bar i:nth-child(3){inset-inline-start:16px} .psh-term-l{position:absolute;inset-inline-start:5px;height:2px;border-radius:1px; background:rgba(110,231,183,.55)} .psh-term-l:nth-of-type(1){inset-block-start:13px;width:18px} .psh-term-l:nth-of-type(2){inset-block-start:19px;width:26px;background:rgba(110,231,183,.35)} .psh-cur{position:absolute;inset-block-start:19px;inset-inline-start:33px; width:5px;height:2px;border-radius:1px;background:var(--em-2); box-shadow:0 0 6px 1px rgba(52,211,153,.8); animation:pshBlink 1.15s steps(2) infinite} @keyframes pshBlink{0%,49%{opacity:1}50%,100%{opacity:.15}} /* ═══════════════════════════════════════════════════════════════════ ۶. واکنش‌گرایی ═══════════════════════════════════════════════════════════════════ */ @media (max-width:1000px){ .psh-layout{grid-template-columns:1fr} .psh-fig{order:-1;max-width:380px;margin-inline:auto;width:100%} .psh-fig>img{max-width:330px} .psh-tx{padding-block:8px 0} .psh-chip--a{inset-block-start:24%;inset-inline-start:-2%} .psh-chip--b{inset-block-start:58%;inset-inline-end:0} .psh-deck ul{grid-template-columns:repeat(2,1fr)} .psh-deck li{border-block-start:1px solid var(--line)} .psh-deck li:nth-child(-n+2){border-block-start:0} .psh-deck li:nth-child(odd){border-inline-start:0} .psh-light{background: radial-gradient(60% 40% at 50% 26%,rgba(52,211,153,.2) 0%,rgba(15,118,110,.11) 34%,transparent 66%), linear-gradient(180deg,#08150F 0%,#050E0A 54%,var(--ink) 100%)} } @media (max-width:600px){ .psh-btn{flex:1 1 100%;padding:15px 22px} .psh-grain{display:none} .psh-chip--b{display:none} .psh-chip--a{inset-block-start:auto;inset-block-end:2%;inset-inline-start:50%; translate:-50% 0;animation:none} .psh-deck ul{grid-template-columns:1fr} .psh-deck li{border-inline-start:0;border-block-start:1px solid var(--line)} .psh-deck li:first-child{border-block-start:0} } /* ═══════════════════════════════════════════════════════════════════ ۷. کاهش حرکت ═══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ .psh *,.psh *::before,.psh *::after{ animation:none !important;transition-duration:.001ms !important} .psh-grain{display:none} .psh-cur{opacity:1} } /* ═══ ۰۳ · سازگاری پروژه .pss- ═════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ فونت‌ها — اگر بلوک دیگری در همین صفحه هست، این را حذف کنید ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ ۰. پایه — روشن، توکن روی خودِ سکشن ═══════════════════════════════════════════════════════════════════ */ .pss{ --paper:#FFFFFF; --paper-2:#F5FAF7; --paper-3:#EAF3EE; --line:#E2EFE8; --line-2:#C6DCD1; --tx:#0E1A15; --tx-2:#4E6259; --tx-3:#89A197; --em:#0F766E; --em-2:#34D399; --em-3:#6EE7B7; --em-s:rgba(52,211,153,.13); --em-g:rgba(15,118,110,.4); --amber:#C2760A; --amber-2:#F5A524; --amber-s:rgba(245,165,36,.13); position:relative;overflow:hidden;isolation:isolate;color:var(--tx); background:linear-gradient(180deg,#FBFEFC 0%,#EFF7F2 100%); padding-block:clamp(56px,8vw,104px); } .pss-wrap{width:min(1220px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:2} .pss :is(a,button):focus-visible{outline:2px solid var(--em-2);outline-offset:3px;border-radius:10px} .pss::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55; background-image:radial-gradient(circle at 1px 1px,rgba(14,26,21,.05) 1px,transparent 0); background-size:24px 24px; -webkit-mask-image:linear-gradient(180deg,#000,transparent 54%); mask-image:linear-gradient(180deg,#000,transparent 54%)} /* رنگ هر پروژه */ .pss [data-c=py] {--c:#0F766E;--c2:#34D399;--cs:rgba(52,211,153,.13);--cg:rgba(15,118,110,.4)} .pss [data-c=node] {--c:#166534;--c2:#4ADE80;--cs:rgba(74,222,128,.14);--cg:rgba(22,101,52,.4)} .pss [data-c=wp] {--c:#1E3A8A;--c2:#7C9BFF;--cs:rgba(124,155,255,.14);--cg:rgba(30,58,138,.4)} .pss [data-c=php] {--c:#7C3AED;--c2:#A855F7;--cs:rgba(168,85,247,.13);--cg:rgba(124,58,237,.4)} .pss [data-c=static]{--c:#C2760A;--c2:#F5A524;--cs:rgba(245,165,36,.14);--cg:rgba(194,118,10,.4)} /* ═══════════════════════════════════════════════════════════════════ ۱. سرتیتر ═══════════════════════════════════════════════════════════════════ */ .pss-head{text-align:center;max-width:64ch;margin:0 auto clamp(26px,3.4vw,38px)} .pss-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:700; color:var(--tx-3);margin:0 0 14px} .pss-eyebrow::before,.pss-eyebrow::after{content:"";width:26px;height:1px; background:linear-gradient(90deg,transparent,var(--em-2))} .pss-h2{font-family:var(--display);font-size:clamp(1.55rem,3.6vw,2.5rem);font-weight:900; line-height:1.34;letter-spacing:-.016em;margin:0 0 12px;color:var(--tx);position:relative;z-index:0} .pss-h2 em{font-style:normal;color:var(--em);position:relative} .pss-h2 em::after{content:"";position:absolute;inset-inline:-3px;inset-block-end:.05em;height:.34em; z-index:-1;border-radius:3px;background:linear-gradient(90deg,var(--em-s),transparent)} .pss-lead{font-size:clamp(.93rem,1.5vw,1.03rem);line-height:2;color:var(--tx-2);margin:0} .pss-lead strong{color:var(--tx);font-weight:800} /* ═══════════════════════════════════════════════════════════════════ ۲. کارت‌های پروژه ═══════════════════════════════════════════════════════════════════ */ .pss-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(13px,1.7vw,18px)} .pss-card{position:relative;display:flex;flex-direction:column;overflow:hidden; flex:1 1 300px;max-width:368px;border-radius:20px; padding:clamp(20px,2.4vw,26px); background:var(--paper);border:1px solid var(--line); box-shadow:0 1px 2px rgba(14,26,21,.04),0 18px 34px -26px rgba(14,26,21,.28); transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s} .pss-card:hover{transform:translateY(-5px);border-color:var(--c2); box-shadow:0 2px 4px rgba(14,26,21,.05),0 28px 50px -24px var(--cg)} .pss-card::before{content:"";position:absolute;z-index:0;pointer-events:none; inset-block-start:-40%;inset-inline-end:-20%;width:70%;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle,var(--cs),transparent 68%)} .pss-card>*{position:relative;z-index:1} /* سربرگ کارت */ .pss-top{display:flex;align-items:center;gap:12px;margin-bottom:14px} .pss-ic{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center; color:#fff;background:linear-gradient(140deg,var(--c2),var(--c)); box-shadow:0 10px 22px -11px var(--cg); transition:transform .32s cubic-bezier(.22,1.5,.5,1)} .pss-card:hover .pss-ic{transform:scale(1.09) rotate(-7deg)} .pss-tag{font-family:var(--mono);direction:ltr;font-size:.66rem;font-weight:700; letter-spacing:.08em;color:var(--c);padding:3px 9px;border-radius:99px;background:var(--cs)} .pss-card h3{font-family:var(--display);font-size:1.06rem;font-weight:900;color:var(--tx); margin:5px 0 0;line-height:1.5} /* پاسخ صریح */ .pss-yes{display:inline-flex;align-items:center;gap:7px;align-self:flex-start; margin-bottom:13px;padding:6px 13px;border-radius:99px; font-size:.78rem;font-weight:800;color:#fff; background:linear-gradient(135deg,var(--c2),var(--c))} .pss-yes svg{flex:none} .pss-card>p{margin:0 0 14px;font-size:.85rem;line-height:2;color:var(--tx-2);flex:1} /* یادداشت صادقانه درباره‌ی فضا */ .pss-note{display:flex;gap:9px;align-items:flex-start;margin:0 0 16px;padding:11px 13px; border-radius:11px;font-size:.78rem;line-height:1.9;color:#5A4520; background:var(--amber-s);border:1px solid rgba(245,165,36,.24)} .pss-note svg{flex:none;margin-top:4px;color:var(--amber)} .pss-plan{display:inline-flex;align-items:center;gap:8px;align-self:flex-start; font-size:.79rem;font-weight:800;padding:9px 15px;border-radius:99px;text-decoration:none; color:var(--c);background:var(--cs);transition:.2s} .pss-plan:hover{color:#fff;background:linear-gradient(140deg,var(--c2),var(--c)); box-shadow:0 10px 22px -10px var(--cg)} .pss-plan svg{flex:none} /* ═══════════════════════════════════════════════════════════════════ ۳. نوار امکانات ═══════════════════════════════════════════════════════════════════ */ .pss-feat{margin-top:clamp(22px,3vw,32px);border-radius:20px;overflow:hidden; border:1px solid var(--line);background:var(--paper)} .pss-feat-h{display:flex;align-items:center;gap:10px;padding:14px var(--pad); border-block-end:1px solid var(--line);background:var(--paper-2)} .pss-feat-h svg{flex:none;color:var(--em)} .pss-feat-h b{font-size:.86rem;font-weight:800;color:var(--tx)} .pss-feat-h span{font-family:var(--mono);direction:ltr;font-size:.64rem;letter-spacing:.1em; color:var(--tx-3);margin-inline-start:auto} .pss-feat ul{list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line)} .pss-feat li{background:var(--paper);padding:17px clamp(12px,1.6vw,18px);transition:background .2s} .pss-feat li:hover{background:var(--paper-2)} .pss-feat li svg{color:var(--em-2);margin-bottom:9px} .pss-feat b{display:block;font-size:.84rem;font-weight:800;color:var(--tx);line-height:1.5} .pss-feat small{display:block;font-size:.74rem;color:var(--tx-3);margin-top:4px;line-height:1.8} /* پانویس */ .pss-ask{display:flex;gap:11px;align-items:flex-start;margin:clamp(12px,1.8vw,18px) 0 0; padding:16px 20px;border-radius:16px;background:var(--paper-2); border:1px dashed var(--line-2); font-size:.83rem;line-height:2;color:var(--tx-2)} .pss-ask svg{flex:none;margin-top:5px;color:var(--em)} .pss-ask b{color:var(--tx);font-weight:800} .pss-ask a{color:var(--em);font-weight:800;text-decoration:underline;text-underline-offset:3px} .pss-ask a:hover{color:var(--tx)} /* ═══════════════════════════════════════════════════════════════════ ۴. واکنش‌گرایی ═══════════════════════════════════════════════════════════════════ */ @media (max-width:1000px){ .pss-feat ul{grid-template-columns:repeat(3,1fr)} } @media (max-width:640px){ .pss-feat ul{grid-template-columns:repeat(2,1fr)} .pss-feat-h span{display:none} } @media (max-width:560px){ .pss-card{flex:1 1 100%;max-width:420px} .pss-feat ul{grid-template-columns:1fr} .pss-plan{align-self:stretch;justify-content:center} } /* ═══════════════════════════════════════════════════════════════════ ۵. کاهش حرکت ═══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ .pss *,.pss *::before,.pss *::after{ animation:none !important;transition-duration:.001ms !important} } /* ═══ ۰۴ · رایگان یا دانشجویی .psf- ════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ فونت‌ها — اگر بلوک دیگری در همین صفحه هست، این را حذف کنید ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ ۰. پایه — تیره ═══════════════════════════════════════════════════════════════════ */ .psf{ --ink:#040A08; --panel:#08130E; --panel-2:#0C1B14; --em:#0F766E; --em-2:#34D399; --em-3:#6EE7B7; --amber:#C2760A; --amber-2:#F5A524; --amber-3:#FFD27A; --gray:#64748B; --gray-2:#94A3B8; --tx:#F1F8F5; --tx-2:#A6BDB3; --tx-3:#7A9189; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.19); position:relative;overflow:hidden;isolation:isolate;background:var(--ink);color:var(--tx); padding-block:clamp(56px,8vw,104px); } .psf-wrap{width:min(1080px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:2} .psf :is(a,button):focus-visible{outline:2px solid var(--em-2);outline-offset:3px;border-radius:10px} .psf::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.4; background-image:linear-gradient(var(--line) 1px,transparent 1px), linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:52px 52px; -webkit-mask-image:radial-gradient(84% 60% at 50% 0%,#000,transparent 76%); mask-image:radial-gradient(84% 60% at 50% 0%,#000,transparent 76%)} .psf::after{content:"";position:absolute;z-index:0;pointer-events:none; inset-block-start:-14%;inset-inline-start:50%;translate:-50% 0; width:70vw;max-width:880px;aspect-ratio:1;border-radius:50%;filter:blur(108px); background:radial-gradient(circle,rgba(52,211,153,.15),rgba(245,165,36,.05) 48%,transparent 70%)} /* ═══════════════════════════════════════════════════════════════════ ۱. سرتیتر ═══════════════════════════════════════════════════════════════════ */ .psf-head{text-align:center;max-width:64ch;margin:0 auto clamp(24px,3.2vw,34px)} .psf-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:700; color:var(--tx-3);margin:0 0 14px} .psf-eyebrow::before,.psf-eyebrow::after{content:"";width:26px;height:1px; background:linear-gradient(90deg,transparent,var(--em-2))} .psf-h2{font-family:var(--display);font-size:clamp(1.6rem,3.7vw,2.6rem);font-weight:900; line-height:1.34;letter-spacing:-.016em;margin:0 0 12px;color:#fff} .psf-h2 em{font-style:normal;color:var(--em-2)} .psf-lead{font-size:clamp(.93rem,1.5vw,1.03rem);line-height:2;color:var(--tx-2);margin:0} .psf-lead strong{color:#fff;font-weight:700} /* ⭐ خط تصمیم */ .psf-key{display:flex;align-items:center;gap:13px;flex-wrap:wrap;justify-content:center; margin:0 0 clamp(24px,3.2vw,34px);padding:16px 22px;border-radius:16px; background:linear-gradient(120deg,rgba(52,211,153,.12),rgba(245,165,36,.05)); border:1px solid rgba(52,211,153,.24); font-size:clamp(.9rem,1.6vw,1.02rem);line-height:2;color:#D7EDE3;text-align:center} .psf-key svg{flex:none;color:var(--em-2)} .psf-key strong{color:#fff;font-weight:800} /* ═══════════════════════════════════════════════════════════════════ ۲. جدول مقایسه ═══════════════════════════════════════════════════════════════════ */ .psf-box{border-radius:22px;background:var(--panel);border:1px solid var(--line); padding:clamp(8px,1.4vw,16px) clamp(6px,1.2vw,14px); box-shadow:0 30px 58px -34px #000} .psf-scroll{overflow-x:auto;scrollbar-width:thin;border-radius:16px} .psf-tbl{width:100%;min-width:520px;border-collapse:separate;border-spacing:0} /* سربرگ */ .psf-tbl thead th{padding:20px 10px 18px;text-align:center;vertical-align:bottom; font-family:var(--display);font-size:1rem;font-weight:900;color:#fff;white-space:nowrap} .psf-tbl thead th:first-child{text-align:start;font-family:inherit;font-size:.77rem; font-weight:700;color:var(--tx-3);padding-inline-start:18px} .psf-price{display:block;font-family:var(--display);font-size:1.16rem;font-weight:900; line-height:1.25;margin-top:8px;color:var(--em-2)} .psf-price small{display:block;font-size:.6rem;font-weight:600;color:var(--tx-3);margin-top:3px} .psf-badge{display:block;width:fit-content;margin:0 auto 9px;padding:4px 12px;border-radius:99px; font-family:var(--display);font-size:.66rem;font-weight:800;color:#04231C; background:linear-gradient(135deg,var(--em-3),var(--em-2))} /* ستون رایگان — خنثی، نه تحقیرشده */ .psf-tbl .psf-free{color:var(--gray-2)} .psf-tbl thead .psf-free .psf-price{color:var(--gray-2)} /* بدنه */ .psf-tbl tbody th{padding:15px 10px 15px 18px;text-align:start;font-size:.84rem;font-weight:700; color:var(--tx-2);white-space:nowrap;border-block-start:1px solid var(--line)} .psf-lbl{display:flex;align-items:center;gap:10px} .psf-lbl svg{flex:none;color:var(--em-2)} .psf-tbl tbody td{padding:15px 10px;text-align:center;font-size:.9rem;font-weight:700; color:#fff;border-block-start:1px solid var(--line)} .psf-tbl tbody tr:nth-of-type(even) th, .psf-tbl tbody tr:nth-of-type(even) td{background:rgba(255,255,255,.018)} .psf-tbl tbody tr:hover th, .psf-tbl tbody tr:hover td{background:rgba(52,211,153,.08)} /* ⭐ ردیف تعیین‌کننده */ .psf-tbl tr.is-key th{color:#fff} .psf-tbl tr.is-key th,.psf-tbl tr.is-key td{background:rgba(245,165,36,.07)} .psf-tbl tr.is-key:hover th,.psf-tbl tr.is-key:hover td{background:rgba(245,165,36,.13)} .psf-tbl tr.is-key .psf-lbl svg{color:var(--amber-2)} /* ستون پیشنهادی */ .psf-tbl .psf-star{background:linear-gradient(180deg,rgba(52,211,153,.1),rgba(52,211,153,.03)) !important; box-shadow:inset 1px 0 0 rgba(52,211,153,.24),inset -1px 0 0 rgba(52,211,153,.24)} .psf-tbl thead .psf-star{border-radius:18px 18px 0 0;padding-block-start:16px; box-shadow:inset 1px 1px 0 rgba(52,211,153,.24),inset -1px 0 0 rgba(52,211,153,.24)} .psf-tbl tbody tr:last-child .psf-star{border-radius:0 0 18px 18px; box-shadow:inset 1px 0 0 rgba(52,211,153,.24),inset -1px 0 0 rgba(52,211,153,.24), inset 0 -1px 0 rgba(52,211,153,.24)} /* آیکون بله و خیر */ .psf-ic{width:20px;height:20px;display:inline-block;vertical-align:middle} .psf-yes{color:var(--em-2)} .psf-no{color:var(--gray)} /* ═══════════════════════════════════════════════════════════════════ ۳. راهنمای تصمیم ═══════════════════════════════════════════════════════════════════ */ .psf-guide{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(13px,1.8vw,18px); margin-top:clamp(16px,2.2vw,22px)} .psf-card{position:relative;overflow:hidden;border-radius:20px; padding:clamp(20px,2.6vw,26px); background:linear-gradient(165deg,var(--panel-2) 0%,#061410 88%); border:1px solid var(--line)} .psf-card--free{border-inline-start:3px solid var(--gray)} .psf-card--paid{border-inline-start:3px solid var(--em-2)} .psf-card h3{display:flex;align-items:center;gap:10px; font-family:var(--display);font-size:1.04rem;font-weight:900;color:#fff; margin:0 0 14px;line-height:1.5} .psf-card h3 svg{flex:none} .psf-card--free h3 svg{color:var(--gray-2)} .psf-card--paid h3 svg{color:var(--em-2)} .psf-card ul{list-style:none;margin:0;padding:0} .psf-card li{display:flex;gap:10px;padding:8px 0;font-size:.85rem;line-height:1.9; color:var(--tx-2);border-block-start:1px solid var(--line)} .psf-card li:first-child{border-block-start:0} .psf-card li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;margin-top:9px} .psf-card--free li::before{background:var(--gray-2)} .psf-card--paid li::before{background:var(--em-2)} .psf-card b{color:#fff;font-weight:700} /* ═══════════════════════════════════════════════════════════════════ ۴. یادداشت فضا و اقدام ═══════════════════════════════════════════════════════════════════ */ .psf-note{display:flex;gap:11px;align-items:flex-start;margin:clamp(14px,2vw,20px) 0 0; padding:16px 20px;border-radius:16px;background:rgba(255,255,255,.03); border:1px solid var(--line);font-size:.83rem;line-height:2.05;color:var(--tx-2)} .psf-note svg{flex:none;margin-top:5px;color:var(--em-2)} .psf-note b{color:#fff;font-weight:800} .psf-cta{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap; margin-top:clamp(20px,2.8vw,28px)} .psf-go{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:.94rem; padding:15px 28px;border-radius:13px;text-decoration:none;color:#04231C; background:linear-gradient(135deg,var(--em-3),var(--em-2) 56%,var(--em)); box-shadow:0 12px 28px -12px rgba(52,211,153,.9); transition:transform .14s,box-shadow .24s} .psf-go:active{transform:translateY(1px)} .psf-go:hover{box-shadow:0 18px 38px -12px rgba(52,211,153,1)} .psf-alt{font-size:.86rem;color:var(--tx-3);line-height:1.9} .psf-alt a{color:var(--em-2);font-weight:800;text-decoration:underline;text-underline-offset:3px} .psf-alt a:hover{color:#fff} /* ═══════════════════════════════════════════════════════════════════ ۵. واکنش‌گرایی ═══════════════════════════════════════════════════════════════════ */ @media (max-width:760px){ .psf-guide{grid-template-columns:1fr} } @media (max-width:560px){ .psf-tbl{min-width:0} .psf-scroll{overflow-x:visible} .psf-tbl thead th{font-size:.82rem;padding:14px 5px 12px} .psf-tbl thead th:first-child{padding-inline-start:10px} .psf-tbl tbody th{padding:12px 5px 12px 10px;font-size:.74rem;white-space:normal} .psf-tbl tbody td{padding:12px 4px;font-size:.79rem} .psf-price{font-size:.9rem} .psf-badge{font-size:.58rem;padding:3px 8px} .psf-lbl svg{display:none} .psf-go{width:100%;justify-content:center} } /* ═══════════════════════════════════════════════════════════════════ ۶. کاهش حرکت ═══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ .psf *,.psf *::before,.psf *::after{transition-duration:.001ms !important} } /* ═══ ۰۵ · تعرفه .psp- ═════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ فونت‌ها — اگر بلوک دیگری در همین صفحه هست، این را حذف کنید ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ ۰. پایه — تیره، توکن روی خودِ سکشن ═══════════════════════════════════════════════════════════════════ */ .psp{ --ink:#040A08; --panel:#08130E; --panel-2:#0C1B14; --em:#0F766E; --em-2:#34D399; --em-3:#6EE7B7; --em-d:#065F53; --amber:#C2760A; --amber-2:#F5A524; --amber-3:#FFD27A; --tx:#F1F8F5; --tx-2:#A6BDB3; --tx-3:#7A9189; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.19); position:relative;overflow:hidden;isolation:isolate;background:var(--ink);color:var(--tx); padding-block:clamp(56px,8vw,104px); } .psp-wrap{width:min(1140px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:2} .psp :is(a,button):focus-visible{outline:2px solid var(--em-2);outline-offset:3px;border-radius:10px} .psp::after{content:"";position:absolute;z-index:0;pointer-events:none; inset-block-start:-16%;inset-inline-start:50%;translate:-50% 0; width:70vw;max-width:880px;aspect-ratio:1;border-radius:50%;filter:blur(110px); background:radial-gradient(circle,rgba(52,211,153,.15),rgba(245,165,36,.05) 48%,transparent 70%)} /* ═══════════════════════════════════════════════════════════════════ ۱. سرتیتر ═══════════════════════════════════════════════════════════════════ */ .psp-head{text-align:center;max-width:60ch;margin:0 auto clamp(18px,2.6vw,26px)} .psp-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:700; color:var(--tx-3);margin:0 0 14px} .psp-eyebrow::before,.psp-eyebrow::after{content:"";width:26px;height:1px; background:linear-gradient(90deg,transparent,var(--em-2))} .psp-h2{font-family:var(--display);font-size:clamp(1.6rem,3.7vw,2.6rem);font-weight:900; line-height:1.34;letter-spacing:-.016em;margin:0 0 12px;color:#fff} .psp-h2 em{font-style:normal;color:var(--em-2)} .psp-lead{font-size:clamp(.93rem,1.5vw,1.03rem);line-height:2;color:var(--tx-2);margin:0} .psp-lead strong{color:#fff;font-weight:700} /* نوار صداقت */ .psp-honest{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center; margin:0 0 clamp(28px,3.8vw,40px);padding:14px 20px;border-radius:14px; background:rgba(255,255,255,.03);border:1px solid var(--line); font-size:.86rem;line-height:1.95;color:var(--tx-2);text-align:center} .psp-honest svg{flex:none;color:var(--em-2)} .psp-honest strong{color:#fff;font-weight:800} /* ═══════════════════════════════════════════════════════════════════ ۲. دو کارت ═══════════════════════════════════════════════════════════════════ */ .psp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,22px)} .psp-card{position:relative;display:flex;flex-direction:column;overflow:hidden; border-radius:24px;padding:clamp(24px,3vw,34px) clamp(20px,2.6vw,30px) clamp(22px,2.8vw,30px); background:var(--panel);border:1px solid var(--line); transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,background .3s} .psp-card:hover{transform:translateY(-5px);border-color:var(--line-2);background:var(--panel-2)} /* کارت پیشنهادی */ .psp-card--star{background:linear-gradient(170deg,#0A2119 0%,#061410 88%); border-color:rgba(52,211,153,.42); box-shadow:0 0 0 1px rgba(52,211,153,.14),0 30px 58px -30px rgba(52,211,153,.5)} .psp-card--star:hover{border-color:rgba(52,211,153,.7); box-shadow:0 0 0 1px rgba(52,211,153,.22),0 40px 72px -30px rgba(52,211,153,.62)} .psp-flag{display:inline-flex;align-items:center;gap:6px;align-self:flex-start; margin-bottom:14px;padding:5px 13px;border-radius:99px; font-size:.69rem;font-weight:800;color:#04231C; background:linear-gradient(135deg,var(--em-3),var(--em-2))} .psp-flag svg{flex:none} /* فاصله‌ی معادل تا قیمت‌ها هم‌تراز بمانند */ .psp-card:not(.psp-card--star) .psp-top{margin-block-start:36px} /* ── سربرگ: پرتره + نام ── */ .psp-top{display:flex;align-items:center;gap:15px;margin-bottom:20px} .psp-face{position:relative;flex:none;width:clamp(62px,8vw,74px);aspect-ratio:1;border-radius:50%; overflow:hidden;background:var(--t,#123); box-shadow:0 0 0 3px var(--panel),0 0 0 4.5px rgba(52,211,153,.45), 0 12px 24px -10px rgba(0,0,0,.8)} .psp-face>svg{position:absolute;inset:0;z-index:0;margin:auto;width:46%;height:46%; color:var(--em);opacity:.55;transition:opacity .4s} .psp-face.ok>svg{opacity:0} .psp-face>img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover; object-position:center 14%;opacity:0;transition:opacity .45s} .psp-face>img.on{opacity:1} .psp-name{font-family:var(--display);font-size:clamp(1.2rem,2.4vw,1.44rem);font-weight:900; color:#fff;margin:0;line-height:1.4} .psp-fit{display:block;font-size:.79rem;font-weight:600;color:var(--tx-3);margin-top:4px; line-height:1.7} /* ── قیمت — بزرگ‌ترین عنصر ── */ .psp-price{margin-bottom:5px} .psp-amount{display:block;font-family:var(--display); font-size:clamp(2rem,4.6vw,2.7rem);font-weight:900;color:#fff;line-height:1.1; letter-spacing:-.024em} .psp-amount i{font-style:normal;font-size:.34em;font-weight:700;color:var(--tx-3); letter-spacing:0} .psp-year{display:block;font-size:.76rem;color:var(--tx-3);line-height:1.85;margin-bottom:20px} .psp-year b{font-family:var(--mono);direction:ltr;color:var(--tx-2);font-weight:700} /* ── مشخصات ── */ .psp-specs{list-style:none;margin:0 0 18px;padding:0; display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line); border-radius:14px;overflow:hidden;border:1px solid var(--line)} .psp-specs li{background:var(--panel-2);padding:13px 10px;text-align:center} .psp-specs b{display:block;font-family:var(--mono);direction:ltr;font-size:.93rem; font-weight:700;color:#fff;line-height:1.4} .psp-specs small{display:block;font-size:.7rem;color:var(--tx-3);margin-top:4px} /* ── چه چیزی جا می‌شود ── */ .psp-good{list-style:none;margin:0 0 22px;padding:0;flex:1} .psp-good li{display:flex;gap:9px;padding:8px 0;font-size:.83rem;line-height:1.85; color:var(--tx-2);border-block-start:1px solid var(--line)} .psp-good li:first-child{border-block-start:0} .psp-good svg{flex:none;margin-top:4px;color:var(--em-2)} .psp-go{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800; font-size:.92rem;padding:15px 20px;border-radius:13px;text-decoration:none; color:#EAF7F1;border:1px solid var(--line-2);background:rgba(255,255,255,.04); transition:.2s} .psp-go:hover{color:#04231C;border-color:transparent; background:linear-gradient(135deg,var(--em-3),var(--em-2) 56%,var(--em)); box-shadow:0 12px 26px -12px rgba(52,211,153,.9)} .psp-card--star .psp-go{color:#04231C;border-color:transparent; background:linear-gradient(135deg,var(--em-3),var(--em-2) 56%,var(--em)); box-shadow:0 12px 26px -12px rgba(52,211,153,.9)} .psp-card--star .psp-go:hover{box-shadow:0 18px 34px -12px rgba(52,211,153,1)} /* ═══════════════════════════════════════════════════════════════════ ۳. نوار مشترک ═══════════════════════════════════════════════════════════════════ */ .psp-both{margin-top:clamp(16px,2.2vw,22px);border-radius:18px;overflow:hidden; border:1px solid var(--line);background:rgba(255,255,255,.025)} .psp-both-h{display:flex;align-items:center;gap:10px;padding:14px var(--pad); border-block-end:1px solid var(--line);background:rgba(255,255,255,.03)} .psp-both-h svg{flex:none;color:var(--em-2)} .psp-both-h b{font-size:.86rem;font-weight:800;color:#fff} .psp-both ul{list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)} .psp-both li{background:var(--panel);padding:16px clamp(12px,1.6vw,18px); display:flex;align-items:center;gap:10px} .psp-both li svg{flex:none;color:var(--em-2)} .psp-both b{display:block;font-size:.83rem;font-weight:800;color:#fff;line-height:1.5} .psp-both small{display:block;font-size:.73rem;color:var(--tx-3);margin-top:2px} /* نوار اطمینان */ .psp-safe{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px; margin-top:clamp(22px,3vw,32px);padding-block-start:20px; border-block-start:1px solid var(--line)} .psp-safe span{display:inline-flex;align-items:center;gap:8px; font-size:.83rem;font-weight:600;color:var(--tx-2)} .psp-safe svg{flex:none;color:var(--em-2)} /* ═══════════════════════════════════════════════════════════════════ ۴. واکنش‌گرایی ═══════════════════════════════════════════════════════════════════ */ @media (max-width:900px){ .psp-both ul{grid-template-columns:repeat(2,1fr)} } @media (max-width:680px){ .psp-grid{grid-template-columns:1fr;max-width:440px;margin-inline:auto} .psp-card:not(.psp-card--star) .psp-top{margin-block-start:0} .psp-both ul{grid-template-columns:1fr} .psp-safe{gap:12px 18px} } @media (max-width:400px){ .psp-specs{grid-template-columns:1fr} .psp-specs li{display:flex;align-items:baseline;justify-content:space-between; gap:10px;text-align:start;padding:11px 14px} .psp-specs small{margin-top:0} } /* ═══════════════════════════════════════════════════════════════════ ۵. کاهش حرکت ═══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ .psp *,.psp *::before,.psp *::after{ animation:none !important;transition-duration:.001ms !important} } /* ═══ ۰۶ · از صفر تا انتشار .psd- ══════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ فونت‌ها — اگر بلوک دیگری در همین صفحه هست، این را حذف کنید ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ ۰. پایه — روشن ═══════════════════════════════════════════════════════════════════ */ .psd{ --paper:#FFFFFF; --paper-2:#F5FAF7; --paper-3:#EAF3EE; --line:#E2EFE8; --line-2:#C6DCD1; --tx:#0E1A15; --tx-2:#4E6259; --tx-3:#89A197; --em:#0F766E; --em-2:#34D399; --em-3:#6EE7B7; --em-s:rgba(52,211,153,.13); --em-g:rgba(15,118,110,.4); --amber:#C2760A; --amber-2:#F5A524; --amber-s:rgba(245,165,36,.12); position:relative;overflow:hidden;isolation:isolate;color:var(--tx); background:linear-gradient(180deg,#FBFEFC 0%,#EFF7F2 100%); padding-block:clamp(56px,8vw,104px); } .psd-wrap{width:min(1120px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:2} .psd :is(a,button):focus-visible{outline:2px solid var(--em-2);outline-offset:3px;border-radius:10px} .psd::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55; background-image:radial-gradient(circle at 1px 1px,rgba(14,26,21,.05) 1px,transparent 0); background-size:24px 24px; -webkit-mask-image:linear-gradient(180deg,#000,transparent 52%); mask-image:linear-gradient(180deg,#000,transparent 52%)} /* ═══════════════════════════════════════════════════════════════════ ۱. سرتیتر ═══════════════════════════════════════════════════════════════════ */ .psd-head{text-align:center;max-width:62ch;margin:0 auto clamp(28px,3.6vw,42px)} .psd-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:700; color:var(--tx-3);margin:0 0 14px} .psd-eyebrow::before,.psd-eyebrow::after{content:"";width:26px;height:1px; background:linear-gradient(90deg,transparent,var(--em-2))} .psd-h2{font-family:var(--display);font-size:clamp(1.55rem,3.6vw,2.5rem);font-weight:900; line-height:1.34;letter-spacing:-.016em;margin:0 0 12px;color:var(--tx);position:relative;z-index:0} .psd-h2 em{font-style:normal;color:var(--em);position:relative} .psd-h2 em::after{content:"";position:absolute;inset-inline:-3px;inset-block-end:.05em;height:.34em; z-index:-1;border-radius:3px;background:linear-gradient(90deg,var(--em-s),transparent)} .psd-lead{font-size:clamp(.93rem,1.5vw,1.03rem);line-height:2;color:var(--tx-2);margin:0} .psd-lead strong{color:var(--tx);font-weight:800} /* ═══════════════════════════════════════════════════════════════════ ۲. ⭐ تایم‌لاین پنج قدمی ═══════════════════════════════════════════════════════════════════ */ .psd-steps{position:relative;list-style:none;margin:0;padding:0} /* خط عمودی وصل‌کننده */ .psd-steps::before{content:"";position:absolute;z-index:0; inset-block:34px 34px;inset-inline-start:calc(clamp(46px,5.6vw,56px) / 2 - 1px); width:2px;border-radius:2px; background:linear-gradient(180deg,var(--em-2),var(--em) 50%,var(--line))} .psd-step{position:relative;z-index:1;display:grid; grid-template-columns:clamp(46px,5.6vw,56px) 1fr; gap:clamp(14px,2vw,22px);align-items:start; padding-block-end:clamp(14px,2vw,20px)} .psd-step:last-child{padding-block-end:0} /* شماره */ .psd-n{position:relative;flex:none;width:clamp(46px,5.6vw,56px);aspect-ratio:1;border-radius:50%; display:grid;place-items:center; font-family:var(--mono);direction:ltr;font-size:.94rem;font-weight:700;color:#fff; background:linear-gradient(140deg,var(--em-2),var(--em)); box-shadow:0 0 0 5px var(--paper),0 10px 24px -11px var(--em-g)} /* کارت قدم */ .psd-body{border-radius:18px;padding:clamp(18px,2.4vw,24px); background:var(--paper);border:1px solid var(--line); box-shadow:0 1px 2px rgba(14,26,21,.04),0 16px 30px -26px rgba(14,26,21,.26); transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s} .psd-step:hover .psd-body{transform:translateY(-3px);border-color:var(--em-2); box-shadow:0 2px 4px rgba(14,26,21,.05),0 24px 44px -24px var(--em-g)} .psd-body-h{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:11px} .psd-body-h svg{flex:none;color:var(--em)} .psd-body-h h3{flex:1;font-family:var(--display);font-size:1.06rem;font-weight:900; color:var(--tx);margin:0;line-height:1.5;min-width:0} .psd-time{flex:none;display:inline-flex;align-items:center;gap:6px;padding:4px 11px; border-radius:99px;font-size:.71rem;font-weight:700;color:var(--em);background:var(--em-s)} .psd-body>p{margin:0 0 14px;font-size:.87rem;line-height:2.05;color:var(--tx-2)} .psd-body>p b{color:var(--tx);font-weight:800} /* نکته */ .psd-tip{display:flex;gap:9px;align-items:flex-start;margin:0;padding:11px 14px; border-radius:11px;font-size:.79rem;line-height:1.95;color:#5A4520; background:var(--amber-s);border:1px solid rgba(245,165,36,.24)} .psd-tip svg{flex:none;margin-top:4px;color:var(--amber)} .psd-tip b{font-weight:800;color:#4A3818} /* ═══════════════════════════════════════════════════════════════════ ۳. یادداشت پایتون و Node ═══════════════════════════════════════════════════════════════════ */ .psd-extra{display:flex;gap:11px;align-items:flex-start; margin-top:clamp(18px,2.4vw,24px);padding:16px 20px;border-radius:16px; background:var(--paper);border:1px solid var(--line); border-inline-start:3px solid var(--em-2); font-size:.85rem;line-height:2.05;color:var(--tx-2)} .psd-extra svg{flex:none;margin-top:5px;color:var(--em)} .psd-extra b{color:var(--tx);font-weight:800} .psd-extra a{color:var(--em);font-weight:800;text-decoration:underline;text-underline-offset:3px} .psd-extra a:hover{color:var(--tx)} /* ═══════════════════════════════════════════════════════════════════ ۴. نوار ابزار ═══════════════════════════════════════════════════════════════════ */ .psd-tools{margin-top:clamp(16px,2.2vw,22px);border-radius:20px;overflow:hidden; border:1px solid var(--line);background:var(--paper)} .psd-tools-h{display:flex;align-items:center;gap:10px;padding:14px var(--pad); border-block-end:1px solid var(--line);background:var(--paper-2)} .psd-tools-h svg{flex:none;color:var(--em)} .psd-tools-h b{font-size:.86rem;font-weight:800;color:var(--tx)} .psd-tools-h span{font-family:var(--mono);direction:ltr;font-size:.64rem;letter-spacing:.1em; color:var(--tx-3);margin-inline-start:auto} .psd-tools ul{list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line)} .psd-tools li{background:var(--paper);padding:16px clamp(12px,1.6vw,18px);transition:background .2s} .psd-tools li:hover{background:var(--paper-2)} .psd-tools li svg{color:var(--em-2);margin-bottom:9px} .psd-tools b{display:block;font-size:.83rem;font-weight:800;color:var(--tx);line-height:1.5} .psd-tools small{display:block;font-size:.73rem;color:var(--tx-3);margin-top:4px;line-height:1.8} /* ═══════════════════════════════════════════════════════════════════ ۵. واکنش‌گرایی ═══════════════════════════════════════════════════════════════════ */ @media (max-width:1000px){ .psd-tools ul{grid-template-columns:repeat(3,1fr)} } @media (max-width:640px){ .psd-tools ul{grid-template-columns:repeat(2,1fr)} .psd-tools-h span{display:none} } @media (max-width:520px){ .psd-steps::before{display:none} .psd-step{grid-template-columns:1fr;gap:0} .psd-n{margin-bottom:-22px;margin-inline-start:14px; width:42px;font-size:.86rem;box-shadow:0 8px 20px -10px var(--em-g)} .psd-body{padding-block-start:30px} .psd-tools ul{grid-template-columns:1fr} .psd-body-h h3{flex:1 1 100%} } /* ═══════════════════════════════════════════════════════════════════ ۶. کاهش حرکت ═══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ .psd *,.psd *::before,.psd *::after{ animation:none !important;transition-duration:.001ms !important} } /* ═══ ۰۷ · سوالات و فراخوان .psq- .psz- ══════════════════ */ /* ═══════════════════════════════════════════════════════════════════ فونت‌ها — اگر بلوک دیگری در همین صفحه هست، این را حذف کنید ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ بخش الف · سوالات متداول ═══════════════════════════════════════════════════════════════════ */ .psq{ --ink:#040A08; --panel:#08130E; --tx:#EDF2FA; --tx-2:#98A9C6; --tx-3:#6A7C99; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.19); --em:#0F766E; --em-2:#34D399; --em-3:#6EE7B7; --em-d:#065F53; --amber:#C2760A; --amber-2:#F5A524; --sky:#0284C7; --sky-2:#38BDF8; --sky-3:#7DD3FC; --violet:#A855F7; position:relative;overflow:hidden;isolation:isolate;background:var(--ink);color:var(--tx); padding-block:clamp(56px,8vw,104px); } .psq-wrap{width:min(900px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:3} .psq :is(a,button,input,summary):focus-visible{outline:2px solid var(--em);outline-offset:3px; border-radius:10px} .psq::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55; background-image:linear-gradient(var(--line) 1px,transparent 1px), linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(80% 60% at 50% 0%,#000,transparent 74%); mask-image:radial-gradient(80% 60% at 50% 0%,#000,transparent 74%)} .psq::after{content:"";position:absolute;z-index:0;pointer-events:none; inset-block-start:-18%;inset-inline-start:50%;translate:-50% 0; width:70vw;max-width:820px;aspect-ratio:1;border-radius:50%;filter:blur(100px); background:radial-gradient(circle,rgba(52,211,153,.16) 0%,rgba(15,118,110,.12) 46%,transparent 68%)} /* سرتیتر */ .psq-head{text-align:center;margin-bottom:clamp(24px,3.4vw,38px)} .psq-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:700; color:var(--tx-2);margin:0 0 14px} .psq-eyebrow::before,.psq-eyebrow::after{content:"";width:26px;height:1px; background:linear-gradient(90deg,transparent,var(--em))} .psq-h2{font-family:var(--display);font-size:clamp(1.6rem,3.8vw,2.7rem);font-weight:900; line-height:1.32;letter-spacing:-.018em;margin:0 0 12px;color:#fff} .psq-h2 em{font-style:normal;color:var(--em-2)} .psq-lead{font-size:clamp(.92rem,1.5vw,1.02rem);line-height:2;color:var(--tx-2); margin:0 auto;max-width:56ch} /* جستجو */ .psq-search{position:relative;margin-bottom:14px} .psq-search svg{position:absolute;inset-block-start:50%;inset-inline-start:18px;translate:0 -50%; color:var(--tx-3);pointer-events:none;transition:color .2s} .psq-search input{width:100%;font:inherit;font-size:.95rem;color:#fff; padding:16px 20px 16px 50px;border-radius:14px; background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.03)); border:1px solid var(--line);outline:none;transition:.2s} .psq-search input::placeholder{color:var(--tx-3)} .psq-search input:focus{border-color:rgba(52,211,153,.5);box-shadow:0 0 0 4px rgba(52,211,153,.1)} .psq-search:focus-within svg{color:var(--em)} .psq-clear{position:absolute;inset-block-start:50%;inset-inline-end:12px;translate:0 -50%; display:none;place-items:center;width:30px;height:30px;border-radius:50%;border:0;cursor:pointer; background:rgba(255,255,255,.09);color:var(--tx-2)} .psq-clear.on{display:grid} .psq-clear:hover{background:rgba(255,255,255,.16);color:#fff} /* فیلتر گروه */ .psq-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none; padding-block-end:4px;margin-bottom:22px} .psq-tabs::-webkit-scrollbar{display:none} .psq-tab{flex:none;display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:.83rem; font-weight:700;cursor:pointer;padding:10px 16px;border-radius:99px;white-space:nowrap; border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--tx-2);transition:.18s} .psq-tab svg{flex:none;opacity:.75} .psq-tab b{font-family:var(--mono);direction:ltr;font-size:.7rem;padding:2px 7px;border-radius:99px; background:rgba(255,255,255,.09);color:var(--tx-3);font-weight:700} .psq-tab:hover{border-color:var(--line-2);color:#fff} .psq-tab[aria-pressed=true]{background:linear-gradient(140deg,rgba(52,211,153,.2),rgba(15,118,110,.16)); border-color:rgba(52,211,153,.42);color:#fff} .psq-tab[aria-pressed=true] b{background:rgba(255,255,255,.18);color:#fff} .psq-tab[aria-pressed=true] svg{opacity:1;color:var(--em-2)} /* آکاردئون */ .psq-list{display:grid;gap:10px} .psq-item{position:relative;border-radius:16px;overflow:hidden; background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.02)); border:1px solid var(--line);transition:border-color .25s,box-shadow .25s,background .25s} .psq-item[data-g=buy]{--ac:var(--em);--ac2:var(--em-2);--acs:rgba(52,211,153,.16)} .psq-item[data-g=dev]{--ac:var(--sky);--ac2:var(--sky-2);--acs:rgba(56,189,248,.16)} .psq-item[data-g=aft]{--ac:#0F766E;--ac2:var(--violet);--acs:rgba(168,85,247,.16)} .psq-item[data-g=gen]{--ac:var(--em-d);--ac2:var(--em-2);--acs:rgba(52,211,153,.14)} .psq-item:hover{border-color:var(--line-2)} .psq-item[open]{border-color:color-mix(in srgb,var(--ac2) 45%,transparent); background:linear-gradient(160deg,var(--acs),rgba(255,255,255,.02) 46%); box-shadow:0 20px 44px -28px var(--ac2)} .psq-item::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px; background:linear-gradient(180deg,var(--ac2),var(--ac));opacity:0;transition:opacity .25s} .psq-item[open]::before{opacity:1} .psq-item[hidden]{display:none} .psq-q{display:flex;align-items:center;gap:14px;cursor:pointer;list-style:none; padding:18px clamp(16px,2.2vw,22px);user-select:none} .psq-q::-webkit-details-marker{display:none} .psq-n{flex:none;font-family:var(--mono);direction:ltr;font-size:.72rem;font-weight:700; color:var(--tx-3);width:24px;transition:color .25s} .psq-item[open] .psq-n{color:var(--ac2)} .psq-q>span:not(.psq-n):not(.psq-plus){flex:1;font-size:.98rem;font-weight:700;color:#fff; line-height:1.75} .psq-plus{flex:none;position:relative;width:28px;height:28px;border-radius:9px; border:1px solid var(--line-2);transition:.28s cubic-bezier(.22,1,.36,1)} .psq-plus::before,.psq-plus::after{content:"";position:absolute;inset-block-start:50%; inset-inline-start:50%;translate:-50% -50%;background:var(--tx-2);border-radius:2px; transition:.28s cubic-bezier(.22,1,.36,1)} .psq-plus::before{width:11px;height:2px} .psq-plus::after{width:2px;height:11px} .psq-item[open] .psq-plus{border-color:transparent; background:linear-gradient(140deg,var(--ac2),var(--ac));rotate:180deg} .psq-item[open] .psq-plus::before{background:#0B1120} .psq-item[open] .psq-plus::after{height:0;background:#0B1120} .psq-a{display:grid;grid-template-rows:0fr; transition:grid-template-rows .34s cubic-bezier(.22,1,.36,1)} .psq-item[open] .psq-a{grid-template-rows:1fr} .psq-item.closing .psq-a{grid-template-rows:0fr} .psq-a>div{overflow:hidden;min-height:0} .psq-a p{margin:0;padding:0 clamp(16px,2.2vw,22px) 20px 62px; font-size:.9rem;line-height:2.15;color:#B7C4DE} .psq-a strong{color:#fff;font-weight:700} .psq-a a{color:var(--ac2);font-weight:700;text-decoration:underline;text-underline-offset:3px} .psq-a a:hover{color:#fff} .psq-tag{display:inline-flex;align-items:center;gap:6px;margin-inline-start:62px; margin-block-end:18px;padding:4px 11px;border-radius:99px;font-size:.68rem;font-weight:700; background:var(--acs);color:var(--ac2)} .psq-hit{background:rgba(52,211,153,.26);color:#fff;border-radius:3px;padding:0 2px} .psq-empty{display:none;text-align:center;padding:44px 20px;border-radius:16px; border:1px dashed var(--line-2);background:rgba(255,255,255,.02)} .psq-empty.on{display:block} .psq-empty b{display:block;font-family:var(--display);font-size:1.06rem;font-weight:900; color:#fff;margin-bottom:7px} .psq-empty p{margin:0;font-size:.87rem;line-height:1.95;color:var(--tx-2)} @media (max-width:560px){ .psq-q{gap:11px;padding:16px 14px} .psq-n{display:none} .psq-a p,.psq-tag{padding-inline-start:14px;margin-inline-start:14px} .psq-a p{padding-inline-end:14px} } /* ═══════════════════════════════════════════════════════════════════ بخش ب · فراخوان پایانی ═══════════════════════════════════════════════════════════════════ */ .psz{ --ink:#040A08; --panel:#08130E; --tx:#EDF2FA; --tx-2:#98A6C2; --tx-3:#68768F; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.20); --em:#0F766E; --em-2:#34D399; --em-3:#6EE7B7; --em-d:#065F53; --amber:#C2760A; --amber-2:#F5A524; --sky:#0284C7; --sky-2:#38BDF8; --sky-3:#7DD3FC; position:relative;overflow:hidden;isolation:isolate;background:var(--ink);color:var(--tx); padding-block:clamp(56px,8vw,100px); } .psz-wrap{width:min(1140px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:3} .psz :is(a,button):focus-visible{outline:2px solid var(--em);outline-offset:3px;border-radius:10px} .psz::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image:linear-gradient(var(--line) 1px,transparent 1px), linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:58px 58px; -webkit-mask-image:radial-gradient(76% 60% at 50% 0%,#000,transparent 76%); mask-image:radial-gradient(76% 60% at 50% 0%,#000,transparent 76%)} .psz::after{content:"";position:absolute;z-index:0;pointer-events:none; inset-block-end:-28%;inset-inline-start:50%;translate:-50% 0; width:76vw;max-width:900px;aspect-ratio:1;border-radius:50%;filter:blur(110px); background:radial-gradient(circle,rgba(52,211,153,.18) 0%,rgba(15,118,110,.12) 48%,transparent 68%)} .psz-head{text-align:center;max-width:60ch;margin:0 auto clamp(28px,4vw,44px)} .psz-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:700; color:var(--tx-2);margin:0 0 14px} .psz-eyebrow::before,.psz-eyebrow::after{content:"";width:26px;height:1px; background:linear-gradient(90deg,transparent,var(--em))} .psz-h2{font-family:var(--display);font-size:clamp(1.6rem,3.8vw,2.7rem);font-weight:900; line-height:1.32;letter-spacing:-.018em;margin:0 0 12px;color:#fff} .psz-h2 em{font-style:normal;color:var(--em-2)} .psz-lead{font-size:clamp(.93rem,1.5vw,1.03rem);line-height:2.05;color:var(--tx-2);margin:0} .psz-lead a{color:var(--em-2);font-weight:700;text-decoration:underline;text-underline-offset:3px} /* دو مسیر */ .psz-paths{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(14px,2vw,22px);align-items:stretch} .psz-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:22px; background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 60px -38px #000} .psz-card-h{display:flex;align-items:center;gap:11px;padding:18px clamp(18px,2.2vw,24px); border-block-end:1px solid var(--line)} .psz-card-h i{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center; font-style:normal} .psz-card-h b{font-family:var(--display);font-size:1.02rem;font-weight:900;color:#fff;line-height:1.5} .psz-card-h small{display:block;font-size:.78rem;color:var(--tx-3);font-weight:500;margin-top:2px} /* مسیر ۱ · شروع */ .psz-body{padding:clamp(20px,2.6vw,28px);display:flex;flex-direction:column;flex:1} .psz-price{display:flex;align-items:baseline;gap:9px;margin-bottom:6px} .psz-price b{font-family:var(--display);font-size:clamp(1.8rem,3.8vw,2.4rem);font-weight:900; color:#fff;line-height:1.1;letter-spacing:-.02em} .psz-price i{font-style:normal;font-size:.86rem;font-weight:700;color:var(--tx-2)} .psz-note{margin:0 0 20px;font-size:.8rem;color:var(--tx-3);line-height:1.9} .psz-list{list-style:none;margin:0 0 22px;padding:0;flex:1} .psz-list li{display:flex;gap:10px;padding:9px 0;font-size:.85rem;line-height:1.9;color:var(--tx-2); border-block-start:1px solid var(--line)} .psz-list li:first-child{border-block-start:0} .psz-list svg{flex:none;margin-top:5px;color:var(--em-2)} .psz-list b{color:#fff;font-weight:700} .psz-go{display:flex;align-items:center;justify-content:center;gap:9px;font-weight:800; font-size:.95rem;padding:16px 24px;border-radius:13px;text-decoration:none;color:#fff; background:linear-gradient(135deg,var(--em-3),var(--em) 55%,var(--em-d)); box-shadow:0 14px 32px -12px rgba(52,211,153,.95),inset 0 1px 0 rgba(255,255,255,.5); transition:transform .14s,box-shadow .22s} .psz-go:active{transform:translateY(1px)} .psz-go:hover{box-shadow:0 20px 44px -12px rgba(52,211,153,1)} /* مسیر ۲ · مشورت */ .psz-ask{display:flex;flex-direction:column} .psz-ask-b{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center; padding:clamp(20px,2.6vw,28px)} .psz-ask-ic{width:56px;height:56px;border-radius:17px;margin:0 auto 16px;display:grid; place-items:center;color:#fff;background:linear-gradient(140deg,var(--sky-2),var(--sky)); box-shadow:0 14px 30px -14px var(--sky-2)} .psz-ask-b b{display:block;font-family:var(--display);font-size:1.1rem;font-weight:900;color:#fff; margin-bottom:10px;line-height:1.5} .psz-ask-b p{margin:0 0 20px;font-size:.84rem;line-height:1.95;color:var(--tx-2)} .psz-ask-go{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px; border-radius:12px;font-size:.9rem;font-weight:800;text-decoration:none;color:#E8EFFA; border:1px solid var(--line-2);background:rgba(255,255,255,.04);transition:.2s} .psz-ask-go:hover{border-color:rgba(56,189,248,.6);color:var(--sky-2); background:rgba(56,189,248,.09)} .psz-ask-n{margin:12px 0 0;font-size:.74rem;color:var(--tx-3);line-height:1.8} /* نوار اطمینان */ .psz-safe{margin-top:clamp(16px,2.2vw,22px);border-radius:18px;border:1px solid var(--line); background:rgba(255,255,255,.03);display:grid;grid-template-columns:repeat(3,1fr)} .psz-safe div{display:flex;align-items:center;gap:11px;padding:18px clamp(16px,2vw,22px); border-inline-start:1px solid var(--line)} .psz-safe div:first-child{border-inline-start:0} .psz-safe svg{flex:none;color:var(--em-2)} .psz-safe b{display:block;font-size:.87rem;font-weight:800;color:#fff;line-height:1.5} .psz-safe small{display:block;font-size:.77rem;color:var(--tx-3);margin-top:2px} @media (max-width:900px){ .psz-paths{grid-template-columns:1fr} .psz-safe{grid-template-columns:1fr} .psz-safe div{border-inline-start:0;border-block-start:1px solid var(--line)} .psz-safe div:first-child{border-block-start:0} } /* کاهش حرکت */ @media (prefers-reduced-motion:reduce){ .psq *,.psq *::before,.psq *::after, .psz *,.psz *::before,.psz *::after{ animation:none !important;transition-duration:.001ms !important} }