/* Professional digital-operations visual layer */
.hero { min-height: 810px; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(25,118,210,.17) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: linear-gradient(90deg, transparent 5%, rgba(0,0,0,.2) 48%, rgba(0,0,0,.9) 100%);
}

.network-card { height: 560px; perspective: 1200px; }
.operations-panel {
  position: relative;
  z-index: 4;
  width: min(440px, 88%);
  min-height: 415px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(239,250,253,.91));
  box-shadow: 0 38px 80px rgba(29,93,132,.2), inset 0 1px 0 #fff;
  transform: rotateY(-5deg) rotateX(2deg);
  backdrop-filter: blur(18px);
}
.operations-panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(22,185,207,.6), transparent 40%, rgba(25,118,210,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.panel-top { display:flex; align-items:center; justify-content:space-between; padding-bottom:15px; border-bottom:1px solid #deebf0; color:#7790a3; font-size:9px; font-weight:700; letter-spacing:1.4px; }
.live-dot { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#1bc886; box-shadow:0 0 0 5px rgba(27,200,134,.13); animation:livePulse 2s infinite; }
@keyframes livePulse { 50% { box-shadow:0 0 0 9px rgba(27,200,134,0); } }
.panel-brand { display:flex; align-items:center; gap:12px; margin:20px 0; }
.panel-logo { display:grid; place-items:center; width:48px; height:55px; padding:4px; border-radius:11px; background:#fff; border:1px solid #e0edf2; }
.panel-logo img { max-width:100%; max-height:100%; object-fit:contain; }
.panel-brand small,.panel-brand strong { display:block; }
.panel-brand small { color:#7890a1; font-size:9px; letter-spacing:1.3px; }
.panel-brand strong { font-size:17px; color:#173d5e; }
.secure-badge { margin-left:auto; padding:5px 8px; border-radius:6px; color:#14815a; background:#e6f8f0; font-size:8px; font-weight:800; letter-spacing:1px; }
.system-health { display:flex; align-items:end; justify-content:space-between; }
.system-health small { display:block; color:#7890a1; font-size:9px; letter-spacing:1.2px; }
.system-health b { color:#1b557d; font-size:17px; }
.system-health > strong { color:#1976d2; font-size:35px; letter-spacing:-2px; }
.system-health sup { font-size:13px; letter-spacing:0; }
.data-chart { position:relative; height:92px; margin:15px 0 21px; padding:0 7px; display:flex; align-items:end; gap:9px; border-bottom:1px solid #d9e9ef; background:repeating-linear-gradient(to bottom, transparent, transparent 29px, rgba(25,118,210,.07) 30px); overflow:hidden; }
.data-chart span { width:100%; height:var(--h); border-radius:5px 5px 1px 1px; background:linear-gradient(to top,#1976d2,#24c0d1); opacity:.8; animation:barGrow 1.2s both; transform-origin:bottom; }
.data-chart span:nth-child(2n) { animation-delay:.1s; }
.data-chart i { position:absolute; left:0; right:0; top:24%; height:2px; background:linear-gradient(90deg,transparent,#16b9cf 10%,#1976d2 90%,transparent); transform:skewY(-6deg); filter:drop-shadow(0 3px 3px rgba(22,185,207,.25)); }
@keyframes barGrow { from { transform:scaleY(0); } }
.panel-services { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.panel-services > div { position:relative; min-width:0; padding:11px 9px; display:flex; align-items:center; gap:7px; border:1px solid #dfedf2; border-radius:11px; background:#fff; }
.panel-services p,.panel-services b,.panel-services small { display:block; margin:0; }
.panel-services b { color:#365b75; font-size:10px; }
.panel-services small { color:#8aa0af; font-size:8px; }
.panel-services > div > i { position:absolute; top:8px; right:8px; width:5px; height:5px; border-radius:50%; background:#21c783; }
.service-icon { color:#1976d2; font-size:17px; }

.float-card { position:absolute; z-index:6; border:1px solid rgba(255,255,255,.9); background:rgba(255,255,255,.94); box-shadow:0 18px 45px rgba(29,93,132,.16); backdrop-filter:blur(15px); }
.traffic { left:-1%; bottom:6%; width:175px; padding:15px 16px; border-radius:15px; }
.traffic > span,.traffic > b { display:block; }
.traffic > span { color:#7890a1; font-size:8px; letter-spacing:1px; }
.traffic > b { margin:3px 0 8px; color:#194c70; font-size:20px; }
.traffic small { font-size:9px; color:#7890a1; }
.traffic > i { display:block; height:4px; border-radius:4px; background:#e3eff3; overflow:hidden; }
.traffic em { display:block; width:78%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#1976d2,#16b9cf); }
.protected { right:-1%; top:9%; display:flex; align-items:center; gap:9px; padding:11px 14px; border-radius:13px; }
.protected > span { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; color:#fff; background:linear-gradient(135deg,#21c783,#16a66d); }
.protected b,.protected small { display:block; }
.protected b { color:#26536f; font-size:11px; }.protected small { color:#8298a8; font-size:8px; }
.orbit { position:absolute; z-index:1; border:1px dashed rgba(25,118,210,.22); border-radius:50%; animation:orbitSpin 22s linear infinite; }
.orbit-one { width:510px; height:510px; }.orbit-two { width:620px; height:620px; animation-direction:reverse; animation-duration:32s; }
.orbit span { position:absolute; top:8%; left:14%; width:12px; height:12px; border-radius:50%; background:#16b9cf; box-shadow:0 0 0 8px rgba(22,185,207,.1); }
@keyframes orbitSpin { to { transform:rotate(360deg); } }
.circuit-lines { position:absolute; inset:7% 0; z-index:0; }
.circuit-lines i { position:absolute; width:125px; height:70px; border-top:1px solid rgba(25,118,210,.25); border-right:1px solid rgba(25,118,210,.25); }
.circuit-lines i::after { content:""; position:absolute; width:6px; height:6px; border-radius:50%; background:#1976d2; right:-3px; bottom:-3px; }
.circuit-lines i:nth-child(1){top:10%;left:-2%;}.circuit-lines i:nth-child(2){top:18%;right:-1%;transform:rotate(90deg)}.circuit-lines i:nth-child(3){bottom:8%;left:8%;transform:rotate(180deg)}.circuit-lines i:nth-child(4){bottom:2%;right:6%;transform:rotate(270deg)}
.tech-chip { position:absolute; z-index:3; padding:6px 10px; border:1px solid rgba(25,118,210,.2); border-radius:7px; color:#1976d2; background:#f2fbfd; font-size:8px; font-weight:800; letter-spacing:1.5px; }
.chip-one{left:5%;top:22%}.chip-two{right:5%;bottom:22%}

.section-head h2,.org-heading h2,.about h2,.contact h2 { position:relative; }
.section-head h2::after,.org-heading h2::after { content:""; display:block; width:46px; height:4px; margin-top:15px; border-radius:5px; background:linear-gradient(90deg,#1976d2,#16b9cf); }
.org-heading h2::after { margin-left:auto; margin-right:auto; }
.system-card::after { content:""; position:absolute; width:110px; height:110px; right:-55px; top:-55px; border:1px solid rgba(25,118,210,.08); border-radius:50%; box-shadow:0 0 0 18px rgba(22,185,207,.025); transition:.3s; }
.system-card:hover::after { transform:scale(1.25); border-color:rgba(22,185,207,.2); }
.duty { position:relative; overflow:hidden; }
.duty::after { content:""; position:absolute; right:20px; bottom:17px; width:30px; height:18px; opacity:.18; background:repeating-linear-gradient(90deg,#1976d2 0 2px,transparent 2px 6px); transform:skewX(-25deg); }

@media(max-width:1100px){.operations-panel{width:88%}.protected{right:0}.traffic{left:0}}
@media(max-width:920px){.network-card{height:520px;max-width:620px;width:100%;margin:auto}.operations-panel{width:min(440px,78%)}.hero{padding-bottom:60px}.orbit-two{width:540px;height:540px}}
@media(max-width:620px){.network-card{display:block;height:480px;margin-top:20px}.operations-panel{width:94%;margin:auto;padding:17px;transform:none}.orbit-two,.circuit-lines,.tech-chip{display:none}.orbit-one{width:400px;height:400px;left:50%;transform:translateX(-50%)}.traffic{left:0;bottom:0}.protected{right:0;top:0}.panel-services{gap:5px}.panel-services>div{padding:9px 6px}.hero{padding-bottom:55px}.hero::after{display:none}}
@media(max-width:420px){.network-card{height:450px}.operations-panel{width:100%;min-height:390px}.traffic{display:none}.protected{top:-14px}.panel-services p{display:none}}
@media(prefers-reduced-motion:reduce){.orbit,.live-dot,.data-chart span{animation:none}}