/**
 * FaraLabs Core v3 — professional dark design system (RTL).
 *
 * Palette: deep navy + refined blue (matches the FaraLabs hexagon logo).
 * Motion: delicate flowing light — thin lines, soft glows, slow sheens.
 */

/* ------------------------------------------------------------- Fonts
   v3.64.0 — font-display: block. The faces are preloaded in <head>,
   so the block window is only the (short) font fetch. While it lasts
   the text simply does not paint — the user no longer sees the
   metric-fallback face render every line ~29% larger and then watch
   it «shrink» when the real Vazirmatn arrives (the reported refresh
   flash). If a font genuinely fails, the block period times out and
   the metric-matched "Vazirmatn FB" (Tahoma) still takes over. */
@font-face {
        font-family: 'Vazirmatn';
        font-style: normal;
        font-weight: 400;
        font-display: block;
        src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
}
@font-face {
        font-family: 'Vazirmatn';
        font-style: normal;
        font-weight: 500;
        font-display: block;
        src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2');
}
@font-face {
        font-family: 'Vazirmatn';
        font-style: normal;
        font-weight: 700;
        font-display: block;
        src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
}
@font-face {
        font-family: 'Vazirmatn';
        font-style: normal;
        font-weight: 800;
        font-display: block;
        src: url('../fonts/Vazirmatn-ExtraBold.woff2') format('woff2');
}

/* ------------------------------------------------------------ Tokens */

:root {
        --fl-bg: #070b15;
        --fl-bg-2: #0a101d;
        --fl-surface: #0d1526;
        --fl-surface-2: #111b31;
        --fl-bg-rgb: 7, 11, 21;
        --fl-bg2-rgb: 10, 16, 29;
        --fl-surface-rgb: 13, 21, 38;
        --fl-shadow-rgb: 2, 6, 20;
        --fl-linec-rgb: 148, 163, 198;
        --fl-line: rgba(var(--fl-linec-rgb), 0.12);
        --fl-line-strong: rgba(var(--fl-linec-rgb), 0.24);
        --fl-text: #e8edf8;
        --fl-muted: #97a3bc;
        --fl-accent: #4c8dff;
        --fl-accent-rgb: 76, 141, 255;
        --fl-accent-soft: #7fb2ff;
        --fl-accent-soft-rgb: 127, 178, 255;
        --fl-accent-hover: #c3d8ff;
        --fl-accent-2: #22d3ee;
        --fl-accent2-rgb: 34, 211, 238;
        --fl-violet: #8b7cf6;
        --fl-violet-rgb: 139, 124, 246;
        --fl-ok: #34d399;
        --fl-ok-rgb: 52, 211, 153;
        --fl-ok-soft: #7ce8bd; /* v3.16.0 — success TEXT on dark (one mint everywhere) */
        --fl-ok-soft-rgb: 124, 232, 189;
        --fl-err: #f87171;
        --fl-err-rgb: 248, 113, 113;
        --fl-err-soft: #fca5a5;
        --fl-scroll: #1c2a47;
        --fl-scroll-h: #2a3d63;
        /* Hero art band keeps a cinematic dark overlay in every theme
           (photo + white text), so light themes stay readable too. */
        --fl-hero-ovl-rgb: var(--fl-bg-rgb);
        --fl-hero-fade: var(--fl-bg);
        --fl-hero-text: #eef3ff;
        --fl-hero-muted: #a9b7d4;
        --fl-grad: linear-gradient(120deg, var(--fl-accent-soft), var(--fl-accent) 45%, var(--fl-violet));
        --fl-btn-grad: linear-gradient(135deg, #4c8dff, #22d3ee 55%, #8b7cf6); /* v3.16.0 — one brand tri-tone everywhere (site + panel) */
        --fl-radius: 20px;
        --fl-radius-s: 12px;
        --fl-ease: cubic-bezier(0.22, 1, 0.36, 1);
        --fl-shadow: 0 20px 60px rgba(var(--fl-shadow-rgb), 0.5);
        --fl-glow: 0 0 0 1px rgba(var(--fl-accent-rgb), 0.28), 0 12px 44px rgba(var(--fl-accent-rgb), 0.13);
        --fl-font: 'Vazirmatn', Vazir, Tahoma, 'Segoe UI', sans-serif;
}

/* -------------------------------------------------------------- Base */

html { scroll-behavior: smooth; }

body.fl-body {
        background:
                radial-gradient(1100px 520px at 88% -8%, rgba(var(--fl-accent-rgb), 0.075), transparent 62%),
                radial-gradient(900px 480px at 4% 108%, rgba(var(--fl-violet-rgb), 0.055), transparent 60%),
                var(--fl-bg);
        color: var(--fl-text);
        font-family: var(--fl-font);
        font-size: 16.5px;
        font-weight: 400;
        line-height: 2.05;
        margin: 0;
        padding: 0;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        overflow-x: hidden;
}

body.fl-body.admin-bar .fl-header { top: 32px; }
@media screen and (max-width: 782px) {
        body.fl-body.admin-bar .fl-header { top: 46px; }
}

.fl-container {
        width: min(1600px, calc(100% - 48px)); /* v3.15.0 — wider canvas (was 1250) */
        margin-inline: auto;
}
.fl-container--narrow { width: min(880px, calc(100% - 48px)); }

a { color: var(--fl-accent-soft); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--fl-accent-hover); }
/* v3.16.0 — on-palette focus ring (Hello's white box + black outline is
   blinding on the dark canvas; this keeps accessibility AND the mood). */
.fl-body a:focus-visible,
.fl-body button:focus-visible,
.fl-body input:focus-visible,
.fl-body select:focus-visible,
.fl-body textarea:focus-visible {
        outline: 2px solid rgba(var(--fl-accent-soft-rgb), 0.85) !important;
        outline-offset: 2px;
        box-shadow: 0 0 0 4px rgba(var(--fl-accent-rgb), 0.18) !important;
}

/* ================================================================
   v3.16.0 — «شب‌تاب» luminous header suite
   Five delicate, always-alive lights for the site chrome.
   All loops are compositor-friendly (transform/opacity only, plus
   tiny-strip background drift on 1–2px lines) and are switched off
   on phones (≤760px block below) and for prefers-reduced-motion.
   ================================================================ */

/* [1] شفق — a living aurora hairline under the header */
.fl-header::before {
        content: '';
        position: absolute;
        inset-inline: 0;
        bottom: -1px;
        height: 2px;
        z-index: 1;
        background: linear-gradient(90deg,
                transparent,
                rgba(var(--fl-accent-soft-rgb), 0.85) 24%,
                rgba(var(--fl-accent2-rgb), 0.65) 50%,
                rgba(var(--fl-violet-rgb), 0.75) 76%,
                transparent);
        background-size: 240% 100%;
        opacity: 0.4;
        animation: fl-aurora 15s ease-in-out infinite alternate;
        pointer-events: none;
}
/* the static variant lines are superseded by the living aurora */
.fl-header--split::after, .fl-header--wide::after { content: none; }
.fl-header--pill::before { content: none; } /* the pill has its own glass border */
@keyframes fl-aurora {
        from { background-position: 100% 0; opacity: 0.28; }
        to { background-position: 0% 0; opacity: 0.75; }
}

/* [2] نفسِ نشان — a halo that slowly breathes behind the logo */
.fl-brand { position: relative; }
.fl-brand::after {
        content: '';
        position: absolute;
        top: 50%;
        inset-inline-start: 21px;
        width: 56px;
        height: 56px;
        margin-top: -28px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(var(--fl-accent-rgb), 0.5), rgba(var(--fl-violet-rgb), 0.18) 55%, transparent 72%);
        filter: blur(7px);
        opacity: 0.22;
        transform: scale(0.92);
        animation: fl-halo 6.5s ease-in-out infinite alternate;
        pointer-events: none;
        z-index: 0;
}
.fl-brand__logo, .fl-brand__text { position: relative; z-index: 1; }
@keyframes fl-halo {
        from { opacity: 0.1; transform: scale(0.88); }
        to { opacity: 0.5; transform: scale(1.1); }
}

/* [2.5] v3.20.0 — brand icons (messengers / custom uploads) inside icon tiles */
.fl-ico--brand {
        display: block;
        width: 26px; height: 26px;
        object-fit: contain;
        background: none;
        border: 0;
        box-shadow: none;
        filter: none;
        padding: 2px;
}

/* [3] جوهرِ زنده — titles are ink dipped in light: a slow luminous
   drift crosses the letters. Titles the admin recolored in the live
   editor (inline color/background) and static-gradient ones are left
   untouched — only kashida/layout-only inline styles still get ink. */
.fl-h1:not(.fl-grad):not([style*="color"]):not([style*="background"]),
.fl-h2:not(.fl-grad):not([style*="color"]):not([style*="background"]),
.fl-hero__title:not(.fl-grad):not([style*="color"]):not([style*="background"]) {
        background: linear-gradient(105deg,
                var(--fl-text) 30%,
                rgba(var(--fl-accent-soft-rgb), 0.95) 46%,
                rgba(var(--fl-accent2-rgb), 0.85) 54%,
                var(--fl-text) 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;
}
@keyframes fl-ink {
        from { background-position: 0% 0; }
        to { background-position: 100% 0; }
}

/* ================================================================
   v3.48.0 — performance gate: background-position loops repaint the
   main thread every frame WHILE the page loads (the Lighthouse audit
   charged them to main-thread work + boot TBT). They start paused and
   html.fl-ready — set by fl-site.js on window load (2.5s safety cap) —
   releases them once the first paint is done. Composited loops
   (transform/opacity: halo, sheen-x, reveals) are untouched.
   ================================================================ */
.fl-header::before,
.fl-band__beam,
.fl-h1:not(.fl-grad):not([style*="color"]):not([style*="background"]),
.fl-h2:not(.fl-grad):not([style*="color"]):not([style*="background"]),
.fl-hero__title:not(.fl-grad):not([style*="color"]):not([style*="background"]) {
        animation-play-state: paused;
}
html.fl-ready .fl-header::before,
html.fl-ready .fl-band__beam,
html.fl-ready .fl-h1:not(.fl-grad):not([style*="color"]):not([style*="background"]),
html.fl-ready .fl-h2:not(.fl-grad):not([style*="color"]):not([style*="background"]),
html.fl-ready .fl-hero__title:not(.fl-grad):not([style*="color"]):not([style*="background"]) {
        animation-play-state: running;
}

/* [4] فانوسِ ناوبری — the active nav link carries a soft beacon glow
   under its crisp underline (::after keeps the bar, ::before is the
   blurred twin that breathes). */
.fl-nav__link::before {
        content: '';
        position: absolute;
        bottom: 4px;
        inset-inline: 14px;
        height: 2px;
        border-radius: 2px;
        background: var(--fl-grad);
        filter: blur(5px);
        opacity: 0;
        transform: scaleX(0);
        transform-origin: center;
        transition: transform .4s var(--fl-ease), opacity .4s ease;
        pointer-events: none;
}
.fl-nav__link:hover::before,
.fl-nav__link.is-active::before { transform: scaleX(1); opacity: 0.55; }
.fl-nav__link.is-active::before { animation: fl-beacon 4.8s ease-in-out 0.4s infinite alternate; }
@keyframes fl-beacon {
        from { opacity: 0.28; }
        to { opacity: 0.7; }
}

/* [5] هالهٔ کنش — primary buttons: a blurred tri-tone halo layer.
   Hero CTA breathes ambiently; every primary lights up on hover. */
.fl-btn--primary { position: relative; z-index: 0; }
.fl-btn--primary::after {
        content: '';
        position: absolute;
        inset: -3px;
        border-radius: inherit;
        background: var(--fl-btn-grad);
        filter: blur(11px);
        opacity: 0;
        transform: scale(0.96);
        transition: opacity .45s ease, transform .45s var(--fl-ease);
        pointer-events: none;
        z-index: -1;
}
.fl-btn--primary:hover::after, .fl-btn--primary:focus-visible::after { opacity: 0.5; transform: scale(1.02); }
.fl-hero .fl-btn--primary::after {
        opacity: 0.2;
        animation: fl-halo 6.5s ease-in-out infinite alternate;
        transition: none;
}

img { max-width: 100%; height: auto; }

::selection { background: rgba(var(--fl-accent-rgb), 0.32); color: #fff; }

:focus-visible {
        outline: 2px solid var(--fl-accent);
        outline-offset: 3px;
        border-radius: 6px;
}

body::-webkit-scrollbar { width: 11px; }
body::-webkit-scrollbar-track { background: var(--fl-bg); }
body::-webkit-scrollbar-thumb { background: var(--fl-scroll); border-radius: 8px; border: 2px solid var(--fl-bg); }
body::-webkit-scrollbar-thumb:hover { background: var(--fl-scroll-h); }

.fl-skip {
        position: fixed;
        top: -60px;
        inset-inline-start: 16px;
        z-index: 1200;
        background: var(--fl-accent);
        color: #fff;
        padding: 10px 18px;
        border-radius: 10px;
        font-size: 14px;
        transition: top .3s var(--fl-ease);
}
.fl-skip:focus { top: 12px; color: #fff; }

/* ------------------------------------------------------------ Header */

.fl-header {
        position: fixed;
        inset-inline: 0;
        top: 0;
        z-index: 999;
        background: rgba(var(--fl-bg-rgb), 0.72);
        -webkit-backdrop-filter: blur(12px) saturate(1.25);
        backdrop-filter: blur(12px) saturate(1.25);
        border-bottom: 1px solid transparent;
        transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.fl-header.is-scrolled {
        background: rgba(var(--fl-bg-rgb), 0.88);
        border-bottom-color: var(--fl-line);
        box-shadow: 0 12px 40px rgba(var(--fl-shadow-rgb), 0.45);
}

/* v3.68.9 — main content offset.
   The header is position:fixed with min-height 74px. Without an offset,
   the topmost section (or the customer-panel banner) sits underneath it
   and only becomes visible after the visitor scrolls. The gap = header
   height (74px) + 8px breathing space, so content starts ~8px below
   the header's bottom edge — the requested «5-10px gap».
   The admin-bar adjustment (top: 32px on the header) is mirrored here
   so the gap is identical whether or not the WP admin bar is shown. */
.fl-main {
        padding-top: 82px;
}
body.fl-body.admin-bar .fl-main {
        padding-top: 114px; /* 82 + 32 admin bar */
}
@media screen and (max-width: 782px) {
        body.fl-body.admin-bar .fl-main {
                padding-top: 128px; /* 82 + 46 admin bar (mobile) */
        }
}

.fl-header__inner {
        display: flex;
        align-items: center;
        gap: 30px;
        min-height: 74px;
}

.fl-brand {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        color: var(--fl-text);
        flex-shrink: 0;
}
.fl-brand:hover { color: #fff; }
.fl-brand__logo {
        width: 42px;
        height: 42px;
        border-radius: 11px;
        filter: drop-shadow(0 4px 14px rgba(var(--fl-accent-rgb), 0.35));
        transition: transform .5s var(--fl-ease);
}
.fl-brand:hover .fl-brand__logo { transform: translateY(-2px) scale(1.04); }
.fl-brand__text { display: flex; flex-direction: column; line-height: 1.5; }
.fl-brand__text strong { font-size: 17px; font-weight: 700; letter-spacing: .01em; }
.fl-brand__text small {
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: .34em;
        color: var(--fl-muted);
}

.fl-nav {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-inline-start: auto;
}
.fl-nav__link {
        position: relative;
        display: inline-flex; /* v3.14.0 — icon + label */
        align-items: center;
        gap: 7px;
        white-space: nowrap; /* v3.14.0 — menu labels never fold to 2 lines */
        color: var(--fl-muted);
        font-size: 14.5px;
        font-weight: 500;
        padding: 9px 13px;
        border-radius: 10px;
        transition: color .25s ease, background .25s ease;
}

/* v3.14.0 — SVG icons beside every header menu item
   (admin picks the icon per item in FaraLabs → Site Content). */
.fl-nico {
        display: inline-flex;
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
        color: var(--fl-muted);
        opacity: .9;
        transition: color .25s ease;
}
.fl-nico svg { width: 100%; height: 100%; display: block; }
.fl-nav__link:hover .fl-nico,
.fl-nav__link.is-active .fl-nico { color: var(--fl-accent-soft); opacity: 1; }

/* v3.49.0 — unread-replies counter badge on the header «پشتیبانی» item.
   v3.47.0 anchored it to the icon itself; per feedback the badge now
   hangs off the WHOLE link's top-LEFT corner — physically LEFT of the
   word «پشتیبانی» in this RTL header (the .fl-nav__link is already
   position:relative, so it is the positioning context). Same bell-badge
   look as before. Never intercepts clicks. */
.fl-ubadge {
        position: absolute;
        top: -6px;
        left: -7px;
        box-sizing: border-box; /* min-width = FULL pill width */
        min-width: 16px;
        padding: 1px 5px;
        border-radius: 999px;
        background: linear-gradient(135deg, #ff5a78, #e0344f);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.45;
        text-align: center;
        box-shadow: 0 3px 10px rgba(224, 52, 79, .55);
        pointer-events: none;
        z-index: 2;
}
.fl-ubadge[hidden] { display: none; }
.fl-nav__link::after {
        content: '';
        position: absolute;
        bottom: 4px;
        inset-inline: 14px;
        height: 2px;
        border-radius: 2px;
        background: var(--fl-grad);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform .4s var(--fl-ease);
}
.fl-nav__link:hover { color: var(--fl-text); background: rgba(255, 255, 255, 0.045); }
.fl-nav__link:hover::after,
.fl-nav__link.is-active::after { transform: scaleX(1); }
.fl-nav__link.is-active { color: var(--fl-text); }
.fl-nav__cta { margin-inline-start: 10px; }

/* v3.12.0 — logged-in personal menu: «پنل کاربری» gets a hover submenu;
   «خروج از حساب» is a real button styled like a nav link. */
.fl-nav__item--sub { position: relative; display: inline-flex; }
.fl-nav__link--sub { display: inline-flex; align-items: center; gap: 6px; }
.fl-nav__caret {
        width: 0;
        height: 0;
        border-inline-start: 4px solid transparent;
        border-inline-end: 4px solid transparent;
        border-top: 5px solid rgba(234, 241, 255, .65);
        transition: transform .25s var(--fl-ease);
}
.fl-nav__item--sub:hover .fl-nav__caret,
.fl-nav__item--sub:focus-within .fl-nav__caret { transform: rotate(180deg); }
.fl-nav__sub {
        position: absolute;
        top: calc(100% + 8px);
        inset-inline-start: 0;
        min-width: 188px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 8px;
        border-radius: 14px;
        border: 1px solid var(--fl-line);
        background: rgba(var(--fl-surface-rgb), .97);
        box-shadow: 0 22px 55px rgba(var(--fl-shadow-rgb), .55);
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity .22s ease, transform .28s var(--fl-ease), visibility .22s;
        z-index: 1300;
}
.fl-nav__item--sub:hover .fl-nav__sub,
.fl-nav__item--sub:focus-within .fl-nav__sub {
        opacity: 1;
        visibility: visible;
        transform: none;
}
.fl-nav__sub a {
        display: flex; /* v3.14.0 — icon + label */
        align-items: center;
        gap: 8px;
        padding: 9px 13px;
        border-radius: 9px;
        color: var(--fl-muted);
        font-size: 13.5px;
        font-weight: 500;
        text-decoration: none;
        transition: color .18s ease, background .18s ease;
}
.fl-nav__sub a svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--fl-muted); transition: color .18s ease; }
.fl-nav__sub a:hover { color: var(--fl-text); background: rgba(255, 255, 255, .055); }
.fl-nav__sub a:hover svg { color: var(--fl-accent-soft); }
.fl-nav__logout {
        background: none;
        border: 0;
        cursor: pointer;
        font-family: inherit;
}
.fl-nav__logout svg { width: 16px; height: 16px; display: block; }
/* v3.14.0 — the labelled logout inside the mobile sheet (hidden on desktop). */
.fl-nav__logout.fl-only-m { margin-top: 6px; text-align: start; width: 100%; }
/* v3.14.0 — guest login entry inside the mobile sheet. */
.fl-nav__login.fl-only-m { text-align: start; width: 100%; color: var(--fl-text); }
/* v3.14.0 — desktop borderless icon-only logout next to the avatar chip.
   element+class beats Hello Elementor's late-loading red button reset. */
button.fl-logout-ico {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border: 0; /* «بدون حاشیه» */
        border-radius: 11px;
        background: transparent;
        color: var(--fl-muted);
        cursor: pointer;
        flex-shrink: 0;
        padding: 0;
        transition: color .2s ease, background .2s ease;
}
button.fl-logout-ico svg { width: 18px; height: 18px; }
button.fl-logout-ico:hover { color: var(--fl-text); background: rgba(255, 255, 255, .07); }
/* v3.15.0 — desktop: the avatar chip, the icon logout and the bell are one
   icon trio — only 5px apart instead of the header's 30px flex gap.
   (mobile keeps its own 12px rhythm; the centered header stacks vertically
   so it is excluded). 30px gap − 25px pull-in = 5px. */
@media (min-width: 761px) {
        .fl-header:not(.fl-header--center) .fl-userchip + .fl-logout-ico,
        .fl-header:not(.fl-header--center) .fl-logout-ico + .flc-bell { margin-inline-start: -25px; }
}
/* v3.14.0 — mobile-only menu entries. */
.fl-only-m { display: none !important; }
/* v3.13.0 — brand strip: only visible inside the mobile menu sheet. */
.fl-nav__foot { display: none; }
/* v3.14.0 — defensive: any nav BUTTON keeps its own colors over the
   theme's late-loading red button reset. */
button.fl-nav__link { color: var(--fl-muted); border: 1px solid transparent; background: none; font-family: inherit; }
button.fl-nav__link.is-active { color: var(--fl-text); }
.fl-nav__logout:hover { color: #fff !important; background: rgba(255, 255, 255, .08) !important; }
.fl-nav__logout::after { display: none !important; }

.fl-burger {
        display: none;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 0 10px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--fl-line);
        border-radius: 11px;
        cursor: pointer;
}
.fl-burger span {
        display: block;
        width: 100%; /* explicit — flex column + center alignment collapses auto-width spans */
        height: 2px;
        border-radius: 2px;
        background: var(--fl-text);
        transition: transform .35s var(--fl-ease), opacity .25s ease;
}
.fl-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fl-burger.is-open span:nth-child(2) { opacity: 0; }
.fl-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ----------------------------------------------------------- Buttons */

.fl-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        height: 47px;
        padding: 0 24px;
        border: 1px solid transparent;
        border-radius: var(--fl-radius-s);
        font-family: inherit;
        font-size: 15px;
        font-weight: 500;
        line-height: 1;
        cursor: pointer;
        white-space: nowrap;
        text-decoration: none;
        transition: transform .35s var(--fl-ease), box-shadow .35s var(--fl-ease),
                background .3s ease, border-color .3s ease, color .3s ease, filter .3s ease;
}
.fl-btn .fl-ico { width: 17px; height: 17px; }

.fl-btn--primary {
        background: var(--fl-btn-grad);
        color: #fff;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 26px rgba(var(--fl-accent-rgb), 0.32);
}
.fl-btn--primary:hover {
        color: #fff;
        transform: translateY(-2px);
        filter: brightness(1.08);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 14px 38px rgba(var(--fl-accent-rgb), 0.42);
}
.fl-btn--primary:active { transform: translateY(0) scale(.99); }

.fl-btn--ghost {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.13);
        color: var(--fl-text);
}
.fl-btn--ghost:hover {
        background: rgba(var(--fl-accent-rgb), 0.13);
        border-color: rgba(var(--fl-accent-rgb), 0.45);
        color: var(--fl-accent-hover);
        transform: translateY(-2px);
}
.fl-btn--ghost:active { transform: translateY(0); }

/* v3.14.0 — the outline button now uses the «دریافت مشاوره پروژه» theme:
   a faint, faded white stroke + white text (was accent stroke + accent
   text, which read RED under the rose/ruby themes). */
.fl-btn--outline {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.16);
        color: #fff;
}
.fl-btn--outline:hover {
        background: rgba(255, 255, 255, 0.09);
        border-color: rgba(255, 255, 255, 0.34);
        color: #fff;
        transform: translateY(-2px);
}
.fl-btn--outline:active { transform: translateY(0); }

.fl-btn--block { width: 100%; }

/*
 * v3.7.0 — Hello Elementor's reset.css loads after fl-site.css and paints
 * [type=submit]/button with a red #c36 border + color (the "red stroke"
 * around the contact submit button; the SVG icon follows currentColor and
 * turned red too). Element(1)+class(1) here beats attribute (0,1,0), so
 * our buttons win regardless of file order — icon matches text color.
 */
button.fl-btn {
        border: 1px solid transparent;
        background-color: transparent;
        padding: 0 24px;
        height: 47px;
        font-size: 15px;
        font-weight: 500;
        line-height: 1;
        border-radius: var(--fl-radius-s);
        text-decoration: none;
        transition: transform .35s var(--fl-ease), box-shadow .35s var(--fl-ease),
                background .3s ease, border-color .3s ease, color .3s ease, filter .3s ease;
}
button.fl-btn--block { width: 100%; }
button.fl-btn--primary {
        color: #fff;
        background: var(--fl-btn-grad);
        border-color: transparent;
}
button.fl-btn--primary:hover,
button.fl-btn--primary:focus {
        color: #fff;
        background: var(--fl-btn-grad);
}
button.fl-btn--ghost {
        color: var(--fl-text);
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.13);
}
button.fl-btn--ghost:hover,
button.fl-btn--ghost:focus {
        color: var(--fl-accent-hover);
        background: rgba(var(--fl-accent-rgb), 0.13);
        border-color: rgba(var(--fl-accent-rgb), 0.45);
}
button.fl-btn--outline {
        color: #fff;
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.16);
}
button.fl-btn--outline:hover,
button.fl-btn--outline:focus {
        color: #fff;
        background: rgba(255, 255, 255, 0.09);
        border-color: rgba(255, 255, 255, 0.34);
}

/* ------------------------------------------------------------ Badges */

.fl-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        border-radius: 999px;
        background: rgba(var(--fl-accent-rgb), 0.1);
        border: 1px solid rgba(var(--fl-accent-rgb), 0.28);
        color: var(--fl-accent-soft);
        font-size: 13px;
        font-weight: 500;
        line-height: 1.7;
}
.fl-badge .fl-ico { width: 15px; height: 15px; flex-shrink: 0; }
.fl-badge--soft {
        background: rgba(var(--fl-accent2-rgb), 0.08);
        border-color: rgba(var(--fl-accent2-rgb), 0.26);
        color: #7fdcee;
}

.fl-overline {
        display: inline-block;
        color: var(--fl-accent-soft);
        font-size: 13.5px;
        font-weight: 600;
        letter-spacing: .02em;
        line-height: 1.9;
        margin-bottom: 6px;
}

/* ---------------------------------------------------------- Sections */

.fl-sec { position: relative; }

/* ---------------------------------------- Per-section light art (SVG) */

.fl-sec__art {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
        z-index: 0;
}
.fl-sec__art svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
}
.fl-sec__art--flip svg { transform: scaleX(-1); }
/* Keep the real content above the art */
.fl-sec > .fl-container { position: relative; z-index: 1; }

.fla-glow {
        transform-box: fill-box;
        transform-origin: center;
        animation: fl-breathe 12s ease-in-out infinite;
}
.fla-glow--b { animation-duration: 16s; animation-delay: -7s; }
.fla-arc {
        fill: none;
        stroke-width: 1.1;
        stroke-dasharray: 9 15;
        opacity: .5;
        animation: fl-dash 34s linear infinite;
}
.fla-arc--b { animation-duration: 44s; animation-direction: reverse; opacity: .34; }
.fla-ring {
        transform-box: fill-box;
        transform-origin: center;
        animation: fla-ring 13s ease-in-out infinite;
}
.fla-star { animation: fla-tw 7.5s ease-in-out infinite; }
.fla-star--2 { animation-duration: 9.5s; animation-delay: -2.6s; }
.fla-star--3 { animation-duration: 11s; animation-delay: -5.1s; }
.fla-dot { opacity: .8; }

@keyframes fla-ring {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.07); }
}
@keyframes fla-tw {
        0%, 100% { opacity: .22; }
        50% { opacity: .9; }
}

.fl-section { padding: 96px 0; }
.fl-section--soft {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.008));
        border-block: 1px solid rgba(var(--fl-linec-rgb), 0.07);
}

.fl-head { margin-bottom: 48px; max-width: 720px; }
.fl-head .fl-sub { margin-bottom: 0; }

.fl-h1 {
        font-size: clamp(29px, 4.2vw, 46px);
        font-weight: 800;
        line-height: 1.5;
        margin: 0 0 14px;
}
.fl-h2 {
        font-size: clamp(22px, 2.9vw, 33px);
        font-weight: 800;
        line-height: 1.6;
        margin: 0 0 12px;
}
.fl-sub {
        color: var(--fl-muted);
        font-size: 16.5px;
        line-height: 2.1;
        margin: 0;
}

.fl-grad {
        background: var(--fl-grad);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
}

/* ------------------------------------------------------------- Grids */

.fl-grid { display: grid; gap: var(--fl-gap, 20px); grid-template-columns: repeat(var(--fl-cols, var(--fl-cols-def, 4)), minmax(0, 1fr)); }
.fl-grid--2 { --fl-cols-def: 2; }
.fl-grid--3 { --fl-cols-def: 3; }
.fl-grid--4 { --fl-cols-def: 4; }
.fl-grid--5 { --fl-cols-def: 5; }
.fl-grid--6 { --fl-cols-def: 6; }

/* ------------------------------------------------------------- Cards */

.fl-card {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: var(--fl-ipad, 28px 24px);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.014));
        border: 1px solid var(--fl-line);
        border-radius: var(--fl-radius);
        transition: transform .5s var(--fl-ease), border-color .4s ease, box-shadow .5s var(--fl-ease), background .4s ease;
        overflow: hidden;
}
.fl-card::before {
        content: '';
        position: absolute;
        top: 0;
        inset-inline: 18%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(var(--fl-accent-soft-rgb), 0.55), transparent);
        opacity: 0;
        transition: opacity .5s ease;
}
.fl-card:hover {
        transform: translateY(-5px);
        border-color: rgba(var(--fl-accent-rgb), 0.38);
        box-shadow: 0 18px 46px rgba(var(--fl-shadow-rgb), 0.45), 0 0 0 1px rgba(var(--fl-accent-rgb), 0.12);
}
.fl-card:hover::before { opacity: 1; }

.fl-card__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 14px;
        background: rgba(var(--fl-accent-rgb), 0.11);
        border: 1px solid rgba(var(--fl-accent-rgb), 0.2);
        color: var(--fl-accent-soft);
        margin-bottom: 8px;
}
.fl-card__icon .fl-ico { width: 23px; height: 23px; }

.fl-card__title {
        font-size: 16.5px;
        font-weight: 700;
        line-height: 1.8;
        margin: 0;
}
.fl-card__text {
        color: var(--fl-muted);
        font-size: 14.5px;
        line-height: 2;
        margin: 0;
        flex-grow: 1;
}
.fl-card__feature {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin-top: 4px;
        padding-top: 14px;
        border-top: 1px dashed rgba(var(--fl-linec-rgb), 0.16);
        color: #86d9e8;
        font-size: 13px;
        line-height: 1.9;
}
.fl-card__feature .fl-ico { width: 14px; height: 14px; flex-shrink: 0; margin-top: 5px; }

/* ------------------------------------------------------------- Steps */

.fl-step {
        position: relative;
        padding: var(--fl-ipad, 26px 24px);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
        border: 1px solid var(--fl-line);
        border-radius: var(--fl-radius);
        transition: transform .5s var(--fl-ease), border-color .4s ease, box-shadow .5s var(--fl-ease);
}
.fl-step:hover {
        transform: translateY(-5px);
        border-color: rgba(var(--fl-accent-rgb), 0.34);
        box-shadow: 0 18px 46px rgba(var(--fl-shadow-rgb), 0.4);
}
.fl-step__num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: rgba(var(--fl-accent-rgb), 0.1);
        border: 1px solid rgba(var(--fl-accent-rgb), 0.35);
        color: var(--fl-accent-soft);
        font-size: 17px;
        font-weight: 700;
        margin-bottom: 14px;
        box-shadow: 0 0 22px rgba(var(--fl-accent-rgb), 0.18);
}

/* -------------------------------------------------------------- Hero */

.fl-hero {
        position: relative;
        overflow: hidden;
        padding: 168px 0 104px;
}

.fl-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.fl-hero__bg img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: .42;
        filter: brightness(.82) saturate(1.15);
        animation: fl-kenburns 46s ease-in-out infinite alternate;
}
.fl-hero__bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background:
                linear-gradient(180deg, rgba(var(--fl-hero-ovl-rgb), 0.62) 0%, rgba(var(--fl-hero-ovl-rgb), 0.18) 42%, rgba(var(--fl-hero-ovl-rgb), 0.55) 78%, var(--fl-hero-fade) 100%),
                radial-gradient(900px 420px at 50% 42%, transparent 30%, rgba(var(--fl-hero-ovl-rgb), 0.42) 100%);
}

.fl-hero__art { position: absolute; inset: 0; width: 100%; height: 100%; }

.flx-glow { transform-box: fill-box; transform-origin: center; }
.flx-glow--1 { animation: fl-drift-1 26s ease-in-out infinite alternate; }
.flx-glow--2 { animation: fl-drift-2 32s ease-in-out infinite alternate; }

.flx-line {
        fill: none;
        stroke-width: 1.1;
        opacity: .5;
        stroke-dasharray: 5 13;
        animation: fl-dash 34s linear infinite;
}
.flx-line--b { opacity: .36; animation-duration: 46s; animation-direction: reverse; }

.flx-dot { opacity: .8; }
.flx-dot--2 { opacity: .6; }

/* v3.12.0 — the sheen sweep moved from animating background-position
   (a full-layer repaint every frame over the hero = visible frame-y
   stutter) to a transform-driven pseudo layer that the compositor
   handles without touching the main thread. */
.fl-sheen {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
}
.fl-sheen::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: -50%;
        width: 55%;
        background: linear-gradient(115deg, transparent 20%, rgba(var(--fl-accent-soft-rgb), 0.085) 50%, transparent 80%);
        transform: translateX(-160%);
        animation: fl-sheen-x 10s ease-in-out infinite;
        will-change: transform;
}
.fl-sheen--soft::before { opacity: .75; }

.fl-hero__inner {
        position: relative;
        text-align: center;
        max-width: 880px;
}

.fl-hero__badge { margin-bottom: 26px; animation: fl-up .9s var(--fl-ease) both; }
.fl-hero__title {
        color: var(--fl-hero-text);
        font-size: clamp(30px, 4.7vw, 55px);
        font-weight: 800;
        line-height: 1.65;
        margin: 0 0 20px;
        animation: fl-up .9s .12s var(--fl-ease) both;
}
.fl-hero__title > span { display: block; }
.fl-hero__lead {
        max-width: 720px;
        margin: 0 auto 34px;
        color: var(--fl-hero-muted);
        font-size: 17px;
        line-height: 2.15;
        animation: fl-up .9s .24s var(--fl-ease) both;
}
.fl-hero .fl-actions { animation: fl-up .9s .36s var(--fl-ease) both; }
.fl-hero .fl-pills { animation: fl-up .9s .48s var(--fl-ease) both; }

.fl-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 14px;
}
.fl-actions--center { justify-content: center; }

.fl-pills {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin: 38px 0 0;
        padding: 0;
        list-style: none;
}
.fl-pills li {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 17px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.045);
        border: 1px solid var(--fl-line);
        color: var(--fl-muted);
        font-size: 13.5px;
        line-height: 1.8;
        transition: border-color .3s ease, color .3s ease;
}
.fl-pills li .fl-ico { width: 14px; height: 14px; color: var(--fl-ok); }
.fl-pills li:hover { border-color: rgba(var(--fl-accent-rgb), 0.4); color: var(--fl-text); }

/* ---------------------------------------------------------- Pagehead */

.fl-band {
        position: relative;
        padding: 178px 0 72px;
        overflow: hidden;
        border-bottom: 1px solid rgba(var(--fl-linec-rgb), 0.07);
}
.fl-band__art { position: absolute; inset: 0; pointer-events: none; }
.fl-band__glow {
        position: absolute;
        top: -220px;
        left: 50%;
        transform: translateX(-50%);
        width: 720px;
        height: 460px;
        background: radial-gradient(46% 54% at 50% 42%, rgba(var(--fl-accent-rgb), 0.2), transparent 72%);
        animation: fl-breathe 9s ease-in-out infinite;
}
.fl-band__beam {
        position: absolute;
        bottom: 0;
        inset-inline: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(var(--fl-accent-soft-rgb), 0.45) 30%, rgba(var(--fl-violet-rgb), 0.35) 55%, transparent);
        background-size: 220% 100%;
        animation: fl-sheen 12s linear infinite;
}
.fl-band .fl-sub { max-width: 720px; }

/* v3.7.0 — inner-page hero (pagehead) layout variants */
.fl-band--center .fl-container {
        text-align: center;
}
.fl-band--center .fl-sub { margin-inline: auto; }
.fl-band--compact { padding: 148px 0 52px; }
.fl-band--plain {
        background:
                radial-gradient(900px 380px at 85% -20%, rgba(var(--fl-accent-rgb), 0.14), transparent 62%),
                transparent;
        border-bottom: 0;
}
.fl-band--plain::after { content: none; }
.fl-band--panel { padding: 158px 0 64px; }
.fl-band__panel {
        background: linear-gradient(180deg, rgba(var(--fl-surface-rgb), 0.78), rgba(var(--fl-bg2-rgb), 0.66));
        -webkit-backdrop-filter: blur(18px) saturate(1.2);
        backdrop-filter: blur(18px) saturate(1.2);
        border: 1px solid rgba(var(--fl-linec-rgb), 0.18);
        border-radius: 26px;
        padding: 46px 40px;
        box-shadow: 0 30px 80px rgba(var(--fl-shadow-rgb), 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ---------------------------------------------------------- Showcase */

.fl-shot {
        display: grid;
        grid-template-columns: 1fr 1.08fr;
        gap: clamp(32px, 5vw, 72px);
        align-items: center;
}
.fl-shot--end .fl-shot__media { order: 2; }
.fl-shot--end .fl-shot__body { order: 1; }

.fl-visual {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: clamp(44px, 5vw, 76px) clamp(36px, 4.5vw, 64px);
        background:
                radial-gradient(130% 110% at 50% 0%, rgba(var(--fl-accent-rgb), 0.16), rgba(var(--fl-accent-rgb), 0.03) 55%, transparent),
                linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
        border: 1px solid var(--fl-line);
        border-radius: 26px;
        overflow: hidden;
}
.fl-visual__glow {
        position: absolute;
        width: 62%;
        padding-top: 62%;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(var(--fl-accent-rgb), 0.3), transparent 66%);
        filter: blur(34px);
        animation: fl-breathe 7s ease-in-out infinite;
}
.fl-visual img,
.fl-visual__logo {
        position: relative;
        width: min(320px, 68%);
        border-radius: 16px;
        filter: drop-shadow(0 16px 38px rgba(var(--fl-shadow-rgb), 0.6));
}
/* Logo + Persian brand name float together as one unit */
.fl-visual__float {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        animation: fl-float 7.5s ease-in-out infinite;
}
.fl-visual__brandname {
        position: relative;
        margin-top: 20px;
        color: var(--fl-hero-text);
        font-size: 25px;
        font-weight: 800;
        line-height: 1.4;
        text-shadow: 0 0 26px rgba(var(--fl-accent-rgb), 0.45), 0 2px 14px rgba(var(--fl-shadow-rgb), 0.6);
}
.fl-visual__brandname:empty { display: none; }

/* v3.22.1 — boxless "orbit" showcase (home FaraSync section): the logo
   + brand name float inside three concentric dashed rings — inner ticks
   clockwise, middle ticks counter-clockwise (SMIL, generated in PHP) and
   the largest ring sweeps clockwise continuously with a much finer,
   streaming dash. All three rings cycle through a 12-hue palette.
   v3.22.1: the old halo is gone — no .fl-visual__glow span and no light
   sweep is rendered inside the orbit stage any more. */
.fl-visual--orbit {
        width: min(100%, 440px);
        padding: 18px;
        background: none;
        border: 0;
        border-radius: 0;
        overflow: visible;
        aspect-ratio: 1;
}
/* belt & braces: even if stale cached markup still carries a glow/sheen
   span, it must never appear inside the orbit stage */
.fl-visual--orbit .fl-visual__glow,
.fl-visual--orbit .fl-sheen { display: none !important; }
.fl-visual__rings {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
}
.fl-visual__ring { will-change: transform; }
/* the float is shrink-to-fit; % widths on the logo must resolve against the
   orbit stage, not the float — so widen the float inside the orbit variant */
.fl-visual--orbit .fl-visual__float { width: 100%; }
/* v3.25.0 — the S logo is 10% smaller again (200px → 160px → 144px,
   i.e. 28% below the v3.23.0 size) */
.fl-visual--orbit .fl-visual__logo { width: min(33.12%, 144px); }
.fl-visual--orbit .fl-visual__brandname { margin-top: 14px; font-size: clamp(22px, 2.3vw, 27px); text-shadow: none; }
/* v3.23.0 — the logo lockup breathes: a very soft scale up/down on both
   the logo and the brand name (same phase, so the whole lockup swells
   as one) while the container keeps its gentle float bob. The brand
   name also drifts through the same 12-hue palette the rings use. */
@keyframes fl-orbit-breath {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.04); }
}
@keyframes fl-brand-hue {
        0% { color: #4c8dff; }
        8.34% { color: #38bdf8; }
        16.67% { color: #22d3ee; }
        25% { color: #2dd4bf; }
        33.33% { color: #34d399; }
        41.67% { color: #a3e635; }
        50% { color: #fbbf24; }
        58.33% { color: #fb923c; }
        66.67% { color: #f87171; }
        75% { color: #f472b6; }
        83.33% { color: #e879f9; }
        91.67% { color: #8b7cf6; }
        100% { color: #4c8dff; }
}
.fl-visual--orbit .fl-visual__logo {
        animation: fl-orbit-breath 5.4s ease-in-out infinite;
        will-change: transform;
}
.fl-visual--orbit .fl-visual__brandname {
        animation:
                fl-orbit-breath 5.4s ease-in-out infinite,
                fl-brand-hue 36s linear infinite;
        will-change: transform;
}

.fl-shot__media { display: flex; flex-direction: column; align-items: center; }
.fl-shot__body .fl-badge { margin-bottom: 18px; }
.fl-shot__desc { margin-bottom: 20px; }

.fl-checks {
        display: grid;
        gap: 12px;
        margin: 0 0 28px;
        padding: 0;
        list-style: none;
}
.fl-checks li {
        display: flex;
        align-items: flex-start;
        gap: 11px;
        color: var(--fl-text);
        font-size: 15px;
        line-height: 2;
}
.fl-checks li .fl-ico {
        width: 19px;
        height: 19px;
        flex-shrink: 0;
        margin-top: 7px;
        padding: 2.5px;
        border-radius: 50%;
        background: rgba(var(--fl-ok-rgb), 0.12);
        color: var(--fl-ok);
        stroke-width: 2.4;
}

/* --------------------------------------------------------------- FAQ */

.fl-section--faq { padding-top: 0; }
.fl-faq__cat {
        font-size: 18px;
        font-weight: 700;
        color: var(--fl-accent-soft);
        margin: 40px 0 18px;
}
.fl-faq__cat:first-child { margin-top: 0; }

.fl-faq { display: grid; gap: 12px; }
.fl-faq__item {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.012));
        border: 1px solid var(--fl-line);
        border-radius: 16px;
        overflow: hidden;
        transition: border-color .35s ease;
}
.fl-faq__item[open] { border-color: rgba(var(--fl-accent-rgb), 0.4); }
.fl-faq__q {
        list-style: none;
        cursor: pointer;
        padding: 17px 22px;
        font-size: 15.5px;
        font-weight: 600;
        position: relative;
        padding-inline-end: 52px;
        user-select: none;
}
.fl-faq__q::-webkit-details-marker { display: none; }
.fl-faq__q::after {
        content: '';
        position: absolute;
        inset-inline-end: 20px;
        top: 50%;
        width: 9px;
        height: 9px;
        border-inline-end: 2px solid var(--fl-accent-soft);
        border-bottom: 2px solid var(--fl-accent-soft);
        transform: translateY(-70%) rotate(45deg);
        transition: transform .4s var(--fl-ease);
}
.fl-faq__item[open] .fl-faq__q::after { transform: translateY(-30%) rotate(225deg); }
.fl-faq__a {
        margin: 0;
        padding: 0 22px 20px;
        color: var(--fl-muted);
        font-size: 14.5px;
        line-height: 2.1;
        white-space: pre-line; /* v3.10.0: multi-line answers keep their breaks */
}

/* --------------------------------------------------------- Downloads */

.fl-dl { display: grid; gap: 14px; }
.fl-dl__btn {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 19px 22px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
        border: 1px solid var(--fl-line);
        border-radius: 16px;
        color: var(--fl-text);
        font-size: 15px;
        font-weight: 500;
        transition: transform .45s var(--fl-ease), border-color .35s ease, box-shadow .45s var(--fl-ease);
}
.fl-dl__btn .fl-ico {
        width: 21px;
        height: 21px;
        flex-shrink: 0;
        padding: 9px;
        box-sizing: content-box;
        border-radius: 12px;
        background: rgba(var(--fl-accent-rgb), 0.11);
        color: var(--fl-accent-soft);
        transition: background .3s ease;
}
a.fl-dl__btn:hover {
        transform: translateY(-3px);
        border-color: rgba(var(--fl-accent-rgb), 0.42);
        box-shadow: 0 14px 38px rgba(var(--fl-shadow-rgb), 0.45);
        color: #fff;
}
a.fl-dl__btn:hover .fl-ico { background: rgba(var(--fl-accent-rgb), 0.22); }
.fl-dl__btn--soon { opacity: .62; }
.fl-dl__btn--soon small {
        margin-inline-start: auto;
        font-size: 11.5px;
        color: var(--fl-muted);
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--fl-line);
        border-radius: 999px;
        padding: 3px 12px;
}

/* --------------------------------------------------------------- CTA */

.fl-cta { padding: 88px 0 108px; position: relative; }
.fl-cta--box .fl-cta__inner {
        position: relative;
        text-align: center;
        padding: clamp(48px, 6vw, 76px) clamp(24px, 5vw, 72px);
        background:
                linear-gradient(180deg, rgba(var(--fl-surface-rgb), 0.92), rgba(var(--fl-surface-rgb), 0.96)) padding-box,
                linear-gradient(120deg, rgba(var(--fl-accent-rgb), 0.55), rgba(var(--fl-violet-rgb), 0.3) 55%, rgba(var(--fl-accent2-rgb), 0.3)) border-box;
        border: 1px solid transparent;
        border-radius: 28px;
        overflow: hidden;
        box-shadow: var(--fl-shadow);
}
.fl-cta--box .fl-cta__inner::before {
        content: '';
        position: absolute;
        inset: -40% -20% auto;
        height: 70%;
        background: radial-gradient(46% 60% at 50% 8%, rgba(var(--fl-accent-rgb), 0.2), transparent 70%);
        pointer-events: none;
}
.fl-cta__p { color: var(--fl-muted); max-width: 640px; margin-inline: auto; }
.fl-cta--box .fl-cta__p { margin-bottom: 8px; }
.fl-cta__mail {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 26px 0 0;
        color: var(--fl-muted);
        font-size: 14.5px;
}
.fl-cta__mail .fl-ico { width: 17px; height: 17px; color: var(--fl-accent-soft); }

.fl-cta--inline { padding: 0 0 100px; }
.fl-cta__row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 34px 38px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
        border: 1px solid var(--fl-line);
        border-radius: 24px;
}
.fl-cta__row .fl-cta__p { max-width: 620px; margin: 0; flex: 1 1 320px; }

/* ------------------------------------------------------- whyhub (v3.18.0) */

/* The merged home section: cards grid + process sub-block + nested
   idea-CTA — all inside ONE section. The card/step grids reuse the
   regular .fl-grid markup; only the junctions need their own rhythm. */
.fl-whyhub__sub {
        margin-top: clamp(56px, 7vw, 92px);
        padding-top: clamp(34px, 4.6vw, 58px);
        position: relative;
}
.fl-whyhub__sub::before {
        content: '';
        position: absolute;
        top: 0;
        inset-inline: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(var(--fl-accent-rgb), 0.4), rgba(var(--fl-violet-rgb), 0.24), transparent);
}
.fl-whyhub__steps { margin-top: 26px; }
.fl-whyhub__cta {
        margin-top: clamp(52px, 6.6vw, 84px);
}
/* v3.19.0 — the invitation box is GONE (user request): no border, no
   surface, no glow — only the centered rhythm of title/text/button. */
div.fl-whyhub__cta { padding: 0; }
div.fl-whyhub__cta .fl-cta__inner {
        text-align: center;
        padding: 4px 0 0;
}

/* v3.22.0 — card & step titles sit BESIDE their icon / number badge
   (RTL: icon right, title left). Since v3.22.0 the cards and steps
   renderers print the wrapper too, so every cards/steps section shares
   this inline-head layout. */
.fl-card__head,
.fl-step__head {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-bottom: 11px;
}
.fl-card__head .fl-card__icon,
.fl-step__head .fl-step__num {
        margin-bottom: 0;
        flex: 0 0 auto;
}
.fl-card__head .fl-card__title,
.fl-step__head .fl-card__title {
        flex: 1 1 auto;
        min-width: 0;
}

/* ----------------------------------------------------------- Contact */

.fl-contact-grid {
        display: grid;
        grid-template-columns: 1fr; /* v3.7.0: form card is the only box — full width */
        gap: clamp(24px, 3.4vw, 44px);
        align-items: start;
}

.fl-contact,
.fl-info {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.036), rgba(255, 255, 255, 0.014));
        border: 1px solid var(--fl-line);
        border-radius: 24px;
        padding: clamp(26px, 3vw, 38px);
}
.fl-contact__title { font-size: 21px; font-weight: 800; margin: 0 0 24px; }

/* v3.35.0 — persistent link to the «پیگیری درخواست» page under the contact form.
   v3.46.0 — the tracking link itself is RED, hover BLUE, never underlined
   (user request); the shared .fl-trklink rules below are the source of
   truth for both the success notice and this persistent line. */
.fl-contact__track {
        margin: 16px 0 0;
        padding-top: 14px;
        border-top: 1px dashed var(--fl-line);
        color: var(--fl-muted);
        font-size: 13.5px;
        line-height: 2;
}

.fl-field { margin-bottom: 18px; }
.fl-field label {
        display: block;
        font-size: 13.5px;
        font-weight: 500;
        color: var(--fl-muted);
        margin-bottom: 9px;
}
.fl-field input,
.fl-field select,
.fl-field textarea {
        width: 100%;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--fl-line);
        border-radius: var(--fl-radius-s);
        color: var(--fl-text);
        font-family: inherit;
        font-size: 15px;
        line-height: 1.9;
        padding: 12px 16px;
        transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.fl-field textarea { resize: vertical; min-height: 130px; }
.fl-field select { cursor: pointer; }
.fl-field select option { background: var(--fl-surface); color: var(--fl-text); }
.fl-field input:focus,
.fl-field select:focus,
.fl-field textarea:focus {
        outline: none;
        border-color: rgba(var(--fl-accent-rgb), 0.65);
        background: rgba(var(--fl-accent-rgb), 0.055);
        box-shadow: 0 0 0 4px rgba(var(--fl-accent-rgb), 0.14);
}
.fl-req { color: var(--fl-err); }
.fl-field--hp { position: absolute; inset-inline-start: -9999px; opacity: 0; height: 0; overflow: hidden; }

.fl-info__title { font-size: 17px; font-weight: 700; margin: 0 0 22px; }
.fl-info__item {
        display: flex;
        align-items: flex-start;
        gap: 15px;
        padding: 15px 0;
        border-bottom: 1px dashed rgba(var(--fl-linec-rgb), 0.14);
}
.fl-info__item:last-child { border-bottom: 0; }
.fl-info__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        border-radius: 13px;
        background: rgba(var(--fl-accent-rgb), 0.1);
        border: 1px solid rgba(var(--fl-accent-rgb), 0.2);
        color: var(--fl-accent-soft);
}
.fl-info__icon .fl-ico { width: 20px; height: 20px; }
.fl-info__item strong { display: block; font-size: 15px; font-weight: 700; line-height: 1.8; }
.fl-info__item p { margin: 2px 0 0; color: var(--fl-muted); font-size: 13.5px; line-height: 2; }

.fl-notice {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 26px;
        padding: 15px 20px;
        border-radius: 14px;
        font-size: 14.5px;
        font-weight: 500;
}
.fl-notice .fl-ico { width: 19px; height: 19px; flex-shrink: 0; }
.fl-notice--ok {
        background: rgba(var(--fl-ok-rgb), 0.09);
        border: 1px solid rgba(var(--fl-ok-rgb), 0.35);
        color: #86efc8;
}
.fl-notice--err {
        background: rgba(var(--fl-err-rgb), 0.09);
        border: 1px solid rgba(var(--fl-err-rgb), 0.35);
        color: var(--fl-err-soft);
}

/* v3.38.0 — the long «پاسخ کارشناسان ما …» notice: its sentence and link
   used to be separate flex children, so on phones/tablets the text
   squeezed into a narrow column beside the link. One body span +
   start-aligned layout + real line-height keeps it a clean paragraph. */
.fl-notice--track { align-items: flex-start; }
.fl-notice--track .fl-notice__body { line-height: 2.05; }

/* v3.46.0 — every «صفحهٔ پیگیری درخواست» link on the contact page:
   red at rest, blue on hover, no underline anywhere (user request).
   One shared rule = the notice link and the persistent-line link can
   never drift apart again. */
.fl-contact__track a,
.fl-notice--track a,
a.fl-trklink {
        color: #ef4444;
        font-weight: 700;
        text-decoration: none;
        transition: color .18s ease;
}
.fl-contact__track a:hover,
.fl-notice--track a:hover,
a.fl-trklink:hover { color: #3b82f6; text-decoration: none; }
.fl-notice--track a { white-space: nowrap; }
@media (max-width: 768px) {
        .fl-notice { padding: 13px 16px; font-size: 13.5px; gap: 9px; }
        .fl-notice--track { padding: 14px 16px; }
        .fl-notice--track .fl-notice__body { line-height: 2.15; }
}

/* -------------------------------------------------------- Text block */

.fl-text { padding: 88px 0; }
.fl-text--center { text-align: center; }
.fl-text__body { color: var(--fl-muted); }
.fl-text__body p { margin: 0 0 14px; }
.fl-text__body p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ Footer */

.fl-footer {
        border-top: 1px solid var(--fl-line);
        background: linear-gradient(180deg, rgba(var(--fl-bg2-rgb), 0.6), rgba(var(--fl-bg-rgb), 0.9));
        padding: 64px 0 0;
        margin-top: 0; /* v3.7.0: user asked to remove the empty gap above the footer */
}
.fl-footer__grid {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: clamp(28px, 4vw, 56px);
        padding-bottom: 48px;
}
.fl-footer__about .fl-brand { margin-bottom: 18px; }
.fl-footer__about p {
        color: var(--fl-muted);
        font-size: 14px;
        line-height: 2.1;
        margin: 0;
        max-width: 380px;
}
.fl-footer__col h4 {
        font-size: 15px;
        font-weight: 700;
        margin: 6px 0 18px;
        color: var(--fl-text);
}
.fl-footer__col ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 11px;
}
.fl-footer__col a {
        color: var(--fl-muted);
        font-size: 14px;
        transition: color .25s ease, padding .3s var(--fl-ease);
}
.fl-footer__col a:hover { color: var(--fl-accent-soft); padding-inline-start: 5px; }
.fl-footer__soon { color: var(--fl-muted); font-size: 14px; opacity: .75; }
.fl-footer__bottom {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 20px 0;
        border-top: 1px solid var(--fl-line);
        color: var(--fl-muted);
        font-size: 13px;
}
.fl-footer__en {
        font-weight: 500;
        letter-spacing: .12em;
        color: var(--fl-muted);
}

/* ------------------------------------------------- Reveal animations */

.fl-reveal > * {
        opacity: 0;
        transform: translateY(26px);
        transition: opacity .85s var(--fl-ease), transform .85s var(--fl-ease);
        transition-delay: 0s;
}
.fl-reveal.is-visible > * { opacity: 1; transform: none; }
.fl-reveal.is-visible > *:nth-child(1) { transition-delay: .02s; }
.fl-reveal.is-visible > *:nth-child(2) { transition-delay: .08s; }
.fl-reveal.is-visible > *:nth-child(3) { transition-delay: .14s; }
.fl-reveal.is-visible > *:nth-child(4) { transition-delay: .2s; }
.fl-reveal.is-visible > *:nth-child(5) { transition-delay: .26s; }
.fl-reveal.is-visible > *:nth-child(6) { transition-delay: .32s; }
.fl-reveal.is-visible > *:nth-child(7) { transition-delay: .38s; }
.fl-reveal.is-visible > *:nth-child(8) { transition-delay: .44s; }

/* ----------------------------------------------------- Keyframes */

@keyframes fl-kenburns {
        from { transform: scale(1) translateY(0); }
        to { transform: scale(1.09) translateY(-14px); }
}
@keyframes fl-drift-1 {
        from { transform: translate(0, 0) scale(1); }
        to { transform: translate(6%, -5%) scale(1.14); }
}
@keyframes fl-drift-2 {
        from { transform: translate(0, 0) scale(1.06); }
        to { transform: translate(-7%, 6%) scale(1); }
}
@keyframes fl-dash {
        to { stroke-dashoffset: -540; }
}
@keyframes fl-sheen {
        0% { background-position: 220% 0; }
        58% { background-position: -140% 0; }
        100% { background-position: -140% 0; }
}
/* v3.12.0: compositor-only sweep for .fl-sheen::before */
@keyframes fl-sheen-x {
        0% { transform: translateX(-160%); }
        58% { transform: translateX(440%); }
        100% { transform: translateX(440%); }
}
@keyframes fl-breathe {
        0%, 100% { opacity: .55; transform: scale(.94); }
        50% { opacity: .9; transform: scale(1.06); }
}
@keyframes fl-float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
}
@keyframes fl-up {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------- Responsive */

@media (max-width: 1060px) {
        .fl-grid--4, .fl-grid--5, .fl-grid--6 { grid-template-columns: repeat(2, 1fr); }
        .fl-grid--3 { grid-template-columns: repeat(2, 1fr); }
        .fl-shot { grid-template-columns: 1fr; }
        .fl-shot--end .fl-shot__media { order: 0; }
        .fl-shot--end .fl-shot__body { order: 1; }
        .fl-contact-grid { grid-template-columns: 1fr; }
        .fl-footer__grid { grid-template-columns: 1fr 1fr; }
        .fl-nav__cta { display: none; }
}

@media (max-width: 760px) {
        body.fl-body { font-size: 15.5px; }
        .fl-container { width: calc(100% - 36px); }
        .fl-container--narrow { width: calc(100% - 36px); }

        /* ---- v3.12.0 mobile header: compact, high-contrast burger, avatar chip ----
           v3.64.1 — brand rules scoped to the HEADER: the bare selectors
           also shrank the FOOTER brand on phones; the footer must look
           exactly like desktop («فوتر مثل حالت دسکتاپ»). */
        .fl-header__inner { min-height: 62px; gap: 12px; }
        .fl-header .fl-brand__logo { width: 34px; height: 34px; border-radius: 9px; }
        .fl-header .fl-brand { gap: 9px; }
        .fl-header .fl-brand__text strong { font-size: 15px; }
        .fl-header .fl-brand__text small { font-size: 9px; letter-spacing: .26em; }

        /* ---- v3.14.0 mobile header: لوگو … [(آواتار)] [زنگوله] [برگر] ----
           The avatar (or login button) carries the auto margin so the whole
           group docks at the far (left) end, next to the burger. */
        .fl-userchip--link { margin-inline-start: auto; padding: 0 7px; } /* avatar only, far left */
        .fl-userchip--link .fl-userchip__name { display: none; }
        .fl-login-btn { margin-inline-start: auto; padding: 0 10px; } /* anonymous-avatar icon far left */
        .fl-login-btn span { display: none; }
        .fl-login-btn svg { width: 20px; height: 20px; }
        button.fl-logout-ico { display: none !important; } /* desktop icon logout — mobile keeps it in the sheet */
        .fl-only-m { display: flex !important; } /* labelled logout / guest login inside the sheet */
        .fl-burger {
                margin-inline-start: 0;
                width: 44px;
                height: 40px;
                align-items: center;
                padding: 0 10px;
                gap: 5px;
                border-radius: 10px;
                /* v3.13.0 — plain 3-line burger: no box, no gradient, no border */
                background: transparent;
                border: 0;
                box-shadow: none;
        }
        .fl-burger span { height: 2.5px; width: 100%; background: var(--fl-text); }
        .fl-burger:hover span { background: var(--fl-accent); }

        .fl-burger { display: flex; }
        .fl-nav {
                position: fixed;
                top: 62px;
                bottom: 0; /* v3.13.0 — the menu fills the whole viewport under the header */
                inset-inline: 0;
                flex-direction: column;
                align-items: stretch;
                gap: 4px;
                margin: 0;
                padding: 16px 18px 0;
                /* v3.13.0 — opaque, theme-aware: the fullscreen sheet must
                   never bleed the page through (the old .98 alpha did). */
                background: rgb(var(--fl-surface-rgb));
                border-bottom: 0;
                border-radius: 0;
                box-shadow: none;
                transform: translateY(-12px);
                opacity: 0;
                visibility: hidden;
                transition: transform .4s var(--fl-ease), opacity .3s ease, visibility .3s;
                max-height: none;
                overflow-y: auto;
                overscroll-behavior: contain;
        }
        .fl-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
        body.fl-body.admin-bar .fl-nav { top: 108px; }
        .fl-nav__link { padding: 13px 16px; font-size: 15.5px; }
        .fl-nav__link::after { display: none; }
        /* v3.20.0 — the data-driven menu wraps every entry in a
           .fl-nav__item div; in the mobile sheet it must stretch. */
        .fl-nav .fl-nav__item { display: flex; flex-direction: column; align-items: stretch; }
        .fl-nav .fl-nav__item > .fl-nav__link { display: flex; }

        /* v3.13.0 — submenus are collapsed groups; tapping the parent
           («پنل کاربری» / «پنل مدیریت») expands them (accordion). */
        .fl-nav__item--sub { display: flex; flex-direction: column; align-items: stretch; }
        .fl-nav__caret { display: block; }
        .fl-nav__item--sub.is-open .fl-nav__caret { transform: rotate(180deg); }
        .fl-nav__sub {
                position: static;
                min-width: 0;
                display: none; /* collapsed until the parent is tapped */
                opacity: 1;
                visibility: visible;
                transform: none;
                background: none;
                border: 0;
                box-shadow: none;
                padding: 2px 10px 6px;
                margin: -2px 10px 4px;
                border-inline-start: 2px solid rgba(120, 170, 255, .35);
                border-radius: 0;
        }
        .fl-nav__item--sub.is-open .fl-nav__sub { display: flex; flex-direction: column; gap: 2px; }
        .fl-nav__sub a { padding: 10px 12px; font-size: 14.5px; color: rgba(234, 241, 255, .78); }
        .fl-nav__sub a:hover { background: rgba(76, 141, 255, .1); }
        /* v3.14.0 — خروج/ورود rows inside the mobile sheet: faint white
           stroke + white text (the old red-tinted theme is retired).
           element+class specificity beats Hello Elementor's red #c36
           button reset that loads after fl-site.css. */
        button.fl-nav__logout {
                margin-top: 6px;
                border: 1px solid rgba(255, 255, 255, .16);
                border-radius: 10px;
                background: rgba(255, 255, 255, .05);
                color: #fff;
                text-align: start;
                padding: 13px 16px;
        }
        button.fl-nav__logout:hover { color: #fff !important; background: rgba(255, 255, 255, .1) !important; border-color: rgba(255, 255, 255, .34); }
        button.fl-nav__login {
                border: 1px solid rgba(120, 170, 255, .35);
                border-radius: 10px;
                background: rgba(76, 141, 255, .12);
                color: #fff;
                padding: 13px 16px;
        }
        .fl-nav__logout span, .fl-nav__login span { display: inline; }
        .fl-nav__logout svg, .fl-nav__login svg { width: 17px; height: 17px; }

        /* v3.13.0 — brand strip pinned to the bottom of the menu sheet
           (the uniform footer every fullscreen surface shares). */
        .fl-nav__foot {
                display: block;
                margin-top: auto;
                padding: 16px 0 calc(18px + env(safe-area-inset-bottom));
                text-align: center;
                font-size: 11.5px;
                letter-spacing: .04em;
                color: rgba(234, 241, 255, .38);
                border-top: 1px solid rgba(255, 255, 255, .06);
        }

        /* ---- v3.12.0 motion budget on phones: solid header (no per-frame
           backdrop blur), ambient loops off — the two biggest jank sources.
           Entrance animations (fl-up / data-fl-anim is-in) stay. */
        .fl-header,
        .fl-header--glass,
        .fl-header--center { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(var(--fl-bg-rgb), .95); }
        .fl-header.is-scrolled { background: rgba(var(--fl-bg-rgb), .98); }
        .fl-hero__bg img, .flx-glow, .flx-glow--1, .flx-glow--2,
        .flx-line, .flx-line--b, .fl-sheen::before, .fl-band__beam,
        .fl-band__glow, .fl-visual__glow, .fl-visual__float,
        .fla-orb, .fla-ring, .fla-star, .fla-breathe, .fla-dash,
        [data-fl-anim="float"], [data-fl-anim="pulse"], [data-fl-anim="glow"]::after,
        /* v3.16.0 شب‌تاب suite is desktop-only */
        .fl-header::before, .fl-brand::after, .fl-btn--primary::after,
        .fl-nav__link::before {
                animation: none !important;
        }
        /* and the ink titles fall back to a STATIC gradient (no repaint loop) */
        .fl-h1, .fl-h2, .fl-hero__title { animation: none !important; }
        .fl-visual__glow { filter: blur(22px); }

        .fl-section { padding: 68px 0; }
        .fl-band { padding: 136px 0 52px; }
        .fl-hero { padding: 132px 0 76px; }
        .fl-grid--2, .fl-grid--3, .fl-grid--4, .fl-grid--5, .fl-grid--6 { grid-template-columns: 1fr; }
        .fl-head { margin-bottom: 36px; }
        .fl-actions--center .fl-btn { width: 100%; }
        .fl-actions--center button.fl-btn { width: 100%; }
        /* v3.27.0 — the showcase CTA pair (home-fara / pr-fara: «مشاهده
           جزئیات فراسینک» / «دریافت لایسنس و شروع») sits in a plain
           .fl-actions, so the --center rule above never reached it and
           the two buttons stayed auto-width and start-aligned on phones. */
        .fl-shot__body .fl-actions { justify-content: center; }
        .fl-shot__body .fl-actions .fl-btn { width: 100%; }
        .fl-shot__body .fl-actions button.fl-btn { width: 100%; }
        .fl-cta__row { flex-direction: column; align-items: stretch; text-align: center; }
        .fl-footer__grid { grid-template-columns: 1fr; gap: 30px; }
        .fl-hero__lead { font-size: 15.5px; }
        .fl-visual img,
        .fl-visual__logo { width: min(250px, 62%); }
        .fl-visual__brandname { font-size: 22px; }
}

@media (max-width: 400px) {
        .fl-btn { height: 44px; padding: 0 18px; font-size: 14px; }
        button.fl-btn { height: 44px; padding: 0 18px; font-size: 14px; }
        .fl-hero__title { font-size: 26px; }
}

/* --------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        *, *::before, *::after {
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .01ms !important;
        }
        .fl-reveal > * { opacity: 1; transform: none; }
        /* v3.22.0 — SMIL clock-tick rings can't be slowed by the kill-switch
           above, so hide them entirely under reduced motion. */
        .fl-visual__rings { display: none; }
}

/* ------------------------------------------------------ Print safety */

.fl-sec:empty { display: none; }

/* ------------------------------------------------- Line-height control */

.fl-sec[data-fl-lh="tight"] { --fl-lh: 1.62; }
.fl-sec[data-fl-lh="loose"] { --fl-lh: 2.25; }

.fl-sec[data-fl-lh="tight"] p,
.fl-sec[data-fl-lh="tight"] li,
.fl-sec[data-fl-lh="tight"] .fl-card__text,
.fl-sec[data-fl-lh="tight"] .fl-hero__lead,
.fl-sec[data-fl-lh="tight"] .fl-faq__a,
.fl-sec[data-fl-lh="tight"] .fl-cta__p { line-height: 1.62; }

.fl-sec[data-fl-lh="loose"] p,
.fl-sec[data-fl-lh="loose"] li,
.fl-sec[data-fl-lh="loose"] .fl-card__text,
.fl-sec[data-fl-lh="loose"] .fl-hero__lead,
.fl-sec[data-fl-lh="loose"] .fl-faq__a,
.fl-sec[data-fl-lh="loose"] .fl-cta__p { line-height: 2.25; }

/* Headings get a gentler change so titles stay balanced */
.fl-sec[data-fl-lh="tight"] :is(h1, h2, h3, h4) { line-height: 1.45; }
.fl-sec[data-fl-lh="loose"] :is(h1, h2, h3, h4) { line-height: 1.85; }

/* ------------------------------------------------- Centered card icons */

/* Icon alignment is INDEPENDENT from text alignment: only the icon
   tile moves — card text follows per-field typography instead. */
.fl-grid--icenter .fl-card__icon { margin-inline: auto; }
.fl-grid--iend .fl-card__icon { margin-inline-start: auto; }

/* Empty icon tiles are invisible on the live site (the live editor
   shows them as dashed placeholders instead). */
.fl-noico { display: none; }

/* ------------------------------------------------- Anchor scroll offset */

[data-fl-sec] { scroll-margin-top: 96px; }

/* ------------------------------------------------- Footer extras */

.fl-footer__badge {
        display: inline-block;
        transition: transform .3s var(--fl-ease), opacity .3s ease;
}
.fl-footer__badge:hover { transform: translateY(-2px); }
.fl-footer__badge img {
        display: block;
        max-height: 84px;
        width: auto;
        border-radius: 10px;
}
.fl-footer__badge--empty {
        display: none;
}
.fl-footer__html {
        font-size: 14px;
        line-height: 1.9;
        color: var(--fl-muted);
        overflow: hidden;
}
.fl-footer__html img { max-height: 100px; width: auto; border-radius: 8px; }
.fl-footer__html iframe { max-width: 100%; border: 0; }
.fl-footer__html a { color: var(--fl-accent-soft); }

/* ==================================================================== */
/*  v3.3 — Design layer: backgrounds, density, animations, variants     */
/* ==================================================================== */

/* ------------------------------------------- custom bg image overlay */

.fl-sec__dim {
        position: absolute;
        inset: 0;
        background: #04070f;
        z-index: 0;
        pointer-events: none;
}

/* ------------------------------------------------- content width */

.fl-sec.fl-w--880 > .fl-container { max-width: 880px; }
.fl-sec.fl-w--1040 > .fl-container { max-width: 1040px; }
.fl-sec.fl-w--1200 > .fl-container { max-width: 1200px; }
.fl-sec.fl-w--1360 > .fl-container { max-width: 1360px; }

/* ------------------------------------------------- vertical density */

.fl-sec.fl-pad--compact { padding-block: 52px; }
.fl-sec.fl-pad--roomy { padding-block: 138px; }
.fl-sec.fl-pad--huge { padding-block: 190px; }

/* ------------------------------------------- panel body shell (v3.17.0)
   The design wrapper around the customer/admin/tickets panel body. Same
   design layer as every section; default look stays transparent so the
   pages only change once the admin picks a background/accent. */

.fl-sec--panelbody {
        position: relative;
        padding-block: 6px 72px;
        overflow: clip;
}

.fl-sec--panelbody > .fl-panelbody__in {
        position: relative;
        z-index: 1;
        min-width: 0;
}

.fl-sec--panelbody.fl-pad--compact { padding-block: 4px 36px; }
.fl-sec--panelbody.fl-pad--roomy { padding-block: 24px 110px; }

/* the art layer inherits .fl-sec__art positioning (absolute, z-0); panel
   content already carries its own stacking context */
.fl-sec--panelbody .flc-container { min-width: 0; }


/* ------------------------------------------------- gradient presets */

.fl-sec.fl-bgg-1, .fl-slide.fl-bgg-1, .fl-footer.fl-bgg-1 { background: linear-gradient(180deg, #0a1128, #101d3c); }
.fl-sec.fl-bgg-2, .fl-slide.fl-bgg-2, .fl-footer.fl-bgg-2 { background: linear-gradient(180deg, #0b1020, #221a44); }
.fl-sec.fl-bgg-3, .fl-slide.fl-bgg-3, .fl-footer.fl-bgg-3 { background: linear-gradient(180deg, #071a2c, #0d3352); }
.fl-sec.fl-bgg-4, .fl-slide.fl-bgg-4, .fl-footer.fl-bgg-4 { background: linear-gradient(180deg, #12101f, #2c1436); }
.fl-sec.fl-bgg-5, .fl-slide.fl-bgg-5, .fl-footer.fl-bgg-5 { background: linear-gradient(180deg, #0a1420, #123a44); }
.fl-sec.fl-bgg-6, .fl-slide.fl-bgg-6, .fl-footer.fl-bgg-6 { background: linear-gradient(180deg, #0e0f1c, #1d2748); }
.fl-sec.fl-bgg-7, .fl-slide.fl-bgg-7, .fl-footer.fl-bgg-7 { background: radial-gradient(900px 420px at 80% 10%, rgba(var(--fl-accent-rgb), 0.28), transparent 60%), linear-gradient(180deg, #090d1c, #131c38); }
.fl-sec.fl-bgg-8, .fl-slide.fl-bgg-8, .fl-footer.fl-bgg-8 { background: radial-gradient(800px 400px at 15% 90%, rgba(var(--fl-violet-rgb), 0.24), transparent 60%), linear-gradient(180deg, #0b0e1e, #1b1430); }

/* v3.4 — 16 more gradient presets */
.fl-sec.fl-bgg-9, .fl-slide.fl-bgg-9, .fl-footer.fl-bgg-9 { background: linear-gradient(180deg, #0c1220, #16233f); }
.fl-sec.fl-bgg-10, .fl-slide.fl-bgg-10, .fl-footer.fl-bgg-10 { background: linear-gradient(135deg, #0a0f1e, #14284d); }
.fl-sec.fl-bgg-11, .fl-slide.fl-bgg-11, .fl-footer.fl-bgg-11 { background: linear-gradient(160deg, #101426, #312b5e); }
.fl-sec.fl-bgg-12, .fl-slide.fl-bgg-12, .fl-footer.fl-bgg-12 { background: linear-gradient(180deg, #0d1b2a, #1b3a5c); }
.fl-sec.fl-bgg-13, .fl-slide.fl-bgg-13, .fl-footer.fl-bgg-13 { background: linear-gradient(180deg, #101018, #26243f); }
.fl-sec.fl-bgg-14, .fl-slide.fl-bgg-14, .fl-footer.fl-bgg-14 { background: radial-gradient(1000px 500px at 85% 15%, rgba(14, 165, 183, 0.25), transparent 60%), linear-gradient(180deg, #08131a, #0f2f38); }
.fl-sec.fl-bgg-15, .fl-slide.fl-bgg-15, .fl-footer.fl-bgg-15 { background: radial-gradient(900px 480px at 12% 12%, rgba(var(--fl-ok-rgb), 0.2), transparent 55%), linear-gradient(180deg, #071712, #0d2b22); }
.fl-sec.fl-bgg-16, .fl-slide.fl-bgg-16, .fl-footer.fl-bgg-16 { background: radial-gradient(800px 460px at 88% 85%, rgba(244, 114, 182, 0.18), transparent 60%), linear-gradient(180deg, #160b1c, #2b1230); }
.fl-sec.fl-bgg-17, .fl-slide.fl-bgg-17, .fl-footer.fl-bgg-17 { background: radial-gradient(900px 460px at 82% 18%, rgba(251, 191, 36, 0.16), transparent 58%), linear-gradient(180deg, #160f06, #2b2010); }
.fl-sec.fl-bgg-18, .fl-slide.fl-bgg-18, .fl-footer.fl-bgg-18 { background: linear-gradient(135deg, #0b1120 0%, #1e2a4a 52%, #312b5e 100%); }
.fl-sec.fl-bgg-19, .fl-slide.fl-bgg-19, .fl-footer.fl-bgg-19 { background: linear-gradient(180deg, #05070d, #101a33); }
.fl-sec.fl-bgg-20, .fl-slide.fl-bgg-20, .fl-footer.fl-bgg-20 { background: radial-gradient(1200px 600px at 50% -10%, rgba(var(--fl-accent-rgb), 0.3), transparent 65%), linear-gradient(180deg, #070b16, #0d1530); }
.fl-sec.fl-bgg-21, .fl-slide.fl-bgg-21, .fl-footer.fl-bgg-21 { background: linear-gradient(180deg, #0a0d16, #1c1030); }
.fl-sec.fl-bgg-22, .fl-slide.fl-bgg-22, .fl-footer.fl-bgg-22 { background: linear-gradient(135deg, #071a24, #0d3a4a 60%, #0b4f5c); }
.fl-sec.fl-bgg-23, .fl-slide.fl-bgg-23, .fl-footer.fl-bgg-23 { background: linear-gradient(180deg, #0e0a14, #241032); }
.fl-sec.fl-bgg-24, .fl-slide.fl-bgg-24, .fl-footer.fl-bgg-24 { background: linear-gradient(180deg, #090c14, #152036); }

/* --------------------------------------------- art animation helpers */

.fla-orb {
        transform-box: fill-box;
        transform-origin: center;
        animation: fla-orb 22s ease-in-out infinite alternate;
}
.fla-orb--2 { animation-duration: 30s; animation-delay: -9s; }
.fla-orb--3 { animation-duration: 26s; animation-delay: -15s; }
@keyframes fla-orb {
        from { transform: translate(0, 0) scale(1); opacity: .85; }
        to { transform: translate(46px, -34px) scale(1.14); opacity: 1; }
}

.fla-dash {
        stroke-dasharray: 6 14;
        animation: fla-dashmove 30s linear infinite;
}
@keyframes fla-dashmove { to { stroke-dashoffset: -400; } }

.fla-breathe {
        transform-box: fill-box;
        transform-origin: center;
        animation: fla-breathe 9s ease-in-out infinite;
}
@keyframes fla-breathe {
        0%, 100% { opacity: .45; transform: scale(1); }
        50% { opacity: 1; transform: scale(1.07); }
}

/* v3.16.0 — respect users who ask the OS for less motion:
   every ambient loop of the شب‌تاب suite goes still (statics remain). */
@media (prefers-reduced-motion: reduce) {
        .fl-header::before, .fl-brand::after, .fl-btn--primary::after,
        .fl-nav__link::before, .fl-band__beam, .fl-band__glow,
        .fl-h1, .fl-h2, .fl-hero__title {
                animation: none !important;
        }
}

/* ------------------------------------------------- entrance/ambient */

[data-fl-anim] { --fl-adur: .9s; }
[data-fl-anim][data-fl-speed="slow"] { --fl-adur: 1.5s; }
[data-fl-anim][data-fl-speed="fast"] { --fl-adur: .5s; }

[data-fl-anim="fade"] {
        opacity: 0;
        transition: opacity var(--fl-adur) ease;
}
[data-fl-anim="fade-up"] {
        opacity: 0;
        transform: translateY(26px);
        transition: opacity var(--fl-adur) ease, transform var(--fl-adur) cubic-bezier(.22, 1, .36, 1);
}
[data-fl-anim="zoom"] {
        opacity: 0;
        transform: scale(.94);
        transition: opacity var(--fl-adur) ease, transform var(--fl-adur) cubic-bezier(.22, 1, .36, 1);
}
[data-fl-anim="slide"] {
        opacity: 0;
        transform: translateX(40px);
        transition: opacity var(--fl-adur) ease, transform var(--fl-adur) cubic-bezier(.22, 1, .36, 1);
}
[data-fl-anim].is-in {
        opacity: 1;
        transform: none;
}

[data-fl-anim="float"] { animation: fl-anim-float 6s ease-in-out infinite; }
[data-fl-anim="pulse"] { animation: fl-anim-pulse 3.2s ease-in-out infinite; }
/* v3.12.0 — glow animates the OPACITY of a static shadow layer instead
   of the box-shadow itself (animating box-shadow repaints every frame). */
[data-fl-anim="glow"] { position: relative; }
[data-fl-anim="glow"]::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        box-shadow: 0 0 34px rgba(var(--fl-accent-rgb), 0.3);
        opacity: 0;
        animation: fl-anim-glow-o 4.5s ease-in-out infinite;
        pointer-events: none;
}

@keyframes fl-anim-float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-9px); }
}
@keyframes fl-anim-pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.025); }
}
@keyframes fl-anim-glow-o {
        0%, 100% { opacity: 0; }
        50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
        [data-fl-anim] {
                opacity: 1 !important;
                transform: none !important;
                animation: none !important;
                transition: none !important;
        }
        .fla-orb, .fla-dash, .fla-breathe { animation: none !important; }
}

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

.fl-hero--center {
        padding: 208px 0 132px;
}
.fl-hero--center .fl-hero__title { font-size: clamp(34px, 4.6vw, 56px); }
.fl-hero--center .fl-hero__lead { max-width: 720px; margin-inline: auto; }

.fl-hero--card .fl-hero__inner {
        background: linear-gradient(180deg, rgba(var(--fl-surface-rgb), 0.78), rgba(var(--fl-bg2-rgb), 0.66));
        -webkit-backdrop-filter: blur(18px) saturate(1.2);
        backdrop-filter: blur(18px) saturate(1.2);
        border: 1px solid rgba(var(--fl-linec-rgb), 0.18);
        border-radius: 26px;
        padding: 52px 44px;
        margin-top: 40px;
        box-shadow: 0 30px 80px rgba(var(--fl-shadow-rgb), 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.fl-hero--plain {
        background:
                radial-gradient(1000px 460px at 82% -10%, rgba(var(--fl-accent-rgb), 0.2), transparent 60%),
                radial-gradient(800px 420px at 8% 110%, rgba(var(--fl-violet-rgb), 0.16), transparent 60%),
                linear-gradient(180deg, var(--fl-hero-fade), var(--fl-bg));
}
.fl-hero--plain .fl-hero__bg { display: none; }
.fl-hero--plain { padding-top: 176px; }

/* ------------------------------------------------- header variants */

.fl-header--center .fl-header__inner {
        flex-direction: column;
        gap: 10px;
        padding-block: 16px 12px;
}
.fl-header--center .fl-nav {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
}

.fl-header--minimal {
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
}
.fl-header--minimal.is-scrolled {
        background: rgba(var(--fl-bg-rgb), 0.92);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
}

.fl-header--wide { background: rgba(var(--fl-bg-rgb), 0.8); }
.fl-header--wide .fl-header__inner { min-height: 86px; }
.fl-header--wide::after {
        content: '';
        position: absolute;
        inset-inline: 0;
        bottom: -1px;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(var(--fl-accent-rgb), 0.55), rgba(var(--fl-violet-rgb), 0.35), transparent);
}

/* v3.4 — four more header variants */
.fl-header--solid {
        background: #0b1120;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
}
.fl-header--solid.is-scrolled { background: #0b1120; box-shadow: 0 12px 40px rgba(var(--fl-shadow-rgb), 0.55); }

.fl-header--gradient {
        background: linear-gradient(90deg, #0a1128 0%, #16305e 55%, #2b1a5e 100%);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-bottom: 1px solid rgba(var(--fl-accent-rgb), 0.28);
}
.fl-header--gradient.is-scrolled { background: linear-gradient(90deg, #0a1128 0%, #16305e 55%, #2b1a5e 100%); }

.fl-header--pill {
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-bottom-color: transparent;
}
.fl-header--pill .fl-header__inner {
        max-width: 1650px; /* v3.15.0 — keep ≥1600px of content inside the pill padding */
        margin-top: 12px;
        min-height: 68px;
        padding-inline: 24px;
        background: rgba(var(--fl-bg2-rgb), 0.72);
        -webkit-backdrop-filter: blur(14px) saturate(1.25);
        backdrop-filter: blur(14px) saturate(1.25);
        border: 1px solid rgba(var(--fl-accent-rgb), 0.3);
        border-radius: 20px;
        box-shadow: 0 18px 44px rgba(var(--fl-shadow-rgb), 0.5);
}
.fl-header--pill.is-scrolled .fl-header__inner { background: rgba(var(--fl-surface-rgb), 0.92); }

.fl-header--split { background: rgba(var(--fl-bg-rgb), 0.88); }
.fl-header--split .fl-nav__link {
        padding: 6px 14px;
        border-inline-start: 1px solid rgba(var(--fl-linec-rgb), 0.22);
        border-radius: 0;
}
.fl-header--split .fl-nav__link:first-of-type { border-inline-start: 0; }
.fl-header--split::after {
        content: '';
        position: absolute;
        inset-inline: 0;
        bottom: -1px;
        height: 2px;
        background: linear-gradient(90deg, #3e7bf6, var(--fl-violet), #0ea5b7);
}

/* v3.4 — hero with a custom background (color / gradient / image):
   the default photo + heavy overlay step aside so the chosen
   background is actually visible. */
.fl-hero--custom .fl-hero__bg > img { display: none; }
.fl-hero--custom .fl-hero__bg::after { display: none; }
.fl-hero--custom .fl-sheen { opacity: 0.45; }

/* ------------------------------------------------- footer variants */

.fl-footer--center { text-align: center; }
.fl-footer--center .fl-footer__grid { justify-items: center; }
.fl-footer--center .fl-footer__brand,
.fl-footer--center .fl-footer__about .fl-brand { justify-content: center; }
.fl-footer--center .fl-footer__col ul { display: inline-block; }
.fl-footer--center .fl-footer__bottom { justify-content: center; }

.fl-footer--compact { padding-top: 34px; margin-top: 20px; }
.fl-footer--compact .fl-footer__grid { grid-template-columns: 1fr; gap: 14px; }
.fl-footer--compact .fl-footer__about p { max-width: 760px; margin-inline: auto; }
.fl-footer--compact .fl-footer__col h4 { margin-bottom: 6px; }
.fl-footer--compact .fl-footer__col ul { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; }
.fl-footer--compact .fl-footer__bottom { padding: 14px 0 18px; }

.fl-footer--cards .fl-footer__grid { gap: 18px; }
.fl-footer--cards .fl-footer__about,
.fl-footer--cards .fl-footer__col {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
        border: 1px solid rgba(var(--fl-linec-rgb), 0.14);
        border-radius: 18px;
        padding: 24px 22px;
}

/* ------------------------------------------------- showcase image fill */

.fl-shot__media--fill .fl-visual { width: 100%; max-width: none; }
.fl-shot__media--fill .fl-visual__logo { width: 100%; max-width: 460px; height: auto; }
/* v3.24.0 belt & braces: even if a --fill class ever lands on an orbit stage
   (stale cache), the logo must keep its smaller orbit size — never 460px */
.fl-shot__media--fill .fl-visual--orbit .fl-visual__logo { width: min(33.12%, 144px); }
.fl-shot__media--fill .fl-visual__brandname { font-size: clamp(17px, 1.6vw, 22px); }

/* ------------------------------------------------- edit-mode helpers */

body.fl-editing [data-fl-anim] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
}
body.fl-editing [data-fl-anim="float"],
body.fl-editing [data-fl-anim="pulse"],
body.fl-editing [data-fl-anim="glow"] {
        animation-play-state: paused !important;
}


/* ---- بنفش سلطنتی — royal violet / fuchsia ---- */
body.fl-theme-royal {
        --fl-bg: #0a0714; --fl-bg-2: #0f0a1f; --fl-surface: #171029; --fl-surface-2: #1e1536;
        --fl-bg-rgb: 10, 7, 20; --fl-bg2-rgb: 15, 10, 31; --fl-surface-rgb: 23, 16, 41; --fl-shadow-rgb: 5, 2, 15;
        --fl-linec-rgb: 168, 155, 214;
        --fl-line: rgba(168, 155, 214, 0.12); --fl-line-strong: rgba(168, 155, 214, 0.24);
        --fl-text: #ece7fb; --fl-muted: #a89ec9;
        --fl-accent: #a78bfa; --fl-accent-rgb: 167, 139, 250;
        --fl-accent-soft: #c4b5fd; --fl-accent-soft-rgb: 196, 181, 253; --fl-accent-hover: #e2d9ff;
        --fl-accent-2: #e879f9; --fl-accent2-rgb: 232, 121, 249;
        --fl-violet: #818cf8; --fl-violet-rgb: 129, 140, 248;
        --fl-grad: linear-gradient(120deg, #c4b5fd, #a78bfa 45%, #e879f9);
        --fl-btn-grad: linear-gradient(135deg, #8b5cf6, #6d28d9);
        --fl-glow: 0 0 0 1px rgba(167, 139, 250, 0.28), 0 12px 44px rgba(167, 139, 250, 0.13);
        --fl-shadow: 0 20px 60px rgba(5, 2, 15, 0.5);
        --fl-hero-ovl-rgb: 10, 7, 20; --fl-hero-fade: #0a0714;
        --fl-scroll: #2a1f47; --fl-scroll-h: #3d2e63;
}

/* ---- اقیانوس — deep marine / cyan / teal ---- */
body.fl-theme-ocean {
        --fl-bg: #04101d; --fl-bg-2: #06182b; --fl-surface: #0a2136; --fl-surface-2: #0e2a44;
        --fl-bg-rgb: 4, 16, 29; --fl-bg2-rgb: 6, 24, 43; --fl-surface-rgb: 10, 33, 54; --fl-shadow-rgb: 1, 6, 14;
        --fl-linec-rgb: 140, 180, 210;
        --fl-line: rgba(140, 180, 210, 0.12); --fl-line-strong: rgba(140, 180, 210, 0.24);
        --fl-text: #e4f2fc; --fl-muted: #8fb0c9;
        --fl-accent: #38bdf8; --fl-accent-rgb: 56, 189, 248;
        --fl-accent-soft: #7dd3fc; --fl-accent-soft-rgb: 125, 211, 252; --fl-accent-hover: #cfeeff;
        --fl-accent-2: #2dd4bf; --fl-accent2-rgb: 45, 212, 191;
        --fl-violet: #6366f1; --fl-violet-rgb: 99, 102, 241;
        --fl-grad: linear-gradient(120deg, #7dd3fc, #38bdf8 45%, #2dd4bf);
        --fl-btn-grad: linear-gradient(135deg, #0ea5e9, #0369a1);
        --fl-glow: 0 0 0 1px rgba(56, 189, 248, 0.28), 0 12px 44px rgba(56, 189, 248, 0.13);
        --fl-shadow: 0 20px 60px rgba(1, 6, 14, 0.5);
        --fl-hero-ovl-rgb: 4, 16, 29; --fl-hero-fade: #04101d;
        --fl-scroll: #14314d; --fl-scroll-h: #1d4568;
}

/* ---- زمرد شب — emerald / lime ---- */
body.fl-theme-emerald {
        --fl-bg: #051410; --fl-bg-2: #071c15; --fl-surface: #0a261c; --fl-surface-2: #0e3125;
        --fl-bg-rgb: 5, 20, 16; --fl-bg2-rgb: 7, 28, 21; --fl-surface-rgb: 10, 38, 28; --fl-shadow-rgb: 1, 10, 7;
        --fl-linec-rgb: 150, 200, 175;
        --fl-line: rgba(150, 200, 175, 0.12); --fl-line-strong: rgba(150, 200, 175, 0.24);
        --fl-text: #e5f6ec; --fl-muted: #93bcaa;
        --fl-accent: #10b981; --fl-accent-rgb: 16, 185, 129;
        --fl-accent-soft: #6ee7b7; --fl-accent-soft-rgb: 110, 231, 183; --fl-accent-hover: #c9f7e3;
        --fl-accent-2: #a3e635; --fl-accent2-rgb: 163, 230, 53;
        --fl-violet: #14b8a6; --fl-violet-rgb: 20, 184, 166;
        --fl-grad: linear-gradient(120deg, #6ee7b7, #10b981 45%, #14b8a6);
        --fl-btn-grad: linear-gradient(135deg, #059669, #047857);
        --fl-glow: 0 0 0 1px rgba(16, 185, 129, 0.28), 0 12px 44px rgba(16, 185, 129, 0.13);
        --fl-shadow: 0 20px 60px rgba(1, 10, 7, 0.5);
        --fl-hero-ovl-rgb: 5, 20, 16; --fl-hero-fade: #051410;
        --fl-scroll: #17402f; --fl-scroll-h: #215841;
}

/* ---- غروب گرم — sunset orange / rose ---- */
body.fl-theme-sunset {
        --fl-bg: #180c07; --fl-bg-2: #21100a; --fl-surface: #2b1710; --fl-surface-2: #361e14;
        --fl-bg-rgb: 24, 12, 7; --fl-bg2-rgb: 33, 16, 10; --fl-surface-rgb: 43, 23, 16; --fl-shadow-rgb: 14, 6, 2;
        --fl-linec-rgb: 216, 168, 140;
        --fl-line: rgba(216, 168, 140, 0.12); --fl-line-strong: rgba(216, 168, 140, 0.24);
        --fl-text: #fdf0e7; --fl-muted: #c9a48c;
        --fl-accent: #fb923c; --fl-accent-rgb: 251, 146, 60;
        --fl-accent-soft: #fdba74; --fl-accent-soft-rgb: 253, 186, 116; --fl-accent-hover: #ffe4c7;
        --fl-accent-2: #fb7185; --fl-accent2-rgb: 251, 113, 133;
        --fl-violet: #f59e0b; --fl-violet-rgb: 245, 158, 11;
        --fl-grad: linear-gradient(120deg, #fdba74, #fb923c 45%, #fb7185);
        --fl-btn-grad: linear-gradient(135deg, #ea7317, #c2410c);
        --fl-glow: 0 0 0 1px rgba(251, 146, 60, 0.28), 0 12px 44px rgba(251, 146, 60, 0.13);
        --fl-shadow: 0 20px 60px rgba(14, 6, 2, 0.5);
        --fl-hero-ovl-rgb: 24, 12, 7; --fl-hero-fade: #180c07;
        --fl-scroll: #4a2a18; --fl-scroll-h: #653c22;
}

/* ---- رز گلگون — rose / gold ---- */
body.fl-theme-rose {
        --fl-bg: #170a11; --fl-bg-2: #200e18; --fl-surface: #2a1320; --fl-surface-2: #351929;
        --fl-bg-rgb: 23, 10, 17; --fl-bg2-rgb: 32, 14, 24; --fl-surface-rgb: 42, 19, 32; --fl-shadow-rgb: 12, 4, 9;
        --fl-linec-rgb: 222, 168, 196;
        --fl-line: rgba(222, 168, 196, 0.12); --fl-line-strong: rgba(222, 168, 196, 0.24);
        --fl-text: #fceef4; --fl-muted: #c99bb0;
        --fl-accent: #fb7185; --fl-accent-rgb: 251, 113, 133;
        --fl-accent-soft: #fda4af; --fl-accent-soft-rgb: 253, 164, 175; --fl-accent-hover: #ffd6dc;
        --fl-accent-2: #fbbf24; --fl-accent2-rgb: 251, 191, 36;
        --fl-violet: #f472b6; --fl-violet-rgb: 244, 114, 182;
        --fl-grad: linear-gradient(120deg, #fda4af, #fb7185 45%, #f472b6);
        --fl-btn-grad: linear-gradient(135deg, #e11d48, #9f1239);
        --fl-glow: 0 0 0 1px rgba(251, 113, 133, 0.28), 0 12px 44px rgba(251, 113, 133, 0.13);
        --fl-shadow: 0 20px 60px rgba(12, 4, 9, 0.5);
        --fl-hero-ovl-rgb: 23, 10, 17; --fl-hero-fade: #170a11;
        --fl-scroll: #48203a; --fl-scroll-h: #653050;
}

/* ---- یاقوت سرخ — ruby / pink ---- */
body.fl-theme-ruby {
        --fl-bg: #160708; --fl-bg-2: #1f0a0c; --fl-surface: #291012; --fl-surface-2: #341518;
        --fl-bg-rgb: 22, 7, 8; --fl-bg2-rgb: 31, 10, 12; --fl-surface-rgb: 41, 16, 18; --fl-shadow-rgb: 12, 3, 4;
        --fl-linec-rgb: 224, 160, 164;
        --fl-line: rgba(224, 160, 164, 0.12); --fl-line-strong: rgba(224, 160, 164, 0.24);
        --fl-text: #fdeeee; --fl-muted: #c99a9d;
        --fl-accent: #f87171; --fl-accent-rgb: 248, 113, 113;
        --fl-accent-soft: #fca5a5; --fl-accent-soft-rgb: 252, 165, 165; --fl-accent-hover: #ffd9d9;
        --fl-accent-2: #f472b6; --fl-accent2-rgb: 244, 114, 182;
        --fl-violet: #ef4444; --fl-violet-rgb: 239, 68, 68;
        --fl-grad: linear-gradient(120deg, #fca5a5, #f87171 45%, #ef4444);
        --fl-btn-grad: linear-gradient(135deg, #dc2626, #991b1b);
        --fl-glow: 0 0 0 1px rgba(248, 113, 113, 0.28), 0 12px 44px rgba(248, 113, 113, 0.13);
        --fl-shadow: 0 20px 60px rgba(12, 3, 4, 0.5);
        --fl-hero-ovl-rgb: 22, 7, 8; --fl-hero-fade: #160708;
        --fl-scroll: #47191c; --fl-scroll-h: #63252a;
}

/* ---- کربن نئون — neutral black / lime neon / cyan ---- */
body.fl-theme-carbon {
        --fl-bg: #09090c; --fl-bg-2: #0d0d11; --fl-surface: #131318; --fl-surface-2: #1a1a21;
        --fl-bg-rgb: 9, 9, 12; --fl-bg2-rgb: 13, 13, 17; --fl-surface-rgb: 19, 19, 24; --fl-shadow-rgb: 0, 0, 0;
        --fl-linec-rgb: 170, 180, 190;
        --fl-line: rgba(170, 180, 190, 0.12); --fl-line-strong: rgba(170, 180, 190, 0.24);
        --fl-text: #f0f2f5; --fl-muted: #9aa3ad;
        --fl-accent: #a3e635; --fl-accent-rgb: 163, 230, 53;
        --fl-accent-soft: #d9f99d; --fl-accent-soft-rgb: 217, 249, 157; --fl-accent-hover: #eaffc4;
        --fl-accent-2: #22d3ee; --fl-accent2-rgb: 34, 211, 238;
        --fl-violet: #84cc16; --fl-violet-rgb: 132, 204, 22;
        --fl-grad: linear-gradient(120deg, #d9f99d, #a3e635 45%, #22d3ee);
        --fl-btn-grad: linear-gradient(135deg, #65a30d, #3f6212);
        --fl-glow: 0 0 0 1px rgba(163, 230, 53, 0.28), 0 12px 44px rgba(163, 230, 53, 0.13);
        --fl-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
        --fl-hero-ovl-rgb: 9, 9, 12; --fl-hero-fade: #09090c;
        --fl-scroll: #23232c; --fl-scroll-h: #33333f;
}

/* ---- روزِ آبی — light azure ---- */
body.fl-theme-daylight {
        --fl-bg: #f2f6fd; --fl-bg-2: #e9eff9; --fl-surface: #ffffff; --fl-surface-2: #f4f8ff;
        --fl-bg-rgb: 242, 246, 253; --fl-bg2-rgb: 233, 239, 249; --fl-surface-rgb: 255, 255, 255; --fl-shadow-rgb: 15, 23, 42;
        --fl-linec-rgb: 100, 116, 139;
        --fl-line: rgba(100, 116, 139, 0.16); --fl-line-strong: rgba(100, 116, 139, 0.3);
        --fl-text: #101c36; --fl-muted: #55648a;
        --fl-accent: #2563eb; --fl-accent-rgb: 37, 99, 235;
        --fl-accent-soft: #3b82f6; --fl-accent-soft-rgb: 59, 130, 246; --fl-accent-hover: #1d4ed8;
        --fl-accent-2: #0891b2; --fl-accent2-rgb: 8, 145, 178;
        --fl-violet: #7c3aed; --fl-violet-rgb: 124, 58, 237;
        --fl-grad: linear-gradient(120deg, #3b82f6, #2563eb 45%, #7c3aed);
        --fl-btn-grad: linear-gradient(135deg, #2563eb, #1d4ed8);
        --fl-glow: 0 0 0 1px rgba(37, 99, 235, 0.22), 0 12px 40px rgba(37, 99, 235, 0.12);
        --fl-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
        --fl-hero-ovl-rgb: 10, 16, 28; --fl-hero-fade: #0c1526;
        --fl-scroll: #c9d6ea; --fl-scroll-h: #a8bcd9;
}

/* ---- کرم مینیمال — warm light / amber / teal ---- */
body.fl-theme-cream {
        --fl-bg: #faf6ef; --fl-bg-2: #f4ede1; --fl-surface: #ffffff; --fl-surface-2: #fbf7f0;
        --fl-bg-rgb: 250, 246, 239; --fl-bg2-rgb: 244, 237, 225; --fl-surface-rgb: 255, 255, 255; --fl-shadow-rgb: 87, 70, 50;
        --fl-linec-rgb: 122, 104, 84;
        --fl-line: rgba(122, 104, 84, 0.16); --fl-line-strong: rgba(122, 104, 84, 0.3);
        --fl-text: #2a2018; --fl-muted: #7d6b56;
        --fl-accent: #d97706; --fl-accent-rgb: 217, 119, 6;
        --fl-accent-soft: #f59e0b; --fl-accent-soft-rgb: 245, 158, 11; --fl-accent-hover: #b45309;
        --fl-accent-2: #0f766e; --fl-accent2-rgb: 15, 118, 110;
        --fl-violet: #c2410c; --fl-violet-rgb: 194, 65, 12;
        --fl-grad: linear-gradient(120deg, #f59e0b, #d97706 45%, #c2410c);
        --fl-btn-grad: linear-gradient(135deg, #d97706, #b45309);
        --fl-glow: 0 0 0 1px rgba(217, 119, 6, 0.22), 0 12px 40px rgba(217, 119, 6, 0.12);
        --fl-shadow: 0 20px 50px rgba(87, 70, 50, 0.14);
        --fl-hero-ovl-rgb: 24, 16, 8; --fl-hero-fade: #1d1409;
        --fl-scroll: #d8c9b2; --fl-scroll-h: #c3b095;
}

/* ---- مه طوسی — pale gray light theme (v3.68.9) ----
   Body background is a very subtle gray (#eef1f5) so the page doesn't
   look pure-white. Slate accent (#475569) reads cleanly on this canvas,
   indigo secondary (#6366f1) for gradient richness. */
body.fl-theme-mist {
        --fl-bg: #eef1f5; --fl-bg-2: #e3e8ef; --fl-surface: #ffffff; --fl-surface-2: #f5f7fa;
        --fl-bg-rgb: 238, 241, 245; --fl-bg2-rgb: 227, 232, 239; --fl-surface-rgb: 255, 255, 255; --fl-shadow-rgb: 51, 65, 85;
        --fl-linec-rgb: 100, 116, 139;
        --fl-line: rgba(100, 116, 139, 0.16); --fl-line-strong: rgba(100, 116, 139, 0.3);
        --fl-text: #1e293b; --fl-muted: #64748b;
        --fl-accent: #475569; --fl-accent-rgb: 71, 85, 105;
        --fl-accent-soft: #64748b; --fl-accent-soft-rgb: 100, 116, 139; --fl-accent-hover: #334155;
        --fl-accent-2: #6366f1; --fl-accent2-rgb: 99, 102, 241;
        --fl-violet: #7c3aed; --fl-violet-rgb: 124, 58, 237;
        --fl-grad: linear-gradient(120deg, #64748b, #475569 45%, #6366f1);
        --fl-btn-grad: linear-gradient(135deg, #475569, #334155);
        --fl-glow: 0 0 0 1px rgba(71, 85, 105, 0.22), 0 12px 40px rgba(71, 85, 105, 0.12);
        --fl-shadow: 0 20px 50px rgba(51, 65, 85, 0.12);
        --fl-hero-ovl-rgb: 30, 41, 59; --fl-hero-fade: #1e293b;
        --fl-scroll: #cbd5e1; --fl-scroll-h: #94a3b8;
}

/* Light-theme glass fixes: white-glass fills need dark-tinted twins */
body.fl-theme-daylight .fl-btn--ghost,
body.fl-theme-cream .fl-btn--ghost,
body.fl-theme-mist .fl-btn--ghost,
body.fl-theme-daylight .fl-btn--outline,
body.fl-theme-cream .fl-btn--outline,
body.fl-theme-mist .fl-btn--outline {
        background: rgba(15, 28, 61, 0.05);
        border-color: rgba(15, 28, 61, 0.15);
        color: var(--fl-text);
}
body.fl-theme-daylight .fl-btn--ghost:hover,
body.fl-theme-cream .fl-btn--ghost:hover,
body.fl-theme-mist .fl-btn--ghost:hover,
body.fl-theme-daylight .fl-btn--outline:hover,
body.fl-theme-cream .fl-btn--outline:hover,
body.fl-theme-mist .fl-btn--outline:hover {
        background: rgba(var(--fl-accent-rgb), 0.09);
        color: var(--fl-accent-hover);
}
body.fl-theme-daylight .fl-nav__link:hover,
body.fl-theme-cream .fl-nav__link:hover,
body.fl-theme-mist .fl-nav__link:hover { color: var(--fl-accent); }
body.fl-theme-daylight ::selection,
body.fl-theme-cream ::selection,
body.fl-theme-mist ::selection { color: #fff; }

/* ------------------------------------------------- gradients 25–52
   g25–g32 are theme-reactive (follow the active palette accents);
   g33–g52 are fixed artisan gradients for explicit color statements. */
.fl-sec.fl-bgg-25, .fl-slide.fl-bgg-25, .fl-footer.fl-bgg-25 { background: radial-gradient(900px 460px at 82% 10%, rgba(var(--fl-accent-rgb), 0.26), transparent 62%), radial-gradient(760px 420px at 12% 92%, rgba(var(--fl-violet-rgb), 0.2), transparent 60%), linear-gradient(180deg, var(--fl-bg), var(--fl-bg-2)); }
.fl-sec.fl-bgg-26, .fl-slide.fl-bgg-26, .fl-footer.fl-bgg-26 { background: radial-gradient(1200px 520px at 50% -20%, rgba(var(--fl-accent-rgb), 0.3), transparent 65%), linear-gradient(180deg, var(--fl-bg), var(--fl-bg-2)); }
.fl-sec.fl-bgg-27, .fl-slide.fl-bgg-27, .fl-footer.fl-bgg-27 { background: radial-gradient(1400px 340px at 50% 112%, rgba(var(--fl-accent2-rgb), 0.26), transparent 62%), linear-gradient(180deg, var(--fl-bg), var(--fl-bg-2)); }
.fl-sec.fl-bgg-28, .fl-slide.fl-bgg-28, .fl-footer.fl-bgg-28 { background: radial-gradient(620px 460px at 18% 22%, rgba(var(--fl-accent-rgb), 0.2), transparent 60%), radial-gradient(700px 480px at 84% 30%, rgba(var(--fl-accent2-rgb), 0.16), transparent 60%), radial-gradient(620px 460px at 55% 100%, rgba(var(--fl-violet-rgb), 0.14), transparent 60%), linear-gradient(180deg, var(--fl-bg), var(--fl-bg-2)); }
.fl-sec.fl-bgg-29, .fl-slide.fl-bgg-29, .fl-footer.fl-bgg-29 { background: radial-gradient(800px 420px at 85% 15%, rgba(var(--fl-violet-rgb), 0.22), transparent 60%), linear-gradient(135deg, var(--fl-bg), var(--fl-surface-2)); }
.fl-sec.fl-bgg-30, .fl-slide.fl-bgg-30, .fl-footer.fl-bgg-30 { background: radial-gradient(1000px 420px at 50% 118%, rgba(var(--fl-accent-rgb), 0.34), transparent 62%), radial-gradient(700px 360px at 85% -12%, rgba(var(--fl-violet-rgb), 0.2), transparent 60%), linear-gradient(180deg, var(--fl-bg), var(--fl-bg-2)); }
.fl-sec.fl-bgg-31, .fl-slide.fl-bgg-31, .fl-footer.fl-bgg-31 { background: radial-gradient(820px 420px at 20% 0%, rgba(var(--fl-accent-rgb), 0.14), transparent 60%), linear-gradient(160deg, var(--fl-bg), var(--fl-surface-2)); }
.fl-sec.fl-bgg-32, .fl-slide.fl-bgg-32, .fl-footer.fl-bgg-32 { background: linear-gradient(115deg, transparent 40%, rgba(var(--fl-accent-rgb), 0.14) 50%, transparent 60%), linear-gradient(180deg, var(--fl-bg), var(--fl-bg-2)); }
.fl-sec.fl-bgg-33, .fl-slide.fl-bgg-33, .fl-footer.fl-bgg-33 { background: radial-gradient(900px 460px at 82% 100%, rgba(251, 146, 60, 0.3), transparent 62%), linear-gradient(165deg, #1a0b08, #3b1220 55%, #7c2d12); }
.fl-sec.fl-bgg-34, .fl-slide.fl-bgg-34, .fl-footer.fl-bgg-34 { background: radial-gradient(1000px 480px at 50% 118%, rgba(34, 211, 238, 0.28), transparent 65%), linear-gradient(180deg, #020d1a, #063a5e); }
.fl-sec.fl-bgg-35, .fl-slide.fl-bgg-35, .fl-footer.fl-bgg-35 { background: radial-gradient(820px 400px at 12% 0%, rgba(52, 211, 153, 0.22), transparent 60%), radial-gradient(820px 420px at 88% 90%, rgba(139, 124, 246, 0.22), transparent 60%), linear-gradient(180deg, #04101c, #0a2b33); }
.fl-sec.fl-bgg-36, .fl-slide.fl-bgg-36, .fl-footer.fl-bgg-36 { background: radial-gradient(900px 460px at 80% 8%, rgba(251, 191, 36, 0.24), transparent 60%), linear-gradient(135deg, #120d05, #2b2010 60%, #3f2f12); }
.fl-sec.fl-bgg-37, .fl-slide.fl-bgg-37, .fl-footer.fl-bgg-37 { background: radial-gradient(700px 400px at 18% 108%, rgba(232, 121, 249, 0.26), transparent 60%), radial-gradient(700px 380px at 85% 0%, rgba(34, 211, 238, 0.2), transparent 60%), linear-gradient(180deg, #0a0a14, #141032); }
.fl-sec.fl-bgg-38, .fl-slide.fl-bgg-38, .fl-footer.fl-bgg-38 { background: radial-gradient(880px 440px at 50% 120%, rgba(248, 113, 113, 0.28), transparent 62%), linear-gradient(180deg, #14060a, #3d0f1e); }
.fl-sec.fl-bgg-39, .fl-slide.fl-bgg-39, .fl-footer.fl-bgg-39 { background: radial-gradient(880px 460px at 15% -10%, rgba(167, 139, 250, 0.28), transparent 62%), radial-gradient(700px 400px at 90% 105%, rgba(232, 121, 249, 0.16), transparent 60%), linear-gradient(165deg, #0e0a1a, #251a44); }
.fl-sec.fl-bgg-40, .fl-slide.fl-bgg-40, .fl-footer.fl-bgg-40 { background: radial-gradient(900px 440px at 82% 100%, rgba(45, 212, 191, 0.24), transparent 62%), linear-gradient(165deg, #02141a, #04525c); }
.fl-sec.fl-bgg-41, .fl-slide.fl-bgg-41, .fl-footer.fl-bgg-41 { background: radial-gradient(860px 460px at 85% 8%, rgba(192, 132, 252, 0.26), transparent 62%), linear-gradient(150deg, #12041c, #37104f); }
.fl-sec.fl-bgg-42, .fl-slide.fl-bgg-42, .fl-footer.fl-bgg-42 { background: radial-gradient(880px 460px at 15% 100%, rgba(251, 191, 36, 0.22), transparent 60%), linear-gradient(150deg, #190d02, #4a2604); }
.fl-sec.fl-bgg-43, .fl-slide.fl-bgg-43, .fl-footer.fl-bgg-43 { background: radial-gradient(900px 480px at 80% 100%, rgba(52, 211, 153, 0.2), transparent 62%), linear-gradient(180deg, #04120c, #0d3a28); }
.fl-sec.fl-bgg-44, .fl-slide.fl-bgg-44, .fl-footer.fl-bgg-44 { background: radial-gradient(820px 440px at 85% 0%, rgba(217, 119, 6, 0.16), transparent 60%), linear-gradient(165deg, #120c08, #332014); }
.fl-sec.fl-bgg-45, .fl-slide.fl-bgg-45, .fl-footer.fl-bgg-45 { background: radial-gradient(860px 440px at 18% 105%, rgba(244, 114, 182, 0.22), transparent 60%), linear-gradient(165deg, #1c0a14, #40152c); }
.fl-sec.fl-bgg-46, .fl-slide.fl-bgg-46, .fl-footer.fl-bgg-46 { background: radial-gradient(920px 460px at 50% -12%, rgba(125, 211, 252, 0.24), transparent 62%), linear-gradient(180deg, #050d18, #123a5c); }
.fl-sec.fl-bgg-47, .fl-slide.fl-bgg-47, .fl-footer.fl-bgg-47 { background: radial-gradient(640px 400px at 22% 16%, rgba(129, 140, 248, 0.2), transparent 58%), radial-gradient(760px 420px at 84% 82%, rgba(139, 92, 246, 0.2), transparent 60%), linear-gradient(160deg, #05060f, #131b3f 55%, #2a1355); }
.fl-sec.fl-bgg-48, .fl-slide.fl-bgg-48, .fl-footer.fl-bgg-48 { background: radial-gradient(880px 440px at 82% 105%, rgba(251, 146, 60, 0.24), transparent 60%), linear-gradient(150deg, #1c0705, #4a1410); }
.fl-sec.fl-bgg-49, .fl-slide.fl-bgg-49, .fl-footer.fl-bgg-49 { background: radial-gradient(920px 460px at 50% 115%, rgba(16, 185, 129, 0.26), transparent 62%), linear-gradient(170deg, #02100a, #06402c); }
.fl-sec.fl-bgg-50, .fl-slide.fl-bgg-50, .fl-footer.fl-bgg-50 { background: radial-gradient(880px 480px at 50% 110%, rgba(139, 92, 246, 0.32), transparent 62%), linear-gradient(150deg, #0a0414, #2a0a4a 60%, #45129a); }
.fl-sec.fl-bgg-51, .fl-slide.fl-bgg-51, .fl-footer.fl-bgg-51 { background: radial-gradient(900px 440px at 15% 0%, rgba(186, 230, 253, 0.16), transparent 60%), linear-gradient(165deg, #040b16, #0c3050); }
.fl-sec.fl-bgg-52, .fl-slide.fl-bgg-52, .fl-footer.fl-bgg-52 { background: radial-gradient(860px 460px at 82% 100%, rgba(244, 114, 182, 0.28), transparent 62%), linear-gradient(150deg, #170310, #430a2c 60%, #6d0f45); }

/* Kashida (JK) fields that cannot be justified without looking artificial
   (short cards): the engine switches them to honest right alignment via
   this class — deliberately NOT an inline style, so the stored jk mode
   (text-justify: inter-character) is never overwritten. */
.fl-jk-right { text-align: right !important; }

/* jk fields: the inline «text-justify: inter-character» is a pure data
   marker (the engine finds its fields with it) — several engines give
   Persian nothing with it, so the EFFECTIVE justification is pinned to
   word gaps. The kashida engine stretches the letters itself; these gaps
   mop up the last few pixels of each line (kashida + word-spacing mix). */
[style*="inter-character"] { text-justify: inter-word !important; }

/* ============================================ Hero slideshow (v3.8.0) */

.fl-hero--slider,
.fl-hero--slider-card,
.fl-hero--slider-soft { padding: 0; }

.fl-hero__slider {
        position: relative;
        min-height: clamp(560px, 82vh, 780px);
        overflow: hidden;
}
.fl-hero__track { position: absolute; inset: 0; }

.fl-slide {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transform: scale(1.04);
        transition: opacity .9s ease, transform 1.6s var(--fl-ease), visibility 0s linear .9s;
}
.fl-slide.is-active {
        opacity: 1;
        visibility: visible;
        transform: none;
        z-index: 2;
        transition-delay: 0s, 0s, 0s;
}

.fl-slide__ovl {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
                linear-gradient(180deg, rgba(var(--fl-hero-ovl-rgb), 0.5) 0%, rgba(var(--fl-hero-ovl-rgb), 0.12) 45%, rgba(var(--fl-hero-ovl-rgb), 0.5) 100%),
                radial-gradient(1100px 560px at 50% 44%, transparent 34%, rgba(var(--fl-hero-ovl-rgb), 0.4) 100%);
}

.fl-slide__inner {
        position: relative;
        z-index: 1;
        text-align: center;
        width: min(880px, calc(100% - 48px));
}
.fl-slide .fl-badge { margin-bottom: 22px; }
.fl-slide__title {
        color: var(--fl-hero-text);
        font-size: clamp(30px, 4.7vw, 55px);
        font-weight: 800;
        line-height: 1.65;
        margin: 0 0 20px;
}
.fl-slide__title > span { display: block; }
.fl-slide__lead {
        max-width: 720px;
        margin: 0 auto 32px;
        color: var(--fl-hero-muted);
        font-size: 17px;
        line-height: 2.15;
}
.fl-slide .fl-actions { justify-content: center; }

/* Glass card variant */
.fl-hero--slider-card .fl-slide__inner {
        background: rgba(13, 21, 38, 0.52);
        border: 1px solid rgba(255, 255, 255, 0.13);
        border-radius: 22px;
        padding: 46px 48px;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        box-shadow: 0 34px 90px rgba(2, 6, 20, 0.5);
}

/* Soft inset variant */
.fl-hero--slider-soft { padding: 22px 0 0; background: var(--fl-bg); }
.fl-hero--slider-soft .fl-hero__slider { min-height: clamp(480px, 68vh, 660px); }
.fl-hero--slider-soft .fl-hero__track { inset: 14px; }
.fl-hero--slider-soft .fl-slide {
        border-radius: 24px;
        overflow: hidden;
        transition: opacity .9s ease, transform 1.6s var(--fl-ease), visibility 0s linear .9s;
}
.fl-hero--slider-soft .fl-slider__arrow--next { inset-inline-end: 36px; }
.fl-hero--slider-soft .fl-slider__arrow--prev { inset-inline-start: 36px; }
.fl-hero--slider-soft .fl-slider__dots { bottom: 36px; }

/* Arrows (RTL: next = left edge pointing left, prev = right edge pointing right) */
.fl-slider__arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        background: rgba(10, 16, 29, 0.45);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        color: #fff;
        cursor: pointer;
        transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.fl-slider__arrow:hover {
        background: rgba(var(--fl-accent-rgb), 0.55);
        border-color: rgba(var(--fl-accent-rgb), 0.7);
}
.fl-slider__arrow svg { width: 20px; height: 20px; }
.fl-slider__arrow--next { inset-inline-end: 20px; }
.fl-slider__arrow--prev { inset-inline-start: 20px; }

.fl-slider__dots {
        position: absolute;
        inset-inline: 0;
        bottom: 28px;
        z-index: 5;
        display: flex;
        justify-content: center;
        gap: 9px;
}
.fl-slider__dot {
        width: 9px;
        height: 9px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.34);
        cursor: pointer;
        transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.fl-slider__dot:hover { background: rgba(255, 255, 255, 0.65); }
.fl-slider__dot.is-active {
        background: var(--fl-accent);
        transform: scale(1.3);
        box-shadow: 0 0 10px rgba(var(--fl-accent-rgb), 0.8);
}

.fl-hero__slider.is-single .fl-slider__arrow,
.fl-hero__slider.is-single .fl-slider__dots { display: none; }

body.fl-editing .fl-slide { cursor: default; }
body.fl-editing .fl-slider__arrow,
body.fl-editing .fl-slider__dot { opacity: .85; }

/* ================================== Footer design layer + layouts (v3.8.0) */

.fl-footer { position: relative; overflow: hidden; }
.fl-footer > .fl-container { position: relative; z-index: 1; }

/* Vertical density + line-height (footer toolbar) */
.fl-footer.fl-pad--compact { padding-top: 36px; }
.fl-footer.fl-pad--roomy { padding-top: 108px; }
.fl-footer[data-fl-lh="tight"] p,
.fl-footer[data-fl-lh="tight"] li { line-height: 1.7; }
.fl-footer[data-fl-lh="loose"] p,
.fl-footer[data-fl-lh="loose"] li { line-height: 2.35; }

/* Split: wide about column + divider, columns on the other side */
.fl-footer--split .fl-footer__grid { grid-template-columns: 1.5fr 1fr 1fr; }
.fl-footer--split .fl-footer__about {
        border-inline-end: 1px solid var(--fl-line);
        padding-inline-end: 44px;
}
.fl-footer--split .fl-footer__about p { max-width: 420px; }

/* Minimal: no about text, auto columns, centered bottom */
.fl-footer--minimal .fl-footer__grid {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: 26px;
        padding-bottom: 26px;
}
.fl-footer--minimal .fl-footer__about p { display: none; }
.fl-footer--minimal .fl-footer__bottom { border-top: 0; justify-content: center; }

/* Banner: centered brand + columns as chips row */
.fl-footer--banner { text-align: center; }
.fl-footer--banner .fl-footer__grid { display: block; padding-bottom: 28px; }
.fl-footer--banner .fl-footer__about { margin-bottom: 24px; }
.fl-footer--banner .fl-footer__about .fl-brand { justify-content: center; }
.fl-footer--banner .fl-footer__about p { max-width: 660px; margin: 12px auto 0; }
.fl-footer--banner .fl-footer__col {
        display: inline-block;
        vertical-align: top;
        margin: 0 30px;
        text-align: center;
}
.fl-footer--banner .fl-footer__col ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 9px;
}
.fl-footer--banner .fl-footer__bottom { justify-content: center; }

/* Panel: whole footer in a floating glass card */
.fl-footer--panel {
        border-top: 0;
        background: transparent;
        padding: 34px 0 46px;
}
.fl-footer--panel > .fl-container {
        background: rgba(var(--fl-bg2-rgb), 0.55);
        border: 1px solid var(--fl-line);
        border-radius: 24px;
        padding: 44px 46px 0;
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        box-shadow: 0 34px 90px rgba(var(--fl-shadow-rgb), 0.4);
}
.fl-footer--panel .fl-footer__grid { padding-bottom: 38px; }

/* Editor: slides popover rows */
.fl-live-slide-row {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 7px 8px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        margin-bottom: 6px;
        background: rgba(255, 255, 255, 0.03);
}
.fl-live-slide-row__num {
        flex: none;
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 7px;
        background: rgba(var(--fl-accent-rgb), 0.25);
        font-size: 11px;
        font-weight: 700;
}
.fl-live-slide-row__title {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12.5px;
}
.fl-live-slide-row__grad {
        flex: none;
        width: 26px;
        height: 26px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        overflow: hidden;
        cursor: pointer;
}
.fl-live-slide-row__grad i { display: block; width: 100%; height: 100%; }

.fl-live-pop--slides { width: 340px; }
.fl-live-pop--slides #fl-slides-list { max-height: 300px; overflow-y: auto; }
.fl-live-pop--slides #fl-slides-grads {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 6px;
        margin-top: 10px;
        max-height: 190px;
        overflow-y: auto;
        padding: 2px;
}
.fl-live-pop--slides #fl-slides-grads .fl-live-grad {
        height: 30px;
        border-radius: 7px;
        border: 1.5px solid transparent;
        cursor: pointer;
}
.fl-live-pop--slides #fl-slides-grads .fl-live-grad.is-cur {
        border-color: var(--fl-accent, #4c8dff);
        box-shadow: 0 0 8px rgba(var(--fl-accent-rgb, 76, 141, 255), 0.6);
}

/* Responsive */
@media (max-width: 780px) {
        .fl-slide__title { font-size: clamp(25px, 7.4vw, 34px); }
        .fl-slide__lead { font-size: 14.5px; margin-bottom: 24px; }
        .fl-slider__arrow { display: none; } /* swipe instead */
        .fl-hero__slider { min-height: 540px; }
        .fl-hero--slider-card .fl-slide__inner { padding: 30px 20px; border-radius: 18px; }
        .fl-hero--slider-soft .fl-hero__track { inset: 9px; }

        .fl-footer--split .fl-footer__grid { grid-template-columns: 1fr; }
        .fl-footer--split .fl-footer__about { border-inline-end: 0; padding-inline-end: 0; }
        .fl-footer--panel > .fl-container { padding: 26px 20px 0; border-radius: 18px; }
        .fl-footer--banner .fl-footer__col { margin: 0 16px 14px; }
}

/* v3.11.0 — contact form: phone + email side by side. */
.fl-contact .fl-contact__cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
}
@media (max-width: 640px) {
        .fl-contact .fl-contact__cols { grid-template-columns: 1fr; gap: 0; }
}

/* [8] v3.20.0 — brand icons inside nav/menu slots keep crisp sizing */
.fl-nico .fl-ico--brand { width: 20px; height: 20px; padding: 1px; }
.fl-nav__sub .fl-ico--brand { width: 18px; height: 18px; }

/* [8.1] v3.20.0 — footer sub-links under their parent */
.fl-footer__sublink { margin-inline-start: 14px; font-size: 13px; }
.fl-footer__sublink::before { content: '—'; opacity: .5; margin-inline-end: 6px; }

/* ================================================================
   v3.56.0 — themed 404 («گم‌شده در فضا») — rendered by FLC_404 through
   template-fl.php. Uses the shared tokens only; every loop is
   compositor-friendly and disabled under prefers-reduced-motion.
   ================================================================ */
.fl-404 {
        position: relative;
        overflow: hidden;
        min-height: calc(100vh - 220px);
        display: flex;
        align-items: center;
        padding: calc(var(--fl-header-h, 76px) + 30px) 0 60px;
}
.fl-404__inner {
        position: relative;
        z-index: 1;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
}
/* star dust */
.fl-404__stars {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image:
                radial-gradient(1.4px 1.4px at 18% 26%, rgba(232, 237, 248, .5), transparent 60%),
                radial-gradient(1.2px 1.2px at 76% 14%, rgba(127, 178, 255, .55), transparent 60%),
                radial-gradient(1.6px 1.6px at 62% 68%, rgba(232, 237, 248, .38), transparent 60%),
                radial-gradient(1.1px 1.1px at 32% 82%, rgba(139, 124, 246, .5), transparent 60%),
                radial-gradient(1.3px 1.3px at 88% 52%, rgba(232, 237, 248, .32), transparent 60%),
                radial-gradient(1px 1px at 8% 58%, rgba(34, 211, 238, .45), transparent 60%),
                radial-gradient(1.2px 1.2px at 48% 38%, rgba(232, 237, 248, .28), transparent 60%);
        animation: fl-404-twinkle 5.5s ease-in-out infinite alternate;
}
@keyframes fl-404-twinkle {
        from { opacity: .45; }
        to { opacity: 1; }
}
/* aurora orbs */
.fl-404__orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(70px);
        pointer-events: none;
}
.fl-404__orb--1 { width: 460px; height: 460px; right: -120px; top: -140px; background: radial-gradient(circle, rgba(var(--fl-accent-rgb), .32), transparent 65%); animation: fl-404-orb 12s ease-in-out infinite; }
.fl-404__orb--2 { width: 420px; height: 420px; left: -140px; bottom: -160px; background: radial-gradient(circle, rgba(var(--fl-violet-rgb), .3), transparent 65%); animation: fl-404-orb 14s ease-in-out -5s infinite reverse; }
.fl-404__orb--3 { width: 360px; height: 360px; left: 32%; top: 8%; background: radial-gradient(circle, rgba(var(--fl-accent2-rgb), .2), transparent 65%); animation: fl-404-orb 16s ease-in-out -9s infinite; }
@keyframes fl-404-orb {
        0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
        50% { transform: translate3d(0, -44px, 0) scale(1.1); }
}
/* orbit stage: three dashed rings + the drifting FaraLabs mark */
.fl-404__stage {
        position: relative;
        width: 300px;
        height: 300px;
        margin-bottom: 10px;
        flex: none;
}
.fl-404__ring {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 1.6px dashed rgba(var(--fl-accent-rgb), .35);
}
.fl-404__ring--1 { animation: fl-404-spin 26s linear infinite; }
.fl-404__ring--2 { inset: 36px; border-color: rgba(var(--fl-accent2-rgb), .32); animation: fl-404-spin 19s linear infinite reverse; }
.fl-404__ring--3 { inset: 74px; border-color: rgba(var(--fl-violet-rgb), .34); animation: fl-404-spin 13s linear infinite; }
@keyframes fl-404-spin { to { transform: rotate(360deg); } }
/* v3.57.0 — the square glass card around the mark is gone (user
   request); the mark itself floats free, bigger, with only a soft
   drop-shadow glow instead of the boxed card. */
.fl-404__logo {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 104px;
        height: 104px;
        margin: -52px 0 0 -52px;
        filter: drop-shadow(0 12px 30px rgba(var(--fl-accent-rgb), .5)) drop-shadow(0 0 26px rgba(var(--fl-accent-rgb), .3));
        animation: fl-404-bob 6s ease-in-out infinite;
}
@keyframes fl-404-bob {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-14px); }
}
/* tiny satellites riding the rings */
.fl-404__sat {
        position: absolute;
        inset: 0;
        animation: fl-404-spin 19s linear infinite;
        pointer-events: none;
}
.fl-404__sat--a::before {
        content: "";
        position: absolute;
        top: -13px;
        left: 50%;
        margin-left: -13px;
        width: 26px;
        height: 26px;
        border-radius: 10px;
        display: block;
        background: rgba(var(--fl-accent2-rgb), .14);
        border: 1px solid rgba(var(--fl-accent2-rgb), .5);
        color: var(--fl-accent-2);
}
.fl-404__sat--a svg { position: absolute; top: -13px; left: 50%; margin-left: -13px; width: 26px; height: 26px; padding: 5px; box-sizing: border-box; }
.fl-404__sat--b { animation: fl-404-spin 26s linear infinite reverse; }
.fl-404__sat--b::before {
        content: "";
        position: absolute;
        bottom: -11px;
        left: 50%;
        margin-left: -11px;
        width: 22px;
        height: 22px;
        border-radius: 9px;
        display: block;
        background: rgba(var(--fl-violet-rgb), .16);
        border: 1px solid rgba(var(--fl-violet-rgb), .5);
        color: var(--fl-violet);
}
.fl-404__sat--b svg { position: absolute; bottom: -11px; left: 50%; margin-left: -11px; width: 22px; height: 22px; padding: 4px; box-sizing: border-box; }
/* the giant gradient ۴۰۴ */
.fl-404__code {
        position: relative;
        margin: 6px 0 2px;
        font-size: clamp(104px, 16vw, 176px);
        font-weight: 800;
        line-height: 1.05;
        letter-spacing: .02em;
        font-variant-numeric: tabular-nums;
        filter: drop-shadow(0 18px 60px rgba(var(--fl-accent-rgb), .35));
}
/* v3.57.0 — the title gets the SAME live-ink colour drift as the
   homepage/landing titles (background-position drift over the clipped
   gradient), gated by html.fl-ready like every other ink user. */
.fl-404__title {
        margin: 6px 0 12px;
        font-size: clamp(26px, 3.6vw, 44px);
        font-weight: 800;
        line-height: 1.5;
        background: linear-gradient(105deg,
                var(--fl-text) 30%,
                rgba(var(--fl-accent-soft-rgb), 0.95) 46%,
                rgba(var(--fl-accent2-rgb), 0.85) 54%,
                var(--fl-text) 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 .fl-404__title { animation-play-state: running; }
.fl-404__sub {
        max-width: 640px;
        margin: 0 0 30px;
        color: var(--fl-muted);
        font-size: 15.5px;
        line-height: 2.1;
}
.fl-404__actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        margin-bottom: 26px;
}
.fl-404__hint {
        margin: 0;
        padding: 9px 20px;
        border: 1px dashed var(--fl-line-strong);
        border-radius: 999px;
        color: var(--fl-muted);
        font-size: 12.5px;
        background: rgba(var(--fl-surface-rgb), .4);
}
@media (max-width: 640px) {
        .fl-404__stage { width: 230px; height: 230px; }
        .fl-404__ring--2 { inset: 28px; }
        .fl-404__ring--3 { inset: 56px; }
        .fl-404__logo { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
}
@media (prefers-reduced-motion: reduce) {
        .fl-404__stars, .fl-404__orb, .fl-404__ring, .fl-404__logo, .fl-404__sat { animation: none !important; }
}

/* ====================================================================
   v3.63.0 — mobile + tablet header (≤1060): compact sheet layout.
   The inline nav cannot coexist with a centered brand below 1060px
   (they collide around 780–950px), so phones AND tablets share the
   compact header: burger + fullscreen sheet, brand CENTERED —
   «در حالت موبایل و تبلت لوگو و نوشته وسط‌چین، دسکتاپ راست‌چین».
   The ≤760 rules below already carry the same values for phones;
   this block guarantees the tablet range and re-asserts the brand
   centering for both. Desktop (>1060) keeps the split header.
   ==================================================================== */
@media (max-width: 1060px) {
        .fl-header__inner { min-height: 62px; gap: 12px; position: relative; }
        /* v3.64.0 — scope to the HEADER brand only: the bare .fl-brand
           here also matched the FOOTER brand and absolutely centered it
           over the about paragraph (footer broke on phones/tablets).
           .fl-footer .fl-brand below re-asserts the normal flow. */
        .fl-header .fl-brand {
                position: absolute;
                inset-inline: 0;
                width: max-content;
                margin-inline: auto;
                justify-content: center;
        }
        .fl-header .fl-brand { gap: 9px; }
        .fl-header .fl-brand__logo { width: 34px; height: 34px; border-radius: 9px; }
        .fl-header .fl-brand__text strong { font-size: 15px; }
        .fl-header .fl-brand__text small { font-size: 9px; letter-spacing: .26em; }
        .fl-footer .fl-brand {
                position: relative;
                inset-inline: auto;
                width: auto;
                margin-inline: 0;
        }

        .fl-header .fl-userchip--link { margin-inline-start: auto; padding: 0 7px; }
        .fl-header .fl-userchip--link .fl-userchip__name { display: none; }
        .fl-header .fl-login-btn { margin-inline-start: auto; padding: 0 10px; }
        .fl-header .fl-login-btn span { display: none; }
        .fl-header .fl-login-btn svg { width: 20px; height: 20px; }
        button.fl-logout-ico { display: none !important; }

        .fl-burger {
                display: flex;
                margin-inline-start: 0;
                width: 44px;
                height: 40px;
                align-items: center;
                padding: 0 10px;
                gap: 5px;
                border-radius: 10px;
                background: transparent;
                border: 0;
                box-shadow: none;
        }
        .fl-burger span { height: 2.5px; width: 100%; background: var(--fl-text); }
        .fl-burger:hover span { background: var(--fl-accent); }

        .fl-nav {
                position: fixed;
                top: 62px;
                bottom: 0;
                inset-inline: 0;
                flex-direction: column;
                align-items: stretch;
                gap: 4px;
                margin: 0;
                padding: 16px 18px 0;
                background: rgb(var(--fl-surface-rgb));
                border-bottom: 0;
                border-radius: 0;
                box-shadow: none;
                transform: translateY(-12px);
                opacity: 0;
                visibility: hidden;
                transition: transform .4s var(--fl-ease), opacity .3s ease, visibility .3s;
                max-height: none;
                overflow-y: auto;
                overscroll-behavior: contain;
        }
        .fl-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
        body.fl-body.admin-bar .fl-nav { top: 108px; }
        .fl-nav__link { padding: 13px 16px; font-size: 15.5px; }
        .fl-nav__link::after { display: none; }
        .fl-nav .fl-nav__item { display: flex; flex-direction: column; align-items: stretch; }
        .fl-nav .fl-nav__item > .fl-nav__link { display: flex; }
        .fl-nav__item--sub { display: flex; flex-direction: column; align-items: stretch; }
        .fl-nav__caret { display: block; }
        .fl-nav__item--sub.is-open .fl-nav__caret { transform: rotate(180deg); }
        .fl-nav__sub {
                position: static;
                min-width: 0;
                display: none;
                opacity: 1;
                visibility: visible;
                transform: none;
                background: none;
                border: 0;
                box-shadow: none;
                padding: 2px 10px 6px;
                margin: -2px 10px 4px;
                border-inline-start: 2px solid rgba(120, 170, 255, .35);
                border-radius: 0;
        }
        .fl-nav__item--sub.is-open .fl-nav__sub { display: flex; flex-direction: column; gap: 2px; }
        .fl-nav__sub a { padding: 10px 12px; font-size: 14.5px; color: rgba(234, 241, 255, .78); }
        .fl-nav__sub a:hover { background: rgba(76, 141, 255, .1); }
        .fl-nav__foot {
                display: block;
                margin-top: auto;
                padding: 16px 0 calc(18px + env(safe-area-inset-bottom));
                text-align: center;
                font-size: 11.5px;
                letter-spacing: .04em;
                color: rgba(234, 241, 255, .38);
                border-top: 1px solid rgba(255, 255, 255, .06);
        }

        /* motion budget: solid header on tablets too */
        .fl-header,
        .fl-header--glass,
        .fl-header--center { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(var(--fl-bg-rgb), .95); }
        .fl-header.is-scrolled { background: rgba(var(--fl-bg-rgb), .98); }
        .fl-header::before, .fl-brand::after, .fl-nav__link::before { animation: none !important; }
}

/* ====================================================================
   v3.64.1 — mobile header brand back to the START (right in RTL).
   «لوگو «فرالبز» و متنش در حالت موبایل سمت راست باشد، مثل دسکتاپ» —
   the ≤1060 block above centers the brand for PHONES AND TABLETS; on
   phones only, the user wants the brand docked at the inline start
   exactly like the desktop split header. Tablets (761–1060) keep the
   centered brand, desktop (>1060) is untouched. Static (in-flow) also
   frees the row so the avatar/bell/burger cluster keeps its own end.
   MUST stay AFTER the ≤1060 block to win the cascade.
   ==================================================================== */
@media (max-width: 760px) {
        .fl-header .fl-brand {
                position: static;
                inset-inline: auto;
                width: auto;
                margin-inline: 0;
                justify-content: flex-start;
        }
}