/* ════════════════════════════════════════════════════════════════════════
   صفحه‌ی «درباره ما» — شیشه‌ی تیره روی «فضا»، هماهنگ با صفحه‌ی اول
   همه‌ی سلکتورها با پیشوند ab- تا با style.css / theme.css برخورد نکنند.
   نکته‌ی فارسی: letter-spacing همه‌جا صفر است.
   ════════════════════════════════════════════════════════════════════════ */

.ab, .ab * { box-sizing: border-box; letter-spacing: 0; }
.ab {
  position: relative; max-width: 940px; margin: 0 auto; padding: 4px 0 40px;
  color: #eaf4ff; text-align: right;
  display: flex; flex-direction: column; gap: 18px;
}
.ab a { text-decoration: none; color: inherit; }

/* ورود پله‌ای بخش‌ها */
@keyframes ab-up { from { opacity: 0; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: none; } }
.ab > section { animation: ab-up .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 90ms + 60ms); }

/* ── پنل شیشه‌ایِ مشترک ───────────────────────────────────────────────── */
.ab-sec, .ab-hero {
  position: relative; border-radius: 26px; padding: 26px 28px; overflow: hidden;
  background:
    linear-gradient(160deg, rgba(38,74,140,.42) 0%, rgba(14,30,72,.55) 52%, rgba(9,20,52,.62) 100%);
  border: 1px solid rgba(150,205,255,.20);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(120,190,255,.10),
    0 22px 48px -22px rgba(1,6,28,.85),
    0 0 44px rgba(90,170,255,.08);
}
.ab-sec::before, .ab-hero::after {   /* برق ملایم گوشه‌ی بالا */
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 60% at 85% -10%, rgba(130,205,255,.16), transparent 60%);
}

.ab-sec > *, .ab-hero > * { position: relative; z-index: 1; }   /* محتوا بالای برقِ ::before */

/* ── عنوان بخش‌ها ─────────────────────────────────────────────────────── */
.ab-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ab-h h3 { margin: 0; font-size: 17px; font-weight: 800; color: #fff; white-space: nowrap; }
.ab-h-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: linear-gradient(145deg, #7fdcff, #2b9df0);
  box-shadow: 0 0 0 4px rgba(56,189,248,.18), 0 0 14px rgba(56,189,248,.8);
}
.ab-h-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(150,205,255,.34), transparent); }
.ab-sub { margin: -4px 0 16px; font-size: 13px; color: rgba(214,232,255,.68); }

/* ── هیرو ─────────────────────────────────────────────────────────────── */
.ab-hero {
  display: flex; align-items: center; gap: 36px; padding: 40px 44px; border-radius: 30px;
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(56,160,255,.30), transparent 60%),
    radial-gradient(60% 100% at 0% 100%, rgba(150,110,255,.24), transparent 62%),
    linear-gradient(160deg, rgba(30,62,128,.55), rgba(10,22,58,.68));
  border-color: rgba(160,215,255,.30);
}
.ab-hero > .ab-hero-glow {
  z-index: 0; position: absolute; width: 420px; height: 420px; right: -120px; top: -160px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(90,190,255,.30), transparent 65%); filter: blur(10px);
  animation: ab-breathe 6s ease-in-out infinite;
}
@keyframes ab-breathe { 0%,100% { opacity: .65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }

.ab-logo { position: relative; width: 150px; height: 150px; flex: none; z-index: 1; }
.ab-ring {
  position: absolute; inset: -10px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 18%, #38bdf8 38%, #a78bfa 60%, transparent 82%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: ab-spin 7s linear infinite; filter: drop-shadow(0 0 8px rgba(56,189,248,.8));
}
.ab-ring2 { inset: -20px; opacity: .45; animation-duration: 12s; animation-direction: reverse; }
@keyframes ab-spin { to { transform: rotate(360deg); } }
.ab-logo-in {
  position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(160deg, #ffffff, #e3f1ff);
  box-shadow: inset 0 -6px 14px rgba(70,140,220,.22), 0 16px 34px -10px rgba(0,10,50,.75), 0 0 0 5px rgba(255,255,255,.10);
}
.ab-logo-in img { width: 76%; height: 76%; object-fit: contain; display: block; }

.ab-hero-tx { position: relative; z-index: 1; min-width: 0; }
.ab-kick {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: #cfeaff;
  background: rgba(56,189,248,.12); border: 1px solid rgba(120,205,255,.35);
}
.ab-kick i { width: 7px; height: 7px; border-radius: 50%; background: #5eead4; box-shadow: 0 0 10px #5eead4; animation: ab-pulse 2s ease-in-out infinite; }
@keyframes ab-pulse { 50% { opacity: .35; transform: scale(.7); } }
.ab-title {
  margin: 14px 0 6px; font-size: 54px; line-height: 1.25; font-weight: 900;
  background: linear-gradient(90deg, #ffffff 0%, #8fdcff 28%, #c4b5fd 55%, #ffffff 80%, #8fdcff 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: ab-shine 7s linear infinite;
  filter: drop-shadow(0 4px 20px rgba(56,160,255,.35));
}
@keyframes ab-shine { to { background-position: -250% 0; } }
.ab-tag { margin: 0; font-size: 17px; font-weight: 500; color: rgba(222,238,255,.88); line-height: 1.9; }

/* ── معرفی ────────────────────────────────────────────────────────────── */
.ab-story { display: flex; gap: 26px; align-items: flex-start; }
.ab-story-tx { flex: 1; min-width: 0; position: relative; z-index: 1; }
.ab-photo {
  margin: 0; flex: none; width: 260px; border-radius: 20px; overflow: hidden; position: relative; z-index: 1;
  border: 1px solid rgba(160,215,255,.35); box-shadow: 0 18px 36px -14px rgba(0,8,40,.85), 0 0 0 5px rgba(255,255,255,.05);
}
.ab-photo img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: cover; }
.ab-rich { font-size: 15px; line-height: 2.15; color: rgba(232,242,255,.92); }
.ab-rich p { margin: 0 0 10px; }
.ab-rich p:first-child { font-size: 16.5px; font-weight: 700; color: #fff; }
.ab-rich strong { color: #fff; font-weight: 800; }
.ab-rich .rt-link { color: #7fdcff; text-decoration: none; border-bottom: 1px dashed rgba(127,220,255,.6); font-weight: 700; }
.ab-note {
  margin-top: 14px; padding: 10px 14px; border-radius: 14px; font-size: 12.5px; line-height: 1.9;
  color: rgba(214,232,255,.72); background: rgba(255,255,255,.05); border: 1px dashed rgba(160,205,255,.25);
}

/* ── امکانات ──────────────────────────────────────────────────────────── */
.ab-feats { display: flex; flex-wrap: wrap; gap: 10px; }
.ab-f {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 14px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: #e8f3ff;
  background: rgba(255,255,255,.06); border: 1px solid rgba(160,205,255,.22);
  transition: transform .25s, background .25s, border-color .25s, box-shadow .25s;
  animation: ab-up .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--n, 0) * 55ms + 350ms);
}
.ab-f i { font-style: normal; font-size: 16px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.ab-f:hover { transform: translateY(-3px); background: rgba(56,189,248,.14); border-color: rgba(120,210,255,.6); box-shadow: 0 10px 22px -10px rgba(56,189,248,.7); }

/* ── ارتباط با ما ─────────────────────────────────────────────────────── */
.ab-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.ab-c {
  --c: #38bdf8; --c2: #1d7fd1; --bg: linear-gradient(145deg,#4cc2ff,#1d8fe1);
  flex: 1 1 250px; max-width: calc(33.333% - 10px);
  position: relative; display: flex; align-items: center; gap: 14px; padding: 15px 16px; border-radius: 20px; overflow: hidden;
  color: #fff; cursor: pointer; isolation: isolate;
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
  border: 1px solid rgba(160,205,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 12px 26px -16px rgba(0,8,40,.9);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s;
  animation: ab-up .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--n, 0) * 80ms + 420ms);
  -webkit-tap-highlight-color: transparent;
}
.ab-c::before {   /* هاله‌ی رنگِ برند که با هاور پیدا می‌شود */
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s;
  background: radial-gradient(90% 140% at 100% 50%, color-mix(in srgb, var(--c) 34%, transparent), transparent 70%);
}
.ab-c::after {   /* نوار نور که از روی کارت رد می‌شود */
  content: ''; position: absolute; top: 0; bottom: 0; width: 46%; left: -60%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent); transform: skewX(-18deg);
}
.ab-c:hover, .ab-c:focus-visible {
  transform: translateY(-5px); outline: none; border-color: var(--c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 20px 38px -16px var(--c), 0 0 0 1px var(--c);
}
.ab-c:hover::before, .ab-c:focus-visible::before { opacity: 1; }
.ab-c:hover::after { left: 130%; transition: left .8s ease; }
.ab-c:active { transform: translateY(-1px) scale(.985); }

.ab-c-ic {
  width: 54px; height: 54px; flex: none; border-radius: 17px; display: grid; place-items: center; color: #fff;
  background: var(--bg);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(0,0,0,.18), 0 10px 22px -8px var(--c);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.ab-c:hover .ab-c-ic { transform: rotate(-6deg) scale(1.08); }
.ab-c-ic svg { width: 26px; height: 26px; display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.ab-c-glyph { font-size: 20px; font-weight: 900; line-height: 1; text-shadow: 0 2px 4px rgba(0,0,0,.3); }
.ab-c-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ab-c-tx b { font-size: 15.5px; font-weight: 800; color: #fff; }
.ab-c-h {
  display: block; direction: ltr; unicode-bidi: isolate; text-align: right;
  font-size: 13.5px; color: rgba(226,240,255,.82); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ab-c-go {
  width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #dff0ff;
  transition: background .3s, transform .3s, color .3s;
}
.ab-c-go svg { width: 16px; height: 16px; display: block; }
.ab-c:hover .ab-c-go { background: var(--c); color: #fff; transform: translate(-3px, -3px) rotate(-8deg); border-color: transparent; }

.ab-empty { padding: 6px 2px; font-size: 13px; color: rgba(214,232,255,.72); }

/* ── نماد اعتماد ──────────────────────────────────────────────────────── */
.ab-trust { display: flex; align-items: center; gap: 30px; padding: 26px 32px;
  background:
    radial-gradient(60% 130% at 0% 50%, rgba(52,211,153,.20), transparent 62%),
    linear-gradient(160deg, rgba(38,74,140,.42), rgba(9,20,52,.62));
  border-color: rgba(110,231,183,.28);
}
.ab-trust-txt { flex: 1; min-width: 0; position: relative; z-index: 1; }
.ab-trust-kick { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: #86efc4; }
.ab-trust-kick svg { width: 18px; height: 18px; display: block; }
.ab-trust h3 { margin: 8px 0 6px; font-size: 20px; font-weight: 900; color: #fff; }
.ab-trust p { margin: 0 0 14px; font-size: 13.5px; line-height: 2; color: rgba(222,238,255,.78); }
.ab-verify {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: #06281c;
  background: linear-gradient(180deg, #a7f3d0, #34d399);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 3px 0 #0f8a63, 0 10px 20px -8px rgba(52,211,153,.7);
  transition: transform .2s, box-shadow .2s;
}
.ab-verify svg { width: 15px; height: 15px; display: block; }
.ab-verify:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 5px 0 #0f8a63, 0 16px 26px -8px rgba(52,211,153,.8); }
.ab-verify:active { transform: translateY(2px); box-shadow: 0 1px 0 #0f8a63; }

.ab-seal-wrap { position: relative; flex: none; z-index: 1; isolation: isolate; }
.ab-seal {
  position: relative; z-index: 1; display: grid; place-items: center;
  min-width: 150px; min-height: 150px; padding: 16px; border-radius: 26px; cursor: pointer;
  background: linear-gradient(160deg, #ffffff, #eaf5ff);
  box-shadow: inset 0 -5px 12px rgba(80,150,220,.18), 0 18px 38px -12px rgba(0,10,50,.85), 0 0 0 5px rgba(255,255,255,.10), 0 0 0 1px rgba(52,211,153,.5);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.ab-seal:hover { transform: translateY(-6px) rotate(-2deg) scale(1.04);
  box-shadow: inset 0 -5px 12px rgba(80,150,220,.18), 0 26px 46px -12px rgba(0,10,50,.9), 0 0 0 5px rgba(255,255,255,.14), 0 0 34px rgba(52,211,153,.6); }
.ab-seal-glow {
  position: absolute; inset: -14px; border-radius: 34px; z-index: 0; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(52,211,153,0), rgba(52,211,153,.75), rgba(56,189,248,.6), rgba(52,211,153,0) 70%);
  filter: blur(14px); animation: ab-spin 6s linear infinite;
}
.ab-seal-img { display: block; height: 108px; width: auto; max-width: 150px; object-fit: contain; }
.ab-seal-fb { display: none; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: #0b7a55; }
.ab-seal-fb svg { width: 54px; height: 54px; display: block; filter: drop-shadow(0 4px 8px rgba(16,150,100,.4)); }
.ab-seal-fb b { font-size: 13px; font-weight: 800; color: #0a3d2e; line-height: 1.6; }
.ab-seal-fb small { font-size: 10.5px; font-weight: 700; color: #4b8f78; direction: ltr; }
.ab-seal-fallback .ab-seal-img { display: none; }
.ab-seal-fallback .ab-seal-fb { display: flex; }

/* ── پیش‌نمایش ادمین ─────────────────────────────────────────────────── */
.ab-preview-tag {
  display: inline-block; margin: 2px 0 12px; padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: #cfeaff; background: rgba(56,189,248,.14); border: 1px dashed rgba(120,205,255,.5);
}
.ab-ed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.ab-ed-f { display: flex; flex-direction: column; gap: 4px; }
.ab-ed-l { font-size: 12.5px; font-weight: 700; color: var(--sky-dark, #0b5fa5); }
.ab-ed-f input { width: 100%; }

/* ── تبلت و موبایل ───────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .ab { gap: 14px; }
  .ab-sec { padding: 20px 18px; border-radius: 22px; }
  .ab-hero { flex-direction: column; text-align: center; gap: 26px; padding: 34px 20px 30px; border-radius: 26px; }
  .ab-logo { width: 124px; height: 124px; }
  .ab-title { font-size: 40px; }
  .ab-tag { font-size: 15px; }
  .ab-story { flex-direction: column; }
  .ab-photo { width: 100%; }
  .ab-photo img { max-height: 260px; }
  .ab-c { flex-basis: 100%; max-width: 100%; }
  .ab-trust { flex-direction: column-reverse; text-align: center; gap: 22px; padding: 24px 18px; }
  .ab-h h3 { white-space: normal; }
}
@media (max-width: 380px) {
  .ab-title { font-size: 34px; }
  .ab-c-ic { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .ab *, .ab > section { animation: none !important; transition: none !important; }
}