/* Тёмная главная ZonePro. Все значения — здесь, в разметке только раскладка.
   Моноширинных гарнитур нет. Движение: параллакс героя, появление по прокрутке,
   живые вкладки, наведение на карточки. */

:root{
  --red:#E60013;
  --fon:#08080A;
  --fon2:#0D0D10;
  --karta:#121216;
  --karta2:#17171C;
  --liniya:#212128;
  --liniya2:#33333C;
  --tekst:#FFFFFF;
  --seryy:#96969F;
  --obertka:1280px;
  --pad:44px;
  --plavno:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fon);color:var(--tekst);
  font-family:'Onest',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
h1,h2,h3,p,dl,dd{margin:0}
ul{margin:0;padding:0;list-style:none}
.obertka{width:var(--obertka);margin:0 auto}

/* ── полоса прокрутки ── */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none}
.progress i{display:block;height:100%;background:var(--red);transform:scaleX(0);transform-origin:0 50%}

/* ── шапка ── */
.shapka{position:fixed;top:0;left:0;right:0;z-index:50;height:86px;display:flex;align-items:center;
  gap:58px;padding:0 var(--pad);transition:height .4s var(--plavno),background .4s,backdrop-filter .4s}
.shapka:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--liniya);opacity:0;transition:opacity .4s}
.shapka.plotno{height:68px;background:rgba(8,8,10,.74);backdrop-filter:blur(16px) saturate(1.3)}
.shapka.plotno:after{opacity:1}
.shapka .znak img{height:26px;width:auto}
.shapka nav{display:flex;gap:34px;font-size:15px;font-weight:500}
.shapka nav a{color:var(--seryy);position:relative;padding:6px 0;transition:color .3s}
.shapka nav a:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--plavno)}
.shapka nav a:hover{color:#fff}
.shapka nav a:hover:after{transform:scaleX(1)}
.shapka .svyaz{margin-left:auto;font-size:15px;font-weight:600;
  border:1px solid var(--liniya2);padding:11px 22px;transition:.4s var(--plavno)}
.shapka .svyaz:hover{background:var(--red);border-color:var(--red)}

/* ── появление блоков ── */
[data-yav]{opacity:0;transform:translateY(30px);
  transition:opacity .95s var(--plavno) var(--zad,0ms),transform .95s var(--plavno) var(--zad,0ms)}
[data-yav].vidno{opacity:1;transform:none}

/* ── общие секции ── */
section{position:relative;padding:118px 0}
section+section:before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16) 50%,transparent)}
.zag2{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:48px}
.zag2 h2{font-size:42px;line-height:1.06;letter-spacing:-.03em;font-weight:600}
.zag2 a{font-size:15px;font-weight:500;color:var(--seryy);transition:color .3s}
.zag2 a:hover{color:var(--red)}

/* ── продукция ── */
.produkciya .setka{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.kart{position:relative;background:var(--karta);border:1px solid var(--liniya);
  overflow:hidden;transition:transform .55s var(--plavno),border-color .45s,background .45s}
.kart:hover,.kart.navel{transform:translateY(-6px);border-color:var(--liniya2);background:var(--karta2)}
.kart .pic{position:relative;height:250px;display:flex;align-items:center;justify-content:center}
.kart .svet{position:absolute;width:70%;height:70%;border-radius:50%;
  background:radial-gradient(circle,rgba(120,150,255,.20),transparent 68%);
  filter:blur(26px);transition:opacity .55s,transform .7s var(--plavno)}
.kart:hover .svet,.kart.navel .svet{opacity:1;transform:scale(1.18)}
.kart .pic img{position:relative;max-height:186px;width:auto;object-fit:contain;
  transition:transform .75s var(--plavno)}
.kart:hover .pic img,.kart.navel .pic img{transform:scale(1.07) translateY(-4px)}
.kart .niz{padding:0 28px 30px}
.kart h3{font-size:23px;font-weight:600;letter-spacing:-.02em}
.kart p{margin-top:8px;font-size:15px;color:var(--seryy)}
.kart:after{content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--red);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s var(--plavno)}
.kart:hover:after,.kart.navel:after{transform:scaleX(1)}

/* ── применения ── */
.primeneniya{background:var(--fon2)}
.primeneniya .telo{display:grid;grid-template-columns:1fr 420px;gap:56px}
.primeneniya .kadr{position:relative;height:512px;overflow:hidden}
.primeneniya .kadr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.06);filter:contrast(1.06) saturate(1.08);
  transition:opacity .8s var(--plavno),transform 1.3s var(--plavno)}
.primeneniya .kadr img.on{opacity:1;transform:scale(1)}
.primeneniya .spisok li{position:relative;padding:16px 0 16px 22px;cursor:pointer;
  border-bottom:1px solid var(--liniya);font-size:17px;font-weight:500;
  color:var(--seryy);transition:color .35s,padding-left .45s var(--plavno)}
.primeneniya .spisok li:before{content:'';position:absolute;left:0;top:50%;width:10px;height:1px;
  background:var(--red);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .45s var(--plavno)}
.primeneniya .spisok li:hover{color:#D6D6DC}
.primeneniya .spisok li.on{color:#fff;padding-left:28px}
.primeneniya .spisok li.on:before{transform:scaleX(1)}
.primeneniya .opis{margin-top:36px}
.primeneniya .opis.vhod h3,.primeneniya .opis.vhod p{animation:podnyat .55s var(--plavno) both}
.primeneniya .opis.vhod p{animation-delay:.07s}
@keyframes podnyat{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.primeneniya .opis h3{font-size:26px;font-weight:600;letter-spacing:-.02em}
.primeneniya .opis p{margin-top:16px;font-size:16px;line-height:1.66;color:rgba(255,255,255,.74)}
.primeneniya .opis a{display:inline-block;margin-top:26px;font-size:15px;font-weight:500;color:var(--red)}

/* ── кейсы ── */
.keysy .setka{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.keys{position:relative;transition:transform .55s var(--plavno)}
.keys:hover,.keys.navel{transform:translateY(-6px)}
.keys .pic{position:relative;height:250px;overflow:hidden}
.keys .pic img{width:100%;height:100%;object-fit:cover;
  filter:contrast(1.06) saturate(1.06);transition:transform .9s var(--plavno)}
.keys:hover .pic img,.keys.navel .pic img{transform:scale(1.08)}
.keys .tint{position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,8,10,.55),transparent 55%);
  opacity:0;transition:opacity .5s}
.keys:hover .tint,.keys.navel .tint{opacity:1}
.keys .gorod{display:block;margin-top:22px;font-size:14px;color:var(--seryy)}
.keys h3{margin-top:8px;font-size:21px;font-weight:600;line-height:1.24;letter-spacing:-.02em;
  transition:color .35s}
.keys:hover h3,.keys.navel h3{color:var(--red)}
.keys p{margin-top:11px;font-size:15px;line-height:1.56;color:var(--seryy)}
.keys .polya{display:flex;gap:20px;margin-top:18px;padding-top:15px;
  border-top:1px solid var(--liniya);font-size:14px}

/* ── новости ── */
.novosti{background:var(--fon2)}
.novosti .setka{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.nov .pic{height:180px;overflow:hidden}
.nov .pic img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--plavno)}
.nov:hover .pic img{transform:scale(1.07)}
.nov time{display:block;margin-top:18px;font-size:14px;color:var(--seryy)}
.nov h3{margin-top:8px;font-size:17px;font-weight:500;line-height:1.4;transition:color .35s}
.nov:hover h3{color:var(--red)}

/* ── контакты ── */
.kontakty{overflow:hidden}
.kontakty .glow{position:absolute;right:-8%;top:8%;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(230,0,19,.22),transparent 66%);filter:blur(60px);pointer-events:none}
.kontakty .dve{display:grid;grid-template-columns:1fr 1fr;gap:86px;position:relative}
.rekvizity .imya{font-size:25px;font-weight:600}
.rekvizity dl{margin-top:32px}
.rekvizity dt{font-size:13px;color:var(--seryy);margin-top:22px}
.rekvizity dd{margin:6px 0 0;font-size:16px;line-height:1.55}
.forma{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.forma label{display:block}
.forma label.shiroko{grid-column:span 2}
.forma span{display:block;margin-bottom:9px;font-size:13px;color:var(--seryy)}
.forma input,.forma textarea{width:100%;color:#fff;background:transparent;resize:none;
  font:400 15px/1.45 'Onest',system-ui,sans-serif;padding:12px 2px;
  border:0;border-bottom:1px solid var(--liniya);outline:none;transition:border-color .4s}
.forma input:focus,.forma textarea:focus{border-color:var(--red)}
.forma button{grid-column:span 2;justify-self:start;border:0;cursor:pointer;color:#fff;
  font:600 15px/1 'Onest',system-ui,sans-serif;padding:18px 38px;background:var(--red);
  transition:transform .4s var(--plavno),box-shadow .4s}
.forma button:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(230,0,19,.34)}

/* ── подвал ── */
.podval{display:flex;align-items:center;justify-content:space-between;gap:40px;
  padding:32px var(--pad);border-top:1px solid var(--liniya);font-size:13px;color:var(--seryy)}
.podval nav{display:flex;gap:28px}
.podval a:hover{color:#fff}



/* ══ П1: первый экран — кадр во всю ширину, текст поверх.
   Кадрирование у каждого своё, задано в разметке: у завода вывеска
   уходит за правый край при центровке. ══ */
.geroy{position:relative;height:100vh;min-height:760px;overflow:hidden;display:flex;align-items:flex-end}
.geroy .kadry{position:absolute;inset:-6% 0 -12% 0;will-change:transform}
.geroy .kadry img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.02);
  filter:contrast(1.1) saturate(1.06) brightness(.76);
  transition:opacity 1.6s var(--plavno)}
.geroy .kadry img.on{opacity:1;animation:naezd 13s linear forwards}
/* у этого кадра завален горизонт на 2,8°, правим поворотом с запасом на обрезку */
.geroy .kadry img.krivo{transform-origin:50% 50%;rotate:-2.8deg;scale:1.12}
.geroy .kadry img.krivo.on{animation:naezd-krivo 13s linear forwards}
@keyframes naezd-krivo{from{scale:1.12}to{scale:1.2}}
@keyframes naezd{from{transform:scale(1.02)}to{transform:scale(1.1)}}
.geroy .zat{position:absolute;inset:0;background:
  radial-gradient(120% 80% at 50% 36%,rgba(6,6,8,.06) 32%,rgba(6,6,8,.8) 100%),
  linear-gradient(180deg,rgba(6,6,8,.78) 0,rgba(6,6,8,.12) 32%,rgba(6,6,8,.94) 100%)}
.geroy .obertka{position:relative;padding-bottom:132px}
.geroy h1{font-size:72px;line-height:1.02;letter-spacing:-.035em;font-weight:600;max-width:15ch}
.geroy h1 span{display:block;overflow:hidden}
.geroy h1 b{display:block;font-weight:inherit;transform:translateY(112%);
  animation:vyezd 1.15s var(--plavno) forwards}
.geroy h1 span:nth-child(2) b{animation-delay:.09s}
.geroy h1 span:nth-child(3) b{animation-delay:.18s}
@keyframes vyezd{to{transform:translateY(0)}}
.geroy .pod{margin-top:24px;font-size:18px;color:rgba(255,255,255,.72);
  opacity:0;animation:prostup 1s var(--plavno) .55s forwards}
@keyframes prostup{to{opacity:1}}

.geroy .upr{position:absolute;right:var(--pad);bottom:58px;z-index:6;text-align:right}
.geroy .podpisi{position:relative;height:20px;margin-bottom:15px}
.geroy .podpisi span{position:absolute;right:0;bottom:0;white-space:nowrap;
  font-size:14px;color:rgba(255,255,255,.62);opacity:0;transform:translateY(6px);
  transition:opacity .6s var(--plavno),transform .6s var(--plavno)}
.geroy .podpisi span.on{opacity:1;transform:none}
.geroy .metki{display:flex;gap:10px;justify-content:flex-end}
.geroy .metki button{width:46px;height:2px;padding:0;border:0;cursor:pointer;
  background:rgba(255,255,255,.26);position:relative;overflow:hidden}
.geroy .metki i{position:absolute;inset:0;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
@keyframes nalit{to{transform:scaleX(1)}}

/* ══ липкое подменю разделов ══ */
.podmenu{position:fixed;top:68px;left:0;right:0;z-index:40;height:0;overflow:hidden;
  background:rgba(8,8,10,.74);backdrop-filter:blur(16px) saturate(1.3);
  transition:height .45s var(--plavno),opacity .35s;opacity:0}
.podmenu.vidno{height:54px;opacity:1}
/* когда подменю разделов вышло, главное меню уступает ему место */
body.pod-vidno .shapka nav{opacity:0;pointer-events:none;transform:translateY(-6px)}
.shapka nav{transition:opacity .35s var(--plavno),transform .35s var(--plavno)}
.podmenu .obertka{display:flex;gap:34px;align-items:center;height:54px;
  border-top:1px solid var(--liniya)}
.podmenu a{font-size:14px;font-weight:500;color:var(--seryy);transition:color .3s}
.podmenu a:hover{color:#fff}

/* ══ горизонтальная лента применений ══ */
.gor{height:300vh;position:relative}
.gor .lipko{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;
  flex-direction:column;justify-content:center;background:var(--fon2)}
.gor .shapochka{margin-bottom:38px;padding-top:26px}
.gor .shapochka h2{font-size:42px;line-height:1.06;letter-spacing:-.03em;font-weight:600}
.gor .doroga{display:flex;gap:22px;padding-left:calc((100vw - var(--obertka))/2);
  will-change:transform}
.gor .p{flex:0 0 420px}
.gor .p .pic{height:300px;overflow:hidden}
.gor .p .pic img{width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(1.04);
  transition:transform .9s var(--plavno)}
.gor .p:hover .pic img{transform:scale(1.06)}
.gor .p h3{margin-top:22px;font-size:24px;font-weight:600;letter-spacing:-.02em}
.gor .p p{margin-top:12px;font-size:15px;line-height:1.6;color:var(--seryy)}

/* первый экран отсчитывается от окна, поэтому подвинем нижние отступы */
.kontakty{padding-bottom:104px}

/* ══ Применения: три подачи. Видна одна, остальные сняты. ══ */
.kinolenta,.vkladki{display:none}
body.prim1 .gor .doroga,body.prim1 .gor .shapochka,
body.prim2 .gor .doroga,body.prim2 .gor .shapochka{display:none}
body.prim1 .kinolenta{display:flex}
body.prim2 .vkladki{display:block}
body.prim1 .gor{height:700vh}
body.prim2 .gor{height:auto}
body.prim1 .gor .lipko{padding:0;display:block;background:var(--fon)}
body.prim2 .gor .lipko{position:static;height:auto;padding:118px 0;display:block;background:var(--fon2)}

/* ── А1 «Кинолента»: каждое применение занимает весь экран ── */
.kinolenta{height:100vh;will-change:transform}
.kinolenta .ek{position:relative;flex:0 0 100vw;height:100vh;overflow:hidden}
.kinolenta .ek img{width:100%;height:100%;object-fit:cover;
  filter:contrast(1.08) saturate(1.06) brightness(.82)}
.kinolenta .ek .tint{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,6,8,.9) 0,rgba(6,6,8,.45) 46%,rgba(6,6,8,.15) 100%),
             linear-gradient(0deg,rgba(6,6,8,.8) 0,rgba(6,6,8,0) 44%)}
.kinolenta .tekst{position:absolute;left:var(--pad);bottom:104px;width:640px}
.kinolenta .nom{display:block;font-size:14px;color:rgba(255,255,255,.5);margin-bottom:18px}
.kinolenta h3{font-size:76px;line-height:1;letter-spacing:-.04em;font-weight:600}
.kinolenta p{margin-top:24px;font-size:18px;line-height:1.6;color:rgba(255,255,255,.76)}


/* ── А2 «Вкладки»: привычно — крупный кадр слева, список применений справа ── */
.vkladki .zag2{margin-bottom:48px}
.vkladki .zag2 h2{font-size:42px;line-height:1.06;letter-spacing:-.03em;font-weight:600}
.vkladki .telo{display:grid;grid-template-columns:1fr 430px;gap:56px;align-items:start}
.vkladki .kadr{position:relative;height:560px;overflow:hidden}
.vkladki .kadr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.05);filter:contrast(1.06) saturate(1.05);
  transition:opacity .8s var(--plavno),transform 1.3s var(--plavno)}
.vkladki .kadr img.on{opacity:1;transform:scale(1)}
.vkladki .spisok li{position:relative;padding:17px 0 17px 22px;cursor:pointer;
  border-bottom:1px solid var(--liniya);font-size:18px;font-weight:500;
  color:var(--seryy);transition:color .35s,padding-left .45s var(--plavno)}
.vkladki .spisok li:before{content:'';position:absolute;left:0;top:50%;width:10px;height:1px;
  background:var(--red);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .45s var(--plavno)}
.vkladki .spisok li:hover{color:#D6D6DC}
.vkladki .spisok li.on{color:#fff;padding-left:28px}
.vkladki .spisok li.on:before{transform:scaleX(1)}
.vkladki .opis{margin-top:36px}
.vkladki .opis.vhod h3,.vkladki .opis.vhod p{animation:podnyat .55s var(--plavno) both}
.vkladki .opis.vhod p{animation-delay:.07s}
@keyframes podnyat{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.vkladki .opis h3{font-size:27px;font-weight:600;letter-spacing:-.025em}
.vkladki .opis p{margin-top:16px;font-size:16px;line-height:1.66;color:rgba(255,255,255,.76)}
.vkladki .opis a{display:inline-block;margin-top:26px;font-size:15px;font-weight:500;color:var(--red)}