/* =============================================================================
   RESYD ENTERPRISE FAQ SYSTEM
   CINEMATIC ACCORDION EXPERIENCE
   ALIGNED WITH CORE + CONTENT + FORM + LINKS + FOOTER
   ============================================================================= */

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

.faq-section {

    position:
        relative;

    padding:
        120px 0 140px;

    background:
        linear-gradient(
            180deg,
            #050607 0%,
            #0a0d10 48%,
            #060708 100%
        );

    overflow:
        hidden;

    isolation:
        isolate;

    z-index:
        2;
}

.faq-section::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at top left,
            rgba(199,170,116,.08),
            transparent 34%
        );

    pointer-events:
        none;
}

.faq-section::after {

    content:
        "";

    position:
        absolute;

    inset:
        auto 0 0 0;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(199,170,116,.28),
            transparent
        );
}

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

.faq-section .container {

    width:
        min(100% - 2rem, 1280px);

    margin-inline:
        auto;

    position:
        relative;

    z-index:
        2;
}

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

.faq-header {

    max-width:
        920px;

    margin:
        0 auto 64px;

    text-align:
        center;
}

/* =============================================================================
   TAG
   ============================================================================= */

.section-tag {

    min-height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 20px;

    border-radius:
        999px;

    margin-bottom:
        28px;

    background:
        rgba(199,170,116,.08);

    border:
        1px solid rgba(199,170,116,.16);

    color:
        #e3c693;

    font-size:
        .72rem;

    font-weight:
        900;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

    backdrop-filter:
        blur(12px);

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

    box-shadow:
        0 12px 28px rgba(0,0,0,.18);
}

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

.faq-title {

    color:
        #ffffff;

    font-size:
        clamp(2.6rem,6vw,5.2rem);

    line-height:
        .96;

    letter-spacing:
        -.06em;

    margin-bottom:
        24px;
}

/* =============================================================================
   SUBTITLE
   ============================================================================= */

.faq-subtitle {

    max-width:
        760px;

    margin-inline:
        auto;

    color:
        rgba(255,255,255,.72);

    font-size:
        clamp(1rem,1vw + .7rem,1.18rem);

    line-height:
        1.9;
}

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

.faq-grid {

    display:
        grid;

    gap:
        22px;
}

/* =============================================================================
   ITEM
   ============================================================================= */

.faq-item {

    position:
        relative;

    overflow:
        hidden;

    border-radius:
        32px;

    background:
        linear-gradient(
            180deg,
            rgba(18,20,22,.98),
            rgba(8,10,12,.98)
        );

    border:
        1px solid rgba(255,255,255,.06);

    box-shadow:
        0 26px 80px rgba(0,0,0,.34);

    transition:
        transform .34s ease,
        border-color .34s ease,
        box-shadow .34s ease;

    isolation:
        isolate;
}

.faq-item:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(199,170,116,.18);

    box-shadow:
        0 36px 94px rgba(0,0,0,.44);
}

.faq-item::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at top right,
            rgba(199,170,116,.10),
            transparent 34%
        );

    opacity:
        0;

    transition:
        opacity .34s ease;

    pointer-events:
        none;
}

.faq-item:hover::before {

    opacity:
        1;
}

/* =============================================================================
   QUESTION
   ============================================================================= */

.faq-question {

    position:
        relative;

    width:
        100%;

    min-height:
        96px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        28px;

    padding:
        28px 34px;

    background:
        transparent;

    border:
        0;

    outline:
        none;

    cursor:
        pointer;

    text-align:
        left;

    transition:
        background .24s ease;
}

.faq-question:hover {

    background:
        rgba(255,255,255,.02);
}

.faq-question span:first-child {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    color:
        #ffffff;

    font-size:
        1.08rem;

    font-weight:
        800;

    line-height:
        1.7;

    flex:
        1;
}

.faq-question span:first-child::before {

    content:
        "";

    width:
        10px;

    height:
        10px;

    border-radius:
        50%;

    background:
        #d7bc8a;

    box-shadow:
        0 0 16px rgba(215,188,138,.62);

    flex-shrink:
        0;

    animation:
        faqPulse 2s infinite;
}

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

.faq-icon {

    width:
        52px;

    height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    border-radius:
        50%;

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

    border:
        1px solid rgba(255,255,255,.08);

    color:
        #ffffff;

    font-size:
        1.4rem;

    font-weight:
        700;

    line-height:
        1;

    transition:
        transform .28s ease,
        background .24s ease,
        border-color .24s ease;
}

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

.faq-question[aria-expanded="true"] {

    background:
        rgba(199,170,116,.04);
}

.faq-question[aria-expanded="true"] .faq-icon {

    transform:
        rotate(180deg);

    background:
        rgba(199,170,116,.10);

    border-color:
        rgba(199,170,116,.18);

    color:
        #f0ddbb;
}

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

.faq-answer {

    position:
        relative;

    padding:
        0 34px 34px 34px;

    overflow:
        hidden;

    animation:
        faqReveal .28s ease;
}

/* =============================================================================
   DIVIDER
   ============================================================================= */

.faq-answer::before {

    content:
        "";

    display:
        block;

    width:
        100%;

    height:
        1px;

    margin-bottom:
        26px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.06),
            transparent
        );
}

/* =============================================================================
   PARAGRAPHS
   ============================================================================= */

.faq-answer p {

    margin:
        0 0 18px;

    color:
        rgba(255,255,255,.76);

    font-size:
        1rem;

    line-height:
        2;

    font-weight:
        500;

    text-wrap:
        pretty;
}

.faq-answer p:last-child {

    margin-bottom:
        0;
}

/* =============================================================================
   STRONG
   ============================================================================= */

.faq-answer strong {

    color:
        #ffffff;

    font-weight:
        800;
}

/* =============================================================================
   HIDDEN
   ============================================================================= */

.faq-answer[hidden] {

    display:
        none !important;
}

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

.faq-grid::after {

    content:
        "";

    position:
        absolute;

    inset:
        auto;

    pointer-events:
        none;
}

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

@media (max-width: 980px) {

    .faq-question {

        min-height:
            84px;

        padding:
            24px 28px;
    }

    .faq-answer {

        padding:
            0 28px 28px;
    }
}

@media (max-width: 720px) {

    .faq-section {

        padding:
            78px 0 92px;
    }

    .faq-header {

        margin-bottom:
            44px;
    }

    .faq-title {

        font-size:
            clamp(2.1rem,11vw,4rem);
    }

    .faq-question {

        gap:
            18px;

        padding:
            22px;
    }

    .faq-question span:first-child {

        font-size:
            .94rem;

        line-height:
            1.6;
    }

    .faq-icon {

        width:
            44px;

        height:
            44px;

        font-size:
            1.1rem;
    }

    .faq-answer {

        padding:
            0 22px 22px;
    }

    .faq-answer p {

        font-size:
            .92rem;

        line-height:
            1.9;
    }
}

/* =============================================================================
   ANIMATION
   ============================================================================= */

@keyframes faqReveal {

    from {

        opacity:
            0;

        transform:
            translateY(-6px);
    }

    to {

        opacity:
            1;

        transform:
            translateY(0);
    }
}

@keyframes faqPulse {

    0%,100% {

        opacity:
            1;
    }

    50% {

        opacity:
            .42;
    }
}