/* ==========================================================================
   PISHGAM RAYAN — ABOUT PAGE V5
   PAGE-SPECIFIC ONLY

   Reusable UI moved to:
   - pr-components.css  -> atoms / helpers
   - pr-sections.css    -> logo marquee, metrics, service cards, timeline,
                           people cards, document gallery, brand CTA

   Dependencies:
   Bootstrap RTL + pr-tokens.css + pr-components.css + pr-sections.css + pr-runtime.css
   ========================================================================== */


/* ==========================================================================
   PAGE
   ========================================================================== */

.pr-about {
  --about-bg: #fff;
  --about-line: rgba(var(--color-primary-rgb), .08);
  --about-dark-1: #000b22;

  position: relative;
  overflow: hidden;
  color: var(--color-ink);
  background: var(--about-bg);
}

.pr-about > section {
  position: relative;
  z-index: 1;
}

.pr-about .pr-section-space {
  padding-top: clamp(4.5rem, 6.5vw, 6rem);
  padding-bottom: clamp(4.5rem, 6.5vw, 6rem);
}

.pr-about section[id] {
  scroll-margin-top: 130px;
}


/* ==========================================================================
   1) HERO
   ========================================================================== */

.pr-about-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  padding-top: clamp(10.5rem, 12vw, 12.5rem);
  padding-bottom: clamp(5.25rem, 8vw, 7.25rem);

  color: #fff;

  background:
    radial-gradient(circle at 12% 24%, rgba(64,129,255,.30), transparent 31rem),
    radial-gradient(circle at 87% 17%, rgba(0,51,153,.55), transparent 35rem),
    radial-gradient(circle at 10% 98%, rgba(255,204,0,.06), transparent 21rem),
    linear-gradient(135deg, var(--about-dark-1) 0%, #00276c 48%, #000817 100%);
}

.pr-about-hero::before,
.pr-about-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}

.pr-about-hero::before {
  width: 540px;
  height: 540px;
  top: -300px;
  left: -170px;
  background: radial-gradient(circle, rgba(55,122,255,.24), transparent 68%);
  filter: blur(10px);
}

.pr-about-hero::after {
  width: 400px;
  height: 400px;
  right: -160px;
  bottom: -230px;
  background: radial-gradient(circle, rgba(255,204,0,.065), transparent 70%);
  filter: blur(8px);
}

.pr-about-hero > .container {
  position: relative;
  z-index: 1;
}

.pr-about-hero > .container::before {
  content: "";
  position: absolute;
  inset: -70px;
  z-index: -1;
  pointer-events: none;
  opacity: .12;

  background-image:
    linear-gradient(rgba(137,176,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(137,176,255,.10) 1px, transparent 1px);

  background-size: 56px 56px;

  -webkit-mask-image: radial-gradient(circle at center, #000 8%, transparent 82%);
  mask-image: radial-gradient(circle at center, #000 8%, transparent 82%);
}

.pr-about-hero .pr-section-kicker--light {
  color: #b7ceff;
}

.pr-about-hero .pr-section-kicker--light::before {
  background: linear-gradient(90deg, var(--color-secondary), #72a9ff);
}

.pr-about-hero__title {
  max-width: 760px;
  margin: 0;
  color: #fff;
  line-height: 1.38;
  text-wrap: balance;
}

.pr-about-hero__accent {
  color: #fff;
}

.pr-about-hero__lead {
  max-width: 700px;
  margin: 22px 0 0;
  color: rgba(233,241,255,.76);
  font-size: clamp(.96rem, 1.2vw, 1.08rem);
  line-height: 2.08;
}

.pr-about-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.pr-about-hero__trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 38px;
}

.pr-about-hero__trust > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 155px;
  padding: 0 18px;
  border-left: 1px solid rgba(255,255,255,.13);
}

.pr-about-hero__trust > div:last-child {
  border-left: 0;
}

.pr-about-hero__trust i {
  color: #c1d5ff;
  font-size: 1rem;
}

.pr-about-hero__trust span {
  display: grid;
}

.pr-about-hero__trust strong {
  color: #fff;
  font-size: .84rem;
}

.pr-about-hero__trust small {
  margin-top: 2px;
  color: rgba(230,239,255,.54);
  font-size: .62rem;
}

.pr-about-hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 510px;
}

.pr-about-hero__visual::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80%;
  height: 80%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(54,121,255,.25), transparent 66%);
  filter: blur(18px);
  pointer-events: none;
}

.pr-about-hero__visual img {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%,670px);
  max-height: 580px;
  margin-inline: auto;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 28px 48px rgba(0,0,0,.24));
}


/* ==========================================================================
   2) TRUST
   ========================================================================== */

.pr-about-trust {
  z-index: 3;
  padding:
    clamp(3.25rem,5vw,4.25rem)
    0
    clamp(4.25rem,6.5vw,5.75rem);
  background: #fff;
}

.pr-about-trust::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(var(--color-primary-rgb),.10),
      rgba(var(--color-secondary-rgb),.20),
      rgba(var(--color-primary-rgb),.10),
      transparent
    );
}

.pr-about-trust-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.pr-about-trust-head > div {
  max-width: 800px;
}

.pr-about-trust-head h2 {
  margin: 0;
  color: var(--color-ink);
  text-wrap: balance;
}

.pr-about-trust-live {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 9px;
  margin-bottom: 3px;
  color: #6e7c91;
  font-size: .69rem;
  font-weight: 720;
}

.pr-about-trust-live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #18b879;
  box-shadow:
    0 0 0 5px rgba(24,184,121,.07),
    0 0 13px rgba(24,184,121,.20);
}

.pr-about-trust-rail {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--about-line);
  border-bottom: 1px solid var(--about-line);
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.4),
      rgba(244,248,255,.82) 18%,
      #fff 50%,
      rgba(244,248,255,.82) 82%,
      rgba(255,255,255,.4)
    );
}

.pr-about-trust .pr-logo-marquee {
  padding-block: 12px;
}


/* ==========================================================================
   3) SCALE
   ========================================================================== */

.pr-about-scale {
  border-block: 1px solid rgba(var(--color-primary-rgb),.05);
  background:
    radial-gradient(circle at 90% 20%, rgba(var(--color-primary-rgb),.055), transparent 24rem),
    radial-gradient(circle at 8% 88%, rgba(var(--color-secondary-rgb),.035), transparent 18rem),
    linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
}


/* ==========================================================================
   4) CAPABILITIES
   ========================================================================== */

#pishgam-solutions {
  background: #fff;
}

#pishgam-solutions .row {
  align-items: stretch;
}


/* ==========================================================================
   5) VISION / MISSION — intentionally page-specific
   ========================================================================== */

.pr-about-vision {
  padding-top: clamp(4.75rem,7vw,6rem);
  padding-bottom: clamp(4.75rem,7vw,6rem);
  border-top: 1px solid rgba(var(--color-primary-rgb),.045);
  border-bottom: 1px solid rgba(var(--color-primary-rgb),.045);
  background: #fff;
}

.pr-about-vision-shell {
  position: relative;
  overflow: hidden;
  max-width: 1120px;
  margin-inline: auto;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 34px 25px 38px 28px;
  color: #fff;
  background:
    radial-gradient(circle at 84% 18%, rgba(61,125,255,.22), transparent 24rem),
    radial-gradient(circle at 8% 92%, rgba(var(--color-secondary-rgb),.055), transparent 18rem),
    linear-gradient(145deg, #001239 0%, #003078 53%, #000b21 100%);
  box-shadow:
    0 28px 70px rgba(0,28,84,.14),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.pr-about-vision-main {
  position: relative;
  height: 100%;
  min-height: 470px;
  padding: clamp(2rem,5vw,4.25rem);
  border: 0;
  background: transparent;
}

.pr-about-vision-main::before {
  content: "VISION";
  position: absolute;
  left: 24px;
  bottom: 4px;
  color: rgba(255,255,255,.025);
  font-family: Arial,sans-serif;
  font-size: clamp(4rem,10vw,8.2rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.06em;
  pointer-events: none;
}

.pr-about-vision-main h2 {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0;
  color: #fff;
  text-wrap: balance;
}

.pr-about-vision-main p {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 24px 0 0;
  color: rgba(235,242,255,.76);
  font-size: clamp(.94rem,1.2vw,1.06rem);
  line-height: 2.05;
}

.pr-about-vision-values {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.pr-about-vision-values span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 37px;
  padding: 7px 11px;
  border: 1px solid rgba(143,183,255,.15);
  border-radius: 11px;
  color: #e0ebff;
  background: rgba(255,255,255,.05);
  font-size: .71rem;
  font-weight: 730;
}

.pr-about-vision-values i {
  color: #91b9ff;
}

.pr-about-mission {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 470px;
  padding: clamp(1.7rem,3vw,2.3rem);
  border: 1px solid rgba(154,190,255,.13);
  border-radius: 25px 19px 28px 21px;
  color: #fff;
  background:
    radial-gradient(circle at 92% 7%, rgba(var(--color-secondary-rgb),.065), transparent 10rem),
    linear-gradient(155deg, rgba(27,68,144,.42), rgba(2,19,52,.52));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.pr-about-mission-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: auto;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px 12px 18px 13px;
  color: var(--color-secondary);
  background: rgba(var(--color-secondary-rgb),.07);
  font-size: 1rem;
}

.pr-about-mission > small {
  margin-top: 32px;
  color: #afcaff;
  font-size: .72rem;
  font-weight: 800;
}

.pr-about-mission h3 {
  margin: 10px 0 0;
  color: #fff;
  line-height: 1.48;
}

.pr-about-mission p {
  margin: 16px 0 0;
  color: rgba(232,240,255,.72);
  font-size: .88rem;
  line-height: 2;
}


/* ==========================================================================
   6) HISTORY — page rhythm only; timeline itself is reusable
   ========================================================================== */

.pr-about-history {
  color: var(--color-ink);
  border-block: 1px solid rgba(var(--color-primary-rgb),.055);
  background:
    radial-gradient(circle at 88% 12%, rgba(var(--color-primary-rgb),.055), transparent 27rem),
    radial-gradient(circle at 8% 88%, rgba(var(--color-secondary-rgb),.025), transparent 20rem),
    linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
}


/* ==========================================================================
   7) LEADERSHIP — page background only
   ========================================================================== */

.pr-about-leadership {
  overflow: hidden;
  border-bottom: 1px solid rgba(var(--color-primary-rgb),.045);
  background:
    radial-gradient(circle at 12% 25%, rgba(var(--color-primary-rgb),.04), transparent 23rem),
    #fff;
}


/* ==========================================================================
   8) CREDENTIALS — page background only
   ========================================================================== */

.pr-about-credentials {
  overflow: hidden;
  border-bottom: 1px solid rgba(var(--color-primary-rgb),.05);
  background:
    radial-gradient(circle at 90% 10%, rgba(var(--color-primary-rgb),.05), transparent 24rem),
    radial-gradient(circle at 8% 90%, rgba(var(--color-secondary-rgb),.025), transparent 18rem),
    linear-gradient(180deg, #f7faff, #eef4ff);
}

.pr-about-credentials .pr-info-hint {
  margin-inline-start: auto;
}


/* ==========================================================================
   9) CTA — outer page rhythm only; panel itself is reusable
   ========================================================================== */

.pr-about-cta-section {
  padding-top: clamp(4.75rem,7vw,6rem);
  padding-bottom: clamp(5rem,7vw,6.5rem);
  background: #fff;
}


/* ==========================================================================
   RESPONSIVE — page-specific only
   ========================================================================== */

@media (max-width: 1199.98px) {
  .pr-about-hero {
    padding-top: 10rem;
  }

  .pr-about-hero__visual {
    min-height: 465px;
  }

  .pr-about-vision-main,
  .pr-about-mission {
    min-height: 470px;
  }
}

@media (max-width: 991.98px) {
  .pr-about-hero {
    padding-top: 9.5rem;
    padding-bottom: 5.25rem;
  }

  .pr-about-hero__lead {
    max-width: none;
  }

  .pr-about-hero__visual {
    min-height: 430px;
    margin-top: 8px;
  }

  .pr-about-hero__visual img {
    width: min(90%,610px);
  }

  .pr-about-trust-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .pr-about-trust-live {
    margin: 0;
  }

  .pr-about-vision-main,
  .pr-about-mission {
    min-height: 0;
  }

  .pr-about-mission-icon {
    margin-bottom: 24px;
  }

  .pr-about-mission > small {
    margin-top: 0;
  }
}

@media (max-width: 767.98px) {
  .pr-about section[id] {
    scroll-margin-top: 105px;
  }

  .pr-about-hero {
    padding-top: 8.5rem;
    padding-bottom: 4.5rem;
  }

  .pr-about-hero > .container::before {
    opacity: .08;
  }

  .pr-about-hero__lead {
    font-size: .93rem;
  }

  .pr-about-hero__actions {
    gap: 10px;
  }

  .pr-about-hero__actions .pr-button {
    width: 100%;
  }

  .pr-about-hero__trust {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    width: 100%;
  }

  .pr-about-hero__trust > div {
    min-width: 0;
    padding: 0 10px;
    justify-content: center;
  }

  .pr-about-hero__visual {
    min-height: 375px;
    margin-top: 12px;
  }

  .pr-about-hero__visual img {
    width: 100%;
  }

  .pr-about-trust {
    padding: 3.25rem 0 4.1rem;
  }

  .pr-about-trust-head {
    margin-bottom: 17px;
  }

  .pr-about-trust .pr-logo-marquee {
    padding-block: 9px;
  }

  .pr-about-vision-shell {
    padding: 9px;
    border-radius: 27px 20px 30px 23px;
  }

  .pr-about-vision-main {
    padding: 28px 20px 30px;
  }

  .pr-about-vision-main::before {
    left: 16px;
    font-size: 4.7rem;
  }

  .pr-about-mission {
    padding: 25px 21px;
    border-radius: 21px 16px 23px 18px;
  }

  .pr-about-credentials .pr-info-hint {
    margin-inline-start: 0;
  }
}

@media (max-width: 575.98px) {
  .pr-about-cta-section {
    padding-top: 3.5rem;
    padding-bottom: 4.25rem;
  }

  .pr-about-hero {
    padding-top: 8rem;
    padding-bottom: 4rem;
  }

  .pr-about-hero::before,
  .pr-about-hero::after,
  .pr-about-hero__visual::before {
    filter: none;
  }

  .pr-about-hero__trust {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .pr-about-hero__trust > div {
    justify-content: flex-start;
    padding: 0;
    border-left: 0;
  }

  .pr-about-hero__visual {
    min-height: 310px;
  }
}


/* ==========================================================================
   VDI — only About-specific expensive effects remain here
   ========================================================================== */

html.pr-performance-lite .pr-about-hero::before,
html.pr-software-renderer .pr-about-hero::before,
html.pr-performance-lite .pr-about-hero::after,
html.pr-software-renderer .pr-about-hero::after,
html.pr-performance-lite .pr-about-hero__visual::before,
html.pr-software-renderer .pr-about-hero__visual::before {
  filter: none;
}

html.pr-performance-lite .pr-about-hero__visual img,
html.pr-software-renderer .pr-about-hero__visual img {
  filter: none;
}

html.pr-performance-lite .pr-about-vision-shell,
html.pr-software-renderer .pr-about-vision-shell {
  box-shadow: none;
}

@media (forced-colors: active) {
  .pr-about-hero,
  .pr-about-vision-shell {
    border: 1px solid CanvasText;
  }
}