:root {
    --black: #000;
    --white: #fff;
    --red: #E3000F;
    --red-dark: #B9000C;
    --ink-2: #6b6b6b;
    --line: #e4e4e4;
    --soft-dark: #bdbdbd;
    --mute-dark: #a1a1a1;
    --line-dark: rgba(255, 255, 255, .16);
    --header: 64px;
    --pad: clamp(20px, 5vw, 64px);
    --max: 1280px;

    --bs-body-font-family: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --bs-body-font-size: 1.0625rem;
    --bs-body-line-height: 1.55;
    --bs-body-color: #000;
    --bs-body-bg: #fff;
}




/* Отступ для якорей под фиксированную шапку — вместо JS-расчёта */
html { scroll-padding-top: var(--header); }
body { -webkit-font-smoothing: antialiased; }
body:focus { outline: none; }

/* Сброс отступов, которые Bootstrap задаёт заголовкам, абзацам и спискам */
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a, a:hover { color: inherit; text-decoration: none; }
::selection { background: var(--red); color: var(--white); }

:focus-visible { outline: 2px solid var(--focus, var(--red)); outline-offset: 3px; }

/* Контейнер: ширина и боковые поля как в оригинале */
.wrap {
    max-width: var(--max);
    --bs-gutter-x: calc(var(--pad) * 2);
}

/* ---------- Кнопка (на базе .btn Bootstrap) ---------- */
.btn-brand {
    --bs-btn-padding-x: 2rem;
    --bs-btn-padding-y: 0;
    --bs-btn-font-size: 1.0625rem;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: 4px;
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--red);
    --bs-btn-border-color: var(--red);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--red-dark);
    --bs-btn-hover-border-color: var(--red-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--red-dark);
    --bs-btn-active-border-color: var(--red-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    white-space: nowrap;
}
.btn-brand--sm {
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: .875rem;
    min-height: 40px;
}
.btn-brand:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; box-shadow: none; }

/* ---------- Шапка + мобильное меню (Bootstrap navbar) ---------- */
.navbar {
    --focus: var(--white);
    --bs-navbar-padding-y: 0;
    --bs-navbar-color: var(--mute-dark);
    --bs-navbar-hover-color: var(--white);
    --bs-navbar-active-color: var(--white);
    --bs-navbar-brand-color: var(--white);
    --bs-navbar-brand-hover-color: var(--white);
    --bs-navbar-toggler-padding-x: .625rem;
    --bs-navbar-toggler-padding-y: .625rem;
    background: var(--black);
    border-bottom: 1px solid var(--line-dark);
}
.navbar-brand {
    height: var(--header);
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}
.logo { font-weight: 700; font-size: 1.25rem; letter-spacing: -.03em; }
.logo span { color: var(--red); }
.navbar-toggler { margin: 10px -.625rem 10px 0; border: 0; }
.navbar-toggler:focus { box-shadow: none; }
.navbar .nav-link { transition: color .2s ease; }
.navbar .nav-link:focus-visible { outline: 2px solid var(--white); box-shadow: none; }
.navbar .nav-link.active {
    text-decoration: underline;
    text-decoration-color: var(--red);
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
}

/* Меню на телефоне и планшете: крупные строки, удобно попадать пальцем */
@media (max-width: 991.98px) {
    .navbar-collapse { padding-bottom: .5rem; }
    .navbar .nav-link {
        padding: 1rem 0;
        font-size: 1.25rem;
        border-top: 1px solid var(--line-dark);
    }
    .navbar .nav-link.active { text-underline-offset: 6px; }
}
@media (min-width: 992px) {
    .navbar-nav { --bs-nav-link-padding-x: 0; gap: 2rem; }
    .navbar .nav-link { font-size: .9375rem; }
}

/* ---------- Hero ---------- */
.hero {
    --focus: var(--white);
    padding: calc(var(--header) + 48px) 0 56px;
    background: var(--black);
    color: var(--white);
}
.hero h1 {
    max-width: 11em;
    font-size: clamp(2.75rem, 1.1rem + 6.6vw, 7rem);
    line-height: 1;
    letter-spacing: -.045em;
    font-weight: 600;
    text-wrap: balance;
}
.hero__sub {
    display: block;
    margin-top: .3em;
    font-size: clamp(1.5rem, 1rem + 2.4vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -.035em;
    font-weight: 500;
}
.hero__text { max-width: 34em; margin-top: 28px; }
.hero__text p {
    font-size: clamp(1.0625rem, 1rem + .4vw, 1.375rem);
    line-height: 1.45;
    color: var(--soft-dark);
}
.hero__text p + p { margin-top: 1rem; }
.hero__cta { margin-top: 32px; }

/* Во весь экран и с прижатием к низу — только на больших экранах.
   На телефоне блок высотой по содержимому, без пустоты сверху. */
@media (min-width: 992px) and (min-height: 640px) {
    .hero {
        min-height: 100vh;
        min-height: 100svh;
        display: flex;
        align-items: flex-end;
        padding: calc(var(--header) + 64px) 0 clamp(48px, 10vh, 112px);
    }
    .hero__text { margin-top: clamp(24px, 4vh, 40px); }
    .hero__cta { margin-top: clamp(32px, 5vh, 48px); }
}

/* ---------- Секции ---------- */
.section { padding: clamp(64px, 12vh, 160px) 0; }
.section--dark { --focus: var(--white); background: var(--black); color: var(--white); }

h2 {
    font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -.035em;
    font-weight: 600;
}
@media (min-width: 992px) {
    .sticky-title { position: sticky; top: calc(var(--header) + 40px); }
}

/* Строки-списки */
.rows { border-top: 1px solid var(--line); }
.rows li { padding: clamp(24px, 4vw, 40px) 0; border-bottom: 1px solid var(--line); }
.rows h3 {
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.375rem);
    line-height: 1.1;
    letter-spacing: -.03em;
    font-weight: 500;
}
.rows p { max-width: 42ch; margin-top: 12px; color: var(--ink-2); }
.rows .note { display: block; max-width: 42ch; margin-top: 12px; font-size: .9375rem; color: var(--ink-2); }
.section--dark .rows { border-top-color: var(--white); }
.section--dark .rows li { border-bottom-color: var(--line-dark); }
.section--dark .rows p,
.section--dark .rows .note { color: var(--mute-dark); }

/* ---------- Шаги ---------- */
.steps { counter-reset: step; border-top: 1px solid var(--black); }
.steps li {
    counter-increment: step;
    display: grid;
    grid-template-columns: clamp(48px, 7vw, 96px) minmax(0, 1fr);
    align-items: baseline;
    padding: clamp(20px, 3.2vw, 32px) 0;
    border-bottom: 1px solid var(--line);
}
.steps li::before {
    content: counter(step);
    font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
}
.steps li:last-child { border-bottom-color: var(--black); }
.steps span {
    font-size: clamp(1.375rem, 1rem + 1.4vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -.025em;
    font-weight: 500;
}

/* ---------- Финальный CTA + футер ---------- */
.final {
    --focus: var(--white);
    padding: clamp(72px, 16vh, 176px) 0;
    background: var(--black);
    color: var(--white);
}
.final h2 {
    max-width: 12em;
    font-size: clamp(2.25rem, 1rem + 5vw, 5.5rem);
    line-height: 1;
    letter-spacing: -.04em;
    text-wrap: balance;
}
.final__cta { margin-top: clamp(32px, 5vh, 48px); }

.foot { --focus: var(--white); background: var(--black); color: var(--mute-dark); font-size: .9375rem; }
.foot__in { padding: 28px 0; border-top: 1px solid var(--line-dark); }
.foot .logo { font-size: 1rem; color: var(--white); }

/* ---------- Плавающая кнопка на мобильных ---------- */
.sticky-cta {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1020;
    padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(0, 0, 0, .92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--line-dark);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .3s ease, visibility 0s linear .3s;
}
.sticky-cta.is-visible {
    transform: none;
    visibility: visible;
    transition: transform .3s ease;
}
@media (prefers-reduced-motion: reduce) {
    .sticky-cta, .sticky-cta.is-visible { transition: none; }
}