/* FAQ page-only styles; site.css owns shared layout, cards and entrance. */
/* FAQ page-only CSS. Shared layout, headings, section padding and entrance: site.css */
#faq-overview .faq-layout {
    grid-template-columns: minmax(0, 1fr);
}

#faq-overview .page-section-eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--site-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    line-height: 1.3;
}

#faq-overview .page-section-description {
    max-width: 900px;
    margin: 0;
    color: var(--site-text);
    font-size: 16px;
    line-height: 1.78;
}

#faq-overview .faq-intro__lead {
    max-width: 900px;
    margin: 0 0 17px;
    color: var(--site-text);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.65;
}

#faq-overview .page-description {
    max-width: 900px;
}

@media (max-width:480px) {
    #faq-overview .faq-intro__lead {
        font-size: 17px;
    }
}

#faq-overview a {
    color: var(--site-primary-dark);
}

#faq-overview p:last-child {
    margin-bottom: 0;
}

.faq-intro__actions {
    margin-top: 24px;
}

.faq-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 11px 20px;
    border: 1px solid var(--site-primary);
    border-radius: 9px;
    background: linear-gradient(135deg, #159fca, #087aa1);
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(21,159,202,.16);
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}

    .faq-button:hover {
        background: linear-gradient(135deg, #087aa1, #159fca);
        color: #fff !important;
        transform: translateY(-2px);
        box-shadow: 0 12px 26px rgba(21,159,202,.20);
    }

.faq-block--soft {
    background: linear-gradient(135deg, #f7fbfc 0%, #ffffff 80%);
}

.faq-block__header {
    margin-bottom: 24px;
}

.faq-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.faq-category-card {
    position: relative;
    display: flex;
    min-height: 92px;
    align-items: center;
    gap: 14px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid var(--site-border);
    border-radius: 16px;
    background: rgba(255,255,255,.90);
    color: var(--site-heading) !important;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(38,54,58,.04);
    transition: transform .48s var(--site-ease), box-shadow .48s var(--site-ease), border-color .40s ease;
}

    .faq-category-card::after {
        content: "";
        position: absolute;
        width: 86px;
        height: 86px;
        right: -52px;
        bottom: -54px;
        border-radius: 50%;
        background: rgba(34,201,223,.08);
        transition: transform .45s var(--site-ease);
    }

    .faq-category-card:hover {
        transform: translateY(-5px);
        border-color: #bfdde4;
        box-shadow: 0 14px 32px rgba(38,54,58,.08);
    }

        .faq-category-card:hover::after {
            transform: scale(1.25);
        }

    .faq-category-card > span {
        display: grid;
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        place-items: center;
        border-radius: 10px;
        background: linear-gradient(135deg, #087aa1, #22c9df);
        color: #fff;
        font-size: 12px;
        font-weight: 850;
        box-shadow: 0 8px 18px rgba(21,159,202,.20);
    }

    .faq-category-card strong {
        position: relative;
        z-index: 1;
        font-size: 15px;
        line-height: 1.45;
    }

.faq-accordion {
    display: grid;
    gap: 10px;
}

.faq-item {
    overflow: hidden;
    border: 1px solid var(--site-border) !important;
    border-radius: 12px !important;
    background: #fff;
    box-shadow: 0 6px 20px rgba(38,54,58,.025);
    transition: transform .35s var(--site-ease), border-color .25s ease, box-shadow .25s ease;
}

    .faq-item:hover {
        border-color: #bfdde3 !important;
        box-shadow: 0 8px 24px rgba(21,159,202,.08);
    }

    .faq-item .accordion-header {
        margin: 0;
    }

    .faq-item .accordion-button {
        padding: 18px 20px;
        color: var(--site-heading);
        background: #fff;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.45;
        box-shadow: none;
        transition: color .25s ease, background-color .25s ease;
    }

        .faq-item .accordion-button:hover {
            color: var(--site-primary-dark);
            background: #fbfeff;
        }

        .faq-item .accordion-button:not(.collapsed) {
            color: var(--site-primary-dark);
            background: #eefafd;
            box-shadow: none;
        }

        .faq-item .accordion-button:focus {
            border-color: transparent;
            box-shadow: none;
        }

        .faq-item .accordion-button::after {
            width: 1rem;
            height: 1rem;
            background-size: 1rem;
        }

    .faq-item .accordion-body {
        padding: 4px 20px 20px;
        color: var(--site-text);
        font-size: 15px;
        line-height: 1.78;
    }

        .faq-item .accordion-body p {
            margin: 0 0 12px;
        }

        .faq-item .accordion-body strong {
            color: var(--site-heading);
        }

        .faq-item .accordion-body a {
            font-weight: 700;
            text-decoration-thickness: 1px;
            text-underline-offset: 3px;
        }

.faq-list-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 4px 0 6px;
}

    .faq-list-grid > span {
        position: relative;
        padding: 11px 13px 11px 38px;
        border: 1px solid #dce7ea;
        border-radius: 10px;
        background: #f7fbfc;
        color: #4b5d63;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.45;
        transition: transform .25s var(--site-ease), border-color .25s ease, background-color .25s ease;
    }

        .faq-list-grid > span::before {
            content: "✓";
            position: absolute;
            top: 50%;
            left: 12px;
            display: grid;
            width: 18px;
            height: 18px;
            place-items: center;
            transform: translateY(-50%);
            border-radius: 50%;
            background: linear-gradient(135deg, #087aa1, #22c9df);
            color: #fff;
            font-size: 10px;
            font-weight: 850;
        }

        .faq-list-grid > span:hover {
            transform: translateY(-2px);
            border-color: #b9dfe5;
            background: #f1fbfd;
        }

.faq-answer-note {
    margin-top: 14px !important;
    padding: 12px 14px;
    border-left: 3px solid var(--site-accent);
    border-radius: 0 9px 9px 0;
    background: #eefafd;
    color: var(--site-primary-dark);
    font-size: 14px;
}

#faq-about {
    background: #fff;
}

#faq-services {
    background: linear-gradient(135deg, #f7fbfc 0%, #ffffff 80%);
}

#faq-existing {
    background: #fff;
}

#faq-process {
    background: linear-gradient(135deg, #f2faf7 0%, #ffffff 82%);
}

    #faq-process::before {
        background: #2e8b70;
    }

    #faq-process .page-section-title::after {
        background: #2e8b70;
    }

#faq-deployment {
    background: linear-gradient(135deg, #f6f6fb 0%, #ffffff 82%);
}

    #faq-deployment::before {
        background: #6d68a7;
    }

    #faq-deployment .page-section-title::after {
        background: #6d68a7;
    }

#faq-pricing {
    background: linear-gradient(135deg, #eaf8fc 0%, #f7fbfc 100%);
}

    #faq-pricing::before {
        background: var(--site-accent);
    }

#faq-contact.faq-cta {
    position: relative;
    overflow: hidden;
    padding-top: 46px;
    padding-bottom: 46px;
    background: radial-gradient(circle at 92% 15%, rgba(34,201,223,.24), transparent 25%), linear-gradient(135deg, #eaf9fc 0%, #f8fcfd 100%);
}

    #faq-contact.faq-cta::after {
        content: "";
        position: absolute;
        width: 230px;
        height: 230px;
        right: -95px;
        bottom: -125px;
        border: 1px solid rgba(21,159,202,.18);
        border-radius: 50%;
        box-shadow: 0 0 0 28px rgba(21,159,202,.035), 0 0 0 56px rgba(21,159,202,.025);
        pointer-events: none;
        transition: transform .55s var(--site-ease);
    }

    #faq-contact.faq-cta:hover::after {
        transform: scale(1.12);
    }

.faq-cta__content {
    position: relative;
    z-index: 1;
    max-width: 900px;
}

    .faq-cta__content p {
        margin: 0 0 20px;
        color: var(--site-text);
        font-size: 15px;
        line-height: 1.78;
    }

#faq-overview.animation-ready .faq-category-card,
#faq-overview.animation-ready .faq-item,
#faq-overview.animation-ready .faq-cta__content {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s var(--site-ease) var(--faq-delay, 0ms), transform .55s var(--site-ease) var(--faq-delay, 0ms), box-shadow .30s ease, border-color .30s ease;
}

    #faq-overview.animation-ready .faq-category-card.is-visible,
    #faq-overview.animation-ready .faq-item.is-visible,
    #faq-overview.animation-ready .faq-cta__content.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

@media (hover: hover) and (pointer: fine) {
    #faq-overview.animation-ready .faq-category-card.is-visible:hover {
        transform: translateY(-5px);
    }

    #faq-overview.animation-ready .faq-item.is-visible:hover {
        transform: translateY(-2px);
    }
}

@media (max-width: 960px) {
    .faq-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .faq-category-grid,
    .faq-list-grid {
        grid-template-columns: 1fr;
    }

        .faq-main,
        .faq-category-card,
        .faq-item,
        .faq-list-grid > span,
        .faq-cta__content {
            min-width: 0;
            max-width: 100%;
        }

            .faq-intro__lead,
            .page-description,
            .page-section-title,
            .page-section-description,
            .faq-category-card strong,
            .faq-item .accordion-button,
            .faq-item .accordion-body,
            .faq-list-grid > span,
            .faq-cta__content p {
                overflow-wrap: anywhere;
            }

            .faq-item .accordion-button {
                padding: 16px;
                font-size: 15px;
            }

            .faq-item .accordion-body {
                padding: 3px 16px 17px;
            }
}

@media (max-width: 480px) {
    .faq-intro__lead {
        font-size: 17px;
    }

    .page-description {
        font-size: 16px;
        line-height: 1.75;
    }

    .faq-category-card {
        min-height: 78px;
        padding: 15px;
    }

    .faq-item .accordion-button {
        padding: 15px 14px;
        font-size: 14px;
    }

    .faq-item .accordion-body {
        padding: 2px 14px 16px;
        font-size: 16px;
    }

    .faq-intro__actions .faq-button,
    .faq-cta__content .faq-button {
        width: 100%;
    }

    #faq-contact.faq-cta {
        padding-top: 36px;
        padding-bottom: 36px;
    }
}





@media (prefers-reduced-motion: reduce) {
    #faq-overview *,
    #faq-overview *::before,
    #faq-overview *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    #faq-overview.animation-ready .faq-category-card,
    #faq-overview.animation-ready .faq-item,
    #faq-overview.animation-ready .faq-cta__content {
        opacity: 1 !important;
        transform: none !important;
        transition-delay: 0ms !important;
    }
}

@media (prefers-reduced-motion: no-preference) {
    #faq-overview .page-title {
        animation: sitePageEnter .75s var(--site-ease) both;
    }
}