/* Trust & authority components: facts bar, fact cards, verification box, FAQ, notes. */

.trust-bar {
    background-color: var(--color-secondary);
    color: #fff;
    padding: 24px 0;
}

    .trust-bar .trust-item {
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .trust-bar .trust-item i {
            font-size: 1.8rem;
            color: var(--color-primary);
            flex-shrink: 0;
        }

        .trust-bar .trust-item strong {
            display: block;
            font-family: var(--font-primary);
            font-size: 1rem;
        }

        .trust-bar .trust-item span {
            font-size: .85rem;
            color: rgba(255, 255, 255, .75);
        }

.fact-card {
    background: #fff;
    border: 1px solid #e4e9ef;
    border-radius: 10px;
    padding: 24px;
    height: 100%;
    box-shadow: 0 4px 16px rgba(27, 47, 69, .06);
}

    .fact-card h3 {
        font-size: 1.15rem;
        font-weight: 700;
        margin-bottom: 16px;
        color: var(--color-secondary);
    }

    .fact-card dl {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 8px 16px;
        margin: 0;
    }

    .fact-card dt {
        font-weight: 600;
        color: #5b6b7c;
    }

    .fact-card dd {
        margin: 0;
    }

    .fact-card ul {
        padding-left: 0;
        list-style: none;
        margin: 0;
    }

        .fact-card ul li {
            padding: 6px 0 6px 28px;
            position: relative;
        }

            .fact-card ul li i {
                position: absolute;
                left: 0;
                top: 6px;
                color: #15a04a;
            }

.verify-box {
    background: linear-gradient(135deg, #094082, var(--color-secondary));
    color: #fff;
    border-radius: 12px;
    padding: 32px;
}

    .verify-box h2, .verify-box h3 {
        color: #fff;
    }

    .verify-box .form-control {
        border-radius: 30px 0 0 30px;
    }

    .verify-box .btn {
        border-radius: 0 30px 30px 0;
    }

.trust-note {
    border-left: 4px solid var(--color-primary);
    background: #f4f9fd;
    padding: 12px 16px;
    border-radius: 0 8px 8px 0;
    font-size: .9rem;
    color: #3d4b59;
}

.faq-list .accordion-button {
    font-weight: 600;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.footer-independence {
    font-size: .8rem;
    color: rgba(255, 255, 255, .6);
    max-width: 900px;
    margin: 12px auto 0;
}

.last-reviewed {
    font-size: .85rem;
    color: #6c7a89;
}

/* ---------- Page banners: titles and breadcrumbs always white on the dark image ---------- */
.breadcrumbs h1, .breadcrumbs h2, .breadcrumbs ol, .breadcrumbs ol li, .breadcrumbs ol a {
    color: #fff;
}

    .breadcrumbs ol a:hover {
        color: var(--color-primary);
    }

    .breadcrumbs h1 {
        text-align: center;
        text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
    }

@media (max-width: 768px) {
    .breadcrumbs h1, .breadcrumbs h2 {
        font-size: 34px;
    }
}

/* ---------- Home hero ---------- */
.hero.hero-modern {
    min-height: 0;
    padding: 150px 0 90px;
}

    .hero.hero-modern:after {
        display: none;
    }

    .hero.hero-modern:before {
        background: linear-gradient(90deg, rgba(27, 47, 69, .96) 0%, rgba(27, 47, 69, .88) 45%, rgba(27, 47, 69, .55) 100%);
    }

.hero-eyebrow {
    color: var(--color-primary);
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    font-size: .85rem;
    margin-bottom: 12px;
}

.hero-title {
    color: #fff;
    font-weight: 700;
    font-size: clamp(1.9rem, 3.2vw, 3rem);
    line-height: 1.15;
    margin-bottom: 20px;
}

.hero-lead {
    color: rgba(255, 255, 255, .88);
    font-size: 1.15rem;
    max-width: 640px;
}

.hero-checks {
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    color: rgba(255, 255, 255, .85);
}

    .hero-checks i {
        color: #15a04a;
        margin-right: 6px;
    }

.cert-picker {
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}

    .cert-picker h2 {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--color-secondary);
        margin-bottom: 8px;
    }

.cert-picker-level {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #8a97a5;
    margin: 14px 0 6px;
}

.cert-picker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--color-default);
    border: 1px solid #edf1f5;
    margin-bottom: 8px;
}

    .cert-picker-item:hover {
        border-color: var(--color-primary);
        background: #f4f9fd;
        color: var(--color-default);
    }

    .cert-picker-item .cert-code {
        background: var(--color-secondary);
        color: #fff;
        font-weight: 700;
        font-size: .8rem;
        border-radius: 6px;
        padding: 4px 8px;
        min-width: 52px;
        text-align: center;
    }

    .cert-picker-item .cert-name {
        flex: 1;
        font-weight: 600;
        font-size: .95rem;
    }

    .cert-picker-item .cert-price {
        text-align: right;
        font-size: .9rem;
        line-height: 1.3;
    }

        .cert-picker-item .cert-price small[style*="color:red"] {
            display: none;
        }

.cert-picker-more {
    display: inline-block;
    margin-top: 8px;
    font-weight: 600;
}

.notice-bar {
    background: #ffb703;
    color: #1b2f45;
    padding: 12px 0;
    font-size: .95rem;
}

/* ---------- Home: roles ---------- */
.role-card {
    display: flex;
    flex-direction: column;
}

.role-badges {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

    .role-badges a {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--color-secondary);
        font-weight: 700;
    }

    .role-badges img {
        width: 64px;
        height: 64px;
        object-fit: contain;
    }

    .role-badges small {
        display: block;
        font-weight: 400;
        color: #6c7a89;
        font-size: .8rem;
    }

.role-arrow {
    color: #8a97a5;
    font-size: 1.2rem;
}

.expert-banner {
    display: flex;
    align-items: center;
    gap: 24px;
    background: linear-gradient(135deg, #094082, var(--color-secondary));
    color: #fff;
    border-radius: 12px;
    padding: 24px 32px;
}

    .expert-banner h3 {
        color: #fff;
        font-size: 1.25rem;
        font-weight: 700;
    }

    .expert-banner img {
        width: 90px;
        height: 90px;
        object-fit: contain;
        flex-shrink: 0;
    }

    .expert-banner .btn {
        flex-shrink: 0;
    }

@media (max-width: 768px) {
    .expert-banner {
        flex-direction: column;
        text-align: center;
    }
}

a.fact-card:hover {
    border-color: var(--color-primary);
}