/* ==========================================================================
   DC FAQ — accordion left, USP / call-to-action panel right
   ========================================================================== */

.dcfaq {
    position: relative;
    padding: clamp(72px, 9vw, 130px) clamp(20px, 4vw, 60px);
    background: var(--dc-bg);
    font-family: var(--dc-font-body);
}

.dcfaq__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(290px, 1fr);
    gap: clamp(30px, 4vw, 64px);
    align-items: start;
}

.dcfaq__main { min-width: 0; }
.dcfaq__list { display: flex; flex-direction: column; gap: 14px; }

/* ---- Accordion ---------------------------------------------------------- */
.dcfaq__item {
    background: #fff;
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius-md);
    overflow: hidden;
    box-shadow: var(--dc-shadow-sm);
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.dcfaq__item[open] { box-shadow: var(--dc-shadow-md); border-color: var(--dc-line-strong); }
.dcfaq__item[open] .dcfaq__q-toggle { transform: rotate(45deg); background: var(--dc-primary-2); color: #fff; }
.dcfaq__item[open] .dcfaq__q-icon { background: linear-gradient(135deg, var(--dc-primary), var(--dc-primary-2)); color: #fff; }

.dcfaq__q {
    display: flex; align-items: center; gap: 14px;
    padding: 20px 22px;
    list-style: none;
    cursor: pointer;
    color: var(--dc-ink);
    font-family: var(--dc-font-display);
    font-size: 16px;
    font-weight: 600;
    transition: color 0.3s ease;
}
.dcfaq__q::-webkit-details-marker { display: none; }
.dcfaq__q:hover { color: var(--dc-primary-2); }

.dcfaq__q-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    padding: 9px;
    border-radius: 11px;
    background: rgba(0, 119, 204, 0.08);
    color: var(--dc-primary-2);
    transition: all 0.4s ease;
}
.dcfaq__q-icon svg { width: 100%; height: 100%; }
.dcfaq__q-text { flex: 1; }
.dcfaq__q-toggle {
    flex-shrink: 0;
    width: 32px; height: 32px;
    padding: 9px;
    border-radius: 50%;
    background: var(--dc-bg-2);
    color: var(--dc-ink);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.4s ease;
}
.dcfaq__q-toggle svg { width: 100%; height: 100%; }

.dcfaq__a {
    padding: 0 22px 22px 72px;
    color: var(--dc-ink-soft);
    font-size: 14.5px;
    line-height: 1.7;
    animation: dcfaq-slide 0.4s ease both;
}
.dcfaq__a p { margin: 0; }

@keyframes dcfaq-slide {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Aside: image + USP + CTA ------------------------------------------ */
.dcfaq__aside {
    position: sticky;
    top: 24px;
}
.dcfaq__card {
    border-radius: var(--dc-radius-lg);
    overflow: hidden;
    box-shadow: var(--dc-shadow-md);
}
.dcfaq__card-media {
    display: block;
    aspect-ratio: 4 / 3;
    background-color: var(--dc-bg-2);
    background-size: cover;
    background-position: center;
}
.dcfaq__card-body {
    padding: clamp(22px, 2.4vw, 32px);
    background: linear-gradient(165deg, #0c2147 0%, #0b1f33 100%);
    color: #fff;
}
.dcfaq__card-title {
    margin: 0;
    font-family: var(--dc-font-display);
    font-size: clamp(19px, 1.8vw, 24px);
    font-weight: 700;
    line-height: 1.2;
}
.dcfaq__card-text {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.74);
}

.dcfaq__usps {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dcfaq__usp {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 13.5px;
    font-weight: 600;
    color: #f3f5ff;
}
.dcfaq__usp-ico {
    flex-shrink: 0;
    width: 24px; height: 24px;
    padding: 5px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dc-accent), var(--dc-accent-2));
    color: #fff;
}
.dcfaq__usp-ico svg { width: 100%; height: 100%; display: block; }

.dcfaq__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 24px;
    padding: 15px 24px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--dc-accent), var(--dc-accent-2));
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 14px 28px -12px rgba(0, 191, 166, 0.8);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dcfaq__cta svg { width: 17px; height: 17px; transition: transform 0.3s ease; }
.dcfaq__cta:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(0, 191, 166, 0.9); }
.dcfaq__cta:hover svg { transform: translateX(4px); }
.dcfaq__cta:focus-visible { outline: 3px solid var(--dc-primary-2); outline-offset: 3px; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
    .dcfaq__inner { grid-template-columns: 1fr; gap: 40px; }
    .dcfaq__aside { position: static; max-width: 480px; }
}