/* Технопром — heavy industrial visual layer. Source text/video stays intact. */
:root{--vx-heat:#ff4b12;--vx-amber:#ff9b42;--vx-steel:#98a3ad;--vx-bg:#080a0d;--vx-panel:#11151a;--vx-line:rgba(255,255,255,.09);--vx-ease:cubic-bezier(.16,1,.3,1);--vx-mx:50vw;--vx-my:20vh}
html{background:#080a0d}
body{position:relative;background:radial-gradient(900px 620px at 90% 0%,rgba(230,57,0,.12),transparent 62%),radial-gradient(700px 520px at -8% 45%,rgba(87,103,118,.1),transparent 68%),linear-gradient(145deg,#080a0d,#0c1014 54%,#080a0d)!important;background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;opacity:.27;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(circle at 50% 18%,#000,transparent 74%);mask-image:radial-gradient(circle at 50% 18%,#000,transparent 74%)}
body::after{content:"";position:fixed;inset:0;z-index:25000;pointer-events:none;opacity:.04;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E")}
.vx-ambient{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}.vx-ambient::before,.vx-ambient::after{content:"";position:absolute;border-radius:50%;filter:blur(100px)}.vx-ambient::before{width:42vw;height:42vw;right:-22vw;top:-8vh;background:rgba(230,57,0,.16);animation:vxDrift 18s ease-in-out infinite alternate}.vx-ambient::after{width:35vw;height:35vw;left:-18vw;bottom:-8vh;background:rgba(82,103,124,.12);animation:vxDrift 24s ease-in-out infinite alternate-reverse}@keyframes vxDrift{to{transform:translate3d(7vw,7vh,0) scale(1.15)}}
.vx-progress{position:fixed;left:0;top:0;width:100%;height:2px;z-index:30000;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--vx-heat),var(--vx-amber));box-shadow:0 0 20px rgba(255,75,18,.8)}
.vx-glow{position:fixed;left:var(--vx-mx);top:var(--vx-my);width:460px;height:460px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(circle,rgba(255,75,18,.065),transparent 68%)}
img{visibility:visible!important;opacity:1!important}video{visibility:visible!important}
nav{background:rgba(8,10,13,.78)!important;backdrop-filter:blur(18px) saturate(1.2);border-bottom-color:rgba(255,255,255,.075)!important;transition:background .4s ease,box-shadow .4s ease,border-color .4s ease}
nav.vx-scrolled{background:rgba(8,10,13,.95)!important;border-bottom-color:rgba(255,75,18,.24)!important;box-shadow:0 18px 55px rgba(0,0,0,.4)}
nav a{position:relative}.hidden.md\:flex a::after{content:"";position:absolute;left:0;bottom:-10px;width:100%;height:1px;background:linear-gradient(90deg,var(--vx-heat),transparent);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--vx-ease)}.hidden.md\:flex a:hover::after{transform:scaleX(1);transform-origin:left}
.btn-heat{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);box-shadow:0 18px 45px rgba(230,57,0,.22);transition:transform .4s var(--vx-ease),box-shadow .4s ease,background .3s ease,color .3s ease!important}.btn-heat::after{content:"";position:absolute;inset:-2px;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.3) 48%,transparent 72%);transform:translateX(-140%);transition:transform .75s var(--vx-ease)}.btn-heat:hover{transform:translateY(-4px);box-shadow:0 26px 62px rgba(230,57,0,.32)}.btn-heat:hover::after{transform:translateX(140%)}
header.relative{isolation:isolate;overflow:hidden;background:radial-gradient(800px 530px at 86% 17%,rgba(230,57,0,.13),transparent 66%)}
header.relative::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(8,10,13,.96) 0%,rgba(8,10,13,.71) 45%,rgba(8,10,13,.28) 80%),linear-gradient(0deg,#080a0d 0%,transparent 36%)}
header.relative::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--vx-heat),transparent);box-shadow:0 0 24px rgba(255,75,18,.75);animation:vxEdge 6.5s ease-in-out infinite}@keyframes vxEdge{0%,100%{opacity:.22;transform:scaleX(.2)}50%{opacity:1;transform:scaleX(1)}}
/* source video is not restyled */
header h1{text-wrap:balance;text-shadow:0 18px 58px rgba(0,0,0,.5)}
header .bg-bgPanel\/90{background:linear-gradient(145deg,rgba(18,22,27,.9),rgba(8,10,13,.72))!important;border-color:rgba(255,255,255,.10)!important;box-shadow:0 30px 90px rgba(0,0,0,.36);clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%)}
.marquee-wrapper{background:linear-gradient(90deg,#101419,#181d22,#101419)!important;border-color:rgba(255,255,255,.08)!important;box-shadow:0 18px 50px rgba(0,0,0,.22)}
section,main{position:relative;isolation:isolate}
section::before,main::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(650px 380px at 90% 5%,rgba(230,57,0,.055),transparent 70%)}
section:nth-of-type(even)::before{transform:scaleX(-1)}
.tech-border-b,.tech-border-t,.tech-border-r,.tech-border-l{border-color:rgba(255,255,255,.085)!important}
/* Main service section: typography-led, not four generic boxes */
section.grid.xl\:grid-cols-12{background:linear-gradient(135deg,rgba(17,21,26,.72),rgba(8,10,13,.4))}
section.grid.xl\:grid-cols-12>div:first-child{background:radial-gradient(500px 340px at 0 100%,rgba(230,57,0,.08),transparent 70%)}
section.grid.xl\:grid-cols-12>div:last-child>div{position:relative;background:transparent!important;overflow:hidden;transition:background .42s ease,padding .5s var(--vx-ease),transform .5s var(--vx-ease)}
section.grid.xl\:grid-cols-12>div:last-child>div::before{content:"";position:absolute;right:18px;top:3px;width:110px;height:110px;border:1px solid rgba(255,255,255,.055);border-radius:50%;box-shadow:0 0 0 22px rgba(255,255,255,.012),0 0 0 44px rgba(255,255,255,.009);transition:transform .7s var(--vx-ease),border-color .4s ease}
section.grid.xl\:grid-cols-12>div:last-child>div::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:linear-gradient(90deg,var(--vx-heat),transparent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--vx-ease)}
section.grid.xl\:grid-cols-12>div:last-child>div:hover{background:linear-gradient(115deg,rgba(230,57,0,.075),transparent)!important;transform:translateY(-5px)}
section.grid.xl\:grid-cols-12>div:last-child>div:hover::before{transform:scale(1.12) rotate(15deg);border-color:rgba(255,75,18,.18)}
section.grid.xl\:grid-cols-12>div:last-child>div:hover::after{transform:scaleX(1)}
#logistics{background:radial-gradient(720px 430px at 85% 15%,rgba(230,57,0,.075),transparent 68%),linear-gradient(145deg,rgba(17,21,26,.78),rgba(8,10,13,.62))!important;overflow:hidden}
#logistics::after{content:"";position:absolute;right:-90px;top:-90px;width:420px;height:420px;border:1px dashed rgba(255,75,18,.16);border-radius:50%;box-shadow:0 0 0 55px rgba(255,75,18,.018),0 0 0 110px rgba(255,75,18,.012);animation:vxRotate 30s linear infinite;z-index:-1}@keyframes vxRotate{to{transform:rotate(360deg)}}
#logistics .grid>div{background:transparent!important;border-left:2px solid rgba(255,75,18,.35)!important;position:relative;padding-left:28px!important;transition:transform .45s var(--vx-ease),border-color .35s ease}
#logistics .grid>div:hover{transform:translateY(-6px);border-left-color:var(--vx-heat)!important}
#faq{background:radial-gradient(600px 350px at 8% 10%,rgba(230,57,0,.055),transparent 70%),linear-gradient(145deg,#11151a,#0b0e12)!important}
details{transition:background .35s ease,padding .45s var(--vx-ease)}details:hover,details[open]{background:linear-gradient(90deg,rgba(230,57,0,.075),transparent);padding-inline:22px}
footer{position:relative;background:radial-gradient(640px 320px at 84% 0%,rgba(230,57,0,.075),transparent 70%),linear-gradient(145deg,#11151a,#080a0d)!important;overflow:hidden}footer::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:64px 100%}
/* all interior pages */
body>header.max-w-\[1600px\],main.max-w-\[1600px\]{background:radial-gradient(600px 330px at 88% 8%,rgba(230,57,0,.075),transparent 72%)}
.price-row{position:relative;background:transparent!important;transition:background .36s ease,padding .45s var(--vx-ease),transform .45s var(--vx-ease)}.price-row::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;background:var(--vx-heat);transition:width .5s var(--vx-ease)}.price-row:hover{background:linear-gradient(90deg,rgba(230,57,0,.07),transparent);padding-inline:18px!important;transform:translateX(4px)}.price-row:hover::after{width:100%}
.prose{position:relative}.prose::before{content:"";position:absolute;left:-38px;top:0;bottom:0;width:1px;background:linear-gradient(var(--vx-heat),transparent 90%)}.prose h2,.prose h3{position:relative}.prose h2::before,.prose h3::before{content:"";position:absolute;left:-38px;top:.62em;width:22px;height:1px;background:var(--vx-heat)}
.prose blockquote,.prose .bg-bgPanel{background:linear-gradient(110deg,rgba(230,57,0,.08),rgba(255,255,255,.018))!important;border-color:rgba(255,75,18,.36)!important}
main.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3>a,main.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3>article{position:relative;background:linear-gradient(145deg,rgba(19,23,28,.74),rgba(9,11,14,.55));transition:transform .55s var(--vx-ease),background .4s ease,box-shadow .55s ease!important;overflow:hidden}
main.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3>a::after,main.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3>article::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:linear-gradient(90deg,var(--vx-heat),transparent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--vx-ease)}
main.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3>a:hover,main.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3>article:hover{transform:translateY(-8px);background:linear-gradient(145deg,rgba(230,57,0,.085),rgba(12,15,18,.72));box-shadow:0 28px 75px rgba(0,0,0,.3)}main.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3>a:hover::after,main.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3>article:hover::after{transform:scaleX(1)}
.vx-animate-ready{will-change:transform,opacity,filter}
@media(max-width:768px){.vx-glow{display:none}.prose::before,.prose h2::before,.prose h3::before{display:none}#logistics::after{width:260px;height:260px;right:-130px;top:-80px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.reveal{opacity:1!important;transform:none!important}}
/* Safety: original reveal implementation must never leave content invisible. */
.reveal{opacity:1!important;transform:none!important}

/* === Smooth motion pass: one observer, no blur or layout shifts === */
body{background-attachment:scroll!important}
body::after{display:none!important}
.vx-glow{display:none!important}
.vx-ambient::before,.vx-ambient::after{animation:none!important;transform:none!important;filter:blur(80px)!important;opacity:.7}
.vx-animate-ready{will-change:auto!important}
.reveal{transition-property:opacity,transform!important;transition-duration:.65s,.74s!important;transition-timing-function:ease,cubic-bezier(.16,1,.3,1)!important}
html.vx-motion-enabled .vx-motion-reveal{opacity:0;translate:0 12px;transition:opacity .6s ease,translate .72s var(--vx-ease);transition-delay:var(--vx-delay,0ms)}
html.vx-motion-enabled .vx-motion-reveal.vx-visible{opacity:1;translate:0 0}
header.relative::after{animation:vxSoftEdge 5.6s ease-in-out infinite!important;transform:none!important}
@keyframes vxSoftEdge{0%,100%{opacity:.3}50%{opacity:.9}}
#logistics::after{animation:none!important}
section.grid.xl\:grid-cols-12>div:last-child>div, #logistics .grid>div, details{transition-duration:.36s!important}
section.grid.xl\:grid-cols-12>div:last-child>div:hover,#logistics .grid>div:hover{transform:translateY(-3px)!important}
details:hover,details[open]{padding-inline:10!important;box-shadow:inset 3px 0 0 rgba(230,57,0,.42)}
section.grid.xl\:grid-cols-12>div:last-child>div::before{transition:none!important}
.vx-ambient,.vx-progress{pointer-events:none!important}
a,button,summary{pointer-events:auto}
@media(max-width:768px){html.vx-motion-enabled .vx-motion-reveal{translate:0 9px}.reveal{transform:translateY(14px)!important}.reveal.active{transform:none!important}section.grid.xl\:grid-cols-12>div:last-child>div:hover,#logistics .grid>div:hover{transform:none!important}}
@media(prefers-reduced-motion:reduce){html.vx-motion-enabled .vx-motion-reveal{opacity:1!important;translate:none!important}}

/* Restore one native reveal animation, replacing the former forced-visible safety rule. */
html.vx-motion-enabled .reveal{opacity:0!important;transform:none!important;translate:0 14px;transition:opacity .62s ease,translate .76s var(--vx-ease)!important}
html.vx-motion-enabled .reveal.active{opacity:1!important;transform:none!important;translate:0 0}
@media(max-width:768px){html.vx-motion-enabled .reveal{translate:0 10px}}
@media(prefers-reduced-motion:reduce){html.vx-motion-enabled .reveal{opacity:1!important;translate:none!important}}