.digital-hero { position: relative; width: 100%; height: 395px; overflow: hidden; border: 1px solid #cce6f1; border-radius: 9px; background: radial-gradient(circle at 65% 45%, #d1f2fe 0, #eaf8fd 28%, #f7fcfe 64%); box-shadow: 0 22px 45px rgba(28, 93, 119, .14); }.tech-orbit { position: absolute; border: 1px solid #abd9ec; border-radius: 50%; transform: rotate(-25deg); }.orbit-a { width: 420px; height: 170px; top: 105px; right: -32px; }.orbit-b { width: 310px; height: 126px; top: 126px; right: 29px; border-color: #c8e8f3; }.device-panel { position: absolute; box-shadow: 0 15px 27px rgba(18, 77, 104, .18); }.monitor-panel { width: 225px; height: 154px; right: 96px; top: 72px; overflow: hidden; padding: 15px; border: 8px solid #123e5d; border-radius: 9px; background: linear-gradient(135deg, #117fbf, #0e436c); }.monitor-panel::after { content: ""; position: absolute; left: 83px; bottom: -42px; width: 43px; height: 45px; background: #123e5d; clip-path: polygon(35% 0, 65% 0, 86% 100%, 14% 100%); }.monitor-panel::before { content: ""; position: absolute; left: 45px; bottom: -51px; width: 118px; height: 9px; border-radius: 50%; background: #123e5d; }.monitor-top { display: flex; gap: 5px; }.monitor-top i { width: 5px; height: 5px; border-radius: 50%; background: #bdeffc; }.monitor-bars { position: absolute; bottom: 27px; left: 35px; display: flex; align-items: end; gap: 8px; height: 69px; }.monitor-bars b { width: 16px; border-radius: 3px 3px 0 0; background: #90ddf5; }.monitor-bars b:nth-child(1){height:29px}.monitor-bars b:nth-child(2){height:52px}.monitor-bars b:nth-child(3){height:42px}.monitor-bars b:nth-child(4){height:63px}.monitor-bars b:nth-child(5){height:49px}.monitor-panel strong { position: absolute; right: 14px; bottom: 14px; color: #d1f4ff; font: 700 10px Manrope, sans-serif; letter-spacing: .12em; }.server-panel { right: 23px; bottom: 60px; width: 101px; height: 136px; padding: 17px 13px; border-radius: 7px; background: #e9f9fe; }.server-panel::before { content: ""; position: absolute; top: 11px; left: 12px; right: 12px; height: 5px; background: #75c8e7; border-radius: 8px; }.server-panel i { display: block; height: 21px; margin: 7px 0; border-radius: 3px; background: #136a9b; }.server-panel i::after { content: ""; display: block; width: 7px; height: 7px; margin: 7px 7px 0 auto; border-radius: 50%; background: #a1e5f7; }.server-panel span { color: #52b5db; font-size: 8px; letter-spacing: 4px; }.network-panel { left: 27px; bottom: 78px; width: 137px; height: 89px; padding: 22px 17px; border-radius: 8px; background: #fff; }.network-panel span { display: inline-block; width: 11px; height: 11px; margin: 5px; border-radius: 50%; background: #218ac3; box-shadow: 0 0 0 6px #d5f1fa; }.network-panel b { display: block; margin-top: 8px; color: #1b638d; font: 700 8px Manrope, sans-serif; letter-spacing: .1em; }.data-line { position: absolute; height: 1px; background: #74c8e7; transform-origin: left center; }.line-a { width: 180px; left: 125px; top: 185px; transform: rotate(-24deg); }.line-b { width: 160px; left: 106px; top: 240px; transform: rotate(18deg); }.hero-chip { position: absolute; z-index: 2; padding: 10px 12px; border-radius: 4px; color: #335d72; background: #fff; box-shadow: 0 11px 23px rgba(23, 78, 99, .14); font-size: 11px; font-weight: 700; }.chip-one { top: 45px; right: 11px; }.chip-two { bottom: 27px; left: 18px; }.hero-chip::first-letter { color: #1680bc; }
.support-card .service-graphic { position: relative; height: 184px; overflow: hidden; background: linear-gradient(135deg, #e0f5fc, #f8fdff); }.repair-screen { position: absolute; left: 50%; top: 43px; width: 108px; height: 74px; border: 8px solid #0f5079; border-radius: 7px; background: #1b93cb; transform: translateX(-50%); }.repair-screen::after { content: ""; position: absolute; left: 37px; bottom: -22px; width: 20px; height: 19px; background: #0f5079; clip-path: polygon(35% 0,65% 0,90% 100%,10% 100%); }.repair-screen::before { content: ""; position: absolute; left: 21px; bottom: -28px; width: 50px; height: 5px; border-radius: 6px; background: #0f5079; }.repair-tool { position: absolute; top: 47px; right: 74px; width: 11px; height: 76px; border-radius: 6px; background: #73c9e7; transform: rotate(43deg); }.repair-tool::after { content: ""; position: absolute; top: -13px; left: -6px; width: 23px; height: 23px; border: 5px solid #73c9e7; border-radius: 50%; }.repair-dot { position: absolute; left: 57px; bottom: 31px; width: 12px; height: 12px; border-radius: 50%; background: #1685bf; box-shadow: 20px -21px 0 #71c9e8; }.network-graphic { background: linear-gradient(135deg, #f1fbff, #cceefa)!important; }.network-node { position: absolute; z-index: 2; width: 35px; height: 35px; border: 7px solid #2389c1; border-radius: 50%; background: #fff; box-shadow: 0 0 0 8px #d0f1fb; }.n1 { left: 58px; top: 36px; }.n2 { right: 60px; top: 38px; }.n3 { left: 75px; bottom: 32px; }.n4 { right: 78px; bottom: 30px; }.network-graphic i { position: absolute; z-index: 1; display: block; height: 2px; background: #49add6; transform-origin: left center; }.network-graphic i:nth-of-type(1) { width: 137px; left: 88px; top: 55px; }.network-graphic i:nth-of-type(2) { width: 69px; left: 86px; top: 65px; transform: rotate(51deg); }.network-graphic i:nth-of-type(3) { width: 61px; right: 91px; top: 65px; transform: rotate(128deg); }.cctv-graphic { background: linear-gradient(135deg, #d5f0fb, #f7fdff)!important; }.camera-body { position: absolute; top: 60px; left: 76px; width: 123px; height: 58px; border-radius: 28px 32px 32px 28px; background: #167ab4; transform: rotate(-10deg); }.camera-body::after { content: ""; position: absolute; right: -21px; top: 14px; border-left: 27px solid #69c2e4; border-top: 15px solid transparent; border-bottom: 15px solid transparent; }.camera-body i { position: absolute; left: 13px; top: 13px; width: 31px; height: 31px; border: 7px solid #d6f4fc; border-radius: 50%; background: #0d517b; }.camera-arm { position: absolute; left: 137px; bottom: 35px; width: 58px; height: 28px; border-bottom: 8px solid #0e557d; border-right: 8px solid #0e557d; transform: skew(-23deg); }.camera-signal { position: absolute; right: 63px; top: 34px; width: 42px; height: 42px; border-top: 2px solid #73c8e6; border-right: 2px solid #73c8e6; border-radius: 0 39px 0 0; transform: rotate(9deg); }
@media (max-width:800px){.digital-hero{height:350px;max-width:500px;margin:0 auto 42px}.support-card .service-graphic{height:205px}}@media(max-width:520px){.digital-hero{height:290px}.monitor-panel{transform:scale(.8);transform-origin:top right;right:32px;top:50px}.server-panel{transform:scale(.75);transform-origin:bottom right;right:0}.network-panel{transform:scale(.78);transform-origin:bottom left;left:0}.hero-chip{font-size:10px}.chip-one{right:8px;top:15px}.chip-two{bottom:12px;left:8px}}