:root{--black:#1A1A1A;--gray:#4D4D4D;--red:#C00019;--wrap:1120px}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Tahoma,"Segoe UI",Arial,sans-serif;color:var(--black);background:#fff}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 18px}

.topbar{background:linear-gradient(#f4f4f4,#e9e9e9);border-bottom:1px solid rgba(0,0,0,.10)}
.topbar__row{height:74px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand__logo{height:44px;width:auto;display:block}

.menu{display:flex;gap:26px;font-size:16px}
.menu a{color:var(--gray);text-decoration:none}
.menu a:hover{color:var(--black)}

.burger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer}
.burger span{display:block;height:2px;background:var(--black);margin:7px 0;border-radius:2px}
.mobile{padding:10px 18px 16px;border-top:1px solid rgba(0,0,0,.10);background:#f0f0f0}
.mobile a{display:block;padding:10px 0;color:var(--gray);text-decoration:none}

.hero{
  position:relative;
  min-height:460px;
  overflow:hidden;
}

/* фон: фото на весь блок + белый градиент слева под текст */
.hero__bg{
  position:absolute;
  inset:0;
  z-index:0;

  background:
    linear-gradient(to right,
      rgba(255,255,255,0.96) 0%,
      rgba(255,255,255,0.92) 35%,
      rgba(255,255,255,0.70) 55%,
      rgba(255,255,255,0.35) 72%,
      rgba(255,255,255,0.10) 88%,
      rgba(255,255,255,0.0) 100%
    ),
    url("/assets/img/hero-machine.png") right center no-repeat;

  background-size: cover;
}
.hero__row{
  position:relative;
  z-index:1; /* текст и кнопка всегда поверх фона */
  min-height:520px;
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  align-items:center;
  gap:22px;
}

.hero__left h1{margin:0 0 14px;font-size:48px;line-height:1.05;font-weight:700}
.hero__left p{margin:0 0 22px;color:var(--gray);font-size:18px;line-height:1.5}

.btn{display:inline-block;padding:12px 26px;border-radius:6px;color:#fff;font-weight:700;text-decoration:none;background:linear-gradient(#d3132a,#9f0015);border:1px solid rgba(0,0,0,.25);box-shadow:0 10px 18px rgba(0,0,0,.22)}
.btn:hover{filter:brightness(1.05)}

.hero__right{position:relative;height:420px}
.hero__play{position:absolute;left:56%;top:56%;width:78px;height:78px;border-radius:50%;background:rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.9);box-shadow:0 14px 28px rgba(0,0,0,.28)}
.hero__play:before{content:"";position:absolute;left:32px;top:22px;width:0;height:0;border-left:22px solid rgba(255,255,255,.95);border-top:16px solid transparent;border-bottom:16px solid transparent}

.section{padding:46px 0}
.section--mist{
  background:
    radial-gradient(1200px 300px at 50% 0%, rgba(0,0,0,.06), rgba(0,0,0,0) 70%),
    linear-gradient(#f4f4f4, #ececec);
  padding:70px 0 90px;
}

.title{
  text-align:center;
  margin:0 0 40px;
  font-size:48px;
  font-weight:700;
  color:var(--black);
}
.title--line:after{
  content:"";
  display:block;
  width:70px;
  height:3px;
  background:var(--red);
  margin:14px auto 0;
}

.adv{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.adv__item{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  padding:30px 20px;
  text-align:center;
  min-height:190px;
  transition: all .3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,.04);
}

.adv__item:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 25px rgba(0,0,0,.12);
}
.adv__icon{
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:15px;
  font-size:38px;
  color:#6f6f6f;
}
.adv__name{
  font-size:20px;
  font-weight:700;
  margin-bottom:8px;
}
.adv__text{
  font-size:14px;
  color:#6a6a6a;
  line-height:1.45;
}
.cat{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat__card{display:block;text-decoration:none;background:rgba(255,255,255,.62);border:1px solid rgba(0,0,0,.12);text-align:center;padding:10px 10px 16px}
.cat__img{height:130px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:10px}
.cat__img img{width:100%;height:100%;object-fit:contain}
.cat__model{font-size:22px;font-weight:700}
.cat__sub{font-size:12px;color:var(--gray);letter-spacing:.8px;margin:4px 0 10px}
.cat__btn{display:inline-block;min-width:132px;padding:10px 14px;border-radius:6px;color:#fff;font-weight:700;background:linear-gradient(#d3132a,#9f0015);border:1px solid rgba(0,0,0,.25);box-shadow:0 10px 18px rgba(0,0,0,.18)}

.proj{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:6px}
.proj__item{background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.10);padding:18px 16px;text-align:center}
.proj__icon{font-size:34px;margin-bottom:8px;color:#6a6a6a}
.proj__name{font-size:18px;font-weight:700;margin-bottom:6px}
.proj__text{font-size:13px;color:var(--gray);line-height:1.35}

@media (max-width:980px){
  .hero__row{grid-template-columns:1fr;padding:26px 0 38px}
  .hero__right{height:320px}
  .adv,.cat{grid-template-columns:repeat(2,1fr)}
  .proj{grid-template-columns:1fr}
}
@media (max-width:760px){
  .menu{display:none}
  .burger{display:block}
  .title{font-size:34px}
  .hero__left h1{font-size:36px}
}
/* TEST-CHANGE */
body { outline: 6px solid #C00019; }
body{outline:6px solid #C00019!important;}