/* ============ فونت سازمانی سرورنت — IRANSans (self-hosted) ============ */ @font-face{font-family:'IRANSans';src:url('../font/woff2/IRANSans-UltraLight-web.woff2') format('woff2'),url('../font/woff/IRANSans-UltraLight-web.woff') format('woff');font-weight:200;font-style:normal;font-display:swap} @font-face{font-family:'IRANSans';src:url('../font/woff2/IRANSans-Light-web.woff2') format('woff2'),url('../font/woff/IRANSans-Light-web.woff') format('woff');font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:'IRANSans';src:url('../font/woff2/IRANSans-web.woff2') format('woff2'),url('../font/woff/IRANSans-web.woff') format('woff');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'IRANSans';src:url('../font/woff2/IRANSans-Medium-web.woff2') format('woff2'),url('../font/woff/IRANSans-Medium-web.woff') format('woff');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'IRANSans';src:url('../font/woff2/IRANSans-Bold-web.woff2') format('woff2'),url('../font/woff/IRANSans-Bold-web.woff') format('woff');font-weight:700;font-style:normal;font-display:swap} /* ============ DESIGN TOKENS (UI/UX Pro Max: Dark + Glass + Aurora) ============ */ :root{ --bg:#05070F; --bg2:#080B16; --surface:rgba(255,255,255,.035); --surface-2:rgba(255,255,255,.06); --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --text:#E6EAF3; --muted:#8A94AC; --dim:#5B6478; --blue:#3B82F6; --cyan:#22D3EE; --violet:#8B5CF6; --green:#34D399; --grad:linear-gradient(100deg,#3B82F6,#22D3EE); --grad-txt:linear-gradient(100deg,#60A5FA 0%,#22D3EE 55%,#A78BFA 100%); --r:18px; --r-lg:24px; /* 🔴 اینها تا امروز **فقط** در panel.css تعریف شده بودند و site.css مصرفشان می‌کرد. لایوتِ عمومی تنها همین فایل را لود می‌کند، پس هر `var()` به متغیرِ تعریف‌نشده یعنی مرورگر **کلِ آن اعلان** را بی‌صدا دور می‌اندازد: جعبه‌های هشدارِ صفحهٔ /developers بی‌کادر و بی‌پس‌زمینه رندر می‌شدند، با کدِ ۲۰۰. CssVariablesDefinedTest هم نگرفته بودش چون تعریف‌ها را از **هر سه** شیت یک‌کاسه می‌کرد — و panel.css اصلاً روی صفحهٔ عمومی نیست. */ --info:#22D3EE; --info-bg:rgba(34,211,238,.10); --info-line:rgba(34,211,238,.30); --danger:#F87171; --danger-bg:rgba(248,113,113,.10); --danger-line:rgba(248,113,113,.32); --ease:cubic-bezier(.22,1,.36,1); --font-body:'IRANSans',system-ui,'Segoe UI',sans-serif; --font-disp:'IRANSans',system-ui,'Segoe UI',sans-serif; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} /* 🔴 `overflow-x:clip` است، نه `hidden` — و این یک واژه، شش ریلِ چسبانِ سایت را زنده می‌کند. `overflow-x:hidden` روی آن را به یک **ظرفِ اسکرول** تبدیل می‌کند در حالی که اسکرولرِ واقعی است. آن‌وقت هر `position:sticky` یک نیای اسکرول‌شونده دارد که هرگز اسکرول نمی‌شود، پس هرگز نمی‌چسبد. اندازه‌گیریِ A/B/A: با hidden، بالای برگهٔ قیمت در scrollY صفر/۲۰۰/۴۰۰ برابرِ ۳۱۳٫۵/۱۱۳٫۵/-۸۶٫۵ بود (یعنی دقیقاً -scrollY، بی‌هیچ چسبندگی)؛ با clip ۳۱۳٫۵/۹۶/۹۶. `clip` همان سرریزِ افقی را می‌بندد ولی ظرفِ اسکرول نمی‌سازد. ⚠️ این روی `.pnl-side`، `.cvb-slip`، `.blog-side`، `.docs-side`، `.docs-toc` و `.wt-side-in` هم اثر دارد — هر شش‌تا از امروز واقعاً می‌چسبند. نگهبانش: tests/Feature/CloudStoreCityStepTest::test_sticky_is_not_killed_by_the_body_scroll_container */ body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.65;overflow-x:clip;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} button{font-family:inherit} a,button,summary,[role="button"]{cursor:pointer} :focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px} ::selection{background:rgba(34,211,238,.3)} .container{max-width:1200px;margin:0 auto;padding:0 24px} .icon{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none} html[dir="rtl"] .icon.dir{transform:scaleX(-1)} /* scroll progress */ #progress{position:fixed;top:0;inset-inline-start:0;height:2.5px;width:0;background:var(--grad);z-index:300;transition:width .1s linear} /* ============ BACKGROUND FX ============ */ .aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--bg)} .aurora .blob{position:absolute;border-radius:50%;filter:blur(110px);opacity:.5;animation:drift 26s var(--ease) infinite alternate} .aurora .b1{width:640px;height:640px;background:rgba(59,130,246,.32);top:-220px;left:-120px} .aurora .b2{width:520px;height:520px;background:rgba(34,211,238,.2);top:10%;right:-180px;animation-delay:-8s;animation-duration:32s} .aurora .b3{width:600px;height:600px;background:rgba(139,92,246,.16);bottom:-260px;left:30%;animation-delay:-16s;animation-duration:38s} @keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,-50px) scale(1.12)}100%{transform:translate(-50px,60px) scale(.94)}} .grid-overlay{position:fixed;inset:0;z-index:-1;pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:56px 56px; mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 40%,transparent 100%)} /* ============ BUTTONS ============ */ .btn{position:relative;display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:13px; font-weight:600;font-size:15px;border:none;transition:transform .2s var(--ease),box-shadow .25s,background .25s;overflow:hidden} .btn-primary{background:var(--grad);color:#fff;box-shadow:0 0 0 rgba(34,211,238,0)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(34,211,238,.35)} .btn-primary::after{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s var(--ease)} .btn-primary:hover::after{left:130%} .btn-glass{background:var(--surface-2);color:var(--text);border:1px solid var(--line-2);backdrop-filter:blur(10px)} .btn-glass:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)} .badge{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;font-size:13px;font-weight:600; background:var(--surface-2);border:1px solid var(--line-2);color:#9FE8FA;backdrop-filter:blur(8px)} .badge .pulse{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 2s infinite} @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}50%{box-shadow:0 0 0 6px rgba(52,211,153,0)}} /* ============ REVEAL ANIMATIONS ============ */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} /* ============ HEADER ============ */ /* 🔴 `#header` و نه سلکتورِ برهنهٔ `header`. قبلاً این قاعده `header{position:fixed;top:0;left:0;right:0;z-index:200}` بود — یعنی **هر** تگِ `
` در هر جای سایت از جریان کنده می‌شد و به گوشهٔ بالای صفحه می‌چسبید. سه صفحه `
` معنایی داشتند و هر سه خراب بودند: • cloud-location → `
` داخلِ هر کارتِ پلن. عنوان و «پردازندهٔ اختصاصی/سرور ابری» از کارت بیرون می‌پرید و روی هم در گوشهٔ صفحه تلنبار می‌شد — همان «متنِ شناور» که کارفرما گزارش کرد. • domain-search → `.dsx-head`؛ تیترِ «ثبت دامنه» زیرِ هدرِ سایت گم می‌شد. • hosting → `.pt-group-head`. ⚠️ `position:fixed` عمداً حذف شد و جایگزین نشد: نوارِ واقعی از قبل با `.site-header-wrap` ثابت می‌شود و خطِ ۲۹۰ همین‌جا را به `relative` برمی‌گرداند — پس این اعلان از اول بی‌اثر و فقط دام بود. ⚠️ جاوااسکریپت هم `getElementById('header')` می‌زند، پس با `#header` می‌خواند. */ #header{z-index:200;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent} #header.scrolled{background:rgba(5,7,15,.75);backdrop-filter:blur(16px);border-color:var(--line)} /* ⚠️ فرزندِ **مستقیم**. با `#header .container` (خصوصیت ۱۰۱) قاعدهٔ خنثی‌کنندهٔ `.menu-panel .container` (خصوصیت ۲۰) بازنده می‌شد و کانتینرهای داخلِ منوی مگا flex با ارتفاعِ ثابتِ ۷۲ می‌شدند — یعنی کلِ منو خراب. با `>` اصلاً به آن‌ها نمی‌رسد، چون فقط نوارِ خودِ هدر فرزندِ مستقیم است. */ #header > .container{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px} .logo{display:flex;align-items:center;gap:11px;font-family:var(--font-disp);font-weight:700;font-size:21px;letter-spacing:-.3px} .logo-mark{width:36px;height:36px;border-radius:10px;background:var(--grad);display:grid;place-items:center;color:#fff; box-shadow:0 0 20px rgba(34,211,238,.4)} .logo-mark .icon{width:19px;height:19px;stroke-width:2.2} nav.desktop{display:flex;gap:2px} nav.desktop a{color:var(--muted);font-size:14.5px;font-weight:500;padding:9px 15px;border-radius:10px;transition:color .2s,background .2s} nav.desktop a:hover{color:var(--text);background:var(--surface-2)} .header-actions{display:flex;align-items:center;gap:11px} .lang-switch{display:flex;border:1px solid var(--line-2);border-radius:11px;overflow:hidden;backdrop-filter:blur(8px)} .lang-switch button{background:transparent;color:var(--muted);border:none;padding:8px 15px;font-size:13.5px;font-weight:600;transition:.2s} .lang-switch button.active{background:var(--grad);color:#fff} .login-btn{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-size:14px;font-weight:600;padding:9px 18px;border:1px solid var(--line-2);border-radius:11px;transition:.2s} .login-btn:hover{border-color:var(--cyan);color:var(--cyan)} .hamburger{display:none;background:none;border:1px solid var(--line-2);border-radius:10px;color:var(--text);padding:8px 10px} nav.mobile{display:none;flex-direction:column;background:rgba(5,7,15,.97);backdrop-filter:blur(20px);padding:10px 24px 22px;border-bottom:1px solid var(--line)} nav.mobile a{color:var(--muted);padding:13px 4px;border-bottom:1px solid var(--line);font-size:15px} /* ============ HERO ============ */ .hero{position:relative;padding:170px 0 100px;min-height:92vh;display:flex;align-items:center} #net{position:absolute;inset:0;z-index:0;opacity:.5} .hero .container{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center} .hero h1{font-family:var(--font-disp);font-size:clamp(36px,5.6vw,62px);font-weight:700;line-height:1.08;letter-spacing:-1.5px;margin:22px 0 20px} .hero h1 .grad{background:var(--grad-txt);-webkit-background-clip:text;background-clip:text;color:transparent; background-size:200% auto;animation:shine 5s linear infinite} @keyframes shine{to{background-position:200% center}} .hero p.lead{color:var(--muted);font-size:18px;max-width:540px;margin-bottom:34px} .hero-ctas{display:flex;gap:14px;flex-wrap:wrap} .domain-search{margin-top:36px;background:var(--surface);border:1px solid var(--line-2);border-radius:16px;padding:8px; display:flex;gap:8px;max-width:560px;backdrop-filter:blur(12px);transition:border-color .25s,box-shadow .25s} .domain-search:focus-within{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(34,211,238,.12)} .domain-search .icon{width:19px;height:19px;color:var(--dim);align-self:center;margin-inline-start:12px} .domain-search input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-size:15px;padding:10px 8px;font-family:var(--font-body)} .domain-search input::placeholder{color:var(--dim)} .hero-stats{display:flex;gap:44px;margin-top:48px;flex-wrap:wrap} .stat b{display:block;font-family:var(--font-disp);font-size:32px;font-weight:700;background:var(--grad-txt);-webkit-background-clip:text;background-clip:text;color:transparent} .stat span{color:var(--muted);font-size:13.5px} /* terminal */ .terminal{background:rgba(8,11,22,.82);border:1px solid var(--line-2);border-radius:var(--r-lg);backdrop-filter:blur(16px); box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 60px rgba(59,130,246,.09);overflow:hidden;direction:ltr;text-align:left} .terminal .bar{display:flex;align-items:center;gap:7px;padding:13px 18px;border-bottom:1px solid var(--line)} .terminal .bar i{width:11px;height:11px;border-radius:50%;display:block} .terminal .bar .r{background:#FF5F57}.terminal .bar .y{background:#FEBC2E}.terminal .bar .g{background:#28C840} .terminal .bar span{margin-left:auto;color:var(--dim);font-size:12px;font-family:monospace} .terminal .body{padding:20px 22px;font-family:'SFMono-Regular',Consolas,monospace;font-size:13.2px;line-height:2;min-height:270px} .terminal .body .ln{white-space:pre-wrap;word-break:break-all} .terminal .p{color:var(--cyan)} .terminal .ok{color:var(--green)} .terminal .c{color:var(--dim)} .terminal .w{color:#E6EAF3} .caret{display:inline-block;width:8px;height:15px;background:var(--cyan);vertical-align:-2px;animation:blink 1s steps(1) infinite} @keyframes blink{50%{opacity:0}} .term-status{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)} .term-status div{padding:13px 10px;text-align:center;font-size:11.5px;color:var(--muted);border-inline-end:1px solid var(--line)} .term-status div:last-child{border-inline-end:none} .term-status b{display:block;color:var(--green);font-size:14px;font-family:monospace} /* ============ MARQUEE ============ */ .marquee-wrap{border-block:1px solid var(--line);padding:26px 0;background:rgba(255,255,255,.015);overflow:hidden} .marquee-label{text-align:center;color:var(--dim);font-size:12px;font-weight:600;letter-spacing:2px;margin-bottom:18px;text-transform:uppercase} .marquee{display:flex;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .marquee .track{display:flex;gap:72px;padding-inline-end:72px;flex:none;animation:scroll 30s linear infinite;direction:ltr} .marquee:hover .track{animation-play-state:paused} @keyframes scroll{to{transform:translateX(-100%)}} .marquee span{color:var(--dim);font-family:var(--font-disp);font-weight:600;font-size:19px;letter-spacing:1px;white-space:nowrap;transition:color .25s} .marquee span:hover{color:var(--text)} /* ============ SECTIONS ============ */ .section{padding:110px 0;position:relative} .section-head{text-align:center;max-width:660px;margin:0 auto 64px} .section-head h2{font-family:var(--font-disp);font-size:clamp(28px,4vw,42px);font-weight:700;letter-spacing:-1px;margin:18px 0 14px;line-height:1.15} .section-head p{color:var(--muted);font-size:17px} /* ============ PRODUCT CARDS ============ */ .products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .pcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px; display:flex;flex-direction:column;transition:transform .3s var(--ease),border-color .3s,background .3s;overflow:hidden} .pcard::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;opacity:0;transition:opacity .35s; background:linear-gradient(140deg,rgba(59,130,246,.6),rgba(34,211,238,.3) 45%,transparent 70%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none} .pcard::after{content:'';position:absolute;width:220px;height:220px;border-radius:50%;top:-90px;inset-inline-end:-90px; background:radial-gradient(circle,rgba(34,211,238,.14),transparent 70%);opacity:0;transition:opacity .35s;pointer-events:none} .pcard:hover{transform:translateY(-6px);background:var(--surface-2)} .pcard:hover::before,.pcard:hover::after{opacity:1} .pcard .picon{width:50px;height:50px;border-radius:14px;background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.25); display:grid;place-items:center;margin-bottom:20px;color:var(--cyan);transition:transform .3s var(--ease)} .pcard:hover .picon{transform:scale(1.08) rotate(-4deg)} .pcard .picon .icon{width:23px;height:23px} .pcard h3{font-family:var(--font-disp);font-size:19px;font-weight:600;margin-bottom:9px} .pcard p{color:var(--muted);font-size:14.5px;flex:1} .pcard .price{margin:20px 0 16px;font-size:13.5px;color:var(--muted)} .pcard .price b{font-family:var(--font-disp);font-size:25px;color:var(--text);font-weight:700;margin-inline:5px} .pcard .buy{display:inline-flex;align-items:center;gap:7px;color:var(--cyan);font-weight:600;font-size:14.5px;transition:gap .25s var(--ease)} .pcard:hover .buy{gap:12px} a.pcard-link{text-decoration:none;color:inherit;cursor:pointer} html[dir="rtl"] .pcard .buy .dir{transform:scaleX(-1)} /* ============ PRICING ============ */ .plans{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .plan{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 26px; transition:transform .3s var(--ease),border-color .3s,box-shadow .3s} .plan:hover{transform:translateY(-6px);border-color:rgba(59,130,246,.5)} .plan.popular{border-color:rgba(34,211,238,.55);background:linear-gradient(180deg,rgba(34,211,238,.09),var(--surface) 55%); box-shadow:0 0 50px rgba(34,211,238,.12)} .plan.popular:hover{box-shadow:0 14px 60px rgba(34,211,238,.22)} .plan .pop-badge{position:absolute;top:-13px;inset-inline-start:26px;background:var(--grad);padding:5px 15px;border-radius:999px;font-size:12px;font-weight:700;color:#fff;box-shadow:0 4px 16px rgba(34,211,238,.4)} .plan h3{font-family:var(--font-disp);font-size:18px;font-weight:600} .plan .p-price{margin:18px 0 4px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap} .plan .p-price b{font-family:var(--font-disp);font-size:34px;font-weight:700} .plan .p-price span{color:var(--muted);font-size:13.5px} .plan ul{list-style:none;margin:20px 0 24px} .plan li{padding:8px 0;font-size:14px;color:#B9C2D8;display:flex;gap:10px;align-items:center} .plan li .icon{width:16px;height:16px;color:var(--green)} .plan .btn{width:100%;justify-content:center} .plan .btn-glass:hover{background:var(--grad);border-color:transparent} /* ============ ENTERPRISE BENTO ============ */ .bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px} .bcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px; overflow:hidden;transition:transform .3s var(--ease),border-color .3s,background .3s;grid-column:span 2} .bcard.wide{grid-column:span 3} .bcard:hover{transform:translateY(-5px);border-color:var(--line-2);background:var(--surface-2)} .bcard .glow{position:absolute;width:300px;height:300px;border-radius:50%;top:-120px;inset-inline-start:-80px; background:radial-gradient(circle,rgba(139,92,246,.13),transparent 70%);opacity:0;transition:opacity .4s;pointer-events:none} .bcard:hover .glow{opacity:1} .bcard .bicon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px; background:rgba(139,92,246,.13);border:1px solid rgba(139,92,246,.28);color:#C4B5FD} .bcard .bicon .icon{width:22px;height:22px} .bcard h3{font-family:var(--font-disp);font-size:17.5px;font-weight:600;margin-bottom:8px} .bcard p{color:var(--muted);font-size:14px} .bcard .tag{position:absolute;top:24px;inset-inline-end:24px;font-size:11px;font-weight:700;letter-spacing:1.2px;color:var(--dim);text-transform:uppercase} /* ============ WHY ============ */ .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .witem{display:flex;gap:16px;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r); transition:border-color .25s,background .25s,transform .25s var(--ease)} .witem:hover{border-color:rgba(52,211,153,.4);background:var(--surface-2);transform:translateY(-3px)} .witem .wicon{width:44px;height:44px;flex:none;border-radius:12px;background:rgba(52,211,153,.11);border:1px solid rgba(52,211,153,.25); display:grid;place-items:center;color:var(--green)} .witem .wicon .icon{width:20px;height:20px} .witem h4{font-size:15.5px;font-weight:600;margin-bottom:4px} .witem p{color:var(--muted);font-size:13.5px} /* ============ LOCATIONS ============ */ .loc-strip{display:flex;justify-content:center;gap:14px;flex-wrap:wrap} .loc{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line-2);border-radius:999px; padding:11px 24px;font-weight:600;font-size:14.5px;transition:.25s;color:#B9C2D8} .loc .icon{width:16px;height:16px;color:var(--cyan)} .loc:hover{border-color:var(--cyan);color:var(--text);transform:translateY(-2px);box-shadow:0 8px 24px rgba(34,211,238,.15)} /* ============ FAQ ============ */ .faq-list{max-width:760px;margin:0 auto} .faq{background:var(--surface);border:1px solid var(--line);border-radius:16px;margin-bottom:12px;overflow:hidden;transition:border-color .25s} .faq[open]{border-color:rgba(59,130,246,.4)} .faq summary{padding:21px 26px;font-weight:600;font-size:15.5px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px} .faq summary::-webkit-details-marker{display:none} .faq summary .icon{width:18px;height:18px;color:var(--cyan);transition:transform .3s var(--ease)} .faq[open] summary .icon{transform:rotate(45deg)} .faq .body{padding:0 26px 22px;color:var(--muted);font-size:14.5px} /* ============ CTA ============ */ .cta-wrap{padding:0 24px} .cta{position:relative;max-width:1200px;margin:0 auto;border-radius:28px;padding:80px 32px;text-align:center;overflow:hidden; background:linear-gradient(140deg,rgba(59,130,246,.16),rgba(34,211,238,.1) 50%,rgba(139,92,246,.14)); border:1px solid var(--line-2)} .cta::before{content:'';position:absolute;inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:44px 44px;mask-image:radial-gradient(ellipse at center,#000,transparent 75%);pointer-events:none} .cta h2{font-family:var(--font-disp);font-size:clamp(26px,4vw,40px);font-weight:700;letter-spacing:-1px;margin-bottom:14px;position:relative} .cta p{color:var(--muted);margin-bottom:32px;font-size:17px;position:relative} .cta .btn{position:relative} /* ============ FOOTER ============ */ footer{border-top:1px solid var(--line);margin-top:110px;padding:70px 0 30px;background:rgba(255,255,255,.012)} .f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:52px} .f-grid h5{font-size:13px;font-weight:700;margin-bottom:18px;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim)} .f-grid a{display:block;font-size:14px;padding:5.5px 0;color:var(--muted);transition:color .2s,padding-inline-start .2s} .f-grid a:hover{color:var(--cyan)} .f-about p{font-size:14px;color:var(--muted);margin:16px 0 20px;max-width:300px} .f-social{display:flex;gap:10px} .f-social a{width:38px;height:38px;border:1px solid var(--line-2);border-radius:11px;display:grid;place-items:center;color:var(--muted);transition:.25s} .f-social a:hover{color:var(--cyan);border-color:var(--cyan);transform:translateY(-2px)} .f-social .icon{width:17px;height:17px} .f-bottom{border-top:1px solid var(--line);padding-top:26px;display:flex;justify-content:space-between;font-size:13px;color:var(--dim);flex-wrap:wrap;gap:12px} /* ============ RESPONSIVE ============ */ @media(max-width:1020px){ .hero .container{grid-template-columns:1fr} .terminal{display:none} .products-grid{grid-template-columns:repeat(2,1fr)} .plans{grid-template-columns:repeat(2,1fr)} .bento{grid-template-columns:repeat(2,1fr)} .bcard,.bcard.wide{grid-column:span 1} .why-grid{grid-template-columns:repeat(2,1fr)} .f-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:640px){ nav.desktop,.login-btn{display:none} .hamburger{display:block} .hero{padding:130px 0 70px} .products-grid,.plans,.bento,.why-grid,.f-grid{grid-template-columns:1fr} .section{padding:70px 0} .hero-stats{gap:26px} .cta{padding:56px 24px} } /* ============ A11Y: reduced motion ============ */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} html{scroll-behavior:auto} .reveal{opacity:1;transform:none} } /* ============ CWV: موبایل بدونِ reveal ============ .reveal با opacity:0 شروع می‌شود و تا site.jsِ defer لود و IntersectionObserver اجرا نشود هیچ‌چیز — از جمله هیروی بالای صفحه — رنگ نمی‌شود. روی شبکهٔ موبایل یعنی LCP گروگانِ JS است: Search Console هر ۷۴ URLِ موبایل را «LCP > 4s» (Poor) گزارش کرد — ممیزی ۲۴ اوت ۲۰۲۶. روی صفحهٔ کوچک، انیمیشنِ ورودِ اسکرولی ارزشِ دیده‌شدنی هم ندارد؛ پس موبایل = رندرِ آنی، دسکتاپ = همان افکتِ قبلی. (768px = آستانهٔ موبایل/تبلتِ CrUX، عمداً از 640ِ همبرگر پهن‌تر) */ @media(max-width:768px){ .reveal{opacity:1;transform:none;transition:none} } /* ============ TOPBAR (trust: phone/email/status) ============ */ .topbar{background:rgba(8,11,22,.9);border-bottom:1px solid var(--line);font-size:12.5px;position:relative;z-index:201} .topbar .container{display:flex;align-items:center;justify-content:space-between;height:38px;gap:16px} .topbar-contacts{display:flex;align-items:center;gap:22px} .topbar a{display:inline-flex;align-items:center;gap:7px;color:var(--muted);transition:color .2s;direction:ltr} .topbar a:hover{color:var(--cyan)} .topbar .icon{width:14px;height:14px;color:var(--cyan)} .topbar-status{display:inline-flex;align-items:center;gap:8px;color:var(--muted)} .topbar-status .pulse{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 2s infinite} .site-header-wrap{position:fixed;top:0;left:0;right:0;z-index:200} .site-header-wrap header{position:relative;top:auto;left:auto;right:auto} @media(max-width:640px){ .topbar-status{display:none} .topbar-contacts{gap:14px;width:100%;justify-content:space-between} } /* ============ AI CHAT WIDGET ============ */ .chat-fab{position:fixed;bottom:24px;inset-inline-end:24px;z-index:400;width:58px;height:58px;border-radius:50%; background:var(--grad);border:none;color:#fff;display:grid;place-items:center; box-shadow:0 8px 30px rgba(34,211,238,.4);transition:transform .25s var(--ease),box-shadow .25s} .chat-fab:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 12px 40px rgba(34,211,238,.55)} .chat-fab .icon{width:26px;height:26px} .chat-fab .dot{position:absolute;top:2px;inset-inline-end:2px;width:13px;height:13px;border-radius:50%; background:var(--green);border:2.5px solid var(--bg);animation:pulse 2s infinite} .chat-panel{position:fixed;bottom:96px;inset-inline-end:24px;z-index:400;width:min(380px,calc(100vw - 32px)); max-height:min(560px,calc(100vh - 130px));display:none;flex-direction:column;overflow:hidden; background:rgba(8,11,22,.96);border:1px solid var(--line-2);border-radius:22px;backdrop-filter:blur(20px); box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 50px rgba(59,130,246,.12); opacity:0;transform:translateY(16px) scale(.97);transition:opacity .3s var(--ease),transform .3s var(--ease)} .chat-panel.open{display:flex} .chat-panel.in{opacity:1;transform:none} .chat-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line); background:linear-gradient(120deg,rgba(59,130,246,.14),rgba(34,211,238,.08))} .chat-head .avatar{width:40px;height:40px;border-radius:12px;background:var(--grad);display:grid;place-items:center;color:#fff;flex:none; box-shadow:0 0 18px rgba(34,211,238,.35)} .chat-head .avatar .icon{width:21px;height:21px} .chat-head h4{font-size:14.5px;font-weight:700} .chat-head p{font-size:11.5px;color:var(--green);display:flex;align-items:center;gap:6px} .chat-head p::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green)} .chat-close{margin-inline-start:auto;background:none;border:none;color:var(--muted);padding:6px;border-radius:8px;transition:.2s} .chat-close:hover{color:var(--text);background:var(--surface-2)} .chat-close .icon{width:17px;height:17px} .chat-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;min-height:220px} .chat-msg{max-width:85%;padding:11px 15px;border-radius:16px;font-size:13.5px;line-height:1.7;white-space:pre-line} .chat-msg.bot{background:var(--surface-2);border:1px solid var(--line);align-self:flex-start;border-start-start-radius:5px} .chat-msg.user{background:var(--grad);color:#fff;align-self:flex-end;border-start-end-radius:5px} .chat-actions{display:flex;flex-wrap:wrap;gap:7px;align-self:flex-start;max-width:90%} .chat-actions a{font-size:12px;font-weight:600;color:var(--cyan);border:1px solid rgba(34,211,238,.35); border-radius:999px;padding:6px 13px;transition:.2s;background:rgba(34,211,238,.06)} .chat-actions a:hover{background:rgba(34,211,238,.15);transform:translateY(-1px)} .chat-typing{display:inline-flex;gap:4px;padding:13px 16px;background:var(--surface-2);border:1px solid var(--line); border-radius:16px;border-start-start-radius:5px;align-self:flex-start} .chat-typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:tdot 1.2s infinite} .chat-typing i:nth-child(2){animation-delay:.15s}.chat-typing i:nth-child(3){animation-delay:.3s} @keyframes tdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}} .chat-input{display:flex;gap:8px;padding:14px;border-top:1px solid var(--line)} .chat-input input{flex:1;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:11px 15px; color:var(--text);font-size:13.5px;outline:none;font-family:var(--font-body);transition:border-color .2s} .chat-input input:focus{border-color:var(--cyan)} .chat-input button{background:var(--grad);border:none;border-radius:12px;width:44px;color:#fff;display:grid;place-items:center;transition:.2s} .chat-input button:hover{transform:scale(1.06)} .chat-input button .icon{width:18px;height:18px} html[dir="rtl"] .chat-input button .icon{transform:scaleX(-1)} @media(max-width:640px){ .chat-fab{bottom:18px;inset-inline-end:18px;width:52px;height:52px} .chat-panel{bottom:82px;inset-inline-end:16px} } /* ============ CTA contact line ============ */ .cta-contacts{display:flex;justify-content:center;gap:26px;margin-top:28px;flex-wrap:wrap;position:relative} .cta-contacts a{display:inline-flex;align-items:center;gap:9px;color:var(--muted);font-size:14.5px;font-weight:600;direction:ltr;transition:color .2s} .cta-contacts a:hover{color:var(--cyan)} .cta-contacts .icon{width:17px;height:17px;color:var(--cyan)} /* footer contact block */ .f-contact a.fc{display:flex;align-items:center;gap:9px;direction:ltr;justify-content:flex-end} html[dir="ltr"] .f-contact a.fc{justify-content:flex-start} .f-contact .icon{width:15px;height:15px;color:var(--cyan)} /* lang switch as links + a11y skip link + 5-col footer */ .lang-switch a{display:inline-flex;align-items:center;color:var(--muted);padding:8px 15px;font-size:13.5px;font-weight:600;transition:.2s} .lang-switch a.active{background:var(--grad);color:#fff} .skip-link{position:absolute;top:-48px;inset-inline-start:12px;z-index:500;background:var(--grad);color:#fff; padding:10px 18px;border-radius:0 0 12px 12px;font-size:13.5px;font-weight:600;transition:top .2s} .skip-link:focus{top:0} .f-grid{grid-template-columns:1.3fr 1fr 1fr 1fr 1.15fr} @media(max-width:1020px){.f-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.f-grid{grid-template-columns:1fr}} /* ============ TOPBAR v2: lang links ============ */ .topbar-side{display:flex;align-items:center;gap:18px} .lang-links{display:flex;align-items:center;gap:8px;font-size:12.5px} .lang-links a{color:var(--dim);font-weight:600;transition:color .2s} .lang-links a.active{color:var(--text)} .lang-links a:hover{color:var(--cyan)} .lang-links span{color:var(--dim);opacity:.5} @media(max-width:640px){.hide-sm{display:none}} /* ============ NAV v2 ============ */ nav.desktop{display:flex;gap:2px;align-items:center} .nav-item{position:static} .nav-link{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--muted); font-size:14.5px;font-weight:500;padding:9px 14px;border-radius:10px;transition:color .2s,background .2s;font-family:var(--font-body)} .nav-link:hover,.nav-item.open .nav-link{color:var(--text);background:var(--surface-2)} .nav-link .chev{width:13px;height:13px;transition:transform .25s var(--ease);opacity:.6} .nav-item.open .nav-link .chev{transform:rotate(180deg)} .free-badge{font-size:10px;font-weight:800;letter-spacing:.5px;background:var(--grad);color:#fff; border-radius:999px;padding:2.5px 8px;line-height:1.2} /* ============ MENU PANELS ============ */ .menu-panel{position:absolute;top:100%;left:0;right:0;background:rgba(6,9,18,.97);backdrop-filter:blur(26px); border-bottom:1px solid var(--line-2);box-shadow:0 40px 80px rgba(0,0,0,.55); opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none; transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s} .menu-panel.open{opacity:1;visibility:visible;transform:none;pointer-events:auto} .menu-panel .container{padding-top:26px;padding-bottom:26px} /* mega: tabs + panes */ .mega-inner{display:grid;grid-template-columns:290px 1fr;gap:34px;align-items:start} .mega-tabs{display:flex;flex-direction:column;gap:4px;border-inline-end:1px solid var(--line);padding-inline-end:22px} .mega-tab{display:flex;align-items:center;gap:13px;background:none;border:none;border-radius:14px;padding:12px 14px; text-align:start;color:var(--muted);transition:.2s;width:100%} .mega-tab .mt-icon{width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center; background:var(--surface-2);border:1px solid var(--line);color:var(--muted);transition:.2s} .mega-tab .mt-icon .icon{width:19px;height:19px} .mega-tab .mt-txt{flex:1;display:flex;flex-direction:column;gap:1px} .mega-tab .mt-txt b{font-size:14.5px;font-weight:600;color:var(--text)} .mega-tab .mt-txt small{font-size:12px;color:var(--dim)} .mega-tab .chev{width:14px;height:14px;opacity:0;transition:.2s} .mega-tab:hover,.mega-tab.active{background:var(--surface-2)} .mega-tab.active .mt-icon{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 4px 18px rgba(34,211,238,.35)} .mega-tab.active .chev{opacity:.8;color:var(--cyan)} .mega-content{position:relative;min-height:300px} /* 🔴 گرید ثابتِ ۳ ستونی، نه auto-fit: با auto-fit پهنای ستون‌ها با تعدادِ گروه‌ها عوض می‌شد (دامنه ۲ ستونِ ۴۰۶px، سرور مجازی ۳ ستونِ ۲۶۰px)؛ سوییچِ تب یک بازچینشِ افقیِ پرشی می‌داد — همان «بهم‌ریختنِ منو» که کارفرما هنگامِ کشیدنِ ماوس بینِ تب‌ها می‌دید. حالا همهٔ پن‌ها ۳ ستونِ هم‌عرض دارند، پس سوییچِ تب بی‌پرش است. */ .mega-pane{display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 30px;align-content:start} /* megaFade فقط محو است، بی‌لغزش: انیمیشنِ لغزشیِ paneIn (translateY) با هر سوییچِ تب دوباره پخش می‌شد و روی کشیدنِ سریعِ ماوس چشمک/پرش می‌داد. */ .mega-pane.active{display:grid;animation:megaFade .16s var(--ease)} @keyframes megaFade{from{opacity:0}to{opacity:1}} @keyframes paneIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .mega-group{padding:4px 0} .mega-group h6{font-size:11.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--dim); margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--line)} .mega-group a{display:block;font-size:13.8px;color:var(--muted);padding:6.5px 0;transition:color .2s,padding-inline-start .2s} .mega-group a:hover{color:var(--cyan);padding-inline-start:6px} .mega-foot{border-top:1px solid var(--line);background:rgba(255,255,255,.02)} .mega-foot .container{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:13px;padding-bottom:13px;flex-wrap:wrap} .mega-foot a{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);transition:color .2s} .mega-foot a:hover{color:var(--cyan)} .mega-foot a b{color:var(--text)} .mega-foot .icon{width:15px;height:15px;color:var(--cyan)} .mega-foot span{font-size:12.5px;color:var(--dim)} /* dropdown cards (services/tools/knowledge) */ .drop-grid{display:grid;gap:8px} .drop-grid.cols-3{grid-template-columns:repeat(3,1fr)} .drop-card{display:flex;align-items:flex-start;gap:13px;padding:14px 16px;border-radius:15px;border:1px solid transparent;transition:.2s} .drop-card:hover{background:var(--surface-2);border-color:var(--line)} .dc-icon{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center; background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.25);color:var(--cyan)} .dc-icon .icon{width:20px;height:20px} .dc-icon.tool{background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.25);color:var(--green)} .dc-icon.know{background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.28);color:#C4B5FD} .dc-icon.sm{width:34px;height:34px;border-radius:10px} .dc-icon.sm .icon{width:16px;height:16px} .dc-txt{display:flex;flex-direction:column;gap:3px} .dc-txt b{font-size:14px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px} .dc-txt small{font-size:12.5px;color:var(--dim);line-height:1.6} /* ============ HAMBURGER — "Signal Node" (theme-aware, CSS-only) ============ */ /* Three neutral bars converge to the button's center and cross into an X whose intersection ignites as a pulsing cyan→violet node. JS toggles .active. */ .hamburger{ position:relative; display:none; /* re-asserted to flex at <=1020px (below + later media) */ align-items:center;justify-content:center; width:44px;height:44px;padding:0; background:var(--surface); border:1px solid var(--line-2); border-radius:13px; color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent; transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease); } .hamburger:hover{background:var(--surface-2);border-color:var(--line-2)} .hamburger:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--cyan)} .hb-bar{ position:absolute;top:50%;inset-inline-start:50%; width:20px;height:2px;margin-top:-1px;margin-inline-start:-10px; border-radius:2px;background:var(--text); transition:transform .45s var(--ease),opacity .3s var(--ease),background .45s var(--ease); } .hb-bar-1{transform:translateY(-6px)} .hb-bar-2{transform:translateY(0)} .hb-bar-3{transform:translateY(6px)} .hb-node{ position:absolute;top:50%;inset-inline-start:50%; width:7px;height:7px;margin-top:-3.5px;margin-inline-start:-3.5px; border-radius:50%; background:linear-gradient(135deg,var(--cyan),var(--violet)); opacity:0;transform:scale(0); transition:opacity .3s var(--ease),transform .45s var(--ease); } .hamburger.active{ border-color:transparent;background:var(--surface-2); box-shadow:0 0 0 1px rgba(34,211,238,.40),0 8px 24px -10px rgba(139,92,246,.55); } .hamburger.active .hb-bar{width:20px;margin-inline-start:-10px} .hamburger.active .hb-bar-1{transform:translateY(0) rotate(45deg);background:linear-gradient(90deg,var(--cyan),var(--blue))} .hamburger.active .hb-bar-2{transform:translateY(0) scaleX(.2);opacity:0} .hamburger.active .hb-bar-3{transform:translateY(0) rotate(-45deg);background:linear-gradient(90deg,var(--violet),var(--blue))} .hamburger.active .hb-node{opacity:1;transform:scale(1);animation:hbPulse 2.1s var(--ease) .35s infinite} @keyframes hbPulse{ 0%,100%{box-shadow:0 0 0 0 rgba(34,211,238,.55)} 55%{box-shadow:0 0 0 6px rgba(34,211,238,0)} } @media(max-width:1020px){.hamburger{display:flex}} @media (prefers-reduced-motion:reduce){ .hb-bar,.hb-node{transition-duration:.01ms} .hamburger.active .hb-node{animation:none} } /* ============ MOBILE DRAWER ============ */ .drawer-backdrop{position:fixed;inset:0;z-index:390;background:rgba(3,5,10,.6);backdrop-filter:blur(6px); opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s} .drawer-backdrop.open{opacity:1;visibility:visible} .drawer{position:fixed;top:0;bottom:0;inset-inline-end:0;z-index:395;width:min(390px,92vw); display:flex;flex-direction:column;background:rgba(7,10,20,.98);border-inline-start:1px solid var(--line-2); transform:translateX(0);visibility:hidden;transition:transform .42s var(--ease),visibility .42s; box-shadow:-30px 0 80px rgba(0,0,0,.5)} html[dir="rtl"] .drawer:not(.open){transform:translateX(-105%)} html[dir="ltr"] .drawer:not(.open){transform:translateX(105%)} .drawer.open{transform:none;visibility:visible} .drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)} .drawer-close{background:var(--surface-2);border:1px solid var(--line-2);border-radius:11px;color:var(--text); width:40px;height:40px;display:grid;place-items:center;transition:.2s} .drawer-close:hover{border-color:var(--cyan);color:var(--cyan)} .drawer-close .icon{width:17px;height:17px} .drawer-body{flex:1;overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column;gap:4px} .drawer.open .acc,.drawer.open .drawer-link{animation:drawerItem .5s var(--ease) both} @keyframes drawerItem{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}} .drawer.open .acc:nth-child(1){animation-delay:.06s}.drawer.open .acc:nth-child(2){animation-delay:.1s} .drawer.open .acc:nth-child(3){animation-delay:.14s}.drawer.open .acc:nth-child(4){animation-delay:.18s} .drawer.open .acc:nth-child(5){animation-delay:.22s}.drawer.open .acc:nth-child(6){animation-delay:.26s} .drawer.open .acc:nth-child(7){animation-delay:.3s}.drawer.open .acc:nth-child(8){animation-delay:.34s} .drawer.open .acc:nth-child(9){animation-delay:.38s}.drawer.open .drawer-link{animation-delay:.42s} .acc{border:1px solid transparent;border-radius:14px;overflow:hidden;transition:border-color .25s,background .25s} .acc.open{border-color:var(--line);background:var(--surface)} .acc-head{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;color:var(--text); font-size:15px;font-weight:600;padding:12px 10px;text-align:start;font-family:var(--font-body)} .acc-head .chev{margin-inline-start:auto;width:16px;height:16px;color:var(--dim);transition:transform .3s var(--ease)} .acc.open .acc-head .chev{transform:rotate(180deg);color:var(--cyan)} .acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)} .acc-body>*{min-height:0} .acc.open .acc-body{grid-template-rows:1fr} .acc-body{overflow:hidden;padding:0 14px} .acc-body h6{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim);margin:12px 0 4px;overflow:hidden} .acc-body a{display:block;font-size:13.8px;color:var(--muted);padding:7px 8px;border-radius:8px;transition:.2s;overflow:hidden} .acc-body a:hover{color:var(--cyan);background:var(--surface-2)} .acc.open .acc-body{padding-bottom:12px} .drawer-link{display:flex;align-items:center;gap:12px;color:var(--text);font-size:15px;font-weight:600;padding:12px 10px;border-radius:14px;transition:.2s} .drawer-link:hover{background:var(--surface)} .drawer-foot{border-top:1px solid var(--line);padding:16px 18px;display:flex;flex-direction:column;gap:13px} .drawer-meta{display:flex;align-items:center;justify-content:space-between;gap:12px} .drawer-meta a{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:13.5px;transition:color .2s} .drawer-meta a:hover{color:var(--cyan)} .drawer-meta .icon{width:14px;height:14px;color:var(--cyan)} /* ============ DOMAIN BOX v2 ============ */ .domain-box{margin-top:36px;max-width:600px} .domain-title{font-size:14.5px;font-weight:600;color:var(--text);margin-bottom:12px;display:flex;align-items:center;gap:8px} .domain-search{margin-top:0} .tld-strip{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap} .tld-chip{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line); border-radius:999px;padding:7px 14px;font-size:12.5px;transition:opacity .45s var(--ease),transform .45s var(--ease),border-color .2s; color:var(--muted);font-family:var(--font-body);cursor:pointer} .tld-chip b{color:var(--cyan);font-family:'SFMono-Regular',Consolas,monospace;font-size:13px;direction:ltr} .tld-chip i{font-style:normal;color:var(--dim)} .tld-chip:hover{border-color:var(--cyan);color:var(--text)} .tld-chip.fading{opacity:0;transform:translateY(8px) scale(.92)} .tld-chip.hidden-chip{display:none} .domain-result{margin-top:14px;border-radius:16px;border:1px solid var(--line-2);background:var(--surface); padding:16px 18px;backdrop-filter:blur(10px);animation:paneIn .3s var(--ease)} .domain-result .dr-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .domain-result .dr-domain{font-family:'SFMono-Regular',Consolas,monospace;font-weight:700;font-size:15.5px;direction:ltr} .domain-result.ok{border-color:rgba(52,211,153,.45);box-shadow:0 0 30px rgba(52,211,153,.08)} .domain-result.ok .dr-domain{color:var(--green)} .domain-result.no{border-color:rgba(255,95,87,.35)} .domain-result.no .dr-domain{color:#FF8A84} .domain-result .dr-msg{font-size:13.5px;color:var(--muted)} .domain-result .dr-price{font-weight:700;color:var(--text);font-size:14.5px;margin-inline-start:auto} .domain-result .dr-price small{color:var(--dim);font-weight:500} .domain-result .btn{padding:9px 18px;font-size:13.5px;border-radius:10px} .domain-result .dr-suggest{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)} .domain-result .dr-suggest p{font-size:12.5px;color:var(--dim);margin-bottom:9px} .domain-result .dr-alts{display:flex;gap:8px;flex-wrap:wrap} .domain-result .dr-alt{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(52,211,153,.35); background:rgba(52,211,153,.07);border-radius:999px;padding:7px 14px;font-size:12.5px;color:var(--text);transition:.2s} .domain-result .dr-alt:hover{background:rgba(52,211,153,.16);transform:translateY(-1px)} .domain-result .dr-alt b{font-family:'SFMono-Regular',Consolas,monospace;color:var(--green);direction:ltr} .domain-result .dr-alt i{font-style:normal;color:var(--dim)} .dr-spin{width:17px;height:17px;border:2px solid var(--line-2);border-top-color:var(--cyan);border-radius:50%; animation:spin .8s linear infinite;flex:none} @keyframes spin{to{transform:rotate(360deg)}} /* ============ BILLING TOGGLE ============ */ .bill-toggle{display:flex;justify-content:center;gap:0;margin:-26px auto 38px;width:fit-content; background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:5px;backdrop-filter:blur(10px)} .bill-toggle button{display:inline-flex;align-items:center;gap:8px;background:none;border:none;color:var(--muted); font-size:14px;font-weight:600;padding:9px 22px;border-radius:10px;transition:.25s;font-family:var(--font-body)} .bill-toggle button.active{background:var(--grad);color:#fff;box-shadow:0 4px 18px rgba(34,211,238,.3)} .bill-toggle .save{font-size:10.5px;font-weight:800;background:rgba(52,211,153,.15);border:1px solid rgba(52,211,153,.4); color:var(--green);border-radius:999px;padding:2.5px 8px} .bill-toggle button.active .save{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35);color:#fff} .p-price .pr{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap} .p-price .pr-y{display:none} .plans.yearly .pr-m{display:none} .plans.yearly .pr-y{display:flex} .p-price .pr b{font-family:var(--font-disp);font-size:34px;font-weight:700} .p-price .pr span{color:var(--muted);font-size:13px} /* ============ FOOTER v2 (mobile accordion) ============ */ .f-head{display:flex;align-items:center;justify-content:space-between;gap:10px} .f-head .chev{display:none;width:15px;height:15px;color:var(--dim);transition:transform .3s var(--ease)} @media(max-width:640px){ .f-grid{gap:0;margin-bottom:34px} .f-about{padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:8px} .f-col{border-bottom:1px solid var(--line)} .f-head{cursor:pointer;padding:15px 2px;margin-bottom:0;-webkit-tap-highlight-color:transparent} .f-head .chev{display:block} .f-col.open .f-head .chev{transform:rotate(180deg);color:var(--cyan)} .f-links{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)} .f-links>a{min-height:0;overflow:hidden;padding:0 2px} .f-col.open .f-links{grid-template-rows:1fr;padding-bottom:14px} .f-col.open .f-links>a{padding:6.5px 2px} .f-links{overflow:hidden} .f-bottom{flex-direction:column;align-items:center;text-align:center;gap:8px} } @media(min-width:641px){ .f-links a{display:block;font-size:14px;padding:5.5px 0;color:var(--muted);transition:color .2s} .f-links a:hover{color:var(--cyan)} } .f-links a{color:var(--muted);font-size:14px;transition:color .2s;display:block} .f-links a:hover{color:var(--cyan)} /* ============ RESPONSIVE NAV ============ */ @media(max-width:1020px){ nav.desktop{display:none} .hamburger{display:flex} .menu-panel{display:none} .login-btn span{display:none} .login-btn{padding:9px 12px} } @media(max-width:640px){ .login-btn{display:none} .domain-box{max-width:100%} .tld-strip{overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;scrollbar-width:none} .tld-strip::-webkit-scrollbar{display:none} .tld-chip{flex:none} .bill-toggle{margin-top:-10px} } /* خنثی‌کردن header .container برای کانتینرهای داخل پنل‌های منو */ .menu-panel .container{display:block;height:auto;justify-content:normal} .menu-panel .mega-inner{display:grid} .menu-panel .mega-foot .container{display:flex;height:auto;justify-content:space-between} /* جلوگیری از اسکرول افقی ناشی از المان‌های ترنسفرم‌شده (کشوی موبایل) */ html{overflow-x:clip} /* آکاردئون‌ها: expand با wrapper تکی (grid 0fr→1fr) */ .acc-body{display:grid;grid-template-rows:0fr;overflow:hidden;padding:0 14px;transition:grid-template-rows .35s var(--ease)} .acc-body .acc-in{min-height:0;overflow:hidden} .acc.open .acc-body{grid-template-rows:1fr;padding-bottom:12px} @media(max-width:640px){ .f-links{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .35s var(--ease)} .f-links .f-in{min-height:0;overflow:hidden} .f-col.open .f-links{grid-template-rows:1fr;padding-bottom:14px} .f-links a{padding:6.5px 2px} } /* تاپ‌بار موبایل: فقط تلفن + زبان */ @media(max-width:640px){ .topbar .container{height:auto;min-height:36px;flex-wrap:wrap;padding-block:5px;row-gap:2px} .topbar-contacts a[href^="mailto"]{display:none} .topbar-contacts{gap:12px;width:auto;justify-content:flex-start} } /* ============ FIX: باکس دامنه در موبایل ============ */ .domain-search input{min-width:0} .domain-search .btn{flex:none;white-space:nowrap} .domain-box,.domain-result{min-width:0;max-width:100%} @media(max-width:480px){ .domain-search{padding:6px;gap:6px;border-radius:14px} .domain-search .btn{padding:11px 14px;font-size:13px;border-radius:10px} .domain-search>.icon{display:none} .domain-search input{font-size:14px;padding:10px 6px} .domain-result{padding:13px 14px} .domain-result .btn{width:100%;justify-content:center;margin-top:4px} .domain-result .dr-price{margin-inline-start:0} } /* پیشنهادها: فقط یک ردیف + چیپ «…» */ .domain-result .dr-alts{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px} .domain-result .dr-alts::-webkit-scrollbar{display:none} .domain-result .dr-alt{flex:none} .domain-result .dr-more{font-weight:800;letter-spacing:2px;color:var(--cyan);border-color:rgba(34,211,238,.35);background:rgba(34,211,238,.07)} .domain-result .dr-more:hover{background:rgba(34,211,238,.16)} /* منوی موبایل: آیتم‌های توضیح‌دار */ .acc-body a small{display:block;font-size:11.5px;color:var(--dim);line-height:1.5;margin-top:1px} .acc-body a b{font-weight:600;font-size:13.8px;color:var(--muted);display:flex;align-items:center;gap:7px} .acc-body a:hover b{color:var(--cyan)} .drawer-body{-webkit-overflow-scrolling:touch;overscroll-behavior:contain} /* آیتم‌های گرید hero نباید با محتوای اسکرولی (چیپ‌های TLD) پهن شوند */ .hero .container>*{min-width:0} /* FIX: drawer-body باید واقعاً اسکرول بخورد (فرزند flex نیازمند min-height:0) */ .drawer-body{min-height:0} /* FIX اصلی: آیتم‌های drawer-body نباید توسط flex فشرده شوند */ .drawer-body>*{flex:none} /* ============ HOSTING PRODUCT PAGES ============ */ .hero-sub{padding:165px 0 70px;min-height:auto} .hero-sub .container{display:block} .hero-sub-inner{max-width:760px;margin:0 auto;text-align:center} .hero-sub h1{font-family:var(--font-disp);font-size:clamp(32px,5vw,54px);font-weight:700;line-height:1.12;letter-spacing:-1.2px;margin:22px 0 18px} .hero-sub h1 .grad{background:var(--grad-txt);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% auto;animation:shine 5s linear infinite} .hero-sub p.lead{color:var(--muted);font-size:17.5px;max-width:640px;margin:0 auto 30px} .hero-sub .hero-ctas{justify-content:center} /* چیپ‌های فنی hero */ .chip-row{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:30px} .tech-chip{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line-2); border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:600;color:#B9C2D8;direction:ltr;backdrop-filter:blur(8px)} .tech-chip .icon{width:13px;height:13px;color:var(--green)} /* پلن‌های سه‌تایی */ .plans.plans-3{grid-template-columns:repeat(3,1fr);max-width:980px;margin:0 auto} .plan li.hl{font-weight:700;color:var(--text);font-size:15px} .plan li.hl .icon{color:var(--cyan)} /* نوار «در تمام پلن‌ها» */ .inc-strip{display:flex;align-items:center;justify-content:center;gap:10px 22px;flex-wrap:wrap;margin-top:34px; background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 26px} .inc-strip>b{font-size:13.5px;color:var(--text);white-space:nowrap} .inc-items{display:flex;gap:6px 20px;flex-wrap:wrap;justify-content:center} .inc-items span{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)} .inc-items .icon{width:14px;height:14px;color:var(--green)} /* پنل زیرساخت (ابهت) */ .infra-panel{position:relative;border-radius:28px;padding:60px 40px;overflow:hidden; background:linear-gradient(140deg,rgba(59,130,246,.13),rgba(34,211,238,.07) 50%,rgba(139,92,246,.12)); border:1px solid var(--line-2)} .infra-panel::before{content:'';position:absolute;inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:44px 44px;mask-image:radial-gradient(ellipse at center,#000,transparent 78%);pointer-events:none} .infra-head{position:relative;text-align:center;max-width:640px;margin:0 auto 44px} .infra-head h2{font-family:var(--font-disp);font-size:clamp(24px,3.6vw,36px);font-weight:700;letter-spacing:-.8px;margin:16px 0 12px} .infra-head p{color:var(--muted);font-size:15.5px} .infra-stats{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .istat{text-align:center;background:rgba(5,7,15,.45);border:1px solid var(--line);border-radius:18px;padding:24px 14px;backdrop-filter:blur(8px)} .istat b{display:block;font-family:var(--font-disp);font-size:clamp(19px,2.4vw,26px);font-weight:700;direction:ltr; background:var(--grad-txt);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap} .istat span{color:var(--muted);font-size:12.5px;display:block;margin-top:6px} @media(max-width:1020px){ .plans.plans-3{grid-template-columns:repeat(2,1fr)} .infra-stats{grid-template-columns:repeat(2,1fr)} } @media(max-width:640px){ .hero-sub{padding:135px 0 55px} .plans.plans-3{grid-template-columns:1fr} .infra-panel{padding:44px 20px} .infra-stats{grid-template-columns:repeat(2,1fr);gap:10px} .inc-strip{padding:15px 16px} } /* ============ YEARLY PRICE: strikethrough ============ */ .p-price .pr s{color:var(--dim);font-size:15px;font-weight:600;text-decoration-thickness:1.5px;opacity:.85} /* ============ THEME TOGGLE ============ */ .theme-toggle{display:inline-grid;place-items:center;width:42px;height:42px;background:none; border:1px solid var(--line-2);border-radius:11px;color:var(--muted);transition:.25s;position:relative} .theme-toggle:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-1px)} .theme-toggle .icon{width:18px;height:18px;grid-area:1/1;transition:opacity .25s,transform .35s var(--ease)} .theme-toggle .tt-moon{opacity:0;transform:rotate(90deg) scale(.5)} html[data-theme="light"] .theme-toggle .tt-sun{opacity:0;transform:rotate(-90deg) scale(.5)} html[data-theme="light"] .theme-toggle .tt-moon{opacity:1;transform:none} @media(max-width:640px){.theme-toggle{width:40px;height:40px}} /* ============ LIGHT THEME ============ */ html[data-theme="light"]{ --bg:#F3F5FB; --bg2:#FFFFFF; --surface:rgba(15,23,42,.035); --surface-2:rgba(15,23,42,.06); --line:rgba(15,23,42,.1); --line-2:rgba(15,23,42,.17); --text:#0B1220; --muted:#45506B; --dim:#828CA6; --grad-txt:linear-gradient(100deg,#2563EB 0%,#0891B2 55%,#7C3AED 100%); --info:#0891B2; --info-bg:rgba(8,145,178,.09); --info-line:rgba(8,145,178,.30); --danger:#DC2626; --danger-bg:rgba(220,38,38,.08); --danger-line:rgba(220,38,38,.28); } html[data-theme="light"] body{background:var(--bg)} html[data-theme="light"] .aurora{background:var(--bg)} html[data-theme="light"] .aurora .blob{opacity:.22} html[data-theme="light"] .grid-overlay{ background-image:linear-gradient(rgba(15,23,42,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.045) 1px,transparent 1px)} html[data-theme="light"] .topbar{background:rgba(255,255,255,.92)} html[data-theme="light"] #header.scrolled{background:rgba(255,255,255,.82)} html[data-theme="light"] .menu-panel{background:rgba(255,255,255,.99);box-shadow:0 40px 80px rgba(15,23,42,.16)} html[data-theme="light"] .drawer{background:#FFFFFF} html[data-theme="light"] .drawer-backdrop{background:rgba(15,23,42,.35)} html[data-theme="light"] nav.mobile{background:rgba(255,255,255,.97)} html[data-theme="light"] .badge{color:#0E7490;background:rgba(8,145,178,.07);border-color:rgba(8,145,178,.28)} html[data-theme="light"] .plan li{color:#374357} html[data-theme="light"] .loc,html[data-theme="light"] .tech-chip{color:#374357} html[data-theme="light"] .marquee-wrap{background:rgba(15,23,42,.025)} html[data-theme="light"] .marquee span{color:#9AA3B8} html[data-theme="light"] .plan.popular{background:linear-gradient(180deg,rgba(34,211,238,.13),#FFFFFF 55%)} html[data-theme="light"] .istat{background:rgba(255,255,255,.75)} html[data-theme="light"] .cta{background:linear-gradient(140deg,rgba(59,130,246,.13),rgba(34,211,238,.09) 50%,rgba(139,92,246,.11))} html[data-theme="light"] .infra-panel{background:linear-gradient(140deg,rgba(59,130,246,.11),rgba(34,211,238,.07) 50%,rgba(139,92,246,.1))} html[data-theme="light"] .infra-panel::before,html[data-theme="light"] .cta::before{ background-image:linear-gradient(rgba(15,23,42,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.05) 1px,transparent 1px)} html[data-theme="light"] footer{background:rgba(15,23,42,.02)} html[data-theme="light"] .chat-panel{background:rgba(255,255,255,.99)} html[data-theme="light"] .chat-msg.bot{background:#EEF2F8;border-color:var(--line)} html[data-theme="light"] .chat-head{background:linear-gradient(120deg,rgba(59,130,246,.1),rgba(34,211,238,.06))} html[data-theme="light"] .chat-input input{background:#F5F7FC} html[data-theme="light"] .domain-search,html[data-theme="light"] .domain-result{background:#FFFFFF} html[data-theme="light"] .btn-glass{background:rgba(15,23,42,.05);color:var(--text)} html[data-theme="light"] .btn-glass:hover{background:rgba(15,23,42,.09)} html[data-theme="light"] .bill-toggle{background:#FFFFFF} html[data-theme="light"] .inc-strip,html[data-theme="light"] .faq,html[data-theme="light"] .witem, html[data-theme="light"] .pcard,html[data-theme="light"] .plan,html[data-theme="light"] .bcard{background:#FFFFFF} html[data-theme="light"] .pcard:hover,html[data-theme="light"] .bcard:hover{background:#FBFCFF} html[data-theme="light"] .terminal{background:#0B1220;border-color:rgba(15,23,42,.5)} html[data-theme="light"] .mega-foot{background:rgba(15,23,42,.025)} html[data-theme="light"] .stat b{filter:saturate(1.2)} /* ============ PLANS: 5+ cards → 3-col rows ============ */ .plans.plans-many{grid-template-columns:repeat(3,1fr);max-width:1080px;margin:0 auto} @media(max-width:1020px){.plans.plans-many{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.plans.plans-many{grid-template-columns:1fr}} /* ============ SIGNATURE SECTIONS ============ */ .sig-panel{position:relative;border-radius:28px;padding:56px 40px;overflow:hidden; background:var(--surface);border:1px solid var(--line-2)} html[data-theme="light"] .sig-panel{background:#FFFFFF} .sig-panel .section-head{margin-bottom:40px} @media(max-width:640px){.sig-panel{padding:40px 20px}} /* bars — مقایسه کارایی */ .sig-bars{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:18px} .bar-row{display:grid;grid-template-columns:180px 1fr 90px;align-items:center;gap:16px} .bar-row .bar-label{font-size:13.5px;font-weight:600;color:var(--muted)} .bar-row.hl .bar-label{color:var(--text)} .bar-track{height:14px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden;direction:ltr} .bar-track i{display:block;height:100%;width:0;border-radius:999px;background:var(--surface-2);transition:width 1.3s var(--ease) .2s} .bar-row.hl .bar-track i{background:var(--grad);box-shadow:0 0 18px rgba(34,211,238,.45)} .bar-row:not(.hl) .bar-track i{background:rgba(138,148,172,.45)} .sig-panel.in .bar-track i{width:var(--w)} .bar-row .bar-val{font-family:var(--font-disp);font-weight:700;font-size:15px;direction:ltr;text-align:end} .bar-row.hl .bar-val{background:var(--grad-txt);-webkit-background-clip:text;background-clip:text;color:transparent} @media(max-width:640px){.bar-row{grid-template-columns:1fr 70px;grid-template-areas:"label label" "track val"} .bar-row .bar-label{grid-area:label}.bar-row .bar-track{grid-area:track}.bar-row .bar-val{grid-area:val}} /* term — ترمینال نمایشی */ .sig-term .terminal{max-width:720px;margin:0 auto;display:block} .sig-term .terminal .body{min-height:0;padding:22px 24px} /* pings — تاخیر شبکه */ .sig-pings{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;max-width:900px;margin:0 auto} .ping-chip{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:132px; background:var(--surface);border:1px solid var(--line-2);border-radius:16px;padding:16px 18px} html[data-theme="light"] .ping-chip{background:#FFFFFF} .ping-chip b{font-size:13.5px;color:var(--text);display:flex;align-items:center;gap:7px} .ping-chip b .icon{width:14px;height:14px;color:var(--cyan)} .ping-chip i{font-style:normal;font-family:var(--font-disp);font-weight:700;font-size:19px;direction:ltr; background:var(--grad-txt);-webkit-background-clip:text;background-clip:text;color:transparent} .ping-chip small{font-size:11px;color:var(--dim)} /* calc — ماشین‌حساب سود نمایندگی */ .sig-calc{max-width:860px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center} .calc-controls label{display:block;font-size:13.5px;font-weight:600;color:var(--muted);margin:18px 0 10px} .calc-controls label b{color:var(--text);font-family:var(--font-disp);font-size:16px;margin-inline-start:8px} .calc-controls input[type=range]{width:100%;accent-color:#22D3EE;height:6px} .calc-result{background:var(--surface);border:1px solid var(--line-2);border-radius:22px;padding:30px;text-align:center} html[data-theme="light"] .calc-result{background:#FFFFFF} .calc-result small{font-size:12.5px;color:var(--dim);letter-spacing:1px;text-transform:uppercase;font-weight:700} .calc-result .calc-profit{display:block;font-family:var(--font-disp);font-weight:700;font-size:clamp(26px,3.5vw,38px);margin:10px 0 4px; background:var(--grad-txt);-webkit-background-clip:text;background-clip:text;color:transparent} .calc-result span{font-size:13px;color:var(--muted)} .calc-result .calc-year{display:block;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)} .calc-result .calc-year b{color:var(--green)} @media(max-width:820px){.sig-calc{grid-template-columns:1fr}} /* mail — تحویل ایمیل */ .sig-mail{max-width:620px;margin:0 auto;background:var(--surface);border:1px solid var(--line-2);border-radius:22px;overflow:hidden} html[data-theme="light"] .sig-mail{background:#FFFFFF} .mail-head{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--line);color:var(--dim);font-size:12.5px} .mail-head .icon{width:15px;height:15px;color:var(--cyan)} .mail-row{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line)} .mail-row .m-ava{width:38px;height:38px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px;flex:none} .mail-row .m-txt{flex:1;min-width:0} .mail-row .m-txt b{display:block;font-size:14px;color:var(--text)} .mail-row .m-txt small{font-size:12.5px;color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mail-row .m-tag{font-size:10.5px;font-weight:800;border-radius:999px;padding:3px 10px;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.4);color:var(--green);white-space:nowrap} .mail-foot{display:flex;justify-content:center;gap:10px;padding:16px;flex-wrap:wrap} .mail-foot span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--green); background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.3);border-radius:999px;padding:6px 13px;direction:ltr} .mail-foot span .icon{width:13px;height:13px} /* ============ CONTACT PAGE ============ */ .ct-channels{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .ct-card{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:28px 18px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); transition:transform .3s var(--ease),border-color .3s,background .3s;font-family:var(--font-body);color:var(--text)} html[data-theme="light"] .ct-card{background:#FFFFFF} button.ct-card{cursor:pointer} .ct-card:hover{transform:translateY(-5px);border-color:rgba(34,211,238,.45);background:var(--surface-2)} .ct-card b{font-size:15.5px;margin-top:6px} .ct-card>span:not(.dc-icon){font-size:13.5px;color:var(--cyan);font-weight:600} .ct-card small{font-size:12px;color:var(--dim)} .ct-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:26px;align-items:start} .ct-form-wrap{background:var(--surface);border:1px solid var(--line-2);border-radius:26px;padding:38px} html[data-theme="light"] .ct-form-wrap{background:#FFFFFF} .ct-form-wrap h2{font-family:var(--font-disp);font-size:24px;font-weight:700;margin-bottom:8px} .ct-form-wrap>p{color:var(--muted);font-size:14px;margin-bottom:26px} .ct-form-wrap label{display:block;font-size:13.5px;font-weight:600;color:var(--muted);margin-bottom:16px} .ct-form-wrap input,.ct-form-wrap textarea{display:block;width:100%;margin-top:8px;background:var(--surface); border:1px solid var(--line-2);border-radius:13px;padding:13px 16px;color:var(--text);font-size:14.5px; font-family:var(--font-body);outline:none;transition:border-color .2s,box-shadow .2s;resize:vertical} html[data-theme="light"] .ct-form-wrap input,html[data-theme="light"] .ct-form-wrap textarea{background:#F6F8FC} .ct-form-wrap input:focus,.ct-form-wrap textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(34,211,238,.1)} .ct-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .ct-result{margin-top:20px;border-radius:16px;padding:18px 20px;font-size:14px;animation:paneIn .3s var(--ease)} .ct-result.ok{background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.4)} .ct-result.ok b{color:var(--green);display:block;margin-bottom:6px} .ct-result.ok p{color:var(--muted);white-space:pre-line} .ct-result.err{background:rgba(255,95,87,.08);border:1px solid rgba(255,95,87,.4);color:#FF8A84} .ct-info{display:flex;flex-direction:column;gap:14px} .ct-info-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px 22px} html[data-theme="light"] .ct-info-card{background:#FFFFFF} .ct-info-card h4{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;margin-bottom:8px} .ct-info-card h4 .icon{width:16px;height:16px;color:var(--cyan)} .ct-info-card p{color:var(--muted);font-size:13.5px} @media(max-width:1020px){.ct-channels{grid-template-columns:repeat(2,1fr)}.ct-grid{grid-template-columns:1fr}} @media(max-width:640px){.ct-channels{grid-template-columns:1fr}.ct-form-wrap{padding:26px 20px}.ct-row{grid-template-columns:1fr}} /* ============ KNOWLEDGE BASE ============ */ .kb-search{position:relative;max-width:560px;margin:6px auto 0;display:flex;align-items:center;gap:10px; background:var(--surface);border:1px solid var(--line-2);border-radius:16px;padding:6px 18px;backdrop-filter:blur(12px); transition:border-color .25s,box-shadow .25s} html[data-theme="light"] .kb-search{background:#FFFFFF} .kb-search:focus-within{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(34,211,238,.12)} .kb-search .icon{width:19px;height:19px;color:var(--dim);flex:none} .kb-search input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-size:15px; padding:12px 4px;font-family:var(--font-body)} .kb-search input::placeholder{color:var(--dim)} .kb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .kb-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);padding:26px;transition:transform .3s var(--ease),border-color .3s,background .3s} html[data-theme="light"] .kb-card{background:#FFFFFF} .kb-card:hover{transform:translateY(-5px);border-color:rgba(59,130,246,.45);background:var(--surface-2)} .kb-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px} .kb-tag{font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--cyan); background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.3);border-radius:999px;padding:4px 12px;direction:ltr} .kb-min{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--dim)} .kb-min .icon{width:13px;height:13px} .kb-ico{width:44px;height:44px;border-radius:12px;background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.25); display:grid;place-items:center;color:var(--cyan);margin-bottom:14px} .kb-ico .icon{width:20px;height:20px} .kb-card h3{font-size:16.5px;font-weight:700;line-height:1.55;margin-bottom:9px} .kb-card p{color:var(--muted);font-size:13.5px;flex:1} .kb-card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)} .kb-card-foot time{font-size:12px;color:var(--dim)} .kb-card-foot .buy{display:inline-flex;align-items:center;gap:7px;color:var(--cyan);font-weight:600;font-size:13.5px;transition:gap .25s var(--ease)} .kb-card-foot .buy:hover{gap:12px} .kb-webinars{display:flex;flex-direction:column;gap:14px;max-width:860px;margin:0 auto} .kb-webinar{display:flex;align-items:center;gap:18px;background:var(--surface);border:1px solid var(--line); border-radius:20px;padding:20px 24px;transition:border-color .25s,transform .25s var(--ease)} html[data-theme="light"] .kb-webinar{background:#FFFFFF} .kb-webinar:hover{border-color:rgba(139,92,246,.45);transform:translateY(-3px)} .kb-web-txt{flex:1;min-width:0} .kb-web-txt b{display:block;font-size:15.5px;margin-bottom:4px} .kb-web-txt small{display:block;color:var(--muted);font-size:13px;margin-bottom:8px} .kb-web-meta{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#C4B5FD;font-weight:600} .kb-web-meta .icon{width:14px;height:14px} .kb-web-meta i{font-style:normal} .kb-webinar .btn{flex:none;padding:11px 20px;font-size:13.5px} .kb-docs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:980px;margin:0 auto} .kb-doc{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line); border-radius:18px;padding:18px 20px;transition:border-color .25s,transform .25s var(--ease)} html[data-theme="light"] .kb-doc{background:#FFFFFF} .kb-doc:hover{border-color:var(--cyan);transform:translateY(-3px)} .kb-doc b{flex:1;font-size:14.5px} .kb-doc small{color:var(--dim);font-size:12px;white-space:nowrap} .kb-nl{position:relative;display:flex;gap:10px;max-width:460px;margin:0 auto;flex-wrap:wrap;justify-content:center} .kb-nl input{flex:1;min-width:220px;background:rgba(5,7,15,.4);border:1px solid var(--line-2);border-radius:13px; padding:13px 18px;color:var(--text);font-size:14px;outline:none;font-family:var(--font-body);transition:border-color .2s} html[data-theme="light"] .kb-nl input{background:#FFFFFF} .kb-nl input:focus{border-color:var(--cyan)} .kb-nl-ok{width:100%;color:var(--green);font-weight:700;font-size:14px;margin-top:4px} @media(max-width:1020px){.kb-grid{grid-template-columns:repeat(2,1fr)}.kb-docs{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.kb-grid,.kb-docs{grid-template-columns:1fr} .kb-webinar{flex-direction:column;align-items:flex-start}.kb-webinar .btn{width:100%;justify-content:center}} /* ============ FREE TOOLS ============ */ .tool-search{margin:30px auto 0;max-width:620px;background:var(--surface);border:1px solid var(--line-2);border-radius:16px; padding:8px;display:flex;gap:8px;backdrop-filter:blur(12px);transition:border-color .25s,box-shadow .25s} html[data-theme="light"] .tool-search{background:#FFFFFF} .tool-search:focus-within{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(34,211,238,.12)} .tool-search>.icon{width:19px;height:19px;color:var(--dim);align-self:center;margin-inline-start:12px;flex:none} .tool-search input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--text);font-size:15px;padding:12px 6px;font-family:var(--font-body)} .tool-search input::placeholder{color:var(--dim)} .tool-search .btn{flex:none;white-space:nowrap} .tool-search .dr-spin{margin:0} .tool-hint{display:flex;justify-content:center;gap:9px 18px;flex-wrap:wrap;margin-top:22px} .tool-hint span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)} .tool-hint .icon{width:14px;height:14px;color:var(--cyan)} .tool-error{max-width:620px;margin:16px auto 0;background:rgba(255,95,87,.08);border:1px solid rgba(255,95,87,.4); color:#FF8A84;border-radius:14px;padding:14px 18px;font-size:14px;text-align:center} .tool-result-wrap{max-width:820px;margin:0 auto} @media(max-width:520px){.tool-search{flex-wrap:wrap}.tool-search input{width:100%}.tool-search .btn{width:100%;justify-content:center}} /* audit hero + gauge */ .audit-hero{display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center; background:var(--surface);border:1px solid var(--line-2);border-radius:26px;padding:36px 40px;margin-bottom:22px} html[data-theme="light"] .audit-hero{background:#FFFFFF} .audit-gauge{position:relative;width:150px;height:150px;flex:none} .audit-gauge svg{width:100%;height:100%;transform:rotate(-90deg)} .audit-gauge circle{fill:none;stroke-width:9;stroke-linecap:round} .audit-gauge .ag-bg{stroke:var(--surface-2)} .audit-gauge .ag-fg{transition:stroke-dashoffset 1s var(--ease)} .audit-gauge .ag-fg.good{stroke:var(--green)}.audit-gauge .ag-fg.mid{stroke:#FBBF24}.audit-gauge .ag-fg.bad{stroke:#FF6B6B} .ag-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center} .ag-center b{font-family:var(--font-disp);font-size:40px;font-weight:700;line-height:1} .audit-gauge.good .ag-center b{color:var(--green)}.audit-gauge.mid .ag-center b{color:#FBBF24}.audit-gauge.bad .ag-center b{color:#FF6B6B} .ag-center span{font-size:13px;font-weight:700;color:var(--dim);margin-top:2px} .audit-summary{min-width:0} .audit-summary h2{font-family:var(--font-disp);font-size:26px;font-weight:700;margin:12px 0 4px;direction:ltr;word-break:break-all} .au-title{color:var(--muted);font-size:14px;margin-bottom:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .au-facts{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:20px} .au-facts div{display:flex;flex-direction:column;gap:2px} .au-facts small{font-size:11.5px;color:var(--dim)} .au-facts b{font-size:14px;font-family:var(--font-disp)} .au-cta{display:flex;gap:12px;flex-wrap:wrap} @media(max-width:640px){.audit-hero{grid-template-columns:1fr;text-align:center;padding:28px 22px} .audit-gauge{margin:0 auto}.au-facts,.au-cta{justify-content:center}.audit-summary h2{font-size:22px}} /* category bars */ .audit-cats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:22px} .acat{display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line); border-radius:18px;padding:20px 12px;cursor:pointer;transition:transform .25s var(--ease),border-color .25s;font-family:var(--font-body)} html[data-theme="light"] .acat{background:#FFFFFF} .acat:hover{transform:translateY(-3px);border-color:var(--line-2)} .acat-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--surface-2);color:var(--muted)} .acat-ico.sm{width:32px;height:32px;border-radius:9px} .acat-ico .icon{width:19px;height:19px} .acat.good .acat-ico{background:rgba(52,211,153,.12);color:var(--green)} .acat.mid .acat-ico{background:rgba(251,191,36,.12);color:#FBBF24} .acat.bad .acat-ico{background:rgba(255,107,107,.12);color:#FF6B6B} .acat-name{font-size:12.5px;color:var(--muted);text-align:center;font-weight:600} .acat-bar{width:100%;height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden} .acat-bar i{display:block;height:100%;width:0;border-radius:99px;transition:width 1s var(--ease) .2s} .acat.good .acat-bar i{background:var(--green)}.acat.mid .acat-bar i{background:#FBBF24}.acat.bad .acat-bar i{background:#FF6B6B} .acat-score{font-family:var(--font-disp);font-size:20px;font-weight:700} @media(max-width:900px){.audit-cats{grid-template-columns:repeat(3,1fr)}} @media(max-width:520px){.audit-cats{grid-template-columns:repeat(2,1fr)}} /* vitals */ .audit-vitals{background:var(--surface);border:1px solid var(--line-2);border-radius:20px;padding:24px 26px;margin-bottom:22px} html[data-theme="light"] .audit-vitals{background:#FFFFFF} .audit-vitals h3{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;margin-bottom:16px} .audit-vitals h3 .icon{width:17px;height:17px;color:var(--cyan)} .vitals-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px} .vitem{text-align:center;background:var(--surface-2);border-radius:12px;padding:14px 8px} .vitem small{display:block;font-size:11px;color:var(--dim);margin-bottom:4px} .vitem b{font-family:var(--font-disp);font-size:16px} @media(max-width:640px){.vitals-row{grid-template-columns:repeat(2,1fr)}} /* detail groups */ .adetail-group{margin-bottom:22px} .adetail-group h3{display:flex;align-items:center;gap:11px;font-size:16px;font-weight:700;margin-bottom:14px} .adg-score{margin-inline-start:auto;font-family:var(--font-disp);font-size:15px;padding:3px 12px;border-radius:99px} .adg-score.good{background:rgba(52,211,153,.12);color:var(--green)} .adg-score.mid{background:rgba(251,191,36,.12);color:#FBBF24} .adg-score.bad{background:rgba(255,107,107,.12);color:#FF6B6B} .acheck-list{display:flex;flex-direction:column;gap:8px} .acheck{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line); border-radius:14px;padding:14px 18px} html[data-theme="light"] .acheck{background:#FFFFFF} .acheck .ac-mark{width:26px;height:26px;flex:none;border-radius:8px;display:grid;place-items:center;font-weight:800;font-size:14px} .acheck .ac-mark .icon{width:15px;height:15px} .acheck.pass .ac-mark{background:rgba(52,211,153,.14);color:var(--green)} .acheck.warn .ac-mark{background:rgba(251,191,36,.14);color:#FBBF24} .acheck.fail .ac-mark{background:rgba(255,107,107,.14);color:#FF6B6B} .ac-txt{flex:1;min-width:0} .ac-txt b{display:block;font-size:14px;font-weight:600} .ac-txt small{display:block;font-size:12px;color:var(--muted);line-height:1.6} .ac-val{font-family:'SFMono-Regular',Consolas,monospace;font-size:12px;color:var(--muted);background:var(--surface-2); border-radius:7px;padding:4px 9px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none} .ac-status{font-size:11px;font-weight:800;flex:none;text-transform:uppercase;letter-spacing:.5px} .acheck.pass .ac-status{color:var(--green)}.acheck.warn .ac-status{color:#FBBF24}.acheck.fail .ac-status{color:#FF6B6B} @media(max-width:640px){.ac-val{display:none}.acheck{padding:12px 14px;gap:11px}} /* whois + ip cards */ .wk-card,.ip-card{background:var(--surface);border:1px solid var(--line-2);border-radius:22px;padding:30px;animation:paneIn .3s var(--ease)} html[data-theme="light"] .wk-card,html[data-theme="light"] .ip-card{background:#FFFFFF} .wk-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line)} .wk-head b{font-family:var(--font-disp);font-size:22px;font-weight:700} .wk-head span{font-size:12px;color:var(--dim);font-family:monospace} .wk-badge{font-size:11px;font-weight:800;border-radius:99px;padding:4px 12px} .wk-badge.ok{background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.4);color:var(--green)} .wk-badge.no{background:rgba(255,95,87,.1);border:1px solid rgba(255,95,87,.35);color:#FF8A84} .wk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .wk-item{background:var(--surface-2);border-radius:12px;padding:13px 16px;min-width:0} .wk-item small{display:block;font-size:11.5px;color:var(--dim);margin-bottom:4px} .wk-item span{font-size:13.5px;font-weight:600;word-break:break-word} .wk-ns{margin-top:18px} .wk-ns small{display:block;font-size:11.5px;color:var(--dim);margin-bottom:8px} .wk-ns div{display:flex;flex-wrap:wrap;gap:8px} .wk-ns code{font-size:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:6px 11px;color:var(--cyan)} .wk-raw{margin-top:18px} .wk-raw summary{cursor:pointer;font-size:13px;color:var(--muted);font-weight:600} .wk-raw pre{margin-top:12px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:16px; font-size:11.5px;line-height:1.7;max-height:320px;overflow:auto;color:var(--muted);white-space:pre-wrap;word-break:break-word} .wk-buy{margin-top:20px;width:100%;justify-content:center;gap:8px} .ip-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px} .ip-flag{font-size:44px;line-height:1} .ip-head b{font-family:var(--font-disp);font-size:22px;font-weight:700;display:block} .ip-head small{color:var(--muted);font-size:13.5px} .ip-tags{display:flex;gap:8px;margin-inline-start:auto} .ip-tag{font-size:11px;font-weight:700;border-radius:99px;padding:4px 12px} .ip-tag.hosting{background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.35);color:#93C5FD} .ip-tag.proxy{background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.4);color:#FBBF24} .ip-tag.mobile{background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.35);color:#C4B5FD} .ip-map{border-radius:16px;overflow:hidden;border:1px solid var(--line);margin-bottom:20px;height:240px;background:var(--surface-2)} .ip-map iframe{width:100%;height:100%;border:0;filter:saturate(.9)} html:not([data-theme="light"]) .ip-map iframe{filter:invert(.92) hue-rotate(180deg) saturate(.7) brightness(.95)} @media(max-width:640px){.wk-grid{grid-template-columns:1fr}.wk-card,.ip-card{padding:22px}.ip-tags{margin-inline-start:0}} /* app builder steps */ .app-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .app-step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px 22px} html[data-theme="light"] .app-step{background:#FFFFFF} .app-num{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--grad);color:#fff; font-family:var(--font-disp);font-weight:700;font-size:19px;margin-bottom:16px;box-shadow:0 6px 20px rgba(34,211,238,.35)} .app-step b{display:block;font-size:15.5px;font-weight:700;margin-bottom:7px} .app-step small{font-size:13px;color:var(--muted);line-height:1.7} @media(max-width:900px){.app-steps{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.app-steps{grid-template-columns:1fr}} /* ============ ABOUT / LEGAL / 404 ============ */ .about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .ast{text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px 14px} html[data-theme="light"] .ast{background:#FFFFFF} .ast b{display:block;font-family:var(--font-disp);font-size:clamp(26px,4vw,38px);font-weight:700;direction:ltr; background:var(--grad-txt);-webkit-background-clip:text;background-clip:text;color:transparent} .ast span{color:var(--muted);font-size:13px;margin-top:6px;display:block} @media(max-width:640px){.about-stats{grid-template-columns:repeat(2,1fr)}} .about-story{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:960px;margin:0 auto} .story-block{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:32px} html[data-theme="light"] .story-block{background:#FFFFFF} .story-block h2{font-family:var(--font-disp);font-size:22px;font-weight:700;margin-bottom:12px} .story-block p{color:var(--muted);font-size:15px;line-height:2} @media(max-width:820px){.about-story{grid-template-columns:1fr}} .legal-doc{max-width:820px;margin:0 auto;background:var(--surface);border:1px solid var(--line-2);border-radius:26px;padding:44px} html[data-theme="light"] .legal-doc{background:#FFFFFF} .legal-sec{padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--line)} .legal-sec h2{display:flex;align-items:center;gap:13px;font-family:var(--font-disp);font-size:19px;font-weight:700;margin-bottom:12px} .legal-num{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:10px;background:var(--surface-2); color:var(--cyan);font-size:15px;font-weight:700} .legal-sec p{color:var(--muted);font-size:14.5px;line-height:2.1} .legal-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:8px;font-size:14px;color:var(--muted)} .legal-foot .icon{width:18px;height:18px;color:var(--cyan)} .legal-foot a{color:var(--cyan);font-weight:600} @media(max-width:640px){.legal-doc{padding:28px 20px}} .err-page .hero-sub-inner{text-align:center} .err-code{display:flex;align-items:center;justify-content:center;gap:18px;font-family:var(--font-disp); font-size:clamp(70px,14vw,130px);font-weight:700;line-height:1;margin-bottom:10px} .err-code>span{background:var(--grad-txt);-webkit-background-clip:text;background-clip:text;color:transparent} .err-orb{width:clamp(72px,13vw,120px);height:clamp(72px,13vw,120px);border-radius:50%;background:var(--surface); border:1px solid var(--line-2);display:grid;place-items:center;box-shadow:0 0 60px rgba(34,211,238,.2);animation:drift 8s var(--ease) infinite alternate} .err-orb .icon{width:44%;height:44%;color:var(--cyan)} .err-page .hero-ctas{justify-content:center} /* تگ «جدید» روی منوی ابزارها — متمایز و چشم‌گیر */ .free-badge.new-badge{background:linear-gradient(100deg,#34D399,#22D3EE);color:#04121A; box-shadow:0 0 0 0 rgba(52,211,153,.5);animation:newPulse 2.4s var(--ease) infinite} @keyframes newPulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}} @media(prefers-reduced-motion:reduce){.free-badge.new-badge{animation:none}} /* ============ AI SITE BUILDER ============ */ .aib{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:20px;align-items:stretch} .aib-chat,.aib-preview{background:var(--surface);border:1px solid var(--line-2);border-radius:22px;overflow:hidden;display:flex;flex-direction:column} html[data-theme="light"] .aib-chat,html[data-theme="light"] .aib-preview{background:#FFFFFF} .aib-chat{min-height:520px} .aib-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px;max-height:520px} .aib-msg{max-width:92%;padding:12px 15px;border-radius:16px;font-size:14px;line-height:1.75;white-space:pre-wrap;animation:paneIn .3s var(--ease)} .aib-msg.bot{background:var(--surface-2);border:1px solid var(--line);align-self:flex-start;border-start-start-radius:5px} .aib-msg.user{background:var(--grad);color:#fff;align-self:flex-end;border-start-end-radius:5px} .aib-msg.typing{color:var(--muted);font-style:italic} .aib-examples{display:flex;flex-direction:column;gap:8px;align-self:stretch;margin-top:4px} .aib-chip{text-align:start;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:11px 14px; font-size:13px;color:var(--muted);transition:.2s;font-family:var(--font-body)} .aib-chip:hover{border-color:var(--cyan);color:var(--text);transform:translateX(calc(var(--rtl,1)*-3px))} html[dir="ltr"] .aib-chip:hover{transform:translateX(3px)} .aib-input{display:flex;gap:8px;padding:14px;border-top:1px solid var(--line)} .aib-input textarea{flex:1;background:var(--surface-2);border:1px solid var(--line-2);border-radius:13px;padding:12px 15px; color:var(--text);font-size:14px;outline:none;font-family:var(--font-body);resize:none;line-height:1.6;transition:border-color .2s} .aib-input textarea:focus{border-color:var(--cyan)} .aib-input button{flex:none;width:46px;align-self:flex-end;justify-content:center} .aib-hint{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 16px 14px;font-size:12px;color:var(--dim)} .aib-pro{display:inline-flex;align-items:center;gap:7px;cursor:pointer} .aib-pro input{accent-color:var(--cyan)} .aib-left{color:#FBBF24} .aib-preview{min-height:520px} .aib-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface-2)} .aib-dots{display:flex;gap:6px} .aib-dots i{width:11px;height:11px;border-radius:50%;background:var(--line-2)} .aib-dots i:nth-child(1){background:#FF5F57}.aib-dots i:nth-child(2){background:#FEBC2E}.aib-dots i:nth-child(3){background:#28C840} .aib-devices{margin-inline:auto;display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:3px} .aib-dev{background:none;border:none;border-radius:8px;padding:6px 10px;color:var(--muted);transition:.2s} .aib-dev.active{background:var(--grad);color:#fff} .aib-dev .icon{width:16px;height:16px} .aib-actions{display:flex;gap:6px} .aib-icon{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:7px;color:var(--muted);transition:.2s} .aib-icon:hover:not(:disabled){color:var(--cyan);border-color:var(--cyan)} .aib-icon:disabled{opacity:.4} .aib-icon .icon{width:15px;height:15px} #aib-download .icon{transform:rotate(90deg)} .aib-frame-wrap{position:relative;flex:1;background:#fff;display:flex;justify-content:center;min-height:460px} html[data-theme="light"] .aib-frame-wrap{background:#F4F5F8} .aib-frame-wrap iframe{width:100%;max-width:100%;height:100%;min-height:460px;border:0;background:#fff;transition:max-width .3s var(--ease)} .aib-empty,.aib-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px; background:var(--surface);color:var(--muted);text-align:center;padding:30px} html[data-theme="light"] .aib-empty,html[data-theme="light"] .aib-loading{background:#FFFFFF} .aib-empty p,.aib-loading p{font-size:14px;max-width:280px} .aib-orb{width:70px;height:70px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line-2); display:grid;place-items:center;color:var(--cyan);box-shadow:0 0 50px rgba(34,211,238,.25);animation:drift 7s var(--ease) infinite alternate} .aib-orb .icon{width:30px;height:30px} .aib-loading .dr-spin{width:34px;height:34px;border-width:3px} @media(max-width:900px){.aib{grid-template-columns:1fr}.aib-chat{min-height:auto}.aib-messages{max-height:340px}} /* deploy bar */ .aib-deploy{margin-top:22px;background:linear-gradient(140deg,rgba(59,130,246,.12),rgba(34,211,238,.07) 55%,rgba(139,92,246,.1)); border:1px solid var(--line-2);border-radius:24px;padding:30px} .aib-deploy-head{display:flex;align-items:center;gap:16px;margin-bottom:22px} .aib-deploy-head h3{font-family:var(--font-disp);font-size:20px;font-weight:700} .aib-deploy-head p{color:var(--muted);font-size:14px;margin-top:2px} .aib-deploy-grid{display:grid;grid-template-columns:1.2fr 1fr auto;gap:16px;align-items:end} .aib-field{display:flex;flex-direction:column;gap:7px} .aib-field>span{font-size:13px;font-weight:600;color:var(--muted)} .aib-field input,.aib-field select{background:var(--surface);border:1px solid var(--line-2);border-radius:12px; padding:13px 15px;color:var(--text);font-size:14px;outline:none;font-family:var(--font-body);transition:border-color .2s;width:100%} .aib-field input:focus,.aib-field select:focus{border-color:var(--cyan)} .aib-field small{font-size:12px;min-height:16px} .aib-field small.ok{color:var(--green)}.aib-field small.no{color:#FF8A84} .aib-total{text-align:center;background:var(--surface);border:1px solid var(--line-2);border-radius:16px;padding:12px 22px;min-width:150px} .aib-total>span{display:block;font-size:12px;color:var(--dim)} .aib-total b{display:block;font-family:var(--font-disp);font-size:22px;font-weight:700;color:var(--text);margin:2px 0;white-space:nowrap} .aib-total small{font-size:11px;color:var(--dim)} .aib-deploy-cta{margin-top:22px;display:flex;flex-direction:column;align-items:center;gap:12px} .aib-deploy-cta .btn{padding:15px 40px;font-size:16px} .aib-deploy-ref{font-size:13px;color:var(--green);background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3); border-radius:99px;padding:8px 18px} @media(max-width:760px){.aib-deploy-grid{grid-template-columns:1fr}.aib-total{min-width:0}} /* ============ DNS & NETWORK LOOKUP ============ */ .lk-form{margin:30px auto 0;max-width:680px;display:flex;flex-direction:column;gap:10px} .lk-select-wrap{position:relative;display:flex;align-items:center} .lk-select-ico{position:absolute;inset-inline-start:14px;width:18px;height:18px;color:var(--cyan);pointer-events:none;z-index:1} .lk-select-chev{position:absolute;inset-inline-end:14px;width:16px;height:16px;color:var(--dim);pointer-events:none} .lk-select{width:100%;appearance:none;background:var(--surface);border:1px solid var(--line-2);border-radius:14px; color:var(--text);font-family:var(--font-body);font-size:15px;font-weight:600;padding:14px 42px;cursor:pointer;transition:border-color .25s,box-shadow .25s} html[data-theme="light"] .lk-select{background:#FFFFFF} .lk-select:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(34,211,238,.12)} .lk-select optgroup{background:var(--bg2);color:var(--muted);font-weight:600} .lk-select option{background:var(--bg2);color:var(--text);font-weight:500} .lk-input-wrap{display:flex;gap:8px;background:var(--surface);border:1px solid var(--line-2);border-radius:16px;padding:8px; transition:border-color .25s,box-shadow .25s} html[data-theme="light"] .lk-input-wrap{background:#FFFFFF} .lk-input-wrap:focus-within{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(34,211,238,.12)} .lk-input-wrap input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--text);font-size:15px;padding:12px 14px;font-family:var(--font-body)} .lk-input-wrap input::placeholder{color:var(--dim)} .lk-input-wrap .btn{flex:none;white-space:nowrap} .lk-input-wrap .dr-spin{margin:0} @media(max-width:520px){.lk-input-wrap{flex-wrap:wrap}.lk-input-wrap input{width:100%}.lk-input-wrap .btn{width:100%;justify-content:center}} .lk-result{background:var(--surface);border:1px solid var(--line-2);border-radius:22px;padding:26px 28px;animation:lkin .35s var(--ease)} html[data-theme="light"] .lk-result{background:#FFFFFF} @keyframes lkin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .lkr-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)} .lkr-head b{font-size:19px;font-weight:700;font-family:var(--font-disp)} .lkr-head span{font-size:12.5px;color:var(--muted);background:var(--surface-2);padding:3px 10px;border-radius:99px} .lkr-empty{text-align:center;color:var(--muted);padding:26px 0;font-size:15px} .lkr-tablewrap{overflow-x:auto;border-radius:12px} .lkr-table{width:100%;border-collapse:collapse;font-size:14px} .lkr-table th{text-align:start;color:var(--dim);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:8px 12px;white-space:nowrap} .lkr-table td{padding:11px 12px;border-top:1px solid var(--line);vertical-align:top} .lkr-type{font-weight:700;color:var(--cyan);white-space:nowrap} .lkr-val{word-break:break-all;font-family:var(--font-body)} .lkr-ttl{color:var(--muted);white-space:nowrap;text-align:end} .lkr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:4px} .lkr-item{background:var(--surface-2);border-radius:12px;padding:12px 14px} .lkr-item small{display:block;color:var(--dim);font-size:12px;margin-bottom:5px} .lkr-item span{font-size:14.5px;font-weight:600;word-break:break-all} .lkr-ns{margin-top:16px} .lkr-ns small{display:block;color:var(--dim);font-size:12px;margin-bottom:8px} .lkr-ns div{display:flex;flex-wrap:wrap;gap:8px} .lkr-ns code{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-size:12.5px;word-break:break-all} .lkr-ssl{border-radius:16px} .lkr-ssl-top{display:flex;align-items:baseline;gap:10px} .lkr-ssl-badge{font-size:13px;font-weight:700;padding:5px 14px;border-radius:99px} .lkr-ssl.good .lkr-ssl-badge{color:#34D399;background:rgba(52,211,153,.12)} .lkr-ssl.mid .lkr-ssl-badge{color:#FBBF24;background:rgba(251,191,36,.12)} .lkr-ssl.bad .lkr-ssl-badge{color:#FF8A84;background:rgba(255,95,87,.12)} .lkr-ssl-top b{font-size:26px;font-family:var(--font-disp)} .lkr-ssl-top small{color:var(--muted);font-size:12.5px} .lkr-yn{font-weight:700;font-size:13px;padding:3px 12px;border-radius:99px} .lkr-yn.y{color:#34D399;background:rgba(52,211,153,.12)} .lkr-yn.n{color:var(--dim);background:var(--surface-2)} .lkr-pings{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .lkr-stat{background:var(--surface-2);border-radius:14px;padding:16px 12px;text-align:center} .lkr-stat b{display:block;font-size:24px;font-family:var(--font-disp);font-weight:700} .lkr-stat small{color:var(--dim);font-size:11.5px} .lkr-pings.good .lkr-stat b{color:#34D399}.lkr-pings.mid .lkr-stat b{color:#FBBF24}.lkr-pings.bad .lkr-stat b{color:#FF8A84} @media(max-width:520px){.lkr-pings{grid-template-columns:repeat(2,1fr)}} .lkr-ports{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px} .lkr-port{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center} .lkr-port b{display:block;font-size:18px;font-family:var(--font-disp)} .lkr-port small{display:block;color:var(--muted);font-size:11.5px;margin:2px 0 7px} .lkr-port span{font-size:11px;font-weight:700;padding:2px 9px;border-radius:99px;display:inline-block} .lkr-port.open{border-color:rgba(52,211,153,.35)} .lkr-port.open span{color:#34D399;background:rgba(52,211,153,.12)} .lkr-port.closed span{color:var(--dim);background:var(--surface)} .lkr-port.filt span{color:#FBBF24;background:rgba(251,191,36,.12)} .lkr-port.skip{opacity:.5;border-style:dashed} .lkr-port.skip span{color:var(--dim);background:var(--surface)} .lkr-note{margin-top:14px;font-size:12.5px;line-height:1.9;color:#FBBF24; background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.28); border-radius:11px;padding:10px 14px} /* ورودی پورت دلخواه (فقط ابزار اسکن پورت) */ .lk-ports-in{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px} .lk-ports-in label{font-size:13px;color:var(--muted);flex:none} .lk-ports-in input{flex:1;min-width:190px;background:var(--surface-2);border:1px solid var(--line); border-radius:11px;color:var(--text);font-family:var(--font-body);font-size:13.5px; padding:10px 13px;outline:none;transition:border-color .18s} .lk-ports-in input:focus{border-color:var(--cyan)} .lk-ports-in input::placeholder{color:var(--dim)} .lk-ports-hint{flex-basis:100%;font-size:12px;color:var(--dim);line-height:1.8} .lkr-nodes{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px} .lkr-node{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:14px} .lkr-node.no{opacity:.6} .lkr-node-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px} .lkr-node-h b{font-size:14px;font-weight:700} .lkr-node-h small{color:var(--dim);font-size:11px;border:1px solid var(--line);border-radius:6px;padding:1px 6px} .lkr-node-v{font-size:13px;word-break:break-all;color:var(--text)} .lkr-actions{display:flex;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)} .lkr-act{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted); border-radius:10px;padding:8px 14px;font-size:13px;font-family:var(--font-body);cursor:pointer;transition:color .2s,border-color .2s} .lkr-act:hover{color:var(--text);border-color:var(--cyan)} .lkr-act .icon{width:15px;height:15px} .lk-seo .lk-prose h2,.lk-faq h2{font-size:22px;font-family:var(--font-disp);margin-bottom:14px} .lk-prose p{color:var(--muted);line-height:2;font-size:15px;margin-bottom:30px} .lk-faq{margin-top:14px} .lk-faq-item{border:1px solid var(--line-2);border-radius:14px;padding:2px 18px;margin-bottom:12px;background:var(--surface)} html[data-theme="light"] .lk-faq-item{background:#FFFFFF} .lk-faq-item summary{cursor:pointer;font-weight:600;font-size:15px;padding:15px 0;list-style:none;display:flex;justify-content:space-between;align-items:center} .lk-faq-item summary::-webkit-details-marker{display:none} .lk-faq-item summary::after{content:"+";color:var(--cyan);font-size:20px;font-weight:400;margin-inline-start:12px} .lk-faq-item[open] summary::after{content:"\2013"} .lk-faq-item p{color:var(--muted);line-height:1.9;font-size:14.5px;padding:0 0 16px} .lk-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap; background:linear-gradient(120deg,rgba(34,211,238,.08),rgba(139,92,246,.08));border:1px solid var(--line-2); border-radius:22px;padding:28px 34px} .lk-cta h3{font-size:20px;font-family:var(--font-disp);margin-bottom:6px} .lk-cta p{color:var(--muted);font-size:14.5px;max-width:520px} .lk-cta .btn .icon{width:17px;height:17px} @media(max-width:640px){.lk-cta{flex-direction:column;align-items:flex-start}.lk-cta .btn{width:100%;justify-content:center}} .lk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} .lk-tile{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line-2);border-radius:14px; padding:14px 16px;font-size:14px;font-weight:600;color:var(--text);transition:border-color .2s,transform .2s} html[data-theme="light"] .lk-tile{background:#FFFFFF} .lk-tile:hover{border-color:var(--cyan);transform:translateY(-2px)} .lk-tile .icon{width:18px;height:18px;color:var(--cyan);flex:none} /* ============ TOOLBOX MEGA MENU ============ */ .tools-mega{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:34px} .tmega-col{display:flex;flex-direction:column;gap:22px;min-width:0} .tmega-group{min-width:0} .tmega-h{display:block;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase; color:var(--dim);margin-bottom:12px;padding-inline-start:4px} html[dir="rtl"] .tmega-h{letter-spacing:0} /* لینک کامل (آیکون + عنوان + توضیح) — ستون عمومی */ .tmega-link{display:flex;align-items:flex-start;gap:12px;padding:9px 10px;border-radius:13px;border:1px solid transparent;transition:.18s} .tmega-link:hover{background:var(--surface-2);border-color:var(--line)} .tmega-ic{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center; background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.22);color:var(--green)} .tmega-ic .icon{width:17px;height:17px} .tmega-tx{display:flex;flex-direction:column;gap:2px;min-width:0} .tmega-tx b{font-size:13.5px;font-weight:600;color:var(--text)} .tmega-tx small{font-size:12px;color:var(--dim);line-height:1.5} /* چیپ فشرده (آیکون + نام) — ستون رکوردها و شبکه */ .tmega-compact{display:grid;grid-template-columns:1fr 1fr;gap:6px} .tmega-chip{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:11px;border:1px solid transparent; font-size:13px;font-weight:600;color:var(--text);transition:.18s;min-width:0} .tmega-chip:hover{background:var(--surface-2);border-color:var(--cyan)} .tmega-chip .icon{width:16px;height:16px;flex:none;color:var(--cyan)} .tmega-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tmega-all{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding-inline-start:4px; font-size:13px;font-weight:600;color:var(--cyan)} .tmega-all .icon{width:14px;height:14px} html[dir="rtl"] .tmega-all .dir{transform:scaleX(-1)} @media(max-width:960px){.tools-mega{grid-template-columns:1fr 1fr}} /* زیرعنوان گروه در آکاردئون موبایل */ .acc-group{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--dim);margin:14px 4px 6px} html[dir="rtl"] .acc-group{letter-spacing:0} .acc-in>.acc-group:first-child{margin-top:2px} /* ============ SOLUTION PAGES ============ */ .sol-hero{position:relative;overflow:hidden;padding-bottom:60px} .sol-hero-glow{position:absolute;inset:0;pointer-events:none;z-index:0; background:radial-gradient(60% 70% at 78% 20%,rgba(34,211,238,.16),transparent 70%)} .sol-cyan .sol-hero-glow{background:radial-gradient(60% 70% at 78% 20%,rgba(34,211,238,.16),transparent 70%)} .sol-violet .sol-hero-glow{background:radial-gradient(60% 70% at 78% 20%,rgba(139,92,246,.18),transparent 70%)} .sol-green .sol-hero-glow{background:radial-gradient(60% 70% at 78% 20%,rgba(52,211,153,.16),transparent 70%)} .sol-amber .sol-hero-glow{background:radial-gradient(60% 70% at 78% 20%,rgba(251,191,36,.15),transparent 70%)} .sol-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.3fr .9fr;gap:48px;align-items:center} .sol-hero-txt h1{font-size:clamp(30px,4vw,50px);line-height:1.12;margin:18px 0} .sol-hero-txt .lead{max-width:560px} .sol-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px} .sol-hero-cta .btn .icon.dir{width:16px;height:16px} html[dir="rtl"] .sol-hero-cta .dir{transform:scaleX(-1)} .sol-hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px} .sol-stat{background:var(--surface);border:1px solid var(--line-2);border-radius:18px;padding:20px 18px;text-align:center} html[data-theme="light"] .sol-stat{background:#fff} .sol-stat b{display:block;font-size:30px;font-family:var(--font-disp);font-weight:800;color:var(--cyan);line-height:1} .sol-violet .sol-stat b{color:#A78BFA}.sol-green .sol-stat b{color:#34D399}.sol-amber .sol-stat b{color:#FBBF24} .sol-stat span{display:block;font-size:12.5px;color:var(--muted);margin-top:8px} @media(max-width:900px){.sol-hero-inner{grid-template-columns:1fr;gap:32px}.sol-hero-stats{max-width:420px}} @media(max-width:460px){.sol-hero-stats{grid-template-columns:1fr}} .sol-trust{border-block:1px solid var(--line);background:var(--surface)} html[data-theme="light"] .sol-trust{background:#fff} .sol-trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;padding:20px 0} .sol-trust-item{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--muted)} .sol-trust-item .icon{width:17px;height:17px;color:var(--cyan)} .kicker{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan);margin-bottom:12px} html[dir="rtl"] .kicker{letter-spacing:0} .sol-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .sol-feat{background:var(--surface);border:1px solid var(--line-2);border-radius:20px;padding:28px 26px;transition:border-color .25s,transform .25s} html[data-theme="light"] .sol-feat{background:#fff} .sol-feat:hover{border-color:var(--cyan);transform:translateY(-3px)} .sol-feat-ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:18px; background:linear-gradient(135deg,rgba(34,211,238,.16),rgba(139,92,246,.16));border:1px solid var(--line-2)} .sol-feat-ic .icon{width:24px;height:24px;color:var(--cyan)} .sol-feat h3{font-size:17px;font-family:var(--font-disp);margin-bottom:9px} .sol-feat p{font-size:14px;color:var(--muted);line-height:1.75} @media(max-width:860px){.sol-feat-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.sol-feat-grid{grid-template-columns:1fr}} .sol-steps-sec{background:var(--surface);border-block:1px solid var(--line)} html[data-theme="light"] .sol-steps-sec{background:#fbfcfe} .sol-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s} .sol-step{position:relative;padding:26px 24px;border-radius:18px;border:1px solid var(--line-2);background:var(--bg)} html[data-theme="light"] .sol-step{background:#fff} .sol-step-n{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;font-family:var(--font-disp); font-weight:800;font-size:17px;color:#04121A;background:linear-gradient(135deg,#22D3EE,#8B5CF6);margin-bottom:16px} .sol-step h3{font-size:16px;margin-bottom:8px} .sol-step p{font-size:13.5px;color:var(--muted);line-height:1.75} @media(max-width:760px){.sol-steps{grid-template-columns:1fr}} .sol-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;align-items:stretch} .sol-plan{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-2); border-radius:22px;padding:30px 26px;transition:border-color .25s,transform .25s} html[data-theme="light"] .sol-plan{background:#fff} .sol-plan:hover{transform:translateY(-3px)} .sol-plan.featured{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan),0 24px 60px rgba(34,211,238,.12)} .sol-plan-tag{position:absolute;top:-12px;inset-inline-start:26px;background:linear-gradient(100deg,#22D3EE,#8B5CF6); color:#04121A;font-size:11.5px;font-weight:800;padding:5px 14px;border-radius:99px} .sol-plan h3{font-size:20px;font-family:var(--font-disp)} .sol-plan-tag2{font-size:13px;color:var(--muted);margin-top:5px} .sol-plan-price{margin:18px 0 20px;display:flex;align-items:baseline;gap:6px} .sol-plan-price b{font-size:32px;font-family:var(--font-disp);font-weight:800} .sol-plan-price span{font-size:13px;color:var(--dim)} .sol-plan-feats{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0 0 24px;flex:1} .sol-plan-feats li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--muted);line-height:1.6} .sol-plan-feats .icon{width:17px;height:17px;color:var(--green);flex:none;margin-top:2px} .sol-plan .btn{width:100%;justify-content:center} .sol-plans-note{text-align:center;color:var(--dim);font-size:13px;margin-top:22px} .sol-compare{background:var(--surface);border:1px solid var(--line-2);border-radius:20px;overflow:hidden} html[data-theme="light"] .sol-compare{background:#fff} .sol-compare table{width:100%;border-collapse:collapse;font-size:14px} .sol-compare th{text-align:start;padding:16px 20px;font-size:13px;color:var(--dim);font-weight:700;border-bottom:1px solid var(--line)} .sol-compare th.us{color:var(--cyan)} .sol-compare td{padding:14px 20px;border-bottom:1px solid var(--line);color:var(--muted)} .sol-compare tr:last-child td{border-bottom:none} .sol-compare td.us{color:var(--text);font-weight:600} .sol-compare td.us .ok{width:16px;height:16px;color:var(--green);margin-inline-end:7px;vertical-align:-2px} .sol-compare td:first-child{font-weight:600;color:var(--text)} .sol-cta{position:relative;overflow:hidden;text-align:center;border-radius:28px;padding:56px 40px; background:linear-gradient(130deg,rgba(34,211,238,.1),rgba(139,92,246,.12));border:1px solid var(--line-2)} .sol-cta-glow{position:absolute;inset:0;background:radial-gradient(50% 120% at 50% 0%,rgba(34,211,238,.2),transparent 60%);pointer-events:none} .sol-cta h2{position:relative;font-size:clamp(24px,3vw,34px);font-family:var(--font-disp);margin-bottom:14px} .sol-cta p{position:relative;color:var(--muted);max-width:560px;margin:0 auto 28px;font-size:15px;line-height:1.8} .sol-cta-btns{position:relative;display:flex;gap:12px;justify-content:center;flex-wrap:wrap} html[dir="rtl"] .sol-cta .dir{transform:scaleX(-1)} /* کارت‌های بنتوی لینک‌دار (راهکارهای دارای صفحه) */ .bcard-link{cursor:pointer;text-decoration:none;color:inherit;display:block} .bcard-more{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:13px;font-weight:700;color:var(--cyan);opacity:0;transform:translateY(4px);transition:.25s} .bcard-more .icon{width:14px;height:14px} html[dir="rtl"] .bcard-more .dir{transform:scaleX(-1)} .bcard-link:hover .bcard-more{opacity:1;transform:none} .bcard-link:hover{border-color:var(--cyan)} @media(hover:none){.bcard-more{opacity:1;transform:none}} /* بخش دانلود (صفحه‌ی ابزار ریموت) */ .sol-dl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .sol-dl{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:26px 18px;border-radius:18px; background:var(--surface);border:1px solid var(--line-2);transition:border-color .22s,transform .22s} html[data-theme="light"] .sol-dl{background:#fff} .sol-dl:hover{border-color:var(--cyan);transform:translateY(-3px)} .sol-dl-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:8px; background:linear-gradient(135deg,rgba(34,211,238,.16),rgba(139,92,246,.16));border:1px solid var(--line-2)} .sol-dl-ic .icon{width:24px;height:24px;color:var(--cyan)} .sol-dl b{font-size:15px} .sol-dl small{font-size:12px;color:var(--dim);line-height:1.5;min-height:32px} .sol-dl-btn{margin-top:8px;font-size:12.5px;font-weight:700;color:var(--cyan);border:1px solid var(--cyan);border-radius:99px;padding:6px 16px} .sol-dl:hover .sol-dl-btn{background:var(--cyan);color:#04121A} @media(max-width:820px){.sol-dl-grid{grid-template-columns:1fr 1fr}} /* ============ HUB TOOLS (DNS report + network tabs) ============ */ .hub-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px} .hub-tab{font-family:var(--font-body);font-size:13.5px;font-weight:600;color:var(--muted);background:var(--surface); border:1px solid var(--line-2);border-radius:99px;padding:9px 18px;cursor:pointer;transition:.18s} html[data-theme="light"] .hub-tab{background:#fff} .hub-tab:hover{color:var(--text);border-color:var(--cyan)} .hub-tab.active{color:#04121A;background:linear-gradient(100deg,#22D3EE,#8B5CF6);border-color:transparent} .hub-report-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px} .hub-report-head b{font-size:22px;font-family:var(--font-disp);font-weight:800} .hub-report-head span{font-size:12.5px;color:var(--muted);background:var(--surface-2);padding:3px 12px;border-radius:99px} .hub-sec{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)} .hub-sec:first-of-type{border-top:none} /* بخش پیشنهاد مرتبط در صفحه‌ی محصول (مثل ایمیل تراکنشی) */ .hp-band{position:relative;overflow:hidden;display:grid;grid-template-columns:1.6fr 1fr auto;gap:28px;align-items:center; background:linear-gradient(120deg,rgba(34,211,238,.08),rgba(139,92,246,.1));border:1px solid var(--line-2);border-radius:24px;padding:32px 34px} .hp-band-glow{position:absolute;inset:0;background:radial-gradient(50% 130% at 12% 0%,rgba(34,211,238,.16),transparent 60%);pointer-events:none} .hp-band-main{position:relative;display:flex;gap:16px;align-items:flex-start} .hp-band-ic{width:52px;height:52px;flex:none;border-radius:15px;display:grid;place-items:center; background:linear-gradient(135deg,rgba(34,211,238,.2),rgba(139,92,246,.2));border:1px solid var(--line-2)} .hp-band-ic .icon{width:24px;height:24px;color:var(--cyan)} .hp-band-badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.05em;color:#04121A; background:linear-gradient(100deg,#22D3EE,#8B5CF6);padding:3px 11px;border-radius:99px;margin-bottom:8px} .hp-band h3{font-size:20px;font-family:var(--font-disp);margin-bottom:7px} .hp-band-main p{color:var(--muted);font-size:14px;line-height:1.75} .hp-band-points{position:relative;list-style:none;display:flex;flex-direction:column;gap:9px} .hp-band-points li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--muted);line-height:1.5} .hp-band-points .icon{width:16px;height:16px;color:var(--green);flex:none;margin-top:2px} .hp-band>.btn{position:relative;white-space:nowrap} html[dir="rtl"] .hp-band .dir{transform:scaleX(-1)} @media(max-width:900px){.hp-band{grid-template-columns:1fr;gap:22px}.hp-band>.btn{width:100%;justify-content:center}} /* نوار پیشرفت سایت‌ساز هوش مصنوعی */ .aib-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px;text-align:center} .aib-orb.building{animation:aibpulse 1.4s ease-in-out infinite} @keyframes aibpulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.12);opacity:1}} .aib-progress{width:min(320px,80%);height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line)} .aib-progress span{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(100deg,#22D3EE,#8B5CF6);transition:width .42s cubic-bezier(.4,0,.2,1)} .aib-progress-pct{font-family:var(--font-disp);font-weight:800;font-size:18px;color:var(--cyan);letter-spacing:.02em} @media(prefers-reduced-motion:reduce){.aib-orb.building{animation:none}.aib-progress span{transition:none}} /* ============ BLOG ============ */ .blog-hero-search{display:flex;gap:8px;margin:28px auto 0;max-width:560px;background:var(--surface);border:1px solid var(--line-2);border-radius:16px;padding:8px;transition:border-color .25s,box-shadow .25s} html[data-theme="light"] .blog-hero-search{background:#fff} .blog-hero-search:focus-within{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(34,211,238,.12)} .blog-hero-search>.icon{width:18px;height:18px;color:var(--dim);align-self:center;margin-inline-start:12px;flex:none} .blog-hero-search input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--text);font-size:15px;padding:11px 6px;font-family:var(--font-body)} .blog-hero-search .btn{flex:none} @media(max-width:520px){.blog-hero-search{flex-wrap:wrap}.blog-hero-search input{width:100%}.blog-hero-search .btn{width:100%;justify-content:center}} .blog-chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center} .blog-chip{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--line-2);border-radius:99px;padding:8px 16px;transition:.2s} html[data-theme="light"] .blog-chip{background:#fff} .blog-chip:hover{color:var(--text);border-color:var(--cyan)} .blog-chip.active{color:#04121A;background:linear-gradient(100deg,#22D3EE,#8B5CF6);border-color:transparent} .blog-chip .icon{width:15px;height:15px} .blog-layout{display:grid;grid-template-columns:1fr 320px;gap:34px;align-items:start} @media(max-width:960px){.blog-layout{grid-template-columns:1fr}} .blog-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .blog-grid-3{grid-template-columns:repeat(3,1fr)} @media(max-width:680px){.blog-grid,.blog-grid-3{grid-template-columns:1fr}} @media(max-width:960px)and(min-width:681px){.blog-grid-3{grid-template-columns:1fr 1fr}} .blog-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-2);border-radius:18px;overflow:hidden;transition:border-color .25s,transform .25s} html[data-theme="light"] .blog-card{background:#fff} .blog-card:hover{border-color:var(--cyan);transform:translateY(-4px)} .blog-card-cover{position:relative;display:grid;place-items:center;height:150px;overflow:hidden} .blog-card-cover::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,rgba(255,255,255,.18),transparent 60%)} .blog-card-cover .icon{width:42px;height:42px;color:rgba(255,255,255,.92);position:relative;z-index:1} .blog-card-cover.has-img{background:var(--surface-2)} .blog-card-cover.has-img::after{background:linear-gradient(to top,rgba(3,6,14,.5),transparent 55%)} .blog-card-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)} .blog-card:hover .blog-card-cover img{transform:scale(1.06)} .bs-recent-cover{overflow:hidden;position:relative} .bs-recent-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .blog-card-cat{position:absolute;bottom:10px;inset-inline-start:12px;z-index:1;font-size:11px;font-weight:700;color:#fff;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);padding:4px 11px;border-radius:99px} .blog-card-body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1} .blog-card-meta{display:flex;gap:8px;font-size:12px;color:var(--dim);margin-bottom:9px} .blog-card h2{font-size:16.5px;font-family:var(--font-disp);line-height:1.45;margin-bottom:9px} .blog-card h2 a{color:var(--text);transition:color .2s} .blog-card:hover h2 a{color:var(--cyan)} .blog-card p{font-size:13.5px;color:var(--muted);line-height:1.75;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .blog-card-more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:13px;font-weight:700;color:var(--cyan)} .blog-card-more .icon{width:14px;height:14px} html[dir="rtl"] .blog-card-more .dir,html[dir="rtl"] .blog-card-cat~*{} html[dir="rtl"] .dir{} .blog-pager{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:34px} .blog-pager a{min-width:40px;text-align:center;padding:9px 13px;border-radius:11px;border:1px solid var(--line-2);background:var(--surface);color:var(--muted);font-size:14px;font-weight:600;transition:.2s} html[data-theme="light"] .blog-pager a{background:#fff} .blog-pager a:hover{border-color:var(--cyan);color:var(--text)} .blog-pager a.active{background:linear-gradient(100deg,#22D3EE,#8B5CF6);color:#04121A;border-color:transparent} .blog-empty{text-align:center;padding:60px 20px;color:var(--muted)} .blog-empty .icon{width:40px;height:40px;color:var(--dim);margin-bottom:14px} .blog-empty p{margin-bottom:18px} /* sidebar */ .blog-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:96px} @media(max-width:960px){.blog-side{position:static}} .bs-card{background:var(--surface);border:1px solid var(--line-2);border-radius:16px;padding:18px} html[data-theme="light"] .bs-card{background:#fff} .bs-title{display:flex;align-items:center;gap:8px;font-size:14px;font-family:var(--font-disp);margin-bottom:14px} .bs-title .icon{width:16px;height:16px;color:var(--cyan)} .bs-search{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:4px 12px} .bs-search .icon{width:16px;height:16px;color:var(--dim);flex:none} .bs-search input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--text);font-size:14px;padding:9px 4px;font-family:var(--font-body)} .bs-cats{list-style:none;display:flex;flex-direction:column;gap:2px} .bs-cats a{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border-radius:10px;transition:background .2s} .bs-cats a:hover{background:var(--surface-2)} .bs-cats a span{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted)} .bs-cats a span .icon{width:16px;height:16px} .bs-cats a b{font-size:12px;color:var(--dim);background:var(--surface-2);border-radius:99px;padding:2px 9px} .bs-recent{list-style:none;display:flex;flex-direction:column;gap:14px} .bs-recent a{display:flex;gap:11px;align-items:center} .bs-recent-cover{width:48px;height:48px;flex:none;border-radius:11px;display:grid;place-items:center} .bs-recent-cover .icon{width:19px;height:19px;color:rgba(255,255,255,.9)} .bs-recent-tx{min-width:0} .bs-recent-tx b{display:block;font-size:13px;font-weight:600;color:var(--text);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s} .bs-recent a:hover .bs-recent-tx b{color:var(--cyan)} .bs-recent-tx small{font-size:11.5px;color:var(--dim)} .bs-tags{display:flex;flex-wrap:wrap;gap:7px} .bs-tags a{font-size:12px;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:5px 10px;transition:.2s} .bs-tags a:hover{color:var(--cyan);border-color:var(--cyan)} .bs-cta{position:relative;overflow:hidden;text-align:center;background:linear-gradient(140deg,rgba(34,211,238,.1),rgba(139,92,246,.12))} .bs-cta-glow{position:absolute;inset:0;background:radial-gradient(60% 100% at 50% 0%,rgba(34,211,238,.2),transparent 60%);pointer-events:none} .bs-cta-ic{position:relative;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin:0 auto 12px;background:linear-gradient(135deg,#22D3EE,#8B5CF6)} .bs-cta-ic .icon{width:22px;height:22px;color:#04121A} .bs-cta h3{position:relative;font-size:16px;font-family:var(--font-disp);margin-bottom:7px} .bs-cta p{position:relative;font-size:13px;color:var(--muted);margin-bottom:16px;line-height:1.7} .bs-cta .btn{position:relative;width:100%;justify-content:center} /* ---------- single post: header ---------- */ .blog-crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--dim);margin-bottom:18px} .blog-crumbs a{color:var(--muted)}.blog-crumbs a:hover{color:var(--cyan)} .bp-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;pointer-events:none;background:transparent} .bp-progress span{display:block;height:100%;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,#22D3EE,#8B5CF6);box-shadow:0 0 12px rgba(34,211,238,.55);transition:transform .12s linear;will-change:transform} html[dir="rtl"] .bp-progress span{transform-origin:right center} .bp-head{padding:165px 0 30px;position:relative} @media (max-width:640px){.bp-head{padding:130px 0 24px}} .bp-head::before{content:'';position:absolute;inset:0;background:radial-gradient(70% 120% at 50% -10%,rgba(34,211,238,.09),transparent 62%);pointer-events:none} .bp-head-tx{max-width:860px;position:relative} .blog-post-cat{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--cyan);background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.25);border-radius:99px;padding:6px 15px;margin-bottom:18px;transition:.2s} .blog-post-cat:hover{background:rgba(34,211,238,.18);border-color:var(--cyan)} .blog-post-cat .icon{width:14px;height:14px} .bp-head h1{font-size:clamp(28px,4.1vw,49px);line-height:1.16;letter-spacing:-.8px;margin-bottom:18px;font-family:var(--font-disp);font-weight:700} .bp-lead{font-size:clamp(15.5px,1.55vw,18.5px);line-height:1.85;color:var(--muted);max-width:74ch;margin-bottom:28px} .bp-byline{display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line)} .bp-av{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:17px;color:#04121A;background:linear-gradient(135deg,#22D3EE,#8B5CF6)} .bp-av.lg{width:56px;height:56px;font-size:21px} .bp-byline-tx{min-width:0} .bp-byline-tx b{display:block;font-size:14.5px;font-weight:700;color:var(--text);line-height:1.5} .bp-byline-tx small{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--dim);flex-wrap:wrap} .bp-byline-tx small span{display:inline-flex;align-items:center;gap:5px} .bp-byline-tx small .icon{width:13px;height:13px;color:var(--cyan)} .bp-byline-tx small i{opacity:.5;font-style:normal} .bp-share-inline{display:flex;gap:8px;margin-inline-start:auto} .bp-share-inline .bsh{width:38px;height:38px;border-radius:11px} .bp-share-inline .bsh .icon{width:16px;height:16px} /* ---------- single post: تصویر شاخص ---------- */ .bp-cover{position:relative;aspect-ratio:21/9;min-height:230px;border-radius:26px;overflow:hidden;display:grid;place-items:center; border:1px solid var(--line-2);box-shadow:0 26px 70px -28px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.09)} .bp-cover img{width:100%;height:100%;object-fit:cover;display:block} .bp-cover-grid{position:absolute;inset:0;opacity:.5; background-image:linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px); background-size:46px 46px;mask-image:radial-gradient(78% 78% at 50% 40%,#000 35%,transparent 100%)} .bp-cover-glow{position:absolute;inset:0;background:radial-gradient(circle at 76% 14%,rgba(255,255,255,.28),transparent 56%)} .bp-cover-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(3,6,14,.62) 0%,rgba(3,6,14,.16) 34%,transparent 62%)} .bp-cover-ic{width:clamp(58px,7.6vw,94px);height:clamp(58px,7.6vw,94px);color:rgba(255,255,255,.95);position:relative;z-index:1;filter:drop-shadow(0 10px 26px rgba(0,0,0,.42))} .bp-cover-badge{position:absolute;bottom:16px;inset-inline-start:18px;z-index:2;display:inline-flex;align-items:center;gap:7px; font-size:12.5px;font-weight:700;color:#fff;background:rgba(8,12,22,.55);backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.2);padding:7px 15px;border-radius:99px} .bp-cover-badge .icon{width:14px;height:14px} @media (max-width:640px){.bp-cover{aspect-ratio:16/10;border-radius:20px;min-height:0}} /* ---------- single post: چیدمان دوستونه ---------- */ .bp-main{padding-top:38px} .bp-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:start} .bp-col{min-width:0} .bp-side-col{min-width:0} .bp-comments-wrap{margin-top:46px;padding-top:34px;border-top:1px solid var(--line)} .bp-related{padding-top:0;padding-bottom:74px} /* کارت نویسنده */ .bp-author{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:32px;padding:20px 22px;border-radius:18px; background:linear-gradient(130deg,rgba(34,211,238,.07),rgba(139,92,246,.08));border:1px solid var(--line-2)} .bp-author-tx{flex:1;min-width:190px} .bp-author-tx b{display:block;font-size:15.5px;font-weight:700;margin-bottom:5px} .bp-author-tx p{font-size:13.5px;color:var(--muted);line-height:1.75} .bp-author-cta{flex:none} .bp-author-cta .icon{width:16px;height:16px} /* فهرست مطالب */ .bp-toc-card{max-height:min(60vh,460px);overflow-y:auto;scrollbar-width:thin} .bp-toc{list-style:none;display:flex;flex-direction:column;gap:1px;border-inline-start:2px solid var(--line);padding-inline-start:0} .bp-toc li.sub a{padding-inline-start:26px;font-size:12.5px;color:var(--dim)} .bp-toc a{display:block;padding:7px 12px;font-size:13.2px;line-height:1.6;color:var(--muted);border-radius:0 8px 8px 0; border-inline-start:2px solid transparent;margin-inline-start:-2px;transition:.18s} .bp-toc a:hover{color:var(--text);background:var(--surface-2)} .bp-toc a.on{color:var(--cyan);border-inline-start-color:var(--cyan);background:rgba(34,211,238,.07);font-weight:600} @media (max-width:1000px){ .bp-layout{grid-template-columns:1fr;gap:40px} .bp-side-col{order:2} .blog-side{position:static} .bp-toc-card{display:none} } /* article typography */ .blog-prose{font-size:16.5px;line-height:2.05;color:var(--text)} .blog-prose p{margin-bottom:22px;color:var(--muted)} .blog-prose h2{font-size:23px;font-family:var(--font-disp);font-weight:700;margin:38px 0 16px;line-height:1.35} .blog-prose h3{font-size:19px;font-family:var(--font-disp);font-weight:600;margin:28px 0 12px} .blog-prose ul,.blog-prose ol{margin:0 0 22px;padding-inline-start:24px;color:var(--muted)} .blog-prose li{margin-bottom:10px;line-height:1.9} .blog-prose strong{color:var(--text);font-weight:700} .blog-prose a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px} .blog-prose code{background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-size:.9em;font-family:ui-monospace,monospace} .blog-prose blockquote{border-inline-start:3px solid var(--cyan);background:var(--surface);padding:14px 20px;border-radius:0 12px 12px 0;margin:0 0 22px;color:var(--muted)} .blog-prose img{max-width:100%;border-radius:14px;margin:10px 0 24px} .blog-post-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px;padding-top:24px;border-top:1px solid var(--line)} .blog-post-tags a{font-size:12.5px;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:6px 12px;transition:.2s} .blog-post-tags a::before{content:'#';color:var(--cyan);margin-inline-end:2px} .blog-post-tags a:hover{color:var(--cyan);border-color:var(--cyan)} .blog-share{display:flex;align-items:center;gap:10px;margin-top:24px;flex-wrap:wrap} .blog-share>span{font-size:13.5px;color:var(--dim);font-weight:600} .bsh{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line-2);background:var(--surface);color:var(--muted);cursor:pointer;transition:.2s} html[data-theme="light"] .bsh{background:#fff} .bsh .icon{width:18px;height:18px} .bsh:hover{color:#fff;transform:translateY(-2px)} .bsh.tg:hover{background:#229ED9;border-color:#229ED9} .bsh.wa:hover{background:#25D366;border-color:#25D366} .bsh.in:hover{background:#0A66C2;border-color:#0A66C2} .bsh.cp:hover{background:var(--cyan);border-color:var(--cyan);color:#04121A} .bsh.cp.done{background:var(--green);border-color:var(--green);color:#04121A} /* comments */ .blog-comments-h{font-size:22px;font-family:var(--font-disp);margin-bottom:20px} .blog-comments-h b{color:var(--cyan)} .blog-note{border-radius:12px;padding:13px 18px;font-size:14px;margin-bottom:18px;background:var(--surface-2);color:var(--muted);border:1px solid var(--line)} .blog-note.ok{background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.35);color:#34D399} .blog-note.err{background:rgba(255,95,87,.08);border-color:rgba(255,95,87,.4);color:#FF8A84} .blog-comments{display:flex;flex-direction:column;gap:16px;margin-bottom:30px} .blog-comment{display:flex;gap:14px} .blog-comment-av{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;font-family:var(--font-disp);font-weight:700;font-size:18px;color:#04121A;background:linear-gradient(135deg,#22D3EE,#8B5CF6)} .blog-comment-b{flex:1;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:14px 18px} html[data-theme="light"] .blog-comment-b{background:#fff} .blog-comment-h{display:flex;align-items:baseline;gap:10px;margin-bottom:6px;flex-wrap:wrap} .blog-comment-h b{font-size:14.5px} /* برچسب ترجمه‌ی خودکار */ .bc-tr{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--dim);background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:2px 9px;cursor:help} .bc-tr .icon{width:12px;height:12px} /* پاسخ هوشمند پشتیبانی */ .bc-reply{margin-top:14px;padding:13px 16px;border-radius:12px;border:1px solid rgba(34,211,238,.22); background:linear-gradient(130deg,rgba(34,211,238,.07),rgba(139,92,246,.07));border-inline-start:3px solid var(--cyan)} .bc-reply-h{display:flex;align-items:center;gap:9px;margin-bottom:7px;flex-wrap:wrap} .bc-reply-av{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#22D3EE,#8B5CF6)} .bc-reply-av .icon{width:14px;height:14px;color:#04121A} .bc-reply-h b{font-size:13.5px;color:var(--text)} .bc-ai{font-size:10.5px;font-weight:700;letter-spacing:.3px;color:var(--cyan);background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.3);border-radius:99px;padding:2px 8px} .bc-reply p{font-size:14px;line-height:1.85;color:var(--muted);margin:0} .blog-comment-h small{font-size:12px;color:var(--dim)} .blog-comment-b p{font-size:14px;color:var(--muted);line-height:1.8} .blog-no-comments{color:var(--muted);margin-bottom:26px} .blog-comment-form{background:var(--surface);border:1px solid var(--line-2);border-radius:18px;padding:24px} html[data-theme="light"] .blog-comment-form{background:#fff} .blog-comment-form h3{font-size:17px;font-family:var(--font-disp);margin-bottom:16px} .bcf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px} @media(max-width:560px){.bcf-row{grid-template-columns:1fr}} .blog-comment-form input,.blog-comment-form textarea{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:12px 14px;color:var(--text);font-family:var(--font-body);font-size:14.5px;outline:none;transition:border-color .2s} .blog-comment-form input:focus,.blog-comment-form textarea:focus{border-color:var(--cyan)} .blog-comment-form textarea{resize:vertical;margin-bottom:16px;line-height:1.7} .blog-comment-form .btn .icon{width:16px;height:16px} html[dir="rtl"] .blog-share .dir,html[dir="rtl"] .blog-comment-form .dir{transform:scaleX(-1)} /* ============ CAREERS ============ */ .cr-jobs{display:flex;flex-direction:column;gap:12px} .cr-job{background:var(--bg);border:1px solid var(--line-2);border-radius:16px;overflow:hidden} html[data-theme="light"] .cr-job{background:#fff} .cr-job summary{display:flex;align-items:center;gap:14px;padding:18px 20px;cursor:pointer;list-style:none} .cr-job summary::-webkit-details-marker{display:none} .cr-job-ic{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(34,211,238,.16),rgba(139,92,246,.16));border:1px solid var(--line-2)} .cr-job-ic .icon{width:21px;height:21px;color:var(--cyan)} .cr-job-tx{flex:1;min-width:0} .cr-job-tx b{display:block;font-size:16px;font-family:var(--font-disp)} .cr-job-tx small{display:block;font-size:13px;color:var(--muted);margin-top:3px} .cr-job-type{flex:none;font-size:11.5px;font-weight:700;color:var(--green);background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.28);border-radius:99px;padding:4px 12px} .cr-job-chev{width:18px;height:18px;color:var(--dim);transition:transform .25s;flex:none} .cr-job[open] .cr-job-chev{transform:rotate(180deg)} .cr-job-body{padding:0 20px 22px 20px;border-top:1px solid var(--line)} .cr-job-body h4{font-size:13px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em;margin:18px 0 12px} html[dir="rtl"] .cr-job-body h4{letter-spacing:0} .cr-job-body ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:18px} .cr-job-body li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--muted);line-height:1.6} .cr-job-body li .icon{width:16px;height:16px;color:var(--green);flex:none;margin-top:2px} @media(max-width:640px){.cr-job-tx small{display:none}} .cr-form{background:var(--surface);border:1px solid var(--line-2);border-radius:20px;padding:28px} html[data-theme="light"] .cr-form{background:#fff} .cr-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px} @media(max-width:600px){.cr-form-row{grid-template-columns:1fr}} .cr-form label{display:flex;flex-direction:column;gap:7px} .cr-form label.cr-full{margin-bottom:16px} .cr-form label>span{font-size:13.5px;color:var(--muted);font-weight:600} .cr-form input,.cr-form select,.cr-form textarea{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:12px 14px;color:var(--text);font-family:var(--font-body);font-size:14.5px;outline:none;transition:border-color .2s} .cr-form input:focus,.cr-form select:focus,.cr-form textarea:focus{border-color:var(--cyan)} .cr-form textarea{resize:vertical;line-height:1.7} .cr-form label small{font-size:12px;color:var(--dim)} .cr-form-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:6px} .cr-form-foot span{font-size:13px;color:var(--muted)} .cr-form-foot a{color:var(--cyan)} .cr-form-foot .btn .icon{width:16px;height:16px} html[dir="rtl"] .cr-form-foot .dir,html[dir="rtl"] .sol-hero .dir{transform:scaleX(-1)} @media(max-width:900px){.careers .sol-feat-grid,.section .sol-feat-grid[style*="repeat(4"]{grid-template-columns:1fr 1fr!important}} /* ============ DOCS ============ */ .docs-hero{padding-top:150px} .docs-search{display:flex;align-items:center;gap:10px;max-width:560px;margin-top:26px;background:var(--surface);border:1px solid var(--line-2);border-radius:16px;padding:6px 16px;transition:border-color .25s,box-shadow .25s} .docs-search:focus-within{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(34,211,238,.12)} .docs-search .icon{width:18px;height:18px;color:var(--dim);flex:none} .docs-search input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--text);font-size:15px;padding:12px 4px;font-family:var(--font-body)} .docs-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:1000px){.docs-cards{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.docs-cards{grid-template-columns:1fr}} .docs-card{background:var(--surface);border:1px solid var(--line-2);border-radius:18px;padding:22px;transition:border-color .25s,transform .25s} .docs-card:hover{border-color:var(--cyan);transform:translateY(-3px)} .docs-card-h{display:flex;gap:13px;margin-bottom:15px} .docs-card-ic{width:44px;height:44px;flex:none;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(34,211,238,.16),rgba(139,92,246,.16));border:1px solid var(--line-2)} .docs-card-ic .icon{width:21px;height:21px;color:var(--cyan)} .docs-card h2{font-size:16.5px;font-family:var(--font-disp);margin-bottom:4px} .docs-card-h p{font-size:12.5px;color:var(--dim);line-height:1.6} .docs-card-list{list-style:none;display:flex;flex-direction:column;gap:1px} .docs-card-list a{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:9px;font-size:13.5px;color:var(--muted);transition:.18s} .docs-card-list a:hover{background:var(--surface-2);color:var(--cyan)} .docs-card-list .icon{width:13px;height:13px;flex:none;opacity:.5} html[dir="rtl"] .docs-card-list .icon{transform:scaleX(-1)} .docs-card-more{display:block;margin-top:9px;font-size:12px;color:var(--dim)} .docs-empty{text-align:center;color:var(--dim);padding:40px} /* layout مقاله */ .docs-wrap{padding:130px 0 70px} .docs-layout{display:grid;grid-template-columns:262px minmax(0,1fr) 214px;gap:34px;align-items:start} .docs-main{min-width:0} .docs-h1{font-size:clamp(26px,3.4vw,39px);line-height:1.2;letter-spacing:-.6px;font-family:var(--font-disp);margin:6px 0 14px} .docs-lead{font-size:16px;line-height:1.85;color:var(--muted);margin-bottom:16px} .docs-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--dim);padding-bottom:20px;margin-bottom:26px;border-bottom:1px solid var(--line)} .docs-meta span{display:inline-flex;align-items:center;gap:6px} .docs-meta .icon{width:14px;height:14px;color:var(--cyan)} .docs-prose h2{scroll-margin-top:100px}.docs-prose h3{scroll-margin-top:100px} /* سایدبار درختی */ .docs-side{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow-y:auto;scrollbar-width:thin} .docs-side-home{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14.5px;padding:10px 12px;border-radius:11px;background:var(--surface);border:1px solid var(--line-2);margin-bottom:12px} .docs-side-home .icon{width:17px;height:17px;color:var(--cyan)} .docs-side-search{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:3px 11px;margin-bottom:14px} .docs-side-search .icon{width:15px;height:15px;color:var(--dim);flex:none} .docs-side-search input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--text);font-size:13.5px;padding:9px 3px;font-family:var(--font-body)} .docs-tree{display:flex;flex-direction:column;gap:2px} .docs-tree-head{display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;border-radius:10px;background:none;border:none;cursor:pointer;color:var(--text);font-family:var(--font-body);font-size:13.8px;font-weight:600;text-align:start;transition:background .18s} .docs-tree-head:hover{background:var(--surface-2)} .docs-tree-head .ic{width:16px;height:16px;color:var(--cyan);flex:none} .docs-tree-head span{flex:1;min-width:0} .docs-tree-head .chev{width:14px;height:14px;color:var(--dim);flex:none;transition:transform .22s} .docs-tree-sec.open .docs-tree-head .chev{transform:rotate(180deg)} .docs-tree-list{list-style:none;display:none;flex-direction:column;gap:1px;margin:2px 0 6px;padding-inline-start:14px;border-inline-start:1px solid var(--line)} .docs-tree-sec.open .docs-tree-list{display:flex} .docs-tree-list a{display:block;padding:7px 11px;border-radius:8px;font-size:13px;line-height:1.55;color:var(--muted);border-inline-start:2px solid transparent;margin-inline-start:-15px;transition:.18s} .docs-tree-list a:hover{color:var(--text);background:var(--surface-2)} .docs-tree-list a.on{color:var(--cyan);border-inline-start-color:var(--cyan);background:rgba(34,211,238,.08);font-weight:600} /* در این صفحه */ .docs-toc{position:sticky;top:96px} .docs-toc-t{display:block;font-size:11.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--dim);margin-bottom:11px} /* بازخورد */ .docs-feedback{margin-top:38px;padding:20px 22px;border-radius:16px;border:1px solid var(--line-2);background:var(--surface);text-align:center} .docs-feedback b{display:block;font-size:14.5px;margin-bottom:13px} .docs-fb-btns{display:flex;gap:10px;justify-content:center} .docs-fb-btns button{display:inline-flex;align-items:center;gap:7px;padding:9px 20px;border-radius:11px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--muted);font-family:var(--font-body);font-size:13.5px;font-weight:600;cursor:pointer;transition:.2s} .docs-fb-btns button:hover{border-color:var(--cyan);color:var(--cyan)} .docs-fb-btns .icon{width:15px;height:15px} .docs-fb-thanks{font-size:13.5px;color:var(--muted)} .docs-fb-thanks a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px} /* قبلی/بعدی */ .docs-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px} @media(max-width:560px){.docs-nav{grid-template-columns:1fr}} .docs-nav-a{padding:15px 18px;border-radius:14px;border:1px solid var(--line-2);background:var(--surface);transition:.2s} .docs-nav-a:hover{border-color:var(--cyan)} .docs-nav-a small{display:block;font-size:11.5px;color:var(--dim);margin-bottom:4px} .docs-nav-a b{font-size:14px;line-height:1.5} .docs-nav-a.next{text-align:end} @media(max-width:1150px){ .docs-layout{grid-template-columns:238px minmax(0,1fr)} .docs-toc{display:none} } @media(max-width:900px){ .docs-wrap{padding-top:112px} .docs-layout{grid-template-columns:1fr;gap:24px} .docs-side{position:static;max-height:none;order:-1;background:var(--surface);border:1px solid var(--line-2);border-radius:16px;padding:14px} } /* ============ WEBMASTER TOOLS ============ */ .wt-privacy{display:inline-flex;align-items:center;gap:9px;margin-top:20px;font-size:13.5px;color:var(--muted);background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.25);border-radius:99px;padding:9px 18px} .wt-privacy .icon{width:16px;height:16px;color:var(--green);flex:none} .wt-cat{margin-bottom:40px} .wt-cat-h{display:flex;align-items:center;gap:14px;margin-bottom:18px} .wt-cat-ic{width:46px;height:46px;flex:none;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(34,211,238,.16),rgba(139,92,246,.16));border:1px solid var(--line-2)} .wt-cat-ic .icon{width:22px;height:22px;color:var(--cyan)} .wt-cat-h h2{font-size:19px;font-family:var(--font-disp)} .wt-cat-h p{font-size:13px;color:var(--dim)} .wt-cat-n{margin-inline-start:auto;font-size:12.5px;font-weight:700;color:var(--dim);background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:4px 13px} .wt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} @media(max-width:1100px){.wt-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:820px){.wt-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.wt-grid{grid-template-columns:1fr}} .wt-card{display:flex;flex-direction:column;gap:7px;padding:17px;border-radius:15px;background:var(--surface);border:1px solid var(--line-2);transition:border-color .22s,transform .22s} .wt-card:hover{border-color:var(--cyan);transform:translateY(-3px)} .wt-card-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line)} .wt-card-ic .icon{width:18px;height:18px;color:var(--cyan)} .wt-card b{font-size:14.5px;line-height:1.5} .wt-card small{font-size:12.5px;color:var(--muted);line-height:1.7} /* صفحه‌ی تک‌ابزار */ .wt-wrap{padding:140px 0 74px} @media(max-width:640px){.wt-wrap{padding-top:118px}} .wt-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:8px 0 16px} .wt-head-ic{width:56px;height:56px;flex:none;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(139,92,246,.18));border:1px solid var(--line-2)} .wt-head-ic .icon{width:26px;height:26px;color:var(--cyan)} .wt-head h1{font-size:clamp(23px,3vw,32px);font-family:var(--font-disp);line-height:1.25} .wt-head p{font-size:14.5px;color:var(--muted);margin-top:5px;max-width:62ch} .wt-free{margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--green);background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3);border-radius:99px;padding:5px 14px} .wt-free .icon{width:14px;height:14px} .wt-note{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--dim);margin-bottom:20px} .wt-note .icon{width:14px;height:14px;color:var(--green);flex:none} .wt-app{background:var(--surface);border:1px solid var(--line-2);border-radius:20px;padding:22px} .wt-io{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:820px){.wt-io{grid-template-columns:1fr}} .wt-two{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:640px){.wt-two{grid-template-columns:1fr}} .wt-pane label{display:block;font-size:12.5px;font-weight:600;color:var(--dim);margin-bottom:7px} .wt-ta{width:100%;background:var(--surface-2);border:1px solid var(--line-2);border-radius:12px;padding:13px 15px;color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;line-height:1.75;outline:none;resize:vertical;transition:border-color .2s} .wt-ta:focus{border-color:var(--cyan)} .wt-input-lg{width:100%;background:var(--surface-2);border:1px solid var(--line-2);border-radius:12px;padding:15px 17px;color:var(--text);font-family:var(--font-body);font-size:16px;outline:none} .wt-input-lg:focus{border-color:var(--cyan)} .wt-select{background:var(--surface-2);border:1px solid var(--line-2);border-radius:9px;color:var(--text);padding:6px 10px;font-family:var(--font-body);font-size:13px} .wt-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px} .wt-bar .btn{padding:10px 18px;font-size:13.5px} .wt-status{font-size:12.5px;color:var(--dim)} .wt-status.ok{color:var(--green)} .wt-status.err{color:#ff6b6b} .btn.ok{background:rgba(52,211,153,.16);color:var(--green)} .wt-single{text-align:center;padding:8px 0 4px} .wt-result{font-family:ui-monospace,monospace;font-size:clamp(16px,2.6vw,26px);font-weight:700;letter-spacing:.5px;word-break:break-all;background:var(--surface-2);border:1px solid var(--line-2);border-radius:14px;padding:20px 18px;margin-bottom:14px} .wt-result.sm{font-size:clamp(14px,1.8vw,18px)} .wt-strength{height:7px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-bottom:8px} .wt-strength span{display:block;height:100%;width:0;transition:width .3s,background .3s} .wt-strength .lv0{background:#ff6b6b}.wt-strength .lv1{background:#fbbf24} .wt-strength .lv2{background:#34d399}.wt-strength .lv3{background:linear-gradient(90deg,#22d3ee,#8b5cf6)} .wt-strength-l{font-size:12.5px;color:var(--muted)} .wt-fields{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)} .wt-chk{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted);cursor:pointer} .wt-chk input{accent-color:var(--cyan);width:16px;height:16px} .wt-range{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted)} .wt-range input[type=range]{accent-color:var(--cyan);width:150px} .wt-range b{color:var(--cyan);min-width:26px} .wt-date{display:flex;gap:8px} .wt-date input{flex:1;min-width:0;background:var(--surface-2);border:1px solid var(--line-2);border-radius:11px;padding:12px;color:var(--text);font-size:15px;text-align:center;outline:none;font-family:ui-monospace,monospace} .wt-date input:focus{border-color:var(--cyan)} .wt-out-box{margin-top:16px;display:flex;flex-direction:column;gap:1px} .wt-out-row{display:flex;align-items:center;gap:14px;padding:12px 15px;background:var(--surface-2);border:1px solid var(--line);border-radius:11px} .wt-out-row span{font-size:12.5px;color:var(--dim);min-width:110px;flex:none} .wt-out-row b{font-size:15px;font-family:ui-monospace,monospace;word-break:break-all} .wt-out-row.hash b{font-size:12px;color:var(--muted)} .wt-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:18px} @media(max-width:900px){.wt-stats{grid-template-columns:repeat(3,1fr)}} @media(max-width:520px){.wt-stats{grid-template-columns:repeat(2,1fr)}} .wt-stat{background:var(--surface-2);border:1px solid var(--line);border-radius:13px;padding:15px;text-align:center} .wt-stat b{display:block;font-size:22px;font-weight:800;color:var(--cyan);font-family:var(--font-disp)} .wt-stat span{font-size:11.5px;color:var(--dim)} .wt-more{margin-top:44px} .wt-more h2{font-size:19px;font-family:var(--font-disp);margin-bottom:16px} .wt-all{margin-top:18px} /* ابزارهای جدید */ .wt-mini{margin-inline-start:auto;flex:none;font-size:11.5px;padding:4px 11px;border-radius:8px;border:1px solid var(--line-2);background:var(--surface);color:var(--muted);cursor:pointer;font-family:var(--font-body)} .wt-mini:hover{border-color:var(--cyan);color:var(--cyan)} .wt-mini.ok{background:rgba(52,211,153,.16);color:var(--green);border-color:rgba(52,211,153,.4)} .wt-color{width:100%;height:52px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface-2);cursor:pointer;padding:4px} .wt-color.sm{width:52px;height:32px;padding:2px;vertical-align:middle} .wt-swatch{height:80px;border-radius:14px;border:1px solid var(--line-2);margin:16px 0} .wt-shadow-demo{display:grid;place-items:center;height:190px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line);margin-bottom:18px} .wt-shadow-demo>div{width:120px;height:120px;border-radius:18px;background:linear-gradient(135deg,#22d3ee,#8b5cf6)} .wt-grad-demo{height:170px;border-radius:16px;border:1px solid var(--line-2);margin-bottom:18px;background:linear-gradient(100deg,#22d3ee,#8b5cf6)} .wt-preview{margin-top:18px;padding:16px 18px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line)} .wt-prev-h{display:block;font-size:12px;color:var(--dim);margin-bottom:12px} .wt-serp{display:flex;flex-direction:column;gap:3px;max-width:600px} .wt-serp-u{font-size:12.5px;color:var(--green)} .wt-serp-t{font-size:18px;color:#8ab4f8;line-height:1.4} .wt-serp-d{font-size:13px;color:var(--muted);line-height:1.7} html[data-theme="light"] .wt-serp-t{color:#1a0dab} /* ============ محتوای سئوی صفحات ابزار ============ */ .wt-content{max-width:820px;margin:44px auto 0} .wt-sec{margin-bottom:38px} .wt-sec>h2{font-size:21px;font-weight:700;margin:0 0 14px;color:var(--text)} .wt-sec>p{font-size:15.5px;line-height:2.1;color:var(--muted);margin:0} .wt-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px} .wt-steps li{display:flex;align-items:flex-start;gap:14px} .wt-steps li>span{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center; background:var(--grad);color:#fff;font-size:13.5px;font-weight:700;margin-top:2px} .wt-steps li>p{margin:0;font-size:15px;line-height:1.95;color:var(--muted)} .wt-faq{display:flex;flex-direction:column;gap:10px} .wt-faq details{border:1px solid var(--line);border-radius:14px;background:var(--surface); transition:border-color .18s} .wt-faq details[open]{border-color:var(--cyan)} .wt-faq summary{cursor:pointer;padding:15px 18px;font-size:15px;font-weight:600;color:var(--text); list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px} .wt-faq summary::-webkit-details-marker{display:none} .wt-faq summary::after{content:"+";font-size:19px;font-weight:400;color:var(--dim);flex:0 0 auto; transition:transform .18s} .wt-faq details[open] summary::after{transform:rotate(45deg);color:var(--cyan)} .wt-faq details>p{margin:0;padding:0 18px 17px;font-size:14.5px;line-height:2;color:var(--muted)} @media(max-width:640px){ .wt-content{margin-top:32px} .wt-sec>h2{font-size:19px} .wt-sec>p,.wt-steps li>p{font-size:14.5px} } /* ============ سایدبار ابزارها ============ */ /* در DOM: main اول، سایدبار دوم (کاربر صفحه‌کلید و خزنده اول به ابزار برسند). در دسکتاپ با order سایدبار به ابتدا می‌آید. */ .wt-layout{display:grid;grid-template-columns:1fr;gap:0} .wt-main{min-width:0} @media(min-width:1151px){ .wt-layout{grid-template-columns:252px minmax(0,1fr);gap:30px;align-items:start} .wt-side{order:-1} /* .wt-content دیگر خودش را وسط نکند — ستون از قبل باریک شده */ .wt-main .wt-content{margin-inline:0} } .wt-side-in{position:sticky;top:96px;max-height:calc(100vh - 124px);overflow-y:auto; scrollbar-width:thin;display:flex;flex-direction:column;gap:12px} .wt-side-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 2px} .wt-side-top b{font-size:14.5px;font-family:var(--font-disp)} .wt-side-top span{font-size:11.5px;color:var(--dim)} .wt-side-q{display:flex;align-items:center;gap:8px;background:var(--surface-2); border:1px solid var(--line);border-radius:11px;padding:3px 11px} .wt-side-q .icon{width:15px;height:15px;color:var(--dim);flex:none} .wt-side-q input{flex:1;min-width:0;background:transparent;border:none;outline:none; color:var(--text);font-size:13.2px;padding:9px 3px;font-family:var(--font-body)} .wt-side-q input::-webkit-search-cancel-button{filter:invert(.5)} .wt-side-nav{display:flex;flex-direction:column;gap:12px} .wt-side-sec[hidden]{display:none} .wt-side-sec-h{display:flex;align-items:center;gap:8px;padding:5px 4px;font-size:11.5px; font-weight:700;letter-spacing:.3px;color:var(--dim);text-transform:uppercase} .wt-side-sec-h .icon{width:14px;height:14px;flex:none} /* فقط دسته‌ی جاری پررنگ — چهار تیتر هم‌وزن یعنی هیچ‌کدام دیده نمی‌شود */ .wt-side-sec.cur .wt-side-sec-h{color:var(--cyan)} .wt-side-list{list-style:none;display:flex;flex-direction:column;gap:1px; padding-inline-start:12px;border-inline-start:1px solid var(--line)} .wt-side-list li[hidden]{display:none} .wt-side-list a{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px; font-size:13px;line-height:1.5;color:var(--muted); border-inline-start:2px solid transparent;margin-inline-start:-13px;transition:.18s} .wt-side-list a .icon{width:14px;height:14px;flex:none;opacity:.65} .wt-side-list a span{flex:1;min-width:0} .wt-side-list a:hover{color:var(--text);background:var(--surface-2)} .wt-side-list a:hover .icon{opacity:1;color:var(--cyan)} .wt-side-list a.on{color:var(--cyan);border-inline-start-color:var(--cyan); background:rgba(34,211,238,.08);font-weight:600} .wt-side-list a.on .icon{opacity:1} .wt-side-list a em{font-style:normal;font-size:10px;color:var(--dim);flex:none} .wt-side-list a:focus-visible{outline:2px solid var(--cyan);outline-offset:1px} .wt-side-none{font-size:12.5px;color:var(--dim);padding:10px 4px;text-align:center} .wt-side-all{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px; border-radius:11px;border:1px solid var(--line-2);background:var(--surface); font-size:13px;font-weight:600;color:var(--muted);transition:.2s} .wt-side-all:hover{border-color:var(--cyan);color:var(--cyan)} .wt-side-all .icon{width:14px;height:14px} html[data-theme="light"] .wt-side-all{background:#fff} /* موبایل و تبلت: سایدبار زیر ابزار — کاربر برای استفاده آمده، نه برای فهرست */ @media(max-width:1150px){ .wt-side{margin-top:40px} .wt-side-in{position:static;max-height:none;background:var(--surface); border:1px solid var(--line-2);border-radius:16px;padding:16px} html[data-theme="light"] .wt-side-in{background:#fff} .wt-side-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px} } @media(max-width:560px){ .wt-side-nav{grid-template-columns:1fr} } /* ویجت‌هایی که شبکه‌شان به عرض پنجره گره خورده، نه به عرض ستون — در ستون باریک‌شده باید بازتنظیم شوند وگرنه کاشی‌ها له می‌شوند. */ @media(min-width:1151px){ .wt-main .wt-stats{grid-template-columns:repeat(3,1fr)} .wt-main .wt-grid{grid-template-columns:repeat(3,1fr)} } /* =================================================================== LOGGED-IN IDENTITY MENU — "Aperture Node" (header, all pages). Replaces the old inline