:root {
        --color-beige: #F8F8EE;
        --color-beige-2: #E4E1D2;
        /* --color-dark-green: #3E4A3B; */
        --color-dark-green-2: #4B5949;
        --color-primary-bg: #35342E;
        --color-accent-green: #6B8F63;
        --color-text: #16181B;
        --color-text-muted: rgba(22, 24, 27, 0.62);
        --color-white: #FFFFFF;
        --font-body: 'Inter', system-ui, -apple-system, sans-serif;
        --font-heading: 'Inter', system-ui, -apple-system, sans-serif;
    }

    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .steps-block {
        background: var(--color-beige);
        padding: 90px 64px 90px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .steps-block-inner {
        width: 100%;
        max-width: 1160px;
        display: flex;
        flex-direction: row;
        gap: 48px;
        align-items: flex-start;
    }

    p {
        opacity: 0.7;
    }

    /* ---------- Visual panel ---------- */

    .visual-panel {
        width: 50%;
        border-radius: 20px;
    }

    .assessment-card {
        /* background: var(--color-white); */
        width: 100%;
        border-radius: 20px;
        /* padding: 60px 0; */
        /* box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); */
    }

    .assessment-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
    }

    .assessment-card-header h3 {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.3;
    }

    .card-arrow-btn {
        flex-shrink: 0;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--color-primary-bg);
        color: var(--color-white);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .assessment-card-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .assessment-card-list li {
        font-size: 12px;
        line-height: 1.5;
        color: var(--color-text-muted);
        padding-left: 14px;
        position: relative;
    }

    .assessment-card-list li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 7px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--color-text-muted);
    }

    .skeleton-bars {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .skeleton-bar {
        height: 48px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.16);
    }

    .skeleton-bar.bar-2 {
        background: rgba(255, 255, 255, 0.10);
    }

    .skeleton-bar.bar-3 {
        background: rgba(255, 255, 255, 0.07);
    }

    /* ---------- Content panel ---------- */

    .content-panel {
        width: 47%;
        padding-top: 8px;
    }

    .eyebrow {
        color: #0b0b0b !important;
        font-size: 15px;
        letter-spacing: 4px;
        text-transform: uppercase;
        text-align: left !important;
        font-family: var(--font-body);
    }

    .heading {
        margin: 0 0 16px;
        font-family: var(--font-display-family), system-ui, sans-serif;
        font-weight: 800;
        font-size: 40px;
        line-height: 1.08;
        letter-spacing: -0.01em;
    }

    .description {
        margin: 0 0 32px;
        font-size: 18px;
        line-height: 1.6;
        color: var(--color-text-muted);
        max-width: 480px;
    }

    .steps-list {
        display: flex;
        flex-direction: column;
    }

    .step-item {
        padding: 18px 0;
        border-top: 1px solid var(--color-beige-2);
        cursor: pointer;
    }

    .step-item:last-child {
        /* border-bottom: 1px solid var(--color-beige-2); */
    }

    .step-item-header {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .step-icon {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-text-muted);
    }

    .step-item.active .step-icon {
        color: var(--color-accent-green);
    }

    .step-title {
        font-size: 18px;
        font-weight: 500;
        color: var(--color-text-muted);
    }

    .step-item.active .step-title {
        font-weight: 700;
        color: var(--color-text);
    }

    .step-description {
        display: none;
        margin: 10px 0 0 28px;
        font-size: 15px;
        line-height: 1.6;
        color: var(--color-text-muted);
        max-width: 420px;
    }

    .step-item.active .step-description {
        display: block;
    }

    .step-item.active {
        position: relative;
    }

    .step-item.active::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 64px;
        height: 2px;
        background: var(--color-accent-green);
    }

    /* ---------- Mobile carousel controls (hidden on desktop) ---------- */

    .carousel-controls {
        display: none;
    }

    /* ---------- Buttons ---------- */

    .steps-block-buttons {
        display: none;
    }

    .button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 20px;
        font-size: 14px;
        font-weight: 600;
    }

    .button-primary {
        background: var(--color-primary-bg);
        color: var(--color-white);
    }

    .button-secondary {
        background: transparent;
        color: var(--color-text);
        border: 1px solid var(--color-beige-2);
    }

    /* ---------- Footer ---------- */

    .steps-block-footer {
        width: 100%;
        max-width: 1160px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background: var(--color-primary-bg);
        border-radius: 12px;
        margin-top: 48px;
        padding: 16px 24px;
    }

    .menu-logo-button {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .menu-logo-dot {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--color-accent-green);
    }

    .menu-logo-button-text {
        color: var(--color-white);
        font-weight: 600;
        font-size: 14px;
    }

    .footer-text {
        margin: 0;
        font-size: 12px;
        color: var(--color-beige);
        opacity: 0.7;
    }

    /* ================= Responsive ================= */

    @media (max-width: 1200px) {
        .steps-block {
            padding: 40px 24px;
        }
    }

    @media (max-width: 1024px) {
        .steps-block-inner {
            align-items: center;
        }
    }

    @media (max-width: 900px) {
        .steps-block-inner {
            flex-direction: column;
            gap: 18px;
        }

        .visual-panel,
        .content-panel {
            width: 100%;
        }

        .heading {
            font-size: 36px;
        }
    }

    @media (max-width: 768px) {
        .steps-block {
            padding: 50px 26px 50px 26px;
        }

        .eyebrow {
            font-size: 15px;
        }

        .description {
            max-width: unset;
        }

        /* Turn the list into a one-at-a-time carousel */
        .step-item {
            display: none;
            border: none;
            padding: 4px 0 0;
        }

        .step-item.active {
            display: block;
            padding: 10px;
        }

        .step-item.active::after {
            display: none;
        }

        .step-description {
            margin-left: 0;
        }

        .step-item-header {
            gap: 8px;
        }

        .step-title {
            font-weight: 700;
            color: var(--color-text);
        }

        .carousel-controls {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1160px;
            width: 100%;
            margin: 40px auto 0;
        }

        .carousel-dots {
            display: flex;
            gap: 6px;
        }

        .carousel-dots span {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--color-beige-2);
        }

        .carousel-dots span.active {
            background: var(--color-text);
            width: 16px;
            border-radius: 4px;
        }

        .carousel-arrows {
            display: flex;
            gap: 8px;
        }

        .arrow-btn {
            width: 32px;
            height: 32px;
            border-radius: 5px;
            border: 1px solid var(--color-beige-2);
            background: transparent;
            color: var(--color-text);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .arrow-btn:disabled {
            opacity: 0.35;
            cursor: default;
        }

        .arrow-btn-dark {
            background: var(--color-primary-bg);
            border-color: var(--color-primary-bg);
            color: var(--color-white);
        }

        .steps-block-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: 100%;
            max-width: 1160px;
            margin: 32px auto 0;
            display: none;
        }

        .button {
            justify-content: center;
            width: 100%;
        }

        .steps-block-footer {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
            margin-top: 24px;
        }
    }


    :root {
        --tf-tag-bg: rgba(107, 143, 99, 0.16);
        --tf-tag-color: #7ED67A;
        --tf-border-soft: rgba(255, 255, 255, 0.08);
        --tf-border-soft-dark: rgba(0, 0, 0, 0.08);
    }

    .trust-section,
    .faq-section,
    .outcomes-section {
        box-sizing: border-box;
    }

    .trust-section *,
    .faq-section *,
    .outcomes-section * {
        box-sizing: border-box;
    }

    /* ==========================================================================
   1. TRUST / DATA-HANDLING SECTION
   ========================================================================== */

    .trust-section {
        background: var(--color-beige);
        padding: 0 64px 90px 64px;
        display: flex;
        justify-content: center;
    }

    .trust-section-inner {
        width: 100%;
        max-width: 1160px;
        margin: auto;
    }

    .trust-cards {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .trust-card {
        display: flex;
        flex-direction: row;
        border-radius: 20px;
        overflow: hidden;
        min-height: 450px;
    }

    .trust-card--reverse {
        flex-direction: row-reverse;
    }

    /* ---- visual (icon) panel ---- */

    .trust-card-visual {
        flex: 0 0 54%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        background: radial-gradient(circle at 32% 42%, rgba(255, 255, 255, 0.08), transparent 55%), var(--color-dark-green);
        overflow: hidden;
        min-height: 260px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .trust-card-icon {
        position: relative;
        z-index: 2;
        width: 72px;
        height: 72px;
    }

    .trust-card-icon svg {
        width: 100%;
        height: 100%;
    }

    /* ---- content panel ---- */

    .trust-card-content {
        flex: 1;
        background: var(--color-primary-bg);
        color: var(--color-white);
        padding: 44px 44px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .trust-card-title {
        font-family: var(--font-display-family, var(--font-heading)), system-ui, sans-serif;
        font-size: 40px;
        font-weight: 500;
        line-height: 1.15;
        margin: 0 0 24px;
        color: var(--color-white);
    }

    .trust-card-desc {
        font-size: 16px;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.62);
        margin: 0 0 24px;
        max-width: 420px;
    }

    /* feature list (card A) */

    .trust-list {
        display: flex;
        flex-direction: column;
    }

    .trust-list-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 0;
        border-top: 1px solid var(--tf-border-soft);
        font-size: 14px;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.72);
    }

    .trust-list-item:first-child {
        border-top: none;
        padding-top: 0;
    }

    .trust-list-icon {
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        margin-top: 2px;
        color: var(--color-accent-green);
    }

    .trust-list-icon svg {
        width: 100%;
        height: 100%;
    }

    /* checklist (card B) */

    .trust-checklist {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 0 0 28px;
    }

    .trust-checklist-item {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 16px;
        color: rgba(255, 255, 255, 0.75);
    }

    .trust-checklist-item svg {
        flex-shrink: 0;
        width: 15px;
        height: 15px;
        color: var(--color-accent-green);
    }

    .trust-download-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        align-self: flex-start;
        padding: 12px 20px;
        border-radius: 10px;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.14);
        color: var(--color-white);
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        transition: background .2s ease, border-color .2s ease;
    }

    .trust-download-btn:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.24);
    }

    .trust-download-btn svg {
        width: 14px;
        height: 14px;
    }

    /* badge visual for card B */

    /* .trust-card-visual--badge {
        background:
            radial-gradient(circle at 65% 60%, rgba(255, 255, 255, 0.10), transparent 55%),
            var(--color-dark-green);
    } */

    .trust-badge {
        position: relative;
        z-index: 2;
        width: 150px;
        height: 195px;
        background: linear-gradient(160deg, #dce7ff 0%, #9fb3e6 45%, #5a6fae 100%);
        border-radius: 14px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.30);
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        padding: 10px;
    }

    .trust-badge::before {
        content: "";
        position: absolute;
        top: -18px;
        left: 50%;
        transform: translateX(-50%);
        width: 26px;
        height: 34px;
        border-radius: 6px;
        background: var(--color-primary-bg);
    }

    .trust-badge-check {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: var(--color-accent-green);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
    }

    .trust-badge-check svg {
        width: 16px;
        height: 16px;
        color: var(--color-white);
    }

    /* ---------------- Responsive: tablet ---------------- */

    @media (max-width: 1200px) {
        .trust-section {
            padding: 56px 24px;
        }
    }

    @media (max-width: 991px) {
        .trust-card {
            min-height: 0;
        }

        .trust-card-visual {
            flex: 0 0 220px;
            min-height: 360px;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }

        .trust-card-content {
            padding: 32px;
        }

        .trust-card-title {
            font-size: 26px;
        }
    }

    /* ---------------- Responsive: mobile ---------------- */

    @media (max-width: 768px) {
        .trust-section {
            padding: 40px 16px;
        }

        .trust-cards {
            gap: 16px;
        }

        .trust-card,
        .trust-card--reverse {
            flex-direction: column;
        }

        .trust-card-visual {
            flex: 0 0 auto;
            width: 100%;
            /* min-height: 190px; */
        }

        .trust-card-visual::before {
            width: 220px;
            height: 220px;
        }

        .trust-card-visual::after {
            width: 300px;
            height: 300px;
        }

        .trust-card-icon {
            width: 56px;
            height: 56px;
        }

        .trust-card-content {
            padding: 26px 22px 30px;
        }

        .trust-card-title {
            font-size: 36px;
            margin-bottom: 24px;
        }

        .trust-card-desc {
            max-width: unset;
        }

        .trust-download-btn {
            width: 100%;
            justify-content: center;
        }

        .trust-badge {
            width: 120px;
            height: 156px;
        }
    }


    /* ==========================================================================
   2. FAQ SECTION
   ========================================================================== */

    .faq-section {
        background: #21251F;
        padding: 100px 64px;
        display: flex;
        justify-content: center;
    }

    .faq-section-inner {
        width: 100%;
        max-width: 760px;
    }

    .faq-header {
        text-align: center;
        margin-bottom: 48px;
    }

    .faq-eyebrow {
        color: rgba(255, 255, 255, 0.55);
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 4px;
        text-transform: uppercase;
        margin: 0 0 16px;
        font-family: var(--font-body-1-family, var(--font-body)), sans-serif;
    }

    .faq-title {
        color: var(--color-white);
        font-family: var(--font-display-family, var(--font-heading)), system-ui, sans-serif;
        font-size: 48px;
        font-weight: 700;
        line-height: 1.2;
        margin: 0 auto;
        max-width: 520px;
    }

    .faq-list {
        display: flex;
        flex-direction: column;
    }

    .faq-item {
        border-top: 1px solid rgba(255, 255, 255, 0.10);
    }

    .faq-item:last-child {
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }

    .faq-question {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        background: none;
        border: none;
        text-align: left;
        cursor: pointer;
        padding: 22px 0;
        font-family: var(--font-body-1-family);
        font-size: 18px;
        letter-spacing: 0.02em;
        font-weight: 500;
        color: var(--color-white);
    }

    .faq-chevron {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.55);
        transition: transform .25s ease;
    }

    .faq-item.is-open .faq-chevron {
        transform: rotate(180deg);
        color: var(--color-accent-green);
    }

    .faq-answer {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .3s ease;
    }

    .faq-item.is-open .faq-answer {
        grid-template-rows: 1fr;
    }

    .faq-answer-inner {
        overflow: hidden;
    }

    .faq-answer p {
        margin: 0 0 22px;
        font-size: 15px;
        line-height: 1.65;
        color: rgba(255, 255, 255, 0.58);
        max-width: 620px;
    }

    /* ---------------- Responsive ---------------- */

    @media (max-width: 1200px) {
        .faq-section {
            padding: 64px 24px;
        }
    }

    @media (max-width: 768px) {
        .faq-section {
            padding: 48px 16px;
        }

        .faq-header {
            margin-bottom: 32px;
        }

        .faq-title {
            font-size: 36px;
        }

        .faq-question {
            font-size: 16px;
            padding: 18px 0;
            gap: 12px;
        }

        .faq-answer p {
            font-size: 14px;
        }
    }

    @media (max-width: 580px) {
        .faq-title {
            font-size: 36px;
            max-width: 360px;
        }
    }

    /* ==========================================================================
   3. CLIENT OUTCOMES SECTION
   ========================================================================== */

    .outcomes-section {
        background: #21251F;
        padding: 40px 64px 40px;
        display: flex;
        justify-content: center;
    }

    .outcomes-section-inner {
        width: 100%;
        max-width: 1160px;
    }

    .outcomes-header {
        text-align: center;
        margin-bottom: 48px;
    }

    .outcomes-eyebrow {
        color: rgba(255, 255, 255, 0.55);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 4px;
        text-transform: uppercase;
        margin: 0 0 16px;
        font-family: var(--font-body-1-family, var(--font-body)), sans-serif;
    }

    .outcomes-title {
        color: var(--color-white);
        font-family: var(--font-display-family, var(--font-heading)), system-ui, sans-serif;
        font-size: 48px;
        font-weight: 700;
        margin: 0 0 14px;
    }

    .outcomes-subtitle {
        color: rgba(255, 255, 255, 0.55);
        font-size: 16px;
        margin: 0;
    }

    /* ---- stats row with corner brackets ---- */

    .outcomes-stats-wrap {
        position: relative;
        padding: 16px 0;
        margin-bottom: 56px;
    }

    .outcomes-brackets {
        display: flex;
        justify-content: space-between;
        height: 12px;
    }

    .outcomes-bracket-ul {
        width: 12px;
        border-top: 2px solid rgba(255, 255, 255, 0.22);
        border-left: 2px solid rgba(255, 255, 255, 0.22);
    }

    .outcomes-bracket-ur {
        width: 12px;
        border-top: 2px solid rgba(255, 255, 255, 0.22);
        border-right: 2px solid rgba(255, 255, 255, 0.22);
    }

    .outcomes-bracket-ll {
        width: 12px;
        border-bottom: 2px solid rgba(255, 255, 255, 0.22);
        border-left: 2px solid rgba(255, 255, 255, 0.22);
    }

    .outcomes-bracket-lr {
        width: 12px;
        border-bottom: 2px solid rgba(255, 255, 255, 0.22);
        border-right: 2px solid rgba(255, 255, 255, 0.22);
    }

    .outcomes-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        padding: 12px;
    }

    .outcomes-stat-card {
        background: rgb(53 52 46);
        background-image:
            repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 10px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        padding: 20px;
    }

    .outcomes-tag {
        display: inline-block;
        background: var(--tf-tag-bg);
        color: var(--tf-tag-color);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.02em;
        padding: 4px 10px;
        border-radius: 5px;
        margin-bottom: 22px;
    }

    .outcomes-stat-number {
        font-family: var(--font-display-family, var(--font-heading)), system-ui, sans-serif;
        font-size: 36px;
        font-weight: 700;
        color: var(--color-white);
        margin-bottom: 4px;
    }

    .outcomes-stat-label {
        font-size: 14px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.85);
        margin-bottom: 10px;
    }

    .outcomes-stat-desc {
        font-size: 13px;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.5);
        margin: 0;
    }

    /* ---- CTA banner ---- */

    .outcomes-cta-wrap {
        position: relative;
        padding: 26px;
    }

    .outcomes-cta {
        background: var(--color-dark-green);
        background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.05), transparent 60%),
            radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05), transparent 60%);
        border-radius: 24px;
        padding: 56px 40px;
        text-align: center;
    }

    .outcomes-cta-title {
        color: var(--color-white);
        font-family: var(--font-display-family, var(--font-heading)), system-ui, sans-serif;
        font-size: 30px;
        font-weight: 700;
        line-height: 1.3;
        margin: 0 auto 12px;
        max-width: 520px;
    }

    .outcomes-cta-sub {
        color: rgba(255, 255, 255, 0.72);
        font-size: 15px;
        margin: 0 auto 32px;
    }

    .outcomes-cta-buttons {
        display: flex;
        justify-content: center;
        gap: 40px;
        flex-wrap: wrap;
    }

    .outcomes-cta-btn-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .outcomes-cta-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 22px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
    }

    .outcomes-cta-btn--primary {
        background: var(--color-beige);
        color: var(--color-primary-bg);
    }

    .outcomes-cta-btn--secondary {
        background: rgba(255, 255, 255, 0.08);
        color: var(--color-white);
        border: 1px solid rgba(255, 255, 255, 0.20);
    }

    .outcomes-cta-btn svg {
        width: 13px;
        height: 13px;
    }

    .outcomes-cta-btn-caption {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.5);
    }

    /* checkerboard corner decorations */

    .outcomes-checker {
        position: absolute;
        display: grid;
        grid-template-columns: repeat(2, 9px);
        grid-template-rows: repeat(2, 9px);
        gap: 4px;
    }

    .outcomes-checker span {
        width: 9px;
        height: 9px;
        background: var(--color-accent-green);
        opacity: 0.5;
        border-radius: 1px;
    }

    .outcomes-checker span:nth-child(1),
    .outcomes-checker span:nth-child(4) {
        opacity: 0.85;
    }

    .outcomes-checker--tl {
        top: 0;
        left: 0;
    }

    .outcomes-checker--tr {
        top: 0;
        right: 0;
    }

    .outcomes-checker--bl {
        bottom: 0;
        left: 0;
    }

    .outcomes-checker--br {
        bottom: 0;
        right: 0;
    }

    /* ---------------- Responsive: tablet ---------------- */

    @media (max-width: 1200px) {
        .outcomes-section {
            padding: 32px 24px 32px;
        }
    }

    @media (max-width: 991px) {
        .outcomes-stats {
            grid-template-columns: 1fr;
        }

        .outcomes-title {
            font-size: 36px;
        }

        .outcomes-cta-buttons {
            gap: 24px;
        }
    }

    /* ---------------- Responsive: mobile ---------------- */

    @media (max-width: 768px) {
        .outcomes-section {
            padding: 24px 16px 24px;
        }

        .outcomes-header {
            margin-bottom: 32px;
        }

        .outcomes-title {
            font-size: 36px;
        }

        .outcomes-subtitle {
            font-size: 14px;
        }

        .outcomes-brackets {
            display: none;
        }

        .outcomes-stats-wrap {
            padding: 0;
            margin-bottom: 32px;
        }

        .outcomes-stats {
            padding: 0;
            gap: 14px;
        }

        .outcomes-cta-wrap {
            padding: 16px;
        }

        .outcomes-cta {
            padding: 40px 22px;
            border-radius: 18px;
        }

        .outcomes-cta-title {
            font-size: 22px;
        }

        .outcomes-cta-buttons {
            flex-direction: column;
            align-items: center;
            gap: 18px;
        }

        .outcomes-cta-btn {
            width: 100%;
            justify-content: center;
        }

        .outcomes-checker {
            grid-template-columns: repeat(2, 7px);
            grid-template-rows: repeat(2, 7px);
            gap: 3px;
        }

        .outcomes-checker span {
            width: 7px;
            height: 7px;
        }
    }

    .trust-list-item {
        font-size: 16px;
    }


    /*=====================================================*/



    body {
        background-color: #F8F8EE;
    }

    /* ── Scroll reveal ──
     The JS only ever toggles the .visible class on scroll; this section
     was missing entirely, so nothing ever appeared to move or fade in. */
    .reveal {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity .7s ease, transform .7s ease;
    }

    .reveal.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .section-hire-verified-v2 {
        background-color: #F8F8EE;
        align-items: stretch;
        position: relative;
        overflow: hidden;
        font-family: var(--font-display-family), system-ui, sans-serif;
        margin: 15px auto 0;
        padding: 0 64px;
    }

    .hv2-inner {
        display: flex;
        align-items: flex-start;
        width: 100%;
        max-width: 1680px;
        margin: 0 auto;
        padding: 0;
        gap: 40px;
        max-width: 1500px;
        max-height: 840px
    }

    @media (min-width: 1540px) {
        .hv2-inner {
            padding: 60px 0px 80px 0px;
        }
    }

    /* ---- LEFT COLUMN ---- */
    .hv2-left {
        flex: 0 0 45%;
        display: flex;
        flex-direction: column;
        gap: 0;
        /* padding: 120px 0px 180px 0px; */
    }

    @media (min-width: 1024px) {
        .hv2-left {
            /* padding: 120px 45px 100px 45px; */
            padding: 40px 5px 60px 15px;
        }
    }

    .divider-hero img {
        margin-top: -150px;
        margin-left: 2px;
        position: absolute;
    }

    /* Headline */
    .hv2-headline {
        font-size: clamp(46px, 4.5vw, 64px);
        font-weight: 800;
        line-height: 110%;
        color: #1A1A1A;
        margin: 0 0 20px 0;
        letter-spacing: -0.02em;
        max-width: 690px;
        animation: fadeUp .8s .2s ease both;
    }

    .hv2-headline .hv2-headline-light {
        font-weight: 400;
        color: #1A1A1A;
    }

    /* Subtitle */
    .hv2-subtitle {
        font-size: 18px;
        line-height: 1.6;
        color: #5A5A5A;
        margin: 0 0 36px 0;
        max-width: 490px;
        font-family: 'Inter', system-ui, sans-serif;
    }

    /* CTA box — dark green card */
    .hv2-cta-box {
        background-color: #1E3A2F;
        border-radius: 14px;
        padding: 20px 24px;
        display: inline-flex;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 6px;
        max-width: 260px;
        text-decoration: none;
        transition: background-color 0.2s ease;
    }

    .hv2-cta-box:hover {
        background-color: #162d24;
    }

    .hv2-cta-label {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #FFFFFF;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.01em;
    }

    .hv2-cta-label svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    .hv2-cta-desc {
        font-size: 16px;
        color: #ffffffff;
        line-height: 1.4;
        font-family: 'Inter', system-ui, sans-serif;
    }

    /* "For Experts" sub-label */
    .hv2-for-experts {
        font-size: 15px;
        color: #1d1d1d;
        margin: 8px 0 40px 0;
        letter-spacing: 0.01em;
        font-family: var(--font-body-1-family);
    }

    /* Stats row */
    .hv2-stats {
        display: flex;
        justify-content: space-between;
        gap: 40px;
        align-items: flex-start;
        margin-top: 4px;
    }

    .hv2-stat-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }

    .hv2-stat-number {
        font-size: 28px;
        font-weight: 700;
        color: #1A1A1A;
        letter-spacing: -0.02em;
        line-height: 1;
    }

    .hv2-stat-label {
        font-size: 15px;
        color: #21251F;
        letter-spacing: 0.01em;
        font-family: var(--font-body-1-family), sans-serif;
    }

    .hv2-stat-divider {
        width: 1px;
        height: 44px;
        background: #D6D0C8;
        align-self: center;
    }

    /* ---- RIGHT COLUMN ---- */
    .hv2-right {
        flex: 1;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        min-height: 580px;
    }

    .hv2-right {
        position: relative;
        overflow: visible;
    }

    .hv2-hero-photo {
        position: absolute;
        width: 140%;
        top: -67px;
        right: -459px;
    }

    @media (max-width: 1559px) {
        .hv2-hero-photo {
            width: 150%;
            top: -67px;
            right: -379px;
        }
    }

    @media (max-width: 1200px) {
        .hv2-hero-photo {
            width: 268%;
            top: -99px;
            right: -550px;
        }
    }

    @media (max-width:1200px) {
        .hv2-inner {
            padding: 0px 0px 50px 0px;
        }
    }

    @media (max-width:1024px) {
        .hv2-stats {
            gap: 10px;
        }

        .hv2-hero-photo {
            width: 110%;
            transform: translate(-20px, 80px);
        }
    }

    /* Floating expert cards */
    .hv2-float-card {
        position: absolute;
        background: #FFFFFF;
        border-radius: 12px;
        padding: 10px 14px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
        min-width: 160px;
        max-width: 220px;
    }

    .hv2-float-card-top {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .hv2-float-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
        background: #D6D0C8;
    }

    .hv2-float-avatar-initials {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 600;
        flex-shrink: 0;
        color: #fff;
    }

    .hv2-float-name {
        font-size: 13px;
        font-weight: 600;
        color: #1A1A1A;
        line-height: 1.2;
    }

    .hv2-float-role {
        font-size: 11px;
        color: #888;
        line-height: 1.3;
    }

    /* Card: Caitlyn — left side */
    .hv2-card-caitlyn {
        top: 18%;
        left: -24px;
    }

    /* Card: John — top right */
    .hv2-card-john {
        top: 6%;
        right: -16px;
    }

    /* Card: Catherine — bottom right, detailed card */
    .hv2-card-catherine {
        bottom: 8%;
        right: -20px;
        min-width: 220px;
    }

    .hv2-card-catherine-header {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 8px;
    }

    .hv2-card-catherine-tag {
        font-size: 11px;
        color: #5A5A5A;
        border: 1px solid #E0DBCE;
        border-radius: 4px;
        padding: 2px 7px;
        line-height: 1.4;
    }

    .hv2-card-detail-name {
        font-size: 12px;
        font-weight: 600;
        color: #1A1A1A;
        line-height: 1.3;
    }

    .hv2-card-detail-desc {
        font-size: 11px;
        color: #888;
        line-height: 1.4;
        margin: 4px 0;
    }

    .hv2-card-meta-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 11px;
        color: #888;
        margin-top: 4px;
    }

    .hv2-card-meta-value {
        color: #1A1A1A;
        font-weight: 500;
    }

    .hv2-card-meta-rating {
        display: flex;
        align-items: center;
        gap: 3px;
        color: #1A1A1A;
        font-weight: 500;
    }

    .hv2-star {
        color: #F5A623;
        font-size: 12px;
    }

    .hv2-card-logos {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 8px;
    }

    .hv2-logo-badge {
        width: 20px;
        height: 20px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: 700;
    }

    .hv2-logo-ms {
        background: #2B579A;
        color: #fff;
    }

    .hv2-logo-x {
        background: #000;
        color: #fff;
    }

    /* Pixel/decoration strip — re-uses existing theme include */
    .hv2-pixel-strip {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }

    @media (min-width: 580px) and (max-width: 900px) {
        .hv2-right {
            width: 100%;
            min-height: 400px;
            position: absolute;
            right: -200px;
            bottom: 75px;
        }
    }

    @media (min-width: 581px) and (max-width: 768px) {
        .hv2-subtitle {
            font-size: 16px;
            max-width: 397px;
        }
    }

    @media (max-width: 580px) {
        .hv2-right {
            min-height: unset;
        }

        .hv2-hero-photo {
            position: static;
            transform: scale(1.5) !important;
            margin-left: 110px;
        }

        .hero-card {
            width: 284px;
        }

        .hv2-subtitle {
            font-size: 16px;
        }
    }

    /* ---- Responsive ---- */
    @media (max-width: 900px) {

        .section-hire-verified-v2 {
            padding: 0 20px;
        }

        .hv2-inner {
            flex-direction: column;
            padding: 0px;
            gap: 10px;
            max-height: 100%;
        }

        .hv2-left {
            max-width: 100%;
            flex: none;
            padding: 50px 0px;
            text-align: center;
            margin: auto;
        }

        .hv2-subtitle {
            font-size: 16px;
            max-width: 397px;
            margin: 0px auto 30px;
        }

        .hero-cardsv2 {
            gap: 50px;
        }

        .hv2-hero-photo {
            width: 400px;
            max-width: 100%;
            transform: translate(-10px, 90px);
        }

        .hv2-card-caitlyn {
            left: 8px;
        }

        .hv2-card-john {
            right: 8px;
        }

        .hv2-card-catherine {
            right: 8px;
        }
    }

    @media (max-width: 580px) {
        .hv2-stats {
            gap: 24px;
        }

        .hv2-stat-number {
            font-size: 22px;
        }

        .hv2-cta-box {
            max-width: 100%;
        }

        .hero-cardsv2 {
            flex-direction: column;
            gap: 0px !important;
        }

        .hv2-stats {
            display: none;
        }

        .section-hire-verified-v2 {
            padding: 0px;
        }

        .hv2-headline {
            max-width: 390px;
        }
    }

    .section-hire-verified {
        background-color: var(--color-primary-green);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

    .hire-verified-wrapper {
        padding: 96px 64px 0 64px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 800px
    }

    #hire-verified-title {
        font-size: 56px
    }

    #hire-verified-subtitle {
        opacity: 0.7;
        text-align: center;
        padding: 16px 0;
        width: 600px
    }

    .hire-verified-buttons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 16px
    }

    .hire-verified-create-profile-button {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: fit-content;
        height: 36px;
        padding: 8px 12px;
        gap: 8px;
        border-radius: 8px;
        opacity: 1;
        background-color: var(--color-white);
        box-sizing: border-box
    }

    .hire-verified-create-profile-text {
        font-family: var(--font-body-1-family), sans-serif;
        font-weight: 600;
        font-size: 16px;
        line-height: 110%;
        letter-spacing: -0.01em;
        color: #000000;
        text-align: left
    }

    .hire-verified-comment {
        font-size: 16px;
        font-weight: 400;
        line-height: 150%;
        opacity: 0.7;
        padding-top: 16px
    }

    .hire-verified-comment br {
        display: none
    }

    .hire-verified-faces-container {
        height: 685px;
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center
    }

    .hire-verified-slideshow {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 55%;
        width: auto;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .hire-verified-slideshow img {
        position: absolute;
        width: auto;
        height: 100%;
        object-fit: contain;
        opacity: 0;
        animation: fade 15s infinite
    }

    .hire-verified-slideshow img:nth-child(1) {
        animation-delay: 0s
    }

    .hire-verified-slideshow img:nth-child(2) {
        animation-delay: 3s
    }

    .hire-verified-slideshow img:nth-child(3) {
        animation-delay: 6s
    }

    .hire-verified-slideshow img:nth-child(4) {
        animation-delay: 9s
    }

    .hire-verified-slideshow img:nth-child(5) {
        animation-delay: 12s
    }

    @keyframes fade {
        0% {
            opacity: 0
        }

        10% {
            opacity: 1
        }

        30% {
            opacity: 1
        }

        40% {
            opacity: 0
        }

        100% {
            opacity: 0
        }
    }

    .hire-verified-video-crop {
        width: 100%;
        height: 100%;
        position: relative
    }

    .hire-verified-video-crop video {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0
    }

    @media (max-width:900px) {
        .hire-verified-slideshow {
            height: 45%
        }
    }

    @media (max-width:768px) {
        .hire-verified-wrapper {
            width: 100%;
            padding: 40px 16px 0 16px;
            gap: 16px
        }

        #hire-verified-title {
            font-size: 36px
        }

        #hire-verified-subtitle {
            width: 90%;
            padding: 0;
            font-size: 16px
        }

        #hire-verified-hire-talent-button,
        #hire-verified-create-profile-button {
            font-size: 14px
        }

        .hire-verified-comment {
            font-size: 14px;
            text-align: center;
            width: 100%
        }

        .hire-verified-comment br {
            display: inline
        }

        .hire-verified-faces-container {
            height: 424px
        }

        .hire-verified-slideshow {
            height: 55%
        }
    }

    @media (max-width:600px) {
        .hire-verified-slideshow {
            height: 45%
        }
    }

    @media (max-width:440px) {
        .hire-verified-slideshow {
            height: 40%
        }
    }

    @media (max-width:375px) {
        .hire-verified-buttons {
            padding-top: 8px;
            margin: 0 16px;
            justify-content: space-between;
            gap: 12px;
            width: 90%
        }

        #hire-verified-hire-talent-button,
        #hire-verified-create-profile-button {
            width: 100%;
            font-size: 14px
        }

        .hire-verified-faces-container {
            height: 224px
        }
    }

    .why-choose-liceum-headings {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 64px 0
    }

    #why-choose-liceum-title {
        color: var(--color-beige)
    }

    .why-choose-liceum-hire-button {
        display: flex;
        justify-content: center;
        align-items: center
    }

    .why-choose-liceum-boxes {
        display: flex;
        flex-direction: column
    }

    .why-choose-liceum-brackets {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: 12px
    }

    .why-choose-liceum-upper-left {
        width: 12px;
        border-top: 2px solid #ffffff6e;
        border-left: 2px solid #ffffff6e;
    }

    .why-choose-liceum-lower-left {
        width: 12px;
        border-bottom: 2px solid #ffffff6e;
        border-left: 2px solid #ffffff6e;
    }

    .why-choose-liceum-upper-right {
        width: 12px;
        border-top: 2px solid #ffffff6e;
        border-right: 2px solid #ffffff6e;
    }

    .why-choose-liceum-lower-right {
        width: 12px;
        border-bottom: 2px solid #ffffff6e;
        border-right: 2px solid #ffffff6e;
    }

    .why-choose-liceum-boxes-rows {
        display: flex;
        flex-direction: column;
        gap: 20px
    }

    .why-choose-liceum-box-1 {
        width: 50%;
        aspect-ratio: 1;
        position: relative
    }

    .why-choose-liceum-box-2 {
        width: 50%;
        position: relative
    }

    .why-choose-liceum-box-info {
        color: var(--color-beige);
        padding: 12px 36px 48px
    }

    .why-choose-liceum-box-title {
        font-weight: 600;
        font-size: 28px;
        line-height: 120%;
        padding-bottom: 12px
    }

    .why-choose-liceum-box-description {
        opacity: 0.75;
        font-size: 16px;
        letter-spacing: 0.02em;
        font-weight: normal;
    }

    .why-choose-liceum-verification-line {
        background-image: url(/wp-content/themes/liceumai-theme/assets/images/2.0/hire-talent-button-1.svg);
        background-repeat: no-repeat;
        background-size: 50px;
        width: 100%;
        height: 100%;
        transform: translate(6%, 15%);
    }

    @media (max-width:1200px) {
        .section-why-choose-liceum {
            padding: 40px 32px
        }

        .why-choose-liceum-box-3 {
            background-position: center -30px
        }
    }

    @media (max-width:860px) {
        .section-why-choose-liceum {
            padding: 40px 16px
        }

        .why-choose-liceum-cards {
            top: 30%
        }

        .why-choose-liceum-headings {
            padding: 0 16px 24px 16px;
            gap: 16px;
            width: 100%
        }

        .why-choose-liceum-box-info {
            padding: 30px;
        }

        #why-choose-liceum-title {
            font-size: 32px;
            width: 100%
        }

        #why-choose-liceum-title br {
            display: none
        }

        .why-choose-liceum-hire-button {
            display: none
        }

        .why-choose-liceum-boxes-rows {
            gap: 40px
        }

        .why-choose-liceum-boxes-row {
            flex-direction: column;
            gap: 40px
        }

        .why-choose-liceum-box {
            width: 100%;
            height: 358px
        }

        .why-choose-liceum-box-1,
        .why-choose-liceum-box-2,
        .why-choose-liceum-box-3,
        .why-choose-liceum-box-4 {
            width: 100%
        }

        .why-choose-liceum-box-3 {
            background-position: 100% 15%;
            background-size: contain
        }

        .why-choose-liceum-box-title {
            font-size: 18px
        }

        .why-choose-liceum-box-description br {
            display: none
        }
    }

    .section-how-hiring-works {
        padding: 64px 64px 96px 64px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: var(--color-beige)
    }

    .how-hiring-works-heading {
        padding: 64px 64px 24px 64px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

    #how-hiring-works-title {
        line-height: 100%;
        margin-bottom: 12px
    }

    #how-hiring-works-description {
        text-align: center;
        width: 662px;
        padding-bottom: 36px;
        opacity: 0.7
    }

    .how-hiring-works-buttons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 16px
    }

    .how-hiring-works-steps {
        display: flex;
        flex-direction: column;
        padding-bottom: 64px;
        width: 100%
    }

    .how-hiring-works-steps-main {
        display: flex;
        flex-direction: row;
        padding: 24px;
        gap: 24px
    }

    .how-hiring-works-steps-right {
        width: 50%;
        display: flex;
        flex-direction: column
    }

    .how-hiring-works-steps-left {
        width: 50%;
        background-image: url('https://liceum.ai/wp-content/themes/liceumai-theme/assets/images/ai-qa.webp');
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat
    }

    .how-hiring-works-steps-row {
        display: flex;
        flex-direction: row
    }

    .how-hiring-works-step-1,
    .how-hiring-works-step-2,
    .how-hiring-works-step-3,
    .how-hiring-works-step-4,
    .how-hiring-works-step-5 {
        width: 100%;
        height: 156px;
        border: var(--color-beige-2) solid 1px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 20px;
        font-size: 16px;
        cursor: pointer
    }

    .step-active {
        background-color: #E8E8DD !important
    }

    .how-hiring-works-step-description {
        display: none;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
        opacity: 0.6
    }

    .step-active .how-hiring-works-step-description {
        display: block;
        opacity: 0.7
    }

    .how-hiring-works-step-number {
        font-family: var(--font-heading-family), sans-serif;
        font-size: 24px
    }

    .how-hiring-works-step-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: 16px
    }

    .how-hiring-works-step-title {
        font-weight: 600
    }

    .how-hiring-works-step-description {
        font-weight: 300;
        opacity: 0.7;
        padding-right: 28px
    }

    .how-hiring-works-steps-footer {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-color: var(--color-primary-bg);
        margin: 0 24px 24px 24px;
        padding: 16px 24px
    }

    .how-hiring-works-steps-footer-text {
        font-size: 12px;
        margin: 0;
        padding: 0;
        color: var(--color-beige)
    }

    .how-hiring-works-steps .step-image {
        display: none
    }

    @media (max-width:1200px) {
        .section-how-hiring-works {
            padding: 40px 24px
        }
    }

    @media (max-width:920px) {
        .how-hiring-works-step-description {
            font-size: 14px;
            letter-spacing: -0.01rem
        }
    }

    @media (max-width:768px) {
        .section-how-hiring-works {
            padding: 40px 16px
        }

        .how-hiring-works-heading {
            padding: 0;
            gap: 16px;
            width: 100%
        }

        #how-hiring-works-title {
            font-size: 32px;
            width: 100%;
            margin-bottom: 0
        }

        #how-hiring-works-description {
            font-size: 16px;
            width: 100%;
            padding-bottom: 16px
        }

        .how-hiring-works-steps {
            width: 100%;
            padding-bottom: 0
        }

        .how-hiring-works-steps-main {
            width: 100%;
            flex-direction: column;
            padding: 36px 0
        }

        .how-hiring-works-steps-left {
            display: none
        }

        .how-hiring-works-steps-right {
            width: 100%;
            gap: 36px
        }

        .how-hiring-works-step-description {
            font-size: 16px;
            letter-spacing: normal;
            display: block !important
        }

        .how-hiring-works-step-1,
        .how-hiring-works-step-2,
        .how-hiring-works-step-3,
        .how-hiring-works-step-4,
        .how-hiring-works-step-5 {
            background-color: #E8E8DD;
            height: auto;
            padding: 0;
            cursor: none
        }

        .how-hiring-works-step-header {
            padding: 20px 20px 0 20px
        }

        .how-hiring-works-step-content {
            padding: 0 20px 20px 20px
        }

        .how-hiring-works-steps-footer {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: flex-start;
            margin: 0;
            padding: 12px
        }

        .how-hiring-works-steps-footer-text {
            font-size: 14px
        }

        .how-hiring-works-steps .step-image {
            display: block;
            width: 100%
        }

        .how-hiring-works-steps .step-image img {
            width: 100%;
            height: auto;
            display: block
        }
    }

    @media (max-width:375px) {
        .how-hiring-works-buttons {
            padding-top: 0;
            margin: 0;
            width: 100%;
            justify-content: space-between;
            gap: 12px;
            font-size: 14px
        }

        #how-hiring-works-hire-talent-button,
        #how-hiring-works-get-demo-button {
            width: 100%
        }
    }

    .section-experts-across-workflow-talent {
        background-color: var(--color-beige-2);
        background-image: url('https://liceum.ai/wp-content/themes/liceumai-theme/assets/images/bg-grid-gray.webp');
        background-position-x: center;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 144px 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 64px
    }

    .experts-across-workflow-main-talent {
        max-width: 815px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center
    }

    #experts-across-workflow-title-talent {
        margin-bottom: 24px
    }

    #experts-across-workflow-description-talent {
        text-align: center;
        width: 662px;
        padding-bottom: 24px;
        opacity: 0.7
    }

    .experts-across-workflow-lines {
        width: 1200px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px
    }

    .experts-across-workflow-line {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 12px;
        width: 100%
    }

    .experts-across-workflow-line-1,
    .experts-across-workflow-line-3 {
        padding-left: 124px
    }

    .experts-across-workflow-line-2 {
        padding-right: 124px
    }

    .experts-across-workflow-line-item-card {
        font-weight: 600;
        font-size: 16px;
        margin: 6px 12px;
        padding: 20px;
        background-color: var(--color-white);
        border: 2px solid #E5E5E2
    }

    .experts-across-workflow-brackets {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: 6px
    }

    .experts-across-workflow-bracket-upper-left {
        width: 6px;
        border-top: 1px solid var(--color-black);
        border-left: 1px solid var(--color-black)
    }

    .experts-across-workflow-bracket-upper-right {
        width: 6px;
        border-top: 1px solid var(--color-black);
        border-right: 1px solid var(--color-black)
    }

    .experts-across-workflow-bracket-lower-left {
        width: 6px;
        border-bottom: 1px solid var(--color-black);
        border-left: 1px solid var(--color-black)
    }

    .experts-across-workflow-bracket-lower-right {
        width: 6px;
        border-bottom: 1px solid var(--color-black);
        border-right: 1px solid var(--color-black)
    }

    @media (max-width:768px) {
        .section-experts-across-workflow-talent {
            padding: 40px 16px;
            gap: 64px
        }

        .experts-across-workflow-main-talent {
            width: 100%
        }

        #experts-across-workflow-title-talent {
            font-size: 32px
        }

        #experts-across-workflow-description-talent {
            font-size: 16px;
            width: 100%
        }

        .experts-across-workflow-text-talent {
            font-size: 14px
        }
    }

    .section-hire-with-total-control {
        padding: 144px 96px;
        background-color: var(--color-brown);
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 96px
    }

    #hire-with-total-control-talk-to-team-button {
        background-color: #53524C
    }

    #hire-with-total-control-talk-to-team-button:hover {
        background-color: var(--color-dark-green)
    }

    .hire-with-total-control-left,
    .hire-with-total-control-steps-right {
        width: 100%;
        display: flex;
        flex-direction: column
    }

    .hire-with-total-control-steps-row {
        display: flex;
        flex-direction: row
    }

    .hire-with-total-control-step {
        width: 100%;
        height: 196px;
        border: #494842 solid 1px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 20px;
        font-size: 16px;
        color: var(--color-beige)
    }

    .hire-with-total-control-step-header {
        display: flex;
        flex-direction: column;
        justify-content: space-between
    }

    .hire-with-total-control-step-content {
        display: flex;
        flex-direction: column;
        font-size: 16px;
        gap: 8px
    }

    .hire-with-total-control-step-title {
        font-weight: 600
    }

    .hire-with-total-control-step-description {
        font-weight: 300;
        opacity: 0.7;
        padding-right: 28px
    }

    .hire-with-total-control-step-icon {
        padding-left: 6px;
        width: 32px;
        height: 32px
    }

    .hire-with-total-control-brackets {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: 6px;
        width: 44px
    }

    .hire-with-total-control-bracket-upper-left {
        width: 6px;
        border-top: 1px solid var(--color-beige);
        border-left: 1px solid var(--color-beige)
    }

    .hire-with-total-control-bracket-upper-right {
        width: 6px;
        border-top: 1px solid var(--color-beige);
        border-right: 1px solid var(--color-beige)
    }

    .hire-with-total-control-lower-left {
        width: 6px;
        border-bottom: 1px solid var(--color-beige);
        border-left: 1px solid var(--color-beige)
    }

    .hire-with-total-control-lower-right {
        width: 6px;
        border-bottom: 1px solid var(--color-beige);
        border-right: 1px solid var(--color-beige)
    }

    @media (max-width:1200px) {
        .section-hire-with-total-control {
            padding: 40px;
            gap: 40px
        }
    }

    @media (max-width:791px) {
        .section-hire-with-total-control {
            flex-direction: column;
            gap: 40px
        }

        .hire-with-total-control-steps-right {
            width: 100%;
            display: flex;
            flex-direction: column
        }

        .hire-with-total-control-step {
            height: auto;
            gap: 24px
        }
    }

    @media (max-width:390px) {
        .section-hire-with-total-control {
            padding: 40px 16px;
            flex-direction: column;
            gap: 40px
        }
    }

    @media (max-width: 768px) {

        .experts-across-workflow-line {
            flex-direction: column;
            align-items: center;
            gap: 16px;
        }

        .experts-across-workflow-line-item {
            width: 100%;
            max-width: 320px;
        }

        .experts-across-workflow-line-item-card {
            text-align: center;
        }

        .experts-across-workflow-brackets {
            display: none;
        }
    }

    @media (max-width: 768px) {

        .experts-across-workflow-lines,
        .experts-across-workflow-line {
            overflow: visible !important;
        }

        .experts-across-workflow-line-1,
        .experts-across-workflow-line-3 {
            padding-left: 0 !important;
        }

        .experts-across-workflow-line-2 {
            padding-right: 0 !important;
        }
    }


    /*updated*/

    .section-why-choose-liceum {
        background-color: var(--color-dark-green);
        background-repeat: no-repeat;
        background-size: 80%;
        background-position: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 40px 96px 96px 96px;
        overflow: hidden;
    }

    .why-choose-liceum-headings {
        display: flex;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;

        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 64px 0;
    }

    .why-choose-liceum-project-headings-mobile {
        display: none;
    }

    #why-choose-liceum-title,
    #why-choose-liceum-project-title-mobile {
        color: var(--color-beige);
        max-width: 600px;
    }

    #why-choose-liceum-subtitle {
        color: var(--color-beige);
        opacity: 0.8;
        text-align: center;
        padding: 15px 0;
        max-width: 560px;
        font-weight: 300;
        letter-spacing: 0.02em;
    }

    .why-choose-liceum-hire-button {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .why-choose-liceum-boxes {
        display: flex;
        flex-direction: column;
    }

    .why-choose-liceum-brackets {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: 12px;
    }

    .why-choose-liceum-boxes-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 20px;
        padding-top: 0 !important;
        padding-left: 12px;
        padding-right: 12px;
    }

    .why-choose-liceum-box {
        height: 275px;
        width: 480px;
        background-color: #35342E;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        border-radius: 10px;
        z-index: 2;
    }

    .why-choose-liceum-project-box-1 {
        background-image: url("/wp-content/themes/liceumai-theme/assets/images/verified.png");
    }

    .why-choose-liceum-project-box-2 {
        background-image: url("/wp-content/themes/liceumai-theme/assets/images/features-line.png");
    }

    .why-choose-liceum-project-box-2 .why-choose-liceum-project-box-description {
        max-width: 596px;
    }

    .why-choose-liceum-project-box-3 {
        position: relative;
        width: 100%;
    }

    .why-choose-liceum-project-box-3::before {
        content: "";
        position: absolute;
        inset: 0;
        margin: 48px 0 110px 0;
        background-image: url("/wp-content/themes/liceumai-theme/assets/images/money-received.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        pointer-events: none;
    }

    .why-choose-liceum-box-4 {
        position: relative;
    }

    .why-choose-liceum-box-info {
        color: var(--color-beige);
        padding: 12px 36px 48px;
    }

    .why-choose-liceum-box-title {
        font-weight: 600;
        font-size: 24px;
        line-height: 120%;
        padding-bottom: 12px;
    }


    .why-choose-liceum-project-verification-line {
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 35%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .why-choose-liceum-cards {
        background-repeat: no-repeat;
        background-size: 50px;
        width: 100%;
        height: 100%;
        transform: translate(6%, 15%);
    }

    .why-choose-liceum-cards-1 {
        background-image: url(/wp-content/themes/liceumai-theme/assets/images/2.0/hire-talent-button-4.svg);
    }

    .why-choose-liceum-cards-2 {
        background-image: url(/wp-content/themes/liceumai-theme/assets/images/2.0/hire-talent-button-3.svg);
    }

    .why-choose-liceum-cards-3 {
        background-image: url(/wp-content/themes/liceumai-theme/assets/images/2.0/hire-talent-button-2.svg);
    }

    @media (max-width: 1200px) {
        .section-why-choose-liceum {
            padding: 40px 32px;
        }

        .why-choose-liceum-box-3,
        .why-choose-liceum-project-box-2 {
            background-position: center -30px;
        }
    }

    @media (max-width: 580px) {
        #why-choose-liceum-subtitle {
            display: none;
        }
    }

    @media (max-width: 860px) {

        .why-choose-liceum-cards {
            transform: translate(4%, 39%);
        }

        .section-why-choose-liceum {
            padding: 40px 16px;
        }

        .why-choose-liceum-cards {
            top: 30%;
        }

        .why-choose-liceum-headings {
            padding: 0 16px 24px 16px;
            gap: 16px;
            width: 100%;
        }

        .why-choose-liceum-box-info {
            padding: 30px;
        }

        #why-choose-liceum-title {
            font-size: 32px;
            width: 100%;
        }

        #why-choose-liceum-title br {
            display: none;
        }


        .why-choose-liceum-hire-button {
            display: none;
        }


        .why-choose-liceum-boxes-rows {
            gap: 40px;
        }

        .why-choose-liceum-boxes-row {
            flex-direction: column;
            gap: 40px;
        }

        .why-choose-liceum-box {
            width: 100%;
            height: 258px;
        }

        .why-choose-liceum-box-1,
        .why-choose-liceum-box-2,
        .why-choose-liceum-box-3,
        .why-choose-liceum-box-4,
        .why-choose-liceum-project-box-1,
        .why-choose-liceum-project-box-2 {
            width: 100%;
        }

        .why-choose-liceum-box-3,
        .why-choose-liceum-project-box-2 {
            background-position: 100% 15%;
            background-size: contain;
        }

        .why-choose-liceum-box-title {
            font-size: 18px;
        }

        .why-choose-liceum-box-description br {
            display: none;
        }

        .why-choose-liceum-project-headings-mobile {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 40px 0;
            width: 100%;
            gap: 16px;
        }

        #why-choose-liceum-project-title-mobile {
            font-size: 32px;
        }

        #why-choose-liceum-project-subtitle-mobile {
            color: var(--color-beige);
            text-align: center;
            opacity: 0.7;
        }

        .hide-on-mobile {
            display: none;
        }
    }


    img.hire-talent-trusted-element-center {
        width: 70%;
        position: absolute;
        left: 15%;
        pointer-events: none;
    }

    @media (min-width: 1440px) {
        img.hire-talent-trusted-element-midle-left {
            margin-top: 350px !important
        }

        img.hire-talent-trusted-element-midle-right {
            margin-top: 350px !important
        }

    }

    img.hire-talent-trusted-element-midle-left {
        position: absolute;
        margin-top: 200px;
        left: 100px;
        pointer-events: none;
    }

    img.hire-talent-trusted-element-midle-right {
        position: absolute;
        margin-top: 200px;
        right: 100px;
        pointer-events: none;
    }

    img.hire-talent-trusted-element-ele-left {
        position: absolute;
        left: 10%;
        margin-top: 40%;
        width: 300px;
        z-index: 1;
    }

    img.hire-talent-trusted-element-ele-right {
        position: absolute;
        right: 10%;
        margin-top: 40%;
        width: 300px;
        z-index: 1;
    }

    @media (max-width:1024px) {

        img.hire-talent-trusted-element-left,
        img.hire-talent-trusted-element-right,
        img.hire-talent-trusted-element-midle-left,
        img.hire-talent-trusted-element-midle-right,
        img.hire-talent-trusted-element-ele-left,
        img.hire-talent-trusted-element-ele-right {
            display: none;
        }

    }

    /*_____ section pixels____*/
    .hero-cardsv2 {
        display: flex;
        justify-content: space-between;
        gap: 40px;
        animation: fadeUp .8s .5s ease both;
        margin-bottom: 10px;
        font-family: var(--font-body-1-family), sans-serif;
    }

    .hero-card-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        position: relative;
        text-decoration: none;
    }

    /* ── Corner brackets ── */
    .hero-card-wrap::before,
    .hero-card-wrap::after {
        content: '';
        position: absolute;
        width: 14px;
        height: 14px;
        z-index: 2;
        pointer-events: none;
    }

    /* top-left bracket */
    .hero-card-wrap::before {
        top: -8px;
        left: -8px;
        border-top: 1px solid #0C9B54;
        border-left: 1px solid #0C9B54;
        border-radius: 3px 0 0 0;
    }

    /* top-right bracket */
    .hero-card-wrap::after {
        top: -8px;
        right: -8px;
        border-top: 1px solid #0C9B54;
        border-right: 1px solid #0C9B54;
        border-radius: 0 3px 0 0;
    }

    @media (max-width:480px) {

        .hero-card-wrap::before {
            left: 34px;
        }

        .hero-card-wrap::after {
            right: 34px;
        }
    }

    /* bottom brackets using inner spans */
    .hero-card {
        background: #1c1c1c;
        border-radius: 18px;
        padding: 22px 20px 18px;
        text-align: left;
        width: 270px;
        border: 1px solid #2a2a2a;
        transition: .2s;
        position: relative;
    }

    /* bottom-left bracket */
    .hero-card::before {
        content: '';
        position: absolute;
        bottom: -8px;
        left: -8px;
        width: 14px;
        height: 14px;
        border-bottom: 1px solid #0C9B54;
        border-left: 1px solid #0C9B54;
        border-radius: 0 0 0 3px;
        pointer-events: none;
    }

    /* bottom-right bracket */
    .hero-card::after {
        content: '';
        position: absolute;
        bottom: -8px;
        right: -8px;
        width: 14px;
        height: 14px;
        border-bottom: 1px solid #0C9B54;
        border-right: 1px solid #0C9B54;
        border-radius: 0 0 3px 0;
        pointer-events: none;
    }

    .hero-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 32px rgba(0, 0, 0, .25);
        border-color: #3a3a3a;
    }

    .hero-card .hc-badge {
        font-size: .6rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: #666;
        margin-bottom: 8px;
    }

    .hero-card h4 {
        font-family: var(--font-body-1-family), sans-serif;
        font-size: .95rem;
        font-weight: 700;
        margin-bottom: 8px;
        color: #ffffff;
    }

    .hero-card p {
        font-size: 16px;
        color: #fff;
        line-height: 1.6;
        font-family: var(--font-body-1-family), sans-serif;
        margin: 0;
    }

    .hero-card .hc-btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: var(--dark);
        color: #fff;
        padding: 6px 12px;
        border-radius: 999px;
        font-size: .7rem;
        font-weight: 600;
        text-decoration: none;
    }

    .hc-label {
        font-size: 15px;
        font-weight: 400;
        font-family: 'Inter', sans-serif;
        color: #1C312E;
        text-align: center;
        letter-spacing: 0.01em;
    }

    /* ── Section 1 — dark green bg ── */
    .hero-cardsv2 .hero-card-wrap:nth-child(1) .hero-card {
        background-color: #1C312E;
        background-image: url('/wp-content/themes/liceumai-theme/assets/images/Frame%20lines.png');
        background-size: cover;
        background-position: center;
        border-radius: 16px;
        padding: 0px 14px 14px 14px;
    }

    .hero-cardsv2 .hero-card-wrap:nth-child(2) .hero-card {
        background-color: #35342E;
        background-image: url(/wp-content/themes/liceumai-theme/assets/images/Frame%20lines.png);
        background-size: cover;
        background-position: center;
        border-radius: 16px;
        padding: 0px 14px 14px 14px;
    }


    .hc-arrow {
        width: 32px;
        height: 32px;
        margin-top: 13px;
        color: #ffffff;
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        flex-shrink: 0;
        transition: .2s;
    }

    .hc-top {
        display: flex;
    }

    .hc-title-link {
        display: flex;
        align-items: center;
        text-decoration: none;
    }

    .hc-arrow:hover {
        transform: scale(1.1);
    }

    /* ─── HOW IT WORKS ─── */

    .how {
        background: #F8F8EE;
        padding: 72px 32px;
    }

    .how-inner {
        /* max-width: 1180px; */
        max-width: 1300px;
        margin: 0 auto;
    }

    /* top */
    .how-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 30px;
    }

    .how-tabs {
        display: flex;
        gap: 8px;
        margin-bottom: 18px;
        background: #D9D4CA;
        padding: 5px;
        width: fit-content;
        border-radius: 10px;
    }

    @media(min-width:580px) {
        .how-tabs {
            display: none;
        }
    }

    .how-slider-navigation {
        display: flex;
        justify-content: space-between;
        margin: 20px 0;
    }

    .how-tab {
        height: 32px;
        padding: 0 14px;
        border: 1px solid transparent;
        background: transparent;
        font-size: 14px;
        color: #12141791;
        font-weight: 600;
        cursor: pointer;
        transition: .2s ease;
        font-family: 'Inter', sans-serif;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .how .section-label {
        color: #0b0b0b !important;
        font-size: 15px;
        letter-spacing: 4px;
        text-transform: uppercase;
        text-align: left !important;
    }

    .how-tab img {
        width: 20px;
        height: 20px;
        object-fit: contain;
    }

    .how-tab.active {
        background: #fff;
        color: #121417;
        border-radius: 8px;
    }

    .how h2 {
        font-size: 46px;
        line-height: 1;
        margin: 0 10px 0 0;
        font-weight: 700;
        color: #111;
        font-family: var(--font-display-family), system-ui, sans-serif;
        max-width: 540px;
    }

    .how-sub {
        font-size: 18px;
        color: #7A766F;
        margin-bottom: 18px;
    }

    /* dots */
    .how-dots {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .dot {
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: #CFCAC0;
        transition: .3s ease;
    }

    .dot.active {
        width: 30px;
        background: #1F1F1F;
    }

    /* only show the 4th (mobile) dot on mobile widths, to match the JS's
     getActiveDots()/getVisibleCards() breakpoint */
    @media (min-width: 992px) {
        .dot.dot-mobile {
            display: none;
        }
    }

    /* arrows */
    .how-nav {
        display: flex;
        gap: 8px;
        align-self: flex-end;
        margin-bottom: 4px;
    }

    .how-arrow,
    .cat-arrow {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        border: none;
        background: #1D1D1D;
        color: white;
        cursor: pointer;
        transition: .2s ease;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .how-arrow:hover,
    .cat-arrow:hover {
        background: #3a3a3a;
        transform: translateY(-2px);
    }

    .how-arrow:disabled,
    .cat-arrow:disabled {
        opacity: 0.35;
        cursor: default;
        transform: none;
    }

    /* slider wrapper */
    .how-slider-wrapper {
        overflow: hidden;
        position: relative;
    }

    .how-slider {
        display: none;
    }

    .how-slider.active {
        display: block;
    }

    .how-track {
        display: flex;
        gap: 16px;
        transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        will-change: transform;
    }

    /* cards */
    .how-card {
        flex: 0 0 calc(50% - 8px);
        min-width: 0;
        border-radius: 16px;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        height: 300px;
    }

    .network-card {
        position: relative;
    }

    .slider-card-highlight {
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 5px;
        width: auto;
        height: auto;
        font-size: 14px;
        font-family: var(--font-body-1-family), sans-serif;
        padding: 6px 10px;
        background: #7acb6a;
        color: #143106;
        text-align: center;
        border-radius: 6px;
        margin: 0;
        /* display: none; */
    }

    @media(max-width:900px) {
        .how-card-content {
            padding-bottom: 25px;
        }
    }

    /* card themes */
    .dark-green {
        background: linear-gradient(160deg, #2A4A38 0%, #1a3028 100%);
    }

    .light-card {
        background: #403D37;
    }

    .network-card {
        background: linear-gradient(160deg, #2D3E30 0%, #1c2c1e 100%);
    }

    /* left image side */
    .how-card-left {
        flex: 0 0 55%;
        background-size: cover;
        background-position: center;
        border-radius: 12px 0 0 12px;
    }

    #teams-slider .how-card:nth-child(4) .how-card-left {
        background-size: cover;
        background-position: 90% 10%;
        background-repeat: no-repeat;
    }

    #experts-slider .how-card:nth-child(1) .how-card-left {
        background-size: cover;
        background-position: 50% 10%;
        background-repeat: no-repeat;
    }

    /* right text side */
    .how-card-right {
        flex: 0 0 40%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* padding: 18px 20px; */
        padding: 18px 20px 40px 20px;
        background: #35342E;
    }

    /* step number */
    .step-num {
        font-size: 40px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.9);
        line-height: 1;
        text-align: right;
        font-family: var(--font-display-family), system-ui, sans-serif;
    }

    @media (max-width:580px) {
        .step-num {
            text-align: left;
            padding-bottom: 10px;
        }
    }

    /* card text */
    .how-card-content h4 {
        color: #fff;
        font-size: 16px;
        margin: 0 0 6px;
        font-weight: 700;
        font-family: 'Inter', sans-serif;
    }

    .how-card-content p {
        color: rgba(255, 255, 255, 0.65);
        font-size: 13px;
        line-height: 1.5;
        margin: 0;
        font-weight: 400;
        font-family: 'Inter', sans-serif;
    }

    .how-footer {
        margin-top: 16px;
        border-radius: 12px;
        background: #2A2925;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 15px;
        color: rgba(255, 255, 255, 0.72);
        font-size: 12px;
        font-family: 'Inter', sans-serif;
    }

    /* mobile */
    @media (max-width: 580px) {
        .how-footer {
            flex-direction: column;
            align-items: flex-start;
            height: auto;
            padding: 15px 10px;
            gap: 10px;
        }


        .how-card-left {
            border-radius: 12px 12px 0 0;
            min-height: 160px !important;
        }

    }

    /* mobile */
    @media (max-width: 991px) {
        .how-card {
            flex: 0 0 calc(100% - 8px);
            flex-direction: column;
            height: auto;
        }

        .how-card-left {
            border-radius: 12px 12px 0 0;
            min-height: 350px;
        }

        .how-card-right {
            flex: none;
        }

        .how-top {
            flex-direction: column;
            gap: 20px;
        }

        .how h2 {
            font-size: 36px;
        }
    }

    /* ─── PRICING ─── */

    .pricing-container-fluid,
    .pricing-container {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }

    @media (max-width:580px) {

        .pricing-container-fluid,
        .pricing-container {
            width: 100%;
            padding: 0;
        }
    }

    .pricing {
        position: relative;
        width: 100%;
        background: #35342E;
        overflow: hidden;
        padding: 0;
    }

    .pricing-inner {
        position: relative;
        z-index: 3;
        width: 100%;
        max-width: 1440px;
        padding: 0 80px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        align-items: center;
        background-image: url(../../images/2.0/pricing/Group.png);
        background-repeat: no-repeat;
        background-size: 65%;
        background-position: center;
    }

    /* ═══════════════════════════════════════
           LEFT TEXT
        ═══════════════════════════════════════ */

    .section-label {
        color: #f2f0ea;
        font-size: 15px;
        letter-spacing: 4px;
        text-transform: uppercase;
        margin-bottom: 20px;
    }

    .pricing-text {
        padding: 140px 10px;
    }

    .pricing-text h2 {
        color: #f5f3ee;
        font-family: var(--font-display-family), system-ui, sans-serif;
        font-size: 64px;
        line-height: 0.95;
        font-weight: 700;
        margin: 0 0 24px;
        letter-spacing: -3px;
    }

    .pricing-desc {
        color: #F8F8EE;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.6;
        max-width: 560px;
        margin-bottom: 36px;
    }

    .fee-row {
        display: flex;
        align-items: flex-start;
        gap: 0;
        margin-bottom: 40px;
        width: 70%;
    }

    .fee-item {
        flex: 1;
        position: relative;
    }

    .fee-item+.fee-item {
        padding-left: 60px;
    }

    .fee-item:first-child::after {
        content: "";
        position: absolute;
        right: -22px;
        top: 6px;
        width: 1px;
        height: 68px;
        background: rgba(255, 255, 255, 0.18);
    }

    .fee-pct {
        color: #fff;
        font-family: var(--font-display-family), system-ui, sans-serif;
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 8px;
        line-height: 1;
    }

    .fee-lbl {
        color: #d7d4cb;
        font-size: 16px;
        line-height: 1.4;
        font-family: var(--font-body-1-family), sans-serif;
    }

    .btn-outline {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: #F8F8EE;
        color: #171717;
        padding: 7px 14px;
        border-radius: 12px;
        font-family: var(--font-body-1-family), sans-serif;
        font-size: 18px;
        font-weight: 600;
        text-decoration: none;
        transition: 0.3s ease;
    }

    .btn-outline:hover {
        transform: translateY(-2px);
    }

    /* ═══════════════════════════════════════
           RIGHT VISUAL
        ═══════════════════════════════════════ */

    .right-container {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        position: relative;
        width: 100%;
        margin-left: -120px;
        overflow: hidden;
        height: 100%;
    }

    .tab-mobile-responsive-container {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .pricing-image-wrap {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        margin-left: 50px;
    }

    img.orbital-image {
        position: absolute;
        right: 90px;
        height: 1247px;
        rotate: 3deg;
    }

    /* ═══════════════════════════════════════
           CIRCULAR ORBIT SLIDER
        ═══════════════════════════════════════ */

    .currency-orbit {
        --orbit-size: 2019px;
        --orbit-radius: 1033px;
        --item-size: 124px;
        position: absolute;
        right: 110px;
        margin-top: -25px;
        width: var(--orbit-size);
        height: var(--orbit-size);
        border-radius: 50%;
        z-index: 2;
    }

    .orbit-item {
        z-index: 2;
        position: absolute;
        top: 50%;
        left: 50%;
        width: var(--item-size);
        height: var(--item-size);
        margin-left: calc(var(--item-size) / -2);
        margin-top: calc(var(--item-size) / -2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(58, 56, 50, 0.96);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: #F4F1EA;
        font-size: 38px;
        font-weight: 700;
        backdrop-filter: blur(12px);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.03),
            0 10px 30px rgb(57 57 57 / 48%);
        transition: box-shadow 0.4s ease;
    }

    .orbit-item img {
        width: 35%;
        height: 55%;
        object-fit: contain;
    }

    /* ═══════════════════════════════════════
           MEDIA QUERIES
        ═══════════════════════════════════════ */

    /* Small (≥576px) */
    @media (min-width: 576px) {
        .container {
            max-width: 540px;
        }
    }

    /* Medium (≥768px) */
    @media (min-width: 768px) {
        .container {
            max-width: 720px;
        }
    }

    /* Large (≥992px) */
    @media (min-width: 992px) {
        .container {
            max-width: 100%;
        }
    }

    /* Extra Large (≥1200px) */
    @media (min-width: 1200px) {
        .container {
            max-width: 1140px;
        }
    }

    /* Extra Extra Large (≥1400px) */
    @media (min-width: 1400px) {
        .container {
            max-width: 1320px;
        }
    }

    @media (max-width:580px) {
        .right-container {
            margin-left: 0px !important;
        }

        .pricing-text {
            margin: 30px auto 70px auto !important;
        }
    }

    /* Tablet and below (≤1024px) */
    @media (max-width: 1024px) {
        .pricing {
            padding: 0;
        }

        .pricing-inner {
            display: flex;
            flex-direction: column-reverse;
            gap: 0;
            justify-content: flex-end;
            background-position: bottom;
            padding: 0;
        }

        .pricing-text {
            text-align: center;
            margin: 0px auto;
            z-index: 3;
            padding: 15px 10px 60px 10px;
        }

        .pricing-text h2 {
            text-align: center;
        }

        .section-label {
            /* text-align: center; */
        }

        .pricing-desc {
            text-align: center;
            margin: 0 auto 36px auto;
        }

        .fee-row {
            width: 100%;
        }

        .fee-item+.fee-item {
            padding: 0;
        }

        .tab-mobile-responsive-container {
            rotate: -90deg;
            margin: 180px 0 115px 0;
        }

        .right-container {
            overflow: unset;
            justify-content: center;
            margin-left: -10px;
        }

        .pricing-image-wrap {
            margin-left: 0;
            justify-content: center;
        }
    }

    /* Mobile (≤768px) */
    @media (max-width: 768px) {
        .pricing {
            padding: 0;
        }

        .pricing-text {
            padding: 15px 10px 40px 10px;
        }

        .pricing-inner {
            padding: 0;
            background-position: bottom;
            background-size: 105%;
        }

        .section-label {
            font-size: 15px;
        }

        .pricing-text h2 {
            font-size: 75px;
        }

        .pricing-desc {
            font-size: 16px;
        }

        .fee-row {
            gap: 26px;
        }
    }

    @media (max-width: 576px) {
        .container-fluid {
            padding: 0;
        }

        .section-label {
            font-size: 15px;
        }

        .pricing-text h2 {
            font-size: 36px;
            line-height: 1.1em;
            letter-spacing: 0.01em;
        }

        .pricing-inner {
            background-position: center;
        }
    }

    .center-heading .eyebrow,
    .center-heading .heading {
        text-align: center !important;
        max-width: 700px;
        margin: 0 auto 16px;
    }

    .security-complaiance {
        padding: 40px 32px 0px 32px;
    }

    .security-complaiance .center-heading .heading {
        font-size: 48px;
    }

    .security-complaiance .content-panel .heading {
        max-width: 500px;
        font-size: 40px;
    }

    .security-complaiance .header-panel.center-heading {
        max-width: 1440px;
        margin: auto;
    }

    .security-complaiance-inner {
        max-width: 1440px;
        margin: auto;
        display: flex;
        justify-content: center;
        padding: 80px 0px;
        align-items: flex-end;
    }

    .complaiance-icons-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 32px;
        row-gap: 16px;
        max-width: 330px;
        margin: 0 0 32px;
    }

    .compliance-item {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 16px;
        line-height: 24px;
        color: var(--color-text-muted);
        white-space: nowrap;
    }

    .compliance-item img {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        display: block;
    }

    .compliance-item span {
        display: block;
    }

    @media (min-width:786px) {
        .content-panel-mobile {
            display: none;
        }
    }

    @media (max-width:786px) {

        #stepsBlock .content-panel .eyebrow,
        #stepsBlock .content-panel .heading,
        #stepsBlock .content-panel .description {
            display: none;
        }

        .security-complaiance .center-heading .heading {
            font-size: 36px;
            padding: 20px;
            max-width: 510px;
        }

        .security-complaiance-inner {
            flex-direction: column-reverse;
            padding: 40px 0px;
        }

        .security-complaiance-imgcontainer {
            text-align: center;
            margin: auto;
        }

        .security-complaiance-inner .content-panel {
            text-align: center;
        }

        .security-complaiance-inner .content-panel .eyebrow {
            display: none;
        }

        .security-complaiance .content-panel .heading,
        .complaiance-icons-container {
            margin: auto;
        }

        .security-complaiance .content-panel .description {
            max-width: unset;
            max-width: 370px;
            text-align: center;
            margin: 17px auto 40px;
        }

        .security-complaiance .content-panel .heading {
            font-size: 28px;
            margin-top: 20px;
        }

        .faq-eyebrow {
            font-size: 15px;
        }
    }


    @media (max-width:580px) {
        .security-complaiance {
            padding: 40px 15px;
        }

        .trust-card-title {
            font-size: 28px;
        }
    }



    /* ─── CTA ─── */
    .cta-section {
        padding: 120px 48px 120px 48px;
        background: #21251f;
        text-align: center;
    }

    .cta-box {
        background: #557961;
        border-radius: 24px;
        padding: 50px 48px 100px 48px;
        max-width: 860px;
        margin: 0 auto;
        border: 1px solid #557961;
        position: relative;
        z-index: 2;
    }

    .cta-box::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url('/wp-content/themes/liceumai-theme/assets/images/CTA-bg.png') center/75% no-repeat;
    }

    .cta-box h2 {
        font-family: var(--font-display-family), system-ui, sans-serif;
        font-size: 48px;
        font-weight: 800;
        color: #fff;
        margin-bottom: 12px;
        position: relative;
        line-height: 1.1
    }

    .cta-box p {
        font-size: 18px;
        color: #fff;
        margin-bottom: 32px;
        position: relative;
        width: 50%;
        margin: 0 auto;
        font-weight: 400
    }

    @media (max-width:786px) {
        .cta-box p {
            width: 100%
        }
    }

    .cta-btns {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
        position: relative;
        margin-top: 30px
    }

    .cta-white {
        background: #fff;
        color: var(--dark);
        padding: 12px 28px;
        border-radius: 999px;
        font-size: .88rem;
        font-weight: 700;
        border: none;
        cursor: pointer;
        font-family: 'DM Sans', sans-serif;
        transition: .2s
    }

    .cta-white:hover {
        background: #f0f0f0
    }

    .cta-outline-white {
        background: transparent;
        color: #fff;
        padding: 12px 28px;
        border-radius: 999px;
        font-size: .88rem;
        font-weight: 700;
        border: 1.5px solid rgba(255, 255, 255, .25);
        cursor: pointer;
        font-family: 'DM Sans', sans-serif;
        transition: .2s
    }

    .cta-outline-white:hover {
        border-color: rgba(255, 255, 255, .5)
    }

    /* ════════════════════════════════════════
   CORNER IMAGES
════════════════════════════════════════ */

    /* common style */

    .cta-corner {
        position: absolute;
        width: 64px;
        height: auto;
        z-index: 5;
        pointer-events: none;
    }

    /* top left */

    .cta-corner-top-left {
        top: -80px;
        left: -80px;
    }

    /* top right */

    .cta-corner-top-right {
        top: -80px;
        right: -80px;
    }

    /* bottom left */

    .cta-corner-bottom-left {
        bottom: -80px;
        left: -80px;
    }

    /* bottom right */

    .cta-corner-bottom-right {
        bottom: -80px;
        right: -80px;
    }



    /* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */

    @media(max-width:767px) {

        .cta-section {
            padding: 80px 20px;
        }

        .cta-box {
            padding: 70px 24px;
            border-radius: 28px;
        }

        .cta-corner {
            width: 44px;
        }

        .cta-corner-top-left {
            top: -30px;
            left: -30px;
        }

        .cta-corner-top-right {
            top: -30px;
            right: -30px;
        }

        .cta-corner-bottom-left {
            bottom: -30px;
            left: -30px;
        }

        .cta-corner-bottom-right {
            bottom: -30px;
            right: -30px;
        }
    }

    /* ════════════════════════════════════════
   CTA BUTTON CARDS
════════════════════════════════════════ */

    .cta-btn-cards {
        display: flex;
        gap: 30px;
        justify-content: center;
        flex-wrap: wrap;
        animation: fadeUp .8s .5s ease both;
        margin-top: 30px;
        font-family: var(--font-body-1-family), sans-serif;
    }

    .cta-btn-card-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        position: relative;
    }

    /* ── Corner brackets ── */

    .cta-btn-card-wrap::before,
    .cta-btn-card-wrap::after {
        content: '';
        position: absolute;
        width: 14px;
        height: 14px;
        z-index: 2;
        pointer-events: none;
    }

    /* top-left bracket */

    .cta-btn-card-wrap::before {
        top: -8px;
        left: -8px;
        border-top: 1px solid #ffffffff;
        border-left: 1px solid #ffffffff;
        border-radius: 3px 0 0 0;
    }

    /* top-right bracket */

    .cta-btn-card-wrap::after {
        top: -8px;
        right: -8px;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        border-radius: 0 3px 0 0;
    }

    /* ─────────────────────────────
   CARD
───────────────────────────── */

    .cta-btn-card {
        background: #1c1c1c;
        border-radius: 9px;
        padding: 13px 20px 12px 20px;
        text-align: left;
        border: 1px solid #fff;
        transition: .2s ease;
        position: relative;
    }

    /* bottom-left bracket */

    .cta-btn-card::before {
        content: '';
        position: absolute;
        bottom: -8px;
        left: -8px;
        width: 14px;
        height: 14px;
        border-bottom: 1px solid #fff;
        border-left: 1px solid #fff;
        border-radius: 0 0 0 3px;
        pointer-events: none;
    }

    /* bottom-right bracket */

    .cta-btn-card::after {
        content: '';
        position: absolute;
        bottom: -8px;
        right: -8px;
        width: 14px;
        height: 14px;
        border-bottom: 1px solid #fff;
        border-right: 1px solid #fff;
        border-radius: 0 0 3px 0;
        pointer-events: none;
    }

    /* ─────────────────────────────
   HOVER
───────────────────────────── */

    .cta-btn-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 32px rgba(0, 0, 0, .25);
        border-color: #3a3a3a;
    }

    /* ─────────────────────────────
   TOP SECTION
───────────────────────────── */

    .cta-btn-top {
        display: flex;
        align-items: center;
    }

    /* ─────────────────────────────
   TITLE
───────────────────────────── */

    .cta-btn-title-link {
        text-decoration: none;
    }

    .cta-btn-title-link h4 {
        font-family: var(--font-body-1-family), sans-serif;
        font-size: .95rem;
        font-weight: 700;
        margin: 0;
        color: #ffffff;
        transition: .2s ease;
    }

    /* FIRST CARD HEADING */
    .cta-btn-card-wrap:first-child .cta-btn-title-link h4 {
        color: #000;
    }

    /* FIRST CARD ARROW */
    .cta-btn-card-wrap:first-child .cta-btn-arrow {
        color: #000;
    }

    /* ─────────────────────────────
   ARROW BUTTON
───────────────────────────── */

    .cta-btn-arrow {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        text-decoration: none;
        font-size: 18px;
        transition: .2s ease;
        flex-shrink: 0;
    }

    .cta-btn-card:hover .cta-btn-arrow {
        transform: translateX(2px);
    }

    /* ─────────────────────────────
   LABEL
───────────────────────────── */

    /*.cta-btn-label{
  font-size:15px;
  font-weight:400;
  font-family:'Inter', sans-serif;
  color:#fff;
  text-align:center;
  letter-spacing:.01em;
}*/

    .cta-btn-label {
        margin-top: 10px;
        font-size: 16px;
        font-weight: 400;
        font-family: 'Inter', sans-serif;
        color: #fff;
        text-align: center;
        letter-spacing: .02em;
    }

    /* ════════════════════════════════════════
   OPTIONAL VARIANTS
════════════════════════════════════════ */

    .cta-btn-card-green {
        background: #fff;
    }

    .cta-btn-card-warm {
        background: transparent;
    }

    /* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */

    @media(max-width:767px) {

        .cta-btn-cards {
            gap: 30px;
        }

        .cta-btn-card {
            width: 75%;
            max-width: 320px;
        }
    }

    .forexperts-marquee-banner {
        background-color: #35342E;
        color: #F8F8EE;
        font-size: 14px;
        padding: 15px 150px;
        display: flex;
        justify-content: space-between;
        letter-spacing: 0.02em;
        font-weight: 400;
    }

    @media(max-width:1024px) {
        .forexperts-marquee-banner {
            padding: 15px 25px;
        }
    }

    @media(max-width:730px) {
        .forexperts-marquee-banner {
            display: grid;
        }

        .forexperts-marquee-banner span {
            margin-top: 15px;
        }
    }


    /*--- earnings ---*/

    .earnings {
        background: #F8F8EE;
        padding: 90px 40px;
    }

    .earnings-inner {
        max-width: 1300px;
        margin: 0 auto;
    }

    .earnings .section-label {
        color: #0b0b0b !important;
        font-size: 15px;
        letter-spacing: 4px;
        text-transform: uppercase;
        margin: auto;
    }

    .earnings h2 {
        font-size: 46px;
        line-height: 1;
        margin: 10px auto;
        font-weight: 700;
        color: #111;
        font-family: var(--font-display-family), system-ui, sans-serif;
    }

    .earnings-top {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        margin-bottom: 30px;
        text-align: center;
    }

    .earnings-top-left p {
        max-width: 690px;
        color: #121417;
        opacity: 0.7;
        font-size: 18px;
    }

    .earnings-tabs {
        display: flex;
        gap: 8px;
        margin-bottom: 18px;
        background: #D9D4CA;
        padding: 5px;
        width: fit-content;
        border-radius: 10px;
    }

    .earnings-grid-experts {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding: 0 0 20px;
        gap: 16px;
        margin: 0px auto;
    }

    .earnings-card-experts {
        position: relative;
        /* cursor: pointer; */
        background: rgb(255, 255, 255);
        border-width: 1px;
        border-style: solid;
        border-color: rgb(232, 228, 220);
        border-image: none;
        border-radius: 16px;
        padding: 20px;
        transition: 0.2s;
        text-decoration: none;
    }

    .earnings-card-experts img {
        height: 25px;
        padding: 8px;
        background: #e3e3e1;
        border-radius: 5px;
    }

    .earnings-card-experts h4 {
        font-size: 24px;
        font-family: 'Stack Sans Notch';
        font-weight: 500;
        padding: 0;
        margin: 20px 0 0;
    }

    .earnings-card-experts p {
        font-size: 16px;
        color: #121417;
        line-height: 150%;
        font-family: var(--font-body-1-family), sans-serif;
        font-weight: 500;
        margin: 5px 0;
    }

    .earnings-card-experts ul {
        color: #121417;
        font-size: 15px;
        line-height: 150%;
        padding: 16px 0;
        list-style: none;
        margin: 0;
    }

    .earnings-card-experts li {
        margin-bottom: 10px;
    }

    .earnings-card-experts li::marker {
        content: "";
    }

    .earnings-card-experts li::before {
        content: "";
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-right: 10px;
        background: url('/wp-content/themes/liceumai-theme/assets/images/2.0/for-expers-sec2-bullet.svg') no-repeat center;
        background-size: contain;
        vertical-align: middle;
    }


    @media (min-width:581px) and (max-width:900px) {
        .earnings-grid-experts {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width:580px) {
        .earnings-grid-experts {
            grid-template-columns: repeat(1, 1fr);
        }

        .earnings h2 {
            font-size: 36px;
        }

        .earnings-top-left p {
            font-size: 16px;
        }
    }



    /*--- identity ---*/

    .identity {
        background: #F8F8EE;
        padding: 72px 32px;
    }

    .identity-inner {
        max-width: 1180px;
        margin: 0 auto;
    }

    .identity .section-label {
        color: #0b0b0b !important;
        font-size: 15px;
        letter-spacing: 4px;
        text-transform: uppercase;
        margin: auto;
    }

    .identity h2 {
        font-size: 46px;
        line-height: 1;
        margin: 10px auto;
        font-weight: 700;
        color: #111;
        font-family: var(--font-display-family), system-ui, sans-serif;
    }

    .identity-top {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        margin-bottom: 30px;
        text-align: center;
    }

    .identity-top-left p {
        max-width: 690px;
        color: #121417;
        opacity: 0.7;
        font-size: 18px;
    }

    .identity .trust-list-icon {
        width: 20px !important;
        height: 18px !important;
    }

    .trust-card-title {
        max-width: 90%;
    }

    @media (max-width: 580px) {
        .trust-card-title {
            max-width: 100%;
        }

        .trust-card-visual {
            min-height: 260px;
        }
    }



    /* ─── EXPERTS GRID ─── */
    .experts {
        padding: 80px 48px 40px;
        background: #F8F8EE
    }

    .experts-inner {
        max-width: 1100px;
        margin: 0 auto
    }

    .experts h2 {
        font-family: var(--font-display-family), system-ui, sans-serif;
        font-size: 48px;
        font-weight: 800;
        text-align: center;
        max-width: 500px;
        margin: auto;
        line-height: 110%;

    }

    .experts-sub {
        font-size: 18px;
        color: #121417;
        text-align: center;
        margin-bottom: 20px;
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
        font-family: var(--font-body-1-family), sans-serif;
        font-weight: 500
    }

    .experts-explore {
        display: flex;
        justify-content: center;
        margin-bottom: 44px
    }

    .experts-explore .btn-dark {
        background: #2A2925;
        color: rgba(255, 255, 255, 0.9);
        font-size: 16px;
        font-weight: 600;
        padding: 12px 24px;
        border-radius: 10px;
        border: none;
        cursor: pointer;
        transition: .2s ease;
        font-family: var(--font-body-1-family), sans-serif;
        text-decoration: none;
    }

    .experts-explore .btn-dark:hover {
        background: #3a3733;
        transform: translateY(-2px);
    }

    /* ─── CATEGORY GRID ─── */

    /* ─── CATEGORY GRID ─── */

    .cat-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        max-width: 1180px;
        margin: 0 auto;
    }

    .cat-card {
        background: #fff;
        border: 1px solid #E8E4DC;
        border-radius: 16px;
        padding: 20px;
        position: relative;
        cursor: pointer;
        transition: .2s ease;
        text-decoration: none;
    }

    /* @media (max-width:580px) {
          .cat-card {
              min-width: 275px;
          }
      }*/

    @media (max-width: 540px) {
        .cat-grid {
            grid-template-columns: 1fr !important;
        }
    }

    .cat-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
    }

    .cat-card .cat-icon img {
        transition: transform 0.35s ease;
    }

    .cat-card:hover .cat-icon img {
        transform: scale(1.08) rotate(-3deg);
    }

    /* redirect arrow top right */
    .cat-card::after {
        content: '';
        position: absolute;
        top: 16px;
        right: 16px;
        width: 16px;
        height: 16px;
        background-image: url('/wp-content/themes/liceumai-theme/assets/images/redirectarrow.svg');
        background-size: contain;
        background-repeat: no-repeat;
    }

    /* icon */
    .cat-icon {
        width: 44px;
        height: 44px;
        background: #F0EDE7;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 32px;
    }

    .cat-icon img {
        width: 44px;
        height: 44px;
        object-fit: contain;
    }

    /* heading */
    .cat-card h4 {
        font-size: 16px;
        font-family: var(--font-body-1-family), sans-serif;
        font-weight: 700;
        color: #111;
        margin: 0 0 6px;
    }

    /* description */
    .cat-card p {
        font-size: 16px;
        font-family: var(--font-body-1-family), sans-serif;
        color: #121417;
        line-height: 1.5;
        margin: 0;
    }

    /* responsive */
    @media (max-width: 991px) and (min-width: 768px) {
        .cat-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 540px) {
        .cat-grid {
            grid-template-columns: 1fr;
        }
    }

    /* ─── MOBILE SLIDER (Experts Grid) ─── */
    @media (max-width: 767px) {

        .cat-grid {
            display: flex;
            grid-template-columns: unset;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            gap: 14px;
            padding: 4px 14px 20px;
            /* margin: 0 -14px; */
            margin: 0;
            scrollbar-width: none;
            /* Firefox */
        }

        .cat-grid::-webkit-scrollbar {
            display: none;
            /* Chrome/Safari */
        }

        .cat-card {
            flex: 0 0 78%;
            scroll-snap-align: start;
            min-width: 260px;
        }
    }

    /* ─── HEADER ROW (holds arrows next to heading) ─── */
    .experts-header-row {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 20px;
        max-width: 1180px;
        margin: 0 auto;
    }

    .cat-nav {
        display: none;
        /* hidden on desktop, shown only in slider mode */
        gap: 10px;
        flex-shrink: 0;
        margin: 20px 0 35px 0;
    }

    /* .cat-arrow {
          width: 40px;
          height: 40px;
          border-radius: 10%;
          border: 1px solid #E8E4DC;
          background: #fff;
          font-size: 16px;
          color: #111;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: .2s ease;
      }

      .cat-arrow:hover {
          background: #111;
          color: #fff;
          border-color: #111;
      }

      .cat-arrow:disabled {
          opacity: .35;
          cursor: default;
          pointer-events: none;
      } */

    /* ─── DOTS ─── */
    .cat-dots {
        display: none;
        /* shown only in slider mode */
        justify-content: center;
        gap: 8px;
        margin-top: 18px;
    }

    .cat-dots .dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #E0DCD3;
        cursor: pointer;
        transition: background .2s ease, transform .2s ease;
    }

    .cat-dots .dot.active {
        background: #111;
        transform: scale(1.25);
    }

    /* ─── MOBILE SLIDER (Experts Grid) ─── */
    @media (max-width: 767px) {

        .cat-nav,
        .cat-dots {
            display: flex;
            justify-content: center;
        }
    }

    @media (max-width: 767px) {
        .cat-grid.dragging {
            cursor: grabbing;
            user-select: none;
        }

        .cat-grid.dragging .cat-card {
            pointer-events: none;
            /* prevents accidental link click mid-drag */
        }

        .cat-card {
            cursor: grab;
        }
    }

    /* ─── TESTIMONIALS ─── */
    .testi {
        padding: 90px 0;
        background: #F8F8EE
    }

    .testi-inner {
        /* max-width: 1100px; */
        margin: 0 auto
    }

    .testi h2 {
        font-family: var(--font-display-family), sans-serif;
        font-size: 48px;
        font-weight: 800;
        text-align: center;
        margin: 0 auto 60px;
        max-width: 570px;
        line-height: 110%;
    }

    /* slider wrapper */
    /* nav arrows */
    .testi-nav {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        padding: 0 48px;
        margin-bottom: 24px;
    }

    .testi-arrow {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        border: none;
        background: #1D1D1D;
        color: white;
        cursor: pointer;
        transition: .2s ease;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        display: none;
    }

    .testi-arrow:hover {
        background: #3a3a3a;
        transform: translateY(-2px);
    }

    /* slider */
    .testi-slider-wrapper {
        overflow: hidden;
        padding: 16px 48px 32px;
        cursor: grab;
        /* mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
          -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%); */
    }

    .testi-slider-wrapper:active {
        cursor: grabbing;
    }

    .testi-track {
        display: flex;
        gap: 20px;
        width: max-content;
    }

    /* card */
    .testi-card {
        flex: 0 0 360px;
        /* background: #fff; */
        background: #f8f8ee;
        border-radius: 16px;
        border: 1px solid #E2DED6;
        padding: 28px;
        padding-bottom: 0;
        /* remove bottom padding so outcome sits flush */
        display: flex;
        flex-direction: column;
        gap: 16px;
        overflow: hidden;
        /* keeps outcome inside card radius */
        transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
        opacity: 0.75;
        transform: scale(0.97);
    }

    .testi-card:hover {
        transform: scale(1) translateY(-4px);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
        opacity: 1;
    }

    .testi-card {
        opacity: 1;
        transform: scale(1);
    }

    .testi-top {
        display: flex;
        flex-direction: column;
        gap: 6px;

    }

    .testi-score {
        font-size: 32px;
        font-weight: 800;
        color: #111;
        font-family: var(--font-display-family), sans-serif;
        line-height: 1;
    }

    .testi-stars {
        color: #F5A623;
        font-size: 25px;
        letter-spacing: 2px;
    }

    .testi-text {
        font-size: 20px;
        font-family: var(--font-body-1-family), sans-serif;
        color: #333;
        line-height: 1.7;
        margin: 0;
        flex: 1;
    }

    .testi-author {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        flex-wrap: wrap;
    }

    .testi-name {
        font-size: 16px;
        font-weight: 600;
        color: #35342E;
        font-family: var(--font-body-1-family), sans-serif;
    }

    .testi-sep {
        color: #CCC;
        font-size: 13px;
    }

    .testi-role {
        font-size: 13px;
        color: #7A766F;
    }

    .testi-outcome {
        background: #7acb69;
        border-top: 1px solid #B8DC7A;
        border-radius: 0;
        padding: 12px 28px;
        margin: 0 -28px;
        font-size: 16px;
        font-family: var(--font-body-1-family), sans-serif;
        color: #2f8801;
        line-height: 1.5;
    }

    .outcome-label {
        font-weight: 700;

        color: #3A5200;
        font-family: var(--font-body-1-family), sans-serif;
    }

    @media (max-width: 768px) {
        .testi-card {
            flex: 0 0 280px;
        }

        .testi-slider-wrapper {
            padding: 16px 20px 32px;
        }

        .testi-nav {
            padding: 0 20px;
        }
    }

    .testi .section-label {
        color: #0b0b0b !important;
        margin-bottom: 10px !important;
    }

    .faq-title {
        max-width: 600px !important;
    }

    section.payment-protection {
        background: #35342e;
    }

    .payment-inner {
        max-width: 1200px;
        display: flex;
        justify-content: space-between;
        margin: auto;
        padding: 140px 40px;
    }

    .payment-protection h2 {
        margin: 0 0 16px;
        font-family: var(--font-display-family), system-ui, sans-serif;
        font-weight: 500;
        font-size: 64px;
        line-height: 110%;
        letter-spacing: -0.01em;
        color: white;
        max-width: 530px;
    }

    .payment-protection p {
        color: #F8F8EE;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.6;
        max-width: 560px;
        margin-bottom: 36px;
    }

    .payment-protection ul {
        color: #F8F8EE;
        font-size: 15px;
        line-height: 150%;
        padding: 16px 0;
        list-style: none;
        margin: 0;
        max-width: 450px;
        margin-left: 30px;
        font-weight: 400;
    }

    .payment-protection li {
        margin-bottom: 10px;
    }

    .payment-protection li::marker {
        content: "";
    }

    .payment-protection li::before {
        content: "";
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-right: 10px;
        background: url('/wp-content/themes/liceumai-theme/assets/images/2.0/payment-checklist.png') no-repeat center;
        background-size: contain;
        vertical-align: middle;
        margin-left: -30px;
    }

    .payment-right div {
        width: 100%;
        text-align: center;
    }

    .pay-lft-1 {
        width: 100%;
        max-width: 350px;
    }

    .pay-lft-2 {
        width: 100%;
        max-width: 275px;
        margin: 30px 0;
    }

    section.payment-protection {
        background: url(/wp-content/themes/liceumai-theme/assets/images/2.0/pricing/Group.png) no-repeat #35342e;
        background-size: contain;
        background-position: 80% 0px;
    }

    @media (max-width:1024px) {
        section.payment-protection {
            background: url(/wp-content/themes/liceumai-theme/assets/images/2.0/pricing/Group.png) no-repeat #35342e;
            background-size: 100%;
            background-position: left;
        }
    }

    @media (max-width:768px) {
        .payment-inner {
            flex-direction: column;
            gap: 40px;
            padding: 65px 26px;
        }

        .payment-protection h2 {
            font-size: 36px;
        }

        .payment-protection p {
            margin-bottom: 10px;
        }
    }

    @media (max-width: 580px) {
        .payment-protection h2 {
            max-width: 90%;
        }
    }

    @media (max-width:580px) {
        section.payment-protection {
            background: url(/wp-content/themes/liceumai-theme/assets/images/2.0/pricing/Group.png) no-repeat #35342e;
            background-size: 190%;
            background-position: bottom;
        }

        .description {
            font-size: 16px;
        }

        .hv2-headline {
            font-size: 36px;
        }

        .steps-block .content-panel .eyebrow,
        .steps-block .content-panel .heading,
        .steps-block .content-panel .description {
            display: none;
        }

    }

    @media (min-width:581px) {
        .content-panel-mobile {
            display: none;
        }
    }


    @media (max-width: 580px) {
        .platform .sec-switch-2 .steps-block-inner {
            flex-direction: column-reverse;
        }
    }

    @media (min-width:769px) and (max-width: 1024px) {
        .assessment-card {
            padding: 60px 0;
        }
    }

    .visual-panel,
    .content-panel {
        position: relative;
    }


    .steps-block .why-choose-liceum-upper-left,
    .steps-block .why-choose-liceum-upper-right,
    .steps-block .why-choose-liceum-lower-left,
    .steps-block .why-choose-liceum-lower-right {
        position: absolute;
        width: 8px;
        height: 8px;
    }

    .visual-panel .why-choose-liceum-upper-left,
    .content-panel .why-choose-liceum-upper-left {
        top: -10px;
        left: -10px;
        border-top: 2px solid rgb(18 20 23 / 36%);
        border-left: 2px solid rgb(18 20 23 / 36%);
    }

    .visual-panel .why-choose-liceum-upper-right,
    .content-panel .why-choose-liceum-upper-right {
        top: -10px;
        right: -10px;
        border-top: 2px solid rgb(18 20 23 / 36%);
        border-right: 2px solid rgb(18 20 23 / 36%);
    }

    .visual-panel .why-choose-liceum-lower-left,
    .content-panel .why-choose-liceum-lower-left {
        bottom: -10px;
        left: -10px;
        border-bottom: 2px solid rgb(18 20 23 / 36%);
        border-left: 2px solid rgb(18 20 23 / 36%);
    }

    .visual-panel .why-choose-liceum-lower-right,
    .content-panel .why-choose-liceum-lower-right {
        bottom: -10px;
        right: -10px;
        border-bottom: 2px solid rgb(18 20 23 / 36%);
        border-right: 2px solid rgb(18 20 23 / 36%);
    }

    @media (max-width: 600px) {
        .cta-corner {
            display: none;
        }
    }

    .sec-switch-2 .description {
    margin: 0 0 19px !important;
    }

    @media (min-width: 769px) and (max-width: 1024px) {
    .sec-switch-2 .assessment-card {
        padding: 46px 0 !important;
    }
}