/* =============================================================
   Kyren Labs — پایه: ریست، فونت، تایپوگرافی
   ============================================================= */

@font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-Regular.woff2')    format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-Medium.woff2')     format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-SemiBold.woff2')   format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-Bold.woff2')       format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-ExtraBold.woff2')  format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-Black.woff2')      format('woff2'); font-weight: 900; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs-md);
  /* متن فارسی با فاصله‌ی سطر کم، فشرده و خسته‌کننده دیده می‌شود */
  line-height: 2;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }

/* ---- تیترها ---- */
h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -.01em;
  text-wrap: balance;
}
/* تیتر اصلی باید بزرگ‌ترین نوشته‌ی صفحه باشد. رنگش را عمداً
   نمی‌دهیم تا فقط کلمه‌ی داخل .accent رنگی و گرادیانی بماند. */
h1 { font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3rem); font-weight: 900; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); font-weight: 900; }
h3 { font-size: var(--fs-lg); }

/* کلمه‌ی تأکیدشده‌ی هر تیتر: گرادیان به‌جای رنگ تخت.
   color اول نوشته می‌شود تا اگر مرورگری background-clip را
   نشناخت، متن ناپدید نشود و رنگ ساده بگیرد. */
.accent {
  color: var(--c-accent-text);
  background-image: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* بدون این، دنباله‌ی حروف فارسی گاهی بریده می‌شود */
  padding-inline: .06em;
  margin-inline: -.06em;
}
@supports not (background-clip: text) {
  .accent { -webkit-text-fill-color: currentColor; background-image: none; }
}

/* ---- ساختار ---- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--sp-6); }
.wrap--narrow { max-width: 780px; }
.section { padding-block: var(--sp-20); }
@media (max-width: 700px) { .section { padding-block: var(--sp-16); } }

.sec-head { margin-bottom: var(--sp-12); }
.sec-head--center { text-align: center; }
.sec-head .lead {
  margin-top: var(--sp-4);
  max-width: 60ch;
  color: var(--c-text-soft);
  text-wrap: pretty;
}
.sec-head--center .lead { margin-inline: auto; }

/* عنوان بالای هر بخش. عمداً بزرگ‌تر از خط زیرش (h2) است تا
   اولین چیزی باشد که چشم می‌گیرد. clamp یک پله بالاتر از clamp
   خود h2 بسته شده تا در همه‌ی عرض‌های صفحه بزرگ‌تر بماند. */
.eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-3);
  font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--c-accent-text);
}
.sec-head--center .eyebrow::before,
.sec-head--center .eyebrow::after {
  content: "";
  display: inline-block;
  width: 22px; height: 1px;
  margin-inline: var(--sp-3);
  vertical-align: middle;
  background: var(--c-hairline);
}

/* ---- دسترسی‌پذیری ---- */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
/* با inset-inline-start منفی، در حالت راست‌به‌چپ لینک به بیرونِ
   سمت راست می‌رفت و صفحه را هزاران پیکسل پهن می‌کرد. پس به‌جای
   جابه‌جا کردن، اندازه‌اش صفر می‌شود تا هیچ فضایی اشغال نکند. */
.skip-link {
  position: absolute; inset-inline-start: 0; top: 0;
  z-index: 200; padding: var(--sp-3) var(--sp-5);
  background: var(--c-accent); color: var(--c-on-accent);
  border-end-end-radius: var(--r-sm);
  width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus {
  width: auto; height: auto; overflow: visible; clip-path: none;
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- ظاهرشدن تدریجی بخش‌ها ---- */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* اعداد لاتین داخل متن فارسی نباید برعکس شوند */
bdi { unicode-bidi: isolate; }