/* ==========================================================================
   DC Newsletter — sign-up section with a cascading window-card stack
   (inspired by design-006)
   ========================================================================== */

.dcns {
    position: relative;
    overflow: hidden;
    padding: clamp(64px, 8vw, 120px) clamp(20px, 4vw, 60px);
    background:
        radial-gradient(720px 460px at 92% 6%, rgba(0, 119, 204, 0.08), transparent 65%),
        var(--dc-bg);
    font-family: var(--dc-font-body);
}

.dcns__inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    /* minmax(0,…) zodat de kolommen mogen krimpen i.p.v. open te breken */
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(36px, 5vw, 84px);
    align-items: center;
}

/* ---- Copy column -------------------------------------------------------- */
.dcns__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.dcns__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px 8px 11px;
    border-radius: 999px;
    color: var(--dc-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.13em;
}
.dcns__eyebrow .dc-ebmark svg { width: 100%; height: 100%; }

.dcns__title {
    margin: 18px 0 0;
    font-family: var(--dc-font-display);
    font-weight: 800;
    font-size: clamp(33px, 4.6vw, 58px);
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: var(--dc-ink);
}

.dcns__subtitle {
    margin: 18px 0 0;
    max-width: 30ch;
    font-size: clamp(16px, 1.3vw, 20px);
    font-weight: 500;
    line-height: 1.5;
}

/* ---- Sign-up form ------------------------------------------------------- */
.dcns__form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    max-width: 500px;
    margin-top: 28px;
}
.dcns__field {
    flex: 1 1 240px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 6px 0 18px;
    background: #fff;
    border: 1px solid var(--dc-line-strong);
    border-radius: 999px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.dcns__field:focus-within {
    border-color: var(--dc-primary-2);
    box-shadow: 0 0 0 4px rgba(0, 119, 204, 0.15);
}
.dcns__field-ico {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--dc-muted);
}
.dcns__field-ico svg { width: 100%; height: 100%; display: block; }
.dcns__field input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    padding: 15px 0;
    font-family: inherit;
    font-size: 15px;
    color: var(--dc-ink);
}
.dcns__field input::placeholder { color: var(--dc-muted); }
.dcns__field input:focus { outline: none; }

.dcns__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    cursor: pointer;
    padding: 15px 26px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--dc-primary), var(--dc-primary-2));
    box-shadow: 0 14px 28px -12px rgba(0, 85, 157, 0.85);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.3s ease;
}
.dcns__btn svg { width: 17px; height: 17px; transition: transform 0.3s ease; }
.dcns__btn:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -12px rgba(0, 85, 157, 0.95); }
.dcns__btn:hover svg { transform: translateX(4px); }
.dcns__btn:focus-visible { outline: 3px solid var(--dc-primary-2); outline-offset: 3px; }
.dcns__form.is-done .dcns__btn { background: var(--dc-success); }

.dcns__note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 16px 0 0;
    font-size: 13px;
    color: var(--dc-ink-soft);
}
.dcns__note svg { width: 15px; height: 15px; color: var(--dc-success); flex-shrink: 0; }

.dcns__sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Decorative window-card stack -------------------------------------- */
.dcns__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}
.dcns__stack {
    position: relative;
    width: 470px;
    height: 348px;
}

.dcns__win {
    position: absolute;
    top: calc(var(--dcns-i, 0) * 44px);
    left: calc(var(--dcns-i, 0) * 42px);
    z-index: calc(var(--dcns-i, 0) + 1);
    width: 286px;
    background: #fff;
    border: 1px solid var(--dc-line);
    border-radius: 18px;
    box-shadow: 0 22px 44px -24px rgba(11, 31, 51, 0.5);
    overflow: hidden;
    animation: dcns-float 7s ease-in-out infinite;
    animation-delay: calc(var(--dcns-i, 0) * -1.15s);
}
.dcns__win-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--dc-line);
}
.dcns__win-ico {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    padding: 7px;
    border-radius: 9px;
    background: rgba(0, 85, 157, 0.1);
    color: var(--dc-primary);
}
.dcns__win-ico svg { width: 100%; height: 100%; display: block; }
.dcns__win-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--dc-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dcns__win-body {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 16px;
}
.dcns__win-line {
    height: 9px;
    border-radius: 999px;
    background: var(--dc-bg-2);
}
.dcns__win-line:nth-child(2) { width: 76%; }
.dcns__win-line--short { width: 44%; }
.dcns__win:last-of-type .dcns__win-ico {
    background: linear-gradient(135deg, var(--dc-primary), var(--dc-primary-2));
    color: #fff;
}

/* ---- Floating badges ---------------------------------------------------- */
.dcns__badge {
    position: absolute;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 16px 30px -14px rgba(11, 31, 51, 0.6);
}
.dcns__badge svg { width: 15px; height: 15px; }
.dcns__badge--1 {
    top: 2%;
    right: -5%;
    background: linear-gradient(135deg, var(--dc-primary), var(--dc-primary-2));
    animation: dcns-float 5.4s ease-in-out infinite;
}
.dcns__badge--2 {
    bottom: 6%;
    left: -7%;
    background: linear-gradient(135deg, var(--dc-primary), var(--dc-primary-2));
    animation: dcns-float 6.2s ease-in-out infinite;
    animation-delay: -2.6s;
}

@keyframes dcns-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

/* ---- Scroll-reveal motion ---------------------------------------------- */
.dcns[data-dcns-armed] .dcns__copy > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.dcns[data-dcns-armed] .dcns__copy > *:nth-child(2) { transition-delay: 0.08s; }
.dcns[data-dcns-armed] .dcns__copy > *:nth-child(3) { transition-delay: 0.16s; }
.dcns[data-dcns-armed] .dcns__copy > *:nth-child(4) { transition-delay: 0.24s; }
.dcns[data-dcns-armed] .dcns__copy > *:nth-child(5) { transition-delay: 0.32s; }
.dcns[data-dcns-armed].is-in .dcns__copy > * { opacity: 1; transform: none; }

.dcns[data-dcns-armed] .dcns__win {
    opacity: 0;
    transition: opacity 0.7s ease;
    transition-delay: calc(var(--dcns-i, 0) * 0.13s);
}
.dcns[data-dcns-armed].is-in .dcns__win { opacity: 1; }

.dcns[data-dcns-armed] .dcns__badge {
    opacity: 0;
    transition: opacity 0.6s ease 0.7s;
}
.dcns[data-dcns-armed].is-in .dcns__badge { opacity: 1; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
    .dcns__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 56px;
    }
    .dcns__copy { align-items: center; text-align: center; max-width: 100%; }
    .dcns__subtitle { max-width: 46ch; }
    .dcns__form { margin-left: auto; margin-right: auto; }
    .dcns__visual {
        order: 2;
        height: 360px;
    }
    /* de stapel heeft een vaste 470px-breedte — schaal 'm passend */
    .dcns__stack { transform: scale(0.84); }
}

@media (max-width: 560px) {
    .dcns__stack { transform: scale(0.62); }
    .dcns__visual { height: 290px; }
    .dcns__form {
        flex-direction: column;
        max-width: 100%;
    }
    /* in kolom-richting zou flex-basis de hoogte rekken — daarom resetten */
    .dcns__field { flex: 0 0 auto; width: 100%; }
    .dcns__btn { justify-content: center; width: 100%; padding-top: 14px; padding-bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .dcns *, .dcns *::before, .dcns *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .dcns[data-dcns-armed] .dcns__copy > *,
    .dcns[data-dcns-armed] .dcns__win,
    .dcns[data-dcns-armed] .dcns__badge { opacity: 1; transform: none; }
}