@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&display=swap');

/* ===========================================================
   theme-gold.css  ·  MYKD-style esports skin (gold edition)
   Loaded LAST, after style.css / neon-3d.css / game-bg.css.
   Reskins shared components to the gold esports language:
     angled (chamfered) buttons · esports eyebrows · dark cards
     with gold edges · gold nav underline · hero badge.
   NEVER touches .account-photo-item (neon-3d) or .app-box (scoped).
   =========================================================== */

:root {
  --gold:        #ffbe18;   /* MYKD yellow, now the brand accent */
  --gold-2:      #ffd23f;
  --gold-deep:   #7a5a06;
  --border-gold: rgba(255, 190, 24, 0.45);

  --tg-card:        #111a23;
  --tg-card-border: #1f2a35;
  --tg-chamfer:     15px;
}

/* faint, even glow on every heading (no direction → no square edge) */
h1 {
  text-shadow: 0 0 14px rgba(255, 190, 24, 0.22) !important;
}

/* auto-hide header: slides up out of view on scroll-down, back on scroll-up */
/* هدر نازکِ تمام‌عرض — چسبیده به لبهٔ بالا، بدون فاصلهٔ دور
   (بازنویسی پیلِ شناور style.css) */
.site-header {
  top: 0;
  margin: 0;
  width: 100%;
  padding: 7px 22px;
  border: none;
  border-bottom: 1px solid rgba(255, 190, 24, .16);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(7, 9, 13, .94), rgba(7, 9, 13, .78));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .35);
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.site-header.nav-hidden {
  transform: translateY(-110%);
}
/* اجزای هدر جمع‌وجورتر تا کل نوار کم‌ارتفاع شود */
.site-header .logo { font-size: clamp(16px, 1.8vw, 20px); }
.site-header .logo::before { width: 11px; height: 11px; }
.site-header .header-btn { padding: 7px 16px; font-size: 13px; }
.site-header .cart-btn,
.site-header .hamburger { transform: scale(.85); }
@media (max-width: 680px) {
  .site-header { width: 100%; top: 0; margin-top: 0; }
}

/* signature chamfered corners (top-left + bottom-right cut) */
.tg-ang,
.header-btn,
.primary-btn,
.buy-btn,
.confirm-btn,
.filter-btn,
.secondary-btn,
.ghost-btn {
  clip-path: polygon(
    var(--tg-chamfer) 0, 100% 0,
    100% calc(100% - var(--tg-chamfer)),
    calc(100% - var(--tg-chamfer)) 100%,
    0 100%, 0 var(--tg-chamfer)
  );
  border-radius: 0 !important;
}

/* ---------- buttons: solid gold, angled, soft glow ---------- */
.header-btn,
.primary-btn,
.buy-btn,
.confirm-btn,
.filter-btn {
  background: linear-gradient(135deg, var(--gold-2), var(--gold)) !important;
  color: #1a1303 !important;
  box-shadow: 0 0 20px rgba(255, 190, 24, 0.30) !important;
  letter-spacing: .02em;
}
.header-btn:hover,
.primary-btn:hover,
.buy-btn:hover,
.confirm-btn:hover,
.filter-btn:hover {
  box-shadow: 0 0 28px rgba(255, 210, 63, 0.55), 0 18px 44px rgba(0,0,0,.4) !important;
}

/* ghost / secondary: gold outline, angled */
.ghost-btn,
.secondary-btn {
  border: 1px solid var(--border-gold) !important;
  color: var(--gold-2) !important;
  background: rgba(255, 190, 24, 0.06) !important;
}
.ghost-btn:hover,
.secondary-btn:hover {
  border-color: var(--gold-2) !important;
  box-shadow: 0 0 18px rgba(255, 190, 24, 0.25) !important;
}

/* ---------- hero eyebrow → solid gold badge ---------- */
.hero .eyebrow,
.service-hero .eyebrow {
  align-self: flex-start;
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  color: #1a1303;
  font-family: "Barlow Condensed", "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 7px 18px;
  margin-bottom: 20px;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  text-shadow: none;
  box-shadow: 0 0 22px rgba(255, 190, 24, 0.35);
}

/* ---------- section label → esports eyebrow ---------- */
.section-label {
  align-items: center;
  gap: 10px;
  color: var(--gold-2);
  font-family: "Barlow Condensed", "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .26em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(255, 190, 24, 0.35);
}
.section-label::after {
  content: "";
  width: 30px;
  height: 2px;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
}

/* ---------- nav: gold underline on hover / active ---------- */
.nav-links a {
  position: relative;
  padding-bottom: 5px;
}
.nav-links a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  transform: scaleX(0);
  transition: transform .28s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--gold-2); }

/* ---------- cards → dark esports surfaces with gold edge ---------- */
.info-card,
.feature-card,
.cp-card,
.market-stat,
.video-showcase,
.price-filter,
.control-group,
.booking-summary,
.account-card {
  background: var(--tg-card) !important;
  border: 1px solid var(--tg-card-border) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.5) !important;
}

.info-card:hover,
.feature-card:hover,
.cp-card:hover,
.account-card:hover {
  border-color: var(--border-gold) !important;
  box-shadow:
    0 0 0 1px var(--border-gold),
    0 0 28px rgba(255, 190, 24, 0.22),
    0 26px 56px rgba(0, 0, 0, 0.6) !important;
}

/* keep the featured CP card visibly special */
.featured-cp {
  border-color: var(--border-gold) !important;
  background:
    radial-gradient(circle at 22% 16%, rgba(255, 190, 24, 0.18), transparent 40%),
    var(--tg-card) !important;
}

/* tone the diagonal sheen overlay to a subtle gold */
.account-card::after,
.cp-card::after {
  background: linear-gradient(135deg, rgba(255,190,24,.10), transparent 36%) !important;
}

/* ---------- booking / day / slot buttons: angled accent ---------- */
.rental-tab,
.day-btn,
.slot-btn,
.rental-account-btn {
  border-radius: 10px !important;
}
.rental-tab.active,
.day-btn.active,
.slot-btn.selected,
.rental-account-btn.active {
  background: linear-gradient(135deg, var(--gold-2), var(--gold)) !important;
  color: #1a1303 !important;
  box-shadow: 0 0 18px rgba(255, 190, 24, 0.35) !important;
}

/* ---------- انتخابِ تاریخِ رزرو: نوارِ ۳۰روزه + انتخابگرِ تاریخ ---------- */
.day-grid--dates {
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)) !important;
  gap: 8px !important;
  max-height: 250px;
  overflow-y: auto;
  padding-inline-end: 4px;
}
.day-grid--dates .day-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 6px !important; line-height: 1.3;
}
.day-btn__wk { font-size: 13px; font-weight: 700; }
.day-btn__dt { font-size: 11.5px; opacity: .72; }
.group-title .day-jump {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: rgba(255, 255, 255, .7); font-weight: 500;
}
.group-title .day-jump input[type="date"] {
  background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 190, 24, .4);
  color: #fff; border-radius: 8px; padding: 6px 10px;
  font-family: inherit; font-size: 13px; color-scheme: dark;
}
.group-title .day-jump input[type="date"]:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 190, 24, .15);
}

/* ---------- inputs: gold focus ring ---------- */
.filter-field input:focus,
.app-box ~ * input:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(255, 190, 24, 0.15) !important;
}

/* ---------- drawer links: gold hover ---------- */
.drawer-link:hover {
  border-color: var(--border-gold);
  color: var(--gold-2);
}

/* ===========================================================
   Hero (index) — warrior in spinning gold ring (mockup hero)
   =========================================================== */
/* هیرو هم‌قدِ محتوا (نه ۱۰۰vh) تا نوارِ زردِ اسلش بلافاصله بعد از عکس بیاید و سیاهیِ زیرش کم شود */
.hero-gold { min-height: auto; padding-bottom: 24px; }

/* above-the-fold hero must never stay hidden behind scroll-reveal */
.hero-gold.reveal-child,
.hero-gold.reveal,
.hero-gold .hero-content.reveal-child,
.hero-gold .hero-content.reveal {
  opacity: 1 !important;
  transform: none !important;
}

.hero-gold .hero-content {
  align-items: flex-start;
  /* size the rotating headline relative to THIS column's width (see cqi below) */
  container-type: inline-size;
}

.hero-gold h1 {
  white-space: nowrap;
  max-width: none;
  /* 13cqi keeps even the longest label («خدمات گلد و دایموند») inside the
     column at every width; clamp caps it on phones and ultra-wide screens. */
  font-size: clamp(26px, 13cqi, 72px);
}
.hero-gold h1 b {
  color: var(--gold-2);
  font-weight: inherit;
}

/* rotating service headline — vertical slot-machine slide.
   The h1 itself never clips (so wide labels + the soft glow show fully);
   the vertical mask lives on .rot-clip, shrink-wrapped to the current word. */
.hero-rotator {
  position: relative;
  overflow: visible;
  line-height: 1.15;
}
.rot-clip {
  display: inline-block;
  overflow: hidden;              /* vertical mask for the slide */
  vertical-align: bottom;
  line-height: 1.2;
  padding-bottom: .16em;         /* room for پ / ی descenders & dots */
}
.rot-word {
  display: inline-block;
  color: var(--gold-2);
  transition: transform .5s cubic-bezier(.2,.85,.25,1), opacity .5s ease;
  will-change: transform, opacity;
}
.rot-word.is-out { transform: translateY(-120%); opacity: 0; }
.rot-word.is-pre { transform: translateY(120%);  opacity: 0; transition: none; }

/* service buttons (replace old chips) */
.hero-cta-row {
  display: flex;
  gap: 14px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.hero-svc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 24px;
  color: #1a1303;
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
  box-shadow: 0 0 18px rgba(255, 190, 24, 0.30);
  transition: transform .2s ease, box-shadow .2s ease;
}
.hero-svc-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 26px rgba(255, 210, 63, 0.55);
}
.hero-svc-btn--all {
  background: transparent;
  color: var(--gold-2);
  border: 1px solid var(--border-gold);
  box-shadow: none;
}
.hero-svc-btn--all:hover {
  border-color: var(--gold-2);
  box-shadow: 0 0 16px rgba(255, 190, 24, 0.25);
}

.hero-sub {
  margin: 4px 0 0 !important;
  font-family: "Barlow Condensed", "Vazirmatn", sans-serif;
  font-size: clamp(18px, 2.4vw, 26px) !important;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #aab3bc !important;
}

.hero-tags {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.chip {
  border: 1px solid var(--tg-card-border);
  padding: 8px 16px;
  font-family: "Barlow Condensed", "Vazirmatn", sans-serif;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #aab3bc;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.chip.is-on { border-color: var(--gold); color: var(--gold-2); }

/* art side: ring + character + emblem */
.hero-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 430px;
  transform: none !important;   /* cancel the rotateY tilt from style.css group */
}
.hero-ring {
  position: relative;
  width: min(420px, 80vw);
  aspect-ratio: 1;
  border-radius: 50%;
  /* static dark disc behind the character */
  background: radial-gradient(circle at 50% 36%, #251b3d 0%, #0a0712 72%);
  box-shadow: 0 0 60px rgba(255, 190, 24, 0.35);
  overflow: visible;            /* let the head + flames spill out the top */
}
/* steady neon ring (always-on glowing tube) — thick */
.hero-ring::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 12px solid rgba(255, 200, 60, 0.7);
  box-shadow:
    0 0 18px rgba(255, 190, 24, 0.75),
    0 0 44px rgba(255, 190, 24, 0.55),
    inset 0 0 24px rgba(255, 190, 24, 0.4);
  z-index: 3;
  pointer-events: none;
}
/* bright arc that travels around the ring (neon highlight) */
.hero-ring::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg, var(--gold-2) 50deg, #fff7e0 70deg, var(--gold-2) 90deg,
    transparent 150deg, transparent 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 21px), #000 calc(100% - 20px));
          mask: radial-gradient(closest-side, transparent calc(100% - 21px), #000 calc(100% - 20px));
  filter: drop-shadow(0 0 9px var(--gold)) drop-shadow(0 0 20px rgba(255, 190, 24, 0.85));
  animation: heroRingSpin 7s linear infinite;
  z-index: 4;
  pointer-events: none;
}
/* animated fire video sits on top of the still character and only adds light
   (its black background vanishes), so no dark box covers the text or the ring */
.hero-ring-fire {
  mix-blend-mode: lighten;
}
.hero-ring-inner { display: none; }

/* the character: body clipped to the ring circle, head + flames burst above */
.hero-ring-char {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 5;            /* in front of the ring so the head pops over the line */
  pointer-events: none;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55));
  /* circle mask (= the ring) for the body  +  top strip so the head pops out */
  -webkit-mask-image:
    radial-gradient(circle closest-side at 50% 72%, #000 99%, transparent 100%),
    radial-gradient(42% 52% at 50% 33%, #000 42%, transparent 92%);
          mask-image:
    radial-gradient(circle closest-side at 50% 72%, #000 99%, transparent 100%),
    radial-gradient(42% 52% at 50% 33%, #000 42%, transparent 92%);
}
@keyframes heroRingSpin { to { transform: rotate(360deg); } }

.hero-emblem {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  color: #1a1303;
  font-family: "Barlow Condensed", "Vazirmatn", sans-serif;
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 22px);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 30px;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .hero-ring,
  .hero-ring-inner { animation: none !important; }
}

/* ===========================================================
   Full-width angled gold slash (chevron dipping to center)
   Thick at both edges, pinching to a point at the middle.
   =========================================================== */
.gold-slash {
  width: 100%;
  height: 40px;
  margin: 0;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  /* fill the bottom band + side wedges, leaving a V notch at top-center */
  clip-path: polygon(0 0, 50% 100%, 100% 0, 100% 100%, 0 100%);
  box-shadow: 0 0 20px rgba(255, 190, 24, 0.28);
}

/* On big screens, shorten the hero just enough that the gold slash lands
   right at the bottom of the first screen (visible without scrolling). */
@media (min-width: 981px) {
  /* هدر نازک (۶۱px) + اسلش (۴۰px) = ۱۰۱px، تا زردِ اسلش دقیقاً کف صفحهٔ اول بنشیند */
  .hero-gold { min-height: calc(100vh - 101px); }
}

/* ===========================================================
   Latest-news slider
   =========================================================== */
.news-section { text-align: center; }
.news-head { margin-bottom: 28px; }
.news-head .section-label { justify-content: center; }

.news-slider {
  position: relative;
  width: min(980px, calc(100% - 32px));
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0b1116;
  border: 1px solid var(--border-gold);
  clip-path: polygon(
    18px 0, 100% 0, 100% calc(100% - 18px),
    calc(100% - 18px) 100%, 0 100%, 0 18px
  );
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(255, 190, 24, 0.10);
}

.news-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease, visibility .8s ease;
}
.news-slide.is-active { opacity: 1; visibility: visible; }
.news-slide img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* dark gradient so the title stays legible over any image */
.news-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(0,0,0,.82), rgba(0,0,0,.25) 40%, transparent 62%);
}

/* news title overlaid on each slide */
.news-caption {
  position: absolute;
  z-index: 2;
  inset-inline: clamp(18px, 4vw, 40px);
  bottom: clamp(40px, 6%, 60px);
  text-align: start;            /* right edge in RTL */
}
.news-caption h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(20px, 3.4vw, 34px);
  line-height: 1.25;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.8);
}
/* اسلایدرِ اکانت‌های ویژه: هر اسلاید قابلِ کلیک است و یک CTA کوچک دارد */
.news-slide[role="button"] { cursor: pointer; }
.news-cta {
  display: inline-block; margin-top: 8px; font-size: clamp(12px, 1.8vw, 14px); font-weight: 800;
  color: var(--gold); text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
}

/* arrows */
.news-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 26px;
  line-height: 1;
  color: #1a1303;
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  border: none;
  cursor: pointer;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: 0 0 16px rgba(255, 190, 24, 0.4);
  transition: transform .2s ease, box-shadow .2s ease;
}
.news-arrow:hover { box-shadow: 0 0 24px rgba(255, 210, 63, 0.6); transform: translateY(-50%) scale(1.06); }
.news-prev { inset-inline-start: 14px; }   /* RTL-aware */
.news-next { inset-inline-end: 14px; }

/* dots */
.news-dots {
  position: absolute;
  bottom: 14px;
  inset-inline: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 9px;
}
.news-dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 1px solid var(--gold);
  background: transparent;
  cursor: pointer;
  transform: rotate(45deg);          /* diamond to match the esports vibe */
  transition: background .25s ease, box-shadow .25s ease;
}
.news-dot.is-active {
  background: var(--gold);
  box-shadow: 0 0 10px rgba(255, 190, 24, 0.7);
}

/* ===========================================================
   Services showcase — pop-out skin cards (Disney-style)
   =========================================================== */
.services-showcase { text-align: center; }
.services-head .section-label { justify-content: center; }
.services-intro { max-width: 560px; margin: 14px auto 0; }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 96px;            /* room for the popped-out heads */
}

.svc-card {
  --c1: #333; --c2: #111; --accent: var(--gold-2);
  position: relative;
  display: block;
  min-height: 360px;
  border-radius: 22px;
  background: linear-gradient(165deg, var(--c1), var(--c2));
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
  overflow: visible;
  isolation: isolate;
  text-align: start;
  transition: transform .32s cubic-bezier(.2,.8,.25,1), box-shadow .32s ease;
}
.svc-card:hover {
  transform: translateY(-9px);
  /* no outline — just a very soft glow in the card's own colour.
     negative spread pulls the bright part off the edge so it never
     reads as a crisp line. */
  box-shadow:
    0 34px 64px rgba(0, 0, 0, 0.5),
    0 0 30px -6px color-mix(in srgb, var(--accent) 26%, transparent),
    0 0 70px -4px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* readability scrim over the lower body */
.svc-card::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 48%;
  border-radius: 0 0 22px 22px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
  z-index: 1;
  pointer-events: none;
}

.svc-num {
  position: absolute;
  top: 14px;
  inset-inline-end: 18px;
  z-index: 3;
  font-family: "Barlow Condensed", "Vazirmatn", sans-serif;
  font-weight: 800;
  font-size: 32px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.28);
}

/* character pops out of the top edge — uniform for all 4 busts */
.svc-figure {
  position: absolute;
  inset-inline: 0;
  top: -66px;
  bottom: 62px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.svc-figure img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.55));
  transition: transform .32s cubic-bezier(.2,.8,.25,1);
  /* fade the waist cut (bottom) + soften thin edge slivers (sides)
     so protruding spikes don't read as a hard line against the card */
  -webkit-mask-image:
    linear-gradient(to top, transparent 0, #000 18%, #000 100%),
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to top, transparent 0, #000 18%, #000 100%),
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-composite: intersect;
}
.svc-card:hover .svc-figure img { transform: translateY(-6px) scale(1.04); }

/* safety net against a horizontal scrollbar — use clip (not hidden) so it does
   NOT become a scroll container and break position:sticky in the About section */
main { overflow-x: clip; }


.svc-body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 3;
  padding: 0 20px 22px;
}
.svc-name {
  margin: 0;
  font-size: clamp(20px, 1.5vw, 24px);
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.svc-sub {
  margin: 5px 0 12px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}
.svc-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Barlow Condensed", "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--accent);
  transition: gap .2s ease;
}
.svc-card:hover .svc-go { gap: 11px; }

/* per-skin themes */
.svc--indigo  { --c1: #3a4bbf; --c2: #141a44; --accent: #9fb0ff; }
.svc--teal    { --c1: #14a18f; --c2: #0a3a3a; --accent: #5ff0dd; }
.svc--crimson { --c1: #c62a3c; --c2: #390e16; --accent: #ff8a96; }
.svc--gold    { --c1: #6a32a6; --c2: #241038; --accent: #ffd23f; }

@media (max-width: 980px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 26px; row-gap: 70px; }
}
@media (max-width: 540px) {
  .svc-grid { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; }
}

/* ===========================================================
   Blog — صفحهٔ وبلاگ (pageBlog.html)
   =========================================================== */
.blog-hero {
  width: min(1140px, calc(100% - 32px));
  margin: 0 auto;
  padding: 110px 0 20px;
  text-align: center;
}
.blog-hero h1 { margin: 8px 0 12px; font-size: clamp(30px, 5vw, 48px); }
.blog-hero-sub {
  max-width: 640px;
  margin: 0 auto;
  color: #9aa4b2;
  line-height: 2;
}
.blog-section {
  width: min(1140px, calc(100% - 32px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.blog-card {
  --cut: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #131a24, #0c1118);
  border: 1px solid rgba(255, 255, 255, .07);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.blog-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 190, 24, .4);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .45), 0 0 22px rgba(255, 190, 24, .12);
}
.blog-card__media { position: relative; overflow: hidden; }
.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.blog-card:hover .blog-card__media img { transform: scale(1.05); }
.blog-tag {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  padding: 5px 12px;
  background: var(--gold);
  color: #0a0e13;
  font-size: 12px;
  font-weight: 800;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.blog-card__body { padding: 20px 22px 24px; }
.blog-card__body h2 { margin: 0 0 10px; font-size: 24px; }
.blog-card__body h3 { margin: 0 0 8px; font-size: 18px; color: #fff; }
.blog-card__body p { margin: 0 0 14px; color: #9aa4b2; line-height: 2; font-size: 14px; }
.blog-meta { font-size: 12.5px; color: var(--gold); font-weight: 700; }
/* کارت شاخص: عکس و متن کنار هم */
.blog-card--feature { display: grid; grid-template-columns: 1.1fr 1fr; }
.blog-card--feature .blog-card__media { min-height: 280px; }
.blog-card--feature .blog-card__body { align-self: center; padding: 30px 32px; }
/* شبکهٔ بقیهٔ مقاله‌ها */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.blog-grid .blog-card__media { height: 190px; }
@media (max-width: 760px) {
  .blog-card--feature { grid-template-columns: 1fr; }
  .blog-card--feature .blog-card__media { min-height: 200px; height: 200px; }
}

/* ===========================================================
   Auth — صفحهٔ ورود/ثبت‌نام + وضعیت کاربر در هدر
   =========================================================== */
.auth-wrap {
  min-height: calc(100vh - 70px);
  display: grid;
  place-items: center;
  padding: 90px 16px 60px;
}
.auth-card {
  --cut: 14px;
  width: min(430px, 100%);
  padding: 30px 28px 28px;
  background: linear-gradient(180deg, #131a24, #0c1118);
  border: 1px solid rgba(255, 190, 24, .25);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.auth-title { margin: 0 0 6px; font-size: 26px; }
.auth-sub { margin: 0 0 20px; color: #9aa4b2; font-size: 13.5px; line-height: 1.9; }
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 20px;
}
.auth-tab {
  --cut: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  color: #cfd6e0;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.auth-tab.is-active {
  border-color: var(--gold);
  background: rgba(255, 190, 24, .14);
  color: var(--gold);
}
.auth-form { display: none; flex-direction: column; gap: 14px; }
.auth-form.is-active { display: flex; }
.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: #cfd6e0;
  font-weight: 700;
}
.auth-optional { color: #7e8794; font-weight: 400; }
.auth-form input {
  padding: 11px 13px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  color: #fff;
  font: inherit;
  transition: border-color .2s ease;
}
.auth-form input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(255, 190, 24, .15);
}
/* فیلدِ رمز با دکمهٔ نمایش/مخفی‌کردن */
.auth-pass { position: relative; display: block; }
.auth-pass input { width: 100%; padding-inline-end: 50px; }
.auth-pass__toggle {
  position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; padding: 0; display: grid; place-items: center; /* ≥۴۴px برای لمس */
  border: 0; background: none; cursor: pointer; color: #9aa4b2;
  border-radius: 10px; transition: color .2s, background .2s;
}
.auth-pass__toggle:hover { color: var(--gold, #ffc107); background: rgba(255,255,255,.06); }
.auth-pass__toggle:focus-visible { outline: 2px solid var(--gold, #ffc107); outline-offset: 2px; color: var(--gold, #ffc107); }
.auth-pass__toggle::before {
  content: ""; width: 22px; height: 22px;
  background: currentColor;
  -webkit-mask: var(--eye) center / 22px 22px no-repeat;
          mask: var(--eye) center / 22px 22px no-repeat;
  --eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.auth-pass__toggle[aria-pressed="true"]::before {
  --eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.9 4.24A9.1 9.1 0 0 1 12 4c6.5 0 10 8 10 8a18 18 0 0 1-2.2 3.2M6.6 6.6A18 18 0 0 0 2 12s3.5 8 10 8a9 9 0 0 0 5.4-1.6'/%3E%3Cpath d='M1 1l22 22'/%3E%3C/svg%3E");
}
.auth-error {
  margin: 0;
  padding: 9px 12px;
  background: rgba(255, 59, 77, .12);
  border: 1px solid rgba(255, 59, 77, .4);
  border-radius: 10px;
  color: #ff8a96;
  font-size: 13px;
}
.auth-submit { justify-content: center; padding: 12px; font-size: 15px; }
.auth-ok {
  margin: 0; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.9;
  background: rgba(56, 196, 120, .12); border: 1px solid rgba(56, 196, 120, .4); color: #7fe0a6;
}
.auth-ok a { color: var(--gold, #ffc107); word-break: break-all; }
.auth-link {
  align-self: center; background: none; border: 0; padding: 4px; cursor: pointer;
  color: #9aa4b2; font: inherit; font-size: 13px; text-decoration: none; transition: color .2s;
}
.auth-link:hover { color: var(--gold, #ffc107); }
.auth-captcha { letter-spacing: .5px; }
.auth-card { position: relative; }
.auth-close {
  position: absolute; top: 14px; left: 14px; width: 36px; height: 36px;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.05);
  color: #cfd3da; font-size: 22px; line-height: 1; cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}
.auth-close:hover { background: rgba(255,255,255,.12); color: #fff; transform: rotate(90deg); }
/* attribute hidden باید بر display لِیبلِ فرم غلبه کند */
.auth-form label.auth-captcha[hidden], .auth-form [hidden] { display: none !important; }
/* چیپ کاربرِ واردشده در هدر */
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(255, 190, 24, .13);
  border: 1px solid rgba(255, 190, 24, .45);
  border-radius: 999px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 800;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-chip::before { content: "👤"; font-size: 12px; }
.user-logout {
  padding: 7px 13px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  color: #cfd6e0;
  font-size: 12.5px;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.user-logout:hover { color: #ff8a96; border-color: rgba(255, 59, 77, .5); }

/* ===========================================================
   KYC — صفحهٔ احراز هویت (pageKyc.html)
   =========================================================== */
.kyc-wrap {
  width: min(640px, calc(100% - 32px));
  margin: 0 auto;
  padding: 92px 0 60px;
}
.kyc-card {
  --cut: 16px;
  padding: 30px 26px 28px;
  background: linear-gradient(180deg, #131a24, #0c1118);
  border: 1px solid rgba(255, 190, 24, .25);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.kyc-title { margin: 0 0 6px; font-size: 26px; }
.kyc-sub { margin: 0 0 20px; color: #9aa4b2; font-size: 13.5px; line-height: 1.9; }
.kyc-status {
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.9;
}
.kyc-status.is-pending  { background: rgba(255, 190, 24, .1);  border: 1px solid rgba(255, 190, 24, .4);  color: #ffd777; }
.kyc-status.is-approved { background: rgba(47, 224, 106, .1);  border: 1px solid rgba(47, 224, 106, .4);  color: #7ff0a6; }
.kyc-status.is-rejected { background: rgba(255, 59, 77, .1);   border: 1px solid rgba(255, 59, 77, .4);   color: #ff98a3; }
.kyc-form { display: flex; flex-direction: column; gap: 16px; }
.kyc-form > label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #cfd6e0; font-weight: 700; }
.kyc-form input[type=text],
.kyc-form input[name],
.kyc-form input:not([type=file]):not([type=checkbox]) {
  padding: 11px 13px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  color: #fff;
  font: inherit;
}
.kyc-form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 190, 24, .15); }
.kyc-otp-row { display: flex; gap: 8px; }
.kyc-otp-row input { flex: 1; }
.kyc-mini-btn {
  flex-shrink: 0;
  padding: 0 16px;
  background: rgba(255, 190, 24, .14);
  border: 1px solid rgba(255, 190, 24, .45);
  border-radius: 10px;
  color: var(--gold);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  min-width: 96px;
}
.kyc-mini-btn:disabled { opacity: .6; cursor: default; }
.kyc-hint { margin: 8px 0 0; font-size: 12.5px; color: #9aa4b2; }
.kyc-upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kyc-file {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border: 1px dashed rgba(255, 255, 255, .2);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.kyc-file:hover { border-color: rgba(255, 190, 24, .5); background: rgba(255, 190, 24, .04); }
.kyc-file > span:first-child { font-size: 13px; font-weight: 700; color: #fff; }
.kyc-file b { color: var(--gold); }
.kyc-file small { color: #8b95a3; font-size: 11.5px; line-height: 1.7; }
.kyc-file input[type=file] { display: none; }
.kyc-file-name { margin-top: 6px; font-size: 12px; color: var(--gold); word-break: break-all; }
.kyc-file--pledge { margin: 12px 0; }
.kyc-pledge {
  padding: 16px 18px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
}
.kyc-pledge h3 { margin: 0 0 10px; font-size: 16px; color: var(--gold); }
.kyc-pledge #kyc-pledge-text { margin: 0; color: #d7dde6; line-height: 2.1; font-size: 13.5px; }
.kyc-pledge #kyc-pledge-text b { color: #fff; }
.kyc-agree { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; font-size: 13.5px; color: #cfd6e0; cursor: pointer; line-height: 1.8; }
.kyc-agree input { margin-top: 3px; flex-shrink: 0; accent-color: var(--gold); width: 17px; height: 17px; }
.kyc-submit { justify-content: center; padding: 13px; font-size: 15px; }
@media (max-width: 560px) {
  .kyc-upload-grid { grid-template-columns: 1fr; }
}

/* ===========================================================
   Availability hero — نمای هفتگی خالی/پر اکانت‌ها (صفحهٔ اجاره)
   با ویدیوی بک‌گراند و لایهٔ تیره برای خوانایی
   =========================================================== */
.avail-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  /* محتوا از بالا شروع می‌شود، نه وسطِ ویوپورت */
  justify-content: flex-start;
  overflow: hidden;
  /* تمام‌صفحه: عرض کامل + ارتفاع کل ویوپورت (بازنویسی عرضِ محدود .hero) */
  width: 100%;
  max-width: none;
  margin-inline: 0;
  min-height: 100vh;
  padding: 92px 0 60px;
  border-radius: 0;
  border: none;
  /* ته هیرو تدریجی شفاف می‌شود تا بدونِ خطِ مشخص در پس‌زمینهٔ سایت حل شود (fade نرم) */
  -webkit-mask: linear-gradient(to bottom, #000 calc(100% - 130px), transparent 100%);
          mask: linear-gradient(to bottom, #000 calc(100% - 130px), transparent 100%);
}
.avail-inner {
  width: min(1140px, calc(100% - 36px));
  margin-inline: auto;
}
.avail-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avail-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(5, 7, 10, .82), rgba(5, 7, 10, .92));
}
.avail-inner { position: relative; z-index: 2; }
.avail-title { margin: 0 0 38px; }
/* نقطه‌های نشانگر اسکرول نوار روزها — فقط وقتی نوار سرریز دارد دیده می‌شوند */
.avail-dots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.avail-dots.is-visible { display: flex; }
.avail-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 99px;
  background: rgba(255, 255, 255, .28);
  cursor: pointer;
  transition: width .25s ease, background .25s ease, box-shadow .25s ease;
}
.avail-dot.is-active {
  width: 22px;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(255, 190, 24, .5);
}
/* تایل‌های روز — HUD با گوشهٔ پخ و نوار فشنگیِ سگمنت‌دار */
.avail-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}
.avail-day {
  --cut: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  text-align: right;
  background: rgba(8, 11, 16, .82);
  border: 1px solid rgba(255, 255, 255, .09);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  color: #e8edf5;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.avail-day:hover { border-color: rgba(255, 190, 24, .5); }
.avail-day.is-active {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(255, 190, 24, .16), rgba(255, 190, 24, .04));
}
/* براکت‌های HUD روی روزِ فعال */
.avail-day.is-active::before,
.avail-day.is-active::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
}
.avail-day.is-active::before {
  top: 4px;
  left: 4px;
  border-top: 2px solid var(--gold);
  border-left: 2px solid var(--gold);
}
.avail-day.is-active::after {
  bottom: 4px;
  right: 4px;
  border-bottom: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
}
.avail-day__name { font-weight: 800; font-size: 14.5px; }
.avail-day__date { font-size: 11px; color: #93a0b1; }
.avail-day__count {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 11.5px;
  color: #cfd6e0;
}
.avail-day__count b {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 27px;
  line-height: 1;
  letter-spacing: .5px;
  color: var(--gold);
}
.avail-day.is-active .avail-day__count b { text-shadow: 0 0 14px rgba(255, 190, 24, .55); }
.avail-day__bar {
  width: 100%;
  height: 6px;
  margin-top: 3px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.avail-day__bar i {
  display: block;
  height: 100%;
  background: var(--gold);
  -webkit-mask: repeating-linear-gradient(to left, #000 0 4px, transparent 4px 6px);
          mask: repeating-linear-gradient(to left, #000 0 4px, transparent 4px 6px);
}
/* عنوان و راهنمای نوار اکانت‌ها */
.avail-strip-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 12px;
  color: #cfd6e0;
  font-size: 14px;
}
.avail-strip-title { font-weight: 700; }
.avail-legend { color: #9aa4b2; font-size: 13px; }
.avail-legend .dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-inline: 3px;
  vertical-align: middle;
}
.dot--free { background: var(--gold); }
.dot--busy { background: #ff3b4d; }
/* تگ‌های اکانت — گوشهٔ پخ؛ پرها با خط قرمز مورب از لیست خط می‌خورند */
.avail-accounts {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.avail-acc {
  --cut: 8px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 7px;
  padding-inline-end: 13px;
  background: rgba(8, 11, 16, .82);
  border: 1px solid rgba(255, 255, 255, .1);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  color: #f4f6fa;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.avail-acc img {
  width: 38px;
  height: 38px;
  object-fit: cover;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.avail-acc__num {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--gold);
}
.avail-acc.is-free:hover {
  border-color: var(--gold);
  background: rgba(255, 190, 24, .12);
  transform: translateY(-2px);
}
.avail-acc.is-busy {
  cursor: not-allowed;
  border-color: rgba(255, 59, 77, .3);
}
.avail-acc.is-busy img { filter: grayscale(1) brightness(.55); }
.avail-acc.is-busy .avail-acc__num { color: #5d6673; }
.avail-acc.is-busy::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent 46%, rgba(255, 59, 77, .8) 46% 54%, transparent 54%);
}
.avail-acc.is-selected {
  border-color: var(--gold);
  background: rgba(255, 190, 24, .14);
  box-shadow: 0 0 16px rgba(255, 190, 24, .25);
}
/* ── پنل ساعت‌های خالیِ اکانت انتخابی ── */
.avail-slots {
  --cut: 12px;
  margin-top: 14px;
  padding: 16px 18px 18px;
  background: rgba(8, 11, 16, .88);
  border: 1px solid rgba(255, 190, 24, .3);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.avail-slots__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.avail-slots__title { font-weight: 800; font-size: 15px; color: #fff; }
.avail-slots__close {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: transparent;
  color: #cfd6e0;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  transition: color .2s ease, border-color .2s ease;
}
.avail-slots__close:hover { color: var(--gold); border-color: var(--gold); }
.avail-slots__list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.avail-slot {
  --cut: 7px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 84px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  color: #e8edf5;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.avail-slot b {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1;
  letter-spacing: 1px;
}
.avail-slot span { font-size: 11px; color: #93a0b1; }
.avail-slot:not(.is-taken):hover {
  border-color: rgba(255, 190, 24, .6);
  background: rgba(255, 190, 24, .08);
  transform: translateY(-2px);
}
.avail-slot.is-picked {
  border-color: var(--gold);
  background: rgba(255, 190, 24, .16);
  box-shadow: 0 0 14px rgba(255, 190, 24, .3);
}
.avail-slot.is-picked b { color: var(--gold); }
.avail-slots__empty {
  padding: 10px 4px;
  color: #93a0b1;
  font-size: 13px;
}
.avail-slots__cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.avail-slots__hint { font-size: 13px; color: #9aa4b2; }
.avail-slots__go { padding: 10px 26px; font-size: 14px; }
.avail-slots__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.avail-slots__view { padding: 10px 22px; font-size: 14px; }
.avail-slots__reserve { padding: 10px 26px; font-size: 14px; }

/* ═══════════ هیروی جدیدِ اجاره — بک‌گراندِ تصویری + متن و CTA (طبق ماکاپ) ═══════════ */
.ejhero {
  background: #05070a;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* ویدیوی بک‌گراند — بدونِ هیچ هاله/اسکریمی، تمام‌کیفیت */
.ejhero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* چون هاله نداریم، برای خوانایی متن‌ها سایه می‌گیرند */
.ejhero__eyebrow,
.ejhero__desc,
.ejhero__feat b,
.ejhero__feat small,
.ejhero__scroll { text-shadow: 0 2px 14px rgba(0, 0, 0, .8), 0 1px 3px rgba(0, 0, 0, .9); }
.ejhero__inner {
  position: relative;
  z-index: 2;
  width: min(600px, 92%);
  /* در RTL «inline-start» یعنی راست؛ محتوا سمتِ راست می‌نشیند (کاراکتر سمتِ چپ) */
  margin-inline-start: min(7vw, 110px);
  margin-inline-end: auto;
  text-align: center;
  padding: 40px 0;
}
.ejhero__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 14px;
  font-family: "Barlow Condensed", "Rajdhani", sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 7px;
  color: var(--gold);
  direction: ltr;
}
.ejhero__eyebrow i {
  width: 44px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.ejhero__eyebrow i:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
.ejhero__title { margin: 0 0 18px; }
.ejhero__title img {
  width: min(100%, 540px);
  height: auto;
  display: inline-block;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .65));
}
.ejhero__desc {
  margin: 0 0 30px;
  font-size: 16.5px;
  line-height: 2.1;
  color: rgba(233, 238, 244, .85);
}
.ejhero__cta {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.ejhero__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.ejhero__btn img { width: 24px; height: 24px; object-fit: contain; }
.ejhero__btn--gold {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--gold-2, #ffd23f), var(--gold));
  color: #141002;
  border: none;
  box-shadow: 0 14px 34px rgba(255, 179, 0, .3);
}
/* نورِ عبوری هنگامِ hover روی دکمهٔ «مشاهده ساعات خالی» */
.ejhero__btn--gold::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .65), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
.ejhero__btn--gold:hover {
  box-shadow: 0 18px 48px rgba(255, 179, 0, .5), 0 0 26px rgba(255, 210, 63, .55);
  transform: translateY(-2px);
}
.ejhero__btn--gold:hover::after { animation: ejShine .75s ease forwards; }
@keyframes ejShine {
  from { left: -75%; }
  to   { left: 135%; }
}

.ejhero__btn--ghost {
  position: relative;
  overflow: hidden;
  background: rgba(6, 8, 12, .35);
  color: var(--gold);
  border: 1px solid rgba(255, 190, 24, .55);
}
/* نورِ عبوری هنگامِ hover — دقیقاً مثلِ دکمهٔ «مشاهده ساعات خالی» */
.ejhero__btn--ghost::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .65), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
.ejhero__btn--ghost:hover {
  border-color: var(--gold);
  box-shadow: 0 18px 48px rgba(255, 179, 0, .5), 0 0 26px rgba(255, 210, 63, .55);
  transform: translateY(-2px);
}
.ejhero__btn--ghost:hover::after { animation: ejShine .75s ease forwards; }

@media (prefers-reduced-motion: reduce) {
  .ejhero__btn--gold:hover::after,
  .ejhero__btn--ghost:hover::after { animation: none; }
}
.ejhero__features {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}
.ejhero__feat {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: right;
}
.ejhero__feat img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.ejhero__feat-svg { width: 34px; height: 34px; color: var(--gold); flex-shrink: 0; filter: drop-shadow(0 0 10px rgba(255, 190, 24, .4)); }
.ejhero__feat span { display: flex; flex-direction: column; gap: 2px; }
.ejhero__feat b { font-size: 15px; color: #f2f4f8; }
.ejhero__feat small { font-size: 12px; color: rgba(255, 255, 255, .6); }
.ejhero__sep { width: 1px; height: 40px; background: linear-gradient(180deg, transparent, rgba(255, 190, 24, .5), transparent); }
.ejhero__scroll {
  position: absolute;
  z-index: 2;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .65);
}
.ejhero__mouse {
  width: 20px;
  height: 30px;
  border: 1.6px solid rgba(255, 255, 255, .55);
  border-radius: 12px;
  display: grid;
  justify-content: center;
  padding-top: 5px;
}
.ejhero__mouse i {
  width: 3px;
  height: 7px;
  border-radius: 3px;
  background: var(--gold);
  animation: ejScroll 1.6s ease-in-out infinite;
}
@keyframes ejScroll { 0%,100% { transform: translateY(0); opacity: 1; } 55% { transform: translateY(8px); opacity: .25; } }
/* ── نوارِ مزیت‌ها زیرِ هیرو (جمع‌وجور، سه‌تایی در یک ردیف) ── */
.ejfeature-band {
  position: relative;
  z-index: 3;
  width: min(1040px, 92%);
  margin: -46px auto 76px;         /* کمی روی لبهٔ پایینِ هیرو می‌نشیند */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.ejfeature-band .ejhero__feat {
  justify-content: center;
  gap: 12px;
  padding: 18px 16px;
  background: none;
  border: none;
  box-shadow: none;
}
/* صفحه‌های بزرگ: محتوا کامل داخلِ فضای تیرهٔ سمتِ راستِ بک‌گراند (کنار از کاراکتر) */
@media (min-width: 1200px) {
  .ejhero__inner { width: min(720px, 45%); margin-inline-start: clamp(36px, 4vw, 90px); }
  .ejhero__title img { width: min(100%, 660px); }
  .ejhero__desc { font-size: 18px; }
  .ejhero__btn { font-size: 16.5px; padding: 15px 34px; }
}
@media (max-width: 900px) {
  .ejhero__inner { margin-inline: auto; }
  /* روی موبایل برشِ ویدیو را به سمتِ کاراکتر (چپِ فریم) می‌بریم تا دیده شود */
  .ejhero__video { object-position: 30% center; }
}
@media (max-width: 560px) {
  .ejhero__video { object-position: 26% center; }
}
@media (max-width: 520px) {
  .ejhero__sep { display: none; }
  .ejhero__features { gap: 16px; }
}
/* ── موبایل: ویدیو یک پنلِ کوتاه‌ترِ تمام‌عرض در وسطِ هیرو، و متن روی خودِ ویدیو ── */
@media (max-width: 640px) {
  /* هیرو کوتاه‌تر و محتوا وسط‌چینِ عمودی روی پنلِ ویدیو */
  .avail-hero.ejhero { min-height: 74vh; padding: 0 0 24px; justify-content: center; }
  /* ویدیو از بالای هیرو (چسبیده به نوار) شروع می‌شود تا فاصلهٔ سیاهِ بالا نباشد؛
     لبهٔ پایینش نرم محو می‌شود تا بدونِ خطِ مشخص در تیره حل شود */
  .ejhero__video {
    height: 84%;
    top: 0;
    bottom: auto;
    transform: none;
    object-position: 34% center;
    -webkit-mask: linear-gradient(to bottom, #000 60%, transparent 96%);
            mask: linear-gradient(to bottom, #000 60%, transparent 96%);
  }
  /* اسکریمِ ملایم بیشتر سمتِ راست (زیرِ متن)، کم‌تر سمتِ چپ (روی کاراکتر) */
  .ejhero::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    height: 84%;
    background: linear-gradient(to left, rgba(3, 6, 12, .66), rgba(3, 6, 12, .05));
    pointer-events: none;
  }
  /* متن سمتِ راست، لبهٔ راستش با دکمه‌ها هم‌راستا؛ کمی چپ‌تر از قبل */
  .ejhero__inner { padding: 0; width: 94%; text-align: right; }
  .ejhero__eyebrow { justify-content: flex-end; padding-left: 22%; padding-right: 8px; }
  .ejhero__title { text-align: right; padding-left: 6%; padding-right: 8px; }
  .ejhero__title img { width: min(64%, 240px); }
  .ejhero__desc { text-align: right; padding-left: 16%; padding-right: 8px; }
  .ejhero__eyebrow { font-size: 12.5px; letter-spacing: 4px; gap: 10px; margin-bottom: 10px; }
  .ejhero__eyebrow i { width: 30px; }
  .ejhero__title { margin: 0 0 12px; }
  .ejhero__title img { width: min(76%, 290px); }
  .ejhero__desc { font-size: 13.5px; line-height: 1.85; margin-bottom: 18px; }
  /* دکمه‌ها کوچک‌تر و فلاش-راست (هم‌راستا با لبهٔ راستِ متن) */
  .ejhero__cta { gap: 8px; padding-bottom: 0; margin-bottom: 0; border-bottom: none; justify-content: flex-start; padding-left: 0; }
  .ejhero__btn { font-size: 12px; padding: 9px 14px; border-radius: 9px; }
  .ejhero__btn img { width: 17px; height: 17px; }
  .ejhero__scroll { display: none; }
  /* نوارِ مزیت‌ها: بدونِ بک‌گراند، کوچک‌تر، بالاتر و جمع‌تر (نزدیک‌تر به‌هم) */
  .ejfeature-band { gap: 10px; width: 86%; margin: -116px auto 34px; }
  .ejfeature-band .ejhero__feat {
    flex-direction: column; text-align: center; gap: 4px; padding: 8px 4px;
    background: none; border: none; box-shadow: none;
  }
  .ejfeature-band .ejhero__feat:hover { transform: none; border: none; box-shadow: none; }
  .ejfeature-band .ejhero__feat img { width: 24px; height: 24px; }
  .ejfeature-band .ejhero__feat-svg { width: 21px; height: 21px; }
  .ejfeature-band .ejhero__feat b { font-size: 10.5px; }
  .ejfeature-band .ejhero__feat small { font-size: 8.5px; }
}
@media (prefers-reduced-motion: reduce) { .ejhero__mouse i { animation: none; } }

/* باکسِ ورود در هیرو (جایگزینِ ویجتِ روزها/اکانت‌ها) */
.avail-entry {
  --cut: 14px;
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(520px, 100%);
  margin: 8px 0 0;
  padding: 18px 22px;
  text-align: right;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, rgba(255, 190, 24, .16), rgba(10, 13, 18, .72));
  border: 1px solid rgba(255, 190, 24, .5);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  box-shadow: 0 18px 46px rgba(0, 0, 0, .5);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.avail-entry:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  background: linear-gradient(135deg, rgba(255, 190, 24, .24), rgba(10, 13, 18, .72));
  box-shadow: 0 22px 56px rgba(0, 0, 0, .55), 0 0 22px rgba(255, 190, 24, .25);
}
.avail-entry__ic {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--gold);
  background: rgba(255, 190, 24, .12);
  border: 1px solid rgba(255, 190, 24, .4);
  border-radius: 12px;
}
.avail-entry__ic svg { width: 24px; height: 24px; }
.avail-entry__txt { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.avail-entry__txt b { font-size: 18px; font-weight: 800; letter-spacing: .3px; }
.avail-entry__txt small { font-size: 12.5px; color: rgba(255, 255, 255, .62); }
.avail-entry__go {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 800;
  color: var(--gold);
  white-space: nowrap;
}
.avail-entry__go svg { width: 16px; height: 16px; transition: transform .25s ease; }
.avail-entry:hover .avail-entry__go svg { transform: translateY(3px); }

/* سکشنِ پیکرِ روزها/اکانت‌ها (زیرِ هیرو، با کلیک باز می‌شود) */
.avail-picker-section { padding-top: 6px; scroll-margin-top: 80px; }
.avail-picker-wrap {
  --cut: 14px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 22px 22px 20px;
  background: linear-gradient(180deg, rgba(14, 18, 24, .92), rgba(8, 11, 16, .95));
  border: 1px solid rgba(255, 190, 24, .28);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .45);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  animation: accSlotsIn .35s ease both;
}

/* ── چیپِ قیمتِ بازه‌های اجاره (کنارِ «۴ ساعته» و…) ── */
.slot-price {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 10px;
  padding: 3px 12px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--gold);
  background: rgba(255, 190, 24, .1);
  border: 1px solid rgba(255, 190, 24, .38);
  white-space: nowrap;
  vertical-align: middle;
}
.summary-price {
  font-weight: 800;
  color: var(--gold) !important;
}

/* راهنمای زیرِ گرید اکانت‌ها */
.avail-hint {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .55);
  text-align: center;
}

/* ── «همین الان چه اکانتی خالیه؟» ── */
.avail-now-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  padding: 12px 22px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  color: #141002;
  cursor: pointer;
  background: linear-gradient(180deg, var(--gold-2, #ffd23f), var(--gold));
  border: none;
  box-shadow: 0 12px 28px rgba(255, 179, 0, .28);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.avail-now-btn svg { width: 18px; height: 18px; }
.avail-now-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(255, 179, 0, .42); }
.avail-now-btn.is-open { filter: brightness(.92); }

.avail-now { margin: 0 0 18px; }
.avail-now__head { font-size: 14px; color: rgba(255, 255, 255, .85); margin-bottom: 12px; }
.avail-now__head b { color: var(--gold); }
.avail-now__empty {
  padding: 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  font-size: 13.5px;
  color: rgba(255, 255, 255, .65);
}
.avail-now__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}
.avail-now__card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  cursor: pointer;
  text-align: right;
  font-family: inherit;
  background: linear-gradient(180deg, rgba(26, 30, 38, .95), rgba(14, 17, 23, .96));
  border: 1px solid rgba(255, 190, 24, .22);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.avail-now__card:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, .5); }
.avail-now__card img, .avail-now__ph { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #14181f; }
.avail-now__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.avail-now__name { font-size: 14px; font-weight: 800; color: #fff; }
.avail-now__meta { font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.avail-now__meta b { color: var(--gold); direction: ltr; }
.avail-now__go { font-size: 12px; font-weight: 800; color: var(--gold); white-space: nowrap; }

/* ═══════════ ITEM FINDER — جستجو/فیلترِ آیتم برای اجاره ═══════════ */
.finder-head { text-align: center; max-width: 660px; margin: 0 auto 26px; }
.finder-head h2 { margin: 6px 0 10px; }
.finder-head p { color: rgba(255, 255, 255, .68); font-size: 14.5px; line-height: 1.9; margin: 0; }

.finder-panel {
  --cut: 16px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 20px 24px;
  background: linear-gradient(180deg, rgba(16, 20, 27, .92), rgba(9, 12, 17, .95));
  border: 1px solid rgba(255, 190, 24, .22);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .45);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.finder-toprow { display: flex; justify-content: center; margin-bottom: 14px; }

/* حالتِ جمع‌شده: فقط نوع (گان/اسکین) و کادرِ سرچ دیده می‌شوند؛ بقیه با کلیک روی سرچ باز می‌شوند
   تا وقتی کاربر سرچ نمی‌خواهد، این بخش جای کمی بگیرد و مزاحم نباشد */
.finder-panel.finder-collapsed .finder-durations,
.finder-panel.finder-collapsed .finder-bar,
.finder-panel.finder-collapsed .finder-status,
.finder-panel.finder-collapsed .finder-results,
.finder-panel.finder-collapsed .finder-accounts { display: none !important; }

/* toggle گان/اسکین */
.finder-types { display: flex; gap: 6px; padding: 5px; border-radius: 14px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .08); }
.finder-type {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 26px; border: none; border-radius: 10px; background: transparent;
  color: rgba(255, 255, 255, .72); font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.finder-type svg { width: 20px; height: 20px; }
.finder-type.is-active { background: linear-gradient(180deg, var(--gold-2, #ffd23f), var(--gold)); color: #141002; box-shadow: 0 8px 20px rgba(255, 179, 0, .28); }

/* انتخاب مدت اجاره */
.finder-durations { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.finder-durations__label { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .6); }
.finder-durations__btns { display: flex; flex-wrap: wrap; gap: 7px; }
.finder-durations__btns button {
  padding: 8px 16px; border-radius: 99px; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 700;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .8);
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.finder-durations__btns button:hover { border-color: rgba(255, 190, 24, .5); }
.finder-durations__btns button.is-active { background: rgba(255, 190, 24, .14); border-color: var(--gold); color: var(--gold); }

/* جستجو */
.finder-field { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 52px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; transition: border-color .2s ease, box-shadow .2s ease; }
.finder-field:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 190, 24, .14); }
.finder-field__ic { width: 20px; height: 20px; color: var(--gold); flex-shrink: 0; }
.finder-field input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: #fff; font-family: inherit; font-size: 15px; }
.finder-field input::placeholder { color: rgba(255, 255, 255, .4); }

.finder-status { margin: 14px 2px; font-size: 13px; color: rgba(255, 255, 255, .6); }
.finder-status.is-busy { color: var(--gold); }

/* گریدِ آیتم‌ها (تیک‌شونده) */
.finder-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.finder-card {
  --rar: rgba(255, 190, 24, .5);
  position: relative; display: flex; flex-direction: column; text-align: right; padding: 0;
  background: linear-gradient(180deg, rgba(26, 30, 38, .95), rgba(14, 17, 23, .96));
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 14px; overflow: hidden; cursor: pointer; font-family: inherit;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.finder-card:hover { transform: translateY(-3px); border-color: var(--rar); }
.finder-card.is-selected { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 14px 30px rgba(0, 0, 0, .5); }
.finder-card.rar-mythic    { --rar: #ff5f78; }
.finder-card.rar-legendary { --rar: #ffbe18; }
.finder-card.rar-epic      { --rar: #b06bff; }
.finder-card.rar-rare      { --rar: #5cc6f5; }

.finder-card__check {
  position: absolute; top: 8px; inset-inline-start: 8px; z-index: 3;
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px;
  background: rgba(8, 10, 14, .7); border: 1.5px solid rgba(255, 255, 255, .3); color: transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.finder-card__check svg { width: 16px; height: 16px; }
.finder-card.is-selected .finder-card__check { background: var(--gold); border-color: var(--gold); color: #141002; }

.finder-card__media {
  position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center;
  background: #07090c radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--rar) 20%, transparent), transparent 65%);
  border-bottom: 2px solid var(--rar);
}
.finder-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 8px 10px; }
.finder-card__rar, .finder-card__max { position: absolute; top: 8px; font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 99px; backdrop-filter: blur(4px); }
.finder-card__rar { inset-inline-end: 8px; color: #fff; background: color-mix(in srgb, var(--rar) 55%, rgba(0,0,0,.5)); border: 1px solid var(--rar); }
.finder-card__max { inset-inline-start: 40px; color: #141002; background: linear-gradient(180deg, #ffd23f, #ffbe18); }
.finder-card__name { padding: 10px 12px 12px; font-size: 14px; font-weight: 800; color: #fff; direction: ltr; }

/* نوار انتخاب + قیمت + دکمه */
.finder-bar {
  display: grid; grid-template-columns: 1fr 320px auto; align-items: center; gap: 18px;
  margin: 4px 0 16px; padding: 16px 18px; border-radius: 14px;
  /* چسبان بالای صفحه تا موقعِ اسکرولِ آیتم‌ها همیشه دمِ دست باشد */
  position: sticky; top: 12px; z-index: 6;
  background: rgba(10, 12, 17, .96); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 190, 24, .4);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}
.finder-bar__count { font-size: 13.5px; color: rgba(255, 255, 255, .75); }
.finder-bar__count b { color: var(--gold); font-size: 16px; }
.finder-selchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.finder-selchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 12px; color: #fff; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); direction: ltr; }
.finder-selchip b { cursor: pointer; color: #ff8a96; font-size: 15px; line-height: 1; }
.finder-selchip b:hover { color: #ff5f78; }

.finder-bar__pricehead { display: flex; justify-content: space-between; font-size: 12.5px; color: rgba(255, 255, 255, .7); margin-bottom: 8px; }
.finder-bar__pricehead b { color: var(--gold); }
.finder-bar__ends { display: flex; justify-content: space-between; font-size: 10.5px; color: rgba(255, 255, 255, .45); margin-top: 4px; direction: ltr; }
.finder-bar__price input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; cursor: pointer; direction: ltr;
  background: linear-gradient(90deg, var(--gold) 0 var(--fill, 100%), rgba(255,255,255,.14) var(--fill, 100%) 100%);
}
.finder-bar__price input[type="range"]:disabled { opacity: .5; cursor: default; }
.finder-bar__price input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); border: 3px solid #141002; box-shadow: 0 0 0 1px var(--gold), 0 2px 6px rgba(0,0,0,.5); }
.finder-bar__price input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--gold); border: 3px solid #141002; }

.finder-go {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border: none; border-radius: 12px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 800; color: #141002;
  background: linear-gradient(180deg, var(--gold-2, #ffd23f), var(--gold)); box-shadow: 0 12px 28px rgba(255, 179, 0, .3);
  transition: transform .15s ease, box-shadow .2s ease;
}
.finder-go svg { width: 18px; height: 18px; }
.finder-go:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(255, 179, 0, .42); }
.finder-go:disabled { opacity: .6; cursor: default; }

/* نتیجهٔ اکانت‌ها */
.finder-accounts { margin-top: 18px; }
.finder-accounts__head { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.finder-accounts__msg { padding: 22px; text-align: center; font-size: 14px; color: rgba(255, 255, 255, .7); }
.finder-accounts__msg.is-busy { color: var(--gold); }
.finder-accounts__none { display: flex; flex-direction: column; gap: 8px; background: rgba(255, 90, 110, .06); border: 1px solid rgba(255, 90, 110, .28); border-radius: 14px; }
.finder-accounts__none span { font-size: 12.5px; color: rgba(255, 255, 255, .5); }

.finder-accres-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.finder-accres { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; cursor: pointer; text-align: right; font-family: inherit;
  background: linear-gradient(180deg, rgba(26, 30, 38, .95), rgba(14, 17, 23, .96)); border: 1px solid rgba(255, 255, 255, .1);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.finder-accres:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.5); }
.finder-accres img, .finder-accres__ph { width: 58px; height: 58px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #14181f; }
.finder-accres__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.finder-accres__num { font-size: 14px; font-weight: 800; color: #fff; }
.finder-accres__price { font-size: 12.5px; color: var(--gold); font-weight: 700; }
.finder-accres__go { font-size: 11.5px; color: rgba(255, 255, 255, .55); }

@media (max-width: 760px) {
  .finder-bar { grid-template-columns: 1fr; }
}

/* سکشنِ مستقلِ «ساعت‌های خالی اکانت» زیرِ هیرو */
.acc-slots-section {
  padding: 8px 0 0;
  scroll-margin-top: 80px;
}
.acc-slots-wrap {
  --cut: 14px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 22px 22px;
  background: linear-gradient(180deg, rgba(14, 18, 24, .95), rgba(8, 11, 16, .96));
  border: 1px solid rgba(255, 190, 24, .34);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .5);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  animation: accSlotsIn .35s ease both;
}
@keyframes accSlotsIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.acc-slots-wrap .avail-slots__title b { color: var(--gold); }

/* دکمه‌های ردیفِ بالای جزئیات اکانت */
.detail-top-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.detail-slots-btn { padding: 10px 20px; font-size: 14px; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .avail-video { display: none; }
  .acc-slots-wrap { animation: none; }
}
@media (max-width: 760px) {
  .avail-hero { padding: 88px 0 40px; }
  .avail-title { margin-bottom: 30px; }
  /* نوار روزها: اسکرول‌بار مخفی، لغزش با snap و محوشدن لبه‌ها */
  .avail-days {
    display: flex;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    -webkit-mask: linear-gradient(to left, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
            mask: linear-gradient(to left, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
  }
  .avail-days::-webkit-scrollbar { display: none; }
  .avail-day {
    min-width: 106px;
    flex: 0 0 auto;
    scroll-snap-align: end;
  }
}

/* ===========================================================
   Footer — فوتر سایت (id="contact" تا لینک «تماس با ما» هدر کار کند)
   =========================================================== */
.site-footer {
  margin-top: 60px;
  position: relative;
  background: linear-gradient(180deg, #10151d, #0a0e13);
  border-top: 1px solid rgba(255, 190, 24, .22);
}
/* خط طلایی محو بالای فوتر */
.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 50%;
  transform: translateX(50%);
  width: min(560px, 70%);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 36px;
  width: min(1140px, calc(100% - 32px));
  margin-inline: auto;
  padding: 52px 0 32px;
}
.footer-col h4 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 16px;
}
.footer-col p {
  margin: 0 0 12px;
  color: #9aa4b2;
  font-size: 14px;
  line-height: 1.9;
}
.footer-logo {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--gold);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 2px;
  text-decoration: none;
}
.footer-col nav,
nav.footer-col { display: flex; flex-direction: column; }
nav.footer-col a {
  color: #9aa4b2;
  text-decoration: none;
  font-size: 14px;
  padding: 5px 0;
  transition: color .2s ease, transform .2s ease;
}
nav.footer-col a:hover { color: var(--gold); transform: translateX(-4px); }
.footer-socials {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}
.footer-socials a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #cfd6e0;
  border: 1px solid rgba(255, 255, 255, .14);
  transition: color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.footer-socials a svg { width: 20px; height: 20px; }
.footer-socials a:hover {
  color: var(--gold);
  border-color: rgba(255, 190, 24, .55);
  box-shadow: 0 0 16px rgba(255, 190, 24, .25);
  transform: translateY(-3px);
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .06);
  padding: 18px 16px;
  text-align: center;
  color: #7e8794;
  font-size: 13px;
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; padding: 44px 0 26px; }
}

/* ===========================================================
   Team cards — طرح شِورون طلایی (زیر بخش «درباره ما»)
   عکس‌ها با گذاشتن <img> داخل .team-card__avatar جایگزین می‌شوند
   =========================================================== */
.team-section {
  padding: 60px 20px 90px;
  width: min(1360px, calc(100% - 32px));
}
/* دسکتاپ: ۴ کارت در یک ردیف */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  max-width: 1360px;
  margin: 0 auto;
}
/* تبلت / آیپد: ۲×۲ */
@media (max-width: 1024px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); max-width: 660px; }
}
/* موبایل: دوتا در هر ردیف */
@media (max-width: 600px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); max-width: 480px; gap: 12px; }
}
.team-card {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 44px 20px 34px;
  border-radius: 16px;
  background: linear-gradient(180deg, #202a37, #161e28);
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
}
/* دو بازوی طلایی — هرکدام دقیقاً لبهٔ دایرهٔ عکس تمام می‌شوند (کمی زیر عکس تاک شده‌اند).
   clip-path روی فرزندهاست و filter روی والد، وگرنه clip خودِ glow را هم می‌بُرد. */
.team-card__chevron {
  position: absolute;
  z-index: 1;
  top: 26px;
  left: 0;
  right: 0;
  height: 230px;
  pointer-events: none;
  transition: filter .25s ease;
}
.team-card__chevron::before,
.team-card__chevron::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
}
/* بازوی چپ — نوار با ضخامت ثابت؛ لبهٔ پایینی موازی لبهٔ بالایی تا پشت عکس ادامه دارد */
.team-card__chevron::before {
  clip-path: polygon(0 0, 28.2% 26.5%, 25.6% 63.9%, 0 40%);
}
/* بازوی راست (قرینه) */
.team-card__chevron::after {
  clip-path: polygon(100% 0, 71.8% 26.5%, 74.4% 63.9%, 100% 40%);
}
/* glow بازوها هنگام hover روی کارت */
.team-card:hover .team-card__chevron {
  filter: drop-shadow(0 0 8px rgba(255, 190, 24, .8)) drop-shadow(0 0 22px rgba(255, 190, 24, .4));
}
/* آواتار دایره‌ای وسط — بدون حلقه، عکس مستقیم به بازوهای طلایی می‌چسبد */
.team-card__avatar {
  position: relative;
  z-index: 2;
  width: 220px;
  height: 220px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  /* بوردرِ هم‌رنگِ حلقهٔ حذف‌شده + هالهٔ ملایم (رنگ از --ring هر کارت) */
  border: 4px solid var(--ring, rgba(255, 255, 255, .16));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 0 22px -4px var(--ring, transparent);
  transition: box-shadow .3s ease, transform .3s ease;
  background: #55565a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239aa4b2'%3E%3Cpath d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5Z'/%3E%3C/svg%3E") center/62% no-repeat;
}
.team-card:hover .team-card__avatar {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 0 34px -2px var(--ring, transparent);
}
.team-card__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* فونتِ «ایران‌سنس دست‌نویس» (نصب‌شده در fonts/) */
@font-face {
  font-family: "IRANSansDN";
  src: url("fonts/iransans-dn.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IRANSansDN";
  src: url("fonts/iransans-dn-bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
.team-card__name {
  margin: 16px 0 0;
  color: #fff;
  font-family: "IRANSansDN", "Lalezar", "Vazirmatn", cursive;
  font-weight: 700;
  font-size: 34px;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
}
.team-card__role {
  margin: 8px 0 0;
  color: var(--gold);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .4px;
}

/* موبایل: کوچک‌سازیِ کارت‌ها برای چیدمانِ دوتاییِ هر ردیف (بعد از قواعدِ پایه تا غلبه کند) */
@media (max-width: 600px) {
  .team-card { padding: 24px 10px 18px; border-radius: 14px; }
  .team-card__avatar { width: 112px; height: 112px; border-width: 3px; }
  .team-card__name { font-size: 20px; margin-top: 10px; }
  /* بازوها را هم‌نسبتِ عکسِ کوچک‌شده جمع می‌کنیم تا از پایینِ عکس بیرون نزنند
     و نوارِ طلایی نازک‌تر شود */
  .team-card__chevron { top: 14px; height: 115px; }
}

/* ===========================================================
   About — cinematic scroll-scrub (frames advance as you scroll)
   =========================================================== */
.about-cinematic {
  position: relative;
  height: 240vh;            /* scroll distance for the frame scrub */
  margin-top: 80px;         /* breathing room after the services cards */
}
.about-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  perspective: 1200px;          /* depth for the 3D text entrance/exit */
}
.about-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #05070a;
  /* push the montage back: blurred + darkened so the text leads */
  filter: blur(4px) brightness(0.45) saturate(0.9);
  transform: scale(1.08);       /* hide the blurred edges */
}
.about-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* fade the top + bottom edges into the page so there's no hard seam */
    linear-gradient(180deg, #090d10 0%, transparent 16%, transparent 84%, #090d10 100%),
    /* readability scrim under the text (right side in RTL) */
    linear-gradient(90deg, rgba(9,13,16,.92) 0%, rgba(9,13,16,.5) 44%, rgba(9,13,16,.12) 72%);
}
.about-overlay {
  position: relative;
  z-index: 2;
  width: min(var(--max, 1200px), calc(100% - 36px));
  margin-inline: auto;
  text-align: start;        /* right in RTL */
  transform-origin: center 65%;
  will-change: transform, opacity;
}
.about-lead {
  display: inline-block;
  margin-top: 8px;
  font-family: "Barlow Condensed", "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: clamp(17px, 2.2vw, 22px);
  color: var(--gold-2);
  text-shadow: 0 0 16px rgba(255, 190, 24, 0.35);
}
.about-overlay .section-label { justify-content: flex-start; }
.about-overlay h2 { margin-top: 6px; }
.about-overlay > p {
  max-width: 560px;
  margin-top: 16px;
  font-size: 17px;
  color: #d6dde4;
}
.about-overlay > p b { color: var(--gold-2); font-weight: 800; }

.about-socials {
  display: flex;
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.about-social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #f3f6f9;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--tg-card-border);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.about-social svg { width: 22px; height: 22px; }
.about-social:hover { transform: translateY(-3px); }
.about-ig:hover { background: linear-gradient(135deg, #f9ce34, #ee2a7b 50%, #6228d7); border-color: transparent; color: #fff; box-shadow: 0 0 22px rgba(238,42,123,.45); }
.about-tg:hover { background: #229ed9; border-color: transparent; color: #fff; box-shadow: 0 0 22px rgba(34,158,217,.5); }
.about-yt:hover { background: #ff0033; border-color: transparent; color: #fff; box-shadow: 0 0 22px rgba(255,0,51,.5); }

@media (prefers-reduced-motion: reduce) {
  .about-cinematic { height: auto; }
  .about-sticky { position: static; height: auto; min-height: 70vh; padding-block: 80px; }
}

/* ---------- mobile ---------- */
@media (max-width: 680px) {
  :root { --tg-chamfer: 12px; }
  .hero-art { min-height: 340px; }
  .news-arrow { width: 38px; height: 38px; font-size: 22px; }
  .about-cinematic { height: 200vh; }
  .about-overlay > p { font-size: 15px; }
  .about-social { padding: 10px 16px; font-size: 14px; }
}

/* ══════════════════════════════════════════════════════════════════
   تعرفه اکانت‌ها — Account Pricing (imported from Claude Design)
   Faithful native rebuild of "Account Pricing.dc.html". Per-card color
   is driven by --rgb / --accent so one rule set serves all five tiers.
   ══════════════════════════════════════════════════════════════════ */
.acctier-sec {
  position: relative;
  font-family: inherit;
  background: #08070c url('images/pricing/bg.webp') top center / cover no-repeat;
  padding: 76px 44px 64px;
  overflow: hidden;
}
.acctier-sec__veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(78,40,120,.28), transparent 55%),
    linear-gradient(180deg, rgba(8,7,12,0) 28%, rgba(8,7,12,.55) 60%, rgba(8,7,12,.94) 100%);
}
.acctier-sec__grain {
  position: absolute; inset: 0; opacity: .05; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.5) .5px, transparent .5px);
  background-size: 3px 3px; mix-blend-mode: overlay;
}
.acctier-wrap { position: relative; z-index: 2; max-width: 1480px; margin: 0 auto; }
/* fade the section's top & bottom into the site background (#090d10) so there is no seam */
.acctier-sec::before,
.acctier-sec::after { content: ""; position: absolute; left: 0; right: 0; height: 170px; z-index: 1; pointer-events: none; }
.acctier-sec::before { top: 0; background: linear-gradient(to bottom, #090d10 0%, rgba(9,13,16,.7) 34%, rgba(9,13,16,0) 100%); }
.acctier-sec::after { bottom: 0; background: linear-gradient(to top, #090d10 0%, rgba(9,13,16,.7) 34%, rgba(9,13,16,0) 100%); }

/* header */
.acctier-head { text-align: center; margin-bottom: 46px; }
.acctier-eyebrow { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 14px; }
.acctier-eyebrow span { height: 1px; width: 70px; }
.acctier-eyebrow .ln-r { background: linear-gradient(90deg, rgba(240,200,80,0), rgba(240,200,80,.8)); }
.acctier-eyebrow .ln-l { background: linear-gradient(90deg, rgba(240,200,80,.8), rgba(240,200,80,0)); }
.acctier-eyebrow b { color: #e9c25a; font-size: 15px; font-weight: 700; letter-spacing: 1px; text-shadow: 0 0 18px rgba(233,194,90,.5); }
.acctier-title { margin: 0; color: #fff; font-size: 54px; font-weight: 900; letter-spacing: -.5px; text-shadow: 0 4px 34px rgba(0,0,0,.7), 0 0 46px rgba(120,70,180,.25); }
.acctier-title i { color: #f0c33c; font-style: normal; text-shadow: 0 0 30px rgba(240,195,60,.55); }
.acctier-sub { margin: 14px 0 0; color: #b9b3c4; font-size: 19px; font-weight: 500; }

/* grid */
.acctier-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; align-items: stretch; }

/* card shell */
.acctier { position: relative; border-radius: 22px; }
.acctier__ambient {
  position: absolute; left: 14%; right: 14%; bottom: -8px; height: 22px; border-radius: 50%;
  filter: blur(12px); background: radial-gradient(closest-side, rgba(var(--rgb),.4), transparent 78%);
  animation: acctierAmbient 6s ease-in-out infinite; pointer-events: none;
}
.acctier__oglow {
  position: absolute; inset: 0; border-radius: 22px; pointer-events: none;
  box-shadow: 0 0 2px rgba(var(--rgb),.6), 0 0 6px -1px rgba(var(--rgb),.5), 0 0 14px -4px rgba(var(--rgb),.4);
}
.acctier__corners {
  position: absolute; inset: -3px; border-radius: 24px; filter: blur(5px); pointer-events: none;
  background:
    radial-gradient(circle at 0 0, rgba(var(--rgb),.6), transparent 15%),
    radial-gradient(circle at 100% 0, rgba(var(--rgb),.6), transparent 15%),
    radial-gradient(circle at 0 100%, rgba(var(--rgb),.5), transparent 15%),
    radial-gradient(circle at 100% 100%, rgba(var(--rgb),.5), transparent 15%);
}

/* card body */
.acctier__card {
  position: relative; display: flex; flex-direction: column; border-radius: 22px;
  padding: 22px 18px 20px; overflow: hidden;
  background:
    radial-gradient(135% 78% at 50% 10%, rgba(var(--rgb),.12) 0%, transparent 46%),
    radial-gradient(95% 62% at 50% 42%, rgba(255,150,60,.075) 0%, transparent 55%),
    linear-gradient(180deg, #111219 0%, #0d0d13 45%, #0b0b0f 100%);
  box-shadow: 0 0 0 1px rgba(var(--rgb),.22), 0 34px 64px -22px rgba(0,0,0,.92),
    inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 34px 6px rgba(0,0,0,.55), inset 0 0 64px rgba(var(--rgb),.06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.acctier:hover .acctier__card {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(var(--rgb),.5), 0 40px 72px -22px rgba(0,0,0,.95),
    0 0 4px rgba(var(--rgb),.6), 0 0 12px -2px rgba(var(--rgb),.5),
    inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 34px 6px rgba(0,0,0,.5), inset 0 0 74px rgba(var(--rgb),.11);
}

/* card frame overlays */
.acctier__stroke {
  position: absolute; inset: 0; border-radius: 22px; padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, rgba(255,255,255,.4), var(--accent) 45%, rgba(var(--rgb),.5) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.acctier__b1 { position: absolute; inset: 3px; border-radius: 19px; border: 1px solid rgba(255,255,255,.13); pointer-events: none; }
.acctier__b2 { position: absolute; inset: 5.5px; border-radius: 17px; border: 1px solid rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); pointer-events: none; }
.acctier__sheen { position: absolute; top: 0; left: 0; right: 0; height: 120px; background: linear-gradient(180deg, rgba(255,255,255,.07), transparent); pointer-events: none; }
.acctier__tick { position: absolute; border-radius: 2px; pointer-events: none; }
.acctier__tick.t1 { top: -1px; left: 20%; width: 30px; height: 2px; background: linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent); }
.acctier__tick.t2 { top: 36%; right: -1px; width: 2px; height: 26px; background: linear-gradient(180deg,transparent,rgba(255,255,255,.7),transparent); }
.acctier__tick.t3 { bottom: -1px; right: 28%; width: 24px; height: 2px; background: linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); }
.acctier__tick.t4 { top: 58%; left: -1px; width: 2px; height: 20px; background: linear-gradient(180deg,transparent,rgba(255,255,255,.55),transparent); }

/* media / emblem stage */
.acctier__media { position: relative; height: 212px; overflow: hidden; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.acctier__glowbig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 46%, rgba(var(--rgb),.18) 0%, rgba(var(--rgb),0) 48%); animation: acctierBadge 5.5s ease-in-out infinite; }
.acctier__bloom { position: absolute; inset: 0; pointer-events: none; filter: blur(6px); background: radial-gradient(circle at 50% 45%, rgba(var(--rgb),.32) 0%, rgba(var(--rgb),0) 28%); }
.acctier__streak { position: absolute; top: 45%; left: 50%; width: 130px; height: 2px; filter: blur(1px); pointer-events: none; background: linear-gradient(90deg, transparent, rgba(var(--rgb),.35), transparent); animation: acctierStreak 6s ease-in-out infinite; }
.acctier__streak.s1 { transform: translate(-50%,-50%) rotate(23deg); }
.acctier__streak.s2 { transform: translate(-50%,-50%) rotate(-23deg); animation-delay: .8s; }
.acctier__p { position: absolute; border-radius: 50%; background: #fff; pointer-events: none; }
.acctier__p.r1 { top: 70%; left: 34%; width: 4px; height: 4px; box-shadow: 0 0 8px 2px var(--accent); animation: acctierRiseA 3.8s ease-in-out infinite; }
.acctier__p.r2 { top: 74%; left: 52%; width: 3px; height: 3px; box-shadow: 0 0 7px 2px var(--accent); animation: acctierRiseB 4.6s ease-in-out infinite .5s; }
.acctier__p.r3 { top: 72%; right: 32%; width: 4px; height: 4px; box-shadow: 0 0 8px 2px var(--accent); animation: acctierRiseA 4.2s ease-in-out infinite 1.2s; }
.acctier__p.d1 { top: 30%; left: 28%; width: 2px; height: 2px; background: rgba(255,255,255,.8); animation: acctierDust 5.4s ease-in-out infinite; }
.acctier__p.d2 { top: 40%; right: 24%; width: 1.5px; height: 1.5px; background: rgba(255,255,255,.7); animation: acctierDust 6.2s ease-in-out infinite 1s; }
.acctier__p.d3 { top: 52%; left: 22%; width: 2px; height: 2px; background: rgba(255,255,255,.6); animation: acctierDust 5.8s ease-in-out infinite 2.2s; }
.acctier__pool { position: absolute; top: 214px; left: 8%; right: 8%; height: 70px; filter: blur(5px); pointer-events: none; background: radial-gradient(60% 100% at 50% 0%, rgba(var(--rgb),.28) 0%, transparent 72%); }

/* emblem (self-contained SVG gem, tinted by --accent) */
.acctier__gem { position: relative; width: 150px; height: 150px; filter: drop-shadow(0 6px 16px rgba(0,0,0,.6)) drop-shadow(0 0 20px rgba(var(--rgb),.34)); animation: acctierBadge 5.5s ease-in-out infinite; }
.acctier__gem .gem-body { fill: var(--accent); }
.acctier__gem .gem-lt  { fill: rgba(255,255,255,.30); }
.acctier__gem .gem-lt2 { fill: rgba(255,255,255,.16); }
.acctier__gem .gem-md  { fill: rgba(255,255,255,.06); }
.acctier__gem .gem-dk  { fill: rgba(0,0,0,.16); }
.acctier__gem .gem-dk2 { fill: rgba(0,0,0,.30); }
.acctier__gem .gem-outline { fill: none; stroke: rgba(255,255,255,.45); stroke-width: 1.5; stroke-linejoin: round; }
.acctier__gem .gem-hl { stroke: rgba(255,255,255,.9); stroke-width: 2; stroke-linecap: round; }
.acctier__gem .gem-spark { fill: #fff; opacity: .9; }

/* real badge art (with star rating) — overrides the gem fallback once the file loads */
.acctier__badge { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; filter: drop-shadow(0 6px 16px rgba(0,0,0,.6)) drop-shadow(0 0 20px rgba(var(--rgb),.34)); animation: acctierBadge 5.5s ease-in-out infinite; pointer-events: none; }
.acctier__media.has-badge .acctier__gem { display: none; }

/* price rows */
.acctier__rows { position: relative; display: flex; flex-direction: column; gap: 2px; }
.acctier__row { display: flex; align-items: center; justify-content: space-between; padding: 11px 10px; border-radius: 9px; border-bottom: 1px solid rgba(255,255,255,.06); transition: background .25s ease, box-shadow .25s ease; }
.acctier__row:hover { background: rgba(var(--rgb),.09); box-shadow: inset 0 0 0 1px rgba(var(--rgb),.28); }
.acctier__rowlabel { display: flex; align-items: center; gap: 9px; color: #d9d5e0; font-size: 15px; font-weight: 600; }
.acctier__rowlabel .ic { display: flex; color: var(--accent); filter: drop-shadow(0 0 5px rgba(var(--rgb),.65)); }
.acctier__price { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.acctier__price b { color: #fff; font-weight: 700; }
.acctier__price small { color: var(--accent); font-weight: 600; font-size: 13px; }

/* CTA button */
.acctier__btn {
  position: relative; margin-top: 18px; display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 14px 16px; border-radius: 13px; overflow: hidden; border: 0;
  color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  background: linear-gradient(180deg, rgba(var(--rgb),.16), rgba(255,255,255,.02) 40%, rgba(0,0,0,.25));
  box-shadow: 0 0 0 1px rgba(var(--rgb),.35), 0 10px 26px -10px rgba(var(--rgb),.5), 0 0 30px -8px rgba(var(--rgb),.5),
    inset 0 1px 0 rgba(255,255,255,.12), inset 0 -8px 20px rgba(var(--rgb),.12);
  transition: transform .25s ease, box-shadow .25s ease; will-change: transform;
}
.acctier__btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 0 0 1px rgba(var(--rgb),.7), 0 16px 34px -10px rgba(var(--rgb),.7), 0 0 48px -6px rgba(var(--rgb),.75),
    inset 0 1px 0 rgba(255,255,255,.2), inset 0 -8px 22px rgba(var(--rgb),.2);
}
.acctier__btn::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); animation: acctierSweep 4.5s ease-in-out infinite; pointer-events: none; }
.acctier__btn::after { content: ''; position: absolute; inset: 0; border-radius: 13px; padding: 1px; background: linear-gradient(180deg, rgba(var(--rgb),.8), rgba(var(--rgb),.13)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.acctier__btn .lbl { position: relative; display: flex; align-items: center; gap: 9px; }
.acctier__btn .lbl .ic { display: flex; color: var(--accent); filter: drop-shadow(0 0 5px rgba(var(--rgb),.65)); }
.acctier__btn .arrow { position: relative; display: flex; color: var(--accent); }

/* guarantee bar */
.acctier-bar { display: flex; justify-content: center; margin-top: 34px; }
.acctier-bar__inner { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 34px; border-radius: 14px; background: linear-gradient(180deg, rgba(24,20,32,.78), rgba(14,12,18,.82)); border: 1px solid rgba(240,200,80,.3); box-shadow: 0 0 34px -6px rgba(240,200,80,.28), inset 0 1px 0 rgba(255,255,255,.06); }
.acctier-bar__inner svg { filter: drop-shadow(0 0 6px rgba(240,195,60,.6)); flex-shrink: 0; }
.acctier-bar__inner span { color: #e6e1ee; font-size: 17px; font-weight: 600; }
.acctier-bar__inner b { color: #f0c33c; font-weight: 800; }

/* ══════ نسخهٔ جمع‌وجورِ موبایل تعرفه (فقط گوشی؛ روی دسکتاپ مخفی) ══════ */
.acctm { display: none; }
.acctm__filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 16px; }
.acctm__f {
  padding: 7px 13px; border-radius: 99px; font-family: inherit; font-size: 12.5px; font-weight: 700;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.82);
  cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.acctm__f.is-active { background: rgba(255,190,24,.14); border-color: var(--gold); color: var(--gold); }
.acctm__list { display: flex; flex-direction: column; gap: 10px; }
.acctm__card {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: right; cursor: pointer;
  padding: 9px 12px; border-radius: 14px;
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(var(--rgb),.13) 0%, transparent 55%),
    linear-gradient(180deg, #12141b, #0c0d12);
  border: 1px solid rgba(var(--rgb),.55);
  box-shadow:
    0 0 0 1px rgba(var(--rgb),.18),
    0 0 8px -1px rgba(var(--rgb),.5),
    0 0 20px -6px rgba(var(--rgb),.45),
    inset 0 0 20px rgba(var(--rgb),.07),
    0 12px 26px rgba(0,0,0,.4);
  transition: transform .15s ease, box-shadow .25s ease, border-color .25s ease;
}
.acctm__card:hover {
  border-color: rgba(var(--rgb),.85);
  box-shadow:
    0 0 0 1px rgba(var(--rgb),.35),
    0 0 12px -1px rgba(var(--rgb),.7),
    0 0 26px -4px rgba(var(--rgb),.55),
    inset 0 0 24px rgba(var(--rgb),.1),
    0 14px 30px rgba(0,0,0,.45);
}
.acctm__card:active { transform: scale(.99); }
.acctm__emblem { position: relative; width: 54px; height: 56px; flex: 0 0 auto; overflow: hidden; }
.acctm__emblem img { position: absolute; max-width: none; width: var(--em-w); left: var(--em-x); top: var(--em-y); }
.acctm__stars { position: relative; width: 92px; height: 18px; flex: 0 0 auto; overflow: hidden; margin-inline-start: auto; }
.acctm__stars img { position: absolute; max-width: none; width: var(--st-w); left: var(--st-x); top: var(--st-y); }
.acctm__price { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.acctm__price b { font-size: 17px; font-weight: 800; color: #fff; }
.acctm__price small { font-size: 11px; color: rgba(255,255,255,.6); }
.acctm__chev { flex: 0 0 auto; display: flex; color: rgba(255,255,255,.4); }
.acctm__all {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  margin-top: 16px; padding: 13px; border-radius: 14px; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14);
  color: #fff; font-family: inherit; font-size: 14px; font-weight: 800;
  transition: border-color .2s ease, background .2s ease;
}
.acctm__all:hover { border-color: rgba(255,190,24,.5); background: rgba(255,190,24,.06); }
.acctm__all svg { color: var(--gold); }
/* نشانگرِ «>» سمتِ راستِ کارت (مثلِ عکس) — یعنی برای اطلاعاتِ کامل بزن */
.acctm__card::before {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px;
  border-top: 2px solid rgba(255,255,255,.5); border-right: 2px solid rgba(255,255,255,.5);
  transform: rotate(45deg); margin-inline-start: 2px; opacity: .85;
  transition: border-color .2s ease;
}
.acctm__card:hover::before { border-color: var(--accent); }

/* مودالِ جزئیات (کارتِ کاملِ دسکتاپ) */
.acctm-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.acctm-modal[hidden] { display: none; }
.acctm-modal__backdrop { position: absolute; inset: 0; background: rgba(4,5,10,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* overflow:visible تا هالهٔ نئونِ دورِ کارت (که کمی بیرونِ کادر می‌زند) بریده نشود */
.acctm-modal__box { position: relative; z-index: 1; width: 100%; max-width: 320px; overflow: visible; }
.acctm-modal__slot { display: block; }
.acctm-modal__slot .acctier { width: 100%; }
/* کارتِ کلون‌شده جمع‌وجورتر می‌شود تا بدونِ اسکرول جا شود و نوارِ خالیِ بالای امبلم حذف شود */
.acctm-modal__slot .acctier__card { padding: 8px 14px 12px; }
.acctm-modal__slot .acctier__media { height: 112px; margin-bottom: 4px; }
.acctm-modal__slot .acctier__sheen { display: none; }
.acctm-modal__slot .acctier__btn { margin-top: 12px; }

/* ویوِ «اکانت‌ها» داخلِ مودال (جایگزینِ ردیفِ قیمت‌ها) با اسکرولِ سفارشی */
.acctier__rows.is-accounts { display: block; }
.acctm-acc-list { display: flex; flex-direction: column; gap: 8px; max-height: 42vh; overflow-y: auto; padding-inline-end: 4px; }
.acctm-acc-list::-webkit-scrollbar { width: 7px; }
.acctm-acc-list::-webkit-scrollbar-thumb { background: rgba(var(--rgb),.55); border-radius: 99px; }
.acctm-acc-list::-webkit-scrollbar-track { background: rgba(255,255,255,.05); border-radius: 99px; }
.acctm-acc {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: right; cursor: pointer;
  padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1); color: #fff; font-family: inherit;
  transition: border-color .18s ease, background .18s ease;
}
.acctm-acc:hover { border-color: rgba(var(--rgb),.6); background: rgba(var(--rgb),.08); }
.acctm-acc img, .acctm-acc__ph { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; flex: 0 0 auto; background: rgba(0,0,0,.4); }
.acctm-acc__name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acctm-acc__go { margin-inline-start: auto; font-size: 11px; color: var(--accent); font-weight: 800; white-space: nowrap; }
.acctm-acc-empty, .acctm-acc-load { padding: 26px 10px; text-align: center; color: rgba(255,255,255,.6); font-size: 13px; }
/* دسکتاپ: چون صفحه بزرگ‌تر است، مودال و کارتِ اکانت‌ها بزرگ‌تر */
@media (min-width: 641px) {
  .acctm-modal__box { max-width: 460px; }
  .acctm-modal__slot .acctier__card { padding: 14px 18px 16px; }
  .acctm-modal__slot .acctier__media { height: 150px; }
  .acctm-acc-list { max-height: 54vh; gap: 10px; }
  .acctm-acc { padding: 10px 12px; border-radius: 14px; }
  .acctm-acc img, .acctm-acc__ph { width: 56px; height: 56px; border-radius: 11px; }
  .acctm-acc__name { font-size: 15px; }
  .acctm-acc__go { font-size: 12.5px; }
}
.acctm-modal__close {
  position: absolute; top: -6px; inset-inline-start: -6px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: rgba(20,22,30,.9); border: 1px solid rgba(255,255,255,.2); color: #fff;
  font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
@media (max-width: 640px) {
  .acctier-grid { display: none; }
  .acctm { display: block; }
  /* بک‌گراندِ مخصوصِ موبایل: کاراکترها بالا، پایین خالی؛ کراپ از پایین با top center/cover */
  .acctier-sec { background-image: url('images/pricing/bg-mobile.webp'); background-position: top center; }
}

/* keyframes */
@keyframes acctierAmbient { 0%,100% { opacity:.45; } 50% { opacity:.85; } }
@keyframes acctierBadge { 0%,100% { opacity:.85; transform:scale(1); } 50% { opacity:1; transform:scale(1.03); } }
@keyframes acctierStreak { 0%,100% { opacity:.2; } 50% { opacity:.55; } }
@keyframes acctierRiseA { 0% { opacity:0; transform:translateY(10px) scale(.5); } 18% { opacity:1; } 100% { opacity:0; transform:translateY(-34px) scale(1); } }
@keyframes acctierRiseB { 0% { opacity:0; transform:translateY(8px) scale(.5); } 22% { opacity:.9; } 100% { opacity:0; transform:translateY(-40px) scale(.9); } }
@keyframes acctierDust { 0%,100% { opacity:0; transform:translate(0,0) scale(.5); } 50% { opacity:.7; transform:translate(3px,-8px) scale(1); } }
@keyframes acctierSweep { 0% { transform:translateX(-160%) skewX(-18deg); } 55%,100% { transform:translateX(320%) skewX(-18deg); } }

/* responsive */
@media (max-width: 1180px) { .acctier-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) {
  .acctier-sec { padding: 56px 20px 48px; }
  .acctier-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .acctier-title { font-size: 38px; }
  .acctier-sub { font-size: 16px; }
  .acctier-bar__inner span { font-size: 15px; }
}
@media (max-width: 520px) {
  .acctier-grid { grid-template-columns: 1fr; }
  .acctier-title { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .acctier__ambient, .acctier__glowbig, .acctier__gem, .acctier__streak,
  .acctier__p, .acctier__btn::before { animation: none; }
}