/* =========================================================
   VERRALINQ — RESOURCES PAGE
   Header + Resources Hero
========================================================= */

/* =========================================================
   PAGE-SPECIFIC STYLES
========================================================= */

/* =========================================================
   RESOURCES HERO
========================================================= */

.vlq-resources-hero {
    width: 100%;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(circle at 82% 14%, rgba(59, 130, 246, 0.22) 0%, transparent 34%), radial-gradient(circle at 9% 84%, rgba(8, 155, 83, 0.10) 0%, transparent 28%), linear-gradient(135deg, #020617 0%, #071225 48%, #0B162B 100%);
}

.vlq-resources-hero__grid {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px), linear-gradient(180deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 74px 74px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.76), transparent 94%);
    opacity: 0.58;
}

.vlq-resources-hero__ambient {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(28px);
}

.vlq-resources-hero__ambient--blue {
    top: -190px;
    right: -160px;
    width: 760px;
    height: 760px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.24), transparent 70%);
}

.vlq-resources-hero__ambient--green {
    left: -190px;
    bottom: -250px;
    width: 590px;
    height: 590px;
    background: radial-gradient(circle, rgba(8, 155, 83, 0.14), transparent 70%);
}

.vlq-resources-hero__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 84px 24px 76px;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(540px, 640px);
    align-items: center;
    gap: 64px;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.vlq-resources-hero__content {
    min-width: 0;
}

.vlq-resources-hero__badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(147, 197, 253, 0.24);
    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 38px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transform: translateY(-10px);
    animation: vlqResourcesBadgeReveal 760ms cubic-bezier(0.22, 1, 0.36, 1) 120ms forwards;
}

    .vlq-resources-hero__badge svg {
        width: 16px;
        height: 16px;
        color: #60A5FA;
        flex-shrink: 0;
    }

.vlq-resources-hero__title {
    max-width: 830px;
    margin: 28px 0 0;
    color: #FFFFFF;
    font-size: clamp(46px, 4.9vw, 68px);
    font-weight: 820;
    line-height: 1.055;
    letter-spacing: -0.058em;
    opacity: 0;
    transform: translateY(24px);
    animation: vlqResourcesTitleReveal 960ms cubic-bezier(0.22, 1, 0.36, 1) 220ms forwards;
}

    .vlq-resources-hero__title span {
        display: block;
        margin-top: 7px;
        color: #60A5FA;
        text-shadow: 0 0 34px rgba(96, 165, 250, 0.16);
    }

.vlq-resources-hero__subtitle {
    max-width: 745px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: 17px;
    font-weight: 420;
    line-height: 1.66;
    letter-spacing: -0.012em;
    opacity: 0;
    transform: translateY(18px);
    animation: vlqResourcesSubtitleReveal 860ms cubic-bezier(0.22, 1, 0.36, 1) 390ms forwards;
}


/* =========================================================
   HERO ACTIONS
========================================================= */

.vlq-resources-hero__actions {
    margin-top: 36px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    opacity: 0;
    transform: translateY(18px);
    animation: vlqResourcesActionsReveal 860ms cubic-bezier(0.22, 1, 0.36, 1) 560ms forwards;
}

.vlq-resources-hero__button {
    min-height: 52px;
    padding: 0 24px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 680;
    line-height: 1;
    letter-spacing: -0.015em;
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), border-color 240ms ease, box-shadow 300ms ease, background 260ms ease, color 240ms ease;
}

    .vlq-resources-hero__button:hover {
        transform: translateY(-2px);
    }

    .vlq-resources-hero__button:active {
        transform: translateY(0);
    }

.vlq-resources-hero__button--primary {
    border: 1px solid rgba(1, 71, 209, 0.96);
    background: linear-gradient( 180deg, #1765F2 0%, #0954E4 42%, #0147D1 100% );
    color: #FFFFFF;
    box-shadow: 0 18px 34px rgba(1, 71, 209, 0.30), 0 3px 8px rgba(1, 71, 209, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

    .vlq-resources-hero__button--primary::before {
        content: "";
        position: absolute;
        top: 0;
        left: -75%;
        width: 48%;
        height: 100%;
        z-index: -1;
        background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.28) 50%, transparent 100% );
        transform: skewX(-22deg);
        transition: left 760ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .vlq-resources-hero__button--primary:hover {
        background: linear-gradient( 180deg, #2873FF 0%, #0C59EC 44%, #003FB9 100% );
        box-shadow: 0 24px 44px rgba(1, 71, 209, 0.38), 0 4px 12px rgba(1, 71, 209, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.34);
    }

        .vlq-resources-hero__button--primary:hover::before {
            left: 130%;
        }

.vlq-resources-hero__button--secondary {
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.07);
    color: #FFFFFF;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 28px rgba(0, 0, 0, 0.18);
}

    .vlq-resources-hero__button--secondary:hover {
        border-color: rgba(147, 197, 253, 0.40);
        background: rgba(255, 255, 255, 0.10);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 18px 34px rgba(0, 0, 0, 0.22);
    }


/* =========================================================
   SIGNALS
========================================================= */

.vlq-resources-hero__signals {
    margin-top: 30px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px 22px;
    opacity: 0;
    transform: translateY(16px);
    animation: vlqResourcesSignalsReveal 840ms cubic-bezier(0.22, 1, 0.36, 1) 740ms forwards;
}

.vlq-resources-hero-signal {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 13px;
    font-weight: 540;
    line-height: 1.2;
    letter-spacing: -0.006em;
}

    .vlq-resources-hero-signal span {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #089B53;
        box-shadow: 0 0 0 4px rgba(8, 155, 83, 0.12), 0 0 18px rgba(8, 155, 83, 0.24);
    }


/* =========================================================
   RIGHT NAVIGATOR PANEL
========================================================= */

.vlq-resources-hero__navigator {
    min-width: 0;
    position: relative;
    opacity: 0;
    transform: translateX(26px) translateY(10px);
    animation: vlqResourcesNavigatorReveal 1100ms cubic-bezier(0.22, 1, 0.36, 1) 360ms forwards;
}

.vlq-resource-navigator {
    width: 100%;
    min-height: 650px;
    position: relative;
    overflow: hidden;
    padding: 28px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.08) 100% );
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 38px 90px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(1, 71, 209, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

    .vlq-resource-navigator::before {
        content: "";
        position: absolute;
        top: -140px;
        right: -150px;
        width: 360px;
        height: 360px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(96, 165, 250, 0.14), transparent 70%);
        pointer-events: none;
    }


/* =========================================================
   NAVIGATOR HEADER
========================================================= */

.vlq-resource-navigator__header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

    .vlq-resource-navigator__header p {
        margin: 0 0 8px;
        color: rgba(255, 255, 255, 0.58);
        font-size: 10px;
        font-weight: 780;
        line-height: 1;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .vlq-resource-navigator__header h2 {
        max-width: 380px;
        margin: 0;
        color: #FFFFFF;
        font-size: 27px;
        font-weight: 780;
        line-height: 1.18;
        letter-spacing: -0.042em;
    }

    .vlq-resource-navigator__header > span {
        min-height: 32px;
        padding: 0 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        border: 1px solid rgba(147, 197, 253, 0.22);
        background: rgba(59, 130, 246, 0.14);
        color: #BFDBFE;
        font-size: 10px;
        font-weight: 780;
        line-height: 1;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        white-space: nowrap;
    }


/* =========================================================
   ROUTES
========================================================= */

.vlq-resource-navigator__routes {
    position: relative;
    z-index: 1;
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vlq-resource-route {
    min-height: 116px;
    padding: 17px 18px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    background: rgba(2, 6, 23, 0.46);
    transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), border-color 260ms ease, background-color 260ms ease, box-shadow 340ms ease;
}

    .vlq-resource-route:hover {
        transform: translateY(-3px);
        border-color: rgba(147, 197, 253, 0.28);
        background: rgba(2, 6, 23, 0.58);
        box-shadow: 0 18px 34px rgba(0, 0, 0, 0.18);
    }

.vlq-resource-route--featured {
    border-color: rgba(8, 155, 83, 0.28);
    background: linear-gradient( 135deg, rgba(8, 155, 83, 0.16) 0%, rgba(2, 6, 23, 0.52) 74% );
}

    .vlq-resource-route--featured:hover {
        border-color: rgba(16, 185, 129, 0.46);
        background: linear-gradient( 135deg, rgba(8, 155, 83, 0.22) 0%, rgba(2, 6, 23, 0.60) 74% );
    }

.vlq-resource-route__icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: #93C5FD;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(147, 197, 253, 0.20);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 30px rgba(0, 0, 0, 0.18);
}

.vlq-resource-route--featured .vlq-resource-route__icon {
    color: #86EFAC;
    border-color: rgba(134, 239, 172, 0.22);
    background: rgba(8, 155, 83, 0.14);
}

.vlq-resource-route__icon svg {
    width: 30px;
    height: 30px;
}

.vlq-resource-route__copy span {
    display: block;
    color: rgba(191, 219, 254, 0.86);
    font-size: 10px;
    font-weight: 780;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vlq-resource-route--featured .vlq-resource-route__copy span {
    color: rgba(167, 243, 208, 0.92);
}

.vlq-resource-route__copy strong {
    display: block;
    margin-top: 8px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 740;
    line-height: 1.28;
    letter-spacing: -0.018em;
}

.vlq-resource-route__copy p {
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 12.7px;
    font-weight: 430;
    line-height: 1.48;
    letter-spacing: -0.004em;
}


/* =========================================================
   NAVIGATOR FOOTER
========================================================= */

.vlq-resource-navigator__footer {
    position: relative;
    z-index: 1;
    min-height: 82px;
    margin-top: 16px;
    padding: 17px 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-radius: 16px;
    border: 1px solid rgba(8, 155, 83, 0.22);
    background: linear-gradient( 135deg, rgba(8, 155, 83, 0.16) 0%, rgba(255, 255, 255, 0.06) 100% );
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    font-weight: 520;
    line-height: 1.54;
    letter-spacing: -0.006em;
}

    .vlq-resource-navigator__footer span {
        width: 8px;
        height: 8px;
        margin-top: 6px;
        flex-shrink: 0;
        border-radius: 50%;
        background: #10B981;
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12), 0 0 18px rgba(16, 185, 129, 0.28);
    }


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes headerDrop {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes brandReveal {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes navReveal {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes navItemIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes actionsReveal {
    from {
        opacity: 0;
        transform: translateX(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes vlqResourcesBadgeReveal {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes vlqResourcesTitleReveal {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes vlqResourcesSubtitleReveal {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes vlqResourcesActionsReveal {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes vlqResourcesSignalsReveal {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes vlqResourcesNavigatorReveal {
    from {
        opacity: 0;
        transform: translateX(26px) translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}


/* =========================================================
   RESPONSIVE HEADER
========================================================= */

@media (max-width: 1220px) {
    .site-header__inner {
        padding: 0 28px;
        gap: 34px;
    }

    .nav-list {
        gap: 26px;
    }

    .header-actions {
        margin-left: 28px;
        gap: 22px;
    }

    .nav-link,
    .login-link,
    .demo-button {
        font-size: 13px;
    }

    .demo-button {
        min-height: 40px;
        padding: 0 19px;
    }
}

@media (max-width: 1040px) {
    .site-header__inner {
        padding: 0 24px;
    }

    .nav-list {
        gap: 20px;
    }

    .header-actions {
        margin-left: 22px;
    }
}

@media (max-width: 920px) {
    .header-nav,
    .header-actions {
        display: none;
    }

    .site-header__inner {
        justify-content: flex-start;
    }
}


/* =========================================================
   RESPONSIVE RESOURCES HERO
========================================================= */

@media (max-width: 1180px) {
    .vlq-resources-hero__inner {
        grid-template-columns: 1fr;
        gap: 54px;
        padding-top: 74px;
    }

    .vlq-resources-hero__content {
        max-width: 940px;
    }

    .vlq-resources-hero__navigator {
        max-width: 760px;
    }
}

@media (max-width: 860px) {
    .vlq-resources-hero__inner {
        padding: 62px 20px 60px;
    }

    .vlq-resources-hero__title {
        font-size: clamp(40px, 8vw, 56px);
    }

    .vlq-resources-hero__subtitle {
        font-size: 16px;
    }

    .vlq-resource-navigator {
        min-height: auto;
    }

    .vlq-resource-navigator__header {
        flex-direction: column;
    }
}

@media (max-width: 620px) {
    .vlq-resources-hero__inner {
        padding: 52px 18px 52px;
    }

    .vlq-resources-hero__badge {
        align-items: flex-start;
        line-height: 1.35;
    }

    .vlq-resources-hero__title {
        margin-top: 24px;
        font-size: 38px;
        letter-spacing: -0.048em;
    }

    .vlq-resources-hero__subtitle {
        margin-top: 20px;
        font-size: 15.5px;
        line-height: 1.62;
    }

    .vlq-resources-hero__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .vlq-resources-hero__button {
        width: 100%;
    }

    .vlq-resource-navigator {
        padding: 20px;
    }

    .vlq-resource-navigator__header h2 {
        font-size: 23px;
    }

    .vlq-resource-route {
        grid-template-columns: 1fr;
        gap: 13px;
        align-items: flex-start;
    }

    .vlq-resource-route__icon {
        width: 54px;
        height: 54px;
    }

        .vlq-resource-route__icon svg {
            width: 28px;
            height: 28px;
        }

    .vlq-resource-navigator__footer {
        align-items: flex-start;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}
/* =========================================================
   SECTION 2 — RESOURCES VERIFICATION GUIDANCE
   Credential search, QR verification, and result meanings
========================================================= */

.vlq-resource-verify {
    width: 100%;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 10% 18%, rgba(1, 71, 209, 0.045), transparent 28%), radial-gradient(circle at 88% 84%, rgba(8, 155, 83, 0.036), transparent 24%), #F8FAFC;
    border-top: 1px solid #E8EDF5;
    font-family: inherit;
}

.vlq-resource-verify__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 92px 24px 96px;
    position: relative;
    z-index: 1;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.vlq-resource-verify__header {
    max-width: 960px;
    margin: 0 auto 58px;
    text-align: center;
    opacity: 0;
    transform: translateY(16px);
    animation: vlqResourceVerifyHeaderIn 760ms cubic-bezier(0.22, 1, 0.36, 1) 80ms forwards;
}

.vlq-resource-verify__eyebrow {
    width: fit-content;
    margin: 0 auto 18px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 35px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(1, 71, 209, 0.16);
    background: rgba(255, 255, 255, 0.96);
    color: #0147D1;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 10px 22px rgba(15, 23, 42, 0.045);
}

    .vlq-resource-verify__eyebrow span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #089B53;
        box-shadow: 0 0 0 4px rgba(8, 155, 83, 0.10);
    }

    .vlq-resource-verify__eyebrow strong {
        font-size: 11px;
        font-weight: 760;
        line-height: 1;
        letter-spacing: 0.07em;
        text-transform: uppercase;
    }

.vlq-resource-verify__title {
    margin: 0;
    color: #071633;
    font-size: clamp(38px, 4.25vw, 56px);
    font-weight: 820;
    line-height: 1.075;
    letter-spacing: -0.056em;
    text-wrap: balance;
}

    .vlq-resource-verify__title span {
        display: block;
        margin-top: 6px;
        color: #0147D1;
    }

.vlq-resource-verify__subtitle {
    max-width: 860px;
    margin: 21px auto 0;
    color: #596882;
    font-size: 16.5px;
    font-weight: 430;
    line-height: 1.68;
    letter-spacing: -0.009em;
}


/* =========================================================
   MAIN STAGE
========================================================= */

.vlq-resource-verify__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(500px, 570px);
    align-items: start;
    gap: 34px;
}


/* =========================================================
   LEFT — VERIFICATION STEPS
========================================================= */

.vlq-resource-verify__steps {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vlq-resource-verify-step {
    min-height: 196px;
    position: relative;
    overflow: hidden;
    padding: 24px 24px 24px 22px;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: start;
    gap: 20px;
    border-radius: 22px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 1) 0%, rgba(250, 252, 255, 1) 100% );
    border: 1px solid #DDE5EE;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 14px 34px rgba(15, 23, 42, 0.055);
    opacity: 0;
    transform: translateY(18px);
    animation: vlqResourceVerifyStepIn 820ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), border-color 260ms ease, box-shadow 360ms ease;
}

    .vlq-resource-verify-step:nth-child(1) {
        animation-delay: 180ms;
    }

    .vlq-resource-verify-step:nth-child(2) {
        animation-delay: 290ms;
    }

    .vlq-resource-verify-step:nth-child(3) {
        animation-delay: 400ms;
    }

    .vlq-resource-verify-step::before {
        content: "";
        position: absolute;
        top: -105px;
        right: -105px;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(1, 71, 209, 0.052), transparent 72%);
        pointer-events: none;
    }

    .vlq-resource-verify-step::after {
        content: "";
        position: absolute;
        left: 22px;
        right: 22px;
        top: 0;
        height: 2px;
        border-radius: 999px;
        background: linear-gradient( 90deg, transparent 0%, rgba(1, 71, 209, 0.54) 50%, transparent 100% );
        opacity: 0;
        transition: opacity 280ms ease;
    }

    .vlq-resource-verify-step:hover {
        transform: translateY(-5px);
        border-color: #C8D5E7;
        box-shadow: 0 2px 5px rgba(15, 23, 42, 0.04), 0 24px 48px rgba(15, 23, 42, 0.095);
    }

        .vlq-resource-verify-step:hover::after {
            opacity: 1;
        }

.vlq-resource-verify-step__number {
    width: 68px;
    height: 68px;
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: linear-gradient( 180deg, #1765F2 0%, #0954E4 42%, #0147D1 100% );
    border: 1px solid rgba(1, 71, 209, 0.96);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 820;
    line-height: 1;
    letter-spacing: 0.08em;
    box-shadow: 0 16px 30px rgba(1, 71, 209, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.vlq-resource-verify-step__content {
    min-width: 0;
    position: relative;
    z-index: 1;
}

.vlq-resource-verify-step__label {
    width: fit-content;
    min-height: 28px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(1, 71, 209, 0.14);
    background: #EEF4FF;
    color: #0147D1;
    font-size: 10px;
    font-weight: 780;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vlq-resource-verify-step__content h3 {
    margin: 15px 0 0;
    color: #071633;
    font-size: 22px;
    font-weight: 770;
    line-height: 1.28;
    letter-spacing: -0.036em;
}

.vlq-resource-verify-step__content p {
    max-width: 670px;
    margin: 10px 0 0;
    color: #596882;
    font-size: 14.5px;
    font-weight: 430;
    line-height: 1.66;
    letter-spacing: -0.005em;
}


/* =========================================================
   RIGHT — STATUS PANEL
========================================================= */

.vlq-resource-verify__panel {
    min-width: 0;
    opacity: 0;
    transform: translateX(22px) translateY(12px);
    animation: vlqResourceVerifyPanelIn 980ms cubic-bezier(0.22, 1, 0.36, 1) 260ms forwards;
}

.vlq-resource-status-panel {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 28px 28px 26px;
    border-radius: 24px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 1) 0%, rgba(250, 252, 255, 1) 100% );
    border: 1px solid #DDE5EE;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035), 0 22px 54px rgba(15, 23, 42, 0.09);
}

    .vlq-resource-status-panel::before {
        content: "";
        position: absolute;
        top: -130px;
        right: -120px;
        width: 330px;
        height: 330px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(1, 71, 209, 0.07), transparent 72%);
        pointer-events: none;
    }


/* =========================================================
   PANEL HEADER
========================================================= */

.vlq-resource-status-panel__header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid #E7EDF5;
}

    .vlq-resource-status-panel__header p {
        margin: 0 0 9px;
        color: #60708C;
        font-size: 10px;
        font-weight: 780;
        line-height: 1;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .vlq-resource-status-panel__header h3 {
        max-width: 340px;
        margin: 0;
        color: #071633;
        font-size: 28px;
        font-weight: 780;
        line-height: 1.18;
        letter-spacing: -0.043em;
    }

    .vlq-resource-status-panel__header > span {
        min-height: 32px;
        padding: 0 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        border: 1px solid rgba(1, 71, 209, 0.16);
        background: #EEF4FF;
        color: #0147D1;
        font-size: 10px;
        font-weight: 780;
        line-height: 1;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        white-space: nowrap;
    }


/* =========================================================
   STATUS LIST
========================================================= */

.vlq-resource-status-panel__list {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vlq-resource-status {
    min-height: 108px;
    padding: 18px 18px 17px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
    gap: 15px;
    border-radius: 18px;
    border: 1px solid #E2E8F0;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.022), 0 10px 22px rgba(15, 23, 42, 0.04);
    transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1), border-color 260ms ease, box-shadow 340ms ease;
}

    .vlq-resource-status:hover {
        transform: translateY(-3px);
        border-color: #CBD7E8;
        box-shadow: 0 2px 5px rgba(15, 23, 42, 0.04), 0 18px 38px rgba(15, 23, 42, 0.085);
    }

.vlq-resource-status__indicator {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
}

    .vlq-resource-status__indicator span {
        width: 12px;
        height: 12px;
        border-radius: 999px;
    }


/* Verified */

.vlq-resource-status--verified .vlq-resource-status__indicator {
    background: rgba(8, 155, 83, 0.10);
    border: 1px solid rgba(8, 155, 83, 0.18);
}

    .vlq-resource-status--verified .vlq-resource-status__indicator span {
        background: #089B53;
        box-shadow: 0 0 0 5px rgba(8, 155, 83, 0.12);
    }


/* Expired */

.vlq-resource-status--expired .vlq-resource-status__indicator {
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(202, 138, 4, 0.18);
}

    .vlq-resource-status--expired .vlq-resource-status__indicator span {
        background: #D97706;
        box-shadow: 0 0 0 5px rgba(217, 119, 6, 0.11);
    }


/* Revoked */

.vlq-resource-status--revoked .vlq-resource-status__indicator {
    background: rgba(220, 38, 38, 0.10);
    border: 1px solid rgba(220, 38, 38, 0.18);
}

    .vlq-resource-status--revoked .vlq-resource-status__indicator span {
        background: #DC2626;
        box-shadow: 0 0 0 5px rgba(220, 38, 38, 0.10);
    }


/* Not found */

.vlq-resource-status--notfound .vlq-resource-status__indicator {
    background: rgba(100, 116, 139, 0.12);
    border: 1px solid rgba(100, 116, 139, 0.18);
}

    .vlq-resource-status--notfound .vlq-resource-status__indicator span {
        background: #64748B;
        box-shadow: 0 0 0 5px rgba(100, 116, 139, 0.10);
    }

.vlq-resource-status__content strong {
    display: block;
    color: #071633;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.28;
    letter-spacing: -0.018em;
}

.vlq-resource-status__content p {
    margin: 7px 0 0;
    color: #596882;
    font-size: 13.4px;
    font-weight: 430;
    line-height: 1.58;
    letter-spacing: -0.004em;
}


/* =========================================================
   STATUS PANEL FOOTER
========================================================= */

.vlq-resource-status-panel__footer {
    min-height: 86px;
    margin-top: 16px;
    padding: 18px 18px;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    border-radius: 18px;
    border: 1px solid rgba(1, 71, 209, 0.18);
    background: linear-gradient( 135deg, rgba(238, 244, 255, 0.92) 0%, rgba(255, 255, 255, 1) 80% );
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.022), 0 10px 22px rgba(1, 71, 209, 0.06);
}

    .vlq-resource-status-panel__footer svg {
        width: 24px;
        height: 24px;
        color: #0147D1;
        margin-top: 1px;
    }

    .vlq-resource-status-panel__footer p {
        margin: 0;
        color: #42526C;
        font-size: 13.5px;
        font-weight: 530;
        line-height: 1.56;
        letter-spacing: -0.006em;
    }


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes vlqResourceVerifyHeaderIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes vlqResourceVerifyStepIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes vlqResourceVerifyPanelIn {
    from {
        opacity: 0;
        transform: translateX(22px) translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1120px) {
    .vlq-resource-verify__stage {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .vlq-resource-verify__steps {
        max-width: 980px;
    }

    .vlq-resource-verify__panel {
        max-width: 760px;
    }
}

@media (max-width: 820px) {
    .vlq-resource-verify__inner {
        padding: 74px 20px 78px;
    }

    .vlq-resource-verify__header {
        margin-bottom: 44px;
    }

    .vlq-resource-verify__title {
        font-size: clamp(34px, 7vw, 46px);
    }

    .vlq-resource-verify__subtitle {
        font-size: 15.8px;
    }

    .vlq-resource-status-panel__header {
        flex-direction: column;
    }

        .vlq-resource-status-panel__header h3 {
            max-width: none;
        }
}

@media (max-width: 640px) {
    .vlq-resource-verify__inner {
        padding: 62px 18px 66px;
    }

    .vlq-resource-verify__title {
        font-size: 32px;
        line-height: 1.1;
        letter-spacing: -0.045em;
    }

    .vlq-resource-verify__subtitle {
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.62;
    }

    .vlq-resource-verify-step {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 20px;
    }

    .vlq-resource-verify-step__number {
        width: 62px;
        height: 62px;
    }

    .vlq-resource-verify-step__content h3 {
        font-size: 20px;
    }

    .vlq-resource-verify-step__content p {
        font-size: 14px;
    }

    .vlq-resource-status-panel {
        padding: 22px 20px 20px;
    }

    .vlq-resource-status-panel__header h3 {
        font-size: 24px;
    }

    .vlq-resource-status {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .vlq-resource-status-panel__footer {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .vlq-resource-verify *,
    .vlq-resource-verify *::before,
    .vlq-resource-verify *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}
/* =========================================================
   SECTION 3 — RESOURCES TRUST EXPLAINER
   Credential Trust, Explained
========================================================= */

.vlq-resource-trust {
    width: 100%;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 88% 18%, rgba(1, 71, 209, 0.052), transparent 28%), radial-gradient(circle at 10% 86%, rgba(8, 155, 83, 0.038), transparent 24%), #FFFFFF;
    border-top: 1px solid #E8EDF5;
    font-family: inherit;
}

.vlq-resource-trust__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 92px 24px 96px;
    position: relative;
    z-index: 1;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.vlq-resource-trust__header {
    max-width: 980px;
    margin: 0 auto 58px;
    text-align: center;
    opacity: 0;
    transform: translateY(16px);
    animation: vlqResourceTrustHeaderIn 760ms cubic-bezier(0.22, 1, 0.36, 1) 80ms forwards;
}

.vlq-resource-trust__eyebrow {
    width: fit-content;
    margin: 0 auto 18px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 35px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(1, 71, 209, 0.16);
    background: rgba(255, 255, 255, 0.96);
    color: #0147D1;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 10px 22px rgba(15, 23, 42, 0.045);
}

    .vlq-resource-trust__eyebrow span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #089B53;
        box-shadow: 0 0 0 4px rgba(8, 155, 83, 0.10);
    }

    .vlq-resource-trust__eyebrow strong {
        font-size: 11px;
        font-weight: 760;
        line-height: 1;
        letter-spacing: 0.07em;
        text-transform: uppercase;
    }

.vlq-resource-trust__title {
    margin: 0;
    color: #071633;
    font-size: clamp(38px, 4.3vw, 58px);
    font-weight: 820;
    line-height: 1.075;
    letter-spacing: -0.056em;
    text-wrap: balance;
}

    .vlq-resource-trust__title span {
        display: block;
        margin-top: 6px;
        color: #0147D1;
    }

.vlq-resource-trust__subtitle {
    max-width: 900px;
    margin: 21px auto 0;
    color: #596882;
    font-size: 16.5px;
    font-weight: 430;
    line-height: 1.68;
    letter-spacing: -0.009em;
}


/* =========================================================
   MAIN STAGE
========================================================= */

.vlq-resource-trust__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(500px, 570px);
    align-items: start;
    gap: 34px;
}


/* =========================================================
   LEFT — TRUST PRINCIPLES
========================================================= */

.vlq-resource-trust__principles {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.vlq-resource-trust-principle {
    min-height: 264px;
    position: relative;
    overflow: hidden;
    padding: 24px 24px 22px;
    border-radius: 22px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 1) 0%, rgba(250, 252, 255, 1) 100% );
    border: 1px solid #DDE5EE;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 14px 34px rgba(15, 23, 42, 0.055);
    opacity: 0;
    transform: translateY(18px);
    animation: vlqResourceTrustPrincipleIn 820ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), border-color 260ms ease, box-shadow 360ms ease;
}

    .vlq-resource-trust-principle:nth-child(1) {
        animation-delay: 180ms;
    }

    .vlq-resource-trust-principle:nth-child(2) {
        animation-delay: 270ms;
    }

    .vlq-resource-trust-principle:nth-child(3) {
        animation-delay: 360ms;
    }

    .vlq-resource-trust-principle:nth-child(4) {
        animation-delay: 450ms;
    }

    .vlq-resource-trust-principle::before {
        content: "";
        position: absolute;
        top: -112px;
        right: -110px;
        width: 270px;
        height: 270px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(1, 71, 209, 0.052), transparent 72%);
        pointer-events: none;
    }

    .vlq-resource-trust-principle::after {
        content: "";
        position: absolute;
        left: 24px;
        right: 24px;
        top: 0;
        height: 2px;
        border-radius: 999px;
        background: linear-gradient( 90deg, transparent 0%, rgba(1, 71, 209, 0.56) 50%, transparent 100% );
        opacity: 0;
        transition: opacity 280ms ease;
    }

    .vlq-resource-trust-principle:hover {
        transform: translateY(-5px);
        border-color: #C8D5E7;
        box-shadow: 0 2px 5px rgba(15, 23, 42, 0.04), 0 24px 48px rgba(15, 23, 42, 0.095);
    }

        .vlq-resource-trust-principle:hover::after {
            opacity: 1;
        }

.vlq-resource-trust-principle__icon {
    width: 68px;
    height: 68px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: #EEF4FF;
    border: 1px solid rgba(1, 71, 209, 0.16);
    color: #0147D1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 14px 28px rgba(1, 71, 209, 0.10);
    transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), border-color 260ms ease, box-shadow 340ms ease;
}

    .vlq-resource-trust-principle__icon svg {
        width: 38px;
        height: 38px;
        transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
    }

.vlq-resource-trust-principle:hover .vlq-resource-trust-principle__icon {
    transform: translateY(-2px) scale(1.04);
    border-color: rgba(1, 71, 209, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 18px 36px rgba(1, 71, 209, 0.16);
}

    .vlq-resource-trust-principle:hover .vlq-resource-trust-principle__icon svg {
        transform: scale(1.06);
    }

.vlq-resource-trust-principle__content {
    position: relative;
    z-index: 1;
    margin-top: 21px;
}

    .vlq-resource-trust-principle__content span {
        display: block;
        margin-bottom: 13px;
        color: #0147D1;
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.09em;
        text-transform: uppercase;
    }

    .vlq-resource-trust-principle__content h3 {
        margin: 0;
        color: #071633;
        font-size: 21px;
        font-weight: 770;
        line-height: 1.28;
        letter-spacing: -0.036em;
    }

    .vlq-resource-trust-principle__content p {
        margin: 11px 0 0;
        color: #596882;
        font-size: 14.2px;
        font-weight: 430;
        line-height: 1.64;
        letter-spacing: -0.004em;
    }


/* =========================================================
   RIGHT — TRUST COMPARISON PANEL
========================================================= */

.vlq-resource-trust__comparison {
    min-width: 0;
    opacity: 0;
    transform: translateX(22px) translateY(12px);
    animation: vlqResourceTrustComparisonIn 980ms cubic-bezier(0.22, 1, 0.36, 1) 260ms forwards;
}

.vlq-resource-comparison {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 28px 28px 26px;
    border-radius: 24px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 1) 0%, rgba(250, 252, 255, 1) 100% );
    border: 1px solid #DDE5EE;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035), 0 22px 54px rgba(15, 23, 42, 0.09);
}

    .vlq-resource-comparison::before {
        content: "";
        position: absolute;
        top: -130px;
        right: -120px;
        width: 330px;
        height: 330px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(1, 71, 209, 0.07), transparent 72%);
        pointer-events: none;
    }


/* =========================================================
   COMPARISON HEADER
========================================================= */

.vlq-resource-comparison__header {
    position: relative;
    z-index: 1;
    margin-bottom: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid #E7EDF5;
}

    .vlq-resource-comparison__header p {
        margin: 0 0 9px;
        color: #60708C;
        font-size: 10px;
        font-weight: 780;
        line-height: 1;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .vlq-resource-comparison__header h3 {
        max-width: 460px;
        margin: 0;
        color: #071633;
        font-size: 28px;
        font-weight: 780;
        line-height: 1.18;
        letter-spacing: -0.043em;
    }


/* =========================================================
   COMPARISON GRID
========================================================= */

.vlq-resource-comparison__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.vlq-resource-comparison-card {
    min-height: 246px;
    position: relative;
    overflow: hidden;
    padding: 22px 22px 20px;
    border-radius: 20px;
    border: 1px solid #E2E8F0;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.022), 0 10px 22px rgba(15, 23, 42, 0.04);
    transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1), border-color 260ms ease, box-shadow 340ms ease;
}

    .vlq-resource-comparison-card::before {
        content: "";
        position: absolute;
        top: -96px;
        right: -96px;
        width: 230px;
        height: 230px;
        border-radius: 50%;
        pointer-events: none;
    }

    .vlq-resource-comparison-card:hover {
        transform: translateY(-4px);
        border-color: #CBD7E8;
        box-shadow: 0 2px 5px rgba(15, 23, 42, 0.04), 0 20px 40px rgba(15, 23, 42, 0.09);
    }


/* Static File */

.vlq-resource-comparison-card--static::before {
    background: radial-gradient(circle, rgba(100, 116, 139, 0.07), transparent 72%);
}

.vlq-resource-comparison-card--static .vlq-resource-comparison-card__top span {
    color: #64748B;
    background: rgba(100, 116, 139, 0.10);
    border-color: rgba(100, 116, 139, 0.18);
}

.vlq-resource-comparison-card--static ul li span {
    background: #94A3B8;
    box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.12);
}


/* Verifiable Record */

.vlq-resource-comparison-card--verified {
    border-color: rgba(8, 155, 83, 0.24);
    background: linear-gradient( 135deg, rgba(239, 250, 245, 0.94) 0%, rgba(255, 255, 255, 1) 74% );
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.022), 0 14px 30px rgba(8, 155, 83, 0.075);
}

    .vlq-resource-comparison-card--verified::before {
        background: radial-gradient(circle, rgba(8, 155, 83, 0.08), transparent 72%);
    }

    .vlq-resource-comparison-card--verified:hover {
        border-color: rgba(8, 155, 83, 0.38);
        box-shadow: 0 2px 5px rgba(15, 23, 42, 0.04), 0 22px 44px rgba(8, 155, 83, 0.12);
    }

    .vlq-resource-comparison-card--verified .vlq-resource-comparison-card__top span {
        color: #089B53;
        background: rgba(8, 155, 83, 0.10);
        border-color: rgba(8, 155, 83, 0.18);
    }

    .vlq-resource-comparison-card--verified ul li span {
        background: #089B53;
        box-shadow: 0 0 0 4px rgba(8, 155, 83, 0.12);
    }


/* Shared Card Content */

.vlq-resource-comparison-card__top {
    position: relative;
    z-index: 1;
}

    .vlq-resource-comparison-card__top span {
        width: fit-content;
        min-height: 28px;
        padding: 0 11px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        border: 1px solid;
        font-size: 10px;
        font-weight: 780;
        line-height: 1;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .vlq-resource-comparison-card__top strong {
        display: block;
        margin-top: 15px;
        color: #071633;
        font-size: 22px;
        font-weight: 770;
        line-height: 1.25;
        letter-spacing: -0.036em;
    }

.vlq-resource-comparison-card ul {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

    .vlq-resource-comparison-card ul li {
        display: flex;
        align-items: flex-start;
        gap: 11px;
        color: #596882;
        font-size: 13.7px;
        font-weight: 440;
        line-height: 1.55;
        letter-spacing: -0.004em;
    }

        .vlq-resource-comparison-card ul li span {
            width: 8px;
            height: 8px;
            margin-top: 6px;
            flex-shrink: 0;
            border-radius: 50%;
        }


/* =========================================================
   INSIGHT BAR
========================================================= */

.vlq-resource-comparison__insight {
    min-height: 102px;
    margin-top: 16px;
    padding: 20px 20px;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    border-radius: 18px;
    border: 1px solid rgba(1, 71, 209, 0.20);
    background: linear-gradient( 135deg, rgba(238, 244, 255, 0.94) 0%, rgba(255, 255, 255, 1) 82% );
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.022), 0 12px 26px rgba(1, 71, 209, 0.07);
}

.vlq-resource-comparison__insight-mark {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    color: #0147D1;
    background: #FFFFFF;
    border: 1px solid rgba(1, 71, 209, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 12px 24px rgba(1, 71, 209, 0.10);
}

    .vlq-resource-comparison__insight-mark svg {
        width: 30px;
        height: 30px;
    }

.vlq-resource-comparison__insight p {
    margin: 0;
    color: #071633;
    font-size: 17px;
    font-weight: 690;
    line-height: 1.5;
    letter-spacing: -0.024em;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes vlqResourceTrustHeaderIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes vlqResourceTrustPrincipleIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes vlqResourceTrustComparisonIn {
    from {
        opacity: 0;
        transform: translateX(22px) translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1120px) {
    .vlq-resource-trust__stage {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .vlq-resource-trust__principles {
        max-width: 980px;
    }

    .vlq-resource-trust__comparison {
        max-width: 760px;
    }
}

@media (max-width: 820px) {
    .vlq-resource-trust__inner {
        padding: 74px 20px 78px;
    }

    .vlq-resource-trust__header {
        margin-bottom: 44px;
    }

    .vlq-resource-trust__title {
        font-size: clamp(34px, 7vw, 46px);
    }

    .vlq-resource-trust__subtitle {
        font-size: 15.8px;
    }

    .vlq-resource-trust__principles {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .vlq-resource-trust__inner {
        padding: 62px 18px 66px;
    }

    .vlq-resource-trust__title {
        font-size: 32px;
        line-height: 1.1;
        letter-spacing: -0.045em;
    }

    .vlq-resource-trust__subtitle {
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.62;
    }

    .vlq-resource-trust-principle {
        min-height: auto;
        padding: 20px;
    }

    .vlq-resource-trust-principle__icon {
        width: 62px;
        height: 62px;
    }

        .vlq-resource-trust-principle__icon svg {
            width: 35px;
            height: 35px;
        }

    .vlq-resource-trust-principle__content h3 {
        font-size: 20px;
    }

    .vlq-resource-trust-principle__content p {
        font-size: 14px;
    }

    .vlq-resource-comparison {
        padding: 22px 20px 20px;
    }

    .vlq-resource-comparison__header h3 {
        font-size: 24px;
    }

    .vlq-resource-comparison-card {
        min-height: auto;
        padding: 20px;
    }

    .vlq-resource-comparison-card__top strong {
        font-size: 20px;
    }

    .vlq-resource-comparison__insight {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 20px;
    }

        .vlq-resource-comparison__insight p {
            font-size: 16px;
            line-height: 1.52;
        }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .vlq-resource-trust *,
    .vlq-resource-trust *::before,
    .vlq-resource-trust *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}