/* fa-pages.css — VideoRayan Persian dev/agents pages
   تم روشن و شاد: آبی آسمانی → فیروزه‌ای با تاکیدهای کهربایی/مرجانی — RTL */
:root {
  --fa-bg: #f6fbff;
  --fa-card: #ffffff;
  --fa-ink: #0f2942;
  --fa-ink2: #5b7185;
  --fa-line: #e3eefc;
  --fa-sky: #0ea5e9;
  --fa-teal: #14b8a6;
  --fa-amber: #f59e0b;
  --fa-rose: #fb7185;
  --fa-violet: #8b5cf6;
  --fa-grad: linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%);
  --fa-shadow: 0 10px 30px rgba(14, 116, 208, 0.10);
  --fa-radius: 18px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.fah {
  margin: 0; background: var(--fa-bg); color: var(--fa-ink);
  font-family: Vazirmatn, "Segoe UI", Tahoma, sans-serif;
  font-size: 15.5px; line-height: 2; direction: rtl; text-align: right;
}
.fah a { color: var(--fa-sky); text-decoration: none; }
.fah a:hover { text-decoration: underline; }
.fah .container { max-width: 1120px; margin: 0 auto; padding: 0 22px; }

/* ---------- header ---------- */
.fah-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--fa-line); }
.fah-header .inner { display: flex; align-items: center; gap: 18px; height: 64px; }
.fah-brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 17px; color: var(--fa-ink); }
.fah-brand .logo-dot { width: 30px; height: 30px; border-radius: 9px; background: var(--fa-grad); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.fah-nav { display: flex; gap: 4px; margin-inline-start: 10px; flex: 1; flex-wrap: wrap; }
.fah-nav a { padding: 7px 13px; border-radius: 999px; font-size: 13.8px; font-weight: 600; color: var(--fa-ink2); }
.fah-nav a:hover { background: #eaf6ff; color: var(--fa-sky); text-decoration: none; }
.fah-nav a.active { background: var(--fa-grad); color: #fff; }
.fah-actions { display: flex; gap: 8px; align-items: center; }

/* ---------- buttons ---------- */
.fah-btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 20px; border-radius: 12px; font-weight: 700; font-size: 14px; border: 0; cursor: pointer; font-family: inherit; }
.fah-btn.primary { background: var(--fa-grad); color: #fff; box-shadow: 0 6px 18px rgba(14,165,233,.35); }
.fah-btn.primary:hover { filter: brightness(1.06); text-decoration: none; }
.fah-btn.ghost { background: #fff; color: var(--fa-ink); border: 1.5px solid var(--fa-line); }
.fah-btn.ghost:hover { border-color: var(--fa-sky); color: var(--fa-sky); text-decoration: none; }
.fah-btn.small { padding: 7px 14px; font-size: 12.8px; border-radius: 10px; }

/* ---------- hero ---------- */
.fah-hero { position: relative; overflow: hidden; padding: 64px 0 54px; background: linear-gradient(135deg, #e0f2fe 0%, #ecfeff 45%, #fef9ec 100%); }
.fah-hero::before, .fah-hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; }
.fah-hero::before { width: 320px; height: 320px; background: #7dd3fc; top: -120px; inset-inline-start: -80px; }
.fah-hero::after { width: 280px; height: 280px; background: #fde68a; bottom: -140px; inset-inline-end: -60px; }
.fah-hero .container { position: relative; z-index: 1; }
.fah-crumb { font-size: 12.8px; color: var(--fa-ink2); margin-bottom: 14px; }
.fah-crumb a { color: var(--fa-ink2); }
.fah-hero h1 { margin: 10px 0 6px; font-size: 40px; line-height: 1.45; font-weight: 900; }
.fah-hero h1 .grad { background: var(--fa-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fah-hero .lede { max-width: 780px; font-size: 16.5px; color: var(--fa-ink2); margin: 0 0 22px; }
.fah-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- badges ---------- */
.fah-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 13px; border-radius: 999px; font-size: 12.3px; font-weight: 700; }
.fah-badge.sky { background: #e0f2fe; color: #0369a1; }
.fah-badge.green { background: #dcfce7; color: #15803d; }
.fah-badge.amber { background: #fef3c7; color: #b45309; }
.fah-badge.rose { background: #ffe4e6; color: #be123c; }
.fah-badge.violet { background: #ede9fe; color: #6d28d9; }

/* ---------- sections & cards ---------- */
.fah-section { padding: 58px 0; }
.fah-section.tint { background: #fff; border-block: 1px solid var(--fa-line); }
.fah-eyebrow { display: inline-block; padding: 4px 14px; border-radius: 999px; background: #e0f2fe; color: #0369a1; font-size: 12.6px; font-weight: 800; margin-bottom: 10px; }
.fah-section h2 { font-size: 29px; line-height: 1.55; margin: 0 0 8px; font-weight: 900; }
.fah-sub { color: var(--fa-ink2); font-size: 15px; max-width: 760px; margin: 0 0 28px; }
.fah-grid { display: grid; gap: 18px; }
.fah-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.fah-grid.c2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .fah-grid.c3, .fah-grid.c2 { grid-template-columns: 1fr; } .fah-hero h1 { font-size: 31px; } .fah-nav { display: none; } }
.fah-card { background: var(--fa-card); border: 1px solid var(--fa-line); border-radius: var(--fa-radius); padding: 24px 22px; box-shadow: var(--fa-shadow); border-top: 3px solid var(--accent, var(--fa-sky)); }
.fah-card h3 { margin: 0 0 8px; font-size: 17.5px; font-weight: 800; }
.fah-card p { margin: 0; color: var(--fa-ink2); font-size: 14.2px; }
.fah-card ul { margin: 8px 0 0; padding-inline-start: 20px; color: var(--fa-ink2); font-size: 14px; }
.fah-card ul li { margin-bottom: 6px; }
.fah-card .top { margin-top: 14px; }

/* ---------- code ---------- */
.fah-code { direction: ltr; text-align: left; background: #0f2942; color: #dbeafe; border-radius: 14px; padding: 18px 18px; overflow-x: auto; font-family: "JetBrains Mono", Consolas, monospace; font-size: 12.8px; line-height: 1.85; margin: 0; }
.fah-code .c { color: #7dd3fc; }
.fah-code .s { color: #fde68a; }
.fah-code .k { color: #f0abfc; }
.fah-codecard { background: #0f2942; border-radius: 14px; overflow: hidden; box-shadow: var(--fa-shadow); }
.fah-codecard .head { display: flex; align-items: center; justify-content: space-between; background: #123350; padding: 9px 16px; }
.fah-codecard .head .t { color: #bae6fd; font-size: 12.3px; font-weight: 700; font-family: "JetBrains Mono", monospace; direction: ltr; }
.fah-codecard .head button { background: rgba(255,255,255,.12); color: #e0f2fe; border: 0; border-radius: 8px; padding: 4px 12px; font-size: 11.5px; cursor: pointer; font-family: inherit; }
.fah-inline { direction: ltr; unicode-bidi: embed; display: inline-block; background: #eaf6ff; color: #0369a1; border-radius: 6px; padding: 0 7px; font-family: "JetBrains Mono", monospace; font-size: 12.3px; }

/* ---------- callout / community ---------- */
.fah-callout { border-radius: var(--fa-radius); padding: 18px 20px; background: #fffbeb; border: 1.5px solid #fde68a; font-size: 14.2px; margin-top: 22px; }
.fah-callout.blue { background: #eff8ff; border-color: #bae6fd; }
.fah-community { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }

/* ---------- photos strip ---------- */
.fah-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
@media (max-width: 900px) { .fah-photos { grid-template-columns: 1fr; } }
.fah-photo { position: relative; border-radius: var(--fa-radius); overflow: hidden; box-shadow: var(--fa-shadow); border: 4px solid #fff; }
.fah-photo img { width: 100%; height: 210px; object-fit: cover; display: block; }
.fah-photo .cap { position: absolute; inset-inline: 10px; bottom: 10px; background: rgba(255,255,255,.94); border-radius: 12px; padding: 8px 14px; font-size: 13px; font-weight: 700; color: var(--fa-ink); }
.fah-photo .cap small { display: block; font-weight: 500; color: var(--fa-ink2); font-size: 11.8px; }

/* ---------- table ---------- */
.fah-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--fa-shadow); font-size: 13.8px; }
.fah-table th { background: #eaf6ff; text-align: right; padding: 11px 14px; font-size: 13px; }
.fah-table td { padding: 10px 14px; border-top: 1px solid var(--fa-line); }
.fah-table code, .fah-code-ltr { direction: ltr; unicode-bidi: embed; }

/* ---------- form ---------- */
.fah-form { display: flex; flex-direction: column; gap: 13px; }
.fah-form label { font-size: 13.6px; font-weight: 700; display: block; }
.fah-form input, .fah-form select, .fah-form textarea { width: 100%; margin-top: 6px; padding: 11px 13px; border: 1.5px solid var(--fa-line); border-radius: 11px; font-size: 14px; font-family: inherit; background: #fff; }
.fah-form input:focus, .fah-form select:focus, .fah-form textarea:focus { outline: none; border-color: var(--fa-sky); box-shadow: 0 0 0 3px rgba(14,165,233,.15); }

/* ---------- CTA / footer ---------- */
.fah-cta { background: var(--fa-grad); color: #fff; padding: 52px 0; text-align: center; }
.fah-cta h2 { color: #fff; margin: 0 0 8px; font-size: 27px; }
.fah-cta p { color: rgba(255,255,255,.92); margin: 0 auto 20px; max-width: 640px; }
.fah-cta .fah-btn.ghost { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.5); }
.fah-footer { background: #0f2942; color: #c7d9ec; padding: 40px 0 26px; font-size: 13.5px; }
.fah-footer .cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 900px) { .fah-footer .cols { grid-template-columns: 1fr 1fr; } }
.fah-footer h4 { color: #fff; font-size: 14.5px; margin: 0 0 10px; }
.fah-footer a { color: #c7d9ec; display: block; margin-bottom: 7px; }
.fah-footer a:hover { color: #7dd3fc; }
.fah-footer .base { border-top: 1px solid rgba(255,255,255,.14); margin-top: 26px; padding-top: 16px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: #8fb0cd; }