/* =========================================================================
   MAGNET AGENCY — Persian (fa-IR) layer
   Loaded *after* styles.css on the /fa pages only.
   Two jobs: swap the type system to Kahroba, and mirror everything the
   base sheet pinned to a physical left/right edge.
   ========================================================================= */

/* ------------------------------ Kahroba -------------------------------- */
@font-face {
  font-family: "Kahroba";
  src: url("../fonts/kahroba/Kahroba-L.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Kahroba";
  src: url("../fonts/kahroba/Kahroba-RG.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Kahroba";
  src: url("../fonts/kahroba/Kahroba-M.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Kahroba";
  src: url("../fonts/kahroba/Kahroba-SB.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Kahroba";
  src: url("../fonts/kahroba/Kahroba-B.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Kahroba";
  src: url("../fonts/kahroba/Kahroba-EB.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Kahroba";
  src: url("../fonts/kahroba/Kahroba-BL.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ------------------------------ Tokens --------------------------------- */
:root {
  --f-display: "Kahroba", "Vazirmatn", system-ui, sans-serif;
  --f-body:    "Kahroba", "Vazirmatn", system-ui, sans-serif;
  --f-serif:   "Kahroba", "Vazirmatn", system-ui, sans-serif;
}

/* -------------------------- Persian typography -------------------------
   Arabic script is cursive: negative tracking welds the letters together
   and uppercase tracking pulls them apart. Both have to go.
   ----------------------------------------------------------------------- */
html[lang="fa"] * { letter-spacing: 0 !important; }
/* …except the decorative star rows, which need their air back. Kahroba has no
   U+2605, so name the fallback rather than leaving it to chance. */
html[lang="fa"] .stars,
html[lang="fa"] .tcard__stars {
  letter-spacing: 2px !important;
  font-family: "Segoe UI Symbol", "Apple Symbols", system-ui, sans-serif;
}

body {
  font-size: 16.5px;
  line-height: 1.85;
  font-weight: 400;
}

/* Descenders and dots sit lower than in Latin — every display line needs
   more room than the 0.98–1.02 the base sheet uses.
   Weight: Clash Display at 600 sets a heavy display colour that Kahroba only
   reaches around 700–800, so the headings are pushed up to match it. */
h1, h2, h3, .display { line-height: 1.4; font-weight: 700; }
.h-xl { font-size: clamp(2.4rem, 7vw, 5.4rem); line-height: 1.3; font-weight: 800; }
.h-lg { font-size: clamp(1.9rem, 4.6vw, 3.4rem); line-height: 1.35; font-weight: 800; }
.h-md { font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.4; font-weight: 700; }
.h-sm { font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 700; }

/* The italic-serif accent has no Persian equivalent — weight contrast
   carries the same emphasis instead: Light against an ExtraBold heading. */
.serif {
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 300;
}

.eyebrow { font-size: .82rem; text-transform: none; font-weight: 500; }
.lead { line-height: 1.9; max-width: 46ch; }
p { line-height: 1.9; }

/* Latin runs inside Persian copy (emails, handles, urls) */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ------------------------------ Hero ----------------------------------- */
.hero h1 { max-width: 20ch; }
.hero h1 .line { padding-bottom: .22em; }
.hero__sub { max-width: 52ch; line-height: 1.9; }
.avatars span { margin-left: 0; margin-right: -10px; font-family: system-ui, sans-serif; }
.avatars span:first-child { margin-right: 0; }

/* ------------------------------ Nav ------------------------------------ */
.nav__inner { padding: 10px 22px 10px 12px; }
/* EN is a UI label — Kahroba's Latin is a serif, wrong register here.
   The .nav__mobile pair matches the specificity of the sheet override in styles.css */
.lang,
.nav__mobile .lang { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.nav__link { font-weight: 500; }
.nav__mobile a { font-weight: 700; line-height: 1.5; }
.nav__mobile a.nav__mobile-cta { line-height: 1; }
@media (max-width: 900px) {
  .nav__inner { padding: 8px 18px 8px 8px; }
}
@media (max-width: 620px) {
  .nav__inner { padding: 7px 14px 7px 7px; }
}

/* ---------------------------- Marquee ----------------------------------
   Keep the track itself LTR so the -50% loop still scrolls seamlessly;
   each item stays RTL internally. */
.marquee__track { direction: ltr; }
.marquee__item { direction: rtl; font-weight: 600; }

/* ------------------------- Directional icons ---------------------------
   Arrows drawn pointing right/north-east need to point the other way. */
.btn svg,
.tlink svg,
.reel-lb__nav svg { transform: scaleX(-1); }
.tlink:hover svg { transform: scaleX(-1) translate(3px, -3px); }
/* checkmarks, plus signs and the play triangle must stay as drawn */
.feature__list .ic svg,
.marquee__item svg,
.reel-card__play svg,
.reel__play svg,
.svc__icon svg,
.chip-float .dot svg,
.growth-card__follow .delta svg,
.growth-card__foot em svg,
.work__kpi svg,
.socials svg,
.reel-lb__close svg,
.reel-lb__sound svg { transform: none; }

/* ------------------------------ Services -------------------------------- */
.svc__num { font-family: var(--f-body); }
.svc__num--abs { right: auto; left: 30px; }
.svc__glow { right: auto; left: -80px; }

/* ------------------------------ Feature --------------------------------- */
.feature__list b { font-weight: 600; }
.step:hover { padding-left: 6px; padding-right: 20px; }

/* browser mock — its chrome is a Latin UI, keep it LTR */
.browser { direction: ltr; }
.chip-perf { right: auto; left: -16px; }
@media (max-width: 900px) { .chip-perf { left: 4%; right: auto; } }

/* growth card */
.growth-card__follow { margin-left: 0; margin-right: auto; text-align: left; }
.growth-card__id b { direction: ltr; }
.growth-card__foot div em { margin-left: 0; margin-right: 6px; }
.chip-ig { left: auto; right: -7%; }
@media (max-width: 900px) { .chip-ig { right: auto; left: 4%; } }
@media (max-width: 620px)  { .chip-ig { left: 10px; right: auto; } }
@media (max-width: 400px)  { .chip-ig { right: 10px; left: auto; } }

.reel__play { right: auto; left: 9px; }
.reel__views { left: auto; right: 8px; }

/* ------------------------------ Work cards ------------------------------ */
.work__tagrow { left: auto; right: 16px; }
.work__result { text-align: left; }
.reel-card__meta h3 { line-height: 1.45; }
.reel-card__meta .cat { text-transform: none; letter-spacing: 0; }

/* ------------------------------ Lightbox -------------------------------- */
.reel-lb__close { right: auto; left: 14px; }
.reel-lb__sound { left: auto; right: 14px; }
.reel-lb__prev { left: auto; right: clamp(12px, 4vw, 48px); }
.reel-lb__next { right: auto; left: clamp(12px, 4vw, 48px); }
.reel-lb__caption .cat { text-transform: none; }
.reel-lb__bar i { margin-right: 0; margin-left: auto; }
@media (max-width: 720px) {
  .reel-lb__prev { right: 8px; left: auto; }
  .reel-lb__next { left: 8px; right: auto; }
}

/* Signed / suffixed metrics read left-to-right (+۲۱۲٪, ۴.۴×) even in RTL */
.growth-card__follow .delta,
.growth-card__foot div em,
.work__kpi { direction: ltr; }

/* ------------------------------ Stats ----------------------------------- */
.stat b, .fstat b, .chip-float b, .growth-card__follow b,
.growth-card__foot div b, .work__result b, .perf-ring__val {
  font-weight: 800;
  direction: ltr;
  unicode-bidi: isolate;
  display: block;
}
.stat b { line-height: 1.25; }
/* charts keep their LTR time axis — mirroring makes a rising line read as a fall */

/* ------------------------------ Clients --------------------------------- */
.clients-row__label { text-transform: none; }
.clients-row__list a { direction: ltr; unicode-bidi: isolate; font-weight: 500; }

/* ------------------------------ FAQ ------------------------------------- */
.faq__q { text-align: right; line-height: 1.6; font-weight: 600; }
.faq__a p { line-height: 1.95; }

/* ------------------------------ Forms ----------------------------------- */
.contact-info .ci-item h4,
.footer__col h4 { text-transform: none; letter-spacing: 0; font-weight: 500; }
.field select {
  padding-right: 16px;
  padding-left: 46px;
  background-position: left 16px center;
}
.field input[dir="ltr"] { text-align: left; }
.form__note { line-height: 1.8; }

/* ------------------------ Scroll progress bar --------------------------- */
.scroll-progress {
  transform-origin: right center;
  background: linear-gradient(270deg, rgba(242,240,234,.4), var(--text));
}

/* ------------------------------ Footer ---------------------------------- */
.footer__brand p { max-width: 32ch; line-height: 1.9; }
.footer__col a { line-height: 1.9; }