/* ============================================================
   МАСЛА.САЙТ — Библиотека блоков для Gutenberg / WordPress
   Один файл — подключается в тему (functions.php: wp_enqueue_style)
   и в редактор (add_editor_style / enqueue_block_editor_assets).

   Все классы в пространстве имён .ms-* — не конфликтуют с темой.
   Внутри: токены бренда + компоненты. Больше ничего подключать
   не нужно (шрифты тянутся из Google Fonts).
   ============================================================ */


:root {
  /* Палитра бренда */
  --masla-cyan:        #2A9BC4;
  --masla-cyan-700:    #1F7FA3;
  --masla-cyan-300:    #82C4DF;
  --masla-cyan-100:    #DDF0F7;
  --masla-bronze:      #BE9F63;
  --masla-bronze-700:  #9E8348;
  --masla-bronze-300:  #DCC79A;
  --masla-bronze-100:  #F2EADA;
  --masla-ink:         #13161D;
  --masla-navy:        #29333D;
  --masla-navy-500:    #4A5663;
  --masla-navy-300:    #8A95A2;
  --masla-navy-100:    #DDE2E8;

  --neutral-0:   #FFFFFF;
  --neutral-50:  #F6F8FA;
  --neutral-100: #EEF1F4;
  --neutral-200: #E2E6EB;
  --neutral-300: #C7CDD5;
  --neutral-400: #98A1AD;
  --neutral-500: #6C7682;
  --neutral-700: #3D454F;
  --neutral-900: #1B2128;

  --success:    #2E7D5B; --success-bg: #E5F2EB;
  --warning:    #C77A1A; --warning-bg: #FBEFD9;
  --danger:     #B8362C; --danger-bg:  #F8E2DF;

  --bg-soft:   var(--neutral-50);
  --fg-primary:   var(--masla-navy);
  --fg-secondary: var(--masla-navy-500);
  --fg-muted:     var(--neutral-500);
  --border-default: var(--neutral-200);

  --font-display: 'Onest','PT Sans',system-ui,-apple-system,sans-serif;
  --font-body:    'Onest','PT Sans','Segoe UI',Arial,sans-serif;
  --font-mono:    'JetBrains Mono','SF Mono',Consolas,monospace;

  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px;
  --radius-lg: 16px; --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(19,22,29,.04), 0 1px 3px rgba(19,22,29,.03);
  --shadow-2: 0 4px 12px rgba(19,22,29,.06), 0 1px 3px rgba(19,22,29,.04);
  --shadow-3: 0 12px 32px rgba(19,22,29,.10), 0 2px 6px rgba(19,22,29,.05);
  --shadow-focus: 0 0 0 3px rgba(42,155,196,.35);

  --ease-out: cubic-bezier(.2,.7,.3,1);
  --ms-maxw: 1240px;
}

/* ============================================================
   SECTION SHELL — внешняя обёртка любого блока
   ============================================================ */
.ms-section{
  font-family: var(--font-body); color: var(--fg-primary);
  padding: 64px 24px; box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}
.ms-section *{ box-sizing: border-box; }
.ms-section--soft{ background: var(--bg-soft); }
.ms-section--dark{ background: var(--masla-ink); color: #fff; }
.ms-section--tight{ padding-block: 40px; }
.ms-container{ max-width: var(--ms-maxw); margin-inline: auto; }
.ms-container--narrow{ max-width: 880px; }

/* ============================================================
   ТИПОГРАФИКА — заголовки, eyebrow, текст
   ============================================================ */
.ms-eyebrow{
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--masla-bronze-700); margin: 0 0 12px;
}
.ms-eyebrow--cyan{ color: var(--masla-cyan-700); }
.ms-section--dark .ms-eyebrow{ color: var(--masla-cyan-300); }

.ms-display{ font-family: var(--font-display); font-weight: 800; font-size: 48px;
  line-height: 1.05; letter-spacing: -.02em; margin: 0 0 16px; }
.ms-h1{ font-family: var(--font-display); font-weight: 700; font-size: 34px;
  line-height: 1.16; letter-spacing: -.015em; margin: 0 0 16px; }
.ms-h2{ font-family: var(--font-display); font-weight: 700; font-size: 26px;
  line-height: 1.2; margin: 0 0 14px; }
.ms-h3{ font-family: var(--font-display); font-weight: 700; font-size: 19px;
  line-height: 1.3; margin: 0 0 10px; }

.ms-lead{ font-size: 18px; line-height: 1.55; color: var(--fg-secondary);
  max-width: 720px; margin: 0 0 16px; }
.ms-section--dark .ms-lead{ color: rgba(255,255,255,.78); }

.ms-text{ font-size: 15px; line-height: 1.65; color: var(--fg-primary); max-width: 720px; }
.ms-text p{ margin: 0 0 14px; }
.ms-text > :last-child{ margin-bottom: 0; }
.ms-text a{ color: var(--masla-cyan); text-decoration: none; }
.ms-text a:hover{ color: var(--masla-cyan-700); text-decoration: underline; }
.ms-text strong{ font-weight: 700; }
.ms-text ul, .ms-text ol{ margin: 0 0 14px; padding: 0; list-style: none; }
.ms-text ul li, .ms-text ol li{ position: relative; padding-left: 26px; margin-bottom: 9px; line-height: 1.55; }
.ms-text ul li::before{ content: ""; position: absolute; left: 4px; top: 9px;
  width: 7px; height: 7px; border-radius: 2px; background: var(--masla-cyan);
  transform: rotate(45deg); }
.ms-text ol{ counter-reset: ms; }
.ms-text ol li{ counter-increment: ms; }
.ms-text ol li::before{ content: counter(ms); position: absolute; left: 0; top: 1px;
  font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--masla-cyan-700); }
.ms-section--dark .ms-text{ color: rgba(255,255,255,.85); }

/* выровнять группу заголовка по центру */
.ms-head--center{ text-align: center; max-width: 760px; margin-inline: auto; }
.ms-head--center .ms-lead{ margin-inline: auto; }

/* ============================================================
   КНОПКИ
   ============================================================ */
.ms-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  line-height: 1; padding: 13px 22px; border-radius: var(--radius-xs);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background var(--ease-out) .15s, border-color var(--ease-out) .15s, color var(--ease-out) .15s;
}
.ms-btn svg{ width: 18px; height: 18px; }
.ms-btn--cyan{ background: var(--masla-cyan); color: #fff; }
.ms-btn--cyan:hover{ background: var(--masla-cyan-700); color: #fff; }
.ms-btn--ink{ background: var(--masla-ink); color: #fff; }
.ms-btn--ink:hover{ background: #000; color: #fff; }
.ms-btn--bronze{ background: var(--masla-bronze); color: #fff; }
.ms-btn--bronze:hover{ background: var(--masla-bronze-700); color: #fff; }
.ms-btn--ghost{ background: #fff; color: var(--masla-navy); border-color: var(--border-default); }
.ms-btn--ghost:hover{ border-color: var(--masla-navy); color: var(--masla-navy); }
.ms-btn--link{ background: transparent; color: var(--masla-cyan); padding-inline: 0; }
.ms-btn--link:hover{ color: var(--masla-cyan-700); }
.ms-btn--lg{ font-size: 16px; padding: 16px 28px; }
.ms-btn--sm{ font-size: 13px; padding: 9px 16px; }
.ms-btn--pill{ border-radius: var(--radius-pill); }
.ms-btn--block{ display: flex; width: 100%; }
.ms-btn:focus-visible{ outline: none; box-shadow: var(--shadow-focus); }
.ms-section--dark .ms-btn--ghost{ background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.ms-section--dark .ms-btn--ghost:hover{ border-color: #fff; }

.ms-btn-group{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ============================================================
   CALL TO ACTION / ПРОМО-БЛОКИ
   ============================================================ */
.ms-cta{
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  background: var(--bg-soft); border-radius: var(--radius-md); padding: 32px 36px;
}
.ms-cta__title{ font-family: var(--font-display); font-weight: 700; font-size: 22px;
  line-height: 1.2; margin: 0 0 8px; color: var(--masla-navy); }
.ms-cta__text{ margin: 0; font-size: 15px; line-height: 1.55; color: var(--fg-muted); max-width: 620px; }
.ms-cta__actions{ display: flex; gap: 12px; flex-wrap: wrap; }
.ms-cta--bronze{ background: linear-gradient(120deg,#F6EEDD,#EBD9B6); }
.ms-cta--bronze .ms-cta__text{ color: var(--masla-navy-500); }
.ms-cta--dark{ background: var(--masla-ink); }
.ms-cta--dark .ms-cta__title{ color: #fff; }
.ms-cta--dark .ms-cta__text{ color: rgba(255,255,255,.72); }
.ms-cta--center{ grid-template-columns: 1fr; justify-items: center; text-align: center; }
.ms-cta--center .ms-cta__actions{ justify-content: center; }

/* промо-сетка 3-up */
.ms-promos{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }
.ms-promo{ background: var(--bg-soft); border-radius: var(--radius-md); padding: 26px;
  display: flex; flex-direction: column; min-height: 180px; }
.ms-promo__eyebrow{ font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--masla-bronze-700); margin: 0 0 8px; }
.ms-promo__title{ font-family: var(--font-display); font-weight: 700; font-size: 19px;
  line-height: 1.22; margin: 0 0 8px; color: var(--masla-navy); }
.ms-promo__text{ margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg-muted); }
.ms-promo__actions{ margin-top: auto; padding-top: 16px; display: flex; gap: 10px; }
.ms-promo--cyan{ background: var(--masla-cyan-100); }
.ms-promo--dark{ background: var(--masla-ink); }
.ms-promo--dark .ms-promo__title{ color: #fff; }
.ms-promo--dark .ms-promo__text{ color: rgba(255,255,255,.7); }
.ms-promo--dark .ms-promo__eyebrow{ color: var(--masla-cyan-300); }

/* ============================================================
   ICON BOX / ПРЕИМУЩЕСТВА
   ============================================================ */
.ms-features{ display: grid; gap: 16px; grid-template-columns: repeat(3,1fr); }
.ms-features--4{ grid-template-columns: repeat(4,1fr); }
.ms-features--2{ grid-template-columns: repeat(2,1fr); }
.ms-feature{ background: #fff; border-radius: var(--radius-md); padding: 26px;
  box-shadow: var(--shadow-2); }
.ms-feature--plain{ background: transparent; box-shadow: none; padding: 6px 0; }
.ms-feature--bordered{ background: #fff; box-shadow: none; border: 1px solid var(--border-default); }
.ms-feature__icon{ width: 52px; height: 52px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
  background: var(--masla-cyan-100); color: var(--masla-cyan); }
.ms-feature__icon svg{ width: 26px; height: 26px; }
.ms-feature__icon--bronze{ background: var(--masla-bronze-100); color: var(--masla-bronze-700); }
.ms-feature__icon--ink{ background: var(--masla-navy-100); color: var(--masla-navy); }
.ms-feature__title{ font-family: var(--font-display); font-weight: 700; font-size: 17px;
  line-height: 1.3; margin: 0 0 8px; color: var(--masla-navy); }
.ms-feature__text{ margin: 0; font-size: 14px; line-height: 1.55; color: var(--fg-muted); }
.ms-section--dark .ms-feature{ background: rgba(255,255,255,.04); box-shadow: none; }
.ms-section--dark .ms-feature__title{ color: #fff; }
.ms-section--dark .ms-feature__text{ color: rgba(255,255,255,.65); }

/* инлайн-вариант: иконка слева */
.ms-feature--row{ display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.ms-feature--row .ms-feature__icon{ margin-bottom: 0; }

/* ============================================================
   ТАБЫ (чистый CSS, radio — до 4 вкладок)
   ============================================================ */
.ms-tabs{ position: relative; }
.ms-tabs > input{ position: absolute; opacity: 0; pointer-events: none; }
.ms-tabs__nav{ display: flex; gap: 28px; border-bottom: 1px solid var(--border-default);
  margin-bottom: 24px; flex-wrap: wrap; }
.ms-tabs__nav label{ padding: 12px 0; font-family: var(--font-display); font-size: 15px;
  font-weight: 600; color: var(--fg-muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s; }
.ms-tabs__nav label:hover{ color: var(--masla-navy); }
.ms-tabs__panel{ display: none; animation: ms-fade .18s var(--ease-out); }
@keyframes ms-fade{ from{ opacity: 0; transform: translateY(4px);} to{ opacity: 1; transform: none;} }
.ms-tabs > input:nth-of-type(1):checked ~ .ms-tabs__body > .ms-tabs__panel:nth-of-type(1),
.ms-tabs > input:nth-of-type(2):checked ~ .ms-tabs__body > .ms-tabs__panel:nth-of-type(2),
.ms-tabs > input:nth-of-type(3):checked ~ .ms-tabs__body > .ms-tabs__panel:nth-of-type(3),
.ms-tabs > input:nth-of-type(4):checked ~ .ms-tabs__body > .ms-tabs__panel:nth-of-type(4){ display: block; }
.ms-tabs > input:nth-of-type(1):checked ~ .ms-tabs__nav label:nth-of-type(1),
.ms-tabs > input:nth-of-type(2):checked ~ .ms-tabs__nav label:nth-of-type(2),
.ms-tabs > input:nth-of-type(3):checked ~ .ms-tabs__nav label:nth-of-type(3),
.ms-tabs > input:nth-of-type(4):checked ~ .ms-tabs__nav label:nth-of-type(4){
  color: var(--masla-cyan); border-color: var(--masla-cyan); }

/* ============================================================
   ТАРИФЫ / ТАБЛИЦА ЦЕН (карты смазок)
   ============================================================ */
.ms-pricing{ display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; align-items: start; }
.ms-plan{ background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-2);
  padding: 28px; display: flex; flex-direction: column; }
.ms-plan--featured{ box-shadow: var(--shadow-3); border: 2px solid var(--masla-cyan); position: relative; }
.ms-plan__badge{ position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--masla-cyan); color: #fff; font-family: var(--font-display);
  font-weight: 700; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 14px; border-radius: var(--radius-pill); white-space: nowrap; }
.ms-plan__name{ font-family: var(--font-display); font-weight: 700; font-size: 18px;
  color: var(--masla-navy); margin: 0 0 4px; }
.ms-plan__sub{ font-size: 13px; color: var(--fg-muted); margin: 0 0 18px; }
.ms-plan__price{ font-family: var(--font-display); font-weight: 800; font-size: 36px;
  color: var(--masla-navy); line-height: 1; margin: 0; }
.ms-plan__price .ms-plan__per{ font-size: 14px; font-weight: 500; color: var(--fg-muted); }
.ms-plan__price-note{ font-size: 12px; color: var(--fg-muted); margin: 8px 0 0; }
.ms-plan__list{ list-style: none; margin: 22px 0; padding: 22px 0 0; border-top: 1px solid var(--border-default);
  display: flex; flex-direction: column; gap: 12px; }
.ms-plan__list li{ position: relative; padding-left: 28px; font-size: 14px; line-height: 1.4; color: var(--masla-navy); }
.ms-plan__list li::before{ content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px;
  border-radius: var(--radius-pill); background: var(--success-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232E7D5B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; }
.ms-plan__list li.is-off{ color: var(--neutral-400); }
.ms-plan__list li.is-off::before{ background: var(--neutral-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2398A1AD' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.ms-plan__cta{ margin-top: auto; }

/* ============================================================
   СЧЁТЧИКИ / ЦИФРЫ
   ============================================================ */
.ms-stats{ display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.ms-stats--3{ grid-template-columns: repeat(3,1fr); }
.ms-stat{ text-align: center; padding: 12px; }
.ms-stat__num{ font-family: var(--font-display); font-weight: 800; font-size: 46px;
  line-height: 1; color: var(--masla-cyan); letter-spacing: -.02em; }
.ms-stat__num .ms-unit{ font-size: 24px; color: var(--masla-bronze-700); margin-left: 2px; }
.ms-stat__label{ margin: 10px 0 0; font-size: 14px; line-height: 1.4; color: var(--fg-secondary); }
.ms-stat--divided{ border-left: 1px solid var(--border-default); }
.ms-stat--divided:first-child{ border-left: 0; }
.ms-section--dark .ms-stat__num{ color: var(--masla-cyan-300); }
.ms-section--dark .ms-stat__label{ color: rgba(255,255,255,.7); }
.ms-section--dark .ms-stat--divided{ border-color: rgba(255,255,255,.12); }

/* ============================================================
   ОТЗЫВЫ / TESTIMONIALS
   ============================================================ */
.ms-quotes{ display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.ms-quotes--2{ grid-template-columns: repeat(2,1fr); }
.ms-quote{ background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-2);
  padding: 28px; display: flex; flex-direction: column; }
.ms-quote__mark{ font-family: Georgia, serif; font-size: 56px; line-height: .6; color: var(--masla-cyan-300);
  height: 28px; margin-bottom: 6px; }
.ms-quote__text{ font-size: 15px; line-height: 1.6; color: var(--masla-navy); margin: 0 0 22px; }
.ms-quote__author{ display: flex; align-items: center; gap: 14px; margin-top: auto; }
.ms-quote__avatar{ width: 46px; height: 46px; border-radius: var(--radius-pill); flex: 0 0 auto;
  background: var(--masla-navy-100); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--masla-navy); }
.ms-quote__name{ font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--masla-navy); }
.ms-quote__role{ font-size: 13px; color: var(--fg-muted); margin-top: 2px; }
.ms-section--dark .ms-quote{ background: rgba(255,255,255,.04); box-shadow: none; }
.ms-section--dark .ms-quote__text{ color: rgba(255,255,255,.88); }
.ms-section--dark .ms-quote__name{ color: #fff; }

/* ============================================================
   АККОРДЕОН / FAQ (details/summary — без JS)
   ============================================================ */
.ms-faq{ max-width: 860px; }
.ms-faq__item{ border-bottom: 1px solid var(--border-default); }
.ms-faq__item summary{ list-style: none; cursor: pointer; padding: 20px 44px 20px 0;
  position: relative; font-family: var(--font-display); font-weight: 600; font-size: 17px;
  color: var(--masla-navy); line-height: 1.4; }
.ms-faq__item summary::-webkit-details-marker{ display: none; }
.ms-faq__item summary::after{ content: ""; position: absolute; right: 6px; top: 22px;
  width: 18px; height: 18px; background-repeat: no-repeat; background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232A9BC4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  transition: transform .2s var(--ease-out); }
.ms-faq__item[open] summary::after{ transform: rotate(180deg); }
.ms-faq__item summary:hover{ color: var(--masla-cyan-700); }
.ms-faq__answer{ padding: 0 44px 22px 0; font-size: 15px; line-height: 1.65; color: var(--fg-secondary); }
.ms-faq__answer > :last-child{ margin-bottom: 0; }

/* ============================================================
   ШАГИ ПРОЦЕССА
   ============================================================ */
.ms-steps{ display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.ms-steps--3{ grid-template-columns: repeat(3,1fr); }
.ms-step{ position: relative; padding: 4px 8px 4px 0; }
.ms-step__num{ width: 44px; height: 44px; border-radius: var(--radius-pill);
  background: var(--masla-cyan); color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 18px; margin-bottom: 16px; }
.ms-step__title{ font-family: var(--font-display); font-weight: 700; font-size: 17px;
  color: var(--masla-navy); margin: 0 0 8px; line-height: 1.3; }
.ms-step__text{ margin: 0; font-size: 14px; line-height: 1.55; color: var(--fg-muted); }
/* соединительная линия */
.ms-step::before{ content: ""; position: absolute; top: 22px; left: 56px; right: -16px; height: 2px;
  background: var(--masla-navy-100); z-index: 0; }
.ms-steps .ms-step:last-child::before{ display: none; }
.ms-step__num{ position: relative; z-index: 1; }
.ms-step--bronze .ms-step__num{ background: var(--masla-bronze); }
.ms-section--dark .ms-step__title{ color: #fff; }
.ms-section--dark .ms-step__text{ color: rgba(255,255,255,.65); }
.ms-section--dark .ms-step::before{ background: rgba(255,255,255,.14); }

/* ============================================================
   ТАБЛИЦЫ (характеристики / прайс)
   ============================================================ */
.ms-table-wrap{ overflow-x: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-1); }
.ms-table{ width: 100%; border-collapse: collapse; background: #fff; font-size: 14px; min-width: 520px; }
.ms-table caption{ text-align: left; font-family: var(--font-display); font-weight: 700;
  font-size: 17px; color: var(--masla-navy); padding: 0 0 14px; caption-side: top; }
.ms-table thead th{ background: var(--masla-navy); color: #fff; font-family: var(--font-display);
  font-weight: 600; text-align: left; padding: 14px 18px; font-size: 13px; letter-spacing: .01em; }
.ms-table thead th:first-child{ border-top-left-radius: 0; }
.ms-table tbody td{ padding: 13px 18px; border-bottom: 1px solid var(--border-default); color: var(--masla-navy); }
.ms-table tbody tr:nth-child(even){ background: var(--neutral-50); }
.ms-table tbody tr:last-child td{ border-bottom: 0; }
.ms-table tbody td:first-child{ font-weight: 600; }
.ms-table .ms-num{ font-family: var(--font-mono); text-align: right; white-space: nowrap; }
.ms-table .ms-price{ font-family: var(--font-display); font-weight: 700; color: var(--masla-navy); }

/* статус-пилюли для таблиц/контента */
.ms-badge{ display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display);
  font-weight: 600; font-size: 12px; padding: 4px 11px; border-radius: var(--radius-pill); }
.ms-badge--instock{ background: var(--success-bg); color: var(--success); }
.ms-badge--order{ background: var(--warning-bg); color: var(--warning); }
.ms-badge--out{ background: var(--danger-bg); color: var(--danger); }
.ms-badge--new{ background: var(--masla-cyan-100); color: var(--masla-cyan-700); }

/* ============================================================
   КАРТОЧКИ НОВОСТЕЙ / СТАТЕЙ
   ============================================================ */
.ms-news{ display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.ms-news--3{ grid-template-columns: repeat(3,1fr); }
.ms-news__card{ background: #fff; border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-2); display: flex; flex-direction: column; text-decoration: none; color: inherit;
  transition: box-shadow .18s var(--ease-out); }
.ms-news__card:hover{ box-shadow: var(--shadow-3); }
.ms-news__thumb{ aspect-ratio: 16/10; position: relative; background: var(--neutral-100);
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ms-news__thumb img{ width: 100%; height: 100%; object-fit: cover; }
.ms-news__thumb .ms-imgph-ic{ width: 32px; height: 32px; color: var(--neutral-400); }
.ms-news__date{ position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,.94);
  color: var(--masla-navy); border-radius: 6px; padding: 6px 9px; text-align: center;
  font-family: var(--font-display); font-weight: 700; line-height: 1.05; box-shadow: var(--shadow-1); }
.ms-news__date b{ font-size: 20px; display: block; }
.ms-news__date span{ font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-muted); }
.ms-news__body{ padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.ms-news__cat{ font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--masla-bronze-700); margin: 0 0 8px; }
.ms-news__title{ font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.35;
  color: var(--masla-navy); margin: 0 0 12px; }
.ms-news__more{ margin-top: auto; font-size: 13px; font-weight: 600; color: var(--masla-cyan);
  display: inline-flex; align-items: center; gap: 6px; }
.ms-news__card:hover .ms-news__more{ color: var(--masla-cyan-700); }

/* ============================================================
   СЕТКА ЛОГОТИПОВ ПОСТАВЩИКОВ
   ============================================================ */
.ms-logos{ display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
.ms-logos--6{ grid-template-columns: repeat(6,1fr); }
.ms-logo{ background: var(--neutral-50); border-radius: var(--radius-sm); height: 76px;
  display: flex; align-items: center; justify-content: center; padding: 12px;
  filter: grayscale(1); opacity: .85; transition: filter .18s, opacity .18s; }
.ms-logo:hover{ filter: grayscale(0); opacity: 1; }
.ms-logo img{ max-width: 100%; max-height: 100%; object-fit: contain; }
.ms-logo__text{ font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: .04em; color: #8a8f95; }

/* ============================================================
   HERO-БАННЕР (тёмный, полноширинный)
   ============================================================ */
.ms-hero{ background: var(--masla-ink);
  background-image: radial-gradient(ellipse at 75% 20%, rgba(42,155,196,.18), transparent 55%),
                    linear-gradient(180deg,#1f2530,#0d1116);
  color: #fff; padding: 72px 24px; }
.ms-hero__inner{ max-width: var(--ms-maxw); margin-inline: auto;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.ms-hero__eyebrow{ font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--masla-cyan-300); margin: 0 0 16px; }
.ms-hero__title{ font-family: var(--font-display); font-weight: 800; font-size: 46px; line-height: 1.05;
  letter-spacing: -.02em; margin: 0 0 18px; }
.ms-hero__title .ms-hl{ color: var(--masla-cyan-300); }
.ms-hero__text{ font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.74); max-width: 480px; margin: 0 0 28px; }
.ms-hero__actions{ display: flex; gap: 12px; flex-wrap: wrap; }
.ms-hero__visual{ min-height: 300px; }
.ms-hero--center{ text-align: center; }
.ms-hero--center .ms-hero__inner{ grid-template-columns: 1fr; max-width: 760px; }
.ms-hero--center .ms-hero__text{ margin-inline: auto; }
.ms-hero--center .ms-hero__actions{ justify-content: center; }

/* ============================================================
   ФИНАЛЬНЫЙ CTA-БЛОК (тёмная полоса)
   ============================================================ */
.ms-closing{ background: var(--masla-ink);
  background-image: radial-gradient(ellipse at 20% 50%, rgba(42,155,196,.2), transparent 60%),
                    linear-gradient(135deg,#0d1c2c,#13161D 70%);
  color: #fff; padding: 56px 24px; }
.ms-closing__inner{ max-width: var(--ms-maxw); margin-inline: auto;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.ms-closing__title{ font-family: var(--font-display); font-weight: 800; font-size: 30px;
  line-height: 1.12; margin: 0 0 14px; }
.ms-closing__text{ margin: 0 0 20px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.78); max-width: 480px; }
.ms-closing__list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ms-closing__list li{ position: relative; padding-left: 22px; font-size: 15px; color: rgba(255,255,255,.92); }
.ms-closing__list li::before{ content: "▸"; position: absolute; left: 0; color: var(--masla-cyan); }
.ms-closing__actions{ display: flex; flex-direction: column; gap: 12px; }
.ms-closing__actions .ms-btn{ width: 100%; }

/* ============================================================
   РАЗДЕЛИТЕЛИ И ОТСТУПЫ
   ============================================================ */
.ms-divider{ border: 0; height: 1px; background: var(--border-default); margin: 0; }
.ms-divider--strong{ background: var(--masla-navy-100); }
.ms-divider--bronze{ height: 3px; width: 56px; background: var(--masla-bronze); border-radius: 2px; }
.ms-divider--label{ display: flex; align-items: center; gap: 18px; color: var(--fg-muted);
  font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; background: none; height: auto; }
.ms-divider--label::before, .ms-divider--label::after{ content: ""; flex: 1; height: 1px; background: var(--border-default); }
.ms-spacer{ height: 32px; }
.ms-spacer--sm{ height: 16px; }
.ms-spacer--lg{ height: 56px; }
.ms-spacer--xl{ height: 88px; }

/* ============================================================
   ПЛЕЙСХОЛДЕР ИЗОБРАЖЕНИЯ
   ============================================================ */
.ms-imgph{ position: relative; width: 100%; aspect-ratio: 4/3; border-radius: var(--radius-md);
  background: repeating-linear-gradient(45deg,#eef1f4,#eef1f4 12px,#e7ebf0 12px,#e7ebf0 24px);
  border: 2px dashed var(--neutral-300); display: flex; align-items: center; justify-content: center;
  color: var(--neutral-500); font-family: var(--font-display); font-weight: 600; font-size: 13px;
  text-align: center; padding: 16px; }
.ms-imgph svg{ width: 22px; height: 22px; margin-right: 8px; opacity: .7; }
.ms-imgph--square{ aspect-ratio: 1/1; }
.ms-imgph--wide{ aspect-ratio: 16/9; }
.ms-imgph--tall{ aspect-ratio: 3/4; }
.ms-section--dark .ms-imgph{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.55); }

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 1024px){
  .ms-features, .ms-features--4, .ms-stats, .ms-news, .ms-news--4{ grid-template-columns: repeat(2,1fr); }
  .ms-pricing, .ms-quotes, .ms-steps, .ms-promos{ grid-template-columns: 1fr; }
  .ms-hero__inner, .ms-closing__inner{ grid-template-columns: 1fr; gap: 32px; }
  .ms-step::before{ display: none; }
  .ms-cta{ grid-template-columns: 1fr; }
}
@media (max-width: 600px){
  .ms-section{ padding: 40px 18px; }
  .ms-display{ font-size: 34px; } .ms-hero__title{ font-size: 32px; }
  .ms-features, .ms-features--4, .ms-stats, .ms-news, .ms-logos, .ms-logos--6{ grid-template-columns: repeat(2,1fr); }
  .ms-h1{ font-size: 27px; }
}