*,

*::before,

*::after {

  box-sizing: border-box;

}



html {

  width: 100%;

  max-width: 100%;

  overflow-x: hidden;

  scroll-behavior: smooth;

  -webkit-text-size-adjust: 100%;

}



body {

  margin: 0;

  min-width: 320px;

  min-height: 100vh;

  width: 100%;

  max-width: 100%;

  overflow-x: hidden;



  font-family: Inter, Arial, Helvetica, sans-serif;

  font-size: 16px;

  line-height: 1.5;



  color: var(--text);



  background:

    radial-gradient(circle at 52% -8%, rgba(139, 44, 255, .34), transparent 28%),

    radial-gradient(circle at 92% 12%, rgba(189, 116, 255, .16), transparent 24%),

    linear-gradient(180deg, #020203 0%, #07070a 44%, #020203 100%);



  text-rendering: optimizeLegibility;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



body::before {

  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: -1;



  background:

    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);



  background-size: 54px 54px;



  mask-image: linear-gradient(to bottom, black, transparent 72%);

}



body::after {

  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: -2;



  background:

    url("../assets/brand-texture.png")

    top right / 900px auto

    no-repeat;



  opacity: .42;

}



a {

  color: inherit;

  text-decoration: none;

}



button,

input,

select,

textarea {

  font: inherit;

}



button {

  color: inherit;

  background: none;

}



img,

svg,

video {

  display: block;

  max-width: 100%;

  height: auto;

}



picture {

  display: block;

}



h1,

h2,

h3,

h4,

h5,

h6,

p {

  margin-top: 0;

}



ul,

ol {

  margin: 0;

  padding: 0;

}



::selection {

  background: var(--purple);

  color: #fff;

}



:focus-visible {

  outline: 2px solid var(--purple2);

  outline-offset: 4px;

}



::-webkit-scrollbar {

  width: 8px;

  height: 8px;

}



::-webkit-scrollbar-track {

  background: #050507;

}



::-webkit-scrollbar-thumb {

  border: 2px solid #050507;

  border-radius: 999px;



  background:

    linear-gradient(

      180deg,

      var(--purple2),

      var(--purple3)

    );

}



.skip-link {

  position: absolute;

  top: 10px;

  left: -999px;



  padding: 10px 14px;



  background: #fff;

  color: #000;



  z-index: 999;

}



.skip-link:focus {

  left: 10px;

}



@media (max-width:760px){



  body::after{

    background-size:620px auto;

    opacity:.25;

  }



}



@media (prefers-reduced-motion:reduce){



  html{

    scroll-behavior:auto;

  }



  *,

  *::before,

  *::after{

    animation-duration:.01ms!important;

    animation-iteration-count:1!important;

    transition-duration:.01ms!important;

  }



}