*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --zn-indigo: #2b2f77;
    --zn-violet: #4c53c4;
    --zn-lime: #a8e10c;
    --zn-ink: #14152e;
    --zn-mute: #6a6c8f;
    --zn-paper: #f6f6fd;
    --zn-panel: #ffffff;
    --zn-edge: #dcdcf2;
    --zn-title: "Verdana", "Tahoma", sans-serif;
    --zn-text: Arial, Helvetica, sans-serif;
    --zn-r1: 16px;
    --zn-r2: 22px;
    --zn-r3: 28px;
    --zn-sh1: 0 10px 26px rgba(43, 47, 119, .10);
    --zn-sh2: 0 20px 46px rgba(43, 47, 119, .18);
    --zn-sh3: 0 32px 74px rgba(20, 21, 46, .24);
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--zn-text);
    background:
        radial-gradient(1100px 560px at 84% -6%, rgba(76, 83, 196, .16), transparent 62%),
        radial-gradient(760px 480px at 4% 12%, rgba(168, 225, 12, .09), transparent 60%),
        linear-gradient(180deg, #f6f6fd 0%, #ebeafa 100%);
    color: var(--zn-ink);
    line-height: 1.72;
    font-size: 16px;
}

a {
    color: var(--zn-violet);
    text-decoration: none;
    transition: color .2s ease;
}
a:hover { color: var(--zn-indigo); }

/* ---------- шапка ---------- */
.pageHead_zn {
    position: sticky;
    top: 0;
    z-index: 30;
    padding: 20px;
    background: rgba(246, 246, 253, .88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 2px solid var(--zn-edge);
}
.pageHeadInner_zn {
    max-width: 1160px;
    margin: 0 auto;
    text-align: center;
}
.pageHeadBrand_zn {
    font-family: var(--zn-title);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--zn-indigo);
}
.pageHeadBrand_zn:hover { color: var(--zn-violet); }

/* ---------- широкий кольоровий hero ---------- */
.pageHero_zn {
    background:
        radial-gradient(760px 420px at 88% 4%, rgba(168, 225, 12, .22), transparent 64%),
        linear-gradient(135deg, var(--zn-indigo) 0%, var(--zn-violet) 100%);
    color: #ffffff;
    padding: 74px 20px 82px;
    border-bottom: 6px solid var(--zn-lime);
}
.pageHeroInner_zn {
    max-width: 1000px;
    margin: 0 auto;
}
.pageHeroKind_zn {
    font-family: var(--zn-title);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--zn-lime);
    margin-bottom: 16px;
}
.pageHeroTitle_zn {
    font-family: var(--zn-title);
    font-weight: 700;
    font-size: clamp(28px, 5vw, 52px);
    line-height: 1.18;
    margin-bottom: 18px;
    max-width: 900px;
}
.pageHeroText_zn {
    max-width: 720px;
    font-size: 17px;
    line-height: 1.78;
    color: rgba(255, 255, 255, .84);
}
.pageHeroDate_zn {
    display: inline-block;
    margin-top: 26px;
    padding: 8px 18px;
    border: 2px solid rgba(168, 225, 12, .6);
    border-radius: var(--zn-r1);
    font-size: 13px;
    letter-spacing: .04em;
    color: #ffffff;
}
@media (max-width: 640px) {
    .pageHero_zn { padding: 54px 20px 62px; }
}

/* ---------- стовпчик пронумерованих карток ---------- */
.docFlow_zn {
    max-width: 1000px;
    margin: 0 auto;
    padding: 66px 20px 90px;
    display: grid;
    gap: 52px;
}
.docCard_zn {
    position: relative;
    width: 100%;
    padding: 54px 44px 38px;
    border-radius: var(--zn-r3);
    border: 2px solid var(--zn-edge);
    box-shadow: var(--zn-sh1);
}
.docCard_zn:nth-child(4n + 1) { background: var(--zn-panel); }
.docCard_zn:nth-child(4n + 2) { background: linear-gradient(180deg, #ffffff 0%, #f1f0fc 100%); }
.docCard_zn:nth-child(4n + 3) { background: #f8f8ff; }
.docCard_zn:nth-child(4n + 4) { background: linear-gradient(180deg, #fbfcf3 0%, #f4f4fd 100%); }

.docCardNum_zn {
    position: absolute;
    top: -26px;
    left: 34px;
    width: 66px;
    height: 66px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    font-family: var(--zn-title);
    font-size: 26px;
    font-weight: 700;
    color: var(--zn-lime);
    background: var(--zn-indigo);
    box-shadow: var(--zn-sh2);
}
.docCardTitle_zn {
    font-family: var(--zn-title);
    font-weight: 700;
    font-size: clamp(20px, 2.8vw, 28px);
    line-height: 1.26;
    color: var(--zn-indigo);
    margin-bottom: 16px;
}
.docCardBody_zn p {
    color: var(--zn-mute);
    margin-bottom: 14px;
}
.docCardBody_zn p:last-child { margin-bottom: 0; }
.docCardBody_zn ul,
.docCardBody_zn ol {
    padding-left: 22px;
    margin: 0 0 16px;
    color: var(--zn-mute);
}
.docCardBody_zn li { margin-bottom: 8px; }
.docCardBody_zn li::marker { color: var(--zn-violet); }
.docCardBody_zn strong { color: var(--zn-ink); }
.docCardBody_zn h3 {
    font-family: var(--zn-title);
    font-size: 17px;
    font-weight: 700;
    color: var(--zn-ink);
    margin: 22px 0 10px;
}

@media (max-width: 740px) {
    .docFlow_zn { gap: 44px; padding: 52px 16px 70px; }
    .docCard_zn { padding: 46px 22px 30px; border-radius: 22px; }
    .docCardNum_zn {
        top: -22px;
        left: 20px;
        width: 54px;
        height: 54px;
        border-radius: 17px;
        font-size: 21px;
    }
}

/* ---------- футер ---------- */
.footRow_zn {
    margin-top: 0;
    background: var(--zn-indigo);
    color: #c8caea;
    padding: 30px 20px 26px;
    text-align: center;
    border-top: 6px solid var(--zn-lime);
}
.footRowInner_zn {
    max-width: 900px;
    margin: 0 auto;
}
.footNav_zn {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
    margin-bottom: 14px;
}
.footNav_zn a {
    color: #ffffff;
    font-family: var(--zn-title);
    font-size: 12px;
    letter-spacing: .06em;
    border-bottom: 1px solid rgba(168, 225, 12, .6);
    padding-bottom: 2px;
}
.footNav_zn a:hover { color: var(--zn-lime); }
.footNote_zn {
    font-size: 12px;
    color: #b6b8e0;
    margin-bottom: 10px;
}
.footFine_zn {
    font-size: 11px;
    line-height: 1.75;
    color: #9a9dcb;
    max-width: 780px;
    margin: 0 auto;
}