/* ========================================================================= زیگ‌زاگ نتورک — shared design system Single source of truth for every page. Change here → changes everywhere. Paths are relative to /assets/, so fonts/images are referenced with ../ ========================================================================= */ @font-face{font-family:'Ravagh';src:url('../fonts/RavaghFaNum-Regular.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Ravagh';src:url('../fonts/RavaghFaNum-Medium.woff2') format('woff2');font-weight:500;font-display:swap} @font-face{font-family:'Ravagh';src:url('../fonts/RavaghFaNum-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'Ravagh';src:url('../fonts/RavaghFaNum-Bold.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:'Ravagh';src:url('../fonts/RavaghFaNum-ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap} @font-face{font-family:'Ravagh';src:url('../fonts/RavaghFaNum-Black.woff2') format('woff2');font-weight:900;font-display:swap} :root{ --tscale:1; /* مقیاسِ متنِ ثانویه در نمایشگرهای بزرگ — زیر ۱۷۰۰px همیشه ۱ */ --bg:#05060a; --bg2:#06070c; --ink:#f7f8fc; --sec:#c6cad8; --muted:#9297ab; --yt:#FF0033; --violet:#8b5cf6; --violet-deep:#7c4ddf; --violet-lo:#c4b5fd; --emerald:#34d399; --gold:#f5c451; --line:rgba(255,255,255,.11); --line-soft:rgba(255,255,255,.06); --glass:rgba(255,255,255,.05); --panel:#0e0f16; --btn:linear-gradient(135deg,#7c4ddf,#8b5cf6); --maxw:1460px; /* owner complained twice of a zoomed-out feel: 1200→1320→1460. Fills wide screens; type also scaled up so huge displays feel full, not empty. */ /* one card language across services / why / faq / magazine */ --r-card:18px; --r-ico:14px; --card-bg:rgba(255,255,255,.045); --card-bg-hi:rgba(255,255,255,.075); --card-line-hi:rgba(139,92,246,.42); --card-sh:0 24px 48px -34px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05); --card-sh-hi:0 30px 60px -32px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.08); --ease:cubic-bezier(.22,.61,.36,1); --sec-pad:clamp(84px,9.5vw,124px); } *{box-sizing:border-box;margin:0;padding:0} /* overflow-x on propagates to the viewport and leaves itself unclipped, so decorative layers that extend past the edge stay scrollable; clip on instead (no scroll container). */ html{scroll-behavior:smooth;overflow-x:clip} body{font-family:'Ravagh',Tahoma,sans-serif;direction:rtl;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:clip;font-size:18.5px;line-height:1.7} a{color:inherit;text-decoration:none} svg{display:block} img{max-width:100%} ::selection{background:rgba(139,92,246,.4);color:#fff} /* visible focus everywhere (accessibility) */ :where(a,button,summary,input,textarea,select,details):focus-visible{ outline:2px solid var(--violet-lo);outline-offset:3px;border-radius:8px} /* skip link */ .skip{position:absolute;right:-9999px;top:12px;z-index:100;background:var(--panel);border:1px solid var(--line); padding:10px 18px;border-radius:10px;font-weight:700} .skip:focus{right:16px} /* ------- shared atmosphere ------- */ .grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.04;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} .container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,40px)} section{position:relative;z-index:2} /* ------- buttons ------- */ .btn{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;font-family:inherit;font-weight:700;border-radius:12px;transition:transform .18s ease, box-shadow .18s ease;white-space:nowrap} .btn--primary{background:var(--btn);color:#fff;padding:13px 24px;font-size:calc(16.5px*var(--tscale,1));box-shadow:0 14px 34px -12px rgba(124,77,223,.9), inset 0 1px 0 rgba(255,255,255,.18)} .btn--primary:hover{transform:translateY(-2px);box-shadow:0 20px 44px -12px rgba(124,77,223,1), inset 0 1px 0 rgba(255,255,255,.22)} .btn--lg{padding:16px 32px;font-size:calc(18px*var(--tscale,1));border-radius:14px} .btn--ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid var(--line);padding:15px 28px;font-size:calc(16.5px*var(--tscale,1));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .btn--ghost:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)} .actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap} /* ------- section heading kit ------- */ .eyebrow{display:inline-flex;align-items:center;gap:10px;padding:9px 18px;border-radius:100px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:calc(16px*var(--tscale,1));color:#e2e4ee;font-weight:600;letter-spacing:.01em} .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--violet);box-shadow:0 0 10px 1px rgba(139,92,246,.9)} .sec-head{max-width:820px} .sec-head.center{margin:0 auto;text-align:center} .sec-head h2{margin-top:20px;font-weight:900;font-size:clamp(34px,3.9vw,68px);line-height:1.28;letter-spacing:-.028em;text-wrap:balance} .sec-head p{margin-top:16px;font-size:clamp(18px,1.5vw,calc(22px*var(--tscale,1)));color:var(--sec);line-height:1.9;text-wrap:pretty} .grad{background:linear-gradient(100deg,#c4b5fd,#8b5cf6);-webkit-background-clip:text;background-clip:text;color:transparent} /* ================= NAV (canonical header) ================= */ nav.site-nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px clamp(20px,5vw,40px); background:linear-gradient(180deg,rgba(5,6,10,.7),rgba(5,6,10,.15));backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line-soft)} .brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:calc(20px*var(--tscale,1))} nav.site-nav .brand{white-space:nowrap} .brand .logo{height:30px;width:auto;display:block;flex:none;filter:drop-shadow(0 4px 16px rgba(124,77,223,.6))} .brand .mark{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--btn);box-shadow:0 8px 22px -8px rgba(124,77,223,.8), inset 0 1px 0 rgba(255,255,255,.25)} .navlinks{display:flex;gap:26px;align-items:center} .navlinks a{color:#dde0ea;font-size:calc(16px*var(--tscale,1));font-weight:500;opacity:.92;transition:opacity .15s} .navlinks a:hover,.navlinks a[aria-current="page"]{opacity:1} .navlinks a[aria-current="page"]{color:#fff;font-weight:700} .navcta{display:flex;align-items:center;gap:14px} .navcta .ghost{color:#eef0f6;font-size:calc(16.5px*var(--tscale,1));font-weight:600;padding:10px 6px;transition:color .15s} .navcta .ghost:hover{color:#fff} /* --- mobile nav --- */ .navtoggle{display:none;width:42px;height:42px;flex:none;border-radius:11px;background:var(--glass);border:1px solid var(--line); color:#fff;place-items:center;cursor:pointer;transition:background .18s} .navtoggle:hover{background:rgba(255,255,255,.1)} .navtoggle .bars{display:block;width:18px;height:12px;position:relative} .navtoggle .bars i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:#fff;transition:transform .22s var(--ease), opacity .18s} .navtoggle .bars i:nth-child(1){top:0} .navtoggle .bars i:nth-child(2){top:5px} .navtoggle .bars i:nth-child(3){top:10px} .navtoggle[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(5px) rotate(45deg)} .navtoggle[aria-expanded="true"] .bars i:nth-child(2){opacity:0} .navtoggle[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)} /* hidden by default; only the mobile breakpoint may show it, and only when the toggle has removed [hidden] */ .mobilenav{display:none;position:sticky;top:70px;z-index:29;margin:0 clamp(20px,5vw,40px);padding:14px;border-radius:16px; background:rgba(10,11,18,.94);border:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); box-shadow:0 30px 60px -30px rgba(0,0,0,.95)} .mobilenav a{display:block;padding:12px 12px;border-radius:10px;font-size:calc(16.5px*var(--tscale,1));font-weight:600;color:#e6e8f1} .mobilenav a:hover{background:rgba(255,255,255,.06)} .mobilenav hr{border:0;border-top:1px solid var(--line-soft);margin:8px 4px} .mobilenav .btn{width:100%;justify-content:center;margin-top:6px} .mobilenav[hidden]{display:none} /* ================= STATS band ================= */ .stats{padding:34px 0} .stats-inner{position:relative;border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.04);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); box-shadow:0 40px 80px -40px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.07);overflow:hidden} .stats-inner::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 130% at 50% -30%, rgba(124,77,223,.18), transparent 60%);pointer-events:none} .stats-row{display:grid;grid-template-columns:repeat(5,1fr);position:relative} /* four-figure variant (about page) + a smaller size for very long figures */ .stats-row--4{grid-template-columns:repeat(4,1fr)} .stat--wide .num{font-size:clamp(24px,2.2vw,32px)} .stat{padding:32px 20px;text-align:center;border-inline-start:1px solid var(--line-soft)} .stat:first-child{border-inline-start:0} .stat .num{font-size:clamp(32px,3.4vw,48px);font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1; background:linear-gradient(120deg,#e9e2ff,#a78bfa 55%,#7c4ddf);-webkit-background-clip:text;background-clip:text;color:transparent} .stat .lbl{margin-top:12px;font-size:calc(15px*var(--tscale,1));color:var(--sec);font-weight:500;line-height:1.75;text-wrap:pretty} /* ================= SERVICES / cards ================= */ .services{padding:var(--sec-pad) 0;position:relative;overflow-x:clip} .services .ambient{position:absolute;top:6%;left:-6%;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(124,77,223,.16),transparent 66%);filter:blur(30px);z-index:-1;pointer-events:none} /* ORDERED grid: featured banner spans the full first row, then four IDENTICAL cards in one perfectly aligned row (equal height via stretch + height:100%). */ .svc-grid{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch} .svc{grid-column:span 1;height:100%;position:relative;display:flex;flex-direction:column; border-radius:var(--r-card);padding:24px 22px;background:var(--card-bg);border:1px solid var(--line); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--card-sh); transition:transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease)} .svc:hover{transform:translateY(-4px);border-color:var(--card-line-hi);background:var(--card-bg-hi);box-shadow:var(--card-sh-hi)} .svc .ico{width:48px;height:48px;border-radius:var(--r-ico);display:grid;place-items:center;flex:none; background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);margin-bottom:16px} .svc h3{font-size:clamp(20px,1.35vw,calc(24px*var(--tscale,1)));font-weight:800;letter-spacing:-.012em;line-height:1.55} .svc .one{margin-top:10px;font-size:clamp(16px,1vw,calc(18.5px*var(--tscale,1)));color:var(--sec);line-height:1.85;text-wrap:pretty} /* pinned to the card bottom so every "بیشتر بدانید" lines up across the row */ .svc .more{margin-top:auto;padding-top:18px;font-size:calc(15px*var(--tscale,1));font-weight:700;color:var(--violet-lo); display:inline-flex;align-items:center;gap:6px;align-self:flex-start;transition:gap .2s var(--ease)} .svc:hover .more{gap:10px} /* featured — full-width row, two balanced columns inside */ .svc.feat{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(24px,4vw,54px);align-items:center; padding:clamp(26px,3vw,34px);background:linear-gradient(150deg,rgba(124,77,223,.17),rgba(255,255,255,.035) 62%); border-color:rgba(139,92,246,.34)} .svc.feat:hover{transform:translateY(-3px)} .feat-main{display:flex;flex-direction:column;align-items:flex-start;min-width:0} .svc.feat .tag{display:inline-flex;align-items:center;font-size:calc(12.5px*var(--tscale,1));font-weight:700;color:#d9cdff;letter-spacing:.01em; background:rgba(139,92,246,.2);border:1px solid rgba(139,92,246,.4);padding:5px 12px;border-radius:100px;margin-bottom:16px} .svc.feat .ico{width:54px;height:54px} .svc.feat h3{font-size:clamp(23px,2.1vw,28px);line-height:1.5;text-wrap:balance} .svc.feat .one{font-size:calc(17px*var(--tscale,1))} .svc.feat .btn{margin-top:24px} .svc.feat .bul{display:flex;flex-direction:column;gap:2px;min-width:0; border-radius:14px;padding:14px 16px;background:rgba(5,6,10,.34);border:1px solid var(--line-soft)} .svc.feat .bul li{list-style:none;display:flex;align-items:flex-start;gap:11px;font-size:calc(16px*var(--tscale,1));color:#d9dce7;line-height:1.8; padding:9px 0;border-top:1px solid var(--line-soft)} .svc.feat .bul li:first-child{border-top:0} .svc.feat .bul .bi{flex:none;width:20px;height:20px;border-radius:6px;background:rgba(52,211,153,.16);border:1px solid rgba(52,211,153,.34);display:grid;place-items:center;margin-top:3px} /* standalone bullet list (reusable outside .svc.feat) */ .bullets{display:flex;flex-direction:column;gap:2px;border-radius:14px;padding:14px 16px;background:rgba(5,6,10,.34);border:1px solid var(--line-soft)} .bullets li{list-style:none;display:flex;align-items:flex-start;gap:11px;font-size:calc(16px*var(--tscale,1));color:#d9dce7;line-height:1.8;padding:9px 0;border-top:1px solid var(--line-soft)} .bullets li:first-child{border-top:0} .bullets .bi{flex:none;width:20px;height:20px;border-radius:6px;background:rgba(52,211,153,.16);border:1px solid rgba(52,211,153,.34);display:grid;place-items:center;margin-top:3px} /* ================= WHY / advantage cards ================= */ .why{padding:var(--sec-pad) 0;position:relative;overflow-x:clip} .why .ambient{position:absolute;top:20%;right:-8%;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(124,77,223,.14),transparent 66%);filter:blur(34px);z-index:-1;pointer-events:none} /* real YouTube Gold Play Button award — materialises very faintly while scrolling (opacity set by JS) */ .why .plaque{position:absolute;top:8%;left:-3%;width:min(520px,42vw);aspect-ratio:641/704;z-index:-1;pointer-events:none; background:url('../img/plaque-crop.jpg') center/contain no-repeat; opacity:0; transform:rotate(-7deg) scale(.9); filter:saturate(.9) contrast(1.04) blur(.3px); -webkit-mask-image:radial-gradient(66% 66% at 50% 44%, #000 38%, transparent 78%); mask-image:radial-gradient(66% 66% at 50% 44%, #000 38%, transparent 78%); transition:opacity .5s ease-out, transform .5s ease-out} @media (prefers-reduced-motion:reduce){.why .plaque{opacity:.1;transform:rotate(-7deg)}} .why-grid{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch} .adv{height:100%;display:flex;flex-direction:column;border-radius:var(--r-card);padding:24px 22px;background:var(--card-bg);border:1px solid var(--line); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--card-sh); transition:transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease)} .adv:hover{transform:translateY(-4px);border-color:var(--card-line-hi);background:var(--card-bg-hi);box-shadow:var(--card-sh-hi)} .adv .ico{width:48px;height:48px;border-radius:var(--r-ico);display:grid;place-items:center;flex:none; background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);margin-bottom:16px} .adv h4{font-size:calc(21px*var(--tscale,1));font-weight:800;letter-spacing:-.012em;line-height:1.55;text-wrap:balance} .adv p{margin-top:10px;font-size:calc(16.5px*var(--tscale,1));color:var(--sec);line-height:1.85;text-wrap:pretty} /* ================= HOW IT WORKS (numbered steps) ================= */ .steps{margin-top:52px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch;counter-reset:zzstep} .step{position:relative;height:100%;display:flex;flex-direction:column;border-radius:var(--r-card);padding:26px 22px 24px; background:var(--card-bg);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--card-sh); transition:transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease)} .step:hover{transform:translateY(-4px);border-color:var(--card-line-hi);background:var(--card-bg-hi)} .step .n{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;margin-bottom:16px; font-size:calc(19px*var(--tscale,1));font-weight:900;color:#e9e2ff;background:rgba(139,92,246,.16);border:1px solid rgba(139,92,246,.34)} .step h4{font-size:calc(19.5px*var(--tscale,1));font-weight:800;line-height:1.55;letter-spacing:-.012em;text-wrap:balance} .step p{margin-top:10px;font-size:calc(16px*var(--tscale,1));color:var(--sec);line-height:1.85;text-wrap:pretty} /* ================= TRUST BADGES ================= */ .badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} .badge{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:100px;font-size:calc(14.5px*var(--tscale,1));font-weight:600;color:#e2e4ee; background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .badge .bi{flex:none;width:18px;height:18px;border-radius:6px;background:rgba(52,211,153,.16);border:1px solid rgba(52,211,153,.34);display:grid;place-items:center} /* ================= FAQ ================= */ .faq{padding:var(--sec-pad) 0} .faq-wrap{margin-top:44px;max-width:880px;margin-inline:auto;display:flex;flex-direction:column;gap:14px} .qa{border-radius:var(--r-card);border:1px solid var(--line);background:var(--card-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow:hidden; box-shadow:var(--card-sh);transition:border-color .22s var(--ease), background .22s var(--ease)} .qa:hover{border-color:var(--card-line-hi)} .qa[open]{border-color:rgba(139,92,246,.4);background:rgba(124,77,223,.08)} .qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:20px 24px;font-size:calc(18.5px*var(--tscale,1));font-weight:700;line-height:1.6} .qa summary::-webkit-details-marker{display:none} .qa summary .q-ic{margin-inline-start:auto;flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid var(--line);transition:transform .25s, background .25s} .qa[open] summary .q-ic{transform:rotate(45deg);background:rgba(139,92,246,.22);border-color:rgba(139,92,246,.45)} .qa .a{padding:0 24px 22px 62px;font-size:calc(16.5px*var(--tscale,1));color:var(--sec);line-height:2} /* ================= MAGAZINE cards ================= */ .mag{padding:var(--sec-pad) 0} .mag-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap} .mag-grid{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch} .art{height:100%;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);background:var(--card-bg); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--card-sh);display:flex;flex-direction:column; transition:transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease)} .art:hover{transform:translateY(-4px);border-color:var(--card-line-hi);background:var(--card-bg-hi);box-shadow:var(--card-sh-hi)} .art .thumb{height:168px;position:relative;overflow:hidden;flex:none} /* a soft scrim keeps the category pill legible and ties the thumb into the card */ .art .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,10,.34),transparent 46%,rgba(5,6,10,.5))} .art .thumb .glyph{position:absolute;inset:0;display:grid;place-items:center;z-index:1;opacity:.9; transition:transform .35s var(--ease), opacity .35s var(--ease)} .art:hover .thumb .glyph{transform:scale(1.07);opacity:1} .art .thumb .cat{position:absolute;top:14px;right:14px;z-index:2;font-size:calc(13px*var(--tscale,1));font-weight:700;color:#fff;background:rgba(5,6,10,.55);border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:5px 12px;border-radius:100px} .t1{background:linear-gradient(135deg,#3b1e78,#7c4ddf 60%,#8b5cf6)} .t2{background:linear-gradient(135deg,#13233f,#2b5f8f 55%,#34d399)} .t3{background:linear-gradient(135deg,#4a1230,#a01f4c 55%,#FF0033)} .art .body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1} .art h4{font-size:calc(19px*var(--tscale,1));font-weight:800;line-height:1.65;letter-spacing:-.012em;text-wrap:pretty} .art .meta{margin-top:auto;padding-top:16px;font-size:calc(14px*var(--tscale,1));color:var(--muted);display:flex;align-items:center;gap:8px} /* the read-link sits on a hairline so it aligns across all three cards */ .art .read{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft);font-size:calc(15px*var(--tscale,1));font-weight:700;color:var(--violet-lo); display:inline-flex;align-items:center;gap:6px;transition:gap .2s var(--ease)} .art:hover .read{gap:10px} /* ================= FORMS ================= */ .form{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} .field{display:flex;flex-direction:column;gap:8px;min-width:0} .field.full{grid-column:1 / -1} .field label{font-size:calc(15px*var(--tscale,1));font-weight:600;color:#e2e4ee} .field .hint{font-size:calc(13.5px*var(--tscale,1));color:var(--muted);line-height:1.7} .field input,.field textarea,.field select{ width:100%;font-family:inherit;font-size:calc(16.5px*var(--tscale,1));color:var(--ink);direction:rtl; background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;padding:13px 16px; transition:border-color .18s, background .18s} .field textarea{min-height:140px;resize:vertical;line-height:1.9} .field input::placeholder,.field textarea::placeholder{color:#7d8298} .field input:focus,.field textarea:focus,.field select:focus{border-color:var(--card-line-hi);background:rgba(255,255,255,.075);outline:none} .field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:2px solid var(--violet-lo);outline-offset:2px} /* ================= FINAL CTA band ================= */ .cta{padding:clamp(70px,8vw,100px) 0} .cta-band{position:relative;border-radius:26px;padding:clamp(46px,6vw,76px);text-align:center;overflow:hidden;isolation:isolate; background:linear-gradient(160deg,rgba(124,77,223,.22),rgba(14,15,22,.6));border:1px solid rgba(139,92,246,.32); box-shadow:0 50px 100px -40px rgba(124,77,223,.5), inset 0 1px 0 rgba(255,255,255,.08)} .cta-band::before{content:"";position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.35),transparent 62%);filter:blur(24px);pointer-events:none} /* faint sheen along the bottom edge — adds depth without noise */ .cta-band::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(120% 60% at 50% 100%, rgba(255,0,51,.07), transparent 60%)} .cta-band h2{position:relative;font-size:clamp(32px,3.9vw,50px);font-weight:900;letter-spacing:-.03em;line-height:1.28;text-wrap:balance} .cta-band p{position:relative;margin-top:18px;font-size:clamp(17px,1.5vw,calc(20px*var(--tscale,1)));color:var(--sec);max-width:660px;margin-inline:auto;line-height:1.95;text-wrap:pretty} .cta-band .actions{position:relative;justify-content:center;margin-top:32px} /* ================= FOOTER ================= */ footer{border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.015),transparent);padding:60px 0 34px} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px} .foot-brand .brand{margin-bottom:16px} .foot-brand p{font-size:calc(16px*var(--tscale,1));color:var(--muted);line-height:1.9;max-width:320px} .foot-col h5{font-size:calc(15px*var(--tscale,1));font-weight:700;color:#fff;text-transform:none;letter-spacing:.02em;margin-bottom:16px;opacity:.85} .foot-col a{display:block;font-size:calc(16px*var(--tscale,1));color:var(--sec);padding:6px 0;transition:color .15s} .foot-col a:hover{color:#fff} .foot-bottom{margin-top:48px;padding-top:24px;border-top:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:calc(14.5px*var(--tscale,1));color:var(--muted)} .foot-social{display:flex;gap:10px} .foot-social a{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--glass);border:1px solid var(--line);transition:border-color .2s, background .2s} .foot-social a:hover{border-color:rgba(139,92,246,.4);background:rgba(139,92,246,.12)} /* ================= PAGE HERO (inner pages) ================= */ .page-hero{position:relative;padding:clamp(56px,7vw,92px) 0 clamp(40px,5vw,64px);overflow:hidden;isolation:isolate} .page-hero .amb{position:absolute;inset:0;z-index:-1;pointer-events:none;background: radial-gradient(66% 60% at 50% -18%, rgba(124,77,223,.3), transparent 64%), radial-gradient(34% 40% at 88% 10%, rgba(255,0,51,.05), transparent 70%), linear-gradient(180deg,#080911 0%, #05060a 78%)} .page-hero .inner{max-width:820px} .page-hero.center .inner{margin-inline:auto;text-align:center} .page-hero.center .actions,.page-hero.center .badges{justify-content:center} .page-hero h1{margin-top:16px;font-weight:900;font-size:clamp(34px,4.1vw,62px);line-height:1.28;letter-spacing:-.03em;text-wrap:balance} .page-hero .lead{margin-top:16px;font-size:clamp(18px,1.5vw,calc(22px*var(--tscale,1)));line-height:1.9;color:var(--sec);text-wrap:pretty} .page-hero .actions{margin-top:26px} /* breadcrumb */ .crumbs{display:flex;align-items:center;gap:8px;font-size:calc(14.5px*var(--tscale,1));color:var(--muted);flex-wrap:wrap} .crumbs a:hover{color:#fff} /* ================= SCROLL REVEAL (JS-gated: no JS → everything visible) ============ */ .js [data-rv]{opacity:0;transform:translateY(26px) scale(.988); transition:opacity .78s cubic-bezier(.22,.61,.36,1), transform .78s cubic-bezier(.22,.61,.36,1); transition-delay:var(--d,0ms);will-change:opacity,transform} .js [data-rv="left"]{transform:translateY(18px) translateX(26px)} .js [data-rv="zoom"]{transform:translateY(14px) scale(.955)} .js [data-rv].in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .js [data-rv]{opacity:1 !important;transform:none !important;transition:none !important} } /* ambient glows drift gently with scroll (--sp set by JS) */ .services .ambient,.why .ambient{transform:translate3d(0,calc(var(--sp,0) * 46px),0);transition:transform .1s linear} /* ================= utilities ================= */ .center{text-align:center} .mt-0{margin-top:0} .mt-sm{margin-top:16px} .mt-md{margin-top:28px} .mt-lg{margin-top:52px} .muted{color:var(--muted)} .sec{padding:var(--sec-pad) 0;position:relative} .sec--tight{padding:clamp(56px,6vw,80px) 0} .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;align-items:stretch} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch} .card{border-radius:var(--r-card);padding:24px 22px;background:var(--card-bg);border:1px solid var(--line); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--card-sh);height:100%; display:flex;flex-direction:column;transition:transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease)} .card:hover{transform:translateY(-4px);border-color:var(--card-line-hi);background:var(--card-bg-hi)} /* card interior matches the .svc / .adv language exactly */ .card .ico{width:48px;height:48px;border-radius:var(--r-ico);display:grid;place-items:center;flex:none; background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);margin-bottom:16px} .card h3{font-size:calc(21px*var(--tscale,1));font-weight:800;letter-spacing:-.012em;line-height:1.55;text-wrap:balance} .card > p{margin-top:10px;font-size:calc(16.5px*var(--tscale,1));color:var(--sec);line-height:1.85;text-wrap:pretty} .card .bullets{margin-top:16px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ================= responsive ================= */ @media(max-width:1000px){ .navlinks{display:none} .navcta .ghost{display:none} .navtoggle{display:grid} .mobilenav:not([hidden]){display:block} .stats-row{grid-template-columns:repeat(2,1fr)} .stat:nth-child(odd){border-inline-start:0} .stat{border-top:1px solid var(--line-soft)} .stat:nth-child(-n+2){border-top:0} .svc-grid{grid-template-columns:repeat(2,1fr)} .svc.feat{grid-column:1 / -1;grid-template-columns:1fr;gap:24px;align-items:start} .why-grid{grid-template-columns:repeat(2,1fr)} .mag-grid{grid-template-columns:repeat(2,1fr)} .steps{grid-template-columns:repeat(2,1fr)} .grid-4{grid-template-columns:repeat(2,1fr)} .foot-grid{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1 / -1} } @media(max-width:620px){ .svc-grid{grid-template-columns:1fr} .why-grid{grid-template-columns:1fr} .mag-grid{grid-template-columns:1fr} .steps{grid-template-columns:1fr} .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} .form{grid-template-columns:1fr} .stats-row{grid-template-columns:1fr} .stat{border-inline-start:0} .foot-grid{grid-template-columns:1fr} .qa .a{padding-inline:24px} .actions .btn{flex:1;justify-content:center} /* the nav CTA would crowd the brand — it lives in the mobile panel instead */ .navcta .btn--primary{display:none} .brand{font-size:calc(18px*var(--tscale,1))} } /* ========================================================================= ================= PRICING & CHECKOUT (added 2026-07-19) ================= Hydrated by assets/pricing.js. Every number comes from assets/pricing.json; nothing here hardcodes a price. Card language matches .svc / .adv / .card. ========================================================================= */ /* ---- the grid: strictly tidy, equal-height, never bento ---- */ .pricing-grid{margin-top:44px;display:grid;gap:18px;align-items:stretch; grid-template-columns:repeat(var(--cols,2),minmax(0,1fr))} .pricing-grid--2{--cols:2} .pricing-grid--3{--cols:3} .pricing-grid--4{--cols:4} /* ---- plan card ---- */ .plan-card{position:relative;height:100%;min-width:0;display:flex;flex-direction:column; border-radius:var(--r-card);padding:26px 24px;background:var(--card-bg);border:1px solid var(--line); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--card-sh); transition:transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease)} .plan-card:hover{transform:translateY(-4px);border-color:var(--card-line-hi);background:var(--card-bg-hi);box-shadow:var(--card-sh-hi)} .plan-card[hidden]{display:none} /* featured — subtle violet glow, same box, no size games (keeps the row tidy) */ .plan-card--featured{border-color:rgba(139,92,246,.42); background:linear-gradient(155deg,rgba(124,77,223,.16),rgba(255,255,255,.04) 64%); box-shadow:0 34px 70px -34px rgba(124,77,223,.6), inset 0 1px 0 rgba(255,255,255,.09)} .plan-card--featured:hover{box-shadow:0 40px 84px -32px rgba(124,77,223,.75), inset 0 1px 0 rgba(255,255,255,.12)} /* ---- card head ---- */ .plan-head{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;min-height:34px} .plan-name{font-size:calc(20px*var(--tscale,1));font-weight:800;letter-spacing:-.012em;line-height:1.5;text-wrap:balance} .plan-tag{display:inline-flex;align-items:center;font-size:calc(12.5px*var(--tscale,1));font-weight:700;color:#d9cdff;letter-spacing:.01em; background:rgba(139,92,246,.2);border:1px solid rgba(139,92,246,.4);padding:4px 11px;border-radius:100px;white-space:nowrap} .plan-tag[hidden]{display:none} .plan-sub{margin-top:8px;font-size:calc(15.5px*var(--tscale,1));color:var(--muted);line-height:1.75} /* ---- price block ---- */ /* Two deterministic lines: [amount + تومان] then [period]. Ravagh has no tnum table, so the same ten digits measure 147px–192px and relying on font-variant-numeric to keep the row tidy does not work — instead the amount is sized to fit the widest real value and the period is given its own line, so «تومان» can never be orphaned onto the next row away from its number. Every height below is explicit so the skeleton and the hydrated state are the same size and nothing shifts when the prices land. */ .plan-price{margin-top:18px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;min-height:66px} .plan-price .amount{font-size:clamp(26px,2.4vw,32px);font-weight:900;letter-spacing:-.02em;line-height:1.3; min-height:1.3em;white-space:nowrap; background:linear-gradient(120deg,#e9e2ff,#a78bfa 58%,#7c4ddf);-webkit-background-clip:text;background-clip:text;color:transparent} .plan-price .cur{font-size:calc(16.5px*var(--tscale,1));font-weight:700;color:var(--sec);white-space:nowrap} /* flex-basis:100% forces the period onto its own line in BOTH states, so an empty (pre-hydration) period reserves exactly the space the filled one uses */ .plan-price .per{flex:0 0 100%;font-size:calc(15px*var(--tscale,1));color:var(--muted);font-weight:500;line-height:1.6;min-height:1.6em} /* min-height fits the .plan-save pill (31px), not just the bare text line, so the row does not grow when render() unhides the pill */ .plan-compare{margin-top:6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:calc(15px*var(--tscale,1));color:var(--muted);min-height:31px} .plan-compare .was{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.35);font-variant-numeric:tabular-nums} .plan-compare .was[hidden]{display:none} .plan-save{display:inline-flex;align-items:center;font-size:calc(13.5px*var(--tscale,1));font-weight:700;color:#8ee9c4; background:rgba(52,211,153,.14);border:1px solid rgba(52,211,153,.32);padding:3px 10px;border-radius:100px;white-space:nowrap} .plan-save[hidden]{display:none} /* ---- features (reuses the .bullets language) ---- */ .plan-features{margin-top:18px;display:flex;flex-direction:column;gap:2px;border-radius:14px;padding:12px 15px; background:rgba(5,6,10,.34);border:1px solid var(--line-soft)} .plan-features li{list-style:none;display:flex;align-items:flex-start;gap:11px;font-size:calc(15.5px*var(--tscale,1));color:#d9dce7;line-height:1.8; padding:9px 0;border-top:1px solid var(--line-soft)} .plan-features li:first-child{border-top:0} .plan-features .bi{flex:none;width:19px;height:19px;border-radius:6px;background:rgba(52,211,153,.16); border:1px solid rgba(52,211,153,.34);display:grid;place-items:center;margin-top:3px} /* CTA pinned to the bottom so every button lines up across the row */ .plan-cta{margin-top:auto;padding-top:20px} .plan-cta .btn{width:100%;justify-content:center} .plan-note{margin-top:12px;font-size:calc(13.5px*var(--tscale,1));color:var(--muted);line-height:1.75;text-wrap:pretty} /* ---- skeleton shimmer (pre-hydration; nothing flashes or jumps) ---- */ .price-skel{display:inline-block;min-width:7.5ch;height:1em;border-radius:7px;vertical-align:middle;color:transparent; background:linear-gradient(90deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.13) 45%,rgba(255,255,255,.05) 90%); background-size:220% 100%;animation:zz-shimmer 1.5s linear infinite} /* matches .plan-price .amount line box exactly, so hydration cannot resize the row */ .plan-price .price-skel{min-width:9ch;height:1.3em} @keyframes zz-shimmer{0%{background-position:120% 0}100%{background-position:-120% 0}} @media (prefers-reduced-motion:reduce){ .price-skel{animation:none;background:rgba(255,255,255,.09)} } /* ---- «قیمت آزمایشی» badge — shown whenever meta.status is "mock" ---- */ .price-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:100px; font-size:calc(13.5px*var(--tscale,1));font-weight:700;color:#f6d999;letter-spacing:.01em; background:rgba(245,196,81,.12);border:1px solid rgba(245,196,81,.36)} .price-badge[hidden]{display:none} .price-badge::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;background:var(--gold); box-shadow:0 0 9px 1px rgba(245,196,81,.8)} .pricing-meta{margin-top:20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:calc(14px*var(--tscale,1));color:var(--muted);line-height:1.8} .pricing-meta [hidden]{display:none} /* The badge + note row starts empty and is filled by render(). [hidden] would collapse it to zero and shove the whole section down when the prices land, so its space is reserved up front: the note is given its own row at every width (rather than wrapping onto one only on narrow screens), which makes the reserved height width-independent — 38px badge + 12px gap + 25px note. */ .pricing-meta [data-price-note]{flex:0 0 100%;text-align:center;min-height:25px} .pricing-meta--flag{min-height:75px;align-content:center} /* badge 38 + gap 12 + note 25 */ /* per-card mock badge — one badge per price, so a stacked grid can never show a large number with the «قیمت آزمایشی» warning scrolled off screen. The row is reserved whether or not the badge is showing. */ .plan-flag{margin-top:12px;min-height:38px;display:flex;align-items:center} /* ---- failure state: a link, never a number ---- */ .price-fallback{display:inline-flex;align-items:center;gap:7px;font-size:calc(16px*var(--tscale,1));font-weight:700;color:var(--violet-lo); border-bottom:1px solid rgba(196,181,253,.4);padding-bottom:2px;transition:color .18s, border-color .18s} .price-fallback:hover{color:#fff;border-color:#fff} /* ---- billing toggle (ماهانه / سالانه) ---- */ .billing-toggle{display:inline-flex;align-items:center;gap:4px;padding:5px;border-radius:100px; background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .billing-toggle button{font-family:inherit;font-size:calc(15.5px*var(--tscale,1));font-weight:700;color:var(--sec);cursor:pointer; background:transparent;border:0;padding:9px 20px;border-radius:100px;white-space:nowrap; transition:background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease)} .billing-toggle button:hover{color:#fff} .billing-toggle button[aria-pressed="true"]{color:#fff;background:var(--btn); box-shadow:0 10px 24px -12px rgba(124,77,223,.9), inset 0 1px 0 rgba(255,255,255,.18)} .billing-toggle .save-hint{font-size:calc(13px*var(--tscale,1));font-weight:700;color:#8ee9c4;padding-inline:10px;white-space:nowrap} /* ================= CHECKOUT PAGE ================= */ .checkout-grid{margin-top:40px;display:grid;grid-template-columns:1.35fr .95fr;gap:22px;align-items:start} /* order summary — the same numbers, read from the same pricing.json */ .order-summary{position:sticky;top:92px;border-radius:var(--r-card);padding:24px 22px;background:var(--card-bg); border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--card-sh)} .order-summary h3{font-size:calc(19px*var(--tscale,1));font-weight:800;letter-spacing:-.012em;line-height:1.55} .sum-list{margin-top:18px;display:flex;flex-direction:column} .sum-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:12px 0; border-top:1px solid var(--line-soft);font-size:calc(16px*var(--tscale,1));color:var(--sec);line-height:1.8} .sum-row:first-child{border-top:0} .sum-row .k{color:var(--muted);font-size:calc(15px*var(--tscale,1));flex:none} .sum-row .v{font-weight:600;color:#e6e8f1;text-align:left;min-width:0;font-variant-numeric:tabular-nums} .sum-row--total{margin-top:6px;border-top:1px solid var(--line);padding-top:16px} .sum-row--total .k{color:#e2e4ee;font-size:calc(16.5px*var(--tscale,1));font-weight:700} .sum-row--total .v{font-size:calc(22px*var(--tscale,1));font-weight:900;letter-spacing:-.018em; background:linear-gradient(120deg,#e9e2ff,#a78bfa 58%,#7c4ddf);-webkit-background-clip:text;background-clip:text;color:transparent} /* payment form */ .pay-form{border-radius:var(--r-card);padding:26px 24px;background:var(--card-bg);border:1px solid var(--line); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--card-sh)} .pay-form h2{font-size:calc(22px*var(--tscale,1));font-weight:800;letter-spacing:-.015em;line-height:1.55} .pay-form .form{margin-top:22px} .pay-form .pay-actions{margin-top:24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} .pay-form .pay-actions .btn--primary{flex:1;justify-content:center;min-width:200px} .pay-note{margin-top:16px;font-size:calc(14px*var(--tscale,1));color:var(--muted);line-height:1.85;text-wrap:pretty} /* gateway picker */ .pay-gateways{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px} .pay-gw{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:12px;cursor:pointer; background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:calc(16px*var(--tscale,1));font-weight:600; transition:border-color .18s, background .18s} .pay-gw:hover{background:rgba(255,255,255,.075)} .pay-gw input{accent-color:var(--violet);width:17px;height:17px;flex:none} .pay-gw:has(input:checked){border-color:var(--card-line-hi);background:rgba(124,77,223,.13)} /* result states (success / failed) */ .pay-result{border-radius:var(--r-card);padding:clamp(28px,4vw,40px);text-align:center; background:var(--card-bg);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); box-shadow:var(--card-sh)} .pay-result .res-ico{width:66px;height:66px;border-radius:20px;margin:0 auto;display:grid;place-items:center} .pay-result h2{margin-top:22px;font-size:clamp(24px,2.6vw,32px);font-weight:900;letter-spacing:-.025em;line-height:1.4;text-wrap:balance} .pay-result p{margin-top:14px;font-size:calc(17px*var(--tscale,1));color:var(--sec);line-height:1.95;max-width:520px;margin-inline:auto;text-wrap:pretty} .pay-result .actions{margin-top:28px;justify-content:center} .pay-result--ok{border-color:rgba(52,211,153,.34);background:linear-gradient(160deg,rgba(52,211,153,.1),rgba(255,255,255,.04) 62%)} .pay-result--ok .res-ico{background:rgba(52,211,153,.16);border:1px solid rgba(52,211,153,.36)} .pay-result--fail{border-color:rgba(255,0,51,.3);background:linear-gradient(160deg,rgba(255,0,51,.09),rgba(255,255,255,.04) 62%)} .pay-result--fail .res-ico{background:rgba(255,0,51,.14);border:1px solid rgba(255,0,51,.34)} .pay-ref{margin-top:22px;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:12px; background:rgba(5,6,10,.4);border:1px solid var(--line-soft);font-size:calc(15px*var(--tscale,1));color:var(--sec)} .pay-ref .code{font-weight:700;color:#fff;font-variant-numeric:tabular-nums} /* The 4-up grid is at its tightest right after it engages at 1001px: the card leaves the price row only ~170px, which is not enough for the widest real value (۴۷٬۵۵۲٬۵۰۰) plus the 9px gap plus «تومان» at 26px, so the currency wrapped away from its number. Shrink the amount just for that narrow band. */ @media(min-width:1001px) and (max-width:1060px){ .pricing-grid--4 .plan-price .amount{font-size:calc(23px*var(--tscale,1))} } /* ---- pricing / checkout responsive ---- */ @media(max-width:1000px){ .pricing-grid--3,.pricing-grid--4{--cols:2} .checkout-grid{grid-template-columns:1fr} .order-summary{position:static} } @media(max-width:620px){ .pricing-grid,.pricing-grid--2,.pricing-grid--3,.pricing-grid--4{--cols:1} .plan-card{padding:22px 18px} .pay-form{padding:22px 18px} .billing-toggle{width:100%;justify-content:center} .billing-toggle button{flex:1;padding-inline:12px} .pay-form .pay-actions .btn--primary{min-width:0;width:100%} .pay-gw{flex:1;min-width:0} } @media(max-width:380px){ .plan-price .amount{font-size:26px} .billing-toggle button{font-size:calc(14.5px*var(--tscale,1));padding-inline:8px} } /* ── wide-monitor scale (owner: the site felt zoomed-out on big screens) ── */ /* ── نمایشگرهای بزرگ و فوق‌عریض ──────────────────────────────────────────── کانتینر روی ۱۴۶۰px ثابت بود: روی نمایشگرِ ۳۴۴۰ فقط ۴۲٪ عرض استفاده می‌شد و ۹۹۰px در هر طرف سیاهیِ خالی می‌ماند. بلوک‌های متنی (sec-head، هیروِ صفحات، FAQ) سقفِ خودشان را نگه می‌دارند تا سطر خوانا بماند — فقط گریدها پهن شوند. */ @media (min-width:1700px){ :root{--maxw:1680px;--tscale:1.147} body{font-size:19.5px} .sec-head{max-width:1120px} .page-hero .inner{max-width:1120px} .sec-head p,.page-hero .inner p{max-width:940px;margin-inline:auto} h1,.page-hero h1{font-size:clamp(48px,4.1vw,64px)} h2,.sec-head h2{font-size:clamp(34px,3vw,48px)} .brand .logo{height:38px} .eyebrow{font-size:17px;padding:10px 20px} } @media (min-width:2200px){ :root{--maxw:2080px;--tscale:1.26} body{font-size:21px} .sec-head{max-width:1560px} .page-hero .inner{max-width:1560px} .sec-head p,.page-hero .inner p{max-width:1120px} .faq-wrap{max-width:1400px} h1,.page-hero h1{font-size:70px} h2,.sec-head h2{font-size:53px} .brand .logo{height:42px} .eyebrow{font-size:19px;padding:11px 24px} } @media (min-width:2800px){ :root{--maxw:2520px;--tscale:1.36} body{font-size:22.5px} .sec-head{max-width:1820px} .page-hero .inner{max-width:1820px} .sec-head p,.page-hero .inner p{max-width:1280px} .faq-wrap{max-width:1600px} h1,.page-hero h1{font-size:80px} h2,.sec-head h2{font-size:60px} .brand .logo{height:52px} .eyebrow{font-size:21px;padding:13px 30px} } /* ── «نمایش بیشتر» سوالات ── */ .qa-more-hidden{display:none} .faq-wrap.qa-expanded .qa-more-hidden{display:block} .qa-more-btn{display:flex;align-items:center;justify-content:center;gap:8px;margin:18px auto 0; padding:11px 26px;font-family:inherit;font-size:calc(14.5px*var(--tscale,1));font-weight:700;color:var(--ink,#eceef5); background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:12px;cursor:pointer; transition:border-color .25s,background .25s,transform .25s} .qa-more-btn:hover{border-color:rgba(139,92,246,.55);background:rgba(139,92,246,.10);transform:translateY(-2px)} .qa-more-btn svg{transition:transform .3s} .faq-wrap.qa-expanded .qa-more-btn svg{transform:rotate(180deg)}