/* ══════════════════════════════════════════════════════════════
   LegoVPN — سیستم طراحی برند
   رنگ‌ها و تایپوگرافی مستقیماً از کاورهای اینستاگرام استخراج شده.
   تغییر برند = فقط عوض کردن متغیرهای :root
   ══════════════════════════════════════════════════════════════ */

/* ─────── فونت برند: Vazirmatn (SIL OFL) ───────
   خودمیزبان است، نه از CDN — هم چون CDNهای فونت از ایران قابل اتکا
   نیستند و همان مشتری‌ای که هنوز VPN ندارد صفحه را بی‌فونت می‌بیند،
   هم چون یک درخواست به دامنه‌ی سوم، سرعت اولین بارگذاری را می‌گیرد.
   font-display:swap یعنی متن بلافاصله با فونت جایگزین دیده می‌شود و
   بعد به Vazirmatn سوییچ می‌کند — صفحه هیچ‌وقت خالی نمی‌ماند. */
@font-face{
  font-family:'Vazirmatn';
  src:url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src:url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src:url('../fonts/Vazirmatn-ExtraBold.woff2') format('woff2');
  font-weight:800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src:url('../fonts/Vazirmatn-Black.woff2') format('woff2');
  font-weight:900; font-style:normal; font-display:swap;
}

:root{
  /* پس‌زمینه‌های سرمه‌ای */
  --ink:        #050B1F;
  --ink-2:      #0A1433;
  --surface:    #0E1836;
  --surface-2:  #14204A;
  --line:       #1E2A55;

  /* طلایی برند — رنگ اصلی */
  --gold:       #FFC107;
  --gold-lt:    #FFDD73;
  --gold-dk:    #E09600;

  /* آبی برند — رنگ دوم */
  --blue:       #2E7DFF;
  --blue-lt:    #6BA5FF;

  /* مجنتا — فقط برای VIP */
  --magenta:    #FF2E88;

  /* وضعیت */
  --green:      #22DD88;
  --red:        #FF4D6A;

  --text:       #FFFFFF;
  --muted:      #9FB0D4;
  --dim:        #5F6E92;

  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-pill: 999px;

  --glow-gold:    0 0 24px rgba(255,193,7,.35);
  --glow-blue:    0 0 24px rgba(46,125,255,.40);
  --glow-magenta: 0 0 24px rgba(255,46,136,.35);

  --font: 'Vazirmatn','IRANSansX','IRANSans','Segoe UI',Tahoma,sans-serif;
  --mono: 'Cascadia Mono','Consolas','SF Mono',monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  background:var(--ink);
  color:var(--text);
  line-height:1.85;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* بافت شش‌ضلعی + هاله‌های نوری — امضای بصری کاورها */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='none' stroke='%231A2A5E' stroke-width='1'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5z'/%3E%3Cpath d='M13.99 -15.75l13 7.5v15l-13 7.5L1 6.75v-15l12.99-7.5zM13.99 34.25l13 7.5v15l-13 7.5L1 56.75v-15l12.99-7.5z'/%3E%3C/g%3E%3C/svg%3E");
  opacity:.5;
}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 45% at 80% 0%,   rgba(46,125,255,.22), transparent 70%),
    radial-gradient(50% 40% at 15% 12%,  rgba(255,193,7,.10),  transparent 70%),
    radial-gradient(70% 50% at 50% 100%, rgba(46,125,255,.14), transparent 70%),
    linear-gradient(180deg, rgba(5,11,31,.72), rgba(5,11,31,.92));
}

.wrap{width:min(1180px,92vw);margin-inline:auto}
.wrap-sm{width:min(560px,92vw);margin-inline:auto}
.wrap-md{width:min(860px,92vw);margin-inline:auto}
section{padding:88px 0;position:relative}
.pt-0{padding-top:0}

/* ═══════════ هدر ═══════════ */
header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(5,11,31,.82);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:28px;padding:16px 0}
.logo{font-size:1.6rem;font-weight:900;letter-spacing:-.5px;white-space:nowrap;
  color:var(--text);text-decoration:none}
.logo b{color:var(--gold)}
/* دکمه‌ی منو فقط روی عرض کم دیده می‌شود. برچسبش متن است نه آیکون، تا
   روی صفحه‌ی خرید هیچ ابهامی نداشته باشد. */
.nav-toggle{
  display:none;margin-inline-start:auto;
  padding:8px 15px;border-radius:var(--r-pill);cursor:pointer;
  background:rgba(20,32,74,.7);border:1.5px solid var(--line);
  color:var(--text);font-family:inherit;font-weight:700;font-size:.9rem;
}
.nav-toggle:hover{border-color:var(--gold);color:var(--gold)}

.nav-links{display:flex;gap:26px;margin-inline-start:auto}
.nav-links a{color:var(--muted);text-decoration:none;font-weight:600;font-size:.95rem;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--gold)}
.nav-cta{display:flex;gap:10px;align-items:center}

/* شناسه‌ی کاربر وارد‌شده در هدر */
.user-chip{
  display:flex;align-items:center;gap:10px;padding:7px 8px 7px 16px;
  border-radius:var(--r-pill);background:rgba(20,32,74,.7);
  border:1.5px solid var(--line);font-size:.9rem;font-weight:700;
}
.user-chip .av{
  width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold-lt),var(--gold));color:#2A1A00;font-weight:900;
}
.user-chip .bal{color:var(--gold)}

/* ═══════════ دکمه‌ها ═══════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 30px;border-radius:var(--r-pill);
  font-family:inherit;font-weight:800;font-size:1rem;
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:transform .18s, box-shadow .18s, background .18s, border-color .18s;
}
.btn:hover{transform:translateY(-2px)}
.btn:disabled,.btn.is-disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-gold{background:linear-gradient(135deg,var(--gold-lt),var(--gold));color:#2A1A00;box-shadow:var(--glow-gold)}
.btn-gold:hover{box-shadow:0 0 34px rgba(255,193,7,.55)}
/* ⚠️ متن سفید روی این آبی روشن کنتراست ۲٫۴۸ می‌داد. آبی را تیره‌تر
   کردیم تا سفید روی آن خوانا شود، بدون اینکه رنگ برند عوض شود. */
.btn-blue{background:linear-gradient(135deg,#1F5FCC,#14459A);color:#fff;box-shadow:var(--glow-blue)}
.btn-blue:hover{box-shadow:0 0 34px rgba(46,125,255,.6)}
/* همان ایراد روی صورتی: سفید روی #FF6BAA کنتراست ۲٫۶۵ داشت. */
.btn-magenta{background:linear-gradient(135deg,#C4165F,#8E0F44);color:#fff;box-shadow:var(--glow-magenta)}
.btn-magenta:hover{box-shadow:0 0 34px rgba(255,46,136,.55)}
.btn-ghost{border-color:var(--line);color:var(--text);background:rgba(20,32,74,.5)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue-lt)}
.btn-white{background:#fff;color:#1A1A1A}
.btn-white:hover{box-shadow:0 0 26px rgba(255,255,255,.25)}
.btn-sm{padding:9px 20px;font-size:.9rem}
.btn-lg{padding:16px 40px;font-size:1.08rem}
.btn-block{width:100%}

/* ═══════════ قرص‌های ویژگی ═══════════ */
.pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 18px;border-radius:var(--r-pill);
  background:rgba(14,24,54,.85);border:1.5px solid var(--line);
  font-size:.9rem;font-weight:700;color:var(--text);
}
.pill svg{width:17px;height:17px;flex:none}
.pill.is-gold{border-color:rgba(255,193,7,.5);box-shadow:0 0 16px rgba(255,193,7,.16)}
.pill.is-gold svg{color:var(--gold)}
.pill.is-blue{border-color:rgba(46,125,255,.5);box-shadow:0 0 16px rgba(46,125,255,.18)}
.pill.is-blue svg{color:var(--blue-lt)}
.pill.is-green{border-color:rgba(34,221,136,.45);color:var(--green)}

/* ═══════════ کارت عمومی ═══════════ */
.card{
  padding:30px;border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(20,32,74,.9),rgba(10,20,51,.94));
  border:1.5px solid var(--line);
}
.card-tight{padding:22px;border-radius:var(--r)}
.card-title{margin:0 0 6px;font-size:1.2rem;font-weight:800}
.card-sub{margin:0 0 22px;color:var(--muted);font-size:.93rem}

/* ═══════════ تیتر بخش‌ها ═══════════ */
.sec-head{text-align:center;margin-bottom:52px}
.sec-head h2{font-size:clamp(1.7rem,4vw,2.7rem);font-weight:900;margin:0 0 12px}
.sec-head h2 .gold{color:var(--gold)}
.sec-head p{color:var(--muted);margin:0;font-size:1.02rem}
.page-head{padding:52px 0 34px;text-align:center}
.page-head h1{font-size:clamp(1.9rem,4.5vw,3rem);font-weight:900;margin:0 0 10px}
.page-head h1 .gold{color:var(--gold)}
.page-head p{color:var(--muted);margin:0}

/* ═══════════ کارت‌های قیمت ═══════════ */
/* ⚠️ قبلاً گرید با حداقل عرض ۲۶۸ پیکسل بود و فقط چهار کارت در یک ردیف
   جا می‌شد، پس پلن پنجم (۲۵۰ گیگ) تنها می‌افتاد خط بعد و انگار از
   مجموعه بیرون بود.

   چرا فلکس و نه گرید: تعداد پلن‌های حجمی پنج است و پنج عدد اولی است،
   یعنی هیچ تقسیم تمیزی روی چند ردیف ندارد. با گرید، در هر عرضی که پنج
   تا جا نشوند حتماً یکی تنها می‌ماند و چسبیده به لبه‌ی شروع می‌نشیند.
   فلکس با justify-content:center کاری می‌کند که اگر جایی شکست، کارتِ
   جامانده وسط بنشیند و عمدی به نظر برسد، نه رهاشده.

   پایه‌ی ۱۶۰ پیکسل عمداً کوچک است تا هر پنج کارت تا حدود ۹۰۰ پیکسل در
   یک ردیف بمانند. */
.plans{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:16px;align-items:stretch;
}
.plans > .plan{flex:1 1 160px;max-width:300px}
.plan{
  position:relative;display:flex;flex-direction:column;
  padding:38px 26px 28px;border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(20,32,74,.92),rgba(10,20,51,.95));
  border:2px solid var(--line);
  text-align:center;transition:transform .22s, box-shadow .22s;
}
.plan:hover{transform:translateY(-6px)}
.plan .term{color:var(--muted);font-size:1.05rem;font-weight:700;margin-bottom:6px}
.plan .icon-top{font-size:1.5rem;line-height:1;margin-bottom:10px}
.plan .price{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:6px 0 4px}
.plan .price .num{font-size:4.1rem;font-weight:900;line-height:1;letter-spacing:-2px}
.plan .price .unit{font-size:1.15rem;font-weight:800;color:var(--gold)}
.plan .toman{color:var(--muted);font-size:.85rem;margin-bottom:20px}
.plan .quota{
  display:inline-block;padding:9px 26px;border-radius:var(--r-pill);
  background:rgba(5,11,31,.7);border:1.5px solid var(--line);
  font-weight:800;font-size:1rem;margin-bottom:14px;
}
/* --dim اینجا ۳٫۱۶ می‌داد؛ این متن قیمت است و باید خوانا باشد. */
.plan .per-gb{color:var(--muted);font-size:.82rem;margin-bottom:20px}
.plan .btn{margin-top:auto}
.plan-badge{
  position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  padding:6px 20px;border-radius:var(--r-pill);
  font-size:.85rem;font-weight:900;white-space:nowrap;
}
.plan.v-blue{border-color:rgba(46,125,255,.55);box-shadow:0 0 30px rgba(46,125,255,.14)}
.plan.v-blue:hover{box-shadow:0 0 44px rgba(46,125,255,.3)}
.plan.v-blue .price .num{color:#fff}
.plan.v-gold{border-color:var(--gold);box-shadow:0 0 40px rgba(255,193,7,.22)}
.plan.v-gold:hover{box-shadow:0 0 56px rgba(255,193,7,.38)}
.plan.v-gold .price .num{color:#fff;text-shadow:0 0 26px rgba(255,193,7,.5)}
.plan.v-gold .plan-badge{background:linear-gradient(135deg,var(--gold-lt),var(--gold));color:#2A1A00;box-shadow:var(--glow-gold)}
.plan.v-gold .quota{border-color:rgba(255,193,7,.45)}
.plan.v-vip{border-color:rgba(255,46,136,.6);box-shadow:0 0 34px rgba(255,46,136,.16)}
.plan.v-vip:hover{box-shadow:0 0 48px rgba(255,46,136,.32)}
.plan.v-vip .price .num{color:#fff;text-shadow:0 0 26px rgba(255,46,136,.45)}
.plan.v-vip .price .unit{color:var(--magenta)}
.plan.v-vip .plan-badge{background:linear-gradient(135deg,#C4165F,#8E0F44);color:#fff;box-shadow:var(--glow-magenta)}
.plan.v-vip .quota{border-color:rgba(255,46,136,.4)}
/* کارت‌های صفحه‌ی پلن‌ها: چون حالا پنج‌تایی در یک ردیف می‌نشینند، پدینگ
   و اندازه‌ها جمع‌تر شده‌اند تا هیچ‌جا متن نشکند یا سرریز کند. */
/* ═══════════ نمایش/پنهان کردن رمز ═══════════
   دکمه داخل خودِ فیلد می‌نشیند. چون فیلدهای رمز is-ltr هستند و متن از
   چپ شروع می‌شود، دکمه سمت راست می‌آید تا روی نقطه‌های رمز نیفتد. */
.field.has-pw-toggle{position:relative}
.field.has-pw-toggle .input{padding-inline-end:52px}
.pw-toggle{
  position:absolute;inset-inline-end:6px;bottom:6px;
  width:42px;height:42px;padding:0;
  display:grid;place-items:center;cursor:pointer;
  background:transparent;border:none;border-radius:var(--r-sm);
  color:var(--dim);transition:color .18s,background .18s;
}
.pw-toggle:hover{color:var(--muted);background:rgba(255,255,255,.05)}
.pw-toggle:focus-visible{outline:2px solid var(--blue-lt);outline-offset:-2px}
.pw-toggle svg{width:21px;height:21px}
/* خط روی چشم فقط وقتی رمز پنهان است دیده می‌شود */
.pw-toggle .pw-slash{opacity:1;transition:opacity .18s}
.pw-toggle.is-on{color:var(--gold)}
.pw-toggle.is-on .pw-slash{opacity:0}
/* اگر فیلد خطا دارد، پیام خطا زیر فیلد است و دکمه نباید رویش بیفتد */
.field.has-pw-toggle .field-error{padding-inline-end:52px}

/* ═══════════ صفحه‌ی تأیید ایمیل ═══════════
   تیک با انیمیشن کشیده می‌شود، ولی خودِ نشانه از اول کامل روی صفحه است
   و انیمیشن فقط روی طول خط اجرا می‌شود. اگر جاوااسکریپت یا انیمیشن کار
   نکند، مشتری همچنان تیک کامل را می‌بیند. */
.verify-mark{width:88px;height:88px;margin:0 auto}
.verify-mark svg{width:100%;height:100%;fill:none;
  stroke:var(--green);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.verify-mark circle{opacity:.35}
.verify-mark.is-bad svg{stroke:var(--gold)}

@media (prefers-reduced-motion:no-preference){
  .verify-mark circle{stroke-dasharray:151;stroke-dashoffset:151;
    animation:vm-ring .55s cubic-bezier(.4,0,.2,1) forwards}
  .verify-mark path{stroke-dasharray:40;stroke-dashoffset:40;
    animation:vm-tick .4s cubic-bezier(.4,0,.2,1) .45s forwards}
}
@keyframes vm-ring{to{stroke-dashoffset:0}}
@keyframes vm-tick{to{stroke-dashoffset:0}}

.verify-next{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
}
.verify-next a{
  color:var(--muted);text-decoration:none;font-size:.92rem;font-weight:700;
  /* ارتفاع حداقل ۴۴ پیکسل تا روی گوشی قابل زدن باشد */
  display:inline-flex;align-items:center;min-height:44px;padding:0 4px;
  transition:color .2s;
}
.verify-next a:hover{color:var(--gold)}

/* ═══════════ کارت تست رایگان ═══════════
   عمداً از بقیه پررنگ‌تر است. این نقطه‌ی ورود کسی است که هنوز تصمیم
   نگرفته، و قبلاً فقط یک لینک متنی ۲۴ پیکسلی بود که عملاً دیده نمی‌شد. */
.plan--trial{
  border-color:var(--gold);
  background:
    linear-gradient(160deg, rgba(255,193,7,.16), rgba(20,32,74,.95) 62%);
  box-shadow:0 0 0 1px rgba(255,193,7,.35), 0 10px 30px rgba(255,193,7,.10);
}
.plan--trial .plan-badge{
  background:linear-gradient(135deg,var(--gold-lt),var(--gold));
  color:#2A1A00;box-shadow:var(--glow-gold);
}
.plan--trial .price .num{color:var(--gold)}
.plan--trial .price .unit{color:var(--gold-lt)}
.plan--trial .quota{border-color:rgba(255,193,7,.45)}

/* ═══════════ آمار واقعی ═══════════
   عددها از دیتابیس می‌آیند. هیچ‌کدام گرد یا بزرگ‌نمایی نشده‌اند. */
.proof{
  display:flex;justify-content:center;flex-wrap:wrap;gap:10px 40px;
}
.proof__item{text-align:center}
.proof__item b{
  display:block;font-size:1.9rem;font-weight:900;line-height:1.2;
  color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:-.5px;
}
.proof__item span{color:var(--muted);font-size:.86rem}

.plan.is-sm{padding:28px 14px 20px}
.plan.is-sm .price .num{font-size:2.5rem;letter-spacing:-1.5px}
.plan.is-sm .price .unit{font-size:1rem}
.plan.is-sm .term{font-size:.95rem}
.plan.is-sm .quota{padding:8px 14px;font-size:.92rem}
.plan.is-sm .per-gb{font-size:.76rem;margin-bottom:16px}
.plan.is-sm .btn{padding:11px 14px;font-size:.92rem}
.plan.is-sm .plan-badge{padding:5px 14px;font-size:.78rem}

/* ═══════════ تب‌ها ═══════════ */
.tabs{
  display:inline-flex;gap:6px;padding:6px;border-radius:var(--r-pill);
  background:rgba(14,24,54,.8);border:1.5px solid var(--line);margin-bottom:44px;
}
.tab{
  padding:11px 30px;border-radius:var(--r-pill);border:none;cursor:pointer;
  background:transparent;color:var(--muted);font-family:inherit;
  font-weight:800;font-size:.97rem;transition:all .2s;white-space:nowrap;
}
.tab:hover{color:var(--text)}
.tab.active{background:linear-gradient(135deg,var(--gold-lt),var(--gold));color:#2A1A00;box-shadow:var(--glow-gold)}
.tab-panel{display:none}
.tab-panel.active{display:block}
.tabs-center{text-align:center}

/* ═══════════ فرم‌ها ═══════════ */
.field{margin-bottom:20px}
.field label{display:block;margin-bottom:9px;font-weight:700;font-size:.94rem}
.field .hint{color:var(--dim);font-size:.83rem;margin-top:7px}
.input{
  width:100%;padding:14px 18px;border-radius:var(--r-sm);
  background:rgba(5,11,31,.7);border:1.5px solid var(--line);
  color:var(--text);font-family:inherit;font-size:1rem;
  transition:border-color .2s, box-shadow .2s;
}
.input::placeholder{color:var(--dim)}
.input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,193,7,.13)}

/* ─── خطای همان فیلد ───
   خطای بالای صفحه برای فرمی با چند فیلد کافی نیست: کاربر می‌فهمد چیزی
   غلط است ولی نه اینکه کدام. این کادر را قرمز می‌کند و دلیل را دقیقاً
   زیر همان فیلد می‌نویسد. */
.input.is-error{border-color:var(--red);background:rgba(255,77,106,.06)}
.input.is-error:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(255,77,106,.15)}
.field-error{
  display:flex;align-items:flex-start;gap:6px;
  margin-top:7px;color:#FFC4CE;font-size:.85rem;line-height:1.7;
}
.field-error::before{content:'⚠';flex:none;color:var(--red)}
.field label .req{color:var(--red)}
.input.is-ltr{direction:ltr;text-align:left;font-family:var(--mono);letter-spacing:.5px}
select.input{cursor:pointer}

/* جداکننده‌ی «یا» */
.or{display:flex;align-items:center;gap:16px;margin:26px 0;color:var(--dim);font-size:.88rem}
.or::before,.or::after{content:'';flex:1;height:1px;background:var(--line)}

/* ═══════════ تقویم شمسی ═══════════ */
.jcal{
  position:absolute;z-index:60;top:calc(100% + 8px);inset-inline-start:0;
  width:min(320px,92vw);padding:14px;border-radius:var(--r);
  background:#0B1430;border:1.5px solid var(--line);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
}
.jcal[hidden]{display:none}
.jcal__head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;font-weight:800;font-size:.98rem;
}
.jcal__nav{
  width:32px;height:32px;border-radius:10px;cursor:pointer;
  background:rgba(20,32,74,.9);border:1px solid var(--line);
  color:var(--text);font-size:1.15rem;line-height:1;font-family:inherit;
}
.jcal__nav:hover{border-color:var(--gold);color:var(--gold)}
.jcal__nav:focus-visible{outline:2px solid var(--blue-lt);outline-offset:2px}
.jcal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.jcal__w{
  display:grid;place-items:center;height:28px;
  color:var(--dim);font-size:.76rem;font-weight:700;
}
.jcal__d{
  display:grid;place-items:center;height:36px;border-radius:9px;cursor:pointer;
  background:transparent;border:1px solid transparent;color:var(--text);
  font-family:inherit;font-size:.9rem;font-variant-numeric:tabular-nums;
  transition:background .15s,border-color .15s;
}
.jcal__d:hover:not(.is-off){background:rgba(46,125,255,.18);border-color:rgba(46,125,255,.4)}
.jcal__d:focus-visible{outline:2px solid var(--blue-lt);outline-offset:1px}
.jcal__d.is-today{border-color:rgba(46,125,255,.55)}
.jcal__d.is-on{
  background:linear-gradient(135deg,var(--gold-lt),var(--gold));
  color:#2A1A00;font-weight:900;border-color:var(--gold);
}
/* روزهای آینده: تاریخ واریز نمی‌تواند جلوتر از امروز باشد */
.jcal__d.is-off{color:#33406B;cursor:not-allowed}
.jcal__foot{margin-top:12px;text-align:center}
.jcal__today{
  padding:7px 20px;border-radius:var(--r-pill);cursor:pointer;
  background:rgba(255,193,7,.12);border:1px solid rgba(255,193,7,.4);
  color:var(--gold);font-family:inherit;font-weight:700;font-size:.85rem;
}
.jcal__today:hover{background:rgba(255,193,7,.22)}

/* ═══════════ جعبه‌ی کپی (کانفیگ / شماره کارت) ═══════════ */
.copy-box{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:var(--r-sm);
  background:rgba(5,11,31,.85);border:1.5px solid var(--line);
}
.copy-box code{
  flex:1;direction:ltr;text-align:left;font-family:var(--mono);
  font-size:.86rem;color:var(--blue-lt);word-break:break-all;line-height:1.6;
}
.copy-box.is-card code{font-size:1.35rem;letter-spacing:3px;color:var(--gold);font-weight:700}
.copy-btn{
  flex:none;padding:9px 16px;border-radius:var(--r-pill);cursor:pointer;
  background:rgba(46,125,255,.15);border:1.5px solid rgba(46,125,255,.45);
  color:var(--blue-lt);font-family:inherit;font-weight:700;font-size:.85rem;
  transition:all .2s;
}
.copy-btn:hover{background:rgba(46,125,255,.3)}
.copy-btn.done{background:rgba(34,221,136,.18);border-color:rgba(34,221,136,.5);color:var(--green)}

/* ═══════════ هشدارها ═══════════ */
.alert{
  display:flex;gap:13px;padding:16px 20px;border-radius:var(--r-sm);
  font-size:.93rem;line-height:1.75;margin-bottom:22px;
}
.alert .ai{flex:none;font-size:1.15rem;line-height:1.5}
.alert-info{background:rgba(46,125,255,.1);border:1.5px solid rgba(46,125,255,.35);color:#CFE0FF}
.alert-warn{background:rgba(255,193,7,.1);border:1.5px solid rgba(255,193,7,.38);color:#FFE9A8}
.alert-ok{background:rgba(34,221,136,.1);border:1.5px solid rgba(34,221,136,.35);color:#B6F5D8}
.alert-err{background:rgba(255,77,106,.1);border:1.5px solid rgba(255,77,106,.35);color:#FFC4CE}

/* ═══════════ نوار پیشرفت مصرف ═══════════ */
.progress{height:9px;border-radius:var(--r-pill);background:rgba(5,11,31,.8);
  border:1px solid var(--line);overflow:hidden}
.progress i{display:block;height:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--blue),var(--blue-lt))}
.progress.is-warn i{background:linear-gradient(90deg,var(--gold-dk),var(--gold))}
.progress.is-danger i{background:linear-gradient(90deg,#CC2E4E,var(--red))}
.progress-row{display:flex;justify-content:space-between;font-size:.85rem;
  color:var(--muted);margin-bottom:8px}

/* ═══════════ جدول ═══════════ */
.table{width:100%;border-collapse:collapse;font-size:.92rem}
.table th{
  text-align:right;padding:13px 16px;color:var(--muted);font-weight:700;
  font-size:.85rem;border-bottom:1.5px solid var(--line);white-space:nowrap;
}
.table td{padding:15px 16px;border-bottom:1px solid rgba(30,42,85,.55)}
.table tr:last-child td{border-bottom:none}
.table tr:hover td{background:rgba(20,32,74,.35)}
.amt-in{color:var(--green);font-weight:700;direction:ltr;display:inline-block}
.amt-out{color:var(--red);font-weight:700;direction:ltr;display:inline-block}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ═══════════ نشان وضعیت ═══════════ */
.tag{
  display:inline-block;padding:4px 13px;border-radius:var(--r-pill);
  font-size:.79rem;font-weight:800;white-space:nowrap;
}
.tag-ok{background:rgba(34,221,136,.15);color:var(--green);border:1px solid rgba(34,221,136,.4)}
.tag-wait{background:rgba(255,193,7,.15);color:var(--gold);border:1px solid rgba(255,193,7,.4)}
.tag-off{background:rgba(255,77,106,.13);color:var(--red);border:1px solid rgba(255,77,106,.35)}
.tag-dim{background:rgba(95,110,146,.15);color:var(--dim);border:1px solid rgba(95,110,146,.35)}

.status-dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--green);box-shadow:0 0 10px var(--green);margin-inline-end:7px;
}

/* ═══════════ مرحله‌شمار (شارژ کیف پول) ═══════════ */
.stepper{display:flex;align-items:center;gap:8px;margin-bottom:38px;justify-content:center;flex-wrap:wrap}
.stepper .s{display:flex;align-items:center;gap:10px;color:var(--dim);font-weight:700;font-size:.92rem}
.stepper .s .n{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:rgba(20,32,74,.8);border:1.5px solid var(--line);
  font-size:.9rem;font-weight:900;
}
.stepper .s.active{color:var(--text)}
.stepper .s.active .n{background:linear-gradient(135deg,var(--gold-lt),var(--gold));
  color:#2A1A00;border-color:var(--gold);box-shadow:var(--glow-gold)}
.stepper .s.done .n{background:rgba(34,221,136,.2);border-color:rgba(34,221,136,.5);color:var(--green)}
.stepper .bar{width:38px;height:2px;background:var(--line);border-radius:2px}

/* ═══════════ مبلغ‌های آماده ═══════════ */
.amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.amount{
  padding:18px 12px;border-radius:var(--r-sm);cursor:pointer;text-align:center;
  background:rgba(5,11,31,.6);border:1.5px solid var(--line);
  font-family:inherit;color:var(--text);transition:all .2s;
}
.amount:hover{border-color:var(--blue)}
.amount.active{border-color:var(--gold);background:rgba(255,193,7,.1);box-shadow:0 0 18px rgba(255,193,7,.2)}
.amount b{display:block;font-size:1.35rem;font-weight:900}
.amount span{color:var(--muted);font-size:.8rem}

/* ═══════════ گزینه‌های تمدید ═══════════ */
/*  هر گزینه یک <button type=submit> است، نه یک کارت با onclick — تا بدون
    هیچ جاوااسکریپتی کار کند و با CSP سخت‌گیر این سایت هم‌خوان باشد.  */
.renew-opts{display:grid;gap:12px}
.renew-opt{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;padding:18px 20px;border-radius:var(--r-sm);cursor:pointer;
  background:rgba(5,11,31,.6);border:1.5px solid var(--line);
  font-family:inherit;color:var(--text);text-align:start;transition:all .2s;
}
.renew-opt:hover{border-color:var(--gold);background:rgba(255,193,7,.07)}
.renew-opt:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.renew-opt__name{font-weight:800;font-size:1.02rem}
.renew-opt__price{text-align:end;white-space:nowrap;font-size:.9rem;color:var(--muted)}
.renew-opt__price b{display:block;font-size:1.15rem;font-weight:900;color:var(--gold);
  font-variant-numeric:tabular-nums}
.renew-opt__back{display:block;font-style:normal;font-size:.78rem;color:var(--green);margin-top:2px}
.renew-opt__short{display:block;font-style:normal;font-size:.78rem;color:var(--red);margin-top:2px}
/*  گزینه‌ی گران‌تر از موجودی غیرفعال نمی‌شود: کاربر باید بتواند بزندش و به
    صفحه‌ی شارژ برود. فقط کم‌رنگ‌تر است تا اول ارزان‌ترها را ببیند.  */
.renew-opt.is-short{opacity:.62}
.renew-opt.is-short:hover{opacity:1;border-color:var(--red)}
@media(max-width:420px){
  .renew-opt{flex-direction:column;align-items:stretch;gap:8px}
  .renew-opt__price{text-align:start}
}

/* ═══════════ موجودی کیف پول ═══════════ */
.balance{
  text-align:center;padding:44px 30px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(46,125,255,.16),rgba(255,193,7,.1));
  border:1.5px solid rgba(255,193,7,.35);margin-bottom:34px;
}
.balance .lbl{color:var(--muted);font-size:.95rem;margin-bottom:8px}
.balance .val{font-size:clamp(2.4rem,7vw,3.6rem);font-weight:900;line-height:1.2;
  color:var(--gold);text-shadow:0 0 32px rgba(255,193,7,.4)}
.balance .val small{font-size:1.1rem;font-weight:700;color:var(--muted)}
.balance .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}

/* ═══════════ کارت اکانت ═══════════ */
.acc{margin-bottom:22px}
.acc-head{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:20px}
.acc-head h3{margin:0;font-size:1.22rem;font-weight:800}
.acc-head .sub{color:var(--dim);font-size:.85rem}
.acc-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.acc-meta .m{padding:14px 16px;border-radius:var(--r-sm);
  background:rgba(5,11,31,.55);border:1px solid var(--line)}
.acc-meta .m .k{color:var(--muted);font-size:.8rem;margin-bottom:4px}
.acc-meta .m .v{font-weight:800;font-size:1.05rem}
.acc-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.qr-slot{
  width:150px;height:150px;flex:none;border-radius:var(--r-sm);
  background:#fff;display:grid;place-items:center;color:#050B1F;
  font-size:.78rem;font-weight:700;text-align:center;padding:10px;
}

/* ═══════════ ویژگی‌ها ═══════════ */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.feature{
  text-align:center;padding:32px 22px;border-radius:var(--r);
  background:rgba(14,24,54,.62);border:1.5px solid var(--line);
  transition:border-color .22s, transform .22s;
}
.feature:hover{border-color:rgba(46,125,255,.5);transform:translateY(-4px)}
.feature .ico{
  width:58px;height:58px;margin:0 auto 16px;border-radius:16px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(46,125,255,.2),rgba(46,125,255,.06));
  border:1.5px solid rgba(46,125,255,.35);
}
.feature .ico svg{width:27px;height:27px;color:var(--blue-lt)}
.feature.is-gold .ico{
  background:linear-gradient(135deg,rgba(255,193,7,.2),rgba(255,193,7,.06));
  border-color:rgba(255,193,7,.4);
}
.feature.is-gold .ico svg{color:var(--gold)}
.feature h4{margin:0 0 8px;font-size:1.1rem;font-weight:800}
.feature p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.7}

/* ═══════════ سه مرحله ═══════════ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{position:relative;padding:34px 26px 28px;border-radius:var(--r);
  background:rgba(14,24,54,.62);border:1.5px solid var(--line)}
.step .n{
  position:absolute;top:-19px;inset-inline-start:26px;
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;font-weight:900;font-size:1.2rem;
  background:linear-gradient(135deg,var(--gold-lt),var(--gold));color:#2A1A00;
  box-shadow:var(--glow-gold);
}
.step h4{margin:10px 0 8px;font-size:1.12rem;font-weight:800}
.step p{margin:0;color:var(--muted);font-size:.93rem}

/* ═══════════ سرورها ═══════════ */
.servers{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.server-card{
  display:flex;align-items:center;gap:18px;
  padding:22px 26px;border-radius:var(--r);
  background:linear-gradient(135deg,rgba(20,32,74,.9),rgba(14,24,54,.9));
  border:1.5px solid var(--line);
}
.server-card .flag{font-size:2.5rem;line-height:1}
.server-card h4{margin:0 0 4px;font-size:1.15rem;font-weight:800}
.server-card span{color:var(--muted);font-size:.9rem}
.server-card.is-new{border-color:rgba(255,193,7,.55);box-shadow:var(--glow-gold)}

/* ═══════════ سؤالات متداول ═══════════ */
.faq{max-width:820px;margin-inline:auto}
.faq details{
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:rgba(14,24,54,.62);margin-bottom:12px;overflow:hidden;
}
.faq details[open]{border-color:rgba(255,193,7,.4)}
.faq summary{
  padding:18px 22px;cursor:pointer;font-weight:700;font-size:1rem;
  list-style:none;display:flex;align-items:center;gap:12px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  content:'+';color:var(--gold);font-size:1.4rem;font-weight:900;
  line-height:1;transition:transform .2s;
}
.faq details[open] summary::before{content:'−'}
.faq .a{padding:0 22px 20px;color:var(--muted);font-size:.95rem;line-height:1.9}

/* ═══════════ راهنمای مرحله‌ای ═══════════ */
.howto{counter-reset:ht}
.howto li{
  position:relative;list-style:none;padding:0 54px 26px 0;
  border-inline-start:2px solid var(--line);margin-inline-start:17px;
}
.howto li:last-child{border-inline-start-color:transparent;padding-bottom:0}
.howto li::before{
  counter-increment:ht;content:counter(ht);
  position:absolute;inset-inline-start:-19px;top:-4px;
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold-lt),var(--gold));color:#2A1A00;
  font-weight:900;font-size:.95rem;box-shadow:var(--glow-gold);
}
.howto h4{margin:0 0 6px;font-size:1.05rem;font-weight:800}
.howto p{margin:0;color:var(--muted);font-size:.93rem}
.howto code{background:rgba(5,11,31,.8);padding:2px 8px;border-radius:6px;
  font-family:var(--mono);font-size:.85rem;color:var(--blue-lt);direction:ltr;display:inline-block}

/* ═══════════ نوار پایانی ═══════════ */
.cta-band{
  text-align:center;padding:56px 34px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(46,125,255,.16),rgba(255,193,7,.1));
  border:1.5px solid rgba(255,193,7,.35);
}
.cta-band h2{font-size:clamp(1.5rem,3.6vw,2.3rem);font-weight:900;margin:0 0 12px}
.cta-band p{color:var(--muted);margin:0 0 28px}

/* ═══════════ فوتر ═══════════ */
footer{border-top:1px solid var(--line);padding:44px 0 34px;margin-top:20px}
.foot{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between}
.foot-links{display:flex;flex-wrap:wrap;gap:22px}
.foot-links a{color:var(--muted);text-decoration:none;font-size:.92rem}
.foot-links a:hover{color:var(--gold)}
/* --dim روی این پس‌زمینه ۳٫۸۵ می‌داد؛ --muted به ۷ می‌رساند. */
.copy{color:var(--muted);font-size:.86rem;text-align:center;margin-top:26px}

/* ═══════════ کمکی ═══════════ */
.gold{color:var(--gold)}
.muted{color:var(--muted)}
.center{text-align:center}
.mt-0{margin-top:0}.mt-1{margin-top:12px}.mt-2{margin-top:24px}.mt-3{margin-top:36px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:12px}.mb-2{margin-bottom:24px}.mb-3{margin-bottom:36px}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row-between{display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between;align-items:center}
.hidden{display:none !important}

/* ═══════════ کد تخفیف ═══════════ */
.disc{margin-bottom:16px}
.disc summary{
  cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  color:var(--muted);font-size:.92rem;font-weight:700;
}
.disc summary::-webkit-details-marker{display:none}
.disc summary::before{
  content:'';width:9px;height:9px;flex:none;
  border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;
  transform:rotate(45deg);transition:transform .2s;
}
.disc[open] summary::before{transform:rotate(225deg)}
.disc summary:hover{color:var(--gold)}
.disc__body{padding-top:10px}
.disc__body .input{text-transform:uppercase}

/* ═══════════ برگشت به بالا ═══════════
   روی موبایل نوار بالا دیگر نمی‌چسبد، پس مشتری برای رسیدن به منو باید
   تا اول صفحه اسکرول کند. این دکمه همان کار را یک‌ضربه‌ای می‌کند.
   فقط بعد از اسکرول واقعی ظاهر می‌شود تا وسط صفحه‌ی اول ننشیند. */
.to-top{
  position:fixed;inset-inline-end:16px;bottom:16px;z-index:60;
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:var(--gold);color:#2A1A00;border:none;
  box-shadow:0 4px 18px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .22s,transform .22s,visibility .22s;
}
.to-top.is-on{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--gold-lt)}
.to-top:focus-visible{outline:2px solid #fff;outline-offset:3px}
.to-top svg{width:22px;height:22px}
@media (prefers-reduced-motion:reduce){
  .to-top{transition:opacity .01ms}
}

/* ═══════════ نقاط شکست چیدمان ═══════════
   ⚠️ قبلاً همه‌ی این گریدها auto-fit بودند، یعنی با هر چند پیکسل تغییر
   عرض پنجره تعداد ستون‌ها عوض می‌شد و آیتم‌ها مدام جابه‌جا می‌شدند.
   حالا فقط در دو نقطه عوض می‌شوند: زیر ۱۰۲۴ و زیر ۶۴۰ پیکسل. بینشان
   کارت‌ها کشیده یا جمع می‌شوند ولی جایشان ثابت می‌ماند. */
@media (max-width:1024px){
  .features{grid-template-columns:repeat(2,1fr)}
  .amounts,.acc-meta{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .features,.steps,.servers{grid-template-columns:1fr}
  .amounts,.acc-meta{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:760px){
  section{padding:62px 0}
  /* ⚠️ روی موبایل نوار بالا چسبیده می‌ماند و از ارتفاع کم صفحه یک تکه‌ی
     دائمی می‌گیرد. اینجا عادی اسکرول می‌شود و به‌جایش دکمه‌ی «برگشت به
     بالا» راه سریع را می‌دهد. */
  header{position:static;backdrop-filter:none}
  /* ⚠️ هشت هدف لمسی زیر ۴۴ پیکسل بودند، از جمله لینک اکانت تست با
     ارتفاع ۲۴ پیکسل. روی گوشی زدنشان سخت بود. */
  .foot-links a{display:inline-block;padding:11px 0}
  .faq summary{padding-block:20px}
  a.gold{display:inline-block;padding:9px 0}
  .nav-toggle{padding:11px 16px}
  .nav{gap:14px;flex-wrap:wrap}
  .nav-toggle{display:block}
  .nav-cta{margin-inline-start:0}
  /* لینک‌ها زیر نوار باز می‌شوند، نه اینکه غیب شوند */
  .nav-links{
    display:none;order:9;flex-basis:100%;flex-direction:column;gap:0;
    margin-inline-start:0;margin-top:6px;padding-top:10px;
    border-top:1px solid var(--line);
  }
  .nav-links.is-open{display:flex}
  .nav-links a{padding:12px 2px;font-size:1rem}
  .plan .price .num{font-size:3.4rem}
  .card{padding:22px}
  .tab{padding:10px 18px;font-size:.9rem}
  .copy-box.is-card code{font-size:1.05rem;letter-spacing:1.5px}
}