/* ==========================================================================
   قارقارک — هیرو (کولیس تعاملی) + دهانه‌های اندازه‌گیری‌شده
   منبع: qarqarakheroaboutv2 — روی توکن‌های برند بازنویسی شده.
   تز: هر ادعای صفحه یک «قرائت» است، نه یک صفت. کارت‌های هم‌اندازه‌ی
   آیکن+تیتر+متن جای خود را به دهانه‌ی اندازه‌گیری‌شده با کالوت ابعادی داده‌اند.
   ========================================================================== */

.hero {
  position: relative;
  padding-block: var(--sp-10) var(--sp-12);
}
/* هاله‌ی برنجی پشت هیرو — بدون هیچ تصویری */
.hero::before {
  content: ''; position: absolute; z-index: -1;
  inset-block-start: -12%; inset-inline-end: -10%;
  inline-size: min(52rem, 90%); block-size: 32rem;
  background: radial-gradient(42% 52% at 60% 40%, var(--accent-soft), transparent 70%);
  filter: blur(60px); pointer-events: none;
}

.hero__grid { display: grid; gap: var(--sp-8); align-items: start; }

.hero h1 {
  font-size: var(--fs-4xl);
  font-weight: 900; line-height: 1.22;
  letter-spacing: var(--tracking-brand);
  max-inline-size: 16ch; text-wrap: balance;
  color: var(--text-strong);
  text-shadow: var(--engrave);
}
.hero h1 b { color: var(--accent-text); font-weight: 900; }

.hero__lead {
  margin-block-start: var(--sp-4);
  font-size: var(--fs-md); color: var(--text-muted);
  max-inline-size: 58ch; line-height: 1.9;
}
.hero__lead strong { color: var(--text); font-weight: 700; }

/* چیدمانش از کلاس مشترک .actions می‌آید (یک خط، بدون شکستن) */
.hero__acts { margin-block-start: var(--sp-6); }
.hero__note {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-block-start: var(--sp-4);
  font-size: var(--fs-xs); color: var(--text-faint);
}
.hero__note svg { inline-size: 16px; block-size: 16px; color: var(--ok); flex: 0 0 auto; }

/* نوار اعتماد زیر هیرو */
.hero__trust {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-block-start: var(--sp-8);
  padding-block-start: var(--sp-6);
  border-block-start: 1px solid var(--line);
}
.hero__trust li {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.7;
}
.hero__trust svg { inline-size: 22px; block-size: 22px; color: var(--accent-text); flex: 0 0 auto; }
.hero__trust b { display: block; color: var(--text-strong); font-size: var(--fs-sm); }

/* ==========================================================================
   دهانه‌های اندازه‌گیری‌شده — هر توانمندی یک «دهانه» با کالوت ابعادی
   ========================================================================== */
.span-list { display: grid; gap: var(--sp-8); }
.span { position: relative; padding-block-start: var(--sp-6); }

.span__dim {                              /* کالوت ابعادی بالای دهانه */
  position: absolute; inset-block-start: 0; inset-inline: 0;
  block-size: var(--sp-6);
  display: flex; align-items: center; justify-content: center;
}
.span__dim::before, .span__dim::after {   /* خطوط شاهد */
  content: ''; position: absolute; inset-block-start: 0; block-size: 14px;
  inline-size: 1px; background: var(--line-strong);
}
.span__dim::before { inset-inline-start: 0; }
.span__dim::after  { inset-inline-end: 0; }
.span__line {
  position: absolute; inset-block-start: 14px; inset-inline: 0; block-size: 1px;
  background: var(--line-strong);
}
.span__line::before, .span__line::after { /* سرپیکان‌ها */
  content: ''; position: absolute; inset-block-start: -3px;
  border-block: 3.5px solid transparent;
}
.span__line::before { inset-inline-start: 0; border-inline-start: 6px solid var(--line-strong); }
.span__line::after  { inset-inline-end: 0;  border-inline-end: 6px solid var(--line-strong); }
.span__val {
  position: relative; z-index: 1;
  padding-inline: var(--sp-2); background: var(--bg);
  font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--accent-text);
  translate: 0 7px;
}
.span h3 { font-size: var(--fs-lg); font-weight: 800; line-height: 1.45; color: var(--text-strong); }
.span > p { margin-block-start: var(--sp-2); font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.85; }
.span figure {
  margin-block-start: var(--sp-4); padding: var(--sp-4);
  /* ارتفاع‌ها عمداً یکسان نیستند: سه پنلِ هم‌قد دوباره «ردیف کارت» می‌شود */
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--inner-hair);
}
.span figure svg { inline-size: 100%; block-size: auto; color: var(--text-muted); }
.span:nth-child(2) figure { padding-block: var(--sp-6); }
.span:nth-child(3) figure { padding-block: var(--sp-3); }