/* =========================================================
   ARINO TECH — PRODUCTION QA + ELEVATION PASS
   2026-09-07
   ========================================================= */

/* Subpage instrument layer: each service gets its own live-feeling system view. */
.page-hero-console.service-instrument-console{--svc-accent:#52e7ff;--svc-accent-rgb:82,231,255;isolation:isolate}
.page-hero-console.service-instrument-console.instrument-cyber{--svc-accent:#8b7cff;--svc-accent-rgb:139,124,255}
.page-hero-console.service-instrument-console.instrument-network{--svc-accent:#55caff;--svc-accent-rgb:85,202,255}
.page-hero-console.service-instrument-console.instrument-cctv{--svc-accent:#65e5d0;--svc-accent-rgb:101,229,208}
.page-hero-console.service-instrument-console.instrument-cloud{--svc-accent:#9d8cff;--svc-accent-rgb:157,140,255}
.page-hero-console.service-instrument-console.instrument-recovery{--svc-accent:#5ce8ac;--svc-accent-rgb:92,232,172}
.page-hero-console.service-instrument-console .page-console-core{z-index:5}
.page-hero-console.service-instrument-console .page-console-core:after{content:"";position:absolute;inset:-22px;border-radius:50%;border:1px solid rgba(var(--svc-accent-rgb),.11);animation:svcHalo 4.8s ease-in-out infinite;pointer-events:none}
.svc-instrument{position:absolute;inset:0;z-index:3;pointer-events:none}
.svc-point{position:absolute;display:flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid rgba(var(--svc-accent-rgb),.16);border-radius:8px;background:rgba(3,12,23,.76);box-shadow:0 8px 24px rgba(0,0,0,.18);font:800 7px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.11em;color:#78a3be;text-transform:uppercase;white-space:nowrap}
.svc-point:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--svc-accent);box-shadow:0 0 12px rgba(var(--svc-accent-rgb),.62);animation:svcPoint 2.8s ease-in-out infinite}
.svc-point.p1{left:7%;top:35%}.svc-point.p2{right:7%;top:35%}.svc-point.p3{left:9%;bottom:27%}.svc-point.p4{right:9%;bottom:27%}
.svc-beam{position:absolute;left:50%;top:50%;width:31%;height:1px;transform-origin:0 50%;background:linear-gradient(90deg,rgba(var(--svc-accent-rgb),.38),rgba(var(--svc-accent-rgb),.06),transparent);opacity:.55;overflow:hidden}
.svc-beam:after{content:"";position:absolute;left:-20%;top:0;width:28%;height:1px;background:var(--svc-accent);box-shadow:0 0 8px var(--svc-accent);animation:svcSignal 3.4s linear infinite}
.svc-beam.b1{transform:rotate(205deg)}.svc-beam.b2{transform:rotate(-25deg)}.svc-beam.b3{transform:rotate(155deg)}.svc-beam.b4{transform:rotate(25deg)}
.svc-beam.b2:after{animation-delay:.8s}.svc-beam.b3:after{animation-delay:1.5s}.svc-beam.b4:after{animation-delay:2.2s}
@keyframes svcSignal{0%{left:-28%;opacity:0}15%{opacity:1}72%{opacity:.7}100%{left:105%;opacity:0}}
@keyframes svcPoint{0%,100%{opacity:.58;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}}
@keyframes svcHalo{0%,100%{opacity:.28;transform:scale(.97)}50%{opacity:.7;transform:scale(1.02)}}

/* Keep the two homepage cores feeling like one product family. */
.service-core-inner>div,.ai-core-inner>div{gap:2px!important}
.service-core-inner b,.ai-core-inner b{font-size:19px!important;line-height:1!important;letter-spacing:-.02em!important}
.service-core-inner small,.ai-core-inner span{font-size:6px!important;line-height:1.35!important;letter-spacing:.12em!important}

/* The connected-capability statement is intended as one line on comfortable desktop widths. */
@media (min-width:1240px){#services .section-head h2{white-space:nowrap!important;font-size:clamp(38px,2.45vw,49px)!important}}

/* Legal pages: second-level content heading after the visual hero. */
.legal-content-title{font-size:clamp(28px,2.2vw,38px)!important;margin:0 0 8px!important}
.legal-contact-box{margin-top:18px;padding:16px 18px;border:1px solid rgba(91,190,255,.14);border-radius:14px;background:rgba(5,16,29,.55);color:#90a9bf;font-size:12px;line-height:1.65}
.legal-contact-box a{color:#71ddff;text-decoration:none}.legal-contact-box a:hover{text-decoration:underline}

/* Slightly clearer focus treatment without altering the visual style. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid rgba(82,231,255,.8)!important;outline-offset:3px!important}

@media(max-width:700px){
  .svc-point{font-size:6px;padding:5px 6px;letter-spacing:.08em}
  .svc-point.p1{left:5%;top:35%}.svc-point.p2{right:5%;top:35%}.svc-point.p3{left:6%;bottom:25%}.svc-point.p4{right:6%;bottom:25%}
  .svc-beam{width:30%}
  .service-core-inner b,.ai-core-inner b{font-size:17px!important}
}
@media(max-width:390px){.svc-point{font-size:5.5px}.svc-point.p1,.svc-point.p3{left:3%}.svc-point.p2,.svc-point.p4{right:3%}}
@media(prefers-reduced-motion:reduce){.svc-point:before,.svc-beam:after,.page-hero-console.service-instrument-console .page-console-core:after{animation:none!important}}