/*
Theme Name: EMCI Industry
Theme URI: https://emci.md
Author: EMCI
Description: Тема сайта завода-производителя опор освещения и металлоконструкций EMCI. Собрана на основе HTML/CSS/JS прототипа с точным текстом из брифа.
Version: 2.6
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: emci
*/

:root{
  --ink:#1B1030;
  --brand:#4C288A;
  --brand-2:#6B46B8;
  --brand-light:#8B5FD9;
  --brand-deep:#241340;
  --silver:#C9CDD6;
  --silver-light:#F0EEF6;
  --paper:#FBFAFD;
  --steel:#6E6580;
  --line:#E3DEEE;
  --ok:#3FAE6A;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'IBM Plex Sans', sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; /* страховка: ни один элемент не может вызвать горизонтальную прокрутку всей страницы */
}
/* overflow-x:clip (вместо hidden) отсекает лишнее по горизонтали, но НЕ
   делает страницу прокручиваемой вбок — значит, её нечем «сдвинуть».
   hidden оставлен строкой выше как запасной вариант для старых браузеров. */
html{max-width:100%; overflow-x:hidden; overflow-x:clip;}
body{overflow-x:clip;}
/* якорь не должен уезжать под липкую шапку */
html{scroll-padding-top:90px;}
img, svg, iframe{max-width:100%; height:auto;}
h1,h2,h3,h4{font-family:'Archivo', sans-serif; font-weight:800; letter-spacing:-0.01em; line-height:1.08;}
.mono{font-family:'IBM Plex Mono', monospace;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
section{padding:96px 0;}
@media(max-width:720px){ section{padding:56px 0;} .wrap{padding:0 20px;} }

/* ---------- utility ---------- */
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand); display:inline-flex; align-items:center; gap:8px; margin-bottom:18px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--brand);}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:13.5px; letter-spacing:.03em;
  padding:14px 24px; border-radius:3px; cursor:pointer; border:1.5px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-transform:uppercase;
}
.btn-primary{background:var(--brand); color:#fff;}
.btn-primary:hover{background:var(--brand-deep); transform:translateY(-1px);}
.btn-ghost{border-color:var(--ink); color:var(--ink);}
.btn-ghost:hover{background:var(--ink); color:#fff;}
.btn-light{border-color:rgba(255,255,255,.5); color:#fff;}
.btn-light:hover{background:#fff; color:var(--brand-deep);}
.tag{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:600; letter-spacing:.04em;
  padding:5px 10px; border:1px solid var(--line); border-radius:2px; color:var(--steel); background:#fff;
}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:200; background:rgba(251,250,253,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 0;}
.logo{display:flex; align-items:center; gap:10px; font-family:'Archivo'; font-weight:900; font-size:20px; color:var(--brand-deep);}
.logo-mark{width:34px; height:34px; border-radius:8px; background:linear-gradient(135deg,var(--brand-light),var(--brand),var(--brand-deep)); position:relative; flex-shrink:0;}
.logo-mark svg{position:absolute; inset:0; margin:auto;}
.header-logo-img{height:48px; width:auto; display:block; border-radius:50%;}
.footer-logo-img{height:64px; width:auto; display:block;}
@media(max-width:400px){ .header-logo-img{height:40px;} }
.navlinks{display:flex; gap:2px; align-items:center;}
.navlinks > a{font-size:14px; font-weight:600; padding:10px 14px; border-radius:4px; color:var(--ink); position:relative;}
.navlinks > a:hover{color:var(--brand);}
.navlinks > a.active{color:var(--brand);}
.navcta{display:flex; gap:10px; align-items:center;}
.dropdown{position:relative;}
.dropdown-panel{
  position:absolute; top:100%; left:50%;
  transform:translateX(-50%) translateY(4px);
  padding-top:14px; /* невидимая зона-«мостик»: мышь остаётся внутри элемента, наведение не прерывается */
  min-width:230px; z-index:50;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.dropdown-panel.open{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.dropdown-panel-inner{
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 20px 40px rgba(36,19,64,.14); padding:10px;
}
.dropdown-panel a{display:block; padding:9px 12px; border-radius:6px; font-size:13.5px; font-weight:500;}
.dropdown-panel a:hover{background:var(--silver-light); color:var(--brand);}
.mobile-btn{display:none; font-size:24px; background:none; border:none; cursor:pointer; color:var(--ink);}
.navlinks-mobile{display:none; flex-direction:column; border-top:1px solid var(--line); background:#fff;}
.navlinks-mobile.open{display:flex;}
.navlinks-mobile a{padding:14px 28px; font-size:14.5px; font-weight:500; color:var(--ink); border-bottom:1px solid var(--line);}
.navlinks-mobile a:hover{color:var(--brand); background:var(--silver-light);}

.mobile-accordion-toggle{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:14px 28px; font-size:14.5px; font-weight:500; color:var(--ink);
  border:none; border-bottom:1px solid var(--line); background:#fff; cursor:pointer;
  font-family:'IBM Plex Sans'; text-align:left;
}
.mobile-accordion-toggle:hover{color:var(--brand); background:var(--silver-light);}
.mobile-accordion-arrow{transition:transform .2s ease; color:var(--brand); font-size:12px;}
.mobile-accordion-toggle[aria-expanded="true"] .mobile-accordion-arrow{transform:rotate(180deg);}
.mobile-accordion-panel{
  max-height:0; overflow:hidden; background:var(--silver-light);
  transition:max-height .25s ease;
}
.mobile-accordion-panel.open{max-height:600px;}
.mobile-accordion-panel a{
  padding:12px 28px; font-size:13.5px; border-bottom:1px solid var(--line);
  color:var(--steel); display:flex; align-items:center; gap:8px;
}
.mobile-accordion-panel a::before{content:"—"; color:var(--brand); flex-shrink:0;}
.mobile-accordion-panel a:first-child{font-weight:600; color:var(--brand);}
.mobile-accordion-panel a:first-child::before{content:"";}
.mobile-accordion-panel a:hover{color:var(--brand); background:#fff;}
@media(max-width:920px){
  .navlinks{display:none;}
  .mobile-btn{display:block;}
}

/* ---------- hero ---------- */
/* Первый экран главной: фоном идёт фотография.
   Размытие запечено прямо в файл assets/images/hero-bg.jpg, а не сделано
   CSS-фильтром — фильтр даёт мыльные края, тормозит на телефоне и всё
   равно заставляет качать полновесный снимок. Размытая картинка к тому же
   жмётся в разы лучше: весь фон весит около 50 КБ.
   Чтобы поменять фото — просто перезалейте файл под тем же именем.
   Затемнение регулируется одной строкой в .hero::before ниже. */
.hero{
  position:relative; overflow:hidden;
  background-color:var(--brand-deep);
  background-image:url('assets/images/hero-bg.jpg');
  background-size:cover; background-position:center 58%;
  color:#fff; padding:120px 0 80px;
}
/* Нейтральное затемнение под белый текст — без цветного тона.
   Хотите светлее или темнее — меняйте два значения прозрачности. */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.52) 45%, rgba(0,0,0,.68) 100%);
}
/* На телефоне фото уходит в сторону, а текст занимает всю ширину —
   поэтому затемняем чуть сильнее, иначе заголовок теряется. */
/* На телефоне широкий кадр 16:9 обрезался бы до узкой полоски посередине,
   поэтому там подставляется отдельный вертикальный файл 3:4 — он и весит
   меньше (29 КБ против 51), и композиция аллеи остаётся целой.
   Затемнение усилено: текст занимает всю ширину и ложится прямо на фото. */
@media(max-width:920px){
  .hero{
    background-image:url('assets/images/hero-bg-mobile.jpg');
    background-position:center center;
  }
  .hero::before{background:linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.6) 50%, rgba(0,0,0,.74) 100%);}
}
/* Экраны с высокой плотностью пикселей на планшете — там широкий кадр
   всё ещё выглядит лучше вертикального. */
@media(min-width:921px) and (max-width:1200px){
  .hero{background-position:center 55%;}
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; position:relative; z-index:2;}
@media(max-width:920px){ .hero-grid{grid-template-columns:1fr;} }
.hero h1{font-size:clamp(34px,5vw,58px); color:#fff; margin-bottom:22px;}
.hero p.lead{font-size:17px; color:rgba(255,255,255,.78); max-width:520px; margin-bottom:34px;}
.hero-btns{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:56px;}
.stat-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid rgba(255,255,255,.16);}
.stat-strip div{padding:20px 18px 0; border-right:1px solid rgba(255,255,255,.16);}
.stat-strip div:last-child{border-right:none;}
.stat-strip .num{font-family:'IBM Plex Mono'; font-weight:600; font-size:20px; color:#fff;}
.stat-strip .lbl{font-size:12px; color:rgba(255,255,255,.6); margin-top:4px;}
@media(max-width:720px){ .stat-strip{grid-template-columns:repeat(2,1fr);} .stat-strip div{margin-top:14px;} }

/* blueprint pole illustration */
/* Чертёж-опора справа. Плашки под ним нет: читаемость на фотофоне даёт
   мягкая тень на самих линиях — она не создаёт видимого прямоугольника. */
.blueprint{position:relative;}
.blueprint svg{filter:drop-shadow(0 2px 7px rgba(0,0,0,.55));}
.blueprint svg{width:100%; height:auto; overflow:visible;}
.blueprint img{width:100%; height:auto; display:block; border-radius:16px; box-shadow:0 30px 70px rgba(15,6,30,.4);}
.dim-label{font-family:'IBM Plex Mono'; font-size:11px; fill:rgba(255,255,255,.85);}
.dim-line{stroke:rgba(255,255,255,.35); stroke-width:1;}
.pole-stroke{stroke:#fff; stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round;}
.pole-fill{fill:rgba(255,255,255,.06);}

/* ---------- why us ---------- */
.section-head{max-width:640px; margin-bottom:52px;}
.section-head h2{font-size:clamp(26px,3.4vw,38px); color:var(--brand-deep);}
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden;}
@media(max-width:920px){ .why-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .why-grid{grid-template-columns:1fr;} }
.why-card{background:#fff; padding:34px 26px;}
.why-num{font-family:'IBM Plex Mono'; color:var(--brand); font-size:12px; font-weight:600; margin-bottom:16px;}
.why-card h3{font-size:18px; color:var(--brand-deep); margin-bottom:10px; font-weight:700;}
.why-card p{font-size:14.5px; color:var(--steel);}

/* ---------- products ---------- */
/* Карточка раздела: слева фото-рендер изделия, справа текст.
   Светлая карточка на светлой секции — как в утверждённом макете. */
.products{background:linear-gradient(180deg, var(--paper) 0%, var(--silver-light) 100%);}
.products .section-head h2{color:var(--brand-deep);}
.products .eyebrow{color:var(--brand);}
.products .section-head p{color:var(--steel);}
.products-light{background:linear-gradient(180deg, var(--silver-light) 0%, var(--paper) 100%);}

.prod-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px;}
@media(max-width:820px){ .prod-grid{grid-template-columns:1fr;} }

.prod-card{
  display:grid; grid-template-columns:40% 1fr; align-items:center; gap:18px;
  background:linear-gradient(150deg, #fff 0%, #fff 45%, #F6F3FC 100%);
  border:1px solid var(--line); border-radius:20px;
  padding:26px 28px 26px 18px; overflow:hidden; position:relative;
  box-shadow:0 14px 34px rgba(36,19,64,.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.prod-card:hover{transform:translateY(-4px); box-shadow:0 22px 48px rgba(36,19,64,.12); border-color:var(--brand-light);}

/* Фото товара снято на белом. mix-blend-mode:multiply убирает этот белый
   фон, и рендер ложится прямо на градиент карточки без видимого прямоугольника. */
.prod-card-media{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:1/1; min-width:0;
}
.prod-card-media img{
  width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply;
}
.prod-card-media .prod-icon{width:52%; height:auto; color:var(--brand);}

.prod-card-body{min-width:0;}
.prod-card h3{font-size:clamp(19px,2.1vw,26px); color:var(--brand-deep); margin:0 0 14px; line-height:1.12;}
.prod-card-rule{display:block; width:46px; height:3px; border-radius:2px; background:var(--brand); margin-bottom:16px;}
.prod-card .hook{font-size:13px; color:var(--brand); font-weight:600; margin-bottom:8px;}
.prod-card p{font-size:14px; color:var(--steel); line-height:1.6; margin:0;}
.prod-card .go{
  margin-top:18px; font-size:14px; font-weight:600; color:var(--brand);
  display:inline-flex; align-items:center; gap:10px;
}
.prod-card .go-arrow{transition:transform .2s ease; display:inline-block;}
.prod-card:hover .go-arrow{transform:translateX(5px);}

/* Телефон: фото сверху по центру, текст под ним */
@media(max-width:560px){
  .prod-card{grid-template-columns:1fr; gap:10px; padding:22px; text-align:left;}
  .prod-card-media{aspect-ratio:4/3; max-width:190px; margin:0 auto;}
  .prod-card h3{font-size:20px; margin-bottom:10px;}
  .prod-card-rule{margin-bottom:12px;}
}

/* ---------- galvanizing ---------- */
.galv{background:linear-gradient(120deg, var(--silver-light) 0%, var(--paper) 55%);}
.galv-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
@media(max-width:920px){ .galv-grid{grid-template-columns:1fr; gap:36px;} }
.galv h2{font-size:clamp(26px,3.6vw,40px); color:var(--brand-deep); margin-bottom:20px;}
.galv p{color:var(--steel); font-size:15.5px; margin-bottom:16px;}
.galv-list{list-style:none; margin-top:22px;}
.galv-list li{display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--line); font-size:14.5px; color:var(--ink);}
.galv-list li::before{content:"—"; color:var(--brand); font-weight:700; flex-shrink:0;}
.galv-visual{position:relative; aspect-ratio:1/1; border-radius:20px; background:radial-gradient(circle at 30% 20%, var(--brand-light), var(--brand-deep) 75%); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.galv-visual svg{width:60%;}
.std-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:28px;}

/* ---------- certs ---------- */
.certs{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff;}
.certs .wrap{padding:36px 28px;}
.certs-inner{width:100%;}
.certs-list{display:flex; gap:26px; flex-wrap:wrap; font-family:'IBM Plex Mono'; font-weight:600; font-size:14px; color:var(--brand-deep);}

.cert-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; justify-items:center;
}
@media(max-width:720px){ .cert-grid{grid-template-columns:repeat(3, 1fr); gap:10px;} }
@media(max-width:480px){ .cert-grid{grid-template-columns:repeat(3, 1fr); gap:6px;} }
@media(max-width:360px){ .cert-grid{grid-template-columns:repeat(3, 1fr); gap:4px;} }
.cert-thumb{
  border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer;
  padding:0; overflow:hidden; text-align:left; font-family:inherit;
  transition:transform .18s ease, box-shadow .18s ease;
  width:100%; max-width:185px; min-width:0;
}
@media(max-width:480px){ .cert-thumb{max-width:150px; border-radius:8px;} }
@media(max-width:360px){ .cert-thumb{max-width:125px;} }
.cert-thumb:hover{transform:translateY(-3px); box-shadow:0 14px 26px rgba(36,19,64,.12);}
.cert-thumb img{width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top center; display:block; border-bottom:1px solid var(--line);}
.cert-thumb span{display:block; padding:8px 9px; font-family:'IBM Plex Mono'; font-weight:600; font-size:11.5px; line-height:1.3; color:var(--brand-deep);}
@media(max-width:480px){ .cert-thumb span{padding:7px 6px; font-size:10.5px;} }

.cert-modal{
  display:none; position:fixed; inset:0; z-index:500;
  background:rgba(15,7,28,.86); backdrop-filter:blur(4px);
  align-items:center; justify-content:center; padding:30px;
}
.cert-modal.open{display:flex;}
.cert-modal-inner{
  position:relative; max-width:640px; max-height:90vh; width:100%;
  background:#fff; border-radius:14px; padding:20px; overflow:auto;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.cert-modal-title{font-family:'IBM Plex Mono'; font-weight:600; font-size:14px; color:var(--brand-deep); align-self:flex-start;}
.cert-modal-inner img{width:100%; height:auto; border-radius:6px; border:1px solid var(--line);}
.cert-modal-close{
  position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%;
  background:var(--brand-deep); color:#fff; border:none; font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; z-index:2;
}
.cert-modal-close:hover{background:var(--brand);}
.cert-modal-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
  background:rgba(36,19,64,.9); color:#fff; border:none; font-size:24px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; z-index:2;
  transition:background .15s ease;
}
.cert-modal-nav:hover{background:var(--brand);}
.cert-modal-prev{left:-6px;}
.cert-modal-next{right:-6px;}
.cert-modal-counter{font-family:'IBM Plex Mono'; font-size:12px; color:var(--steel); align-self:flex-start;}
@media(max-width:600px){
  .cert-modal{padding:14px;}
  .cert-modal-inner{padding:14px;}
  .cert-modal-prev{left:2px;}
  .cert-modal-next{right:2px;}
  .cert-modal-nav{width:38px; height:38px; font-size:20px;}
}
.certs-note{font-size:13px; color:var(--steel); max-width:280px;}

/* ---------- testimonials ---------- */
.tst-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media(max-width:920px){ .tst-grid{grid-template-columns:1fr;} }
.tst-card{background:#fff; border:1px solid var(--line); border-radius:12px; padding:26px; font-size:14.5px; color:var(--ink);}
.tst-card::before{content:"\201C"; font-family:'Archivo'; font-size:44px; color:var(--brand-light); line-height:.4; display:block; margin-bottom:6px;}

/* ---------- blog ---------- */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media(max-width:920px){ .blog-grid{grid-template-columns:1fr;} }
.blog-card{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; cursor:pointer; transition:box-shadow .2s;}
.blog-card:hover{box-shadow:0 14px 30px rgba(36,19,64,.1);}
.blog-thumb{height:130px; background:linear-gradient(135deg,var(--brand-light),var(--brand-deep)); position:relative;}
.blog-body{padding:20px;}
.blog-body h4{font-size:16px; color:var(--brand-deep); margin-bottom:10px; font-weight:700;}
.blog-body p{font-size:13.5px; color:var(--steel); margin-bottom:14px;}
.blog-link{font-family:'IBM Plex Mono'; font-size:12px; color:var(--brand); font-weight:600;}

/* ---------- CTA / contact form ---------- */
.cta-block{background:var(--brand-deep); color:#fff; border-radius:22px; padding:56px; position:relative; overflow:hidden;}
.cta-block::after{content:""; position:absolute; right:-60px; bottom:-60px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle, rgba(139,95,217,.35), transparent 70%);}
.cta-grid{display:grid; grid-template-columns:1fr 1fr; gap:44px; position:relative; z-index:2;}
@media(max-width:860px){ .cta-grid{grid-template-columns:1fr;} }
.cta-block h2{color:#fff; font-size:clamp(24px,3vw,32px); margin-bottom:16px;}
.cta-block p{color:rgba(255,255,255,.7); font-size:14.5px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px;}
@media(max-width:560px){ .form-row{grid-template-columns:1fr;} }
.form input, .form select, .form textarea{
  width:100%; padding:13px 14px; border-radius:6px; border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06); color:#fff; font-family:'IBM Plex Sans'; font-size:14px;
}
.form input::placeholder, .form textarea::placeholder{color:rgba(255,255,255,.4);}
.form textarea{resize:vertical; min-height:80px; grid-column:1/-1;}
.form label{display:none;}

/* ---------- footer ---------- */
footer{background:#120A22; color:rgba(255,255,255,.55); padding:56px 0 30px; font-size:13.5px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px;}
@media(max-width:780px){ .foot-grid{grid-template-columns:1fr 1fr;} }
.foot-grid h5{color:#fff; font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px;}
.foot-grid a{display:block; padding:5px 0; color:rgba(255,255,255,.55);}
.foot-grid a:hover{color:#fff;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

/* ---------- inner pages (about, product, blog article, contact) ---------- */
.page-hero{background:var(--brand-deep); color:#fff; padding:64px 0 48px;}
.page-hero h1{font-size:clamp(28px,4vw,44px); color:#fff;}
.page-hero p{color:rgba(255,255,255,.7); max-width:600px; margin-top:14px; font-size:15.5px;}
.breadcrumb{font-family:'IBM Plex Mono'; font-size:12px; color:rgba(255,255,255,.5); margin-bottom:18px;}
.breadcrumb a{color:rgba(255,255,255,.7);}
.breadcrumb a:hover{color:#fff;}

.two-col{display:grid; grid-template-columns:260px 1fr; gap:48px; align-items:start;}
@media(max-width:860px){ .two-col{grid-template-columns:1fr;} }
.side-nav{
  position:sticky; top:96px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:22px 18px; box-shadow:0 10px 30px rgba(36,19,64,.06);
}
.side-nav-logo{
  display:block; width:64px; height:64px; margin:0 auto 18px;
  border-radius:50%;
}
.side-nav-title{display:none;}
.side-nav-links{border-left:2px solid var(--line);}
.side-nav a{display:block; padding:10px 16px; font-size:14px; font-weight:500; color:var(--steel); border-left:2px solid transparent; margin-left:-2px;}
.side-nav-note{margin-top:18px; padding:14px; background:var(--silver-light); border-radius:10px; font-size:12.5px; color:var(--steel);}

.spec-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:32px; margin-bottom:22px;}
.spec-card h3{font-size:21px; color:var(--brand-deep); margin-bottom:6px;}
.spec-card .sub{color:var(--brand); font-size:13.5px; font-weight:600; margin-bottom:16px;}
.spec-card p{color:var(--ink); font-size:14.5px; margin-bottom:14px;}
.spec-placeholder{
  border:1.5px dashed var(--silver); border-radius:10px; padding:20px; text-align:center;
  color:var(--steel); font-family:'IBM Plex Mono'; font-size:12px; margin:18px 0; background:var(--silver-light);
}
.spec-tags{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0;}
.spec-cta{margin-top:12px;}

.about-block{margin-bottom:60px;}
.about-block h2{color:var(--brand-deep); font-size:26px; margin-bottom:16px;}
.about-block p{color:var(--ink); font-size:15px; margin-bottom:14px; max-width:760px;}
.num-strip{display:flex; gap:0; flex-wrap:wrap; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:32px 0;}
.num-strip div{padding:20px 26px 20px 0; margin-right:26px; border-right:1px solid var(--line);}
.num-strip .num{font-family:'IBM Plex Mono'; font-weight:600; font-size:22px; color:var(--brand);}
.num-strip .lbl{font-size:12.5px; color:var(--steel);}

.article-body{max-width:720px; margin:0 auto;}
.article-body h1{font-size:clamp(26px,4vw,38px); color:var(--brand-deep); margin-bottom:18px;}
.article-body .meta{font-family:'IBM Plex Mono'; font-size:12px; color:var(--steel); margin-bottom:30px;}
.article-body p{font-size:15.5px; color:var(--ink); margin-bottom:18px;}
.article-list{margin-top:50px;}
.article-list h3{font-size:18px; color:var(--brand-deep); margin-bottom:18px;}

.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
@media(max-width:860px){ .contact-grid{grid-template-columns:1fr;} }
.contact-info-item{display:flex; gap:14px; padding:18px 0; border-top:1px solid var(--line);}
.contact-info-item .ic{width:38px; height:38px; border-radius:9px; background:var(--brand); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px;}
.contact-form-light input, .contact-form-light select, .contact-form-light textarea{
  width:100%; padding:13px 14px; border-radius:6px; border:1px solid var(--line); background:#fff; font-family:'IBM Plex Sans'; font-size:14px; color:var(--ink);
}
.contact-form-light textarea{grid-column:1/-1; min-height:100px; resize:vertical;}
.tst-grid-2col{grid-template-columns:1fr 1fr;}
@media(max-width:720px){ .tst-grid-2col{grid-template-columns:1fr;} }
.map-box{aspect-ratio:16/8; border-radius:14px; background:var(--silver-light); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--steel); font-family:'IBM Plex Mono'; font-size:13px; margin-top:30px;}
.about-teaser-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;}
@media(max-width:860px){ .about-teaser-grid{grid-template-columns:1fr;} }
@media(max-width:860px){ .about-teaser-grid > div:last-child{order:-1; max-width:220px; margin:0 auto;} }

/* =========================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ — доп. правила поверх существующих
   ========================================================= */

/* Инпуты минимум 16px, иначе Safari на iOS зумит страницу при фокусе */
input, select, textarea{font-size:16px !important;}

/* Хедер и мобильное меню */
@media(max-width:920px){
  .nav{padding:12px 0;}
  .navcta{gap:8px;}
  .navcta .btn-ghost{padding:9px 12px !important; font-size:11px !important;}
  .navlinks-mobile{position:sticky; top:0; z-index:199; max-height:calc(100vh - 60px); overflow-y:auto;}
}
@media(max-width:400px){
  .logo{font-size:17px;}
  .navcta{gap:6px;}
  .navcta .btn-ghost{padding:8px 10px !important; font-size:10.5px !important;}
}

/* Hero — меньше воздуха сверху/снизу, компактнее плашки-факты */
@media(max-width:720px){
  .hero{padding:36px 0 48px;}
  .hero p.lead{font-size:15.5px; margin-bottom:26px;}
  .hero-btns{margin-bottom:36px;}
  .blueprint{max-width:280px; margin:32px auto 0;}
  .stat-strip div{border-right:none; padding-top:14px;}
  .stat-strip{border-top:none; row-gap:14px;}
}

/* На самых узких экранах кнопки hero складываются в столбец на всю ширину;
   остальные кнопки сайта (в карточках, блоге, CTA-блоках) ширину не меняют */
@media(max-width:480px){
  .hero-btns{flex-direction:column; align-items:stretch;}
  .hero-btns .btn{justify-content:center; text-align:center;}
}

/* Секции — меньше вертикальных отступов на телефоне */
@media(max-width:480px){
  section{padding:44px 0;}
  .section-head{margin-bottom:32px;}
  .wrap{padding:0 18px;}
}

/* Карточки продукции — не такие высокие, если текста немного */
@media(max-width:560px){
  .prod-card{min-height:auto; padding:22px;}
}

/* Блок цинкования — иллюстрация не растягивается в огромный квадрат */
@media(max-width:720px){
  .galv-visual{aspect-ratio:16/10; max-width:320px; margin:0 auto;}
}

/* Сертификаты — список и пометка не сжимаются в кашу */
@media(max-width:600px){
  .certs .wrap{flex-direction:column; align-items:flex-start; padding:28px 20px;}
  .certs-list{gap:14px 20px;}
}

/* CTA-форма — меньше паддинга, читаемее на маленьком экране */
@media(max-width:600px){
  .cta-block{padding:28px 20px; border-radius:16px;}
}

/* Страницы товара на телефоне: подразделы идут вертикальным списком,
   а не горизонтальной каруселью.
   Карусель прятала часть пунктов за краем экрана — про них узнавали,
   только если случайно смахнуть вбок. Подразделов на странице от одного
   до пяти, поэтому все спокойно помещаются в столбик и видны сразу. */
@media(max-width:860px){
  .side-nav{
    position:static; background:none; border:none; box-shadow:none; padding:0;
  }
  .side-nav-logo{display:none;} /* места мало, логотип уже есть в шапке */
  .side-nav-title{
    display:block; font-family:'IBM Plex Mono', monospace; font-size:11.5px;
    font-weight:600; letter-spacing:.12em; text-transform:uppercase;
    color:var(--steel); margin-bottom:10px;
  }
  .side-nav-links{
    display:block; overflow:visible; border-left:none;
    background:#fff; border:1px solid var(--line); border-radius:12px;
    margin-bottom:22px; overflow:hidden;
  }
  .side-nav a{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    white-space:normal; border:none; border-bottom:1px solid var(--line);
    margin-left:0; padding:14px 16px; border-radius:0;
    font-size:14.5px; color:var(--ink);
  }
  .side-nav a:last-child{border-bottom:none;}
  .side-nav a::after{content:"↓"; color:var(--brand); font-size:13px; opacity:.55; flex-shrink:0;}
  .side-nav a.active{background:var(--silver-light); color:var(--brand); font-weight:600;}
  .side-nav a.active::after{opacity:1;}
  .side-nav-note{display:none;}
}
@media(max-width:600px){
  .spec-card{padding:20px;}
  .spec-card h3{font-size:18px;}
}

/* Страница «О нас» — цифры складываются по 2 в ряд, не в одну узкую колонку */
@media(max-width:600px){
  .num-strip div{flex:0 0 45%; margin-right:0; border-right:none; padding:14px 0;}
  .num-strip{border-top:none; gap:0 20px;}
}

/* Футер на мобильной — первый блок (лого + описание) во всю ширину сверху,
   «Продукция» слева / «Компания» справа в одну строку, «Контакты» —
   отдельным блоком во всю ширину снизу */
@media(max-width:680px){
  footer{padding:40px 0 26px;}
  /* Три колонки в один ряд: Продукция · Компания · Контакты.
     Раньше «Контакты» уезжали отдельной строкой во всю ширину. */
  .foot-grid{grid-template-columns:repeat(3,1fr); gap:22px 12px; margin-bottom:24px;}
  .foot-grid > div:first-child{grid-column:1 / -1; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.08);}
  .foot-grid > div:nth-child(2){grid-column:1;}
  .foot-grid > div:nth-child(3){grid-column:2;}
  .foot-grid > div:nth-child(4){grid-column:3;}
  /* на трёх колонках места мало — ужимаем текст и разрешаем переносы */
  .foot-grid h5{font-size:10.5px; letter-spacing:.04em; margin-bottom:10px;}
  .foot-grid a, .foot-grid p{font-size:12px; padding:4px 0; overflow-wrap:anywhere;}
  .foot-bottom{flex-direction:column; align-items:flex-start; gap:8px;}
}

/* Хлебные крошки — не переносятся посимвольно */
.breadcrumb{word-break:break-word;}

/* Таблица-заглушка и теги характеристик не вылезают за карточку */
.spec-placeholder{word-break:break-word;}
.topbar{display:none;}

/* =========================================================================
   ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА RU / RO
   ========================================================================= */
.lang-switch{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:4px; overflow:hidden; background:#fff;}
.lang-switch a{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; font-weight:600; letter-spacing:.04em;
  padding:8px 10px; color:var(--steel); line-height:1; transition:background .15s ease, color .15s ease;
}
.lang-switch a + a{border-left:1px solid var(--line);}
.lang-switch a:hover{background:var(--silver-light); color:var(--brand);}
.lang-switch a.active{background:var(--brand); color:#fff;}
/* в мобильном меню — отдельной строкой, крупнее, чтобы попадать пальцем */
.mobile-lang-row{padding:16px 28px; display:flex; justify-content:flex-start; background:#fff;}
.mobile-lang-row .lang-switch a{padding:11px 18px; font-size:13px;}
/* в шапке на узких экранах переключатель остаётся, а кнопка каталога прячется:
   два элемента рядом с бургером в 360px уже не помещаются */
@media(max-width:560px){
  .navcta .btn-ghost{display:none;}
}
@media(max-width:920px){
  .navcta .lang-switch a{padding:9px 11px;}
}

/* =========================================================================
   ФИКС СМЕЩЕНИЯ МАКЕТА НА МОБИЛЬНОЙ (страницы разделов каталога)
   -------------------------------------------------------------------------
   По умолчанию колонка грид-раскладки не может стать уже своего содержимого
   (min-width:auto). Из-за этого длинное слово, широкая таблица или полоса
   вкладок раздвигали правую колонку шире экрана — и вся страница оказывалась
   сдвинутой. min-width:0 разрешает колонке сжиматься до ширины экрана.
   ========================================================================= */
.two-col > *{min-width:0;}
.contact-grid > *, .cta-grid > *, .galv-grid > *, .hero-grid > *, .about-teaser-grid > *{min-width:0;}
.spec-card{overflow-wrap:break-word;}
.spec-card table{display:block; width:100%; overflow-x:auto;}

/* отступ для якорей, чтобы заголовок карточки не прятался под шапкой */
.spec-card{scroll-margin-top:90px;}

/* полоса вкладок: прокрутка только внутри себя, без «залипания» на странице */
.side-nav-links{overscroll-behavior-x:contain;}
@media(max-width:860px){
  .side-nav-links{scrollbar-width:thin;}
  .side-nav-links::-webkit-scrollbar{height:3px;}
  .side-nav-links::-webkit-scrollbar-thumb{background:var(--silver); border-radius:3px;}
  .side-nav a{padding:10px 14px;}
}

/* ---------- обложки статей ---------- */
.blog-thumb{overflow:hidden;}
.blog-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.blog-card:hover .blog-thumb img{transform:scale(1.03);}
.blog-thumb img{transition:transform .35s ease;}
.article-cover{
  border-radius:16px; overflow:hidden; margin:22px 0 28px;
  border:1px solid var(--line);
}
.article-cover img{width:100%; height:auto; display:block; aspect-ratio:3/2; object-fit:cover;}
@media(max-width:600px){ .article-cover{border-radius:12px; margin:18px 0 22px;} }

/* ---------- иллюстрации из каталога в разделах ---------- */
.spec-image{margin:20px 0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff;}
.spec-image img{width:100%; height:auto; display:block;}
.spec-image figcaption{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--steel);
  padding:10px 14px; border-top:1px solid var(--line); background:var(--silver-light);
}
.spec-image a{display:block;}
.spec-image:hover{border-color:var(--brand-light);}
@media(max-width:600px){ .spec-image figcaption{font-size:10.5px; padding:8px 10px;} }

/* ---------- видео о заводе на главной ---------- */
.about-video{
  border-radius:18px; overflow:hidden; background:#120A22;
  box-shadow:0 24px 56px rgba(36,19,64,.16);
}
/* Пропорции не задаём жёстко: ролик снят вертикально, и любая
   принудительная рамка 16:9 обрезала бы его по бокам. Видео
   показывается целиком, в своих пропорциях. */
.about-video video{
  width:100%; height:auto; display:block; background:#120A22;
  max-height:80vh; object-fit:contain;
}
/* На телефоне видео выходит за поля колонки почти на всю ширину экрана,
   но с отступом 14px по краям — чтобы не упиралось в границы. */
@media(max-width:860px){
  .about-video{
    width:calc(100vw - 28px);
    margin-left:calc(50% - 50vw + 14px);
    border-radius:14px;
  }
  .about-video video{max-height:78vh;}
}