.faq-section { max-width: 1000px; margin: 70px auto; padding: 20px; }
.faq-wrap {
    display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 0;
    border-radius: 24px; overflow: hidden;
    background: var(--color0601);
    box-shadow: 0 20px 60px color-mix(in srgb, var(--color0602) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--color0602) 8%, transparent);
}
.faq-side {
    padding: 36px 24px;
    background: linear-gradient(160deg, var(--color0603), var(--color0604));
}
.faq-title {
    font-family: Sahel-SemiBold; font-size: 26px; margin: 0 0 24px;
    color: #fff; text-align: right;
}
.faq-tabs { display: flex; flex-direction: column; gap: 8px; }
.faq-tab {
    width: 100%; direction: rtl; cursor: pointer;
    display: flex; align-items: center; gap: 12px;
    padding: 15px 16px; border-radius: 14px; border: none;
    background: color-mix(in srgb, #ffffff 8%, transparent);
    color: color-mix(in srgb, #ffffff 82%, transparent);
    font-family: Sahel-Light; font-size: 14.5px; text-align: right;
    transition: all 0.3s ease;
}
.faq-tab span { flex: 1; }
.faq-tab i { transition: transform 0.3s ease; opacity: 0.6; }
.faq-tab:hover { background: color-mix(in srgb, #ffffff 16%, transparent); }
.faq-tab.active {
    background: #fff; color: var(--color0603);
    font-family: Sahel-SemiBold;
    box-shadow: 0 8px 20px color-mix(in srgb, #000000 15%, transparent);
}
.faq-tab.active i { transform: translateX(-4px); opacity: 1; }
.faq-panel { position: relative; padding: 44px 36px; }
.faq-content {
    position: absolute; inset: 44px 36px;
    opacity: 0; visibility: hidden; transform: translateY(14px);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}
.faq-content.active { opacity: 1; visibility: visible; transform: translateY(0); position: relative; inset: auto; }
.faq-tag {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: Sahel-Light; font-size: 13px;
    padding: 6px 14px; border-radius: 50px; margin-bottom: 18px;
    color: var(--color0603);
    background: color-mix(in srgb, var(--color0603) 12%, transparent);
}
.faq-content h6 {
    font-family: Sahel-SemiBold; font-size: 20px; margin: 0 0 16px;
    color: var(--color0602); text-align: right; direction: rtl; line-height: 1.6;
}
.faq-text {
    direction: rtl; text-align: justify;
    font-family: Sahel-Light; font-size: 15px; line-height: 2;
    color: color-mix(in srgb, var(--color0602) 65%, transparent);
}
@media (max-width: 720px) {
    .faq-wrap { grid-template-columns: 1fr; }
    .faq-panel { padding: 28px 20px; }
    .faq-content { inset: 28px 20px; }
    .faq-title { font-size: 22px; }
}