/* Shared design tokens */
.lx-group-page {
    --lx-teal:        #199caa;
    --lx-teal-bright: #1eb1c2;
    --lx-teal-deep:   #157f8b;
    --lx-ink:         #0b1f24;
    --lx-muted:       #5d5c5c;
    --lx-line:        rgba(11, 31, 36, 0.08);
    --lx-shadow-sm:   0 1px 2px rgba(11, 31, 36, 0.04), 0 2px 8px rgba(11, 31, 36, 0.04);
    --lx-shadow-md:   0 10px 30px -12px rgba(11, 31, 36, 0.12), 0 4px 14px rgba(11, 31, 36, 0.05);
    --lx-shadow-lg:   0 30px 60px -25px rgba(21, 127, 139, 0.30), 0 12px 28px rgba(11, 31, 36, 0.08);
    --lx-radius-sm:   0.65rem;
    --lx-radius-md:   1rem;
}
/* Accent text (teal highlight word) */
.lx-group-page .lx-accent {
    color: var(--lx-teal);
    -webkit-text-fill-color: var(--lx-teal);
}
.lx-group .lx-group-title .lx-accent {
    background: none;
    color: #eaf4f6;
    -webkit-text-fill-color: #eaf4f6;
    animation: none;
    text-shadow: none;
}
/* Shared centered section header block */
.lx-group-page .lx-section-head {
    margin: 0 auto 3.5rem;
    text-align: center;
}
.lx-group-page .lx-section-head h3,
.lx-group-page .lx-section-head h4,
.lx-group-page .lx-section-head p {
    text-align: center;
}

/* ============================================================
   WIKILICENSE BADGE + HOVER PANEL
   ============================================================ */
.lx-group-page .lx-wikilicense {
    --wl-panel-w: 460px;
    --wl-gap:     12px;
    --wl-reserve: 0px;
    --wl-ease:    0.35s cubic-bezier(0.22, 1, 0.36, 1);

    position: relative;
    z-index: 5;
    display: block;
    width: 100%;
    text-align: center;
    line-height: 0;
}
.lx-group-page .lx-wikilicense:hover,
.lx-group-page .lx-wikilicense:focus-within {
    z-index: 60;
}
/* The spacer: 0 tall at rest, panel-tall while open */
.lx-group-page .lx-wikilicense::after {
    content: "";
    display: block;
    height: 0;
    transition: height var(--wl-ease);
}
.lx-group-page .lx-wikilicense:hover::after,
.lx-group-page .lx-wikilicense:focus-within::after {
    height: var(--wl-reserve, 0px);
}

.lx-group-page .lx-wikilicense-badge {
    position: relative;
    display: inline-block;
    vertical-align: top;
    line-height: 0;
    text-decoration: none !important;
    overflow: visible;
}
.lx-group-page .lx-wikilicense-badge > * { overflow: visible; }
.lx-group-page .lx-wikilicense-badge:focus-visible {
    outline: 2px solid var(--lx-teal);
    outline-offset: 3px;
    border-radius: var(--lx-radius-sm);
}

/* ---- Panel: centered under the badge, full natural size ---- */
.lx-group-page .lx-wikilicense .lx-wl-panel {
    position: absolute !important;
    z-index: 70 !important;
    top: calc(100% + var(--wl-gap)) !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    min-width: 100% !important;
    max-width: min(var(--wl-panel-w), calc(100vw - 2rem)) !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}
/* No inherited caps inside the panel — every column stays visible */
.lx-group-page .lx-wikilicense .lx-wl-panel * {
    max-width: none !important;
    box-sizing: border-box;
}
.lx-group-page .lx-wikilicense .lx-wl-panel ul,
.lx-group-page .lx-wikilicense .lx-wl-panel ol,
.lx-group-page .lx-wikilicense .lx-wl-panel table,
.lx-group-page .lx-wikilicense .lx-wl-panel tbody,
.lx-group-page .lx-wikilicense .lx-wl-panel > div,
.lx-group-page .lx-wikilicense .lx-wl-panel > div > div {
    max-height: none !important;
    overflow: visible !important;
}
.lx-group-page .lx-wikilicense .lx-wl-panel table {
    width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
}
.lx-group-page .lx-wikilicense .lx-wl-panel th,
.lx-group-page .lx-wikilicense .lx-wl-panel td,
.lx-group-page .lx-wikilicense .lx-wl-panel li {
    white-space: nowrap !important;
    text-overflow: clip !important;
    overflow: visible !important;
}
.lx-group-page .lx-wikilicense .lx-wl-panel img,
.lx-group-page .lx-wikilicense .lx-wl-panel svg {
    max-width: 100% !important;
    height: auto;
}
/* Hover bridge so the gap between badge and panel stays hoverable */
.lx-group-page .lx-wikilicense .lx-wl-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * var(--wl-gap) - 4px);
    height: calc(var(--wl-gap) + 6px);
}
/* Not enough room below — open upward, no spacer needed */
.lx-group-page .lx-wikilicense.is-wl-flip-up .lx-wl-panel {
    top: auto !important;
    bottom: calc(100% + var(--wl-gap)) !important;
}
.lx-group-page .lx-wikilicense.is-wl-flip-up .lx-wl-panel::before {
    top: auto;
    bottom: calc(-1 * var(--wl-gap) - 4px);
}
/* Viewport edges */
.lx-group-page .lx-wikilicense.is-wl-clip-right .lx-wl-panel {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
}
.lx-group-page .lx-wikilicense.is-wl-clip-left .lx-wl-panel {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
}

/* ---- Loading placeholder (light section background) ---- */
.lx-group-page .lx-wikilicense-badge:empty {
    display: block;
    margin: 0 auto;
    border: 1px solid var(--lx-line);
    border-radius: var(--lx-radius-md);
    background: linear-gradient(100deg,
        rgba(11, 31, 36, 0.04) 20%,
        rgba(11, 31, 36, 0.09) 40%,
        rgba(11, 31, 36, 0.04) 60%);
    background-size: 220% 100%;
    animation: lxWikiSkeleton 1.6s linear infinite;
}
.lx-group-page .lx-wikilicense-badge.is-wl-mounted:empty {
    border: 0;
    background: none;
    animation: none;
    min-height: 56px;
}
.lx-group-page .lx-wikilicense.is-wl-failed { display: none !important; }

/* ============================================================
   WikiLicense in the banner
   ============================================================ */
.lx-banner-lx-group .lx-wikilicense {
    position: relative;
    z-index: 40;
    display: inline-block;
    width: auto;
    margin: 0;
    line-height: 0;
}

/* ============================================================
   WIKILICENSE — framed widget (licenses section)
   ============================================================ */
.lx-group-page .lx-wl-widget {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    /* 60% wide, centred by the auto side margins */
    width: 60%;
    margin: 2rem auto 8rem;
    padding: 1.35rem 1.75rem;
    /* Same gradient as .license-card-reg — copied so the two match */
    background: linear-gradient(180deg, rgba(25, 156, 170, 0.04) 0%, rgba(25, 156, 170, 0.08) 100%);
    border: 1px solid var(--lx-line);
    border-radius: var(--lx-radius-md);
    box-shadow: var(--lx-shadow-sm);
    text-align: left;
    transition: box-shadow 0.35s ease, border-color 0.35s ease;
    /* position:relative lets the hover z-index lift the whole box, and is
       the containing block for the panel positioning further down.
       No cursor:pointer — only "See More" and the badge are links. */
    position: relative;
}
.lx-group-page .lx-wl-widget:hover,
.lx-group-page .lx-wl-widget:focus-within {
    border-color: rgba(25, 156, 170, 0.35);
    box-shadow: var(--lx-shadow-md);
    /* Lift the box so the cards below cannot paint over the open panel */
    z-index: 50;
}
/* margin-right:auto pins the text block left; the badge stays right */
/* Stack title over the link — <h4> is inline-flex, so without this the
   link would sit on the same line. */
.lx-group-page .lx-wl-widget-body {
    min-width: 0;
    position: relative;
    z-index: 1;
    margin-right: auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}
/* Icon sits before the title text; inline-flex centres it on the text */
.lx-group-page .lx-wl-widget-title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--lx-ink);
    line-height: 1;
    margin: 0;
}
/* Copied from .license-card-link so it matches "Entity Search" on the cards */
.lx-group-page .lx-wl-widget-more {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--lx-teal);
    text-decoration: none;
    transition: color 0.25s ease;
    padding-left: 1.85rem;
}
.lx-group-page .lx-wl-widget-more-icon {
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Hovering anywhere on the box moves the arrow, as on the license cards */
.lx-group-page .lx-wl-widget:hover .lx-wl-widget-more,
.lx-group-page .lx-wl-widget-more:hover,
.lx-group-page .lx-wl-widget-more:focus-visible {
    color: var(--lx-teal-deep);
}
.lx-group-page .lx-wl-widget:hover .lx-wl-widget-more-icon,
.lx-group-page .lx-wl-widget-more:hover .lx-wl-widget-more-icon {
    transform: translate(2px, -2px);
}

/* TUNE: keep width/height here in sync with the <svg> attributes in lx-group.php */
.lx-group-page .lx-wl-widget-verified {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--lx-teal);
}
/* Own flex context — removes the baseline gap that pushes the badge down */
.lx-group-page .lx-wl-widget-badge {
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    line-height: 0;
    top: 0;
}
.lx-group-page .lx-wikilicense-framed {
    width: auto !important;
    margin: 0 !important;
}
.lx-group-page .lx-wikilicense-framed .lx-wikilicense-badge {
    filter: drop-shadow(0 2px 4px rgba(11, 31, 36, 0.16));
}

/* Vendor hides the panel with an inline display:none and only opens it when
   the badge itself is hovered. !important beats the inline style, so the whole
   box can open it without touching vendor JS. On mouse-out this rule stops
   applying and the inline none takes over again. :focus-within covers keyboard. */
.lx-group-page .lx-wl-widget .wl-hover-wrap {
    position: relative;
}
.lx-group-page .lx-wl-widget:hover .wl-hover-panel,
.lx-group-page .lx-wl-widget:focus-within .wl-hover-panel {
    display: block !important;
    z-index: 999 !important;
}

/* An Avada wrapper above has overflow:hidden and clips the panel. :has()
   matches every ancestor containing the licenses section, so we do not need to
   know which one is at fault.
   IF A HORIZONTAL SCROLLBAR APPEARS, IT CAME FROM HERE. */
:has(.lx-licenses.lx-group-page) {
    overflow: visible !important;
}

/* The Partners section follows this one in the DOM, is position:relative and
   opaque, so it covers the panel. Raising the licenses section fixes it — the
   two never overlap spatially. */
.lx-group-page.lx-licenses {
    position: relative;
    z-index: 2;
}
/* ── Tablet ───────────────────────────────────────────────────────────
   60% is too narrow here; keep the row layout, just widen the box. */
@media (min-width: 768px) and (max-width: 1200px) {
    .lx-group-page .lx-wl-widget {
        width: 88%;
        /* The hover panel is capped at 234px (64px header + 170px body) and
           opens downward. Without this clearance it lands on the next section
           and gets painted over — same reason as the 8rem on desktop. */
        margin: 2rem auto 8rem;
        padding: 1.15rem 1.35rem;
        gap: 1rem;
    }
    .lx-group-page .lx-wl-widget-title { font-size: 1rem; }
    .lx-group-page .lx-wl-widget-verified { width: 18px; height: 18px; }

    /* Open the dropdown leftward. The badge sits at the right end of the row
       at this width, so a panel anchored to the badge's left edge runs off
       the right of the viewport. Anchoring its right edge to the badge makes
       it open back into the page instead.
       Same targeting as the mobile rule: the vendor's own .wl-hover-panel,
       because .lx-wl-panel never gets tagged, and !important because the
       vendor writes left/right inline while positioning. */
    .lx-group-page .lx-wl-widget .wl-hover-panel {
        left: auto !important;
        right: 0 !important;
        transform: none !important;
        max-width: calc(100vw - 2rem) !important;
    }
}

/* ── Mobile — stack vertically ────────────────────────────────────────
   Each rule undoes one desktop setting that breaks once content stacks. */
@media (max-width: 767px) {
    .lx-group-page .lx-wl-widget {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.85rem;
        width: 100%;
        /* Clearance for the open panel — see the tablet block above. */
        margin: 1.5rem auto 8rem;
        padding: 1.25rem 1rem;
    }
    /* Desktop pushes the text block left; here it must be centred */
    .lx-group-page .lx-wl-widget-body {
        margin-right: 0;
        text-align: center;
        align-items: center;
        gap: 0.5rem;
    }
    .lx-group-page .lx-wl-widget-title {
        font-size: 0.95rem;
        justify-content: center;
    }
    .lx-group-page .lx-wl-widget-verified { width: 17px; height: 17px; }
    /* The indent only aligns under the title in the horizontal layout */
    .lx-group-page .lx-wl-widget-more {
        padding-left: 0;
        font-size: 0.75rem;
    }

    /* Centre the dropdown under the badge.
       This targets the vendor's own .wl-hover-panel rather than .lx-wl-panel:
       our JS tags .lx-wl-panel by searching INSIDE the badge <a>, but the
       vendor renders the panel as a SIBLING of that <a> inside .wl-hover-wrap,
       so the tag never lands and the .lx-wl-panel rules higher up never apply.
       The vendor also writes inline left/right while positioning, and only
       !important beats an inline style.

       Mobile only: here the badge is centred in the column layout, so centring
       on it centres on screen. On tablet the badge sits at the right end of the
       row, where centring on it would push the panel off the right edge. */
    .lx-group-page .lx-wl-widget .wl-hover-panel {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        max-width: calc(100vw - 2rem) !important;
    }
}

.lx-banner-lx-group .lx-wikilicense .wl-hover-wrap {
    position: relative;
    z-index: 40;
}
.lx-banner-lx-group .lx-wikilicense .wl-hover-panel {
    z-index: 999 !important;
}
.lx-banner-lx-group .lx-wikilicense-badge:empty {
    border-color: rgba(255, 255, 255, 0.22);
    background-image: linear-gradient(100deg,
        rgba(255, 255, 255, 0.08) 20%,
        rgba(255, 255, 255, 0.18) 40%,
        rgba(255, 255, 255, 0.08) 60%);
}

/* ============================================================
   START Desktop view
   ============================================================ */
@media (min-width: 1201px) {
    /* ---- Banner ---- */
    .lx-banner-lx-group {
        position: relative;
        border-bottom-right-radius: 7rem !important;
        border-bottom-left-radius: 7rem !important;
        overflow: hidden;
        background-blend-mode: overlay;
        background-color: #157f8b;
        background-image:
            radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.18) 0%, transparent 35%),
            radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.12) 0%, transparent 40%),
            radial-gradient(circle at center center, #1eb1c2 0%, #157f8b 70%, #0f6470 100%);
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        padding: 0;
        isolation: isolate;
        min-height: 450px;
    }
    .lx-banner-lx-group::before,
    .lx-banner-lx-group::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(70px);
        pointer-events: none;
        z-index: 0;
    }
    .lx-banner-lx-group::before {
        top: -140px; left: -90px;
        width: 380px; height: 380px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 70%);
        animation: lxOrbDriftA 14s ease-in-out infinite;
    }
    .lx-banner-lx-group::after {
        bottom: -160px; right: -110px;
        width: 420px; height: 420px;
        background: radial-gradient(circle, rgba(30, 177, 194, 0.55), transparent 70%);
        animation: lxOrbDriftB 18s ease-in-out infinite;
    }
    .lx-banner-decor {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
    }
    .lx-banner-grid {
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
        background-size: 60px 60px;
        opacity: 0.6;
        -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 75%);
                mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 75%);
    }
    .lx-banner-lx-group .container {
        position: relative;
        z-index: 1;
    }
    .lx-banner-lx-group-logo {
        margin: 0 0 2.5rem;
        text-align: left;
    }
    .lx-banner-lx-group-logo img {
        display: inline-block;
        max-width: 160px;
        height: auto;
    }
    .lx-banner-lx-group .lx-group-title {
        font-weight: 800;
        font-size: 3rem;
        line-height: 1.5;
        letter-spacing: -0.025em;
        margin: 0 0 0.5rem;
        background: linear-gradient(
            110deg,
            #ffffff 0%, #eaf9fb 30%, #ffffff 42%,
            #d5f6fa 50%, #ffffff 58%, #eaf9fb 70%, #ffffff 100%
        );
        background-size: 300% auto;
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: lxTitleShimmer 7s ease-in-out infinite;
        text-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    }
    .lx-banner-lx-group .lx-group-subtitle {
        color: #d2eef2;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        opacity: 0.95;
        max-width: 580px;
        margin: 0 0 4.5rem;
    }
    /* Trust bar — 3 stat chips */
    .lx-trust-bar {
        list-style: none;
        padding: 0;
        margin: 0 0 5rem;
        display: flex;
        gap: 0.85rem;
        flex-wrap: wrap;
    }
    .lx-trust-item {
        display: inline-flex;
        align-items: center;
        gap: 0.65rem;
        padding: 0.7rem 1.15rem;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 999px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
    }
    .lx-trust-item:hover {
        transform: translateY(-2px);
        background: rgba(255, 255, 255, 0.10);
        border-color: rgba(255, 255, 255, 0.3);
    }
    .lx-trust-value {
        font-size: 1.25rem;
        font-weight: 800;
        color: #ffffff;
        line-height: 1;
        letter-spacing: -0.01em;
    }
    .lx-trust-value sup {
        font-size: 0.7em;
        color: #87e5f0;
        margin-left: 1px;
    }
    .lx-trust-label {
        font-size: 0.82rem;
        font-weight: 500;
        color: #c9eaee;
        letter-spacing: 0.04em;
    }
    .lx-banner-lx-group-content {
        align-self: stretch !important;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        padding-top: 1rem;
    }
    .lx-banner-lx-group-image {
        align-self: stretch !important;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        padding-top: 2rem;
        line-height: 0;
        font-size: 0;
    }
    .lx-banner-image-wrap {
        position: relative;
        display: block;
        line-height: 0;
        font-size: 0;
    }
    .lx-banner-image-wrap::after {
        content: "";
        position: absolute;
        inset: 8% 12%;
        background: radial-gradient(circle, rgba(30, 177, 194, 0.45), transparent 65%);
        filter: blur(40px);
        z-index: -1;
    }
    .lx-banner-lx-group-image img {
        max-width: 108%;
        height: auto;
        display: block;
        margin: 4rem auto 0;
        animation: lxFloat 4s ease-in-out infinite;
    }

    /* ---- Licenses ---- */
    .lx-licenses {
        position: relative;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        padding: 7rem 0 1rem;
        background:
            radial-gradient(circle at 0% 0%, rgba(25, 156, 170, 0.05) 0%, transparent 35%),
            radial-gradient(circle at 100% 100%, rgba(25, 156, 170, 0.04) 0%, transparent 40%),
            #ffffff;
    }
    .lx-licenses .lx-licenses-title {
        font-size: 2.85rem;
        font-weight: 800;
        color: var(--lx-ink);
        line-height: 1.12;
        letter-spacing: -0.02em;
        margin: 0 0 1rem;
    }
    .lx-licenses .lx-licenses-content {
        font-size: 1.05rem;
        color: var(--lx-muted);
        font-weight: normal;
        line-height: 1.65;
        margin: 0;
    }
    /* WikiLicense — beside the title */
    .lx-banner-lx-group .lx-wikilicense {
        --wl-panel-w: 480px;
    }

    .lx-banner-lx-group .lx-wikilicense-badge:empty {
        width: 150px;
        height: 44px;
    }

    .license-grid {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }
    .license-grid > [class*="col-"] {
        display: flex;
    }
    .license-card {
        position: relative;
        background: #ffffff;
        border: 1px solid var(--lx-line);
        border-radius: var(--lx-radius-md);
        padding: 2.25rem 1.5rem 1.75rem;
        width: 100%;
        height: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                    box-shadow 0.45s ease,
                    border-color 0.45s ease;
        box-shadow: var(--lx-shadow-sm);
        overflow: hidden;
    }
    .license-card::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 4px;
        background: linear-gradient(90deg, #1eb1c2, #199caa, #157f8b);
        opacity: 0;
        transform: translateY(-4px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }
    .license-card:hover {
        transform: translateY(-8px);
        border-color: rgba(25, 156, 170, 0.35);
        box-shadow: var(--lx-shadow-lg);
    }
    .license-card:hover::before {
        opacity: 1;
        transform: translateY(0);
    }
    .license-card-media {
        width: 96px;
        height: 96px;
        border-radius: 50%;
        background:
            radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9) 0%, transparent 65%),
            linear-gradient(135deg, rgba(30, 177, 194, 0.18) 0%, rgba(25, 156, 170, 0.10) 100%);
        border: 1px solid rgba(25, 156, 170, 0.20);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0.5rem 0 1.5rem;
        position: relative;
        overflow: hidden;
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .license-card:hover .license-card-media {
        transform: scale(1.06) rotate(-2deg);
    }
    .license-card-media img {
        max-width: 60%;
        max-height: 60%;
        object-fit: contain;
    }
    .license-card-short {
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--lx-teal);
        margin-bottom: 0.5rem;
    }
    .license-card-authority {
        font-size: 1.2rem !important;
        font-weight: 700 !important;
        color: var(--lx-ink);
        line-height: 1.3 !important;
        margin: 0 0 1.25rem;
        min-height: 2.1rem;
    }
    .license-card-reg {
        margin: auto -1.5rem -1.75rem;
        padding: 1rem 1.5rem;
        background: linear-gradient(180deg, rgba(25, 156, 170, 0.04) 0%, rgba(25, 156, 170, 0.08) 100%);
        border-top: 1px solid var(--lx-line);
        width: calc(100% + 3rem);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.15rem;
    }
    .license-card-reg-label {
        text-transform: uppercase;
        letter-spacing: 0.14em;
        font-size: 0.7rem;
        color: var(--lx-muted);
        font-weight: 600;
    }
    .license-card-reg-number {
        font-weight: 800;
        color: var(--lx-ink);
        font-size: 1.05rem;
        letter-spacing: 0.06em;
        font-variant-numeric: tabular-nums;
    }
    .license-card-link {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
        margin-top: 0.85rem !important;
        font-size: 0.78rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.01em !important;
        color: #199caa !important;
        text-decoration: none !important;
        transition: color 0.25s ease !important;
    }
    .license-card-link-icon {
        flex-shrink: 0 !important;
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }
    .license-card:hover .license-card-link,
    .license-card-link:hover,
    .license-card-link:focus-visible {
        color: var(--lx-teal-deep) !important;
    }
    .license-card:hover .license-card-link-icon,
    .license-card-link:hover .license-card-link-icon {
        transform: translate(2px, -2px) !important;
    }

    /* ---- lx-group List (horizontal alternating cards) ---- */
    .lx-group-list {
        position: relative;
        background:
            linear-gradient(180deg, #f7fafb 0%, #f3f6f8 100%);
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        padding: 7rem 0;
        overflow: hidden;
    }
    .lx-section-blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(80px);
        pointer-events: none;
        z-index: 0;
    }
    .lx-section-blob-1 {
        top: -120px; left: -100px;
        width: 360px; height: 360px;
        background: radial-gradient(circle, rgba(30, 177, 194, 0.18), transparent 70%);
    }
    .lx-section-blob-2 {
        bottom: -140px; right: -120px;
        width: 380px; height: 380px;
        background: radial-gradient(circle, rgba(25, 156, 170, 0.12), transparent 70%);
    }
    .lx-group-list .container {
        position: relative;
        z-index: 1;
    }
    .lx-group-list .lx-group-list-title {
        font-size: 2.85rem;
        font-weight: 800;
        color: var(--lx-ink);
        line-height: 1.12;
        letter-spacing: -0.02em;
        margin: 0 0 1rem;
    }
    .lx-group-list .lx-group-list-content {
        font-size: 1.05rem;
        color: var(--lx-muted);
        font-weight: normal;
        line-height: 1.65;
        margin: 0;
    }
    .lx-group-list-grid {
        display: flex;
        flex-direction: column;
        gap: 1.75rem;
    }
    .lx-group-card {
        position: relative;
        background: #ffffff;
        border: 1px solid var(--lx-line);
        border-radius: var(--lx-radius-md);
        overflow: hidden;
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                    box-shadow 0.45s ease,
                    border-color 0.45s ease;
        box-shadow: var(--lx-shadow-sm);
    }
    .lx-group-card:hover {
        transform: translateY(-6px);
        border-color: rgba(25, 156, 170, 0.30);
        box-shadow: var(--lx-shadow-lg);
    }
    .lx-group-card::before {
        content: "";
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 6px;
        background: linear-gradient(180deg, #1eb1c2 0%, #199caa 100%);
        transform: scaleY(0);
        transform-origin: top center;
        transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none;
        z-index: 2;
    }
    .lx-group-card.lx-group-card-reverse::before {
        right: auto; left: 0;
    }
    .lx-group-card:hover::before {
        transform: scaleY(1);
    }
    .lx-group-card-inner {
        display: flex;
        align-items: stretch;
        min-height: 240px;
    }
    .lx-group-card-logo {
        position: relative;
        flex: 0 0 34%;
        max-width: 34%;
        background:
            radial-gradient(circle at 50% 50%, #ffffff 0%, #f7fbfc 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2.5rem 2rem;
        overflow: hidden;
    }
    .lx-group-card-logo-ring {
        position: absolute;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        border: 1px dashed rgba(25, 156, 170, 0.18);
        opacity: 0;
        transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
        transform: scale(0.85);
    }
    .lx-group-card-logo-ring::after {
        content: "";
        position: absolute;
        inset: 14px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(25, 156, 170, 0.12), transparent 70%);
    }
    .lx-group-card:hover .lx-group-card-logo-ring {
        opacity: 1;
        transform: scale(1) rotate(8deg);
    }
    .lx-group-card-logo img {
        position: relative;
        width: 280px;
        height: 130px;
        object-fit: contain;
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        opacity: 0.85;
        transition: filter 0.55s ease, -webkit-filter 0.55s ease, opacity 0.55s ease, transform 0.55s ease;
        z-index: 1;
    }
    .lx-group-card:hover .lx-group-card-logo img {
        filter: grayscale(0%);
        -webkit-filter: grayscale(0%);
        opacity: 1;
        transform: scale(1.04);
    }
    .lx-group-card-logo img[alt="Acuity logo"] {
        width: 200px;
        height: 95px;
    }
    .lx-group-card-body {
        flex: 1 1 auto;
        padding: 2.25rem 2.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .lx-group-card-title {
        font-size: 1.65rem !important;
        font-weight: 800 !important;
        color: var(--lx-ink);
        line-height: 1.15;
        margin: 0 0 0.85rem;
    }
    .lx-group-card-desc {
        font-size: 1rem;
        line-height: 1.7;
        color: var(--lx-muted);
        margin: 0;
    }

    /* ---- Liquidity Carousel ---- */
    .lx-liquidity {
        position: relative;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        padding: 7rem 0;
        background:
            radial-gradient(circle at 50% 0%, rgba(25, 156, 170, 0.06) 0%, transparent 35%),
            #ffffff;
        overflow: hidden;
    }
    .lx-liquidity .lx-liquidity-title {
        font-size: 2.5rem;
        font-weight: 800;
        color: var(--lx-ink);
        line-height: 1.15;
        letter-spacing: -0.02em;
        margin: 0 0 1rem;
    }
    .lx-liquidity .lx-liquidity-subtitle {
        font-size: 1.05rem;
        color: var(--lx-muted);
        font-weight: normal;
        line-height: 1.65;
        margin: 0;
    }
    .lx-liquidity-carousel {
        position: relative;
        overflow: hidden;
        width: 100%;
        padding: 1.5rem 0;
        --lx-copy-stride: calc(6 * (200px + 3rem));
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
    }
    .lx-liquidity-track {
        display: flex;
        width: max-content;
        animation: lxLiquidityScroll 28s linear infinite;
    }
    .lx-liquidity-slide {
        flex: 0 0 auto;
        width: 200px;
        height: 100px;
        margin-right: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        border: 1px solid var(--lx-line);
        border-radius: var(--lx-radius-md);
        padding: 1.25rem;
        box-shadow: var(--lx-shadow-sm);
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                    border-color 0.4s ease,
                    box-shadow 0.4s ease;
    }
    .lx-liquidity-slide:hover {
        transform: translateY(-4px);
        border-color: rgba(25, 156, 170, 0.35);
        box-shadow: var(--lx-shadow-md);
    }
    .lx-liquidity-slide img {
        width: 140px;
        height: 55px;
        object-fit: contain;
        opacity: 1;
        transition: transform 0.4s ease;
    }
    .lx-liquidity-slide:hover img {
        transform: scale(1.06);
    }

    /* ---- CTA Steps Section ---- */
    .lx-group-cta {
        position: relative;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        padding: 7rem 0 1rem;
        background:
            linear-gradient(180deg, #f7fafb 0%, #f3f6f8 100%);
        overflow: hidden;
    }
    .lx-group-cta .container { position: relative; z-index: 1; }
    .lx-group-cta-title {
        font-size: 2.5rem !important;
        font-weight: 800 !important;
        color: var(--lx-ink) !important;
        line-height: 1.15;
        margin: 0 0 1rem;
    }
    .lx-group-cta-steps {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }
    .lx-group-cta-steps > [class*="col-"] {
        display: flex;
    }
    .lx-group-step {
        position: relative;
        background: linear-gradient(180deg, #ffffff 0%, #f7fbfc 100%);
        border: 1px solid rgba(25, 156, 170, 0.12);
        border-radius: var(--lx-radius-md);
        padding: 2.25rem 1.75rem;
        width: 100%;
        height: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                    box-shadow 0.45s ease,
                    border-color 0.45s ease;
        box-shadow: var(--lx-shadow-sm);
    }
    .lx-group-step:hover {
        transform: translateY(-6px);
        border-color: rgba(25, 156, 170, 0.30);
        box-shadow: var(--lx-shadow-lg);
    }
    .lx-group-step-number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: linear-gradient(135deg, #1eb1c2 0%, #157f8b 100%);
        color: #ffffff;
        font-size: 1.25rem;
        font-weight: 800;
        margin-bottom: 1.25rem;
        box-shadow: 0 8px 18px rgba(25, 156, 170, 0.30);
    }
    .lx-group-step-title {
        font-size: 1.35rem !important;
        font-weight: 800 !important;
        color: var(--lx-ink);
        line-height: 1.2 !important;
        margin: 0 0 0.75rem;
    }
    .lx-group-step-desc {
        font-size: 1rem;
        color: var(--lx-muted);
        line-height: 1.65;
        margin: 0;
    }
    .lx-group-cta-buttons {
        margin-top: 3rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
    .btn-lx-group-primary,
    .btn-lx-group-secondary {
        display: inline-block !important;
        border-radius: 999px !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
        padding: 0.85rem 2.25rem !important;
        line-height: 1.2 !important;
        text-decoration: none !important;
        transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
        position: relative !important;
        overflow: hidden !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
    }
    .btn-lx-group-primary {
        background: linear-gradient(135deg, #1eb1c2 0%, #199caa 100%) !important;
        border: 1px solid #199caa !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px -10px rgba(25, 156, 170, 0.55) !important;
    }
    .btn-lx-group-primary::before {
        content: "";
        position: absolute;
        top: 0; left: -120%;
        width: 75%; height: 100%;
        background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100%);
        transform: skewX(-22deg);
        transition: left 0.7s ease;
        pointer-events: none;
    }
    .btn-lx-group-primary:hover {
        background: linear-gradient(135deg, #28c2d4 0%, #1eb1c2 100%) !important;
        transform: translateY(-2px);
        box-shadow: 0 16px 32px -10px rgba(25, 156, 170, 0.65) !important;
    }
    .btn-lx-group-primary:hover::before { left: 130%; }
    .btn-lx-group-secondary {
        background: transparent !important;
        border: 1.5px solid #199caa !important;
        color: #157f8b !important;
    }
    .btn-lx-group-secondary:hover {
        background: linear-gradient(135deg, #1eb1c2 0%, #199caa 100%) !important;
        color: #ffffff !important;
        transform: translateY(-2px);
        border-color: transparent !important;
    }
    .lx-group-cta-copy {
        margin: 8rem 0 2rem !important;
        text-align: center;
        font-size: 0.875rem;
        color: var(--lx-muted);
        opacity: 0.75;
    }
}
/* END Desktop view */

/* ============================================================
   START Tablet view
   ============================================================ */
@media (min-width: 768px) and (max-width: 1200px) {
    .lx-group-page .lx-section-head { margin-bottom: 2.5rem; }
    /* Banner */
    .lx-banner-lx-group {
        position: relative;
        border-bottom-right-radius: 2rem;
        border-bottom-left-radius: 2rem;
        overflow: hidden;
        background-blend-mode: overlay;
        background-color: #157f8b;
        background-image:
            radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.18) 0%, transparent 35%),
            radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.12) 0%, transparent 40%),
            radial-gradient(circle at center center, #1eb1c2 0%, #157f8b 70%, #0f6470 100%);
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        padding: 0 0 2rem;
        isolation: isolate;
    }
    .lx-banner-lx-group::before,
    .lx-banner-lx-group::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(55px);
        pointer-events: none;
        z-index: 0;
    }
    .lx-banner-lx-group::before {
        top: -100px; left: -60px;
        width: 280px; height: 280px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.24), transparent 70%);
        animation: lxOrbDriftA 15s ease-in-out infinite;
    }
    .lx-banner-lx-group::after {
        bottom: -120px; right: -80px;
        width: 320px; height: 320px;
        background: radial-gradient(circle, rgba(30, 177, 194, 0.45), transparent 70%);
        animation: lxOrbDriftB 19s ease-in-out infinite;
    }
    .lx-banner-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .lx-banner-grid {
        position: absolute; inset: 0;
        background-image:
            linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
        background-size: 50px 50px;
        opacity: 0.5;
        -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 75%);
                mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 75%);
    }
    .lx-banner-lx-group .container { position: relative; z-index: 1; }
    .lx-banner-lx-group-content { text-align: center; padding-top: 1rem; }
    .lx-banner-lx-group-logo { margin: 0 0 1.75rem; text-align: center; }
    .lx-banner-lx-group-logo img { display: inline-block; max-width: 140px; height: auto; }

    .lx-banner-lx-group .lx-group-title {
        font-size: 2.15rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.02em;
        margin: 0 0 0.5rem;
        background: linear-gradient(110deg, #ffffff 0%, #eaf9fb 30%, #ffffff 42%, #d5f6fa 50%, #ffffff 58%, #eaf9fb 70%, #ffffff 100%);
        background-size: 300% auto;
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: lxTitleShimmer 7s ease-in-out infinite;
        text-shadow: 0 5px 20px rgba(0, 0, 0, 0.18);
    }
    .lx-banner-lx-group .lx-group-subtitle {
        color: #d2eef2; font-size: 0.95rem; font-weight: 400; line-height: 1.5;
        opacity: 0.95; margin: 0 auto 1.5rem;
    }
    .lx-trust-bar {
        list-style: none; padding: 0; margin: 0 0 1.5rem;
        display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center;
    }
    .lx-trust-item {
        display: inline-flex; align-items: center; gap: 0.45rem;
        padding: 0.5rem 0.85rem;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 999px;
    }
    .lx-trust-value { font-size: 1rem; font-weight: 800; color: #ffffff; line-height: 1; }
    .lx-trust-value sup { font-size: 0.7em; color: #87e5f0; }
    .lx-trust-label { font-size: 0.72rem; font-weight: 500; color: #c9eaee; }
    .lx-banner-lx-group-image {
        align-self: stretch !important; display: flex !important;
        flex-direction: column; justify-content: center;
        padding-top: 1.75rem; line-height: 0; font-size: 0;
    }
    .lx-banner-image-wrap { position: relative; display: block; line-height: 0; font-size: 0; }
    .lx-banner-image-wrap::after {
        content: ""; position: absolute; inset: 8% 12%;
        background: radial-gradient(circle, rgba(30, 177, 194, 0.40), transparent 65%);
        filter: blur(30px); z-index: -1;
    }
    .lx-banner-lx-group-image img {
        max-width: 100%; height: auto; display: block; margin: 0 auto;
        animation: lxFloat 4s ease-in-out infinite;
    }
    /* Licenses */
    .lx-licenses {
        position: relative; font-family: 'Roboto', Arial, Helvetica, sans-serif;
        padding: 4.5rem 0;
        background: radial-gradient(circle at 0% 0%, rgba(25, 156, 170, 0.05) 0%, transparent 35%), #ffffff;
    }
    .lx-licenses .lx-licenses-title {
        font-size: 1.85rem; font-weight: 800; color: var(--lx-ink); line-height: 1.3; margin: 0 0 0.5rem;
    }
    .lx-licenses .lx-licenses-content {
        font-size: 0.95rem; color: var(--lx-muted); line-height: 1.55; margin: 0;
    }
    /* WikiLicense — beside the title, row centered with the banner text */
    .lx-banner-lx-group .lx-wikilicense {
        --wl-panel-w: 440px;
    }

    .lx-banner-lx-group .lx-wikilicense-badge:empty { width: 140px; height: 40px; }

    .license-grid { display: flex; flex-wrap: wrap; align-items: stretch; row-gap: 1.5rem; }
    .license-grid > [class*="col-"] { display: flex; flex: 0 0 50%; max-width: 50%; }
    .license-card {
        position: relative; background: #ffffff; border: 1px solid var(--lx-line);
        border-radius: var(--lx-radius-md); padding: 1.75rem 1.25rem 1.5rem;
        width: 100%; height: 100%; text-align: center;
        display: flex; flex-direction: column; align-items: center;
        box-shadow: var(--lx-shadow-sm); overflow: hidden;
        transition: transform 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;
    }
    .license-card::before {
        content: ""; position: absolute; top: 0; left: 0; right: 0;
        height: 3px; background: linear-gradient(90deg, #1eb1c2, #199caa, #157f8b);
        opacity: 0; transition: opacity 0.4s ease;
    }
    .license-card:hover { transform: translateY(-6px); border-color: rgba(25, 156, 170, 0.32); box-shadow: var(--lx-shadow-md); }
    .license-card:hover::before { opacity: 1; }
    .license-card-media {
        width: 80px; height: 80px; border-radius: 50%;
        background:
            radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9) 0%, transparent 65%),
            linear-gradient(135deg, rgba(30, 177, 194, 0.18) 0%, rgba(25, 156, 170, 0.10) 100%);
        border: 1px solid rgba(25, 156, 170, 0.20);
        display: flex; align-items: center; justify-content: center;
        margin: 0.5rem 0 1.25rem; overflow: hidden;
    }
    .license-card-media img { max-width: 60%; max-height: 60%; object-fit: contain; }
    .license-card-short {
        font-size: 0.65rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
        color: var(--lx-teal); margin-bottom: 0.4rem;
    }
    .license-card-authority {
        font-size: 1.2rem !important; font-weight: 700 !important; color: var(--lx-ink);
        line-height: 1.35; margin: 0 0 1rem; min-height: 2rem;
    }
    .license-card-reg {
        margin: auto -1.25rem -1.5rem; padding: 0.85rem 1.25rem;
        background: linear-gradient(180deg, rgba(25, 156, 170, 0.04) 0%, rgba(25, 156, 170, 0.08) 100%);
        border-top: 1px solid var(--lx-line); width: calc(100% + 2.5rem);
        display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
    }
    .license-card-reg-label {
        text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.65rem;
        color: var(--lx-muted); font-weight: 600;
    }
    .license-card-reg-number {
        font-weight: 800; color: var(--lx-ink); font-size: 0.95rem; letter-spacing: 0.05em;
        font-variant-numeric: tabular-nums;
    }
    .license-card-link {
        display: inline-flex !important; align-items: center !important; gap: 0.3rem !important;
        margin-top: 0.75rem !important; font-size: 0.72rem !important; font-weight: 600 !important;
        color: var(--lx-teal) !important; text-decoration: none !important; transition: color 0.25s ease !important;
    }
    .license-card-link-icon { flex-shrink: 0 !important; transition: transform 0.3s ease !important; }
    .license-card:hover .license-card-link { color: var(--lx-teal-deep) !important; }
    .license-card:hover .license-card-link-icon { transform: translate(2px, -2px) !important; }

    /* lx-group List */
    .lx-group-list {
        position: relative;
        background: linear-gradient(180deg, #f7fafb 0%, #f3f6f8 100%);
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        padding: 4.5rem 0; overflow: hidden;
    }
    .lx-section-blob { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; z-index: 0; }
    .lx-section-blob-1 { top: -100px; left: -80px; width: 280px; height: 280px; background: radial-gradient(circle, rgba(30, 177, 194, 0.18), transparent 70%); }
    .lx-section-blob-2 { bottom: -120px; right: -100px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(25, 156, 170, 0.12), transparent 70%); }
    .lx-group-list .container { position: relative; z-index: 1; }
    .lx-group-list .lx-group-list-title {
        font-size: 1.85rem; font-weight: 800; color: var(--lx-ink); line-height: 1.3; margin: 0 0 0.5rem;
    }
    .lx-group-list .lx-group-list-content {
        font-size: 0.95rem; color: var(--lx-muted); line-height: 1.55; margin: 0;
    }
    .lx-group-list-grid { display: flex; flex-direction: column; gap: 1.5rem; }
    .lx-group-card {
        position: relative; background: #ffffff; border: 1px solid var(--lx-line);
        border-radius: var(--lx-radius-md); overflow: hidden;
        transition: transform 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;
        box-shadow: var(--lx-shadow-sm);
    }
    .lx-group-card:hover { transform: translateY(-4px); border-color: rgba(25, 156, 170, 0.30); box-shadow: var(--lx-shadow-md); }
    .lx-group-card::before {
        content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 5px;
        background: linear-gradient(180deg, #1eb1c2 0%, #199caa 100%);
        transform: scaleY(0); transform-origin: top center;
        transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none; z-index: 2;
    }
    .lx-group-card.lx-group-card-reverse::before { right: auto; left: 0; }
    .lx-group-card:hover::before { transform: scaleY(1); }
    .lx-group-card-inner { display: flex; align-items: stretch; min-height: 200px; }
    .lx-group-card-logo {
        position: relative; flex: 0 0 35%; max-width: 35%;
        background: radial-gradient(circle at 50% 50%, #ffffff 0%, #f7fbfc 100%);
        display: flex; align-items: center; justify-content: center;
        padding: 1.75rem 1.25rem; overflow: hidden;
    }
    .lx-group-card-logo-ring {
        position: absolute; width: 170px; height: 170px; border-radius: 50%;
        border: 1px dashed rgba(25, 156, 170, 0.18);
        opacity: 0; transform: scale(0.85);
        transition: opacity 0.5s ease, transform 0.7s ease;
    }
    .lx-group-card:hover .lx-group-card-logo-ring { opacity: 1; transform: scale(1) rotate(8deg); }
    .lx-group-card-logo img {
        position: relative; width: 210px; height: 100px;
        object-fit: contain; opacity: 1;
        transition: transform 0.5s ease; z-index: 1;
    }
    .lx-group-card:hover .lx-group-card-logo img { transform: scale(1.04); }
    .lx-group-card-logo img[alt="Acuity logo"] { width: 150px; height: 75px; }
    .lx-group-card-body {
        flex: 1 1 auto; padding: 1.75rem 2rem;
        display: flex; flex-direction: column; justify-content: center;
    }
    .lx-group-card-title {
        font-size: 1.35rem !important; font-weight: 800 !important; color: var(--lx-ink);
        line-height: 1.15; margin: 0 0 0.65rem;
    }
    .lx-group-card-desc { font-size: 0.92rem; line-height: 1.65; color: var(--lx-muted); margin: 0; }

    /* Liquidity Carousel */
    .lx-liquidity {
        position: relative; font-family: 'Roboto', Arial, Helvetica, sans-serif;
        padding: 4.5rem 0;
        background: radial-gradient(circle at 50% 0%, rgba(25, 156, 170, 0.06) 0%, transparent 35%), #ffffff;
        overflow: hidden;
    }
    .lx-liquidity .lx-liquidity-title {
        font-size: 1.75rem; font-weight: 800; color: var(--lx-ink); line-height: 1.3; margin: 0 0 0.5rem;
    }
    .lx-liquidity .lx-liquidity-subtitle {
        font-size: 0.95rem; color: var(--lx-muted); line-height: 1.55; margin: 0;
    }
    .lx-liquidity-carousel {
        position: relative; overflow: hidden; width: 100%; padding: 1.25rem 0;
        --lx-copy-stride: calc(6 * (160px + 2rem));
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
    }
    .lx-liquidity-track { display: flex; width: max-content; animation: lxLiquidityScroll 24s linear infinite; }
    .lx-liquidity-slide {
        flex: 0 0 auto; width: 160px; height: 80px; margin-right: 2rem;
        background: #ffffff; border: 1px solid var(--lx-line);
        border-radius: var(--lx-radius-md); padding: 1rem; box-shadow: var(--lx-shadow-sm);
        display: flex; align-items: center; justify-content: center;
        transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    }
    .lx-liquidity-slide:hover { transform: translateY(-3px); border-color: rgba(25, 156, 170, 0.35); box-shadow: var(--lx-shadow-md); }
    .lx-liquidity-slide img { width: 115px; height: 45px; object-fit: contain; opacity: 1; transition: transform 0.4s ease; }
    .lx-liquidity-slide:hover img { transform: scale(1.05); }

    /* CTA Steps Section */
    .lx-group-cta {
        position: relative; font-family: 'Roboto', Arial, Helvetica, sans-serif;
        padding: 4.5rem 0 1rem; background: linear-gradient(180deg, #f7fafb 0%, #f3f6f8 100%); overflow: hidden;
    }
    .lx-group-cta .container { position: relative; z-index: 1; }
    .lx-group-cta-title { font-size: 1.85rem !important; font-weight: 800 !important; color: var(--lx-ink); line-height: 1.3; margin: 0 0 0.5rem !important; }
    .lx-group-cta-steps { display: flex; flex-wrap: wrap; align-items: stretch; gap: 1.25rem; justify-content: center; }
    .lx-group-cta-steps > [class*="col-"] { display: flex; flex: 0 0 60%; max-width: 60%; }

    .lx-group-step {
        position: relative;
        background: linear-gradient(180deg, #ffffff 0%, #f7fbfc 100%);
        border: 1px solid rgba(25, 156, 170, 0.12); border-radius: var(--lx-radius-md);
        padding: 1.75rem 1.25rem; width: 100%; height: 100%; text-align: center;
        display: flex; flex-direction: column; align-items: center;
        box-shadow: var(--lx-shadow-sm);
        transition: transform 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;
    }
    .lx-group-step:hover { transform: translateY(-5px); border-color: rgba(25, 156, 170, 0.30); box-shadow: var(--lx-shadow-md); }
    .lx-group-step-number {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; border-radius: 50%;
        background: linear-gradient(135deg, #1eb1c2 0%, #157f8b 100%);
        color: #ffffff; font-size: 1.1rem; font-weight: 800;
        margin-bottom: 1rem; box-shadow: 0 6px 14px rgba(25, 156, 170, 0.25);
    }
    .lx-group-step-title { font-size: 1.15rem !important; font-weight: 800 !important; color: var(--lx-ink); line-height: 1.2; margin: 0 0 0.55rem; }
    .lx-group-step-desc { font-size: 0.92rem; color: var(--lx-muted); line-height: 1.6; margin: 0; }
    .lx-group-cta-buttons { margin-top: 2.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem; }
    .btn-lx-group-primary,
    .btn-lx-group-secondary {
        display: inline-block !important; border-radius: 999px !important;
        font-size: 0.92rem !important; font-weight: 600 !important;
        letter-spacing: 0.04em !important; text-transform: uppercase !important;
        padding: 0.7rem 1.85rem !important; line-height: 1.2 !important;
        text-decoration: none !important;
        transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease !important;
        position: relative !important; overflow: hidden !important;
        clip-path: none !important; -webkit-clip-path: none !important;
    }
    .btn-lx-group-primary {
        background: linear-gradient(135deg, #1eb1c2 0%, #199caa 100%) !important;
        border: 1px solid #199caa !important; color: #ffffff !important;
        box-shadow: 0 8px 20px -8px rgba(25, 156, 170, 0.5) !important;
    }
    .btn-lx-group-primary:hover { background: linear-gradient(135deg, #28c2d4 0%, #1eb1c2 100%) !important; transform: translateY(-2px); }
    .btn-lx-group-secondary { background: transparent !important; border: 1.5px solid #199caa !important; color: #157f8b !important; }
    .btn-lx-group-secondary:hover {
        background: linear-gradient(135deg, #1eb1c2 0%, #199caa 100%) !important;
        color: #ffffff !important; transform: translateY(-2px); border-color: transparent !important;
    }
    .lx-group-cta-copy {
        margin: 5rem 0 0 !important;
        text-align: center;
        font-size: 0.825rem;
        color: var(--lx-muted);
        opacity: 0.75;
    }
}
/* END Tablet view */

/* ============================================================
   START Mobile view
   ============================================================ */
@media (max-width: 767px) {
    .lx-group-page .container { padding-left: 1rem !important; padding-right: 1rem !important; max-width: 100% !important; width: 100% !important; }
    .lx-group-page .row { margin-left: 0 !important; margin-right: 0 !important; }
    .lx-group-page .row > [class*="col-"] { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }

    /* Banner */
    .lx-banner-lx-group {
        position: relative; border-bottom-right-radius: 1.25rem; border-bottom-left-radius: 1.25rem;
        overflow: hidden; background-blend-mode: overlay; background-color: #157f8b;
        background-image:
            radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.2) 0%, transparent 40%),
            radial-gradient(circle at 80% 85%, rgba(255, 255, 255, 0.12) 0%, transparent 45%),
            radial-gradient(circle at center center, #1eb1c2 0%, #157f8b 70%, #0f6470 100%);
        font-family: 'Roboto', Arial, Helvetica, sans-serif; padding: 0; isolation: isolate;
    }
    .lx-banner-lx-group::before, .lx-banner-lx-group::after {
        content: ""; position: absolute; border-radius: 50%; filter: blur(40px); pointer-events: none; z-index: 0;
    }
    .lx-banner-lx-group::before {
        top: -80px; left: -60px; width: 200px; height: 200px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 70%);
        animation: lxOrbDriftA 16s ease-in-out infinite;
    }
    .lx-banner-lx-group::after {
        bottom: -90px; right: -70px; width: 220px; height: 220px;
        background: radial-gradient(circle, rgba(30, 177, 194, 0.45), transparent 70%);
        animation: lxOrbDriftB 20s ease-in-out infinite;
    }
    .lx-banner-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .lx-banner-grid {
        position: absolute; inset: 0;
        background-image:
            linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
        background-size: 40px 40px; opacity: 0.4;
        -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 75%);
                mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 75%);
    }
    .lx-banner-lx-group .container { position: relative; z-index: 1; padding-bottom: 1rem; }
    .lx-banner-lx-group .row { display: flex; flex-direction: column; }

    /* Logo row + switcher side by side */
    .lx-banner-lx-group-content {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 1.25rem 1rem 0 !important;
        text-align: left !important;
    }
    .lx-banner-lx-group-logo {
    flex: 0 0 auto !important;
    margin: 0 auto 0 0 !important;  /* pushes switcher to far right */
    text-align: left !important;
    order: 1 !important;
}
    .lx-banner-lx-group-logo img {
        max-width: 120px !important;
        display: block !important;
    }
/* Title, subtitle and trust bar full width below the logo row */
    .lx-banner-lx-group .lx-group-title,
    .lx-banner-lx-group .lx-group-subtitle,
    .lx-banner-lx-group .lx-trust-bar {
        flex: 0 0 100% !important;
        width: 100% !important;
        order: 3 !important;
        text-align: center !important;
    }

    .lx-banner-lx-group .lx-group-title {
        font-size: 1.85rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; margin: 2rem 0 0.5rem;
        background: linear-gradient(110deg, #ffffff 0%, #eaf9fb 30%, #ffffff 42%, #d5f6fa 50%, #ffffff 58%, #eaf9fb 70%, #ffffff 100%);
        background-size: 300% auto; -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent; animation: lxTitleShimmer 7s ease-in-out infinite;
        text-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    }
    .lx-banner-lx-group .lx-group-subtitle {
        color: #d2eef2; font-size: 0.88rem; font-weight: 400; line-height: 1.5;
        opacity: 0.95; margin: 0 auto 1.25rem; max-width: 94%;
    }
    .lx-trust-bar {
        list-style: none; padding: 0; margin: 0 0 1.25rem;
        display: flex; gap: 0.45rem; flex-wrap: wrap; justify-content: center;
    }
    .lx-trust-item {
        display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.75rem;
        background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px;
    }
    .lx-trust-value { font-size: 0.9rem; font-weight: 800; color: #ffffff; line-height: 1; }
    .lx-trust-value sup { font-size: 0.7em; color: #87e5f0; }
    .lx-trust-label { font-size: 0.66rem; font-weight: 500; color: #c9eaee; }

    .lx-banner-lx-group-image { margin-top: 1rem; text-align: center; line-height: 0; font-size: 0; }
    .lx-banner-image-wrap { position: relative; display: block; line-height: 0; font-size: 0; }
    .lx-banner-image-wrap::after {
        content: ""; position: absolute; inset: 12% 16%;
        background: radial-gradient(circle, rgba(30, 177, 194, 0.40), transparent 65%);
        filter: blur(28px); z-index: -1;
    }
    .lx-banner-lx-group-image img { max-width: 75%; height: auto; display: block; margin: 0 auto; animation: lxFloat 4s ease-in-out infinite; }
    .lx-group-page .lx-section-head { margin-bottom: 2rem; }

    /* Licenses */
    .lx-licenses {
        position: relative; font-family: 'Roboto', Arial, Helvetica, sans-serif; padding: 3.5rem 0;
        background: radial-gradient(circle at 0% 0%, rgba(25, 156, 170, 0.05) 0%, transparent 40%), #ffffff;
    }
    .lx-licenses .container { padding: 0 1rem; }
    .lx-licenses .lx-licenses-title { font-size: 1.55rem; font-weight: 800; color: var(--lx-ink); line-height: 1.3; margin: 0 0 0.5rem; }
    .lx-licenses .lx-licenses-content { font-size: 0.875rem; color: var(--lx-muted); line-height: 1.55; margin: 0; }

    /* WikiLicense — beside the title, wraps under it on narrow screens */
    .lx-banner-lx-group .lx-wikilicense {
        --wl-gap: 10px;
    }

    .lx-banner-lx-group .lx-wikilicense-badge:empty { width: 130px; height: 38px; }
    .lx-licenses .lx-wikilicense .lx-wl-panel {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: calc(100vw - 1.5rem) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 1.5rem) !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .lx-licenses .lx-wikilicense.is-wl-clip-right .lx-wl-panel,
    .lx-licenses .lx-wikilicense.is-wl-clip-left .lx-wl-panel {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }

    .license-grid { display: flex; flex-direction: column; gap: 1rem; }
    .license-grid > [class*="col-"] { display: flex; width: 100%; max-width: 100%; flex: 0 0 100%; }
    .license-card {
        position: relative; background: #ffffff; border: 1px solid var(--lx-line);
        border-radius: var(--lx-radius-md); padding: 1.5rem 1rem 1.25rem;
        width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center;
        box-shadow: var(--lx-shadow-sm); overflow: hidden; transition: transform 0.4s ease, box-shadow 0.4s ease;
    }
    .license-card::before {
        content: ""; position: absolute; top: 0; left: 0; right: 0;
        height: 3px; background: linear-gradient(90deg, #1eb1c2, #199caa, #157f8b);
        opacity: 0; transition: opacity 0.4s ease;
    }
    .license-card:active { transform: translateY(-3px); box-shadow: var(--lx-shadow-md); }
    .license-card:active::before { opacity: 1; }
    .license-card-media {
        width: 80px; height: 80px; border-radius: 50%;
        background:
            radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9) 0%, transparent 65%),
            linear-gradient(135deg, rgba(30, 177, 194, 0.18) 0%, rgba(25, 156, 170, 0.10) 100%);
        border: 1px solid rgba(25, 156, 170, 0.20);
        display: flex; align-items: center; justify-content: center; margin: 0.5rem 0 1rem; overflow: hidden;
    }
    .license-card-media img { max-width: 60%; max-height: 60%; object-fit: contain; }
    .license-card-short { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lx-teal); margin-bottom: 0.35rem; }
    .license-card-authority { font-size: 1.2rem !important; font-weight: 700 !important; color: var(--lx-ink); line-height: 1.3; margin: 0 0 0.85rem; }
    .license-card-reg {
        margin: 0.25rem -1rem -1.25rem; padding: 0.75rem 1rem;
        background: linear-gradient(180deg, rgba(25, 156, 170, 0.04) 0%, rgba(25, 156, 170, 0.08) 100%);
        border-top: 1px solid var(--lx-line); width: calc(100% + 2rem);
        display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
    }
    .license-card-reg-label { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.62rem; color: var(--lx-muted); font-weight: 600; }
    .license-card-reg-number { font-weight: 800; color: var(--lx-ink); font-size: 0.92rem; letter-spacing: 0.05em; font-variant-numeric: tabular-nums; }
    .license-card-link {
        display: inline-flex !important; align-items: center !important; gap: 0.3rem !important;
        margin-top: 0.75rem !important; font-size: 0.72rem !important; font-weight: 600 !important;
        color: var(--lx-teal) !important; text-decoration: none !important;
    }
    .license-card-link-icon { flex-shrink: 0 !important; }
    .license-card-link:active { color: var(--lx-teal-deep) !important; }

    /* lx-group List — stacked vertical cards */
    .lx-group-list {
        position: relative; background: linear-gradient(180deg, #f7fafb 0%, #f3f6f8 100%);
        font-family: 'Roboto', Arial, Helvetica, sans-serif; padding: 3.5rem 0; overflow: hidden;
    }
    .lx-group-list .container { position: relative; z-index: 1; padding: 0 1rem; }
    .lx-section-blob { position: absolute; border-radius: 50%; filter: blur(50px); pointer-events: none; z-index: 0; }
    .lx-section-blob-1 { top: -80px; left: -60px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(30, 177, 194, 0.18), transparent 70%); }
    .lx-section-blob-2 { bottom: -90px; right: -70px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(25, 156, 170, 0.12), transparent 70%); }
    .lx-group-list .lx-group-list-title { font-size: 1.55rem; font-weight: 800; color: var(--lx-ink); line-height: 1.3; margin: 0 0 0.5rem; }
    .lx-group-list .lx-group-list-content { font-size: 0.875rem; color: var(--lx-muted); line-height: 1.55; margin: 0; }
    .lx-group-list-grid { display: flex; flex-direction: column; gap: 1.25rem; }
    .lx-group-card {
        position: relative; background: #ffffff; border: 1px solid var(--lx-line);
        border-radius: var(--lx-radius-md); overflow: hidden;
        box-shadow: var(--lx-shadow-sm); transition: transform 0.4s ease, box-shadow 0.4s ease;
    }
    .lx-group-card:active { transform: translateY(-2px); box-shadow: var(--lx-shadow-md); }
    .lx-group-card::before {
        content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 4px;
        background: linear-gradient(180deg, #1eb1c2 0%, #199caa 100%);
        transform: scaleY(0); transform-origin: top center;
        transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; z-index: 2;
    }
    .lx-group-card.lx-group-card-reverse::before { right: auto; left: 0; }
    .lx-group-card:active::before { transform: scaleY(1); }
    .lx-group-card-inner { display: flex; flex-direction: column; align-items: stretch; }
    .lx-group-card-logo {
        order: 1; position: relative; width: 100%; max-width: 100%;
        background: radial-gradient(circle at 50% 50%, #ffffff 0%, #f7fbfc 100%);
        display: flex; align-items: center; justify-content: center;
        padding: 1.5rem 1rem 0.85rem; overflow: hidden;
    }
    .lx-group-card-logo-ring { display: none; }
    .lx-group-card-logo img { position: relative; width: 190px; height: 85px; object-fit: contain; opacity: 1; }
    .lx-group-card-logo img[alt="Acuity logo"] { width: 135px; height: 65px; }
    .lx-group-card-body {
        order: 2; width: 100%;
        background: linear-gradient(180deg, #ffffff 0%, #f3f6f8 100%);
        padding: 1rem 1.25rem 1.35rem; text-align: center;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
    }
    .lx-group-card-title { font-size: 1.2rem !important; font-weight: 800 !important; color: var(--lx-ink); line-height: 1.15; margin: 0; }
    .lx-group-card-desc { font-size: 0.875rem; line-height: 1.6; color: var(--lx-muted); margin: 0; }

    /* Liquidity Carousel */
    .lx-liquidity {
        position: relative; font-family: 'Roboto', Arial, Helvetica, sans-serif; padding: 3.5rem 0;
        background: radial-gradient(circle at 50% 0%, rgba(25, 156, 170, 0.06) 0%, transparent 35%), #ffffff;
        overflow: hidden;
    }
    .lx-liquidity .container { padding: 0 1rem; }
    .lx-liquidity .lx-liquidity-title { font-size: 1.5rem; font-weight: 800; color: var(--lx-ink); line-height: 1.3; margin: 0 0 0.5rem; }
    .lx-liquidity .lx-liquidity-subtitle { font-size: 0.875rem; color: var(--lx-muted); line-height: 1.55; margin: 0; }
    .lx-liquidity-carousel {
        position: relative; overflow: hidden; width: 100%; padding: 1rem 0;
        --lx-copy-stride: calc(6 * (130px + 1.5rem));
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
    }
    .lx-liquidity-track { display: flex; width: max-content; animation: lxLiquidityScroll 22s linear infinite; }
    .lx-liquidity-slide {
        flex: 0 0 auto; width: 130px; height: 68px; margin-right: 1.5rem;
        background: #ffffff; border: 1px solid var(--lx-line);
        border-radius: var(--lx-radius-sm); padding: 0.85rem; box-shadow: var(--lx-shadow-sm);
        display: flex; align-items: center; justify-content: center;
    }
    .lx-liquidity-slide img { width: 95px; height: 40px; object-fit: contain; opacity: 1; }

    /* CTA Steps Section */
    .lx-group-cta {
        position: relative; font-family: 'Roboto', Arial, Helvetica, sans-serif; padding: 3.5rem 0 1rem;
        background: linear-gradient(180deg, #f7fafb 0%, #f3f6f8 100%); overflow: hidden;
    }
    .lx-group-cta .container { padding: 0 1rem; position: relative; z-index: 1; }
    .lx-group-cta-title { font-size: 1.55rem !important; font-weight: 800 !important; color: var(--lx-ink); line-height: 1.3; margin: 0 0 0.5rem !important; }
    .lx-group-cta-steps { display: flex; flex-direction: column; gap: 1rem; }
    .lx-group-cta-steps > [class*="col-"] { display: flex; width: 100%; max-width: 100%; flex: 0 0 100%; }
    .lx-group-step {
        position: relative; background: linear-gradient(180deg, #ffffff 0%, #f7fbfc 100%);
        border: 1px solid rgba(25, 156, 170, 0.12); border-radius: var(--lx-radius-md);
        padding: 1.5rem 1.25rem; width: 100%; text-align: center;
        display: flex; flex-direction: column; align-items: center;
        box-shadow: var(--lx-shadow-sm); transition: transform 0.4s ease, box-shadow 0.4s ease;
    }
    .lx-group-step:active { transform: translateY(-3px); box-shadow: var(--lx-shadow-md); }
    .lx-group-step-number {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; border-radius: 50%;
        background: linear-gradient(135deg, #1eb1c2 0%, #157f8b 100%);
        color: #ffffff; font-size: 1rem; font-weight: 800;
        margin-bottom: 0.85rem; box-shadow: 0 5px 12px rgba(25, 156, 170, 0.25);
    }
    .lx-group-step-title { font-size: 1.1rem !important; font-weight: 800 !important; color: var(--lx-ink); line-height: 1.2; margin: 0 0 0.5rem; }
    .lx-group-step-desc { font-size: 0.875rem; color: var(--lx-muted); line-height: 1.55; margin: 0; }
    .lx-group-cta-buttons { margin-top: 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
    .btn-lx-group-primary,
    .btn-lx-group-secondary {
        display: inline-block !important; border-radius: 999px !important;
        font-size: 0.85rem !important; font-weight: 600 !important;
        letter-spacing: 0.04em !important; text-transform: uppercase !important;
        padding: 0.65rem 1.5rem !important; line-height: 1.2 !important;
        text-decoration: none !important; text-align: center !important;
        transition: background 0.25s ease, color 0.25s ease !important;
        position: relative !important; overflow: hidden !important;
        clip-path: none !important; -webkit-clip-path: none !important;
        width: auto !important; min-width: 200px !important; max-width: 80% !important;
    }
    .btn-lx-group-primary {
        background: linear-gradient(135deg, #1eb1c2 0%, #199caa 100%) !important;
        border: 1px solid #199caa !important; color: #ffffff !important;
        box-shadow: 0 6px 16px -6px rgba(25, 156, 170, 0.5) !important;
    }
    .btn-lx-group-primary:active { background: linear-gradient(135deg, #28c2d4 0%, #1eb1c2 100%) !important; }
    .btn-lx-group-secondary { background: transparent !important; border: 1.5px solid #199caa !important; color: #157f8b !important; }
    .btn-lx-group-secondary:active {
        background: linear-gradient(135deg, #1eb1c2 0%, #199caa 100%) !important;
        color: #ffffff !important; border-color: transparent !important;
    }
    .lx-group-cta-copy {
        margin: 5rem 0 0 !important;
        text-align: center;
        font-size: 0.75rem;
        color: var(--lx-muted);
        opacity: 0.75;
    }
}
/* END Mobile view */

/* ============================================================
   ANIMATIONS — shared keyframes
   ============================================================ */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
@keyframes lxTitleShimmer {
    0%   { background-position: 150% center; }
    100% { background-position: -150% center; }
}
@keyframes lxOrbDriftA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(60px, 40px) scale(1.15); }
}
@keyframes lxOrbDriftB {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-70px, -40px) scale(1.18); }
}
@keyframes lxLiquidityScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * var(--lx-copy-stride, 50%))); }
}
@keyframes lxFloat {
    0%, 100% { transform: translateY(0px); }
    50%      { transform: translateY(-20px); }
}
@keyframes lxWikiSkeleton {
    from { background-position: 120% 0; }
    to   { background-position: -120% 0; }
}
/* Banner load-in */
.lx-group .anim-banner-1,
.lx-group .anim-banner-2,
.lx-group .anim-banner-3 { opacity: 0; }
.lx-group .anim-banner-1 { animation: lxFadeInUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
.lx-group .anim-banner-2 { animation: lxFadeInUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both; }
.lx-group .anim-banner-3 { animation: lxFadeInUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.75s both; }
@keyframes lxFadeInUp {
    from { opacity: 0; transform: translateY(45px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Scroll-triggered fade-in */
.lx-group-page .anim-up {
    opacity: 1; transform: none;
    transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.lx-group-page .anim-d1 { transition-delay: 0.15s; }
.lx-group-page .anim-d2 { transition-delay: 0.3s; }
.lx-group-page .anim-d3 { transition-delay: 0.45s; }
.lx-group-page .anim-d4 { transition-delay: 0.6s; }
/* The badge wrapper must never keep a transform — it would become the
   containing block for the panel and cap its size. */
.lx-group-page .lx-wikilicense.anim-up { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
    .lx-group .anim-banner-1,
    .lx-group .anim-banner-2,
    .lx-group .anim-banner-3 { animation: none; opacity: 1; }
    .lx-group-page .anim-up { transition: none; opacity: 1; transform: none; }
    .lx-banner-lx-group::before,
    .lx-banner-lx-group::after,
    .lx-banner-lx-group .lx-group-title,
    .lx-liquidity-track { animation: none !important; }
    .lx-group-page .lx-wikilicense::after { transition: none; }
    .lx-group-page .lx-wikilicense-badge:empty { animation: none !important; }
}