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

:root {
    --xvq-primary: #24313a;
    --xvq-secondary: #3f5a68;
    --xvq-accent: #16a67f;
    --xvq-ink: #1a2228;
    --xvq-muted: #5b6a73;
    --xvq-line: #dde5e9;
    --xvq-surface: #eef3f5;
    --xvq-panel: #ffffff;
    --xvq-night: #131b21;
    --xvq-ui: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --xvq-display: "Lucida Bright", "Book Antiqua", Georgia, serif;
    --xvq-r1: 6px;
    --xvq-r2: 14px;
    --xvq-r3: 24px;
    --xvq-sh1: 0 6px 16px rgba(19, 27, 33, .06);
    --xvq-sh2: 0 14px 34px rgba(19, 27, 33, .10);
    --xvq-sh3: 0 26px 60px rgba(19, 27, 33, .16);
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--xvq-display);
    background:
        radial-gradient(circle at 50% 0%, rgba(22, 166, 127, .13), transparent 44%),
        linear-gradient(180deg, #f7fafb 0%, #e4edf1 100%);
    color: var(--xvq-ink);
    line-height: 1.74;
    font-size: 16px;
}

a {
    color: var(--xvq-secondary);
    text-decoration: none;
    transition: color .2s ease;
}
a:hover { color: var(--xvq-accent); }

/* ---------- шапка ---------- */

.xvq-bar {
    position: sticky;
    top: 0;
    z-index: 30;
    padding: 14px 20px;
    background: rgba(247, 250, 251, .93);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--xvq-line);
}
.xvq-bar__inner {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.xvq-bar__logo {
    font-family: var(--xvq-ui);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--xvq-primary);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.xvq-bar__logo::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--xvq-accent);
    transform: rotate(45deg);
}

/* ---------- широка кольорова смуга із заголовком ---------- */

.xvq-band {
    width: 100%;
    background: linear-gradient(120deg, var(--xvq-primary) 0%, var(--xvq-secondary) 62%, #2c6f66 100%);
    color: #ffffff;
    padding: 54px 20px 46px;
    border-bottom: 4px solid var(--xvq-accent);
}
.xvq-band__inner {
    max-width: 1000px;
    margin: 0 auto;
}
.xvq-band__title {
    font-family: var(--xvq-display);
    font-size: clamp(27px, 4.2vw, 44px);
    line-height: 1.16;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 16px;
}
.xvq-band__stamp {
    display: inline-block;
    font-family: var(--xvq-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #d8fff2;
    background: rgba(22, 166, 127, .28);
    border: 1px solid rgba(22, 166, 127, .6);
    border-radius: 999px;
    padding: 5px 15px;
    line-height: 1.5;
}
.xvq-band__sub {
    margin-top: 18px;
    max-width: 720px;
    font-family: var(--xvq-ui);
    font-size: 16px;
    line-height: 1.72;
    color: rgba(255, 255, 255, .82);
}

/* ---------- стек панелей ---------- */

.xvq-doc {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px 70px;
    display: grid;
    gap: 18px;
}

.xvq-block {
    position: relative;
    background: var(--xvq-panel);
    border: 1px solid var(--xvq-line);
    border-left: 6px solid var(--xvq-accent);
    border-radius: 0 var(--xvq-r2) var(--xvq-r2) 0;
    box-shadow: var(--xvq-sh1);
    padding: 26px 32px 24px;
}
.xvq-block:nth-child(even) { border-left-color: var(--xvq-secondary); }

.xvq-block__eyebrow {
    display: block;
    font-family: var(--xvq-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--xvq-muted);
    margin-bottom: 7px;
}
.xvq-block__head {
    font-family: var(--xvq-display);
    font-size: clamp(20px, 2.6vw, 27px);
    line-height: 1.26;
    font-weight: 400;
    color: var(--xvq-primary);
    margin-bottom: 12px;
}
.xvq-block__body p {
    color: var(--xvq-muted);
    margin-bottom: 13px;
}
.xvq-block__body p:last-child { margin-bottom: 0; }
.xvq-block__body ul,
.xvq-block__body ol {
    padding-left: 22px;
    margin: 0 0 14px;
    color: var(--xvq-muted);
}
.xvq-block__body li { margin-bottom: 7px; }
.xvq-block__body strong { color: var(--xvq-ink); }

@media (max-width: 720px) {
    .xvq-block { padding: 22px 18px 20px; }
    .xvq-band { padding: 42px 20px 36px; }
}

/* ---------- виноска ---------- */

.xvq-flagnote {
    margin: 16px 0 4px;
    padding: 16px 18px;
    border-radius: var(--xvq-r1);
    background: rgba(22, 166, 127, .09);
    border: 1px dashed rgba(22, 166, 127, .5);
}
.xvq-flagnote p {
    margin: 0;
    color: var(--xvq-ink);
    font-size: 15px;
    line-height: 1.68;
}

/* ---------- таблиця ---------- */

.xvq-sheet-wrap {
    margin: 16px 0 6px;
    overflow: auto;
    border-radius: var(--xvq-r1);
    border: 1px solid var(--xvq-line);
}
.xvq-sheet {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--xvq-ui);
    font-size: 14px;
    background: var(--xvq-panel);
    min-width: 420px;
}
.xvq-sheet th {
    background: var(--xvq-primary);
    color: #ffffff;
    text-align: left;
    padding: 13px 16px;
    font-weight: 700;
    letter-spacing: .04em;
}
.xvq-sheet td {
    padding: 12px 16px;
    border-top: 1px solid var(--xvq-line);
    color: var(--xvq-muted);
    vertical-align: top;
}
.xvq-sheet td:first-child { color: var(--xvq-ink); font-weight: 700; }
.xvq-sheet tr:nth-child(odd) td { background: #f8fbfc; }

/* ---------- сітка карток ---------- */

.xvq-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin: 16px 0 6px;
}
.xvq-tiles__item {
    background: var(--xvq-surface);
    border: 1px solid var(--xvq-line);
    border-radius: var(--xvq-r1);
    padding: 18px 18px 16px;
}
.xvq-tiles__name {
    font-family: var(--xvq-ui);
    font-size: 14px;
    font-weight: 700;
    color: var(--xvq-primary);
    margin-bottom: 6px;
}
.xvq-tiles__text {
    font-size: 14px;
    line-height: 1.66;
    color: var(--xvq-muted);
}

/* ---------- підвал ---------- */

.xvq-foot {
    margin-top: 0;
    background: var(--xvq-surface);
    border-top: 1px solid var(--xvq-line);
    padding: 30px 20px 24px;
    font-family: var(--xvq-ui);
}
.xvq-foot__container {
    max-width: 940px;
    margin: 0 auto;
    display: grid;
    gap: 12px;
    justify-items: center;
    text-align: center;
}
.xvq-foot__mark {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--xvq-primary);
}
.xvq-foot__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.xvq-foot__legal a {
    color: var(--xvq-secondary);
    font-size: 12px;
    padding: 0 14px;
    border-right: 1px solid var(--xvq-line);
    line-height: 1.4;
}
.xvq-foot__legal a:last-child { border-right: none; }
.xvq-foot__legal a:hover { color: var(--xvq-accent); }
.xvq-foot__copy {
    font-size: 12px;
    color: var(--xvq-muted);
}
.xvq-footer-warning {
    max-width: 520px;
    font-size: 11px;
    line-height: 1.65;
    color: #8b979e;
}