/* ============================================================
   shell-xrv.css — базовий шар: скидання, змінні, типографіка,
   шапка, ведучий блок сторінки, футер. Проєкт: xarrovex.com
   ============================================================ */

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

:root {
    --deep-xrv: #1c1f26;
    --mid-xrv: #2f343f;
    --accent-xrv: #00c48c;
    --accent-dark-xrv: #009e70;
    --ink-xrv: #14161c;
    --mute-xrv: #6a7180;
    --edge-xrv: #dfe3e8;
    --paper-xrv: #f4f6f8;
    --sub-xrv: #e6eaee;
    --panel-xrv: #ffffff;
    --night-xrv: #0a0c10;

    --head-xrv: 'Arial Black', 'Helvetica Neue', Impact, sans-serif;
    --mono-xrv: 'Courier New', 'SF Mono', monospace;
    --body-xrv: 'Helvetica Neue', Arial, Helvetica, sans-serif;

    --rail-xrv: 88px;
    --gap-xrv: 24px;
    --line-xrv: 1px solid var(--edge-xrv);
    --line-hard-xrv: 1px solid #c9d0d7;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--body-xrv);
    font-size: 16px;
    line-height: 1.74;
    color: var(--ink-xrv);
    background-color: var(--paper-xrv);
    background-image:
        linear-gradient(to right, rgba(28, 31, 38, .035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(28, 31, 38, .035) 1px, transparent 1px);
    background-size: 56px 56px;
}

a {
    color: var(--accent-dark-xrv);
    text-decoration: none;
    transition: color .18s linear, border-color .18s linear;
}

a:hover {
    color: var(--accent-xrv);
}

img {
    max-width: 100%;
    height: auto;
}

::selection {
    background: rgba(0, 196, 140, .28);
    color: var(--ink-xrv);
}

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

.top-bar-xrv {
    background: var(--deep-xrv);
    border-bottom: 2px solid var(--accent-xrv);
    padding: 17px 20px 15px;
    text-align: center;
}

.top-bar-inner-xrv {
    max-width: 1120px;
    margin: 0 auto;
}

.brand-name-xrv {
    display: inline-block;
    font-family: var(--head-xrv);
    font-size: 21px;
    line-height: 1.1;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
}

.brand-name-xrv:hover {
    color: var(--accent-xrv);
}

/* ---------- ведучий блок сторінки документа ---------- */

.doc-lead-xrv {
    max-width: 980px;
    margin: 0 auto;
    padding: 56px 20px 26px;
}

.doc-kicker-xrv {
    display: inline-block;
    font-family: var(--mono-xrv);
    font-size: 11px;
    line-height: 1;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--accent-dark-xrv);
    border: 1px solid var(--accent-xrv);
    background: rgba(0, 196, 140, .07);
    padding: 7px 11px 6px;
    margin-bottom: 20px;
}

.doc-title-xrv {
    font-family: var(--head-xrv);
    font-size: clamp(28px, 4.6vw, 46px);
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--ink-xrv);
    margin-bottom: 16px;
}

.doc-title-mark-xrv {
    color: var(--accent-dark-xrv);
}

.doc-intro-xrv {
    max-width: 720px;
    color: var(--mute-xrv);
    font-size: 16px;
}

/* службова смуга «специфікації» під заголовком */

.doc-spec-xrv {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-top: 2px solid var(--deep-xrv);
    border-bottom: var(--line-xrv);
}

.doc-spec-cell-xrv {
    flex: 1 1 190px;
    padding: 12px 16px 11px 0;
    font-family: var(--mono-xrv);
    font-size: 12px;
    line-height: 1.6;
    color: var(--mute-xrv);
}

.doc-spec-key-xrv {
    display: block;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: 10px;
    color: #9aa2ae;
}

.doc-spec-val-xrv {
    color: var(--ink-xrv);
}

/* ---------- каркас колонки документа ---------- */

.doc-wrap-xrv {
    max-width: 980px;
    margin: 0 auto;
    padding: 8px 20px 72px;
}

.doc-sheet-xrv {
    background: var(--panel-xrv);
    border: var(--line-xrv);
    border-top: none;
    border-radius: 0;
    padding: 4px 30px 30px;
}

/* ---------- футер ---------- */

.foot-bar-xrv {
    background: var(--deep-xrv);
    border-top: 2px solid var(--accent-xrv);
    padding: 26px 20px 24px;
}

.foot-inner-xrv {
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
}

.foot-links-xrv {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 26px;
    margin-bottom: 14px;
}

.foot-links-xrv a {
    font-family: var(--mono-xrv);
    font-size: 12px;
    letter-spacing: .08em;
    color: #a8b0bc;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}

.foot-links-xrv a:hover {
    color: var(--accent-xrv);
    border-bottom-color: var(--accent-xrv);
}

.foot-rule-xrv {
    height: 1px;
    background: rgba(255, 255, 255, .12);
    margin: 0 auto 14px;
    max-width: 640px;
}

.foot-copy-xrv {
    font-family: var(--mono-xrv);
    font-size: 12px;
    letter-spacing: .1em;
    color: #8d95a2;
    margin-bottom: 10px;
}

.foot-note-xrv {
    max-width: 800px;
    margin: 0 auto;
    font-size: 12px;
    line-height: 1.72;
    color: #767e8b;
}

/* ---------- адаптив ---------- */

@media (max-width: 760px) {
    body {
        font-size: 15px;
    }

    .doc-lead-xrv {
        padding-top: 40px;
    }

    .doc-sheet-xrv {
        padding: 4px 16px 22px;
    }

    .brand-name-xrv {
        font-size: 17px;
        letter-spacing: .2em;
    }
}