/* Start:/bitrix/templates/metallurg-new/css/mtl_sections.css?179062759340982*/
/* ==========================================================================
   ТК «МЕТАЛЛУРГ» — секции главной страницы
   Всё заскоплено под .mtlx — не конфликтует с Аспро Lite.
   Вынести в /local/templates/.../mtl_sections.css, разметку — в PHP-вставку.

   ТИПОГРАФИКА: одна строгая шкала, шесть ступеней.
   12 — надзаголовок / микролейбл
   14 — сноска, подпись, мелкий шрифт
   16 — ВЕСЬ основной текст (буллиты, абзацы карточек, шагов, таблиц)
   18 — лид секции
   22 — заголовок карточки / шага / строки (h3)
   h2 / h1 — clamp
   Базовый кегль стоит на .mtlx и наследуется, вне шкалы ничего не задаём.
   ========================================================================== */

.mtlx{
  --nav-950:#0B1526;
  --nav-900:#16233F;
  --nav-700:#1F3E63;
  --nav-500:#33507E;
  --steel-300:#8AAAD0;
  --ember:#FF6A2B;
  --ember-2:#FF9147;
  --paper:#F4F6FA;
  --ink:#0E1726;
  --ink-2:#5A6D89;
  --line:#E3E9F2;

  --wrap:1200px;
  --pad:32px;
  --r:18px;
  --gap:20px;

  --t-xs:12px;
  --t-sm:14px;
  --t-md:16px;
  --t-lg:18px;
  --t-h3:22px;
  --t-h2:clamp(30px,3.2vw,42px);
  --t-h1:clamp(36px,4.2vw,54px);

  --seam:linear-gradient(90deg,rgba(65,89,127,0) 0%,#41597F 12%,#9DB6D6 30%,#4A6288 50%,#8CA5C6 72%,#41597F 90%,rgba(65,89,127,0) 100%);

  --grid-fine:
    linear-gradient(rgba(138,170,208,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138,170,208,.055) 1px, transparent 1px);
  --grid-major:
    linear-gradient(rgba(138,170,208,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138,170,208,.10) 1px, transparent 1px);

  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size:var(--t-md);
  line-height:1.55;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.mtlx *,.mtlx *::before,.mtlx *::after{box-sizing:border-box;}
.mtlx :where(p,h1,h2,h3,h4,ul,ol,li,figure,form,blockquote){margin:0;padding:0;}
.mtlx :where(ul,ol){list-style:none;}
.mtlx :where(a){color:inherit;text-decoration:none;}
.mtlx :where(p,li,span,div,h1,h2,h3,label,input,button){font-size:inherit;}
.mtlx svg{display:block;max-width:100%;}
.mtlx button,.mtlx input{font:inherit;color:inherit;}
.mtlx img{max-width:100%;height:auto;}

.mtl-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);position:relative;}
.mtl-sprite{position:absolute;width:0;height:0;overflow:hidden;}

/* --- типографические примитивы ------------------------------------------ */
.mtl-over{
  display:flex;width:fit-content;line-height:1;align-items:center;gap:10px;
  font-size:var(--t-xs);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  line-height:1.4;color:var(--steel-300);
}
.mtl-over::before{content:"";width:24px;height:2px;background:var(--ember);flex:none;}
.mtl-over--ink{color:var(--nav-700);}
.mtl-h1{
  font-size:var(--t-h1);font-weight:800;line-height:1.06;letter-spacing:-.032em;color:#fff;
}
.mtl-h2{
  font-size:var(--t-h2);font-weight:800;line-height:1.1;letter-spacing:-.03em;
}
.mtl-lead{font-size:var(--t-lg);line-height:1.6;color:var(--ink-2);max-width:58ch;}
.mtl-lead--light{color:#B9C9E2;}

.mtl-sec{padding:clamp(56px,6vw,92px) 0;position:relative;overflow:hidden;}
.mtl-sec--paper{background:var(--paper);}
.mtl-sec--white{background:#fff;}
.mtl-head{max-width:720px;margin-bottom:clamp(32px,3.6vw,48px);}
.mtl-head .mtl-h2{margin:14px 0 12px;}
.mtl-head .mtl-h2:last-child{margin-bottom:0;}

/* шов тёмное/светлое — стальная линейка, один приём на всю страницу */
.mtl-edge{position:absolute;left:0;right:0;height:3px;z-index:5;background:var(--seam);}
.mtl-edge--bottom{bottom:0;}
.mtl-edge--top{top:0;}

/* --- кнопка --------------------------------------------------------------- */
.mtl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:56px;padding:0 28px;border-radius:12px;border:0;cursor:pointer;
  font-size:var(--t-md);font-weight:700;letter-spacing:-.01em;white-space:nowrap;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background .25s;
}
.mtl-btn--fire{
  color:#fff;background:linear-gradient(135deg,var(--ember) 0%,#F2551A 100%);
  box-shadow:0 12px 30px rgba(255,106,43,.32), inset 0 1px 0 rgba(255,255,255,.28);
}
.mtl-btn--fire:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(255,106,43,.42), inset 0 1px 0 rgba(255,255,255,.28);}

/* ==========================================================================
   1. ГЕРОЙ
   ========================================================================== */
.mtl-hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 90% at 84% 8%, rgba(31,62,99,.85) 0%, rgba(11,21,38,0) 62%),
    linear-gradient(168deg,#132038 0%,var(--nav-950) 58%,#080F1C 100%);
  padding:clamp(52px,5.5vw,84px) 0 clamp(104px,9vw,132px);
}
.mtl-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grid-fine),var(--grid-major);
  background-size:44px 44px,44px 44px,264px 264px,264px 264px;
  mask-image:radial-gradient(90% 80% at 50% 30%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(90% 80% at 50% 30%,#000 30%,transparent 100%);
}
.mtl-hero::after{
  content:"";position:absolute;top:-40%;left:-30%;width:60%;height:190%;
  background:linear-gradient(100deg,transparent 0%,rgba(174,204,240,.09) 42%,rgba(255,255,255,.14) 50%,rgba(174,204,240,.07) 58%,transparent 100%);
  transform:skewX(-14deg);animation:mtl-sweep 14s linear infinite;pointer-events:none;
}
@keyframes mtl-sweep{0%{transform:translateX(-30%) skewX(-14deg);opacity:0;}
  12%{opacity:1;} 78%{opacity:1;} 100%{transform:translateX(230%) skewX(-14deg);opacity:0;}}

.mtl-hero-grid{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(32px,4vw,60px);align-items:center;
}
.mtl-hero-copy .mtl-h1{margin:18px 0 16px;}
.mtl-hero-copy .mtl-h1 em{
  font-style:normal;
  background:linear-gradient(180deg,#FFB07A 0%,var(--ember) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.mtl-h1 sup{font-size:.4em;line-height:0;vertical-align:super;color:var(--ember-2);font-weight:700;}
.mtl-hero-star{
  font-size:var(--t-sm);line-height:1.5;color:#8FA6C6;max-width:52ch;
  padding-left:14px;border-left:2px solid rgba(255,106,43,.5);
}
.mtl-hero-copy .mtl-lead{margin-top:20px;}
.mtl-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px;}
.mtl-hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;}
.mtl-chip{
  font-size:var(--t-sm);font-weight:600;color:#A9C0DE;line-height:1.3;
  padding:8px 14px;border-radius:999px;
  border:1px solid rgba(138,170,208,.26);background:rgba(138,170,208,.07);
}

.mtl-draft{position:relative;}
.mtl-draft svg{width:100%;height:auto;}
.mtl-draft-tag{
  position:absolute;right:4px;bottom:-4px;
  font-size:var(--t-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(138,170,208,.85);
}

/* ==========================================================================
   2. ЦИФРЫ — рельс на шве
   ========================================================================== */
.mtl-figures{background:var(--paper);padding-bottom:clamp(48px,5vw,72px);}
.mtl-rail{
  position:relative;z-index:4;margin-top:calc(-1 * clamp(56px,5.5vw,80px));
  border-radius:20px;padding:clamp(26px,2.6vw,36px) clamp(24px,2.6vw,36px);
  background:linear-gradient(150deg,#1B2C4C 0%,var(--nav-900) 55%,#101C33 100%);
  box-shadow:0 30px 60px rgba(11,21,38,.26), inset 0 1px 0 rgba(174,204,240,.16);
  overflow:hidden;
}
.mtl-rail::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grid-fine);background-size:38px 38px;
}
.mtl-rail-inner{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(18px,2vw,28px);position:relative;}
.mtl-fig{position:relative;padding-left:clamp(16px,1.8vw,26px);}
.mtl-fig:first-child{padding-left:0;}
.mtl-fig::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(138,170,208,.34),transparent);
}
.mtl-fig:first-child::before{display:none;}
.mtl-fig-n{
  font-size:clamp(34px,3.2vw,44px);font-weight:800;line-height:1;letter-spacing:-.04em;white-space:nowrap;
  font-feature-settings:'tnum';
  background:linear-gradient(180deg,#FFFFFF 18%,#9FB9DC 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.mtl-fig--fire .mtl-fig-n{
  background:linear-gradient(180deg,#FFC79E 10%,var(--ember) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.mtl-fig-b{width:30px;height:2px;background:rgba(138,170,208,.4);margin:14px 0 12px;}
.mtl-fig--fire .mtl-fig-b{background:var(--ember);}
.mtl-fig-t{font-size:var(--t-md);line-height:1.45;color:#A7BEDC;}

/* ==========================================================================
   3. АССОРТИМЕНТ
   ========================================================================== */
.mtl-range{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);}
.mtl-card{
  position:relative;border-radius:var(--r);padding:28px;overflow:hidden;
  background:#fff;border:1px solid var(--line);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, border-color .3s,
             background .3s ease, color .3s ease;
}
/* сетка проступает только под курсором */
.mtl-card::before{
  content:"";position:absolute;inset:0;background-image:var(--grid-fine);background-size:34px 34px;
  pointer-events:none;opacity:0;transition:opacity .3s ease;
}
.mtl-card:hover{
  transform:translateY(-5px);
  background:linear-gradient(155deg,#1D2E4E 0%,var(--nav-950) 100%);
  border-color:transparent;color:#fff;
  box-shadow:0 26px 50px rgba(11,21,38,.3);
}
.mtl-card:hover::before{opacity:1;}
.mtl-card:hover .mtl-card-t{color:#fff;}
.mtl-card:hover .mtl-card-l li{color:#A7BEDC;}
.mtl-card-ico{
  position:relative;width:64px;height:64px;border-radius:14px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#EFF4FB 0%,#DDE7F4 100%);
  color:var(--nav-700);margin-bottom:20px;transition:background .3s,color .3s;
}
.mtl-card-ico svg{width:40px;height:40px;}
.mtl-card:hover .mtl-card-ico{background:linear-gradient(150deg,var(--nav-700) 0%,var(--nav-900) 100%);color:var(--ember-2);}
.mtl-card-t{font-size:var(--t-h3);font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:16px;}
.mtl-card-l li{position:relative;padding-left:18px;line-height:1.5;color:var(--ink-2);}
.mtl-card-l li + li{margin-top:8px;}
.mtl-card-l li::before{
  content:"";position:absolute;left:0;top:10px;width:8px;height:2px;background:var(--ember);border-radius:2px;
}
/* Раньше тёмная заливка была намертво прибита к одной карточке: выделение без
   причины. Теперь это состояние наведения, одинаковое для всех шести.
   Класс --dark оставлен в разметке, но больше ничего не красит. */
.mtl-card--dark{background:#fff;border-color:var(--line);color:inherit;}

/* На тач-экранах наведения нет — карточки остаются светлыми. */
@media (hover:none){
  .mtl-card:hover{background:#fff;border-color:var(--line);color:inherit;box-shadow:none;transform:none;}
  .mtl-card:hover::before{opacity:0;}
  .mtl-card:hover .mtl-card-t{color:inherit;}
  .mtl-card:hover .mtl-card-l li{color:inherit;}
  .mtl-card:hover .mtl-card-ico{background:linear-gradient(150deg,#EFF4FB 0%,#DDE7F4 100%);color:var(--nav-700);}
}

/* ==========================================================================
   4. ЧЕМ ПОЛЕЗНЫ — четыре плитки
   ========================================================================== */
.mtl-bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);}
.mtl-mini{
  position:relative;overflow:hidden;border-radius:var(--r);padding:30px;background:#fff;
  border:1px solid var(--line);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, border-color .3s;
}
.mtl-mini-wm{
  position:absolute;right:-48px;bottom:-52px;width:216px;height:216px;
  color:var(--nav-700);opacity:.045;pointer-events:none;
}
.mtl-mini-wm svg{width:100%;height:100%;}
.mtl-mini:hover{transform:translateY(-5px);border-color:#C6D4E7;box-shadow:0 24px 46px rgba(22,35,63,.12);}
.mtl-mini-top{position:relative;display:flex;align-items:center;gap:16px;margin-bottom:14px;padding-right:34px;}
.mtl-mini-ico{
  width:52px;height:52px;border-radius:14px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#EFF4FB,#DDE7F4);color:var(--nav-700);
  transition:background .3s,color .3s;
}
.mtl-mini:hover .mtl-mini-ico{background:linear-gradient(150deg,var(--nav-700),var(--nav-900));color:var(--ember-2);}
.mtl-mini-ico svg{width:28px;height:28px;}
.mtl-mini-t{font-size:var(--t-h3);font-weight:700;letter-spacing:-.02em;line-height:1.2;}
.mtl-mini-p{position:relative;line-height:1.55;color:var(--ink-2);max-width:44ch;}
.mtl-mini-n{
  position:absolute;top:26px;right:26px;font-size:var(--t-sm);font-weight:800;
  font-feature-settings:'tnum';color:#9FB2CC;letter-spacing:.04em;
}

/* ==========================================================================
   5. КАК РАБОТАЕМ — четыре шага
   ========================================================================== */
.mtl-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);position:relative;}
.mtl-steps::before{
  content:"";position:absolute;left:6px;right:calc(25% - 22px);top:6px;height:1px;
  background:linear-gradient(90deg,var(--ember) 0%,rgba(255,106,43,.5) 18%,rgba(31,62,99,.28) 60%,rgba(31,62,99,.1) 100%);
}
.mtl-step{position:relative;padding-top:34px;}
.mtl-step::before{
  content:"";position:absolute;left:0;top:0;width:13px;height:13px;border-radius:50%;
  background:#fff;border:2px solid rgba(31,62,99,.35);box-shadow:0 0 0 6px var(--paper);
}
.mtl-step--on::before{border-color:var(--ember);background:var(--ember);box-shadow:0 0 0 6px var(--paper),0 0 0 8px rgba(255,106,43,.18);}
.mtl-step-n{
  font-size:32px;font-weight:800;line-height:1;letter-spacing:-.04em;
  font-feature-settings:'tnum';color:transparent;
  -webkit-text-stroke:1.4px rgba(31,62,99,.32);margin-bottom:12px;
  transition:-webkit-text-stroke-color .3s;
}
.mtl-step:hover .mtl-step-n{-webkit-text-stroke-color:var(--ember);}
.mtl-step-t{font-size:var(--t-h3);font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:8px;}
.mtl-step-p{line-height:1.55;color:var(--ink-2);}

/* ==========================================================================
   6. ДОВЕРИЕ
   ========================================================================== */
.mtl-trust{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3vw,44px);align-items:start;}
.mtl-tlist{margin-top:4px;}
.mtl-tr{display:flex;gap:20px;padding:24px 0;border-top:1px solid var(--line);}
.mtl-tr:last-child{border-bottom:1px solid var(--line);}
.mtl-tr-ico{
  width:52px;height:52px;border-radius:14px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper);color:var(--nav-700);border:1px solid var(--line);
}
.mtl-tr-ico svg{width:28px;height:28px;}
.mtl-tr-t{font-size:var(--t-h3);font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:8px;}
.mtl-tr-p{line-height:1.6;color:var(--ink-2);}
.mtl-rate{
  position:relative;overflow:hidden;border-radius:var(--r);padding:30px;color:#fff;
  background:linear-gradient(155deg,#1D2E4E 0%,var(--nav-950) 100%);
  box-shadow:0 30px 64px rgba(11,21,38,.2);
}
.mtl-rate::before{content:"";position:absolute;inset:0;background-image:var(--grid-fine);background-size:36px 36px;pointer-events:none;}
.mtl-rate-row{position:relative;display:flex;align-items:center;gap:18px;}
.mtl-rate-n{
  font-size:56px;font-weight:800;line-height:.95;letter-spacing:-.05em;font-feature-settings:'tnum';
  background:linear-gradient(180deg,#fff 18%,#9FB9DC 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.mtl-stars{display:flex;gap:4px;margin-bottom:6px;}
.mtl-stars svg{width:18px;height:18px;color:var(--ember);}
.mtl-rate-sub{font-size:var(--t-sm);color:#A7BEDC;}
.mtl-rate-q{
  position:relative;margin-top:22px;padding-top:20px;border-top:1px solid rgba(138,170,208,.2);
  line-height:1.6;color:#B9C9E2;
}
.mtl-req{
  margin-top:var(--gap);border-radius:var(--r);padding:26px 28px;
  background:#fff;border:1px solid var(--line);
}
.mtl-req-t{font-size:var(--t-xs);font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--nav-700);margin-bottom:14px;}
.mtl-req-l li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px dashed var(--line);}
.mtl-req-l li:last-child{border-bottom:0;}
.mtl-req-k{color:var(--ink-2);text-align:left;flex:0 0 auto;white-space:nowrap;}
.mtl-req-v{font-weight:700;font-feature-settings:'tnum';text-align:right;flex:1 1 auto;min-width:0;}

/* ==========================================================================
   7. ФИНАЛЬНЫЙ ПРИЗЫВ
   ========================================================================== */
.mtl-cta{
  position:relative;overflow:hidden;
  background:
    radial-gradient(70% 90% at 88% 92%, rgba(255,106,43,.2) 0%, transparent 62%),
    radial-gradient(90% 80% at 10% 0%, rgba(31,62,99,.8) 0%, transparent 60%),
    linear-gradient(160deg,#132038 0%,var(--nav-950) 70%);
  padding:clamp(60px,6.4vw,100px) 0;
}
.mtl-cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grid-fine);background-size:44px 44px;
}
.mtl-cta-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,4vw,60px);align-items:center;}
.mtl-cta-t{font-size:var(--t-h2);font-weight:800;line-height:1.1;letter-spacing:-.03em;color:#fff;margin:14px 0 14px;}
.mtl-cta-t em{font-style:normal;background:linear-gradient(180deg,#FFB07A,var(--ember));-webkit-background-clip:text;background-clip:text;color:transparent;}
.mtl-cta-p{font-size:var(--t-lg);line-height:1.6;color:#B9C9E2;max-width:44ch;}
.mtl-contacts{display:flex;flex-wrap:wrap;gap:16px 34px;margin-top:30px;}
.mtl-ct{display:flex;align-items:center;gap:12px;}
.mtl-ct svg{width:20px;height:20px;color:var(--ember);flex:none;}
.mtl-ct-l{font-size:var(--t-xs);color:#7E93B4;font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
.mtl-ct-v{font-weight:700;color:#fff;letter-spacing:-.01em;}
.mtl-form{
  position:relative;border-radius:20px;padding:clamp(26px,3vw,34px);
  background:linear-gradient(155deg,rgba(31,62,99,.55) 0%,rgba(11,21,38,.75) 100%);
  border:1px solid rgba(138,170,208,.26);
  box-shadow:0 40px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(174,204,240,.14);
}
.mtl-form-t{font-size:var(--t-h3);font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1.2;margin-bottom:20px;}
.mtl-field{margin-bottom:12px;}
.mtl-field input{
  width:100%;height:54px;border-radius:12px;padding:0 18px;
  background:rgba(11,21,38,.55);border:1px solid rgba(138,170,208,.28);
  color:#fff;font-weight:500;transition:border-color .25s,background .25s;
}
.mtl-field input::placeholder{color:#7188A8;}
.mtl-field input:focus{outline:none;border-color:var(--ember);background:rgba(11,21,38,.8);}
.mtl-file{
  display:flex;align-items:center;gap:12px;min-height:54px;padding:0 18px;border-radius:12px;
  border:1px dashed rgba(138,170,208,.4);color:#9DB4D4;font-size:var(--t-sm);font-weight:600;
  cursor:pointer;transition:border-color .25s,color .25s,background .25s;
}
.mtl-file:hover{border-color:var(--ember);color:#FFD2B8;background:rgba(255,106,43,.06);}
.mtl-file svg{width:20px;height:20px;flex:none;}
.mtl-form .mtl-btn{width:100%;margin-top:6px;}
.mtl-form-note{margin-top:14px;font-size:var(--t-sm);line-height:1.5;color:#75899F;}
.mtl-legal{
  position:relative;margin-top:clamp(40px,4vw,60px);padding-top:24px;
  border-top:1px solid rgba(138,170,208,.16);
  display:flex;flex-wrap:wrap;gap:8px 26px;font-size:var(--t-sm);color:#7E93B4;
}
.mtl-legal b{color:#A7BEDC;font-weight:700;}

/* ==========================================================================
   Анимация появления
   ========================================================================== */
.mtl-anim [data-rv]{opacity:0;transform:translateY(18px);}
.mtl-anim [data-rv].mtl-in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1);}
@media (prefers-reduced-motion:reduce){
  .mtl-anim [data-rv]{opacity:1;transform:none;}
  .mtl-hero::after{animation:none;}
}

/* ==========================================================================
   Адаптив
   ========================================================================== */
@media (max-width:1020px){
  .mtlx{--pad:28px;}
  .mtl-hero{padding-bottom:clamp(52px,7vw,72px);}
  .mtl-rail{margin-top:32px;}
  .mtl-hero-grid{grid-template-columns:minmax(0,1fr);gap:40px;}
  .mtl-draft{max-width:560px;}
  .mtl-rail-inner{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px;}
  .mtl-fig:nth-child(4)::before{display:none;}
  .mtl-fig:nth-child(4){padding-left:0;}
  .mtl-range{grid-template-columns:repeat(2,minmax(0,1fr));}
  .mtl-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px;}
  .mtl-trust{grid-template-columns:minmax(0,1fr);}
  .mtl-cta-grid{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:760px){
  .mtl-rail-inner{grid-template-columns:repeat(2,minmax(0,1fr));}
  .mtl-fig::before{display:none;}
  .mtl-fig{padding-left:0;}
  .mtl-bento{grid-template-columns:minmax(0,1fr);}
  .mtl-steps{grid-template-columns:minmax(0,1fr);row-gap:0;padding-left:32px;}
  .mtl-steps::before{left:6px;right:auto;top:8px;bottom:8px;width:1px;height:auto;
    background:linear-gradient(180deg,var(--ember) 0%,rgba(255,106,43,.5) 14%,rgba(31,62,99,.24) 60%,rgba(31,62,99,.08) 100%);}
  .mtl-step{padding-top:0;padding-bottom:28px;}
  .mtl-step:last-child{padding-bottom:0;}
  .mtl-step::before{left:-32px;top:4px;}
}
/* --- правки после аудита 08.09 --- */
.mtlx :where(h1,h2,h3){text-wrap:balance;}
.mtlx :where(p,li){text-wrap:pretty;}

@media (max-width:640px){
  /* подписи внутри чертежа на телефоне уходят в 6-9px — прячем, силуэты остаются.
     Клеймо ГОСТ снимаем целиком: без надписи от него остаётся пустой кружок. */
  .mtl-draft svg text{display:none;}
  .mtl-draft svg .mtl-gost{display:none;}
  .mtl-hero-star{margin-top:22px;}
  .mtl-rail{box-shadow:0 16px 32px rgba(11,21,38,.20), inset 0 1px 0 rgba(174,204,240,.16);}
  /* на 375 чипы ложились по два, на 402 «Метизы» повисали одни третьей строкой —
     фиксируем сетку в две колонки, чтобы ряд не рвался ни на какой ширине */
  .mtl-hero-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .mtl-chip{font-size:13px;padding:7px 12px;display:flex;align-items:center;justify-content:center;text-align:center;}
  .mtl-hero::after{display:none;}
}

@media (max-width:640px){
  .mtlx{--pad:20px;--t-lg:17px;--t-h3:20px;}
  .mtl-over{align-items:flex-start;letter-spacing:.14em;}
  .mtl-over::before{width:20px;margin-top:7px;}
  .mtl-hero-actions .mtl-btn{flex:1 1 100%;}
  .mtl-rail-inner{grid-template-columns:minmax(0,1fr);row-gap:0;}
  .mtl-fig + .mtl-fig{margin-top:16px;padding-top:16px;border-top:1px solid rgba(138,170,208,.16);}
  .mtl-fig-n{font-size:34px;}
  .mtl-range{grid-template-columns:minmax(0,1fr);}
  .mtl-card,.mtl-mini{padding:24px;}
  .mtl-mini-n{top:22px;right:22px;}
  .mtl-tr{flex-direction:column;gap:14px;}
  .mtl-rate-n{font-size:48px;}
  .mtl-contacts{gap:18px;}
  .mtl-ct{flex:1 1 100%;}
  .mtl-req-v{max-width:72%;}
}

/* плитки категорий в первом экране */
.mtl-tiles{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.mtl-tile{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 12px;
  min-width:0;
  overflow-wrap:anywhere;
  hyphens:auto;
  border:1px solid rgba(138,170,208,.18);
  border-radius:14px;
  background:rgba(12,26,45,.45);
  color:#E8F0FA;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  line-height:1.2;
  transition:border-color .2s, background .2s, transform .2s;
}
.mtl-tile svg{
  width:34px;height:34px;flex:0 0 34px;
  fill:none;stroke:#FF8A4C;stroke-width:2;
}
.mtl-tile:hover{
  border-color:rgba(255,106,43,.55);
  background:linear-gradient(135deg,rgba(255,106,43,.16),rgba(12,26,45,.6));
  transform:translateY(-2px);
}
.mtl-tiles-all{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:16px;
  color:#FFB07A;
  text-decoration:none;
  font-size:14px;
  border-bottom:1px dashed rgba(255,176,122,.45);
  padding-bottom:2px;
}
.mtl-tiles-all:hover{color:#fff;border-bottom-color:rgba(255,255,255,.6);}

@media (max-width:900px){
  .mtl-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .mtl-tile{padding:13px 14px;font-size:14px;}
  .mtl-tile svg{width:28px;height:28px;flex:0 0 28px;}
}
@media (max-width:520px){
  .mtl-tile{padding:12px;font-size:13px;gap:9px;}
}


/* полоса с прайс-листом */
.mtl-price-band{padding:34px 0;background:linear-gradient(90deg,#0E1F38 0%,#16304F 100%);}
.mtl-price-grid{
  display:flex;align-items:center;justify-content:space-between;
  gap:28px;flex-wrap:wrap;
}
.mtl-price-copy .mtl-over--ink{color:#FFB07A;}
.mtl-price-copy .mtl-h2{color:#fff;margin:6px 0 8px;}
.mtl-price-copy .mtl-lead{color:#A9C0DC;margin:0;max-width:620px;}
.mtl-price-act{display:flex;gap:12px;flex-wrap:wrap;}
.mtl-btn--line{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 22px;border-radius:12px;
  border:1px solid rgba(255,255,255,.35);
  color:#fff;text-decoration:none;font-weight:600;
  transition:border-color .2s,background .2s;
}
.mtl-btn--line:hover{border-color:#FF8A4C;background:rgba(255,106,43,.14);color:#fff;}

/* сетка разделов каталога */
.mtl-cats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:26px;
}
.mtl-cat{
  display:flex;align-items:center;
  min-height:72px;
  padding:16px 18px;
  overflow-wrap:anywhere;
  border:1px solid rgba(20,44,74,.12);
  border-radius:14px;
  background:#fff;
  color:#12233B;
  text-decoration:none;
  font-weight:600;
  font-size:15px;
  line-height:1.3;
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.mtl-cat:hover{
  border-color:#FF8A4C;
  box-shadow:0 10px 24px rgba(18,35,59,.10);
  transform:translateY(-2px);
  color:#12233B;
}

@media (max-width:1100px){.mtl-cats{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:760px){
  .mtl-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .mtl-cat{min-height:56px;padding:12px 14px;font-size:14px;}
  .mtl-price-act{width:100%;}
  .mtl-price-act .mtl-btn{flex:1 1 100%;}
}
@media (max-width:520px){
  .mtl-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .mtl-cat{min-height:52px;padding:10px 12px;font-size:13px;line-height:1.25;}
}


/* призыв «звоните менеджеру» в первом экране */
.mtl-hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.mtl-hero-call{
  display:inline-flex;align-items:center;gap:12px;
  padding:11px 20px 11px 12px;
  border:1px solid rgba(255,138,76,.45);
  border-radius:14px;
  background:rgba(255,106,43,.10);
  text-decoration:none;
  transition:border-color .2s,background .2s,transform .2s;
}
.mtl-hero-call:hover{
  border-color:#FF8A4C;
  background:rgba(255,106,43,.18);
  transform:translateY(-2px);
}
.mtl-hero-call-ico{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:0 0 40px;
  border-radius:50%;
  background:#FF6A2B;color:#fff;
}
.mtl-hero-call-ico svg{width:21px;height:21px;}
.mtl-hero-call-txt{display:flex;flex-direction:column;line-height:1.25;}
.mtl-hero-call-txt b{
  font-size:13.5px;font-weight:700;color:#E8F0FA;
}
.mtl-hero-call-txt em{
  font-style:normal;font-size:17px;font-weight:800;color:#FFB07A;letter-spacing:.01em;
}

@media (max-width:760px){
  .mtl-hero-actions{gap:12px;}
  .mtl-hero-call{width:100%;justify-content:flex-start;padding:10px 16px 10px 10px;}
  .mtl-hero-call-txt b{font-size:12.5px;}
  .mtl-hero-call-txt em{font-size:16px;}
}


/* карточки товарных групп в каталоге */
.mtl-groups{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
  margin-top:26px;
}
.mtl-group{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  padding:22px 20px;
  min-height:168px;
  border:1px solid rgba(20,44,74,.10);
  border-radius:18px;
  background:#fff;
  color:#12233B;
  text-decoration:none;
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.mtl-group-ico{
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;flex:0 0 56px;
  border-radius:16px;
  background:linear-gradient(135deg,#FFF1E6,#FFE0CC);
  color:#F2551A;
}
.mtl-group-ico svg{width:32px;height:32px;}
.mtl-group-name{
  font-weight:700;font-size:15px;line-height:1.3;
  overflow-wrap:break-word;
}
.mtl-group:hover{
  border-color:#FF8A4C;
  box-shadow:0 14px 30px rgba(18,35,59,.10);
  transform:translateY(-3px);
  color:#12233B;
}

@media (max-width:1200px){.mtl-groups{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media (max-width:900px){.mtl-groups{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}}
@media (max-width:640px){
  .mtl-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .mtl-group{min-height:140px;padding:16px 14px;gap:10px;}
  .mtl-group-ico{width:46px;height:46px;flex:0 0 46px;border-radius:14px;}
  .mtl-group-ico svg{width:26px;height:26px;}
  .mtl-group-name{font-size:13.5px;}
}


/* реквизиты: подпись слева, значение справа на любом экране */
.mtl-req-l li{text-align:left;}
@media (max-width:520px){
  .mtl-req-l li{gap:10px;}
  .mtl-req-k{font-size:13.5px;}
  .mtl-req-v{max-width:none;font-size:14px;}
}


/* реквизиты: убрать маркеры списка, подписи прижать к левому краю */
.mtl-req-l{list-style:none;margin:0;padding:0;}
.mtl-req-l li{margin:0;padding:10px 0;}
.mtl-req-l li::marker{content:"";}
.mtl-req-k{padding-left:0;}


/* реквизиты: чёрточки по центру строки */
.mtl-req-l li{position:relative;padding-left:22px;}
.mtl-req-l li::before{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  margin:0;
  width:11px;
  height:1px;
}


/* убрана декоративная черта под первым экраном */
.mtl-edge--bottom{display:none !important;}


/* новый логотип: подмена только в зеркале, боевой файл не трогаем */
.logo-row img[src*="logo.png"],
.logo img[src*="logo.png"],
a.logo-block img[src*="logo.png"],
img[alt="ТК МЕТАЛЛУРГ"]{
  content:url("/upload/logo_metallurg_2026.png");
  max-height:52px;
  width:auto;
  height:auto;
}
@media (max-width:760px){
  img[alt="ТК МЕТАЛЛУРГ"]{max-height:40px;}
}


/* плитки первого экрана: на телефоне прячем, там ниже идёт каталог */
@media (max-width:900px){
  .mtl-draft{display:none;}
}


/* плитки первого экрана: крупнее, заполняют колонку целиком */
.mtl-draft{width:100%;}
.mtl-tiles{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.mtl-tile{
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:12px;
  padding:20px 18px;
  min-height:124px;
  font-size:15.5px;
  line-height:1.25;
  border-radius:16px;
}
.mtl-tile svg{width:40px;height:40px;flex:0 0 40px;}
.mtl-tiles-all{margin-top:18px;font-size:15px;}

@media (max-width:1200px){
  .mtl-tile{min-height:112px;padding:16px 14px;font-size:14.5px;}
  .mtl-tile svg{width:34px;height:34px;flex:0 0 34px;}
}


/* плитки первого экрана: при наведении текст белым, иконка светлее */
.mtl-tile:hover,
.mtl-tile:focus-visible{
  color:#FFFFFF;
}
.mtl-tile:hover span,
.mtl-tile:focus-visible span{
  color:#FFFFFF;
}
.mtl-tile:hover svg,
.mtl-tile:focus-visible svg{
  stroke:#FFFFFF;
}


/* первый экран: воздух между кнопкой, блоком звонка и сноской */
.mtl-hero-actions{gap:20px;margin-bottom:22px;}
.mtl-hero-star{
  margin-top:0;
  padding-left:14px;
  border-left:2px solid rgba(138,170,208,.35);
  color:#8FA6C6;
  font-size:13.5px;
  line-height:1.5;
  max-width:520px;
}
@media (max-width:900px){
  .mtl-hero-actions{gap:14px;margin-bottom:18px;}
}


/* плитки: переносить по словам, без дефисов посреди слова */
.mtl-tile{
  hyphens:none;
  -webkit-hyphens:none;
  overflow-wrap:normal;
  word-break:normal;
}
.mtl-tile span{
  hyphens:none;
  -webkit-hyphens:none;
  overflow-wrap:normal;
}
.mtl-group-name{
  hyphens:none;
  -webkit-hyphens:none;
  overflow-wrap:normal;
}




/* блок цифр: при наведении цифра загорается оранжевым, как «0» */
.mtl-fig{
  padding:14px 16px;
  border-radius:14px;
  transition:background .2s;
  cursor:default;
}
.mtl-fig .mtl-fig-n{transition:color .2s;}
.mtl-fig .mtl-fig-b{transition:background .2s;}
.mtl-fig:hover .mtl-fig-n{color:#FF8A4C;}
.mtl-fig:hover .mtl-fig-b{background:#FF8A4C;}
.mtl-fig:hover{background:rgba(255,106,43,.07);}


/* цифры: подсветка должна перебивать базовые правила блока */
.mtl-figures .mtl-rail .mtl-fig:hover .mtl-fig-n,
.mtl-fig:hover .mtl-fig-n{color:#FF8A4C !important;}
.mtl-figures .mtl-rail .mtl-fig:hover .mtl-fig-b,
.mtl-fig:hover .mtl-fig-b{background:#FF8A4C !important;}


/* логотип: знак «Снабжение предприятий», ровная оранжевая черта, цвет под сайт */
img[src*="/upload/CLite/"][src$="logo.png"],
.logo img{
  content:url(/upload/mtl/logo_metallurg.png);
  width:auto;max-height:52px;
}

/* ==========================================================================
   ПЕРВЫЙ ЭКРАН. Вместо плиток товарных групп (они дублировали каталог ниже)
   стоит фотография погрузки: доказательство своего склада и транспорта.
   ========================================================================== */
.mtlx .mtl-hero-photo{display:flex;align-items:center;justify-content:center;height:100%}
.mtlx .mtl-hero-photo figure{margin:0;width:100%;border-radius:20px;overflow:hidden;
  box-shadow:0 24px 60px rgba(4,12,26,.45);border:1px solid rgba(255,255,255,.10)}
.mtlx .mtl-hero-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.mtlx .mtl-hero-btn2{display:inline-flex;align-items:center;justify-content:center;height:60px;padding:0 26px;
  margin-left:12px;border-radius:14px;border:1px solid rgba(255,255,255,.35);color:#fff;font-weight:600;
  font-size:16px;text-decoration:none;transition:background .15s,border-color .15s}
.mtlx .mtl-hero-btn2:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
@media (max-width:1000px){
  .mtlx .mtl-hero-photo{margin-top:24px}
  .mtlx .mtl-hero-btn2{margin:12px 0 0;width:100%}
}

/* Первый экран: фотография уходит в правый край и врезается в фон по диагонали. */
.mtlx .mtl-hero{position:relative;overflow:hidden}
.mtlx .mtl-hero-photo{position:absolute;top:0;right:0;width:54%;height:100%;padding:0;margin:0;z-index:0}
.mtlx .mtl-hero-photo figure{margin:0;width:100%;height:100%;border:0;border-radius:0;box-shadow:none;
  clip-path:polygon(22% 0, 100% 0, 100% 100%, 0 100%)}
.mtlx .mtl-hero-photo img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center}
.mtlx .mtl-hero-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg, var(--nav-950) 0%, rgba(11,21,38,.75) 16%, rgba(11,21,38,0) 46%)}
.mtlx .mtl-hero-grid{position:relative;z-index:1}
.mtlx .mtl-hero-copy{max-width:640px}
@media (max-width:1000px){
  .mtlx .mtl-hero-photo{position:static;width:100%;height:auto;margin-top:22px}
  .mtlx .mtl-hero-photo figure{clip-path:none;border-radius:18px}
  .mtlx .mtl-hero-photo img{aspect-ratio:4/3}
  .mtlx .mtl-hero-photo::after{display:none}
}

/* Фото первого экрана считает координаты от секции, иначе не доходит до края экрана. */
.mtlx .mtl-hero-grid{position:static}
.mtlx .mtl-hero{position:relative}
.mtlx .mtl-hero-photo{position:absolute;top:0;right:0;bottom:0;left:auto;width:58%;height:100%}
.mtlx .mtl-hero-photo figure{height:100%;clip-path:polygon(18% 0, 100% 0, 100% 100%, 0 100%)}
.mtlx .mtl-hero-photo img{height:100%;object-fit:cover}
@media (max-width:1000px){
  .mtlx .mtl-hero-grid{position:relative}
  .mtlx .mtl-hero-photo{position:static;width:100%;height:auto}
}

/* На телефоне диагональ не нужна: фото идёт карточкой над текстом. */
@media (max-width:1000px){
  .mtlx .mtl-hero-photo figure{clip-path:none!important;border-radius:16px!important;height:auto!important}
  .mtlx .mtl-hero-photo img{height:auto!important;aspect-ratio:4/3}
  .mtlx .mtl-hero-photo::after{display:none!important}
  .mtlx .mtl-hero-photo{margin-bottom:18px}
}

/* 22.09: подсветка при наведении принесла padding:14px 16px и перебила обнуление
   у первой и четвёртой карточек — левый край цифр разъезжался на 16px и на
   телефоне, и на десктопе. Выравниваем все. */
.mtl-fig:first-child,
.mtl-fig:nth-child(4){padding-left:16px;}
@media (max-width:760px){
  .mtl-fig,
  .mtl-fig:first-child,
  .mtl-fig:nth-child(4){padding-left:16px;}
}

/* 22.09: на телефоне у карточек внутренний отступ был разный — 24, 26 и 30px,
   и текст вставал на 45, 47 и 50. Заказчик это видит как «отступы везде разные».
   Сводим к одному шагу 24px, чтобы левый край был общий. */
@media (max-width:760px){
  .mtl-form, .mtl-rate, .mtl-mini{padding-left:24px;padding-right:24px;}
  .mtl-steps{padding-left:24px;}
  .mtl-step::before{left:-24px;}
  .mtl-steps::before{left:2px;}
}
@media (max-width:760px){
  /* список реквизитов стоял на 49px, остальной вложенный текст на 44 */
  .mtl-req-l{padding-left:0;}
  .mtl-req-l li{padding-left:24px;}
}

/* 22.09, просьба Игоря: на телефоне контакты под шапкой, почта заметная —
   основная часть заявок приходит на неё. На десктопе контакты в шапке есть,
   поэтому строку показываем только на узких экранах. */
.mtl-mobcontacts{display:none;}
@media (max-width:760px){
  .mtl-mobcontacts{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:10px 20px;background:#0E1A2E;border-bottom:1px solid rgba(174,204,240,.14);
  }
  .mtl-mobcontacts__mail{
    font-size:17px;font-weight:700;color:#FF8A4C;text-decoration:none;
    letter-spacing:.2px;white-space:nowrap;
  }
  .mtl-mobcontacts__tel{
    font-size:14px;color:#A7BEDC;text-decoration:none;white-space:nowrap;
  }
}
@media (max-width:380px){
  .mtl-mobcontacts{flex-direction:column;align-items:flex-start;gap:4px;}
  .mtl-mobcontacts__mail{font-size:16px;}
}

/* End */


/* Start:/bitrix/templates/metallurg-new/css/mtl_pages.css?179062759321679*/
/* ==========================================================================
   ТК «Металлург» — внутренние страницы. Опираются на mtl_sections.css:
   переменные, .mtl-sec / .mtl-wrap / .mtl-head / .mtl-card берутся оттуда.
   Здесь только то, чего на главной не было: сетки, списки, карта, таблицы.
   ========================================================================== */

.mtlp-grid{display:grid;gap:clamp(16px,2vw,24px);}
.mtlp-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.mtlp-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.mtlp-grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:1000px){
  .mtlp-grid--3,.mtlp-grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:620px){
  .mtlp-grid--2,.mtlp-grid--3,.mtlp-grid--4{grid-template-columns:minmax(0,1fr);}
}

.mtlp-ico{
  width:52px;height:52px;border-radius:14px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#FFF1E6,#FFE0CC);color:#F2551A;
  margin-bottom:18px;
}
.mtlp-ico svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;}
.mtlp-t{font-size:var(--t-h3);font-weight:800;color:var(--ink);margin:0 0 10px;line-height:1.25;}
.mtlp-p{color:var(--ink-2);line-height:1.6;margin:0;font-size:var(--t-md);}
.mtlp-p + .mtlp-p{margin-top:12px;}

.mtlp-ul{margin:14px 0 0;padding:0;list-style:none;}
.mtlp-ul li{position:relative;padding-left:24px;margin:0 0 10px;color:var(--ink-2);
  line-height:1.55;font-size:var(--t-md);}
.mtlp-ul li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;
  border-radius:2px;background:var(--ember);}
.mtlp-ul li:last-child{margin-bottom:0;}

/* плитка услуги/раздела: иконка слева, текст справа */
.mtlp-row{display:flex;gap:16px;align-items:flex-start;}
.mtlp-row .mtlp-ico{margin-bottom:0;width:46px;height:46px;border-radius:12px;}
.mtlp-row .mtlp-ico svg{width:24px;height:24px;}
.mtlp-row-t{font-weight:700;color:var(--ink);font-size:var(--t-md);line-height:1.35;}
.mtlp-row-p{color:var(--ink-2);font-size:var(--t-sm);line-height:1.5;margin-top:6px;}

.mtlp-map{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  height:clamp(320px,42vw,520px);background:var(--paper);}
.mtlp-map iframe{width:100%;height:100%;border:0;display:block;}

/* якорная строка контакта */
.mtlp-line{display:flex;align-items:baseline;gap:12px;padding:12px 0;
  border-bottom:1px dashed var(--line);}
.mtlp-line:last-child{border-bottom:0;}
.mtlp-line-k{color:var(--ink-2);font-size:var(--t-sm);flex:0 0 auto;}
.mtlp-line-v{font-weight:700;color:var(--ink);font-size:var(--t-md);margin-left:auto;
  text-align:right;}
.mtlp-line-v a{color:inherit;text-decoration:none;}
.mtlp-line-v a:hover{color:var(--ember);}

.mtlp-note{
  margin-top:var(--gap);border-radius:var(--r);padding:22px 24px;
  background:var(--paper);border:1px solid var(--line);color:var(--ink-2);
  font-size:var(--t-md);line-height:1.6;
}
.mtlp-note b{color:var(--ink);}

/* ==========================================================================
   НАВЕДЕНИЕ. .mtl-card:hover заливает карточку тёмным и красит в белый только
   классы главной (.mtl-card-t, .mtl-card-l). Свои классы внутренних страниц
   оставались тёмными на тёмном — текст пропадал. Дублируем правила для них.
   ========================================================================== */
.mtl-card:hover .mtlp-t{color:#fff;}
.mtl-card:hover .mtlp-p{color:#A7BEDC;}
.mtl-card:hover .mtlp-ul li{color:#A7BEDC;}
.mtl-card:hover .mtlp-row-t{color:#fff;}
.mtl-card:hover .mtlp-row-p{color:#A7BEDC;}
.mtl-card:hover .mtlp-line{border-bottom-color:rgba(255,255,255,.18);}
.mtl-card:hover .mtlp-line-k{color:#A7BEDC;}
.mtl-card:hover .mtlp-line-v,
.mtl-card:hover .mtlp-line-v a{color:#fff;}
.mtl-card:hover .mtlp-line-v a:hover{color:var(--ember-2);}
.mtl-card:hover .mtlp-ico{
  background:linear-gradient(150deg,var(--nav-700) 0%,var(--nav-900) 100%);
  color:var(--ember-2);
}
.mtl-card:hover a{color:var(--ember-2);}

/* На тач-экранах наведения нет — карточка остаётся светлой, цвета прежние. */
@media (hover:none){
  .mtl-card:hover .mtlp-t{color:var(--ink);}
  .mtl-card:hover .mtlp-p,
  .mtl-card:hover .mtlp-ul li,
  .mtl-card:hover .mtlp-row-p{color:var(--ink-2);}
  .mtl-card:hover .mtlp-row-t,
  .mtl-card:hover .mtlp-line-v,
  .mtl-card:hover .mtlp-line-v a{color:var(--ink);}
  .mtl-card:hover .mtlp-line-k{color:var(--ink-2);}
  .mtl-card:hover .mtlp-line{border-bottom-color:var(--line);}
  .mtl-card:hover .mtlp-ico{background:linear-gradient(135deg,#FFF1E6,#FFE0CC);color:#F2551A;}
}

/* ==========================================================================
   РЕКВИЗИТЫ НА ТЕЛЕФОНЕ. Строка «ключ слева — значение справа» на узком экране
   ломала значение в столбик по одному слову и выносила длинные слова за край
   карточки, а чёрточка ::before уезжала на середину высокой строки.
   На узких экранах строка становится вертикальной, чёрточка встаёт к ключу.
   ========================================================================== */
.mtlx .mtl-req-v{overflow-wrap:anywhere;word-break:normal;}

@media (max-width:640px){
  .mtlx .mtl-req{padding:20px 18px;}
  .mtlx .mtl-req-l li{
    display:block;
    padding-left:18px;
    padding-top:12px;padding-bottom:12px;
  }
  .mtlx .mtl-req-l li::before{top:18px;transform:none;}
  .mtlx .mtl-req-k{
    display:block;white-space:normal;
    font-size:13px;line-height:1.35;margin-bottom:6px;
  }
  .mtlx .mtl-req-v{
    display:block;text-align:left;margin-left:0;max-width:none;
    font-size:15px;line-height:1.4;
  }
}

/* строки контактов внутри карточек — та же логика */
@media (max-width:640px){
  .mtlx .mtlp-line{display:block;padding:12px 0;}
  .mtlx .mtlp-line-k{display:block;margin-bottom:4px;}
  .mtlx .mtlp-line-v{display:block;text-align:left;margin-left:0;}
}

/* ссылка внутри текста страницы */
.mtlx .mtlp-a{color:#F2551A;text-decoration:none;font-weight:700;}
.mtlx .mtlp-a:hover{text-decoration:underline;}
.mtl-card:hover .mtlp-a{color:var(--ember-2);}

/* ==========================================================================
   ПРАВКИ ПО ИТОГАМ ПРИЁМКИ
   ========================================================================== */

/* 1. Секции во всю ширину. На главной .mtlx лежит в .container (100%),
   на внутренних — в .maxwidth-theme (max-width:1402px), из-за чего серые
   и тёмные полосы превращались в коробки с белыми полями по краям. */
.mtlx > section{
  margin-inline:calc(50% - 50vw);
  padding-inline:calc(50vw - 50%);
}
html{overflow-x:hidden;}

/* 2. Чёрточка в реквизитах вставала по середине ВСЕЙ строки: в двухстрочных
   значениях уезжала вниз на 12px. Привязываем к первой строке.
   Заодно задаём свой цвет: без него подтягивался серый #666 темы Аспро. */
.mtlx .mtl-req-l li::before{
  content:"";
  background:var(--ember);
  top:1.45em;
  transform:none;
}

/* 3. Блок-подсказка был серым на сером фоне секции — рамка почти не видна. */
.mtlx .mtl-sec--paper .mtlp-note{
  background:#fff;
  border-left:3px solid var(--ember);
}

/* 4. Ссылка в тексте: оранжевый #F2551A давал контраст 3,2:1 — ниже нормы.
   Берём тёмный оттенок и возвращаем подчёркивание. */
.mtlx .mtlp-a{
  color:#C2410C;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(194,65,12,.35);
}
.mtlx .mtlp-a:hover{text-decoration-color:currentColor;}
.mtl-card:hover .mtlp-a{color:var(--ember-2);text-decoration-color:rgba(255,145,71,.5);}

/* 5. Финальный блок на внутренних — это призыв перед подвалом, а не проставка
   между секциями: даём ему воздух и не даём кнопкам падать под текст. */
.mtlx .mtl-price-band{padding:clamp(48px,5vw,72px) 0;}
.mtlx .mtl-price-copy{flex:1 1 520px;min-width:0;}
.mtlx .mtl-price-act{flex:0 0 auto;}

/* 6. Сетка из четырёх карточек сужалась до 227px раньше, чем срабатывал
   брейкпоинт: текстовая колонка оставалась 171px. */
@media (max-width:1200px){
  .mtlp-grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* 7. Плашка «Написать в WhatsApp» висит поверх контента (fixed, bottom:20px)
   и накрывала нижнюю карточку. Двигать чужой элемент шаблона не стали —
   вместо этого даём контенту запас снизу на высоту плашки. */
@media (max-width:640px){
  .mtlx > section:last-of-type{padding-bottom:calc(clamp(48px,5vw,72px) + 76px);}
}

/* ==========================================================================
   ПОРЯДОК МЕДИА-ЗАПРОСОВ. Правило .mtlp-grid--4 на 1200px было дописано позже
   правила на 620px и перебивало его: на телефоне карточки оставались в две
   колонки, текст рвался по слову, длинные слова вылезали за край.
   Это правило идёт последним и возвращает одну колонку на узких экранах.
   ========================================================================== */
@media (max-width:640px){
  .mtlx .mtlp-grid--2,
  .mtlx .mtlp-grid--3,
  .mtlx .mtlp-grid--4{grid-template-columns:minmax(0,1fr) !important;}
  .mtlx .mtl-card{padding:20px 18px;}
  .mtlx .mtlp-t{hyphens:auto;}
  .mtlx .mtlp-p,
  .mtlx .mtlp-t{overflow-wrap:anywhere;}
}

/* ==========================================================================
   ПЕРВЫЙ ЭКРАН ВНУТРЕННИХ СТРАНИЦ.
   Было: заголовок и лид на пустом белом поле — заказчик написал
   «просто большой текст на белом фоне». Делаем шапку раздела плашкой
   в фирменном тёмно-синем, как первый экран главной.
   ========================================================================== */
.mtlx > section.mtl-sec--white:first-of-type{
  background:linear-gradient(120deg,#0E1F38 0%,#16304F 55%,#1D3A5E 100%);
  padding:clamp(34px,4vw,56px) 0 clamp(38px,4.4vw,60px);
  position:relative;
}
.mtlx > section.mtl-sec--white:first-of-type::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--ember),rgba(255,106,43,0));
}
.mtlx > section.mtl-sec--white:first-of-type .mtl-h2{color:#fff;}
.mtlx > section.mtl-sec--white:first-of-type .mtl-lead{color:#A9C0DC;max-width:62ch;}
.mtlx > section.mtl-sec--white:first-of-type .mtl-over{color:#FFB07A;}
.mtlx > section.mtl-sec--white:first-of-type .mtl-head{margin-bottom:0;}

/* Верхняя серая полоса дублировала почту, режим и адрес — они уже есть
   в шапке и подвале. Заказчик попросил убрать. */
.mt-topline{display:none !important;}

/* ==========================================================================
   Между меню и плашкой шло: крошки «Главная › Услуги», затем заголовок
   «Услуги», затем заголовок в плашке. Одно и то же слово три раза подряд.
   Убираем штатный заголовок страницы там, где есть наш блок (body:has(.mtlx)),
   крошки оставляем — они в ТЗ, п.14 Б. На страницах без наших блоков
   (каталог и прочее) заголовок остаётся на месте.
   ========================================================================== */
body:has(.mtlx) .breadcrumbs{display:none !important;}
body:has(.mtlx) .page-top{padding-bottom:0 !important;margin-bottom:0 !important;
  padding-top:clamp(18px,2vw,26px) !important;}
body:has(.mtlx) .page-top .topic,
body:has(.mtlx) #pagetitle{margin-bottom:0 !important;}

/* Логотипы металлургических комбинатов в карточках партнёров */
.mtlx .mtlp-logo{
  display:flex;
  align-items:center;
  min-height:46px;
  margin-bottom:14px;
}
.mtlx .mtlp-logo img{
  max-height:42px;
  max-width:168px;
  width:auto;
  height:auto;
  object-fit:contain;
}
.mtlx .mtlp-logo--text{
  font-weight:800;
  font-size:26px;
  letter-spacing:.06em;
  color:#1b2a41;
}
@media (max-width:767px){
  .mtlx .mtlp-logo{min-height:38px;margin-bottom:10px}
  .mtlx .mtlp-logo img{max-height:34px;max-width:140px}
  .mtlx .mtlp-logo--text{font-size:22px}
}

/* Оптическое выравнивание: у знаков разная пропорция, одна max-height их не ровняет */
.mtlx .mtlp-logo{min-height:52px}
.mtlx .mtlp-logo img[alt="ЕВРАЗ"]{max-height:30px;max-width:176px}
.mtlx .mtlp-logo img[alt="ММК"]{max-height:46px;max-width:60px}
.mtlx .mtlp-logo img[alt="НЛМК"]{max-height:48px;max-width:110px}
.mtlx .mtlp-logo img[alt="Северсталь"]{max-height:32px;max-width:180px}
.mtlx .mtlp-logo img[alt="ОМК"]{max-height:42px;max-width:172px}
.mtlx .mtlp-logo img[alt="ТМК"]{max-height:48px;max-width:56px}
.mtlx .mtlp-logo img[alt="РУСАЛ"]{max-height:34px;max-width:150px}
.mtlx .mtlp-logo--text{font-size:28px}
@media (max-width:767px){
  .mtlx .mtlp-logo{min-height:42px}
  .mtlx .mtlp-logo img[alt="ЕВРАЗ"]{max-height:24px;max-width:148px}
  .mtlx .mtlp-logo img[alt="ММК"]{max-height:38px}
  .mtlx .mtlp-logo img[alt="НЛМК"]{max-height:40px}
  .mtlx .mtlp-logo img[alt="Северсталь"]{max-height:26px;max-width:150px}
  .mtlx .mtlp-logo img[alt="ОМК"]{max-height:34px;max-width:144px}
  .mtlx .mtlp-logo img[alt="ТМК"]{max-height:40px}
  .mtlx .mtlp-logo img[alt="РУСАЛ"]{max-height:28px;max-width:126px}
  .mtlx .mtlp-logo--text{font-size:23px}
}

/* Страница прайса */
.mtl-price .mtlprice-tools{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:28px 0 20px}
.mtl-price .mtlprice-search{
  flex:1 1 320px;min-width:0;padding:14px 18px;border:1px solid var(--mtl-line,#e2e8f0);
  border-radius:12px;font-size:16px;background:#fff;color:inherit;
}
.mtl-price .mtlprice-search:focus{outline:none;border-color:#1b2a41}
.mtl-price .mtlprice-dl{
  display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:12px;
  background:#1b2a41;color:#fff;font-weight:600;text-decoration:none;white-space:nowrap;
}
.mtl-price .mtlprice-dl:hover{background:#26384f;color:#fff}
.mtl-price .mtlprice-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.mtl-price .mtlprice-chip{
  padding:8px 14px;border-radius:999px;background:#eef2f7;color:#334155;
  font-size:13px;text-decoration:none;line-height:1.2;
}
.mtl-price .mtlprice-chip:hover{background:#dde5ef;color:#1b2a41}
.mtl-price .mtlprice-sec{margin:0 0 40px}
.mtl-price .mtlprice-sec[hidden]{display:none}
.mtl-price .mtlprice-t{font-size:20px;font-weight:700;margin:0 0 14px;color:#1b2a41}
.mtl-price .mtlprice-tablewrap{overflow-x:auto;background:#fff;border-radius:14px;padding:4px}
.mtl-price .mtlprice-table{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.mtl-price .mtlprice-table th{
  text-align:left;padding:12px 14px;font-weight:600;font-size:13px;color:#64748b;
  border-bottom:1px solid #e2e8f0;white-space:nowrap;
}
.mtl-price .mtlprice-table td{padding:11px 14px;border-bottom:1px solid #f1f5f9;vertical-align:top}
.mtl-price .mtlprice-table tr[hidden]{display:none}
.mtl-price .mtlprice-num{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600}
.mtl-price .mtlprice-note{color:#94a3b8;font-size:13px}
.mtl-price .mtlprice-dash{color:#cbd5e1}
.mtl-price .mtlprice-warn{
  padding:14px 18px;border-radius:12px;background:#fff4e5;color:#7c4a03;margin:20px 0 0;
}
.mtl-price .mtlprice-foot{color:#64748b;font-size:14px;margin-top:8px}
@media (max-width:767px){
  .mtl-price .mtlprice-tools{gap:10px}
  .mtl-price .mtlprice-dl{width:100%;justify-content:center}
  .mtl-price .mtlprice-table{font-size:14px}
  .mtl-price .mtlprice-note{display:none}
  .mtl-price .mtlprice-table th:nth-child(4){display:none}
}

/* На странице прайса шаблон подкладывает тёмный фон — секции задаём цвет явно */
.mtl-price .mtl-sec--white{background:#ffffff}
.mtl-price .mtl-sec--paper{background:#f4f6f9}
.mtl-price .mtl-lead{color:#475569}

/* Колонка единицы поставщика */
.mtl-price .mtlprice-unit{color:#64748b;font-size:13px;white-space:nowrap}
@media (max-width:767px){
  .mtl-price .mtlprice-table th:nth-child(3),
  .mtl-price .mtlprice-table td:nth-child(3){display:none}
  .mtl-price .mtlprice-table th:nth-child(5),
  .mtl-price .mtlprice-table td:nth-child(5){display:none}
}

/* На телефоне в таблице остаются только позиция и две цены — они должны влезать
   в экран без горизонтальной прокрутки, иначе цену не видно вообще */
@media (max-width:767px){
  .mtl-price .mtlprice-table{min-width:0;font-size:13px}
  .mtl-price .mtlprice-table th,
  .mtl-price .mtlprice-table td{padding:9px 8px}
  .mtl-price .mtlprice-tablewrap{padding:0}
}

/* Прайс: оглавление и подгружаемые разделы */
.mtl-price .mtlprice-block{margin:0 0 44px}
.mtl-price .mtlprice-blockt{margin:0 0 6px}
.mtl-price .mtlprice-blockinfo{color:#64748b;font-size:14px;margin:0 0 16px}
.mtl-price .mtlprice-blockinfo a{color:#1b2a41;text-decoration:underline}
.mtl-price .mtlprice-secs{display:flex;flex-direction:column;gap:8px}
.mtl-price .mtlprice-det{background:#fff;border-radius:12px;overflow:hidden}
.mtl-price .mtlprice-sum{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;cursor:pointer;list-style:none;min-height:52px;
}
.mtl-price .mtlprice-sum::-webkit-details-marker{display:none}
.mtl-price .mtlprice-sumt{font-weight:600;color:#1b2a41}
.mtl-price .mtlprice-cnt{color:#94a3b8;font-size:13px;font-variant-numeric:tabular-nums}
.mtl-price .mtlprice-det[open] .mtlprice-sum{border-bottom:1px solid #eef2f7}
.mtl-price .mtlprice-body{padding:4px 6px 10px}
.mtl-price .mtlprice-loading,
.mtl-price .mtlprice-empty{color:#64748b;padding:12px 14px;margin:0;font-size:14px}
.mtl-price .mtlprice-results{margin-top:20px}
.mtl-price .mtlprice-subt{font-size:15px;font-weight:600;color:#1b2a41;margin:18px 0 8px}

/* При наведении карточка партнёра темнеет, и синие логотипы пропадали.
   Держим логотип на своей белой подложке — читается на любом фоне. */
.mtlx .mtlp-logo{
  background:#fff;
  border-radius:10px;
  padding:6px 12px;
  align-self:flex-start;
  min-height:auto;
  box-sizing:border-box;
}
.mtlx .mtl-card:hover .mtlp-logo{background:#fff}
.mtlx .mtlp-logo--text{background:transparent;padding:0}
.mtlx .mtl-card:hover .mtlp-logo--text{color:#fff}

/* ==========================================================================
   КАРТОЧКИ КОМБИНАТОВ. Тёмная заливка при наведении съедала цветные логотипы,
   поэтому под логотип клали белый прямоугольник — он шире знака и выглядел
   заплаткой. Карточки с логотипом больше не темнеют: подложка не нужна.
   ========================================================================== */
.mtlx .mtlp-logo{background:transparent;padding:0;border-radius:0}
.mtlx .mtl-card:has(.mtlp-logo):hover{
  background:#fff;
  border-color:var(--ember);
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(11,21,38,.14);
}
.mtlx .mtl-card:has(.mtlp-logo):hover .mtlp-t{color:var(--nav-950)}
.mtlx .mtl-card:has(.mtlp-logo):hover .mtlp-p,
.mtlx .mtl-card:has(.mtlp-logo):hover .mtlp-ul li{color:var(--nav-500)}
.mtlx .mtl-card:has(.mtlp-logo):hover .mtlp-logo{background:transparent}
.mtlx .mtl-card:has(.mtlp-logo) .mtlp-logo img{transition:transform .25s}
.mtlx .mtl-card:has(.mtlp-logo):hover .mtlp-logo img{transform:scale(1.04)}

/* End */


/* Start:/bitrix/templates/metallurg-new/css/mtl_photo.css?1790627593862*/
/* Фото со склада и доставок: доказательство рядом с текстом, а не альбом. */
.mtlx .mtlph{margin:0;padding:0;border:0;background:none}
.mtlx .mtlph img{display:block;width:100%;height:auto;border-radius:14px;object-fit:cover;background:#eef2f7}
.mtlx .mtlph figcaption{margin-top:10px;font-size:14px;line-height:1.45;color:var(--nav-500)}

.mtlx .mtlph--proof{margin:22px 0 0}
.mtlx .mtlph--proof img{aspect-ratio:3/2}

.mtlx .mtlph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.mtlx .mtlph-grid .mtlph img{aspect-ratio:3/2;transition:transform .25s}
.mtlx .mtlph-grid .mtlph:hover img{transform:scale(1.02)}
@media (max-width:900px){.mtlx .mtlph-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.mtlx .mtlph-grid{grid-template-columns:1fr;gap:12px}}

/* End */
/* /bitrix/templates/metallurg-new/css/mtl_sections.css?179062759340982 */
/* /bitrix/templates/metallurg-new/css/mtl_pages.css?179062759321679 */
/* /bitrix/templates/metallurg-new/css/mtl_photo.css?1790627593862 */