/* Главная (макет 264:543 — десктоп 1470, 276:820 — телефон 393). */

/* первый экран */
.hero{position:relative;min-height:max(600px,100vh);min-height:max(600px,100svh);display:flex;color:var(--light);overflow:hidden;background:#1d1d22}
/* кадр и затемнение — как у «Rectangle 2» в макете */
.hero__bg img{transform:scale(1.1);transform-origin:20% 100%}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5) 8%,rgba(0,0,0,0) 52%),linear-gradient(355deg,rgba(0,0,0,.6) 43%,rgba(84,82,82,.3) 72%,rgba(255,255,255,0) 94%)}
.hero__in{display:flex;flex-direction:column;justify-content:space-between;width:100%;padding-top:clamp(100px,min(34.5vh,100vh - 500px),320px);padding-bottom:clamp(36px,8.6vh,80px)}
.hero__intro{display:grid;gap:46px;justify-items:start;max-width:390px;padding:4px 0 0 13px;border-left:2px solid var(--muted);color:var(--on-dark);font:500 18px/1.11 var(--f-text);letter-spacing:-.04em}
.hero__bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-top:clamp(28px,6vh,60px)}
.hero__title{max-width:960px;color:var(--light);line-height:.95}
.hero__card{flex:0 0 425px;display:flex;justify-content:space-between;gap:15px;min-height:200px;padding:15px;border-radius:2px;background:var(--light);color:var(--ink);transition:background .2s,color .2s}
.hero__card:hover,.hero__card:focus-visible{background:var(--blue);color:var(--light)}
.hero__card-text{display:grid;align-content:start;gap:13px;max-width:288px}
.hero__card-text b{font:500 18px/1.1 var(--f-text);letter-spacing:-.04em}
.hero__card-text span{color:#5F5F5F;font:400 14px/1.07 var(--f-text);letter-spacing:-.02em;transition:color .2s}
.hero__card:hover .hero__card-text span,.hero__card:focus-visible .hero__card-text span{color:var(--light)}
.hero__card-img{flex:0 0 121px;width:121px;height:115px;object-fit:cover;border-radius:1.5px}

/* направления */
.dirs__list{display:grid;gap:30px;margin-top:70px}
.dir{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:auto 1fr auto;column-gap:var(--gap);padding-bottom:24px;border-bottom:1px solid var(--muted)}
.dir__n{grid-column:1;grid-row:1;color:var(--muted);font:400 16px/1.1 var(--f-text);letter-spacing:-.02em}
.dir__body{grid-column:2/4;grid-row:3;display:grid;gap:10px;align-self:end;max-width:321px}
.dir__body .lead{max-width:306px}
.dir__more{grid-column:1;grid-row:3;align-self:end;justify-self:start;margin-bottom:-6px}
.dir__img{grid-column:4/-1;grid-row:1/-1;aspect-ratio:667/287}

/* о компании */
.about__head{margin-top:55px}
.about__head .sec-head__body{max-width:861px}
.about__head .lead{max-width:445px}
.about__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--gap);row-gap:70px;margin-top:90px}
.stat{display:flex;flex-direction:column;justify-content:space-between;min-height:225px;padding-right:24px;border-right:1px solid var(--muted)}
.stat--1{grid-column:1/3;width:min(100%,272px)}
.stat--2{grid-column:3/5;width:min(100%,280px)}
.stat--3{grid-column:1/3;grid-row:2;width:min(100%,485px)}
.stat__text{font:400 25px/1 var(--f-head);letter-spacing:-.04em;max-width:296px}
.about__note{grid-column:5/-1;grid-row:1;display:grid;gap:30px;justify-items:start;align-content:start;max-width:336px}

/* производство */
.prod .sec-head__body{gap:50px}
.prod .h1{max-width:896px}
.dirs .h1{max-width:841px}
.why .h1{max-width:665px}
.prod__card{position:relative;margin-top:70px;min-height:clamp(560px,54.5vw,802px);border-radius:2.5px;overflow:hidden;padding:50px var(--pad);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--gap)}
.prod__card .bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%,rgba(102,102,102,.17) 0%,rgba(57,57,57,.42) 30%,rgba(22,22,22,.63) 55%,rgba(0,0,0,.75) 75%)}
.prod__list{grid-column:5/-1;display:grid;align-content:start;gap:20px;padding-top:32px;max-width:338px}
.prod__list li{display:grid;gap:10px;padding-top:20px;border-top:1px solid var(--muted)}
.prod__list li:first-child{padding-top:0;border-top:0}
.prod__list li+li{margin-top:30px}
.prod__list .lead{color:var(--on-dark-2);max-width:292px}

/* реализованные решения */
.sol{overflow:hidden}
.sol__label{margin-bottom:12px}
.sol__head{display:grid;gap:50px;margin:50px 0}
.sol__head .h1{max-width:641px}
.sol__intro{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--gap);align-items:end}
.sol__intro .lead{grid-column:1/3;max-width:341px}
.sol__intro .btn{grid-column:3/5;justify-self:start;margin-left:15px}
.sol__photos{display:grid;gap:19px}
.sol__row{display:grid;gap:23px;align-items:start}
.sol__row--a{grid-template-columns:683fr 448fr 236fr}
.sol__row--b{grid-template-columns:436fr 962fr;margin-right:calc(-1 * var(--pad))}
.sol__row--a .sol__ph{aspect-ratio:auto;height:clamp(300px,32.1vw,472px)}
.sol__row--b .sol__ph:first-child{aspect-ratio:436/301}
.sol__row--b .sol__ph:last-child{height:clamp(300px,32.1vw,472px)}
.sol__ph:only-child{grid-column:1/-1}
.sol__points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:50px;max-width:1309px}
.sol__points li{max-width:426px;padding-bottom:10px;position:relative}
.sol__points li::after{content:"";position:absolute;left:0;bottom:0;width:226px;height:1px;background:var(--muted)}

/* контроль качества */
.qual{position:relative;color:var(--light);min-height:clamp(700px,73vw,1072px)}
.qual .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,14,40,.72),rgba(10,14,40,.62))}
.qual .h1{max-width:746px;color:var(--light)}
.qual .sec-head .lead{max-width:315px;color:var(--light)}
.qual__nav{display:none}
.qual__steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--gap);margin-top:clamp(120px,14vw,215px);position:relative}
.qual__steps::before{content:"";position:absolute;left:0;right:0;top:80px;height:1px;background:var(--muted)}
.qual__steps li{display:grid;grid-template-rows:80px auto 1fr;gap:10px;max-width:260px}
.qual__steps .h3{margin-top:22px}
.qual__steps .lead{color:var(--on-dark-2)}
.qual__n{font-size:58.8px;letter-spacing:-.03em;color:var(--light)}

/* почему мы */
.why__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:150px}
.why__list li{display:grid;gap:110px;align-content:start}
.why__art{width:clamp(180px,17.4vw,256px);height:auto;color:#0029E1}
.why__list li>div{display:grid;gap:10px;max-width:400px}
.why__list .lead{max-width:312px}

/* этапы */
.steps{position:relative;color:var(--light)}
.steps .bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.75)}
.steps .h1{max-width:834px;color:var(--light)}
.steps__list{display:grid;gap:30px;margin-top:110px}
.steps__list li{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--gap);padding-top:10px;border-top:1px solid rgba(156,157,170,.5)}
.steps__n{grid-column:2;font:500 18px/1.1 var(--f-text)}
.steps__list .h3{grid-column:3/5;max-width:283px;color:var(--light)}
.steps__list .lead{grid-column:5/-1;max-width:257px;color:var(--muted)}

/* география */
.geo{position:relative;overflow:hidden;min-height:clamp(760px,70vw,1033px)}
.geo .wrap{position:relative;z-index:1;pointer-events:none}
.geo .wrap a,.geo .wrap .zh-ed{pointer-events:auto}
.geo__body{display:flex;flex-direction:column;justify-content:space-between;gap:60px;min-height:clamp(560px,51vw,760px);padding-top:55px}
.geo .h1{max-width:830px}
.geo__lead{max-width:306px}
.geo__map{position:absolute;left:30.48%;top:clamp(160px,15.9vw,234px);width:126.2%;aspect-ratio:1855/1000}
.geo__map>img{width:100%;height:100%}
.geo__pin{position:absolute;width:1.13%;aspect-ratio:1;margin:-.565% 0 0 -.565%;background:var(--blue);cursor:pointer;outline:0}
.geo__pin.is-on{background:var(--ink)}
.geo__name{position:absolute;left:0;bottom:calc(100% + 4px);width:max-content;max-width:170px;padding:15px;background:var(--blue);color:var(--light);font:400 20.8px/1.1 var(--f-text);letter-spacing:-.02em;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;pointer-events:none}
.geo__pin.is-on .geo__name,.geo__pin:hover .geo__name,.geo__pin:focus-visible .geo__name{opacity:1;transform:none}
.geo__pin.is-on .geo__name{min-height:137px;min-width:150px}
.geo__regions:hover .geo__pin.is-on:not(:hover) .geo__name{opacity:0}

/* ---------- телефон ---------- */
/* частые вопросы */
.faq__list{margin-top:clamp(40px,6vw,90px);border-top:1px solid var(--muted)}
.faq__item{border-bottom:1px solid var(--muted)}
.faq__q{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--gap);align-items:center;padding:28px 0;cursor:pointer;list-style:none}
.faq__q::-webkit-details-marker{display:none}
.faq__q .h3{grid-column:2/6;max-width:760px}
.faq__sign{grid-column:6;justify-self:end;position:relative;width:22px;height:22px}
.faq__sign::before,.faq__sign::after{content:"";position:absolute;left:0;top:10px;width:22px;height:2px;background:var(--blue);transition:transform .2s}
.faq__sign::after{transform:rotate(90deg)}
.faq__item[open] .faq__sign::after{transform:none}
.faq__q:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.faq__a{display:block;margin:0 0 32px calc((100% - 5 * var(--gap)) / 6 + var(--gap));max-width:640px}

@media (max-width:900px){
  .faq__q{grid-template-columns:minmax(0,1fr) 22px;column-gap:16px;padding:20px 0}
  .faq__q .h3{grid-column:1}
  .faq__sign{grid-column:2}
  .faq__a{margin:0 0 22px;font-size:15px}
  .hero__bg img{object-position:62% 50%;transform:none}
  .hero__in{padding-top:clamp(96px,100svh - 560px,406px);padding-bottom:clamp(36px,8svh,66px)}
  .hero__intro{gap:30px;max-width:361px;padding-left:12px;font-size:17px}
  .hero__intro .btn{min-height:48px;padding:17px 19px;font-size:12.25px}
  .hero__title{font-size:48px;line-height:.96;letter-spacing:-.03em}
  .hero__card{display:none}

  .dirs .h1{font-size:36px}
  .dirs__list{gap:35px;margin-top:50px}
  .dir{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:10px;padding:15px 0 0;border-bottom:0;border-top:1px solid var(--muted)}
  .dir__n,.dir__body,.dir__more,.dir__img{grid-column:1;grid-row:auto}
  .dir__n{justify-self:end}
  .dir__body{gap:15px;max-width:316px}
  .dir__more{margin:25px 0 15px}
  .dir__img{aspect-ratio:363/287}

  .about__head{margin-top:30px}
  .about__grid{grid-template-columns:minmax(0,1fr);row-gap:40px;margin-top:60px}
  .stat,.stat--1,.stat--2,.stat--3{grid-column:1;grid-row:auto;width:auto;max-width:270px;min-height:150px}
  .stat--2{margin-left:70px;padding-left:0;border-right:0;border-left:1px solid var(--muted);padding-left:70px;margin-left:0}
  .stat__text{font-size:20px}
  .about__note{grid-column:1;grid-row:auto}

  .prod .sec-head__body{gap:30px}
  .prod__card{display:block;margin-top:40px;padding:30px 15px;min-height:0}
  .prod__list{padding-top:0}
  .prod__list li+li{margin-top:20px}

  .sol__head{margin:30px 0}
  .sol__head{gap:30px}
  .sol__intro{grid-template-columns:minmax(0,1fr);row-gap:30px}
  .sol__intro .lead,.sol__intro .btn{grid-column:1;margin:0}
  .sol__photos,.sol__row{gap:10px}
  .sol__row--a,.sol__row--b{grid-template-columns:minmax(0,1fr);margin:0}
  .sol__row .sol__ph,.sol__row--b .sol__ph:first-child,.sol__row--b .sol__ph:last-child{height:auto;aspect-ratio:363/250}
  .sol__points{grid-template-columns:minmax(0,1fr);margin-top:40px;gap:20px}
  .sol__points li{font-size:24px}

  .qual{min-height:0}
  .qual .sec-head .lead{max-width:none}
  .qual__steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:0;margin-top:120px}
  .qual__steps::-webkit-scrollbar{display:none}
  .qual__steps::before{display:none}
  .qual__steps li{flex:0 0 100%;scroll-snap-align:start;max-width:none;grid-template-rows:auto;gap:15px}
  .qual__steps li .h3{margin:20px 0 0;padding-top:20px;border-top:1px solid var(--muted)}
  .qual__n{font-size:50px}
  .qual__nav{display:flex;gap:30px;position:absolute;right:var(--pad);margin-top:135px}
  .qual__nav button{background:none;border:0;color:var(--light);font:300 44px/1 var(--f-head);cursor:pointer;padding:0 6px}

  .why__list{grid-template-columns:minmax(0,1fr);gap:40px;margin-top:50px}
  .why__list li{gap:40px;padding-top:30px;border-top:1px solid var(--muted)}
  .why__list li:first-child{border-top:0;padding-top:0}
  .why__art{width:190px;justify-self:end}

  .steps__list{margin-top:60px;gap:20px}
  .steps__list li{grid-template-columns:70px minmax(0,1fr);row-gap:15px;padding-top:25px}
  .steps__n{grid-column:1;grid-row:1/3;font-size:15px}
  .steps__list .h3,.steps__list .lead{grid-column:2}

  .geo{min-height:0;padding-bottom:0}
  .geo__body{min-height:0;gap:20px;padding-top:30px}
  .geo__map{position:relative;left:0;top:0;width:190%;margin:20px 0 0 -10%}
  .geo__name{font-size:14px;padding:8px}
  .geo__pin.is-on .geo__name{min-height:0;min-width:0}
}