.product-hero .hero-inner,
.service-hero .hero-inner { position: relative; z-index: 2; }
.hero-semantic {
  position: absolute;
  right: clamp(24px, 7vw, 120px);
  top: 50%;
  width: clamp(240px, 25vw, 390px);
  aspect-ratio: 1.35;
  transform: translateY(-44%);
  opacity: .92;
  pointer-events: none;
}
.hero-semantic svg { width: 100%; height: 100%; overflow: visible; }
.hero-semantic .panel { fill: rgba(7, 35, 70, .66); stroke: rgba(116, 205, 255, .62); stroke-width: 1.4; }
.hero-semantic .line { fill: none; stroke: rgba(127, 213, 255, .78); stroke-width: 1.6; }
.hero-semantic .accent { fill: #4bb7ff; }
.hero-semantic .soft { fill: rgba(177, 228, 255, .22); stroke: rgba(177, 228, 255, .62); }
.hero-semantic .label { fill: #e7f6ff; font: 600 10px/1 Arial, sans-serif; letter-spacing: .08em; }
.hero-semantic[data-theme="ai"] .accent { fill: #66d4ff; }
.hero-semantic[data-theme="big-data"] .accent { fill: #3fd3ba; }
.hero-semantic[data-theme="applications"] .accent { fill: #5ba8ff; }
.hero-semantic[data-theme="tools"] .accent { fill: #80c7ff; }
.hero-semantic[data-theme="consulting"] .accent { fill: #70d6c3; }
.hero-semantic[data-theme="development"] .accent { fill: #62b6ff; }
.hero-semantic[data-theme="testing"] .accent { fill: #7ee0a8; }
.hero-semantic[data-theme="partners"] .accent { fill: #72c8ff; }

@media (max-width: 900px) {
  .hero-semantic { right: 18px; width: 220px; opacity: .45; }
}
@media (max-width: 640px) {
  .hero-semantic { right: -58px; top: 58%; width: 230px; opacity: .28; }
}