/* ============================================================
   وقفی نو — page: about.html
   ============================================================ */
.about-loading-shell { min-height: 70vh; padding: 3rem 0; }
.about-skeleton {
  border-radius: var(--radius-lg);
  background: linear-gradient(100deg, var(--surface-soft) 25%, var(--brand-050) 45%, var(--surface-soft) 65%);
  background-size: 220% 100%;
  animation: about-shimmer 1.35s ease-in-out infinite;
}
.about-skeleton--hero { height: clamp(15rem, 38vw, 28rem); margin-bottom: 1.5rem; }
.about-skeleton--line { height: 1.2rem; width: 62%; margin-bottom: .8rem; }
.about-skeleton--short { width: 38%; }
.about-skeleton--body { height: 15rem; margin-top: 2.25rem; }
@keyframes about-shimmer { to { background-position: -220% 0; } }

.about-hero {
  position: relative; overflow: hidden; padding-block: clamp(3.5rem, 8vw, 6.75rem);
  background: var(--hero-grad);
}
.about-hero > .container {
  position: relative; z-index: 1; display: grid; gap: 3rem; align-items: center;
}
.about-hero__copy { max-width: 42rem; }
.about-hero__copy .breadcrumb { margin-bottom: 2rem; }
.about-hero__copy .page-hero__title { max-width: 12ch; margin-bottom: 1rem; }
.about-hero__copy .page-hero__desc { max-width: 36rem; }
.about-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.about-hero__title { max-width: 11ch; margin: 0 0 1rem; color: var(--ink); font-size: clamp(2.25rem, 5.6vw, 4.25rem); font-weight: 850; line-height: 1.3; letter-spacing: -.035em; text-wrap: balance; }
.about-hero__desc { max-width: 35rem; color: var(--ink-soft); font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 2; }
.about-hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(18rem, .98fr); }
.about-hero__visual { position: relative; isolation: isolate; width: min(100%, 32rem); justify-self: center; padding: .8rem; border: 1px solid rgba(21,101,216,.2); border-radius: 24px; background: color-mix(in srgb, var(--surface) 86%, transparent); box-shadow: var(--shadow-lg); transform: rotate(-2deg); transition: transform .35s ease, box-shadow .35s ease; }
.about-hero__visual:hover { transform: rotate(0) translateY(-4px); box-shadow: 0 28px 60px rgba(13,63,125,.2); }
.about-hero__visual-bar { display: flex; align-items: center; justify-content: space-between; padding: .55rem .65rem .8rem; color: var(--ink-soft); font-size: .75rem; font-weight: 700; }
.about-hero__visual-bar span { display: inline-flex; align-items: center; gap: .45rem; }
.about-hero__visual-bar i { color: #36b37e; font-size: .55rem; }
.about-hero__visual-bar b { color: var(--ink-muted); letter-spacing: .15em; }
.about-hero__screen { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-soft); }
.about-hero__screen img { display: block; width: 100%; height: auto; }
.about-hero__screen video { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--ink); }
.about-hero__signal { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card-bg); box-shadow: var(--shadow-sm); color: var(--ink); font-size: .72rem; font-weight: 750; }
.about-hero__signal i { color: var(--brand-600); }
.about-hero__signal--one { inset: 25% auto auto -1.4rem; }
.about-hero__signal--two { inset: auto -1.1rem 12%; }
.about-hero__seal {
  position: relative; width: min(18rem, 70vw); aspect-ratio: 1; justify-self: center;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,.72); border: 1px solid rgba(21,101,216,.18);
  box-shadow: 0 24px 70px rgba(13,63,125,.16);
}
.about-hero__seal img { width: 45%; height: 45%; object-fit: contain; z-index: 1; }
.about-hero__seal-ring {
  position: absolute; inset: 10%; border: 1px solid var(--brand-200);
  border-radius: 50%; border-top-color: var(--gold); transform: rotate(-22deg);
}
.about-hero__seal span {
  position: absolute; inset: auto auto 13% 0; color: var(--brand-700);
  font-size: .72rem; font-weight: 800; line-height: 1.8; text-align: center;
}
.about-story { padding-top: clamp(4rem, 8vw, 6rem); }
.about-mission { background: linear-gradient(180deg, var(--surface-soft), var(--brand-050)); }

.about-intro--story { position: relative; }
.about-intro--story .about-intro__media {
  min-height: 22rem;
  background: linear-gradient(145deg, var(--brand-800), var(--brand-600));
}
.about-intro--story .about-intro__media::after {
  content: "وقفی نو";
  position: absolute; inset: auto 1.25rem 1.25rem auto;
  padding: .55rem .9rem; border-radius: 999px;
  color: #fff; background: rgba(10,45,90,.78); backdrop-filter: blur(8px);
  font-weight: 800; font-size: .82rem;
}
.about-intro--story .about-intro__media img { min-height: 22rem; }
.about-story-lead { max-width: 42rem; color: var(--ink-soft); }
.about-stats { position: relative; overflow: hidden; }
.about-stats::before {
  content: ""; position: absolute; width: 22rem; height: 22rem; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14); inset: -10rem auto auto -5rem;
}
.about-principles { background: var(--surface-soft); }
.about-principles__head { max-width: 38rem; margin-bottom: 2rem; }
.about-principles__grid { display: grid; gap: 1rem; }
.about-principle {
  position: relative; min-height: 13rem; padding: 1.5rem;
  background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs); overflow: hidden;
}
.about-principle::after {
  content: ""; position: absolute; width: 8rem; height: 8rem; border-radius: 50%;
  background: var(--brand-050); inset: auto -2.5rem -3rem auto; z-index: 0;
}
.about-principle > * { position: relative; z-index: 1; }
.about-principle__number { color: var(--brand-600); font-size: .8rem; font-weight: 850; }
.about-principle h3 { margin: 1.5rem 0 .55rem; font-size: 1.05rem; }
.about-principle p { max-width: 24rem; color: var(--ink-soft); font-size: .88rem; line-height: 2; }
.about-principle { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.about-principle:hover { transform: translateY(-5px); border-color: var(--brand-200); box-shadow: var(--shadow-md); }
.about-mission .mission-vision { align-items: stretch; }
.about-mission .value-card:first-child { background: var(--brand-800); color: #fff; border-color: transparent; }
.about-mission .value-card:first-child .value-card__title,
.about-mission .value-card:first-child .value-card__desc { color: #fff; }
.about-mission .value-card:first-child .value-card__desc { color: rgba(255,255,255,.78); }
.about-mission .value-card:first-child .value-card__icon { background: rgba(255,255,255,.12); color: var(--gold); }
.about-mission .value-card { min-height: 15rem; }
@media (max-width: 37.49em) {
  .about-intro--story .about-intro__media,
  .about-intro--story .about-intro__media img { min-height: 15rem; }
}
@media (min-width: 48em) {
  .about-hero > .container { grid-template-columns: minmax(0, 1fr) 18rem; }
  .about-hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(20rem, .98fr) !important; }
  .about-principles__grid { grid-template-columns: repeat(3, 1fr); }
}

.mission-vision .value-card__icon { margin-bottom: .75rem; }

.about-stats { background: linear-gradient(120deg, var(--brand-800), var(--brand-600)); }

.quote-badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--gold-soft);
  border: 1px solid rgba(246, 176, 36, .35);
  color: var(--gold-strong);
  border-radius: 100px;
  padding: .45rem 1.1rem;
  font-size: .8rem;
  font-weight: 700;
  margin-top: 1.1rem;
}@media (max-width: 47.99em) {
  .about-hero { padding-block: 3rem 4rem; }
  .about-hero__grid { grid-template-columns: 1fr; }
  .about-hero__visual { width: min(100%, 29rem); order: -1; transform: rotate(-1deg); }
  .about-hero__signal--one { inset-inline-start: -.4rem; }
  .about-hero__signal--two { inset-inline-end: -.4rem; }
  .about-hero__copy .page-hero__title { max-width: 15ch; }
}
@media (prefers-reduced-motion: reduce) {
  .about-skeleton { animation: none; }
}