.faq-page{
    background:var(--color-bg);
}

.faq-hero{
    padding:90px 0;
    background:var(--color-white);
}

.faq-list{
    padding:90px 0;
}

.faq-list__grid{
    display:grid;
    gap:22px;
}

.faq-item{
    overflow:hidden;

    border-radius:var(--radius-md);
    background:var(--color-white);
    border:1px solid var(--color-border);
    box-shadow:var(--shadow-soft);
}

.faq-item__question{
    width:100%;
    padding:28px 34px;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:25px;

    border:none;
    background:transparent;

    font-family:var(--font-title);
    font-size:30px;
    line-height:1.15;
    color:var(--color-primary);
    text-align:left;

    cursor:pointer;
}

.faq-item__question span{
    flex-shrink:0;
    font-size:26px;
    transition:.3s;
}

.faq-item__answer{
    max-height:0;
    overflow:hidden;
    transition:.4s ease;
}

.faq-item__answer p{
    padding:0 34px 30px;

    max-width:850px;

    font-size:16px;
    line-height:1.8;
    color:var(--color-text);
}

.faq-item.active .faq-item__answer{
    max-height:620px;
}

.faq-item.active .faq-item__question span{
    transform:rotate(180deg);
}

.faq-cta{
    padding:0 0 90px;
}

.faq-cta__box{
    padding:55px;
    border-radius:var(--radius-lg);
    background:var(--color-primary);
    color:var(--color-white);
    text-align:center;
}

.faq-cta__box .section-title{
    color:var(--color-white);
    margin-bottom:20px;
}

.faq-cta__box p{
    max-width:650px;
    margin:0 auto 30px;

    font-size:17px;
    line-height:1.8;
}

.faq-cta__box .btn{
    background:var(--color-white);
    color:var(--color-primary);
}

@media(max-width:576px){
    .faq-hero,
    .faq-list{
        padding:60px 0;
    }

    .faq-item__question{
        padding:24px 22px;
        font-size:25px;
    }

    .faq-item__answer p{
        padding:0 22px 24px;
    }

    .faq-cta{
        padding-bottom:60px;
    }

    .faq-cta__box{
        padding:35px 24px;
    }
}

.faq-item{
    overflow:hidden;
}

.faq-item__question{
    min-width:0;
    width:100%;
    max-width:100%;

    align-items:flex-start;
    gap:16px;

    white-space:normal;
    text-align:left;
    overflow-wrap:break-word;
}

.faq-item__question span{
    flex-shrink:0;
    margin-top:4px;
}

@media(max-width:576px){

    .faq-list{
        padding:45px 0;
    }

    .faq-list .container{
        padding:0 12px;
    }

    .faq-item{
        border-radius:18px;
    }

    .faq-item__question{
        padding:20px 16px;

        display:grid;
        grid-template-columns:1fr 24px;

        font-size:22px;
        line-height:1.15;
    }

    .faq-item__question span{
        justify-self:end;
        font-size:18px;
    }

    .faq-item__answer p{
        padding:0 16px 22px;
        font-size:14px;
        line-height:1.7;
    }

    .faq-cta__box{
        padding:30px 20px;
    }
}

.faq-item__answer{
    max-height:0;
    overflow:hidden;
    transition:.2s ease;
}

.faq-item.active .faq-item__answer{
    max-height:3000px;
}