/* ==========================================================================
   FLC — FaraSync landing page (v3.17.0)
   Art-directed product page. Scoped under .fsl; inherits the site font
   stack (Vazirmatn) and dark theme tokens from fl-site.css.
   ========================================================================== */

.fsl {
        --fsl-bg: #060b18;
        --fsl-panel: rgba(13, 20, 40, .66);
        --fsl-line: rgba(124, 178, 255, .16);
        --fsl-a1: #4c8dff;
        --fsl-a2: #22d3ee;
        --fsl-a3: #8b7cf6;
        --fsl-text: #eaf1ff;
        --fsl-dim: #9fb0cc;
        background: var(--fsl-bg);
        color: var(--fsl-text);
        overflow: clip;
}

/* v3.18.0 — the page background is never plain: a slow aurora field
   + a drifting star dust grid live under the whole landing. Both are
   compositor-only loops (transform/opacity), disabled on mobile. */
.fsl::before {
        content: "";
        position: fixed;
        inset: -20%;
        z-index: 0;
        pointer-events: none;
        background:
                radial-gradient(46% 34% at 78% 12%, rgba(76, 141, 255, .16), transparent 70%),
                radial-gradient(40% 30% at 16% 42%, rgba(139, 124, 246, .13), transparent 70%),
                radial-gradient(44% 32% at 58% 86%, rgba(34, 211, 238, .1), transparent 72%);
        animation: fsl-aurora 26s ease-in-out infinite alternate;
}
.fsl::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-image:
                radial-gradient(1.2px 1.2px at 22% 31%, rgba(234, 241, 255, .32), transparent 55%),
                radial-gradient(1.1px 1.1px at 74% 18%, rgba(234, 241, 255, .26), transparent 55%),
                radial-gradient(1.3px 1.3px at 48% 62%, rgba(124, 178, 255, .3), transparent 55%),
                radial-gradient(1px 1px at 88% 74%, rgba(234, 241, 255, .22), transparent 55%),
                radial-gradient(1.1px 1.1px at 11% 84%, rgba(139, 124, 246, .28), transparent 55%),
                radial-gradient(1px 1px at 63% 8%, rgba(234, 241, 255, .2), transparent 55%);
        animation: fsl-dust 60s linear infinite;
}
@keyframes fsl-aurora {
        0%   { transform: translate3d(0, 0, 0) scale(1); opacity: .85; }
        50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); opacity: 1; }
        100% { transform: translate3d(-2%, 2%, 0) scale(1.02); opacity: .9; }
}
@keyframes fsl-dust {
        from { transform: translate3d(0, 0, 0); }
        to   { transform: translate3d(-160px, -320px, 0); }
}
/* keep real content above the ambient layers. NOTE: no z-index here —
   a stacking context per section would bury the live editor's
   straddling tools (fl-live-add pokes 16px below its section). The
   pseudo layers are pointer-events:none; tree order keeps sections
   above the aurora, and the dust overlay is intended to sit on top. */
.fsl > section, .fsl > div { position: relative; }

.fsl-container {
        width: min(1600px, calc(100% - 48px));
        margin-inline: auto;
}

.fsl-grad {
        background: linear-gradient(94deg, var(--fsl-a1), var(--fsl-a2) 52%, var(--fsl-a3));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
}

/* ------------------------------------------------------------ hero */

.fsl-hero {
        position: relative;
        padding: calc(var(--fl-header-h, 84px) + 46px) 0 30px;
        min-height: 92vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
}

.fsl-hero__bg { position: absolute; inset: 0; pointer-events: none; }

.fsl-orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(70px);
        opacity: .5;
}
.fsl-orb--1 { width: 520px; height: 520px; right: -140px; top: -120px; background: radial-gradient(circle, rgba(76,141,255,.5), transparent 65%); animation: fsl-orb 11s ease-in-out infinite; }
.fsl-orb--2 { width: 460px; height: 460px; left: -120px; top: 22%; background: radial-gradient(circle, rgba(139,124,246,.42), transparent 65%); animation: fsl-orb 13s ease-in-out -4s infinite reverse; }
.fsl-orb--3 { width: 420px; height: 420px; right: 26%; bottom: -160px; background: radial-gradient(circle, rgba(34,211,238,.3), transparent 65%); animation: fsl-orb 15s ease-in-out -8s infinite; }
@keyframes fsl-orb {
        0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
        50% { transform: translate3d(0, -46px, 0) scale(1.12); }
}

.fsl-grid {
        position: absolute; inset: 0;
        background-image:
                linear-gradient(rgba(124, 178, 255, .05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(124, 178, 255, .05) 1px, transparent 1px);
        background-size: 52px 52px;
        mask-image: radial-gradient(1100px 700px at 50% 38%, #000 25%, transparent 78%);
        -webkit-mask-image: radial-gradient(1100px 700px at 50% 38%, #000 25%, transparent 78%);
}

.fsl-hero__inner {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        align-items: center;
        gap: 34px;
}

.fsl-badge {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 8px 16px;
        border-radius: 999px;
        border: 1px solid var(--fsl-line);
        background: rgba(76, 141, 255, .08);
        color: #bcd2f7;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: .2px;
}
.fsl-badge img { border-radius: 6px; }

.fsl-title {
        margin: 22px 0 16px;
        font-size: clamp(30px, 4.4vw, 58px);
        font-weight: 800;
        line-height: 1.28;
        letter-spacing: -.5px;
}
.fsl-title em { font-style: normal; }

.fsl-lead {
        margin: 0 0 28px;
        max-width: 560px;
        color: var(--fsl-dim);
        font-size: clamp(14.5px, 1.4vw, 17.5px);
        line-height: 2;
}

.fsl-cta { display: flex; flex-wrap: wrap; gap: 14px; }

.fsl-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 14px 28px;
        border-radius: 14px;
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
        transition: transform .2s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease;
}
.fsl-btn--primary {
        color: #fff;
        background: linear-gradient(120deg, var(--fsl-a1), var(--fsl-a2));
        box-shadow: 0 10px 34px rgba(76, 141, 255, .35);
}
.fsl-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(76, 141, 255, .5); }
.fsl-btn--ghost {
        color: var(--fsl-text);
        border: 1px solid rgba(234, 241, 255, .22);
        background: rgba(255, 255, 255, .03);
}
.fsl-btn--ghost:hover { border-color: rgba(124, 178, 255, .55); background: rgba(76, 141, 255, .1); transform: translateY(-2px); }

.fsl-trust {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 8px 22px;
        margin: 30px 0 0;
        padding: 0;
        color: #8ea6c9;
        font-size: 13px;
}
.fsl-trust li { display: inline-flex; align-items: center; }
/* v3.60.0 — تیک سبز حذف شد؛ قانون .fsl-trust svg هم مرده بود و رفت. */

/* hero SVG */
.fsl-hero__art { position: relative; min-width: 0; }
.fsl-syncsvg { width: 100%; height: auto; display: block; overflow: visible; }

.fsl-syncsvg .fsl-node__card {
        fill: rgba(13, 20, 40, .85);
        stroke: rgba(124, 178, 255, .28);
        stroke-width: 1.2;
        transition: stroke .3s ease;
}
.fsl-syncsvg .fsl-node--src:hover .fsl-node__card { stroke: rgba(34, 211, 238, .75); }
.fsl-syncsvg .fsl-node--dst:hover .fsl-node__card { stroke: rgba(139, 124, 246, .75); }
.fsl-node__t { fill: #d6e4ff; font-size: 15px; font-weight: 600; }
.fsl-node__head { fill: #8ea6c9; font-size: 13.5px; font-weight: 700; }
.fsl-core__label { fill: #eaf1ff; font-size: 16.5px; font-weight: 800; }

.fsl-core__ring { transform-origin: 280px 230px; animation: fsl-spin 16s linear infinite; }
@keyframes fsl-spin { to { transform: rotate(360deg); } }

/* the real FaraSync S mark inside the core */
.fsl-core__logo {
        filter: drop-shadow(0 0 16px rgba(76, 141, 255, .6)) drop-shadow(0 0 34px rgba(76, 141, 255, .3));
}

.fsl-halo { transform-origin: 280px 230px; animation: fsl-halo 5.2s ease-in-out infinite; }
@keyframes fsl-halo {
        0%, 100% { transform: scale(.92); opacity: .75; }
        50% { transform: scale(1.08); opacity: 1; }
}

.fsl-dash { animation: fsl-dash 1.4s linear infinite; }
.fsl-dash--slow { animation-duration: 2.1s; }
.fsl-dash--rev { animation-direction: reverse; }
@keyframes fsl-dash { to { stroke-dashoffset: -32; } }

.fsl-spark { animation: fsl-spark 3.6s ease-in-out infinite; }
.fsl-spark--2 { animation-delay: -1.2s; }
.fsl-spark--3 { animation-delay: -2.3s; }
@keyframes fsl-spark {
        0%, 100% { opacity: .25; transform: translateY(0); }
        50% { opacity: 1; transform: translateY(-9px); }
}

/* v3.19.0 — the mouse-scroll cue is removed (user request): markup,
   styles and keyframes all gone. */

/* entrance rises (hero) */
.fsl-rise { opacity: 0; transform: translateY(26px); animation: fsl-rise .8s cubic-bezier(.16, .8, .3, 1) forwards; }
.fsl-rise[data-fsl-delay="1"] { animation-delay: .12s; }
.fsl-rise[data-fsl-delay="2"] { animation-delay: .24s; }
.fsl-rise[data-fsl-delay="3"] { animation-delay: .38s; }
.fsl-rise[data-fsl-delay="4"] { animation-delay: .52s; }
@keyframes fsl-rise { to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ marquee */

/* v3.20.3 — seamless belt: the track holds TWO identical groups and
   slides exactly one group width (50% of the track). Each group owns a
   trailing inline-end gap so the join between the copies keeps the same
   14px rhythm as inside the group → zero jump at the loop point (the
   old flat track ignored the flex gap and clipped 7px every cycle). */
.fsl-marquee {
        border-block: 1px solid var(--fsl-line);
        background: rgba(9, 14, 30, .8);
        padding: 15px 0;
        overflow: hidden;
}
.fsl-marquee__track {
        display: flex;
        width: max-content;
        will-change: transform;
        animation: fsl-marquee 30s linear infinite;
}
.fsl-marquee__group {
        display: flex;
        align-items: center;
        gap: 14px;
        padding-inline-end: 14px;
        flex: none;
}
.fsl-marquee:hover .fsl-marquee__track { animation-play-state: paused; }
@keyframes fsl-marquee { to { transform: translateX(50%); } }

.fsl-chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 18px;
        border-radius: 999px;
        border: 1px solid var(--fsl-line);
        background: rgba(76, 141, 255, .06);
        color: #c9d9f5;
        font-size: 13.5px;
        white-space: nowrap;
        flex: none;
}
/* v3.20.3 — per-feature icons (editable tiles, same registry as cards) */
.fsl-chip__ico {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        flex: none;
        color: var(--fsl-a2);
}
.fsl-chip__ico .fl-ico { width: 100%; height: 100%; }
.fsl-chip__ico img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }

/* Editor mode — freeze the belt into a static wrapped strip so every
   chip and its hover tools stay reachable; hide the loop mirror and
   the plain top-up clones (only editable chips remain visible). */
body.fl-editing .fsl-marquee { overflow: visible; padding-block: 18px; }
body.fl-editing .fsl-marquee__track { animation: none; width: auto; flex-wrap: wrap; row-gap: 12px; }
body.fl-editing .fsl-marquee__group { flex-wrap: wrap; }
body.fl-editing .fsl-marquee__group + .fsl-marquee__group { display: none; }
body.fl-editing .fsl-marquee__group:first-child .fsl-chip:not([data-fl-item]) { display: none; }
body.fl-editing .fsl-chip { position: relative; }

/* ------------------------------------------------------------ stats */

.fsl-stats { padding: 54px 0 10px; }
.fsl-stats__grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
}
.fsl-stat {
        position: relative;
        text-align: center;
        padding: 26px 12px 22px;
        border-radius: 20px;
        border: 1px solid var(--fsl-line);
        background: linear-gradient(170deg, rgba(76, 141, 255, .07), rgba(13, 20, 40, .5));
        overflow: hidden;
}
.fsl-stat::before {
        content: "";
        position: absolute; inset: 0;
        background: radial-gradient(320px 130px at 50% -30%, rgba(76,141,255,.28), transparent 70%);
}
.fsl-stat b {
        display: block;
        font-size: clamp(30px, 3.4vw, 44px);
        font-weight: 800;
        letter-spacing: -.5px;
        background: linear-gradient(120deg, var(--fsl-a1), var(--fsl-a2));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font-variant-numeric: tabular-nums;
}
.fsl-stat span { position: relative; color: var(--fsl-dim); font-size: 13.5px; }

/* ------------------------------------------------------------ sections */

.fsl-sec { padding: 88px 0 20px; }
.fsl-sec__head { max-width: 720px; margin: 0 auto 46px; text-align: center; }
.fsl-sec__head h2 {
        margin: 12px 0 14px;
        font-size: clamp(24px, 3vw, 38px);
        font-weight: 800;
        line-height: 1.4;
}
.fsl-sec__head p { margin: 0; color: var(--fsl-dim); line-height: 2; font-size: 15px; }

.fsl-kicker {
        display: inline-block;
        padding: 7px 16px;
        border-radius: 999px;
        border: 1px solid var(--fsl-line);
        background: rgba(139, 124, 246, .1);
        color: #cfc9f7;
        font-size: 12.5px;
        font-weight: 600;
}

/* ------------------------------------------------------------ showcase
   v3.18.0 — TWO big frameless screenshots (source / destination),
   strictly equal in size: same column width + same aspect-ratio box
   with object-fit cover. No browser chrome, no card border — just
   the image, a floating side tag and a caption under it. */

.fsl-duo {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 34px;
        align-items: stretch;
}

.fsl-shot {
        margin: 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
}

.fsl-shot__imgwrap {
        position: relative;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        border-radius: 14px;
        background: #0a1024;
        box-shadow: 0 30px 80px rgba(4, 8, 20, .55);
        transition: box-shadow .35s ease, transform .3s ease;
}
.fsl-shot:hover .fsl-shot__imgwrap {
        transform: translateY(-6px);
        box-shadow: 0 40px 96px rgba(4, 8, 20, .7), 0 0 0 1px rgba(124, 178, 255, .3);
}
.fsl-shot__imgwrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        display: block;
        transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}
.fsl-shot:hover .fsl-shot__imgwrap img { transform: scale(1.035); }

/* v3.19.0 — the floating «سمت مبدا / سمت مقصد» tag cards are removed
   (images stay untouched); the caption is centered under the image. */

.fsl-shot__cap {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        padding: 18px 6px 0;
        text-align: center;
}
.fsl-shot__cap strong { font-size: 16.5px; }
.fsl-shot__cap span { color: var(--fsl-dim); font-size: 13.5px; line-height: 2; }

/* ------------------------------------------------------------ features */

.fsl-fgrid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--fl-gap, 18px);
}
.fsl-fcard {
        position: relative;
        padding: 26px 22px 24px;
        border-radius: 20px;
        border: 1px solid var(--fsl-line);
        background: var(--fsl-panel);
        overflow: hidden;
        transition: transform .28s ease, border-color .3s ease;
}
.fsl-fcard:hover { transform: translateY(-5px); border-color: rgba(124, 178, 255, .42); }
/* v3.19.0 — icon + title share one row (icon right, title left in RTL) */
.fsl-fcard__head {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-bottom: 12px;
}
.fsl-fcard__head .fsl-fcard__ico { margin-bottom: 0; flex: 0 0 auto; }
.fsl-fcard .fsl-fcard__head h3 { margin: 0; flex: 1 1 auto; }
.fsl-fcard__ico {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 52px; height: 52px;
        border-radius: 15px;
        color: #9cc4ff;
        background: linear-gradient(140deg, rgba(76, 141, 255, .16), rgba(34, 211, 238, .08));
        border: 1px solid rgba(124, 178, 255, .26);
        margin-bottom: 16px;
}
.fsl-fcard h3 { margin: 0 0 9px; font-size: 16.5px; font-weight: 700; }
.fsl-fcard p { margin: 0; color: var(--fsl-dim); font-size: 13.5px; line-height: 2; }
.fsl-fcard__glow {
        position: absolute;
        inset: auto -30% -60% -30%;
        height: 70%;
        background: radial-gradient(closest-side, rgba(76, 141, 255, .22), transparent);
        opacity: 0;
        transition: opacity .35s ease;
        pointer-events: none;
}
.fsl-fcard:hover .fsl-fcard__glow { opacity: 1; }

/* ------------------------------------------------------------ mission
   v3.19.0 — the animated data-lane backdrop is gone (user request).
   The statement + cards stay, and under them rides the NEW
   representative-network diagram (.fsl-net): the «سایت مبدا» hub with
   the lone S mark above it, fanning dashed animated links down to 11
   «نماینده» circles on a big imaginary semicircle. */

.fsl-mission { position: relative; padding-block: 88px 34px; }
.fsl-mission__head { position: relative; max-width: 860px; }
.fsl-mission__head h2 { font-size: clamp(25px, 3.2vw, 42px); }
.fsl-mission__head p { font-size: 15.5px; }

.fsl-mgrid {
        position: relative;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--fl-gap, 18px);
}
.fsl-mcard {
        position: relative;
        padding: 28px 24px 26px;
        border-radius: 22px;
        border: 1px solid rgba(124, 178, 255, .24);
        background: linear-gradient(170deg, rgba(17, 26, 52, .92), rgba(8, 12, 26, .96));
        overflow: hidden;
        transition: transform .28s ease, border-color .3s ease;
}
.fsl-mcard::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .8), transparent);
        opacity: .7;
}
.fsl-mcard:hover { transform: translateY(-5px); border-color: rgba(124, 178, 255, .48); }
.fsl-mcard h3 { margin: 0 0 9px; font-size: 17px; font-weight: 700; }
.fsl-mcard p { margin: 0; color: var(--fsl-dim); font-size: 13.5px; line-height: 2.05; }

/* --- representative-network diagram (v3.19.0) --- */
.fsl-net { position: relative; margin-top: 44px; }
.fsl-netsvg { width: 100%; height: auto; display: block; overflow: visible; }
.fsl-net__cap {
        display: none;
        text-align: center;
        color: var(--fsl-dim);
        font-size: 12.5px;
        margin-top: 4px;
}
.fsl-net__logo {
        filter: drop-shadow(0 0 14px rgba(76, 141, 255, .55)) drop-shadow(0 0 30px rgba(76, 141, 255, .28));
}
.fsl-net__halo { transform-origin: 550px 118px; animation: fsl-halo 5.6s ease-in-out infinite; }
.fsl-net__ring { transform-origin: 550px 118px; animation: fsl-spin 14s linear infinite; }
.fsl-net__hub-t { fill: #eaf1ff; font-size: 19px; font-weight: 800; }
.fsl-net__rep-t { fill: #9fb0cc; font-size: 12.5px; font-weight: 700; }
.fsl-net__node {
        transform-box: fill-box;
        transform-origin: center;
        animation: fsl-netpulse 3.4s ease-in-out infinite;
}
@keyframes fsl-netpulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.1); }
}

/* ------------------------------------------------------------ how it works */

.fsl-steps {
        list-style: none;
        margin: 0 0 54px;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--fl-gap, 18px);
        counter-reset: fsl-step;
}
.fsl-step {
        position: relative;
        display: flex;
        gap: 14px;
        padding: 22px 18px;
        border-radius: 18px;
        border: 1px solid var(--fsl-line);
        background: var(--fsl-panel);
}
.fsl-step__num {
        flex: 0 0 auto;
        width: 46px; height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        font-size: 19px;
        font-weight: 800;
        color: #fff;
        background: linear-gradient(135deg, var(--fsl-a1), var(--fsl-a3));
        box-shadow: 0 8px 22px rgba(76, 141, 255, .35);
}
.fsl-step__body h3 { margin: 2px 0 7px; font-size: 15.5px; }
.fsl-step__body p { margin: 0; color: var(--fsl-dim); font-size: 13px; line-height: 1.95; }
/* v3.19.0 — the connector lines between the four step cards (and their
   travelling glow streak) are removed: markup + styles + keyframes. */

/* price engine visual — v3.51.0: five tracks (cell / dash / rule / dash / cell) */
.fsl-priceviz {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(44px, 72px) minmax(0, 1.3fr) minmax(44px, 72px) minmax(0, 1fr);
        align-items: center;
        gap: 16px;
        max-width: 900px;
        margin: 0 auto;
        padding: 26px 30px;
        border-radius: 22px;
        border: 1px solid var(--fsl-line);
        background: linear-gradient(165deg, rgba(76, 141, 255, .08), rgba(13, 20, 40, .6));
}
.fsl-priceviz__cell {
        text-align: center;
        padding: 18px 12px;
        border-radius: 16px;
        border: 1px dashed rgba(124, 178, 255, .3);
}
.fsl-priceviz__cell span { display: block; color: var(--fsl-dim); font-size: 12.5px; margin-bottom: 6px; }
.fsl-priceviz__cell b { font-size: clamp(17px, 1.8vw, 23px); font-weight: 800; font-variant-numeric: tabular-nums; }
.fsl-priceviz__cell--in b { color: #bcd2f7; }
.fsl-priceviz__cell--out b { color: transparent; background: linear-gradient(120deg, var(--fsl-a1), var(--fsl-a2)); -webkit-background-clip: text; background-clip: text; }
/* v3.51.0 — price-rule engine rebuilt: HTML rule card + direction-aware
   dashed strips. Tones: up = light glassy green, down = light glassy red;
   every color cross-fades over .6s so rule changes stay smooth. */
.fsl-priceviz__link { display: flex; align-items: center; justify-content: center; min-width: 0; }
.fsl-pvdash--h { width: 100%; height: 10px; display: block; overflow: visible; }
.fsl-pvdash--v { display: none; }
.fsl-priceviz stop { transition: stop-color .6s ease; }
.fsl-priceviz[data-fsl-tone="up"] .fsl-pv-sm { stop-color: #34d399; }
.fsl-priceviz[data-fsl-tone="down"] .fsl-pv-sm { stop-color: #fb7185; }
.fsl-priceviz__rule {
        --pv-ink: #a7f3d0;
        --pv-kind: #6ee7b7;
        --pv-edge: rgba(110, 231, 183, .42);
        --pv-glow: rgba(16, 185, 129, .18);
        --pv-tint: rgba(16, 185, 129, .13);
        position: relative;
        text-align: center;
        padding: 15px 16px 14px;
        border-radius: 16px;
        border: 1px solid var(--pv-edge);
        background-color: var(--pv-tint);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        box-shadow: 0 10px 34px var(--pv-glow), inset 0 1px 0 rgba(255, 255, 255, .09);
        transition: background-color .6s ease, border-color .6s ease, box-shadow .6s ease;
}
.fsl-priceviz[data-fsl-tone="down"] .fsl-priceviz__rule {
        --pv-ink: #fecdd3;
        --pv-kind: #fda4af;
        --pv-edge: rgba(253, 164, 175, .42);
        --pv-glow: rgba(244, 63, 94, .18);
        --pv-tint: rgba(244, 63, 94, .12);
}
.fsl-priceviz__rule-cap { display: block; font-size: 11px; font-weight: 700; letter-spacing: .3px; color: #8ea6c9; margin-bottom: 6px; }
.fsl-priceviz__rule-val { display: block; font-size: clamp(19px, 2vw, 24px); font-weight: 800; line-height: 1.35; color: var(--pv-ink); font-variant-numeric: tabular-nums; transition: color .6s ease; }
.fsl-priceviz__rule-round { display: block; margin-top: 5px; font-size: 11.5px; color: #8ea6c9; min-height: 1.25em; transition: opacity .45s ease; }
.fsl-priceviz__rule-kind { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; line-height: 1.8; color: var(--pv-kind); transition: color .6s ease; }
/* v3.52.0 — fixed-amount rules: the number owns the card. The empty
   «روند» row disappears, the value grows and sits vertically centered
   between the «قانون» caption and the type label; total card height is
   preserved via the flex column so the dashed strips never jump. */
.fsl-priceviz__rule.is-fixed { display: flex; flex-direction: column; }
.fsl-priceviz__rule.is-fixed .fsl-priceviz__rule-val { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; font-size: clamp(24px, 2.6vw, 31px); letter-spacing: .4px; }
.fsl-priceviz__rule.is-fixed .fsl-priceviz__rule-round { display: none; }
/* content swap: quick fade/slide while JS replaces the texts mid-flight */
@keyframes fsl-pv-swap { 0% { opacity: 1; transform: none; } 38% { opacity: 0; transform: translateY(7px) scale(.965); } 62% { opacity: 0; transform: translateY(-7px) scale(.965); } 100% { opacity: 1; transform: none; } }
.fsl-priceviz.is-swapping .fsl-priceviz__rule-val,
.fsl-priceviz.is-swapping .fsl-priceviz__rule-round,
.fsl-priceviz.is-swapping .fsl-priceviz__rule-kind { animation: fsl-pv-swap .62s cubic-bezier(.45, 0, .25, 1); }
/* destination card reacts: border + glow take the active tone while the
   number tweens (the b itself keeps its gradient text) */
.fsl-priceviz__cell--out { transition: border-color .6s ease, box-shadow .6s ease; }
.fsl-priceviz__cell--out b { transition: filter .6s ease; }
.fsl-priceviz[data-fsl-tone="up"] .fsl-priceviz__cell--out.is-hit { border-color: rgba(110, 231, 183, .5); box-shadow: 0 0 0 4px rgba(16, 185, 129, .1); }
.fsl-priceviz[data-fsl-tone="down"] .fsl-priceviz__cell--out.is-hit { border-color: rgba(253, 164, 175, .5); box-shadow: 0 0 0 4px rgba(244, 63, 94, .1); }
.fsl-priceviz[data-fsl-tone="up"] .fsl-priceviz__cell--out b { filter: drop-shadow(0 0 10px rgba(16, 185, 129, .28)); }
.fsl-priceviz[data-fsl-tone="down"] .fsl-priceviz__cell--out b { filter: drop-shadow(0 0 10px rgba(244, 63, 94, .28)); }

/* v3.20.2 — spacing presets on the farasync landing (editor «ارتفاع بخش») */
.fsl-sec.fl-pad--compact { padding-top: 48px; }
.fsl-sec.fl-pad--roomy { padding-top: 128px; }
.fsl-sec.fl-pad--huge { padding-top: 180px; }

/* v3.20.2 — unify icon size/stroke with the rest of the site (24-box,
   1.6 stroke via FLC_Render::icon, rendered 23px like .fl-card__icon). */
.fsl-fcard__ico .fl-ico { width: 23px; height: 23px; flex: 0 0 auto; }
.fsl-fcard__ico .fl-ico--brand { width: 26px; height: 26px; object-fit: contain; }

/* ------------------------------------------------------------ final CTA
   v3.19.0 — the boxed panel is gone (user request): the gradient that
   lived inside the box now belongs to the whole section (full-bleed);
   the content keeps its centered rhythm and the breathing orb. */

.fsl-cta-final {
        padding: 34px 0 90px;
        background:
                radial-gradient(700px 300px at 50% 0%, rgba(76, 141, 255, .22), transparent 70%),
                linear-gradient(170deg, rgba(17, 26, 52, .9), rgba(8, 12, 26, .96));
}
.fsl-cta-panel {
        position: relative;
        text-align: center;
        padding: 34px 30px 0;
}
.fsl-cta-panel__logo { margin-bottom: 18px; width: 180px; height: auto; }
.fsl-cta-panel h2 { margin: 0 0 14px; font-size: clamp(24px, 3vw, 40px); font-weight: 800; }
.fsl-cta-panel p { margin: 0 auto 30px; max-width: 560px; color: var(--fsl-dim); line-height: 2.1; font-size: 15px; }
.fsl-cta-panel .fsl-cta { justify-content: center; }
.fsl-cta-panel__orb {
        position: absolute;
        top: -70px;
        right: 50%;
        transform: translateX(50%);
        width: 340px; height: 340px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(34, 211, 238, .3), transparent 65%);
        filter: blur(30px);
        animation: fsl-halo 6s ease-in-out infinite;
        pointer-events: none;
}

/* ------------------------------------------------------------ reveals */

.fsl [data-fsl-reveal] {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity .7s cubic-bezier(.16, .8, .3, 1), transform .7s cubic-bezier(.16, .8, .3, 1);
}
.fsl [data-fsl-reveal].is-in { opacity: 1; transform: none; }
.fsl [data-fsl-reveal][data-fsl-delay="1"] { transition-delay: .1s; }
.fsl [data-fsl-reveal][data-fsl-delay="2"] { transition-delay: .2s; }
.fsl [data-fsl-reveal][data-fsl-delay="3"] { transition-delay: .3s; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1100px) {
        .fsl-hero__inner { grid-template-columns: 1fr; gap: 8px; }
        .fsl-hero__art { max-width: 640px; margin: 0 auto; }
        .fsl-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .fsl-duo { grid-template-columns: 1fr; gap: 44px; }
        .fsl-mgrid { grid-template-columns: 1fr; }
        .fsl-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .fsl-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
        .fsl-hero { min-height: auto; padding-bottom: 44px; }
        .fsl-hero__inner { text-align: right; }
        .fsl-sec { padding-top: 62px; }
        .fsl-fgrid, .fsl-steps, .fsl-stats__grid { grid-template-columns: 1fr; }
        .fsl-priceviz { grid-template-columns: 1fr; padding: 20px; }
        .fsl-mission { padding-block: 64px 28px; }
        /* the network diagram loses the tiny per-node labels on phones;
           a single caption carries the meaning instead */
        .fsl-net__rep-t { display: none; }
        .fsl-net__cap { display: block; }
        /* ambient loops stay desktop-only (site-wide performance contract) */
        .fsl::before, .fsl::after { animation: none; }
        .fsl::after { display: none; }
}

/* motion safety: the site-wide reduced-motion contract also applies here */
@media (prefers-reduced-motion: reduce) {
        .fsl *, .fsl *::before, .fsl *::after {
                animation-duration: .001s !important;
                animation-iteration-count: 1 !important;
                transition-duration: .001s !important;
        }
        .fsl-rise, .fsl [data-fsl-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ============================================================ v3.20.0 */

/* [v3.20.0] کارت‌های رسالت — عنوان سمت چپِ آیکون (هم‌سبک با بقیهٔ کارت‌ها) */
.fsl-mcard {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas: "ico title" "text text";
        column-gap: 13px;
        align-items: center;
}
.fsl-mcard .fsl-fcard__ico { grid-area: ico; margin-bottom: 0; }
.fsl-mcard h3 { grid-area: title; margin: 0 !important; }
.fsl-mcard p { grid-area: text; margin-top: 10px; }

/* [v3.20.0] ستون‌های قابل‌تنظیم از ویرایشگر (پیش‌فرض‌ها حفظ می‌شوند) */
.fsl-fgrid { grid-template-columns: repeat(var(--fl-cols, 4), minmax(0, 1fr)); }
.fsl-mgrid { grid-template-columns: repeat(var(--fl-cols, 3), minmax(0, 1fr)); }
.fsl-steps { grid-template-columns: repeat(var(--fl-cols, 4), minmax(0, 1fr)); }

/* [v3.20.0] افکت «جوهرِ زنده» — همان تغییر رنگ آرام عنوان‌های صفحهٔ خانه
   روی همهٔ تیترهای صفحهٔ فراسینک؛ بخش‌های رنگی (fsl-grad) استاتیک می‌مانند
   [v3.25.0] — عنوان هیرو: سلکتور قبلی «.fsl .fsl-hero .fsl-title» بود که
   هیچ‌وقت نمی‌گرفت چون کلاس fsl-hero هرگز روی سکشن رندر نمی‌شود؛ حالا خود
   h1 مستقیم گرفته می‌شود. نکتهٔ آبشاری: h1 کلاس fsl-rise هم دارد (opacity:0
   + animation فشرده) — اگر فقط fl-ink بگذاریم، انیمیشن rise حذف می‌شود و
   عنوان در opacity:0 گیر می‌کند؛ پس هر دو انیمیشن با هم اجرا می‌شوند. */
.fsl .fsl-sec__head h2,
.fsl .fsl-cta-panel h2 {
        background: linear-gradient(105deg,
                var(--fl-text, #e8eefb) 30%,
                rgba(var(--fl-accent-soft-rgb, 124, 178, 255), 0.95) 46%,
                rgba(var(--fl-accent2-rgb, 139, 124, 246), 0.85) 54%,
                var(--fl-text, #e8eefb) 70%);
        background-size: 240% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        animation: fl-ink 11s ease-in-out infinite alternate;
}

/* v3.48.0 — performance gate (same recipe as fl-site.css): the ink
   drift is main-thread paint and waits for html.fl-ready. The hero
   title runs rise+ink as a pair — only the SECOND slot (ink) pauses,
   the entrance rise stays live so the title still lands on time. */
.fsl .fsl-sec__head h2,
.fsl .fsl-cta-panel h2 {
        animation-play-state: paused;
}
.fsl .fsl-title {
        animation-play-state: running, paused;
}
html.fl-ready .fsl .fsl-sec__head h2,
html.fl-ready .fsl .fsl-cta-panel h2 {
        animation-play-state: running;
}
html.fl-ready .fsl .fsl-title {
        animation-play-state: running, running;
}
.fsl .fsl-title {
        background: linear-gradient(105deg,
                var(--fl-text, #e8eefb) 30%,
                rgba(var(--fl-accent-soft-rgb, 124, 178, 255), 0.95) 46%,
                rgba(var(--fl-accent2-rgb, 139, 124, 246), 0.85) 54%,
                var(--fl-text, #e8eefb) 70%);
        background-size: 240% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        /* rise (entrance, fills forwards) + ink (colour drift) together */
        animation:
                fsl-rise .8s cubic-bezier(.16, .8, .3, 1) forwards,
                fl-ink 11s ease-in-out infinite alternate;
        /* title carries data-fsl-delay="1" — rise staggers, ink starts now */
        animation-delay: .12s, 0s;
}
.fsl .fsl-sec__head h2,
.fsl .fsl-cta-panel h2,
.fsl .fsl-title {
        -webkit-text-fill-color: transparent;
        color: transparent;
}
.fsl .fsl-sec__head h2 .fsl-grad,
.fsl .fsl-cta-panel h2 .fsl-grad,
.fsl .fsl-title .fsl-grad {
        -webkit-text-fill-color: transparent;
        color: transparent;
}

/* [v3.51.0] موبایل — سه کارت روی هم می‌نشینند و خط‌چین‌ها عمودی می‌شوند؛
   جهت جریان همان مبدأ → قانون → مقصد است (بالا → پایین). */
@media (max-width: 760px) {
        .fsl-priceviz { grid-template-columns: 1fr; gap: 10px; }
        .fsl-priceviz__link { height: 56px; }
        .fsl-pvdash--h { display: none; }
        .fsl-pvdash--v { display: block; width: 10px; height: 56px; }
        .fsl-priceviz__rule { width: min(320px, 100%); margin: 0 auto; }
}

/* [v3.20.0] موبایل/تبلت — بعد از قواعد ستون متغیر، تا رسپانسیو قبلی حفظ شود */
@media (max-width: 1100px) {
        .fsl-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .fsl-mgrid { grid-template-columns: 1fr; }
        .fsl-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
        .fsl-fgrid, .fsl-steps { grid-template-columns: 1fr; }
}

/* ==========================================================================
   v3.55.0 — merged landing v4 (approved mockup)
   Five new sections (why / catalog+pricing / motive / faq / agent) +
   hero load-in + DISTINCT, REVERSIBLE scroll-driven entrances: every
   [data-anim] animation is tied to the element's position in the viewport
   (animation-timeline: view()), so scrolling up plays the very same
   animation backwards, automatically. The one-shot reveal system is
   neutralized below; the live editor (body.fl-editing) and
   prefers-reduced-motion always get the static, fully-visible page.
   ========================================================================== */

/* ---- neutralize the one-shot reveal system (replaced by the reversible
       scroll-driven animations below) ---- */
.fsl [data-fsl-reveal]{opacity:1;transform:none;transition:none}

/* ============ HERO — raised title + spacious full-width lead ============ */
.fsl-hero{padding-top:calc(var(--fl-header-h,84px) + 4px);min-height:88vh}
.fsl-hero__copy .fsl-title{margin:12px 0 30px}
.fsl-hero__copy .fsl-lead{max-width:none;margin:0 0 34px;padding-bottom:6px}

/* ---- hero parts load-in animation (once, on page load) ---- */
.fsl-hero__bg{opacity:0;animation:fsl-in-fade 1.2s .1s ease both}
.fsl-hero .fsl-badge{opacity:0;animation:fsl-in-drop .65s .12s cubic-bezier(.16,.8,.3,1) both}
.fsl-hero .fsl-title{opacity:0;animation:fsl-in-title .85s .24s cubic-bezier(.16,.8,.3,1) both,fl-ink 11s ease-in-out infinite alternate;animation-delay:.24s,0s}
.fsl-hero .fsl-lead{opacity:0;animation:fsl-in-rise .8s .42s cubic-bezier(.16,.8,.3,1) both}
.fsl-hero .fsl-cta{opacity:0;animation:fsl-in-rise .8s .56s cubic-bezier(.16,.8,.3,1) both}
.fsl-hero .fsl-trust{opacity:0;animation:fsl-in-fade .9s .7s ease both}
.fsl-hero .fsl-hero__art{opacity:0;animation:fsl-in-art .95s .36s cubic-bezier(.16,.8,.3,1) both}
.fsl-hero .fsl-marquee{opacity:0;animation:fsl-in-rise .8s .82s cubic-bezier(.16,.8,.3,1) both}
@keyframes fsl-in-title{from{opacity:0;transform:translateY(36px) scale(.97);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes fsl-in-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fsl-in-drop{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:none}}
@keyframes fsl-in-art{from{opacity:0;transform:translateX(-70px) scale(.94)}to{opacity:1;transform:none}}
@keyframes fsl-in-fade{from{opacity:0}to{opacity:1}}

/* ============ reversible scroll-driven entrances ============ */
@supports (animation-timeline: view()){
  body:not(.fl-editing) .fsl [data-anim]{
    animation-fill-mode:both;
    animation-timing-function:cubic-bezier(.22,.7,.3,1);
    animation-timeline:view();
    /* v3.57.0 — شروعِ دیرتر + پنجرهٔ متناسب با دید: قبلاً انیمیشن از «اولین
       پیکسلِ ورود» شروع می‌شد و تا entry 82% هم تمام بود؛ کاربر انیمیشن را
       نمی‌دید. حالا هر بخش وقتی حدود ۴۰٪ داخل دید نشست شروع می‌شود (کاربر
       در حال اسکرول است و حرکت را می‌بیند) و پایان به cover٪ بسته است تا
       پنجرهٔ حرکت برای عنصرهای کوچک و بزرگ یکنواخت و روان باشد. */
    animation-range:entry 42% cover 32%;
  }
  body:not(.fl-editing) .fsl [data-anim="rise"]{animation-name:fsl-a-rise;animation-range:entry 40% cover 32%}
  body:not(.fl-editing) .fsl [data-anim="pop"]{animation-name:fsl-a-pop;animation-range:entry 38% cover 30%}
  body:not(.fl-editing) .fsl [data-anim="flip"]{animation-name:fsl-a-flip;animation-range:entry 42% cover 30%}
  body:not(.fl-editing) .fsl [data-anim="drop"]{animation-name:fsl-a-drop;animation-range:entry 28% cover 30%}
  body:not(.fl-editing) .fsl [data-anim="blur"]{animation-name:fsl-a-blur;animation-range:entry 40% cover 34%}
  body:not(.fl-editing) .fsl [data-anim="zoom"]{animation-name:fsl-a-zoom;animation-range:entry 38% cover 32%}
  body:not(.fl-editing) .fsl [data-anim="from-right"]{animation-name:fsl-a-right;animation-range:entry 40% cover 32%}
  body:not(.fl-editing) .fsl [data-anim="from-left"]{animation-name:fsl-a-left;animation-range:entry 40% cover 32%}
  body:not(.fl-editing) .fsl [data-anim="cascade"]{animation-name:fsl-a-cascade;animation-range:entry 36% cover 30%}
  body:not(.fl-editing) .fsl [data-anim="slide-x"]{animation-name:fsl-a-slidex;animation-range:entry 40% cover 30%}
  body:not(.fl-editing) .fsl [data-anim="fade"]{animation-name:fsl-a-fade;animation-range:entry 30% cover 40%}
  /* subtle stagger for siblings inside a group */
  body:not(.fl-editing) .fsl [data-anim-group] > :nth-child(2){animation-range:entry 46% cover 34%}
  body:not(.fl-editing) .fsl [data-anim-group] > :nth-child(3){animation-range:entry 52% cover 36%}
  body:not(.fl-editing) .fsl [data-anim-group] > :nth-child(4){animation-range:entry 58% cover 38%}
  body:not(.fl-editing) .fsl [data-anim-group] > :nth-child(n+5){animation-range:entry 64% cover 40%}
}
@keyframes fsl-a-rise{from{opacity:0;transform:translateY(42px)}to{opacity:1;transform:none}}
@keyframes fsl-a-pop{0%{opacity:0;transform:translateY(48px) scale(.78)}78%{opacity:1;transform:translateY(-6px) scale(1.035)}100%{opacity:1;transform:none}}
@keyframes fsl-a-flip{from{opacity:0;transform:perspective(900px) rotateX(-30deg) translateY(44px)}to{opacity:1;transform:none}}
@keyframes fsl-a-drop{from{opacity:0;transform:translateY(-52px)}to{opacity:1;transform:none}}
@keyframes fsl-a-blur{from{opacity:0;transform:translateY(26px);filter:blur(9px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes fsl-a-zoom{from{opacity:0;transform:scale(.86) translateY(28px)}to{opacity:1;transform:none}}
@keyframes fsl-a-right{from{opacity:0;transform:translateX(54px)}to{opacity:1;transform:none}}
@keyframes fsl-a-left{from{opacity:0;transform:translateX(-54px)}to{opacity:1;transform:none}}
@keyframes fsl-a-cascade{from{opacity:0;transform:translateY(58px) rotate(1.6deg)}to{opacity:1;transform:none}}
@keyframes fsl-a-slidex{from{opacity:0;transform:translateX(-56px)}to{opacity:1;transform:none}}
@keyframes fsl-a-fade{from{opacity:0}to{opacity:1}}

/* ============ «وقتی شبکهٔ فروش بزرگ می‌شود» — problem cards ============ */
.fsl-pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--fl-gap,18px)}
.fsl-pcard{position:relative;padding:30px 24px 26px;border-radius:20px;border:1px solid var(--fsl-line);background:var(--fsl-panel);overflow:hidden;transition:transform .28s ease,border-color .3s ease}
.fsl-pcard:hover{transform:translateY(-5px);border-color:rgba(124,178,255,.42)}
.fsl-pcard__num{position:absolute;top:8px;left:18px;font-size:54px;font-weight:800;line-height:1.1;color:transparent;-webkit-text-stroke:1px rgba(124,178,255,.4);pointer-events:none}
.fsl-pcard h3{position:relative;margin:0 0 9px;font-size:17px;font-weight:700}
.fsl-pcard p{position:relative;margin:0;color:var(--fsl-dim);font-size:13.5px;line-height:2.05;text-align:justify}
.fsl-solution{display:flex;gap:16px;align-items:center;margin-top:30px;padding:20px 26px;border-radius:18px;border:1px dashed rgba(124,178,255,.4);background:linear-gradient(165deg,rgba(76,141,255,.09),rgba(13,20,40,.55))}
.fsl-solution__mark{flex:0 0 auto;width:46px;height:46px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--fsl-a1),var(--fsl-a3));box-shadow:0 8px 22px rgba(76,141,255,.35)}
.fsl-solution__mark svg{width:22px;height:22px}
.fsl-solution p{margin:0;color:var(--fsl-dim);line-height:2.05;font-size:14.5px;text-align:justify}
.fsl-solution strong{color:var(--fsl-text)}

/* ============ «از کاتالوگ تا قیمت فروش» + «قیمت‌گذاری نمایندگی» ============ */
.fsl-frow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:30px;align-items:center;margin-bottom:28px}
.fsl-frow--rev .fsl-frow__copy{order:2}
.fsl-frow--rev .fsl-frow__shot{order:1}
.fsl-frow__copy h3{margin:0 0 12px;font-size:clamp(20px,2.2vw,26px);font-weight:800;line-height:1.55}
.fsl-frow__copy p{margin:0 0 16px;color:var(--fsl-dim);line-height:2.05;font-size:14.5px;text-align:justify}
.fsl-frow__mini{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;border:1px solid var(--fsl-line);background:rgba(76,141,255,.07);color:#bcd2f7;font-size:13px}
.fsl-frow__mini svg{width:16px;height:16px;color:var(--fsl-a2)}
.fsl-frame{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--fsl-line);background:#0a1024;box-shadow:0 30px 80px rgba(4,8,20,.55);transition:transform .3s ease,box-shadow .35s ease,border-color .3s ease}
.fsl-frame:hover{transform:translateY(-6px);box-shadow:0 40px 96px rgba(4,8,20,.7),0 0 0 1px rgba(124,178,255,.3)}
.fsl-frame img{width:100%;height:auto;display:block}
.fsl-pricing{margin-top:56px;padding-top:52px;border-top:1px solid var(--fsl-line)}
.fsl-pricing__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:34px;align-items:center;margin-bottom:38px}
.fsl-pricing__title{margin:0 0 14px;font-size:clamp(22px,2.6vw,32px);font-weight:800;line-height:1.5}
.fsl-pricing__copy>p{margin:0 0 18px;color:var(--fsl-dim);line-height:2.05;font-size:14.5px;text-align:justify}
.fsl-checks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fsl-checks li{display:flex;gap:10px;align-items:flex-start;color:#cfe0fb;font-size:13.5px;line-height:1.9}
.fsl-checks svg{flex:0 0 auto;width:16px;height:16px;margin-top:5px;color:#34d399}

/* ============ «از انگیزه تا تسویه» ============ */
.fsl-motive{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center;margin-bottom:30px}
/* v3.57.0 — چیدمان پشته‌ای «از انگیزه تا تسویه»: اسکرین‌شات اول، وسط‌چین؛
   بلوک متن که قبلاً کنار تصویر بود، زیر اسکرین‌شات می‌نشیند (وسط‌چین). */
.fsl-motive--stack{display:flex;flex-direction:column;align-items:center;gap:24px}
.fsl-motive--stack .fsl-motive__frame{width:100%;max-width:880px;margin:0}
.fsl-motive--stack .fsl-motive__copy{max-width:780px;text-align:center}
.fsl-motive--stack .fsl-motive__copy h3{margin:0 0 12px}
.fsl-motive--stack .fsl-motive__copy p{text-align:center}
.fsl-motive__copy h3{margin:0 0 14px;font-size:clamp(20px,2.2vw,27px);font-weight:800;line-height:1.6}
.fsl-motive__copy>p{margin:0;color:var(--fsl-dim);line-height:2.15;font-size:14.5px;text-align:justify}
.fsl-motive__frame{overflow:hidden}
.fsl-motive__cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;padding:14px 18px;border-top:1px solid var(--fsl-line);background:rgba(9,14,30,.6)}
.fsl-motive__cap strong{font-size:13.5px}
.fsl-motive__cap span{color:var(--fsl-dim);font-size:12.5px}

/* Gutenberg-replicable cards (v2③) — the same DOM the block editor
   produces for Group blocks, so more cards can be added with the same style */
.fsl-ggrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--fl-gap,18px)}
.wp-block-columns.fsl-ggrid{margin:0}
.fsl-gcol{min-width:0}
.wp-block-group.fsl-gcard{position:relative;padding:28px 24px 26px;border-radius:20px;border:1px solid var(--fsl-line);background:var(--fsl-panel);overflow:hidden;box-sizing:border-box;transition:transform .28s ease,border-color .3s ease}
.wp-block-group.fsl-gcard:hover{transform:translateY(-5px);border-color:rgba(124,178,255,.42)}
.wp-block-group.fsl-gcard::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,rgba(34,211,238,.8),transparent);opacity:.7}
.fsl-gcard__kicker{display:inline-block;margin:0 0 12px;padding:6px 14px;border-radius:999px;border:1px solid rgba(139,124,246,.35);background:rgba(139,124,246,.12);color:#cfc9f7;font-size:12px;font-weight:700}
.fsl-gcard__head{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.fsl-gcard__head .fsl-fcard__ico{margin-bottom:0;flex:0 0 auto}
.fsl-gcard__head h3{margin:0;flex:1 1 auto;font-size:17px;font-weight:700}
.fsl-gcard p{margin:0 0 10px;color:var(--fsl-dim);font-size:13.5px;line-height:2.05;text-align:justify}
.fsl-gcard p:last-child{margin-bottom:0}

/* ============ FAQ (native details accordion) ============ */
.fsl-faq{max-width:920px;margin:0 auto;display:grid;gap:12px}
.fsl-faq__item{border:1px solid var(--fsl-line);border-radius:16px;background:var(--fsl-panel);overflow:hidden;transition:border-color .3s ease}
.fsl-faq__item[open]{border-color:rgba(124,178,255,.48)}
.fsl-faq__item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 20px;font-size:15px;font-weight:700;color:var(--fsl-text);transition:background .25s ease}
.fsl-faq__item summary:hover{background:rgba(76,141,255,.05)}
.fsl-faq__item summary::-webkit-details-marker{display:none}
.fsl-faq__item .fsl-faq__plus{flex:0 0 auto;width:30px;height:30px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--fsl-line);background:rgba(76,141,255,.1);color:#9cc4ff;transition:transform .3s ease,background .3s ease,color .3s ease}
.fsl-faq__plus svg{width:15px;height:15px}
.fsl-faq__item[open] .fsl-faq__plus{transform:rotate(45deg);background:linear-gradient(120deg,var(--fsl-a1),var(--fsl-a2));color:#fff;border-color:transparent}
.fsl-faq__q{flex:1 1 auto}
.fsl-faq__item>p{margin:0;padding:0 64px 20px 22px;color:var(--fsl-dim);font-size:13.8px;line-height:2.05;text-align:justify}
.fsl-faq__item[open]>p{animation:fsl-a-rise .5s cubic-bezier(.16,.8,.3,1) both}

/* ============ «فروشگاه‌هایتان را یک‌جا» — 2 columns (v2⑤ + v3 + v4①) ============ */
.fsl [data-fl-sec="fsl-agent"]{padding:34px 0 90px;background:radial-gradient(700px 300px at 50% 0%,rgba(76,141,255,.22),transparent 70%),linear-gradient(170deg,rgba(17,26,52,.9),rgba(8,12,26,.96))}
.fsl-cta2{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.fsl-cta2__card{position:relative;text-align:center;padding:38px 30px 32px;border-radius:24px;border:1px solid var(--fsl-line);background:linear-gradient(170deg,rgba(17,26,52,.92),rgba(8,12,26,.96));overflow:hidden;transition:transform .28s ease,border-color .3s ease}
.fsl-cta2__card:hover{transform:translateY(-6px);border-color:rgba(124,178,255,.48)}
.fsl-cta2__card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,rgba(34,211,238,.85),transparent);opacity:.75}
.fsl-cta2__card .fsl-cta-panel__orb{top:-60px}
.fsl-cta2__logo{display:block;margin:0 auto;height:74px;width:auto;max-width:min(340px,80%);object-fit:contain}
.fsl-cta2__logo--farasync{height:56px}
.fsl-cta2__card h3{position:relative;margin:16px 0 12px;font-size:20px;font-weight:800}
.fsl-cta2__desc{position:relative;margin:0 auto 24px;max-width:430px;color:var(--fsl-dim);font-size:14px;line-height:2.15;text-align:justify;text-align-last:center}
.fsl-btn--block{width:100%;justify-content:center}
.fsl-cta2__targets{position:relative;display:grid;gap:12px;text-align:right}
.fsl-cta2__target{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;border:1px dashed rgba(124,178,255,.38);background:rgba(76,141,255,.06)}
.fsl-cta2__target .fsl-fcard__ico{margin-bottom:0;width:46px;height:46px;border-radius:13px}
.fsl-cta2__target strong{display:block;font-size:14.5px}
.fsl-cta2__target span{display:block;color:var(--fsl-dim);font-size:12.5px;margin-top:2px;line-height:1.9}

/* v3.57.0 — «یک میزکار، دو دنیا» تب‌دار ============
   همان سبک سکشن «یک شبکه، دو دید مدیریتی» HTML کاربر: نوار تب بالای
   دو پیشخوان تمام‌عرض، هر پیشخوان با نوار کپشن پایین خودش.
   سلکتورها با پیشوند button نوشته شده‌اند تا از ریست قرمز Hello
   Elementor (ویژگی 0,1,0 که دیرتر لود می‌شود) قوی‌تر بمانند. */
.fsl-dashtabs{display:flex;width:max-content;max-width:100%;margin:0 auto 24px;border:1px solid var(--fsl-line);background:rgba(9,14,30,.55);border-radius:13px;padding:5px;gap:4px}
button.fsl-dashtabs__btn{border:0;background:transparent;padding:10px 24px;border-radius:9px;color:var(--fsl-dim);font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;transition:background .25s ease,color .25s ease,box-shadow .25s ease}
button.fsl-dashtabs__btn:hover{color:var(--fsl-text)}
button.fsl-dashtabs__btn.is-active{background:linear-gradient(135deg,rgba(124,178,255,.22),rgba(139,124,246,.22));color:#fff;box-shadow:0 6px 18px rgba(4,8,20,.45),inset 0 0 0 1px rgba(124,178,255,.4)}
.fsl-dashpanel{margin:0 auto;max-width:1050px;border:1px solid var(--fsl-line);border-radius:18px;background:#0a1024;box-shadow:0 30px 80px rgba(4,8,20,.55);overflow:hidden}
.fsl-dashpanel[hidden]{display:none}
.fsl-dashpanel__imgwrap{background:#0a1024;line-height:0}
.fsl-dashpanel__imgwrap img{width:100%;height:auto;display:block}
.fsl-dashpanel__cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;padding:14px 20px;border-top:1px solid var(--fsl-line);background:rgba(9,14,30,.6)}
.fsl-dashpanel__cap strong{font-size:13.5px}
.fsl-dashpanel__cap span{color:var(--fsl-dim);font-size:12.5px}
@media (max-width:640px){
  /* v3.61.0 — فیکس موبایل تب‌های پیشخوان: قاعدهٔ nowrap دکمه‌های تمِ قالب
     مانع جمع‌شدن دکمه‌ها بود و دکمهٔ دوم از کادر بیرون می‌زد؛
     specificity بالا (button.fsl-dashtabs__btn) + white-space:normal +
     min-width:0 ⇒ هر دو دکمه نصف‌ونصف داخل کادر و متن تا می‌خورد. */
  .fsl-dashtabs{width:100%;max-width:100%}
  button.fsl-dashtabs__btn{flex:1 1 0%;min-width:0;white-space:normal;font-size:12px;padding:9px 8px;line-height:1.4;text-align:center}
  button.fsl-dashtabs__btn span{display:block}
}

/* ============ responsive ============ */
@media (max-width:1100px){
  .fsl-pgrid{grid-template-columns:1fr}
  .fsl-frow,.fsl-frow--rev,.fsl-pricing__grid,.fsl-motive{grid-template-columns:1fr}
  .fsl-frow--rev .fsl-frow__copy{order:1}
  .fsl-frow--rev .fsl-frow__shot{order:2}
  .fsl-cta2{grid-template-columns:1fr}
}
@media (max-width:760px){
  .fsl-ggrid{grid-template-columns:1fr}
  /* v3.60.0 — «راه‌حل» در موبایل/تبلت هم کنار آیکون می‌ماند (ستون نشود):
     فقط نشان کوچک‌تر می‌شود و متن کنارش می‌پیچد. */
  .fsl-solution{flex-direction:row;align-items:center;gap:13px}
  .fsl-solution__mark{width:40px;height:40px;border-radius:12px}
  .fsl-solution__mark svg{width:19px;height:19px}
  .fsl-solution p{font-size:13.5px;line-height:1.95}
  .fsl-cta2__card{padding:30px 22px 26px}
  .fsl-faq__item>p{padding-right:22px}
}

/* ============ editor + reduced-motion safety: static, fully visible ============ */
body.fl-editing .fsl [data-anim],
body.fl-editing .fsl-hero__bg,
body.fl-editing .fsl-hero .fsl-badge,
body.fl-editing .fsl-hero .fsl-title,
body.fl-editing .fsl-hero .fsl-lead,
body.fl-editing .fsl-hero .fsl-cta,
body.fl-editing .fsl-hero .fsl-trust,
body.fl-editing .fsl-hero .fsl-hero__art,
body.fl-editing .fsl-hero .fsl-marquee{opacity:1!important;animation:none!important;transform:none!important;filter:none!important}
@media (prefers-reduced-motion:reduce){
  .fsl [data-anim]{animation:none!important}
  .fsl-hero__bg,.fsl-hero .fsl-badge,.fsl-hero .fsl-title,.fsl-hero .fsl-lead,.fsl-hero .fsl-cta,.fsl-hero .fsl-trust,.fsl-hero .fsl-hero__art,.fsl-hero .fsl-marquee{opacity:1!important;animation:none!important;transform:none!important;filter:none!important}
}

/* ==========================================================================
   v3.56.0 — v5 polish (user round 5)
   ① every display title = the «همهٔ قابلیت‌هایی…» reference style
     (Vazirmatn 800, clamp(24px,3vw,38px), lh 1.4 + the shared fl-ink
     shimmer) — the hero keeps its larger size
   ② hero title block lifted, lead travels with it
   ③ both «فروشگاه‌هایتان را یک‌جا» logos rendered at the SAME height
   ④ problem-card titles move LEFT of the icons (one row head)
   ⑤ card titles stop looking thin: 800 weight + Persian-friendly leading
   ========================================================================== */

/* ---- ① unified display titles + the ink shimmer they were missing ---- */
.fsl .fsl-mission__head h2{font-size:clamp(24px,3vw,38px);line-height:1.4}
.fsl .fsl-frow__copy h3,
.fsl .fsl-pricing__title,
.fsl .fsl-motive__copy h3,
.fsl .fsl-cta2__card h3{
  font-size:clamp(24px,3vw,38px);
  line-height:1.4;
  font-weight:800;
  background:linear-gradient(105deg,
    var(--fl-text,#e8eefb) 30%,
    rgba(var(--fl-accent-soft-rgb,124,178,255),.95) 46%,
    rgba(var(--fl-accent2-rgb,139,124,246),.85) 54%,
    var(--fl-text,#e8eefb) 70%);
  background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:fl-ink 11s ease-in-out infinite alternate;
  animation-play-state:paused;
}
html.fl-ready .fsl .fsl-frow__copy h3,
html.fl-ready .fsl .fsl-pricing__title,
html.fl-ready .fsl .fsl-motive__copy h3,
html.fl-ready .fsl .fsl-cta2__card h3{animation-play-state:running}
.fsl .fsl-frow__copy h3 .fsl-grad,
.fsl .fsl-pricing__title .fsl-grad{-webkit-text-fill-color:transparent;color:transparent}

/* ---- ② hero copy lifted (title + lead + everything below, as one block) ---- */
@media (min-width:1101px){
  .fsl-hero__copy{transform:translateY(-34px)}
}

/* ---- ③ agent-card logos: same height, bigger presence ---- */
.fsl-cta2__logo{height:96px;max-width:min(460px,90%)}
.fsl-cta2__logo--farasync{height:96px}

/* ---- ④ problem cards: icon + title share the head row (icon right,
        title left in RTL), ghost numeral keeps floating ---- */
.fsl-pcard{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ico title" "text text";column-gap:13px;align-items:center}
.fsl-pcard .fsl-fcard__ico{grid-area:ico;margin-bottom:0}
.fsl-pcard h3{grid-area:title;margin:0}
.fsl-pcard p{grid-area:text;margin-top:10px}

/* ---- ⑤ card titles: heavier + roomier Persian leading ---- */
.fsl-fcard h3,.fsl-mcard h3,.fsl-pcard h3,.fsl-gcard__head h3{font-size:17px;font-weight:800;line-height:1.55}
.fsl-step__body h3{font-size:16px;font-weight:800;line-height:1.55}
.fsl-faq__item summary{font-weight:800}

/* the retired kicker pill: keep the editor safe if legacy data lingers */
.fsl-gcard__kicker{display:none}

/* v3.56.0 — HERO LOAD-IN REVIVAL: the v3.55.0 rules above key off the
   exact class .fsl-hero, which the renderer NEVER emits on the section
   (only data-fl-sec="fsl-hero") — the approved v4④ load-in silently
   never ran on the live page. Same rules, corrected key: layout is
   untouched (the dead 88vh/padding rules stay dead on purpose), only
   the one-shot entrance animations are revived. */
[data-fl-sec="fsl-hero"] .fsl-badge{opacity:0;animation:fsl-in-drop .65s .12s cubic-bezier(.16,.8,.3,1) both}
[data-fl-sec="fsl-hero"] .fsl-title{opacity:0;animation:fsl-in-title .85s .24s cubic-bezier(.16,.8,.3,1) both,fl-ink 11s ease-in-out infinite alternate;animation-delay:.24s,0s}
[data-fl-sec="fsl-hero"] .fsl-lead{opacity:0;animation:fsl-in-rise .8s .42s cubic-bezier(.16,.8,.3,1) both}
[data-fl-sec="fsl-hero"] .fsl-cta{opacity:0;animation:fsl-in-rise .8s .56s cubic-bezier(.16,.8,.3,1) both}
[data-fl-sec="fsl-hero"] .fsl-trust{opacity:0;animation:fsl-in-fade .9s .7s ease both}
[data-fl-sec="fsl-hero"] .fsl-hero__art{opacity:0;animation:fsl-in-art .95s .36s cubic-bezier(.16,.8,.3,1) both}
[data-fl-sec="fsl-hero"] .fsl-marquee{opacity:0;animation:fsl-in-rise .8s .82s cubic-bezier(.16,.8,.3,1) both}
body.fl-editing [data-fl-sec="fsl-hero"] .fsl-badge,
body.fl-editing [data-fl-sec="fsl-hero"] .fsl-title,
body.fl-editing [data-fl-sec="fsl-hero"] .fsl-lead,
body.fl-editing [data-fl-sec="fsl-hero"] .fsl-cta,
body.fl-editing [data-fl-sec="fsl-hero"] .fsl-trust,
body.fl-editing [data-fl-sec="fsl-hero"] .fsl-hero__art,
body.fl-editing [data-fl-sec="fsl-hero"] .fsl-marquee{opacity:1!important;animation:none!important;transform:none!important;filter:none!important}
@media (prefers-reduced-motion:reduce){
  [data-fl-sec="fsl-hero"] .fsl-badge,[data-fl-sec="fsl-hero"] .fsl-title,[data-fl-sec="fsl-hero"] .fsl-lead,[data-fl-sec="fsl-hero"] .fsl-cta,[data-fl-sec="fsl-hero"] .fsl-trust,[data-fl-sec="fsl-hero"] .fsl-hero__art,[data-fl-sec="fsl-hero"] .fsl-marquee{opacity:1!important;animation:none!important;transform:none!important;filter:none!important}
}


/* ================================================================
   [v3.57.2] ویدیو معرفی فراسینک — فایل واقعی MP4 با پلیر بومی مرورگر
   v3.57.2: بدون کیکر و بدون باکس/پنل (فقط عنوان + قاب + راهنما)،
   قاب ویدیو کوچک‌تر و وسط‌چین؛ سکشن قبل از «یک میزکار، دو دنیا» و
   دکمهٔ گرادیانی بعد از لیست trust در هیرو. قواعد با #fl-farasync
   اسکوپ می‌شوند تا از ریست‌های تم (hello-elementor) قوی‌تر باشند.
   ================================================================ */

/* دکمهٔ هیرو — همان ظاهر دکمهٔ تأییدشدهٔ گرادیانی با حلقهٔ پالس */
.fsl-btn--video {
        color: #04121a;
        background: linear-gradient(135deg, var(--fsl-a2, #22d3ee), var(--fsl-a3, #8b7cf6));
        box-shadow: 0 14px 40px rgba(34, 211, 238, .28);
}
.fsl-btn--video:hover { transform: translateY(-2px); box-shadow: 0 18px 52px rgba(34, 211, 238, .4); }
.fsl-btn--video:active { transform: scale(.98); }
.fsl-btn__pl {
        width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px;
        background: rgba(4, 18, 26, .22);
        display: inline-flex; align-items: center; justify-content: center;
        position: relative;
}
.fsl-btn__pl svg { fill: #04121a; margin-inline-start: -1px; }
.fsl-btn__pl::after {
        content: ''; position: absolute; inset: -6px; border-radius: 50%;
        border: 2px solid rgba(4, 18, 26, .35);
        animation: fsl-ring 1.8s ease-out infinite;
}
@keyframes fsl-ring { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }

/* ردیف دکمهٔ ویدیو بعد از لیست trust — v3.60.0 حذف شد: دکمهٔ ویدیو حالا
   در جایگاه دکمهٔ اول کنار «ویژگی‌های کلیدی» است و بلاک جداافتادهٔ
   fsl-cta--video دیگر رندر نمی‌شود. استایل خود دکمه (.fsl-btn--video و
   .fsl-btn__pl) دست‌نخورده ماند و در جایگاه جدید همان ظاهر را می‌دهد. */

/* سکشن ویدیو — v3.59.0: دوگان‌مقیاس. سکشن‌های ذخیره‌شدهٔ جدید کلاس
   .fsv-sec ندارند و با data-fl-type="fs_video" مقاس می‌شوند؛ همان ظاهر
   مصوب روی لندینگ حفظ شده است. */
#fl-farasync .fsv-sec,
#fl-farasync [data-fl-type="fs_video"],
[data-fl-type="fs_video"] { padding: 8px 0 64px; scroll-margin-top: 96px; }
#fl-farasync .fsv-head,
[data-fl-type="fs_video"] .fsv-head { text-align: center; }
#fl-farasync .fsv-title,
[data-fl-type="fs_video"] .fsv-title { font-size: 26px; font-weight: 800; line-height: 1.6; margin: 0; color: var(--fsl-text, #eaf1ff); }
#fl-farasync .fsv-title em,
[data-fl-type="fs_video"] .fsv-title em {
        font-style: normal;
        background: linear-gradient(120deg, var(--fsl-a2, #22d3ee), var(--fsl-a3, #8b7cf6));
        -webkit-background-clip: text; background-clip: text; color: transparent;
}
#fl-farasync .fsv-frame,
[data-fl-type="fs_video"] .fsv-frame {
        position: relative; margin: 26px auto 0; max-width: 960px; border-radius: 20px; overflow: hidden;
        border: 1px solid rgba(34, 211, 238, .28); background: #0a1222;
        box-shadow: 0 18px 46px rgba(2, 8, 20, .5);
}
#fl-farasync .fsv-el,
[data-fl-type="fs_video"] .fsv-el { display: block; width: 100%; height: auto; max-height: 74vh; object-fit: contain; background: #050a14; }

#fl-farasync .fsv-hint,
[data-fl-type="fs_video"] .fsv-hint {
        margin: 14px 0 0; text-align: center;
        font-size: 12.5px; color: var(--fsl-dim, #97a3bc);
}
#fl-farasync .fsv-hint kbd,
[data-fl-type="fs_video"] .fsv-hint kbd {
        font-family: inherit; font-size: 11px; font-weight: 800; color: #c9f5ff;
        border: 1px solid rgba(34, 211, 238, .35); background: rgba(34, 211, 238, .08);
        border-radius: 6px; padding: 2px 8px; margin: 0 2px; display: inline-block; line-height: 1.6;
}
@media (max-width: 860px) {
        #fl-farasync .fsv-title, [data-fl-type="fs_video"] .fsv-title { font-size: 21px; }
        #fl-farasync .fsv-frame, [data-fl-type="fs_video"] .fsv-frame { border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
        .fsl-btn__pl::after { animation: none; }
}

/* ================================================================
   [v3.60.0] برندلاک هیرو + دکمه‌های هم‌ارتفاع
   ① لوگوی S فراسینک (با خط‌های سرعت) + واژه‌نویسی «فراسینک» درشت،
     بالای تیتر هیرو؛ هالهٔ نورانی پشت لوگو آرام می‌تپد و ورودش پاپِ
     نرم است. فقط opacity/transform انیمیت می‌شود (compositor-friendly).
   ② دکمهٔ اول هیرو (ویدیو معرفی فراسینک) و «ویژگی‌های کلیدی» همیشه
     هم‌ارتفاع‌اند (min-height یکسان، کنار هم و روی موبایل هم).
   ================================================================ */

.fsl-brandlk{position:relative;display:inline-flex;align-items:center;gap:18px;margin:34px 0 24px;isolation:isolate}
/* صفحهٔ هدر ثابت است (≈۷۵px) و ستون متن هیرو بالا آمده؛ این حاشیه برندلاک
   را از زیر هدر بیرون می‌آورد (دسکتاپ با لیفتِ ۳۴px- جبران می‌شود). */
@media (min-width:1101px){.fsl-brandlk{margin-top:68px}}
/* v3.61.0 — برندلاک ۲برابر شد (لوگو ۱۶۰×۱۲۴ و «فراسینک» ۲.۵برابر) و
   فقط در موبایل لوگو + متن وسط‌چین است (دسکتاپ مثل قبل، ابتدای راست). */
.fsl-brandlk__glow{position:absolute;inset-inline-start:-42px;top:50%;width:238px;height:238px;margin-top:-119px;border-radius:50%;background:radial-gradient(circle,rgba(76,141,255,.42),rgba(34,211,238,.16) 45%,transparent 70%);filter:blur(8px);z-index:-1;animation:fsl-brand-glow 3s ease-in-out infinite alternate;pointer-events:none}
.fsl-brandlk__mark{width:160px;height:124px;display:block;filter:drop-shadow(0 14px 32px rgba(34,120,255,.38))}
.fsl-brandlk__name{font-size:clamp(64px,6vw,85px);font-weight:800;line-height:1.18;background:linear-gradient(120deg,#f4f8ff 20%,#8fc3ff 50%,#b9a8ff 68%,#f4f8ff 92%);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:fl-ink 11s ease-in-out infinite alternate}
@media (max-width:640px){
  [data-fl-sec="fsl-hero"] .fsl-brandlk{width:100%;justify-content:center;gap:14px;text-align:center}
  .fsl-brandlk__mark{width:120px;height:93px}
  .fsl-brandlk__name{font-size:clamp(44px,13vw,64px)}
}
@keyframes fsl-brand-glow{from{opacity:.45;transform:scale(.94)}to{opacity:.9;transform:scale(1.08)}}
[data-fl-sec="fsl-hero"] .fsl-brandlk{opacity:0;animation:fsl-in-brand .7s .08s cubic-bezier(.16,.8,.3,1) both}
@keyframes fsl-in-brand{from{opacity:0;transform:translateY(-18px) scale(.9)}to{opacity:1;transform:none}}

/* دکمه‌های هیرو هم‌ارتفاع (دسکتاپ کنار هم، موبایل روی‌هم) */
[data-fl-sec="fsl-hero"] .fsl-cta .fsl-btn{min-height:58px}

/* گاردهای ادیتور و reduced-motion: برندلاک کاملاً ثابت و مرئی */
body.fl-editing [data-fl-sec="fsl-hero"] .fsl-brandlk{opacity:1!important;animation:none!important;transform:none!important;filter:none!important}
body.fl-editing .fsl-brandlk__glow,
body.fl-editing .fsl-brandlk__name{animation:none!important}
@media (prefers-reduced-motion:reduce){
  [data-fl-sec="fsl-hero"] .fsl-brandlk{opacity:1!important;animation:none!important;transform:none!important;filter:none!important}
  .fsl-brandlk__glow,.fsl-brandlk__name{animation:none!important}
}

/* ================================================================
   v3.62.0 — TYPOGRAPHY SYSTEM (single source of truth)
   ----------------------------------------------------------------
   The landing used to look like «two different CSS»: plugin styles
   loaded BEFORE the theme reset / Elementor CSS (fixed in
   faralabs-core.php — they now print last), and stale per-field
   editor saves fought the design system (fixed by the flc_landing_v62
   reset). This layer is the ONE authoritative scale:

   · font: Vazirmatn everywhere, body 400, buttons/labels 700,
     ALL headings 800 (the thick style the user picked);
   · three coherent device tiers — desktop, tablet ≤1100, mobile ≤640;
   · kashida layer: .fsl-jk boxes justify through the FL_KASHIDA
     engine (real Persian letter-stretch), never word-gap raggedness.
   ================================================================ */

/* ---- root font guarantee ---- */
#fl-farasync,
[data-fl-page="farasync"] {
        font-family: var(--fl-font, 'Vazirmatn', Vazir, Tahoma, 'Segoe UI', sans-serif);
}

/* ---- kashida justification layer (engine fills the lines) ---- */
.fsl-jk { text-align: justify; text-justify: inter-word; }
.fsl-jk.fl-jk-right { text-align: right; } /* engine fallback for refused fonts */

/* ---- hero ---- */
.fsl-title { font-size: clamp(30px, 4vw, 54px); line-height: 1.35; }
.fsl-lead  { font-size: clamp(15px, 1.35vw, 17px); }

/* ---- every heading is the THICK style (800) ---- */
.fsl-sec__head h2,
.fsl-cta-panel h2,
.fsl-pricing__title,
.fsl-frow__copy h3,
.fsl-motive__copy h3,
.fsl-cta2__card h3,
.fsl-mission__head h2,
.fsv-title,
.fsl-fcard h3,
.fsl-mcard h3,
.fsl-pcard h3,
.fsl-step__body h3,
.fsl-shot__cap strong,
.fsl-faq__item summary {
        font-weight: 800;
}

/* ---- coherent size scale ---- */
.fsl-sec__head h2 { font-size: clamp(27px, 3.2vw, 40px); line-height: 1.45; }
.fsl-sec__head p  { font-size: 15.5px; line-height: 2.1; }
.fsl-fcard h3     { font-size: 17.5px; }
.fsl-fcard p      { font-size: 14.5px; line-height: 2.05; }
.fsl-mcard h3     { font-size: 17.5px; }
.fsl-mcard p      { font-size: 14.5px; line-height: 2.05; }
.fsl-step__body h3{ font-size: 16.5px; }
.fsl-step__body p { font-size: 14px; line-height: 2; }
.fsl-pcard h3     { font-size: 17.5px; }
.fsl-pcard p      { font-size: 14.5px; line-height: 2.05; }
.fsl-solution p   { font-size: 15px; }
.fsl-frow__copy p { font-size: 15px; }
.fsl-pricing__copy > p { font-size: 15px; }
.fsl-motive__copy > p  { font-size: 15px; }
.fsl-shot__cap strong { font-size: 17px; }
.fsl-shot__cap span   { font-size: 14px; }
.fsl-faq__item summary { font-size: 16px; }
.fsl-faq__item > p     { font-size: 14.5px; line-height: 2.05; }
.fsl-cta2__card h3     { font-size: 21px; }
.fsl-cta2__desc        { font-size: 14.5px; }
.fsl-cta-panel p       { font-size: 15px; }
.fsl-checks li         { font-size: 14px; }
#fl-farasync .fsv-title,
[data-fl-type="fs_video"] .fsv-title {
        font-size: clamp(24px, 3vw, 34px);
        font-weight: 800;
}
.fsl-badge { font-weight: 700; }

/* ---- tablet (≤1100): calmer hierarchy, same weights ---- */
@media (max-width: 1100px) {
        .fsl-title        { font-size: clamp(28px, 5vw, 38px); }
        .fsl-sec__head h2 { font-size: clamp(25px, 3.8vw, 30px); }
        .fsl-sec__head p  { font-size: 15px; }
        .fsl-fcard h3, .fsl-mcard h3, .fsl-pcard h3 { font-size: 17px; }
        .fsl-fcard p,  .fsl-mcard p,  .fsl-pcard p  { font-size: 14px; }
        .fsl-step__body h3 { font-size: 16px; }
        .fsl-step__body p  { font-size: 13.5px; }
        .fsl-faq__item summary { font-size: 15px; }
        .fsl-faq__item > p     { font-size: 14px; }
        .fsl-cta2__card h3     { font-size: 20px; }
        #fl-farasync .fsv-title, [data-fl-type="fs_video"] .fsv-title { font-size: clamp(22px, 3.4vw, 27px); }
}

/* ---- mobile (≤640): compact but readable, tight rhythm ---- */
@media (max-width: 640px) {
        .fsl-title {
                font-size: clamp(25px, 7vw, 30px);
                line-height: 1.5;
                margin: 18px 0 14px;
        }
        .fsl-lead  { font-size: 14px; line-height: 2; margin-bottom: 22px; }
        .fsl-sec__head h2 { font-size: clamp(22px, 6.2vw, 26px); line-height: 1.55; }
        .fsl-sec__head p  { font-size: 14px; line-height: 2; }
        .fsl-sec { padding: 64px 0 14px; }
        .fsl-fcard h3, .fsl-mcard h3, .fsl-pcard h3 { font-size: 16px; }
        .fsl-fcard p,  .fsl-mcard p,  .fsl-pcard p  { font-size: 13.5px; line-height: 2; }
        .fsl-step__body h3 { font-size: 15.5px; }
        .fsl-step__body p  { font-size: 13.5px; line-height: 1.95; }
        .fsl-solution p, .fsl-frow__copy p, .fsl-pricing__copy > p, .fsl-motive__copy > p { font-size: 14px; }
        .fsl-shot__cap strong { font-size: 15.5px; }
        .fsl-shot__cap span   { font-size: 13.5px; }
        .fsl-faq__item summary { font-size: 14.5px; padding: 15px 16px; }
        .fsl-faq__item > p     { font-size: 13.5px; padding: 0 56px 16px 18px; }
        .fsl-cta2__card h3     { font-size: 18px; }
        .fsl-cta2__desc        { font-size: 13.5px; }
        .fsl-cta-panel h2      { font-size: clamp(22px, 6.4vw, 27px); }
        .fsl-cta-panel p       { font-size: 14px; }
        .fsl-btn { font-size: 14px; padding: 13px 22px; }
        #fl-farasync .fsv-title, [data-fl-type="fs_video"] .fsv-title { font-size: clamp(19px, 5.6vw, 23px); }
}

/* ---- editor safety: while editing, kashida display is paused ---- */
body.fl-editing .fsl-jk { text-align: start; }

/* ====================================================================
   v3.63.0 — typography system (final pass, user rules):
   · every heading the THICK (800) cut
   · heading scale tuned per device (editor breakpoints: 1024 / 767)
   · «کشیده»: every 2+ line text justified (single lines unaffected)
   · wrapped headings (JS adds .fsl-2l) justified too
   · JS fit engine (fl-farasync.js) shrinks a wrapped heading until it
     fits: one line on desktop/tablet, max two lines on mobile
   ==================================================================== */

/* (1) the remaining 700-cut card titles join the 800 cut */
.fsl-fcard h3, .fsl-mcard h3, .fsl-pcard h3, .fsl-gcard__head h3 { font-weight: 800; }

/* (2) device scale — tablet (≤1024, matches the editor's tb rows) */
@media (max-width: 1024px) {
	.fsl-sec__head h2 { font-size: clamp(23px, 3.6vw, 30px); line-height: 1.45; }
	#fl-farasync .fsv-title, [data-fl-type="fs_video"] .fsv-title { font-size: clamp(22px, 3.2vw, 27px); }
	.fsl-sec__head p { font-size: 14.5px; }
}

/* mobile (≤767, matches the editor's mb rows): ≤2-line headings stay readable */
@media (max-width: 767px) {
	.fsl-sec__head h2 { font-size: clamp(19px, 5.5vw, 24px); line-height: 1.5; }
	#fl-farasync .fsv-title, [data-fl-type="fs_video"] .fsv-title { font-size: clamp(18px, 5.2vw, 22px); }
	.fsl-sec__head p { font-size: 14px; line-height: 2; }
	.fsl-faq__item summary { font-size: 14px; }
}

/* (3) «کشیده» — the body-text justify layer. justify only stretches
   lines that are NOT the last one, so one-line texts look unchanged. */
#fl-farasync p { text-align: justify; text-justify: inter-word; }
#fl-farasync .fsl-trust li,
#fl-farasync .fsl-checks li,
#fl-farasync .fsl-shot__cap span,
#fl-farasync .fsl-duo__item p,
#fl-farasync .fsl-faq__q { text-align: justify; text-justify: inter-word; }

/* wrapped headings (the fit engine tags them) go justified as well —
   «عنوان‌های دوخطی حتماً کشیده» */
.fsl-sec__head h2.fsl-2l,
.fsv-title.fsl-2l,
.fsl-faq__q.fsl-2l { text-align: justify; text-justify: inter-word; }

/* (4) the fit engine's shrunken headings keep their natural rhythm */
.fsl-fitted { letter-spacing: 0; }

/* ================================================================
   v3.68.8 — «دموی پلاگین فراسینک» button variant
   Used by the live-demo / rep-demo entry points on /farasync/.
   Combines the proven gradient of .fsl-btn--video with an explicit
   "play in window" icon so visitors instantly know this opens an
   interactive demo, not a static screenshot.
   ================================================================ */
.fsl-btn--demo {
	color: #04121a;
	background: linear-gradient(135deg, var(--fsl-a2, #22d3ee), var(--fsl-a3, #8b7cf6));
	box-shadow: 0 14px 40px rgba(34, 211, 238, .28);
	position: relative;
	overflow: hidden;
}
.fsl-btn--demo::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255, 255, 255, .25), transparent 50%);
	opacity: 0;
	transition: opacity .3s ease;
}
.fsl-btn--demo:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 52px rgba(34, 211, 238, .42);
}
.fsl-btn--demo:hover::before { opacity: 1; }
.fsl-btn--demo:active { transform: scale(.98); }

.fsl-btn--demo .fsl-btn__demo-ico {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	flex: 0 0 28px;
	background: rgba(4, 18, 26, .22);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.fsl-btn--demo .fsl-btn__demo-ico svg {
	fill: #04121a;
	width: 16px;
	height: 16px;
}
.fsl-btn--demo .fsl-btn__demo-ico::after {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 10px;
	border: 1.5px solid rgba(4, 18, 26, .35);
	animation: fsl-demo-ring 2s ease-out infinite;
	opacity: 0;
}
.fsl-btn--demo:hover .fsl-btn__demo-ico::after {
	animation-name: fsl-demo-ring;
	opacity: 1;
}
@keyframes fsl-demo-ring {
	0% { transform: scale(.85); opacity: 1; }
	100% { transform: scale(1.2); opacity: 0; }
}

/* mobile */
@media (max-width: 768px) {
	.fsl-btn--demo {
		font-size: 13px;
		padding: 12px 20px;
	}
	.fsl-btn--demo .fsl-btn__demo-ico {
		width: 24px;
		height: 24px;
		flex: 0 0 24px;
	}
}

/* ================================================================
   v3.68.8 — Auto-style any anchor pointing at a demo URL
   The owner can drop a normal text link with btn1_text="دموی پلاگین
   فراسینک" / btn1_url="/farasync-live-demo/" from the live editor
   without having to manually add any class — we detect the href
   and apply the demo variant automatically.
   ================================================================ */
.fsl-cta a[href*="farasync-live-demo"],
.fsl-cta a[href*="farasync-rep-demo"],
.fsl-cta2 a[href*="farasync-live-demo"],
.fsl-cta2 a[href*="farasync-rep-demo"],
.fsl-hero a[href*="farasync-live-demo"],
.fsl-hero a[href*="farasync-rep-demo"],
.flc-panel-guest a[href*="farasync-live-demo"],
.flc-panel-guest a[href*="farasync-rep-demo"] {
	color: #04121a !important;
	background: linear-gradient(135deg, var(--fsl-a2, #22d3ee), var(--fsl-a3, #8b7cf6)) !important;
	box-shadow: 0 14px 40px rgba(34, 211, 238, .28) !important;
	position: relative;
	overflow: hidden;
}

.fsl-cta a[href*="farasync-live-demo"]:hover,
.fsl-cta a[href*="farasync-rep-demo"]:hover,
.fsl-cta2 a[href*="farasync-live-demo"]:hover,
.fsl-cta2 a[href*="farasync-rep-demo"]:hover,
.fsl-hero a[href*="farasync-live-demo"]:hover,
.fsl-hero a[href*="farasync-rep-demo"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 52px rgba(34, 211, 238, .42) !important;
}