/* =========================================================
   درباره ما — چیدمان سرمقاله‌ای
   قانون تایپوگرافی این صفحه: فقط دو اندازه
     عنوان‌ها (h1 و h2):  --ab-h   — وزن ۷۰۰، نارنجی
     همه‌ی متن‌ها:        --ab-t   — وزن ۳۰۰
   ========================================================= */

.about {
  --ab-h: var(--fs-h);
  --ab-t: var(--fs-t);
  --ab-line: rgba(255, 255, 255, .08);
  overflow-x: clip;
}
.page { padding-top: var(--header-h); }

/* ---------- دو اندازه‌ی ثابت ---------- */
.ab-h {
  display: flex;
  align-items: flex-start;          /* نشانگر کنار خط اول، حتی اگر عنوان دو خطی شود */
  gap: 12px;
  margin: 0;
  font-size: var(--ab-h);
  font-weight: 700;
  line-height: 1.6;
  color: var(--brand);
}
.ab-h--page { margin-bottom: 22px; }
.ab-text {
  margin: 0 0 1.1em;
  font-size: var(--ab-t);
  font-weight: 300;
  line-height: 2.15;
  color: var(--fg-dim);
  text-align: justify;
  text-justify: inter-word;
}
.ab-text:last-child { margin-bottom: 0; }

/* ---------- ظاهر شدن با اسکرول ---------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* =========================================================
   سرصفحه
   ========================================================= */
.ab-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(32px, 5vw, 96px);
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(56px, 9vh, 120px) var(--gutter) clamp(56px, 9vh, 110px);
}
.ab-hero__copy { max-width: 600px; }
.ab-hero__visual { position: relative; display: grid; place-items: center; }
.ab-hero__visual::before {
  content: "";
  position: absolute;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 106, 0, .16), transparent);
  pointer-events: none;
}
.globe { display: block; width: min(100%, 500px); aspect-ratio: 1; cursor: grab; touch-action: pan-y; }
.globe:active { cursor: grabbing; }

/* =========================================================
   ردیف‌ها
   ========================================================= */
.ab-rows {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.ab-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(24px, 5vw, 96px);
  padding: clamp(40px, 6vh, 72px) 0;
  border-top: 1px solid var(--ab-line);
}
.ab-row:last-of-type { border-bottom: 1px solid var(--ab-line); }
.ab-row .ab-h { align-self: start; position: sticky; top: calc(var(--header-h-scrolled) + 32px); }
.ab-row__body { max-width: 680px; }

/* نشانگر مربعی کنار عنوان — وقتی ردیف در دید است روشن می‌شود */
.ab-h__mark {
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: calc((1.6em - 9px) / 2);
  border: 1.5px solid var(--brand);
  transform: rotate(45deg);
  transition: background .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.ab-row.is-current .ab-h__mark { background: var(--brand); box-shadow: 0 0 14px rgba(255, 106, 0, .7); }

/* خط پیشرفت عمودی (لبه‌ی راست ردیف‌ها) */
.ab-rows__rail {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(var(--gutter) - 28px);
  width: 1px;
  background: var(--ab-line);
}
.ab-rows__rail > span {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 106, 0, .2), var(--brand));
  transform: scaleY(0);
  transform-origin: top center;
}

/* =========================================================
   جمع‌بندی
   ========================================================= */
.ab-outro {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(64px, 10vh, 120px) var(--gutter) clamp(80px, 12vh, 140px);
}
.ab-outro__card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(28px, 3.5vw, 52px) clamp(28px, 4vw, 60px);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 24px;
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(255, 106, 0, .14), transparent 60%),
    linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01) 45%),
    #120803;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 50px 100px -60px rgba(0, 0, 0, .9);
}
.ab-outro__card::before {           /* خط نارنجی کنار متن */
  content: "";
  position: absolute;
  top: 24%;
  bottom: 24%;
  right: 0;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(to bottom, transparent, var(--brand), transparent);
}
.ab-text--lead { color: #fff; font-weight: 400; }
.ab-outro__visual { display: grid; place-items: center; width: clamp(150px, 15vw, 210px); aspect-ratio: 1; perspective: 900px; }

/* لایه‌های شیشه‌ای کوچک */
.panes {
  --p: 0;
  position: relative;
  width: 70%;
  aspect-ratio: 1;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(calc(-40deg + var(--p) * 16deg));
}
.pane {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  transform: translateZ(calc(var(--i) * (20px + var(--p) * 6px)));
  background: linear-gradient(135deg, rgba(255, 255, 255, .11), rgba(255, 140, 60, .04));
  box-shadow: inset 0 0 0 1px rgba(255, 200, 160, .42), inset 0 0 26px rgba(255, 106, 0, .12);
  animation: pane-breathe 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.6s);
}
.pane--1 { --i: 0; background: linear-gradient(135deg, #3a1504, #1f0b03); box-shadow: 0 0 0 1px rgba(255, 140, 60, .3), 0 30px 40px rgba(0, 0, 0, .55); }
.pane--2 { --i: 1; inset: 8%; }
.pane--3 { --i: 2; inset: 16%; }
.pane--core {
  --i: 3;
  inset: 30%;
  border-radius: 8px;
  background: linear-gradient(135deg, #ff9a3d, #ff6a00 55%, #e8500c);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 20px 34px -8px rgba(255, 106, 0, .7);
}
@keyframes pane-breathe { 0%, 100% { translate: 0 0 0; } 50% { translate: 0 0 8px; } }

/* ---------------------------------------------------------
   ریسپانسیو
   --------------------------------------------------------- */
@media (max-width: 899px) {
  .ab-hero { grid-template-columns: 1fr; padding-top: 40px; }
  .ab-hero__visual { order: -1; }
  .globe { width: min(80vw, 380px); }
  .ab-row { grid-template-columns: 1fr; gap: 16px; }
  .ab-row .ab-h { position: static; }
  .ab-rows__rail { display: none; }
  .ab-outro__card { grid-template-columns: 1fr; justify-items: center; }
  .ab-outro__card::before { display: none; }
}
@media (max-width: 559px) {
  .ab-text { text-align: right; }        /* justify روی عرض کم فاصله‌های بد می‌سازد */
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .pane { animation: none; }
}