/* START Desktop view */
@media (min-width: 1201px) {
    .lx-regulations-hero {
        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: 6rem 0 7rem 0;
        isolation: isolate;
    }

    .lx-regulations-hero::before,
    .lx-regulations-hero::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(60px);
        pointer-events: none;
        z-index: 0;
    }

    .lx-regulations-hero::before {
        top: -120px;
        left: -80px;
        width: 340px;
        height: 340px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.25), transparent 70%);
        animation: lxOrbDriftA 14s ease-in-out infinite;
        will-change: transform;
    }

    .lx-regulations-hero::after {
        bottom: -140px;
        right: -100px;
        width: 380px;
        height: 380px;
        background: radial-gradient(circle, rgba(30, 177, 194, 0.45), transparent 70%);
        animation: lxOrbDriftB 18s ease-in-out infinite;
        will-change: transform;
    }

    .lx-regulations-hero-inner {
        position: relative;
        z-index: 1;
    }

    .lx-regulations-hero-inner .lx-regulations-hero-title {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-weight: 800;
        text-align: center;
        margin: 5rem 0 0;
        font-size: 3.2rem;
        letter-spacing: -0.02em;
        line-height: 1.1;
        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-regulations-hero-inner .lx-regulations-hero-subtitle {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        text-align: center;
        color: #f0f6f8;
        font-size: 1.1rem;
        font-weight: 400;
        margin: 1.25rem auto 0;
        max-width: 760px;
        letter-spacing: 0.01em;
        opacity: 0.95;
    }

    .lx-regulations-content {
        width: 100%;
        background: #ffffff;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
    }

    .lx-regulations-content .lx-regulations-intro {
        margin: 5% 0 5% 0;
    }

    .lx-regulations-content .lx-regulations-intro .lx-regulations-intro-text {
        font-weight: 400;
        font-size: 1.1rem;
        color: #5d5c5c;
        line-height: 1.5;
        text-align: center;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
    }

    /* ============================================
       2-column grid using nested subgrid for
       perfect row alignment between both cards
       ============================================ */
    .lx-license-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        margin-bottom: 6rem;
        /* Define 5 rows that BOTH cards will share:
           1. image
           2. authority (label + title)
           3. address (label + description)
           4. regulatory number
           5. button (pushed to bottom) */
        grid-template-rows: auto auto auto auto auto;
        align-items: stretch;
    }

    /* ============================================
       Card base + dual-layer hover gradient
       - ::before holds the default light gradient
       - ::after holds the teal hover gradient (faded in on hover)
       - This avoids re-painting background on hover and keeps
         the transition perfectly smooth.
       ============================================ */
    .lx-license-card {
        position: relative;
        background: linear-gradient(135deg, #f7f9fc 0%, #eef2f8 100%);
        padding: 2.5rem 2rem;
        border-radius: 1.5rem;
        box-shadow: 0 10px 30px rgba(31, 192, 208, 0.08);
        border: 1px solid rgba(31, 192, 208, 0.12);
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        overflow: hidden;
        isolation: isolate;
        grid-row: 1 / -1;
        display: grid;
        grid-template-rows: subgrid;
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                    border-color 0.45s ease;
        will-change: transform, box-shadow;
    }

    /* Teal hover gradient — sits behind content, invisible until hover */
    .lx-license-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(150deg, #1fc0d0 0%, #199caa 45%, #098297 100%);
        opacity: 0;
        z-index: -1;
        transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none;
    }

    /* Soft animated shimmer that sweeps across on hover */
    .lx-license-card::after {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 80%;
        height: 100%;
        background: linear-gradient(
            120deg,
            transparent 0%,
            rgba(255, 255, 255, 0.18) 50%,
            transparent 100%
        );
        transform: skewX(-20deg);
        z-index: -1;
        pointer-events: none;
        transition: left 0s;
    }

    .lx-license-card:nth-child(1) { grid-column: 1; }
    .lx-license-card:nth-child(2) { grid-column: 2; }

    /* ----- HOVER STATE ----- */
    .lx-license-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 18px 38px rgba(9, 130, 151, 0.28),
                    0 6px 14px rgba(31, 192, 208, 0.22);
        border-color: rgba(31, 192, 208, 0.35);
    }

    .lx-license-card:hover::before {
        opacity: 1;
    }

    .lx-license-card:hover::after {
        animation: lxCardShimmer 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    /* Text color shifts on hover for readability against teal */
    .lx-license-card:hover p.lx-license-card-authority,
    .lx-license-card:hover .lx-license-card-authority-name,
    .lx-license-card:hover p.lx-license-card-address,
    .lx-license-card:hover h4.lx-license-card-address,
    .lx-license-card:hover .lx-license-card-reg-number,
    .lx-license-card:hover .lx-license-card-reg-label {
        color: #ffffff;
        transition: color 0.45s ease;
    }

    /* Slight icon lift on hover */
    .lx-license-card:hover .lx-license-card-media {
        transform: translateY(-3px) scale(1.04);
    }

    /* Button restyle on hover so it stays readable on teal background */
    .lx-license-card:hover .lx-license-card-actions .btn-primary {
        background-color: #ffffff;
        border-color: #ffffff;
        color: #098297;
    }

    /* Inner wrapper forwards the subgrid rows to its children */
    .lx-license-card-inner {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: 1 / -1;
        text-align: left;
        width: 100%;
        gap: 1.25rem;
    }

    /* Lock each block to its row so both cards align perfectly */
    .lx-license-card-media    { grid-row: 1; }
    .lx-license-authority     { grid-row: 2; }
    .lx-license-address       { grid-row: 3; }
    .lx-license-reg-number    { grid-row: 4; }
    .lx-license-card-actions  { grid-row: 5; }

    .lx-license-card-media {
        border-radius: 50%;
        margin: 0;
        flex-shrink: 0;
        align-self: start;
        width: 20%;
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .lx-license-card-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Shared field wrappers */
    .lx-license-authority,
    .lx-license-address,
    .lx-license-reg-number {
        display: block;
        margin: 0;
    }

    /* ----- Authority block ----- */
    p.lx-license-card-authority{
        font-size: 1rem;
        color: #5e6282;
        font-weight: 400;
        margin: 0;
        line-height: 1.4;
        transition: color 0.45s ease;
    }

    .lx-regulations-content .lx-license-card-authority-name {
        font-size: 1.35rem;
        font-weight: 700;
        color: #2a2a2a;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        margin: 0;
        line-height: 1.3;
        text-align: left;
        transition: color 0.45s ease;
    }

    /* ----- Address block -----
       Both label (p) and text (h4) share .lx-license-card-address,
       so target them by tag. */
    p.lx-license-card-address {
        font-size: 1rem;
        font-weight: 700;
        color: #000000;
        margin: 0 0 0.15rem 0;
        line-height: 1.4;
        transition: color 0.45s ease;
    }

    .lx-regulations-content h4.lx-license-card-address {
        font-size: 1rem;
        font-weight: 400;
        color: #5e6282;
        line-height: 1.5;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        margin: 0;
        text-align: left;
        transition: color 0.45s ease;
    }

    /* ----- Regulatory number block ----- */
    .lx-license-card-reg-number {
        font-size: 1rem;
        color: #2a2a2a;
        margin: 0;
        font-weight: 400;
        transition: color 0.45s ease;
    }

    .lx-license-card-reg-label {
        font-weight: 700;
        transition: color 0.45s ease;
    }

    /* ----- Actions ----- */
    .lx-license-card-actions {
        display: flex;
        justify-content: center;
        align-items: end;
        padding-top: 0.5rem;
    }

    .lx-license-card-actions .btn-primary {
        display: inline-block;
        background-color: #199caa;
        border: 1px solid #199caa;
        color: #fff;
        border-radius: 2rem;
        font-size: 0.95rem;
        font-weight: 500;
        text-decoration: none;
        transition: background 0.45s ease,
                    border-color 0.45s ease,
                    color 0.45s ease,
                    transform 0.2s ease,
                    box-shadow 0.25s ease;
        min-width: 180px;
        padding: 0.6rem 1.5rem;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        text-align: center;
    }

    .lx-license-card-actions .btn-primary:hover {
        background-color: #ffffff;
        border-color: #ffffff;
        color: #098297;
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(255, 255, 255, 0.4);
    }

    /* ============================================
       Lirunex Group CTA — Frosted glass card (Desktop)
       ============================================ */
    .lx-regulations-licenses-cta {
        position: relative;
        padding: 0 0 6rem 0;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
    }

    .lx-regulations-licenses-cta-card {
        position: relative;
        z-index: 1;
        border-radius: 1.5rem;
        padding: 2rem 5rem 3rem;
        overflow: hidden;
        isolation: isolate;
        color: #0f6470;
        background: #eaf5f9;
        border: none;
        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.06),
            0 4px 8px rgba(15, 23, 42, 0.08),
            0 10px 18px rgba(15, 23, 42, 0.10);
        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                    box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .lx-regulations-licenses-cta-card:hover {
        transform: translateY(-4px);
        box-shadow:
            0 2px 4px rgba(15, 23, 42, 0.08),
            0 6px 12px rgba(15, 23, 42, 0.10),
            0 14px 24px rgba(15, 23, 42, 0.14);
    }

    .lx-regulations-licenses-cta-silk {
        display: none;
    }

    .lx-regulations-licenses-cta-inner {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        align-items: center;
        gap: 3.5rem;
    }

    .lx-regulations-licenses-cta-content {
        text-align: left;
        padding: 0.5rem 0;
    }

    .lx-regulations-licenses-cta-title {
        font-size: 2.6rem !important;
        font-weight: 800 !important;
        color: #0a3a44;
        margin: 0 0 1.25rem 0;
        line-height: 1.2 !important;
        letter-spacing: -0.015em;
    }

    .lx-regulations-licenses-cta-title .lx-regulations-licenses-cta-accent {
        background: linear-gradient(110deg, #1eb1c2 0%, #199caa 35%, #098297 70%, #1eb1c2 100%);
        background-size: 300% auto;
        -webkit-background-clip: text;
                background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: lxTitleShimmer 7s ease-in-out infinite;
    }

    .lx-regulations-licenses-cta-desc {
        font-size: 1rem;
        color: #4a5e66;
        line-height: 1.65;
        margin: 0 0 2.5rem 0 !important;
        font-weight: 400;
    }

    .lx-regulations-licenses-cta-media {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .lx-regulations-licenses-cta-image {
        max-width: 100%;
        height: auto;
        display: block;
        transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .lx-regulations-licenses-cta-card:hover .lx-regulations-licenses-cta-image {
        transform: translateY(-6px) scale(1.02);
    }

    .lx-regulations-licenses-cta-actions {
        margin: 0;
    }

    .lx-regulations-licenses-cta-button {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        background: linear-gradient(135deg, #1eb1c2 0%, #199caa 50%, #098297 100%);
        color: #ffffff;
        border-radius: 999px;
        font-size: 1rem;
        font-weight: 600;
        text-decoration: none;
        padding: 0.9rem 2.2rem;
        min-width: 240px;
        justify-content: center;
        transition: transform 0.3s ease,
                    box-shadow 0.3s ease,
                    filter 0.3s ease;
    }

    .lx-regulations-licenses-cta-button:hover {
        transform: translateY(-3px);
        color: #ffffff;
        filter: brightness(1.08);
        box-shadow:
            0 16px 36px rgba(9, 130, 151, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
        text-decoration: none;
    }

    .lx-regulations-licenses-cta-arrow {
        transition: transform 0.3s ease;
    }

    .lx-regulations-licenses-cta-button:hover .lx-regulations-licenses-cta-arrow {
        transform: translateX(4px);
    }
}
/* END Desktop view */

/* START Tablet view */
@media (min-width: 768px) and (max-width: 1200px) {
    .lx-regulations-hero {
        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: 6rem 0 8rem 0;
        isolation: isolate;
    }

    .lx-regulations-hero::before,
    .lx-regulations-hero::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(60px);
        pointer-events: none;
        z-index: 0;
    }

    .lx-regulations-hero::before {
        top: -100px;
        left: -60px;
        width: 280px;
        height: 280px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.25), transparent 70%);
        animation: lxOrbDriftA 15s ease-in-out infinite;
        will-change: transform;
    }

    .lx-regulations-hero::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;
        will-change: transform;
    }

    .lx-regulations-hero-inner {
        position: relative;
        z-index: 1;
    }

    .lx-regulations-hero-inner .lx-regulations-hero-title {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-weight: 800;
        text-align: center;
        margin: 2rem 1.25rem 0;
        font-size: 2.2rem;
        letter-spacing: -0.02em;
        line-height: 1.1;
        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-regulations-hero-inner .lx-regulations-hero-subtitle {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        text-align: center;
        color: #f0f6f8;
        font-size: 1rem;
        font-weight: 400;
        margin: 1rem auto 0;
        max-width: 600px;
        letter-spacing: 0.01em;
        opacity: 0.95;
    }

    .lx-regulations-content {
        width: 100%;
        background: #ffffff;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        padding: 0 1rem;
    }

    .lx-regulations-content .lx-regulations-intro {
        margin: 5% 0 5% 0;
    }

    .lx-regulations-content .lx-regulations-intro .lx-regulations-intro-text {
        font-weight: 400;
        font-size: 1rem;
        color: #5d5c5c;
        line-height: 1.5;
        text-align: center;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
    }

    /* 2-column subgrid for tablet */
    .lx-license-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto auto auto auto;
        gap: 1.5rem;
        margin-bottom: 6rem;
        align-items: stretch;
    }

    .lx-license-card {
        position: relative;
        background: linear-gradient(135deg, #f7f9fc 0%, #eef2f8 100%);
        padding: 2rem 1.5rem;
        border-radius: 1.5rem;
        box-shadow: 0 10px 30px rgba(31, 192, 208, 0.08);
        border: 1px solid rgba(31, 192, 208, 0.12);
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        overflow: hidden;
        isolation: isolate;
        grid-row: 1 / -1;
        display: grid;
        grid-template-rows: subgrid;
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                    border-color 0.45s ease;
        will-change: transform, box-shadow;
    }

    .lx-license-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(150deg, #1fc0d0 0%, #199caa 45%, #098297 100%);
        opacity: 0;
        z-index: -1;
        transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none;
    }

    .lx-license-card::after {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 80%;
        height: 100%;
        background: linear-gradient(
            120deg,
            transparent 0%,
            rgba(255, 255, 255, 0.18) 50%,
            transparent 100%
        );
        transform: skewX(-20deg);
        z-index: -1;
        pointer-events: none;
        transition: left 0s;
    }

    .lx-license-card:nth-child(1) { grid-column: 1; }
    .lx-license-card:nth-child(2) { grid-column: 2; }

    .lx-license-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 16px 32px rgba(9, 130, 151, 0.28),
                    0 5px 12px rgba(31, 192, 208, 0.20);
        border-color: rgba(31, 192, 208, 0.35);
    }

    .lx-license-card:hover::before {
        opacity: 1;
    }

    .lx-license-card:hover::after {
        animation: lxCardShimmer 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .lx-license-card:hover p.lx-license-card-authority,
    .lx-license-card:hover .lx-license-card-authority-name,
    .lx-license-card:hover p.lx-license-card-address,
    .lx-license-card:hover h4.lx-license-card-address,
    .lx-license-card:hover .lx-license-card-reg-number,
    .lx-license-card:hover .lx-license-card-reg-label {
        color: #ffffff;
        transition: color 0.45s ease;
    }

    .lx-license-card:hover .lx-license-card-media {
        transform: translateY(-3px) scale(1.04);
    }

    .lx-license-card:hover .lx-license-card-actions .btn-primary {
        background-color: #ffffff;
        border-color: #ffffff;
        color: #098297;
    }

    .lx-license-card-inner {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: 1 / -1;
        text-align: left;
        width: 100%;
        gap: 1rem;
    }

    .lx-license-card-media    { grid-row: 1; }
    .lx-license-authority     { grid-row: 2; }
    .lx-license-address       { grid-row: 3; }
    .lx-license-reg-number    { grid-row: 4; }
    .lx-license-card-actions  { grid-row: 5; }

    .lx-license-card-media {
        /* border-radius: 50%; */
        /* overflow: hidden; */
        margin: 0;
        flex-shrink: 0;
        align-self: start;
        width: 20%;
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .lx-license-card-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .lx-license-authority,
    .lx-license-address,
    .lx-license-reg-number {
        display: block;
        margin: 0;
    }

    /* ----- Authority block ----- */
    p.lx-license-card-authority{
        font-size: 1rem;
        color: #5e6282;
        font-weight: 400;
        margin: 0;
        line-height: 1.4;
        transition: color 0.45s ease;
    }

    .lx-regulations-content .lx-license-card-authority-name {
        font-size: 1.2rem;
        font-weight: 700;
        color: #2a2a2a;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        margin: 0;
        line-height: 1.3;
        text-align: left;
        transition: color 0.45s ease;
    }

    /* ----- Address block ----- */
    p.lx-license-card-address {
        font-size: 1rem;
        font-weight: 700;
        color: #000000;
        margin: 0 0 0.15rem 0;
        line-height: 1.4;
        transition: color 0.45s ease;
    }

    .lx-regulations-content h4.lx-license-card-address {
        font-size: 0.95rem;
        font-weight: 400;
        color: #5e6282;
        line-height: 1.5;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        margin: 0;
        text-align: left;
        transition: color 0.45s ease;
    }

    /* ----- Regulatory number block ----- */
    .lx-license-card-reg-number {
        font-size: 0.95rem;
        color: #2a2a2a;
        margin: 0;
        font-weight: 400;
        transition: color 0.45s ease;
    }

    .lx-license-card-reg-label {
        font-weight: 700;
        transition: color 0.45s ease;
    }

    /* ----- Actions ----- */
    .lx-license-card-actions {
        display: flex;
        justify-content: center;
        align-items: end;
        padding-top: 0.5rem;
    }

    .lx-license-card-actions .btn-primary {
        display: inline-block;
        background-color: #199caa;
        border: 1px solid #199caa;
        color: #fff;
        border-radius: 2rem;
        font-size: 0.9rem;
        font-weight: 500;
        text-decoration: none;
        transition: background 0.45s ease,
                    border-color 0.45s ease,
                    color 0.45s ease,
                    transform 0.2s ease,
                    box-shadow 0.25s ease;
        min-width: 160px;
        padding: 0.55rem 1.25rem;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        text-align: center;
    }

    .lx-license-card-actions .btn-primary:hover {
        background-color: #ffffff;
        border-color: #ffffff;
        color: #098297;
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(255, 255, 255, 0.4);
    }

    /* ============================================
       Lirunex Group CTA — Frosted glass on mesh (Tablet)
       ============================================ */
    .lx-regulations-licenses-cta {
        position: relative;
        padding: 0 1.5rem 6rem;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        background: #ffffff;
        overflow: hidden;
        isolation: isolate;
    }

    .lx-regulations-licenses-cta-card {
        position: relative;
        z-index: 1;
        border-radius: 1.75rem;
        padding: 3.25rem 2.75rem 2rem;
        overflow: hidden;
        isolation: isolate;
        color: #0f6470;
        background: #eaf5f9;
        border: 1px solid rgba(255, 255, 255, 0.7);
        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                    box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .lx-regulations-licenses-cta-card:hover,
    .lx-regulations-licenses-cta-card:active {
        transform: translateY(-3px);
        box-shadow:
            0 28px 64px rgba(9, 100, 112, 0.20),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .lx-regulations-licenses-cta-silk {
        position: absolute;
        inset: 0;
        background:
            radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 255, 255, 0.55) 0%, transparent 60%),
            radial-gradient(ellipse 80% 60% at 0% 100%, rgba(213, 246, 250, 0.30) 0%, transparent 65%);
        z-index: 0;
        pointer-events: none;
    }

    .lx-regulations-licenses-cta-content {
        position: relative;
        z-index: 1;
        max-width: 640px;
        text-align: center;
        margin: 0 auto;
        padding: 0.5rem 0;
    }

    .lx-regulations-licenses-cta-title {
        font-size: 2rem;
        font-weight: 800;
        color: #0a3a44;
        margin: 0 0 1rem 0;
        line-height: 1.2;
    }

    .lx-regulations-licenses-cta-title .lx-regulations-licenses-cta-accent {
        background: linear-gradient(110deg, #1eb1c2 0%, #199caa 35%, #098297 70%, #1eb1c2 100%);
        background-size: 300% auto;
        -webkit-background-clip: text;
                background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: lxTitleShimmer 7s ease-in-out infinite;
        font-size: 2rem;
    }

    .lx-regulations-licenses-cta-desc {
        font-size: 1rem;
        color: #4a5e66;
        line-height: 1.65;
        margin: 0 auto 2rem;
        max-width: 580px;
    }

    .lx-regulations-licenses-cta-media {
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 1.5rem auto 0;
    }

    .lx-regulations-licenses-cta-image {
        display: block;
        width: 100%;
        max-width: 260px;
        height: auto;
    }

    .lx-regulations-licenses-cta-actions {
        margin: 0;
    }

    .lx-regulations-licenses-cta-button {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        background: linear-gradient(135deg, #1eb1c2 0%, #199caa 50%, #098297 100%);
        color: #ffffff;
        border-radius: 999px;
        font-size: 0.95rem;
        font-weight: 600;
        text-decoration: none;
        padding: 0.8rem 1.9rem;
        min-width: 220px;
        justify-content: center;
        box-shadow:
            0 10px 24px rgba(9, 130, 151, 0.32),
            inset 0 1px 0 rgba(255, 255, 255, 0.25);
        transition: transform 0.3s ease,
                    box-shadow 0.3s ease,
                    filter 0.3s ease;
    }

    .lx-regulations-licenses-cta-button:hover,
    .lx-regulations-licenses-cta-button:active {
        transform: translateY(-2px);
        color: #ffffff;
        filter: brightness(1.08);
        box-shadow:
            0 14px 30px rgba(9, 130, 151, 0.42),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
        text-decoration: none;
    }

    .lx-regulations-licenses-cta-arrow {
        transition: transform 0.3s ease;
    }

    .lx-regulations-licenses-cta-button:hover .lx-regulations-licenses-cta-arrow {
        transform: translateX(3px);
    }
}
/* END Tablet view */

/* START Mobile view */
@media (max-width: 767px) {
    .lx-regulations-hero {
        position: relative;
        border-bottom-right-radius: 1rem;
        border-bottom-left-radius: 1rem;
        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: 3rem 0 4rem 0;
        isolation: isolate;
    }

    .lx-regulations-hero::before,
    .lx-regulations-hero::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(50px);
        pointer-events: none;
        z-index: 0;
    }

    .lx-regulations-hero::before {
        top: -80px;
        left: -50px;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.25), transparent 70%);
        animation: lxOrbDriftA 16s ease-in-out infinite;
        will-change: transform;
    }

    .lx-regulations-hero::after {
        bottom: -90px;
        right: -60px;
        width: 220px;
        height: 220px;
        background: radial-gradient(circle, rgba(30, 177, 194, 0.45), transparent 70%);
        animation: lxOrbDriftB 20s ease-in-out infinite;
        will-change: transform;
    }

    .lx-regulations-hero-inner {
        position: relative;
        z-index: 1;
    }

    .lx-regulations-hero-inner .lx-regulations-hero-title {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-weight: 800;
        text-align: center;
        margin: 2.5rem 0 0;
        font-size: 2rem;
        letter-spacing: -0.02em;
        line-height: 1.15;
        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.18);
    }

    .lx-regulations-hero-inner .lx-regulations-hero-subtitle {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        text-align: center;
        color: #f0f6f8;
        font-size: 0.9rem;
        font-weight: 400;
        margin: 0.85rem auto 0;
        max-width: 480px;
        padding: 0 0.5rem;
        letter-spacing: 0.01em;
        opacity: 0.95;
    }

    .lx-regulations-content {
        width: 100%;
        background: #ffffff;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
    }

    .lx-regulations-content .container {
        width: 100%;
    }

    .lx-regulations-content .lx-regulations-intro {
        margin: 5% 0 5% 0;
    }

    .lx-regulations-content .lx-regulations-intro .lx-regulations-intro-text {
        font-weight: 400;
        font-size: 0.9rem;
        color: #5d5c5c;
        line-height: 1.5;
        text-align: center;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        margin: 2rem 0;
    }

    /* Single column on mobile - flex handles spacing */
    .lx-license-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-bottom: 20%;
    }

    .lx-license-card {
        position: relative;
        background: linear-gradient(135deg, #f7f9fc 0%, #eef2f8 100%);
        padding: 1.75rem 1.25rem;
        border-radius: 1.5rem;
        box-shadow: 0 8px 24px rgba(31, 192, 208, 0.08);
        border: 1px solid rgba(31, 192, 208, 0.12);
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        overflow: hidden;
        isolation: isolate;
        display: flex;
        flex-direction: column;
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                    border-color 0.45s ease;
        will-change: transform, box-shadow;
    }

    .lx-license-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(150deg, #1fc0d0 0%, #199caa 45%, #098297 100%);
        opacity: 0;
        z-index: -1;
        transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none;
    }

    .lx-license-card::after {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 80%;
        height: 100%;
        background: linear-gradient(
            120deg,
            transparent 0%,
            rgba(255, 255, 255, 0.18) 50%,
            transparent 100%
        );
        transform: skewX(-20deg);
        z-index: -1;
        pointer-events: none;
        transition: left 0s;
    }

    /* On mobile, :hover also covers tap (active) — both trigger the gradient */
    .lx-license-card:hover,
    .lx-license-card:active {
        transform: translateY(-6px);
        box-shadow: 0 14px 28px rgba(9, 130, 151, 0.28),
                    0 4px 10px rgba(31, 192, 208, 0.20);
        border-color: rgba(31, 192, 208, 0.35);
    }

    .lx-license-card:hover::before,
    .lx-license-card:active::before {
        opacity: 1;
    }

    .lx-license-card:hover::after,
    .lx-license-card:active::after {
        animation: lxCardShimmer 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .lx-license-card:hover p.lx-license-card-authority,
    .lx-license-card:hover .lx-license-card-authority-name,
    .lx-license-card:hover p.lx-license-card-address,
    .lx-license-card:hover h4.lx-license-card-address,
    .lx-license-card:hover .lx-license-card-reg-number,
    .lx-license-card:hover .lx-license-card-reg-label,
    .lx-license-card:active p.lx-license-card-authority,
    .lx-license-card:active .lx-license-card-authority-name,
    .lx-license-card:active p.lx-license-card-address,
    .lx-license-card:active h4.lx-license-card-address,
    .lx-license-card:active .lx-license-card-reg-number,
    .lx-license-card:active .lx-license-card-reg-label {
        color: #ffffff;
        transition: color 0.45s ease;
    }

    .lx-license-card:hover .lx-license-card-media,
    .lx-license-card:active .lx-license-card-media {
        transform: translateY(-2px) scale(1.03);
    }

    .lx-license-card:hover .lx-license-card-actions .btn-primary,
    .lx-license-card:active .lx-license-card-actions .btn-primary {
        background-color: #ffffff;
        border-color: #ffffff;
        color: #098297;
    }

    .lx-license-card-inner {
        display: flex;
        flex-direction: column;
        flex: 1;
        text-align: left;
        width: 100%;
        row-gap: 1rem;
    }

    .lx-license-card-media {
        /* border-radius: 50%; */
        /* overflow: hidden; */
        margin: 0 0 0.5rem 0;
        flex-shrink: 0;
        width: 20%;
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .lx-license-card-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .lx-license-authority,
    .lx-license-address,
    .lx-license-reg-number {
        display: block;
        margin: 0;
    }

    /* ----- Authority block ----- */
    p.lx-license-card-authority{
        font-size: 1rem;
        color: #5e6282;
        font-weight: 400;
        margin: 0;
        line-height: 1.4;
        transition: color 0.45s ease;
    }

    .lx-regulations-content .lx-license-card-authority-name {
        font-size: 1.15rem;
        font-weight: 700;
        color: #2a2a2a;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        margin: 0;
        line-height: 1.3;
        text-align: left;
        padding: 0;
        transition: color 0.45s ease;
    }

    /* ----- Address block ----- */
    p.lx-license-card-address {
        font-size: 1rem;
        font-weight: 700;
        color: #000000;
        margin: 0 0 0.15rem 0;
        line-height: 1.4;
        text-align: left;
        transition: color 0.45s ease;
    }

    .lx-regulations-content h4.lx-license-card-address {
        font-size: 0.9rem;
        font-weight: 400;
        color: #5e6282;
        line-height: 1.5;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        margin: 0;
        text-align: left;
        padding: 0;
        transition: color 0.45s ease;
    }

    /* ----- Regulatory number block ----- */
    .lx-license-card-reg-number {
        font-size: 0.95rem;
        color: #2a2a2a;
        margin: 0;
        font-weight: 400;
        text-align: left;
        transition: color 0.45s ease;
    }

    .lx-license-card-reg-label {
        font-weight: 700;
        transition: color 0.45s ease;
    }

    /* ----- Actions ----- */
    .lx-license-card-actions {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: auto;
        padding: 0.5rem 0 0 0;
        text-align: center;
    }

    .lx-license-card-actions .btn-primary {
        display: inline-block;
        background-color: #199caa;
        border: 1px solid #199caa;
        color: #fff;
        border-radius: 2rem;
        font-size: 1rem;
        font-weight: 500;
        text-decoration: none;
        transition: background 0.45s ease,
                    border-color 0.45s ease,
                    color 0.45s ease,
                    transform 0.2s ease,
                    box-shadow 0.25s ease;
        width: 100%;
        max-width: 240px;
        padding: 0.7rem 1.5rem;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        text-align: center;
    }

    .lx-license-card-actions .btn-primary:hover {
        background-color: #ffffff;
        border-color: #ffffff;
        color: #098297;
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(255, 255, 255, 0.4);
    }

    /* ============================================
       Lirunex Group CTA — Frosted glass on mesh (Mobile)
       ============================================ */
    .lx-regulations-licenses-cta {
        position: relative;
        padding: 0 1rem 6rem;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        overflow: hidden;
        isolation: isolate;
        background: #ffffff;
    }

    .lx-regulations-licenses-cta .container {
        width: 100%;
        padding: 0;
        position: relative;
        z-index: 1;
    }

    .lx-regulations-licenses-cta-card {
        position: relative;
        border-radius: 1.5rem;
        padding: 2.5rem 1.5rem 1rem;
        overflow: hidden;
        isolation: isolate;
        color: #0f6470;
        background: #eaf5f9;
        -webkit-backdrop-filter: blur(20px) saturate(180%);
                backdrop-filter: blur(20px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.7);
    }

    .lx-regulations-licenses-cta-silk {
        position: absolute;
        inset: 0;
        background:
            radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 255, 255, 0.55) 0%, transparent 60%),
            radial-gradient(ellipse 80% 50% at 0% 100%, rgba(213, 246, 250, 0.30) 0%, transparent 70%);
        z-index: 0;
        pointer-events: none;
    }

    .lx-regulations-licenses-cta-content {
        position: relative;
        z-index: 1;
        text-align: center;
        margin: 0 auto;
    }

    .lx-regulations-licenses-cta-title {
        font-size: 1.5rem;
        font-weight: 800;
        color: #0a3a44;
        margin: 0 0 0.85rem 0;
        line-height: 1.25;
    }

    .lx-regulations-licenses-cta-title .lx-regulations-licenses-cta-accent {
        background: linear-gradient(110deg, #1eb1c2 0%, #199caa 35%, #098297 70%, #1eb1c2 100%);
        background-size: 300% auto;
        -webkit-background-clip: text;
                background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: lxTitleShimmer 7s ease-in-out infinite;
        font-size: 1.5rem;
    }

    .lx-regulations-licenses-cta-desc {
        font-size: 0.9rem;
        color: #4a5e66;
        line-height: 1.6;
        margin: 0 auto 1.5rem;
    }

    .lx-regulations-licenses-cta-media {
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 1.25rem auto 0;
    }

    .lx-regulations-licenses-cta-image {
        display: block;
        width: 100%;
        max-width: 200px;
        height: auto;
    }

    .lx-regulations-licenses-cta-actions {
        margin: 0;
    }

    .lx-regulations-licenses-cta-button {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: linear-gradient(135deg, #1eb1c2 0%, #199caa 50%, #098297 100%);
        color: #ffffff;
        border-radius: 999px;
        font-size: 0.95rem;
        font-weight: 600;
        text-decoration: none;
        padding: 0.75rem 1.6rem;
        width: 100%;
        max-width: 260px;
        justify-content: center;
        box-shadow:
            0 10px 22px rgba(9, 130, 151, 0.32),
            inset 0 1px 0 rgba(255, 255, 255, 0.25);
        transition: transform 0.3s ease,
                    box-shadow 0.3s ease,
                    filter 0.3s ease;
    }

    .lx-regulations-licenses-cta-button:hover,
    .lx-regulations-licenses-cta-button:active {
        transform: translateY(-2px);
        color: #ffffff;
        filter: brightness(1.08);
        box-shadow:
            0 12px 26px rgba(9, 130, 151, 0.42),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
        text-decoration: none;
    }

    .lx-regulations-licenses-cta-arrow {
        transition: transform 0.3s ease;
    }

    .lx-regulations-licenses-cta-button:hover .lx-regulations-licenses-cta-arrow {
        transform: translateX(3px);
    }
}
/* END Mobile view */

/* START Animations (shared across breakpoints) */
@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 lxFadeInUp {
    from { opacity: 0; transform: translateY(45px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Card hover shimmer — sweeps a soft highlight across the card on hover */
@keyframes lxCardShimmer {
    0%   { left: -120%; }
    100% { left: 140%; }
}

.lx-regulations-page .lx-anim-banner-1,
.lx-regulations-page .lx-anim-banner-2 {
    opacity: 0;
}
.lx-regulations-page .lx-anim-banner-1 { animation: lxFadeInUp 1.4s cubic-bezier(0.22,1,0.36,1) 0.15s both; }
.lx-regulations-page .lx-anim-banner-2 { animation: lxFadeInUp 1.4s cubic-bezier(0.22,1,0.36,1) 0.45s both; }

.lx-regulations-page .lx-anim-up,
.lx-regulations-page .lx-anim-left,
.lx-regulations-page .lx-anim-right,
.lx-regulations-page .lx-anim-scale {
    opacity: 0;
    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-regulations-page .lx-anim-up    { transform: translateY(38px); }
.lx-regulations-page .lx-anim-left  { transform: translateX(-42px); }
.lx-regulations-page .lx-anim-right { transform: translateX(42px); }
.lx-regulations-page .lx-anim-scale {
    transform: translateY(80px);
    transition: opacity 2.2s cubic-bezier(0.22,1,0.36,1),
                transform 2.2s cubic-bezier(0.22,1,0.36,1);
}

.lx-regulations-page .lx-anim-d1 { transition-delay: 0.15s; }
.lx-regulations-page .lx-anim-d2 { transition-delay: 0.30s; }
.lx-regulations-page .lx-anim-d3 { transition-delay: 0.45s; }
.lx-regulations-page .lx-anim-d4 { transition-delay: 0.60s; }

.lx-regulations-page .lx-anim-up.is-visible,
.lx-regulations-page .lx-anim-left.is-visible,
.lx-regulations-page .lx-anim-right.is-visible,
.lx-regulations-page .lx-anim-scale.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .lx-regulations-page .lx-anim-banner-1,
    .lx-regulations-page .lx-anim-banner-2 {
        animation: none;
        opacity: 1;
    }
    .lx-regulations-page .lx-anim-up,
    .lx-regulations-page .lx-anim-left,
    .lx-regulations-page .lx-anim-right,
    .lx-regulations-page .lx-anim-scale {
        transition: none;
        opacity: 1;
        transform: none;
    }
    .lx-regulations-hero::before,
    .lx-regulations-hero::after,
    .lx-regulations-hero-inner .lx-regulations-hero-title {
        animation: none !important;
    }
    /* Disable card hover animations for reduced-motion users */
    .lx-license-card,
    .lx-license-card::before,
    .lx-license-card::after,
    .lx-license-card-media {
        transition: none !important;
        animation: none !important;
    }
}
/* END Animations */