.faq{

    position:relative;

    padding:140px 20px;

    background:#071019;

    overflow:hidden;

}

.faq-container{

    max-width:950px;

    margin:auto;

    position:relative;

    z-index:2;

}

/********************/

.faq-header{

    text-align:center;

    margin-bottom:70px;

}

.section-tag{

    color:#FFD54A;

    letter-spacing:2px;

    text-transform:uppercase;

    font-size:.85rem;

}

.faq-header h2{

    color:white;

    font-size:clamp(2rem,5vw,3.5rem);

    margin:18px 0;

}

.faq-header p{

    color:#bfc7d1;

    line-height:1.8;

}

/********************/

.faq-item{

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

    backdrop-filter:blur(24px);

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

    border-radius:24px;

    margin-bottom:20px;

    overflow:hidden;

    transition:.45s;

    position:relative;

}

.faq-item::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    background:radial-gradient(circle,
    rgba(255,255,255,.25),
    transparent);

    top:-150px;

    left:-180px;

    transition:.7s;

}

.faq-item:hover::before{

    left:60%;

}

.faq-item:hover{

    transform:translateY(-4px);

    border-color:#FFD54A;

    box-shadow:0 20px 40px rgba(0,0,0,.35);

}

/********************/

.faq-question{

    width:100%;

    background:none;

    border:none;

    color:white;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:28px;

    cursor:pointer;

    font-size:1.08rem;

    text-align:left;

}

.icon{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

    color:#FFD54A;

    font-size:1.6rem;

    transition:.4s;

}

/********************/

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .5s ease;

}

.faq-answer p{

    color:#d4dbe3;

    line-height:1.8;

    padding:0 28px 28px;

}

/********************/

.faq-item.active .faq-answer{

    max-height:250px;

}

.faq-item.active .icon{

    transform:rotate(45deg);

    background:#FFD54A;

    color:#111;

}

/********************/

.faq-glow{

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

    filter:blur(120px);

    opacity:.3;

}

.glow-left{

    background:#00aaff;

    top:150px;

    left:-150px;

}

.glow-right{

    background:#ffc107;

    bottom:120px;

    right:-150px;

}

/********************/

.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:1s;

}

.reveal.active{

    opacity:1;

    transform:none;

}