/* ============================================================
   XGLOBAL KNOWLEDGE INTELLIGENCE ENGINE™
   PREMIUM KNOWLEDGE BASE EXPERIENCE
   Enterprise SaaS / AI Knowledge Interface
   Fully Fluid Responsive System
   Desktop • Laptop • Tablet • Foldable • Mobile
============================================================ */


/* ============================================================
   DESIGN TOKENS
============================================================ */

:root {

    /* --------------------------------------------------------
       BRAND
    -------------------------------------------------------- */

    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #60a5fa;

    --accent: #06b6d4;
    --accent-soft: #67e8f9;

    --purple: #7c3aed;


    /* --------------------------------------------------------
       DARK / TEXT
    -------------------------------------------------------- */

    --dark: #0f172a;
    --dark-soft: #1e293b;

    --text: #475569;
    --text-light: #64748b;
    --text-muted: #94a3b8;


    /* --------------------------------------------------------
       SURFACES
    -------------------------------------------------------- */

    --background: #f8fafc;
    --white: #ffffff;

    --glass:
        rgba(255, 255, 255, .90);

    --glass-strong:
        rgba(255, 255, 255, .97);


    /* --------------------------------------------------------
       BORDERS
    -------------------------------------------------------- */

    --border:
        rgba(15, 23, 42, .075);

    --border-strong:
        rgba(37, 99, 235, .18);


    /* --------------------------------------------------------
       RADIUS
    -------------------------------------------------------- */

    --radius-sm:
        clamp(12px, 1vw, 16px);

    --radius-md:
        clamp(16px, 1.3vw, 20px);

    --radius-lg:
        clamp(20px, 1.8vw, 26px);

    --radius-xl:
        clamp(22px, 2vw, 30px);


    /* --------------------------------------------------------
       SHADOWS
    -------------------------------------------------------- */

    --shadow:
        0 12px 35px
        rgba(15, 23, 42, .055);

    --shadow-hover:
        0 24px 65px
        rgba(15, 23, 42, .115);

    --shadow-search:
        0 18px 55px
        rgba(37, 99, 235, .10);


    /* --------------------------------------------------------
       TRANSITION
    -------------------------------------------------------- */

    --transition:
        .32s cubic-bezier(.2, .8, .2, 1);

}


/* ============================================================
   RESET
============================================================ */

*,
*::before,
*::after {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    width: 100%;

    min-width: 0;

    overflow-x: hidden;

    scroll-behavior: smooth;

}


body {

    width: 100%;

    min-width: 0;

    min-height: 100vh;

    overflow-x: hidden;

    font-family:
        "Inter",
        "Segoe UI",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;

    color:
        var(--dark);

    background:

        radial-gradient(
            circle at 0% 0%,
            rgba(37, 99, 235, .075),
            transparent 30%
        ),

        radial-gradient(
            circle at 100% 35%,
            rgba(6, 182, 212, .055),
            transparent 30%
        ),

        linear-gradient(
            180deg,
            #f8fafc 0%,
            #f1f5f9 100%
        );

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

    text-rendering:
        optimizeLegibility;

}


/* ============================================================
   DIGITAL BACKGROUND GRID
============================================================ */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    background-image:

        linear-gradient(
            rgba(37, 99, 235, .022) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(37, 99, 235, .022) 1px,
            transparent 1px
        );

    background-size:
        clamp(48px, 4vw, 72px)
        clamp(48px, 4vw, 72px);

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.8),
            transparent 72%
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.8),
            transparent 72%
        );

    animation:
        xgKnowledgeGridMove 45s linear infinite;

}


@keyframes xgKnowledgeGridMove {

    from {
        transform:
            translate3d(0, 0, 0);
    }

    to {
        transform:
            translate3d(0, 72px, 0);
    }

}


/* ============================================================
   KNOWLEDGE BASE SECTION
============================================================ */

.faq-section {

    position: relative;

    width: 100%;

    min-width: 0;

    padding:

        clamp(
            64px,
            8vw,
            130px
        )

        clamp(
            12px,
            4vw,
            60px
        )

        clamp(
            75px,
            9vw,
            145px
        );

    isolation:
        isolate;

}


/* ============================================================
   CONTAINER
============================================================ */

.faq-container {

    width: 100%;

    max-width:
        1720px;

    margin:
        0 auto;

    min-width:
        0;

}


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

.faq-header {

    width: 100%;

    max-width:
        1000px;

    margin:

        0 auto

        clamp(
            42px,
            5.5vw,
            72px
        );

    text-align:
        center;

}


/* ============================================================
   KNOWLEDGE BADGE
============================================================ */

.faq-badge {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        clamp(7px, .8vw, 10px);

    max-width:
        100%;

    padding:

        clamp(
            8px,
            .8vw,
            11px
        )

        clamp(
            13px,
            1.4vw,
            20px
        );

    border:
        1px solid
        rgba(37, 99, 235, .13);

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, .78);

    color:
        var(--primary);

    font-size:
        clamp(
            .64rem,
            .7vw,
            .80rem
        );

    font-weight:
        800;

    letter-spacing:
        .055em;

    line-height:
        1.3;

    text-transform:
        uppercase;

    white-space:
        normal;

    text-align:
        center;

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        0 8px 28px
        rgba(15, 23, 42, .045);

}


/* ============================================================
   HEADER TITLE
============================================================ */

.faq-header h2 {

    width:
        100%;

    max-width:
        980px;

    margin:

        clamp(
            18px,
            2.5vw,
            30px
        )

        auto

        0;

    font-size:
        clamp(
            2.15rem,
            5.5vw,
            5.2rem
        );

    line-height:
        1.02;

    font-weight:
        900;

    letter-spacing:
        clamp(
            -.045em,
            -.06vw,
            -.06em
        );

    text-wrap:
        balance;

    overflow-wrap:
        break-word;

    color:
        var(--dark);

    background:

        linear-gradient(
            120deg,
            #0f172a 8%,
            #1d4ed8 55%,
            #0891b2 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

}


/* ============================================================
   HEADER DESCRIPTION
============================================================ */

.faq-header p {

    width:
        100%;

    max-width:
        780px;

    margin:

        clamp(
            18px,
            2.5vw,
            28px
        )

        auto

        0;

    color:
        var(--text);

    font-size:
        clamp(
            .88rem,
            1.25vw,
            1.14rem
        );

    line-height:
        1.8;

    text-wrap:
        pretty;

    overflow-wrap:
        break-word;

}


/* ============================================================
   AI SEARCH AREA
============================================================ */

.faq-search {

    position:
        relative;

    width:
        100%;

    max-width:
        840px;

    margin:

        clamp(
            26px,
            3.5vw,
            38px
        )

        auto

        0;

}


/* ============================================================
   SEARCH INPUT
============================================================ */

.faq-search input {

    display:
        block;

    width:
        100%;

    min-width:
        0;

    min-height:
        clamp(
            54px,
            5vw,
            68px
        );

    padding:

        clamp(
            13px,
            1.4vw,
            18px
        )

        clamp(
            16px,
            2vw,
            28px
        );

    border:
        1px solid
        rgba(15, 23, 42, .09);

    border-radius:
        clamp(
            15px,
            1.5vw,
            20px
        );

    outline:
        none;

    background:
        rgba(255, 255, 255, .94);

    color:
        var(--dark);

    font-family:
        inherit;

    font-size:
        clamp(
            .84rem,
            1.2vw,
            1rem
        );

    line-height:
        1.45;

    box-shadow:
        var(--shadow-search);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    transition:
        var(--transition);

}


.faq-search input::placeholder {

    color:
        #94a3b8;

    opacity:
        1;

}


.faq-search input:hover {

    border-color:
        rgba(37, 99, 235, .18);

    box-shadow:
        0 20px 55px
        rgba(37, 99, 235, .12);

}


.faq-search input:focus {

    border-color:
        rgba(37, 99, 235, .38);

    background:
        #ffffff;

    transform:
        translateY(-2px);

    box-shadow:
        0 22px 65px
        rgba(37, 99, 235, .16);

}


.faq-search input:focus-visible {

    outline:
        3px solid
        rgba(37, 99, 235, .13);

    outline-offset:
        3px;

}


/* ============================================================
   KNOWLEDGE GRID
============================================================ */

.faq-grid {

    display:
        grid;

    width:
        100%;

    min-width:
        0;

    /*
       Fluid card sizing.

       Instead of depending entirely on device-specific
       breakpoints, the grid automatically chooses how many
       cards fit.
    */

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(
                    100%,
                    300px
                ),
                1fr
            )
        );

    gap:
        clamp(
            14px,
            1.8vw,
            28px
        );

    align-items:
        start;

}


/* ============================================================
   PREMIUM KNOWLEDGE CARD
============================================================ */

.faq-card {

    position:
        relative;

    width:
        100%;

    min-width:
        0;

    padding:
        clamp(
            20px,
            2.1vw,
            34px
        );

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-xl);

    background:
        var(--glass);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        var(--shadow);

    overflow:
        hidden;

    isolation:
        isolate;

    transition:

        transform var(--transition),

        box-shadow var(--transition),

        border-color var(--transition),

        background var(--transition);

}


/* ============================================================
   CARD SOFT LIGHT
============================================================ */

.faq-card::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    background:

        radial-gradient(
            circle at 0% 0%,
            rgba(37, 99, 235, .085),
            transparent 44%
        ),

        linear-gradient(
            135deg,
            rgba(6, 182, 212, .035),
            transparent 62%
        );

    opacity:
        0;

    transition:
        opacity var(--transition);

}


/* ============================================================
   CARD TOP ACCENT
============================================================ */

.faq-card::after {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        8%;

    width:
        84%;

    height:
        2px;

    border-radius:
        999px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(37, 99, 235, .55),
            rgba(6, 182, 212, .55),
            transparent
        );

    opacity:
        0;

    transition:
        opacity var(--transition);

}


/* ============================================================
   CARD HOVER
============================================================ */

@media (hover: hover) and (pointer: fine) {

    .faq-card:hover {

        transform:
            translateY(-6px);

        border-color:
            rgba(37, 99, 235, .16);

        background:
            rgba(255, 255, 255, .97);

        box-shadow:
            var(--shadow-hover);

    }


    .faq-card:hover::before,
    .faq-card:hover::after {

        opacity:
            1;

    }

}


/* ============================================================
   KNOWLEDGE ICON
============================================================ */

.faq-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        clamp(
            52px,
            4.5vw,
            66px
        );

    height:
        clamp(
            52px,
            4.5vw,
            66px
        );

    margin-bottom:
        clamp(
            16px,
            1.8vw,
            23px
        );

    border-radius:
        clamp(
            14px,
            1.3vw,
            18px
        );

    background:

        linear-gradient(
            135deg,
            #2563eb,
            #0891b2
        );

    color:
        #ffffff;

    font-size:
        clamp(
            1.25rem,
            1.7vw,
            1.65rem
        );

    flex-shrink:
        0;

    box-shadow:
        0 12px 30px
        rgba(37, 99, 235, .20);

    transition:
        transform var(--transition),
        box-shadow var(--transition);

}


@media (hover: hover) and (pointer: fine) {

    .faq-card:hover .faq-icon {

        transform:
            translateY(-2px)
            scale(1.04);

        box-shadow:
            0 17px 38px
            rgba(37, 99, 235, .27);

    }

}


/* ============================================================
   CARD TITLE
============================================================ */

.faq-card h3 {

    position:
        relative;

    width:
        100%;

    min-width:
        0;

    margin-bottom:
        clamp(
            10px,
            1vw,
            14px
        );

    padding-right:
        clamp(
            45px,
            4vw,
            58px
        );

    color:
        var(--dark);

    font-size:
        clamp(
            .94rem,
            1.25vw,
            1.24rem
        );

    line-height:
        1.45;

    font-weight:
        800;

    letter-spacing:
        -.018em;

    overflow-wrap:
        anywhere;

    word-break:
        normal;

}


/* ============================================================
   EXPAND ARROW CIRCLE
============================================================ */

.faq-card h3::before {

    content:
        "";

    position:
        absolute;

    top:
        50%;

    right:
        0;

    width:
        clamp(
            32px,
            2.8vw,
            40px
        );

    height:
        clamp(
            32px,
            2.8vw,
            40px
        );

    border-radius:
        50%;

    background:
        #f1f5f9;

    border:
        1px solid
        rgba(15, 23, 42, .07);

    box-shadow:
        none;

    transform:
        translateY(-50%);

    transition:
        transform var(--transition),
        background var(--transition),
        box-shadow var(--transition);

}


/* ============================================================
   EXPAND ARROW
============================================================ */

.faq-card h3::after {

    content:
        "";

    position:
        absolute;

    top:
        50%;

    right:
        clamp(
            10px,
            1.1vw,
            14px
        );

    width:
        clamp(
            7px,
            .7vw,
            9px
        );

    height:
        clamp(
            7px,
            .7vw,
            9px
        );

    border-right:
        2px solid
        var(--primary);

    border-bottom:
        2px solid
        var(--primary);

    transform:
        translateY(-65%)
        rotate(45deg);

    transition:
        transform var(--transition),
        border-color var(--transition);

    z-index:
        2;

}


/* ============================================================
   HOVER ARROW
============================================================ */

@media (hover: hover) and (pointer: fine) {

    .faq-card:hover h3::before {

        background:

            linear-gradient(
                135deg,
                #2563eb,
                #0891b2
            );

        transform:
            translateY(-50%)
            scale(1.06);

        box-shadow:
            0 8px 22px
            rgba(37, 99, 235, .18);

    }


    .faq-card:hover h3::after {

        border-color:
            #ffffff;

    }

}


/* ============================================================
   ACTIVE ARROW
============================================================ */

.faq-card.active h3::before {

    background:

        linear-gradient(
            135deg,
            #2563eb,
            #0891b2
        );

    box-shadow:
        0 8px 22px
        rgba(37, 99, 235, .20);

}


.faq-card.active h3::after {

    border-color:
        #ffffff;

    transform:
        translateY(-35%)
        rotate(225deg);

}


/* ============================================================
   CARD PREVIEW
============================================================ */

.faq-preview {

    width:
        100%;

    min-width:
        0;

    color:
        var(--text-light);

    font-size:
        clamp(
            .86rem,
            1.05vw,
            .99rem
        );

    line-height:
        1.75;

    overflow-wrap:
        anywhere;

    text-wrap:
        pretty;

}


/* ============================================================
   ANSWER
============================================================ */

.faq-answer {

    max-height:
        0;

    opacity:
        0;

    overflow:
        hidden;

    transition:

        max-height .55s
        cubic-bezier(.2,.8,.2,1),

        opacity .3s ease,

        margin-top .3s ease,

        padding-top .3s ease;

}


.faq-card.active .faq-answer {

    max-height:
        1400px;

    margin-top:
        clamp(
            17px,
            1.8vw,
            23px
        );

    padding-top:
        clamp(
            17px,
            1.8vw,
            23px
        );

    opacity:
        1;

    border-top:
        1px solid
        var(--border);

}


.faq-answer p {

    width:
        100%;

    color:
        var(--text-light);

    font-size:
        clamp(
            .86rem,
            1.05vw,
            .99rem
        );

    line-height:
        1.82;

    overflow-wrap:
        anywhere;

    text-wrap:
        pretty;

}


.faq-answer p + p {

    margin-top:
        12px;

}


/* ============================================================
   ANSWER LINKS
============================================================ */

.faq-answer a {

    color:
        var(--primary);

    font-weight:
        700;

    text-decoration:
        none;

    overflow-wrap:
        anywhere;

    transition:
        color .2s ease;

}


.faq-answer a:hover {

    color:
        var(--primary-dark);

    text-decoration:
        underline;

}


/* ============================================================
   EXTRA-WIDE DISPLAYS
============================================================ */

@media (min-width: 1800px) {

    .faq-container {

        max-width:
            1780px;

    }

}


@media (min-width: 2200px) {

    .faq-container {

        max-width:
            1880px;

    }


    .faq-grid {

        grid-template-columns:
            repeat(
                5,
                minmax(
                    0,
                    1fr
                )
            );

    }

}


/* ============================================================
   MEDIUM-WIDTH DESKTOP
============================================================ */

@media (max-width: 1250px) {

    .faq-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );

    }

}


/* ============================================================
   TABLET / COMPACT LAPTOP
============================================================ */

@media (max-width: 950px) {

    .faq-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .faq-header {

        max-width:
            850px;

    }

}


/* ============================================================
   NARROW TABLETS / LARGE PHONES
============================================================ */

@media (max-width: 680px) {

    .faq-section {

        padding-left:
            clamp(
                12px,
                4vw,
                22px
            );

        padding-right:
            clamp(
                12px,
                4vw,
                22px
            );

    }


    .faq-grid {

        grid-template-columns:
            minmax(
                0,
                1fr
            );

    }


    .faq-header {

        margin-bottom:
            44px;

    }


    .faq-header h2 {

        font-size:
            clamp(
                2rem,
                10vw,
                3.4rem
            );

    }


    .faq-header p {

        font-size:
            .92rem;

        line-height:
            1.72;

    }


    .faq-card {

        padding:
            clamp(
                19px,
                5vw,
                25px
            );

    }

}


/* ============================================================
   SMALL PHONES
============================================================ */

@media (max-width: 430px) {

    .faq-section {

        padding-top:
            52px;

        padding-bottom:
            62px;

    }


    .faq-header {

        margin-bottom:
            38px;

    }


    .faq-badge {

        max-width:
            calc(
                100vw - 28px
            );

        padding:
            8px 12px;

        font-size:
            .62rem;

    }


    .faq-header h2 {

        font-size:
            clamp(
                1.9rem,
                10.8vw,
                2.6rem
            );

        letter-spacing:
            -.045em;

    }


    .faq-header p {

        font-size:
            .86rem;

        line-height:
            1.7;

    }


    .faq-search {

        margin-top:
            24px;

    }


    .faq-search input {

        min-height:
            54px;

        padding:
            13px 15px;

        border-radius:
            15px;

        font-size:
            .84rem;

    }


    .faq-card {

        padding:
            18px;

        border-radius:
            20px;

    }


    .faq-icon {

        width:
            54px;

        height:
            54px;

        margin-bottom:
            17px;

        border-radius:
            15px;

        font-size:
            1.3rem;

    }


    .faq-card h3 {

        padding-right:
            45px;

        font-size:
            .93rem;

    }


    .faq-preview {

        font-size:
            .85rem;

        line-height:
            1.7;

    }


    .faq-answer p {

        font-size:
            .85rem;

        line-height:
            1.76;

    }

}


/* ============================================================
   ULTRA-NARROW DEVICES
============================================================ */

@media (max-width: 340px) {

    .faq-section {

        padding-left:
            8px;

        padding-right:
            8px;

    }


    .faq-header h2 {

        font-size:
            1.78rem;

    }


    .faq-header p {

        font-size:
            .82rem;

    }


    .faq-card {

        padding:
            15px;

    }


    .faq-card h3 {

        font-size:
            .88rem;

        padding-right:
            42px;

    }


    .faq-preview {

        font-size:
            .82rem;

    }


    .faq-answer p {

        font-size:
            .82rem;

    }

}


/* ============================================================
   LANDSCAPE MOBILE
============================================================ */

@media (max-height: 520px) and (orientation: landscape) {

    .faq-section {

        padding-top:
            42px;

        padding-bottom:
            55px;

    }


    .faq-header {

        margin-bottom:
            35px;

    }


    .faq-header h2 {

        font-size:
            clamp(
                1.9rem,
                7vw,
                3rem
            );

    }

}


/* ============================================================
   TOUCH DEVICES
============================================================ */

@media (hover: none) {

    .faq-card {

        transition:

            box-shadow .25s ease,

            border-color .25s ease,

            background .25s ease;

    }


    .faq-card:active {

        border-color:
            rgba(37, 99, 235, .22);

        background:
            rgba(255, 255, 255, .97);

    }

}


/* ============================================================
   FOCUS / ACCESSIBILITY
============================================================ */

.faq-card:focus-within {

    border-color:
        rgba(37, 99, 235, .32);

    box-shadow:
        0 18px 52px
        rgba(37, 99, 235, .12);

}


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

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior:
            auto;

    }


    body::before {

        animation:
            none;

    }


    *,
    *::before,
    *::after {

        animation:
            none !important;

        transition:
            none !important;

        scroll-behavior:
            auto !important;

    }

}


/* ============================================================
   HIGH CONTRAST
============================================================ */

@media (prefers-contrast: more) {

    .faq-card {

        border-color:
            rgba(15, 23, 42, .28);

    }


    .faq-preview,
    .faq-answer p {

        color:
            #334155;

    }


    .faq-search input {

        border-color:
            rgba(15, 23, 42, .32);

    }


    .faq-badge {

        border-color:
            rgba(15, 23, 42, .24);

    }

}


/* ============================================================
   PRINT
============================================================ */

@media print {

    body {

        background:
            #ffffff;

    }


    body::before {

        display:
            none;

    }


    .faq-section {

        padding:
            20px;

    }


    .faq-card {

        break-inside:
            avoid;

        box-shadow:
            none;

        border:
            1px solid
            #cccccc;

    }


    .faq-answer {

        max-height:
            none !important;

        opacity:
            1 !important;

    }

}