/* ==========================================================================
   صفحات عمومی — لندینگ، قابلیت‌ها، نحوهٔ کار، قیمت، پرسش‌ها، دربارهٔ ما، تماس

   لحن بصری این صفحات متمایزتر از محیط کار است (کنتراست بالاتر، سایهٔ محسوس‌تر)
   اما همان توکن‌های tokens.css را استفاده می‌کند.
   ========================================================================== */

/* ============================ بخش‌بندی صفحه ============================ */
.section {
  padding: var(--s-16) 0 var(--s-4);
}
.section--tight { padding: var(--s-10) 0 var(--s-4); }
.section--alt {
  background: var(--paper-2);
  border-block: var(--bw) solid var(--line);
}

.section-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-5);
  border-top: var(--bw-2) solid var(--ink);
  padding-top: var(--s-4);
  margin-bottom: var(--s-8);
}
.section-head__no {
  font-size: var(--t-small);
  font-weight: var(--w-bold);
  color: var(--red);
  letter-spacing: 0.1em;
  padding-top: 0.35rem;
  flex: none;
  font-variant-numeric: tabular-nums;
}
.section-head h1,
.section-head h2 {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  margin-bottom: 0.2rem;
}
.section-head p {
  font-size: var(--t-body);
  color: var(--ink-2);
  max-width: var(--w-prose);
  line-height: var(--lh-normal);
}

@media (max-width: 560px) {
  .section { padding: var(--s-12) 0 var(--s-4); }
  .section-head { gap: var(--s-3); }
}

/* ============================ Hero ============================ */
.hero {
  position: relative;
  padding: var(--s-16) 0 var(--s-12);
  border-bottom: var(--bw) solid var(--line);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 8%, transparent) 1px, transparent 1.2px);
  background-size: 22px 22px;
  pointer-events: none;
}
@supports not (color-mix(in srgb, red, blue)) {
  .hero::before { background-image: radial-gradient(rgba(28, 26, 19, 0.08) 1px, transparent 1.2px); }
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-10);
  align-items: center;
}
@media (min-width: 980px) {
  .hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-12); }
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-full);
  padding: 0.3rem 0.9rem;
  font-size: var(--t-small);
  font-weight: var(--w-semi);
  background: var(--surface);
}

.hero h1 {
  font-size: clamp(1.875rem, 5.5vw, 3.25rem);
  line-height: 1.2;
  margin: var(--s-5) 0 var(--s-4);
  letter-spacing: -0.03em;
}

.hero__lead {
  color: var(--ink-2);
  font-size: var(--t-lead);
  line-height: var(--lh-normal);
  max-width: 34rem;
  margin-bottom: var(--s-6);
}

.hero__cta {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-6);
}
@media (max-width: 460px) {
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
}

.hero__stats {
  display: flex;
  border-top: var(--bw) solid var(--ink);
  max-width: 34rem;
}
.hero__stats li {
  flex: 1;
  padding: var(--s-3) var(--s-3) var(--s-1);
  border-inline-start: var(--bw) solid var(--line);
  min-width: 0;
}
.hero__stats li:first-child { border-inline-start: none; padding-inline-start: 0; }
.hero__stats b {
  display: block;
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
}
.hero__stats span { font-size: var(--t-caption); color: var(--ink-3); }

/* خط تأکید دست‌کشیده زیر واژه */
.underline-mark { position: relative; display: inline-block; white-space: nowrap; }
.underline-mark svg {
  position: absolute;
  inset-inline: 0;
  bottom: -0.4em;
  width: 100%;
  height: 0.35em;
}

/* ---------------------------- پیش‌نمایش روم ---------------------------- */
.hero__side { position: relative; }

.room-preview {
  position: relative;
  border: var(--bw-2) solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--e-3);
  max-width: 27rem;
  margin-inline: auto;
  overflow: clip;
}
@media (min-width: 980px) {
  .room-preview { transform: rotate(-1.2deg); }
}

.room-preview__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  border-bottom: var(--bw-2) solid var(--ink);
  background: var(--paper-2);
  flex-wrap: wrap;
}
.room-preview__head b { display: block; font-size: var(--t-body); }
.room-preview__head span { font-size: var(--t-caption); color: var(--ink-3); }

.room-preview__row {
  display: grid;
  grid-template-columns: 1.75rem 4.5rem minmax(0, 1fr) auto;
  gap: var(--s-2);
  align-items: center;
  padding: var(--s-2) var(--s-4);
  border-top: var(--bw) dashed var(--line);
}
.room-preview__row:first-of-type { border-top: none; }

.room-preview__no {
  width: 1.5rem;
  height: 1.5rem;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-xs);
  display: grid;
  place-items: center;
  font-size: var(--t-caption);
  font-weight: var(--w-bold);
  background: var(--paper);
  font-variant-numeric: tabular-nums;
}
.room-preview__amount {
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-body-sm);
}
.room-preview__amount i { font-style: normal; font-size: var(--t-caption); color: var(--ink-3); font-weight: var(--w-normal); }
.room-preview__due { font-size: var(--t-caption); color: var(--blue); font-weight: var(--w-semi); white-space: nowrap; }

.room-preview__foot {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-top: var(--bw-2) solid var(--ink);
  background: var(--paper);
}

/* چیپ‌های شناور دور پیش‌نمایش */
.float-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--surface);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-sm);
  padding: 0.3rem 0.65rem;
  font-size: var(--t-caption);
  font-weight: var(--w-semi);
  box-shadow: var(--e-2);
  white-space: nowrap;
}
.float-chip b { color: var(--red); }

/* در موبایل چیپ‌ها زیر کارت می‌نشینند تا از قاب بیرون نزنند */
.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  justify-content: center;
  margin-top: var(--s-4);
}

@media (min-width: 980px) {
  .hero__chips { display: contents; }
  .float-chip { position: absolute; }
  .float-chip--1 { top: -1rem; inset-inline-start: -0.5rem; animation: floaty 5s var(--ease) infinite alternate; }
  .float-chip--2 { bottom: 4.5rem; inset-inline-end: -1.75rem; animation: floaty 6s 0.8s var(--ease) infinite alternate; }
  .float-chip--3 { bottom: -1rem; inset-inline-start: 2rem; animation: floaty 5.5s 0.4s var(--ease) infinite alternate; }
}

@keyframes floaty {
  from { transform: translateY(-4px) rotate(-1deg); }
  to { transform: translateY(5px) rotate(1.5deg); }
}

/* ---------------------------- نوار متحرک نقل‌قول ---------------------------- */
.marquee {
  border-block: var(--bw) solid var(--line);
  background: var(--paper-2);
  overflow: hidden;
  padding: var(--s-2) 0;
  margin-top: var(--s-10);
}
.marquee__track {
  display: flex;
  gap: var(--s-8);
  width: max-content;
  animation: marquee 48s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-body-sm);
  color: var(--ink-2);
  white-space: nowrap;
}
.marquee__item .icon { color: var(--red); }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(50%); }
}

/* ============================ کارت قابلیت ============================ */
.feature-card {
  border: var(--bw-2) solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: var(--s-5);
  box-shadow: var(--e-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.feature-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--red);
  margin-bottom: var(--s-2);
  flex: none;
}
.feature-card h2,
.feature-card h3 { font-size: var(--t-body); }
.feature-card p { font-size: var(--t-body-sm); color: var(--ink-2); line-height: var(--lh-snug); }

/* ============================ آناتومی روم ============================ */
.anatomy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  border: var(--bw-2) solid var(--ink);
  border-radius: var(--r-lg);
  overflow: clip;
  background: var(--surface);
  box-shadow: var(--e-2);
}
.anatomy__cell {
  padding: var(--s-4) var(--s-5);
  border-inline-start: var(--bw) solid var(--line);
  border-top: var(--bw) solid var(--line);
}
.anatomy__cell h3 {
  font-size: var(--t-body-sm);
  display: flex;
  gap: var(--s-2);
  align-items: center;
  margin-bottom: 0.2rem;
}
.anatomy__cell h3 .icon { color: var(--red); }
.anatomy__cell p { font-size: var(--t-caption); color: var(--ink-2); line-height: var(--lh-snug); }

/* ============================ چرخهٔ زندگی روم ============================ */
.lifecycle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--s-2);
}
.beat {
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--s-3) var(--s-2);
  text-align: center;
}
.beat__icon {
  width: 1.875rem;
  height: 1.875rem;
  margin: 0 auto var(--s-2);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--paper);
}
.beat b { display: block; font-size: var(--t-caption); font-weight: var(--w-bold); line-height: 1.4; }
.beat span { display: block; font-size: 0.625rem; color: var(--ink-3); line-height: 1.5; }
.beat--system { border-style: dashed; border-color: var(--red); }
.beat--system .beat__icon { color: var(--red); border-color: var(--red); }
.beat--final .beat__icon { color: var(--green); border-color: var(--green); }

/* ============================ مراحل «چطور کار می‌کند» ============================ */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: var(--s-4);
}
.step-card {
  border: var(--bw-2) solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: var(--s-5) var(--s-4);
  box-shadow: var(--e-2);
  position: relative;
}
.step-card__no {
  position: absolute;
  top: -0.85rem;
  inset-inline-start: var(--s-4);
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-full);
  background: var(--red);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: var(--t-caption);
  font-weight: var(--w-bold);
  border: var(--bw-2) solid var(--ink);
  font-variant-numeric: tabular-nums;
}
.step-card .icon--xl { color: var(--red); margin: var(--s-3) 0 var(--s-2); }
.step-card h2,
.step-card h3 { font-size: var(--t-body); margin-bottom: 0.2rem; }
.step-card p { font-size: var(--t-caption); color: var(--ink-2); line-height: var(--lh-snug); }

/* ============================ جدول مقایسه ============================ */
.compare .is-us {
  background: var(--red-bg);
  font-weight: var(--w-semi);
}
.compare th.is-us { color: var(--red-ink); }
.compare .icon-yes { color: var(--green); stroke-width: 2.6; }
.compare .icon-no { color: var(--ink-4); stroke-width: 2.6; }
.compare td { text-align: center; }
.compare td:first-child,
.compare th:first-child { text-align: start; }

/* ماتریس مقایسه به کارت تبدیل نمی‌شود (چهار ستون × ده معیار در کارت خوانا نیست).
   در عوض ستون «معیار» می‌چسبد تا با اسکرول افقی، بافت گم نشود. */
.compare td:first-child,
.compare th:first-child {
  position: sticky;
  inset-inline-start: 0;
  background: var(--surface);
  z-index: 2;
}
.compare th:first-child { background: var(--surface-2); }
@media (max-width: 640px) {
  .compare td:first-child,
  .compare th:first-child {
    max-width: 9rem;
    box-shadow: 1px 0 0 var(--line);
  }
  .compare th,
  .compare td { padding-inline: var(--s-3); }
}

/* ============================ قیمت‌ها ============================ */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--s-4);
  align-items: stretch;
}
.plan-card {
  border: var(--bw-2) solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  box-shadow: var(--e-2);
  position: relative;
}
.plan-card--featured {
  background: var(--paper-2);
  box-shadow: var(--e-3);
}
.plan-card--featured::after {
  content: "پیشنهاد ما";
  position: absolute;
  top: -0.8rem;
  inset-inline-end: var(--s-4);
  background: var(--red);
  color: #fff;
  font-size: var(--t-caption);
  font-weight: var(--w-bold);
  padding: 0.15rem 0.65rem;
  border-radius: var(--r-full);
  border: var(--bw) solid var(--ink);
}
.plan-card__name { font-size: var(--t-h3); font-weight: var(--w-bold); }
.plan-card__price {
  font-size: var(--t-h2);
  font-weight: var(--w-bold);
  color: var(--red);
  font-variant-numeric: tabular-nums;
}
.plan-card__period { font-size: var(--t-caption); color: var(--ink-3); }
.plan-card__features {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: var(--t-body-sm);
  color: var(--ink-2);
  padding-top: var(--s-3);
  border-top: var(--bw) dashed var(--line);
  flex: 1;
}
.plan-card__features li { display: flex; gap: var(--s-2); align-items: flex-start; }
.plan-card__features .icon { color: var(--green); margin-top: 0.15rem; flex: none; }

/* ============================ نقل‌قول مشتری ============================ */
.testimonial {
  border: var(--bw) solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.testimonial p { font-size: var(--t-body-sm); color: var(--ink-2); line-height: var(--lh-normal); }
.testimonial__who { display: flex; align-items: center; gap: var(--s-3); }
.testimonial__who b { display: block; font-size: var(--t-body-sm); }
.testimonial__who span { font-size: var(--t-caption); color: var(--ink-3); }

/* ============================ نوار CTA ============================ */
.cta {
  border: var(--bw-2) solid var(--ink);
  border-radius: var(--r-xl);
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-10);
  display: flex;
  align-items: center;
  gap: var(--s-6);
  flex-wrap: wrap;
  box-shadow: var(--e-3);
}
.cta h2 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
.cta p {
  color: color-mix(in srgb, var(--paper) 72%, transparent);
  font-size: var(--t-body);
  max-width: 34rem;
  margin-top: 0.25rem;
  line-height: var(--lh-snug);
}
@supports not (color-mix(in srgb, red, blue)) {
  .cta p { opacity: 0.75; }
}
.cta__actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-inline-start: auto;
}
.cta .btn { border-color: var(--paper); }
.cta .btn--ghost {
  color: var(--paper);
  border-color: color-mix(in srgb, var(--paper) 40%, transparent);
  background: transparent;
}
@media (hover: hover) {
  .cta .btn--ghost:hover { background: color-mix(in srgb, var(--paper) 12%, transparent); border-color: var(--paper); }
}

@media (max-width: 760px) {
  .cta { padding: var(--s-6); }
  .cta__actions { margin-inline-start: 0; width: 100%; }
  .cta__actions .btn { flex: 1; }
}

/* ============================ بلوک متنی سند ============================ */
.doc { max-width: var(--w-prose); }
.doc p { color: var(--ink-2); margin-bottom: var(--s-3); line-height: var(--lh-normal); }
.doc p b { color: var(--ink); }
.doc ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  color: var(--ink-2);
}
.doc ul li { display: flex; gap: var(--s-3); align-items: flex-start; line-height: var(--lh-snug); }
.doc ul li .icon { color: var(--red); margin-top: 0.25rem; flex: none; }
.doc ul li b { color: var(--ink); }

.highlight {
  border: var(--bw-2) solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: var(--s-6);
  box-shadow: var(--e-2);
  margin-bottom: var(--s-4);
}
.highlight p { margin: 0; }

.pull {
  border-inline-start: 3px solid var(--red);
  padding: var(--s-2) var(--s-5);
  font-size: clamp(1.0625rem, 2.4vw, 1.3125rem);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  margin: var(--s-6) 0;
  max-width: 42rem;
}

/* ============================ خط زمانی نقشهٔ راه ============================ */
.roadmap { max-width: var(--w-prose); }
.roadmap__phase {
  display: inline-block;
  font-size: var(--t-caption);
  font-weight: var(--w-bold);
  border: var(--bw) solid var(--red);
  color: var(--red);
  border-radius: var(--r-full);
  padding: 0.1rem 0.6rem;
  margin-bottom: var(--s-2);
}