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

:root {
    --xpaper: #f4f8fc;
    --xsheet: #ffffff;
    --xtint: #e8f1f8;
    --xcyan: #3ee0ff;
    --xcyandim: #1a9dc4;
    --xcyandeep: #0c7391;
    --xink: #0d1a2e;
    --xmute: #51637f;
    --xedge: rgba(13, 26, 46, .14);
    --xedgesoft: rgba(13, 26, 46, .09);
    --xfield: #bfd0e2;
    --xdisplay: "Avenir Next", "Century Gothic", "Segoe UI", Arial, sans-serif;
    --xbody: "Helvetica Neue", Arial, "Segoe UI", sans-serif;
    --xr1: 10px;
    --xr2: 18px;
    --xr3: 26px;
    --xlift1: 0 8px 20px rgba(13, 38, 66, .09);
    --xlift2: 0 18px 44px rgba(13, 38, 66, .14);
    --xhalo: 0 12px 30px rgba(9, 40, 60, .3);
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--xbody);
    background:
        radial-gradient(circle at 50% -6%, rgba(62, 224, 255, .22), transparent 46%),
        radial-gradient(circle at 8% 82%, rgba(26, 157, 196, .13), transparent 42%),
        linear-gradient(180deg, #ffffff 0%, #e9f1f9 100%);
    background-attachment: fixed;
    color: var(--xink);
    line-height: 1.75;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--xcyandeep);
    text-decoration: none;
    transition: color .2s ease, opacity .2s ease;
}
a:hover { color: #08596f; text-decoration: underline; }

/* ---------- шапка ---------- */
.pagehead {
    padding: 20px;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--xedge);
}
.headinner {
    max-width: 1160px;
    margin: 0 auto;
    text-align: center;
}
.headbrand {
    font-family: var(--xdisplay);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--xink);
    text-decoration: none;
}
.headbrand:hover { color: var(--xcyandeep); text-decoration: none; }

/* ---------- вступ сторінки ---------- */
.doclead {
    padding: 74px 20px 44px;
    text-align: center;
}
.doctag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 18px;
    margin-bottom: 20px;
    border-radius: 999px;
    border: 1px solid rgba(12, 115, 145, .36);
    background: rgba(62, 224, 255, .16);
    font-family: var(--xdisplay);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--xcyandeep);
}
.doctitle {
    max-width: 860px;
    margin: 0 auto 16px;
    font-family: var(--xdisplay);
    font-weight: 700;
    font-size: clamp(29px, 5vw, 52px);
    line-height: 1.16;
    color: var(--xink);
}
.doctitle em {
    font-style: normal;
    color: var(--xcyandeep);
    background: linear-gradient(180deg, transparent 63%, rgba(62, 224, 255, .5) 63%);
    padding: 0 .06em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.docsub {
    max-width: 660px;
    margin: 0 auto;
    color: var(--xmute);
    font-size: 17px;
    line-height: 1.8;
}

/* ---------- журнальна колонка ---------- */
.docbody {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px 80px;
}

.docstamp {
    display: block;
    margin-bottom: 40px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--xedgesoft);
    font-family: var(--xdisplay);
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--xmute);
}
.docstamp strong { color: var(--xink); font-weight: 700; }

.docpart {
    position: relative;
    padding: 34px 0 30px;
    border-top: 1px solid var(--xedgesoft);
}
.docpart:first-of-type { border-top: 0; padding-top: 0; }

.parthead {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 18px;
}
.partnum {
    font-family: var(--xdisplay);
    font-weight: 800;
    font-size: clamp(46px, 8vw, 82px);
    line-height: .82;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(12, 115, 145, .72);
}
.parttitle {
    font-family: var(--xdisplay);
    font-weight: 700;
    font-size: clamp(20px, 2.9vw, 29px);
    line-height: 1.22;
    color: var(--xink);
}

.partlede {
    margin: 0 0 22px;
    font-size: 17px;
    line-height: 1.78;
    color: var(--xink);
}
.partlede::first-letter {
    float: left;
    margin: 6px 12px 0 0;
    font-family: var(--xdisplay);
    font-weight: 800;
    font-size: 68px;
    line-height: .78;
    color: var(--xcyandeep);
}

.partcols {
    column-count: 2;
    column-gap: 42px;
    column-rule: 1px solid var(--xedgesoft);
}
.partcols > * { break-inside: avoid; }
.partcols p {
    color: var(--xmute);
    margin: 0 0 14px;
}
.partcols h3 {
    font-family: var(--xdisplay);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--xink);
    margin: 0 0 8px;
}
.partcols ul,
.partcols ol {
    margin: 0 0 16px;
    padding-left: 18px;
    color: var(--xmute);
}
.partcols li { margin-bottom: 8px; }
.partcols li::marker { color: var(--xcyandeep); }
.partcols strong { color: var(--xink); }

@media (max-width: 760px) {
    .partcols { column-count: 1; column-rule: none; }
    .partlede::first-letter { font-size: 54px; }
    .doclead { padding-top: 56px; }
    .parthead { gap: 14px; }
}

/* ---------- акценти на всю ширину ---------- */
.pullnote {
    margin: 26px 0 4px;
    padding: 22px 24px;
    border-radius: var(--xr2);
    background: linear-gradient(135deg, rgba(62, 224, 255, .18), rgba(255, 255, 255, .96));
    border: 1px solid rgba(12, 115, 145, .3);
    box-shadow: var(--xlift1);
}
.pullnote p { margin: 0; color: var(--xink); font-size: 15px; }
.pullnote strong { color: var(--xcyandeep); }

.datagrid {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0 6px;
    border-radius: var(--xr1);
    overflow: hidden;
    border: 1px solid var(--xedge);
    box-shadow: var(--xlift1);
}
.datagrid th {
    background: linear-gradient(135deg, rgba(62, 224, 255, .34), rgba(26, 157, 196, .22));
    color: var(--xink);
    text-align: left;
    padding: 13px 16px;
    font-family: var(--xdisplay);
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.datagrid td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--xedgesoft);
    color: var(--xmute);
    background: #ffffff;
    font-size: 15px;
}
.datagrid tr:nth-child(even) td { background: var(--xtint); }
.datagrid tr:last-child td { border-bottom: none; }

.tablescroll { overflow-x: auto; }

.markrow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 16px;
    margin: 24px 0 6px;
}
.markcard {
    padding: 20px 18px;
    border-radius: var(--xr2);
    background: #ffffff;
    border: 1px solid var(--xedge);
    box-shadow: var(--xlift1);
}
.markcard b {
    display: block;
    font-family: var(--xdisplay);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--xcyandeep);
    margin-bottom: 6px;
}
.markcard span {
    display: block;
    font-size: 14px;
    line-height: 1.7;
    color: var(--xmute);
}

/* ---------- підвал ---------- */
.footzone {
    margin-top: 20px;
    padding: 26px 20px 22px;
    background: rgba(255, 255, 255, .82);
    border-top: 1px solid var(--xedge);
    text-align: center;
}
.footinner { max-width: 900px; margin: 0 auto; }
.footnav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
    margin-bottom: 12px;
}
.footnav a {
    color: var(--xmute);
    font-size: 12px;
    letter-spacing: .04em;
    text-decoration: none;
}
.footnav a:hover { color: var(--xcyandeep); text-decoration: none; }
.footlegal {
    font-size: 11px;
    line-height: 1.8;
    color: var(--xmute);
    margin-bottom: 9px;
}
.footnote { font-size: 11px; color: var(--xmute); }