/* ==========================================================================
   home.css: هیرو و نوبت آنلاین، تبدیل هیرو به «درباره‌ی ما» (مدل ۲۱)،
   سه بخش اصلی (مدل ۴۰)، نمای هر بخش
   حالت پیش‌فرض ایستا است؛ html.motion نسخه‌ی متحرک را روشن می‌کند
   ========================================================================== */

.w { display: inline-block; vertical-align: top; overflow: hidden; padding-block: .1em .18em; margin-block: -.1em -.18em; }
/* بدون will-change دائمی: هر کلمه فقط هنگام حرکت خودش لایه می‌گیرد (مرورگر خودش برای انیمیشن transform لایه می‌سازد) */
.wi { display: inline-block; }
html.intro .hero__title { opacity: 0; }
html.intro [data-intro] { opacity: 0; }

/* گرادیان مشترک هر بخش: کارت، لایه‌ی انتقال و صفحه‌ی بخش همه همین را دارند تا رنگ هنگام باز و بسته شدن نپرد */
:root {
}

/* ==========================================================================
   صحنه‌ی اول: هیرو + درباره‌ی ما
   ========================================================================== */
.stage { --hero-h: max(640px, 100svh); position: relative; background: linear-gradient(180deg, #F7F9FC 0%, #EDF2F8 100%); }
.stage__pin { position: relative; }
.stage__media { position: absolute; inset-inline: 0; top: 0; height: var(--hero-h); overflow: hidden; background: #0B2446; }
.stage__zoom { position: absolute; inset: 0; will-change: transform; }
.stage__img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; transform-origin: 26% 62%; will-change: transform; }
.stage__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to left, rgba(6, 16, 34, .9) 0%, rgba(6, 16, 34, .66) 34%, rgba(6, 16, 34, .12) 62%, rgba(6, 16, 34, 0) 74%),
    linear-gradient(to top, rgba(6, 16, 34, .6) 0%, rgba(6, 16, 34, 0) 36%);
}

.hero { position: relative; height: var(--hero-h); display: flex; flex-direction: column; padding-top: var(--hdr-h); color: #fff; }
.hero__in { flex: 1; display: flex; align-items: center; padding-block: 24px; }
.hero__copy { max-width: 660px; }
.hero__title { margin-top: 16px; font-size: var(--fs-h1); line-height: 1.24; }
.hero__lead { margin-top: 18px; max-width: 56ch; font-size: var(--fs-lead); line-height: 1.95; color: rgba(226, 233, 245, .88); }
.hero__ctas { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }

/* نوبت آنلاین */
.qbook-wrap { padding-bottom: clamp(20px, 4vh, 40px); }
.qbook { background: #fff; color: var(--ink); border-radius: var(--r2); box-shadow: var(--sh-3); padding: 16px 20px 20px; border-top: 3px solid var(--blue); }
.qbook__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.qbook__head b { font-size: 1.0625rem; }
.qbook__live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-ui); font-size: .8125rem; color: var(--ink-2); }
.qbook__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px; align-items: end; }
.qbook__submit { height: 48px; }
.qbook__submit .ic { width: 19px; height: 19px; }
.qbook .field.is-bad input { border-color: #C23A32; box-shadow: 0 0 0 4px rgba(194, 58, 50, .12); }
.qbook__result { margin-top: 14px; padding: 12px 14px; border-radius: var(--r1); background: var(--blue-50); border-inline-start: 3px solid var(--blue); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .96875rem; }
.qbook__result b { font-weight: 800; }
.qbook__result a { margin-inline-start: auto; }
.qbook__acts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-inline-start: auto; }
.qbook__acts a { margin-inline-start: 0; }
.qbook__go { --bh: 40px; padding: 0 16px; font-size: .9375rem; }
.qbook__go .ic { width: 18px; height: 18px; }

/* درباره‌ی ما (حالت ایستا: یک بخش معمولی زیر هیرو) */
.about { position: relative; padding-block: clamp(64px, 10vh, 120px); color: var(--ink); }
.about__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.about__title { margin-top: 14px; font-size: var(--fs-h2); line-height: 1.32; }
.about__p { margin-top: 18px; max-width: 60ch; color: var(--ink-2); }
.about__frame { aspect-ratio: 4 / 5; max-height: 72vh; width: 100%; border-radius: var(--r3); background: #0B2446 url("../img/hero-dental.webp") 24% 62% / cover no-repeat; box-shadow: var(--sh-2); }
.figures { margin-top: 30px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.fig { display: flex; flex-direction: column-reverse; gap: 4px; padding: 18px 16px 18px 0; }
.fig + .fig { padding-inline-start: 16px; border-inline-start: 1px solid var(--line); }
.fig dt { font-family: var(--f-ui); font-size: var(--fs-label); color: var(--ink-3); line-height: 1.5; }
.fig dd { display: flex; align-items: baseline; gap: 6px; }
.fig dd b { font-family: var(--f-ui); font-size: clamp(1.8rem, 1.3rem + 1.2vw, 2.5rem); font-weight: 700; line-height: 1.1; color: var(--navy-800); font-variant-numeric: tabular-nums; }
.fig dd span { font-size: .9375rem; color: var(--ink-2); }
.about .link-arrow { margin-top: 26px; }

/* حالت متحرک: یک صحنه‌ی پین‌شده؛ عکس هیرو در قاب «درباره‌ی ما» جمع می‌شود */
html.motion .stage__pin { height: 100svh; min-height: 640px; overflow: hidden; }
html.motion .stage__media { height: 100%; background: none; transform-origin: 0 0; will-change: transform; }
html.motion .stage__img, html.motion .stage__shade { transform-origin: 0 0; will-change: transform; }
html.motion .hero { position: absolute; inset: 0; height: auto; z-index: 2; }
html.motion .about { position: absolute; inset: 0; padding: calc(var(--bar-gap) + var(--bar-h) + clamp(24px, 5vh, 56px)) 0 clamp(28px, 6vh, 64px); display: flex; z-index: 1; pointer-events: none; }
html.motion .about.is-on { pointer-events: auto; }
html.motion .stage__pin.is-about .hero { pointer-events: none; }
html.motion .about__in { height: 100%; align-items: stretch; }
html.motion .about__text { align-self: center; }
html.motion .about__frame { aspect-ratio: auto; max-height: none; height: 100%; background: none; box-shadow: none; }

/* ==========================================================================
   کلینیک در یک نگاه (مدل ۲۱): ردیف کاشی‌ها که عکس تیم وسطش تمام‌صفحه می‌شود
   ========================================================================== */
.glance { position: relative; background: #fff; border-top: 1px solid var(--line); }
.reel { position: relative; --u: min(15vh, 21vw); --gap: clamp(10px, 1.6vw, 22px); padding-block: clamp(56px, 9vh, 96px); }
.reel__intro { display: grid; gap: 6px; margin-bottom: 28px; }
.reel__lead { font-size: var(--fs-h3); font-weight: 800; color: var(--navy-800); }
.reel__row { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--gap); }
.reel__item { flex: none; position: relative; margin: 0; height: var(--u); aspect-ratio: 2 / 3; border-radius: var(--r3); overflow: hidden; }
.reel__item--m { height: calc(var(--u) * 1.3); }
.reel__item--l { height: calc(var(--u) * 2.4); }
.reel__item--xl { height: calc(var(--u) * 3.6); z-index: 2; background: #0B1A33; box-shadow: var(--sh-2); }
.reel__inner { position: absolute; inset: 0; }
.reel__inner img { width: 100%; height: 100%; object-fit: cover; object-position: 56% 55%; }
.reel__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 16, 34, .92) 0%, rgba(6, 16, 34, .55) 34%, rgba(6, 16, 34, 0) 62%); opacity: 0; pointer-events: none; }

/* کاشی‌ها */
.tile { background: #DCE5EF; container-type: size; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 20, 39, .82) 0%, rgba(8, 20, 39, .38) 38%, rgba(8, 20, 39, 0) 64%); pointer-events: none; }
.tile figcaption { position: absolute; inset-inline: 0; bottom: 0; z-index: 1; display: grid; gap: 4px; padding: clamp(8px, 7cqi, 16px); color: #fff; }
.tile b { font-size: clamp(.6875rem, 8.5cqi, .9375rem); font-weight: 800; line-height: 1.45; }
.tile span { font-size: .8125rem; line-height: 1.7; color: rgba(255, 255, 255, .86); }
@container (max-height: 300px) { .tile span { display: none; } }
@container (max-height: 110px) { .tile figcaption { display: none; } .tile::after { opacity: .3; } }

.reel__cap { position: relative; z-index: 3; flex: 0 0 100%; max-width: 760px; margin-top: 28px; color: var(--ink); }
.reel__cap .kicker--light { color: var(--blue); }
.reel__title { margin-top: 10px; font-size: var(--fs-h2); line-height: 1.3; }
.reel__text { margin-top: 12px; max-width: 58ch; color: var(--ink-2); }
.reel__cap .link-arrow { margin-top: 18px; }
.reel__cap .link-arrow--light { color: var(--blue); text-decoration-color: rgba(30, 94, 235, .35); }

/* حالت ایستا: فقط عکس و دو کاشی کنارش */
html:not(.motion) .reel__item--s, html:not(.motion) .reel__item--m { display: none; }

/* حالت متحرک */
html.motion .reel { height: 100svh; min-height: 560px; overflow: hidden; padding: 0; }
html.motion .reel__intro { position: absolute; inset-inline: 0; top: calc(var(--bar-gap) + var(--bar-h) + clamp(12px, 3vh, 28px)); margin: 0; z-index: 1; }
html.motion .reel__row { flex-wrap: nowrap; height: 100%; width: 100%; padding-top: clamp(40px, 8vh, 80px); }
html.motion .reel__cap {
  position: absolute; flex: none; margin: 0; max-width: none;
  inset-inline-start: 0; bottom: -60vh; width: 100%;
  padding: 0 var(--gutter) clamp(36px, 8vh, 84px);
  padding-inline-start: max(var(--gutter), calc((100vw - 1320px) / 2 + var(--gutter)));
  opacity: 0; color: #fff;
}
html.motion .reel__cap > * { max-width: 760px; }
html.motion .reel__cap .kicker--light { color: #9EC0FF; }
html.motion .reel__cap .reel__text { color: rgba(226, 233, 245, .88); }
html.motion .reel__cap .link-arrow--light { color: #fff; text-decoration-color: rgba(255, 255, 255, .4); }
html.motion .reel__row.is-open { padding-top: 0; }
html.motion .reel__row.is-open .reel__item--m,
html.motion .reel__row.is-open .reel__item--l { height: var(--u); }
html.motion .reel__row.is-open .reel__item--center { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
html.motion .reel__row.is-open .reel__cap { bottom: 0; opacity: 1; }
/* حالت حرکتی: عکس وسط از اول به اندازه‌ی حالت باز است و فقط با clip و بزرگ‌نمایی باز می‌شود */
html.motion .reel__row.is-fx .reel__item--center { position: static; background: none; box-shadow: none; }
html.motion .reel__row.is-fx .reel__inner { position: absolute; inset: auto; left: var(--ox); top: var(--oy); width: var(--ow); height: var(--oh); z-index: 3; overflow: hidden; transform-origin: 0 0; will-change: transform; }
html.motion .reel__row.is-fx .reel__inner img, html.motion .reel__row.is-fx .reel__shade { transform-origin: 0 0; will-change: transform; }
html.motion .reel__row.is-fx .reel__cap { bottom: 0; z-index: 5; opacity: 1; }
html.motion .reel__row.is-fx .reel__item:not(.reel__item--center) { will-change: transform; }

/* ==========================================================================
   سه بخش اصلی
   ========================================================================== */
.depts {
  position: relative; color: #fff; background: #070A1E;
}
.depts__stage { position: relative; }
.depts__stage > :not(.dsky) { position: relative; z-index: 1; }
.dsky { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #070A1E; pointer-events: none; }
.dsky__cv { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.dsky__orbits { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #fff; }
.dsky__orbits .o { stroke-opacity: .07; stroke-width: 1; }
.dsky__orbits .o2 { stroke-opacity: .045; }
.dsky__grain { position: absolute; inset: 0; background-image: var(--grain, none); background-size: 180px 180px; opacity: .05; }
.depts__stage { display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 5vh, 48px); padding-block: clamp(72px, 11vh, 120px); }
.depts__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.depts__headtext { max-width: 720px; }
.depts__title { margin-top: 12px; font-size: var(--fs-h2); line-height: 1.3; }
.depts__sub { margin-top: 12px; max-width: 62ch; color: rgba(217, 226, 241, .8); }

.deck { width: 100%; max-width: 1320px; padding-inline: var(--gutter); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pcard { position: relative; display: block; color: #fff; border-radius: var(--r2); min-height: 440px; }
.pcard__face { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.pcard__front { display: none; background: #0E2343 url("../img/team.webp") no-repeat; }
.pcard__back {
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(16px, 1.5vw, 22px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), 0 30px 60px -30px rgba(0, 0, 0, .7);
}
.pcard__back { background: var(--aur-fallback); isolation: isolate; }
.pcard__back > :not(.aur):not(.pcard__mark) { position: relative; z-index: 1; }
.pcard__back > .pcard__mark { z-index: 1; }
.pcard__mark { position: absolute; left: -12%; bottom: -14%; width: 72%; aspect-ratio: 1; fill: none; stroke: #fff; stroke-opacity: .08; stroke-width: .7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.pcard__top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pcard__ic { width: 44px; height: 44px; border-radius: var(--r1); display: grid; place-items: center; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.pcard__ic .ic { width: 22px; height: 22px; }
.pcard__meta { font-family: var(--f-ui); font-size: .75rem; color: rgba(255, 255, 255, .78); white-space: nowrap; }
.pcard__title { position: relative; margin-top: auto; font-size: clamp(1.3rem, 1.05rem + .6vw, 1.65rem); font-weight: 800; line-height: 1.3; }
.pcard__desc { position: relative; font-size: .9375rem; line-height: 1.8; color: rgba(255, 255, 255, .86); }
.pcard__list { position: relative; display: grid; margin-top: 4px; }
.pcard__list i { font-style: normal; font-size: .875rem; line-height: 1.5; padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; align-items: center; gap: 8px; }
.pcard__list i::before { content: ""; width: 5px; height: 5px; border-radius: 1px; background: rgba(255, 255, 255, .6); }
.pcard__foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .2); }
.pcard__slot { font-family: var(--f-ui); font-size: .75rem; color: rgba(255, 255, 255, .88); }
.pcard__go { width: 40px; height: 40px; border-radius: var(--r1); display: grid; place-items: center; background: #fff; color: var(--navy-800); flex: none; transition: translate .5s var(--spring); }
.pcard__go .ic { width: 20px; height: 20px; }
.pcard:hover .pcard__go { translate: -4px 0; }

/* حالت متحرک */
html.motion .depts__stage { height: 100svh; min-height: 600px; padding: calc(var(--bar-gap) + var(--bar-h) + clamp(16px, 3.5vh, 40px)) 0 clamp(20px, 4vh, 44px); justify-content: center; justify-content: safe center; overflow: hidden; gap: clamp(20px, 4vh, 40px); }
html.motion .deck {
  --dw: min(62vw, calc((100svh - var(--chrome, 400px)) * 15 / 7), 1100px);
  position: relative; width: var(--dw); max-width: none; padding: 0;
  display: flex; gap: 0; perspective: 1500px;
}
/* فاصله‌ی کارت‌ها با transform باز می‌شود (در JS)، نه با تغییر اندازه؛ پس هیچ فریمی چیدمان را دوباره حساب نمی‌کند */
html.motion .pcard {
  flex: 1 1 0; min-height: 0; aspect-ratio: 5 / 7; transform-style: preserve-3d; transform-origin: 50% 0; border-radius: var(--r2);
  transition: border-radius .5s var(--ease-out);
}
html.motion .pcard__face { transition: translate .6s var(--spring); }
html.motion .deck:not(.is-open) .pcard:nth-child(1) { border-radius: 0 var(--r2) var(--r2) 0; }
html.motion .deck:not(.is-open) .pcard:nth-child(2) { border-radius: 0; }
html.motion .deck:not(.is-open) .pcard:nth-child(3) { border-radius: var(--r2) 0 0 var(--r2); }
html.motion .pcard:nth-child(2) { z-index: 2; }
/* تا فاصله باز نشده، یک عکس یکپارچه روی سه کارت است تا هیچ درزی دیده نشود (مثل نمونه) */
.deck__whole { display: none; }
html.motion .deck__whole {
  display: block; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: var(--r2);
  background: #0E2343 url("../img/team.webp") 50% 50% / auto 100% no-repeat;
  transition: visibility 0s linear .9s;
}
html.motion .deck.is-open .deck__whole { visibility: hidden; transition: none; }
/* پشت و روی کارت را خودمان نشان می‌دهیم (کلاس is-back)؛ به backface-visibility به‌تنهایی اعتماد نمی‌کنیم */
html.motion .pcard:not(.is-back) .pcard__back { visibility: hidden; }
html.motion .pcard.is-back .pcard__front { visibility: hidden; }
html.motion .pcard__face { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
html.motion .pcard__front { display: block; background-size: auto 100%; }
html.motion .pcard:nth-child(1) .pcard__front { background-position: 96% 50%; }
html.motion .pcard:nth-child(2) .pcard__front { background-position: 50% 50%; }
html.motion .pcard:nth-child(3) .pcard__front { background-position: 4% 50%; }
html.motion .pcard__back { transform: rotateY(180deg); container-type: size; }
html.motion .deck.is-flipped .pcard:hover .pcard__face { translate: 0 -10px; }
@container (max-height: 380px) { .pcard__list i:nth-child(n+4) { display: none; } }
@container (max-height: 340px) { .pcard__desc { display: none; } }
@container (max-height: 270px) { .pcard__list { display: none; } .pcard__meta { display: none; } }
@media (max-height: 800px) { .depts__stage { --chrome: 330px; } html.motion .depts__sub { display: none; } }
@media (min-width: 700px) and (max-width: 1060px) { html.motion .deck { --dw: min(90vw, calc((100svh - var(--chrome, 400px)) * 15 / 7)); } }

/* ==========================================================================
   مسیر درمان (مدل ۲۹): قاب عکس ثابت؛ با هر مرحله عکس بعدی از زیر نمایان می‌شود
   ========================================================================== */
.journey { position: relative; isolation: isolate; overflow: clip; color: var(--ink); background: #F3F6FA; padding-block: clamp(72px, 11vh, 120px) clamp(48px, 8vh, 96px); }
.sec-head.sec-head--stack { display: grid; justify-items: start; gap: 0; }
.sec-sub { margin-top: 12px; max-width: 64ch; color: var(--ink-2); }
.jr { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); }
.jr-steps { display: grid; gap: clamp(40px, 7vh, 72px); }
.jr-step__img { margin: 0 0 18px; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #DCE5EF; box-shadow: var(--sh-2); }
.jr-step__img img { width: 100%; height: 112%; margin-top: -6%; object-fit: cover; }
.jr-step__no { font-family: var(--f-ui); font-size: var(--fs-label); font-weight: 600; color: var(--blue); }
.jr-step__title { margin-top: 8px; font-size: var(--fs-h3); line-height: 1.45; }
.jr-step__p { margin-top: 10px; max-width: 56ch; color: var(--ink-2); }
.jr-step__facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.jr-step__facts li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r1); background: #fff; border: 1px solid var(--line); font-size: .875rem; font-weight: 600; color: var(--navy-800); }
.jr-step__facts .ic { width: 16px; height: 16px; color: var(--ok); stroke-width: 2.4; }
.jr-side { display: none; }

/* قاب عکس ثابت و نوار مرحله‌ها؛ فقط وقتی حرکت روشن است نمایش داده می‌شود */
.jr-frame { position: relative; width: 100%; border-radius: 12px; overflow: hidden; background: #DCE5EF; box-shadow: 0 2px 6px rgba(13, 27, 48, .06), 0 40px 70px -40px rgba(13, 27, 48, .45); }
.jr-frame__img { position: absolute; inset: 0; overflow: hidden; }
.jr-frame__img img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; }
.jr-dots li::before, .jr-dots li::after { content: ""; position: absolute; top: 0; inset-inline: 0; height: 3px; border-radius: 2px; }
.jr-dots li::after { transform-origin: 100% 50%; transform: scaleX(var(--f, 0)); }

@media (min-width: 900px) {
  html.motion .jr { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  html.motion .jr-steps { gap: 0; }
  html.motion .jr-step { min-height: 100svh; display: flex; align-items: center; }
  html.motion .jr-step__img { display: none; }
  html.motion .jr-step__txt { opacity: .32; transition: opacity .5s var(--ease-out); }
  html.motion .jr-step.is-active .jr-step__txt { opacity: 1; }
  html.motion .jr-step__title { font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem); }
  html.motion .jr-side { display: flex; flex-direction: column; justify-content: center; gap: 18px; position: sticky; top: 0; height: 100svh; align-self: start; padding-top: calc(var(--bar-gap) + var(--bar-h)); }
  .jr-frame { aspect-ratio: 5 / 4; max-height: 64svh; }
  .jr-dots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .jr-dots li { position: relative; padding-top: 12px; font-size: .8125rem; font-weight: 600; color: var(--ink-3); line-height: 1.5; transition: color .3s; }
  .jr-dots li::before { background: rgba(13, 27, 48, .12); }
  .jr-dots li::after { background: var(--blue); }
  .jr-dots li span { display: block; font-family: var(--f-ui); font-size: .75rem; color: inherit; }
  .jr-dots li.is-on { color: var(--navy-800); }
}

/* موبایل: قاب زیر سربرگ می‌چسبد، متن مرحله‌ها از زیرش بالا می‌آید و نوار مرحله‌ها مثل استوری روی عکس است.
   flex (نه grid) تا محدوده‌ی چسبیدن کل .jr باشد، نه فقط ردیف خود قاب */
@media (max-width: 899px) {
  html.motion .jr { display: flex; flex-direction: column; gap: 0; }
  html.motion .jr-side { display: block; order: -1; position: sticky; top: calc(var(--bar-gap) + var(--bar-h) + 12px); z-index: 2; margin-bottom: 6px; }
  html.motion .jr-steps { gap: 0; }
  html.motion .jr-step { min-height: 62svh; display: flex; align-items: center; padding-block: 24px; }
  html.motion .jr-step__img { display: none; }
  html.motion .jr-step__txt { opacity: .28; transition: opacity .5s var(--ease-out); }
  html.motion .jr-step.is-active .jr-step__txt { opacity: 1; }
  .jr-frame { aspect-ratio: 16 / 10; max-height: 36svh; }
  .jr-frame::after { content: ""; position: absolute; inset: 0 0 auto; height: 40%; z-index: 9; pointer-events: none; background: linear-gradient(rgba(8, 16, 32, .42), rgba(8, 16, 32, 0)); }
  .jr-dots { position: absolute; top: 12px; inset-inline: 14px; z-index: 10; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .jr-dots li { position: relative; height: 3px; font-size: 0; line-height: 0; color: transparent; }
  .jr-dots li span { display: none; }
  .jr-dots li::before { background: rgba(255, 255, 255, .34); }
  .jr-dots li::after { background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .5); }
}

/* آسمان روشن مسیر درمان: لایه‌ی چسبان تمام‌صفحه با چهار رنگ ملایم */
.jsky { position: sticky; top: 0; height: 100svh; margin-bottom: -100svh; z-index: -1; overflow: hidden; pointer-events: none; }
.jsky__l { position: absolute; inset: 0; display: block; }
.journey.is-near .jsky__l { will-change: opacity; }
.jsky__l--1 { background: radial-gradient(40% 46% at 82% 22%, rgba(30, 68, 242, .13), rgba(30, 68, 242, 0) 70%), radial-gradient(40% 44% at 12% 80%, rgba(157, 217, 238, .42), rgba(157, 217, 238, 0) 70%), #F3F6FA; }
.jsky__l--2 { opacity: 0; background: radial-gradient(40% 46% at 80% 26%, rgba(45, 212, 240, .2), rgba(45, 212, 240, 0) 70%), radial-gradient(40% 44% at 14% 78%, rgba(85, 216, 191, .24), rgba(85, 216, 191, 0) 70%), #EDF5F3; }
.jsky__l--3 { opacity: 0; background: radial-gradient(40% 46% at 78% 24%, rgba(123, 97, 255, .16), rgba(123, 97, 255, 0) 70%), radial-gradient(40% 44% at 16% 80%, rgba(165, 175, 255, .3), rgba(165, 175, 255, 0) 70%), #F1F0FB; }
.jsky__l--4 { opacity: 0; background: radial-gradient(40% 46% at 82% 22%, rgba(232, 67, 111, .12), rgba(232, 67, 111, 0) 70%), radial-gradient(40% 44% at 12% 82%, rgba(255, 116, 70, .14), rgba(255, 116, 70, 0) 70%), #FBF1F4; }

/* کاشی‌های «در یک نگاه»: عکس آرام نزدیک می‌شود و برچسب بالا می‌آید */
.tile img { transition: transform 1.1s var(--ease-out); }
/* ==========================================================================
   پزشکان: فهرست پزشکان کنار قاب عکس بزرگ؛ با انتخاب هر پزشک عکس و کارتش با پرده‌ی بالا رونده عوض می‌شود.
   روی تبلت و موبایل ردیف افقی کارت‌ها (js/home.js → Docs)
   ========================================================================== */
.docs { position: relative; isolation: isolate; overflow: clip; color: #fff; background: #070A1E; padding-block: clamp(72px, 11vh, 120px); }
.docs[data-k="dental"] { --tone: #8CC2FF; }
.docs[data-k="beauty"] { --tone: #FFA3C4; }
.docs[data-k="medicine"] { --tone: #7FE6CB; }
.docs .sec-title { color: #fff; }
.docs .sec-sub { max-width: 44ch; margin-top: 0; color: rgba(217, 226, 241, .72); }
.docs__side { max-width: 44ch; }
.docs__more { margin-top: 14px; }
/* جای صورت در هر عکس (برای برش‌های افقی و قاب بزرگ) */
.doc { --fy: 14%; }
.doc[data-i="4"] { --fy: 42%; }
/* سه نور رنگی پشت بخش؛ رنگ بخشِ پزشک انتخاب‌شده آرام پررنگ می‌شود */
.docs__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.docs__sky i { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease-out); }
.docs.is-near .docs__sky i { will-change: opacity; }
.docs__sky i[data-k="dental"] { background: radial-gradient(40% 55% at 22% 40%, rgba(30, 94, 235, .34), rgba(30, 94, 235, 0) 70%), radial-gradient(30% 40% at 90% 96%, rgba(45, 212, 240, .14), rgba(45, 212, 240, 0) 70%); }
.docs__sky i[data-k="beauty"] { background: radial-gradient(40% 55% at 22% 40%, rgba(214, 90, 131, .3), rgba(214, 90, 131, 0) 70%), radial-gradient(30% 40% at 90% 96%, rgba(123, 97, 255, .16), rgba(123, 97, 255, 0) 70%); }
.docs__sky i[data-k="medicine"] { background: radial-gradient(40% 55% at 22% 40%, rgba(31, 174, 134, .3), rgba(31, 174, 134, 0) 70%), radial-gradient(30% 40% at 90% 96%, rgba(30, 94, 235, .14), rgba(30, 94, 235, 0) 70%); }
.docs[data-k="dental"] .docs__sky i[data-k="dental"], .docs[data-k="beauty"] .docs__sky i[data-k="beauty"], .docs[data-k="medicine"] .docs__sky i[data-k="medicine"] { opacity: 1; }

.doc__cat { justify-self: start; padding: 2px 10px; border-radius: var(--r1); border: 1px solid currentColor; font-family: var(--f-ui); font-size: .75rem; font-weight: 600; line-height: 1.8; white-space: nowrap; }
.doc[data-k="dental"] { --tone: #8CC2FF; --tone-2: #1673D6; --tone-bg: #E7F2FC; }
.doc[data-k="beauty"] { --tone: #FFA3C4; --tone-2: #C2386B; --tone-bg: #FBEAF0; }
.doc[data-k="medicine"] { --tone: #7FE6CB; --tone-2: #0E8F6B; --tone-bg: #E5F5EF; }
.doc__head .doc__cat { color: var(--tone); }
.doc__cn { font-size: 1.25rem; font-weight: 800; line-height: 1.5; color: var(--navy-800); }
.doc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-family: var(--f-ui); font-size: .8125rem; color: var(--ink-3); }
.doc__meta .doc__cat { border: 0; background: var(--tone-bg); color: var(--tone-2); font-weight: 700; }
.doc__bio { font-size: .9688rem; line-height: 1.95; color: var(--ink-2); }
.doc__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.doc__tags li { padding: 3px 10px; border-radius: var(--r1); background: var(--mist); font-size: .8125rem; font-weight: 600; color: var(--navy-800); }
.doc__days { display: flex; align-items: flex-start; gap: 8px; font-size: .875rem; line-height: 1.7; color: var(--ink-2); }
.doc__days .ic { flex: none; width: 17px; height: 17px; margin-top: 3px; color: var(--tone-2); }
.doc__book { width: 100%; }
.doc__book .ic { width: 18px; height: 18px; }
.docs__ctl { margin-top: 20px; }

/* ---------- دسکتاپ ---------- */
@media (min-width: 1000px) {
  .docs__in {
    --sh: min(72svh, 640px); --ov: 190px; --g: clamp(32px, 4vw, 64px); --cw: 316px; --sr: .55;
    position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--g); align-items: center;
  }
  /* صفحه‌ی پهن: ستون عکس جای بیشتری می‌گیرد تا کارت معرفی کمتر روی عکس بیفتد */
  @media (min-width: 1200px) { .docs__in { grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr); --sr: .62; --cw: 340px; } }
  @supports (width: 1cqi) {
    .docs__in { container-type: inline-size; --sh: min(72svh, 640px, 50cqi); }
  }
  .docs__list { grid-column: 1; grid-row: 1; }
  .docs__stage { grid-column: 2; grid-row: 1; position: relative; height: var(--sh); }
  .docs__frame { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: #1A2130; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 50px 90px -40px rgba(0, 0, 0, .8); }
  /* نور دور قاب (js: sweep)؛ زیر قاب است و فقط لبه‌ی ۲ پیکسلی‌اش پیداست */
  .docs__beam { position: absolute; top: -7px; bottom: -7px; inset-inline-end: -7px; width: calc(var(--sh) * .8 + 14px); border-radius: 19px; overflow: hidden; opacity: 0; pointer-events: none;
    /* لبه‌ی نزدیک قاب روشن و به بیرون محو: نور مثل هاله دور قاب می‌گردد */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); padding: 7px; }
  .docs__beam i { position: absolute; left: 50%; top: 50%; width: 170%; aspect-ratio: 1; translate: -50% -50%; background: conic-gradient(from 0deg, transparent 0turn .6turn, color-mix(in srgb, var(--tone, #8CC2FF) 35%, transparent) .76turn, color-mix(in srgb, var(--tone, #8CC2FF) 85%, #fff) .88turn, #fff .9turn, color-mix(in srgb, var(--tone, #8CC2FF) 50%, transparent) .94turn, transparent 1turn); filter: blur(3px); }
  .docs__sheen { position: absolute; inset: 0; z-index: 3; pointer-events: none; transform: translate3d(-110%, 0, 0); background: linear-gradient(100deg, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, .12) 46%, rgba(255, 255, 255, .26) 50%, rgba(255, 255, 255, .12) 54%, rgba(255, 255, 255, 0) 64%); }
  .docs__img { position: absolute; inset: 0; overflow: hidden; visibility: hidden; }
  .docs__img.is-on { visibility: visible; z-index: 2; }
  .docs__img.is-under { visibility: visible; z-index: 1; }
  .docs__img img { width: 100%; height: 100%; object-fit: cover; }
  /* عکسی که صورت پایین‌تر از بقیه است کمی بزرگ‌تر می‌شود (scale جدا از transform حرکت‌ها) */
  .docs__img[data-i="4"] img { scale: 1.2; transform-origin: 50% 100%; }
  /* شماره‌ی پزشک بالای قاب؛ رقم تازه از پایین بالا می‌آید */
  .docs__count { position: absolute; top: 18px; left: 20px; z-index: 3; display: flex; align-items: baseline; gap: 6px; font-family: var(--f-ui); font-size: .8125rem; font-weight: 600; color: rgba(255, 255, 255, .7); pointer-events: none; }
  .docs__num { display: inline-block; overflow: hidden; height: 1.7em; font-size: 1.25rem; line-height: 1.7; color: #fff; }
  .docs__num b { display: block; font-weight: 700; }

  .docs__list { counter-reset: none; }
  .doc { border-bottom: 1px solid rgba(255, 255, 255, .09); }
  .doc:first-child { border-top: 1px solid rgba(255, 255, 255, .09); }
  /* حالت فعال و هاور فقط با opacity عوض می‌شود (ترنزیشن رنگ روی کامپوزیتور اجرا نمی‌شد و هر فریمش کل صفحه را دوباره می‌ساخت) */
  .doc__head { position: relative; z-index: 1; display: grid; grid-template-columns: 52px 28px minmax(0, 1fr) auto; align-items: center; gap: 16px; width: 100%; padding: 14px 16px; text-align: start; color: rgb(217, 226, 241); cursor: pointer; }
  .doc__no, .doc__role { opacity: .6; transition: opacity .35s; }
  .doc__av { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: #1A2130; opacity: .55; transition: opacity .35s; }
  .doc__av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transform: scale(1.5); transform-origin: 50% 18%; }
  .doc__no { font-family: var(--f-ui); font-size: .8125rem; font-variant-numeric: tabular-nums; }
  .doc__who { display: grid; gap: 2px; min-width: 0; }
  .doc__name { font-size: clamp(1.08rem, .95rem + .45vw, 1.35rem); font-weight: 800; line-height: 1.5; color: #fff; opacity: .78; transition: opacity .35s, translate .6s var(--ease-out); }
  .doc__role { font-size: .875rem; line-height: 1.6; }
  .doc__head .doc__cat { opacity: .75; transition: opacity .35s; }
  .doc.is-on .doc__no, .doc.is-on .doc__role, .doc__head:hover .doc__no, .doc__head:hover .doc__role { opacity: .85; }
  .doc.is-on .doc__name, .doc__head:hover .doc__name { opacity: 1; }
  .doc.is-on .doc__name { translate: -6px 0; }
  .doc.is-on .doc__av, .doc__head:hover .doc__av, .doc.is-on .doc__head .doc__cat { opacity: 1; }
  .doc__head:focus-visible { outline-offset: -3px; border-radius: 10px; }
  /* نشانگر: یک کادر روشن با نوار رنگ بخش که با فنر زیر پزشک انتخاب‌شده می‌لغزد */
  .docs__ind { position: absolute; top: 0; left: 0; z-index: 0; display: block; border-radius: 10px; pointer-events: none; background: linear-gradient(270deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .7s cubic-bezier(.3, 1.25, .5, 1); }
  .docs__ind::before { content: ""; position: absolute; inset-block: 14px; right: 0; width: 3px; border-radius: 3px; background: var(--tone); }
  .docs__list { position: static; }
  .doc { position: static; }

  /* کارت پزشک روی گوشه‌ی قاب عکس؛ همه‌ی کارت‌ها روی هم و فقط کارت انتخاب‌شده دیده می‌شود */
  .doc__body {
    position: absolute; z-index: 3; top: calc(var(--sh) + 28px); left: calc(var(--sh) * .8 - var(--ov)); translate: 0 -100%;
    width: min(350px, calc(var(--ov) + 150px)); min-height: var(--card-h, 0px);
    display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 20px; border-radius: 12px; background: #fff; color: var(--ink);
    box-shadow: 0 2px 6px rgba(6, 16, 34, .2), 0 40px 70px -30px rgba(0, 0, 0, .7); visibility: hidden;
  }
  /* جای کارت: تا جایی که ستون عکس اجازه می‌دهد به راست می‌رود؛ همیشه کمی (دست‌کم ۷۶ پیکسل) روی عکس می‌ماند
     و هیچ‌وقت از ستون عکس بیرون نمی‌زند و به فهرست نمی‌رسد */
  @supports (width: 1cqi) {
    .doc__body { width: var(--cw); left: max(calc(var(--sh) * .8 * .3), min(calc(var(--sh) * .8 - 76px), calc((100cqi - var(--g)) * var(--sr) - var(--cw)))); }
  }
  .doc.is-on .doc__body { visibility: visible; z-index: 5; }
  .doc.is-under .doc__body { visibility: visible; z-index: 4; }
  /* فرزندان کارت visibility را با قاعده‌ی خودشان می‌گیرند، نه با ارث از کارت: در جابه‌جایی خیلی سریع،
     کروم برای فرزندی که انیمیشن داشت مقدار کهنه‌ی ارث‌رسیده (پنهان) را نگه می‌داشت و یک ردیف کارت خالی می‌ماند */
  .doc__body > * { visibility: hidden; }
  .doc.is-on .doc__body > *, .doc.is-under .doc__body > * { visibility: visible; }
  .doc__img { display: none; }
  .doc__book { margin-top: auto; }
}

/* ---------- تبلت و موبایل: ردیف افقی کارت‌ها ---------- */
@media (max-width: 999.98px) {
  .docs__stage, .docs__ind { display: none; }
  .docs__list { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 8px; scroll-padding-inline: var(--gutter); touch-action: pan-x pan-y; cursor: grab; }
  .docs__list::-webkit-scrollbar { display: none; }
  .docs__list.is-drag { cursor: grabbing; scroll-snap-type: none; }
  .docs__list.is-drag .doc { pointer-events: none; }
  .docs__ctl { display: flex; }
  .doc { flex: 0 0 min(330px, 82%); scroll-snap-align: start; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: #fff; color: var(--ink); }
  .doc__body { display: contents; }
  .doc__img { order: -1; margin: 0; aspect-ratio: 5 / 4; overflow: hidden; background: #1A2130; }
  .doc__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--fy); }
  .doc__head { display: block; padding: 16px 18px 0; text-align: start; cursor: default; }
  .doc__av, .doc__no, .doc__head .doc__cat, .doc__cn { display: none; }
  .doc__who { display: grid; gap: 2px; }
  .doc__name { font-size: 1.15rem; font-weight: 800; line-height: 1.5; color: var(--navy-800); }
  .doc__role { font-size: .875rem; color: var(--ink-3); }
  .doc__meta, .doc__bio, .doc__tags, .doc__days { margin: 10px 18px 0; }
  .doc__book { margin: auto 18px 18px; width: auto; }
  .doc__days { margin-bottom: 16px; }
}

/* ==========================================================================
   ایمنی و استریل: موشن‌گرافیک چرخه‌ی چهارمرحله‌ای (حلقه روی بوم، نشانه‌ها و متن‌ها HTML؛ js: Safe)
   ========================================================================== */
.safe { position: relative; overflow: clip; color: var(--ink); background: linear-gradient(180deg, #F4F8FB, #fff 70%); padding-block: clamp(72px, 11vh, 120px); border-top: 1px solid var(--line); }
.safe .sec-sub { max-width: 46ch; margin-top: 0; }
.safe__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 900px) { .safe__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }

/* گرافیک: حلقه و چهار ایستگاه */
.sfx { --sz: min(440px, 86vw); position: relative; width: var(--sz); aspect-ratio: 1; margin-inline: auto; }
.sfx__cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.sfx__node { --a: 0deg; position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #93A1B5; box-shadow: 0 0 0 2px #E3EAF2, 0 10px 22px -12px rgba(13, 27, 48, .35); transform: rotate(var(--a)) translateY(calc(var(--sz) * -.375)) rotate(calc(var(--a) * -1)); transition: color .4s, background-color .4s, box-shadow .4s, scale .6s var(--spring); }
.sfx__node .ic { width: 22px; height: 22px; }
.sfx__node[data-i="1"] { --a: 90deg; } .sfx__node[data-i="2"] { --a: 180deg; } .sfx__node[data-i="3"] { --a: 270deg; }
.sfx__node.is-done { color: #fff; background: #0FA58F; box-shadow: 0 0 0 2px #0FA58F, 0 10px 22px -10px rgba(15, 165, 143, .6); }
.sfx__node.is-on { color: #fff; background: var(--blue); box-shadow: 0 0 0 6px rgba(30, 94, 235, .16), 0 14px 26px -10px rgba(30, 94, 235, .6); scale: 1.12; }
.sfx__mid { position: absolute; inset: 27%; display: grid; place-content: center; justify-items: center; gap: 2px; text-align: center; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff, #F2F6FB); box-shadow: inset 0 0 0 1px #E6EDF5, 0 24px 50px -30px rgba(13, 27, 48, .35); }
.sfx__no { font-family: var(--f-ui); font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); font-weight: 700; line-height: 1.1; color: var(--navy-800); }
.sfx__t { font-size: clamp(1rem, .9rem + .4vw, 1.2rem); font-weight: 800; color: var(--navy-800); }
.sfx__s { font-family: var(--f-ui); font-size: .75rem; color: var(--ink-3); }
.safe.is-near .sfx__mid > * { will-change: transform, opacity; }

/* مرحله‌ها */
.safe__steps { display: grid; gap: 8px; }
.sf__btn { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; width: 100%; padding: 16px 18px 18px; border-radius: 12px; text-align: start; overflow: hidden; transition: background-color .35s, box-shadow .35s; }
.sf__btn:hover { background: rgba(255, 255, 255, .7); }
.sf__no { font-family: var(--f-ui); font-size: .8125rem; font-weight: 700; color: var(--ink-3); padding-top: 3px; transition: color .35s; }
.sf__txt { display: grid; gap: 4px; }
.sf__txt b { font-size: 1.05rem; font-weight: 800; color: var(--ink-2); transition: color .35s; }
.sf__txt span { font-size: .9375rem; line-height: 1.9; color: var(--ink-3); transition: color .35s; }
.sf__bar { position: absolute; inset-inline: 18px; bottom: 0; height: 2px; border-radius: 2px; background: transparent; overflow: hidden; }
.sf__bar i { position: absolute; inset: 0; background: linear-gradient(270deg, #0FA58F, var(--blue)); transform-origin: 100% 50%; transform: scaleX(0); will-change: transform; }
.sf.is-on .sf__btn { background: #fff; box-shadow: 0 1px 2px rgba(13, 27, 48, .06), 0 18px 36px -24px rgba(13, 27, 48, .45); }
.sf.is-on .sf__no { color: var(--blue); }
.sf.is-on .sf__txt b { color: var(--navy-800); }
.sf.is-on .sf__txt span { color: var(--ink-2); }
.sf.is-on .sf__bar { background: var(--mist-2); }
.sf.is-done .sf__no { color: #0FA58F; }
/* بی‌حرکت: همه‌ی مرحله‌ها کامل */
html:not(.motion) .sf .sf__txt b, html.rm .sf .sf__txt b { color: var(--navy-800); }
html:not(.motion) .sf .sf__txt span, html.rm .sf .sf__txt span { color: var(--ink-2); }

.safe__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(32px, 5vw, 56px); }
.safe__facts li { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: .875rem; line-height: 1.8; color: var(--ink-3); }
.safe__facts .ic { flex: none; width: 22px; height: 22px; margin-top: 2px; color: #0FA58F; }
.safe__facts b { display: block; font-size: .9688rem; color: var(--navy-800); }
@media (max-width: 899.98px) {
  .safe__facts { grid-template-columns: minmax(0, 1fr); }
  .sfx { --sz: min(340px, 82vw); }
  .sfx__node { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  .sfx__node .ic { width: 19px; height: 19px; }
}

.tile figcaption { transition: transform .6s var(--ease-out); }
@media (hover: hover) { .tile:hover img { transform: scale(1.07); } .tile:hover figcaption { transform: translateY(-4px); } }
/* نور براق کارت بخش که دنبال نشانگر می‌رود */
.pcard__back::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease-out); background: radial-gradient(60% 50% at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%); }
@media (hover: hover) { .deck.is-flipped .pcard:hover .pcard__back::after { opacity: 1; } }

/* ==========================================================================
   نمونه‌ی درمان‌ها (مدل ۵۳): هر عکس در یک شبکه‌ی ۳×۳ کاشی‌به‌کاشی باز می‌شود
   ========================================================================== */
.cases { background: #fff; color: var(--ink); padding-block: clamp(72px, 11vh, 120px); border-top: 1px solid var(--line); }
.cs-list { display: grid; gap: clamp(72px, 12vh, 140px); margin-top: clamp(20px, 4vh, 40px); }
.cs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.cs:nth-child(even) .cs__media { order: -1; }
.cs__media { position: relative; padding-bottom: 14%; }
.cs__img { position: relative; margin: 0; border-radius: 12px; overflow: hidden; background: var(--mist-2); }
.cs__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs__img--a { width: 86%; aspect-ratio: var(--ar, 4 / 3); margin-inline-start: auto; box-shadow: var(--sh-2); }
.cs--tall .cs__img--a { width: 62%; }
.cs__img--b { position: absolute; bottom: 0; inset-inline-start: 0; width: 36%; aspect-ratio: 1; border: 6px solid #fff; border-radius: 14px; box-shadow: 0 24px 50px -24px rgba(13, 27, 48, .45); }
.cs:nth-child(even) .cs__img--a { margin-inline: 0 auto; }
.cs:nth-child(even) .cs__img--b { inset-inline: auto 0; }
.cs__cv { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.cs__tag { display: inline-flex; padding: 2px 10px; border-radius: var(--r1); font-family: var(--f-ui); font-size: .75rem; font-weight: 600; line-height: 1.8; }
.cs[data-k="dental"] .cs__tag { background: #E7F2FC; color: #0D4F97; }
.cs[data-k="beauty"] .cs__tag { background: #FBEAF0; color: #8C2452; }
.cs[data-k="medicine"] .cs__tag { background: #E5F5EF; color: #0C6C53; }
.cs__title { margin-top: 14px; font-size: clamp(1.35rem, 1.05rem + 1vw, 1.95rem); line-height: 1.45; }
.cs__who { margin-top: 8px; font-family: var(--f-ui); font-size: .875rem; color: var(--ink-3); }
.cs__p { margin-top: 14px; color: var(--ink-2); line-height: 1.95; max-width: 52ch; }
.cs__steps { margin-top: 18px; display: grid; gap: 10px; counter-reset: st; }
.cs__steps li { position: relative; padding-inline-start: 34px; font-size: .9375rem; line-height: 1.8; counter-increment: st; }
.cs__steps li::before { content: counter(st, persian); position: absolute; inset-inline-start: 0; top: 2px; width: 24px; height: 24px; border-radius: var(--r1); display: grid; place-items: center; background: var(--mist); border: 1px solid var(--line); font-family: var(--f-ui); font-size: .75rem; font-weight: 700; color: var(--navy-800); }
.cs__stats { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.cs__stats li { display: grid; gap: 2px; padding: 14px 0; padding-inline-end: 14px; }
.cs__stats li + li { padding-inline-start: 16px; border-inline-start: 1px solid var(--line); }
.cs__stats b { font-family: var(--f-ui); font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); font-weight: 700; line-height: 1.15; color: var(--navy-800); font-variant-numeric: tabular-nums; }
.cs__stats span { font-size: .8125rem; line-height: 1.5; color: var(--ink-3); }
.cs__doc { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: .875rem; font-weight: 600; color: var(--ink-2); }
.cs__doc .ic { width: 18px; height: 18px; color: var(--blue); }
@media (max-width: 899.98px) {
  .cs { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cs .cs__media, .cs:nth-child(even) .cs__media { order: -1; }
  .cs__media { padding-bottom: 18%; }
  .cs__img--a, .cs--tall .cs__img--a { width: 84%; }
  .cs--tall .cs__img--a { aspect-ratio: 4 / 3; }
  .cs__img--b { width: 40%; border-width: 4px; }
}

/* ==========================================================================
   نظر بیماران
   ========================================================================== */
.reviews { background: var(--mist); color: var(--ink); padding-block: clamp(72px, 11vh, 120px); border-top: 1px solid var(--line); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vh, 40px); }
.sec-title { margin-top: 12px; font-size: var(--fs-h2); line-height: 1.3; }
.rv { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.rv-sum { display: grid; gap: 10px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r2); background: linear-gradient(180deg, #F7F9FC, #EFF3F9); }
.rv-score { display: flex; align-items: baseline; gap: 8px; }
.rv-score b { font-family: var(--f-ui); font-size: 3.5rem; font-weight: 700; line-height: 1; color: var(--navy-800); font-variant-numeric: tabular-nums; }
.rv-score span { color: var(--ink-2); font-weight: 600; }
.rv-stars { display: inline-flex; gap: 2px; color: #F2A516; }
.rv-stars .ic { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.rv-stars--lg .ic { width: 20px; height: 20px; }
.rv-stars .ic.is-off { color: #D5DCE6; }
/* ستاره‌های بزرگ به اندازه‌ی میانگین پر می‌شوند (--r = میانگین / ۵)؛ از راست، هم‌جهت با متن */
.rv-stars--lg { position: relative; justify-self: start; width: max-content; }
.rv-stars__base, .rv-stars__fill { display: inline-flex; gap: 2px; }
.rv-stars__base { color: #D5DCE6; }
.rv-stars__fill { position: absolute; inset: 0; color: #F2A516; clip-path: inset(0 0 0 calc((1 - var(--r, 1)) * 100%)); }
.rv-scope { font-family: var(--f-ui); font-size: .8125rem; color: var(--ink-3); overflow: hidden; }
.rv-scope b { display: inline-block; font-weight: 700; color: var(--navy-800); }
.rv-count { font-size: .9375rem; color: var(--ink-2); }
.rv-count b { color: var(--ink); font-variant-numeric: tabular-nums; }
.rv-bars { display: grid; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.rv-bars li { display: grid; grid-template-columns: 58px minmax(0, 1fr) 40px; align-items: center; gap: 10px; font-family: var(--f-ui); font-size: .8125rem; color: var(--ink-2); }
.rv-bars i { position: relative; height: 6px; border-radius: 3px; background: #DCE3EC; overflow: hidden; }
.rv-bars i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #1E5EEB, #2F7BFF); transform-origin: 100% 50%; transform: scaleX(calc(var(--v) * var(--grow, 1))); }
.rv-bars b { text-align: left; font-variant-numeric: tabular-nums; }
.rv-note { margin-top: 6px; font-size: .8125rem; line-height: 1.8; color: var(--ink-3); }

.rv-main { min-width: 0; }
.rv-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.rv-tabs button { height: 38px; padding: 0 14px; border-radius: var(--r1); border: 1px solid var(--line-2); font-size: .875rem; font-weight: 600; color: var(--ink-2); background: #fff; transition: background-color .2s, color .2s, border-color .2s; }
.rv-tabs button:hover { border-color: var(--ink-3); color: var(--ink); }
.rv-tabs button[aria-selected="true"] { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.rv-track { display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 10px; cursor: grab; }
.rv-track::-webkit-scrollbar { display: none; }
.rv-track.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.rv-card { flex: 0 0 min(370px, 84%); scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--r2); box-shadow: var(--sh-1); transition: border-color .25s, box-shadow .3s, translate .5s var(--spring); }
.rv-card:hover { border-color: var(--line-2); box-shadow: var(--sh-2); translate: 0 -4px; }
.rv-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rv-tag { font-family: var(--f-ui); font-size: .75rem; font-weight: 600; line-height: 1.8; padding: 0 10px; border-radius: var(--r1); }
.rv-tag--dental { background: #E7F2FC; color: #0D4F97; }
.rv-tag--beauty { background: #FBEAF0; color: #8C2452; }
.rv-tag--medicine { background: #E5F5EF; color: #0C6C53; }
.rv-card blockquote { margin: 0; font-size: 1rem; line-height: 1.95; color: var(--ink); }
.rv-card blockquote::before { content: "«"; color: var(--blue); font-weight: 800; margin-inline-end: 2px; }
.rv-card blockquote::after { content: "»"; color: var(--blue); font-weight: 800; margin-inline-start: 2px; }
.rv-card footer { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--mist-2); }
.rv-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 800; color: #fff; }
.rv-av--dental { background: linear-gradient(150deg, #2A9BE0, #0B4E93); }
.rv-av--beauty { background: linear-gradient(150deg, #D65A83, #7E1F48); }
.rv-av--medicine { background: linear-gradient(150deg, #1FAE86, #0A6049); }
.rv-who { display: grid; line-height: 1.5; }
.rv-who b { font-size: .9375rem; }
.rv-who small { font-family: var(--f-ui); font-size: .75rem; color: var(--ink-3); }
.rv-progress { position: relative; height: 2px; margin-top: 14px; background: var(--mist-2); }
.rv-progress i { position: absolute; inset-block: 0; right: 0; width: calc(var(--p, 0) * 100%); min-width: 32px; background: var(--navy-800); transition: width .2s; }
.rv-nav { display: flex; gap: 8px; }
.rv-btn { width: 46px; height: 46px; border-radius: var(--r1); border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--navy-800); transition: background-color .2s, border-color .2s, opacity .2s; }
.rv-btn:hover { background: var(--mist); border-color: var(--ink-3); }
.rv-btn:disabled { opacity: .35; cursor: default; }

/* ==========================================================================
   مجله‌ی سلامت: فهرست مقاله‌ها؛ روی دسکتاپ عکس هر مقاله دنبال نشانگر می‌آید
   ========================================================================== */
.mag { position: relative; overflow: clip; isolation: isolate; color: #fff; background: #070A1E; padding-block: clamp(72px, 11vh, 120px); }
.mag::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(38% 50% at 86% 8%, rgba(123, 97, 255, .3), rgba(123, 97, 255, 0) 70%), radial-gradient(40% 50% at 8% 94%, rgba(30, 68, 242, .32), rgba(30, 68, 242, 0) 70%), radial-gradient(26% 30% at 50% 60%, rgba(45, 212, 240, .08), rgba(45, 212, 240, 0) 70%); }
.mag .sec-title { color: #fff; }
.mag__list { border-top: 1px solid rgba(255, 255, 255, .12); }
.mag__item { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.mag__row { position: relative; isolation: isolate; display: grid; grid-template-columns: 44px 128px minmax(0, 1fr) 210px 46px; align-items: center; gap: 22px; padding: 24px 10px; color: #fff; text-decoration: none; }
.mag__row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(270deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .55s var(--ease-out); }
.mag__media { display: none; }
.mag__no { font-family: var(--f-ui); font-size: .8125rem; color: rgba(217, 226, 241, .45); font-variant-numeric: tabular-nums; transition: color .3s; }
.mag__cat { justify-self: start; padding: 2px 10px; border-radius: var(--r1); border: 1px solid currentColor; font-family: var(--f-ui); font-size: .75rem; font-weight: 600; line-height: 1.8; white-space: nowrap; }
.mag__item[data-k="dental"] .mag__cat { color: #8CC2FF; }
.mag__item[data-k="beauty"] .mag__cat { color: #FFA3C4; }
.mag__item[data-k="medicine"] .mag__cat { color: #7FE6CB; }
.mag__title { font-size: clamp(1.08rem, .92rem + .55vw, 1.45rem); font-weight: 800; line-height: 1.6; transition: transform .6s var(--ease-out); }
.mag__meta { font-family: var(--f-ui); font-size: .8125rem; color: rgba(217, 226, 241, .6); transition: opacity .35s; }
.mag__list.is-pv .mag__meta, .mag__list.is-pv .mag__go { opacity: .25; }
.mag__list.is-pv .mag__row:hover .mag__go { opacity: 1; }
.mag__go { transition-property: background-color, color, border-color, transform, opacity; }
.mag__go { width: 46px; height: 46px; border-radius: var(--r3); display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .2); transition: background-color .3s, color .3s, border-color .3s, transform .6s var(--spring); }
@media (hover: hover) {
  .mag__row:hover::before { transform: scaleY(1); }
  .mag__row:hover .mag__title { transform: translateX(-10px); }
  .mag__row:hover .mag__no { color: #fff; }
  .mag__row:hover .mag__go { background: #fff; color: var(--navy-800); border-color: #fff; transform: translateX(-4px); }
}
.mag__row:focus-visible { outline-offset: -3px; }
/* کنترل ردیف‌های افقی (فلش‌ها و نوار پیشرفت)؛ فقط وقتی فهرست افقی است */
.hctl { display: none; align-items: center; gap: 16px; margin-top: 18px; }
.hctl__bar { position: relative; flex: 1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.hctl__bar i { position: absolute; inset-block: 0; right: 0; width: 100%; background: #fff; transform-origin: 100% 50%; transform: scaleX(var(--p, .2)); transition: transform .35s var(--ease-out); }
.hctl__nav { display: flex; gap: 8px; }
.hctl__btn { width: 44px; height: 44px; border-radius: var(--r1); display: grid; place-items: center; color: #fff; border: 1px solid rgba(255, 255, 255, .22); transition: background-color .25s, color .25s, border-color .25s, opacity .25s, transform .5s var(--spring); }
.hctl__btn:hover:not(:disabled) { background: #fff; color: var(--navy-800); border-color: #fff; }
.hctl__btn:active:not(:disabled) { transform: scale(.92); }
.hctl__btn:disabled { opacity: .3; cursor: default; }
.mag__note { margin-top: 20px; font-size: .8125rem; color: rgba(217, 226, 241, .55); }
.mag .link-arrow--light { white-space: nowrap; }
/* پیش‌نمایش شناور */
.mag__pv { position: absolute; left: 0; top: 0; z-index: 3; width: clamp(220px, 19vw, 290px); aspect-ratio: 4 / 5; border-radius: var(--r3); overflow: hidden; pointer-events: none; opacity: 0; visibility: hidden; box-shadow: 0 40px 70px -24px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .12); will-change: transform, opacity; }
.mag__pv-in { position: relative; width: 100%; height: 100%; }
.mag__pv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(100% 0 0 0); transform: scale(1.18); transition: clip-path .7s var(--ease-out), transform 1.1s var(--ease-out); }
.mag__pv img.is-on { clip-path: inset(0 0 0 0); transform: scale(1); }
@media (max-width: 1060px) {
  .mag__list { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; border: 0; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 8px; scroll-padding-inline: var(--gutter); }
  .mag__list::-webkit-scrollbar { display: none; }
  .mag__list { touch-action: pan-x pan-y; cursor: grab; }
  .mag__list.is-drag { cursor: grabbing; scroll-snap-type: none; }
  .mag__list.is-drag .mag__row { pointer-events: none; }
  .mag__ctl { display: flex; }
  .mag__item { flex: 0 0 min(360px, 80%); scroll-snap-align: start; border: 0; }
  .mag__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "media media" "cat go" "title title" "meta meta"; gap: 10px; padding: 0 0 6px; }
  .mag__row::before { display: none; }
  .mag__media { grid-area: media; display: block; aspect-ratio: 16 / 10; border-radius: var(--r3); overflow: hidden; margin-bottom: 6px; background: #111a33; }
  .mag__media img { width: 100%; height: 100%; object-fit: cover; }
  .mag__no { display: none; }
  .mag__cat { grid-area: cat; }
  .mag__go { grid-area: go; width: 38px; height: 38px; }
  .mag__title { grid-area: title; font-size: 1.0625rem; }
  .mag__meta { grid-area: meta; }
  .mag__pv { display: none; }
}

/* ==========================================================================
   سؤال‌های پرتکرار
   ========================================================================== */
.faq { background: var(--mist); color: var(--ink); padding-block: clamp(72px, 11vh, 120px); border-top: 1px solid var(--line); }
.faq__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.faq__head { position: sticky; top: calc(var(--bar-gap) + var(--bar-h) + 32px); }
.faq__ask { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.faq__all { margin-top: 22px; }
.faq-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.faq-tabs button { height: 38px; padding: 0 14px; border-radius: var(--r1); border: 1px solid var(--line-2); font-size: .875rem; font-weight: 600; color: var(--ink-2); background: #fff; transition: background-color .2s, color .2s, border-color .2s; }
.faq-tabs button:hover { border-color: var(--ink-3); color: var(--ink); }
.faq-tabs button[aria-pressed="true"] { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.faq-list { display: grid; gap: 10px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--r2); transition: border-color .25s, box-shadow .35s; }
.faq-item:hover { border-color: var(--line-2); }
.faq-item[open]:not(.is-closing) { border-color: var(--line-2); box-shadow: var(--sh-2); }
.faq-item[hidden] { display: none; }
.faq-list:not([data-f="all"]) .faq-item__tag { display: none; }
.faq-list:not([data-f="all"]) .faq-item summary { grid-template-areas: "q ic"; }
html.motion [data-rv].is-pre { opacity: 0; }
.faq-item summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tag ic" "q ic"; column-gap: 16px; row-gap: 2px; align-items: center; padding: 16px 20px; cursor: pointer; border-radius: inherit; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__tag { grid-area: tag; font-family: var(--f-ui); font-size: .75rem; font-weight: 600; color: var(--ink-3); }
.faq-item__q { grid-area: q; font-size: 1.0625rem; font-weight: 700; line-height: 1.65; }
.faq-item__ic { grid-area: ic; position: relative; width: 36px; height: 36px; border-radius: var(--r1); background: var(--mist); transition: background-color .3s; }
.faq-item__ic::before, .faq-item__ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 1px; background: var(--navy-800); transition: transform .5s var(--ease-out), background-color .3s; }
.faq-item__ic::after { transform: rotate(90deg); }
.faq-item[open]:not(.is-closing) .faq-item__ic { background: var(--navy-800); }
.faq-item[open]:not(.is-closing) .faq-item__ic::before, .faq-item[open]:not(.is-closing) .faq-item__ic::after { background: #fff; }
.faq-item[open]:not(.is-closing) .faq-item__ic::after { transform: rotate(0deg); }
.faq-item summary:hover .faq-item__ic { background: var(--mist-2); }
.faq-item[open]:not(.is-closing) summary:hover .faq-item__ic { background: var(--navy-700); }
.faq-item__a { overflow: hidden; }
.faq-item__a p { margin: 0 20px 20px; padding-top: 14px; border-top: 1px solid var(--mist-2); max-width: 68ch; line-height: 2; color: var(--ink-2); }

/* ==========================================================================
   مسیر و تماس
   ========================================================================== */
.visit { background: #fff; color: var(--ink); padding-block: clamp(72px, 11vh, 120px); border-top: 1px solid var(--line); }
.visit__status { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px; border-radius: var(--r1); background: var(--mist); border: 1px solid var(--line); font-family: var(--f-ui); font-size: .875rem; font-weight: 600; color: var(--ink-2); }
.visit__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); align-items: stretch; }
.visit__status .dot { background: var(--ok); }
.vcard { padding: 22px; border: 1px solid var(--line); border-radius: var(--r2); background: #fff; }
.vcard__title { display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; font-weight: 800; }
.vcard__title .ic { width: 20px; height: 20px; color: var(--blue); }
.vcard__addr { margin-top: 10px; font-size: 1.0625rem; line-height: 1.9; }
.vcard__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.vcard__note { margin-top: 12px; font-size: .8125rem; line-height: 1.8; color: var(--ink-3); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: var(--r1); border: 1px solid var(--line-2); background: #fff; font-size: .875rem; font-weight: 600; color: var(--navy-800); text-decoration: none; transition: background-color .2s, border-color .2s, color .2s; }
.chip:hover { background: var(--mist); border-color: var(--ink-3); }
.chip .ic { width: 16px; height: 16px; color: var(--blue); }
.chip.is-done { background: #E5F5EF; border-color: #9ED7C0; color: #0C6C53; }
.chip.is-done .ic { color: var(--ok); }
.hours { display: grid; margin-top: 10px; }
.hours li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; margin-inline: -10px; border-radius: var(--r1); font-size: .9375rem; }
.hours li + li { box-shadow: 0 -1px 0 var(--mist-2); }
.hours b { font-family: var(--f-ui); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); text-align: end; }
.hours li.is-now { background: #E8F6F0; box-shadow: none; font-weight: 700; color: #0B5A45; }
.hours li.is-now + li { box-shadow: none; }
.hours li.is-now b { color: #0B5A45; }
.hours li.is-now span::after { content: "باز است"; margin-inline-start: 8px; padding: 1px 7px; border-radius: 3px; background: var(--ok); color: #fff; font-family: var(--f-ui); font-size: .6875rem; font-weight: 600; vertical-align: 1px; }
.week { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.week__lab { font-family: var(--f-ui); font-size: .8125rem; color: var(--ink-3); }
.week__days { display: flex; gap: 5px; }
.week__days li { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r1); background: var(--mist); color: var(--ink-3); font-family: var(--f-ui); font-size: .8125rem; font-weight: 600; }
.week__days li.is-on { background: var(--blue-50); color: var(--navy-800); box-shadow: inset 0 0 0 1px #C9DAF8; }
.week__days li.is-today::after { content: ""; position: absolute; bottom: -7px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--blue); }
.vcard__zip { margin-top: 4px; font-family: var(--f-ui); font-size: .875rem; color: var(--ink-3); }
.vcard__tel { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; font-family: var(--f-ui); font-size: 1.375rem; font-weight: 700; color: var(--navy-800); text-decoration: none; }
.vcard__tel .ic { width: 20px; height: 20px; color: var(--blue); }
.vcard__tel:hover span { text-decoration: underline; text-underline-offset: 5px; }
.social { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r1); border: 1px solid var(--line-2); background: #fff; transition: transform .45s var(--spring), border-color .2s, box-shadow .2s; }
.social img { display: block; width: 20px; height: 20px; }
.social:hover { transform: translateY(-2px); border-color: var(--ink-3); box-shadow: var(--sh-1); }
.reach { display: grid; gap: 14px; margin-top: 14px; }
.reach li { display: flex; align-items: flex-start; gap: 12px; }
.reach .ic { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: var(--r1); background: var(--mist); color: var(--navy-800); }
.reach b { display: block; font-size: .9375rem; line-height: 1.6; }
.reach span { display: block; font-size: .875rem; line-height: 1.8; color: var(--ink-2); }

/* ---------- نقشه‌ی مسیر: نقشه‌ی واقعی سلمان‌شهر (OpenStreetMap) و سه مسیر متحرک ---------- */
.vstage { display: grid; gap: clamp(12px, 1.6vw, 20px); margin-bottom: clamp(12px, 1.6vw, 20px); }
.vmap { position: relative; margin: 0; --ca: #1E5EEB; --cb: #0B9F87; --cc: #7B55F5; }
.vmap__frame { position: relative; aspect-ratio: 2.3 / 1; border-radius: var(--r2); overflow: hidden; background: #F1F3F7; border: 1px solid var(--line); isolation: isolate; }
.vmap__view { position: absolute; inset: 0; overflow: hidden; }
.vmap__world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.vmap__base { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; user-select: none; -webkit-user-drag: none; will-change: transform; }
/* نقشه‌ی پایه لایه‌ی جدای خودش را دارد تا کشیده شدن مسیرها آن را دوباره رسم (raster) نکند.
   مسیرها روی بوم کشیده می‌شوند (js: MapFx)؛ SVG فقط برای هندسه می‌ماند */
.vmap__cv { position: absolute; left: 0; top: 0; display: none; pointer-events: none; will-change: transform; }
.vmap--cv .vmap__cv { display: block; }
.vmap--cv .vmap__routes { visibility: hidden; }
.vmap__routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rt path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.rt__line { stroke-width: 5px; }
.rt__glow { stroke-width: 15px; stroke-opacity: .16; }
.rt--a { color: var(--ca); } .rt--b { color: var(--cb); } .rt--c { color: var(--cc); }
.rt--b .rt__line { stroke-width: 6px; }
.rt { transition: opacity .45s var(--ease-out); }
.vmap.is-focus .rt:not(.is-hot) { opacity: .2; }
/* برچسب‌ها و نشانگرها روی نقشه (HTML؛ متن تیز می‌ماند) */
.vlab, .vorg, .vtag, .vpin { position: absolute; left: var(--x); top: var(--y); }
.vlab { transform: translate(-50%, -50%) rotate(var(--r, 0deg)); white-space: nowrap; pointer-events: none; font-family: var(--f-ui); font-size: .75rem; font-weight: 600; color: #5D6A80; text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 9px #fff; }
.vlab--sea { font-family: var(--f-display, inherit); font-size: 1rem; font-weight: 700; color: #3E82B4; text-shadow: none; opacity: .85; }
.vlab--town { font-size: 1.125rem; font-weight: 800; color: #97A2B4; }
.vlab--road { font-size: .6875rem; color: #9B6A10; }
.vlab--poi { display: inline-flex; align-items: center; gap: 4px; font-size: .71875rem; color: #4B5870; }
.vlab--poi .ic { width: 13px; height: 13px; }
.vorg { width: 0; height: 0; --c: var(--ca); }
.vorg--b { --c: var(--cb); } .vorg--c { --c: var(--cc); }
.vorg i { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--c), 0 4px 10px rgba(13, 27, 48, .3); }
.vorg b, .vorg em { position: absolute; white-space: nowrap; left: 50%; transform: translateX(var(--ax, -50%)); font-style: normal; }
.vorg b { bottom: 14px; padding: 3px 9px 2px; border-radius: 6px 6px 0 0; background: var(--c); color: #fff; font-size: .75rem; font-weight: 700; line-height: 1.6; box-shadow: 0 6px 14px -6px rgba(13, 27, 48, .45); }
.vorg em { bottom: 34px; font-family: var(--f-ui); font-size: .625rem; font-weight: 600; color: #fff; opacity: .85; display: none; }
.vorg--c { --ax: -88%; }
.vorg--b { --ax: -22%; }
.vtag { transform: translate(-50%, -50%); padding: 3px 9px; border-radius: 999px; background: #fff; color: var(--c, var(--ca)); font-family: var(--f-ui); font-size: .6875rem; font-weight: 700; white-space: nowrap; box-shadow: 0 0 0 1.5px currentColor, 0 8px 18px -8px rgba(13, 27, 48, .35); pointer-events: none; }
.vtag--b { --c: var(--cb); } .vtag--c { --c: var(--cc); }
.vhead { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--c, var(--ca)), 0 0 18px 4px var(--c, var(--ca)); opacity: 0; will-change: transform, opacity; pointer-events: none; }
.vhead--b { --c: var(--cb); } .vhead--c { --c: var(--cc); }
/* مقصد: لوگوی کلینیک */
.vpin { width: 0; height: 0; z-index: 3; }
.vpin__badge { position: absolute; left: -27px; bottom: 12px; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #0B1A33, 0 14px 26px -10px rgba(13, 27, 48, .55); --lg-ink: #0B1A33; --lg-blue: #9DD9EE; --lg-fill: #fff; }
.vpin__badge::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 12px; height: 12px; margin-left: -6px; background: #0B1A33; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.vpin__mark { width: 38px; height: 38px; }
.vpin__ring { position: absolute; left: -22px; top: -9px; width: 44px; height: 18px; border-radius: 50%; border: 2px solid #0B1A33; opacity: 0; }
/* چند تپش با هر بار دیده شدن نقشه؛ بیرون از دید برداشته می‌شود تا با برگشتن دوباره پخش شود */
html.motion .vpin.is-live .vpin__ring { animation: vRing 2.6s var(--ease-out) 4 both; }
.vmap.is-away .vpin__ring { animation: none !important; }
html.motion .vpin.is-live .vpin__ring--2 { animation-delay: 1.3s; }
@keyframes vRing { 0% { transform: scale(.35); opacity: .55; } 100% { transform: scale(2.4); opacity: 0; } }
.vpin__cap { position: absolute; bottom: 30px; left: 34px; display: grid; padding: 6px 11px 5px; border-radius: var(--r1); background: #0B1A33; color: #fff; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(13, 27, 48, .6); }
.vpin__cap b { font-size: .8125rem; line-height: 1.5; }
.vpin__cap span { font-family: var(--f-ui); font-size: .6875rem; color: rgba(255, 255, 255, .72); }
/* کلیدهای نوع نقشه */
.vtabs { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 6; display: flex; padding: 4px; border-radius: 10px; background: rgba(255, 255, 255, .96); box-shadow: 0 0 0 1px rgba(13, 27, 48, .08), 0 10px 24px -12px rgba(13, 27, 48, .35); }
.vtabs__btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 7px; font-family: var(--f-ui); font-size: .8125rem; font-weight: 700; color: var(--ink-2); transition: color .3s; }
.vtabs__btn .ic { width: 16px; height: 16px; }
.vtabs__btn img { width: 12px; height: auto; }
.vtabs__btn.is-on { color: #fff; }
.vtabs__btn.is-busy::after { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: vSpin .8s linear infinite; }
@keyframes vSpin { to { transform: rotate(360deg); } }
.vtabs__ind { position: absolute; z-index: 0; top: 4px; left: 0; height: 36px; width: var(--w, 90px); border-radius: 7px; background: #0B1A33; transform: translateX(var(--tx, 0)); transition: transform .55s var(--spring), width .55s var(--spring); }
.vmap__attr { position: absolute; z-index: 5; bottom: 8px; inset-inline-end: 10px; padding: 2px 8px; border-radius: 3px; background: rgba(255, 255, 255, .85); font-family: var(--f-ui); font-size: .625rem; color: var(--ink-3); }
.vmap__attr a { color: inherit; }
/* نقشه‌ی واقعی گوگل */
.vmap__gmap { position: absolute; inset: 0; z-index: 4; background: #E9EEF4; }
.vmap__gmap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vmap__load { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; font-family: var(--f-ui); font-size: .8125rem; color: var(--ink-3); }
.vmap__load i { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #C9D3E0; border-top-color: #1A73E8; animation: vSpin .8s linear infinite; }
.vmap[data-view="google"] .vroutes { opacity: .45; pointer-events: none; }
/* راه‌های رسیدن */
.vroutes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; transition: opacity .4s; }
.vroute { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; width: 100%; height: 100%; padding: 12px 14px; border-radius: var(--r2); background: #fff; text-align: start; box-shadow: 0 0 0 1px var(--line); transition: transform .5s var(--spring), box-shadow .3s; --c: var(--ca); }
.vroutes li:nth-child(2) .vroute { --c: var(--cb); } .vroutes li:nth-child(3) .vroute { --c: var(--cc); }
.vroute i { grid-row: 1 / 3; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 6px var(--c); }
.vroute b { font-size: .875rem; line-height: 1.5; color: var(--navy-800); }
.vroute span { font-family: var(--f-ui); font-size: .6875rem; line-height: 1.6; color: var(--ink-3); }
.vroute:hover, .vroute:focus-visible, .vroute.is-hot { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--c), 0 16px 30px -18px rgba(13, 27, 48, .45); }
/* دکمه‌های مسیریاب‌ها */
.vapps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
.vapp { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r2); background: #fff; color: var(--ink); text-decoration: none; overflow: hidden; transition: border-color .3s, box-shadow .4s var(--ease-out); --b: #1A73E8; }
.vapp--balad { --b: #6B2BDC; } .vapp--neshan { --b: #1F8F7D; }
.vapp::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: repeating-linear-gradient(90deg, var(--b) 0 10px, transparent 10px 16px); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .7s var(--ease-out); }
.vapp:hover, .vapp:focus-visible { border-color: color-mix(in srgb, var(--b) 38%, var(--line)); box-shadow: 0 18px 34px -22px color-mix(in srgb, var(--b) 70%, #000); }
.vapp:hover::after, .vapp:focus-visible::after { transform: scaleX(1); }
.vapp__ic { position: relative; display: grid; place-items: center; width: 50px; height: 50px; }
.vapp__ic img { position: relative; z-index: 1; display: block; width: 48px; height: 48px; object-fit: contain; }
.vapp--balad .vapp__ic img { border-radius: 12px; }
.vapp--google .vapp__ic img { width: auto; height: 44px; }
.vapp__shadow { position: absolute; left: 50%; bottom: -5px; width: 34px; height: 7px; margin-left: -17px; border-radius: 50%; background: radial-gradient(closest-side, rgba(13, 27, 48, .28), rgba(13, 27, 48, 0)); }
.vapp__ring { position: absolute; left: 50%; bottom: -8px; width: 44px; height: 14px; margin-left: -22px; border-radius: 50%; border: 2px solid var(--b); opacity: 0; }
.vapp.is-ping .vapp__ring { animation: vRing 1.1s var(--ease-out); }
.vapp__txt b { display: block; font-size: .9375rem; line-height: 1.6; }
.vapp__txt span { display: block; font-family: var(--f-ui); font-size: .75rem; color: var(--ink-3); }
.vapp__go { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r1); background: var(--mist); color: var(--navy-800); transition: background-color .3s, color .3s; }
.vapp__go .ic { width: 18px; height: 18px; transition: transform .5s var(--spring); }
.vapp:hover .vapp__go, .vapp:focus-visible .vapp__go { background: var(--b); color: #fff; }
.vapp:hover .vapp__go .ic { transform: translateX(-4px); }

.callback { padding: 18px 20px 20px; border: 1px solid var(--line); border-top: 3px solid var(--blue); border-radius: var(--r2); background: #fff; }
.callback__head b { display: block; font-size: 1.0625rem; }
.callback__head span { display: block; margin-top: 2px; font-size: .875rem; color: var(--ink-2); }
.callback__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; align-items: end; }
.callback__submit { grid-column: 1 / -1; height: 48px; }
.field.is-bad input { border-color: #C8341F; box-shadow: 0 0 0 1px #C8341F; }
.callback__msg { margin-top: 14px; padding: 12px 14px; border-radius: var(--r1); background: #E5F5EF; border-inline-start: 3px solid var(--ok); font-size: .9375rem; line-height: 1.8; }
.callback__msg.is-bad { background: #FCECEA; border-color: #C8341F; }

/* ==========================================================================
   نمای هر بخش
   ========================================================================== */
.svc { position: fixed; inset: 0; z-index: 100; }
html.svc-open main, html.svc-open .hdr, html.svc-open .foot { visibility: hidden; }
html.svc-open main *, html.svc-open .foot * { animation-play-state: paused !important; }
.svc[data-k="dental"], .svc-morph[data-k="dental"], .pcard--dental { --a0: 6 12 46; --a0h: 14 30 104; --a1: 30 68 242; --a2: 45 212 240; --a3: 123 97 255; --a4: 165 175 255; --tone: #1E44F2; }
.svc[data-k="beauty"], .svc-morph[data-k="beauty"], .pcard--beauty { --a0: 34 7 44; --a0h: 88 16 78; --a1: 232 67 111; --a2: 203 141 255; --a3: 116 25 214; --a4: 255 116 70; --tone: #C2315D; }
/* «همه‌ی خدمات»: آبی کلینیک با رگه‌های صورتی و سبز سه بخش */
.svc[data-k="all"], .svc-morph[data-k="all"] { --a0: 8 12 42; --a0h: 20 30 98; --a1: 30 68 242; --a2: 232 67 111; --a3: 18 170 140; --a4: 165 175 255; --tone: #1E44F2; }
.svc[data-k="medicine"], .svc-morph[data-k="medicine"], .pcard--med { --a0: 3 30 30; --a0h: 8 74 70; --a1: 18 170 140; --a2: 85 216 191; --a3: 30 68 242; --a4: 167 243 228; --tone: #0E8C73; }
/* لایه‌ی انتقال همیشه اندازه‌ی کل صفحه است و فقط با transform کوچک و بزرگ می‌شود */
.svc-morph { position: fixed; z-index: 101; inset: 0; overflow: hidden; background: rgb(var(--a0)); transform-origin: 50% 50%; pointer-events: none; will-change: transform, opacity; contain: strict; }
.svc-morph .aur { background: none; border-radius: 0; }
.svc-morph .aur__cv, .svc__bg .aur__cv, .dsky__cv, .fsky__cv { will-change: transform; }
.svc__bg { position: absolute; inset: 0; overflow: hidden; background: var(--aur-fallback); }
.svc__bg .aur__art { opacity: .4; }
.svc__bg .aur__sp svg { opacity: .4; }
.svc__main { background: var(--mist); min-height: 60vh; }
.svc__scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
.svc__main { flex: 1 0 auto; }
.svc__band { color: #fff; padding-bottom: clamp(32px, 6vh, 56px); }
.svc__top { display: flex; align-items: center; gap: 16px; min-height: 76px; padding-top: env(safe-area-inset-top, 0px); border-bottom: 1px solid rgba(255, 255, 255, .16); }
.svc__back { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding-inline: 14px 16px; border-radius: var(--r1); background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); font-weight: 700; transition: background-color .2s; }
.svc__back:hover { background: rgba(255, 255, 255, .24); }
.svc__crumb { font-family: var(--f-ui); font-size: var(--fs-label); color: rgba(255, 255, 255, .78); }
.svc__hero { display: grid; justify-items: start; gap: 14px; padding-top: clamp(24px, 5vh, 56px); }
.svc__ic { width: 60px; height: 60px; border-radius: var(--r2); display: grid; place-items: center; background: rgba(255, 255, 255, .15); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.svc__ic .ic { width: 28px; height: 28px; }
.svc__title { font-size: var(--fs-h1); line-height: 1.2; }
.svc__lead { max-width: 62ch; font-size: var(--fs-lead); line-height: 1.95; color: rgba(255, 255, 255, .88); }
.svc__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 8px; }
.svc__slot { font-family: var(--f-ui); font-size: .875rem; color: rgba(255, 255, 255, .88); }
.svc__body { padding-block: clamp(32px, 6vh, 56px) 64px; color: var(--ink); }
.svc__h2 { font-size: var(--fs-h3); margin-bottom: 18px; }
.svc__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.svc__item { display: grid; gap: 8px; align-content: start; padding: 20px 22px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--tone); border-radius: var(--r2); box-shadow: var(--sh-1); }
.svc__item b { font-size: 1.0625rem; }
.svc__item p { font-size: .9375rem; line-height: 1.85; color: var(--ink-2); }
.svc__dur { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-family: var(--f-ui); font-size: .8125rem; color: var(--ink-3); }
.svc__dur .ic { width: 16px; height: 16px; }
.svc__note { margin-top: 24px; font-family: var(--f-ui); font-size: .8125rem; color: var(--ink-3); }
.svc { background: rgb(var(--a0, 8 12 42)); }
/* زبانه‌های بخش: بالای فهرست می‌چسبد؛ نشانگر رنگی با فنر زیر زبانه‌ی انتخاب‌شده می‌لغزد */
.svc__tabs { position: sticky; top: 0; z-index: 3; padding-block: 14px; background: var(--mist); box-shadow: 0 1px 0 var(--line); }
.svc__seg { position: relative; display: inline-flex; gap: 4px; max-width: 100%; padding: 4px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.svc__seg::-webkit-scrollbar { display: none; }
.svc__seg button { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding-inline: 16px 18px; border-radius: 999px; font-family: var(--f-ui); font-size: .9063rem; font-weight: 700; color: var(--ink-2); white-space: nowrap; transition: color .35s; }
.svc__seg button .ic { width: 18px; height: 18px; }
.svc__seg button:hover { color: var(--navy-800); }
.svc__seg button.is-on { color: #fff; }
.svc__seg-ind { position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--w, 0); border-radius: 999px; background: var(--tone); transform: translateX(var(--x, 0)); transition: transform .6s var(--spring), width .6s var(--spring), background-color .45s; pointer-events: none; }
.svc__list.is-all { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; }
.svc__grp { display: grid; gap: 16px; }
.svc__grp[data-k="dental"] { --tone: #1E44F2; --tb: #E8EDFE; }
.svc__grp[data-k="beauty"] { --tone: #C2315D; --tb: #FBEAF0; }
.svc__grp[data-k="medicine"] { --tone: #0E8C73; --tb: #E3F5F0; }
.svc__grp-h { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.svc__grp-ic { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--tb); color: var(--tone); }
.svc__grp-ic .ic { width: 24px; height: 24px; }
.svc__grp-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.svc__grp-t b { font-size: 1.25rem; font-weight: 800; color: var(--navy-800); }
.svc__grp-t small { font-family: var(--f-ui); font-size: .8125rem; color: var(--ink-3); }
.svc__grp-go { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding-inline: 14px; border-radius: 999px; font-family: var(--f-ui); font-size: .8125rem; font-weight: 700; color: var(--tone); background: var(--tb); transition: background-color .25s, scale .5s var(--spring); }
.svc__grp-go:hover { background: color-mix(in srgb, var(--tb) 70%, var(--tone) 12%); }
.svc__grp-go:active { scale: .96; transition-duration: .1s; }
.svc__grp-go .ic { width: 16px; height: 16px; }

/* ==========================================================================
   واکنش‌گرا
   ========================================================================== */
@media (max-width: 1060px) {
  .qbook__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qbook__submit { grid-column: 1 / -1; }
  .about__in { grid-template-columns: 1fr; }
  .about__frame { aspect-ratio: 16 / 10; max-height: none; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; }
  .fig:nth-child(n+3) { border-top: 1px solid var(--line); }
  .svc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq__in { grid-template-columns: minmax(0, 1fr); }
  .faq__head { position: static; }
  .vmap__frame { aspect-ratio: 1.55 / 1; }
  .vapp { grid-template-columns: auto minmax(0, 1fr); padding: 12px; gap: 10px; }
  .vapp__go { display: none; }
  .vapp__txt span { display: none; }
  .callback__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .callback__fields .field:nth-child(3) { grid-column: 1 / -1; }
  .rv { grid-template-columns: 1fr; }
  .rv-sum { grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; align-items: center; }
  .rv-sum > :not(.rv-bars):not(.rv-note) { grid-column: 1; }
  .rv-bars { grid-column: 2; grid-row: 1 / 4; margin: 0; padding: 0; border: 0; }
  .rv-note { grid-column: 1 / -1; }
  html.motion .about__in { grid-template-rows: auto minmax(0, 1fr); gap: 24px; }
  html.motion .about__text { align-self: start; }
}

@media (max-width: 699.98px) {
  .visit__grid { grid-template-columns: minmax(0, 1fr); }
  .vmap__frame { aspect-ratio: .9 / 1; }
  .vroutes { grid-template-columns: minmax(0, 1fr); }
  .vapps { grid-template-columns: minmax(0, 1fr); }
  .vapp { grid-template-columns: auto minmax(0, 1fr) auto; padding: 12px 14px; }
  .vapp__go { display: grid; }
  .vapp__txt span { display: block; }
  .vtabs { top: 10px; inset-inline-start: 10px; }
  .vpin__cap { display: none; }
  .vlab--town, .vlab--road { display: none; }
  .vtabs__btn { padding: 0 11px; }
  .callback__fields { grid-template-columns: minmax(0, 1fr); }
  .vcard { padding: 18px; }
  .faq-item summary { padding: 14px 16px; }
  .faq-item__a p { margin: 0 16px 16px; }
  .faq-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .faq-tabs::-webkit-scrollbar { display: none; }
  .faq-tabs button { flex: none; }
  .faq-tabs.has-pill { width: auto; margin-inline: 0; padding: 4px; overscroll-behavior-x: contain; }
  .faq__ask .btn { flex: 1 1 160px; }
  .stage__img { object-position: 22% 50%; }
  .stage__shade { background: linear-gradient(to top, rgba(6, 16, 34, .94) 0%, rgba(6, 16, 34, .78) 42%, rgba(6, 16, 34, .2) 72%, rgba(6, 16, 34, .05) 100%); }
  .hero__in { align-items: flex-end; padding-bottom: 28px; }
  .hero__ctas .btn { flex: 1 1 100%; }
  .qbook-wrap { display: none; }
  html.motion .qbook-wrap { display: none; }
  .fig dd b { font-size: 1.7rem; }
  .deck { grid-template-columns: 1fr; padding: 0 var(--gutter); }
  .pcard { min-height: 0; }
  .pcard__back { position: relative; }
  .svc__list { grid-template-columns: 1fr; }
  .svc__tabs { padding-block: 10px; }
  .svc__tabs .wrap { padding-inline: 0; }
  .svc__seg { display: flex; border-radius: 0; box-shadow: none; background: none; padding-inline: 16px; }
  .svc__seg button { height: 40px; padding-inline: 12px 14px; font-size: .875rem; box-shadow: inset 0 0 0 1px var(--line); background: #fff; }
  .svc__seg button.is-on { box-shadow: none; background: transparent; }
  .svc__grp-go span, .svc__grp-go { font-size: .75rem; }
  .rv-sum { grid-template-columns: 1fr; }
  .rv-bars { grid-column: 1; grid-row: auto; padding-top: 12px; border-top: 1px solid var(--line); }
  .rv-nav { display: none; }

  html.motion .about { padding-top: calc(var(--bar-gap) + var(--bar-h) + 18px); padding-bottom: 20px; }
  html.motion .about__p { font-size: .9375rem; line-height: 1.85; margin-top: 10px; }
  html.motion .about__title { font-size: clamp(1.4rem, 1rem + 2.2vw, 1.8rem); margin-top: 8px; }
  html.motion .figures { margin-top: 14px; }
  html.motion .fig { padding-block: 10px; }
  html.motion .fig dd b { font-size: 1.5rem; }
  html.motion .about .link-arrow { display: none; }

  /* کارت‌ها روی موبایل: سه نوار افقی که حول محور افقی می‌چرخند */
  html.motion .depts__stage { --chrome: 360px; }
  html.motion .deck {
    --dw: calc(100vw - 2 * var(--gutter));
    --sh: min(calc(var(--dw) / 1.85), calc((100svh - var(--chrome)) / 3), 230px);
    flex-direction: column; width: var(--dw);
  }
  html.motion .pcard { flex: none; aspect-ratio: auto; height: var(--sh); transform-origin: 50% 50%; }
  html.motion .deck:not(.is-open) .pcard:nth-child(1) { border-radius: var(--r2) var(--r2) 0 0; }
  html.motion .deck:not(.is-open) .pcard:nth-child(3) { border-radius: 0 0 var(--r2) var(--r2); }
  html.motion .pcard__front { background-size: auto 300%; }
  html.motion .pcard:nth-child(1) .pcard__front { background-position: 50% 0%; }
  html.motion .pcard:nth-child(2) .pcard__front { background-position: 50% 50%; }
  html.motion .pcard:nth-child(3) .pcard__front { background-position: 50% 100%; }
  html.motion .pcard__back { position: absolute; transform: rotateX(180deg); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto 1fr; column-gap: 14px; row-gap: 2px; align-items: center; padding: 14px 16px; }
  html.motion .deck.is-flipped .pcard:hover .pcard__face { translate: none; }
  html.motion .pcard__top { grid-column: 1; grid-row: 1 / 3; }
  html.motion .pcard__meta, html.motion .pcard__list, html.motion .pcard__slot { display: none; }
  html.motion .pcard__title { grid-column: 2; grid-row: 1; margin: 0; align-self: end; font-size: 1.25rem; }
  html.motion .pcard__desc { grid-column: 2; grid-row: 2; align-self: start; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .875rem; line-height: 1.7; }
  html.motion .pcard__foot { grid-column: 3; grid-row: 1 / 3; border: 0; padding: 0; }
  html.motion .pcard__mark { width: 46%; left: -6%; bottom: -30%; }
  /* کارت‌های کوتاه موبایل: ستاره‌ها از روی تیتر کنار می‌روند */
  .pcard .aur__sp--2, .pcard .aur__sp--3 { display: none; }
  .pcard .aur__sp--1 { right: auto; left: 7%; top: 9%; width: 14px; }
  html.motion .depts__head { gap: 12px; }
  html.motion .depts__sub, html.motion .depts__head .link-arrow { display: none; }
  html.motion .depts__title { font-size: clamp(1.45rem, 1.05rem + 2.4vw, 1.9rem); }
}
@media (max-width: 699.98px) {
  html:not(.motion) .reel__item--l { display: none; }
  html:not(.motion) .reel__item--center { width: 100%; height: auto; aspect-ratio: 16 / 10; }
  /* موبایل: عکس اتاق درمان بالای صفحه می‌ماند و متن زیرش روی زمینه‌ی روشن */
  html.motion .reel__row.is-open .reel__item--center { height: 56%; align-self: flex-start; }
  html.motion .reel__cap { padding: 18px var(--gutter) 22px; color: var(--ink); }
  html.motion .reel__row.is-open .reel__cap, html.motion .reel__row.is-fx .reel__cap { bottom: 0; height: 44%; display: flex; flex-direction: column; justify-content: center; }
  html.motion .reel__cap .kicker--light { color: var(--blue); }
  html.motion .reel__cap .reel__text { color: var(--ink-2); font-size: .9375rem; line-height: 1.85; }
  html.motion .reel__cap .link-arrow--light { color: var(--blue); text-decoration-color: rgba(30, 94, 235, .35); }
  html.motion .reel__title { font-size: clamp(1.35rem, 1rem + 2vw, 1.7rem); }
}
@media (max-width: 699.98px) and (max-height: 700px) {
  html.motion .pcard__desc { -webkit-line-clamp: 2; }
  html.motion .about__p { display: none; }
}

/* ---------- کنتراست بالا ---------- */

/* ==========================================================================
   تعامل‌ها (دور ۱۰): زبانه‌های کپسولی با نشانگر فنری، حالت‌های دکمه‌ی ارسال
   ========================================================================== */
/* وقتی جاوااسکریپت نشانگر را ساخت، زبانه‌ها یک کپسول می‌شوند و نشانگر تیره زیر زبانه‌ی انتخاب‌شده می‌لغزد */
.rv-tabs.has-pill, .faq-tabs.has-pill, .ar-tabs.has-pill { position: relative; gap: 2px; width: fit-content; max-width: 100%; padding: 4px; background: #fff; border: 1px solid var(--line-2); border-radius: calc(var(--r1) + 4px); }
.has-pill > button { position: relative; z-index: 1; height: 36px; border: 0; background: transparent; }
.has-pill > button:hover:not([aria-selected="true"]):not([aria-pressed="true"]) { background: var(--mist); color: var(--ink); }
.has-pill > button[aria-selected="true"], .has-pill > button[aria-pressed="true"] { background: transparent; color: #fff; }
.pill { position: absolute; left: 0; top: 0; z-index: 0; width: var(--w, 0); height: var(--h, 0); border-radius: var(--r1); background: var(--navy-800); box-shadow: 0 6px 14px -6px rgba(13, 27, 48, .5); transform: translate(var(--x, 0), var(--y, 0)); transition: transform .55s var(--spring), width .55s var(--spring), height .3s var(--ease-out); pointer-events: none; }
html.rm .pill { transition: none; }

/* دکمه‌ی ارسال: در حال بررسی ← انجام شد */
.btn .spin { display: none; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .7s linear infinite; }
.btn.is-busy .spin { display: block; }
.btn.is-busy > .ic { display: none; }
.btn.is-busy { pointer-events: none; }
.btn--primary.is-ok, .btn--primary.is-ok:hover { background: var(--ok); box-shadow: 0 2px 0 #0B7A4F; transition: background-color .35s; }
@keyframes spin { to { transform: rotate(360deg); } }
.qbook__result, .callback__msg { overflow: hidden; }
.callback__msg b, .callback__msg span { display: block; }
.callback__msg span { margin-top: 2px; font-weight: 400; }
.callback__msg a { font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- بازخورد لمسی: هر کنترل هنگام فشار کمی جمع می‌شود و با فنر برمی‌گردد (ویژگی scale، جدا از transformهای GSAP) ---------- */
/* فقط ویژگی‌های رنگ و scale/translate؛ transform و opacity را GSAP می‌گرداند و ترنزیشن CSS رویشان مقدار پایانی را خراب می‌کند */
.rv-btn, .vroutes button, .chip, .social a, .vapp, .vtabs__btn, .burger, .pick, .has-pill > button, .sheet__svc {
  transition-property: background-color, border-color, color, box-shadow, scale, translate;
  transition-duration: .2s, .2s, .2s, .3s, .5s, .45s;
  transition-timing-function: ease, ease, ease, ease, var(--spring), var(--spring);
  transition-delay: 0s;
}
.rv-btn { transition-property: background-color, border-color, color, box-shadow, scale, opacity; transition-duration: .2s, .2s, .2s, .3s, .5s, .2s; transition-timing-function: ease, ease, ease, ease, var(--spring), ease;
}
.rv-btn:active, .vroutes button:active, .chip:active, .social a:active, .vtabs__btn:active, .burger:active, .has-pill > button:active { scale: .94; transition-duration: .1s; }
.vapp:active, .pick:active, .sheet__svc:active { scale: .98; transition-duration: .1s; }
.sheet__nav a { transition: padding .35s var(--ease-out), color .2s; }
.sheet__nav a:active { padding-inline-start: 6px; color: var(--blue); }
.rv-btn .ic, .hctl__btn .ic { transition: translate .45s var(--spring); }
.rv-btn[data-dir="next"]:hover:not(:disabled) .ic, .hctl__btn[data-dir="next"]:hover:not(:disabled) .ic { translate: -3px 0; }
.rv-btn[data-dir="prev"]:hover:not(:disabled) .ic, .hctl__btn[data-dir="prev"]:hover:not(:disabled) .ic { translate: 3px 0; }
@media (hover: none) {
  .mag__row, .rv-card, .vcard { transition-property: scale, border-color, box-shadow, translate; transition-duration: .5s, .25s, .3s, .5s; transition-timing-function: var(--spring), ease, ease, var(--spring); }
  .mag__row:active, .rv-card:active, .vcard:active { scale: .985; transition-duration: .12s; }
}
html.rm .rv-btn, html.rm .vroutes button, html.rm .chip, html.rm .vapp, html.rm .pick, html.rm .has-pill > button, html.rm .mag__row, html.rm .rv-card { transition-property: background-color, border-color, color, box-shadow; }
html.rm *:active { scale: none !important; }

/* ==========================================================================
   زبانه‌های فیلتر (پزشکان، نمونه‌کارها، مقاله‌ها)
   ========================================================================== */
.ar-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.ar-tabs button { height: 38px; padding: 0 14px; border-radius: var(--r1); border: 1px solid var(--line-2); font-size: .875rem; font-weight: 600; color: var(--ink-2); background: #fff; }
.ar-tabs button[aria-pressed="true"] { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }