/* ===========================================================================
   DC FAQ Split — dc-faqs
   =========================================================================== */

.dc-faqs,
.dc-faqs *,
.dc-faqs *::before,
.dc-faqs *::after{
    font-family:'DM Sans','Poppins',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    box-sizing:border-box;
}

.dc-faqs{
    --faq-primary:#a0c040;
    --faq-dark:#2b2926;
    --faq-bg:#ffffff;
    --faq-muted:#7a726a;
    --faq-surface:#faf7f4;
    --faq-soft:#f6f3ef;
    --faq-border:rgba(43,41,38,0.08);
    --faq-border-strong:rgba(43,41,38,0.14);
    --faq-serif:'Playfair Display', Georgia, serif;
}

/* ═════════ SECTION ═════════ */
.dc-faqs{
    background:var(--faq-bg);
    padding:110px 0;
    position:relative;
    overflow:hidden;
}
.dc-faqs__container{
    max-width:1400px;
    margin:0 auto;
    padding:0 40px;
    position:relative;
}

/* Editorial word mark achter content */
.dc-faqs__mark{
    position:absolute;
    top:60px;
    right:-40px;
    font-family:var(--faq-serif);
    font-style:italic;
    font-size:clamp(140px, 18vw, 300px);
    line-height:0.85;
    color:var(--faq-surface);
    pointer-events:none;
    user-select:none;
    white-space:nowrap;
    z-index:0;
    letter-spacing:-0.03em;
    opacity:0.6;
}

/* ═════════ HEADER ═════════ */
.dc-faqs__header{
    max-width:720px;
    margin:0 0 60px;
    position:relative;
    z-index:1;
}
.dc-faqs__title{
    margin:16px 0 16px;
    font-family:var(--faq-serif);
    font-style:italic;
    font-weight:500;
    font-size:clamp(34px, 4.4vw, 60px);
    line-height:1.05;
    letter-spacing:-0.8px;
    color:var(--faq-dark);
}
.dc-faqs__title strong{
    color:var(--faq-primary);
    font-weight:500;
    font-style:italic;
}
.dc-faqs__desc{
    margin:0;
    font-size:16px;
    line-height:1.7;
    color:var(--faq-muted);
    max-width:560px;
}

/* ═════════ LAYOUT ═════════ */
.dc-faqs__grid{
    display:grid;
    grid-template-columns:1.25fr 1fr;
    gap:48px;
    align-items:start;
    position:relative;
    z-index:1;
}

/* ═════════ FAQ LIST (left) ═════════ */
.dc-faqs__list{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.dc-faqs__item{
    background:#ffffff;
    border:1px solid var(--faq-border);
    border-radius:12px;
    overflow:hidden;
    transition:border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
    position:relative;
}
.dc-faqs__item::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:3px;
    height:0;
    background:var(--faq-primary);
    transition:height 0.5s cubic-bezier(.2,.8,.2,1);
}
.dc-faqs__item.is-open{
    border-color:transparent;
    box-shadow:
        0 18px 40px -18px rgba(43,41,38,0.2),
        0 6px 14px -6px rgba(160,192,64,0.12);
    transform:translateY(-2px);
}
.dc-faqs__item.is-open::before{
    height:100%;
}

.dc-faqs__q{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    width:100%;
    padding:22px 26px;
    background:transparent;
    border:none;
    cursor:pointer;
    font-family:inherit;
    text-align:left;
    transition:background 0.3s ease;
}
.dc-faqs__q:hover{
    background:var(--faq-surface);
}
.dc-faqs__item.is-open .dc-faqs__q:hover{
    background:transparent;
}

.dc-faqs__q-number{
    flex-shrink:0;
    width:32px;
    height:32px;
    border-radius:50%;
    background:var(--faq-surface);
    border:1px solid var(--faq-border);
    color:var(--faq-primary);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-family:var(--faq-serif);
    font-style:italic;
    font-weight:600;
    font-size:14px;
    transition:all 0.35s ease;
}
.dc-faqs__item.is-open .dc-faqs__q-number{
    background:var(--faq-primary);
    color:#ffffff;
    border-color:var(--faq-primary);
    box-shadow:0 6px 14px -4px rgba(160,192,64,0.45);
}

.dc-faqs__q-text{
    flex:1;
    font-size:16px;
    font-weight:700;
    color:var(--faq-dark);
    line-height:1.35;
    letter-spacing:-0.2px;
}

.dc-faqs__q-toggle{
    flex-shrink:0;
    width:36px;
    height:36px;
    border-radius:50%;
    background:var(--faq-surface);
    border:1px solid var(--faq-border);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:all 0.45s cubic-bezier(.22,1,.36,1);
    position:relative;
}
.dc-faqs__q-toggle::before,
.dc-faqs__q-toggle::after{
    content:'';
    position:absolute;
    background:var(--faq-dark);
    border-radius:1px;
    transition:all 0.35s cubic-bezier(.22,1,.36,1);
}
.dc-faqs__q-toggle::before{
    width:12px;
    height:2px;
}
.dc-faqs__q-toggle::after{
    width:2px;
    height:12px;
}
.dc-faqs__item.is-open .dc-faqs__q-toggle{
    background:var(--faq-dark);
    border-color:var(--faq-dark);
    transform:rotate(180deg);
}
.dc-faqs__item.is-open .dc-faqs__q-toggle::before,
.dc-faqs__item.is-open .dc-faqs__q-toggle::after{
    background:#ffffff;
}
.dc-faqs__item.is-open .dc-faqs__q-toggle::after{
    height:0;
}

/* Answer — expanding panel */
.dc-faqs__a{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.5s cubic-bezier(.22,1,.36,1);
}
.dc-faqs__item.is-open .dc-faqs__a{
    max-height:500px;
}
.dc-faqs__a-inner{
    padding:0 26px 26px 84px;
    font-size:15px;
    line-height:1.7;
    color:var(--faq-muted);
    border-top:1px dashed var(--faq-border);
    padding-top:18px;
    margin:0 26px;
}

/* ═════════ RIGHT PANEL (image + usp + cta) ═════════ */
.dc-faqs__right{
    position:relative;
    border-radius:14px;
    overflow:hidden;
    background-color:var(--faq-dark);
    background-size:cover;
    background-position:center;
    min-height:620px;
    display:flex;
    flex-direction:column;
    box-shadow:
        0 32px 72px -24px rgba(43,41,38,.35),
        0 12px 28px -12px rgba(160,192,64,.18);
}
.dc-faqs__right::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,
        rgba(26,24,22,.35) 0%,
        rgba(26,24,22,.55) 50%,
        rgba(26,24,22,.92) 100%);
    z-index:1;
}
/* Visgraat diagonal overlay */
.dc-faqs__right-pattern{
    position:absolute;
    inset:0;
    background-image:repeating-linear-gradient(
        135deg,
        transparent 0 26px,
        rgba(255,255,255,.04) 26px 27px,
        transparent 27px 54px
    );
    pointer-events:none;
    z-index:2;
}
/* Pink corner glow */
.dc-faqs__right-glow{
    position:absolute;
    top:-80px;
    right:-80px;
    width:320px;
    height:320px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(160,192,64,.32), transparent 65%);
    pointer-events:none;
    z-index:2;
}

.dc-faqs__right-inner{
    position:relative;
    z-index:3;
    padding:44px 40px 40px;
    color:#ffffff;
    display:flex;
    flex-direction:column;
    height:100%;
    flex:1;
}

.dc-faqs__right-kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:16px;
    padding:6px 14px 6px 10px;
    background:rgba(160,192,64,.15);
    border:1px solid rgba(160,192,64,.35);
    border-radius:100px;
    color:#fff;
    font-size:10px;
    font-weight:800;
    letter-spacing:.22em;
    text-transform:uppercase;
    align-self:flex-start;
}
.dc-faqs__right-kicker::before{
    content:'';
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--faq-primary);
    animation:dc-faqs-pulse 2s ease-in-out infinite;
}
@keyframes dc-faqs-pulse{
    0%, 100% { opacity:1; transform:scale(1); box-shadow:0 0 0 0 rgba(160,192,64,.6); }
    50%      { opacity:.4; transform:scale(1.3); box-shadow:0 0 0 8px rgba(160,192,64,0); }
}

.dc-faqs__right-title{
    margin:0 0 auto;
    font-family:var(--faq-serif);
    font-style:italic;
    font-weight:500;
    font-size:clamp(26px, 2.6vw, 38px);
    line-height:1.08;
    letter-spacing:-0.6px;
    color:#fff;
    max-width:420px;
    padding-bottom:32px;
}

.dc-faqs__usps{
    list-style:none;
    margin:0 0 32px;
    padding:24px 0;
    display:flex;
    flex-direction:column;
    gap:14px;
    border-top:1px solid rgba(255,255,255,.12);
    border-bottom:1px solid rgba(255,255,255,.12);
}
.dc-faqs__usp{
    display:flex;
    align-items:center;
    gap:14px;
    font-size:14px;
    font-weight:600;
    color:rgba(255,255,255,.92);
}
.dc-faqs__usp-check{
    flex-shrink:0;
    width:28px;
    height:28px;
    border-radius:50%;
    background:rgba(160,192,64,.18);
    border:1px solid rgba(160,192,64,.4);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--faq-primary);
}
.dc-faqs__usp-check svg{
    width:14px;
    height:14px;
    stroke:currentColor;
    fill:none;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* CTA wrapper — invert outline voor dark bg */
.dc-faqs__cta-wrap{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.dc-faqs__cta-note{
    font-size:11px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(255,255,255,.5);
    display:inline-flex;
    align-items:center;
    gap:8px;
}
.dc-faqs__cta-note::before{
    content:'';
    width:18px;
    height:1px;
    background:rgba(255,255,255,.35);
}

/* ═════════ RESPONSIVE ═════════ */
@media (max-width: 1024px){
    .dc-faqs { padding:80px 0; }
    .dc-faqs__grid{
        grid-template-columns:1fr;
        gap:36px;
    }
    .dc-faqs__right { min-height:540px; }
    .dc-faqs__mark { display:none; }
}
@media (max-width: 768px){
    .dc-faqs { padding:60px 0; }
    .dc-faqs__container { padding:0 20px; }
    .dc-faqs__header { margin-bottom:40px; }
    .dc-faqs__q { padding:18px 18px; gap:14px; }
    .dc-faqs__q-text { font-size:14px; }
    .dc-faqs__a-inner { padding-left:60px; font-size:14px; }
    .dc-faqs__right-inner { padding:32px 26px 28px; }
    .dc-faqs__right { min-height:480px; }
}