/* =========================================================
   glass.css — تم «لیکویید گلس»
   آخرین فایل استایل هر صفحه است و فقط ظاهر سطح‌ها را عوض می‌کند
   (بدون تغییر در چیدمان). برای برگشت به ظاهر قبلی، لینک آن را بردارید.
   ========================================================= */
:root {
  /* شیشه‌ی شفاف به سبک iOS: پر کردن خیلی کم، محو + اشباع رنگ زیاد، لبه‌ی نورانی */
  --g-fill: linear-gradient(140deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, .035) 42%, rgba(255, 255, 255, .02) 60%, rgba(255, 255, 255, .07) 100%);
  --g-fill-soft: linear-gradient(140deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .025));
  --g-blur: blur(20px) saturate(2.1) brightness(1.08) contrast(1.02);
  --g-edge: rgba(255, 255, 255, .22);
  --g-edge-soft: rgba(255, 255, 255, .1);
  /* لبه‌ی نورانی: بالا-چپ روشن، پایین-راست ملایم + درخشش داخلی نرم */
  --g-shine: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(255, 255, 255, .16),
             inset 7px 9px 16px -10px rgba(255, 255, 255, .34), inset -7px -9px 16px -12px rgba(255, 255, 255, .12);
  --g-drop: 0 18px 44px -18px rgba(0, 0, 0, .55), 0 2px 8px -2px rgba(0, 0, 0, .25);
}

/* ---------- پس‌زمینه‌ی رنگی تا شیشه چیزی برای شکستن نور داشته باشد ---------- */
body::before, body::after { opacity: .34; }
html::before {
  content: ""; display: none; position: fixed; z-index: -1; left: 30vw; top: 38vh; width: 38vmax; height: 38vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(121, 80, 255, .9), transparent 66%); opacity: .2; pointer-events: none;
  animation: aurora-b 30s ease-in-out infinite reverse; will-change: transform;
}
html.tab-hidden::before { animation-play-state: paused; }

/* ---------- سطح‌های اصلی (با محو کردن پشت) ---------- */
.nav, .mobile-menu, .glass, .chip, .store-tabs, .feature, .price-card:not(.is-featured), .step-inner,
.faq details, .pcard, .cat-tile, .auth-card, .auth-back, .auth-tabs, .modal, .toast, .about-points li, .to-top {
  background: var(--g-fill); background-color: rgba(18, 15, 30, .28);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge-soft);
  box-shadow: var(--g-shine), var(--g-drop);
}
.nav { background-color: rgba(20, 16, 34, .34); border-color: rgba(255, 255, 255, .16); border-radius: 18px; }
.site-header.is-compact .nav { background-color: rgba(16, 13, 28, .5); border-color: rgba(255, 255, 255, .18); }
.mobile-menu { background-color: rgba(16, 13, 28, .6); border-radius: 18px; }
.glass { border-radius: var(--radius-lg, 22px); }
.chip, .cat-tile, .about-points li, .auth-back { border-radius: 999px; }
.chip { border-radius: 16px; }
.auth-card { border-radius: 26px; background-color: rgba(20, 16, 34, .4); }
.auth-card::before { opacity: .55; }
.store-tabs { border-radius: 16px; }
.faq details { border-radius: 16px; }
.faq details[open] { background-color: rgba(28, 22, 46, .42); border-color: rgba(255, 255, 255, .2); }
.modal { background-color: rgba(18, 15, 30, .62); border-radius: 22px; }
.toast { background-color: rgba(20, 16, 34, .6); border-radius: 999px; }

/* کارت «مراحل» با لبه‌ی بریده: لبه‌ی گرادیانی روشن‌تر و داخل شیشه‌ای */
.step { background: linear-gradient(115deg, rgba(255, 255, 255, .5), rgba(var(--accent-rgb, 243, 60, 192), .32) 45%, rgba(var(--accent2-rgb, 67, 73, 255), .42)); }
.step-inner { background: var(--g-fill); background-color: rgba(14, 12, 24, .5); border: 0; box-shadow: var(--g-shine); }
.step:hover { filter: drop-shadow(0 20px 34px rgba(var(--accent-rgb, 243, 60, 192), .3)); }

/* کارت محبوب: حاشیه‌ی چرخان می‌ماند، داخلش کمی روشن‌تر */
.price-card.is-featured {
  background: linear-gradient(rgba(30, 24, 52, .92), rgba(20, 16, 36, .92)) padding-box,
              conic-gradient(from var(--ang), #4349FF, #F33CC0, #b79bff, #4349FF) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 30px 60px -30px rgba(var(--accent-rgb, 243, 60, 192), .55);
}

/* ---------- سطح‌های داخلی (بدون محو، برای جلوگیری از سنگین شدن) ---------- */
.plan-option label, .star-pack label, .gift-item label, .pay-option label, .pay-card, .detail-meta li, .acc-order,
.recent-codes button, .input-wrap, .select-wrap select, .textarea-wrap textarea, .filter-chip, .qty-btn, .gallery-main, .ticker-item, .pcard-go, .pay-ico {
  background: var(--g-fill-soft); background-color: rgba(255, 255, 255, .025);
  border: 1px solid var(--g-edge-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(255, 255, 255, .03);
}
.plan-option input:checked + label, .star-pack input:checked + label, .gift-item input:checked + label, .pay-option input:checked + label {
  background: linear-gradient(135deg, rgba(var(--accent-rgb, 243, 60, 192), .22), rgba(var(--accent2-rgb, 67, 73, 255), .2)); background-color: transparent;
  border-color: rgba(255, 154, 217, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 16px 34px -18px rgba(var(--accent-rgb, 243, 60, 192), .85);
}
.input-wrap:focus-within, .textarea-wrap textarea:focus, .select-wrap select:focus-visible { background-color: rgba(255, 255, 255, .06); border-color: rgba(255, 154, 217, .7); }
.float-field input {
  background: var(--g-fill-soft); background-color: rgba(10, 8, 18, .4);
  border-color: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 8px 18px -12px rgba(0, 0, 0, .6);
}
.float-field input:focus { background-color: rgba(10, 8, 18, .55); }
.pw-bars i { background: rgba(255, 255, 255, .14); }

/* ---------- دکمه‌ها ---------- */
.btn-outline, .btn-ghost, .nav-actions .btn-outline {
  background: linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02)) padding-box, linear-gradient(#171226, #171226) padding-box, var(--grad-label) border-box;
}
.btn-outline:hover, .btn-ghost:hover, .nav-actions .btn-outline:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)) padding-box, linear-gradient(#211734, #211734) padding-box, var(--grad-label) border-box;
}
.btn-primary { box-shadow: 0 12px 30px -12px rgba(181, 13, 97, .95), inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -8px 16px -10px rgba(0, 0, 0, .35); }
.btn-primary:hover { box-shadow: 0 16px 36px -12px rgba(181, 13, 97, 1), inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -8px 16px -10px rgba(0, 0, 0, .3); }
.nav-ink { background: linear-gradient(135deg, rgba(255, 255, 255, .2), rgba(var(--accent-rgb, 243, 60, 192), .2) 55%, rgba(var(--accent2-rgb, 67, 73, 255), .24)); border-color: rgba(255, 255, 255, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 26px -8px rgba(var(--accent-rgb, 243, 60, 192), .6); }
.nav-ink.is-hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }

/* ---------- هاور: شیشه کمی روشن‌تر می‌شود ---------- */
.glass:hover, .feature:hover, .pcard:hover, .faq details:hover, .cat-tile:hover, .chip:hover {
  border-color: rgba(255, 255, 255, .28);
  box-shadow: var(--g-shine), 0 30px 60px -28px rgba(121, 80, 255, .55);
}

/* ---------- سازگاری ---------- */
/* مرورگرهای بدون backdrop-filter: زمینه‌ی کمی مات‌تر */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav, .mobile-menu, .glass, .chip, .store-tabs, .feature, .price-card, .step-inner, .faq details, .pcard, .cat-tile, .auth-card, .modal, .toast, .about-points li { background-color: rgba(20, 16, 34, .88); }
}
@media (prefers-reduced-transparency: reduce) {
  .nav, .mobile-menu, .glass, .chip, .store-tabs, .feature, .price-card, .step-inner, .faq details, .pcard, .cat-tile, .auth-card, .modal, .toast, .about-points li {
    -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(20, 16, 34, .92);
  }
}
/* موبایل: هاله‌ی ثابت پس‌زمینه نیست (روان‌تر)؛ از ۷۶۸px نمایش داده می‌شود */
@media (min-width: 768px) { html::before { display: block; } }
@media (prefers-reduced-motion: reduce) { html::before { animation: none; } }

/* =========================================================
   لایه‌ی iOS: شفاف‌تر، گردتر و طبیعی‌تر
   ========================================================= */
.nav, .mobile-menu, .glass, .chip, .store-tabs, .feature, .price-card:not(.is-featured), .step-inner,
.faq details, .pcard, .cat-tile, .auth-card, .auth-back, .auth-tabs, .modal, .toast, .about-points li, .to-top {
  background-color: rgba(30, 24, 50, .12);
  border-color: rgba(255, 255, 255, .09);
}
/* نوبار كپسولی مثل iOS */
.nav { border-radius: 999px; background-color: rgba(28, 22, 46, .16); border-color: rgba(255, 255, 255, .12); padding-inline: 14px 18px; }
.site-header.is-compact .nav { background-color: rgba(22, 18, 38, .34); }
.nav-ink { border-radius: 999px; }
.nav-actions .btn, .btn { border-radius: 999px; }
.nav-toggle { border-radius: 50%; background: var(--g-fill-soft); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .4), inset -1px -1px 0 rgba(255, 255, 255, .12); }
.mobile-menu { border-radius: 28px; background-color: rgba(22, 18, 38, .4); }
.mobile-menu a:not(.btn) { border-radius: 16px; }
.glass, .feature, .auth-card { border-radius: 28px; }
.price-card { border-radius: 28px; }
.pcard { border-radius: 24px; }
.faq details { border-radius: 22px; }
.store-tabs { border-radius: 999px; }
.store-tab { border-radius: 999px; }
.tab-ink { border-radius: 999px; background: linear-gradient(135deg, rgba(var(--accent-rgb, 243, 60, 192), .85), rgba(var(--accent2-rgb, 67, 73, 255), .85)); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .55), 0 8px 22px -8px rgba(181, 13, 97, .9); }
.modal { border-radius: 30px; background-color: rgba(24, 19, 40, .5); }
.auth-tabs { border-radius: 999px; }
.auth-tabs a { border-radius: 999px; }
.auth-card { background-color: rgba(28, 22, 46, .22); }
.auth-card::before { display: none; }
.float-field input, .input-wrap, .select-wrap select, .textarea-wrap textarea { border-radius: 18px; }
.plan-option label, .star-pack label, .pay-option label, .detail-meta li, .acc-order { border-radius: 20px; }
.gift-item label { border-radius: 22px; }
.filter-chip { border-radius: 999px; }

/* دکمه‌ی اصلی: حباب شیشه‌ای رنگی */
.btn-primary {
  box-shadow: 0 12px 28px -12px rgba(181, 13, 97, .9), inset 1px 1px 0 rgba(255, 255, 255, .55), inset -1px -1px 0 rgba(255, 255, 255, .2), inset 0 -10px 18px -12px rgba(0, 0, 0, .35);
}
.btn-outline, .btn-ghost, .nav-actions .btn-outline {
  background: linear-gradient(140deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)) padding-box, linear-gradient(rgba(30, 24, 50, .9), rgba(30, 24, 50, .9)) padding-box, linear-gradient(140deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .12) 50%, rgba(255, 255, 255, .3)) border-box;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25);
}
.btn-outline:hover, .btn-ghost:hover, .nav-actions .btn-outline:hover {
  background: linear-gradient(140deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .06)) padding-box, linear-gradient(rgba(38, 30, 62, .9), rgba(38, 30, 62, .9)) padding-box, linear-gradient(140deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .45)) border-box;
}

/* برجستگی هنگام هاور و فشردن: مثل حباب واقعی */
.glass, .feature, .pcard, .cat-tile, .chip, .faq details { transition: transform .5s var(--spring), box-shadow .4s, border-color .3s, background-color .3s; }
.pcard:hover, .cat-tile:hover { transform: translateY(-6px) scale(1.012); }
.pcard:active, .cat-tile:active, .gift-item label:active, .plan-option label:active, .star-pack label:active { transform: scale(.975); }
.glass:hover, .feature:hover, .pcard:hover, .faq details:hover, .cat-tile:hover, .chip:hover {
  border-color: rgba(255, 255, 255, .16);
  box-shadow: var(--g-shine), 0 26px 56px -26px rgba(121, 80, 255, .5);
}

/* درخشش نور بالای کارت‌ها با حرکت ماوس (از فایل fx استفاده می‌کند) */
[data-spot]::before, .gift-item label::before, .plan-option label::before, .star-pack label::before, .faq details::before, .chip::before {
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .16), rgba(255, 255, 255, .04) 45%, transparent 68%);
}

/* پس‌زمینه: رنگ‌های زنده‌تر تا شیشه غنی‌تر دیده شود */
body::before { opacity: .42; }
body::after { opacity: .4; }
html::before { opacity: .26; }

/* =========================================================
   تنظیم نهایی: گردی کمتر، شفافیت بیشتر، کارت‌های سرویس شیشه‌ای
   ========================================================= */
:root {
  --g-fill: linear-gradient(140deg, rgba(255, 255, 255, .075) 0%, rgba(255, 255, 255, .02) 45%, rgba(255, 255, 255, .012) 60%, rgba(255, 255, 255, .045) 100%);
  --g-fill-soft: linear-gradient(140deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
  --g-blur: blur(16px) saturate(2.2) brightness(1.1);
  --g-shine: inset 1px 1px 0 rgba(255, 255, 255, .42), inset -1px -1px 0 rgba(255, 255, 255, .12),
             inset 6px 8px 14px -10px rgba(255, 255, 255, .28), inset -6px -8px 14px -12px rgba(255, 255, 255, .1);
  --r-lg: 20px; --r-md: 14px; --r-sm: 12px;
}
.nav, .mobile-menu, .glass, .chip, .store-tabs, .feature, .price-card:not(.is-featured), .step-inner,
.faq details, .pcard, .cat-tile, .auth-card, .auth-back, .auth-tabs, .about-points li, .to-top {
  background-color: rgba(30, 24, 50, .05);
  border-color: rgba(255, 255, 255, .08);
}
.nav { background-color: rgba(28, 22, 46, .08); }
.site-header.is-compact .nav { background-color: rgba(22, 18, 38, .3); }
.mobile-menu { background-color: rgba(22, 18, 38, .34); }
.modal { background-color: rgba(24, 19, 40, .42); }
.toast { background-color: rgba(24, 19, 40, .4); }
.auth-card { background-color: rgba(28, 22, 46, .14); }

/* گردی کمتر */
.nav { border-radius: var(--r-lg); }
.nav-ink { border-radius: var(--r-md); }
.nav-actions .btn, .btn { border-radius: var(--r-md); }
.nav-toggle { border-radius: var(--r-md); }
.mobile-menu { border-radius: var(--r-lg); }
.mobile-menu a:not(.btn) { border-radius: var(--r-md); }
.glass, .feature, .auth-card, .price-card, .modal { border-radius: var(--r-lg); }
.pcard { border-radius: var(--r-lg); }
.faq details { border-radius: var(--r-md); }
.store-tabs { border-radius: var(--r-md); }
.store-tab, .tab-ink { border-radius: var(--r-sm); }
.auth-tabs { border-radius: var(--r-md); }
.auth-tabs a { border-radius: var(--r-sm); }
.float-field input, .input-wrap, .select-wrap select, .textarea-wrap textarea { border-radius: var(--r-md); }
.plan-option label, .star-pack label, .pay-option label, .detail-meta li, .acc-order { border-radius: var(--r-md); }
.gift-item label { border-radius: var(--r-md); }
.filter-chip, .cat-tile, .about-points li { border-radius: var(--r-md); }
.chip { border-radius: var(--r-md); }
.auth-back { border-radius: var(--r-md); }
.toast { border-radius: var(--r-md); }
.auth-card .btn-primary { border-radius: var(--r-md); }

/* ---------- سرویس‌ها: کارت شیشه‌ای با رنگ مخصوص هر مرحله ---------- */
.step { background: none; padding: 0; clip-path: none; border-radius: var(--r-lg); --tint: 67, 73, 255; }
.step:nth-child(2) { --tint: 243, 60, 192; }
.step:nth-child(3) { --tint: 121, 80, 255; }
.step-inner {
  clip-path: none; border-radius: var(--r-lg); border: 1px solid rgba(255, 255, 255, .08);
  background: radial-gradient(120% 90% at 100% 0%, rgba(var(--tint), .26), rgba(var(--tint), 0) 62%), var(--g-fill);
  background-color: rgba(var(--tint), .035);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  box-shadow: var(--g-shine), var(--g-drop);
}
.step:hover { filter: none; }
.step:hover .step-inner { border-color: rgba(255, 255, 255, .18); box-shadow: var(--g-shine), 0 26px 54px -26px rgba(var(--tint), .75); }
.step h3 { color: #fff; }
.step-num { color: rgba(255, 255, 255, .55); }

/* =========================================================
   اصلاحات چیدمان + شفافیت بیشتر
   ========================================================= */
/* هیرو: لبه‌ی پایین دیگر تصویر و نور را نمی‌برد (فقط محور افقی بریده می‌شود) */
.hero { overflow: visible; overflow-x: clip; }
.hero-stars { overflow: hidden; }
.ticker { position: relative; z-index: 1; }

/* نوار گیفت‌ها */
.ticker-item { border-radius: 12px; }
.ticker-art { border-radius: 10px; }

/* فاصله‌ی بین بخش‌ها */
:root { --section-gap: clamp(2.6rem, 5.5vw, 4.4rem); }
.section-head { margin-bottom: 1.9rem; }
.ticker { margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.site-footer { margin-top: clamp(2.6rem, 5.5vw, 4.4rem); }

/* محصولات پرطرفدار: وسط صفحه */
@media (min-width: 768px) { .featured-grid { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 290px)); justify-content: center; } }

/* شفاف‌تر */
:root {
  --g-fill: linear-gradient(140deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, .012) 45%, rgba(255, 255, 255, .008) 60%, rgba(255, 255, 255, .035) 100%);
  --g-fill-soft: linear-gradient(140deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01));
  --g-blur: blur(12px) saturate(2.3) brightness(1.12);
}
.nav, .mobile-menu, .glass, .chip, .store-tabs, .feature, .price-card:not(.is-featured), .step-inner,
.faq details, .pcard, .cat-tile, .auth-card, .auth-back, .auth-tabs, .about-points li, .to-top {
  background-color: rgba(30, 24, 50, .02);
  border-color: rgba(255, 255, 255, .07);
}
.nav { background-color: rgba(28, 22, 46, .03); }
.site-header.is-compact .nav { background-color: rgba(22, 18, 38, .24); }
.mobile-menu { background-color: rgba(22, 18, 38, .26); }
.modal { background-color: rgba(24, 19, 40, .3); }
.toast { background-color: rgba(24, 19, 40, .32); }
.auth-card { background-color: rgba(28, 22, 46, .08); }
.step-inner { background-color: rgba(var(--tint), .02); }
.faq details[open] { background-color: rgba(28, 22, 46, .14); }
.pcard { background-image: var(--g-fill); }

/* عملکرد: نورهای پس‌زمینه ثابت‌اند تا شیشه‌ها در هر فریم دوباره محو نشوند */
body::before, body::after, html::before { animation: none !important; will-change: auto; }

/* سبک‌سازی: محو کردن فقط برای سطح‌های بزرگ؛ آیتم‌های ریز فقط شفاف‌اند */
/* موبایل: محو کمتر برای روان‌تر بودن؛ از ۷۶۸px محوِ کامل‌تر */
:root { --g-blur: blur(9px) saturate(1.6); }
@media (min-width: 768px) { :root { --g-blur: blur(12px) saturate(1.7); } }
.faq details, .about-points li, .cat-tile, .to-top, .auth-back {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background-color: rgba(36, 30, 60, .34);
}
.faq details[open] { background-color: rgba(40, 32, 66, .42); }
.reveal-pending { filter: none; }
@keyframes stagger-in { from { opacity: 0; transform: translateY(30px) scale(.96); } }

/* =========================================================
   نوبار: هاور ساده (فقط هنگام ورود ماوس انیمیشن دارد، خروج آنی است)
   ========================================================= */
.nav-ink { display: none !important; }
@keyframes nav-hover-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.nav-links a { padding: 7px 13px; border-radius: var(--r-sm); background: transparent; box-shadow: none; transition: none; }
.nav-links a:hover, .nav-links a:focus-visible {
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
  animation: nav-hover-in .16s ease-out;
}
.nav-links a.is-active, .nav-links a.is-active:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(var(--accent-rgb, 243, 60, 192), .22) 55%, rgba(var(--accent2-rgb, 67, 73, 255), .24));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 6px 18px -8px rgba(var(--accent-rgb, 243, 60, 192), .6);
  animation: none;
}
@media (prefers-reduced-motion: reduce) { .nav-links a:hover, .nav-links a:focus-visible { animation: none; } }

/* =========================================================
   سوالات متداول: سبک و روان (بدون سایه‌ی بزرگ و لایه‌ی اضافه هنگام باز و بسته شدن)
   ========================================================= */
.faq details, .faq details:hover, .faq details[open] {
  isolation: auto; overflow: hidden; contain: layout paint;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: rgba(40, 32, 66, .3);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: border-color .2s, background-color .2s;
  transform: none;
}
.faq details:hover { border-color: rgba(255, 255, 255, .2); }
.faq details[open] { background: rgba(48, 38, 78, .42); border-color: rgba(255, 154, 217, .3); }
.faq details::before { display: none; }
.faq .answer { overflow: hidden; will-change: height; }
.faq summary svg { transition: transform .25s var(--ease), color .2s; }
.faq.stagger > *, .faq.stagger.in-view > * { animation: none; opacity: 1; transform: none; filter: none; }
.faq summary:focus-visible { outline-offset: -3px; }
.nav-links a { white-space: nowrap; }
.nav-links { gap: 0; }

/* =========================================================
   لیبل بخش‌ها: جلوه‌ی ساده و بدون پرش (بدون المان اضافه)
   ========================================================= */
.label::after { display: none !important; animation: none !important; }
.label {
  overflow: visible; isolation: auto;
  background: linear-gradient(110deg, #7a1fd0, #d6289a 50%, #7a1fd0); background-size: 200% 100%;
  animation: label-shift 7s linear infinite;
  box-shadow: 0 6px 18px -10px rgba(var(--accent-rgb, 243, 60, 192), .9), inset 0 1px 0 rgba(255, 255, 255, .35);
}
@keyframes label-shift { to { background-position: -200% 0; } }
.is-offscreen .label, html.tab-hidden .label { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .label { animation: none; } }

/* =========================================================
   فوتر: لینک‌ها وسط و نزدیک به نوار پایینی (بدون لوگو)
   ========================================================= */
.site-footer { margin-top: clamp(2rem, 4vw, 3rem); }
.footer-top { justify-content: center; padding-block: .2rem 1.1rem; }
.footer-links { justify-content: center; }
.footer-bottom .container { min-height: 72px; }

/* پاسخ FAQ: فقط opacity/transform انیمیشن می‌شود */
.faq .answer { will-change: opacity, transform; }

/* FAQ: عناصر زیرین با transform می‌لغزند؛ نیازی به will-change روی پاسخ نیست */
.faq .answer { will-change: auto; }
.faq details { contain: layout style; overflow: hidden; }

/* فوتر: متن و آیکون‌ها وسط */
.footer-bottom .container { flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: .55rem; min-height: 0; padding-block: 1.1rem; }
.footer-bottom .copyright { text-align: center; }
.footer-bottom .socials { justify-content: center; }

/* =========================================================
   فاصله‌ی یکسان و کم بین همه‌ی بخش‌ها
   ========================================================= */
:root { --section-gap: clamp(1.6rem, 3.4vw, 2.4rem); }
.section, .section#faq { padding-block: var(--section-gap) 0 !important; }
.ticker { margin-top: var(--section-gap); margin-bottom: 0; }
.site-footer { margin-top: var(--section-gap); }
.section-head { margin-bottom: 1.4rem; }
.about, .section.about { padding-block: var(--section-gap) 0 !important; }

/* =========================================================
   درباره ما: نور پس‌زمینه دیگر داخل جعبه‌ی بخش بریده نمی‌شود
   ========================================================= */
.about { overflow: visible; }
.about::before {
  inset: auto; left: 50%; top: 50%; width: min(1000px, 130%); height: min(740px, 130%);
  max-width: 100vw; transform: translate(-50%, -50%);
  background: url("../assets/img/glow-wide.webp") center / contain no-repeat;
  opacity: .7;
}
.about .container { position: relative; z-index: 1; }
.about .btn-lg { margin-top: 1.4rem; }
.disclaimer { margin-top: 1rem; }

/* =========================================================
   شخصی‌سازی از پنل: سبک، شفافیت و گردی (با data-attribute روی <html>)
   ========================================================= */
html[data-radius="sm"] { --r-lg: 12px; --r-md: 8px; --r-sm: 6px; }
html[data-radius="lg"] { --r-lg: 28px; --r-md: 20px; --r-sm: 14px; }
html[data-glass="clear"] { --g-blur: blur(8px) saturate(2.4) brightness(1.14); }
html[data-glass="frosted"] { --g-blur: blur(24px) saturate(1.5); }
html[data-glass="clear"] :is(.nav, .mobile-menu, .glass, .chip, .store-tabs, .feature, .price-card, .step-inner, .pcard, .auth-card, .modal, .toast) { background-color: rgba(30, 24, 50, 0); }
html[data-glass="frosted"] :is(.nav, .mobile-menu, .glass, .chip, .store-tabs, .feature, .price-card:not(.is-featured), .step-inner, .pcard, .auth-card, .modal, .toast) { background-color: rgba(26, 21, 44, .52); }
html[data-style="solid"] :is(.nav, .mobile-menu, .glass, .chip, .store-tabs, .feature, .price-card:not(.is-featured), .step-inner, .pcard, .cat-tile, .auth-card, .auth-back, .auth-tabs, .modal, .toast, .about-points li, .faq details, .to-top) {
  -webkit-backdrop-filter: none; backdrop-filter: none; background: #171329; background-color: #171329;
  border-color: rgba(255, 255, 255, .1); box-shadow: 0 14px 34px -20px rgba(0, 0, 0, .85);
}
html[data-style="solid"] .step { background: none; }
html[data-style="solid"] .step-inner { background: radial-gradient(120% 90% at 100% 0%, rgba(var(--tint), .18), rgba(var(--tint), 0) 62%), #171329; }
html[data-style="solid"] body::before, html[data-style="solid"] body::after, html[data-style="solid"]::before { display: none; }

/* نوار حالت تعمیر و شعار فوتر */
.maint-bar { padding: .55rem 1rem; text-align: center; font-size: 13.5px; font-weight: 600; color: #fff; background: linear-gradient(90deg, rgba(240, 160, 32, .92), rgba(243, 60, 92, .92)); position: relative; z-index: 60; }
.footer-tagline { text-align: center; color: var(--text-soft); font-size: 13.5px; padding-block: .3rem; }

/* صفحه پشتیبانی و حساب */
.sp-card, .sp-thread { border-radius: var(--r-lg); }

/* =========================================================
   دکمه‌ی شیشه‌ای (btn-ghost): لیکویید گلس واقعی؛ تابع شخصی‌سازی پنل
   (شفافیت clear/normal/frosted، سبک glass/solid، رنگ‌های اصلی و گردی گوشه‌ها)
   ========================================================= */
.btn-ghost {
  background:
    radial-gradient(130% 170% at 14% -24%, rgba(255, 255, 255, .46), rgba(255, 255, 255, 0) 48%),
    radial-gradient(90% 120% at 100% 120%, rgba(var(--accent2-rgb, 67, 73, 255), .28), rgba(var(--accent2-rgb, 67, 73, 255), 0) 60%),
    linear-gradient(135deg, rgba(var(--accent-rgb, 243, 60, 192), .15), rgba(var(--accent2-rgb, 67, 73, 255), .12)),
    var(--g-fill);
  background-color: rgba(255, 255, 255, .03);
  border: 1px solid var(--g-edge, rgba(255, 255, 255, .22));
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  box-shadow: var(--g-shine), 0 14px 30px -16px rgba(0, 0, 0, .65);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
  transition: transform .45s var(--spring, cubic-bezier(.22, .8, .24, 1)), box-shadow .35s, background-color .3s, border-color .3s;
}
.btn-ghost:hover {
  background-color: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .42);
  box-shadow: var(--g-shine), 0 18px 38px -14px rgba(var(--accent2-rgb, 67, 73, 255), .65), 0 0 22px -8px rgba(var(--accent-rgb, 243, 60, 192), .45);
  transform: translateY(-3px) scale(1.02);
}
.btn-ghost:active { transform: translateY(0) scale(.97); }
.btn-ghost.btn-lg { min-height: 56px; padding-inline: 28px; }
html[data-glass="clear"] .btn-ghost { background-color: rgba(255, 255, 255, 0); border-color: rgba(255, 255, 255, .3); }
html[data-glass="frosted"] .btn-ghost { background-color: rgba(26, 21, 44, .5); }
html[data-style="solid"] .btn-ghost {
  -webkit-backdrop-filter: none; backdrop-filter: none; background: #171329; background-color: #171329; border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 12px 26px -18px rgba(0, 0, 0, .85); text-shadow: none;
}
html[data-style="solid"] .btn-ghost:hover { background: #1f1a38; background-color: #1f1a38; }
@media (prefers-reduced-motion: reduce) { .btn-ghost, .btn-ghost:hover, .btn-ghost:active { transform: none; } }

/* =========================================================
   هدف‌های لمسی (حداقل ۴۴px). چیپ‌ها، لینک‌های متنی و مسیر صفحه در style.css / products.css هستند (mobile-first)
   ========================================================= */
.crumb a { display: inline-flex; align-items: center; min-height: 44px; }
.tag-row a { display: inline-flex; align-items: center; min-height: 44px; }
.to-top { width: 44px; height: 44px; }

}