/* Start:/local/templates/2019/components/bitrix/news/cloud-hosting/bitrix/news.detail/products_new/style.css?179033838940514*/
/* ============================================================
   DETAIL PAGE — semantic utility classes (vanilla CSS)
   Converted from Tailwind @apply directives.
   ============================================================ */

/* --- Design tokens (resolved from Tailwind config in header.php) --- */
:root {
    --color-bg: #ffffff;
    --color-alt: #fafafb;
    --color-slot: #eef2fb;
    --color-ink: #161921;
    --color-body: #434a5a;
    --color-muted: #606878;
    --color-navy: #243a66;
    --color-accent: #4e7dbf;
    --color-pink: #cd1e75;
    --color-line: #e9ebf1;

    /* Derived tokens for names used in the template */
    --color-blue: var(--color-accent);
    --color-bluehover: #3d6a9e;
    --color-card: var(--color-bg);
    --color-page: var(--color-alt);
    --color-slotblue: var(--color-slot);
    --color-magenta: var(--color-pink);
    --color-magentahover: #b41a66;
    --color-subtle: var(--color-muted);
    --color-mutedtext: var(--color-body);
    --color-lineStrong: #d0d4de;

    /* Navycard gradient */
    --gradient-navycard: linear-gradient(155deg, #34588f, #223f6e 58%, #172e54);

    /* Border radius */
    --radius-card: 14px;

    /* Max width */
    --max-w-site: 1280px;

    /* Breakpoint */
    --bp-tablet: 900px;

    /* hero v8 */
    --bg-page: #fafafb; /* bg/page */
    --bg-card: #ffffff; /* bg/card */
    --bg-muted: #f6f7f9; /* bg/muted */
    --bg-field: #f9fafc; /* bg/field */
    --bg-accent-soft: #f1f5fb; /* bg/accent-soft */
    --surface-footer: #243a66; /* surface/footer */
    --surface-dark: linear-gradient(165deg, #19285a 0%, #0a142d 100%); /* стиль surface / dark gradient */

    --text-strong: #161921; /* text/strong */
    --text-primary: #242833; /* text/primary */
    --text-muted: #606878; /* text/muted */
    --text-subtle: #8a91a0; /* text/subtle */
    --text-inverse: #ffffff; /* text/inverse */
    --text-on-dark: #ffffff; /* text/on-dark */
    --text-on-dark-muted: #aabbdb; /* text/on-dark-muted */
    --text-on-dark-subtle: #8fa3c9; /* text/on-dark-subtle */

    --border-default: #e6e8ee; /* border/default */
    --border-strong: #dce0e6; /* border/strong */
    --border-crumb: #cdd5e6; /* border/crumb */

    --brand-blue: #4e7dbf; /* brand/blue */
    --brand-magenta: #cd1e75; /* brand/magenta */
    --brand-slate: #434a5a; /* brand/slate */
    --action-primary: #4e7dbf; /* action/primary */
    --action-hover: #3e65a0; /* action/primary-hover */
    --action-accent: #cd1e75; /* action/accent */
    --accent-hover: #a8175e; /* action/accent-hover */
    --blue-100: #dfe8f5; /* color/blue/100 */

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
    --sp-9: 96px;

    --elev-1: 0 1px 2px rgba(22, 25, 33, .06);
    --elev-2: 0 4px 12px rgba(22, 25, 33, .08);
    --elev-3: 0 12px 32px rgba(22, 25, 33, .10);

    --content: 1280px;
    --gutter: 80px;
}

/* --- Shared layout wrappers --- */

.container {
    max-width: var(--max-w-site);
    margin-left: auto;
    margin-right: auto;
    padding-left: 80px;
    padding-right: 80px;
}

@media (max-width: 900px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.section-padding {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

@media (max-width: 900px) {
    .section-padding {
        padding-top: 56px;
        padding-bottom: 56px;
    }
}

.section-scroll-margin {
    scroll-margin-top: 150px;
}

/* --- Section header blocks (label + h2) --- */

.section-header {
    margin-bottom: 36px;
    max-width: 760px;
}

.section-header--compact {
    margin-bottom: 28px;
    max-width: 760px;
}

.section-label {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-blue);
    font-weight: 500;
    margin-bottom: 12px;
}

.section-title {
    color: var(--color-ink);
    font-weight: 300;
    font-size: 34px;
    letter-spacing: -0.3px;
    line-height: 1.18;
}

@media (max-width: 900px) {
    .section-title {
        font-size: 26px;
    }
}

/* --- CMS HTML output wrapper --- */

/* Дополнение к общему ../../styles.css — только для макета шаблона bitrix:news (cloud-hosting).

   Зачем нужен отдельный файл: большая часть детальной страницы приходит из инфоблока
   ГОТОВЫМ HTML-ом, набранным редактором в визуальном редакторе Битрикса
   (DESCR_ru, DESCR_2_ru, DESCR_3_ru, ADVANTAGES_SOLUTION_ru, HOW_WORKS_TEXT_ru,
   DETAIL_TEXT_ru, API_ru, TEMPLATES_ru, FAQ_ru, TABS_BY_TYPE_CONFIGURATIONS_ru).
   Навесить на него Tailwind-классы нельзя — тегов в шаблоне нет. Preflight Tailwind
   при этом обнуляет списки, заголовки и таблицы. Поэтому вся типографика
   пользовательского HTML описана здесь одним скоупом .cms-html.

   ПРИ ИНТЕГРАЦИИ: оборачивать в <div class="cms-html"> каждый вывод сырого свойства,
   т.е. каждое место вида <?= $arResult["PROPERTIES"][...]['~VALUE']['TEXT'] ?>. */

.cms-html {
    font-size: 15px;
    line-height: 1.6;
    color: #434a5a;
}

.cms-html > * + * {
    margin-top: 16px;
}

.cms-html > * + img {
    margin-top: 0px;
}

/* Первый элемент не должен уносить верх блока — заголовки ниже задают
   собственный margin-top, и без сброса контент отрывается от края карточки. */

.cms-html h2 {
    font-size: 28px;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.3px;
    color: #161921;
    /*margin-top: 40px;*/
}

.cms-html h3:not(.grid-cards h3) {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    color: #161921;
    margin-top: 32px;
}

.cms-html h4 {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.35;
    color: #161921;
    margin-top: 24px;
}

.main-advantages h2,
.main-advantages h3,
.main-advantages h4 {
    color: revert;
}

.cms-html a {
    color: #4e7dbf;
    font-weight: 500;
}

.cms-html a:hover {
    color: #3e65a0;
}

.cms-html strong,
.cms-html b {
    font-weight: 600;
    color: #242833;
}

.cms-html ul,
.cms-html ol {
    padding-left: 22px;
}

.cms-html ul {
    list-style: disc;
}

.cms-html ol {
    list-style: decimal;
}

.cms-html li::marker {
    color: #8a91a0;
}

.cms-html img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Таблицы из редактора: горизонтальный скролл внутри своего контейнера,
   чтобы широкая таблица не растягивала страницу. */
.cms-html .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cms-html table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 520px;
}

.cms-html th,
.cms-html td {
    border: 1px solid #e6e8ee;
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
}

.cms-html th {
    background: #f6f7f9;
    font-weight: 500;
    color: #161921;
    white-space: nowrap;
}

.cms-html blockquote {
    border-left: 2px solid #b9bfca;
    padding-left: 18px;
    color: #606878;
}

/* Тёмный вариант — для .cms-html внутри navy-карточек */
.cms-html--onnavy,
.cms-html--onnavy h2,
.cms-html--onnavy h3,
.cms-html--onnavy h4,
.cms-html--onnavy strong {
    color: #ffffff;
}

.cms-html--onnavy {
    color: #cdd8ee;
}

.cms-html--onnavy a {
    color: #ffffff;
    text-decoration: underline;
}

/* --- Buttons --- */

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: 400 16px / 1.5 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
    padding: 14px 22px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background-color .15s, color .15s;
    white-space: nowrap;
    background-color: var(--color-blue);
    color: #ffffff;
}

.btn-primary:hover {
    background-color: var(--color-bluehover);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    line-height: 1.2;
    font-size: 15px;
    padding: 14px 22px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: color .15s;
    white-space: nowrap;
    background-color: transparent;
    color: var(--color-bluehover);
}

.btn-secondary:hover {
    color: var(--color-blue);
}

.btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    line-height: 1.2;
    font-size: 15px;
    padding: 14px 22px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background-color .15s;
    white-space: nowrap;
    background-color: var(--color-magenta);
    color: #ffffff;
}

.btn-accent:hover {
    background-color: var(--color-magentahover);
}

.btn-accent--full {
    flex: none;
}

@media (max-width: 900px) {
    .btn-accent--full {
        width: 100%;
    }
}

.btn-primary--full {
    width: 100%;
}

/* --- Grid cards (advantages, features) --- */

.card-default {
    background-color: var(--color-card);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    padding: 28px;
}

@media (max-width: 900px) {
    .card-default {
        padding: 20px;
    }
}

.card-icon-small {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background-color: var(--color-slotblue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.card-icon-small__svg {
    width: 19px;
    height: 19px;
}

.card-icon-medium {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-color: var(--color-slotblue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.card-icon-medium__svg {
    width: 22px;
    height: 22px;
}

.card-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-ink);
    margin-bottom: 8px;
}

.card-text {
    font-size: 14px;
    color: var(--color-mutedtext);
    line-height: 1.55;
}

/* --- Grid layouts for cards --- */

.grid-3-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 900px) {
    .grid-3-col {
        grid-template-columns: 1fr;
    }
}

.grid-2-col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
}

@media (max-width: 900px) {
    .grid-2-col {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

.grid-4-col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media (max-width: 900px) {
    .grid-4-col {
        grid-template-columns: 1fr;
    }
}

/* --- Hero section specifics --- */

.hero-section {
    position: relative;
    isolation: isolate;
    background-color: var(--color-card);
    padding-top: 35px;
    /*padding-bottom: 72px;*/
}

@media (max-width: 900px) {
    .hero-section {
        padding-top: 32px;
        padding-bottom: 40px;
    }
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -10;
    background: linear-gradient(135deg, var(--color-slotblue), var(--color-card), var(--color-card));
}

.hero-breadcrumbs {
    font-size: 13px;
    color: var(--color-subtle);
    margin-bottom: 20px;
}

.hero-breadcrumbs a {
    color: inherit;
}

.hero-breadcrumbs a:hover {
    color: var(--color-blue);
}

.hero-title {
    color: var(--color-ink);
    font-weight: 300;
    line-height: 1.04;
    font-size: 60px;
    letter-spacing: -0.025em;
    margin-bottom: 26px;
}

@media (max-width: 900px) {
    .hero-title {
        font-size: 32px;
        margin-bottom: 20px;
    }
}

.hero-description {
    font-size: 18px;
    max-width: 640px;
    margin-bottom: 30px;
}

@media (max-width: 900px) {
    .hero-description {
        font-size: 16px;
        margin-bottom: 24px;
    }
}

.hero-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 48px;
}

@media (max-width: 900px) {
    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 32px;
    }
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 760px;
}

@media (max-width: 900px) {
    .hero-stats {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.hero-stat-value {
    font-size: 32px;
    font-weight: 300;
    color: var(--color-ink);
    line-height: 1.1;
}

@media (max-width: 900px) {
    .hero-stat-value {
        font-size: 26px;
    }
}

.hero-stat-label {
    margin-top: 8px;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-subtle);
    font-weight: 500;
}

/* --- Banner under header --- */

.banner-section {
    background-color: var(--color-page);
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
    padding-top: 24px;
    padding-bottom: 24px;
}

.banner-section--no-border {
    background-color: var(--color-page);
    padding-bottom: 24px;
}

.banner-card {
    background-color: var(--color-card);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    padding: 24px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

@media (max-width: 900px) {
    .banner-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

.banner-card--solid {
    background-color: var(--color-slotblue);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    padding: 24px 32px;
}

@media (max-width: 900px) {
    .banner-card--solid {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* --- Submenu / anchor navigation --- */

.submenu-nav {
    background-color: var(--color-card);
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
    position: sticky;
    top: 88px;
    z-index: 40;
}

@media (max-width: 900px) {
    .submenu-nav {
        top: 64px;
    }
}

.submenu-list {
    display: flex;
    gap: 32px;
    align-items: center;
    height: 56px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
}

.submenu-list::-webkit-scrollbar {
    display: none;
}

.submenu-link {
    white-space: nowrap;
    color: inherit;
}

.submenu-link:hover {
    color: var(--color-blue);
}

/* --- Prices block --- */

.prices-card {
    background: var(--gradient-navycard);
    border-radius: 20px;
    padding: 40px 48px;
    color: #ffffff;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 40px;
    align-items: center;
}

@media (max-width: 900px) {
    .prices-card {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-left: 28px;
        padding-right: 28px;
        padding-top: 32px;
        padding-bottom: 32px;
    }
}

.prices-label {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #aabbdb;
    font-weight: 500;
    margin-bottom: 12px;
}

.prices-name {
    font-size: 26px;
    font-weight: 300;
    line-height: 1.15;
}

@media (max-width: 900px) {
    .prices-name {
        font-size: 22px;
    }
}

.prices-value {
    font-size: 40px;
    font-weight: 300;
    line-height: 1.05;
}

@media (max-width: 900px) {
    .prices-value {
        font-size: 32px;
    }
}

/* --- Configurations tabs --- */

.config-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 28px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.config-tabs::-webkit-scrollbar {
    display: none;
}

.config-tab {
    padding: 9px 18px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #e5e7eb;;
    transition: background-color .15s, color .15s, border-color .15s;
    white-space: nowrap;
    background-color: var(--color-card);
    color: var(--color-body);
    /*border-color: var(--color-line);*/
}

.config-tab:hover {
    cursor: pointer;
    color: var(--color-blue);
}

.config-tab.active {
    background-color: var(--color-blue);
    color: #ffffff;
    border-color: var(--color-blue);
}

/* --- Config pane --- */

.config-pane {
    background-color: var(--color-card);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    padding: 32px;
}

@media (max-width: 900px) {
    .config-pane {
        padding: 20px;
    }
}

/* --- Calculator placeholder --- */

.component-placeholder {
    border: 1px dashed var(--color-lineStrong);
    border-radius: var(--radius-card);
    background-color: var(--color-muted);
    padding: 56px 32px;
    text-align: center;
}

@media (max-width: 900px) {
    .component-placeholder {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

.component-placeholder__label {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-subtle);
    font-weight: 500;
    margin-bottom: 8px;
}

.component-placeholder__title {
    font-size: 16px;
    color: var(--color-body);
}

.component-placeholder__desc {
    font-size: 14px;
    color: var(--color-mutedtext);
    margin-top: 8px;
}

/* --- Second description with aside --- */

.desc-grid {
    display: grid;
    /*grid-template-columns: minmax(0, 760px) 1fr;*/
    gap: 48px;
}

@media (max-width: 900px) {
    .desc-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.aside-card {
    background-color: var(--color-card);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    padding: 28px;
    align-self: flex-start;
}

@media (max-width: 900px) {
    .aside-card {
        padding: 20px;
    }
}

.aside-label {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-subtle);
    font-weight: 500;
    margin-bottom: 12px;
}

.aside-text {
    font-size: 15px;
    color: var(--color-body);
    line-height: 1.6;
    margin-bottom: 20px;
}

/* --- Steps / how-it-works --- */

.step-card {
    background-color: var(--color-page);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    padding: 24px;
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: var(--color-slotblue);
    color: var(--color-blue);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 16px;
}

/* --- Video section --- */

.video-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 56px;
    align-items: center;
}

@media (max-width: 900px) {
    .video-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.video-preview {
    display: block;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: var(--gradient-navycard);
    aspect-ratio: 16 / 9;
}

.video-play-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-play-circle {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color;
}

.video-preview:hover .video-play-circle {
    background-color: rgba(255, 255, 255, 0.26);
}

@media (max-width: 900px) {
    .video-play-circle {
        width: 56px;
        height: 56px;
    }
}

.video-play-icon {
    width: 28px;
    height: 28px;
    transform: translateX(2px);
}

.video-caption {
    position: absolute;
    left: 24px;
    bottom: 20px;
    font-size: 13px;
    color: #cdd8ee;
}

@media (max-width: 900px) {
    .video-caption {
        left: 16px;
        bottom: 16px;
    }
}

/* --- Accordion / drop-boxes --- */

.dropbox {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background-color: var(--color-card);
    overflow: hidden;
    scroll-margin-top: 150px;
}

.dropbox-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
    padding: 20px 28px;
    background: none;
    border: none;
    cursor: pointer;
}

@media (max-width: 900px) {
    .dropbox-trigger {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.dropbox-title {
    font-size: 20px;
    font-weight: 500;
    color: var(--color-ink);
    line-height: 1.35;
}

@media (max-width: 900px) {
    .dropbox-title {
        font-size: 17px;
    }
}

.dropbox-chevron {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-subtle);
    transition: transform;
}

.dropbox-chevron.is-open {
    transform: rotate(180deg);
}

.dropbox-content {
    padding-left: 28px;
    padding-right: 28px;
    padding-bottom: 28px;
    margin-top: -4px;
}

@media (max-width: 900px) {
    .dropbox-content {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* --- FAQ items --- */

.faq-item {
    border-top: 1px solid var(--color-line);
}

.faq-trigger {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
    padding-top: 16px;
    padding-bottom: 16px;
    background: none;
    border: none;
    cursor: pointer;
}

.faq-question {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-ink);
    line-height: 1.45;
}

.faq-chevron {
    width: 18px;
    height: 18px;
    margin-top: 4px;
    flex-shrink: 0;
    color: var(--color-subtle);
    transition: transform;
}

.faq-chevron.is-open {
    transform: rotate(180deg);
}

.faq-answer-content {
    padding-bottom: 20px;
    padding-right: 40px;
}

@media (max-width: 900px) {
    .faq-answer-content {
        padding-right: 0;
    }
}

/* --- Reviews --- */

.review-card {
    background-color: var(--color-page);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    padding: 32px;
    display: flex;
    gap: 32px;
}

@media (max-width: 900px) {
    .review-card {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }
}

.review-logo {
    width: 200px;
    flex-shrink: 0;
    height: 120px;
    border-radius: 10px;
    background-color: var(--color-page);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-subtle);
    font-weight: 500;
    padding: 0 12px;
}

@media (max-width: 900px) {
    .review-logo {
        width: 100%;
        height: 64px;
    }
}

.review-quote {
    font-size: 16px;
    color: var(--color-body);
    line-height: 1.6;
}

.review-author-row {
    margin-top: 20px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.review-author-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-ink);
}

.review-author-role {
    font-size: 13px;
    color: var(--color-subtle);
}

/* --- Bottom form section --- */

.form-section {
    padding-top: 72px;
    padding-bottom: 72px;
    background-color: #f9fafc;
    scroll-margin-top: 100px;
}

@media (max-width: 900px) {
    .form-section {
        padding-top: 56px;
        padding-bottom: 56px;
    }
}

.form-grid {
    display: grid;
    grid-template-columns: 516px 1fr;
    gap: 64px;
    align-items: start;
}

@media (max-width: 900px) {
    .form-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* --- Bottom banner (attack-defense) --- */

.bottom-banner-section {
    padding-top: 56px;
    padding-bottom: 56px;
    background-color: var(--color-card);
}

@media (max-width: 900px) {
    .bottom-banner-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

.bottom-banner-link {
    display: block;
    background: var(--gradient-navycard);
    border-radius: 20px;
    padding: 48px;
    text-decoration: none;
}

@media (max-width: 900px) {
    .bottom-banner-link {
        padding-left: 28px;
        padding-right: 28px;
        padding-top: 36px;
        padding-bottom: 36px;
    }
}

.bottom-banner-title {
    display: block;
    color: #ffffff;
    font-weight: 300;
    font-size: 30px;
    line-height: 1.2;
    max-width: 720px;
}

@media (max-width: 900px) {
    .bottom-banner-title {
        font-size: 24px;
    }
}

.bottom-banner-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
}

.bottom-banner-arrow {
    width: 18px;
    height: 18px;
    transition: transform;
}

.bottom-banner-link:hover .bottom-banner-arrow {
    transform: translateX(4px);
}

/* --- Useful materials (more-news) --- */

.news-section {
    padding-top: 64px;
    padding-bottom: 64px;
    background-color: var(--color-page);
    border-top: 1px solid var(--color-line);
}

@media (max-width: 900px) {
    .news-section {
        padding-top: 48px;
        padding-bottom: 48px;
    }
}

.news-title {
    color: var(--color-ink);
    font-weight: 300;
    font-size: 26px;
    line-height: 1.2;
    margin-bottom: 28px;
}

@media (max-width: 900px) {
    .news-title {
        font-size: 22px;
    }
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 40px;
    row-gap: 16px;
}

@media (max-width: 900px) {
    .news-grid {
        grid-template-columns: 1fr;
    }
}

.news-link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-line);
    text-decoration: none;
}

.news-link-icon {
    width: 18px;
    height: 18px;
    margin-top: 4px;
    flex-shrink: 0;
    color: var(--color-subtle);
}

.news-link-text {
    font-size: 15.5px;
    color: var(--color-blue);
    font-weight: 500;
    line-height: 1.45;
}

.news-link:hover .news-link-text {
    color: var(--color-bluehover);
}

/* --- Inline link style --- */

.link-blue {
    color: var(--color-blue);
    font-weight: 500;
}

.link-blue:hover {
    color: var(--color-bluehover);
}

/* --- Background utility classes (used on <section> elements) --- */

.bg-card {
    background-color: var(--color-card);
}

.bg-page {
    background-color: var(--color-page);
}

.bg-muted {
    background-color: var(--color-muted);
}

/* --- Small layout utilities --- */

.max-w-820 {
    max-width: 820px;
}

.max-w-900 {
    max-width: 900px;
}

.flex-col-gap-3 {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

.text-body-sm {
    font-size: 15px;
    color: var(--color-body);
    line-height: 1.6;
}

.text-mutedtext-sm {
    font-size: 14px;
    color: var(--color-mutedtext);
    line-height: 1.6;
}

.icon-download {
    width: 18px;
    height: 18px;
}

.border-separator {
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
}

/* --- Margin utilities --- */

.mt-4 {
    margin-top: 16px;
}

.mt-5 {
    margin-top: 20px;
}

.mt-6 {
    margin-top: 24px;
}

.mt-7 {
    margin-top: 28px;
}

.mb-5 {
    margin-bottom: 20px;
}

.mb-7 {
    margin-bottom: 28px;
}

/* --- Submenu link active state (Alpine :class bindings) --- */

.text-blue {
    color: var(--color-blue);
}

.text-subtle {
    color: var(--color-subtle);
}


/* ─────────── hero (тёмный вариант из растра Codex) ─────────── */
.hero .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    border: 0;
    cursor: pointer;
    font: inherit;
    border-radius: var(--radius-md);
    transition: background-color .15s;
    text-transform: unset;
    box-shadow: unset;
    background-color: unset;
}

.hero {
    position: relative;
    overflow: hidden;
    background: #061536;
    background: radial-gradient(circle 560px at 86% 50%, rgba(78, 125, 191, .45) 0%, rgba(78, 125, 191, .42) 35%, transparent 95%), linear-gradient(180deg, #141f36 0%, #1b3055 55%, #243f6a 100%);
    color: var(--text-on-dark);
    padding-block: 72px 56px;
}

/* водяной знак — фирменный знак «облако + power» из логотипа */
.hero__mark {
    position: absolute;
    top: -80px;
    left: 52%;
    width: 620px;
    height: auto;
    fill: #ffffff;
    opacity: .05;
    pointer-events: none;
}

.hero__servers {
    position: absolute;
    right: 56px;
    bottom: 132px;
    width: 430px;
    height: auto;
    pointer-events: none;
    user-select: none;
}

.hero__inner {
    position: relative;
}

.hero__eyebrow {
    display: flex;
    gap: 12px;
    margin: 0 0 20px;
    color: #a9bfe3;
}

.hero__eyebrow i {
    font-style: normal;
    color: #5f7cae;
}

.hero__title {
    margin: 0 0 22px;
    max-width: 720px;
    font: 300 60px/1.08 'Onest', sans-serif;
    letter-spacing: -.025em;
    color: #fff;
}

.hero__lead {
    margin: 0 0 30px;
    max-width: 620px;
    font: 400 18px/1.55 'Onest', sans-serif;
    color: rgba(255, 255, 255, .82);
}

.hero__cta {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    flex-wrap: wrap;
}

.hero__ghost {
    color: #9dbde8;
}

.hero__ghost:hover {
    color: #fff;
}

.hero__chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 305px));
    gap: var(--sp-5);
    margin-top: 44px;
    padding-inline-start: 0;
}

.hero-chip {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(6px);
}

.hero-chip__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(120, 168, 235, .20);
}

/* icon/sla из ДС: толщина обводки своя (2.667 на viewBox 32) — в CSS её не задавать */
.hero-chip__ico svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #9dc3f2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-chip__txt {
    display: grid;
    gap: 2px;
}

.hero-chip__txt b {
    font: 500 15px/1.3 'Onest', sans-serif;
    color: #fff;
}

.hero-chip__txt i {
    font: 400 12.5px/1.35 'Onest', sans-serif;
    font-style: normal;
    color: rgba(255, 255, 255, .66);
}

/* ═══════════════════════════════════════════════════════════════
   Hero v8 — тёмный hero со стеклянной карточкой фактов.
   Отдельная копия страницы — правила общие, скоуп не нужен.
   ═══════════════════════════════════════════════════════════════ */
.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 64px;
    align-items: center;
}

.hero__col {
    min-width: 0;
}

.hero__title {
    max-width: 760px;
}

.hero__lead {
    max-width: 620px;
}

/* чип остался один — ряд больше не сетка на три колонки */
.hero__chips {
    grid-template-columns: minmax(0, 305px);
    margin-top: 36px;
}

.hero-card {
    align-self: center;
    padding: 24px;
    border-radius: var(--radius-lg);
    /* на тёмном фоне стекло ниже 12% не читается — см. правку Зои 06.09 */
    background: rgba(255, 255, 255, .12);
    border: 1.5px solid rgba(255, 255, 255, .30);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 24px 60px rgba(2, 10, 28, .38);
}

.hero-card__list {
    margin: 0;
    display: grid;
}

.hero-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block: 13px;
}

.hero-card__row + .hero-card__row {
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.hero-card__row:first-child {
    padding-top: 0;
}

.hero-card dt {
    font: 400 18px/1.35 'Onest', sans-serif;
    color: #dce0e6;
    white-space: nowrap;
}

.hero-card dd {
    margin: 0;
    font: 500 18px/1.35 'Onest', sans-serif;
    color: #fff;
    text-align: right;
}

.hero-card__cta {
    width: 100%;
    margin-top: 20px;
}

/* длинная / короткая формулировка — как в макете, без обрезки строк */
.u-narrow {
    display: none;
}

@media (max-width: 1100px) {
    .hero__inner {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 40px;
    }

    .hero-card dt, .hero-card dd {
        font-size: 17px;
    }
}

@media (max-width: 900px) {
    .hero__inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .hero__chips {
        grid-template-columns: 1fr;
    }

    .hero-card {
        align-self: stretch;
    }
}

@media (max-width: 600px) {
    .hero-card {
        padding: 20px;
    }

    .hero-card dt, .hero-card dd {
        font-size: 16px;
    }

    .u-wide {
        display: none;
    }

    .u-narrow {
        display: inline;
    }
}


/* ─────────── мобильная раскладка ─────────── */
@media (max-width: 900px) {
    :root {
        --gutter: 20px;
    }
}

/* ═══════════ мобильная раскладка страницы ═══════════ */
@media (max-width: 1100px) {
    .calc__layout {
        grid-template-columns: 1fr;
    }

    .summary {
        position: relative;
        top: auto;
    }

    .seo__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .configs__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .trust__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .checklist {
        grid-template-columns: 1fr;
    }

    .migration__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .page-cs .lead__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .hero__servers {
        width: 360px;
        opacity: .45;
    }

    .hero__chips {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .wrap--wide {
        padding-inline: var(--gutter);
    }

    .hero {
        padding-block: 44px 40px;
    }

    .hero__title {
        font-size: 36px;
    }

    .hero__lead {
        font-size: 16px;
    }

    .hero__mark {
        width: 380px;
        left: 40%;
    }

    .hero__servers {
        display: none;
    }

    .hero__chips {
        grid-template-columns: 1fr;
        gap: var(--sp-3);
        margin-top: 32px;
    }

    .hero__eyebrow {
        flex-wrap: wrap;
        gap: 8px;
    }

    .anchors {
        padding-block: 8px;
    }

    .anchors__bar {
        gap: 20px;
        height: 48px;
        padding-inline: 16px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .anchors__bar::-webkit-scrollbar {
        display: none;
    }

    section[id] {
        scroll-margin-top: 72px;
    }

    .seo, .configs, .trust__card, .cloudis, .reviews, .faq, .lead, .migration {
        padding-block: 44px;
    }

    .calc {
        padding-block: 48px;
    }

    .calc__title {
        font-size: 32px;
        margin-bottom: 28px;
    }

    .step-card {
        padding: 22px;
    }

    .step-card--flat {
        padding: 22px;
    }

    .disk__tiles {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .configs__grid, .trust__grid, .useful__grid {
        grid-template-columns: 1fr;
    }

    .cloudis__panel {
        padding: 24px 20px;
    }

    .cloudis__tabs {
        flex-wrap: wrap;
    }

    .compare__head {
        padding-block: 44px 0;
    }

    .compare__head .h2 {
        font-size: 28px;
    }

    .compare__band {
        padding-block: 32px;
    }

    .cmp, .cmp thead, .cmp tbody, .cmp tr, .cmp th, .cmp td {
        display: block;
        width: auto;
    }

    .cmp thead {
        display: none;
    }

    .cmp tbody tr {
        border-bottom: 1px solid var(--border-default);
    }

    .cmp tbody th {
        width: auto;
        padding: 16px 18px 8px;
    }

    .cmp tbody td {
        padding: 8px 18px;
    }

    .cmp tbody td::before {
        display: block;
        margin-bottom: 4px;
        font: 500 11px/1.4 'Onest', sans-serif;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--text-subtle);
    }

    .cmp tbody td.cmp__hi::before {
        content: 'Cloud Server · IaaS';
        color: var(--brand-blue);
    }

    .cmp tbody td:not(.cmp__hi)::before {
        content: 'Выделенный VPS/VDS';
    }

    .strip {
        flex-wrap: wrap;
    }

    .strip__title {
        margin-right: 0;
        width: calc(100% - 68px);
    }

    .review {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .review__quote {
        font-size: 18px;
    }

    .review__nav {
        position: static;
        margin-top: 20px;
    }

    .review__foot {
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
    }

    .faq__q {
        font-size: 16px;
    }

    .faq__row {
        padding: 18px 20px;
    }

    .page-cs .lead__inner {
        grid-template-columns: 1fr;
    }
}

.t-eyebrow {
    font: 500 11px / 1.40 'Onest', sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hero .wrap {
    max-width: calc(var(--content) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}


.hero .btn--accent {
    background-color: var(--action-accent);
    color: var(--text-inverse);
}

.hero .btn--accent:hover {
    background-color: var(--accent-hover);
    box-shadow: unset;
}

.hero .btn--primary {
    background-color: var(--action-primary);
    color: var(--text-inverse);
}

.hero .btn--primary:hover {
    background-color: var(--action-hover);
    box-shadow: unset;
}

.hero .btn-primary {
    background-color: unset;
    background: var(--action-primary);
}

.price-configurator__top a, .feedback-fl a, .drop-box__bot a, .sale-text a {
    color: #E93E7C;
}

.hero h2 {
    color: #fff;
}

.anchors {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg-page);
    border-bottom: 1px solid var(--border-default);
    padding-block: 12px;
}

.anchors__bar {
    display: flex;
    align-items: center;
    gap: 32px;
    height: 56px;
    padding-inline: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
}

.anchors__bar a {
    color: var(--text-muted);
    white-space: nowrap;
}

.anchors__bar a:hover {
    color: var(--brand-blue);
}

.anchors__bar a.is-active {
    color: var(--text-strong);
}

section[id] {
    scroll-margin-top: 96px;
}

@media (max-width: 900px) {
    .anchors {
        padding-block: 8px;
    }

    .anchors__bar {
        gap: 20px;
        height: 48px;
        padding-inline: 16px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .anchors__bar::-webkit-scrollbar {
        display: none;
    }

    section[id] {
        scroll-margin-top: 72px;
    }
}
/* End */


/* Start:/local/components/nologostudio/calculator/calculator.css?178757877017344*/
.price-configurator {
    margin: 86px 0 65px;
    position: relative;
}

.price-configurator__top {
    position: relative;
    margin: 0 -85px 44px;
    padding: 0 85px;
}

.price-configurator__top--full {
    max-width: none;
}

.price-configurator__top:before {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    padding-top: 22.106%;
    background-size: contain;
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-52%);
    z-index: -1;
}

.price-configurator__top:first-child:before {
    background: url("/local/components/nologostudio/calculator/images/clouds.svg") no-repeat center;
    background-size: contain;
}

.price-configurator__descr {
    max-width: 825px;
}

.price-configurator__form-left,
.price-configurator__form-right {
    display: inline-block;
    vertical-align: top;
}

.price-configurator__form-right {
    width: 28.65%;
}

.price-configurator__form-left {
    width: 71.35%;
    padding-right: 2.7%;
}

.price-configurator__form-title {
    margin-bottom: 39px;
}

.price-configurator__total {
    background: #FFFFFF;
    border: 1px solid #CEDCF2;
    border-radius: 5px;
    padding: 30px 30px 53px;
}

.price-configurator__total-title {
    margin-bottom: 20px;
    color: rgb(15, 27, 70);
    font-weight: bold;
}

.price-configurator__total-title span {
    color: #6E7F99;
    font-size: 12px;
    font-weight: normal;
    opacity: 0.8;
}

.price-configurator__total-prices {
    margin-bottom: 49px;
}

.price-configurator__total-price {
    border-bottom: 1px solid #F2F6FC;
    margin-bottom: 15px;
    padding-bottom: 7px;
    font-weight: 600;
}

.price-configurator__total-price dd {
    display: inline;
    margin: 0;
    font-size: 16px;
}

.price-configurator__total-price dd span:before {
    display: inline;
    content: ",";
}

.price-configurator__total-price dd span:after {
    display: inline;
}

.price-configurator__total-price dt {
    display: inline;
    color: #6E7F99;
    opacity: 0.8;
    font-weight: 400;
}

.price-configurator__total-sale {
    position: relative;
    margin-bottom: 15px;
}

.price-configurator__calculator-title > .tooltip,
.price-configurator__total-sale span {
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 19px;
    font-weight: bold;
    font-size: 12px;
    line-height: 18px;
    color: #FFFFFF;
    background: #CEDCF2;
    border-radius: 100px;
    text-align: center;
    cursor: pointer;
    margin-left: 15px;
    opacity: 1;
}

.price-configurator__total-btn {
    padding: 14px 10px 13px;
    width: 100%;
}

/* Calculator */
.price-configurator__calculator {
    background: #FFFFFF;
    border: 1px solid #CEDCF2;
    border-radius: 5px;
    padding: 36px 28px 0 43px;
}

.price-configurator__calculator-col {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    padding: 0 25px;
    margin-bottom: 25px;
}

.price-configurator__calculator-col.two-col {
    width: 100%;
}

.price-configurator__calculator-title {
    font-size: 14px;
    line-height: 24px;
    font-weight: 600;
    margin-bottom: 12px;
    display: block;
    margin-top: 35px;
}
.iopsBlock {
    margin: 0;
    padding: 0;
    position: absolute;
    right: 25px;
    top: 36px;
}
.iopsBlock .tooltip {
    position: relative !important;
}
.price-configurator__calculator-title:first-child {
    margin-top: 0;
}
.disk-type .price-configurator__calculator-title {
    margin-bottom: 3px;
}
.range-holder {
    margin-bottom: 10px;
    margin-left: 25px;
    width: 100%;
}
.range-holder--2 {
    margin-bottom: 61px;
}
.range-holder--3 {
    margin-bottom: 63px;
}
.range {
    background: #F2F6FC;
    border-radius: 2px;
    height: 4px;
    margin-top: 45px;
}
.price-configurator__check .check-holder,
.range {
    display: inline-block;
    vertical-align: top;
    position: relative;
    width: calc(100% - 125px);
}
.range-scale {
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
    font-size: 12px;
    line-height: 18px;
    color: #99A6BB;
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
}

.range-scale > * {
    position: absolute;
    transform: translate3d(-50%, 0, 0);
}
.partner-banner {
    position: absolute;
    height: 300px;
    width: 400px;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    display: block;
    z-index: 2;
}
.price-configurator__input {
    display: inline-block;
    vertical-align: top;
    width: 100px;
    margin: 29px 0 0 20px;
    position: relative;
}

.input-plus, .input-minus, .input-plus-new, .input-minus-new {
    width: 16px;
    height: 14px;
    background: #CEDCF2;
    border-radius: 2px;
    color: #ffffff;
    position: absolute;
    top: 3px;
    right: 3px;
    line-height: 0.8;
    text-align: center;
    font-weight: 600;
}
.input-plus-new, .input-minus-new {
    right: 23px;
}
.bottom-input-big {
    width: 20px;
    height: 20px;
    line-height: 1.3;
    right: 4px;
}
.input-plus:hover, .input-minus:hover, .input-plus-new:hover, .input-minus-new:hover {
    background-color: #BFCCE0;
}

.input-minus, .input-minus-new {
    top: auto;
    bottom: 3px;
}

.input-title {
    position: absolute;
    right: 0;
    bottom: 80px;
}

.price-configurator__input .input {
    padding: 3px 20px 3px 10px;
    width: 80px;
}

.price-configurator__input .count-input-big {
    width: 90px;
    padding: 10px 20px 10px 10px;
}

.price-configurator__input.select-input {
    bottom: 29px;
}

.custom-vue-select {
    position: relative;
    display: inline-block;
    width: 100%;
    height: fit-content;
    -webkit-appearance: none;
    border: 1px solid #CEDCF2;
    box-sizing: border-box;
    border-radius: 4px;
    font-family: 'IBM Plex Sans', 'Arial', sans-serif;
    font-size: 16px;
    line-height: 28px;
    padding: 10px 15px;
    max-width: 100%;
    background: #ffffff;
    cursor: pointer;
}

.custom-vue-select-small {
    position: absolute;
    width: 30px;
    font-weight: normal;
    top: -15px;
    left: 143px;
}

.vue-item-selected {
    color: #567EE5;
    border-bottom: 1px dashed #ADC4FF;
    margin-right: 10px;
    height: 30px;
    overflow: hidden;
}

.vue-item-selected-small {
    cursor: pointer;
    color: #567EE5;
    margin-right: 10px;
    height: 10px;
    line-height: 0.8;
    border-bottom: 0;
    overflow: unset;
}

.vue-item-selected::after, .vue-item-selected-small::after {
    content: '';
    display: block;
    width: 10px;
    height: 6px;
    background: url("/local/templates/2019/images/arr-down-blue.svg") no-repeat center;
    background-size: contain;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-40%);
    transition: all .3s;
}

.opened.vue-item-selected::after, .opened.vue-item-selected-small::after {
    transform: rotate(-180deg);
}

.custom-vue-select .vue-select-items {
    position: absolute;
    border: 1px solid #ccc;
    width: 100%;
    z-index: 2;
    display: none;
    background-color: #ffffff;
    padding: 0;
    list-style: none;
    margin: 0;
    left: 0;
    min-width: 400px;
    top: 110%;
    max-height: 350px;
    overflow: auto;
}

.custom-vue-select .vue-select-items div {
    padding: 10px;
    cursor: pointer;
}

.custom-vue-select .vue-select-items div:hover {
    background-color: #ddd;
}

.custom-vue-select .vue-select-items div:has(> span span.group-title) {
    padding-left: 5px;
    cursor: default;
    font-weight: bold;
}

.custom-vue-select .vue-select-items div:has(> span span.group-title):hover {
    background-color: transparent;
}

.custom-vue-select .vue-select-items .option-content {
    display: flex;
    justify-content: space-between;
}

.custom-vue-select .vue-select-items .option-content.selected {
    background-color: #ddd;
}

.option-content span:has(> span) {
    padding-right: 80px;
}

.left_val_option {
    position: absolute;
    right: 30px;
}

.dop-select .vue-select-items {
    min-width: 30%;
}

.select-holder {
    position: relative;
}

.select-holder > span {
    display: block;
    font-size: 12px;
    line-height: 18px;
    color: #99A6BB;
    margin-bottom: 10px;
}

.select-holder:after {
    content: '';
    display: block;
    width: 12px;
    height: 10px;
    background: url("/local/components/nologostudio/calculator/images/arr-down-blue.svg") no-repeat center;
    background-size: contain;
    position: relative;
    bottom: 27px;
    left: calc(100% - 25px);
}

.price-configurator__form-bot {
    max-width: 610px;
    margin-top: 20px;
    font-size: 12px;
    line-height: 18px;
    color: #99A6BB;
}

.price-configurator__form-bot:first-child {
    margin-top: 0;
}

.price-configurator__dop {
    margin: 40px 0 0;
}

.price-configurator__dop-title {
    display: inline-block;
    vertical-align: top;
    padding-right: 25px;
    position: relative;
    cursor: pointer;
    border-bottom: 1px dashed #CEDCF2;
}

.price-configurator__dop-title:last-child {
    margin-bottom: 0;
}

.price-configurator__dop-title:after {
    content: '';
    display: block;
    width: 12px;
    height: 10px;
    background: url("/local/components/nologostudio/calculator/images/arr-down-blue.svg") no-repeat center;
    background-size: contain;
    position: absolute;
    top: 10px;
    right: 0;
    transition: all .3s;
}

.opened .price-configurator__dop-title:after {
    transform: rotate(-180deg);
}

.price-configurator__check {
    margin-bottom: 28px;
}

.price-configurator__check .check + span {
    font-weight: 600;
    font-size: 14px;
}

.price-configurator__check .check + span > span {
    display: block;
    font-size: 12px;
    line-height: 18px;
    color: #99A6BB;
    font-weight: 400;
}

.price-configurator__calculator-cs {
    margin: 0 -25px;
    display: flex;
    align-items: flex-end;
}

.price-configurator__calculator-c {
    padding: 0 25px;
    width: 100%;
    position: relative;
}

.price-configurator__calculator-col.two-col .price-configurator__calculator-c {
    max-width: 50%;
}

.price-configurator__dop-drop .price-configurator__input,
.price-configurator__check .price-configurator__input {
    margin-top: 0;
}

.price-configurator__dop-drop {
    display: none;
}

.price-configurator__dop-drop img {
    display: unset;
    width: 100%;
    margin-bottom: 40px;
}

.price-configurator__ul-title {
    font-weight: 600;
}

.price-configurator__ul {
    list-style: none;
    padding: 0;
}

.price-configurator__ul li {
    position: relative;
    padding-left: 14px;
}

.price-configurator__ul li:before {
    content: '';
    display: block;
    width: 7px;
    height: 2px;
    background-color: #0F1B46;
    position: absolute;
    left: 0;
    top: 13px;
}

@media (max-width: 1700px) {
    .partner-banner {
        left: 42%;
    }
}

@media (max-width: 1550px) {
    .partner-banner {
        display: none;
    }
}

@media (max-width: 1500px) {
    .price-configurator__form-left,
    .price-configurator__form-right {
        display: block;
        width: 100%;
        padding: 0;
        margin-top: 20px;
    }

    .partner-banner {
        display: none;
    }
}

@media (max-width: 1024px) {
    .price-configurator__dop {
        margin: 40px 0 10px;
    }

    .price-configurator__top {
        position: relative;
        margin: 0 -50px 80px;
        padding: 0 50px;
    }

    .prices-big .price-configurator__form-left {
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .select-box-component {
        flex-direction: column;
    }

    .select-box-component .select-input {
        margin-top: 10px;
    }

    .select-box-component .dop-select {
        margin-top: 10px;
    }

    .select-box-component .dop-select .vue-select-items {
        min-width: 30%;
    }

    .custom-vue-select .vue-select-items {
        min-width: 300px;
    }

    .price-configurator__total-price {
        text-align: left;
    }

    .price-configurator__top--cloud-server {
        display: none;
    }

    .price-configurator {
        margin: 30px 0 40px;
    }

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

    .price-configurator__calculator {
        padding: 18px 15px 0 15px;
    }

    .disk-type .select-holder > span,
    .range,
    .price-configurator__calculator-title span:not(.tooltip) {
        display: none;
    }

    .price-configurator__calculator-title .custom-vue-select span {
        display: block;
    }

    .range-holder {
        margin-bottom: 0;
    }

    .iopsBlock {
        top: 0;
    }

    .iopsBlock .jsIopsValue {
        display: inline !important;
    }

    .price-configurator__input {
        margin: 0 40px;
        width: 100px;
        position: relative;
    }

    .input-plus, .input-minus, .input-plus-new, .input-minus-new {
        width: 35px;
        height: 35px;
        top: 0;
        bottom: auto;
        right: -40px;
        font-size: 39px;
        line-height: 0.8;
    }

    .radio-bottom__list {
        flex-direction: column;
        padding-left: 50px;
    }

    .input-minus, .input-minus-new {
        right: auto;
        left: -40px;
    }

    .input-title {
        position: relative;
        bottom: 0;
    }

    .price-configurator__input.select-input {
        bottom: 0;
    }
    .select-holder:after {
        bottom: 12px;
    }

    .price-configurator__dop {
        margin: 20px 0;
    }

    .price-configurator__dop-drop .price-configurator__calculator-col {
        width: 100%;
        padding: 0;
    }

    .price-configurator__check .check-holder {
        margin-bottom: 10px;
        width: 100%;
    }

    .price-configurator__dop-drop .price-configurator__input,
    .price-configurator__check .price-configurator__input {
        margin: 0 40px 0 70px;
        max-width: 65px;
    }

    .price-configurator__input {
        width: 65px;
    }

    .price-configurator__input .input {
        padding: 3px 10px;
    }

    .price-configurator__total {
        padding: 15px 20px;
    }

    .price-configurator__total .price-configurator__form-bot {
        display: block;
        margin: 15px 0 0;
        padding-right: 30px;
    }

    .price-configurator__total-prices {
        display: flex;
        justify-content: space-around;
        margin-bottom: 0;
    }

    .price-configurator__total-prices {
        margin-bottom: 0;
    }

    .prices-big .price-configurator__input{
        max-width: 65px;
    }

    .price-configurator__total-title {
        margin-bottom: 10px;
    }
}

@media (max-width: 580px) {
    .price-configurator__top h2,
    .main-advantages__title,
    h2, .title-h2 {
        font-size: 20px;
        line-height: 30px;
    }

    .price-configurator__form-title {
        margin-bottom: 24px;
    }

    .price-configurator__calculator {
        padding: 15px 15px 0;
    }

    .price-configurator__calculator-title {
        margin-bottom: 7px;
    }

    .price-configurator__input .input {
        padding: 3px 10px;
    }

    .disk-type .price-configurator__calculator-title {
        margin-bottom: 7px;
    }

    .range-holder--3 {
        margin-bottom: 0;
    }

    .input-plus, .input-minus, .input-plus-new, .input-minus-new {
        font-weight: 600;
    }

    .price-configurator__dop .price-configurator__calculator-col:last-child,
    .price-configurator__check .check-holder {
        width: 100%;
    }

    .price-configurator__check {
        margin-bottom: 30px;
    }

    .price-configurator__dop {
        margin: 20px 0 0;
    }

    .price-configurator__total {
        padding: 14px 17px 20px 20px;
    }

    .price-configurator__total-prices {
        justify-content: flex-start;
        border-bottom: 1px solid #F2F6FC;
        margin-bottom: 13px;
    }

    .price-configurator__total-price {
        font-size: 16px;
        margin: 0 42px 0 0;
        border-bottom: 0;
        padding-bottom: 13px;
    }

    .price-configurator__total-sale {
        font-size: 16px;
    }

    .prices-big .price-configurator__calculator-col {
        width: 100%;
        padding: 0;
    }

    .prices-big .range-holder {
        margin-bottom: 40px;
    }

    .price-configurator__input .input{
        text-align: center;
        width: 60px;
    }

    .price-configurator__dop-title{
        display: block;
        width: 100%;
        border-bottom: 0;
    }

    .price-configurator__check .check + span{
        line-height: 24px;
    }
}

@media (max-width: 560px) {
    .calc-area .sliders-list {
        margin: 0 -10px;
    }

    .calc-area .sliders-list li {
        padding: 0 10px;
    }

    .price-configurator__calculator-cs {
        margin: 0 -10px;
    }

    .price-configurator__calculator-c {
        padding: 0 10px;
    }

    .iopsBlock {
        display: none;
    }

    .price-configurator__calculator-col,
    .price-configurator__calculator-col:nth-child(2n + 2) {
        width: 100%;
        padding: 0 10px;
        margin-bottom: 35px;
    }
}

@media (max-width: 380px) {
    .price-configurator__total-price {
        margin: 0 0 0 0;
    }

    .price-configurator__total-price:last-child {
        margin-right: 0;
    }
}
.price-configurator__top.price-configurator__top--gpu + .prices {
    margin-bottom: 15px;
}
.price-configurator__top.price-configurator__top--antispam + .prices {
    margin-bottom: 15px;
}
.price-configurator__total .price-configurator__form-bot {
    display: none;
}

/* End */


/* Start:/local/templates/2019/components/nologostudio/calculator/cloud-server/style.css?179058417633592*/
.price-configurator {
    margin: 86px 0 65px;
    position: relative;
}

.price-configurator__top {
    position: relative;
    margin: 0 -85px 44px;
    padding: 0 85px;
}

.price-configurator__top--full {
    max-width: none;
}

.price-configurator__top:before {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    padding-top: 22.106%;
    background-size: contain;
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-52%);
    z-index: -1;
}

.price-configurator__top:first-child:before {
    background: url("/local/templates/2019/components/nologostudio/calculator/cloud-server/images/clouds.svg") no-repeat center;
    background-size: contain;
}

.price-configurator__descr {
    max-width: 825px;
}

.price-configurator__form-left,
.price-configurator__form-right {
    display: inline-block;
    vertical-align: top;
}

.price-configurator__form-right {
    width: 28.65%;
}

.price-configurator__form-left {
    width: 71.35%;
    padding-right: 2.7%;
}

.price-configurator__form-title {
    margin-bottom: 39px;
}

.price-configurator__total {
    background: #FFFFFF;
    border: 1px solid #CEDCF2;
    border-radius: 5px;
    padding: 30px 30px 53px;
}

.price-configurator__total-title {
    margin-bottom: 20px;
    color: rgb(15, 27, 70);
    font-weight: bold;
}

.price-configurator__total-title span {
    color: #6E7F99;
    font-size: 12px;
    font-weight: normal;
    opacity: 0.8;
}

.price-configurator__total-prices {
    margin-bottom: 49px;
}

.price-configurator__total-price {
    border-bottom: 1px solid #F2F6FC;
    margin-bottom: 15px;
    padding-bottom: 7px;
    font-weight: 600;
}

.price-configurator__total-price dd {
    display: inline;
    margin: 0;
    font-size: 16px;
}

.price-configurator__total-price dd span:before {
    display: inline;
    content: ",";
}

.price-configurator__total-price dd span:after {
    display: inline;
}

.price-configurator__total-price dt {
    display: inline;
    color: #6E7F99;
    opacity: 0.8;
    font-weight: 400;
}

.price-configurator__total-sale {
    position: relative;
    margin-bottom: 15px;
}

.price-configurator__calculator-title > .tooltip,
.price-configurator__total-sale span {
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 19px;
    font-weight: bold;
    font-size: 12px;
    line-height: 18px;
    color: #FFFFFF;
    background: #CEDCF2;
    border-radius: 100px;
    text-align: center;
    cursor: pointer;
    margin-left: 15px;
    opacity: 1;
}

.price-configurator__total-btn {
    padding: 14px 10px 13px;
    width: 100%;
}

/* Calculator */
.price-configurator__calculator {
    background: #FFFFFF;
    border: 1px solid #CEDCF2;
    border-radius: 5px;
    padding: 36px 28px 0 43px;
}

.price-configurator__calculator-col {
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 10px);
    padding: 0 25px;
    margin-bottom: 25px;
}

.price-configurator__calculator-col.two-col {
    width: 100%;
}

.price-configurator__calculator-title {
    font-size: 14px;
    line-height: 24px;
    font-weight: 600;
    margin-bottom: 12px;
    display: block;
    margin-top: 35px;
}

.iopsBlock {
    margin: 0;
    padding: 0;
    position: absolute;
    right: 25px;
    top: 36px;
}

.iopsBlock .tooltip {
    position: relative !important;
}

.price-configurator__calculator-title:first-child {
    margin-top: 0;
}

.disk-type .price-configurator__calculator-title {
    margin-bottom: 3px;
}

.range-holder {
    margin-bottom: 10px;
    margin-left: 25px;
    width: 100%;
}

.range-holder--2 {
    margin-bottom: 61px;
}

.range-holder--3 {
    margin-bottom: 63px;
}

.range {
    background: #F2F6FC;
    border-radius: 2px;
    height: 4px;
    margin-top: 45px;
}

.price-configurator__check .check-holder,
.range {
    display: inline-block;
    vertical-align: top;
    position: relative;
    width: calc(100% - 125px);
}

.range-scale {
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
    font-size: 12px;
    line-height: 18px;
    color: #99A6BB;
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
}

.range-scale > * {
    position: absolute;
    transform: translate3d(-50%, 0, 0);
}

.partner-banner {
    position: absolute;
    height: 300px;
    width: 400px;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    display: block;
    z-index: 2;
}

.price-configurator__input {
    display: inline-block;
    vertical-align: top;
    width: 100px;
    margin: 29px 0 0 20px;
    position: relative;
}

.input-plus, .input-minus, .input-plus-new, .input-minus-new {
    width: 16px;
    height: 14px;
    background: #CEDCF2;
    border-radius: 2px;
    color: #ffffff;
    position: absolute;
    top: 3px;
    right: 3px;
    line-height: 0.8;
    text-align: center;
    font-weight: 600;
}

.input-plus-new, .input-minus-new {
    right: 23px;
}

.bottom-input-big {
    width: 20px;
    height: 20px;
    line-height: 1.3;
    right: 4px;
}

.input-plus:hover, .input-minus:hover, .input-plus-new:hover, .input-minus-new:hover {
    background-color: #BFCCE0;
}

.input-minus, .input-minus-new {
    top: auto;
    bottom: 3px;
}

.input-title {
    position: absolute;
    right: 0;
    bottom: 80px;
}

.price-configurator__input .input {
    padding: 3px 20px 3px 10px;
    width: 80px;
}

.price-configurator__input .count-input-big {
    width: 90px;
    padding: 10px 20px 10px 10px;
}

.price-configurator__input.select-input {
    bottom: 29px;
}

.custom-vue-select {
    position: relative;
    display: inline-block;
    width: 100%;
    height: fit-content;
    -webkit-appearance: none;
    border: 1px solid #CEDCF2;
    box-sizing: border-box;
    border-radius: 4px;
    font-family: 'IBM Plex Sans', 'Arial', sans-serif;
    font-size: 16px;
    line-height: 28px;
    padding: 10px 15px;
    max-width: 100%;
    background: #ffffff;
    cursor: pointer;
}

.custom-vue-select-small {
    position: relative;
    width: 30px;
    font-weight: normal;
    left: -30px;
}

.vue-item-selected {
    color: #567EE5;
    border-bottom: 1px dashed #ADC4FF;
    margin-right: 10px;
    height: 30px;
    overflow: hidden;
}

.vue-item-selected-small {
    cursor: pointer;
    color: #567EE5;
    margin-right: 10px;
    height: 10px;
    line-height: 0.8;
    border-bottom: 0;
    overflow: unset;
}

.vue-item-selected::after, .vue-item-selected-small::after {
    content: '';
    display: block;
    width: 10px;
    height: 6px;
    background: url("/local/templates/2019/images/arr-down-blue.svg") no-repeat center;
    background-size: contain;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-40%);
    transition: all .3s;
}

.opened.vue-item-selected::after, .opened.vue-item-selected-small::after {
    transform: rotate(-180deg);
}

.custom-vue-select .vue-select-items {
    position: absolute;
    border: 1px solid #ccc;
    width: 100%;
    z-index: 2;
    display: none;
    background-color: #ffffff;
    padding: 0;
    list-style: none;
    margin: 0;
    left: 0;
    min-width: 400px;
    top: 110%;
    max-height: 350px;
    overflow: auto;
}

.custom-vue-select .vue-select-items div {
    padding: 10px;
    cursor: pointer;
}

.custom-vue-select .vue-select-items div:hover {
    background-color: #ddd;
}

.custom-vue-select .vue-select-items div:has(> span span.group-title) {
    padding-left: 5px;
    cursor: default;
    font-weight: bold;
}

.custom-vue-select .vue-select-items div:has(> span span.group-title):hover {
    background-color: transparent;
}

.custom-vue-select .vue-select-items .option-content {
    display: flex;
    justify-content: space-between;
}

.custom-vue-select .vue-select-items .option-content.selected {
    background-color: #ddd;
}

.option-content span:has(> span) {
    padding-right: 80px;
}

.left_val_option {
    position: absolute;
    right: 30px;
}

.dop-select .vue-select-items {
    min-width: 30%;
}

.select-holder {
    position: relative;
}

.select-holder > span {
    display: block;
    font-size: 12px;
    line-height: 18px;
    color: #99A6BB;
    margin-bottom: 10px;
}

.select-holder:after {
    content: '';
    display: block;
    width: 12px;
    height: 10px;
    background: url("/local/templates/2019/components/nologostudio/calculator/cloud-server/images/arr-down-blue.svg") no-repeat center;
    background-size: contain;
    position: relative;
    bottom: 27px;
    left: calc(100% - 25px);
}

.price-configurator__form-bot {
    max-width: 610px;
    margin-top: 20px;
    font-size: 12px;
    line-height: 18px;
    color: #99A6BB;
}

.price-configurator__form-bot:first-child {
    margin-top: 0;
}

.price-configurator__dop {
    margin: 40px 0 0;
}

.price-configurator__dop-title {
    display: inline-block;
    vertical-align: top;
    padding-right: 25px;
    position: relative;
    cursor: pointer;
    border-bottom: 1px dashed #CEDCF2;
}

.price-configurator__dop-title:last-child {
    margin-bottom: 0;
}

.price-configurator__dop-title:after {
    content: '';
    display: block;
    width: 12px;
    height: 10px;
    background: url("/local/templates/2019/components/nologostudio/calculator/cloud-server/images/arr-down-blue.svg") no-repeat center;
    background-size: contain;
    position: absolute;
    top: 10px;
    right: 0;
    transition: all .3s;
}

.opened .price-configurator__dop-title:after {
    transform: rotate(-180deg);
}

.price-configurator__check {
    margin-bottom: 28px;
}

.price-configurator__check .check + span {
    font-weight: 600;
    font-size: 14px;
}

.price-configurator__check .check + span > span {
    display: block;
    font-size: 12px;
    line-height: 18px;
    color: #99A6BB;
    font-weight: 400;
}

.price-configurator__calculator-cs {
    margin: 0 -25px;
    display: flex;
    align-items: flex-end;
}

.price-configurator__calculator-c {
    padding: 0 25px;
    width: 100%;
    position: relative;
}

.price-configurator__calculator-col.two-col .price-configurator__calculator-c {
    max-width: 50%;
}

.price-configurator__dop-drop .price-configurator__input,
.price-configurator__check .price-configurator__input {
    margin-top: 0;
}

.price-configurator__dop-drop {
    display: none;
}

.price-configurator__dop-drop img {
    display: unset;
    width: 100%;
    margin-bottom: 40px;
}

.price-configurator__ul-title {
    font-weight: 600;
}

.price-configurator__ul {
    list-style: none;
    padding: 0;
}

.price-configurator__ul li {
    position: relative;
    padding-left: 14px;
}

.price-configurator__ul li:before {
    content: '';
    display: block;
    width: 7px;
    height: 2px;
    background-color: #0F1B46;
    position: absolute;
    left: 0;
    top: 13px;
}

@media (max-width: 1700px) {
    .partner-banner {
        left: 42%;
    }
}

@media (max-width: 1550px) {
    .partner-banner {
        display: none;
    }
}

@media (max-width: 1500px) {
    .price-configurator__form-left,
    .price-configurator__form-right {
        display: block;
        width: 100%;
        padding: 0;
        margin-top: 20px;
    }

    .partner-banner {
        display: none;
    }
}

@media (max-width: 1024px) {
    .price-configurator__dop {
        margin: 40px 0 10px;
    }

    .price-configurator__top {
        position: relative;
        margin: 0 -50px 80px;
        padding: 0 50px;
    }

    .prices-big .price-configurator__form-left {
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .select-box-component {
        flex-direction: column;
    }

    .select-box-component .select-input {
        margin-top: 10px;
    }

    .select-box-component .dop-select {
        margin-top: 10px;
    }

    .select-box-component .dop-select .vue-select-items {
        min-width: 30%;
    }

    .custom-vue-select .vue-select-items {
        min-width: 300px;
    }

    .price-configurator__total-price {
        text-align: left;
    }

    .price-configurator__top--cloud-server {
        display: none;
    }

    .price-configurator {
        margin: 30px 0 40px;
    }

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

    .price-configurator__calculator {
        padding: 18px 15px 0 15px;
    }

    .disk-type .select-holder > span,
    .range,
    .price-configurator__calculator-title span:not(.tooltip) {
        display: none;
    }

    .price-configurator__calculator-title .custom-vue-select span {
        display: block;
    }

    .range-holder {
        margin-bottom: 0;
    }

    .iopsBlock {
        top: 0;
    }

    .iopsBlock .jsIopsValue {
        display: inline !important;
    }

    .price-configurator__input {
        margin: 0 40px;
        width: 100px;
        position: relative;
    }

    .input-plus, .input-minus, .input-plus-new, .input-minus-new {
        width: 35px;
        height: 35px;
        top: 0;
        bottom: auto;
        right: -40px;
        font-size: 39px;
        line-height: 0.8;
    }

    .radio-bottom__list {
        flex-direction: column;
        padding-left: 50px;
    }

    .input-minus, .input-minus-new {
        right: auto;
        left: -40px;
    }

    .input-title {
        position: relative;
        bottom: 0;
    }

    .price-configurator__input.select-input {
        bottom: 0;
    }

    .select-holder:after {
        bottom: 12px;
    }

    .price-configurator__dop {
        margin: 20px 0;
    }

    .price-configurator__dop-drop .price-configurator__calculator-col {
        width: 100%;
        padding: 0;
    }

    .price-configurator__check .check-holder {
        margin-bottom: 10px;
        width: 100%;
    }

    .price-configurator__dop-drop .price-configurator__input,
    .price-configurator__check .price-configurator__input {
        margin: 0 40px 0 70px;
        max-width: 65px;
    }

    .price-configurator__input {
        width: 65px;
    }

    .price-configurator__input .input {
        padding: 3px 10px;
    }

    .price-configurator__total {
        padding: 15px 20px;
    }

    .price-configurator__total .price-configurator__form-bot {
        display: block;
        margin: 15px 0 0;
        padding-right: 30px;
    }

    .price-configurator__total-prices {
        display: flex;
        justify-content: space-around;
        margin-bottom: 0;
    }

    .price-configurator__total-prices {
        margin-bottom: 0;
    }

    .prices-big .price-configurator__input {
        max-width: 65px;
    }

    .price-configurator__total-title {
        margin-bottom: 10px;
    }
}

@media (max-width: 580px) {
    .price-configurator__top h2,
    .main-advantages__title,
    h2, .title-h2 {
        font-size: 20px;
        line-height: 30px;
    }

    .price-configurator__form-title {
        margin-bottom: 24px;
    }

    .price-configurator__calculator {
        padding: 15px 15px 0;
    }

    .price-configurator__calculator-title {
        margin-bottom: 7px;
    }

    .price-configurator__input .input {
        padding: 3px 10px;
    }

    .disk-type .price-configurator__calculator-title {
        margin-bottom: 7px;
    }

    .range-holder--3 {
        margin-bottom: 0;
    }

    .input-plus, .input-minus, .input-plus-new, .input-minus-new {
        font-weight: 600;
    }

    .price-configurator__dop .price-configurator__calculator-col:last-child,
    .price-configurator__check .check-holder {
        width: 100%;
    }

    .price-configurator__check {
        margin-bottom: 30px;
    }

    .price-configurator__dop {
        margin: 20px 0 0;
    }

    .price-configurator__total {
        padding: 14px 17px 20px 20px;
    }

    .price-configurator__total-prices {
        justify-content: flex-start;
        border-bottom: 1px solid #F2F6FC;
        margin-bottom: 13px;
    }

    .price-configurator__total-price {
        font-size: 16px;
        margin: 0 42px 0 0;
        border-bottom: 0;
        padding-bottom: 13px;
    }

    .price-configurator__total-sale {
        font-size: 16px;
    }

    .prices-big .price-configurator__calculator-col {
        width: 100%;
        padding: 0;
    }

    .prices-big .range-holder {
        margin-bottom: 40px;
    }

    .price-configurator__input .input {
        text-align: center;
        width: 60px;
    }

    .price-configurator__dop-title {
        display: block;
        width: 100%;
        border-bottom: 0;
    }

    .price-configurator__check .check + span {
        line-height: 24px;
    }
}

@media (max-width: 560px) {
    .calc-area .sliders-list {
        margin: 0 -10px;
    }

    .calc-area .sliders-list li {
        padding: 0 10px;
    }

    .price-configurator__calculator-cs {
        margin: 0 -10px;
    }

    .price-configurator__calculator-c {
        padding: 0 10px;
    }

    .iopsBlock {
        display: none;
    }

    .price-configurator__calculator-col,
    .price-configurator__calculator-col:nth-child(2n + 2) {
        width: 100%;
        padding: 0 10px;
        margin-bottom: 35px;
    }
}

@media (max-width: 380px) {
    .price-configurator__total-price {
        margin: 0 0 0 0;
    }

    .price-configurator__total-price:last-child {
        margin-right: 0;
    }
}

.price-configurator__top.price-configurator__top--gpu + .prices {
    margin-bottom: 15px;
}

.price-configurator__top.price-configurator__top--antispam + .prices {
    margin-bottom: 15px;
}

.price-configurator__total .price-configurator__form-bot {
    display: none;
}

/* ═══════════ Калькулятор cloud-server v8 (из макета) ═══════════ */

.calc {
    background: var(--bg-page, #fafafb);
    border-block: 1px solid var(--border-default, #e6e8ee);
    padding-block: 88px 96px;
}

.calc__title {
    margin: 12px 0 48px;
    color: var(--text-strong, #161921);
    font: 400 52px/1.12 'Onest', sans-serif;
    letter-spacing: -.02em;
}

.calc__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 32px;
    align-items: start;
}

.calc__steps {
    display: grid;
    gap: 16px;
}

/* ── step-card ── */
.step-card {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-default, #e6e8ee);
    border-radius: 14px;
    padding: 32px;
    box-shadow: 0 1px 2px rgba(22, 25, 33, .06);
}

.step-card__head {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 24px;
}

.step-card__num {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand-blue, #4e7dbf);
    color: var(--text-inverse, #fff);
    font: 600 15px/1 'Onest', sans-serif;
}

.step-card__title {
    margin: 0;
    font: 600 17px/1.3 'Onest', sans-serif;
    color: var(--text-primary, #242833);
}

.step-card__sub {
    margin: 4px 0 0;
    font: 400 13px/1.45 'Onest', sans-serif;
    color: var(--text-muted, #606878);
}

/* убрать старую обёртку .price-configurator__calculator внутри step-card */
.step-card .price-configurator__calculator {
    background: none;
    border: 0;
    padding: 0;
}

/* ── шаг 1: переключатель типа конфигурации ── */
.calc-type {
    display: flex;
    gap: 2px;
    background: var(--bg-slot, #eef2fb);
    padding: 4px;
    border-radius: 12px;
    margin: 0 !important;
}

.calc-type .tab_item {
    width: auto;
    flex: 1;
    margin: 0;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.2;
}

.calc-type .tab_item a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 9px;
    color: var(--text-muted, #606878);
    background: transparent;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.calc-type .tab_item a:hover {
    background: transparent;
    color: var(--text-strong, #161921);
}

.calc-type .tab_item.active a {
    background: #fff;
    color: var(--text-strong, #161921);
    box-shadow: 0 1px 2px rgba(20, 25, 33, .06);
}

/* ── шаг 2: параметры ── */
.calc-param {
    margin-bottom: 28px;
}

.calc-param__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.calc-param__label {
    font: 500 15px/1.4 'Onest', sans-serif;
    color: var(--text-strong, #161921);
}

.calc-param .price-configurator__calculator-title {
    display: none;
}

/* тип диска / сотрудников — segmented control */
.calc-disk-type {
    margin-bottom: 28px;
}

.calc-disk-type .custom-vue-select {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--border-default, #e6e8ee);
    border-radius: 10px;
    padding: 0;
    height: auto;
    font-size: 14px;
    line-height: 1.2;
    background: #fff;
}

.calc-disk-type .vue-item-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 43px;
    padding: 0 18px;
    color: var(--text-strong, #161921);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 0;
}

.calc-disk-type .vue-item-selected::after {
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
}

.calc-disk-type .opened.vue-item-selected::after {
    transform: translateY(-50%) rotate(-180deg);
}

.calc-disk-type .vue-select-items {
    min-width: 100%;
    border-radius: 10px;
    border: 1px solid var(--border-default, #e6e8ee);
    box-shadow: 0 12px 32px rgba(22, 25, 33, .10);
}

.calc-disk-type .vue-select-items .option-content {
    padding: 12px 18px;
    font-size: 14px;
}

/* слайдер */
.calc-param .range-holder {
    margin: 14px 0 0;
    width: 100%;
}

.calc-param .slider-cell.range {
    display: block;
    width: calc(100% - 25px);
    margin-left: 10px;
    margin-right: 10px;
}

.calc-param .range {
    height: 6px;
    border-radius: 99px;
    background: var(--bg-slot, #eef2fb);
    margin-top: 34px;
    width: 100%;
}

.calc-param .ui-slider-range {
    height: 6px;
    border-radius: 99px;
    background: var(--brand-blue, #4e7dbf);
    position: relative;
    bottom: 5px;
}

.calc-param .ui-slider-handle {
    margin-top: -8px;
    min-width: 0;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    border: 5px solid var(--brand-blue, #4e7dbf);
    font-size: 0;
    z-index: 1;
}

.calc-param .ui-slider-handle:after {
    display: none;
}

.calc-param .ui-slider-handle:before {
    display: none;
}

.calc-param .range-scale {
    top: 16px;
    font-size: 11px;
    color: var(--text-muted, #606878);
}

/* контрол значения − / значение / + */
.calc-param .price-configurator__input {
    display: inline-flex;
    align-items: stretch;
    width: auto;
    margin: 38px 0 0;
    border: 1px solid var(--border-default, #e6e8ee);
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
}

.calc-param .price-configurator__input .input {
    width: 100px;
    min-width: 72px;
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-left: 1px solid var(--border-default, #e6e8ee);
    border-right: 1px solid var(--border-default, #e6e8ee);
    font: 500 14px/1 'Onest', sans-serif;
    color: var(--text-strong, #161921);
    text-align: center;
}

.calc-param .input-plus-new,
.calc-param .input-minus-new {
    position: static;
    width: 34px;
    height: 36px;
    background: transparent;
    border-radius: 0;
    color: var(--text-muted, #606878);
    font-size: 18px;
    line-height: 36px;
    display: grid;
    place-items: center;
}

.calc-param .input-plus-new:hover,
.calc-param .input-minus-new:hover {
    background: var(--bg-slot, #eef2fb);
    color: var(--brand-blue, #4e7dbf);
}

/* подсказка про канал */
.calc-hint {
    max-width: 610px;
    margin-top: 20px;
    font-size: 12px;
    line-height: 18px;
    color: #99A6BB;
}

.calc-hint .price-configurator__form-bot {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    max-width: none;
    margin-top: 0;
    padding: 14px 16px;
    background: var(--bg-accent-soft, #f1f5fb);
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #333947;
}

/* ── шаг 3: ОС ── */
.calc-os {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0;
}

.calc-os .tab_item {
    width: auto;
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    text-align: left;
}

.calc-os .tab_item a {
    display: block;
    padding: 18px 22px;
    border: 1px solid var(--border-default, #e6e8ee);
    border-radius: 12px;
    color: var(--text-strong, #161921);
    background: #fff;
    font-weight: 500;
    font-size: 17px;
}

.calc-os .tab_item a:hover {
    border-color: var(--brand-blue, #4e7dbf);
}

.calc-os .tab_item.active a {
    border-color: var(--brand-blue, #4e7dbf);
    box-shadow: 0 0 0 1px var(--brand-blue, #4e7dbf);
    background: #fff;
    color: var(--text-strong, #161921);
}

/* ── шаг 4: доп. услуги ── */
.calc-addons .sliders-list {
    border: 1px solid var(--border-default, #e6e8ee);
    border-radius: 12px;
    overflow: hidden;
}

.calc-addons .add_service.checkbox-row {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 18px 24px;
    margin-bottom: 0;
    background: #fff;
}

.calc-addons .add_service.checkbox-row + .checkbox-row {
    border-top: 1px solid var(--border-default, #e6e8ee);
}

.calc-addons .check-holder {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: auto;
    flex: 1;
}

.calc-addons .check + span {
    width: auto;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-strong, #161921);
    line-height: 1.4;
}

.calc-addons .check + span > span {
    font-size: 13.5px;
    color: var(--text-muted, #606878);
    margin-top: 2px;
}

.calc-addons .price-configurator__input {
    display: inline-flex;
    align-items: stretch;
    width: auto;
    margin: 0;
    border: 1px solid var(--border-default, #e6e8ee);
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
    flex: none;
}

.calc-addons .price-configurator__input .input {
    width: 56px;
    min-width: 56px;
    height: 36px;
    padding: 0 10px;
    border: 0;
    border-left: 1px solid var(--border-default, #e6e8ee);
    border-right: 1px solid var(--border-default, #e6e8ee);
    font: 500 14px/1 'Onest', sans-serif;
    text-align: center;
}

.calc-addons .input-plus-new,
.calc-addons .input-minus-new {
    position: static;
    width: 34px;
    height: 36px;
    background: transparent;
    border-radius: 0;
    color: var(--text-muted, #606878);
    font-size: 18px;
    line-height: 36px;
    display: grid;
    place-items: center;
}

.calc-addons .input-plus-new:hover,
.calc-addons .input-minus-new:hover {
    background: var(--bg-slot, #eef2fb);
    color: var(--brand-blue, #4e7dbf);
}

/* ── тёмная сводка ── */
.summary {
    position: sticky;
    top: 108px;
    overflow: hidden;
    border-radius: 16px;
    color: var(--text-on-dark, #fff);
    background: linear-gradient(155deg, #34588f 0%, #223f6e 58%, #172e54 100%);
}

.summary__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(30px);
    pointer-events: none;
}

.summary__glow--top {
    width: 360px;
    height: 360px;
    top: -120px;
    left: 140px;
    background: radial-gradient(circle, rgba(78, 125, 191, .55), rgba(78, 125, 191, 0) 70%);
}

.summary__glow--bottom {
    width: 260px;
    height: 260px;
    bottom: -110px;
    left: -90px;
    background: radial-gradient(circle, rgba(78, 125, 191, .32), rgba(78, 125, 191, 0) 70%);
}

.summary__body {
    position: relative;
    padding: 28px;
}

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

.summary__chip {
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    font: 500 10px/1.3 'Onest', sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.summary__chip--live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .22);
    color: rgba(255, 255, 255, .8);
}

.summary__chip--live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7fe3a4;
}

.summary__label {
    margin: 18px 0 10px;
    font: 500 11px/1.4 'Onest', sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}

.summary__rows {
    margin: 0;
}

.summary__rows > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 5px 0;
}

.summary__rows > div + div {
    border-top: 1px solid rgba(255, 255, 255, .10);
}

.summary__rows dt {
    font: 400 13px/1.5 'Onest', sans-serif;
    color: rgba(255, 255, 255, .78);
}

.summary__rows dd {
    margin: 0;
    font: 500 13px/1.5 'Onest', sans-serif;
    text-align: right;
}

/* итог внутри сводки (TesPriceConfigurator) */
.summary-total {
    background: transparent;
    border: 0;
    padding: 0;
    margin-top: 24px;
}

.summary__total {
    margin: 0;
    font: 300 48px/1 'Onest', sans-serif;
    letter-spacing: -.02em;
    color: #fff;
}

.summary__total span {
    font-size: 26px;
    color: rgba(255, 255, 255, .85);
    margin-left: 4px;
}

.summary__rate {
    margin: 10px 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, .6);
}

.summary-sale {
    padding: 14px 0 0 !important;
    margin-top: 14px;
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .92);
}

.summary-sale .star.color-red {
    color: #ff8fb0;
}

.summary__checks {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.summary__checks li {
    position: relative;
    padding-left: 22px;
    font: 400 13px/1.4 'Onest', sans-serif;
    color: rgba(255, 255, 255, .92);
}

.summary__checks li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #7fe3a4;
    font-weight: 500;
}

/* кнопки */
.summary-total .btn-list {
    margin-top: 18px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.summary__btn {
    width: 100%;
    height: 50px;
    border-radius: 11px;
    font: 500 15px/1.2 'Onest', sans-serif;
    background: var(--brand-magenta, #cd1e75);
    color: #fff;
    border: 0;
    cursor: pointer;
    transition: background .15s;
    text-transform: none;
    box-shadow: none;
}

.summary__btn:hover {
    background: #b41a66;
}

.summary__btn--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    box-shadow: none;
}

.summary__btn--ghost:hover {
    background: rgba(255, 255, 255, .08);
}

.summary__note {
    margin: 18px 0 0;
    font: 400 11px/1.45 'Onest', sans-serif;
    color: rgba(255, 255, 255, .55);
    text-align: center;
}

/* ═══════════ мобильная раскладка ═══════════ */
@media (max-width: 1100px) {
    .calc__layout {
        grid-template-columns: 1fr;
    }

    .summary {
        position: relative;
        top: auto;
    }
}

@media (max-width: 900px) {
    .calc {
        padding-block: 48px;
    }

    .calc__title {
        font-size: 32px;
        margin-bottom: 28px;
    }

    .step-card {
        padding: 22px;
    }

    .calc-os {
        grid-template-columns: 1fr;
    }

    .calc-param .price-configurator__input .input {
        width: 60px;
        min-width: 60px;
    }

    .summary__total {
        font-size: 40px;
    }
}

.calc .row {
    margin-right: 0px;
    margin-left: 0px;
}

.step-card--flat {
    padding: 28px 36px;
    box-shadow: none;
}

.disk__tiles {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-top: 8px;
    padding: 0;
    list-style: none;
}

.disk-tile {
    display: grid;
    align-content: center;
    gap: 3px;
    height: 64px;
    padding: 0 12px;
    border: 1px solid var(--border-default, #e6e8ee);
    border-radius: 10px;
    background: var(--bg-card, #fff);
    font: 500 14px/1.2 'Onest', sans-serif;
    color: var(--text-primary, #242833);
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}

.disk-tile i {
    font: 400 12px/1.3 'Onest', sans-serif;
    font-style: normal;
    color: var(--text-muted, #606878);
    white-space: nowrap;
}

.disk-tile:hover {
    border-color: var(--brand-blue, #4e7dbf);
}

.disk-tile.is-active {
    background: var(--brand-blue, #4e7dbf);
    border-color: var(--brand-blue, #4e7dbf);
    color: var(--text-inverse, #fff);
}

.disk-tile.is-active i {
    color: rgba(255, 255, 255, .86);
}

@media (max-width: 768px) {
    .disk__tiles {
        grid-template-columns: repeat(2, 1fr);
    }
}

.summary .summary__btn {
    width: 100%;
    margin-top: 18px;
    height: 44px;
    text-transform: initial;
}

.summary .btn--primary {
    background: var(--action-primary);
    color: var(--text-inverse);
    box-shadow: revert;
}

.summary .btn--primary:hover {
    background: var(--action-hover);
    box-shadow: revert;
}

.summary .summary__btn--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .34);
    color: var(--text-inverse);
    font: 500 13px / 1.2 'Onest', sans-serif;
    margin-top: 0px;
}

.calc__layout .select-box-component {
    padding-bottom: 15px;
    z-index: 11;
}

#cloud4u_calc_area .price-configurator__input {
    float: right;
    position: absolute;
}
/* End */
/* /local/templates/2019/components/bitrix/news/cloud-hosting/bitrix/news.detail/products_new/style.css?179033838940514 */
/* /local/components/nologostudio/calculator/calculator.css?178757877017344 */
/* /local/templates/2019/components/nologostudio/calculator/cloud-server/style.css?179058417633592 */