/* =============================================================
   Kyren Onyx — بخش‌های صفحه‌ی onyx.html
   (صفحه‌های «سایت کلینیک» و Kyren Academy هم همین فایل را لود می‌کنند)
   -------------------------------------------------------------
   رنگ طلایی از tokens.css می‌آید (بلوک data-page="onyx").
   اینجا فقط شکل و چیدمان نوشته می‌شود، نه رنگ.
   ============================================================= */

/* بخش‌هایی که زمینه‌ی کمی متفاوت دارند */
.section--tint { background: var(--c-bg-tint); }

/* ---------------- قهرمان ---------------- */
.bhero {
  position: relative;
  isolation: isolate;
  padding-block: var(--sp-16) var(--sp-12);
  overflow: hidden;
}
/* درخشش ملایم پشت متن */
.bhero::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -35%;
  height: 100%;
  z-index: -2;
  background: radial-gradient(46% 46% at 70% 48%, var(--c-glow), transparent 70%);
  pointer-events: none;
}
[dir="ltr"] .bhero::before {
  background: radial-gradient(46% 46% at 30% 48%, var(--c-glow), transparent 70%);
}

/* خطوط موجی، برداشت از خودِ لوگو که خط‌های روان دارد */
.bhero-waves {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, transparent 26%, #000 76%);
  mask-image: radial-gradient(70% 60% at 50% 50%, transparent 26%, #000 76%);
}

.bhero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: center;
  gap: var(--sp-12);
}

/* معرفیِ کل صفحه. از ستون متن بیرون کشیده شده تا وسطِ صفحه
   بنشیند و سرصفحه‌ی کل قهرمان باشد، نه eyebrowِ h1. طراحی‌اش هم
   عمداً با بقیه فرق دارد: گرادیان طلایی به‌جای رنگ تخت، و دو خط
   مویی که از دو طرف به آن می‌رسند. */
.bhero-intro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--sp-4), 3vw, var(--sp-8));
  margin-bottom: var(--sp-10);
}
.bhero-intro::before,
.bhero-intro::after {
  content: "";
  flex: 0 1 clamp(32px, 12vw, 150px);
  height: 1px;
  background: linear-gradient(to left, var(--c-accent), transparent);
}
.bhero-intro::after { background: linear-gradient(to right, var(--c-accent), transparent); }

.bhero-kicker {
  flex: none;
  font-size: clamp(1.5rem, 1.05rem + 1.8vw, 2.25rem);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.7;
  /* color اول نوشته می‌شود تا اگر مرورگری background-clip را
     نشناخت، متن ناپدید نشود — دقیقاً مثل .accent در base.css */
  color: var(--c-accent-text);
  background-image: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* بدون این، دنباله‌ی حروف فارسی گاهی بریده می‌شود */
  padding-inline: .08em;
  margin-inline: -.08em;
  transition: opacity var(--dur-fast) var(--ease);
}
@supports not (background-clip: text) {
  .bhero-kicker { -webkit-text-fill-color: currentColor; background-image: none; }
}
.bhero-kicker:hover { opacity: .72; }
.bhero h1 { max-width: 15ch; }
.bhero-sub {
  max-width: 52ch;
  margin-top: var(--sp-6);
  line-height: 2.05;
  color: var(--c-text-soft);
  text-wrap: pretty;
}
.bhero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }
/* نکته‌ی «سایت رایگان» همان بالای صفحه گفته می‌شود، چون
   مهم‌ترین تفاوت این محصول با رقباست. */
.bhero-badge {
  display: inline-block;
  margin-top: var(--sp-6);
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.8;
  color: var(--c-accent-text);
  background: var(--c-accent-soft);
  border: var(--hairline) solid var(--c-hairline);
  border-radius: var(--r-pill);
}
.bhero-trust {
  margin-top: var(--sp-8);
  max-width: 46ch;
  padding-top: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  border-top: var(--hairline) solid var(--c-border);
}

.bhero-art { display: flex; justify-content: center; }
.bhero-mark {
  height: clamp(180px, 18vw, 290px);
  width: auto;
  filter: var(--tint-logo-filter);
  animation: bmark-in 1s var(--ease-out) both;
}
@keyframes bmark-in {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 800px) {
  .bhero { padding-block: var(--sp-12) var(--sp-10); }
  .bhero-inner { grid-template-columns: 1fr; gap: var(--sp-8); text-align: center; }
  .bhero-art { order: -1; }
  .bhero-mark { height: clamp(130px, 28vw, 180px); }
  .bhero h1, .bhero-sub, .bhero-trust { margin-inline: auto; }
  .bhero-intro { margin-bottom: var(--sp-8); }
  .bhero-actions { justify-content: center; }
}
@media (max-width: 560px) {
  .bhero-actions .btn { width: 100%; }
}

/* ---------------- زنجیره‌ی یک روز کاری ----------------
   چهار مرحله در یک ردیف. خط پیوند یک خط پیوسته پشت ردیف است
   که دقیقاً از مرکز کارت اول تا مرکز کارت آخر کشیده می‌شود
   (با چهار ستون مساوی، مرکزها روی ۱۲.۵٪ و ۸۷.۵٪ می‌افتند). */
.flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-8) var(--sp-6);
}
.flow::before {
  content: "";
  position: absolute;
  top: 23px;
  /* مرکز ستون اول و آخر: عرض کل منهای سه فاصله، تقسیم بر هشت */
  inset-inline: calc((100% - 3 * var(--sp-6)) / 8);
  height: 2px;
  background: var(--c-border-soft);
}
.flow-step { position: relative; text-align: center; }
.flow-num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  margin-bottom: var(--sp-5);
  border-radius: 50%;
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--c-on-accent);
  background: var(--c-accent);
  /* حلقه‌ی هم‌رنگ زمینه تا خط پیوند از زیر دایره رد نشود */
  box-shadow: 0 0 0 6px var(--c-bg);
}
.section--tint .flow-num { box-shadow: 0 0 0 6px var(--c-bg-tint); }
.flow-step h3 { margin-bottom: var(--sp-2); font-size: var(--fs-md); }
.flow-step p { font-size: var(--fs-sm); line-height: 1.9; color: var(--c-text-soft); }

@media (max-width: 800px) {
  .flow { grid-template-columns: 1fr 1fr; }
  .flow::before { display: none; }
}
@media (max-width: 460px) {
  .flow { grid-template-columns: 1fr; gap: var(--sp-8); }
}

/* ---------------- قابلیت‌ها ---------------- */
.mod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--sp-6);
}
.mod-card {
  padding: var(--sp-7) var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  border: 1px solid var(--c-border-soft);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mod-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.mod-card h3 {
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  font-size: var(--fs-md);
  border-bottom: 1px solid var(--c-border-soft);
}
.mod-list { display: grid; gap: var(--sp-3); }
.mod-list li {
  position: relative;
  padding-inline-start: var(--sp-5);
  font-size: var(--fs-sm);
  line-height: 1.85;
  color: var(--c-text-soft);
}
/* همان لوزی کوچکی که در کارت‌های صفحه‌ی اصلی هم هست */
.mod-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .72em;
  width: 7px; height: 7px;
  transform: rotate(45deg);
  background: var(--tint-500);
}

/* ---------------- دو ستون: پورتال و سایت کلینیک ---------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-12);
  align-items: center;
}
.split-copy .lead { margin-top: var(--sp-4); color: var(--c-text-soft); }
.split-note {
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-xs);
  line-height: 1.9;
  color: var(--c-text-soft);
  background: var(--c-bg-tint);
  border: 1px solid var(--c-border-soft);
  border-inline-start: 3px solid var(--tint-500);
  border-radius: var(--r-sm);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
/* در بخش دوم، کارت سمت مقابل می‌نشیند تا صفحه یکنواخت نشود */
.split--flip .split-copy { order: 2; }

.check-card {
  padding: var(--sp-8);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  border: 1px solid var(--c-border-soft);
  box-shadow: var(--shadow-md);
}
.check-list { display: grid; gap: var(--sp-4); }
.check-list li {
  position: relative;
  padding-inline-start: var(--sp-8);
  font-size: var(--fs-sm);
  line-height: 1.85;
}
.check-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .45em;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--c-accent-soft);
}
.check-list li::after {
  content: "";
  position: absolute;
  inset-inline-start: 6px;
  top: .78em;
  width: 5px; height: 9px;
  border: solid var(--c-accent-text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
[dir="ltr"] .check-list li::after { inset-inline-start: 6px; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: var(--sp-8); }
  .split--flip .split-copy { order: 0; }
  .check-card { padding: var(--sp-6); }
}

/* ---------------- پیش‌نمایش سایت کلینیک ----------------
   تصویر داخل یک قاب شبیه پنجره‌ی مرورگر می‌نشیند تا از همان
   نگاه اول معلوم باشد این یک سایت است، نه عکسی از پنل. */
.shot { margin-block: var(--sp-12); }
.shot-frame {
  max-width: 1000px;
  margin-inline: auto;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-border-soft);
  box-shadow: var(--shadow-lg);
}
.shot-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  /* نوار مرورگر عمداً چپ‌به‌راست می‌ماند تا مثل پنجره‌ی
     واقعی مرورگر دیده شود، حتی وقتی صفحه راست‌به‌چپ است */
  direction: ltr;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-bg-tint);
  border-bottom: 1px solid var(--c-border-soft);
}
.shot-dots { display: inline-flex; gap: 6px; flex: none; }
.shot-dots i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c-border);
}
.shot-url {
  flex: 1;
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--c-bg);
  border: var(--hairline) solid var(--c-border-soft);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  text-align: center;
  /* آدرس لاتین است و در جمله‌ی راست‌به‌چپ نباید وارونه شود */
  direction: ltr;
}
.shot-frame img { display: block; width: 100%; height: auto; }
/* حالت بدون نوار مرورگر: خودِ تصویر چهار پنجره‌ی جدا با آدرس هر صفحه دارد،
   پس قاب بیرونی نباید نوار دوم بسازد. کمی پهن‌تر تا متن پنل‌ها خوانا بماند. */
.shot-frame--bare { max-width: 1120px; }
.shot-cap {
  max-width: 62ch;
  margin: var(--sp-5) auto 0;
  font-size: var(--fs-xs);
  line-height: 1.95;
  color: var(--c-text-muted);
  text-align: center;
}

.site-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-6);
}
.site-card {
  position: relative;
  padding: var(--sp-6);
  padding-top: var(--sp-7);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  border: 1px solid var(--c-border-soft);
  border-top: 3px solid var(--tint-500);
}
.site-card h3 { margin-bottom: var(--sp-3); font-size: var(--fs-md); }
.site-card p { font-size: var(--fs-sm); line-height: 1.9; color: var(--c-text-soft); }

.site-note {
  max-width: 64ch;
  margin: var(--sp-10) auto 0;
  padding: var(--sp-5) var(--sp-6);
  text-align: center;
  font-size: var(--fs-sm);
  line-height: 1.95;
  color: var(--c-text-soft);
  background: var(--c-accent-soft);
  border: var(--hairline) solid var(--c-hairline);
  border-radius: var(--r-md);
}

/* برچسب «بدون هزینه‌ی جدا» کنار عنوان بخش */
.free-badge {
  display: inline-block;
  margin-inline-start: var(--sp-3);
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--c-on-accent);
  background: var(--c-accent);
  vertical-align: middle;
}

@media (max-width: 700px) {
  .shot { margin-block: var(--sp-8); }
  .shot-bar { padding: var(--sp-2) var(--sp-3); }
  .shot-url { font-size: 11px; }
}

/* ---------------- نسخه‌ی آزمایشی ---------------- */
.trial-band {
  padding: var(--sp-12) var(--sp-10);
  border-radius: var(--r-xl);
  background: var(--c-accent-soft);
  border: 1px solid var(--c-hairline);
}
/* داخل این کادر، حلقه‌ی دور شماره‌ها باید هم‌رنگ خود کادر باشد */
.trial-band .flow-num { box-shadow: 0 0 0 6px var(--c-accent-soft); }
.trial-band .flow::before { background: var(--c-hairline); }
.trial-head { text-align: center; margin-bottom: var(--sp-12); }
.trial-head .lead {
  max-width: 56ch;
  margin: var(--sp-4) auto 0;
  color: var(--c-text-soft);
  text-wrap: pretty;
}
.trial-foot {
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--c-hairline);
  text-align: center;
}
.trial-note {
  max-width: 60ch;
  margin-inline: auto;
  font-size: var(--fs-xs);
  line-height: 1.95;
  color: var(--c-text-muted);
}
.trial-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
@media (max-width: 700px) {
  .trial-band { padding: var(--sp-8) var(--sp-5); }
  .trial-actions .btn { width: 100%; }
}

/* ---------------- نشان محصول در هدر ----------------
   صفحه‌ی Kyren Academy هم همین فایل را لود می‌کند؛ .brand-academy
   همان نشان است با لوگوی سبز. */
.brand-onyx, .brand-academy { display: inline-flex; align-items: center; gap: var(--sp-3); }
.brand-onyx img, .brand-academy img { filter: var(--tint-logo-filter); width: auto; }
.brand-onyx .bb-mark, .brand-academy .bb-mark { height: 32px; }
.brand-onyx .bb-word, .brand-academy .bb-word { height: 19px; }
@media (max-width: 420px) {
  .brand-onyx .bb-word, .brand-academy .bb-word { display: none; }
}

/* ---------------- بخش «قبل از خرید» ----------------
   این بخش شش کارت دارد، پس عرض کمینه‌ی هر ستون بالا برده شده
   تا روی دسکتاپ سه‌تا-سه‌تا بنشیند و کارتی تک‌افتاده نماند.
   (فقط همین صفحه؛ بخش «چرا کایرن» در صفحه‌ی اصلی چهار کارت
   دارد و دست‌نخورده می‌ماند.) */
#trust .why-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}