/* ==========================================================================
   home-fx — motion, depth and interaction layer for the home page.

   Loaded only by home/index.html. It builds on the gettrade tokens and adds
   no palette values of its own except the semantic market up/down pair, which
   has to be red/green to read correctly. The theme's global
   prefers-reduced-motion rule already neutralises every animation below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reading progress
   -------------------------------------------------------------------------- */

.fx-progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 1000;
    pointer-events: none;
}

.fx-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--gt-teal), var(--gt-yellow));
    box-shadow: 0 0 16px rgba(85, 194, 195, .75);
}

/* --------------------------------------------------------------------------
   2. Hero — aurora field, grid wash, staggered entrance
   -------------------------------------------------------------------------- */

/* Written mobile-first: the base rules are the phone layout, and each
   breakpoint below adds room rather than taking features away. Nothing in the
   hero is hidden on small screens. */

.gt-hero--fx { padding: 3.25em 0 2.75em; }

@media (min-width: 768px)  { .gt-hero--fx { padding: 4.5em 0 4em; } }
@media (min-width: 1100px) { .gt-hero--fx { padding: 8em 0 7em; } }

.fx-aurora,
.fx-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.fx-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    mix-blend-mode: screen;
    will-change: transform;
}

@media (min-width: 768px) { .fx-blob { filter: blur(90px); } }

/* on a phone the blobs have to be viewport-sized or the aurora reads as a
   smudge rather than a light field */
.fx-blob--teal {
    width: 92vw; height: 92vw;
    top: -14%; left: -26%;
    opacity: .22;
    background: radial-gradient(circle, rgba(85, 194, 195, .85), transparent 68%);
    animation: fx-drift-a 24s var(--gt-ease) infinite alternate;
}

.fx-blob--yellow {
    width: 62vw; height: 62vw;
    right: -18%; bottom: -12%;
    opacity: .16;
    background: radial-gradient(circle, rgba(255, 209, 15, .5), transparent 66%);
    animation: fx-drift-b 30s var(--gt-ease) infinite alternate;
}

.fx-blob--deep {
    width: 80vw; height: 80vw;
    right: -14%; top: -10%;
    opacity: .3;
    background: radial-gradient(circle, rgba(23, 69, 110, .9), transparent 70%);
    animation: fx-drift-a 34s var(--gt-ease) infinite alternate-reverse;
}

@media (min-width: 768px) {
    .fx-blob--teal {
        width: 46vw; height: 46vw; max-width: 640px; max-height: 640px;
        top: -20%; left: -10%; opacity: .26;
    }

    .fx-blob--yellow {
        width: 32vw; height: 32vw; max-width: 440px; max-height: 440px;
        right: 4%; bottom: -26%; opacity: .2;
    }

    .fx-blob--deep {
        width: 40vw; height: 40vw; max-width: 560px; max-height: 560px;
        right: 22%; top: -14%;
    }
}

@keyframes fx-drift-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(6%, 8%, 0) scale(1.14); }
}

@keyframes fx-drift-b {
    from { transform: translate3d(0, 0, 0) scale(1.06); }
    to   { transform: translate3d(-8%, -6%, 0) scale(.92); }
}

.fx-grid {
    background-image:
        linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 18%, #000 8%, transparent 78%);
            mask-image: radial-gradient(120% 90% at 50% 18%, #000 8%, transparent 78%);
    animation: fx-pan 32s linear infinite;
}

@media (min-width: 768px) {
    .fx-grid {
        background-size: 68px 68px;
        -webkit-mask-image: radial-gradient(115% 95% at 20% 28%, #000 8%, transparent 72%);
                mask-image: radial-gradient(115% 95% at 20% 28%, #000 8%, transparent 72%);
    }
}

@keyframes fx-pan {
    to { background-position: 44px 44px, 44px 44px; }
}

.gt-hero--fx .gt-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    align-items: center;
}

@media (min-width: 768px) { .gt-hero--fx .gt-hero-grid { gap: 48px; } }

@media (min-width: 1100px) {
    .gt-hero--fx .gt-hero-grid--split {
        grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
        gap: 70px;
    }
}

.gt-hero--fx .gt-hero-inner { max-width: 660px; }

/* staggered entrance for the copy column */
.fx-in > * { animation: fx-rise .85s var(--gt-ease) both; }
.fx-in > *:nth-child(1) { animation-delay: .05s; }
.fx-in > *:nth-child(2) { animation-delay: .16s; }
.fx-in > *:nth-child(3) { animation-delay: .27s; }
.fx-in > *:nth-child(4) { animation-delay: .38s; }
.fx-in > *:nth-child(5) { animation-delay: .49s; }
.fx-in > *:nth-child(6) { animation-delay: .60s; }

@keyframes fx-rise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}

/* live pill */
.fx-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 7px 15px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 100px;
    background: rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    color: var(--gt-white);
    font-size: 13px;
    letter-spacing: .4px;
}

@media (min-width: 768px) {
    .fx-pill { margin-bottom: 22px; padding: 8px 18px; font-size: var(--gt-small); letter-spacing: .6px; }
}

.fx-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gt-teal);
    box-shadow: 0 0 0 0 rgba(85, 194, 195, .75);
    animation: fx-pulse 2.4s var(--gt-ease) infinite;
}

@keyframes fx-pulse {
    70%  { box-shadow: 0 0 0 11px rgba(85, 194, 195, 0); }
    100% { box-shadow: 0 0 0 0 rgba(85, 194, 195, 0); }
}

/* gradient word in the headline */
.fx-grad { color: var(--gt-teal); }

@supports (-webkit-background-clip: text) or (background-clip: text) {
    .fx-grad {
        background-image: linear-gradient(96deg, #6FE0E1 0%, var(--gt-teal) 38%, var(--gt-yellow) 100%);
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;
    }
}

.fx-btn-glow { box-shadow: 0 14px 34px rgba(85, 194, 195, .34); }
.fx-btn-glow:hover { box-shadow: 0 18px 46px rgba(85, 194, 195, .5); }

/* full-width, equal-weight calls to action on a phone */
.gt-hero--fx .gt-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

@media (min-width: 560px) {
    .gt-hero--fx .gt-actions { display: flex; flex-wrap: wrap; gap: 15px; }
}

.gt-hero--fx .gt-hero-stats strong { letter-spacing: -.5px; }

/* scroll cue */
.fx-cue {
    position: absolute;
    left: 50%;
    bottom: 22px;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: 6px;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, .65);
    font-size: 11px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

.fx-cue:hover { color: var(--gt-teal); }
.fx-cue i { animation: fx-bob 1.9s var(--gt-ease) infinite; }

@keyframes fx-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}

/* the cue is a desktop affordance — on a phone the page is obviously
   scrollable and it would only crowd the fold */
@media (max-width: 767px) { .fx-cue { display: none; } }

@media (min-width: 768px) and (max-width: 1099px) {
    .fx-cue { bottom: 14px; }
}

/* --------------------------------------------------------------------------
   3. Glass panels — full members of the mobile hero, not a desktop extra
   -------------------------------------------------------------------------- */

/* On a phone the hero ends at the stats row: the panel repeats content that
   already has its own sections further down, and the fold is better spent on
   the headline and the calls to action. It starts at tablet width, where the
   two cards sit side by side. */
.fx-panel { display: none; }

@media (min-width: 768px) {
    .fx-panel {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        align-items: start;
    }
}

@media (min-width: 1100px) {
    .fx-panel { grid-template-columns: minmax(0, 1fr); }
}

.fx-glass {
    position: relative;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .05));
    -webkit-backdrop-filter: blur(16px) saturate(140%);
            backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 22px 50px rgba(4, 16, 29, .4);
    color: var(--gt-white);
}

@media (min-width: 768px) {
    .fx-glass {
        padding: 26px 28px;
        box-shadow: 0 30px 70px rgba(4, 16, 29, .45);
        /* the float only starts where there is room for it to breathe */
        animation: fx-float 8s var(--gt-ease) infinite;
    }
}

.fx-glass--sm { padding: 18px 20px; animation-delay: -4s; }

@media (min-width: 1100px) {
    .fx-glass--sm { width: min(100%, 330px); margin-left: auto; }
}

@keyframes fx-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

.fx-glass-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.fx-glass-head span {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

.fx-tag {
    padding: 5px 12px;
    border-radius: 100px;
    background: rgba(255, 209, 15, .16);
    color: var(--gt-yellow);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.fx-glass h3 {
    margin: 0 0 4px;
    color: var(--gt-white);
    font-size: var(--gt-h4);
}

.fx-figure {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 8px 0 18px;
    font-family: var(--gt-head);
    font-weight: 700;
    line-height: 1;
}

.fx-figure b {
    font-size: clamp(38px, 11vw, 46px);
    letter-spacing: -1.5px;
    background-image: linear-gradient(180deg, #FFFFFF, #8FD9DA);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}

.fx-figure small {
    font-size: var(--gt-small);
    font-weight: 400;
    color: rgba(255, 255, 255, .6);
}

.fx-rows { display: grid; gap: 10px; margin-bottom: 22px; }

.fx-rows div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    font-size: var(--gt-small);
    color: rgba(255, 255, 255, .62);
}

.fx-rows div:last-child { border-bottom: 0; padding-bottom: 0; }
.fx-rows b { color: var(--gt-white); font-weight: 600; }

.fx-spark { display: block; width: 100%; height: 48px; overflow: visible; }
.fx-spark path.line { stroke-dasharray: 460; stroke-dashoffset: 460; animation: fx-draw 2.6s var(--gt-ease) .4s forwards; }

@keyframes fx-draw { to { stroke-dashoffset: 0; } }

/* --------------------------------------------------------------------------
   4. Live ticker strip
   -------------------------------------------------------------------------- */

.fx-ticker {
    --fx-up: #4BD1A0;
    --fx-down: #F4756B;
    position: relative;
    background: #081A2C;
    border-top: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    overflow: hidden;
}

.fx-ticker::before,
.fx-ticker::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 44px;
    z-index: 2;
    pointer-events: none;
}

@media (min-width: 768px) {
    .fx-ticker::before,
    .fx-ticker::after { width: 90px; }
}

.fx-ticker::before { left: 0;  background: linear-gradient(90deg, #081A2C, transparent); }
.fx-ticker::after  { right: 0; background: linear-gradient(270deg, #081A2C, transparent); }

.fx-ticker-track {
    display: flex;
    align-items: center;
    gap: 26px;
    width: max-content;
    padding: 12px 0;
    animation: fx-marquee 30s linear infinite;
}

@media (min-width: 768px) {
    .fx-ticker-track { gap: 42px; padding: 15px 0; animation-duration: 42s; }
}

.fx-ticker:hover .fx-ticker-track { animation-play-state: paused; }

@keyframes fx-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.fx-tick {
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
    font-size: var(--gt-small);
    color: rgba(201, 209, 213, .75);
    white-space: nowrap;
}

.fx-tick b {
    font-family: var(--gt-head);
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--gt-white);
}

.fx-tick .px { color: var(--gt-white); font-variant-numeric: tabular-nums; }
.fx-tick .ch { font-variant-numeric: tabular-nums; }
.fx-tick .ch.up   { color: var(--fx-up); }
.fx-tick .ch.down { color: var(--fx-down); }

/* --------------------------------------------------------------------------
   5. Reveal stagger + hover systems
   -------------------------------------------------------------------------- */

.gt-grid > .gt-reveal:nth-child(2) { transition-delay: .09s; }
.gt-grid > .gt-reveal:nth-child(3) { transition-delay: .18s; }
.gt-grid > .gt-reveal:nth-child(4) { transition-delay: .27s; }
.gt-grid > .gt-reveal:nth-child(5) { transition-delay: .36s; }
.gt-grid > .gt-reveal:nth-child(6) { transition-delay: .45s; }

/* cursor-tracking wash + hairline, applied to cards and quotes */
.fx-spot {
    position: relative;
    /* the wash is parked off-card until the cursor sets --fx-x / --fx-y, so it
       never shows on touch devices or before first hover */
    background-image: radial-gradient(340px circle at var(--fx-x, 50%) var(--fx-y, -600px),
                                      rgba(85, 194, 195, .18), transparent 62%);
    transition: transform .35s var(--gt-ease), box-shadow .35s var(--gt-ease);
}

.fx-spot::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    border-radius: var(--gt-radius-lg) var(--gt-radius-lg) 0 0;
    background: linear-gradient(90deg, transparent, var(--gt-teal), var(--gt-yellow), transparent);
    transform: scaleX(0);
    transition: transform .5s var(--gt-ease);
}

.fx-spot:hover::after { transform: scaleX(1); }

/* the icon tiles get a soft halo that only lights up with the card */
.fx-spot .gt-icon { transition: transform .4s var(--gt-ease), box-shadow .4s var(--gt-ease); }
.fx-spot:hover .gt-icon {
    transform: translateY(-3px) rotate(-4deg);
    box-shadow: 0 14px 30px rgba(85, 194, 195, .35);
}

/* --------------------------------------------------------------------------
   6. Steps — connector that draws itself
   -------------------------------------------------------------------------- */

.fx-steps { position: relative; }

/* stacked on a phone, so the connector runs down the left edge through the
   step numbers instead of across them */
.fx-steps::before,
.fx-steps::after {
    content: '';
    position: absolute;
    left: 31px;
    top: 32px;
    bottom: 32px;
    width: 2px;
}

.fx-steps::before { background: repeating-linear-gradient(180deg, var(--gt-line) 0 7px, transparent 7px 17px); }

.fx-steps::after {
    bottom: auto;
    height: 0;
    background: linear-gradient(180deg, var(--gt-teal), var(--gt-yellow));
    transition: height 1.8s var(--gt-ease) .25s;
}

.fx-steps.is-visible::after { height: calc(100% - 64px); }
.fx-steps .gt-step { position: relative; z-index: 1; }
.fx-steps .gt-step-num { box-shadow: 0 0 0 8px var(--gt-white); }

@media (min-width: 768px) {
    .fx-steps::before,
    .fx-steps::after {
        content: '';
        position: absolute;
        top: 31px;
        left: 8%;
        height: 2px;
    }

    .fx-steps::before {
        right: 8%;
        background: repeating-linear-gradient(90deg, var(--gt-line) 0 7px, transparent 7px 17px);
    }

    .fx-steps::after {
        width: 0;
        background: linear-gradient(90deg, var(--gt-teal), var(--gt-yellow));
        transition: width 1.8s var(--gt-ease) .25s;
    }

    .fx-steps.is-visible::after { width: 84%; }
    .fx-steps .gt-step { position: relative; z-index: 1; }
    .fx-steps .gt-step-num { box-shadow: 0 0 0 10px var(--gt-white); }
}

/* --------------------------------------------------------------------------
   7. Stat band
   -------------------------------------------------------------------------- */

.fx-statband { position: relative; overflow: hidden; }

.fx-statband::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70vw;
    height: 70vw;
    max-width: 900px;
    max-height: 900px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(85, 194, 195, .17), transparent 62%);
    pointer-events: none;
}

.fx-statband > .gt-container { position: relative; z-index: 1; }

.fx-statband .gt-stat strong {
    background-image: linear-gradient(180deg, #FFFFFF, #91C3D6);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   8. Return calculator
   -------------------------------------------------------------------------- */

.fx-calc {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: 50px;
    align-items: center;
    padding: 48px;
    border-radius: var(--gt-radius-lg);
    background: var(--gt-white);
    box-shadow: var(--gt-shadow-lg);
}

.fx-calc-plans {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.fx-chip {
    padding: 11px 20px;
    border: 2px solid var(--gt-line);
    border-radius: 100px;
    background: transparent;
    color: var(--gt-navy);
    font-family: var(--gt-body);
    font-size: var(--gt-small);
    font-weight: 600;
    cursor: pointer;
    transition: all .25s var(--gt-ease);
}

.fx-chip:hover { border-color: var(--gt-teal); }

.fx-chip[aria-pressed="true"] {
    border-color: transparent;
    background: var(--gt-navy);
    color: var(--gt-white);
}

.fx-field label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    font-size: var(--gt-small);
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gt-gray);
}

.fx-amount {
    font-family: var(--gt-head);
    font-size: var(--gt-h3);
    font-weight: 700;
    letter-spacing: -1px;
    text-transform: none;
    color: var(--gt-navy);
    font-variant-numeric: tabular-nums;
}

.fx-range {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 100px;
    background: linear-gradient(90deg, var(--gt-teal) var(--fx-fill, 40%), var(--gt-line) var(--fx-fill, 40%));
    cursor: pointer;
}

.fx-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 26px;
    height: 26px;
    border: 4px solid var(--gt-white);
    border-radius: 50%;
    background: var(--gt-navy);
    box-shadow: 0 4px 14px rgba(12, 36, 60, .35);
    cursor: grab;
}

.fx-range::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border: 4px solid var(--gt-white);
    border-radius: 50%;
    background: var(--gt-navy);
    box-shadow: 0 4px 14px rgba(12, 36, 60, .35);
    cursor: grab;
}

.fx-range:focus-visible { outline: 3px solid var(--gt-teal); outline-offset: 6px; }

.fx-limits {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: var(--gt-small);
    color: var(--gt-gray);
}

.fx-out {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    margin: 30px 0 22px;
    border-radius: var(--gt-radius-lg);
    overflow: hidden;
    background: var(--gt-line);
}

.fx-out div { padding: 22px 24px; background: var(--gt-light); }

.fx-out span {
    display: block;
    margin-bottom: 8px;
    font-size: var(--gt-small);
    color: var(--gt-gray);
}

.fx-out strong {
    font-family: var(--gt-head);
    font-size: var(--gt-h4);
    font-weight: 700;
    color: var(--gt-navy);
    font-variant-numeric: tabular-nums;
}

.fx-out div:last-child { background: var(--gt-navy); }
.fx-out div:last-child span { color: rgba(201, 209, 213, .75); }
.fx-out div:last-child strong { color: var(--gt-teal); }

.fx-note { font-size: 13px; line-height: 1.6; color: var(--gt-gray); margin: 0 0 26px; }

.fx-chart {
    position: relative;
    padding: 30px;
    border-radius: var(--gt-radius-lg);
    background: var(--gt-navy);
    overflow: hidden;
}

.fx-chart::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 15% 0%, rgba(85, 194, 195, .22), transparent 60%);
}

.fx-chart > * { position: relative; }

.fx-chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, .6);
    font-size: var(--gt-small);
}

.fx-chart-head b { color: var(--gt-white); font-family: var(--gt-head); font-size: var(--gt-h4); }
.fx-chart svg { display: block; width: 100%; height: 190px; overflow: visible; }
.fx-chart-axis { display: flex; justify-content: space-between; margin-top: 14px; font-size: 12px; color: rgba(255, 255, 255, .45); }

@media (max-width: 991px) {
    .fx-calc { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 32px 24px; }
    .fx-out { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   9. CTA band — rotating border beam
   -------------------------------------------------------------------------- */

.fx-beam { position: relative; overflow: hidden; isolation: isolate; }

.fx-beam::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160%;
    aspect-ratio: 1;
    z-index: -2;
    transform: translate(-50%, -50%);
    background: conic-gradient(transparent 0 68%,
                               rgba(85, 194, 195, .95) 80%,
                               rgba(255, 209, 15, .95) 90%,
                               transparent 96%);
    animation: fx-spin 7s linear infinite;
}

.fx-beam::after {
    content: '';
    position: absolute;
    inset: 2px;
    z-index: -1;
    border-radius: inherit;
    background: var(--gt-navy);
}

@keyframes fx-spin {
    to { transform: translate(-50%, -50%) rotate(1turn); }
}

/* --------------------------------------------------------------------------
   10. Small flourishes
   -------------------------------------------------------------------------- */

/* eyebrow gets a leading rule */
.fx-lead-rule {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.fx-lead-rule::before {
    content: '';
    width: 38px;
    height: 2px;
    background: currentColor;
    opacity: .55;
}

.gt-head--center .fx-lead-rule { justify-content: center; }
.gt-head--center .fx-lead-rule::after {
    content: '';
    width: 38px;
    height: 2px;
    background: currentColor;
    opacity: .55;
}

/* media frames lift slightly as they scroll into view */
.fx-lift { transition: transform .8s var(--gt-ease), box-shadow .8s var(--gt-ease); }
.fx-lift:hover { transform: translateY(-6px); }

/* floating badge on the security photo */
.fx-badge-float { animation: fx-float 9s var(--gt-ease) infinite; }

/* marquee of trust logos keeps the partner row alive on wide screens */
.fx-logos-mask {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}