/*
===================
ШРИФТ САЙТА: Roboto (локальный)
===================
Объявление @font-face и правило font-family переехали в SF_SKIN_OVERRIDES
(app/utils/generation.py) — они одинаковы для ВСЕХ сервисов на этом шаблоне, а
здесь доставались бы только этому. process_skin_css дописывает слой в конец
каждого skin.css и в превью, и в боевой сборке, поэтому шрифт подключается сам.
Файлы .woff2 остаются рядом — sites/{slug}/fonts/ (у нового сервиса приезжают
из каталога fonts/ внутри шаблона); пути в url() относительные и считаются от этого
CSS, поэтому одинаково работают в превью, на боевом домене и на любой глубине.
Источник правды один: правишь шрифт — правишь слой, не этот файл.
*/

/*
===================
SKIN: WHITE LABEL
===================
*/



/*
===================
COLORS
===================
*/


.album-box .caption, .extra-content, .boxed.advs-box-top-icon-img .advs-box-content, [class*="col-md-"].boxed, .niche-box-blog .block-data, .advs-box-side-img hr, .mi-menu .sidebar-nav, .advs-box-top-icon-img.niche-box-post:after, .accordion-list .list-group-item:before, .woocommerce .product span.onsale, .white.btn, .white .btn, .circle-button, .btn.circle-button, .btn, .header-bootstrap, .header-title hr, .advs-box.boxed, i.circle, .advs-box-multiple div.circle, .advs-box-side-img hr, .call-action-box, .title-base hr, .white .title-base hr, .header-video.white .title-base hr, .header-slider.white .title-base hr, .header-animation.white .title-base hr, .header-title.white .title-base hr, .nav.inner.ms-mini, .bg-color, .title-base .scroll-top, .title-modern .scroll-top, i.square, .header-base, .progress-bar, .tagbox span {
    background-color: #00d5b5;
}

    .navbar-inner .nav.ms-minimal li a:before, .header-base.white {
        background-color: #00d5b5 !important;
    }

    .bg-color .btn:not(.btn-border), .btn-primary:focus, .boxed .btn, .boxed.advs-box-multiple div.circle, .btn-primary.focus, .side-menu .active, .white.circle-button:hover, .btn:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {
        background-color: #2e5b58 !important;
    }

    i.icon, .fullpage-menu .active i, .navbar-default .navbar-toggle:hover i, .navbar-default .navbar-toggle:focus i, header .side-menu .active > a, .adv-img-button-content .caption i, .icon-menu ul.nav > li.active > a i, .icon-menu ul.nav > li:hover > a i, .title-base h1, .title-icon h2, .title-icon h1, .title-base.title-small h2, .active .maso-order i, .btn.btn-border i, .advs-box-top-icon .icon, .datepicker-panel > ul > li.picked, .tab-box .nav-tabs > li.active > a, .advs-box-content h2:hover a, .pricing-table .pricing-price span, .datepicker-panel > ul > li.picked:hover, footer h4, .quote-author, .box-menu-inner .icon-box i, .caption-bottom p, .mi-menu li .fa, .advs-box-top-icon.boxed .icon, .fullpage-arrow.arrow-circle .arrow i, .accordion-list .list-group-item > a i, .mega-menu .fa-ul .fa-li, .adv-circle.adv-circle-center i, .mi-menu a > .fa, .box-steps .step-item:after, .box-steps .step-number, h6, li.panel-item .fa-li, .icon-menu .navbar-collapse ul.nav i, .side-menu i, .side-menu ul a i, .bs-menu li:hover > a, .bs-menu li.active > a, .hamburger-button:hover, .img-box.adv-circle i, .advs-box-side .icon, .advs-box-side-icon i, .niche-box-testimonails h5, .title-icon i, i, .fullpage-menu.white li.active a i, .timeline > li > .timeline-label h4, .anima-button i, h4, .pricing-table .list-group-item.pricing-price, .footer-center .footer-title, .accordion-list .list-group-item > a.active, .btn-border, .btn.btn-border, .btn.circle-button.btn-border {
        color: #00d5b5;
    }

@media (max-width: 992px) {
    .navbar-nav .open .dropdown-menu > li > a[href="#"] {
        color: #00d5b5 !important;
    }
}

.footer-minimal .footer-title, .advs-box-top-icon.boxed .btn, .advs-box-top-icon.boxed .circle-button, .sidebar-nav ul a:hover, header .mi-menu .sidebar-nav ul a:hover, .woocommerce div.product p.price, .woocommerce div.product span.price, .text-color, .white .text-color, .accordion-list .list-group-item > a:hover, .boxed .circle-button:hover i, .boxed .btn:hover i, .pagination > .active > a, .pagination > li:not(.disabled):hover > a, .boxed .circle-button, .navbar-inner .nav.ms-minimal li.active a, .navbar-nav > .active > a, .navbar-nav > li:hover > a, footer h3, header .btn-search:hover, header .navbar-nav .dropdown li > a:hover {
    color: #00d5b5 !important;
}

.btn-border:hover, .btn.btn-border:hover, .btn.circle-button.btn-border:hover {
    color: #2e5b58;
}

    .btn-border:hover i {
        color: #2e5b58 !important;
    }

.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus, .pagination > li:not(.disabled):hover > a i:before {
    border-color: #00d5b5 !important;
    color: #00d5b5 !important;
}

.nav.inner.ms-rounded > li > a:hover, .nav.inner.ms-rounded > li.active a, .timeline > li > .timeline-badge {
    background-color: #00d5b5 !important;
    border-color: #00d5b5 !important;
}

.circle-button, .navbar-nav > .active > a .caret:before, .btn-default, .navbar-nav > li:hover > a .caret:before, .white .btn:not(.btn-border), .btn-border, .bg-transparent .navbar-nav > li.active > a .caret:before, .bg-transparent .navbar-nav > li:hover > a .caret:before {
    border-color: #00d5b5;
}

.boxed.advs-box-multiple .advs-box-content {
    border-color: #00d5b5 !important;
}

.datepicker-top-left, .datepicker-top-right {
    border-top-color: #00d5b5;
}

    .datepicker-top-left:before, .datepicker-top-right:before {
        border-bottom-color: #00d5b5;
    }

.circle-button:hover, .btn:hover {
    border-color: #2e5b58 !important;
}

.navbar-default .navbar-nav > li > a, .list-items .list-item h3, .list-items .list-item span, .header-base .breadcrumb.b li.active, .niche-box-team .content-box h2, .progress-bar > span, .progress-circle .inner-circle .main, .mega-menu h5, header li a, header .navbar-nav .dropdown li > a, .pricing-table h3, .advs-box-content h2 a, .advs-box-top-icon h3, .adv-img-down-text h2 {
    color: #3b444e;
}

body, header, p, .adv-img p, .navbar-mini span, .list-items .list-item p, .porfolio-bar i, .header-base .breadcrumb.b a, .porfolio-bar a, header.bg-transparent .navbar-default .navbar-nav > li > a, .title-base p, div.title-icon p, .niche-box-team .content-box h4, .side-menu-fixed .bottom-area p, .pagination li > a, .pagination li:not(.disabled) > a i, header .mi-menu ul li > a, .caption-bottom p, .adv-circle .caption p, .adv-img-down-text .caption-bottom p, .tag-row span, .tag-row a, .tag-row i, .advs-box p, .tab-box .nav-tabs > li > a span, .list-blog p, .social-group i, footer .social-group i, .pricing-table .list-group-item, a {
    color: #637280;
}

    .social-group i.circle, .social-button i.circle, .maso-order i {
        color: #637280;
        border-color: #637280;
    }

    header .slimScrollBar {
        background: #637280 !important;
    }

.white.btn, .white .btn, .white .tag-row a, .header-bootstrap i.icon, .white .tag-row i, .white .advs-box-content h2 a, .white.advs-box-side-img h2 a, .advs-box-side-icon.boxed .icon-box i, .mi-menu .side-menu i, .circle-button, .white .pagination > li.disabled > a, .white .pagination > li > a, .social-colors i, .btn.circle-button, .btn, .btn i, .circle-button, .btn.circle-button, .btn:hover, .btn:hover i, .btn.focus, .input-group button, .block-infos .block-comment, .block-infos .block-comment i {
    color: #fff;
}

    .nav.inner.ms-rounded > li > a:hover, .white .btn-text:hover,.header-base.white .breadcrumb.b a, .mi-menu .sidebar-nav ul a:hover, .white .btn.btn-border:hover, .white.advs-box-top-icon h3, .nav.inner:not(.ms-rounded) > li.active, .nav.inner.ms-rounded > li.active a, .nav.inner.ms-rounded li:hover i, .ms-rounded .active .maso-order i, .white .btn.circle-button.btn-border {
        color: #fff !important;
    }

.section-bg-image .advs-box.boxed-inverse, .header-base:not(.bg-cover), .white .flex-control-paging li a:hover, body .section-bg-color .advs-box-blog.boxed-inverse, .section-bg-image [class*="col-md-"].boxed-inverse, [class*="shadow-"].boxed-inverse, .sidebar-nav ul ul {
    background-color: #fff;
}

header .side-menu .active {
    background-color: #fff !important;
}

.white .flex-control-paging li a.flex-active {
    border-color: #fff;
    background-color: #fff;
}

.white .flex-control-paging li a, body .white .flex-direction-nav a:before, .btn .caret:before, body .white .flex-direction-nav a.flex-next:before, .white .accordion-list .list-group-item > a:before {
    border-color: #fff;
}

.white .btn.btn-border:hover, .white .pagination li > a i:before {
    border-color: #fff !important;
}

.section-bg-color .advs-box-top-icon.boxed .icon, .section-bg-color .advs-box-top-icon.boxed-inverse .icon, .section-bg-color .advs-box-top-icon .icon, .navbar-mini {
    background-color: #f7f7f7;
}

.footer-bg-color, .bg-color-2 {
    background-color: #f9fcff !important;
}

/*
===================
CUSTOM CLASSES
===================
*/

.shadow-1 {
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.2);
}

.shadow-2 {
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
}

img.shadow-1, img.shadow-2, img.shadow-3 {
    border-radius: 10px;
    margin: 8px !important;
    width: calc(100% - 20px);
}

iframe.shadow-1, iframe.shadow-2 {
    border-radius: 10px;
}

img.shadow-2 {
    margin: 13px !important;
}

.adv-img-down-text.shadow-1 {
    box-shadow: none;
}

    .adv-img-down-text.shadow-1 .img-box {
        margin: 9px;
        width: calc(100% - 18px);
        border-radius: 10px;
        box-shadow: 0 0 14px rgba(0, 0, 0, 0.2);
        overflow: hidden;
    }

        .adv-img-down-text.shadow-1 .img-box img {
            border-radius: 10px;
        }

.width-750 {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

.width-500 {
    max-width: 500px;
    margin: auto;
}

.btn-200 {
    width: 200px;
}

.off-section {
    margin-top: -125px;
    background: none;
}

.maso-15 .maso-box .maso-item, .grid-15 .grid-box .grid-item {
    padding: 15px;
}

.maso-15, .grid-15 {
    margin: -15px;
}



/*
===================
DESIGN
===================
*/

.btn-border, .btn-border:hover, .navbar-nav li:hover, header .btn-default:hover, header .circle-button:hover {
    background: none !important;
    box-shadow: none !important;
}

.btn:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

body, header, p, .adv-img p, .caption-bottom p, .adv-circle .caption p, .advs-box p, .list-blog p {
    font-family: sans-serif;
    font-weight: 400;
    letter-spacing: normal;
    font-size: 15px;
    line-height: 24px;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
}

.advs-box p {
    font-size: 13px;
}

.advs-box-side .img-box, .advs-box-top-icon.boxed, .maso-item > .img-box, .grid-item > .img-box, [class*="col-md-"] > .img-box, [class*="col-md-"] > .img-box img, [class*="col-md-"] .img-box:before, .slides > li > .img-box:not(.circle), .slides > li > .img-box:not(.circle) img, .social-group a i:not(.circle) {
    border-radius: 4px !important;
}

.adv-img, div div.adv-img-side-content.adv-img, .adv-img .img-box,.advs-box-top-icon-img .img-box img,.advs-box-top-icon-img .img-box:before, .niche-box-blog .img-box, .google-map, .niche-box-blog .img-box img, .advs-box.boxed {
    border-radius: 6px !important;
}

.adv-circle, [class*="col-md-"] > .img-box.adv-circle {
    border-radius: 50% !important;
}

header .slimScrollBar {
    opacity: 0.2 !important;
}

.google-map {
    overflow: hidden;
}

.img-box.circle {
    border-radius: 50%;
}

[class*="col-md-"].boxed-inverse, [class*="col-md-"].boxed, .row.vertical-row > div.boxed-inverse, .row.vertical-row > div.boxed {
    padding: 60px;
    border-radius: 4px;
}

h4 {
    font-weight: 300;
    font-size: 30px;
    margin-bottom: 20px;
    line-height: 41px;
}

body .row-22 {
    height: 800px !important;
}

h3, .h3 {
    line-height: 35px;
}

.btn, ul.list-texts li b {
    transition: all .6s;
}

ul.list-texts li b {
    font-weight: 600;
}

.btn:not(.circle-button) {
    border-radius: 4px;
}

.btn-xs {
    padding: 5px 10px 3px 10px;
}

.btn-lg {
    padding: 10px 25px;
    border-radius: 30px;
    font-weight: 300;
}

.anima-button.btn-xs:hover {
    padding-left: 30px;
}

.container.content, .section-empty > .content, .section-bg-color > .content, .section-bg-image > .content, .section-bg-video > .content, .section-bg-animation > .content, .section-slider > .content, .section-two-blocks .content {
    padding-top: 70px;
    padding-bottom: 70px;
}

.caret {
    border: none;
    margin-top: -26px;
}

    .caret:before, .dropdown-submenu > a:after, body .flex-direction-nav a:before, body .flex-direction-nav a.flex-next:before, .accordion-list .list-group-item > a:before, .side-menu .fa.arrow:before,
    .pagination > li > a i:before, .porfolio-bar .icon-box i:before {
        border-top-width: 2px;
        border-top-style: solid;
        border-right-width: 2px;
        border-right-style: solid;
        content: "" !important;
        display: inline-block;
        margin-left: .3em;
        position: relative;
        pointer-events: none;
        width: 6px;
        height: 6px;
        transition: right .15s;
        -webkit-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
        transform: rotate(135deg);
        border-color: rgba(93, 93, 93, 0.5);
    }

.side-menu .fa.arrow:before {
    transform: rotate(45deg);
}

.nav > li > a {
    padding: 10px 25px;
}

.nav.inner > li > a:hover, .nav.inner:not(.ms-rounded) > li.active, .nav.inner.ms-rounded > li.active a, .sidebar-nav ul a:hover, .sidebar-nav ul ul a:hover, .sidebar-nav ul ul a:active {
    background: none;
}

.dropdown-submenu > a:after {
    content: '';
    border-left: none;
    border-bottom: none;
    transform: rotate(45deg);
}

header .btn-search {
    margin-top: 11px;
    font-size: 20px;
    border: none;
    background: none;
}

header .bottom-area a > img {
    border-radius: 5px;
}

header .navbar-right > .lan-menu {
    padding-right: 15px;
}

body ul.lan-menu li a,header .navbar-nav ul.lan-menu .dropdown li > a {
    font-size: 11px;
    line-height: 25px;
    margin-top: 17px;
    font-weight: 600;
    text-transform: uppercase;
    border: 1px solid #c5c5c5;
    border-radius: 15px;
    padding: 1.2px 12px 0 9px;
    background: #fff;
}

.lan-menu a img {
    margin: -3px 5px 0 0;
    border-radius: 15px;
}

.lan-menu li a span {
    display: none;
}

.lan-menu ul.dropdown-menu {
    min-width: 60px;
    width: 60px;
    background: none;
    border: none;
    box-shadow: none;
    padding-top: 15px;
}


.side-menu-fixed .bottom-area p {
    padding: 5px 20px;
    opacity: .7;
}

.search-box {
    background-color: rgba(248, 248, 248, 0);
    margin: 90px 0 0 0;
    padding: 0;
    border: none;
    box-shadow: none;
    padding-bottom: 15px;
}

    .search-box input[type="text"] {
        max-width: 1155px;
        margin-left: 15px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
        border: none;
    }

header .navbar-nav .dropdown li > a {
    font-weight: 400;
    font-size: 13px;
    border-bottom: 1px solid #f3f3f3;
    transition: all .3s;
    padding: 12px 15px;
}

header .navbar-nav .mega-menu ul > li > a {
    padding: 5px 0;
}

header .navbar-nav .dropdown:not(.mega-tabs) li > a:hover {
    padding-left: 20px;
    background: none;
}

header .navbar-nav .mega-menu .col ul > li > a:hover {
    padding-left: 5px;
}

header .col li:last-child > a {
    border-bottom: none;
}


header > .navbar {
    box-shadow: 0 0 4px rgba(0,0,0,.14), 0 2px 6px rgba(0, 0, 0, 0.12);
    border: none;
}

header.menu-transparent.bg-transparent > .navbar {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.65) 0%,rgba(0,0,0,0) 100%) !important;
    box-shadow: none;
}

.bg-transparent .navbar-nav li a, .bg-transparent .navbar-nav li, .bg-transparent .navbar-default .navbar-nav > .active > a, header.menu-transparent.bg-transparent .navbar .navbar, .bg-transparent .navbar-default .navbar-nav > li:hover > a, .bg-transparent:not(.scroll-css) li.dropdown:hover {
    background: none !important;
}
.text-xl {
    line-height: 55px;
    font-size: 40px !important;
}
.navbar-brand {
    height: 60px;
}

.main-slider {
    height: 650px;
}

.main-title {
    height: 500px;
}



.text-xs {
    line-height: 13px;
}

footer {
    background-color: #FFF;
}

    footer .container {
        padding: 70px 15px;
    }

    footer .copy-row {
        padding: 10px 0;
        opacity: .7;
    }


    footer h3 {
        text-transform: uppercase;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 15px;
    }

    footer hr.space.s {
        height: 19px;
    }

@media (min-width: 993px) {

    .navbar-nav > li > a {
        padding-top: 21px;
        padding-bottom: 19px;
        font-size: 14px;
        font-weight: 500;
    }
}

.btn-sm {
    padding: 6px 20px 5px 20px;
}

.anima-button.btn-sm:hover {
    padding-left: 38px;
}

.niche-box-team .content-box h4 {
    font-size: 13px;
    line-height: 13px;
    font-weight: 400;
}

.niche-box-team .content-box {
    overflow: visible;
    height: 125px;
    padding-top: 30px;
    border-top: none;
}

.niche-box-team:hover .img-box img {
    transform: translateY(25px) scale(1) !important;
}

.niche-box-team .content-box hr {
    display: none;
}

.niche-box-team {
    padding-bottom: 125px;
}

    .niche-box-team .content-box .social-group i {
        font-size: 15px;
        padding: 0;
        width: 30px;
        height: 30px;
        line-height: 31px;
    }

    .niche-box-team p {
        margin-top: 2px;
        font-size: 14px;
    }

    .niche-box-team .img-box, .niche-box-team .img-box img {
        border-radius: 4px;
    }

.icon-box label {
    font-weight: 500;
}

.box-steps .step-item > h3 {
    font-weight: 500;
    font-size: 17px;
    margin-top: -7px;
}

.box-steps .step-number {
    opacity: 1;
    font-size: 25px;
    line-height: 20px;
}

h6 {
    font-size: 17px;
    font-weight: 400;
}


.grid-center {
    text-align: center;
}

    .grid-center .grid-item {
        display: inline-block;
        float: none;
    }

.top-70 {
    margin-top: 100px;
}

.icon-box-top-bottom .icon-box-cell label {
    margin: 8px 0;
}

.big-box {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    padding: 70px;
    margin: 0 15px;
    border-radius: 4px;
    width: 47%;
    width: calc(50% - 30px);
    transition: all .6s;
}

    .big-box:hover {
        background-color: #fcfcfc;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
    }

    .big-box h2 span {
        display: block;
        font-size: 13px;
        text-transform: uppercase;
        font-weight: 500;
        margin-bottom: 5px;
    }

.logo-pop img {
    max-width: 120px;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > li:hover > a,.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover {
    background-color: #fff;
}

div.header-base div h1 {
    text-transform: none;
    margin-top: 24px;
}

.header-base .title-base p {
    font-size: 13px;
    margin-top: 0px;
    letter-spacing: .3px;
    opacity: .8;
}

.header-title .title-base {
    max-width: 550px;
    margin: auto;
}

.mi-menu .sidebar-nav {
    border-radius: 6px;
    border: none;
    padding: 15px 0;
}

.mi-menu ul li > a, .mi-menu ul li > a:hover {
    color: #fff;
}

.flex-control-paging li a, .header-slider .flex-control-paging li a {
    background: none;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(93, 93, 93, 0.5);
}

    .flex-control-paging li a.flex-active, .header-slider .flex-control-paging li a.flex-active {
        background: #949494;
        border-color: #949494;
    }

body .flex-direction-nav a:before, body .flex-direction-nav a.flex-next:before {
    content: '' !important;
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg);
    width: 13px;
    height: 13px;
}

body .flex-direction-nav a.flex-next:before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.flex-direction-nav a {
    margin-top: -15px;
}

.flexslider:not(.outer-navs):hover .flex-next {
    right: 15px;
}

.flexslider.outer-navs:hover .flex-direction-nav .flex-next {
    transform: translateX(85px);
}

.ul-dots, .ul-decimal, .ul-squares {
    padding-left: 18px;
}

.pricing-table {
    border-radius: 12px;
    overflow: hidden;
}

    .pricing-table .pricing-price.list-group-item {
        font-weight: 500;
        font-size: 45px;
        padding-top: 45px;
    }

    .pricing-table .list-group-item:nth-child(even) {
        background-color: #fff;
    }

    .pricing-table .list-group-item {
        border-bottom: none;
        font-size: 13px;
    }


    .pricing-table .btn {
        border-radius: 15px;
        margin-bottom: 40px;
    }

.pricing-table-big,[class*="section-"] > div > .row:first-child > div > .pricing-table-big {
    margin: -15px 0 0 0;
}

.pricing-table.pricing-table-big .list-group-item:not(.pricing-price) {
    font-size: 12px;
}

.accordion-list .list-group-item, .accordion-list .list-group-item:last-child {
    border: none;
}

    .accordion-list .list-group-item > a {
        padding-left: 30px;
        position: relative;
    }

        .accordion-list .list-group-item > a:before {
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
            margin-left: -28px;
            top: 18px;
            position: absolute;
            transition: all .4s;
        }

        .accordion-list .list-group-item > a.active:before {
            -webkit-transform: rotate(135deg);
            -ms-transform: rotate(135deg);
            transform: rotate(135deg);
        }

        .accordion-list .list-group-item > a:hover {
            background: none;
        }

        .accordion-list .list-group-item > a.active, .accordion-list .list-group-item > a.active:hover {
            border: none;
            font-weight: 500;
        }

    .accordion-list .list-group-item > .panel > .inner {
        padding: 10px 0;
    }

    .accordion-list .list-group-item:first-child a {
        padding-top: 0;
    }

        .accordion-list .list-group-item:first-child a:before {
            top: 9px;
        }

.tab-box .nav-tabs > li > a {
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    padding: 21px 20px 20px 20px;
    margin-right: 0;
    opacity: .6;
    transition: all .4s;
}

    .tab-box .nav-tabs > li > a span {
        text-transform: none;
        display: block;
        line-height: 20px;
        font-weight: 400;
        margin-top: 7px;
    }

.tab-box .nav-tabs > li.active > a, .tab-box .nav-tabs > li:hover > a {
    background: #f7f7f7;
    border-radius: 4px;
    opacity: 1;
}

    .tab-box .panel-box .panel {
        padding-top: 0;
        padding-bottom: 0;
    }

.tab-box > .panel, .tab-box > .panel-box > .panel {
    padding: 30px 0 0 0;
}

.tab-box.left .panel-box .panel {
    padding: 0 0 0 30px;
}

.tab-box.right .panel-box .panel {
    padding: 0 30px 0 0;
}

.tab-box .nav-tabs.nav-center li.active {
    margin-right: 0;
    bottom: 0;
}

.nav-pills > li.active > a,.nav-pills > li.active > a:focus, .nav-pills > li:hover > a:hover {
    font-weight: 500;
}

.ul-dots li {
    padding: 3px 0;
}

.text-s {
    line-height: 23px;
}

.input-group .form-control:first-child {
    border-color: #dcdcdc;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.input-group-btn:last-child > .btn {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}


.niche-box-post h2 {
    text-transform: none;
    font-size: 22px;
    line-height: 28px;
    margin-top: 15px;
    min-height: 0;
}

    .niche-box-post h2 a {
        transition: all .4s;
    }

.advs-box .advs-box-content p {
    font-size: 14px;
    letter-spacing: .3px;
    margin-bottom: 0;
}

.niche-box-blog .tag-row, .niche-box-post .tag-row {
    margin-bottom: 20px;
    margin-top: 20px;
}


.niche-box-post .block-infos {
    top: 0px;
    left: 0;
    right: 0;
    width: auto;
    padding-right: 0;
}

.advs-box-top-icon-img .block-data {
    float: left;
    width: 80%;
    text-align: left;
    padding: 0 20px;
    border: none;
    background: rgba(247, 247, 247, 0);
}

.block-infos .block-comment {
    float: left;
    width: 20%;
    background: none;
    font-weight: 500;
    font-size: 12px;
}

    .block-infos .block-comment i {
        font-weight: 900;
    }

.block-infos p.bd-day {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.46);
}

.block-infos p.bd-month {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.46);
}

.advs-box-top-icon-img.niche-box-post:after {
    content: '';
    position: absolute;
    width: 0%;
    height: 1px;
    transition: all .6s;
}

.advs-box-top-icon-img.niche-box-post:hover:after {
    width: 100%;
}

.advs-box-top-icon-img .img-box, .grid-item > .img-box {
    border-radius: 4px;
}

.advs-box-top-icon-img .advs-box-content {
    margin: -15px 20px 0 20px;
    padding: 15px 20px 20px 20px;
    background: #fff;
    position: relative;
    z-index: 3;
    border-radius: 4px;
    transform: translate3d(0,0,0);
}

.advs-box-top-icon-img.boxed .advs-box-content, .advs-box-top-icon-img.boxed-inverse .advs-box-content {
    padding: 15px 20px 25px 20px;
    border: none;
}

.advs-box-top-icon-img.niche-box-post.boxed:hover:after, .advs-box-top-icon-img.niche-box-post.boxed-inverse:hover:after {
    width: calc(100% - 8px);
    margin-left: 4px;
}

.section-bg-color .advs-box.advs-box-top-icon.boxed-inverse {
    background-color: #f7f7f7;
    border: 1px solid #d6d6d6 !important;
}

.advs-box-top-icon h3 {
    font-size: 18px;
    margin-bottom: 15px;
}

.advs-box-top-icon.boxed-inverse h3, .advs-box-top-icon.boxed h3 {
    margin-top: 0;
}

.advs-box-top-icon.boxed .icon, .advs-box-top-icon.boxed-inverse .icon, .advs-box-top-icon .icon {
    background: #fff;
    box-shadow: none;
}

.section-bg-color .advs-box-top-icon-img:not(.boxed-inverse) .advs-box-content {
    background: #f7f7f7;
}

.niche-box-testimonails-cloud .name-box .subtitle {
    padding-top: 18px;
}

    .niche-box-testimonails-cloud .name-box .subtitle .subtxt {
        text-transform: none;
    }


.base-box.boxed-inverse, .advs-box.boxed-inverse {
    background: none;
    border-style: solid !important;
    border-width: 1px;
    border-color: #dcdcdc;
    border-radius: 6px;
}

    .tab-box .nav-tabs > li > a, .tab-box .panel-box .panel, .tab-box .nav-tabs, .tab-box .panel-box, .tab-box > .panel, .tab-box > .panel-box > .panel,.advs-box-multiple.boxed-inverse, .advs-box-multiple div.circle,.nav.ms-minimal > li.active > a, .nav.ms-minimal > li:hover > a ,.section-bg-image .advs-box.boxed-inverse,.base-box.boxed-inverse .advs-box-content, .advs-box.boxed-inverse:not(.advs-box-multiple) .advs-box-content, .section-bg-color .boxed-inverse, .section-bg-color .advs-box.boxed-inverse, .section-bg-color .boxed-inverse.advs-box-multiple .advs-box-content {
        border: none !important;
    }

.form-control {
    border: 1px solid #dcdcdc;
    border-radius: 4px;
}

.nav.inner > li > a, .nav.inner.ms-rounded li a {
    font-weight: 500;
}

.nav.inner.ms-rounded li a {
    border: 1px solid #dcdcdc;
}

.adv-img-down-text h2 a, .adv-img-down-text h2 {
    text-transform: none;
    font-weight: 500;
    font-size: 17px;
    padding-bottom: 0;
}

.adv-img-down-text > .img-box {
    border-radius: 6px;
    overflow: hidden;
}

.adv-img-down-text .caption-bottom p {
    margin-top: 5px;
}

.advs-box-side hr {
    display: none;
}

.white .icon-box:not(.icon-box-top-bottom) .icon-box-cell:first-child, div.white .countdown > div:after {
    border-right: 1px solid rgba(255, 255, 255, 0.31);
}

.icon-box:not(.icon-box-top-bottom) .icon-box-cell:first-child {
    padding-right: 15px;
    margin-right: 15px;
    border-right: 1px solid rgba(123, 123, 123, 0.25);
}

.icon-box.icon-box-right:not(.icon-box-top-bottom) .icon-box-cell:first-child {
    padding-right: 0;
    margin-right: 0;
}

.icon-box.icon-box-right:not(.icon-box-top-bottom) .icon-box-cell:last-child {
    padding-left: 15px;
    margin-left: 15px;
}


.advs-box-side.boxed-inverse, .advs-box-side.boxed {
    padding: 0;
}

    .advs-box-side.boxed-inverse > .row > div, .advs-box-side.boxed > .row > div {
        flex: 1 1 auto;
    }

    .advs-box-side.boxed-inverse .col-md-8, .advs-box-side.boxed .col-md-8 {
        padding: 28px 45px 25px 25px;
    }

    .advs-box-side.boxed-inverse .img-box, .advs-box-side.boxed .img-box {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

.advs-box-side > .row > .col-md-4 {
    padding-bottom: 0px;
}

.advs-box-side.boxed-inverse > .row > .col-md-4, .advs-box-side.boxed > .row > .col-md-4 {
    padding-bottom: 0;
}

.extra-content {
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 15px 2px 15px;
}

.img-box.adv-img-half-content .caption {
    text-align: left;
    padding: 70px 25px 25px 25px;
}

.adv-img-half-content .sub-text {
    padding-left: 15px;
    border-radius: 25px;
    padding: 4px 15px;
    display: inline-block;
}

div.adv-img-half-content p {
    max-width: 920px;
    font-weight: 300;
}

.adv-img-half-content.big-box h2 {
    font-size: 30px;
    font-weight: 500;
}

.img-box.adv-img-side-content .caption {
    padding: 25px;
    width: 90%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%,rgba(0, 0, 0, 0) 100%);
}

    .img-box.adv-img-side-content .caption p {
        font-weight: 300;
        font-size: 13px;
        margin-top: 5px;
    }

    .img-box.adv-img-side-content .caption .btn {
        margin-top: 20px;
    }

.img-box.adv-img-side-content h2, .img-box.adv-img-side-content h3 {
    font-size: 21px;
    font-weight: 500;
    margin-bottom: 10px;
    text-transform: none;
}

.advs-box-side-icon .icon-box i {
    font-size: 44px;
}

.navbar-inner .nav.ms-minimal li.active a, .navbar-inner .nav.ms-minimal li:hover a {
    opacity: 1;
}

    .navbar-inner .nav.ms-minimal li.active a:before, .navbar-inner .nav.ms-minimal li:hover a:before {
        width: 100%;
    }

.navbar-inner .nav.ms-minimal li a:before {
    content: '';
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 0%;
    height: 1px;
    background: #272b2b;
    transition: all 0.35s ease-out;
    -webkit-transition: all 0.35s ease-out;
}
 
.nav.ms-minimal {
    margin-bottom: 15px;
}

.mi-menu .sidebar-nav ul a {
    transition: all 0.35s ease-out;
}

    .mi-menu .sidebar-nav ul a:hover {
        padding-left: 25px;
    }

.adv-img-classic-box .caption-inner h2 {
    text-transform: none;
    font-weight: 500;
    margin-bottom: 10px;
}

.adv-img-classic-box .caption-inner {
    max-height: 95px;
}

.name-box i {
    box-shadow: none;
}

.section-bg-color hr {
    border-color: #e1e1e1;
}

.section-bg-color .block-quote.quote-1:before, .section-bg-color .block-quote.quote-2:before, .section-bg-color .block-quote.quote-2:after {
    color: #d4d4d4;
}

.adv-img-classic-box .caption-inner p.big-text {
    font-size: 13px;
}

.progress-circle .inner-circle .main {
    font-size: 14px;
}

.progress-circle .inner-circle .sub {
    font-size: 13px;
}

.advs-box-side-img hr {
    display: none;
}

.advs-box .tag-row span {
    font-size: 12px;
}

.advs-box-side-img.boxed-inverse .col-md-8 {
    padding-top: 30px;
    padding-bottom: 35px;
}

.menu-outer ul.nav {
    top: -50px;
}

.progress-bar {
    border-radius: 15px;
    box-shadow: none;
    height: 3px;
}

.progress {
    overflow: visible;
    height: 3px;
    background-color: #e8e8e8;
}


.progress-bar > span {
    padding: 2px 0 2px 5px;
    width: 60px;
    transform: translateY(-31px);
    display: block;
    text-align: right;
    white-space: nowrap;
    font-weight: 700;
    letter-spacing: 1px;
    float: right;
    font-size: 12px;
}

.progress-label {
    margin-top: 0;
    text-align: left;
}

.countdown .countdown-values {
    font-weight: 500;
}

.pagination {
    border-radius: 25px;
    overflow: hidden;
}

    .pagination > li.disabled > a, .pagination > li > a,.pagination > li.disabled > a:hover,.pagination > li > a:hover,.pagination > .active > a,.pagination > .active:hover > a {
        border: none;
        background: none;
    }

.pagination-sm li > a {
    height: 28px;
}

.pagination-sm > li > a, .pagination-sm > li > span {
    font-weight: 400;
    font-size: 15px;
}

.pagination > li.disabled > a i {
    color: #969696;
}

.pagination > li > a i:before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    top: -3px;
}

.pagination > li.first > a i:before, .pagination > li.prev > a i:before {
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg);
}

.pagination > li > a i:after {
    display: none;
}

.list-items .list-item:hover {
    background: none;
}

.list-items .list-item h3, .adv-img h2, .adv-circle h2, .caption-bottom h2 {
    font-weight: 500;
    text-transform: none;
}

.list-items .list-item span {
    font-weight: 500;
}

.title-base h1, .title-icon h2, .title-icon h1, .title-base.title-small h2 {
    text-transform: none;
    font-weight: 300;
    font-size: 35px;
}

.title-base hr {
    display: none;
}

.header-title {
    height: 300px;
}

.adv-img-full-content h2 {
    font-size: 22px;
}

div.adv-img-full-content p {
    font-weight: 300;
}


.porfolio-bar a i {
    font-size: 40px;
}

.porfolio-bar a {
    font-weight: 600;
}

.porfolio-bar div .icon-box {
    padding: 15px 0 0 0;
}

.porfolio-bar > div .icon-box i {
    transform: translateY(-3px);
}

.porfolio-bar > div:first-child .icon-box i:before {
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg);
}

.porfolio-bar > div:last-child .icon-box i:before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.niche-box-blog p.excerpt {
    font-size: 14px;
    margin-top: 30px;
}

.niche-box-blog .block-infos .block-comment {
    display: none;
}

.niche-box-blog .block-infos {
    margin-bottom: 0;
}

.niche-box-blog .block-data {
    border: none;
    border-radius: 6px;
    padding: 10px 0;
}

.niche-box-blog .block-infos p.bd-day {
    text-shadow: none;
    font-size: 28px;
    padding-bottom: 0;
}

.niche-box-blog .block-infos p.bd-month {
    text-shadow: none;
    display: block;
}

.niche-box-blog a.btn {
    margin-top: 6px;
}

.niche-box-blog.text-m .block-title h2 {
    font-size: 20px;
    line-height: 28px;
}

.niche-box-blog.text-m .tag-row {
    margin: 10px 0 0 0;
}

.bg-overlay.transparent-light {
    background-color: rgba(255,255,255,0.4);
}

.comment-list .name {
    font-weight: 500;
}

.breadcrumb.b li {
    font-size: 12px;
}

.latest-post-list .tag-row.icon-row span {
    font-size: 12px;
}

.latest-post-list .tag-row.icon-row i {
    font-weight: 900;
}

.section-two-blocks .row > div > a.img-box img, .section-two-blocks .row > div > a.img-box {
    border-radius: 0 !important;
}

.list-items .list-item:first-child {
    padding-top: 0;
}

.list-items .list-item h3 {
    margin-top: 2px;
    margin-bottom: 5px;
}

.list-items .list-item {
    border-bottom-style: solid;
    padding-bottom: 20px;
    padding-top: 20px;
}

.side-menu .active {
    font-weight: 500;
}

.side-menu i {
    margin-right: 15px;
}

.timeline > li > .timeline-panel {
    border: none;
    padding: 40px;
    border-radius: 6px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}

    .timeline > li > .timeline-panel:before {
        border-right: none;
        border-left: none;
    }

.timeline-title {
    font-size: 26px;
}

.advs-box-multiple .circle > i {
    line-height: 58px;
    font-size: 30px;
}



.advs-box-multiple .advs-box-content {
    padding: 40px;
    border: 1px solid #dcdcdc;
    border-top: none;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.advs-box-multiple a.img-box {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.advs-box-multiple div.circle {
    font-weight: 300;
    font-size: 22px;
    padding-top: 15px;
}

    .advs-box-multiple div.circle span {
        line-height: 13px;
    }

.btn-group-icons .btn-default {
    padding-top: 13px;
}

.mega-tabs .tab-box {
    margin: 15px 15px 20px 15px;
}

    .mega-tabs .nav-tabs, .mega-tabs .tab-box .nav-tabs > li.active > a {
        background-color: #fff;
    }

    .mega-tabs .tab-box .nav-tabs > li > a {
        padding: 10px 15px;
    }

.mega-menu .col > h5 {
    margin-bottom: 20px;
}

.mega-menu .fa-ul .fa-li {
    font-size: 15px;
    line-height: 45px;
}

.mega-menu .fa-ul {
    margin-left: 33px;
}

.bootgrid-header .search .fa {
    border: 1px solid #dcdcdc;
    border-right: none;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.bootgrid-header .btn {
    padding-right: 28px;
}

.bootgrid-header .actionBar .btn-group {
    font-weight: 500;
    font-size: 12px;
}

.bootgrid-table th > .column-header-anchor > .text {
    font-weight: 500;
}

.adv-img-full-content i.main-icon {
    font-size: 20px;
}

div.adv-img-button-content .caption a i {
    line-height: 55px;
}

div.call-action-box a {
    width: 100%;
}

.social-button i.circle {
    font-weight: 900;
}

.btn-group-lg a.btn {
    height: 50px;
    line-height: 32px;
}

.collapse-button {
    padding: 6px 30px 5px 20px;
}

    .collapse-button:not(.btn) .caret {
        margin-top: -32px;
    }

.footer-parallax {
    height: 310px;
}

.navbar-mini .navbar-left {
    padding-top: 6px;
}

.navbar-big-logo .navbar-mini .container {
    padding-left: 175px;
}

.navbar-mini .lan-menu li a {
    margin-top: 4px;
}

header .search-input {
    padding-top: 9px;
}

    header .search-input a.btn {
        margin-top: 0;
    }

.side-menu.ms-simple li:hover {
    opacity: 1;
}

iframe {
    border: none;
}

body > i.scroll-top {
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.14);
}


@media (max-width:992px) {
    .advs-box-side-img .col-md-4 {
        width: 100%;
    }
    .big-box {
        width: auto;
        margin-bottom: 10px;
    }

    .navbar-toggle > i {
        font-size: 36px;
    }

    .navbar-toggle {
        margin-bottom: 1px;
    }

    .navbar-brand {
        height: 60px;
    }

    .text-xl {
        line-height: 35px;
        font-size: 25px !important;
    }

    .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
        background: none;
    }

    .search-box input[type="text"] {
        margin-left: 0;
    }

    .search-box {
        margin: 0;
    }

    .lan-menu {
        margin: 0 0 25px 0;
    }

    .tab-box.left .nav-tabs > li, .tab-box.right .nav-tabs > li {
        border: none;
    }

    footer .container {
        padding: 70px 0px;
    }

    .off-section {
        margin-top: 0;
    }

    .hamburger-button i {
        font-size: 42px;
        margin-top: 6px;
    }

    .niche-box-blog .tag-row, .niche-box-post .tag-row {
        height: 20px;
    }

    .advs-box-side h3 {
        margin-top: 15px;
    }

    .nav-tabs > li {
        border: none;
    }

    header .collapse .navbar-nav {
        padding: 15px 0;
    }

    .no-paddings, .no-paddings .content {
        padding: 0 15px !important;
    }

    iframe {
        width: 100%;
    }

    .two-blocks-container > .row .content {
        padding-right: 0 !important;
        padding-left: 50px !important;
    }

    .two-blocks-container.blocks-right > .row .content {
        padding-right: 50px !important;
        padding-left: 0 !important;
    }

    .header-title, .header-video, .header-animation, .header-slider {
        height: 200px !important;
    }

    .title-base h1, .title-icon h2, .title-icon h1, .title-base.title-small h2 {
        font-size: 25px;
    }

    .timeline-title {
        font-size: 20px;
        line-height: 30px;
    }

    header .navbar-nav .dropdown li > a {
        padding: 12px 40px;
    }

    .maso-15, .grid-15 {
        margin: 0;
    }

        .maso-15 .maso-box .maso-item, .grid-15 .grid-box .grid-item {
            padding: 15px 5px;
        }

    h2, .h2, h3, .h3 {
        font-size: 19px;
    }

    .pricing-table-big {
        margin-top: 0 !important;
        margin-bottom: 20px;
    }

    .advs-box-side > .row {
        display: flex !important;
    }

    .advs-box-side .col-md-8, .advs-box-side .col-md-8 p {
        text-align: left;
    }

    div.mega-menu-fullwidth .mega-dropdown .mega-menu {
        margin: 0 15px !important;
    }
}

@media (max-width:767px) {
    [class*="col-md-"].boxed-inverse, [class*="col-md-"].boxed, .row.vertical-row > div.boxed-inverse, .row.vertical-row > div.boxed {
        padding: 40px;
    }

    .tab-box.left .panel-box .panel, .tab-box.right .panel-box .panel {
        padding: 5px 0;
    }

    .tab-box.left .nav-tabs, .tab-box.right .nav-tabs, .tab-box .panel-box {
        float: none;
    }

        .tab-box .panel-box .panel {
            height: auto !important;
        }

    .advs-box-side > .row {
        display: block !important;
    }

    .advs-box-side .col-md-8, .advs-box-side .col-md-8 p {
        text-align: center;
    }

    .two-blocks-container > .row .content, .two-blocks-container.blocks-right > .row .content {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
}

/* ===== SiteForge: спан живой цены не должен ловить чужие стили =====
   Боевая сборка запекает значение как <span data-sf-td="…">2 950</span> (SEO-фолбэк
   плюс якорь для sf-td.php). Но вёрстка карточек сплошь и рядом уже занимает тег span
   под ДРУГОЙ смысл — в тарифах диадока это `.pc-price span { color:#7a8699;
   font-size:13px }` для подписи «за документ». Наш спан оказывается внутри <b> и
   ловит это правило: прямое правило на элементе бьёт наследование от родителя, и
   цена рисуется мелкой серой, а знак ₽ (он вне спана) остаётся крупным — вид, ради
   которого вёрстку никто не писал. Поэтому спан цены объявляем прозрачным для стилей:
   он обязан выглядеть ровно как текст на его месте до запекания. !important — потому
   что <style> партиала едет в body и при равной специфичности выигрывает у скина.
   Ничего специфичного для сервиса тут нет: правило адресует наш собственный атрибут. */
span[data-sf-td] { font: inherit !important; color: inherit !important;
                   letter-spacing: inherit !important; }

/* ===== SiteForge: заглушка click-слота b24 — спрятать, когда виджет дорисовал кнопку =====
   Ленивая загрузка (см. substitute_form_slots) оставляет на месте click-встройки
   обычную кнопку сайта: до первого движения мыши кнопки b24 не существует вовсе, и
   посетитель, который сразу тянется к «Оставить заявку», ткнул бы в пустоту. Когда
   виджет отрисовался, активатор ставит заглушке атрибут hidden — но одного его мало:
   `[hidden] { display: none }` живёт в СТИЛЯХ БРАУЗЕРА, а `.btn { display: inline-block }`
   шаблона — авторское правило и побеждает его при любом порядке. Отсюда явный сброс.
   Плейсхолдер inline-слота (.sf-b24-ph) высоты по умолчанию не имеет — резерв, если
   он понадобится, приезжает инлайновым min-height из настройки form.lazy_reserve_px. */
[data-sf-b24-fb][hidden] { display: none !important; }

/* ===== SiteForge: единый ритм секций + фикс наезда иконок (авто, на всех сервисах) =====
   Корень наездов: карточка .advs-box-top-icon имеет margin-top:45 + height:100% и потому
   СВИСАЕТ вниз из своей колонки на 45px — свес лезет в ряд сверху (иконка нижнего ряда
   закрывает бордер верхнего) и съедает нижний серый padding. Убираем свес, ужав высоту
   карточки на те же 45px. Тогда зазор между рядами = hr.space(20) + место под иконку(45)
   = 65px, ровно равный серому padding секции сверху/снизу. Иконку не двигаем. */
.container.content { padding-top: 52px !important; padding-bottom: 52px !important; }
.container.content > *:first-child { margin-top: 0 !important; }
.container.content > *:last-child { margin-bottom: 0 !important; }
.container.content > hr.space:first-child,
.container.content > hr.space:last-child { display: none !important; }
.proporzional-row > div > .advs-box-top-icon { height: calc(100% - 45px) !important; }
/* Сжимаем ряды к минимуму: место под иконку (45px) + ~7px клиренса = ~52px. Отрицательный
   margin гасит вклад hr.space между рядами (и после h2), серый padding секции = тем же 52px.
   Ниже нельзя: 45px забирает иконка. Столбцы (гаттер 30px) и сами иконки не трогаем.
   clear: both обязателен: после короткого hr.space.xs (10px) отрицательный margin заводит
   ряд на 3px в предыдущую строку, а там float-колонка заголовка (.row > .col-md-9 > h3).
   Флекс-контейнер это BFC — рядом с флоатом он не перекрывает его, а УЖИМАЕТСЯ в остаток
   справа (roaming.html логистики: ряд 278px у правого края, карточки по 92px). Клиренс
   ставит ряд ровно под флоат; там, где флоата нет, margin работает как прежде. */
.container.content .proporzional-row { margin-top: -13px !important; clear: both; }

/* ===== SiteForge: стрелка FAQ — по факту открытости, а не по классу =====
   В режиме data-type="visible" (открытые вопросы друг друга не закрывают) шаблонный
   скрипт всё равно снимает .active со ВСЕХ ссылок и вешает его только на последнюю
   кликнутую. А стрелку разворачивает вниз именно `a.active:before` (skin.css:879),
   поэтому раньше открытые блоки оставались со стрелкой «закрыто» — текст виден,
   а индикатор врёт. Спрашиваем не класс, а состояние панели: открытую скрипт держит
   на инлайновом display:block (закрывая, он его снимает вместе с height). Пробелы
   после двоеточия jQuery ставит, но полагаться на это одно нельзя — ловим оба вида.
   Специфичность (0,4,1) против (0,3,1) у шаблонного правила, плюс наш блок идёт
   последним в файле. Префиксы — как в шаблоне: он задаёт -webkit-/-ms-, и в старом
   WebKit неперекрытый -webkit-transform: rotate(45deg) вернул бы стрелку обратно. */
.accordion-list .list-group-item:has(> .panel[style*="display: block"]) > a:before,
.accordion-list .list-group-item:has(> .panel[style*="display:block"]) > a:before {
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
}

/* ===== SiteForge: бокс-колонка на телефоне — во всю ширину (баг каскада шаблона) =====
   У шаблона два правила ширины для боксовых колонок, и на телефоне активны ОБА:
     @media (max-width:992px)  .col-md-6.boxed-inverse:not([class*="col-sm-"])
                               { width: calc(50% - 30px) !important }   -> (0,3,0)
     @media (max-width:767px)  [class*="col-md-"].boxed-inverse
                               { width: calc(100% - 30px) !important }  -> (0,2,0)
   Медиа-запрос на специфичность не влияет, поэтому «планшетное» правило побеждает
   «телефонное», и бокс остаётся в половину ширины экрана. Соседняя колонка без
   .boxed-inverse при этом честно разворачивается на 100% (её ширину чинит правило
   для .col-md-*), отчего и получается перекос: заголовок во всю ширину, бокс — узкой
   лентой слева. На диадоке под это попадают 196 колонок на 90 страницах: 90 блоков
   заявки (`col-md-6 boxed-inverse shadow-2`) и 105 контентных боксов (`shadow-1`).
   Виднее всего на блоке заявки: b24-форма ужимается вместе с колонкой, подписи полей
   обрезаются, а текст согласия рассыпается по одной букве в строку — но контент тут
   ни при чём, так же сжимается любой бокс.
   Лечим на отдаче, а не правкой 387 страниц: правило обязано действовать и в превью,
   и в бою, и достаться каждой будущей странице. Селектор повторяет форму шаблонного
   (класс + атрибут + :not(атрибут) = те же (0,3,0)), а наш блок идёт последним в
   skin.css, который сам подключается последним, — при равной специфичности выигрывает
   порядок. Через [class*="col-md-"] вместо .col-md-6: у шаблона такие же :not-правила
   есть и для col-md-4 (33%), и следующая вёрстка может принести col-md-3.
   Ширина — calc(100% - 30px), как задумано самим шаблоном: боксовой колонке он на
   ≤992px ставит margin: 5px 15px, и вместе с полями это ровно 100%. */
@media (max-width: 767px) {
    [class*="col-md-"].boxed-inverse:not([class*="col-sm-"]),
    [class*="col-md-"].boxed:not([class*="col-sm-"]) {
        width: calc(100% - 30px) !important;
    }
}

/* ===== SiteForge: на телефоне колонка сетки не держит десктопную долю ряда =====
   Ряд карточек (.proporzional-row) — флекс, и одинокая карточка в последнем неполном
   ряду растянулась бы на всю ширину экрана рядом с тройками сверху. Лечит это модель
   при генерации, прибивая колонке инлайновую долю: style="flex: 0 0 33.3333%;
   max-width: 33.3333%". На десктопе так и надо. Но на телефоне ряд уже блочный
   (шаблон гасит .proporzional-row в display:block до 992px), flex не работает вовсе,
   а max-width продолжает держать карточку в трети экрана — последний элемент раздела
   выглядит сжатым в ленту, пока соседи сверху идут во всю ширину.
   Инлайн бьётся только `!important`, поэтому правило здесь, а не в разметке: страниц
   с такой долей сейчас три (roaming, fields, roaming/working-with), но приём штатный —
   он повторится на каждом разделе, где карточек не кратно трём, и чинить их поштучно
   значит ловить это снова после каждой перегенерации.
   Область — только колонки сетки с ИНЛАЙНОВЫМ ограничением ширины: свою верстку без
   инлайна правило не трогает, а десктоп не задет вовсе (медиа-запрос телефонный). */
@media (max-width: 767px) {
    .container.content .row > [class*="col-md-"][style*="max-width"] {
        flex: 1 1 auto !important;
        max-width: 100% !important;
    }
}

/* ===== SiteForge: кнопка «Наверх» не нужна на телефоне =====
   Шаблон держит `.scroll-top-mobile` (fixed 50×50 в правом нижнем углу) скрытой и
   показывает её скриптом по скроллу — но в мобильном медиа-блоке (`max-width: 992px`)
   сам же прибивает ей `visibility: visible`, то есть на телефоне она висит поверх
   контента ВСЕГДА, с первого экрана. Рядом в том же углу — кнопка чата Bitrix24, и
   вдвоём они занимают заметную часть узкого экрана, перекрывая текст и кнопки.
   Пользы от неё на телефоне нет: свайп до верха там штатный жест. На десктопе правило
   ничего не меняет, потому что кнопки там нет и не было: скрипт шаблона по прокрутке
   доводит ей `opacity` до 1, но класс `.show` (единственное, что снимает `visibility:
   hidden`) не вешает — замер на 1440px после прокрутки 2500px: opacity 1, visibility
   hidden. Кнопка у Schiocco фактически только мобильная, отсюда и её класс.
   `display: none`, а не `visibility`: скрытый через visibility элемент продолжает
   занимать свой угол и ловить тапы. `!important` — шаблонное правило видимости
   живёт в медиа-блоке и скрипт дополняет его инлайновыми стилями. */
@media (max-width: 992px) {
    i.scroll-top, .scroll-top-mobile { display: none !important; }
}

/* ===== SiteForge: планшет — шапка в одну строку, а не в две =====
   С 993px шаблон показывает полное горизонтальное меню, но bootstrap-контейнер до 1199px
   шириной 970px — а логотип (132) + меню из пяти пунктов (586) + телефон с кнопкой (320)
   требуют 1038. Правый блок — float, поэтому лишнее он не ужимает, а роняет на вторую
   строку: шапка становится 120px вместо 60, `fixed-top` наезжает на крошки и первый экран
   (замер 993–1199: перенос на всех ширинах диапазона, с 1200 контейнер 1170 и всё встаёт
   в строку). Отсюда «на планшете всё съезжает».
   Место экономим там, где его больше всего: у пунктов меню шаблонный горизонтальный
   padding 25px, то есть 250px из 586 — это воздух, а не текст. 12px возвращают в строку
   130px, чего хватает с запасом (замер после правки — ниже в CLAUDE.md). Шрифт и телефон
   не ужимаем: читаемость дороже, а нужды нет.
   Диапазон закрыт с обеих сторон: ≤992 работает бургер (там своя раскладка), с 1200
   контейнер шире и вид не меняется вовсе. Если у сервиса пунктов больше и строка снова
   не сходится — вешай на наименее важный пункт класс `nav-optional` (правило ниже):
   на планшете он скрывается, на десктопе и в мобильном меню остаётся. */
@media (min-width: 993px) and (max-width: 1199px) {
    header ul.navbar-nav > li > a { padding-left: 12px; padding-right: 12px; }
    header ul.navbar-nav > li.nav-optional { display: none; }
}

/* ===== SiteForge: заголовок FAQ не «дёргается» при открытии =====
   У шаблона font-weight задан только открытому вопросу (.list-group-item > a.active —
   500), закрытый наследует 400: клик по вопросу заметно утолщает строку и сдвигает
   соседние. Лечится равным весом у обоих состояний.
   Правило жило в <style> КАЖДОЙ страницы (промпт разрешал «точечное scoped-исключение»,
   и модель послушно копировала его из каркаса главной) — 88 копий одного и того же на
   диадоке, и столько же на следующем сервисе. Баг общий для шаблона, страница тут ни при
   чём, поэтому место правила — универсальный слой. Дубли в уже собранных страницах
   безвредны (то же значение) и вычистятся сами при перегенерации. */
.accordion-list .list-group-item > a,
.accordion-list .list-group-item > a.active { font-weight: 500; }

/* ===== SiteForge: шапка — логотип, телефон и кнопка меню по одной оси =====
   Раскладка «партнёрской» шапки (лого-бейдж слева, телефон + CTA справа, бургер на
   телефоне) жила в <style> партиала sites/diadoc/_header.html, то есть на СЛЕДУЮЩЕМ
   сервисе её пришлось бы вводить заново — партиал у каждого сервиса свой. Разметка при
   этом общая: у Schiocco во всех демо-страницах и в обоих семействах шапка одна и та же
   (.navbar-header = кнопка + .navbar-brand; .navbar-right — именно <div>, списком меню
   он не бывает — проверено по templates/, 272 вхождения), поэтому место правила —
   универсальный слой, а не файл сервиса.
   Что чинится:
   - логотип: шаблонная шапка кладёт <img> по базовой линии текста, из-за чего бейдж
     висит выше середины; inline-flex + align-items:center центрируют его при любой
     высоте картинки, max-height держит бейдж в пределах 60px-шапки;
   - телефон и кнопка: у шаблона это float-элементы БЕЗ горизонтальных полей — во флекс-
     строке они встают вплотную (замер: 0px на всех ширинах), кнопка выглядит наехавшей
     на номер; отсюда gap. Шаблонный margin-top:12px у .circle-button ломает flex-
     центрирование — снимаем;
   - в раскрытом мобильном меню места меньше, чем в шапке: разрешаем перенос, иначе на
     320px номер с nowrap и кнопка снова сходятся впритык.
   Сервис-специфичного тут нет: цвет и гарнитура телефона наследуются от страницы,
   размеры — от шаблонной шапки. Свой логотип другой высоты — правится в партиале
   сервиса, он идёт в body и перебивает этот слой. */
.navbar-brand { display: inline-flex; align-items: center;
                height: var(--sf-header-height, 60px); padding: 6px 15px; }
.navbar-brand img { max-height: 40px; width: auto; }
header .navbar-right { display: flex; align-items: center;
                       height: var(--sf-header-height, 60px); gap: 12px; }
header .navbar-right > * { float: none; }
header .navbar-right .circle-button { margin-top: 0; }
/* Кнопка шапки = ГЕОМЕТРИЯ кнопки Bitrix24 (14px, line-height 20, padding 5px 15px →
   133×32 у текста «Подключить →»). Кнопка в шапке — заглушка ленивого click-слота: до
   первого движения мыши виджета нет, и посетитель видит её. Пока она жила на общем
   кегле шапки (15px, padding 6/20) — 150×36.5 против 133×32 у виджета, — правый блок
   был 373px вместо 356, и на ВСЕХ ширинах 993–1199 шапка стояла в две строки (120px,
   fixed-top поверх первого экрана) ровно до первого взаимодействия; замер с
   `?sf-eager=1` этого не показывает, заглушка там уже скрыта (найдено 2026-08-21 на
   живом сайте). Равняем заглушку под виджет, а не виджет под заглушку: бюджет ширины
   шапки от этого только растёт. Равный padding даёт чётную высоту и целые координаты
   (при 6/5px центр попадал на половину пикселя и края размывались по-разному).
   Специфичность (0,3,1) — выше `header .btn.btn-sm` из блока кеглей (0,2,1). */
header .navbar-right .btn, header .navbar-right .btn.btn-sm {
    font-size: 14px; line-height: 20px; padding: 5px 15px;
}
.header-phone { font-size: 18px; font-weight: 500; white-space: nowrap; color: #1a1a1a; }
.header-phone:hover, .header-phone:focus { text-decoration: none; opacity: .8; }
@media (max-width: 767px) {
    header .navbar-right { height: auto; flex-wrap: wrap; row-gap: 10px; }
}

/* ===== SiteForge: кнопка меню на телефоне — по вертикальному центру шапки =====
   Bootstrap держит .navbar-toggle флоатом с ФИКСИРОВАННЫМИ margin-top:8px/bottom:8px
   (skin.css правит нижний на 1px): кнопка отсчитывается от верхней кромки шапки и о её
   высоте не знает ничего. Высоту же задаёт логотип — у нас 60px, и замер на 390px даёт
   логотип по центру (cy=30) против кнопки на cy=23. Семь пикселей вверх рядом с крупным
   бейджем видно глазом, и это первое, что видно на телефоне вообще.
   Поправку нельзя посчитать в пикселях: высота шапки зависит от логотипа сервиса, а его
   меняет каждый новый сервис. Поэтому раскладываем сам .navbar-header флексом — кнопка
   встаёт по центру при любой высоте, без единого числа в правиле. В разметке шаблона
   кнопка идёт ПЕРЕД логотипом (она флоатилась вправо), поэтому порядок задаём явно:
   без order флекс поставил бы её слева от лого, а margin-left:auto заменяет float:right.
   Собственные вертикальные margin кнопки снимаем — при центрировании они снова тянут её
   вверх. Clearfix-псевдоэлементы .navbar-header становятся флекс-элементами нулевой
   ширины и на раскладку не влияют (замер: логотип и кнопка на своих местах).
   Только ≤992px: выше кнопка display:none, десктопную шапку правило не трогает. */
@media (max-width: 992px) {
    .navbar-header { display: flex; align-items: center; }
    .navbar-header > .navbar-brand { order: 0; }
    /* Кнопка-CTA в мобильной шапке — между логотипом и бургером [решение оператора:
       «чтобы не нужно было открывать меню, чтобы увидеть кнопку»]. Свёрнутое меню это
       `.navbar-collapse` с `display: none`, а потомка скрытого родителя не показывает
       НИЧЕГО — ни `display`, ни `visibility`, ни позиционирование; значит кнопка в
       мобильной шапке может быть только вторым экземпляром в разметке (`.nav-cta-mobile`
       в `.navbar-header`), а тот, что в правом блоке (`.nav-cta-desktop`), на этих
       ширинах прячется — иначе в раскрытом меню кнопка была бы дважды.
       Обе — обёртки ВОКРУГ маркеров SF-FORM, а не сами кнопки: маркеры заменяются на
       сниппет b24 целиком, класс на кнопке сборку бы не пережил, и прятать на десктопе
       надо в том числе то, что дорисует виджет.
       Логотипу здесь `margin-right: auto` вместо прежнего `margin-left: auto` у бургера:
       так вправо уезжает вся группа «кнопка + бургер», и правило не зависит от того,
       есть у сервиса CTA или нет. Clearfix-псевдоэлементы `.navbar-header` гасим — без
       этого `gap` добавил бы отступы вокруг двух пустышек нулевой ширины. */
    .navbar-header::before, .navbar-header::after { display: none; }
    .navbar-header { gap: 12px; }
    .navbar-header > .navbar-brand { margin-right: auto; }
    .navbar-header > .nav-cta-mobile { order: 1; display: inline-flex; align-items: center; min-width: 0; }
    /* Тап-таргет: у `.btn-sm` шаблона высота 31px — на десктопе это кнопка под курсор,
       на телефоне мало (Apple и Google просят от 44px, b24 своей click-кнопке даёт 39).
       Высоту задаём явно, а не паддингами: вертикальные отступы у кнопки шаблона свои
       на каждой ширине (замер: те же 10px давали то 39, то 52px). `nowrap` — надпись
       кнопки не переносим, в шапке она обязана остаться в одну строку. */
    .navbar-header > .nav-cta-mobile > .btn {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        /* шаблонный `margin-top: 12px` у .circle-button (в правом блоке мы его тоже
           снимаем) — иначе обёртка выше кнопки на эти 12px и ритм шапки уезжает */
        margin: 0;
        /* кегль и боковые поля — как у кнопки b24, которая заменит заглушку (14px,
           15px по бокам): иначе при подмене кнопка «худеет» не только по высоте */
        font-size: 14px;
        line-height: 20px;
        padding: 0 15px;
        white-space: nowrap;
    }
    header .navbar-right > .nav-cta-desktop { display: none; }
    /* Сама кнопка — тоже флекс-контейнер: <i> внутри инлайновый, и его положение задаёт
       строчный бокс кнопки (baseline + унаследованная line-height), а не её середина, —
       после центрирования кнопки рисунок всё ещё стоял на 1px ниже (замер 390px: центр
       кнопки 30, центр полосок 31). У флекс-центрирования такой погрешности нет. */
    .navbar-header > .navbar-toggle {
        order: 2;
        /* правое поле — шаблонное (15px): без него кнопка липнет к краю экрана */
        margin: 0 15px 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
/* Мобильный экземпляр CTA — только на мобильных ширинах: на десктопе кнопка стоит в
   правом блоке шапки рядом с телефоном, и второй такой же в `.navbar-header` оказался
   бы вплотную к логотипу. Правило вне медиа-запроса, чтобы дубль был скрыт по
   умолчанию — включает его ровно блок выше. */
.nav-cta-mobile { display: none; }

/* ===== SiteForge: кнопка меню — ровно три полоски, без иконочного шрифта =====
   В шапке стоит <i class="fa fa-bars">, но FontAwesome на сайте нет вообще: шаблон
   тянет Iconsmind (scripts/iconsmind/line-icons.min.css, подключается скриптом), а он
   переопределяет .fa на свой шрифт icomoon. Класс fa-bars там указывает на ДРУГОЙ
   глиф — «меню» из пяти штрихов разной длины. Отсюда и «было три полоски, стало пять»:
   привычные три — это глиф FontAwesome, которого тут никогда не было.
   Рисуем полоски сами: глиф глушим (font-size:0 + пустой content), а три черты даёт
   сам <i> и его два псевдоэлемента. Никакой зависимости от иконочного шрифта не
   остаётся — не догрузился, подменили набор, сменили шаблон: полосок по-прежнему три.
   Цвет — currentColor, то есть ровно тот акцент, которым шаблон красит <i> (skin.css
   красит все <i> акцентом), поэтому вид кнопки не меняется, меняется только рисунок.
   Специфичность (0,2,1) против (0,1,1) у правила иконочного шрифта — content наш. */
.navbar-toggle > i.fa-bars {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 2px;
    margin: 10px 0;
    background: currentColor;
    font-size: 0;
    line-height: 0;
}
.navbar-toggle > i.fa-bars::before,
.navbar-toggle > i.fa-bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 24px;
    height: 2px;
    background: currentColor;
}
.navbar-toggle > i.fa-bars::before { top: -7px; }
.navbar-toggle > i.fa-bars::after { top: 7px; }

/* ===== SiteForge: зазор в группе кнопок — на САМИХ кнопках, а не на контейнере =====
   У кнопок шаблона margin: 0, стоят они подряд инлайновыми ссылками, и держит их только
   пробел между тегами: 4px на десктопе (читается как слипшиеся), а на телефоне, где
   группа переносится, между рядами РОВНО 0px — две кнопки выглядят одним блоком.

   ПОЧЕМУ ПРАВИЛО ПЕРЕЕХАЛО НА КНОПКИ (2026-09-05). Раньше зазор давали два правила,
   которые флексили КОНТЕЙНЕР группы: `.container.content [class*="col-"]:has(…)` на
   телефоне и `.container.content div:has(…)` безусловно. Оба требуют, чтобы контейнер
   был ПОТОМКОМ `.container.content`, — а самая частая форма ровно обратная: кнопки
   лежат прямыми детьми самого `.container.content` (hero почти каждой страницы). Тогда
   не матчится ничего: замер до правки — 21 пара у логистики и 72 у диадока с зазором
   0px при переносе и 4px в строке, при этом пары внутри `.col-*` честно получали свои
   10/14px. Отсюда «на диадоке починили, а на логистике опять слиплись»: чинилась не
   проблема, а одна из её форм.
   Сам `.container.content` флексить нельзя — в нём лежат h1, <p>, .row, <hr>, <img>,
   и флекс развалил бы всю секцию. Поэтому зазор задают САМИ кнопки: правило не знает
   и не спрашивает, во что группа обёрнута, и потому не может промахнуться мимо
   очередной новой формы разметки. Это и есть смысл замены — форм у контейнера много,
   кнопка одна.

   Тонкости, каждая из замера, и каждая — отдельные грабли:
   - отступы СИММЕТРИЧНЫЕ (5px слева и справа у обеих кнопок пары), а не 10px у
     второй. Односторонний margin даёт 14px в строке так же, но при переносе делает
     нижнюю строку на 10px шире: `text-align: center` центрирует её ВМЕСТЕ с отступом,
     и кнопки в столбике стоят со сдвигом 5px друг относительно друга (замер: центр
     группы уезжал с 0 на 5px на всех телефонных ширинах). 5+5 плюс пробел между
     инлайн-тегами = те же 14px, что давал flex-gap;
   - вертикальный отступ БЕЗУСЛОВНЫЙ, а не только на телефоне. Перенос случается не
     только там: в узкой колонке группа рвётся и на 768…991 (замер: digest.html и
     главная диадока на 768 — два ряда кнопок вплотную, зазор 0). Ширину, на которой
     группа перенесётся, знать заранее нельзя — она зависит от длины надписей;
   - `vertical-align: top` обязателен. У `.btn` шаблона `vertical-align: middle`, то
     есть по строке выравнивается СЕРЕДИНА маргин-бокса, и разный нижний отступ у
     кнопок пары опускает одну из них на половину разницы. А отступы у них разными
     быть ОБЯЗАНЫ: у шаблона есть правило
     `[class*="section-"] > div > .row:last-child > div > :last-child { margin-bottom: 0 }`
     (специфичность (0,4,2), наша (0,2,1)), которое гасит хвостовой отступ у последнего
     элемента секции — то есть ровно у второй кнопки пары. Замер: 5px перекоса на
     digest.html и главной логистики при 767px. Ломать шаблонный сброс `!important`
     нельзя — он затем и стоит, чтобы секция не росла на хвостовой отступ; а с
     выравниванием по верху разница отступов на положение кнопок не влияет вовсе.
     Зазор при переносе от этого не страдает: его даёт НЕ последняя кнопка, а
     предыдущая, у которой сброс не срабатывает;
   - `:has(+ …)` нужен, чтобы отступы достались ведущей кнопке ПАРЫ, а не каждой
     кнопке в `main` (иначе +10px под каждой карточкой тарифа и в каждой форме).
     Браузер без `:has()` теряет отступы ведущей кнопки — деградация в прежний вид,
     не в кашу;
   - в селекторах есть `.b24-form-click-btn-wrapper`: развёрнутый click-слот рисует
     кнопку сам, и рядом с обычной `.btn` (actions.html) она тоже обязана иметь зазор.
     Прежний flex давал это побочно — тем, что флексил контейнер целиком.
   Область — `main`: в футере и в шапке раскладка своя, а карточки тарифов под правило
   не попадают сами — там кнопка в карточке одна, соседней нет. */
main .btn:has(+ .btn),
main .btn:has(+ .circle-button),
main .btn:has(+ .b24-form-click-btn-wrapper),
main .circle-button:has(+ .btn),
main .circle-button:has(+ .circle-button),
main .circle-button:has(+ .b24-form-click-btn-wrapper),
main .b24-form-click-btn-wrapper:has(+ .btn),
main .b24-form-click-btn-wrapper:has(+ .circle-button),
main .btn + .btn,
main .btn + .circle-button,
main .circle-button + .btn,
main .circle-button + .circle-button,
main .btn + .b24-form-click-btn-wrapper,
main .circle-button + .b24-form-click-btn-wrapper,
main .b24-form-click-btn-wrapper + .btn,
main .b24-form-click-btn-wrapper + .circle-button {
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
    vertical-align: top;
}

/* ===== SiteForge: карточка-бокс — кнопка у нижнего края, а не «где кончился текст» =====
   Высоту карточек в ряду мы уже равняем (правило .advs-box-top-icon выше), но содержимое
   прижато к верху, поэтому кнопка садится сразу под текстом: у карточки с тремя строками
   она в 26px от низа, у соседних с двумя — в 50px (замер на actions.html, 1200px). Ряд
   читается как несобранный, хотя рамки идеально ровные. Лечим раскладкой: карточка —
   колоночный флекс, кнопка прижата `margin-top: auto`, минимальный зазор над ней даёт
   нижний margin абзаца. Тогда кнопки всех карточек ряда стоят на одной линии независимо
   от длины текста — а длина текста в карточках всегда будет разной.
   Тонкости, каждая обязательна:
   - у шаблона `.advs-box-top-icon p { margin: auto }`; в колоночном флексе `auto` по
     вертикали означает «съесть весь свободный зазор» — текст уплыл бы от заголовка к
     середине карточки. Оставляем только горизонтальное центрирование;
   - кнопка бывает ДВУХ видов: обычная `.btn` шаблона и обёртка виджета Bitrix24
     (слот SF-FORM развёрнут в скрипт, кнопку рисует он сам) — на actions.html в одном
     ряду и та и другая, поэтому в селекторах обе;
   - `align-self: center` — флекс-элемент по умолчанию растягивается на всю ширину, а
     кнопки тут «таблетки» по содержимому;
   - `:has(> …)` ограничивает правило карточками С кнопкой: в хабах разделов такой же
     карточкой-боксом сделана вся ссылка целиком, там ни кнопки, ни перестройки не надо.
   Иконка карточки лежит `position: absolute` (она «сидит» на верхней рамке), поэтому
   флекс её не двигает. */
.proporzional-row > div > .advs-box-top-icon:has(> .btn),
.proporzional-row > div > .advs-box-top-icon:has(> .b24-form-click-btn-wrapper) {
    display: flex;
    flex-direction: column;
}
.proporzional-row > div > .advs-box-top-icon:has(> .btn) > p,
.proporzional-row > div > .advs-box-top-icon:has(> .b24-form-click-btn-wrapper) > p {
    margin: 0 auto 15px !important;
}
.proporzional-row > div > .advs-box-top-icon > .btn,
.proporzional-row > div > .advs-box-top-icon > .b24-form-click-btn-wrapper {
    margin-top: auto !important;
    align-self: center;
}

/* ===== SiteForge: гарнитура сайта (Roboto, локальные файлы) =====
   skin.css шаблона подключается ПОСЛЕДНИМ и перебивает Roboto из style.css:26 своим
   `font-family: sans-serif` — весь сайт рисуется системной гарнитурой (буквы шире и
   жиже, `<b>` недостаточно жирный). Правка жила в sites/diadoc/skin.css, то есть
   следующему сервису не досталась: kontur-logistika приехал с sans-serif при том, что
   и @font-face, и сами .woff2 у него на месте. Место такой правки — слой.
   Файлы шрифтов лежат в каталоге fonts/ внутри шаблона, поэтому копия шаблона несёт их
   сама; у уже собранных сервисов они в sites/{slug}/fonts/. Нет файлов — стек
   откатится на Helvetica/Arial: это деградация рисунка, а не поломка страницы.
   Пути в url() ОТНОСИТЕЛЬНЫЕ: база для них сам skin.css в корне сайта, поэтому они
   одинаково работают в превью (под секретным префиксом), на боевом домене и на любой
   глубине вложенности. Абсолютный /fonts/… в превью не отпрефиксовался бы вовсе —
   _rewrite_root_paths правит HTML, а не содержимое CSS.
   Подмножества cyrillic/latin (± ext), unicode-range оставляет браузеру грузить лишь
   то, что реально встретилось на странице. */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/roboto-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/roboto-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/roboto-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/roboto-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/roboto-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/roboto-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/roboto-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/roboto-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/roboto-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/roboto-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/roboto-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/roboto-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body, header, p, .adv-img p, .caption-bottom p, .adv-circle .caption p, .advs-box p,
.list-blog p, h1, h2, h3, h4, h5, h6, .btn, .circle-button,
input, textarea, select, button {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
}

/* ===== SiteForge: контраст основного текста =====
   Шаблон красит body/p/заголовки в #637280 (skin.css:194) — на сером фоне секций
   (#f7f7f7) это 4.66:1: формально AA при 15px проходит впритык, фактически читается
   тяжело. Заголовки h1..h6 своего цвета не имеют и НАСЛЕДУЮТ от body, поэтому серыми
   выходят и они (замер h2 давал тот же rgb(99,114,128)). Ставим #222 — 15.9:1.
   Текст на цветном фоне НЕ трогаем: .white h1..h6 и .white p (style.css:5491,5503)
   задают #FAFAFA со специфичностью (0,2,0), наши (0,0,1)/(0,1,0) их не перебивают —
   проверено замером, hero остаётся белым.
   Ссылки (a) в том же шаблонном селекторе, но их тут НЕТ намеренно: покрашенная в #222
   ссылка перестанет отличаться от текста. Акцент для ссылок — отдельное решение. */
body, header, p, .adv-img p, .caption-bottom p, .adv-circle .caption p, .advs-box p,
.list-blog p, .list-items .list-item p, .title-base p, div.title-icon p,
.pricing-table .list-group-item, .tag-row span {
    color: var(--sf-text-color);
}
h1, h2, h3, h4, h5, h6,
.advs-box-top-icon h3, .list-items .list-item h3, .pricing-table h3 { color: var(--sf-text-color); }

/* ===== SiteForge: кегли =====
   Решение оператора 2026-08-20: H1/H2 без изменений, H3 22, текст первого экрана 20,
   остальной текст 18, кнопки 18. Шаблонные значения — 15px у текста и 14px у кнопок —
   для лендинга мелкие. line-height поднимаем вместе с кеглем: у шаблона 24px при 15px,
   при 18px строки слипаются.
   `!important` у .text-m обязателен — шаблон задаёт его через !important (style.css:364).
   h2 на мобильном шаблон сам уменьшает до 19px (медиа-блок skin.css:1848) — это его
   поведение, не трогаем. */
body, p, .advs-box p, .list-blog p, li {
    font-size: var(--sf-text-size); line-height: var(--sf-text-line);
}
h3, .h3, .advs-box-top-icon h3 {
    font-size: var(--sf-h3-size); line-height: var(--sf-h3-line);
}
.section-bg-image p.text-m, .section-bg-video p.text-m, #hero p.text-m {
    font-size: var(--sf-lead-size) !important; line-height: var(--sf-lead-line);
}
.text-s { font-size: var(--sf-small-size) !important; line-height: var(--sf-small-line); }
.btn, .circle-button { font-size: var(--sf-btn-font); }
/* Шапка и футер — свой кегль: кнопка 18px даёт высоту 41px, а шапка ровно 60px, кнопка
   упирается в её края. Специфичность (0,2,0) у `.btn.btn-sm` выше, чем у `header .btn`
   (0,1,1) — поэтому здесь именно `header .btn.btn-sm`, иначе правило проигрывает.
   Кнопку ШАПКИ дальше ведёт правило геометрии b24 (14px, блок шапки выше по файлу, но
   специфичнее); КНОПКИ подвала с 2026-08-21 поднимает до 44px/18px правило единого
   размера ниже — здесь 15px остаётся за текстом подвала. */
/* Числом, а не токеном: это не решение о виде, а БЮДЖЕТ ШИРИНЫ шапки (см. ниже). */
header .btn, header .btn.btn-sm, header .circle-button,
footer .btn, footer .btn.btn-sm, footer .circle-button { font-size: 15px; }
/* Телефон и вообще текст правого блока шапки — тоже 15px, и это не косметика, а
   БЮДЖЕТ ШИРИНЫ. Шапка — единственное место сайта, где строка обязана сойтись в
   фиксированный контейнер: до 1199px bootstrap держит 970px, и запаса там единицы
   пикселей (замер на диадоке: логотип 132 + меню 456 + правый блок 360 = 948 — сходится
   впритык). Правый блок float: лишнее он не ужимает, а роняет на вторую строку, шапка
   становится 120px и fixed-top наезжает на первый экран. Кегль 18px раздувал телефон
   со 137 до 164px и вместе с кнопкой (12→15px) давал 380 — перенос на всех ширинах
   993–1199. Поэтому весь текст правого блока держим на прежнем кегле: `p` внутри —
   на случай, если у сервиса телефон свёрстан не классом .header-phone (он наш, не
   шаблонный, и у нового сервиса может называться иначе). */
header .navbar-right, header .navbar-right p, header .header-phone { font-size: 15px; }
/* Пункты меню: в РАСКРЫТОМ мобильном меню размер наследуется от body — вместе с
   `li { font-size: 18px }` выше меню стало бы крупнее всего остального в шапке
   (замер подтвердил 18px без этого правила). Возвращаем 15px.
   ТОЛЬКО до 992px, и это принципиально: на десктопе шаблон задаёт пунктам 14px, наш
   селектор (0,1,3) его перебивает, и лишний пиксель кегля растягивает меню на ~25px.
   В диапазоне 993–1199 контейнер bootstrap фиксирован на 970px и запаса там нет вовсе:
   правый блок (телефон + кнопка) падал на вторую строку, шапка становилась 120px и
   наезжала на первый экран (замер на диадоке: 5 пунктов заняли 479px вместо 455px). */
@media (max-width: 992px) {
    header .navbar-nav > li > a { font-size: 15px; }
}

/* ===== SiteForge: начертание текста =====
   Вес шрифта слой раньше не задавал вовсе — и это вылезло на втором шаблоне. У
   yellow-business в скине стоит `body, p, h1, h2, h3, h4, h5, h6 { font-weight: 300 }`,
   то есть ВЕСЬ текст и все заголовки Light; у whitelabel тело 400, заголовки 500.
   Замер на одной и той же странице двух сервисов: гарнитура одна (Roboto), цвет один
   (#222), кегли одинаковые — расходился только вес (h2 500 против 300, абзацы 400
   против 300, <b> 700 против 500). Глазом это читается как «на оригинале текст чернее».

   h4 НЕ трогаем намеренно: у whitelabel это отдельный приём — крупный лид-заголовок в
   30px с весом 300, и общее правило сделало бы его жирным. Он и так одинаков там, где
   встречается.

   <b>/<strong> — отдельной строкой: на жёлтом они местами приезжали в 500 и от
   обычного текста почти не отличались. Полужирный обязан быть полужирным.

   Сглаживание: у whitelabel в скине стоит `-webkit-font-smoothing: antialiased`
   (плюс `-moz-osx-font-smoothing: grayscale`), у yellow-business его нет вовсе.
   Это ещё немного разницы в толщине штриха — переносим в слой, чтобы шрифт рисовался
   одинаково на любом шаблоне. */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body, p, li { font-weight: var(--sf-text-weight); }
h1, h2, h3, h5, h6 { font-weight: var(--sf-heading-weight); }
b, strong { font-weight: var(--sf-bold-weight); }
/* Заголовок карточки. У yellow-business он ослаблен двумя правилами —
   `.advs-box h3` (0,1,1) и `html body .advs-box-top-icon h3` (0,1,3), — и общее
   правило выше их не перебивает: замер дал 97 карточных h3 весом 400 против 500 у
   мастера. Повторяем ФОРМУ шаблонного селектора (та же специфичность) и берём
   порядком: наш блок идёт последним в skin.css, а он подключается последним.
   У whitelabel таких правил нет, карточный h3 там и так 500 — значение то же,
   мастер не меняется. */
html body .advs-box h3,
html body .advs-box-top-icon h3 { font-weight: var(--sf-heading-weight); }
/* Заголовок шага в нумерованной схеме. У whitelabel есть
   `.box-steps .step-item > h3 { font-weight: 500 }`, у yellow-business такого правила
   нет вовсе — и заголовок проваливается в его общий 300. Селектор той же формы и той
   же специфичности (0,2,1), значение то же, что у whitelabel: мастер не меняется. */
.box-steps .step-item > h3 { font-weight: var(--sf-heading-weight); }

/* ===== SiteForge: приглушённый текст — вопросы FAQ и крошки =====
   Оба набраны тегом <a>, и блок контраста их намеренно не красит: правило «ссылка,
   покрашенная в #222, перестаёт отличаться от текста» остаётся верным. Но вопрос
   аккордеона — это <a> БЕЗ href, никакая не ссылка, а заголовок; а крошки — служебная
   навигация, вид которой по решению оператора обязан переезжать из сайта в сайт.
   Пока сайт был один, цвет ссылки шаблона был один и вопрос не возникал; на втором
   шаблоне тот же «цвет ссылки» оказался другим (#696969 против #637280), и на 74
   элементах страницы оформление разошлось. Настоящие текстовые ссылки в абзацах не
   задеты — у них своё правило с подчёркиванием и брендовым цветом. */
.accordion-list .list-group-item > a,
.container.content nav a { color: var(--sf-muted-color); }
footer h3 { font-size: var(--sf-footer-h3-size); }

/* ===== SiteForge: стрелка между шагами (.box-steps) — снимаем декор скина =====
   На один и тот же псевдоэлемент `.box-steps .step-item:after` претендуют ТРИ файла,
   и подключаются они в таком порядке:
     1. style.css      — `content: '\f061'; font-family: 'FontAwesome'; font-size: 25px`
                         (глифа нет: FontAwesome на сайте не подключён — см. `fa fa-bars`);
     2. skin.css       — у yellow-business свой рисунок: `:before` = вертикальная линия
                         1x70px, а сам `:after` превращён в КВАДРАТ 18x18 с бордерами
                         сверху и справа, повёрнутый на 45°, с непрозрачным фоном
                         (то есть скин рассчитывает, что содержимого в нём нет);
     3. scripts/iconsmind/line-icons.min.css — подключается СКРИПТОМ шаблона, поэтому
                         встаёт в каскаде ПОСЛЕ скина и возвращает содержимое:
                         `content: '\e660'` (это глиф im-arrow-right) плюс
                         `font-family: 'icomoon' !important`.
   Итог на жёлтом: настоящая стрелка-глиф ЕСТЬ, но её вместе с контейнером разворачивает
   на 45° и обводит рамкой поверх вертикальной линии. На экране это выглядит как
   посторонняя фигура рядом с чертой — «стрелочки поехали». У whitelabel пункта 2 нет
   вовсе (в его скине про .box-steps только h3 и номер), поэтому у мастера стрелка
   рисуется ровно и вопросов не вызывает — расхождение приехало со вторым шаблоном.
   Лечим причину: снимаем декор скина и оставляем глиф как есть. Цвет, кегль и позицию
   не трогаем — их задают style.css и акцентный список скина, то есть стрелка получается
   такой же, как у мастера. На сервисах на whitelabel правило не меняет ничего: сбрасывать
   там нечего (ни линии, ни рамки, ни поворота не было). */
.box-steps .step-item:before { display: none; }
.box-steps .step-item:after,
.section-bg-color .box-steps .step-item:after {
    width: auto;
    height: auto;
    border: 0;
    background: none;
    margin-right: 0;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

/* ===== SiteForge: кнопки страницы и подвала — один размер (см. переменные --sf-btn-*) =====
   Правило ограничено <main> НАМЕРЕННО: шапка — бюджет ширины (до 1199px контейнер
   970px, запас единицы пикселей; проба с кеглем кнопки шапки 14→15px давала +7px и
   съедала запас на 993px с 26 до 19px), и не задевать её надёжнее тем, что правило до
   неё не достаёт, а не переопределением обратно. <main> есть у всех 128 страниц обоих
   сервисов, партиал тарифов вставляется внутрь него; у страницы без <main> правило
   просто не сработает — деградация в прежний вид, не в кашу. Специфичность (0,1,1) выше
   шаблонного `.btn-sm` (0,1,0), блок идёт последним — !important не нужен. Следствие:
   `.btn-sm` внутри страницы перестаёт отличаться от `.btn` — это и есть половина
   проблемы, разметку (167 вхождений) не правим, перегенерация вернула бы класс.
   Подвал — тоже 44px: бюджета ширины там нет (колонки), а кнопка внизу страницы по
   смыслу та же, что в тексте. Отдельным селектором, чтобы снять одним движением;
   `footer .btn.btn-sm` обязателен — правило кегля 15px выше имеет (0,2,1). Кегль
   подвала поднимается только у КНОПОК, текст подвала остаётся на 15px. */
main .btn, main .circle-button,
footer .btn, footer .btn.btn-sm, footer .circle-button {
    min-height: var(--sf-btn-height);
    padding: var(--sf-btn-pad-y) var(--sf-btn-pad-x);
    font-size: var(--sf-btn-font);
    line-height: var(--sf-btn-line);
}

/* ===== SiteForge: колонка «Контакты» в футере начинается там же, где соседние =====
   Между её <h3> и первым элементом эталон нёс лишний `<hr class="space s">`, которого
   у соседних колонок нет: замер давал зазор 34px против 15px, то есть первая строка
   контактов стояла на 19px ниже соседей. Разметку эталона (sites/diadoc/_footer.html)
   и требование в doc/prompt-fragment.md починили — это страховка для футеров, которые
   уже собраны и перегенерироваться не будут. Класс .footer-right шаблонный
   (style.css:1863), правило дешёвое. */
footer .footer-right > h3 + hr.space { display: none; }

/* ===== SiteForge: скриншот интерфейса на нижней кромке hero =====
   Приём общий для всех сервисов семейства: картинка интерфейса стоит ВПРИТЫК к низу
   цветного hero, белая секция начинается сразу под ней, поэтому у самой картинки
   скруглены только ВЕРХНИЕ углы (файл RGBA, радиус 10px). Эталон габаритов —
   sites/diadoc/images/mk-17.png, 805x317.
   Два правила, оба обязательны:
   1) универсальный ритм секций выше даёт .container.content нижний padding 52px, и под
      картинкой оставалась полоса цветного фона — гасим его ТОЛЬКО у hero (id бьёт по
      специфичности) и только снизу;
   2) в шаблоне у img задан лишь max-width:100%, поэтому на узком экране картинка с
      атрибутом height=317 сплющивалась (на 360px это 360x317 вместо пропорций) —
      height:auto возвращает пропорциональное масштабирование.
   Правила жили в блоке style на главной диадока; там они верны для ЛЮБОГО сервиса с
   таким hero, поэтому место им здесь. Класс наш (.hero-shot) — у сервиса без картинки
   селекторы просто мёртвые. */
#hero > .container.content { padding-bottom: 0 !important; }
#hero .hero-shot { display: block; margin: 0 auto !important; height: auto; }

/* ===== SiteForge: токены оформления (шаблон + пресет домена) ===== */
:root {
    --sf-text-size: 18px;
    --sf-text-line: 28px;
    --sf-h3-size: 22px;
    --sf-h3-line: 30px;
    --sf-lead-size: 20px;
    --sf-lead-line: 30px;
    --sf-small-size: 15px;
    --sf-small-line: 23px;
    --sf-text-color: #222222;
    --sf-text-weight: 400;
    --sf-heading-weight: 500;
    --sf-bold-weight: 700;
    --sf-muted-color: #637280;
    --sf-footer-h3-size: 14px;
    --sf-radius: 12px;
    --sf-btn-height: 44px;
    --sf-btn-font: 18px;
    --sf-btn-line: 24px;
    --sf-btn-pad-y: 9px;
    --sf-btn-pad-x: 20px;
    --sf-header-height: 60px;
}

/* ===== SiteForge: боксы контента — бордер вместо тени + равная высота ===== */
.section-empty .advs-box.boxed-inverse,.section-bg-color .advs-box.boxed-inverse,.section-bg-color .advs-box.advs-box-top-icon.boxed-inverse,.section-empty .row > [class*="col-md-"].boxed-inverse:not(:has(form)),.section-bg-color .row > [class*="col-md-"].boxed-inverse:not(:has(form)) { box-shadow: none !important; border: 1px solid #00D5B5 !important; }
.container.content .row:has(> [class*="col-md-"].boxed-inverse):not(:has(form)) { display: flex !important; flex-wrap: wrap; align-items: stretch !important; }

/* ===== SiteForge: текстовая ссылка в абзаце должна быть видна ===== */
.container.content p > a[href]:not([class]) {
    color: #2e5b58;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.container.content p > a[href]:not([class]):hover {
    text-decoration-color: #00d5b5;
    text-decoration-thickness: 2px;
}

/* ===== SiteForge: текущий раздел в меню шапки ===== */
header .navbar-nav > li.sf-nav-active > a {
    box-shadow: inset 0 -2px 0 #00d5b5;
}
@media (max-width: 992px) {
    header .navbar-nav > li.sf-nav-active > a {
        box-shadow: inset 3px 0 0 #00d5b5;
        color: #00d5b5;
    }
}

/* ===== SiteForge: кнопка в шапке не теряет фон под курсором ===== */
header .btn:hover, header .btn:focus,
header .circle-button:hover, header .circle-button:focus {
    background-color: #2e5b58 !important;
    border-color: #2e5b58 !important;
    color: #fff !important;
}

/* ===== SiteForge: акцент виджета Bitrix24 = бренд сервиса (--b24-*) ===== */
.b24-form[id^="b24-"],
.b24-form [id^="b24-"] {
    --b24-primary-color: #00d5b5 !important;
    --b24-primary-hover-color: #2e5b58 !important;
    --b24-primary-text-color: #fff !important;
}

/* ===== SiteForge: кнопки Bitrix24 = кнопки сайта; радиус кнопок — как у блоков ===== */
.b24-form-click-btn-wrapper > button.b24-form-click-btn,
.b24-form-click-btn-wrapper > a.b24-form-click-btn {
    background-color: #00d5b5 !important; border-color: #00d5b5 !important;
    color: #fff !important; padding: 5px 15px !important;
    height: auto !important;
    border-radius: var(--sf-radius) !important;
    font-family: inherit !important; font-size: 14px !important;
    font-weight: 400 !important; line-height: 1.42857143 !important;
    text-transform: none !important; box-shadow: none !important;
    transition: all .6s !important;
}
.b24-form-click-btn-wrapper > button.b24-form-click-btn:hover,
.b24-form-click-btn-wrapper > a.b24-form-click-btn:hover {
    background-color: #2e5b58 !important; border-color: #2e5b58 !important;
    color: #fff !important;
}
main .b24-form-click-btn-wrapper > button.b24-form-click-btn,
main .b24-form-click-btn-wrapper > a.b24-form-click-btn,
footer .b24-form-click-btn-wrapper > button.b24-form-click-btn,
footer .b24-form-click-btn-wrapper > a.b24-form-click-btn {
    min-height: var(--sf-btn-height) !important; height: auto !important;
    padding: var(--sf-btn-pad-y) var(--sf-btn-pad-x) !important;
    font-size: var(--sf-btn-font) !important;
    line-height: var(--sf-btn-line) !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important;
}
@media (max-width: 992px) {
    header .b24-form-click-btn-wrapper > button.b24-form-click-btn,
    header .b24-form-click-btn-wrapper > a.b24-form-click-btn {
        min-height: 40px !important; height: auto !important;
        display: flex !important; align-items: center !important;
        justify-content: center !important;
    }
}
.b24-form button.b24-form-btn {
    background-color: #00d5b5 !important; border-color: #00d5b5 !important;
    color: #fff !important; border-radius: var(--sf-radius) !important;
    transition: all .6s !important;
    min-height: 44px !important; padding: 10px 20px !important;
}
.b24-form button.b24-form-btn:hover {
    background-color: #2e5b58 !important; border-color: #2e5b58 !important;
}
.circle-button, .btn.circle-button { border-radius: var(--sf-radius) !important; }
.b24-form .b24-form-control-string .b24-form-control,
.b24-form .b24-form-control-text .b24-form-control,
.b24-form .b24-form-control-list .b24-form-control,
.b24-form .b24-form-control-select .field-item,
.b24-form .b24-form-control-file,
.b24-form .b24-form-control-checkbox .b24-form-control,
.b24-form .b24-form-control-radio .b24-form-control,
.b24-form .b24-form-control-file .b24-form-control,
.b24-window-popup-wrapper { border-radius: var(--sf-radius) !important; }
.b24-form-content form > div:has(> .b24-form-field) {
    display: grid !important; grid-template-columns: 1fr 1fr;
    gap: 0 16px; align-items: start;
}
.b24-form-content form > div:has(> .b24-form-field:only-child) { grid-template-columns: 1fr; }
.b24-form-content .b24-form-field-agreement,
.b24-form-content .b24-form-field-layout { grid-column: 1 / -1; }
@media (max-width: 767px) {
    .b24-form-content form > div:has(> .b24-form-field) { grid-template-columns: 1fr; }
}
@media (max-width: 991px) {
    [class*="col-md-"].boxed-inverse .b24-form-content form > div:has(> .b24-form-field) { grid-template-columns: 1fr; }
}
.b24-form .b24-form-wrapper { min-height: 0 !important; }
.b24-form .b24-form-header-padding { padding: 0 !important; }
.b24-form .b24-form-content { padding: 10px 20px !important; }
.b24-form .b24-form-padding-side { padding-left: 20px !important; padding-right: 20px !important; }
.b24-form .b24-form-field { margin-bottom: 10px !important; }
.b24-form .b24-form-sign { padding: 4px 20px !important; margin: 0 !important; }
.b24-form-recaptcha, .b24-form-yandex-captcha { margin: 0 20px 12px 0 !important; }
.b24-form div span.b24-form-sign-abuse { display: none; }
.b24-form .b24-form-control-radio,
.b24-form .b24-form-control-checkbox {
    background: none !important; border: none !important; padding: 0 !important;
}
.b24-form .b24-form-control-radio > div,
.b24-form .b24-form-control-checkbox > div { flex: 1 1 100%; min-width: 0; }
.b24-form .b24-form-control-radio fieldset,
.b24-form .b24-form-control-checkbox fieldset {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
}
.b24-form .b24-form-control-radio fieldset > legend,
.b24-form .b24-form-control-checkbox fieldset > legend { grid-column: 1 / -1; margin-bottom: 8px !important; }
.b24-form .b24-form-control-radio .b24-form-control,
.b24-form .b24-form-control-checkbox .b24-form-control {
    display: flex !important; width: 100% !important;
    margin: 0 !important; min-height: 44px !important;
}
.b24-form .b24-form-control-radio .b24-form-control.b24-form-control-checked,
.b24-form .b24-form-control-checkbox .b24-form-control.b24-form-control-checked { border-color: var(--b24-primary-color) !important; }
.b24-form, .b24-form *, .b24-window-popup, .b24-window-popup * { font-family: inherit !important; }
.b24-window-popup .b24-form-header { padding-top: 10px !important; padding-bottom: 0 !important; }
.b24-window-popup .b24-form-header-title { font-size: 20px !important; line-height: 26px !important; margin-bottom: 4px !important; }
.b24-window-popup .b24-form-header-description { font-size: 14px !important; line-height: 18px !important; }
.b24-window-popup .b24-form-progress-bar-title {
    font-size: 17px !important; line-height: 22px !important;
    font-weight: 600 !important;
}

/* ===== SiteForge: кнопка чата Bitrix24 = бренд сервиса ===== */
.b24-widget-button-wrapper .b24-widget-button-inner-block,
.b24-widget-button-wrapper .b24-widget-button-inner-mask { background: #00d5b5 !important; }
.b24-widget-button-wrapper .b24-widget-button-pulse { border-color: #00d5b5 !important; }
.b24-widget-button-wrapper .b24-widget-button-icon-container svg path { fill: #fff !important; }
body:has(.b24-widget-button-wrapper) i.scroll-top { bottom: 126px !important; }

/* ===== SiteForge: фон подвала (настройка brand.footer) ===== */
footer { background-color: #1b4332 !important; }
footer p, footer a, footer li, footer span,
footer .copy-row, footer .copy-text { opacity: 1; }
footer, footer span, footer .copy-row, footer .copy-text { color: #ffffff !important; }
footer p, footer li, footer .text-s, footer .copy-row, footer .copy-text { color: #d6ddda !important; }
footer h2, footer h3, footer h4, footer h5, footer h6 { color: #ffffff !important; }
footer a:not(.btn):not(.circle-button):not([class*="b24"]) { color: #d6ddda !important; }
footer a:not(.btn):not(.circle-button):not([class*="b24"]):hover, footer a:not(.btn):not(.circle-button):not([class*="b24"]):focus { color: #ffffff !important; }
footer hr, footer .copy-text { border-color: #4d6c5f !important; }
footer { border-top-color: #4d6c5f !important; }

/* ===== SiteForge: картинка-фон hero — в тон бренда (blend) ===== */
.section-bg-image { background-color: #00d5b5 !important; background-blend-mode: luminosity; }