/* ==========================================================================
   لایه‌ی عمق و حرکت
   روی طراحی فعلی سوار میشه؛ چیدمان، رنگ و لحن همون می‌مونه.
   هر سبک جای خودش رو داره:

   اسکئومورفیسم  اشیای فیزیکی خود برند: پنل آسانسور، کارت دسترسی،
                 بلیت کد دوره، نمایشگر LED ظرفیت، شمارنده‌ی تخت‌برگ، صفحه‌ی ۴۰۴
   نئومورفیسم    کنترل‌ها: جستجو، فیلترها، فیلدهای فرم، سوال‌ها، دکمه‌های دوم
   گلس‌مورفیسم   لایه‌هایی که روی چیزی شناورن: هدر، داک موبایل، باکس خرید،
                 کارت‌های «سطح / طبقه منفی یک»، بلوک ارتباط، نظرها
   سه‌بعدی       کارت‌ها با کج شدن زیر نشانگر، دکمه‌ی اصلی با ضخامت واقعی،
                 نوشته‌ی کف فوتر
   انیمیشن       ورود بخش‌ها، شمارش اعداد، روشن شدن طبقه‌ها، ثانیه‌شمار تخت‌برگ،
                 جابه‌جایی نرم بین صفحه‌ها. با «کاهش حرکت» سیستم‌عامل همه خاموش میشن.
   ========================================================================== */

:root {
  /* نئومورفیسم روی زمینه‌ی تیره: نور از بالا-چپ */
  --nm-face: linear-gradient(145deg, #141416, #0c0c0d);
  --nm-hi: rgba(255, 255, 255, 0.045);
  --nm-lo: rgba(0, 0, 0, 0.78);
  --nm-out: -6px -6px 14px var(--nm-hi), 8px 10px 22px var(--nm-lo), inset 0 1px 0 rgba(255, 255, 255, 0.035);
  --nm-out-sm: -3px -3px 8px var(--nm-hi), 4px 5px 12px var(--nm-lo), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --nm-in: inset 5px 6px 12px var(--nm-lo), inset -4px -4px 10px var(--nm-hi);
  --nm-in-sm: inset 3px 3px 7px var(--nm-lo), inset -2px -2px 6px var(--nm-hi);

  /* شیشه */
  --gl-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02) 55%);
  --gl-rim: inset 0 0 0 1px rgba(255, 255, 255, 0.085), inset 0 1px 0 rgba(255, 255, 255, 0.13);
  --gl-blur: blur(22px) saturate(160%);

  /* دکمه‌ی اصلی سه‌بعدی */
  --btn-edge: #4a0f18;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  interpolate-size: allow-keywords;
}

/* ==========================================================================
   ۱. گلس‌مورفیسم: هدر و داک موبایل
   ========================================================================== */
.site-header {
  background: rgba(10, 10, 12, 0.62);
  -webkit-backdrop-filter: var(--gl-blur);
  backdrop-filter: var(--gl-blur);
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.07), 0 10px 30px -18px rgba(0, 0, 0, 0.9);
}

@media (max-width: 899px) {
  body { padding-bottom: calc(var(--tabbar-h) + 22px + env(safe-area-inset-bottom)); }
  /* داک شناور به‌جای نوار چسبیده به لبه */
  .tabbar {
    inset-inline: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    height: var(--tabbar-h);
    padding: 0 4px;
    border: 0;
    border-radius: 22px;
    background: rgba(20, 20, 23, 0.6);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    box-shadow: var(--gl-rim), 0 20px 40px -14px rgba(0, 0, 0, 0.95);
  }
  .tabbar a { z-index: 0; transition: color 0.25s; }
  .tabbar a[aria-current="page"]::before { display: none; }
  /* تب فعال: کپسول فرورفته (نئومورفیسم) با نور قرمز */
  .tabbar a[aria-current="page"]::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 7px;
    width: 52px;
    height: 32px;
    border-radius: 12px;
    background: #0d0d0f;
    box-shadow: var(--nm-in-sm), 0 0 0 1px rgba(255, 90, 108, 0.18), 0 0 18px -4px rgba(255, 90, 108, 0.45);
  }
  .tabbar a[aria-current="page"] svg { color: #ff8a96; filter: drop-shadow(0 0 6px rgba(255, 90, 108, 0.55)); }
  .tabbar a svg { margin-top: 2px; transition: transform 0.35s var(--spring); }
  .tabbar a:active svg { transform: scale(0.86); }

  /* نوار خرید صفحه‌ی دوره هم همون داک شیشه‌ای */
  .buybar {
    inset-inline: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 10px 12px 10px 10px;
    border: 0;
    border-radius: 22px;
    background: rgba(20, 20, 23, 0.66);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    box-shadow: var(--gl-rim), 0 20px 40px -14px rgba(0, 0, 0, 0.95);
  }
  .toast { bottom: calc(var(--tabbar-h) + 30px + env(safe-area-inset-bottom)); }
}

.toast {
  background: rgba(236, 232, 225, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-radius: 14px;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   ۲. سه‌بعدی + اسکئومورفیسم: دکمه‌ی اصلی با ضخامت واقعی
   لبه‌ی پایین دکمه دیده میشه؛ با فشار، دکمه پایین میره و لبه کوتاه میشه.
   ========================================================================== */
.btn--primary, .gbtn:not(.gbtn--quiet), .pill:not(.pill--ghost), .contact--hot {
  --mx: 0px;
  --my: 0px;
}
.btn--primary, .gbtn:not(.gbtn--quiet), .pill:not(.pill--ghost) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #b52a40 0%, #93202f 52%, #7c1a27 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18),
    0 3px 0 var(--btn-edge),
    0 12px 24px -10px rgba(170, 34, 52, 0.85);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  transform: translate(var(--mx), var(--my));
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), filter 0.2s;
}
.btn--primary:hover, .gbtn:not(.gbtn--quiet):hover, .pill:not(.pill--ghost):hover, .gcard:hover .gbtn:not(.gbtn--quiet) {
  background: linear-gradient(180deg, #c32f47 0%, #9c2232 52%, #841c2a 100%);
  filter: saturate(1.08);
}
.btn--primary:active, .gbtn:not(.gbtn--quiet):active, .pill:not(.pill--ghost):active {
  transform: translate(var(--mx), calc(var(--my) + 2px));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 2px 6px rgba(0, 0, 0, 0.25), 0 1px 0 var(--btn-edge), 0 4px 10px -6px rgba(170, 34, 52, 0.8);
  transition-duration: 0.06s;
}
/* برق شیشه‌ای که موقع هاور از روی دکمه رد میشه */
.btn--primary::after, .gbtn:not(.gbtn--quiet)::after, .pill:not(.pill--ghost)::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-18deg) translateX(0);
  opacity: 0;
  pointer-events: none;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn--primary:hover::after, .gbtn:not(.gbtn--quiet):hover::after, .gcard:hover .gbtn:not(.gbtn--quiet)::after, .pill:not(.pill--ghost):hover::after {
    animation: sheen 0.9s var(--ease) both;
  }
}
@keyframes sheen { 0% { opacity: 1; transform: skewX(-18deg) translateX(0); } 100% { opacity: 0; transform: skewX(-18deg) translateX(420%); } }
.btn[aria-disabled="true"] { box-shadow: none; transform: none; }

/* دکمه‌ی دوم: نئومورفیسم برجسته؛ با فشار فرو میره */
.btn--ghost, .pill--ghost, .gbtn--quiet, .gpill {
  border: 0;
  background: var(--nm-face);
  box-shadow: var(--nm-out-sm), 0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: box-shadow 0.2s var(--ease), color 0.2s, transform 0.2s var(--ease);
}
.btn--ghost:hover, .pill--ghost:hover, .gpill:hover { background: linear-gradient(145deg, #18181b, #0e0e10); }
.btn--ghost:active, .pill--ghost:active, .gpill:active { box-shadow: var(--nm-in-sm), 0 0 0 1px rgba(255, 255, 255, 0.04); transform: translateY(1px); }

/* ==========================================================================
   ۳. انیمیشن ورود: بخش‌ها با عمق از پایین میان، پشت سر هم
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: perspective(1000px) translate3d(0, 24px, 0) rotateX(7deg);
    filter: blur(4px);
    transition: opacity 0.65s var(--ease), transform 0.8s var(--ease), filter 0.6s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .js .reveal.is-in { opacity: 1; transform: none; filter: none; }

  /* جابه‌جایی نرم بین صفحه‌ها (مرورگرهایی که پشتیبانی می‌کنن) */
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: m1-header; }
  .tabbar { view-transition-name: m1-dock; }
  ::view-transition-old(root) { animation: vt-out 0.28s var(--ease) both; }
  ::view-transition-new(root) { animation: vt-in 0.42s var(--ease) both; }
  @keyframes vt-out { to { opacity: 0; transform: scale(0.985); filter: blur(4px); } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

  /* نورهای پس‌زمینه آروم جابه‌جا میشن */
  .aurora i { animation: drift 26s ease-in-out infinite alternate; }
  .aurora i:nth-child(2) { animation-duration: 32s; animation-delay: -8s; }
  .aurora i:nth-child(3) { animation-duration: 38s; animation-delay: -16s; }
  @keyframes drift {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-6vw, 4vh, 0) scale(1.12); }
    100% { transform: translate3d(5vw, -3vh, 0) scale(0.94); }
  }
}

/* نوار پیشرفت خوندن (صفحه‌ی دوره و مقاله) */
.fx-progress { display: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .fx-progress {
      display: block;
      position: fixed;
      z-index: 70;
      inset-inline: 0;
      top: 0;
      height: 2px;
      background: linear-gradient(270deg, #8e1f2d, #ff5a6c 60%, #ffb1ba);
      box-shadow: 0 0 12px rgba(255, 90, 108, 0.6);
      transform-origin: right;
      animation: fx-grow linear both;
      animation-timeline: scroll(root);
    }
    @keyframes fx-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    /* تیترهای لاتین محو پشت عنوان‌ها با اسکرول آروم سُر می‌خورن */
    .mhead__ghost { animation: ghost-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes ghost-drift { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
  }
}

/* ==========================================================================
   ۴. سه‌بعدی: کارت‌هایی که زیر نشانگر کج میشن + برق روی شیشه
   (موتورش توی fx.js؛ فقط روی دسکتاپ با ماوس)
   ========================================================================== */
.gcard, .rcard, .contact, [data-tilt] { transform-origin: 50% 50%; will-change: auto; }
.rcard { position: relative; }
.gcard::after, .rcard::after, .contact::after, .myth::after, [data-tilt]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.13), transparent 46%);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.is-tilting::after { opacity: 1; }
.is-tilting { will-change: transform; z-index: 2; }
/* لایه‌ی عکس داخل کارت خلاف جهت کج شدن حرکت می‌کنه: حس عمق */
.gcard.is-tilting .gcard__media .poster {
  transform: scale(1.09) translate(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -14px));
  transition: transform 0.2s ease-out;
}
.gcard.is-tilting .gchip { transform: translate(calc(var(--px, 0) * 8px), calc(var(--py, 0) * 8px)); transition: transform 0.2s ease-out; }

/* ==========================================================================
   ۵. صفحه‌ی اول
   ========================================================================== */

/* --- اسکئومورفیسم: پنل آسانسور از فلز برس‌خورده --- */
.panel {
  border: 0;
  border-radius: 14px;
  background:
    linear-gradient(118deg, transparent 28%, rgba(255, 255, 255, 0.055) 42%, transparent 56%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 2px, rgba(0, 0, 0, 0.05) 2px 3px),
    linear-gradient(180deg, #1e1f22, #131315 60%, #0f0f11);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.7),
    inset 1px 0 0 rgba(255, 255, 255, 0.05),
    inset -1px 0 0 rgba(0, 0, 0, 0.5),
    0 0 0 1px #050506,
    0 0 0 5px #151518,
    0 0 0 6px rgba(255, 255, 255, 0.05),
    0 50px 90px -40px #000;
}
/* پیچ‌ها با شیار، هرکدوم یه زاویه */
.panel__screws span {
  width: 10px;
  height: 10px;
  background:
    linear-gradient(var(--a, 40deg), transparent 43%, rgba(0, 0, 0, 0.85) 44% 56%, transparent 57%),
    radial-gradient(circle at 35% 30%, #7a7c82, #34353a 55%, #18181b);
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(0, 0, 0, 0.35);
}
.panel__screws span:nth-child(1) { --a: 20deg; top: 12px; right: 12px; }
.panel__screws span:nth-child(2) { --a: 75deg; top: 12px; left: 12px; }
.panel__screws span:nth-child(3) { --a: 130deg; bottom: 12px; right: 12px; }
.panel__screws span:nth-child(4) { --a: 165deg; bottom: 12px; left: 12px; }
/* عدد حک‌شده روی فلز، منفی مثل چراغ LED */
.panel__num { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.07)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.9)); }
.panel__num .minus { filter: drop-shadow(0 0 10px rgba(255, 60, 85, 0.75)); -webkit-text-fill-color: #d4334a; color: #d4334a; }
/* دکمه‌های طبقه: گرد، با حلقه‌ی فلزی و چراغ پشت */
.floors { gap: 12px; }
.floors span:not(.arrow) {
  width: 46px;
  height: 46px;
  border: 0;
  color: #7c7a77;
  background: radial-gradient(circle at 50% 30%, #2c2d31, #17171a 62%, #101012);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.09),
    inset 0 -4px 7px rgba(0, 0, 0, 0.65),
    0 0 0 2px #0a0a0b,
    0 0 0 4px #3b3c41,
    0 0 0 5px #151518,
    0 5px 10px rgba(0, 0, 0, 0.7);
  transition: color 0.25s, box-shadow 0.25s, text-shadow 0.25s;
}
.floors span.is-lit, .floors span.is-current {
  color: #ffe1e5;
  text-shadow: 0 0 8px #ff5a6c, 0 0 2px #fff;
  background: radial-gradient(circle at 50% 30%, #3a2327, #1b1113 62%, #120b0c);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.1),
    inset 0 -4px 7px rgba(0, 0, 0, 0.6),
    0 0 0 2px #0a0a0b,
    0 0 0 4px #c43247,
    0 0 0 5px #3a0e15,
    0 0 22px rgba(255, 70, 95, 0.55),
    0 5px 10px rgba(0, 0, 0, 0.7);
}
.floors span.is-lit { color: #ffc2ca; }
.panel.is-arrived .panel__num .minus { animation: neon 1.2s steps(1) both; }
@keyframes neon {
  0%, 12%, 26% { opacity: 0.25; filter: none; }
  6%, 18%, 34%, 100% { opacity: 1; filter: drop-shadow(0 0 10px rgba(255, 60, 85, 0.75)); }
}

/* پنل روی موبایل و تبلت هم هست (قبلاً بالای اسلاید اول خالی می‌موند) */
@media (max-width: 999px) {
  .slide--brand .panel {
    display: grid;
    container-type: size;
    top: 16px;
    bottom: auto;
    inset-inline: 16px;
    width: auto;
    height: clamp(150px, calc(100% - 350px), 220px);
    min-height: 0;
    padding: 14px 18px;
    gap: 16px;
    align-items: center;
  }
  .slide--brand .panel__num { font-size: min(62cqh, 30cqw); }
  .slide--brand .panel__meta { font-size: 9px; gap: 2px; letter-spacing: 0.14em; }
  .slide--brand .panel__main { height: 100%; }
  .slide--brand .floors { grid-template-columns: repeat(2, auto); gap: 12px; }
  .slide--brand .floors .arrow { display: none; }
  .slide--brand .floors span:not(.arrow) { width: min(34px, 30cqh); height: min(34px, 30cqh); font-size: 11px; }
  .slide--brand .panel__screws span { width: 8px; height: 8px; }
}
@media (min-width: 700px) and (max-width: 999px) {
  .slide--brand .panel { top: 28px; bottom: 28px; height: auto; inset-inline-start: auto; inset-inline-end: 28px; width: 38%; }
  .slide--brand .panel__num { font-size: min(40cqh, 44cqw); }
}

/* --- گلس: فلش‌ها و نقطه‌های اسلایدر --- */
.slider__arrow {
  background: rgba(22, 22, 25, 0.45);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  box-shadow: var(--gl-rim), 0 10px 24px -10px rgba(0, 0, 0, 0.9);
  transition: transform 0.35s var(--spring), background-color 0.2s;
}
.slider__arrow:hover { background: rgba(40, 40, 44, 0.55); transform: scale(1.08); }
.slider__dots { gap: 6px; }
.slider__dots button { width: 12px; height: 12px; border-radius: 999px; margin-top: 4px; background: #111113; box-shadow: var(--nm-in-sm); transition: width 0.45s var(--spring), background-color 0.3s; }
.slider__dots button::before { display: none; }
.slider__dots button[aria-current="true"] { width: 34px; background: linear-gradient(90deg, #8e1f2d, #ff5a6c); box-shadow: 0 0 12px rgba(255, 90, 108, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.slides { box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.06); }

/* --- گلس: «روی سطح / طبقه منفی یک» شیشه‌های شناور روی نور --- */
.myths { position: relative; isolation: isolate; gap: 16px; background: none; border: 0; overflow: visible; }
.myths::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8% 4%;
  background: radial-gradient(38% 70% at 18% 50%, rgba(142, 31, 45, 0.5), transparent 70%), radial-gradient(34% 70% at 82% 45%, rgba(70, 80, 98, 0.55), transparent 70%), radial-gradient(30% 60% at 50% 60%, rgba(142, 31, 45, 0.28), transparent 70%);
  filter: blur(46px);
  pointer-events: none;
}
.myth {
  position: relative;
  border-radius: 20px;
  background: var(--gl-bg), rgba(14, 14, 16, 0.35);
  -webkit-backdrop-filter: var(--gl-blur);
  backdrop-filter: var(--gl-blur);
  box-shadow: var(--gl-rim), 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
.myth__real .label--accent { text-shadow: 0 0 10px rgba(255, 90, 108, 0.45); }

/* --- نئومورفیسم: کاشی‌های لایه‌ها --- */
.layers { gap: 18px; }
@media (min-width: 1000px) { .layers { gap: 24px; } }
.layer {
  border: 0;
  border-radius: 20px;
  background: linear-gradient(145deg, #121214, #0a0a0b);
  box-shadow: -8px -8px 18px rgba(255, 255, 255, 0.03), 10px 12px 26px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.layer:hover { transform: translateY(-3px); box-shadow: -10px -10px 22px rgba(255, 255, 255, 0.035), 14px 18px 34px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
/* شماره‌ی لایه، حک‌شده توی سطح */
.layer__no { justify-self: end; padding: 4px 10px; border-radius: 9px; background: #0b0b0c; box-shadow: var(--nm-in-sm); }

/* --- اسکئومورفیسم + سه‌بعدی: کارت دسترسی پلاستیکی با تراشه‌ی طلایی --- */
.feature__art { perspective: 1200px; }
.feature__art::after { border-radius: var(--r-card); }
.feature__art .poster { transition: transform 0.6s var(--ease); }
.keycard {
  position: relative;
  background:
    linear-gradient(115deg, transparent calc(var(--gx, 30%) - 22%), rgba(255, 255, 255, 0.13) var(--gx, 30%), transparent calc(var(--gx, 30%) + 22%)),
    linear-gradient(90deg, transparent 0 86%, #8e1f2d 86% 92%, transparent 92%),
    linear-gradient(150deg, #29292e, #0d0d0e 70%);
  box-shadow:
    0 6cqw 12cqw rgba(0, 0, 0, 0.75),
    0 1.2cqw 2cqw rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6);
}
/* تراشه‌ی طلایی با خطوط اتصال */
.keycard__chip {
  position: relative;
  background:
    linear-gradient(90deg, transparent 32%, rgba(80, 58, 18, 0.55) 32% 36%, transparent 36% 64%, rgba(80, 58, 18, 0.55) 64% 68%, transparent 68%),
    linear-gradient(0deg, transparent 46%, rgba(80, 58, 18, 0.55) 46% 54%, transparent 54%),
    linear-gradient(135deg, #f3e3a6, #b99443 40%, #f5e7b3 58%, #9b7a33);
  box-shadow: inset 0 0 0 1px rgba(60, 40, 10, 0.45), 0 1px 0 rgba(255, 255, 255, 0.15);
}
/* عدد برجسته روی پلاستیک */
.keycard__level { color: #ece8e1; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35), 0 -1px 0 rgba(0, 0, 0, 0.9), 0 0.8cqw 1.6cqw rgba(0, 0, 0, 0.5); }
/* هولوگرام */
.keycard::after {
  content: "";
  position: absolute;
  right: 5cqw;
  bottom: 5cqw;
  width: 13cqw;
  height: 9cqw;
  border-radius: 1.2cqw;
  background: conic-gradient(from calc(var(--gxn, 30) * 3.6deg), #ff5a6c, #f2c46b, #6be0c1, #6b8cff, #c46bff, #ff5a6c);
  opacity: 0.85;
  mix-blend-mode: screen;
  filter: saturate(0.9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), inset 0 0 2cqw rgba(255, 255, 255, 0.25);
}
@media (prefers-reduced-motion: no-preference) {
  .keycard { animation: float 7s ease-in-out infinite; }
  @keyframes float {
    0%, 100% { transform: rotate(-9deg) translate3d(0, 0, 0); }
    50% { transform: rotate(-6.5deg) translate3d(0, -2.4cqw, 0); }
  }
}

/* --- گلس: نقل‌قول --- */
.quote-block {
  border-right: 0;
  padding: 18px 22px;
  border-radius: 16px;
  background: var(--gl-bg), rgba(142, 31, 45, 0.08);
  -webkit-backdrop-filter: var(--gl-blur);
  backdrop-filter: var(--gl-blur);
  box-shadow: var(--gl-rim), inset -3px 0 0 #b0283d;
}

/* --- اسکئومورفیسم + انیمیشن: شماره‌ی قدم‌ها دکمه‌ی آسانسورن و یکی‌یکی روشن میشن --- */
.step__no {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 12px;
  color: #6f6c69;
  background: radial-gradient(circle at 50% 30%, #25262a, #141416 65%);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.07), inset 0 -3px 6px rgba(0, 0, 0, 0.6), 0 0 0 2px #0a0a0b, 0 0 0 3px #2f3035, 0 4px 10px rgba(0, 0, 0, 0.7);
  transition: color 0.4s, box-shadow 0.4s, text-shadow 0.4s;
}
.step.is-in .step__no, .no-reveal .step__no {
  color: #ffe1e5;
  text-shadow: 0 0 8px #ff5a6c;
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.08), inset 0 -3px 6px rgba(0, 0, 0, 0.55), 0 0 0 2px #0a0a0b, 0 0 0 3px #c43247, 0 0 18px rgba(255, 70, 95, 0.45), 0 4px 10px rgba(0, 0, 0, 0.7);
  transition-delay: calc(var(--i, 0) * 180ms + 0.35s);
}
@media (min-width: 900px) { .step::before { top: -1px; } .step h3 { margin-top: 6px; } }
@media (max-width: 899px) { .step { align-items: center; } .step p { align-self: start; } }

/* --- گلس + نئومورفیسم: بلوک ارتباط --- */
.reach {
  position: relative;
  isolation: isolate;
  background: var(--gl-bg), radial-gradient(120% 120% at 0% 100%, rgba(142, 31, 45, 0.22), transparent 55%), rgba(18, 18, 20, 0.7);
  -webkit-backdrop-filter: var(--gl-blur);
  backdrop-filter: var(--gl-blur);
  box-shadow: var(--gl-rim), 0 40px 80px -40px #000;
}
.topics button {
  padding: 9px 15px;
  background: var(--nm-face);
  box-shadow: var(--nm-out-sm);
  transition: box-shadow 0.25s var(--ease), color 0.25s;
}
.topics button[aria-pressed="true"] {
  color: #ffb1ba;
  background: #0d0d0f;
  box-shadow: var(--nm-in-sm), 0 0 0 1px rgba(255, 90, 108, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.topics button[aria-pressed="true"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ff5a6c; box-shadow: 0 0 8px #ff5a6c; }
/* هسته‌ی مدار: کره‌ی براق */
.orbit__core {
  background: radial-gradient(circle at 32% 26%, #ffb3bd 0%, #d33a52 14%, #9c2233 40%, #4a0f18 78%, #2a080d 100%);
  box-shadow: 0 0 0 10px rgba(142, 31, 45, 0.12), 0 0 60px rgba(142, 31, 45, 0.4), inset -10px -14px 26px rgba(0, 0, 0, 0.5), inset 5px 6px 12px rgba(255, 255, 255, 0.12);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.orbit__node i { background: var(--nm-face); box-shadow: var(--nm-out-sm), 0 0 0 1px rgba(255, 255, 255, 0.05); }
@media (prefers-reduced-motion: no-preference) {
  .orbit__ring--1 { animation: spin 60s linear infinite; }
  .orbit__ring--2 { animation: spin 42s linear infinite reverse; border-style: dashed; }
  @keyframes spin { to { transform: rotate(360deg); } }
}
.contact { transition: background-color 0.2s, box-shadow 0.3s; }
.contact:not(.contact--hot) { background: var(--gl-bg), #121214; box-shadow: var(--gl-rim), 0 20px 40px -24px #000; }
.contact--hot { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 0 #3d0c14, 0 24px 44px -20px rgba(170, 34, 52, 0.8); }

/* --- نئومورفیسم: سوال‌ها؛ باز شدن = فرو رفتن --- */
.faq { border-top: 0; gap: 14px; }
.faq details {
  border: 0;
  border-radius: 18px;
  padding-inline: 20px;
  background: linear-gradient(145deg, #121214, #0a0a0b);
  box-shadow: -6px -6px 14px rgba(255, 255, 255, 0.028), 8px 10px 22px rgba(0, 0, 0, 0.78), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: box-shadow 0.35s var(--ease), background-color 0.35s;
}
.faq details[open] { background: #0b0b0c; box-shadow: inset 5px 6px 14px rgba(0, 0, 0, 0.78), inset -4px -4px 12px rgba(255, 255, 255, 0.025); }
.faq summary { padding: 18px 0; }
.faq summary .pm { width: 34px; height: 34px; border-radius: 50%; background: var(--nm-face); box-shadow: var(--nm-out-sm); transition: box-shadow 0.3s, transform 0.4s var(--spring); }
.faq summary .pm::before, .faq summary .pm::after { inset: 50% 11px auto; }
.faq details[open] summary .pm { box-shadow: var(--nm-in-sm); transform: rotate(180deg); }
.faq summary:hover .pm { box-shadow: var(--nm-out-sm), 0 0 0 1px rgba(255, 90, 108, 0.25); }
/* باز و بسته شدن نرم (کروم ۱۳۱ به بالا؛ بقیه بدون انیمیشن باز میشن) */
@media (prefers-reduced-motion: no-preference) {
  .faq details::details-content, .module::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size 0.45s var(--ease), content-visibility 0.45s allow-discrete;
  }
  .faq details[open]::details-content, .module[open]::details-content { block-size: auto; }
}

/* --- سه‌بعدی: نوشته‌ی بزرگ فوتر مثل حروفِ روی کف طبقه --- */
.mfoot { perspective: 700px; }
.mfoot__word {
  transform-origin: 50% 100%;
  transform: rotateX(42deg);
  color: transparent;
  background: linear-gradient(180deg, rgba(232, 228, 222, 0.02), rgba(232, 228, 222, 0.13));
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: 0.02em;
  padding-top: 0.1em;
}

/* ==========================================================================
   ۶. لیست دوره‌ها و مقاله‌ها: نئومورفیسم برای کنترل‌ها
   ========================================================================== */
.gsearch input {
  background: #0c0c0e;
  box-shadow: var(--nm-in-sm), 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.gsearch input:focus { background: #0e0e10; box-shadow: var(--nm-in-sm), 0 0 0 1px rgba(208, 82, 95, 0.7), 0 0 20px -6px rgba(255, 90, 108, 0.5); }
.gchips { padding-block: 8px; margin-block: -8px; }
.gchips button {
  background: var(--nm-face);
  box-shadow: var(--nm-out-sm);
  transition: box-shadow 0.25s var(--ease), color 0.25s, transform 0.25s var(--ease);
}
.gchips button:hover { background: linear-gradient(145deg, #18181b, #0e0e10); }
.gchips button[aria-pressed="true"] {
  color: #ffc2ca;
  background: #0c0c0e;
  box-shadow: var(--nm-in-sm), 0 0 0 1px rgba(255, 90, 108, 0.35), 0 0 18px -6px rgba(255, 90, 108, 0.55);
}
.gchips button[aria-pressed="true"] small { background: rgba(255, 90, 108, 0.16); color: #ffb1ba; }
.gsort select { background: var(--nm-face); box-shadow: var(--nm-out-sm); }
/* نوار ظرفیت کارت: از صفر پر میشه */
@media (prefers-reduced-motion: no-preference) {
  .gseats__bar i { animation: bar-in 1.2s var(--ease) both 0.3s; transform-origin: right; }
  @keyframes bar-in { from { transform: scaleX(0); } }
}
.gseats__bar { box-shadow: var(--nm-in-sm); height: 6px; }
.gseats__bar i { box-shadow: 0 0 10px rgba(255, 90, 108, 0.6); }

/* ==========================================================================
   ۷. صفحه‌ی دوره
   ========================================================================== */
.chero__poster { transform-style: flat; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 40px 80px -40px #000; }
/* آمار: کاشی‌های نئومورف */
.cstats div {
  border-radius: 16px;
  background: linear-gradient(145deg, #131315, #0b0b0c);
  box-shadow: -5px -5px 12px rgba(255, 255, 255, 0.028), 7px 8px 18px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.cstats b { font-variant-numeric: tabular-nums; }

/* شمارنده‌ی تخت‌برگ روی پوسترها: موقع باز شدن صفحه ورق می‌خورن */
@media (prefers-reduced-motion: no-preference) {
  .flaps b { animation: flap-in 0.9s var(--ease) both; transform-origin: 50% 50%; }
  .flaps b:nth-child(1) { animation-delay: 0.15s; }
  .flaps b:nth-child(2) { animation-delay: 0.3s; }
  .flaps b:nth-child(4) { animation-delay: 0.45s; }
  @keyframes flap-in { 0% { transform: perspective(300px) rotateX(-95deg); opacity: 0; } 60% { transform: perspective(300px) rotateX(12deg); opacity: 1; } 100% { transform: none; } }
}

/* باکس خرید: شیشه با لبه‌ی نور */
.buybox--mag {
  position: relative;
  background:
    var(--gl-bg),
    radial-gradient(120% 60% at 100% 0%, rgba(142, 31, 45, 0.3), transparent 60%),
    rgba(18, 18, 20, 0.62);
  -webkit-backdrop-filter: var(--gl-blur);
  backdrop-filter: var(--gl-blur);
  box-shadow: var(--gl-rim), 0 40px 80px -30px #000;
  border-radius: 22px;
}
.buybox--mag .buybox__reason { border: 0; border-radius: 12px; background: #0c0c0e; box-shadow: var(--nm-in-sm); }

/* اسکئومورفیسم: نمایشگر LED ظرفیت؛ صندلی بعدی چشمک می‌زنه */
.seats__bar { gap: 4px; padding: 6px; border-radius: 8px; background: #070708; box-shadow: var(--nm-in-sm), 0 0 0 1px rgba(255, 255, 255, 0.04); }
.seats__bar i { height: 8px; border-radius: 2px; }
.seats__bar i.taken { background: #1c1c20; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.03); }
.seats__bar i.left { background: linear-gradient(180deg, #ff8595, #e03a52 60%, #b82a3f); box-shadow: 0 0 6px rgba(255, 70, 95, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
@media (prefers-reduced-motion: no-preference) {
  .seats__bar i.taken + i.left { animation: blink 1.6s ease-in-out infinite; }
  @keyframes blink { 50% { opacity: 0.25; box-shadow: none; } }
}

/* اسکئومورفیسم + انیمیشن: ساعت تخت‌برگ برای مهلت ثبت‌نام */
.countdown { flex-direction: column; align-items: stretch; gap: 10px; }
.flipclock { display: flex; justify-content: space-between; gap: 8px; }
.flipclock__u { display: grid; justify-items: center; gap: 6px; flex: 1; }
.flipclock__u small { font-size: 11.5px; color: var(--text-3); }
.flipclock__d { display: flex; gap: 3px; direction: ltr; }
.flipclock__d b {
  position: relative;
  width: 30px;
  height: 42px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  line-height: 42px;
  color: #f2eee8;
  border-radius: 6px;
  background: linear-gradient(180deg, #26262a 0 49.5%, #0a0a0b 49.5% 50.5%, #1a1a1d 50.5%);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  perspective: 200px;
  font-variant-numeric: tabular-nums;
}
/* نیمه‌ی بالایی عدد قبلی روی عدد جدید تا میشه */
.flipclock__d b::before {
  content: attr(data-old);
  position: absolute;
  inset: 0 0 50% 0;
  overflow: hidden;
  display: block;
  text-align: center;
  line-height: 42px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #2a2a2e, #1f1f23);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform-origin: 50% 100%;
  backface-visibility: hidden;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .flipclock__d b.is-flip::before { animation: flip-down 0.5s cubic-bezier(0.55, 0, 0.45, 1) both; }
  @keyframes flip-down { 0% { opacity: 1; transform: rotateX(0); } 99% { opacity: 1; transform: rotateX(-90deg); } 100% { opacity: 0; transform: rotateX(-90deg); } }
}

/* اسکئومورفیسم: کد دوره مثل بلیت کاغذی با سوراخ و خط پرفراژ */
.buybox__code .copy-btn {
  position: relative;
  padding: 8px 16px 8px 24px;
  border: 0;
  border-radius: 4px;
  color: #1b1a19;
  font-weight: 700;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, 0.28) 3px 5px) 14px 0 / 1px 100% no-repeat,
    linear-gradient(180deg, #f1ede6, #d9d3c8);
  -webkit-mask: radial-gradient(circle 5px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 5px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 5px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 5px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
  transform: rotate(-2deg);
  transition: transform 0.35s var(--spring);
}
.buybox__code .copy-btn:hover { transform: rotate(0deg) scale(1.05); }
.buybox__code .copy-btn:active { transform: rotate(1deg) scale(0.97); }

/* فیلد کد تخفیف: نئومورف فرورفته */
.coupon { border: 0; border-radius: 14px; background: #101012; box-shadow: var(--nm-out-sm); }
.coupon[open] { box-shadow: var(--nm-in-sm); }
.coupon__form input { border: 0; background: #0a0a0b; box-shadow: var(--nm-in-sm); }
.coupon__form input:focus { box-shadow: var(--nm-in-sm), 0 0 0 1px rgba(208, 82, 95, 0.7); }
.coupon.is-ok { box-shadow: var(--nm-in-sm), 0 0 0 1px rgba(88, 170, 120, 0.45); }

/* سرفصل‌ها: نئومورف؛ باز = فرورفته */
.module {
  border: 0;
  border-radius: 16px;
  background: linear-gradient(145deg, #121214, #0a0a0b);
  box-shadow: -5px -5px 12px rgba(255, 255, 255, 0.025), 7px 8px 18px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: box-shadow 0.35s var(--ease);
}
.module[open] { background: #0a0a0b; box-shadow: inset 4px 5px 12px rgba(0, 0, 0, 0.8), inset -3px -3px 10px rgba(255, 255, 255, 0.022); }
.module__no { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #0b0b0c; box-shadow: var(--nm-in-sm); }
.module li { border-top-color: rgba(255, 255, 255, 0.05); }
.modules { gap: 14px; }

/* خروجی‌ها: تیک‌ها موقع دیده شدن کشیده میشن */
.outcomes li { border: 0; border-radius: 14px; background: var(--gl-bg), #0f0f11; box-shadow: var(--gl-rim); }
@media (prefers-reduced-motion: no-preference) {
  .reveal .outcomes li svg path { stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset 0.7s var(--ease); }
  .reveal.is-in .outcomes li svg path { stroke-dashoffset: 0; }
  .reveal.is-in .outcomes li:nth-child(2) svg path { transition-delay: 0.15s; }
  .reveal.is-in .outcomes li:nth-child(3) svg path { transition-delay: 0.3s; }
  .reveal.is-in .outcomes li:nth-child(4) svg path { transition-delay: 0.45s; }
  .reveal.is-in .outcomes li:nth-child(n + 5) svg path { transition-delay: 0.6s; }
}
.fit__col { border: 0; border-radius: 16px; background: var(--gl-bg), #0f0f11; box-shadow: var(--gl-rim); }
.includes li { border: 0; border-radius: 14px; background: var(--gl-bg), #0f0f11; box-shadow: var(--gl-rim); }
.includes li.bonus { background: linear-gradient(90deg, rgba(142, 31, 45, 0.02), rgba(142, 31, 45, 0.16)), #0f0f11; box-shadow: inset 0 0 0 1px rgba(255, 90, 108, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.instructor__avatar { border: 0; border-radius: 18px; box-shadow: var(--nm-out-sm), 0 0 0 1px rgba(255, 255, 255, 0.05); }

/* نظرها: شیشه، ستاره‌ها و نمودار از صفر پر میشن */
.rsum, .rcard { background: var(--gl-bg), rgba(15, 15, 17, 0.6); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); box-shadow: var(--gl-rim), 0 24px 48px -30px #000; }
.rcard { transition: box-shadow 0.3s; }
.rdist__row i { box-shadow: var(--nm-in-sm); }
@property --p { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@media (prefers-reduced-motion: no-preference) {
  .stars i { animation: star-fill 1.3s var(--ease) both 0.2s; }
  .reveal:not(.is-in) .stars i { animation: none; --p: 0%; }
  @keyframes star-fill { from { --p: 0%; } }
  .reveal .rdist__row i b { transform: scaleX(0); transform-origin: right; transition: transform 1s var(--ease) 0.25s; }
  .reveal.is-in .rdist__row i b { transform: none; }
}

/* ==========================================================================
   ۸. حساب دانشجو
   ========================================================================== */
.afield input, .afield textarea { background: #0b0b0d; box-shadow: var(--nm-in-sm), 0 0 0 1px rgba(255, 255, 255, 0.035); }
.afield input:focus, .afield textarea:focus { background: #0d0d0f; box-shadow: var(--nm-in-sm), 0 0 0 1px rgba(208, 82, 95, 0.75), 0 0 22px -8px rgba(255, 90, 108, 0.5); }
.afield__eye { background: var(--nm-face); box-shadow: var(--nm-out-sm); }
.afield__eye[aria-pressed="true"] { box-shadow: var(--nm-in-sm); }
/* قفل: دکمه‌ی براق سه‌بعدی */
.acc-lock {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #c23049, #8e1f2d 60%, #6d1621);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 6px rgba(0, 0, 0, 0.3), 0 4px 0 var(--btn-edge), 0 16px 30px -10px rgba(170, 34, 52, 0.85);
}
.acc-lock::after { content: ""; position: absolute; inset: 3px 6px auto; height: 45%; border-radius: 12px 12px 40% 40%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0)); }
.acc-lock svg { position: relative; z-index: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)); }
.acard-auth { box-shadow: var(--gl-rim), 0 40px 80px -30px rgba(0, 0, 0, 0.95); }
/* آیکون آیتم‌ها: کاشی براق مثل آیکون اپ */
.aitem__ic {
  background: linear-gradient(160deg, #3a1219, #1c0a0d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -2px 4px rgba(0, 0, 0, 0.5), 0 6px 14px -6px rgba(0, 0, 0, 0.9);
}
.aitem { background: #0e0e10; box-shadow: var(--nm-out-sm); border-radius: 18px; }
/* ستاره‌های امتیازدهی: دکمه‌ی گرد نئومورف، انتخاب‌شده فرورفته و درخشان */
.arate { gap: 8px; }
.arate button { width: 46px; height: 46px; border-radius: 50%; background: var(--nm-face); box-shadow: var(--nm-out-sm); transition: box-shadow 0.25s, transform 0.35s var(--spring); }
.arate button.on { background: #0d0d0f; box-shadow: var(--nm-in-sm); }
.arate button.on svg { fill: #f0bf62; filter: drop-shadow(0 0 6px rgba(240, 191, 98, 0.6)); }
@media (prefers-reduced-motion: no-preference) {
  .arate button.on svg { animation: pop 0.45s var(--spring) both; }
  @keyframes pop { 0% { transform: scale(0.6); } 100% { transform: scale(1); } }
}

/* ==========================================================================
   ۹. صفحه‌ی ۴۰۴: نمایشگر طبقه‌ی آسانسور
   ========================================================================== */
.lift {
  position: relative;
  margin: 0 auto 26px;
  width: min(360px, 88vw);
  padding: 22px 22px 20px;
  border-radius: 16px;
  display: grid;
  gap: 18px;
  background:
    linear-gradient(118deg, transparent 28%, rgba(255, 255, 255, 0.05) 42%, transparent 56%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 2px, rgba(0, 0, 0, 0.05) 2px 3px),
    linear-gradient(180deg, #1e1f22, #121214);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.7), 0 0 0 1px #050506, 0 0 0 5px #151518, 0 0 0 6px rgba(255, 255, 255, 0.05), 0 50px 90px -40px #000;
  direction: ltr;
}
.lift .panel__screws span { width: 8px; height: 8px; }
.lift__screen {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px 10px;
  border-radius: 10px;
  background: radial-gradient(120% 140% at 50% 0%, #1a0608, #050203 70%);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
/* شبکه‌ی نقطه‌ای مثل نمایشگر LED */
.lift__screen::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, transparent 0 0.9px, rgba(0, 0, 0, 0.55) 1.2px) 0 0 / 4px 4px; pointer-events: none; }
.lift__digits { font-family: var(--mono); font-weight: 700; font-size: clamp(64px, 18vw, 96px); line-height: 1; letter-spacing: 0.04em; color: #ff4a60; text-shadow: 0 0 8px rgba(255, 60, 85, 0.9), 0 0 26px rgba(255, 60, 85, 0.55); }
.lift__arrow { color: #ff4a60; font-size: 22px; text-shadow: 0 0 8px rgba(255, 60, 85, 0.9); }
.lift__btns { display: flex; justify-content: center; gap: 16px; }
.lift__btns span { width: 44px; height: 44px; font-size: 13px; }
.lift__btns span.is-dead {
  color: #5a5754;
  font-size: 11px;
  background:
    linear-gradient(135deg, transparent 47%, rgba(255, 70, 95, 0.75) 48% 52%, transparent 53%),
    radial-gradient(circle at 50% 30%, #2c2d31, #17171a 62%, #101012);
}
.lift__btns span {
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--mono);
  color: #7c7a77;
  background: radial-gradient(circle at 50% 30%, #2c2d31, #17171a 62%, #101012);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.09), inset 0 -4px 7px rgba(0, 0, 0, 0.65), 0 0 0 2px #0a0a0b, 0 0 0 4px #3b3c41, 0 0 0 5px #151518, 0 5px 10px rgba(0, 0, 0, 0.7);
}
@media (prefers-reduced-motion: no-preference) {
  .lift__digits { animation: flicker 5s steps(1) infinite; }
  .lift__arrow { animation: arrow-bob 1.4s ease-in-out infinite; }
  @keyframes flicker { 0%, 100% { opacity: 1; } 42% { opacity: 1; } 43% { opacity: 0.3; } 44% { opacity: 1; } 46% { opacity: 0.45; } 47% { opacity: 1; } }
  @keyframes arrow-bob { 50% { transform: translateY(5px); opacity: 0.45; } }
}

/* ==========================================================================
   ۱۰. پشتیبانی نشدن blur: شیشه کمی مات‌تر میشه که متن خوانا بمونه
   ========================================================================== */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header, .tabbar, .buybar { background: rgba(16, 16, 18, 0.96); }
  .myth, .reach, .buybox--mag, .rsum, .rcard, .quote-block { background: #131315; }
}

/* کاهش حرکت: هیچ چیزی کج نمیشه و جابه‌جا نمیشه */
@media (prefers-reduced-motion: reduce) {
  .keycard { transform: rotate(-9deg); }
  .btn--primary, .gbtn, .pill { transition: none; }
}