/* =============================================================================
   InvestProp — site footer (2026 redesign)
   -----------------------------------------------------------------------------
   Loaded on every public page (linked from `site/partials/styles.blade.php`),
   so — unlike `home.css` / `pricing.css` — it cannot be scoped to a body class.
   Everything hangs off the footer's own root class `.ft`.

   Conventions this file respects (see the site design system):
     • dark is the DEFAULT theme (`html.dark`); light is the opt-in override,
       and neither compiled stylesheet declares a global text colour, so every
       block below sets its own `color`.
     • RTL is the default direction; logical properties are used throughout.
     • `.container-fluid` is a max-width container, not full-bleed.
     • `position: sticky` never works on this site (`html`/`body` carry
       `overflow-x: hidden`), so nothing here relies on it.

   NOTE on specificity: `mainPage.css` still ships the previous
   `footer { … }` block for the seasonal pages, and its dark rule computes to
   `footer:is(.dark *)` = (0,1,1). The resets below therefore use
   `html footer.ft` (0,1,2) so they win regardless of stylesheet order.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   0. Tokens + neutralising the inherited `footer` element rules
   -------------------------------------------------------------------------- */

.ft {
    /* palette — mirrors the home page's --hx-* set */
    --ft-primary: #007BFF;
    --ft-primary-2: #1C8AFF;
    --ft-cyan: #5ED2EC;
    --ft-sky: #8DC4FF;
    --ft-mint: #3DD68C;

    /* surfaces & type (dark = default) */
    --ft-surface: rgba(7, 20, 37, .72);
    --ft-surface-2: #071426;
    --ft-line: rgba(141, 196, 255, .14);
    --ft-line-strong: rgba(141, 196, 255, .28);
    --ft-text: #EAF2FF;
    --ft-text-2: #C3D4EA;
    --ft-muted: #8FA5C2;

    --ft-grad: linear-gradient(94.98deg, #007BFF 4.01%, #1C8AFF 103.03%);
    --ft-glow: 0 10px 40px -12px rgba(0, 123, 255, .55);
    --ft-radius: 20px;

    /* pointer position for the spotlight, updated by footer.js */
    --ft-mx: 50%;
    --ft-my: 0%;
}

html:not(.dark) .ft {
    --ft-surface: rgba(255, 255, 255, .86);
    --ft-surface-2: #FFFFFF;
    --ft-line: rgba(0, 72, 153, .12);
    --ft-line-strong: rgba(0, 72, 153, .22);
    --ft-text: #0A1A30;
    --ft-text-2: #2B4463;
    --ft-muted: #5D7492;
}

html footer.ft {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: 90px;
    padding-top: 0;
    background: none;
    color: var(--ft-text-2);
}

/* The compiled sheet paints a 5px gradient bar here; this is the replacement —
   a 1px hairline that fades out towards the trailing edge. */
.ft::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(101, 163, 251, 0) 0%,
        rgba(101, 163, 251, .85) 22%,
        rgba(94, 210, 236, .7) 50%,
        rgba(101, 163, 251, 0) 100%);
    z-index: 2;
}

.ft-inner {
    position: relative;
    z-index: 1;
    padding-block: 56px 26px;
}

/* -----------------------------------------------------------------------------
   1. Ambient background art
   -------------------------------------------------------------------------- */

.ft-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(0, 123, 255, .16), rgba(0, 123, 255, 0) 62%),
        linear-gradient(180deg, rgba(5, 16, 30, 0) 0%, rgba(5, 16, 30, .8) 26%, #04101F 100%);
}

html:not(.dark) .ft-canvas {
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(0, 123, 255, .12), rgba(0, 123, 255, 0) 62%),
        linear-gradient(180deg, rgba(232, 240, 253, 0) 0%, rgba(232, 240, 253, .85) 26%, #E7EFFB 100%);
}

.ft-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(141, 196, 255, .07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(141, 196, 255, .07) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 10%, #000 0%, transparent 78%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 10%, #000 0%, transparent 78%);
}

html:not(.dark) .ft-grid {
    background-image:
        linear-gradient(to right, rgba(0, 90, 190, .09) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 90, 190, .09) 1px, transparent 1px);
}

.ft-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: .45;
}

html:not(.dark) .ft-orb { opacity: .3; }

/* Physical `left`/`right` on purpose: the ambient art is decorative and must
   not mirror with the text direction. */
.ft-orb--a {
    top: -140px;
    left: 8%;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(0, 123, 255, .55), rgba(0, 123, 255, 0) 70%);
}

.ft-orb--b {
    bottom: -220px;
    right: 4%;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(94, 210, 236, .38), rgba(94, 210, 236, 0) 70%);
}

/* Pointer-tracked glow. `footer.js` writes --ft-mx / --ft-my and toggles
   `.is-live` (never on touch or reduced motion). */
.ft-spot {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .45s ease;
    background: radial-gradient(460px circle at var(--ft-mx) var(--ft-my),
        rgba(0, 123, 255, .20), rgba(0, 123, 255, 0) 68%);
}

.ft.is-live .ft-spot { opacity: 1; }

html:not(.dark) .ft-spot {
    background: radial-gradient(460px circle at var(--ft-mx) var(--ft-my),
        rgba(0, 123, 255, .13), rgba(0, 123, 255, 0) 68%);
}

/* -----------------------------------------------------------------------------
   2. Scroll reveal
   -----------------------------------------------------------------------------
   `footer.js` adds `.is-in`. If IntersectionObserver is missing it adds it
   immediately, so content can never be stranded at opacity 0.
   -------------------------------------------------------------------------- */

.ft-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--ft-d, 0ms);
}

.ft-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* -----------------------------------------------------------------------------
   3. Customer-club / newsletter band
   -----------------------------------------------------------------------------
   A 1px gradient border drawn by a conic beam that rotates behind an opaque
   inner surface — transform-only animation, so it stays cheap.
   -------------------------------------------------------------------------- */

.ft-club {
    position: relative;
    padding: 1px;
    border-radius: 26px;
    overflow: hidden;
    background: var(--ft-line-strong);
    box-shadow: 0 40px 90px -60px rgba(0, 123, 255, .9);
}

.ft-club__beam {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160%;
    aspect-ratio: 1;
    translate: -50% -50%;
    background: conic-gradient(from 0deg,
        rgba(0, 123, 255, 0) 0deg,
        rgba(0, 123, 255, 0) 200deg,
        rgba(94, 210, 236, .75) 268deg,
        rgba(0, 123, 255, .95) 300deg,
        rgba(0, 123, 255, 0) 340deg);
    animation: ft-beam 9s linear infinite;
}

@keyframes ft-beam {
    to { rotate: 360deg; }
}

.ft-club__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 26px 40px;
    padding: clamp(24px, 3.4vw, 40px) clamp(20px, 3.6vw, 44px);
    border-radius: 25px;
    background:
        radial-gradient(90% 160% at 88% 0%, rgba(0, 123, 255, .28), rgba(0, 123, 255, 0) 60%),
        linear-gradient(150deg, #0A1E38 0%, #050F1E 100%);
}

html:not(.dark) .ft-club__inner {
    background:
        radial-gradient(90% 160% at 88% 0%, rgba(0, 123, 255, .16), rgba(0, 123, 255, 0) 60%),
        linear-gradient(150deg, #FFFFFF 0%, #EDF4FF 100%);
}

.ft-club__copy { flex: 1 1 320px; }

.ft-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--ft-line-strong);
    background: rgba(0, 123, 255, .12);
    color: var(--ft-sky);
    font-size: 12.5px;
    font-weight: 700;
}

html:not(.dark) .ft-badge { color: #0B62C4; }

.ft-badge__dot {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ft-mint);
}

.ft-badge__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    animation: ft-ping 2.2s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes ft-ping {
    0%   { transform: scale(1);   opacity: .7; }
    80%  { transform: scale(2.8); opacity: 0; }
    100% { transform: scale(2.8); opacity: 0; }
}

.ft-club__title {
    margin: 0;
    font-size: clamp(19px, 2.4vw, 26px);
    font-weight: 900;
    line-height: 1.55;
    color: var(--ft-text);
}

.ft-club__desc {
    margin: 10px 0 0;
    max-width: 46ch;
    font-size: 14px;
    line-height: 2;
    color: var(--ft-muted);
}

/* --- the form ------------------------------------------------------------ */

.ft-form { flex: 1 1 340px; max-width: 460px; }

.ft-field {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px;
    padding-inline-start: 16px;
    border-radius: 18px;
    border: 1px solid var(--ft-line-strong);
    background: rgba(255, 255, 255, .06);
    transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}

html:not(.dark) .ft-field { background: rgba(10, 40, 80, .04); }

.ft-field:focus-within {
    border-color: var(--ft-primary-2);
    background: rgba(0, 123, 255, .1);
    box-shadow: 0 0 0 4px rgba(0, 123, 255, .16);
}

.ft-field__icon {
    flex: 0 0 auto;
    font-size: 19px;
    color: var(--ft-muted);
}

.ft-field:focus-within .ft-field__icon { color: var(--ft-primary-2); }

.ft-field__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 42px;
    border: 0;
    background: transparent;
    outline: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--ft-text);
}

.ft-field__input::placeholder {
    color: var(--ft-muted);
    font-size: 13.5px;
}

.ft-submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 44px;
    padding-inline: 20px;
    border: 0;
    border-radius: 14px;
    background: var(--ft-grad);
    box-shadow: var(--ft-glow);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .25s ease, filter .2s ease;
}

.ft-submit:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 46px -12px rgba(0, 123, 255, .75);
}

.ft-submit:active { transform: translateY(0); }

.ft-submit:disabled,
.ft-submit.is-busy {
    cursor: progress;
    filter: saturate(.6);
    transform: none;
}

.ft-submit i { font-size: 17px; }

/* The send glyph points along the reading direction. */
html[dir="ltr"] .ft-submit i { transform: scaleX(-1); }

.ft-msg {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 2px 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.8;
}

.ft-msg--ok  { color: var(--ft-mint); }
.ft-msg--err { color: #FF7A85; }

html:not(.dark) .ft-msg--ok  { color: #14894F; }
html:not(.dark) .ft-msg--err { color: #C62334; }

/* Brief confirmation pulse around the field after a successful subscribe. */
.ft-form.is-done .ft-field {
    border-color: var(--ft-mint);
    box-shadow: 0 0 0 4px rgba(61, 214, 140, .18);
}

/* -----------------------------------------------------------------------------
   4. Brand column + link columns
   -------------------------------------------------------------------------- */

.ft-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 48px 44px;
    margin-top: 56px;
}

.ft-brand {
    flex: 1 1 300px;
    max-width: 400px;
}

.ft-logo {
    display: inline-block;
    line-height: 0;
    transition: transform .25s ease, filter .25s ease;
}

.ft-logo:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 10px 26px rgba(0, 123, 255, .45));
}

.ft-logo img {
    width: 190px;
    max-width: 100%;
    height: auto;
}

.ft-about {
    margin: 22px 0 0;
    font-size: 14px;
    line-height: 2.1;
    color: var(--ft-muted);
    text-align: justify;
}

html[dir="ltr"] .ft-about { text-align: start; }

/* --- socials -------------------------------------------------------------- */

.ft-social { margin-top: 26px; }

.ft-social__label {
    display: block;
    margin-bottom: 12px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--ft-text-2);
}

.ft-social__row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ft-soc {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    border: 1px solid var(--ft-line);
    background: var(--ft-surface);
    backdrop-filter: blur(18px);
    color: var(--ft-text-2);
    overflow: hidden;
    transition: transform .22s ease, border-color .22s ease, box-shadow .28s ease;
}

.ft-soc img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}

.ft-soc__text {
    font-size: 15px;
    font-weight: 800;
    color: inherit;
}

/* A gradient wash slides up from under the icon on hover. */
.ft-soc::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ft-grad);
    opacity: 0;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}

.ft-soc > * { position: relative; z-index: 1; }

.ft-soc:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: 0 14px 34px -14px rgba(0, 123, 255, .85);
    color: #fff;
}

.ft-soc:hover::after {
    opacity: 1;
    transform: translateY(0);
}

.ft-soc:hover img { transform: scale(1.12); }

.ft-soc:focus-visible {
    outline: 2px solid var(--ft-primary-2);
    outline-offset: 3px;
}

/* The shipped social PNGs are white, and so are any brand marks an admin
   uploads on a transparent ground — on a light glass tile they vanish. Keep the
   chip dark in light mode (the hover gradient is white-on-blue either way)
   rather than filtering icons whose colours we do not control. */
html:not(.dark) .ft-soc {
    background: #0C1E36;
    border-color: rgba(10, 40, 80, .18);
    color: #EAF2FF;
}

/* --- link columns --------------------------------------------------------- */

/* The column count comes from the data (`--ft-cols`, written by the partial),
   so the group is exactly as wide as it needs to be and sits flush against the
   far edge instead of leaving one stretched track of dead space — which is what
   `repeat(auto-fit, minmax(…, 1fr))` produces when the CMS has only two
   columns. */
.ft-nav {
    flex: 0 1 auto;
    display: grid;
    grid-template-columns: repeat(var(--ft-cols, 2), minmax(130px, 190px));
    gap: 34px 36px;
    align-content: start;
}

.ft-col__title {
    position: relative;
    margin: 0 0 20px;
    padding-bottom: 12px;
    font-size: 15px;
    font-weight: 800;
    color: var(--ft-text);
}

/* Short gradient rule under each heading, growing when the column is hovered. */
.ft-col__title::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--ft-grad);
    transition: width .3s cubic-bezier(.22, 1, .36, 1);
}

.ft-col:hover .ft-col__title::after { width: 46px; }

.ft-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ft-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.7;
    color: var(--ft-muted);
    text-decoration: none;
    transition: color .22s ease;
}

/* The bullet stretches into a dash on hover — no translate, so nothing has to
   be mirrored for RTL. */
.ft-link__dash {
    flex: 0 0 auto;
    width: 6px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: .5;
    transition: width .28s cubic-bezier(.22, 1, .36, 1), background-color .22s ease, opacity .22s ease;
}

.ft-link:hover,
.ft-link:focus-visible { color: var(--ft-text); }

.ft-link:hover .ft-link__dash,
.ft-link:focus-visible .ft-link__dash {
    width: 18px;
    opacity: 1;
    background: var(--ft-primary-2);
}

.ft-link:focus-visible {
    outline: 2px solid var(--ft-primary-2);
    outline-offset: 4px;
    border-radius: 4px;
}

/* -----------------------------------------------------------------------------
   4b. Contact column
   -----------------------------------------------------------------------------
   Fed by the `footerContact` composer, which reads the existing
   «تنظیمات → راه‌های ارتباطی» settings. A row whose setting is empty is not
   rendered at all, so this column shrinks instead of showing blank labels.
   -------------------------------------------------------------------------- */

.ft-contact {
    flex: 0 1 260px;
    min-width: 220px;
}

/* Support hours, carrying the same live dot as the club badge. */
.ft-hours {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--ft-line);
    background: var(--ft-surface);
    backdrop-filter: blur(18px);
}

.ft-hours__dot {
    position: relative;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ft-mint);
}

.ft-hours__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    animation: ft-ping 2.2s cubic-bezier(0, 0, .2, 1) infinite;
}

.ft-hours__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ft-hours__label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--ft-muted);
}

.ft-hours__value {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--ft-text);
}

.ft-reach {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ft-reach__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-inline: -10px;
    border-radius: 12px;
    text-decoration: none;
    transition: background-color .22s ease;
}

.ft-reach__row:hover {
    background: color-mix(in srgb, var(--ft-primary) 10%, transparent);
}

.ft-reach__row:focus-visible {
    outline: 2px solid var(--ft-primary-2);
    outline-offset: 2px;
}

.ft-reach__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    border: 1px solid var(--ft-line);
    background: var(--ft-surface);
    color: var(--ft-sky);
    font-size: 16px;
    transition: border-color .22s ease, color .22s ease, background-color .22s ease;
}

html:not(.dark) .ft-reach__icon { color: #0B62C4; }

.ft-reach__row:hover .ft-reach__icon {
    border-color: var(--ft-primary-2);
    background: color-mix(in srgb, var(--ft-primary) 20%, transparent);
    color: var(--ft-text);
}

/* The send glyph points along the reading direction, like the submit button. */
html[dir="ltr"] .ft-reach__icon .isax-send { transform: scaleX(-1); }

.ft-reach__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ft-reach__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ft-muted);
}

/* `dir="ltr"` on the value keeps "09121234567" and "@handle" in glyph order,
   which also flips what `text-align: start` means — pin it to the reading edge. */
.ft-reach__value {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ft-text-2);
    overflow-wrap: anywhere;
}

html[dir="rtl"] .ft-reach__value { text-align: end; }

.ft-reach__row:hover .ft-reach__value { color: var(--ft-text); }

/* -----------------------------------------------------------------------------
   4c. Trading platforms + payment methods strip
   -------------------------------------------------------------------------- */

.ft-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px 40px;
    margin-top: 44px;
    padding-top: 30px;
    border-top: 1px solid var(--ft-line);
}

.ft-strip__group { min-width: 0; }

.ft-strip__title {
    margin: 0 0 14px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--ft-muted);
}

.ft-strip__row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
}

.ft-chip {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding-block: 10px;
    padding-inline: 12px 16px;
    border-radius: 16px;
    border: 1px solid var(--ft-line);
    background: var(--ft-surface);
    backdrop-filter: blur(18px);
    text-decoration: none;
    transition: transform .2s ease, border-color .22s ease, box-shadow .28s ease, background-color .22s ease;
}

.ft-chip:hover {
    transform: translateY(-3px);
    border-color: var(--ft-primary-2);
    background: color-mix(in srgb, var(--ft-primary) 12%, var(--ft-surface));
    box-shadow: 0 14px 34px -18px rgba(0, 123, 255, .9);
}

.ft-chip:focus-visible {
    outline: 2px solid var(--ft-primary-2);
    outline-offset: 3px;
}

.ft-chip__logo {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    object-fit: contain;
}

.ft-chip__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--ft-grad);
    color: #fff;
    font-size: 16px;
}

.ft-chip__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ft-chip__name {
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.5;
    color: var(--ft-text);
}

/* Platform names are Latin brands and carry `dir="ltr"` in the markup. The
   Persian stack substitutes Persian numerals, which rendered "MetaTrader 5" as
   "MetaTrader ۵" — so those names get the Latin face in BOTH directions, while
   the Persian download-centre chip beside them keeps the body font. */
.ft-chip__name[dir="ltr"] {
    font-family: "Poppins", "Roboto", ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -.01em;
}

.ft-chip__note {
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--ft-muted);
}

.ft-pay {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding-inline: 14px;
    border-radius: 999px;
    border: 1px solid var(--ft-line);
    background: var(--ft-surface);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ft-text-2);
}

.ft-pay i {
    font-size: 16px;
    color: var(--ft-sky);
}

html:not(.dark) .ft-pay i { color: #0B62C4; }

/* -----------------------------------------------------------------------------
   5. Oversized wordmark
   -----------------------------------------------------------------------------
   Stays inside `.container-fluid` (a 100vw breakout would overrun the viewport
   by the scrollbar width) and is clipped by its own band.
   -------------------------------------------------------------------------- */

.ft-mark {
    margin-top: 44px;
    overflow: hidden;
    line-height: 0;
    text-align: center;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 44%, rgba(0, 0, 0, .38) 82%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 44%, rgba(0, 0, 0, .38) 82%, transparent 100%);
}

.ft-mark__text {
    display: block;
    font-family: "Poppins", "Inter", ui-sans-serif, system-ui, sans-serif;
    font-weight: 900;
    /* vw fallback; the container query below is exact (see note). */
    font-size: min(12vw, 172px);
    line-height: 1;
    letter-spacing: -.028em;
    white-space: nowrap;
    user-select: none;
    background: linear-gradient(180deg,
        rgba(141, 196, 255, .60) 0%,
        rgba(94, 210, 236, .30) 52%,
        rgba(141, 196, 255, .05) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* `.container-fluid` steps its max-width at breakpoints, so a vw-based size
   overflows just below each step (e.g. 992px, where the container is still
   48rem). Sizing from the container's own inline size keeps the wordmark
   edge-to-edge at every width. */
@supports (container-type: inline-size) {
    .ft-mark { container-type: inline-size; }
    .ft-mark__text { font-size: min(13.2cqi, 186px); }
}

html:not(.dark) .ft-mark__text {
    background: linear-gradient(180deg,
        rgba(6, 58, 120, .40) 0%,
        rgba(0, 110, 220, .24) 52%,
        rgba(6, 58, 120, .04) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* -----------------------------------------------------------------------------
   6. Bottom bar
   -------------------------------------------------------------------------- */

.ft-base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 20px;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--ft-line);
}

.ft-copy {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--ft-muted);
}

.ft-copy i { font-size: 16px; }

.ft-base__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* The shared theme toggle sits in a tight row here — drop its header margin. */
.site-theme-toggle--footer { margin-inline-end: 0; }

.ft-top {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding-inline: 18px;
    border-radius: 999px;
    border: 1px solid var(--ft-line-strong);
    background: var(--ft-surface);
    backdrop-filter: blur(18px);
    color: var(--ft-text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s ease, border-color .22s ease, background-color .22s ease, box-shadow .28s ease;
}

.ft-top i {
    font-size: 17px;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}

.ft-top:hover {
    transform: translateY(-2px);
    border-color: var(--ft-primary-2);
    background: rgba(0, 123, 255, .14);
    box-shadow: 0 12px 30px -16px rgba(0, 123, 255, .9);
}

.ft-top:hover i { transform: translateY(-3px); }

.ft-top:focus-visible {
    outline: 2px solid var(--ft-primary-2);
    outline-offset: 3px;
}

/* -----------------------------------------------------------------------------
   7. LTR: Latin headings need a Latin face (the Persian stack has no coverage)
   -------------------------------------------------------------------------- */

html[dir="ltr"] .ft-club__title,
html[dir="ltr"] .ft-col__title,
html[dir="ltr"] .ft-social__label,
html[dir="ltr"] .ft-strip__title,
html[dir="ltr"] .ft-chip__name,
html[dir="ltr"] .ft-pay,
html[dir="ltr"] .ft-badge,
html[dir="ltr"] .ft-submit,
html[dir="ltr"] .ft-top {
    font-family: "Poppins", "Roboto", ui-sans-serif, system-ui, sans-serif;
}

/* -----------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .ft-main { gap: 40px 32px; }
    .ft-brand { flex: 1 1 100%; max-width: none; }
    .ft-contact { flex: 1 1 240px; }

    /* Capped tracks keep the columns adjacent; `1fr` would stretch two CMS
       columns across the whole row and leave a wide hole beside them. */
    .ft-nav {
        flex: 1 1 100%;
        grid-template-columns: repeat(auto-fit, minmax(140px, 220px));
    }
}

@media (max-width: 767.98px) {
    html footer.ft { margin-top: 64px; }

    .ft-inner { padding-block: 40px 20px; }

    .ft-club__inner { padding: 24px 20px; }

    .ft-club__desc { max-width: none; }

    .ft-form { max-width: none; }

    /* The submit label alone is wider than the remaining track on a 360px
       screen; drop to the glyph so the field never scrolls sideways. */
    .ft-submit { padding-inline: 14px; }
    .ft-submit span { display: none; }

    .ft-main { margin-top: 40px; }

    .ft-nav {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 28px 16px;
    }

    .ft-contact { flex: 1 1 100%; }

    .ft-strip {
        gap: 26px;
        margin-top: 34px;
        padding-top: 26px;
    }

    .ft-strip__group { flex: 1 1 100%; }

    /* One chip per row below 768px — side by side their labels wrap mid-word. */
    .ft-chip { flex: 1 1 100%; }

    .ft-logo img { width: 150px; }

    .ft-mark { margin-top: 36px; }

    .ft-base {
        flex-direction: column;
        align-items: flex-start;
    }

    .ft-base__actions { align-self: stretch; }

    .ft-top { flex: 1 1 auto; justify-content: center; }
}

/* -----------------------------------------------------------------------------
   9. Reduced motion — kill the loops, keep the layout
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .ft-club__beam,
    .ft-badge__dot::after,
    .ft-hours__dot::after {
        animation: none;
    }

    .ft-club__beam { opacity: .55; }

    .ft-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .ft-soc,
    .ft-soc img,
    .ft-soc::after,
    .ft-top,
    .ft-top i,
    .ft-logo,
    .ft-submit,
    .ft-link__dash,
    .ft-col__title::after,
    .ft-chip,
    .ft-reach__row,
    .ft-reach__icon {
        transition: none;
    }
}