.pre-product{
    display:none
  }
    :root {
      --blue-dark: #0B1F3A;
      --blue-mid:  #1A3D6B;
      --blue-acc:  #2563A6;
      --orange:    #FF6B00;
      --orange-lt: #FF9340;
      --white:     #FFFFFF;
      --gray-bg:   #F0F2F5;
      --grad-hero: linear-gradient(135deg, #1A4E8A 0%, #003A6B 100%);

    }

    .catalog-wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 60px 5% 0px;
    }

   .catalog-wrap .article-about{
   max-width: inherit; 
     margin: 0px; 
     padding: 0px;
   }

   .page-header {
      max-width: 1440px;
      margin: 0 auto;
      padding: 80px 5% 0;
    }

    .breadcrums {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 500;
      color: #8a9ab0;
      letter-spacing: 0.4px;
      margin-bottom: 16px;
    }

    .breadcrums a {
      color: var(--blue-acc);
      text-decoration: none;
      transition: color 0.2s ease;
      position: relative;
    }

    .breadcrums a::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -1px;
      width: 0;
      height: 1px;
      background: var(--orange);
      transition: width 0.25s ease;
    }

    .breadcrums a:hover {
      color: var(--orange);
    }

    .breadcrums a:hover::after {
      width: 100%;
    }

    .breadcrums › ,
    .breadcrums {
      color: #c0cad8;
    }

    h1.page-title {
      font-size: clamp(28px, 4vw, 58px);
      font-weight: 900;
      letter-spacing: 2px;
      color: var(--blue-dark);
      line-height: 1.05;
      margin: 0 0 6px;
      position: relative;
      display: inline-block;
    }

    h1.page-title::after {
      content: '';
      display: block;
      margin-top: 10px;
      width: 64px;
      height: 4px;
      border-radius: 4px;
      background: linear-gradient(90deg, var(--orange) 0%, var(--orange-lt) 100%);
    }


        @media (max-width: 720px) {
      .page-header { padding: 84px 5% 0; }

    }

    @media (max-width: 480px) {

      h1.page-title { font-size: 26px; letter-spacing: 1px; }
      .breadcrums { font-size: 12px; }
    }

    .catalog-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 24px;
    }

    .card {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      aspect-ratio: 4/3;
      cursor: pointer;
      box-shadow: 0 8px 30px rgba(0,0,0,0.18);
      transition: transform 0.38s cubic-bezier(.22,.68,0,1.2),
                  box-shadow 0.38s ease;
    }

    .card:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 20px 50px rgba(0,0,0,0.30);
    }

    .card-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: filter 0.38s ease, transform 0.55s cubic-bezier(.22,.68,0,1.2);
    }

    .card:hover .card-img {
      filter: brightness(0.35) saturate(0.7);
      transform: scale(1.06);
    }

    .card-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(11,31,58,0.10) 0%,
        rgba(11,31,58,0.55) 60%,
        rgba(11,31,58,0.82) 100%
      );
      transition: background 0.38s ease;
    }

    .card:hover .card-overlay {
      background: linear-gradient(
        to bottom,
        rgba(11,31,58,0.30) 0%,
        rgba(11,31,58,0.75) 60%,
        rgba(11,31,58,0.92) 100%
      );
    }

    .card-text {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
      text-align: center;
    }

    .card-name {
      font-size: clamp(22px, 1vw, 32px);
      color: var(--white);
      text-shadow: 0 2px 12px rgba(0,0,0,0.7);
      line-height: 1.1;
      transition: transform 0.38s ease, opacity 0.38s ease;
    }

    .card:hover .card-name {
      transform: translateY(-14px);
    }

    .card-btn {
      position: absolute;
      bottom: 28px;
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      opacity: 0;
      pointer-events: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 11px 30px;
      background: linear-gradient(90deg, var(--orange) 0%, var(--orange-lt) 100%);
      color: var(--white);
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      border-radius: 40px;
      border: none;
      cursor: pointer;
      white-space: nowrap;
      text-decoration: none;
      box-shadow: 0 6px 22px rgba(255,107,0,0.55);
      transition: opacity 0.32s ease, transform 0.32s cubic-bezier(.22,.68,0,1.2);
    }

    .card-btn::after {
      content: '→';
      font-size: 16px;
      transition: transform 0.2s ease;
    }

    .card:hover .card-btn {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }

    .card-btn:hover::after {
      transform: translateX(4px);
    }

    @media (max-width: 640px) {
      .catalog-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
      .catalog-title { font-size: 38px; }
    }

    @media (max-width: 480px) {
      .catalog-grid { grid-template-columns: 1fr 1fr; }
      .card-name {
        font-size: 14px;
      }
      .card-btn {
        gap: 20px;
        padding: 5px 20px;
        font-size: 12px;
        font-weight: 400;
      }
    }

    .article-about {
      max-width: 1440px;
      margin: 48px auto 80px;
      padding: 0 5%;
      font-family: 'Montserrat', 'Segoe UI', sans-serif;
      color: var(--blue-dark);
    }

    .article-about p {
      font-size: 15.5px;
      line-height: 1.85;
      color: #3a4a5e;
      margin: 0 0 28px;
    }

    .article-about h2 {
      position: relative;
      font-size: clamp(18px, 2.5vw, 26px);
      font-weight: 900;
      color: var(--blue-dark);
      letter-spacing: 0.8px;
      margin: 52px 0 18px;
      padding-left: 22px;
      line-height: 1.2;
      text-align: left;
    }

    .article-about h2::before {
      content: '';
      position: absolute;
      left: 0;
      top: 3px;
      bottom: 3px;
      width: 5px;
      border-radius: 4px;
      background: linear-gradient(180deg, var(--orange) 0%, var(--orange-lt) 100%);
    }

	 .article-about #price-list {
      position: relative;
      font-size: clamp(18px, 2.5vw, 26px);
      font-weight: 900;
      color: #fff;
      letter-spacing: 0.8px;
      margin: 52px 0 18px;
      padding-left: 22px;
      line-height: 1.2;
    }

	.article-about #price-list {
      position: relative;
      font-size: clamp(18px, 2.5vw, 26px);
      font-weight: 900;
      color: #fff;
      letter-spacing: 0.8px;
      margin: 52px 0 18px;
      padding-left: 22px;
      line-height: 1.2;
    }

/*     .article-about h2:first-child {
      margin-top: 0;
    } */

/*     .article-about h2:first-child + p {
      background: linear-gradient(135deg, #e8f0fb 0%, #f5f8ff 100%);
      border-left: 4px solid var(--blue-acc);
      border-radius: 0 12px 12px 0;
      padding: 20px 24px;
      font-weight: 500;
      color: var(--blue-mid);
    } */

    .article-about h2:not(:first-child)::after {
      content: '';
      display: block;
      position: absolute;
      top: 50%;
      right: 0;
      width: calc(100% - 22px);
      height: 1px;
      background: linear-gradient(90deg, rgba(37,99,166,0.15) 0%, transparent 100%);
      transform: translateY(-50%);
      pointer-events: none;
    }

    .article-about .article-extra {
      margin-top: 48px;
      padding: 32px 36px;
      background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-mid) 100%);
      border-radius: 20px;
      color: var(--white);
      position: relative;
      overflow: hidden;
    }

    .article-about .article-extra::before {
      content: '';
      position: absolute;
      top: -60px;
      right: -60px;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: rgba(255,107,0,0.12);
      pointer-events: none;
    }

    .article-about .article-extra::after {
      content: '';
      position: absolute;
      bottom: -40px;
      left: -40px;
      width: 160px;
      height: 160px;
      border-radius: 50%;
      background: rgba(37,99,166,0.25);
      pointer-events: none;
    }

    .article-about .article-extra * {
      position: relative;
      z-index: 1;
    }

    @media (max-width: 640px) {
      .article-about {
        margin: 32px auto 60px;
      }
      .article-about h2 {
        font-size: 17px;
        margin: 36px 0 14px;
      }
      .article-about p {
        font-size: 14.5px;
      }
      .article-about .article-extra {
        padding: 24px 20px;
      }
    }


	.article-extra article {
      margin-bottom: 52px;
    }

    .article-extra article:last-child {
      margin-bottom: 0;
    }

    /* ── H2 заголовки прайсов ── */
    .article-extra h2 {
      position: relative;
      font-size: clamp(17px, 2.2vw, 24px);
      font-weight: 900;
      color: var(--white);
      letter-spacing: 1px;
      margin: 0 0 20px;
      padding-left: 22px;
      line-height: 1.2;
    }

    .article-extra h2::before {
      content: '';
      position: absolute;
      left: 0;
      top: 3px;
      bottom: 3px;
      width: 5px;
      border-radius: 4px;
      background: linear-gradient(180deg, var(--orange) 0%, var(--orange-lt) 100%);
    }

    /* ── Обёртка таблицы — скролл без выхода за контейнер ── */
    .article-extra .table-wrap {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border-radius: 12px;
    }

    /* ── Таблица ── */
    .article-extra .table-price {
      width: 100%;
      min-width: 360px;
      border-collapse: separate;
      border-spacing: 0 5px;
      font-family: 'Montserrat', 'Segoe UI', sans-serif;
      margin-bottom: 8px;
      table-layout: fixed;
    }

    /* распределение ширин колонок */
    .article-extra .table-price colgroup col:nth-child(1) { width: 55%; }
    .article-extra .table-price colgroup col:nth-child(2) { width: 18%; }
    .article-extra .table-price colgroup col:nth-child(3) { width: 27%; }

    /* ── Шапка таблицы (h3-строка) ── */
    .article-extra .table-price .tableh3,
    .article-extra .table-price .table-h3 {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--orange-lt);
      margin: 0;
      padding: 12px 16px;
      text-align: left !important;
    }

    .article-extra .table-price tr:first-child td {
      background: rgba(255,255,255,0.07);
      border-radius: 12px !important;
      padding: 0;
    }

    /* ── Строка-заголовок колонок ── */
    .article-extra .table-price tr:nth-child(2) td {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      text-align: left !important;
      color: rgba(255,255,255,0.5);
      padding: 8px 14px 12px;
      border-bottom: 1px solid rgba(255,255,255,0.12);
      word-break: normal;
      overflow-wrap: break-word;
    }

    /* ── Строки данных ── */
    .article-extra .table-price tr:nth-child(n+3) {
      transition: background 0.22s ease;
    }

    .article-extra .table-price tr:nth-child(n+3) td {
      background: rgba(255,255,255,0.05);
      color: rgba(255,255,255,0.88);
      font-size: 13px;
      font-weight: 500;
      padding: 12px 14px;
      text-align: left !important;
      vertical-align: middle;
      word-break: break-word;
      overflow-wrap: break-word;
      transition: background 0.22s ease, color 0.22s ease;
      border-top: 1px solid rgba(255,255,255,0.06);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    /* скругления крайних ячеек строки */
    .article-extra .table-price tr:nth-child(n+3) td:first-child {
      border-radius: 10px 0 0 10px;
      border-left: 1px solid rgba(255,255,255,0.06);
    }

    .article-extra .table-price tr:nth-child(n+3) td:last-child {
      border-radius: 0 10px 10px 0;
      border-right: 1px solid rgba(255,255,255,0.06);
    }

    /* hover строки */
    .article-extra .table-price tr:nth-child(n+3):hover td {
      background: rgba(255,107,0,0.15);
      color: #fff;
    }

    /* ── Колонка «Цена» — выделяем оранжевым ── */
    .article-extra .table-price tr:nth-child(n+3) td:last-child,
    .article-extra .table-price tr:nth-child(n+3) td.price {
      font-weight: 800;
      color: var(--orange-lt);
      white-space: nowrap;
    }

    /* ── Чередование строк ── */
    .article-extra .table-price tr:nth-child(odd):nth-child(n+3) td {
      background: rgba(255,255,255,0.08);
    }

    .article-extra .table-price tr:nth-child(odd):nth-child(n+3):hover td {
      background: rgba(255,107,0,0.15);
    }

    /* ── Разделитель между статьями ── */
    .article-extra article + article {
      padding-top: 40px;
      border-top: 1px solid rgba(255,255,255,0.1);
    }

    /* ════════════════════════
       АДАПТИВ
    ════════════════════════ */

    /* Планшет / небольшой экран */
    @media (max-width: 768px) {
      .article-extra {
        padding: 24px 18px;
        border-radius: 16px;
      }

      .article-extra .table-price {
        font-size: 13px;
        min-width: 320px;
      }

      .article-extra .table-price tr:nth-child(2) td {
        font-size: 10px;
        padding: 6px 10px 10px;
        letter-spacing: 0.3px;
      }

      .article-extra .table-price tr:nth-child(n+3) td {
        font-size: 12px;
        padding: 10px 10px;
      }

      .article-extra h2 {
        font-size: 16px;
      }
    }

    /* Мобильный */
    @media (max-width: 480px) {

      .article-extra {
        padding: 18px 14px;
        border-radius: 14px;
      }

      /* таблица не ломается — уходит в горизонтальный скролл */
      .article-extra .table-wrap {
        margin: 0 -14px;          /* растягиваем до краёв паддинга */
        padding: 0 14px 6px;
        border-radius: 0;
      }

      .article-extra .table-price {
        min-width: 300px;
        border-spacing: 0 4px;
      }

      /* Сжимаем пропорции колонок на совсем маленьких */
      .article-extra .table-price colgroup col:nth-child(1) { width: 50%; }
      .article-extra .table-price colgroup col:nth-child(2) { width: 18%; }
      .article-extra .table-price colgroup col:nth-child(3) { width: 32%; }

      .article-extra .table-price .tableh3,
      .article-extra .table-price .table-h3 {
        font-size: 10px;
        padding: 10px 12px;
        letter-spacing: 1px;
      }

      .article-extra .table-price tr:nth-child(2) td {
        font-size: 9px;
        padding: 5px 8px 9px;
        letter-spacing: 0;
      }

      .article-extra .table-price tr:nth-child(n+3) td {
        font-size: 11px;
        padding: 9px 8px;
      }

      .article-extra h2 {
        font-size: 14px;
        letter-spacing: 0.5px;
        margin-bottom: 14px;
      }

      .article-extra article {
        margin-bottom: 36px;
      }

      .article-extra article + article {
        padding-top: 28px;
      }
    }

    /* Очень маленький (до 360px — старые Android) */
    @media (max-width: 360px) {
      .article-extra .table-price {
        min-width: 260px;
      }

      .article-extra .table-price tr:nth-child(n+3) td {
        font-size: 10px;
        padding: 8px 6px;
      }

      .article-extra .table-price tr:nth-child(2) td {
        font-size: 8px;
        padding: 4px 6px 8px;
      }
    }


    
  /* ═══════════════════════════════════════════════════
     ЗАГОЛОВКИ ВКЛАДОК
  ═══════════════════════════════════════════════════ */
  .tabs-section .tab-h{
    text-align: left;
    margin: 0;
    font-size:22px;font-weight:800;margin-bottom:4px;
    background:linear-gradient(90deg,#003A6B 0%,#1A4E8A 40%,#FF7A00 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    border-bottom: none;
  }
  .tab-sub{font-size:14px;color:#777;margin-bottom:20px;}

.desc-art section{margin-bottom:24px;}
.desc-art h2{font-size:18px;text-align: left;margin: 0px; font-weight:800;color:var(--pri-700);margin-bottom:10px;padding-bottom:7px;border-bottom:2px solid var(--gray-200);}
.desc-art p{font-size:14px;line-height:1.75;color:#444;margin-bottom:9px;}
.desc-art ul,.desc-art ol{padding-left:20px;font-size:14px;line-height:1.8;color:#444;margin-bottom:9px;}
.desc-art li{margin-bottom:3px; font-size: 14px;}
.st{font-weight:700; font-size:14px; color:var(--pri-700)}
.stages{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
}

/* 7-й элемент на всю ширину */
.stages .stage-i:nth-child(7){
  grid-column:1 / -1;
}
.stage-i{display:flex;align-items:center;gap:13px;background:rgba(26,78,138,.04);border:1px solid rgba(26,78,138,.1);border-radius:12px;padding:13px 16px;transition:all .25s;}
.stage-i:hover{background:rgba(26,78,138,.08);transform:translateX(4px);}
.st-num{width:38px;height:38px;border-radius:50%;background:var(--grad-btn);color:#fff;font-weight:900;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 3px 10px rgba(255,122,0,.4);}
.st-txt{font-size:14px;font-weight:600;color:var(--pri-700);}
  /* Быстрые параметры */
.quick-specs{background:var(--grad-hero);border-radius:var(--r-md);padding:18px 20px;color:#fff;flex:1;}
.quick-specs h2{text-align: left;font-size:16px;font-weight:600;opacity:.7;margin: 0px 0px 12px;text-transform:uppercase;letter-spacing:.06em; color:#fff}
.spec-list{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
}
.spec-row{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.08);border-radius:9px;padding:11px 12px;border:1px solid rgba(255,255,255,.11);}
.s-icon{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:rgba(255,122,0,.28);border-radius:7px;font-size:16px;flex-shrink:0;}
.s-div{width:1px;height:22px;background:rgba(255,255,255,.22);flex-shrink:0;}
.s-lbl{font-size:14px;opacity:.65;margin-bottom:1px;}
.s-val{font-size:17px;font-weight:700;}

.desc-art table{
margin: 30px 0px;
}

.desc-art table tr th{
  font-size:18px;
  background:var(--pri-700);
padding: 5px 0px;
}

.desc-art table tr:first-child td {
  background:none;
  color: #000;
  text-align: left;
  font-size: 14px;

}

table tr td {
  text-align: left;
  font-size: 14px;
  padding: 3px 4px;
}

.s-icon .fas{
  transform: translateX(2px);
}


@media (max-width: 720px) {

  .new-catalog-pw {
    margin: 70px auto 0px;
    padding: 0 4% 20px;
  }
  .tab-content {
    padding: 16px 12px;
}

  .quick-specs {
    padding: 13px 14px;
}


  .spec-row {
      padding: 8px 10px;
      gap: 8px;
  }

  .s-icon {
    width: 26px;
    height: 26px;
    font-size: 12px;
    border-radius: 6px;
}

.s-div {
  height: 18px;
}

.s-lbl {
  font-size: 12px;
}

.s-val {
  font-size: 12px;
}
.st-num {
  width: 20px;
  height: 20px;
}

.st-txt {
  font-size: 12px;}
}

@media (max-width: 420px) {
  .spec-list {
  grid-template-columns: repeat(1, 1fr);}
}

body .tabs-section h2{
  text-align: left;
}