/* ═══════════════════════════════════════════════════════════════════════════
   /about/ — "درباره ما". Page-scoped layer on top of the landing theme.

   WHY THIS IS A SEPARATE FILE AND NOT PART OF index.css
   -----------------------------------------------------
   `css/style.min.css` is a GENERATED bundle (grid + index + hero-anim + btn-fx)
   and the build script that produces it does not live in this repo yet. Adding
   these rules to index.css would therefore change a source the served bundle is
   NOT rebuilt from — the page would look unstyled with no error anywhere. So the
   about page ships its own stylesheet, linked only on this route by the
   `[@page->pagecss]` branch in biiq.views.main.v2head.html.

   Everything below is ADDITIVE. Tokens (--blue2, --surface, --border, …), the
   .glass surface, .section*/.divider/.reveal/.stagger-child, the .btn-* family
   and the whole nav/footer chrome come from the bundle and are reused as-is;
   nothing here overrides them. Classes are `.ab-`-prefixed so a future merge
   into index.css cannot collide.

   RTL: the document is dir="rtl". Every directional value here is a LOGICAL
   property (inset-inline-*, padding-inline-*, border-inline-*, text-align:start)
   so the page does not have to be re-mirrored if it is ever served LTR.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── PAGE HERO ───
   Deliberately NOT the landing hero. That one is a full-viewport pitch with a
   WebGL orb; an interior page that opened the same way would read as a second
   home page. This is a short banner: who we are, plus the one artefact a visitor
   on an "about" page is actually looking for — the legal identity card. */
.ab-hero {
  padding: 64px 0 72px;
  position: relative;
}
.ab-hero::before {
  /* A single soft bloom behind the copy, echoing .footer-cta-glow. The aurora
     blobs in the shared header already move behind everything; this only lifts
     the top of the page so the nav does not sit on flat black. */
  content: '';
  position: absolute;
  inset-block-start: -120px;
  inset-inline-end: -80px;
  width: 620px;
  height: 420px;
  background: radial-gradient(circle, rgba(61,123,255,0.16), transparent 66%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
}
.ab-hero > .container { position: relative; z-index: 1; }

/* Breadcrumb — the only thing on the page that tells a visitor arriving from
   search that there IS a site above this document. */
.ab-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 28px;
}
.ab-crumb a { color: var(--text-sub); text-decoration: none; transition: color 180ms; }
.ab-crumb a:hover { color: var(--blue2); }
.ab-crumb .ab-crumb-sep { opacity: 0.4; }
.ab-crumb [aria-current] { color: var(--text); font-weight: 600; }

.ab-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
.ab-h1 {
  font-size: clamp(32px, 4.6vw, 56px);
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.18;
  color: var(--text);
  margin: 0 0 18px;
}
/* Same padding/negative-margin pair as .hero-h1 .gradient-text in index.css and
   for the same reason: background-clip paints only inside the element's box, so
   any glyph ascender or descender outside it receives no paint and vanishes. */
.ab-h1 .gradient-text {
  background: linear-gradient(90deg, #5C86FF 0%, #9945ff 50%, #00e5c8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding-block: 0.16em;
  margin-block: -0.16em;
}
.ab-lead {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.9;
  color: var(--text-sub);
  max-width: 560px;
  margin: 0 0 28px;
}
.ab-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* ─── LEGAL IDENTITY CARD ───
   The page this replaces buried the registration number in a paragraph. On a
   crypto exchange that number is the single highest-value fact on the page, so
   it gets a surface of its own instead of a sentence. */
.ab-idcard {
  border-radius: var(--radius-lg);
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.ab-idcard::before {
  content: '';
  position: absolute;
  inset-block-start: -70px;
  inset-inline-start: -70px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--violet), transparent);
  opacity: 0.09;
  pointer-events: none;
}
.ab-idcard-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 20px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.ab-idcard-mark {
  width: 46px; height: 46px;
  flex: 0 0 auto;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(61,123,255,0.12);
  box-shadow: 0 0 0 1px rgba(61,123,255,0.2);
}
.ab-idcard-mark svg { width: 22px; height: 22px; }
.ab-idcard-title { font-size: 16px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; }
.ab-idcard-sub   { font-size: 12.5px; font-weight: 400; color: var(--text-muted); margin-top: 3px; }

.ab-idlist { margin: 0; position: relative; }
.ab-idrow {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ab-idrow:last-child { border-bottom: 0; padding-bottom: 0; }
.ab-idrow dt {
  flex: 0 0 96px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
}
.ab-idrow dd {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--text);
}
/* The legal form is part of the name but not the part anyone reads — keeping it
   at full weight made every row's value fight the label beside it. */
.ab-idrow-note { font-weight: 400; color: var(--text-muted); }
/* NOTE — there is deliberately no `dir="ltr"` on the registration number.
   Persian digits are bidi class AN and already render in the right order inside
   an RTL run, so the isolate bought nothing; what it DID do was resolve
   `text-align: start` to the LEFT edge, so that one row's value sat opposite
   every other row's. The footer's phone number keeps its `dir` because it
   contains a hyphen, which is bidi-neutral and does reorder. */

/* ─── STATS STRIP ───
   Reuses .stat-card/.stat-num/.stat-label from the bundle; only the track is
   local, because the landing's version rides a Bootstrap row and the grid subset
   this app ships has no 4-up class below lg. */
.ab-stats { padding: 56px 0; }
.ab-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* ─── STORY ─── */
.ab-story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
.ab-story-copy p {
  font-size: 15.5px;
  font-weight: 400;
  line-height: 2.05;
  color: var(--text-sub);
  margin: 0 0 20px;
}
.ab-story-copy p:last-child { margin-bottom: 0; }
.ab-story-copy strong { color: var(--text); font-weight: 700; }

/* Pull quote. The rule sits on the inline-start edge so it flips with the
   document direction instead of being pinned to the left.
   The two properties under it have to be told the same thing the hard way:
   `border-radius` shorthand and `linear-gradient()` are both PHYSICAL. Written
   as `90deg` the tint faded away from the rule instead of out from under it —
   the rule was on the right and the colour was on the left. Hence the logical
   corner properties and the explicit `to left`. */
.ab-quote {
  margin: 28px 0 0;
  padding: 18px 22px;
  border-inline-start: 3px solid var(--blue2);
  border-start-start-radius: 4px;
  border-end-start-radius: 4px;
  border-start-end-radius: 14px;
  border-end-end-radius: 14px;
  background: linear-gradient(to left, rgba(61,123,255,0.09), transparent 75%);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.9;
  color: var(--text);
}

.ab-glance { border-radius: var(--radius-lg); padding: 26px; }
.ab-glance-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 18px;
  letter-spacing: -0.3px;
}
.ab-glance-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ab-glance-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.75;
  color: var(--text-sub);
}
.ab-glance-list svg {
  width: 17px; height: 17px;
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--teal);
}

/* ─── VALUES ───
   Card treatment intentionally matches .why-card on the landing (same radius,
   same hover lift, same duotone icon chip) so the two pages read as one product.
   It is re-declared rather than reused because .why-card carries `height:100%`
   for a Bootstrap column that does not exist here. */
.ab-values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.ab-value {
  padding: 30px 26px;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  transition: transform 250ms, border-color 250ms;
}
.ab-value::before {
  content: '';
  position: absolute;
  inset-block-start: -60px;
  inset-inline-end: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 300ms;
  pointer-events: none;
}
.ab-value:hover { transform: translateY(-3px); border-color: var(--border-h); }
.ab-value:hover::before { opacity: 0.07; }
.ab-value.v1::before { background: radial-gradient(circle, #9945ff, transparent); }
.ab-value.v2::before { background: radial-gradient(circle, #00e5c8, transparent); }
.ab-value.v3::before { background: radial-gradient(circle, #3d7bff, transparent); }
.ab-value.v4::before { background: radial-gradient(circle, #f7931a, transparent); }
.ab-value-icon {
  width: 52px; height: 52px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.ab-value-icon svg { width: 26px; height: 26px; }
/* Duotone, matching .why-icon: the secondary layer is the icon's BODY, so on
   translucent glass anything under ~.45 dissolves the silhouette. */
.ab-value-icon svg .fa-secondary { opacity: 0.45; }
.ab-value.v1 .ab-value-icon { background: rgba(153,69,255,0.12); box-shadow: 0 0 0 1px rgba(153,69,255,0.2); color: var(--violet); }
.ab-value.v2 .ab-value-icon { background: rgba(0,229,200,0.10);  box-shadow: 0 0 0 1px rgba(0,229,200,0.15); color: var(--teal); }
.ab-value.v3 .ab-value-icon { background: rgba(61,123,255,0.12); box-shadow: 0 0 0 1px rgba(61,123,255,0.2); color: var(--blue2); }
.ab-value.v4 .ab-value-icon { background: rgba(247,147,26,0.10); box-shadow: 0 0 0 1px rgba(247,147,26,0.15); color: #f7931a; }
.ab-value-title { font-size: 19px; font-weight: 800; color: var(--text); margin: 0 0 9px; letter-spacing: -0.4px; }
.ab-value-desc  { font-size: 14px; font-weight: 400; color: var(--text-sub); line-height: 1.85; margin: 0; }

/* ─── CONTACT ───
   This page is the redesign of the old "تماس با ما", so the contact details are
   the payload, not a footnote — each channel is its own tap target rather than a
   line in a paragraph. */
.ab-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.ab-cc {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px;
  border-radius: 20px;
  text-decoration: none;
  color: inherit;
  transition: transform 220ms, border-color 220ms;
}
.ab-cc:hover { transform: translateY(-3px); border-color: var(--border-h); }
.ab-cc-icon {
  width: 46px; height: 46px;
  flex: 0 0 auto;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(61,123,255,0.12);
  box-shadow: 0 0 0 1px rgba(61,123,255,0.2);
  color: var(--blue2);
}
.ab-cc-icon svg { width: 21px; height: 21px; }
.ab-cc.cc-mail .ab-cc-icon { background: rgba(153,69,255,0.12); box-shadow: 0 0 0 1px rgba(153,69,255,0.2); color: var(--violet); }
.ab-cc.cc-tg   .ab-cc-icon { background: rgba(0,229,200,0.10);  box-shadow: 0 0 0 1px rgba(0,229,200,0.15); color: var(--teal); }
.ab-cc-body { min-width: 0; }
.ab-cc-label { font-size: 12.5px; font-weight: 500; color: var(--text-muted); margin-bottom: 5px; }
.ab-cc-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  /* Phone numbers, e-mail and @handles are LTR runs inside an RTL line. Isolate
     rather than just setting dir, or a trailing "@" or "+" is flung to the far
     end of the line by the bidi algorithm. */
  unicode-bidi: isolate;
  overflow-wrap: anywhere;
}

.ab-address {
  border-radius: var(--radius-lg);
  padding: 26px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
.ab-addr-block { display: flex; align-items: flex-start; gap: 14px; }
.ab-addr-block svg {
  width: 19px; height: 19px;
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--blue2);
}
.ab-addr-label { font-size: 12.5px; font-weight: 500; color: var(--text-muted); margin-bottom: 6px; }
.ab-addr-text  { font-size: 14.5px; font-weight: 500; line-height: 1.85; color: var(--text); }

/* ─── RESPONSIVE ─── */
@media (min-width: 576px) {
  .ab-values-grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-contact-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-address       { grid-template-columns: 1.6fr 1fr; gap: 28px; }
}
@media (min-width: 992px) {
  .ab-hero        { padding: 84px 0 92px; }
  .ab-hero-grid   { grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; }
  .ab-idcard      { padding: 32px; }
  .ab-stats-grid  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* The narrative gets the wider track: the side panel is a scan-list and stops
     being readable long before a paragraph does. */
  .ab-story-grid  { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 48px; }
  .ab-contact-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ─── REDUCED MOTION ───
   The hover lifts are the only motion this page owns; the bundle already gates
   its own. Honour the OS setting here too rather than leaving one page moving. */
@media (prefers-reduced-motion: reduce) {
  .ab-value, .ab-cc { transition: border-color 220ms; }
  .ab-value:hover, .ab-cc:hover { transform: none; }
}