/* ── RESET & BASE ─────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Barlow',sans-serif;background:#fff;color:#111827;line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
ul{list-style:none}

/* ── KEYFRAMES ─────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideLeft{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideRight{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
@keyframes heroGlow{0%,100%{opacity:.15;transform:scale(1)}50%{opacity:.28;transform:scale(1.08)}}
@keyframes floatQ{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(249,115,22,.4)}50%{box-shadow:0 0 0 8px rgba(249,115,22,0)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes sectionIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}


/* =========================================================
   FAQ HERO
========================================================= */

.faq-new-hero {
    position: relative;

    padding: 155px 20px 85px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fafafa 60%,
            #f6f6f6 100%
        );

    overflow: hidden;
}


/* subtle technical grid */

.faq-new-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(0, 0, 0, .018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .018) 1px,
            transparent 1px
        );

    background-size: 38px 38px;

    mask-image:
        linear-gradient(
            to right,
            transparent,
            #000 45%,
            #000
        );

    pointer-events: none;
}


.faq-new-hero-container {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1220px;

    margin: 0 auto;
}


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

.faq-new-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(400px, .95fr);

    align-items: center;

    gap: 70px;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.faq-new-hero-content {
    min-width: 0;
}


/* BADGE */

.faq-new-hero-badge {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 18px;
    padding: 6px 10px 6px 7px;

    background:
        rgba(250, 167, 27, .08);

    border:
        1px solid rgba(250, 167, 27, .18);

    border-radius: 6px;

    color: #9a6500;

    font-size: .72rem;
    font-weight: 850;

    letter-spacing: .8px;
}


.faq-new-hero-badge-icon {
    width: 23px;
    height: 23px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #faa71b;

    border-radius: 5px;
}


.faq-new-hero-badge-icon i {
    color: #151515 !important;

    font-size: 9px;
}


/* =========================================================
   H1
========================================================= */

.faq-new-hero h1 {
    max-width: 680px;

    margin: 0;

    color: #202020;

    font-size: clamp(
        2.7rem,
        5.2vw,
        4.6rem
    );

    font-weight: 800;

    line-height: .98;

    letter-spacing: -2.8px;
}


.faq-new-hero h1 span {
    display: block;

    margin-top: 5px;

    color: #faa71b;
}


/* =========================================================
   HERO TEXT
========================================================= */

.faq-new-hero-lead {
    margin: 21px 0 0;

    color: #353535;

    font-size: 1.03rem;
    font-weight: 700;

    line-height: 1.5;
}


.faq-new-hero-text {
    max-width: 650px;

    margin: 9px 0 0;

    color: #686868;

    font-size: .95rem;

    line-height: 1.75;
}


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

.faq-new-search {
    position: relative;

    display: grid;

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

    align-items: center;

    max-width: 610px;

    min-height: 56px;

    margin-top: 25px;

    background: #ffffff;

    border: 1px solid #dddddd;
    border-radius: 9px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .055);

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}


.faq-new-search:focus-within {
    border-color:
        rgba(250, 167, 27, .75);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .055),
        0 0 0 3px rgba(250, 167, 27, .08);
}


/* SEARCH ICON */

.faq-new-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}


.faq-new-search-icon i {
    color: #faa71b !important;

    font-size: 13px;
}


/* INPUT */

.faq-new-search input {
    width: 100%;

    padding: 16px 5px;

    background: transparent;

    border: 0;
    outline: 0;

    color: #303030;

    font-family: inherit;

    font-size: .88rem;
}


.faq-new-search input::placeholder {
    color: #999999;
}


/* SEARCH LABEL */

.faq-new-search-label {
    margin-right: 8px;
    padding: 7px 9px;

    background: #f7f7f7;

    border: 1px solid #e8e8e8;
    border-radius: 5px;

    color: #8a8a8a;

    font-size: .62rem;
    font-weight: 850;

    letter-spacing: .65px;
}


/* =========================================================
   QUICK TOPICS
========================================================= */

.faq-new-quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 7px;

    margin-top: 12px;
}


.faq-new-quick-label {
    margin-right: 2px;

    color: #9b9b9b;

    font-size: .67rem;
    font-weight: 850;

    letter-spacing: .6px;
}


.faq-new-quick a {
    padding: 5px 8px;

    background: #f8f8f8;

    border: 1px solid #e6e6e6;
    border-radius: 5px;

    color: #656565;

    font-size: .70rem;
    font-weight: 650;

    text-decoration: none;

    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease;
}


.faq-new-quick a:hover {
    background:
        rgba(250, 167, 27, .08);

    border-color:
        rgba(250, 167, 27, .28);

    color: #9a6500;
}


/* =========================================================
   DASHBOARD
========================================================= */

.faq-new-dashboard {
    position: relative;

    min-width: 0;

    padding: 20px;

    background:
        linear-gradient(
            145deg,
            #202020,
            #111111
        );

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

    border-radius: 16px;

    box-shadow:
        0 25px 55px rgba(0, 0, 0, .17);

    overflow: hidden;
}


/* GRID */

.faq-new-dashboard::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(250, 167, 27, .03) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(250, 167, 27, .03) 1px,
            transparent 1px
        );

    background-size: 27px 27px;

    pointer-events: none;
}


/* GLOW */

.faq-new-dashboard::after {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    top: -145px;
    right: -90px;

    background:
        rgba(250, 167, 27, .14);

    border-radius: 50%;

    filter: blur(75px);

    pointer-events: none;
}


.faq-new-dashboard > * {
    position: relative;
    z-index: 2;
}


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

.faq-new-dashboard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding-bottom: 13px;

    border-bottom:
        1px solid rgba(255, 255, 255, .07);
}


.faq-new-dashboard-head span,
.faq-new-dashboard-head strong {
    display: block;
}


.faq-new-dashboard-head > div:first-child > span {
    margin-bottom: 3px;

    color: #faa71b;

    font-size: .62rem;
    font-weight: 850;

    letter-spacing: .75px;
}


.faq-new-dashboard-head strong {
    color: #dddddd;

    font-size: .80rem;
    font-weight: 650;
}


/* STATUS */

.faq-new-dashboard-status {
    display: inline-flex !important;
    align-items: center;

    gap: 6px;

    padding: 5px 7px;

    background:
        rgba(250, 167, 27, .07);

    border:
        1px solid rgba(250, 167, 27, .15);

    border-radius: 5px;

    color: #faa71b;

    font-size: .60rem;
    font-weight: 850;

    letter-spacing: .6px;
}


.faq-new-dashboard-status span {
    width: 6px;
    height: 6px;

    margin: 0 !important;

    background: #faa71b;

    border-radius: 50%;

    box-shadow:
        0 0 7px rgba(250, 167, 27, .8);
}


/* =========================================================
   DASHBOARD CORE
========================================================= */

.faq-new-dashboard-core {
    position: relative;

    height: 270px;

    margin-top: 11px;

    background:
        radial-gradient(
            circle at center,
            rgba(250, 167, 27, .06),
            transparent 48%
        );

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

    border-radius: 11px;

    overflow: hidden;
}


/* RINGS */

.faq-new-core-ring {
    position: absolute;

    top: 50%;
    left: 50%;

    border:
        1px solid rgba(250, 167, 27, .10);

    border-radius: 50%;

    transform:
        translate(-50%, -50%);
}


.faq-new-ring-one {
    width: 150px;
    height: 150px;
}


.faq-new-ring-two {
    width: 220px;
    height: 220px;

    border-style: dashed;

    opacity: .65;
}


/* =========================================================
   CENTER CORE
========================================================= */

.faq-new-core-center {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 112px;
    height: 112px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    transform:
        translate(-50%, -50%);

    background:
        linear-gradient(
            145deg,
            rgba(250, 167, 27, .12),
            rgba(250, 167, 27, .035)
        );

    border:
        1px solid rgba(250, 167, 27, .25);

    border-radius: 50%;

    box-shadow:
        0 0 35px rgba(250, 167, 27, .07);

    z-index: 4;
}


.faq-new-core-icon {
    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 7px;

    background: #faa71b;

    border-radius: 50%;
}


.faq-new-core-icon i {
    color: #151515 !important;

    font-size: 13px;
}


.faq-new-core-center strong {
    color: #dedede;

    font-size: .62rem;
    font-weight: 800;
}


.faq-new-core-center > span {
    margin-top: 2px;

    color: #737373;

    font-size: .55rem;
    font-weight: 750;

    letter-spacing: .4px;
}


/* =========================================================
   NODES
========================================================= */

.faq-new-node {
    position: absolute;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 5px;

    z-index: 3;
}


.faq-new-node > div {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #191919;

    border:
        1px solid rgba(250, 167, 27, .17);

    border-radius: 9px;

    box-shadow:
        0 7px 15px rgba(0, 0, 0, .15);
}


.faq-new-node i {
    color: #faa71b !important;

    font-size: 11px;
}


.faq-new-node > span {
    color: #8e8e8e;

    font-size: .56rem;
    font-weight: 800;

    letter-spacing: .4px;
}


/* POSITIONS */

.faq-new-node-1 {
    top: 27px;
    left: 36px;
}


.faq-new-node-2 {
    top: 27px;
    right: 36px;
}


.faq-new-node-3 {
    bottom: 26px;
    left: 36px;
}


.faq-new-node-4 {
    right: 36px;
    bottom: 26px;
}


/* =========================================================
   CONNECTION LINES
========================================================= */

.faq-new-line {
    position: absolute;

    width: 100px;
    height: 1px;

    top: 50%;
    left: 50%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(250, 167, 27, .27)
        );

    transform-origin: left center;

    z-index: 1;
}


.faq-new-line-1 {
    transform:
        rotate(-138deg);
}


.faq-new-line-2 {
    transform:
        rotate(-42deg);
}


.faq-new-line-3 {
    transform:
        rotate(138deg);
}


.faq-new-line-4 {
    transform:
        rotate(42deg);
}


/* =========================================================
   DASHBOARD STATS
========================================================= */

.faq-new-dashboard-stats {
    display: grid;

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

    gap: 6px;

    margin-top: 8px;
}


.faq-new-dashboard-stats > div {
    display: flex;
    align-items: center;

    gap: 7px;

    min-width: 0;

    padding: 8px;

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

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

    border-radius: 7px;
}


.faq-new-dashboard-stats i {
    color: #faa71b !important;

    font-size: 9px;
}


.faq-new-dashboard-stats span,
.faq-new-dashboard-stats small,
.faq-new-dashboard-stats strong {
    display: block;
}


.faq-new-dashboard-stats small {
    margin-bottom: 1px;

    color: #6f6f6f;

    font-size: .55rem;
    font-weight: 800;

    letter-spacing: .4px;
}


.faq-new-dashboard-stats strong {
    overflow: hidden;

    color: #a9a9a9;

    font-size: .64rem;
    font-weight: 650;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/* =========================================================
   DASHBOARD BOTTOM
========================================================= */

.faq-new-dashboard-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-top: 9px;
    padding-top: 10px;

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

    color: #777777;

    font-size: .58rem;
    font-weight: 800;

    letter-spacing: .55px;
}


.faq-new-dashboard-bottom > div {
    display: flex;
    align-items: center;

    gap: 6px;
}


.faq-new-live-dot {
    width: 6px;
    height: 6px;

    background: #faa71b;

    border-radius: 50%;

    box-shadow:
        0 0 7px rgba(250, 167, 27, .7);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .faq-new-hero {
        padding-top: 140px;
    }


    .faq-new-hero-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .faq-new-hero-content {
        max-width: 720px;
    }


    .faq-new-dashboard {
        max-width: 620px;
    }

}


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

@media (max-width: 600px) {

    .faq-new-hero {
        padding:
            125px 16px 65px;
    }


    .faq-new-hero-grid {
        gap: 35px;
    }


    .faq-new-hero h1 {
        font-size:
            clamp(2.4rem, 13vw, 3.2rem);

        letter-spacing: -1.8px;
    }


    .faq-new-hero-lead {
        font-size: .96rem;
    }


    .faq-new-hero-text {
        font-size: .90rem;
    }


    /* SEARCH */

    .faq-new-search {
        grid-template-columns:
            38px minmax(0, 1fr);

        min-height: 53px;
    }


    .faq-new-search-label {
        display: none;
    }


    /* DASHBOARD */

    .faq-new-dashboard {
        padding: 15px;

        border-radius: 13px;
    }


    .faq-new-dashboard-core {
        height: 245px;
    }


    .faq-new-node-1,
    .faq-new-node-3 {
        left: 18px;
    }


    .faq-new-node-2,
    .faq-new-node-4 {
        right: 18px;
    }


    .faq-new-dashboard-stats {
        grid-template-columns: 1fr;
    }

}


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

@media (max-width: 380px) {

    .faq-new-hero-badge {
        font-size: .66rem;
    }


    .faq-new-dashboard-head {
        align-items: flex-start;
        flex-direction: column;
    }


    .faq-new-dashboard-core {
        height: 230px;
    }


    .faq-new-ring-two {
        width: 190px;
        height: 190px;
    }


    .faq-new-node > div {
        width: 38px;
        height: 38px;
    }


    .faq-new-node-1,
    .faq-new-node-2 {
        top: 22px;
    }


    .faq-new-node-3,
    .faq-new-node-4 {
        bottom: 22px;
    }

}


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

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

    .faq-new-search,
    .faq-new-quick a {
        transition: none;
    }

}
/* =========================================================
   FAQ MAIN SECTION
========================================================= */

.faq-main-section {
    position: relative;

    padding: 90px 20px;

    background: #f7f8f9;
}

.faq-main-container {
    width: 100%;
    max-width: 1220px;

    margin: 0 auto;
}


/* =========================================================
   CATEGORY NAVIGATION
========================================================= */

.faq-category-nav {
    display: grid;

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

    gap: 8px;

    margin-top: 42px;
    margin-bottom: 12px;
}


/* CATEGORY BUTTON */

.faq-category-btn {
    min-width: 0;

    display: grid;

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

    align-items: center;

    gap: 9px;

    min-height: 58px;

    padding: 9px 10px;

    background: #ffffff;

    border: 1px solid #e2e2e2;
    border-radius: 8px;

    color: #555555;

    text-align: left;

    cursor: pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.faq-category-btn:hover {
    transform: translateY(-2px);

    border-color:
        rgba(250, 167, 27, .35);

    box-shadow:
        0 7px 18px rgba(0, 0, 0, .035);
}


/* CATEGORY ICON */

.faq-category-icon {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        rgba(250, 167, 27, .08);

    border:
        1px solid rgba(250, 167, 27, .10);

    border-radius: 7px;

    color: #faa71b;
}

.faq-category-icon i {
    color: inherit !important;

    font-size: 13px;
}


/* CATEGORY TEXT */

.faq-category-info {
    min-width: 0;
}

.faq-category-info small,
.faq-category-info strong {
    display: block;
}

.faq-category-info small {
    margin-bottom: 2px;

    color: #a0a0a0;

    font-size: .62rem;
    font-weight: 800;

    letter-spacing: .45px;
}

.faq-category-info strong {
    overflow: hidden;

    color: inherit;

    font-size: .78rem;
    font-weight: 700;

    line-height: 1.3;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/* ACTIVE CATEGORY */

.faq-category-btn.active {
    background:
        linear-gradient(
            145deg,
            #242424,
            #171717
        );

    border-color: #202020;

    color: #eeeeee;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, .09);
}

.faq-category-btn.active
.faq-category-icon {
    background: #faa71b;

    border-color: #faa71b;

    color: #151515;
}

.faq-category-btn.active
.faq-category-info small {
    color: #888888;
}


/* =========================================================
   WORKSPACE
========================================================= */

.faq-workspace {
    display: grid;

    grid-template-columns:
        minmax(250px, .30fr)
        minmax(0, .70fr);

    align-items: start;

    gap: 12px;
}


/* =========================================================
   LEFT DIRECTORY
========================================================= */

.faq-workspace-side {
    position: sticky;

    top: 105px;

    padding: 20px;

    background:
        linear-gradient(
            145deg,
            #202020,
            #121212
        );

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

    border-radius: 13px;

    overflow: hidden;
}


/* GRID BACKGROUND */

.faq-workspace-side::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(250, 167, 27, .025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(250, 167, 27, .025) 1px,
            transparent 1px
        );

    background-size: 27px 27px;

    pointer-events: none;
}

.faq-workspace-side > * {
    position: relative;
    z-index: 2;
}


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

.faq-side-head {
    padding-bottom: 15px;

    border-bottom:
        1px solid rgba(255, 255, 255, .07);
}

.faq-side-head > span {
    display: block;

    margin-bottom: 5px;

    color: #faa71b;

    font-size: .68rem;
    font-weight: 850;

    letter-spacing: .75px;
}

.faq-side-head h3 {
    margin: 0;

    color: #eeeeee;

    font-size: 1.08rem;
    font-weight: 750;

    line-height: 1.4;
}

.faq-side-head p {
    margin: 8px 0 0;

    color: #a0a0a0;

    font-size: .84rem;

    line-height: 1.65;
}


/* =========================================================
   DIRECTORY LIST
========================================================= */

.faq-side-list {
    margin-top: 8px;
}

.faq-side-item {
    display: grid;

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

    align-items: center;

    gap: 8px;

    width: 100%;

    padding: 9px 2px;

    background: transparent;

    border: 0;
    border-bottom:
        1px solid rgba(255, 255, 255, .055);

    color: inherit;

    text-align: left;

    cursor: pointer;
}

.faq-side-item:last-child {
    border-bottom: 0;
}


/* DIRECTORY ICON */

.faq-side-item-icon {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        rgba(250, 167, 27, .07);

    border-radius: 6px;

    color: #faa71b;
}

.faq-side-item-icon i {
    color: inherit !important;

    font-size: 11px;
}


/* DIRECTORY TEXT */

.faq-side-item-info {
    min-width: 0;
}

.faq-side-item-info small,
.faq-side-item-info strong {
    display: block;
}

.faq-side-item-info small {
    margin-bottom: 1px;

    color: #707070;

    font-size: .60rem;
    font-weight: 850;

    letter-spacing: .45px;
}

.faq-side-item-info strong {
    color: #bbbbbb;

    font-size: .76rem;
    font-weight: 650;

    line-height: 1.35;
}


/* COUNT */

.faq-side-count {
    min-width: 24px;

    padding: 3px 5px;

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

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

    border-radius: 4px;

    color: #777777;

    font-size: .60rem;
    font-weight: 800;

    text-align: center;
}


/* ACTIVE DIRECTORY ITEM */

.faq-side-item.active
.faq-side-item-icon {
    background: #faa71b;

    color: #151515;
}

.faq-side-item.active
.faq-side-item-info strong {
    color: #eeeeee;
}


/* =========================================================
   HELP BOX
========================================================= */

.faq-side-help {
    display: grid;

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

    align-items: center;

    gap: 8px;

    margin-top: 12px;
    padding: 10px;

    background:
        rgba(250, 167, 27, .06);

    border:
        1px solid rgba(250, 167, 27, .12);

    border-radius: 8px;
}

.faq-side-help-icon {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #faa71b;

    border-radius: 7px;
}

.faq-side-help-icon i {
    color: #151515 !important;

    font-size: 11px;
}

.faq-side-help small,
.faq-side-help strong {
    display: block;
}

.faq-side-help small {
    margin-bottom: 2px;

    color: #777777;

    font-size: .60rem;
    font-weight: 850;

    letter-spacing: .45px;
}

.faq-side-help strong {
    color: #d0d0d0;

    font-size: .76rem;
    font-weight: 700;
}

.faq-side-help > a {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(250, 167, 27, .17);

    border-radius: 5px;

    text-decoration: none;
}

.faq-side-help > a i {
    color: #faa71b !important;

    font-size: 9px;
}


/* =========================================================
   FAQ PANEL
========================================================= */

.faq-accordion-panel {
    min-width: 0;

    padding: 20px;

    background: #ffffff;

    border: 1px solid #e3e3e3;
    border-radius: 13px;
}


/* PANEL HEADER */

.faq-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding-bottom: 14px;

    border-bottom: 1px solid #eeeeee;
}

.faq-panel-head > div:first-child > span {
    display: block;

    margin-bottom: 4px;

    color: #faa71b;

    font-size: .68rem;
    font-weight: 850;

    letter-spacing: .7px;
}

.faq-panel-head h3 {
    margin: 0;

    color: #333333;

    font-size: 1.12rem;
    font-weight: 750;

    line-height: 1.4;
}


/* QUESTION COUNT */

.faq-panel-status {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    flex: 0 0 auto;

    padding: 6px 8px;

    background:
        rgba(250, 167, 27, .07);

    border:
        1px solid rgba(250, 167, 27, .14);

    border-radius: 5px;
}

.faq-panel-status > span {
    width: 6px;
    height: 6px;

    background: #faa71b;

    border-radius: 50%;

    box-shadow:
        0 0 6px rgba(250, 167, 27, .6);
}

.faq-panel-status strong {
    color: #996600;

    font-size: .62rem;
    font-weight: 850;

    letter-spacing: .5px;
}


/* =========================================================
   DYNAMIC FAQ
========================================================= */

.faq-dynamic-content {
    min-height: 100px;
}


/* =========================================================
   FAQ GROUP
========================================================= */

.faq-group {
    margin-top: 20px;
}

.faq-group:first-child {
    margin-top: 17px;
}


/* GROUP LABEL */

.faq-group-label {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 7px;
    padding: 0 3px;
}

.faq-group-label-icon {
    width: 25px;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        rgba(250, 167, 27, .08);

    border-radius: 5px;

    color: #faa71b;
}

.faq-group-label-icon i {
    color: inherit !important;

    font-size: 10px;
}

.faq-group-label span {
    color: #858585;

    font-size: .68rem;
    font-weight: 850;

    letter-spacing: .65px;

    text-transform: uppercase;
}


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

.faq-item {
    margin-bottom: 7px;

    background: #fafafa;

    border: 1px solid #e7e7e7;
    border-radius: 8px;

    overflow: hidden;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.faq-item:hover {
    border-color:
        rgba(250, 167, 27, .30);
}

.faq-item.is-open {
    background: #ffffff;

    border-color:
        rgba(250, 167, 27, .42);

    box-shadow:
        0 7px 20px rgba(0, 0, 0, .035);
}


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

.faq-question {
    width: 100%;

    display: grid;

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

    align-items: center;

    gap: 10px;

    padding: 13px;

    background: transparent;

    border: 0;

    color: #3e3e3e;

    font-family: inherit;

    text-align: left;

    cursor: pointer;
}


/* NUMBER */

.faq-question-number {
    color: #aaaaaa;

    font-size: .66rem;
    font-weight: 850;

    letter-spacing: .3px;
}


/* QUESTION TEXT */

.faq-question-text {
    color: #404040;

    font-size: .90rem;
    font-weight: 700;

    line-height: 1.5;
}


/* TOGGLE */

.faq-question-toggle {
    width: 31px;
    height: 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    border: 1px solid #e5e5e5;
    border-radius: 6px;

    color: #faa71b;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.faq-question-toggle i {
    color: inherit !important;

    font-size: 9px;

    transition:
        transform .25s ease;
}


/* OPEN */

.faq-item.is-open
.faq-question-toggle {
    background: #faa71b;

    border-color: #faa71b;

    color: #151515;
}

.faq-item.is-open
.faq-question-toggle i {
    transform: rotate(45deg);
}


/* =========================================================
   FAQ ANSWER - FIXED
========================================================= */

.faq-answer {
    max-height: 0;
    overflow: hidden;

    opacity: 0;

    transition:
        max-height .35s ease,
        opacity .25s ease;
}


/* OPEN ANSWER */

.faq-item.is-open .faq-answer {
    max-height: 500px;

    opacity: 1;
}


/* ANSWER INNER */

.faq-answer-inner {
    display: grid;

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

    gap: 12px;

    margin:
        0 13px 0 57px;

    padding:
        2px 0 15px;
}


/* GOLD LINE */

.faq-answer-line {
    display: block;

    width: 2px;

    min-height: 100%;

    background: #faa71b;

    border-radius: 2px;
}


/* ANSWER TEXT */

.faq-answer p {
    display: block;

    margin: 0;

    color: #686868;

    font-size: .86rem;

    line-height: 1.72;
}


/* MOBILE */

@media (max-width: 600px) {

    .faq-answer-inner {
        margin:
            0 10px 0 45px;
    }

    .faq-answer p {
        font-size: .84rem;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

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

}


@media (max-width: 850px) {

    .faq-workspace {
        grid-template-columns: 1fr;
    }


    .faq-workspace-side {
        position: relative;

        top: auto;
    }


    .faq-side-list {
        display: grid;

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

        gap: 0 15px;
    }

}


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

@media (max-width: 600px) {

    .faq-main-section {
        padding: 65px 16px;
    }


    .faq-category-nav {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        margin-top: 32px;
    }


    .faq-category-btn {
        min-height: 55px;
    }


    .faq-workspace-side,
    .faq-accordion-panel {
        padding: 16px;

        border-radius: 11px;
    }


    .faq-side-list {
        grid-template-columns: 1fr;
    }


    .faq-panel-head {
        align-items: flex-start;

        flex-direction: column;
    }


    .faq-question {
        grid-template-columns:
            27px minmax(0, 1fr) 29px;

        gap: 8px;

        padding: 12px 10px;
    }


    .faq-question-text {
        font-size: .86rem;
    }


    .faq-answer-inner {
        margin:
            0 10px 0 45px;
    }


    .faq-answer p {
        font-size: .84rem;
    }

}


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

@media (max-width: 390px) {

    .faq-category-nav {
        grid-template-columns: 1fr;
    }

}


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

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

    .faq-category-btn,
    .faq-item,
    .faq-answer,
    .faq-question-toggle i {
        transition: none;
    }

}

/* =========================================================
   STEP 5 - FAQ SUPPORT
========================================================= */

.faq-support-section {
    padding: 25px 20px 90px;
    background: #f7f8f9;
}

.faq-support-container {
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
}


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

.faq-support-card {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(320px, .85fr);

    align-items: center;

    gap: 50px;

    padding: 35px 38px;

    background:
        linear-gradient(
            135deg,
            #202020,
            #111111
        );

    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 15px;

    overflow: hidden;
}


/* TECH GRID */

.faq-support-card::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(250, 167, 27, .025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(250, 167, 27, .025) 1px,
            transparent 1px
        );

    background-size: 30px 30px;

    pointer-events: none;
}


/* GLOW */

.faq-support-card::after {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    top: -160px;
    left: -100px;

    background:
        rgba(250, 167, 27, .13);

    border-radius: 50%;

    filter: blur(80px);

    pointer-events: none;
}


.faq-support-card > * {
    position: relative;
    z-index: 2;
}


/* =========================================================
   CONTENT
========================================================= */

.faq-support-label {
    display: inline-block;

    margin-bottom: 9px;

    color: #faa71b;

    font-size: .70rem;
    font-weight: 850;

    letter-spacing: .8px;
}


.faq-support-content h2 {
    max-width: 580px;

    margin: 0;

    color: #f1f1f1;

    font-size: clamp(
        1.8rem,
        3vw,
        2.55rem
    );

    font-weight: 780;

    line-height: 1.08;

    letter-spacing: -1px;
}


.faq-support-content h2 span {
    color: #faa71b;
}


.faq-support-content > p {
    max-width: 620px;

    margin: 13px 0 0;

    color: #a5a5a5;

    font-size: .90rem;

    line-height: 1.7;
}


/* =========================================================
   POINTS
========================================================= */

.faq-support-points {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 17px;
}


.faq-support-points span {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding: 6px 8px;

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

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

    border-radius: 5px;

    color: #b8b8b8;

    font-size: .72rem;
    font-weight: 650;
}


.faq-support-points i {
    color: #faa71b !important;

    font-size: 8px;
}


/* =========================================================
   ACTION PANEL
========================================================= */

.faq-support-actions {
    padding: 8px;

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

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

    border-radius: 10px;
}


/* ACTION */

.faq-support-action {
    display: grid;

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

    align-items: center;

    gap: 10px;

    padding: 11px 9px;

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

    text-decoration: none;

    transition:
        background .2s ease;
}


.faq-support-action:hover {
    background:
        rgba(250, 167, 27, .045);
}


/* ICON */

.faq-support-action-icon {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        rgba(250, 167, 27, .08);

    border:
        1px solid rgba(250, 167, 27, .13);

    border-radius: 7px;
}


.faq-support-action-icon i {
    color: #faa71b !important;

    font-size: 13px;
}


/* TEXT */

.faq-support-action-text small,
.faq-support-action-text strong {
    display: block;
}


.faq-support-action-text small {
    margin-bottom: 2px;

    color: #747474;

    font-size: .60rem;
    font-weight: 850;

    letter-spacing: .55px;
}


.faq-support-action-text strong {
    color: #d6d6d6;

    font-size: .82rem;
    font-weight: 700;
}


/* ARROW */

.faq-support-arrow {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

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

    border-radius: 5px;
}


.faq-support-arrow i {
    color: #777777 !important;

    font-size: 8px;

    transition:
        transform .2s ease,
        color .2s ease;
}


.faq-support-action:hover
.faq-support-arrow i {
    color: #faa71b !important;

    transform: translateX(2px);
}


/* =========================================================
   LOCATION
========================================================= */

.faq-support-location {
    display: flex;
    align-items: center;

    gap: 7px;

    padding: 10px 9px 3px;

    color: #777777;

    font-size: .68rem;
    font-weight: 650;
}


.faq-support-location i {
    color: #faa71b !important;

    font-size: 9px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .faq-support-card {
        grid-template-columns: 1fr;

        gap: 28px;
    }

}


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

@media (max-width: 600px) {

    .faq-support-section {
        padding:
            15px 16px 65px;
    }


    .faq-support-card {
        padding: 25px 20px;

        border-radius: 12px;
    }


    .faq-support-content h2 {
        font-size: 1.9rem;
    }


    .faq-support-content > p {
        font-size: .86rem;
    }


    .faq-support-points {
        align-items: flex-start;
        flex-direction: column;
    }

}
/* =========================================================
   FAQ FINAL CTA
========================================================= */

.faq-final-cta {
    position: relative;

    padding: 85px 20px;

    background: #ffffff;

    overflow: hidden;
}

.faq-final-cta-container {
    width: 100%;
    max-width: 1220px;

    margin: 0 auto;
}


/* =========================================================
   CTA CARD
========================================================= */

.faq-final-cta-card {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, .85fr);

    align-items: center;

    gap: 65px;

    padding: 45px 48px;

    background:
        linear-gradient(
            135deg,
            #fffaf1 0%,
            #ffffff 52%,
            #fafafa 100%
        );

    border:
        1px solid #e7e7e7;

    border-radius: 17px;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, .055);

    overflow: hidden;
}


/* TECH GRID */

.faq-final-cta-card::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(0, 0, 0, .018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .018) 1px,
            transparent 1px
        );

    background-size: 32px 32px;

    mask-image:
        linear-gradient(
            to left,
            #000,
            transparent 70%
        );

    pointer-events: none;
}


/* GOLD ACCENT */

.faq-final-cta-card::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 5px;
    height: 100%;

    background: #faa71b;
}


.faq-final-cta-card > * {
    position: relative;
    z-index: 2;
}


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

.faq-final-cta-badge {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 12px;

    color: #9a6500;

    font-size: .70rem;
    font-weight: 850;

    letter-spacing: .75px;
}

.faq-final-cta-badge i {
    color: #faa71b !important;

    font-size: 10px;
}


/* =========================================================
   HEADING
========================================================= */

.faq-final-cta-content h2 {
    max-width: 650px;

    margin: 0;

    color: #262626;

    font-size: clamp(
        2rem,
        3.6vw,
        3.25rem
    );

    font-weight: 800;

    line-height: 1.03;

    letter-spacing: -1.6px;
}

.faq-final-cta-content h2 span {
    color: #faa71b;
}


/* TEXT */

.faq-final-cta-content > p {
    max-width: 650px;

    margin: 14px 0 0;

    color: #666666;

    font-size: .92rem;

    line-height: 1.72;
}


/* =========================================================
   TRUST POINTS
========================================================= */

.faq-final-cta-trust {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 19px;
}

.faq-final-cta-trust span {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding: 6px 9px;

    background: #ffffff;

    border: 1px solid #e5e5e5;
    border-radius: 5px;

    color: #626262;

    font-size: .74rem;
    font-weight: 650;
}

.faq-final-cta-trust i {
    color: #faa71b !important;

    font-size: 8px;
}


/* =========================================================
   ACTION PANEL
========================================================= */

.faq-final-cta-actions {
    padding: 9px;

    background: #ffffff;

    border: 1px solid #e5e5e5;
    border-radius: 11px;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .045);
}


/* =========================================================
   PRIMARY
========================================================= */

.faq-final-primary {
    display: grid;

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

    align-items: center;

    gap: 10px;

    padding: 12px;

    background: #faa71b;

    border-radius: 8px;

    color: #171717;

    text-decoration: none;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.faq-final-primary:hover {
    transform: translateY(-2px);

    color: #171717;

    box-shadow:
        0 9px 20px rgba(250, 167, 27, .20);
}


.faq-final-btn-icon {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

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

    border-radius: 7px;
}

.faq-final-btn-icon i {
    color: #171717 !important;

    font-size: 15px;
}


.faq-final-primary small,
.faq-final-primary strong {
    display: block;
}

.faq-final-primary small {
    margin-bottom: 2px;

    color: rgba(0, 0, 0, .58);

    font-size: .62rem;
    font-weight: 850;

    letter-spacing: .55px;
}

.faq-final-primary strong {
    color: #171717;

    font-size: .88rem;
    font-weight: 800;
}


.faq-final-arrow {
    color: #171717 !important;

    font-size: 10px;

    transition: transform .2s ease;
}

.faq-final-primary:hover
.faq-final-arrow {
    transform: translateX(3px);
}


/* =========================================================
   SECONDARY
========================================================= */

.faq-final-secondary {
    display: grid;

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

    align-items: center;

    gap: 9px;

    margin-top: 7px;
    padding: 10px 11px;

    background: #fafafa;

    border: 1px solid #e9e9e9;
    border-radius: 7px;

    text-decoration: none;
}

.faq-final-secondary > i {
    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        rgba(250, 167, 27, .08);

    border-radius: 6px;

    color: #faa71b !important;

    font-size: 10px;
}


.faq-final-secondary small,
.faq-final-secondary strong {
    display: block;
}

.faq-final-secondary small {
    margin-bottom: 1px;

    color: #999999;

    font-size: .60rem;
    font-weight: 850;

    letter-spacing: .5px;
}

.faq-final-secondary strong {
    color: #444444;

    font-size: .80rem;
    font-weight: 750;
}


/* =========================================================
   LOCATION
========================================================= */

.faq-final-location {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 10px 5px 2px;

    color: #8b8b8b;

    font-size: .68rem;
    font-weight: 650;
}

.faq-final-location i {
    color: #faa71b !important;

    font-size: 9px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .faq-final-cta-card {
        grid-template-columns: 1fr;

        gap: 30px;

        padding: 38px;
    }

}


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

@media (max-width: 600px) {

    .faq-final-cta {
        padding: 65px 16px;
    }


    .faq-final-cta-card {
        padding: 30px 21px 25px;

        border-radius: 13px;
    }


    .faq-final-cta-content h2 {
        font-size: 2rem;

        letter-spacing: -1px;
    }


    .faq-final-cta-content > p {
        font-size: .87rem;
    }


    .faq-final-cta-trust {
        align-items: flex-start;
        flex-direction: column;
    }

}