/*
 * Орбита — фирстиль 1b «Аппарат».
 * Главная страница (site.css). Остальные страницы пока на styles.css.
 */

:root {
    --bone: #e9e5db;
    --paper: #f3f0e8;
    --navy: #1b1d59;
    --signal: #a2382e;
    --ink: #3a3b42;
    --mute: #85868f;
    --rule: rgba(133, 134, 143, 0.5);
    --hair: rgba(27, 29, 89, 0.25);
    --hair-inv: rgba(233, 229, 219, 0.35);

    --pad-x: 72px;
    --cell-pad: 8px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bone);
    color: var(--navy);
    font-family: "Onest", sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--navy);
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease;
}

a:hover {
    color: var(--signal);
}

img {
    max-width: 100%;
}

/* фокус в фирменном стиле: прямые углы, сигнальный цвет */
:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
    border-radius: 0;
}

.page {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    background: var(--bone);
}

/* ---------- типографика ---------- */

.display {
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.02;
    margin: 0;
}

.label {
    font-family: "Oswald", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
}

.mono {
    font-family: "JetBrains Mono", monospace;
}

.tag {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--mute);
}

.body-text {
    margin: 20px 0 0;
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink);
}

/* ---------- кнопки ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Oswald", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
}

.btn--solid {
    background: var(--navy);
    color: var(--bone);
    font-size: 18px;
    padding: 16px 28px;
}

.btn--solid:hover {
    background: var(--signal);
    color: var(--bone);
}

.btn--light {
    background: var(--bone);
    color: var(--navy);
    font-size: 19px;
    padding: 20px;
    width: 100%;
}

.btn--light:hover {
    background: var(--signal);
    color: var(--bone);
}

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

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px var(--pad-x) 22px;
    border-bottom: 2px solid var(--navy);
}

.nav__logo {
    height: 34px;
    width: auto;
    display: block;
}

.nav__links {
    display: flex;
    gap: 34px;
    align-items: center;
    font-size: 16px;
    color: var(--ink);
}

.nav__links a {
    color: var(--ink);
}

.nav__links a:hover {
    color: var(--signal);
}

.nav__link--active {
    color: var(--navy) !important;
    font-weight: 600;
    border-bottom: 2px solid var(--signal);
    padding-bottom: 3px;
}

.nav__cta {
    background: var(--navy);
    color: var(--bone) !important;
    padding: 13px 24px;
    font-weight: 600;
}

.nav__cta:hover {
    background: var(--signal);
    color: var(--bone) !important;
}

.burger {
    display: none;
    align-items: center;
    gap: 10px;
    border: 1.5px solid var(--navy);
    background: none;
    color: var(--navy);
    font-family: "Oswald", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.08em;
    padding: 12px 16px;
    cursor: pointer;
}

.burger__lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.burger__lines span {
    width: 18px;
    height: 2px;
    background: var(--navy);
}

.menu {
    display: none;
    border-bottom: 2px solid var(--navy);
    padding: 8px 24px 20px;
    flex-direction: column;
}

.menu.is-open {
    display: flex;
}

.menu a {
    padding: 15px 0;
    border-bottom: 1px solid var(--hair);
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    font-size: 22px;
}

.menu .btn {
    margin-top: 16px;
    border-bottom: none;
    padding: 16px;
    font-size: 18px;
}

/* ---------- появление при прокрутке ---------- */

[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

[data-reveal].in {
    opacity: 1;
    transform: none;
}

/* ---------- герой ---------- */

.hero {
    padding: 56px var(--pad-x) 0;
}

.hero__grid {
    display: grid;
    grid-template-columns: 1fr 470px;
    gap: 64px;
    align-items: end;
}

.hero__title {
    font-size: 76px;
    line-height: 1.14;
    letter-spacing: 0.005em;
    max-width: 780px;
}

.hero__aside {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 10px;
    padding-top: 18px;
    border-top: 2px solid var(--navy);
}

.hero__lead {
    margin: 0;
    font-size: 21px;
    line-height: 1.45;
    color: var(--navy);
}

.hero__sub {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink);
}

/* ---------- полоса с главным экраном ---------- */

.stage {
    margin-top: 44px;
    position: relative;
    padding: 0 var(--pad-x);
}

.stage__bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 150px;
    bottom: 0;
    background: var(--navy);
}

.steps {
    position: relative;
    background: var(--navy);
    color: var(--bone);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
    padding: 34px 0 46px;
}

.steps__title {
    font-family: "Oswald", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 26px;
}

.steps__text {
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(233, 229, 219, 0.82);
}

/* ---------- макет экрана продукта ---------- */

.shot {
    position: relative;
    width: 100%;
    background: var(--paper);
    border: 2px solid var(--navy);
    display: flex;
    overflow: hidden;
}

.shot--hero {
    height: 610px;
}

.shot--frame {
    height: 472px;
}

.sheet {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    padding: 32px 0 0 32px;
}

.sheet--sm {
    padding: 24px 0 0 24px;
}

.sheet--grow {
    flex: 1;
}

.sheet__cap {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--mute);
    padding-bottom: 16px;
}

.sheet--sm .sheet__cap {
    font-size: 10px;
    padding-bottom: 14px;
}

.sheet__scroll {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* сетка «листа»: колонки задаются через --cols на элементе */
.grid {
    display: grid;
    grid-template-columns: var(--cols);
    color: var(--navy);
}

.grid > * {
    padding: var(--cell-pad);
    border-bottom: 1px solid var(--rule);
}

.grid > *:not(.c-idx) {
    border-left: 1px solid var(--rule);
}

.grid--letters {
    --cell-pad: 6px 8px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--mute);
}

.grid--sm {
    --cell-pad: 7px;
}

.grid--sm.grid--letters {
    --cell-pad: 5px 7px;
    font-size: 10px;
}

.grid--md {
    --cell-pad: 9px 7px;
}

.c-idx {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--mute);
}

.c-head {
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.04em;
}

.c-mono {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
}

.c-num {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    text-align: right;
}

.c-text {
    font-size: 12px;
}

.grid--sm .c-idx,
.grid--sm .c-mono {
    font-size: 10px;
}

.grid--sm .c-head {
    font-size: 11px;
}

.c-sel {
    border: 2px solid var(--navy) !important;
}

.c-flag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.c-flag i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--signal);
    outline: 1px dashed var(--mute);
    outline-offset: 3px;
    flex: none;
    margin-right: 5px;
}

/* правая панель Орбиты внутри макета */
.panel {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border-left: 1.5px solid var(--navy);
}

.panel--hero {
    width: 360px;
    flex: none;
    padding: 32px 24px 24px;
    gap: 16px;
}

.panel--frame {
    flex: 1;
    min-width: 0;
    padding: 24px;
    gap: 18px;
}

.panel--tight {
    gap: 14px;
}

.panel__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1.5px solid var(--navy);
    padding-bottom: 12px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.22em;
}

.panel__head b {
    color: var(--navy);
    font-weight: 400;
}

.panel__head span {
    color: var(--mute);
}

.panel__head--wide b {
    font-family: "Oswald", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 0.04em;
}

.panel__head--wide span {
    font-size: 10px;
    letter-spacing: 0.14em;
}

.ask {
    background: var(--bone);
    padding: 14px 16px;
}

.ask__meta {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--mute);
}

.ask__text {
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--navy);
}

.answer {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
}

.service {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--mute);
}

.input-line {
    height: 52px;
    border: 1.5px solid var(--navy);
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 14px;
    font-size: 15px;
    color: var(--navy);
}

.input-line--empty {
    height: 44px;
    color: var(--mute);
}

.caret {
    width: 2px;
    height: 18px;
    background: var(--signal);
    animation: blink 1.1s step-end infinite;
}

@keyframes blink {
    0%,
    49% {
        opacity: 1;
    }
    50%,
    100% {
        opacity: 0;
    }
}

.chips {
    display: flex;
    gap: 8px;
}

.chip {
    border: 1.5px solid var(--navy);
    color: var(--navy);
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    padding: 5px 10px;
}

.chip--on {
    background: var(--navy);
    color: var(--bone);
    border-color: var(--navy);
    padding: 6px 10px;
}

.chip--src {
    letter-spacing: 0.1em;
    padding: 4px 8px;
}

.faq {
    display: flex;
    flex-direction: column;
}

.faq__row {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--rule);
}

.faq__row:last-child {
    border-bottom: 1px solid var(--rule);
}

.faq__row span:first-child {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--mute);
}

.faq__row span:last-child {
    font-size: 15px;
    color: var(--navy);
    line-height: 1.35;
}

/* столбики */
.bars {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    height: 160px;
    border-bottom: 1.5px solid var(--navy);
}

.bars--sm {
    gap: 16px;
    height: 130px;
}

.bar-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.bar-wrap b {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 400;
    color: var(--navy);
}

.bar {
    width: 100%;
    background: var(--navy);
    transform: scaleY(0.04);
    transform-origin: bottom;
    transition: transform 0.9s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.bar--sig {
    background: var(--signal);
}

[data-reveal].in .bar {
    transform: none;
}

.bar-wrap:nth-child(2) .bar {
    transition-delay: 0.08s;
}

.bar-wrap:nth-child(3) .bar {
    transition-delay: 0.16s;
}

.bar-wrap:nth-child(4) .bar {
    transition-delay: 0.24s;
}

.bars-legend {
    display: flex;
    gap: 18px;
    margin-top: -8px;
}

.bars-legend--sm {
    gap: 16px;
}

.bars-legend div {
    flex: 1;
    text-align: center;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: var(--mute);
}

.panel__actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.pill {
    flex: 1;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Oswald", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.04em;
}

.pill--solid {
    background: var(--navy);
    color: var(--bone);
}

.pill--ghost {
    border: 1.5px solid var(--navy);
    color: var(--navy);
}

.pill--wide {
    margin-top: auto;
}

.metric {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.metric b {
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    font-size: 64px;
    line-height: 0.9;
    color: var(--navy);
}

.metric span {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--mute);
}

.origin {
    border-top: 1px solid var(--rule);
    padding-top: 12px;
}

.origin__formula {
    margin-top: 6px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    line-height: 1.6;
    color: var(--navy);
}

.origin__rows {
    margin-top: 8px;
    display: grid;
    grid-template-columns: 78px 76px 1fr 1fr;
    gap: 4px 10px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: var(--navy);
}

/* третья и четвёртая колонки (выручка и себестоимость) выравниваются вправо */
.origin__rows div:nth-child(4n + 3),
.origin__rows div:nth-child(4n) {
    text-align: right;
}

.origin__more {
    margin-top: 8px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: var(--mute);
}

.origin__srcs {
    margin-top: 10px;
    display: flex;
    gap: 6px;
}

.origin__log {
    margin-top: auto;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--mute);
}

/* ---------- кадры ---------- */

.frame {
    padding: 80px var(--pad-x) 0;
}

.frame--first {
    padding-top: 96px;
}

.frame__grid {
    display: grid;
    grid-template-columns: 1fr 500px;
    gap: 64px;
    align-items: center;
}

.frame__grid--text-first {
    grid-template-columns: 500px 1fr;
}

.frame__title {
    font-size: 52px;
}

/* ---------- списки-строки ---------- */

.section {
    padding: 100px var(--pad-x) 0;
}

.section--tight {
    padding-top: 96px;
}

.section__grid {
    display: grid;
    grid-template-columns: 1fr 560px;
    gap: 64px;
    align-items: end;
}

.section__grid--wide {
    grid-template-columns: 1fr 700px;
    align-items: start;
}

.section__grid--wider {
    grid-template-columns: 1fr 760px;
    align-items: start;
}

.section__title {
    font-size: 52px;
    max-width: 700px;
}

.section__text {
    margin: 20px 0 0;
    max-width: 520px;
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink);
}

.section__cta {
    margin-top: 26px;
}

.rows {
    display: flex;
    flex-direction: column;
}

.rows__item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    padding: 22px 0;
    border-top: 1px solid var(--hair);
}

.rows__item:first-child {
    border-top: 2px solid var(--navy);
}

.rows__item:last-child {
    border-bottom: 2px solid var(--navy);
}

.rows__name {
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    font-size: 26px;
    line-height: 1.1;
}

.rows__note {
    font-size: 16px;
    color: var(--ink);
    text-align: right;
    max-width: 300px;
}

.rows--price .rows__item {
    padding: 20px 0;
}

.rows--price .rows__name {
    font-size: 24px;
}

.rows--price .rows__note {
    max-width: 260px;
}

/* ---------- контур ---------- */

.perimeter {
    margin-top: 100px;
    background: var(--navy);
    color: var(--bone);
    position: relative;
    overflow: hidden;
}

.perimeter__hatch {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        114deg,
        rgba(233, 229, 219, 0.1) 0 1px,
        transparent 1px 14px
    );
}

.perimeter__inner {
    position: relative;
    padding: 80px var(--pad-x);
    display: grid;
    grid-template-columns: 1fr 560px;
    gap: 64px;
    align-items: center;
}

.perimeter__title {
    font-size: 56px;
}

.perimeter__text {
    margin: 22px 0 0;
    max-width: 520px;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(233, 229, 219, 0.85);
}

.rows--inv .rows__item {
    padding: 20px 0;
    border-top: 1px solid var(--hair-inv);
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    font-size: 24px;
}

.rows--inv .rows__item:first-child {
    border-top: 1px solid var(--hair-inv);
}

.rows--inv .rows__item:last-child {
    border-bottom: 1px solid var(--hair-inv);
}

/* ---------- заявка ---------- */

.cta {
    padding: 96px var(--pad-x) 0;
}

.cta__card {
    background: var(--navy);
    color: var(--bone);
    padding: 56px;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 56px;
    align-items: center;
}

.cta__title {
    font-size: 56px;
}

.cta__text {
    margin: 20px 0 0;
    max-width: 460px;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(233, 229, 219, 0.85);
}

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

.footer {
    --footer-cols: 1fr 240px 260px 240px;
    margin-top: 80px;
    padding: 36px var(--pad-x) 44px;
    border-top: 2px solid var(--navy);
    display: grid;
    grid-template-columns: var(--footer-cols);
    gap: 40px;
}

.footer--cols3 {
    --footer-cols: 1fr 260px 260px;
}

.footer--cols2 {
    --footer-cols: 1fr 260px;
}

.footer__logo {
    height: 26px;
    width: auto;
    display: block;
}

.footer__wordmark {
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 26px;
    line-height: 1;
}

.footer__about {
    margin-top: 12px;
    max-width: 300px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
}

.footer__head {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--mute);
}

.footer__list {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 15px;
}

.footer__addr {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
}

.footer__copy {
    grid-column: 1 / -1;
    border-top: 1px solid var(--hair);
    padding-top: 18px;
    font-size: 14px;
    color: var(--mute);
}

/* ---------- попап контактов ---------- */

.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(27, 29, 89, 0.78);
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 60;
}

.modal.is-open {
    display: flex;
}

.modal__card {
    width: 600px;
    max-width: 100%;
    max-height: 100%;
    overflow-y: auto;
    background: var(--bone);
    border: 2px solid var(--navy);
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.modal__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.modal__title {
    font-size: 38px;
    line-height: 1.04;
    max-width: 400px;
}

.modal__close {
    border: none;
    background: none;
    font-family: "Oswald", sans-serif;
    font-size: 26px;
    line-height: 1;
    color: var(--navy);
    cursor: pointer;
    padding: 4px 8px;
}

.modal__close:hover {
    color: var(--signal);
}

.modal__text {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink);
}

.contacts {
    display: flex;
    flex-direction: column;
}

.contacts__item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    padding: 16px 0;
    border-top: 1px solid var(--hair);
}

.contacts__item:first-child {
    border-top: 2px solid var(--navy);
}

.contacts__item:last-child {
    border-bottom: 2px solid var(--navy);
}

.contacts__key {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--mute);
}

.contacts__val {
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    font-size: 22px;
}

.contacts__val--plain {
    font-family: "Onest", sans-serif;
    text-transform: none;
    font-size: 16px;
    text-align: right;
    color: var(--ink);
}

/* ================= внутренние страницы ================= */

/* ---------- шапка страницы ---------- */

.phead {
    padding: 56px var(--pad-x) 0;
}

.phead__grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 72px;
    align-items: end;
}

.phead__title {
    font-size: 76px;
    line-height: 1.04;
    max-width: 820px;
}

.phead__title--doc {
    font-size: 68px;
    line-height: 1.06;
}

.phead__lead {
    margin: 0 0 10px;
    font-size: 19px;
    line-height: 1.6;
    color: var(--ink);
}

.phead__lead--sm {
    font-size: 18px;
}

.phead__meta {
    margin-top: 34px;
    border-top: 2px solid var(--navy);
    border-bottom: 1px solid var(--hair);
    padding: 16px 0;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--mute);
}

.nav__wordmark {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.nav__wordmark b {
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 26px;
    line-height: 1;
}

.nav__wordmark span {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--mute);
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--mute);
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--navy);
    flex: none;
}

.dot--sig {
    background: var(--signal);
}

.link-underline {
    align-self: flex-start;
    display: inline-block;
    font-family: "Oswald", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 17px;
    border-bottom: 2px solid var(--signal);
    padding-bottom: 4px;
}

.link-underline--soft {
    border-bottom-color: rgba(27, 29, 89, 0.35);
}

.btn--outline {
    border: 2px solid var(--navy);
    color: var(--navy);
    font-size: 17px;
    padding: 14px 26px;
}

.btn--outline:hover {
    background: var(--navy);
    color: var(--bone);
}

.btn--dark {
    background: var(--navy);
    color: var(--bone);
    font-size: 19px;
    padding: 20px;
    width: 100%;
}

.btn--dark:hover {
    background: var(--signal);
}

.btn--bone {
    align-self: flex-start;
    background: var(--bone);
    color: var(--navy);
    font-size: 22px;
    padding: 18px 30px;
}

.btn--bone:hover {
    background: var(--signal);
    color: var(--bone);
}

/* ---------- продукты: ядро ---------- */

.core {
    border: 2px solid var(--navy);
    display: grid;
    grid-template-columns: 1fr 520px;
}

.core__main {
    padding: 44px;
    border-right: 2px solid var(--navy);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.core__title {
    font-size: 52px;
}

.core__text {
    margin: 14px 0 0;
    max-width: 520px;
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink);
}

.core__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: auto;
}

.core__side {
    display: flex;
    flex-direction: column;
}

.core__item {
    padding: 26px 34px;
    border-bottom: 1px solid var(--hair);
}

.core__item:last-child {
    border-bottom: none;
}

.core__item h3 {
    margin: 0;
    font-family: "Oswald", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 22px;
    line-height: 1.1;
}

.core__item p {
    margin: 6px 0 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
}

/* ---------- заголовок раздела ---------- */

.sechead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 32px;
    border-bottom: 2px solid var(--navy);
    padding-bottom: 16px;
}

.sechead__title {
    font-size: 44px;
    line-height: 1.04;
}

.sechead__note {
    font-size: 17px;
    color: var(--ink);
    max-width: 520px;
}

/* ---------- спутник: блок ---------- */

.sat {
    display: grid;
    grid-template-columns: 1fr 616px;
    gap: 56px;
    align-items: start;
    margin-top: 64px;
}

.sat--first {
    margin-top: 40px;
}

.sat--rev {
    grid-template-columns: 616px 1fr;
}

/* макет во всю ширину колонки, текст справа */
.sat--shotwide {
    grid-template-columns: 1fr 460px;
    align-items: center;
}

.sat--shotwide .qshot {
    width: 100%;
}

.sat__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sat__name {
    font-size: 40px;
    line-height: 1.04;
}

.sat__text {
    margin: 0;
    max-width: 460px;
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink);
}

.sat__links {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.list {
    display: flex;
    flex-direction: column;
}

.list__row {
    padding: 13px 0;
    border-top: 1px solid var(--hair);
    font-size: 17px;
    line-height: 1.45;
}

.list__row:last-child {
    border-bottom: 1px solid var(--hair);
}

.list--sm .list__row {
    font-size: 16px;
}

/* ---------- макет вопрос-ответ ---------- */

.qshot {
    width: 616px;
    max-width: 100%;
    height: 352px;
    background: var(--paper);
    border: 2px solid var(--navy);
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}

.qshot__meta {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--mute);
}

.qshot__q {
    margin-top: 6px;
    font-size: 17px;
    line-height: 1.35;
    color: var(--ink);
}

.qtable {
    display: grid;
    grid-template-columns: var(--cols);
    align-items: center;
    gap: 0 10px;
    border-top: 1.5px solid var(--navy);
}

.qtable > * {
    padding: 9px 0;
}

.qt-h {
    padding: 8px 0 !important;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--mute);
}

.qt-name {
    border-top: 1px solid var(--rule);
    font-size: 15px;
}

.qt-num {
    border-top: 1px solid var(--rule);
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    text-align: right;
}

.qt-r {
    text-align: right;
}

.qt-sig {
    color: var(--signal);
}

.qt-mark {
    display: flex;
    align-items: center;
}

.qt-mark i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--signal);
}

.qshot__note {
    border-top: 1.5px solid var(--navy);
    padding-top: 10px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ink);
}

.qshot__service {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--mute);
}

/* ---------- партнёрам ---------- */

.formats {
    border-top: 2px solid var(--navy);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.format {
    padding: 34px;
    border-right: 1px solid var(--hair);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.format:first-child {
    padding-left: 0;
}

.format:last-child {
    padding-right: 0;
    border-right: none;
}

.format__num {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--mute);
}

.format__title {
    font-size: 38px;
    line-height: 1.04;
}

.format__text {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink);
}

.format .link-underline {
    margin-top: auto;
    font-size: 16px;
}

.hatched {
    background: var(--navy);
    color: var(--bone);
    position: relative;
    overflow: hidden;
    padding: 56px;
}

.hatched__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 700px;
    gap: 64px;
    align-items: start;
}

.hatched__title {
    font-size: 48px;
}

.step {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 24px;
    padding: 20px 0;
    border-top: 1px solid var(--hair-inv);
}

.step:last-child {
    border-bottom: 1px solid var(--hair-inv);
}

.step__n {
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1;
}

.step__t {
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    font-size: 22px;
    line-height: 1.1;
}

.step__d {
    margin-top: 6px;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(233, 229, 219, 0.82);
}

.cta__card--outline {
    background: none;
    color: var(--navy);
    border: 2px solid var(--navy);
}

.cta__card--outline .cta__text {
    color: var(--ink);
}

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

.doc {
    padding: 44px var(--pad-x) 0;
}

.doc__grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 72px;
    align-items: start;
}

/* без этого длинная строка кода растягивает колонку шире экрана */
.doc__grid > * {
    min-width: 0;
}

.toc {
    position: sticky;
    top: 32px;
    display: flex;
    flex-direction: column;
}

.toc__cap {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--mute);
    padding-bottom: 12px;
}

.toc a {
    display: flex;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid var(--hair);
    font-size: 15px;
    line-height: 1.35;
}

.toc a:last-child {
    border-bottom: 1px solid var(--hair);
}

.toc a span {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--mute);
}

.doc__body {
    max-width: 820px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink);
}

.doc__body p {
    margin: 0;
}

.doc__body b {
    color: var(--navy);
    font-weight: 600;
}

.doc__h2 {
    margin: 34px 0 0;
    font-size: 34px;
    line-height: 1.06;
    color: var(--navy);
    border-top: 2px solid var(--navy);
    padding-top: 20px;
}

.doc__h2:first-child {
    margin-top: 0;
}

.doc__h3 {
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    font-size: 20px;
    color: var(--navy);
    margin-top: 8px;
}

.defs {
    display: flex;
    flex-direction: column;
}

.defs__row {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    padding: 16px 0;
    border-top: 1px solid var(--hair);
}

.defs__row:last-child {
    border-bottom: 1px solid var(--hair);
}

.defs__term {
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    font-size: 18px;
    line-height: 1.15;
    color: var(--navy);
}

/* таблица «ключ — значение» в документации */
.kv {
    display: grid;
    grid-template-columns: var(--cols);
    gap: 0 24px;
}

.kv > * {
    padding: 12px 0;
    border-top: 1px solid var(--hair);
    min-width: 0;
    overflow-wrap: break-word;
}

.kv > *:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--hair);
}

.kv__k {
    color: var(--navy);
}

.kv__v--sm {
    font-size: 15px;
}

.kv__v--mute {
    font-size: 15px;
    color: var(--mute);
}

/* ключ слева, значение справа */
.kv--kv {
    --cols: 300px 1fr;
}

/* значение слева, короткая пометка справа */
.kv--vk {
    --cols: 1fr 260px;
}

/* таблица резервного копирования: что, почему, периодичность */
.kv--backup {
    --cols: 220px 1fr 160px;
}

.kv--backup > *:nth-child(-n + 3) {
    border-top: 1.5px solid var(--navy);
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--mute);
}

.kv--backup > *:nth-last-child(-n + 3) {
    border-bottom: 1px solid var(--hair);
}

.kv--backup .kv__v {
    font-size: 16px;
}

.plain {
    display: flex;
    flex-direction: column;
}

.plain__row {
    padding: 12px 0;
    border-top: 1px solid var(--hair);
}

.plain__row:last-child {
    border-bottom: 1px solid var(--hair);
}

.numsteps {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.numstep {
    display: flex;
    gap: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--hair);
}

.numsteps--closed .numstep:last-child {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--hair);
}

.numstep b {
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    font-weight: 400;
    color: var(--mute);
    padding-top: 4px;
    flex: none;
}

.code {
    background: var(--paper);
    border: 1.5px solid var(--navy);
    padding: 20px 22px;
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    line-height: 1.7;
    color: var(--navy);
    overflow-x: auto;
    white-space: pre;
    margin: 0;
}

/* ---------- Спутник.Фермер ---------- */

.cards6 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.cards6 > * {
    padding: 28px;
    border-right: 1px solid var(--hair);
}

.cards6 > *:nth-child(3n + 1) {
    padding-left: 0;
}

.cards6 > *:nth-child(3n) {
    padding-right: 0;
    border-right: none;
}

.cards6 > *:nth-child(-n + 3) {
    border-bottom: 1px solid var(--hair);
}

.card6__title {
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    font-size: 26px;
    line-height: 1.1;
}

.card6__text {
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
}

.qa {
    background: var(--navy);
    color: var(--bone);
    padding: 56px;
}

.qa__title {
    font-size: 44px;
    line-height: 1.04;
}

.qa__grid {
    margin-top: 28px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 56px;
}

.qa__item {
    padding: 14px 0;
    border-top: 1px solid var(--hair-inv);
    font-family: "JetBrains Mono", monospace;
    font-size: 14px;
    line-height: 1.5;
}

.qa__item:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--hair-inv);
}

.compare {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0 24px;
}

.compare > * {
    padding: 14px 0;
    border-bottom: 1px solid var(--hair);
    font-size: 16px;
}

.compare > *:nth-child(-n + 3) {
    border-bottom: 1.5px solid var(--navy);
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--mute);
}

.compare > *:nth-child(3):not(:nth-last-child(-n + 3)) {
    color: var(--signal);
}

.compare > *:nth-last-child(-n + 3) {
    border-bottom: 1.5px solid var(--navy);
}

.compare__k {
    color: var(--mute);
}

.price-card {
    background: var(--navy);
    color: var(--bone);
    padding: 56px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.price-card__title {
    font-size: 76px;
    line-height: 1.04;
}

.price-card__text {
    margin: 0;
    max-width: 620px;
    font-size: 19px;
    line-height: 1.6;
    color: rgba(233, 229, 219, 0.85);
}

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

@media (max-width: 1120px) {
    :root {
        --pad-x: 24px;
    }

    .hero__grid,
    .frame__grid,
    .frame__grid--text-first,
    .section__grid,
    .perimeter__inner,
    .cta__card {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .hero__title {
        font-size: clamp(40px, 6.4vw, 64px);
    }

    .perimeter__title,
    .cta__title {
        font-size: clamp(30px, 4.6vw, 46px);
    }

    .frame__title,
    .section__title {
        font-size: clamp(30px, 4.6vw, 46px);
    }

    .frame__grid > .shot {
        order: 2;
    }

    .shot {
        height: auto;
        flex-direction: column;
    }

    .panel--hero,
    .panel--frame,
    .sheet {
        width: 100%;
        flex: none;
        border-left: none;
    }

    .sheet {
        max-height: 232px;
        border-bottom: 1.5px solid var(--navy);
        padding-right: 24px;
        -webkit-mask-image: linear-gradient(#000 78%, transparent 100%);
        mask-image: linear-gradient(#000 78%, transparent 100%);
    }

    .steps {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .rows__item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .rows__note {
        text-align: left;
        max-width: none;
    }

    .rows--inv .rows__item {
        flex-direction: row;
    }

    /* --- внутренние страницы --- */

    .phead__grid,
    .core,
    .formats,
    .hatched__grid,
    .doc__grid,
    .sat,
    .sat--rev,
    .qa__grid,
    .cards6 {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .phead__grid {
        gap: 24px;
    }

    .phead__title,
    .price-card__title {
        font-size: clamp(38px, 6vw, 64px);
    }

    .phead__title--doc {
        font-size: clamp(32px, 5vw, 48px);
    }

    .sechead__title,
    .core__title,
    .sat__name,
    .format__title,
    .hatched__title,
    .qa__title {
        font-size: clamp(28px, 4.4vw, 44px);
    }

    .sechead {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .core__main {
        border-right: none;
        border-bottom: 2px solid var(--navy);
    }

    .core__item {
        padding-left: 44px;
        padding-right: 44px;
    }

    .format {
        padding: 32px 0;
        border-right: none;
        border-top: 1px solid var(--hair);
    }

    .format:first-child {
        border-top: none;
        padding-top: 24px;
    }

    .format:last-child {
        padding-bottom: 0;
    }

    .sat__body {
        order: 1;
    }

    .qshot {
        order: 2;
        width: 100%;
        height: auto;
        overflow-x: auto;
    }

    .qa__grid {
        gap: 0;
    }

    .qa__item:nth-last-child(-n + 2) {
        border-bottom: none;
    }

    .qa__item:last-child {
        border-bottom: 1px solid var(--hair-inv);
    }

    .cards6 {
        gap: 0;
    }

    .cards6 > * {
        padding: 26px 0 !important;
        border-right: none;
        border-bottom: 1px solid var(--hair);
    }

    .toc {
        position: static;
    }

    .doc__grid {
        gap: 32px;
    }

    .defs__row {
        grid-template-columns: 180px 1fr;
    }

    .kv--kv {
        --cols: 180px 1fr;
    }

    .kv--vk {
        --cols: 1fr 130px;
    }

    .kv--backup {
        --cols: 1fr;
    }

    .kv--backup > *:nth-child(-n + 3) {
        display: none;
    }

    .kv--backup > *:nth-child(3n + 4) {
        font-family: "Oswald", sans-serif;
        text-transform: uppercase;
        font-size: 20px;
        padding-bottom: 0;
    }

    .kv--backup > *:nth-child(3n + 5) {
        border-top: none;
        padding-top: 6px;
        padding-bottom: 0;
    }

    .kv--backup > *:nth-child(3n + 6) {
        border-top: none;
        padding-top: 4px;
        font-family: "JetBrains Mono", monospace;
        font-size: 12px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--mute);
    }

    .compare {
        grid-template-columns: 120px 1fr 1fr;
        gap: 0 16px;
    }

    .hatched,
    .qa,
    .price-card {
        padding: 28px;
    }
}

@media (max-width: 900px) {
    :root {
        --pad-x: 32px;
    }

    .nav__links {
        display: none;
    }

    .burger {
        display: flex;
    }

    .cta__card {
        padding: 28px;
    }

    .rows__name {
        font-size: 21px;
    }

    .rows--price .rows__name,
    .rows--inv .rows__item {
        font-size: 20px;
    }

    .steps__title {
        font-size: 21px;
    }

    .footer {
        --footer-cols: 1fr 1fr !important;
    }

    .doc__h2 {
        font-size: 25px;
    }

    .core__item {
        padding-left: 28px;
        padding-right: 28px;
    }
}

@media (max-width: 640px) {
    :root {
        --pad-x: 16px;
    }

    .sheet {
        display: none;
    }

    .modal__card {
        padding: 24px;
    }

    .modal__title {
        font-size: 27px;
    }

    .contacts__val {
        font-size: 18px;
    }

    /* версия решения не помещается рядом с кнопкой меню */
    .nav__wordmark b {
        font-size: 20px;
    }

    .nav__wordmark span {
        display: none;
    }

    .footer {
        --footer-cols: 1fr !important;
        gap: 28px;
    }

    .defs__row,
    .kv--kv {
        --cols: 1fr;
        grid-template-columns: 1fr;
    }

    .defs__row > *:last-child,
    .kv--kv > *:nth-child(even) {
        border-top: none;
        padding-top: 0;
        padding-bottom: 14px;
    }

    .kv--vk {
        --cols: 1fr 110px;
    }

    .code {
        font-size: 11px;
    }

    .compare {
        grid-template-columns: 1fr 1fr;
        gap: 0 14px;
    }

    .compare > *:nth-child(3n + 1) {
        grid-column: span 2;
        border-bottom: none;
        padding-bottom: 2px;
        font-family: "JetBrains Mono", monospace;
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .compare > *:nth-child(3n + 2),
    .compare > *:nth-child(3n + 3) {
        padding-top: 0;
    }

    .core__item {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    [data-reveal],
    .bar {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .caret {
        animation: none;
    }
}