
:root{
  --hk-deep:#001052;
  --hk-cobalt:#003dff;
  --hk-electric:#0085ff;
  --hk-cyan:#00e6ff;
  --hk-ice:#a4f2ff;
  --hk-magenta:#ff38c7;
  --line:rgba(0,133,255,.46);
  --line-hot:rgba(0,230,255,.82);
}
body{
  background:
    radial-gradient(circle at 50% -12%,rgba(0,133,255,.42),transparent 36%),
    radial-gradient(circle at 16% 55%,rgba(0,61,255,.20),transparent 28%),
    radial-gradient(circle at 93% 20%,rgba(0,230,255,.18),transparent 24%),
    linear-gradient(180deg,#000 0%,#000525 28%,#001052 66%,#00020c 100%);
}
body::before{
  opacity:.72;
  background-image:
    repeating-linear-gradient(90deg,transparent 0 48px,rgba(0,230,255,.034) 49px 50px,transparent 51px 86px,rgba(0,61,255,.036) 87px 88px),
    repeating-linear-gradient(0deg,transparent 0 38px,rgba(0,133,255,.028) 39px 40px),
    linear-gradient(90deg,transparent 0 9%,rgba(0,230,255,.11) 9.08%,transparent 9.16% 28%,rgba(0,61,255,.11) 28.08%,transparent 28.16% 51%,rgba(0,230,255,.08) 51.08%,transparent 51.16% 76%,rgba(0,61,255,.11) 76.08%,transparent 76.16%);
  mask-image:linear-gradient(to bottom,black 0 92%,transparent 100%);
}
body::after{background-image:url('/matrix/assets/hk_matrix_automation_systems_logo_v2.png');right:-12vw;top:10vh;width:min(820px,66vw);opacity:.105;filter:saturate(1.2) contrast(1.08) drop-shadow(0 0 50px rgba(0,133,255,.22))}
.site-header{border-bottom-color:rgba(0,230,255,.78)}
.matrix-logo{position:relative;z-index:2;width:min(570px,96%);height:auto;max-height:430px;object-fit:contain;object-position:center;filter:drop-shadow(0 0 36px rgba(0,133,255,.36))}
.matrix-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,.82fr);align-items:center;gap:30px}.matrix-hero-copy{position:relative;z-index:2}.matrix-hero-logo{position:relative;z-index:2;display:grid;place-items:center;padding:12px}.matrix-hero-logo::before{content:"";position:absolute;width:88%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(0,230,255,.50);box-shadow:0 0 0 8px #000,0 0 0 9px rgba(210,214,222,.30),0 0 0 15px rgba(0,61,255,.28),0 0 48px rgba(0,230,255,.28)}
.matrix-nav{display:flex;gap:9px;overflow:auto;padding:13px 0 5px}.matrix-nav a{position:relative;overflow:hidden;white-space:nowrap;text-decoration:none;border:1px solid rgba(0,133,255,.52);background:linear-gradient(180deg,rgba(0,24,100,.86),#000 92%);padding:9px 11px;border-radius:8px;font-weight:850;color:var(--hk-silver);box-shadow:inset 0 1px rgba(255,255,255,.08)}.matrix-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hk-cobalt)}.matrix-nav a[aria-current="page"],.matrix-nav a:hover{border-color:var(--hk-cyan);background:linear-gradient(180deg,rgba(0,60,180,.92),#000 96%);box-shadow:0 0 18px rgba(0,230,255,.14),inset 0 1px rgba(255,255,255,.12)}
.result{font-size:1.15rem;font-weight:900;color:var(--hk-cyan);text-shadow:0 0 12px rgba(0,230,255,.24)}.repo-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;border:1px solid rgba(0,133,255,.44);border-radius:11px;padding:13px;margin-top:10px;background:linear-gradient(145deg,#000,rgba(0,22,90,.66));box-shadow:inset 0 1px rgba(255,255,255,.05)}
@media(max-width:900px){.matrix-hero{grid-template-columns:1fr}.matrix-hero-logo{order:-1}.matrix-logo{width:min(450px,90vw)}}
@media(max-width:660px){body::after{right:-44vw;width:96vw;opacity:.07}}
