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

.faq{

position:relative;

overflow:hidden;

background:

radial-gradient(

circle at top center,

rgba(108,99,255,.06),

transparent 45%

),

linear-gradient(

180deg,

transparent,

rgba(0,217,255,.02),

transparent

);

}


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

.faq .section-heading{

max-width:760px;

margin:0 auto 80px;

}


/*==================================================
FAQ WRAPPER
==================================================*/

.faq-wrapper{

max-width:900px;

margin:auto;

display:flex;

flex-direction:column;

gap:22px;

}


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

.faq-item{

position:relative;

overflow:hidden;

border-radius:22px;

transition:.4s ease;

background:var(--card);

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

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

backdrop-filter:blur(18px);

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

}

.faq-item:hover{

transform:translateY(-4px);

box-shadow:

var(--shadow-md),

var(--glow-primary);

border-color:var(--border-primary);

}


/*==================================================
TOP GLOW
==================================================*/

.faq-item::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:2px;

background:

linear-gradient(

90deg,

transparent,

var(--primary),

transparent

);

transform:scaleX(0);

transition:.45s;

}

.faq-item:hover::before,

.faq-item.active::before{

transform:scaleX(1);

}


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

.faq-question{

width:100%;

display:flex;

align-items:center;

justify-content:space-between;

gap:30px;

padding:30px 35px;

background:transparent;

border:none;

cursor:pointer;

color:var(--text);

text-align:left;

font:inherit;

}


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

.faq-question span{

font-size:1.2rem;

font-weight:600;

line-height:1.6;

}


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

.faq-question i{

width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:var(--glass);

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

color:var(--primary);

box-shadow:var(--glow-primary);

font-size:1rem;

transition:.35s;

flex-shrink:0;

}

.faq-item.active .faq-question i{

transform:rotate(45deg);

background:var(--primary);

color:var(--body);

}


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

.faq-answer{

display:grid;

grid-template-rows:0fr;

transition:.45s ease;

}

.faq-answer p{

overflow:hidden;

padding:0 35px;

margin:0;

color:var(--text-light);

line-height:1.9;

}

.faq-item.active .faq-answer{

grid-template-rows:1fr;

}

.faq-item.active .faq-answer p{

padding:0 35px 30px;

}


/*==================================================
SCAN EFFECT
==================================================*/

.faq-item::after{

content:"";

position:absolute;

top:0;

left:-120%;

width:50%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(99,232,255,.08)

transparent

);

transform:skewX(-25deg);

transition:1s;

pointer-events:none;

}

.faq-item:hover::after{

left:160%;

}


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

.faq-item.active{


box-shadow:

var(--shadow-lg),

var(--glow-primary);

border-color:var(--border-primary);

}

/*==================================================
FAQ GLOW
==================================================*/

.faq::before{

content:"";

position:absolute;

top:-250px;

left:50%;

transform:translateX(-50%);

width:700px;

height:700px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(108,99,255,.08),

transparent 70%

);

pointer-events:none;

}