/* ══════════════════════════════════════════════════════════════════════
   site.css — پوسته‌ی مشترک صفحه‌های عمومی (مستندات، وبلاگ، قوانین)
   صفحه‌ی اصلی پوسته‌ی مخصوص خودش را دارد؛ این فایل همان زبان بصری را
   برای صفحه‌های فرعی تکرار می‌کند تا کل سایت یک برند دیده شود.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --sx-bg: #08080a;
  --sx-ink: #f5f6f8;
  --sx-ink-2: rgba(245, 246, 248, .72);
  --sx-ink-3: rgba(245, 246, 248, .5);
  --sx-ink-4: rgba(245, 246, 248, .34);
  --sx-red: #ff0033;
  --sx-red-soft: #ff5c7a;
  --sx-red-dim: rgba(255, 0, 51, .08);
  --sx-green: #39d98a;
  --sx-line: rgba(255, 255, 255, .09);
  --sx-line-2: rgba(255, 255, 255, .16);
  --sx-glass: rgba(255, 255, 255, .035);
  --sx-glass-2: rgba(255, 255, 255, .06);
  --sx-shell: 1120px;
  --sx-ease: cubic-bezier(.2, .9, .25, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--sx-bg); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  color: var(--sx-ink);
  background:
    radial-gradient(58% 46% at 88% -6%, rgba(255, 0, 51, .12), transparent 62%),
    radial-gradient(50% 40% at 4% 100%, rgba(124, 58, 237, .07), transparent 64%),
    var(--sx-bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.85;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
/* کنترل‌های فرم صفحه‌های فرعی: رنگ و پس‌زمینه صریح، وگرنه متنِ ارث‌بری‌شده‌ی
   روشن روی پس‌زمینه‌ی سفیدِ پیش‌فرضِ مرورگر نامرئی می‌شد. */
input, select, textarea {
  font: inherit;
  color: var(--sx-ink);
  background-color: #0e0e12;
  border: 1px solid var(--sx-line);
  border-radius: 10px;
}
input[type="checkbox"], input[type="radio"], input[type="range"] {
  background-color: transparent; border: 0; accent-color: var(--sx-red);
}
option, optgroup { background-color: #0e0e12; color: var(--sx-ink); }
input::placeholder, textarea::placeholder { color: var(--sx-ink-4); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: rgba(255, 0, 51, .5);
  box-shadow: 0 0 0 3px rgba(255, 0, 51, .12);
}
::selection { background: rgba(255, 0, 51, .85); color: #fff; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--sx-red-soft); outline-offset: 3px; border-radius: 8px;
}
/* عددهای فارسی با عرض ثابت تا ستون‌ها نلرزند */
.sx-num { font-variant-numeric: tabular-nums; letter-spacing: 0; }
.sx-ltr { direction: ltr; unicode-bidi: isolate; }

/* ---------- سربرگ ---------------------------------------------------- */
.sx-head {
  position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid var(--sx-line);
  background: rgba(8, 8, 10, .62);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
}
.sx-head-in {
  max-width: var(--sx-shell); margin: 0 auto; height: 64px; padding: 0 20px;
  display: flex; align-items: center; gap: 16px;
}
.sx-logo { display: flex; align-items: center; flex: 0 0 auto; }
.sx-logo img { height: 28px; width: auto; max-width: 150px; object-fit: contain; display: block; }
.sx-nav { display: flex; align-items: center; gap: 2px; }
.sx-nav a {
  padding: 8px 13px; border-radius: 10px; font-size: 13.5px; font-weight: 500;
  color: var(--sx-ink-2); transition: background .18s var(--sx-ease), color .18s var(--sx-ease);
}
.sx-nav a:hover { color: #fff; background: var(--sx-glass-2); }
.sx-nav a.is-on { color: #fff; background: var(--sx-red-dim); box-shadow: inset 0 0 0 1px rgba(255, 0, 51, .22); }
.sx-acts { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.sx-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px; border: 1px solid transparent; border-radius: 25px;
  font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: transform .16s var(--sx-ease), background .18s, border-color .18s, box-shadow .18s;
}
.sx-btn:active { transform: translateY(0) scale(.97); }
.sx-btn-ghost { border-color: var(--sx-line-2); color: var(--sx-ink); }
.sx-btn-ghost:hover { border-color: rgba(255, 0, 51, .5); background: var(--sx-glass); }
.sx-btn-white { background: #fff; color: #0a0a0a; }
.sx-btn-white:hover { background: #f1f1f3; transform: translateY(-1px); }
.sx-btn-red { position: relative; overflow: hidden; background: var(--sx-red); color: #fff; }
.sx-btn-red:hover { background: #e6002e; transform: translateY(-1px); }
.sx-btn-red::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .26) 48%, transparent 64%);
  transform: translateX(-130%); transition: transform .62s var(--sx-ease);
}
.sx-btn-red:hover::after { transform: translateX(130%); }
@media (max-width: 760px) {
  .sx-nav { display: none; }
  .sx-head-in { gap: 10px; padding: 0 14px; }
  .sx-btn { height: 32px; padding: 0 11px; font-size: 12.5px; }
  .sx-acts .sx-hide-sm { display: none; }
}

/* ---------- بدنه ------------------------------------------------------ */
.sx-main { max-width: var(--sx-shell); margin: 0 auto; padding: 44px 20px 60px; }
.sx-kicker {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px;
  padding: 5px 12px; border: 1px solid var(--sx-line-2); border-radius: 25px;
  background: var(--sx-glass); font-size: 11px; font-weight: 700;
 color: var(--sx-ink-2);
}
.sx-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--sx-red); flex: 0 0 6px; }
.sx-h1 { margin: 0; font-size: clamp(28px, 4.4vw, 44px); line-height: 1.28; font-weight: 700; }
.sx-lede { margin: 12px 0 0; max-width: 62ch; font-size: 14.5px; line-height: 2.1; color: var(--sx-ink-3); }
.sx-rule { height: 1px; margin: 34px 0; border: 0; background: linear-gradient(90deg, var(--sx-line-2), transparent); }

.sx-card {
  padding: 24px; border: 1px solid var(--sx-line); border-radius: 18px;
  background: linear-gradient(160deg, var(--sx-glass), rgba(255, 255, 255, .012));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: border-color .2s var(--sx-ease), transform .2s var(--sx-ease);
}
.sx-card:hover { border-color: var(--sx-line-2); }
.sx-card h2, .sx-card h3 { margin: 0 0 10px; }
.sx-card h2 { font-size: 19px; font-weight: 750; }
.sx-card h3 { font-size: 15.5px; font-weight: 700; }
.sx-card p { margin: 0 0 10px; font-size: 13.5px; line-height: 2.15; color: var(--sx-ink-2); }
.sx-card p:last-child { margin-bottom: 0; }
.sx-card ul, .sx-card ol { margin: 0 0 10px; padding-inline-start: 20px; font-size: 13.5px; line-height: 2.15; color: var(--sx-ink-2); }
.sx-card li + li { margin-top: 5px; }
.sx-card a:not(.sx-btn) { color: var(--sx-red-soft); border-bottom: 1px solid rgba(255, 92, 122, .28); }
.sx-card a:not(.sx-btn):hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .5); }
.sx-grid { display: grid; gap: 16px; }
.sx-grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (max-width: 640px) { .sx-main { padding: 30px 14px 44px; } .sx-card { padding: 18px; border-radius: 15px; } }

/* ---------- فوتر ------------------------------------------------------ */
/* همان ساختار فوتر صفحه‌ی اصلی، فقط کمی جمع‌وجورتر */
.sx-ft {
  position: relative; margin-top: 40px;
  border-top: 1px solid var(--sx-line);
  background: linear-gradient(180deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, .76));
  padding: 40px 20px 20px;
}
.sx-ft::before {
  content: ''; position: absolute; inset-inline: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 51, .55), transparent);
}
.sx-ft-in { max-width: var(--sx-shell); margin: 0 auto; }
.sx-ft-top { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(0, 2fr) minmax(0, .85fr); gap: 32px; }
.sx-ft-brand { display: flex; flex-direction: column; gap: 13px; }
.sx-ft-brand img { height: 28px; width: auto; object-fit: contain; }
.sx-ft-about { margin: 0; max-width: 34ch; font-size: 12px; line-height: 2.1; color: var(--sx-ink-3); }
.sx-ft-contact { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.sx-ft-contact li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--sx-ink-2); }
.sx-ft-contact .material-symbols-outlined { font-size: 17px; color: var(--sx-red-soft); }
.sx-ft-contact a:hover { color: #fff; }
.sx-ft-phone { font-weight: 700; letter-spacing: .04em; direction: ltr; unicode-bidi: isolate; }
.sx-ft-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 18px; }
.sx-ft-col h4 {
  margin: 0 0 12px; font-size: 11px; font-weight: 700;
color: var(--sx-ink-4);
}
.sx-ft-col a {
  display: block; padding: 5px 0; font-size: 12.5px; line-height: 1.6;
  color: var(--sx-ink-2); transition: color .18s, transform .18s var(--sx-ease);
}
.sx-ft-col a:hover { color: #fff; transform: translateX(-3px); }
.sx-ft-trust { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
/* نشان اینماد برداشته شد؛ جای آن نشانه‌ی «پرداخت امن» می‌نشیند. */
.sx-ft-pay {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;
  border: 1px solid var(--sx-line-2); border-radius: 12px;
  background: var(--sx-glass); font-size: 11.5px; color: var(--sx-ink-2);
}
.sx-ft-pay .material-symbols-outlined { font-size: 17px; color: var(--sx-green); }
.sx-ft-status {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px;
  border: 1px solid rgba(57, 217, 138, .3); border-radius: 999px;
  background: rgba(57, 217, 138, .08); font-size: 11.5px; color: var(--sx-ink-2); transition: .18s;
}
.sx-ft-status:hover { border-color: rgba(57, 217, 138, .55); color: #fff; }
.sx-ft-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--sx-green); }
.sx-ft-bar {
  margin-top: 30px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .07);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
}
.sx-ft-bar p { margin: 0; font-size: 11.5px; color: var(--sx-ink-4); }
.sx-ft-legal { display: flex; flex-wrap: wrap; gap: 15px; }
.sx-ft-legal a { font-size: 11.5px; color: var(--sx-ink-3); transition: color .18s; }
.sx-ft-legal a:hover { color: #fff; }
@media (max-width: 1020px) {
  .sx-ft-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  .sx-ft-trust { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 16px; }
}
@media (max-width: 700px) {
  .sx-ft { padding: 30px 14px 18px; }
  .sx-ft-top { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .sx-ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-ft-about { max-width: none; }
}
/* ظاهر شدنِ نرم هنگام اسکرول — همان زبان حرکتی صفحه‌ی اصلی.
   نکته‌ی مهم: کلاس sx-reveal را جاوااسکریپت اضافه می‌کند، نه قالب. اگر اسکریپت
   اجرا نشود (یا مرورگر IntersectionObserver نداشته باشد) محتوا از همان ابتدا
   دیده می‌شود؛ برعکسِ روشِ رایج که کارت‌ها با جاوااسکریپتِ خراب نامرئی می‌مانند. */
.sx-reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .55s var(--sx-ease), transform .55s var(--sx-ease);
  will-change: opacity, transform;
}
.sx-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sx-btn-red::after { display: none; }
  /* پشتیبان: اگر به هر دلیل کلاس اضافه شد، محتوا پنهان نماند. */
  .sx-reveal { opacity: 1; transform: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- طرح رایگان (free.php) ------------------------------------- */
/* این بخش داخل همین فایل است و نه یک <style> در بدنه‌ی صفحه، چون asset() با
   filemtime کش را می‌شکند و همه‌ی صفحه‌های فرعی از یک زبان بصری استفاده می‌کنند.

   تایپوگرافیِ این صفحه عمداً از بقیه‌ی صفحه‌های فرعی درشت‌تر و کوبنده‌تر است:
   free.php صفحه‌ی «فروش» است نه صفحه‌ی «متن»، پس تیتر ۹۰۰، فاصله‌ی حرفیِ منفی و
   عددِ غول‌پیکر دارد. برچسب‌های ریزِ لاتین با Space Grotesk نوشته می‌شوند تا
   ستون‌های جدول و نام پلن‌ها حس «برگه‌ی فنی» بدهند؛ متن فارسی همان وزیرمتن
   می‌ماند چون تنها فونتِ برند است. */
.fr-page {
  --fr-tech: 'Space Grotesk', 'Vazirmatn', ui-sans-serif, sans-serif;
  --fr-pad: clamp(22px, 4vw, 42px);
}

/* برچسب کوچکِ بالای هر بخش، با خطِ محوکننده در ادامه‌اش. */
/* برچسب کوچکِ بالای هر بخش. متن فارسی است، پس نه uppercase می‌گیرد و نه
   letter-spacing باز؛ فاصله‌ی حروف، خطِ اتصال حروف فارسی را می‌شکند. خطِ محوِ
   کنارش همان نقش «جداکننده‌ی بخش» را بازی می‌کند که در طرح لاتین می‌کرد. */
.fr-eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 11px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0; color: var(--sx-ink-4);
}
.fr-eyebrow::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--sx-line-2), transparent); }
.fr-sec { margin-top: clamp(36px, 6vw, 64px); }
.fr-sec-h { margin: 0 0 7px; font-size: clamp(21px, 3vw, 30px); font-weight: 700; line-height: 1.35; }
.fr-sec-p { margin: 0 0 22px; max-width: 68ch; font-size: 13.8px; line-height: 2.1; color: var(--sx-ink-3); }

/* ---------- سرصفحه‌ی صفحه‌ی رایگان ------------------------------------- */
.fr-hero {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 2px 0 clamp(28px, 5vw, 44px); padding: var(--fr-pad);
  border: 1px solid var(--sx-line-2); border-radius: 26px;
  background:
    radial-gradient(70% 86% at 88% -16%, rgba(255, 0, 51, .28), transparent 60%),
    radial-gradient(56% 52% at 4% 110%, rgba(124, 58, 237, .15), transparent 64%),
    linear-gradient(168deg, #15060a, #0c0508 54%, #08080a);
  /* سایه‌ی قرمز عمداً نیست (همان خواسته‌ی صفحه‌ی اصلی)؛ عمق با سایه‌ی خنثای تیره. */
  box-shadow: 0 18px 50px -30px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.fr-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .17) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(112% 100% at 88% 0%, #000 6%, transparent 70%);
  mask-image: radial-gradient(112% 100% at 88% 0%, #000 6%, transparent 70%);
}
.fr-hero-in {
  position: relative; z-index: 1; display: grid; align-items: start;
  grid-template-columns: minmax(0, 1.36fr) minmax(0, .8fr); gap: clamp(22px, 4vw, 42px);
}
.fr-h1 { margin: 13px 0 0; font-size: clamp(27px, 4.5vw, 49px); font-weight: 700; line-height: 1.24; }
.fr-h1 em { font-style: normal; color: var(--sx-red-soft); }
.fr-lede { margin: 15px 0 0; max-width: 54ch; font-size: 14.2px; line-height: 2.15; color: var(--sx-ink-2); }

/* عددِ اعتبار: بزرگ‌ترین چیزِ صفحه. سایه‌ی متنی ندارد؛ فقط ملاتِ گرادیانی.
   واحد پول جدا از عدد است، چون روی عدد background-clip:text نشسته و اگر واحد
   هم داخلش بود با text-fill-color شفاف نامرئی می‌شد. */
.fr-amount { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 18px 0 0; }
.fr-amount-n {
  font-size: clamp(40px, 8.2vw, 76px); font-weight: 700; line-height: 1.04;
 font-variant-numeric: tabular-nums; color: #fff;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .fr-amount-n {
    background: linear-gradient(176deg, #fff 24%, #ffa8ba 98%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.fr-amount-u { font-size: 14.5px; font-weight: 700; color: var(--sx-ink-2); }
.fr-amount-u small { display: block; font-size: 11.5px; font-weight: 500; color: var(--sx-ink-4); }

/* دکمه‌های این صفحه بلندتر از دکمه‌های سربرگ‌اند؛ این‌جا فراخوانِ اصلی است. */
.fr-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.fr-cta .sx-btn { height: 42px; padding: 0 20px; font-size: 13.5px; }

.fr-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
/* هم فهرست (سرصفحه‌ی طرح رایگان) و هم span (صفحه‌ی بازگشت از درگاه) قرص‌شکل
   می‌شوند؛ وگرنه spanها بی‌قاب و لخت روی زمینه می‌افتادند. */
.fr-facts li, .fr-facts > span {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
  border: 1px solid var(--sx-line); border-radius: 999px;
  background: rgba(255, 255, 255, .04); font-size: 12px; color: var(--sx-ink-2);
}
.fr-facts .material-symbols-outlined { font-size: 15px; color: var(--sx-ink-4); }
.fr-facts b { font-weight: 700; color: #fff; }

/* کارتِ «خلاصه‌ی طرح» در ستون کنارِ سرصفحه — همان جدولِ کوتاهِ صفحه‌های ابری. */
.fr-sum {
  padding: 18px 18px 8px; border: 1px solid var(--sx-line-2); border-radius: 18px;
  background: rgba(8, 8, 10, .52);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.fr-sum h2 {
  /* عنوان فارسی است؛ letter-spacing باز و uppercase حرف‌ها را از هم می‌پاشد،
     پس فقط با اندازه و رنگِ کم‌رنگ‌تر «برچسب» بودنش را نشان می‌دهیم. */
  margin: 0 0 6px; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0; color: var(--sx-ink-4);
}
.fr-sum dl { margin: 0; }
.fr-sum dl > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-top: 1px solid var(--sx-line);
}
.fr-sum dt { font-size: 12.5px; color: var(--sx-ink-3); }
.fr-sum dd { margin: 0; font-size: 13.2px; font-weight: 700; text-align: end; font-variant-numeric: tabular-nums; }
.fr-sum dd.is-ok { color: var(--sx-green); }
/* ---------- وضعیت اعتبار همین کاربر ------------------------------------ */
.fr-state {
  margin: 0 0 clamp(26px, 4vw, 40px); padding: var(--fr-pad);
  border: 1px solid rgba(57, 217, 138, .26); border-radius: 22px;
  background: linear-gradient(165deg, rgba(57, 217, 138, .08), rgba(255, 255, 255, .014));
}
.fr-state.is-off {
  border-color: var(--sx-line-2);
  background: linear-gradient(165deg, var(--sx-glass), rgba(255, 255, 255, .012));
}
.fr-state-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; }
.fr-state h2 { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.fr-state-n {
  margin: 0; font-size: clamp(26px, 4.4vw, 40px); font-weight: 700;
 line-height: 1.12; font-variant-numeric: tabular-nums;
}
.fr-state-n small { margin-inline-start: 8px; font-size: 13.5px; font-weight: 600; letter-spacing: 0; color: var(--sx-ink-3); }
.fr-state-r { text-align: end; font-size: 12.5px; line-height: 1.9; color: var(--sx-ink-3); }
.fr-state-r b { display: block; font-size: 15px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.fr-state p { margin: 12px 0 0; font-size: 13.2px; line-height: 2.1; color: var(--sx-ink-2); }
.fr-state a:not(.sx-btn) { color: var(--sx-red-soft); border-bottom: 1px solid rgba(255, 92, 122, .28); }
.fr-state a:not(.sx-btn):hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .5); }
.fr-bar { height: 8px; margin: 16px 0 6px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.fr-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #2fbd77, #7ef0bb); }

/* ---------- سه شکلِ «رایگان» ------------------------------------------- */
.fr-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(256px, 1fr)); gap: 14px; }
.fr-kind {
  position: relative; overflow: hidden; padding: 22px;
  border: 1px solid var(--sx-line); border-radius: 18px;
  background: linear-gradient(162deg, var(--sx-glass), rgba(255, 255, 255, .012));
  transition: border-color .2s var(--sx-ease), transform .2s var(--sx-ease);
}
.fr-kind:hover { border-color: var(--sx-line-2); transform: translateY(-2px); }
.fr-kind::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--fr-accent), transparent);
}
.fr-kind { --fr-accent: var(--sx-red-soft); }
.fr-kind.is-always { --fr-accent: #39d98a; }
.fr-kind.is-start { --fr-accent: #7c9cff; }
.fr-kind-ico {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  border: 1px solid var(--sx-line-2); background: var(--sx-glass-2); color: var(--fr-accent);
}
.fr-kind-ico .material-symbols-outlined { font-size: 21px; }
.fr-kind h3 { margin: 13px 0 4px; font-size: 16.5px; font-weight: 700; }
.fr-kind > p { margin: 0 0 12px; font-size: 12.8px; line-height: 2.05; color: var(--sx-ink-3); }
.fr-kind ul { margin: 0; padding: 0; list-style: none; }
.fr-kind li { position: relative; padding-inline-start: 21px; padding-block: 4px; font-size: 12.6px; line-height: 1.95; color: var(--sx-ink-2); }
.fr-kind li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: 4px; font-size: 11.5px; font-weight: 700; color: var(--fr-accent); }
/* ---------- جدول پلن‌های مجاز ------------------------------------------ */
.fr-tbl {
  border: 1px solid var(--sx-line); border-radius: 18px; overflow: hidden;
  background: linear-gradient(162deg, var(--sx-glass), rgba(255, 255, 255, .012));
}
.fr-plans { width: 100%; border-collapse: collapse; font-size: 13.4px; }
.fr-plans th, .fr-plans td { padding: 13px 16px; text-align: start; border-bottom: 1px solid var(--sx-line); }
.fr-plans thead th {
  /* سرستون‌ها فارسی‌اند: بدون فاصله‌ی حروف و بدون uppercase. */
  font-size: 11.5px; font-weight: 700; letter-spacing: 0;
  color: var(--sx-ink-4); background: rgba(255, 255, 255, .03);
}
.fr-plans tbody tr { transition: background .16s var(--sx-ease); }
.fr-plans tbody tr:hover { background: rgba(255, 255, 255, .035); }
.fr-plans tbody tr:last-child td { border-bottom: 0; }
.fr-pid { font-family: var(--fr-tech); font-size: 13px; font-weight: 700; letter-spacing: .02em; direction: ltr; unicode-bidi: isolate; }
.fr-spec { color: var(--sx-ink-2); font-variant-numeric: tabular-nums; }
.fr-pr { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fr-pr small { margin-inline-start: 5px; font-size: 11.5px; font-weight: 500; color: var(--sx-ink-4); }
.fr-hrs { white-space: nowrap; color: var(--sx-ink-3); font-variant-numeric: tabular-nums; }
.fr-hrs small { margin-inline-start: 5px; font-size: 11.5px; color: var(--sx-ink-4); }
.fr-tbl-foot { padding: 13px 16px; border-top: 1px solid var(--sx-line); background: rgba(255, 255, 255, .02); font-size: 12.2px; line-height: 2; color: var(--sx-ink-3); }

/* ---------- گام‌های کار ------------------------------------------------- */
.fr-steps {
  counter-reset: fr; margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(188px, 1fr)); gap: 12px;
}
.fr-steps li {
  padding: 18px; border: 1px solid var(--sx-line); border-radius: 16px;
  background: var(--sx-glass); font-size: 12.8px; line-height: 2.05; color: var(--sx-ink-3);
}
.fr-steps li::before {
  counter-increment: fr; content: counter(fr, persian);
  display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 11px;
  border-radius: 10px; border: 1px solid rgba(255, 92, 122, .32); background: rgba(255, 0, 51, .1);
  font-size: 13px; font-weight: 700; color: #fff;
}
.fr-steps b { display: block; margin-bottom: 3px; font-size: 13.4px; font-weight: 700; color: var(--sx-ink); }

/* ---------- پرسش‌های پرتکرار ------------------------------------------- */
.fr-faq { display: grid; gap: 10px; }
.fr-faq details { border: 1px solid var(--sx-line); border-radius: 14px; background: var(--sx-glass); }
.fr-faq details[open] { border-color: var(--sx-line-2); }
.fr-faq summary {
  display: flex; align-items: center; gap: 10px; padding: 15px 18px; cursor: pointer;
  font-size: 13.6px; font-weight: 700; list-style: none;
}
.fr-faq summary::-webkit-details-marker { display: none; }
.fr-faq summary::after {
  content: "+"; margin-inline-start: auto; font-family: var(--fr-tech);
  font-size: 18px; font-weight: 500; color: var(--sx-ink-3);
  transition: transform .2s var(--sx-ease);
}
.fr-faq details[open] summary::after { transform: rotate(45deg); }
.fr-faq p { margin: 0; padding: 0 18px 16px; font-size: 12.9px; line-height: 2.15; color: var(--sx-ink-2); }
.fr-faq a { color: var(--sx-red-soft); border-bottom: 1px solid rgba(255, 92, 122, .28); }
.fr-faq a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .5); }
/* ---------- یادداشت و نوار پایانی -------------------------------------- */
.fr-note {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0 0 20px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--sx-line-2); background: var(--sx-glass);
  font-size: 13px; line-height: 2; color: var(--sx-ink-2);
}
.fr-note.is-ok { border-color: rgba(57, 217, 138, .34); background: rgba(57, 217, 138, .07); }
.fr-note.is-bad { border-color: rgba(255, 92, 122, .34); background: rgba(255, 0, 51, .07); }
.fr-note .material-symbols-outlined { font-size: 19px; line-height: 1.7; }
.fr-band {
  margin-top: clamp(34px, 6vw, 62px); padding: var(--fr-pad); text-align: center;
  border: 1px solid var(--sx-line-2); border-radius: 24px;
  background:
    radial-gradient(74% 128% at 50% 112%, rgba(255, 0, 51, .2), transparent 66%),
    linear-gradient(168deg, #120509, #08080a);
}
.fr-band h2 { margin: 0 0 8px; font-size: clamp(21px, 3.4vw, 31px); font-weight: 700; line-height: 1.35; }
.fr-band p { margin: 0 auto 4px; max-width: 56ch; font-size: 13.4px; line-height: 2.1; color: var(--sx-ink-3); }
.fr-band .fr-cta { justify-content: center; }

@media (max-width: 900px) {
  .fr-hero-in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  /* ستون «کافی برای» اول حذف می‌شود؛ نام پلن، مشخصات و قیمت مهم‌ترند. */
  .fr-plans th:nth-child(4), .fr-plans td:nth-child(4) { display: none; }
}
@media (max-width: 640px) {
  .fr-hero { border-radius: 18px; }
  .fr-band { border-radius: 18px; }
  .fr-plans th, .fr-plans td { padding: 11px 12px; }
  .fr-state-r { text-align: start; }
}