@import url("paigaldus.css");

.system-hero-panel{
 min-height:400px;border:1px solid #2a2e36;border-radius:18px;padding:34px;
 display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;
 background:radial-gradient(circle at 50% 30%,rgba(213,167,67,.12),transparent 30%),linear-gradient(145deg,#171a20,#0c0e12 65%,#090a0d)
}
.system-hero-panel:before{
 content:"100 V";position:absolute;left:50%;top:55px;transform:translateX(-50%);
 color:rgba(213,167,67,.22);font-size:92px;line-height:1;font-weight:800;letter-spacing:-5px
}
.system-hero-panel:after{
 content:"";position:absolute;left:15%;right:15%;top:190px;height:1px;
 background:linear-gradient(90deg,transparent,#4b535f 18%,#d5a743 50%,#4b535f 82%,transparent)
}
.system-hero-panel strong,.system-hero-panel span{position:relative;z-index:2}
.system-hero-panel strong{font-size:25px;line-height:1.2;max-width:470px}
.system-hero-panel span{margin-top:9px;color:#aeb2ba;font-size:14px;max-width:470px;line-height:1.55}
@media(max-width:900px){.system-hero-panel{min-height:300px}.system-hero-panel:before{font-size:72px;top:45px}}

@media(min-width:901px){
 .format-list>div{grid-template-columns:190px minmax(0,1fr);gap:24px}
 .format-list strong{white-space:nowrap}
}

.system-diagram-section{padding-top:72px;padding-bottom:76px}
.system-diagram-head{margin-bottom:28px}
.system-diagram{margin:0;border:1px solid #2a2e36;border-radius:18px;overflow:hidden;background:#0b0d10;box-shadow:0 18px 60px rgba(0,0,0,.22)}
.system-diagram img{display:block;width:100%;height:auto}
@media(max-width:900px){
 .system-diagram-section{padding-top:52px;padding-bottom:56px}
 .system-diagram-head{margin-bottom:20px}
 .system-diagram{border-radius:12px;overflow-x:auto}
 .system-diagram img{width:1120px;max-width:none}
}