@import url("./webrtc-page.css");
.vehicle-connectivity-page{--wr-cyan:#31d2ad;--vc-blue:#3986ff}.vc-network{background:radial-gradient(circle at 50% 45%,rgba(49,210,173,.14),transparent 35%),radial-gradient(circle at 90% 5%,rgba(57,134,255,.1),transparent 28%),linear-gradient(145deg,#102432,#07131d);border:1px solid rgba(114,166,185,.24);border-radius:22px;box-shadow:inset 0 1px rgba(255,255,255,.03),0 28px 70px rgba(0,0,0,.2);min-height:460px;overflow:hidden;position:relative}.vc-network:before{background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:32px 32px;content:"";inset:0;mask-image:linear-gradient(transparent,black 25%,black 75%,transparent);position:absolute}.vc-network-top{align-items:center;color:#71909d;display:flex;font-size:7px;font-weight:800;gap:10px;left:22px;letter-spacing:.15em;position:absolute;right:22px;top:18px}.vc-network-top i{background:var(--cw-line);flex:1;height:1px}.vc-network-top small{color:var(--wr-cyan);font-size:7px}.vc-vehicle{background:linear-gradient(180deg,rgba(17,50,55,.98),rgba(8,25,31,.98));border:1px solid rgba(49,210,173,.46);border-radius:58px 58px 36px 36px;box-shadow:0 0 60px rgba(49,210,173,.13);height:255px;left:50%;position:absolute;top:51%;transform:translate(-50%,-50%);width:138px;z-index:3}.vc-vehicle:before,.vc-vehicle:after{border:1px solid rgba(120,164,180,.26);content:"";left:15px;position:absolute;right:15px}.vc-vehicle:before{border-radius:43px 43px 13px 13px;height:56px;top:14px}.vc-vehicle:after{border-radius:10px 10px 22px 22px;bottom:15px;height:48px}.vc-cabin{align-items:center;display:flex;gap:7px;justify-content:center;left:0;position:absolute;right:0;top:82px}.vc-cabin span{color:#78929d;font-size:6px;font-weight:800;letter-spacing:.1em}.vc-cabin i{background:rgba(120,164,180,.35);height:1px;width:20px}.vc-gateway{align-items:center;background:#0d2527;border:1px solid rgba(49,210,173,.55);border-radius:13px;box-shadow:0 0 24px rgba(49,210,173,.13);display:flex;flex-direction:column;height:91px;justify-content:center;left:19px;position:absolute;right:19px;text-align:center;top:104px}.vc-gateway small{color:var(--wr-cyan);font-size:6px;letter-spacing:.16em}.vc-gateway strong{font-size:13px;line-height:1.1;margin:6px 0}.vc-gateway span{color:#7d939c;font-size:6px}.vc-axle{background:rgba(49,210,173,.25);height:1px;left:-8px;position:absolute;right:-8px}.vc-axle-front{top:62px}.vc-axle-rear{bottom:57px}.vc-wheel{background:#071119;border:1px solid #45616e;border-radius:4px;height:41px;position:absolute;width:9px}.vc-wheel-fl{left:-7px;top:43px}.vc-wheel-fr{right:-7px;top:43px}.vc-wheel-rl{bottom:39px;left:-7px}.vc-wheel-rr{bottom:39px;right:-7px}.vc-bus{bottom:70px;display:flex;gap:5px;justify-content:center;left:50%;position:absolute;transform:translateX(-50%);z-index:4}.vc-bus span{background:#0b1c25;border:1px solid rgba(49,210,173,.18);border-radius:99px;color:#718895;font-size:5px;font-weight:800;padding:5px 7px}.vc-service{background:rgba(10,27,38,.92);border:1px solid rgba(112,150,166,.25);border-radius:10px;box-shadow:0 10px 26px rgba(0,0,0,.2);display:flex;flex-direction:column;gap:4px;min-width:78px;padding:11px 13px;position:absolute;z-index:4}.vc-service small{color:#617b88;font-size:5px;letter-spacing:.13em}.vc-service b{font-size:10px}.vc-service-hmi{left:7%;top:16%}.vc-service-ecu{bottom:17%;left:7%}.vc-service-mobile{right:7%;top:16%}.vc-service-cloud{bottom:17%;right:7%}.vc-connections{inset:0;position:absolute;z-index:2}.vc-connections path{fill:none;stroke:rgba(49,210,173,.56);stroke-dasharray:5 6;stroke-width:1}.vc-connections path:nth-child(3),.vc-connections path:nth-child(4){stroke:rgba(57,134,255,.58)}.vc-signal{border:1px solid rgba(49,210,173,.15);border-radius:50%;height:290px;left:50%;position:absolute;top:51%;transform:translate(-50%,-50%);width:290px}.vc-signal-b{border-color:rgba(57,134,255,.09);height:365px;width:365px}.vc-network>p{bottom:18px;color:#607580;font-size:7px;letter-spacing:.12em;position:absolute;text-align:center;text-transform:uppercase;width:100%}.vc-domain-grid{display:grid;gap:14px;grid-template-columns:repeat(4,1fr)}.vc-domain-grid article,.vc-technology-grid article{background:linear-gradient(145deg,var(--cw-panel),var(--cw-panel2));border:1px solid var(--cw-line);border-radius:15px;padding:23px}.vc-domain-grid article{min-height:350px}.vc-domain-grid article>span,.vc-technology-grid article>span{color:var(--wr-cyan);font-size:9px;font-weight:800}.vc-domain-grid h3{font-size:19px;line-height:1.22;margin:30px 0 18px}.vc-list{color:#aebcc5;display:grid;gap:7px;list-style:none;margin:0;padding:0}.vc-list li{font-size:11px;line-height:1.45;padding-left:13px;position:relative}.vc-list li:before{color:var(--wr-cyan);content:"•";left:0;position:absolute}.vc-domain-grid+.wr-placeholder,.wr-card-grid+.wr-placeholder{margin-top:22px}.vc-technology-grid{display:grid;gap:17px;grid-template-columns:repeat(3,1fr)}.vc-technology-grid article{min-height:430px}.vc-technology-grid h3{font-size:23px;margin:36px 0 12px}.vc-technology-grid p{color:var(--cw-muted);font-size:13px;line-height:1.6;margin:0 0 22px}.vc-technology-grid .vc-list li{font-size:12px}
@media(max-width:1050px){.vc-domain-grid{grid-template-columns:repeat(2,1fr)}.vc-technology-grid{grid-template-columns:1fr 1fr}.vc-technology-grid article:last-child{grid-column:1/-1;min-height:auto}}
@media(max-width:680px){.vc-network{min-height:390px}.vc-vehicle{height:220px;width:118px}.vc-gateway{left:15px;right:15px;top:88px}.vc-axle-front{top:53px}.vc-axle-rear{bottom:49px}.vc-wheel-fl,.vc-wheel-fr{top:35px}.vc-wheel-rl,.vc-wheel-rr{bottom:31px}.vc-bus{bottom:58px}.vc-service{min-width:66px;padding:9px}.vc-service-hmi,.vc-service-ecu{left:4%}.vc-service-mobile,.vc-service-cloud{right:4%}.vc-signal-a{height:240px;width:240px}.vc-signal-b{height:310px;width:310px}.vc-domain-grid,.vc-technology-grid{grid-template-columns:1fr}.vc-domain-grid article{min-height:auto}.vc-technology-grid article,.vc-technology-grid article:last-child{grid-column:auto;min-height:auto}}