/* MATRX Group — global styles.
   Layout and colour live as inline styles on the elements themselves so each
   block is self-describing; this sheet holds resets, motion and interaction
   states only. Safe to refactor into CSS modules / Tailwind. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:#08121f;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:#4ea3f0;text-decoration:none}
a:hover{color:#7dc0ff}
::selection{background:rgba(233,169,58,.3);color:#fff}
:focus-visible{outline:2px solid #e9a93a;outline-offset:2px}
@keyframes mxUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes mxIn{from{opacity:0}to{opacity:1}}

/* interaction states extracted from the design */
.mx-s1:hover{color:#fff !important}
.mx-s2:hover{background:#2b8ae0 !important}
.mx-s3:hover{border-color:#e9a93a !important;color:#e9a93a !important}
.mx-s4:hover{border-color:#1773c9 !important;color:#1773c9 !important}
.mx-s5:hover{background:#1773c9 !important}
.mx-s6:focus-visible{border-color:#1773c9 !important}

@media (max-width:900px){
  header > div{padding-left:20px !important;padding-right:20px !important}
  section{padding-left:20px !important;padding-right:20px !important}
  footer{padding-left:20px !important;padding-right:20px !important}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}