/* ============================================================
   DESIGN SYSTEM  —  "Editorial Manuscript" / Quiet Luxury
   Typography: Fraunces (display) + Onest (body)
   Loaded AFTER index_files/style.css — wins by order.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,400..700,0..100;1,9..144,400..600,0..100&family=Onest:wght@400;500;600;700&display=swap');

:root {
    /* ——— Palette: Parchment / Oxblood / Antique Brass ——— */
    --ink:            #15110D;
    --ink-muted:      #564B3A;
    --ink-subtle:     #8C7E63;

    --bg:             #EFE6D2;
    --bg-alt:         #E6DAC0;
    --surface:        #FBF6E8;
    --surface-alt:    #F4ECD7;

    --brand:          #7A2424;
    --brand-hover:    #5A1A1A;
    --brand-soft:     #F2D7D2;
    --brand-tint:     #F8E7E2;
    --brand-rgb:      122, 36, 36;

    --accent:         #B58441;
    --accent-hover:   #946730;
    --accent-soft:    #EFD7A8;
    --accent-ink:     #5C3F12;

    --border:         #D6C7A8;
    --border-strong:  #B59C72;

    --success:        #5C6E2F;
    --success-rgb:    92, 110, 47;
    --danger:         #9C3527;
    --danger-soft:    #F3D9D4;

    /* ——— Back-compat aliases (older selectors in style.css reference these) ——— */
    --green-primary:        var(--brand);
    --green-dark:           var(--brand-hover);
    --green-success:        var(--success);
    --green-disabled:       #C7B89A;
    --green-soft:           var(--brand-soft);
    --text-main:            var(--ink);
    --text-secondary:       var(--ink-muted);
    --text-muted:           var(--ink-subtle);
    --text-heading:         var(--ink);
    --text-primary:         var(--ink);
    --bg-main:              var(--bg);
    --bg-section:           var(--bg-alt);
    --bg-soft:              var(--surface-alt);
    --bg-primary:           var(--surface);
    --bg-secondary:         var(--surface-alt);
    --bg-tertiary:          var(--bg-alt);
    --bg-dark:              #D9CAA9;
    --bg-beige:             var(--surface);
    --bg-gray-gold:         var(--surface-alt);
    --bg-blue-gray:         var(--bg-alt);
    --border-color:         var(--border);
    --accent-gold-premium:  var(--accent);
    --accent-gold-warm:     var(--accent-hover);

    /* ——— Typography ——— */
    --font-sans:  'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --font-serif: 'Fraunces', 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;

    /* ——— Radii (slightly tightened for editorial feel) ——— */
    --radius-sm:    6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-pill: 999px;

    /* ——— Shadows ——— */
    --shadow-xs:           0 1px  2px     rgba(27, 19, 16, .06);
    --shadow-sm:           0 2px  8px     rgba(27, 19, 16, .05);
    --shadow-md:           0 12px 32px -8px rgba(27, 19, 16, .12);
    --shadow-lg:           0 32px 64px -16px rgba(27, 19, 16, .18);
    --shadow-ring:         0 0 0 4px var(--brand-soft);
    --shadow-ring-danger:  0 0 0 4px var(--danger-soft);

    /* ——— Motion ——— */
    --t-fast: 150ms cubic-bezier(.4, 0, .2, 1);
    --t-base: 220ms cubic-bezier(.4, 0, .2, 1);
}

/* ============================================================
   BASE TYPOGRAPHY
   ============================================================ */
body {
    font-family: var(--font-sans) !important;
    background:  var(--bg) !important;
    color:       var(--ink);
    font-size:   16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body, button, input, textarea, select {
    font-family: var(--font-sans) !important;
}

h1, h2, h3,
.banner-inner-info__title,
.tab-description__title,
.tabs-nav__title,
.banner-adv__title,
.form-quest__title,
.roadmap__content h2,
.tab-rates__title,
.tab-get-item__title,
.tab-description-carts-item__title,
.roadmap-item__title {
    font-family:    var(--font-serif) !important;
    font-weight:    400 !important;
    letter-spacing: -0.015em;
    color:          var(--ink);
    line-height:    1.12;
}

html { scroll-behavior: smooth; }

::selection { background: var(--brand-soft); color: var(--ink); }

/* ============================================================
   BUTTONS
   ============================================================ */
/* Primary CTA pill */
a.button-scroll,
button.button-scroll,
.button-scroll {
    background:     var(--brand) !important;
    color:          #FFFFFF !important;
    border:         0 !important;
    border-radius:  var(--radius-pill) !important;
    box-shadow:     var(--shadow-sm);
    padding:        0 !important;
    transition:     background var(--t-base), transform var(--t-base), box-shadow var(--t-base);
    display:        inline-flex !important;
    align-items:    center;
    justify-content: center;
    line-height:    1;
    font-family:    inherit;
    cursor:         pointer;
    appearance:     none;
    -webkit-appearance: none;
}
a.button-scroll:hover,
button.button-scroll:hover,
.button-scroll:hover {
    background: var(--brand-hover) !important;
    box-shadow: var(--shadow-md);
    transform:  translateY(-1px);
}
a.button-scroll:active,
button.button-scroll:active,
.button-scroll:active {
    transform:  translateY(0);
    box-shadow: var(--shadow-sm);
}
a.button-scroll:focus-visible,
button.button-scroll:focus-visible,
.button-scroll:focus-visible {
    outline:    none;
    box-shadow: var(--shadow-ring), var(--shadow-sm);
}
.button-scroll[disabled],
.button-scroll.is-disabled {
    opacity:        0.5;
    cursor:         not-allowed;
    pointer-events: none;
}
.button-scroll__span {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         16px 32px !important;
    font-size:       16px !important;
    font-weight:     600 !important;
    letter-spacing:  -0.005em;
    line-height:     1.15;
    color:           #FFFFFF;
}
.button-scroll__span1 {
    padding:     10px 20px !important;
    font-size:   14px !important;
    font-weight: 600 !important;
    color:       #FFFFFF;
}
/* neutralize legacy decorative ::before */
.button-scroll::before { display: none !important; }

/* Secondary: dark pill for forms */
.button-form {
    background:     var(--ink) !important;
    color:          #FFFFFF !important;
    border-radius:  var(--radius-pill) !important;
    height:         52px !important;
    box-shadow:     var(--shadow-sm);
    transition:     background var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.button-form:hover {
    background: var(--brand) !important;
    box-shadow: var(--shadow-md);
    transform:  translateY(-1px);
}
.button-form:active { transform: translateY(0); }
.button-form:focus-visible {
    outline:    none;
    box-shadow: var(--shadow-ring), var(--shadow-sm);
}
.button-form:before { display: none !important; }
.button-form__text {
    padding:        14px 32px !important;
    font-size:      15px !important;
    font-weight:    600 !important;
    letter-spacing: -0.005em;
    color:          #FFFFFF;
}

/* ============================================================
   FORM — inputs, checkbox, progress, container
   ============================================================ */
.input { margin: 18px 0 0; }

.input__info { padding: 2px 2px 6px; }

.input__title {
    color:          var(--ink-muted);
    font-size:      12px;
    font-weight:    500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.input__error {
    color:       var(--danger);
    font-size:   12px;
    font-weight: 500;
}

.input__input input {
    background:    var(--surface) !important;
    border:        1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow:    none !important;
    outline:       none !important;
    color:         var(--ink) !important;
    font-size:     15px !important;
    font-weight:   500 !important;
    height:        52px !important;
    line-height:   normal !important;
    padding:       0 16px !important;
    transition:    border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.input__input input::placeholder,
.input__input input::-webkit-input-placeholder {
    color:       var(--ink-subtle) !important;
    font-size:   15px !important;
    font-weight: 400 !important;
    opacity:     1;
}
.input__input input:hover {
    border-color: var(--border-strong) !important;
}
.input__input input:focus {
    background:   var(--surface) !important;
    border-color: var(--brand) !important;
    box-shadow:   var(--shadow-ring) !important;
    outline:      none !important;
}
.is-valid-error .input__input input {
    border-color: var(--danger) !important;
    box-shadow:   var(--shadow-ring-danger) !important;
}
.is-valid-ok .input__input input {
    border-color: var(--success) !important;
}
.is-valid-ok .input__input:after {
    right: 14px;
}

/* Checkbox */
.checkbox { margin: 18px 0 0; }
.checkbox__error {
    color:       var(--danger);
    font-size:   12px;
    font-weight: 500;
}
.checkbox__wrap { margin: 10px 0 0; padding: 2px; }
.checkbox__input {
    border:        1.5px solid var(--border-strong) !important;
    border-radius: 6px !important;
    width:         22px !important;
    height:        22px !important;
    flex:          0 0 22px !important;
    background:    var(--surface);
    transition:    border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.checkbox__input:hover { border-color: var(--brand); }
.checkbox__input.active {
    background:       var(--brand) !important;
    border-color:     var(--brand) !important;
    background-image: linear-gradient(-45deg, transparent 65%, var(--brand) 65.99%),
                      linear-gradient(45deg,  transparent 75%, var(--brand) 75.99%),
                      linear-gradient(-45deg, var(--brand) 40%, transparent 40.99%),
                      linear-gradient(45deg,  var(--brand) 30%, #fff 30.99%, #fff 40%, transparent 40.99%),
                      linear-gradient(-45deg, #fff 50%, var(--brand) 50.99%) !important;
}
.checkbox__text {
    color:       var(--ink-muted);
    font-size:   12px;
    line-height: 1.45;
}
.checkbox__link-text {
    color:                 var(--brand);
    text-decoration:       underline;
    text-underline-offset: 2px;
    font-weight:           500;
}

/* Progress */
.form-progress {
    margin:    20px 0 8px;
    font-size: 13px;
    color:     var(--ink-muted);
}
.form-progress__value {
    font-size:   14px !important;
    font-weight: 600 !important;
    color:       var(--brand) !important;
    margin:      2px 0 !important;
    font-family: var(--font-sans) !important;
}
.form-progress-line {
    background:    var(--bg-alt) !important;
    height:        6px !important;
    border-radius: var(--radius-pill) !important;
    margin-top:    8px !important;
}
.form-progress-line__current {
    background: var(--brand) !important;
    transition: width var(--t-base);
}
.form-progress-line__next {
    background: var(--brand-soft) !important;
}

/* Form container */
.form-quest {
    background:      linear-gradient(160deg, var(--brand) 0%, #4A1F1F 60%, #2D1816 100%);
    padding:         56px 20px !important;
    margin:          80px 20px !important;
    max-width:       1344px;
    margin-left:     auto !important;
    margin-right:    auto !important;
    border-radius:   var(--radius-xl);
    position:        relative;
    overflow:        hidden;
}
.form-quest::before {
    content:          "";
    position:         absolute;
    inset:            0;
    background-image: radial-gradient(circle at 20% 0%,   rgba(181, 132, 65, 0.18) 0%, transparent 45%),
                      radial-gradient(circle at 100% 100%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events:   none;
}
.form-quest__content {
    background:    var(--surface) !important;
    border-radius: var(--radius-xl);
    padding:       40px !important;
    width:         100% !important;   /* легаси задаёт фикс 716px — сбрасываем */
    max-width:     520px;
    margin:        0 auto;
    box-shadow:    var(--shadow-lg);
    position:      relative;
    z-index:       1;
}
.form-quest__title {
    font-size:      30px !important;
    font-weight:    400 !important;
    letter-spacing: -0.02em;
    line-height:    1.1 !important;
    margin:         14px 0 4px !important;
    color:          var(--ink);
    text-transform: none !important;
}
.discount_label {
    display:         inline-block;
    background:      var(--accent-soft);
    color:           var(--accent-ink);
    font-family:     var(--font-sans) !important;
    font-size:       11px;
    font-weight:     600;
    letter-spacing:  0.08em;
    text-transform:  uppercase;
    padding:         6px 12px;
    border-radius:   var(--radius-pill);
}

/* "+25%" pill inside inputs */
.custom__pil .abfJWTd2g {
    background:     var(--accent-soft);
    color:          var(--accent-ink);
    font-size:      11px;
    font-weight:    600;
    padding:        3px 8px;
    border-radius:  var(--radius-pill);
    letter-spacing: 0;
    font-family:    var(--font-sans);
}
/* гасим зелёную обёртку чужой дизайн-системы (#00b92d) вокруг бейджа */
.custom__pil .wb2XNslra,
.custom__pil .vb2XNslra,
.custom__pil .kb2XNslra,
.custom__pil .mb2XNslra {
    background-color: var(--accent) !important;
    background:       var(--accent) !important;
}

@media (max-width: 540px) {
    .form-quest { margin: 48px 12px !important; padding: 32px 12px !important; }
    .form-quest__content { padding: 28px 20px !important; }
    .form-quest__title { font-size: 24px !important; }
}

/* ============================================================
   CARDS
   ============================================================ */
/* Hero feature strip */
.banner-info__content {
    background:    var(--surface) !important;
    border:        1px solid var(--border);
    border-radius: var(--radius-xl) !important;
    box-shadow:    var(--shadow-md) !important;
    padding:       22px 40px !important;
    height:        auto !important;
}
.banner-info__item {
    padding: 6px 0;
}
.banner-info__title {
    font-size:   16px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color:       var(--ink) !important;
    margin-left: 14px !important;
}
.banner-info__icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           44px;
    height:          44px;
    border-radius:   12px;
    background:      rgba(122, 36, 36, 0.08);
    color:           var(--brand);
    flex:            0 0 44px;
}
.banner-info__icon svg { width: 22px; height: 22px; }
.banner-info__text {
    color:     var(--ink-muted) !important;
    font-size: 14px !important;
}

/* Tab description cards */
.tab-description-carts-item {
    background:     var(--surface) !important;
    border:         1px solid var(--border);
    border-radius:  var(--radius-xl) !important;
    box-shadow:     var(--shadow-xs) !important;
    padding:        0 !important;
    overflow:       hidden;
    transition:     transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.tab-description-carts-item:hover {
    border-color: var(--border-strong);
    box-shadow:   var(--shadow-md) !important;
    transform:    translateY(-3px);
}
.tab-description-carts-item__info {
    padding: 28px 0 24px 32px !important;
}
.tab-description-carts-item__title {
    color:          var(--ink) !important;
    font-size:      22px !important;
    line-height:    1.2 !important;
    text-shadow:    none !important;
    letter-spacing: -0.015em;
}
.tab-description-carts-item__text {
    color:       var(--ink-muted) !important;
    font-size:   15px !important;
    line-height: 1.55 !important;
    margin-top:  10px !important;
}
.tab-description-carts-item__info {
    flex: 1 1 auto;
    min-width: 0;
}
.tab-description-carts-item__img {
    display:         flex !important;
    align-items:     center;
    justify-content: center;
    padding:         28px 28px 24px 12px !important;
    flex:            0 0 auto;
}
.tab-description-carts-item__img img {
    display: none !important;
}
.tab-icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           64px;
    height:          64px;
    border-radius:   16px;
    background:      linear-gradient(135deg, rgba(122, 36, 36, 0.10) 0%, rgba(122, 36, 36, 0.04) 100%);
    color:           var(--brand);
    border:          1px solid rgba(122, 36, 36, 0.10);
    flex:            0 0 64px;
}
.tab-icon svg { width: 30px; height: 30px; }
@media (max-width: 540px) {
    .tab-description-carts-item__info { padding: 20px 16px 20px 18px !important; }
    .tab-description-carts-item__img {
        align-items: center !important;
        padding:     20px 18px 20px 8px !important;
    }
    .tab-icon { width: 48px; height: 48px; flex-basis: 48px; border-radius: 12px; }
    .tab-icon svg { width: 24px; height: 24px; }
}

/* Roadmap cards */
.roadmap-item {
    background:     var(--surface);
    border:         1px solid var(--border);
    border-radius:  var(--radius-xl);
    padding:        32px 28px !important;
    transition:     transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
    box-shadow:     var(--shadow-xs);
}
.roadmap-item:hover {
    border-color: var(--border-strong);
    box-shadow:   var(--shadow-md);
    transform:    translateY(-3px);
}
.roadmap-item__step,
.roadmap__item:nth-child(1) .roadmap-item__step,
.roadmap__item:nth-child(2) .roadmap-item__step,
.roadmap__item:nth-child(3) .roadmap-item__step {
    background:      var(--brand) !important;
    color:           #FFFFFF !important;
    width:           44px !important;
    height:          44px !important;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-family:     var(--font-sans) !important;
    font-weight:     600 !important;
    font-size:       17px !important;
    box-shadow:      var(--shadow-sm);
}
.roadmap-item__title {
    color:          var(--ink) !important;
    font-size:      22px !important;
    line-height:    1.2 !important;
    letter-spacing: -0.015em;
    margin-top:     16px;
}
.roadmap-item__text {
    color:       var(--ink-muted) !important;
    font-size:   15px !important;
    line-height: 1.55 !important;
    margin-top:  8px;
}

/* Tab rates card */
.tab-rates__list {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--radius-xl);
    padding:       36px !important;
    box-shadow:    var(--shadow-xs);
}
.tab-rates__title {
    color:          var(--ink) !important;
    font-size:      28px !important;
    letter-spacing: -0.015em;
    line-height:    1.15 !important;
}
.tab-rates__item {
    border-bottom: 1px solid var(--border) !important;
    padding:       14px 0 !important;
}
.tab-rates__item:first-child .tab-rates__left,
.tab-rates__item:first-child .tab-rates__right {
    padding-top: 0 !important;
}
.tab-rates__item:last-child { border-bottom: 0 !important; }
.tab-rates__left {
    color:       var(--ink-muted) !important;
    font-size:   14px !important;
    font-weight: 500 !important;
}
.tab-rates__right {
    color:       var(--ink) !important;
    font-size:   14px !important;
    font-weight: 600 !important;
}
.tab-rates__description {
    color:       var(--ink-subtle);
    font-size:   12px;
    line-height: 1.5;
    margin-top:  18px;
}

/* Tab get card */
.tab-get-item__title {
    color:          var(--ink) !important;
    font-size:      24px !important;
    letter-spacing: -0.015em;
    line-height:    1.2 !important;
}
.tab-get-item__point {
    color:       var(--ink-muted) !important;
    font-size:   15px !important;
    line-height: 1.6 !important;
}
.tab-get-item__point b {
    color:       var(--ink) !important;
    font-weight: 600 !important;
}
.tab-get-item__point::before {
    background: var(--brand) !important;
}

/* ============================================================
   PRESERVED LEGACY COMPONENTS (modal / slider / city list / carousel)
   ============================================================ */
.input-slider {
    -webkit-appearance: none;
    width:         100%;
    height:        6px;
    border-radius: var(--radius-pill);
    outline:       none;
    padding:       0;
    margin:        0;
    background:    var(--bg-alt);
    box-shadow:    inset 0 1px 3px rgba(0, 0, 0, .08);
}
.input-slider::-webkit-slider-thumb {
    appearance:    none;
    width:         20px;
    height:        20px;
    border-radius: 50%;
    background:    var(--brand);
    cursor:        pointer;
    transition:    background var(--t-fast);
}
.input-slider::-webkit-slider-thumb:hover,
.input-slider:active::-webkit-slider-thumb { background: var(--brand-hover); }
.input-slider::-moz-range-thumb {
    width:         20px;
    height:        20px;
    border:        0;
    border-radius: 50%;
    background:    var(--brand);
    cursor:        pointer;
    transition:    background var(--t-fast);
}
.input-slider::-moz-range-thumb:hover,
.input-slider:active::-moz-range-thumb { background: var(--brand-hover); }
.input-slider:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--brand);
}

.input-slider-2 {
    -webkit-appearance: none;
    width:         100%;
    height:        4px;
    border-radius: var(--radius-pill);
    background:    var(--brand);
    outline:       none;
    padding:       0;
    margin:        0;
    position:      absolute;
    top:           0;
}
.input-slider-2::-webkit-slider-thumb {
    appearance:    none;
    width:         20px;
    height:        20px;
    border-radius: 50%;
    background:    var(--brand);
    cursor:        pointer;
    transition:    background var(--t-fast);
}
.input-slider-2::-webkit-slider-thumb:hover,
.input-slider-2:active::-webkit-slider-thumb { background: var(--brand-hover); }
.input-slider-2::-moz-range-thumb {
    width:         20px;
    height:        20px;
    border:        0;
    border-radius: 50%;
    background:    var(--brand);
    cursor:        pointer;
    transition:    background var(--t-fast);
}
.input-slider-2::-moz-range-thumb:hover,
.input-slider-2:active::-moz-range-thumb { background: var(--brand-hover); }
.input-slider-2:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--brand);
}

input::-moz-focus-inner,
input::-moz-focus-outer { border: 0; }

/* Modal */
.custom-modal {
    display:          none;
    position:         fixed;
    z-index:          10;
    left:             0;
    top:              0;
    width:            100%;
    height:           100%;
    overflow:         auto;
    background-color: rgba(21, 17, 13, 0.55);
    backdrop-filter:  blur(6px);
}
.custom-modal__content {
    background-color: var(--surface);
    margin:           10% auto;
    border:           1px solid var(--border);
    border-radius:    var(--radius-xl);
    width:            30%;
    display:          flex;
    flex-direction:   column;
    padding:          40px 28px;
    box-shadow:       var(--shadow-lg);
}
.custom-modal__content > a,
.custom-modal__content > button { margin-left: auto; margin-right: auto; }
.custom-modal__text {
    text-align:    center;
    margin-bottom: 22px;
    font-size:     18px;
    line-height:   1.4;
    color:         var(--ink);
}
@media (max-width: 768px) {
    .custom-modal__content { width: calc(100% - 32px); margin: 20% 16px; }
}

/* City autocomplete list */
.custom-list {
    display:       none;
    position:      absolute;
    background:    var(--surface);
    width:         100%;
    z-index:       2;
    box-shadow:    var(--shadow-md);
    margin-top:    8px;
    padding:       8px;
    border:        1px solid var(--border);
    border-radius: var(--radius-md);
}
.custom-list > li {
    cursor:        pointer;
    margin-bottom: 2px;
    color:         var(--ink);
    padding:       8px 10px;
    border-radius: var(--radius-sm);
    transition:    background var(--t-fast);
}
.custom-list > li:hover { background-color: var(--brand-tint); }
.custom-option__city   { font-size: 14px; font-weight: 500; }
.custom-option__region { font-size: 12px; color: var(--ink-subtle); margin-top: 2px; }

*, ::after, ::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.banner-inner {
    max-width: 1344px;
    margin:    0 auto;
    padding:   24px 20px 120px !important;
}

.banner-inner__content {
    background:    var(--surface) !important;
    border:        1px solid var(--border) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow:    var(--shadow-md) !important;
    padding:       88px 80px 96px !important;
    min-height:    560px;
    height:        auto !important;
    position:      relative;
    overflow:      visible !important;
    isolation:     isolate;
}

/* mesh gradient — clipped via pseudo's own border-radius so .banner-info can escape parent */
.banner-inner__content::before {
    content:        "";
    position:       absolute;
    inset:          0;
    border-radius:  var(--radius-xl);
    background:     radial-gradient(720px 560px at 100% -10%, var(--brand-soft) 0%, transparent 60%),
                    radial-gradient(640px 480px at -10% 110%, var(--accent-soft) 0%, transparent 55%),
                    radial-gradient(420px 320px at 78% 82%,   rgba(122, 36, 36, 0.06) 0%, transparent 60%);
    opacity:        0.95;
    pointer-events: none;
    z-index:        0;
    overflow:       hidden;
}

/* subtle grain — pure CSS, no extra file */
.banner-inner__content::after {
    content:          "";
    position:         absolute;
    inset:            0;
    border-radius:    var(--radius-xl);
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.035 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    pointer-events:   none;
    z-index:          0;
    mix-blend-mode:   multiply;
    opacity:          0.55;
    overflow:         hidden;
}

.banner-inner__left,
.banner-inner__img,
.banner-info {
    position: relative;
    z-index:  1;
}

.banner-inner__left {
    max-width: 620px !important;
    margin:    0 !important;
    padding:   0 !important;
}

.banner-inner__info { margin: 0 !important; }

/* H1 composition */
.banner-inner-info__title {
    font-family:    var(--font-serif) !important;
    font-weight:    400 !important;
    font-size:      60px !important;
    line-height:    1.02 !important;
    letter-spacing: -0.025em;
    color:          var(--ink) !important;
    margin:         0 !important;
    max-width:      none !important;
}

.banner-inner-info__title .title-bold {
    display:     block;
    font-weight: 400;
    font-family: var(--font-serif) !important;
}

.banner-inner-info__title .title-light {
    font-family:    var(--font-sans) !important;
    font-size:      19px !important;
    font-weight:    400 !important;
    line-height:    1.55 !important;
    letter-spacing: 0 !important;
    color:          var(--ink-muted) !important;
    margin-top:     24px !important;
    display:        block;
    max-width:      560px;
}

/* CTA row */
.banner-inner__cta {
    margin-top: 36px !important;
    display:    flex;
    align-items: center;
    gap:        20px;
    flex-wrap:  wrap;
}

.banner-inner__cta .button-scroll {
    margin: 0 !important;
}

.banner-micro {
    color:          var(--ink-muted) !important;
    font-size:      13px !important;
    font-weight:    500 !important;
    margin:         0 !important;
    letter-spacing: 0 !important;
    display:        inline-flex;
    align-items:    center;
    gap:            10px;
    line-height:    1;
}

.banner-micro::before {
    content:       "";
    display:       inline-block;
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--success);
    box-shadow:    0 0 0 3px rgba(92, 110, 47, 0.18);
    animation:     pulse-dot 2.4s ease-in-out infinite;
    flex:          0 0 auto;
}

@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 3px rgba(92, 110, 47, 0.2);   transform: scale(1); }
    50%      { box-shadow: 0 0 0 6px rgba(92, 110, 47, 0.08);  transform: scale(1.05); }
}

/* Hero imagery */
.banner-inner__img {
    margin:    0 !important;
    max-width: 480px;
    position:  absolute !important;
    right:     60px;
    top:       60px;
    width:     38%;
}

.banner-inner__img img {
    width:         100%;
    height:        auto;
    max-width:     100%;
    max-height:    420px;
    object-fit:    contain;
    display:       block;
    border-radius: var(--radius-lg);
    filter:        drop-shadow(0 24px 48px rgba(27, 19, 16, 0.14));
}

/* Feature strip: fully BELOW hero card (not straddling, no overlap with image) */
.banner-info {
    position:  absolute !important;
    top:       100% !important;
    bottom:    auto !important;
    left:      50% !important;
    transform: translateX(-50%) !important;
    width:     100% !important;
    max-width: 100%;
    margin-top: 20px;
    padding:   0 !important;
}
.banner-info__content {
    width:      100% !important;
    max-width:  100%;
    height:     auto !important;
    padding:    22px 40px !important;
}

/* ——— Hero responsive ——— */
@media (max-width: 1300px) {
    .banner-inner__content {
        padding:    80px 56px 96px !important;
        min-height: auto;
        height:     auto !important;
    }
    .banner-inner__img { right: 40px; top: 72px; width: 36%; }
    .banner-inner-info__title { font-size: 52px !important; }
}

@media (max-width: 1023px) {
    .banner-inner__content { padding: 64px 40px 88px !important; }
    .banner-inner__left { max-width: 540px !important; }
    .banner-inner-info__title { font-size: 44px !important; }
    .banner-inner__img { width: 32%; max-width: 360px; }
}

@media (max-width: 768px) {
    .banner-inner { padding: 16px 12px 180px !important; }
    .banner-inner__content {
        padding:        44px 24px 56px !important;
        border-radius:  var(--radius-lg) !important;
        flex-direction: column !important;
        align-items:    center !important;
        gap:            28px;
    }
    .banner-inner__left {
        display:     contents !important;
    }
    .banner-inner__info {
        order: 1;
        width: 100%;
        text-align: center;
    }
    .banner-inner-info__title {
        font-size:  32px !important;
        text-align: center;
    }
    .banner-inner-info__title .title-light {
        font-size:  16px !important;
        margin-top: 14px !important;
        text-align: center;
    }
    .banner-inner__img {
        position: static !important;
        width:    210px !important;
        max-width: 240px !important;
        margin:   0 auto !important;
        order:    2;
    }
    .banner-inner__cta {
        order:       3;
        width:       100%;
        flex-direction: column;
        gap:         12px;
        margin-top:  0 !important;
    }
    .banner-inner__cta .button-scroll { width: 100%; max-width: 320px; }
    .banner-micro { margin: 0 auto !important; }
    .banner-info {
        top:        100% !important;
        bottom:     auto !important;
        margin-top: 16px;
        width:      100% !important;
        padding:    0 !important;
    }
    .banner-info__content { padding: 18px 20px !important; }
}

@media (max-width: 440px) {
    .banner-inner { padding: 12px 10px 220px !important; }
    .banner-inner__content { padding: 36px 18px 44px !important; }
    .banner-inner-info__title { font-size: 28px !important; }
    .banner-inner-info__title .title-light { font-size: 15px !important; }
    .banner-inner__img { width: 170px !important; }
}

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
.header {
    position:        sticky !important;
    top:             0;
    z-index:         20;
    height:          auto !important;
    min-height:      72px;
    padding:         0 !important;
    background:      rgba(246, 243, 236, 0.82) !important;
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom:   1px solid var(--border);
}

.header__content {
    max-width:      1344px !important;
    margin:         0 auto !important;
    padding:        12px 24px !important;
    height:         auto !important;
    min-height:     72px;
    color:          var(--ink);
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    gap:            24px;
}

/* Left cluster */
.header__left.header-left {
    align-items:    center !important;
    gap:            16px;
}

.header-left__logo {
    display:    inline-flex;
    align-items: center;
    height:     44px;
    max-width:  200px !important;
}
.header-left__logo img {
    height:    100% !important;
    max-width: 100% !important;
    width:     auto !important;
    object-fit: contain;
}

/* Vertical divider between logo and tagline */
.header-left__text {
    position:       relative;
    margin:         0 0 0 20px !important;
    padding-left:   20px;
    max-width:      220px !important;
    color:          var(--ink-muted) !important;
    font-size:      13px !important;
    line-height:    1.35 !important;
    font-weight:    500;
    letter-spacing: 0 !important;
}
.header-left__text::before {
    content:    "";
    position:   absolute;
    left:       0;
    top:        50%;
    transform:  translateY(-50%);
    width:      1px;
    height:     28px;
    background: var(--border-strong);
}

/* Right cluster */
.header__right.header-right {
    align-items:     center !important;
    justify-content: flex-end !important;
    gap:             16px;
    flex-wrap:       nowrap;
}

.header-right .row:last-child {
    align-items: center;
    gap:         16px;
    flex-wrap:   nowrap;
}

/* Header CTA — smaller pill */
.header a.button-scroll,
.header .button-scroll {
    margin: 0 !important;
}
.header .button-scroll__span1 {
    padding:     10px 20px !important;
    font-size:   13px !important;
    font-weight: 600 !important;
}

/* ——— Header responsive ——— */
@media (max-width: 1180px) {
    .header__content { padding: 12px 20px !important; gap: 16px; }
    .header-left__text { max-width: 180px !important; font-size: 12px !important; }
}


@media (max-width: 856px) {
    .header-left__text {
        padding-left: 16px;
        margin-left:  16px !important;
        font-size:    12px !important;
    }
    .header-left__text::before { height: 24px; }
}

@media (max-width: 768px) {
    .header {
        position:   relative !important;
        min-height: 64px;
    }
    .header__content {
        padding:    12px 16px !important;
        min-height: 64px;
        gap:        10px;
        flex-wrap:  wrap;
        justify-content: center !important;
    }
    .header__left.header-left {
        flex-direction: row !important;
        align-items:    center !important;
        justify-content: center;
        width:          100%;
        gap:            12px;
    }
    .header-left__logo { height: 40px; max-width: 160px !important; }
    .header-left__text {
        padding-left: 12px;
        margin-left:  12px !important;
        max-width:    170px !important;
        font-size:    11.5px !important;
        line-height:  1.3 !important;
    }
    .header__right.header-right {
        justify-content: center !important;
        gap:             10px;
        width:           100%;
    }
    .header .button-scroll.mob {
        display: none !important;
    }
    .header__right.header-right { display: none !important; }
}

@media (max-width: 540px) {
    .header-left__text { display: none; }
    .header-left__logo { max-width: 150px !important; }
    .header .button-scroll__span1 { padding: 9px 16px !important; font-size: 12px !important; }
}

/* ============================================================
   TABS SECTION (Описание / Как получить / Тарифы)
   ============================================================ */
.tabs {
    max-width: 1344px !important;
    margin:    40px auto 0 !important;
    padding:   0 24px;
    overflow:  visible !important;
}

.tabs-nav {
    border-bottom: 1px solid var(--border);
    padding-bottom: 20px;
    margin-bottom: 32px;
}

.tabs-content.row {
    align-items:     center !important;
    justify-content: space-between !important;
    gap:             32px;
    flex-wrap:       wrap;
}

.tabs-nav__title {
    font-size:      27px !important;
    font-weight:    400 !important;
    line-height:    1.15 !important;
    letter-spacing: -0.02em;
    color:          var(--ink);
    margin:         0 !important;
    max-width:      620px;
}

.tabs-nav__links.row {
    gap:         4px;
    align-items: center;
    flex-wrap:   wrap;
    background:  var(--surface);
    border:      1px solid var(--border);
    padding:     4px;
    border-radius: var(--radius-pill);
}

.tabs-nav__link {
    position:       relative;
    color:          var(--ink-muted) !important;
    font-size:      14px !important;
    font-weight:    500;
    padding:        10px 18px !important;
    margin:         0 !important;
    border-radius:  var(--radius-pill);
    cursor:         pointer;
    transition:     color var(--t-fast), background var(--t-fast);
    line-height:    1;
}
.tabs-nav__link:hover {
    color:      var(--ink) !important;
    background: var(--brand-tint);
}
.tabs-nav__link._active {
    color:      #FFFFFF !important;
    background: var(--brand);
}
.tabs-nav__link._active:hover {
    color:      #FFFFFF !important;
    background: var(--brand-hover);
}

.tab-description {
    margin:    0 auto !important;
    max-width: 1344px !important;
    padding:   20px 0 0 !important;
}

.tab-description__title {
    font-family:    var(--font-serif) !important;
    font-weight:    400 !important;
    font-size:      36px !important;
    line-height:    1.15 !important;
    letter-spacing: -0.02em;
    text-align:     left !important;
    margin:         0 0 28px !important;
    max-width:      820px;
    color:          var(--ink) !important;
}

.tab-description-carts {
    margin:    0 !important;
    gap:       20px;
    flex-wrap: wrap;
}
.tab-description-carts-item {
    flex:          1 1 280px !important;
    margin:        0 !important;
    min-height:    220px !important;
}

@media (max-width: 1024px) {
    .tabs-content.row { flex-direction: column; align-items: flex-start !important; }
    .tabs-nav__links.row { width: 100%; justify-content: center; }
    .tabs-nav__title { font-size: 22px !important; }
    .tab-description__title { font-size: 28px !important; }
}
@media (max-width: 540px) {
    .tabs { padding: 0 12px; margin-top: 32px !important; }
    .tabs-nav { padding-bottom: 14px; margin-bottom: 20px; }
    .tabs-nav__title { font-size: 18px !important; }
    .tabs-nav__link { padding: 8px 14px !important; font-size: 13px !important; }
    .tab-description__title { font-size: 22px !important; margin-bottom: 20px !important; }
    .tab-description-carts { gap: 14px; }
    .tab-description-carts-item__info { padding: 22px 22px 22px !important; }
    .tab-description-carts-item__title { font-size: 19px !important; }
    .tab-description-carts-item__text { font-size: 14px !important; }
}

/* Tab rates / Tab get — vertical stack layout tweak */
.tab-rates__list.row,
.tab-get__list {
    flex-direction: column;
    gap:            0;
}

/* ============================================================
   BANNER-ADV — dark ink CTA banner
   ============================================================ */
.banner-adv {
    max-width: 1344px !important;
    width:     auto !important;
    margin:    80px auto !important;
    padding:   0 24px !important;
}

.banner-adv__content,
.banner-adv__content.row {
    background:     var(--ink) !important;
    background-color: var(--ink) !important;
    border-radius:  var(--radius-xl) !important;
    box-shadow:     var(--shadow-lg) !important;
    height:         auto !important;
    min-height:     240px;
    padding:        56px 64px !important;
    color:          #FFFFFF;
    position:       relative;
    overflow:       hidden;
    isolation:      isolate;
    align-items:    center !important;
}

/* mesh accents behind banner-adv */
.banner-adv__content::before {
    content:        "";
    position:       absolute;
    inset:          0;
    border-radius:  var(--radius-xl);
    background:     radial-gradient(640px 420px at 92% 10%, rgba(181, 132, 65, 0.22) 0%, transparent 55%),
                    radial-gradient(520px 360px at 8%  120%, rgba(122, 36, 36, 0.45) 0%, transparent 55%),
                    radial-gradient(360px 260px at 70% 80%, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
    pointer-events: none;
    z-index:        0;
    overflow:       hidden;
}
/* grain */
.banner-adv__content::after {
    content:          "";
    position:         absolute;
    inset:            0;
    border-radius:    var(--radius-xl);
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    pointer-events:   none;
    z-index:          0;
    mix-blend-mode:   screen;
    opacity:          0.4;
    overflow:         hidden;
}

.banner-adv__info {
    position:   relative;
    z-index:    1;
    max-width:  640px;
    margin:     0 !important;
    display:    flex;
    flex-direction: column;
    gap:        16px;
}

.banner-adv__title {
    font-family:    var(--font-serif) !important;
    font-weight:    400 !important;
    font-size:      44px !important;
    line-height:    1.08 !important;
    letter-spacing: -0.02em;
    color:          #FFFFFF !important;
    margin:         0 !important;
}

.banner-adv__subtitle {
    color:       rgba(255, 255, 255, 0.72) !important;
    font-size:   17px !important;
    line-height: 1.5 !important;
    margin:      0 !important;
    font-weight: 400 !important;
}

.banner-adv .button-scroll {
    margin:     8px 0 0 !important;
    align-self: flex-start;
}

.banner-adv__img {
    position:        relative;
    z-index:         1;
    flex:            0 0 auto;
    align-self:      center;
    max-width:       420px;
    width:           38%;
    margin-left:     32px;
    display:         flex;
    justify-content: flex-end;
}
@media (min-width: 769px) {
    .banner-adv__content,
    .banner-adv__content.row { padding-right: 16px !important; }
}
@media (min-width: 1024px) {
    .banner-adv__content,
    .banner-adv__content.row { padding-right: 0 !important; }
    .banner-adv__img { margin-right: -24px; }
}
.banner-adv__img img {
    display:       block;
    width:         100%;
    height:        auto;
    max-height:    320px;
    object-fit:    contain;
    border-radius: var(--radius-lg);
    filter:        drop-shadow(0 18px 40px rgba(0, 0, 0, 0.35));
}

@media (max-width: 860px) {
    .banner-adv__content,
    .banner-adv__content.row {
        padding:   44px 32px !important;
        min-height: auto;
    }
    .banner-adv__title { font-size: 32px !important; }
    .banner-adv__subtitle { font-size: 15px !important; }
    .banner-adv__img { width: 34%; max-width: 300px; margin-left: 24px; }
    .banner-adv__img img { max-height: 240px; }
}
@media (max-width: 768px) {
    .banner-adv { margin: 56px auto !important; padding: 0 12px !important; }
    .banner-adv__content,
    .banner-adv__content.row {
        padding:         36px 24px !important;
        flex-direction:  column !important;
        align-items:     center !important;
        text-align:      center;
        gap:             20px;
    }
    .banner-adv__info {
        display:         contents !important;
    }
    .banner-adv__title {
        order:           1;
        font-size:       26px !important;
        text-align:      center;
        width:           100%;
    }
    .banner-adv__subtitle {
        order:           2;
        text-align:      center;
        width:           100%;
    }
    .banner-adv__img {
        order:           3;
        width:           100%;
        max-width:       260px;
        margin:          4px auto 0 !important;
        align-self:      center;
        justify-content: center;
    }
    .banner-adv__img img { max-height: 200px; }
    .banner-adv .button-scroll {
        order:           4;
        align-self:      center;
        width:           100%;
        max-width:       280px;
        margin:          4px 0 0 !important;
    }
}

/* ============================================================
   ROADMAP SECTION
   ============================================================ */
.roadmap {
    max-width: 1344px !important;
    margin:    0 auto !important;
    padding:   0 24px 40px;
}

.roadmap__content {
    max-width: 100% !important;
    width:     auto !important;
    margin:    0 !important;
}

.roadmap__content h2 {
    font-family:    var(--font-serif) !important;
    font-weight:    400 !important;
    font-size:      40px !important;
    line-height:    1.1 !important;
    letter-spacing: -0.02em;
    text-align:     left !important;
    color:          var(--ink) !important;
    margin:         0 0 32px !important;
    max-width:      760px;
}

.roadmap__list {
    gap:        20px;
    flex-wrap:  wrap;
    align-items: stretch !important;
    margin:     0 !important;
    position:   relative;
}

.roadmap-item {
    flex:          1 1 280px !important;
    align-items:   flex-start !important;
    text-align:    left !important;
    padding:       32px 28px !important;
    display:       flex !important;
    flex-direction: column !important;
    gap:           16px;
}

/* Kill the legacy connector line — cleaner modern card grid */
.roadmap-item:after,
.roadmap-item:first-child:after,
.roadmap-item:last-child:after {
    display: none !important;
}

/* Медальоны block_1-3.png вместо цифр (как legacy: картинка, цифра скрыта) */
.roadmap-item__step,
.roadmap__item:nth-child(1) .roadmap-item__step,
.roadmap__item:nth-child(2) .roadmap-item__step,
.roadmap__item:nth-child(3) .roadmap-item__step {
    background-color:    transparent !important;
    background-size:     contain !important;
    background-repeat:   no-repeat !important;
    background-position: center !important;
    border-radius:       0 !important;
    box-shadow:          none !important;
    font-size:           0 !important;
    color:               transparent !important;
    width:               70px !important;
    height:              70px !important;
    margin:              0 !important;
}
.roadmap__item:nth-child(1) .roadmap-item__step { background-image: url("../img/block_1.png") !important; }
.roadmap__item:nth-child(2) .roadmap-item__step { background-image: url("../img/block_2.png") !important; }
.roadmap__item:nth-child(3) .roadmap-item__step { background-image: url("../img/block_3.png") !important; }

@media (max-width: 1024px) {
    .roadmap { padding: 0 20px 40px; }
    .roadmap__content h2 { font-size: 32px !important; }
}
@media (max-width: 540px) {
    .roadmap { padding: 0 12px 32px; }
    .roadmap__content h2 { font-size: 24px !important; margin-bottom: 22px !important; text-align: left !important; }
    .roadmap__list { gap: 14px; }
    .roadmap-item { padding: 24px !important; }
    .roadmap-item__title { font-size: 19px !important; }
    .roadmap-item__text { font-size: 14px !important; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    background:   var(--ink) !important;
    color:        rgba(255, 255, 255, 0.72);
    margin:       120px 0 0 !important;
    padding:      0 !important;
    border-top:   1px solid rgba(255, 255, 255, 0.06);
}

.footer__content {
    max-width: 1344px !important;
    width:     100% !important;
    margin:    0 auto !important;
    padding:   64px 32px 56px !important;
}

.footer__logo {
    display: inline-block !important;
    width:   auto !important;
    height:  auto !important;
    margin:  32px 0 0 !important;
}
.footer__logo img {
    display:   block;
    width:     auto !important;
    height:    20px !important;
    max-width: 110px;
    opacity:   0.95;
    filter:    brightness(0) invert(1);
}

.footer__data {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin:        0 0 32px !important;
    padding:       0 0 24px !important;
}
.footer__data.row { align-items: center !important; }

.footer__title {
    color:       rgba(255, 255, 255, 0.92) !important;
    font-size:   14px !important;
    line-height: 1.5 !important;
    width:       auto !important;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.footer__title-link {
    color:           rgba(255, 255, 255, 0.92) !important;
    text-decoration: none !important;
    border-bottom:   1px solid rgba(255, 255, 255, 0.24);
    padding-bottom:  2px;
    transition:      color var(--t-base), border-color var(--t-base);
    cursor:          pointer;
}
.footer__title-link:hover {
    color:         #FFFFFF !important;
    border-color:  rgba(255, 255, 255, 0.6);
}

.footer__text {
    color:         rgba(255, 255, 255, 0.58) !important;
    font-size:     12px !important;
    line-height:   1.6 !important;
    margin:        10px 0 0 !important;
    max-width:     1040px;
}
.footer__text:first-of-type { margin-top: 0 !important; }
.footer__text strong,
.footer__text b { color: rgba(255, 255, 255, 0.82); font-weight: 500; }

.footer__organization {
    color:       rgba(255, 255, 255, 0.58) !important;
    font-size:   12px !important;
    line-height: 1.6 !important;
}
.footer__organization span { display: block; margin: 6px 0 0; }
.footer__organization span:first-child { margin: 0; }

@media (max-width: 1023px) {
    .footer { margin-top: 96px !important; }
    .footer__content { padding: 56px 24px 48px !important; }
}

/* ============================================================
   BACK TO TOP — mobile only
   ============================================================ */
.to-top { display: none; }
@media (max-width: 768px) {
    .to-top {
        display:          inline-flex;
        align-items:      center;
        justify-content:  center;
        position:         fixed;
        right:            14px;
        bottom:           calc(18px + env(safe-area-inset-bottom, 0px));
        width:            44px;
        height:           44px;
        border-radius:    999px;
        border:           1px solid rgba(122, 36, 36, 0.22);
        background:       rgba(122, 36, 36, 0.55);
        backdrop-filter:  blur(8px);
        -webkit-backdrop-filter: blur(8px);
        color:            #FFFFFF;
        box-shadow:       0 6px 18px rgba(90, 26, 26, 0.18);
        cursor:           pointer;
        padding:          0;
        appearance:       none;
        -webkit-appearance: none;
        opacity:          0;
        visibility:       hidden;
        transform:        translateY(8px);
        pointer-events:   none;
        transition:       opacity 220ms ease, transform 220ms ease, visibility 220ms ease, background var(--t-base);
        z-index:          50;
    }
    .to-top.is-visible {
        opacity:         0.78;
        visibility:      visible;
        transform:       translateY(0);
        pointer-events:  auto;
    }
    .to-top.is-visible:hover,
    .to-top.is-visible:active {
        opacity:    1;
        background: rgba(122, 36, 36, 0.75);
        transform:  translateY(-1px);
    }
    .to-top svg { width: 20px; height: 20px; }
}

@media (max-width: 540px) {
    .footer { margin-top: 64px !important; }
    .footer__content { padding: 40px 16px 36px !important; }
    .footer__logo {
        display: block !important;
        width:   fit-content !important;
        margin:  32px auto 0 !important;   /* лого по центру, отступ сверху */
    }
    .footer__logo img { height: 16px !important; }
    .footer__data {
        display:      block !important;
        margin:       0 0 24px !important;
        padding:      0 0 20px !important;
    }
    .footer__title { text-align: left !important; width: 100% !important; font-size: 13px !important; }
    .footer__text { font-size: 11.5px !important; line-height: 1.55 !important; }
}