/* =========================================================
   NOUS LEGAL
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}


:root {
  --legal-bg: #020409;
  --legal-text: #f7f9ff;

  --legal-soft:
    rgba(239, 243, 255, 0.72);

  --legal-muted:
    rgba(239, 243, 255, 0.42);

  --legal-faint:
    rgba(239, 243, 255, 0.22);

  --legal-border:
    rgba(255, 255, 255, 0.08);

  --legal-blue: #77a8ff;
  --legal-purple: #a38aff;
}


html {
  scroll-behavior: smooth;

  background:
    var(--legal-bg);

  color-scheme: dark;
}


body {
  min-height: 100vh;

  margin: 0;

  background:
    var(--legal-bg);

  color:
    var(--legal-text);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  -webkit-font-smoothing:
    antialiased;
}


a {
  color: inherit;
  text-decoration: none;
}


/* =========================================================
   PAGE
========================================================= */

.legal-page {
  position: relative;

  min-height:
    100vh;

  isolation:
    isolate;

  overflow-x:
    hidden;

  background:
    radial-gradient(
      circle at 50% 12%,
      rgba(77, 116, 230, 0.12),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 82%,
      rgba(152, 93, 225, 0.08),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #03050a,
      #010207
    );
}


/* =========================================================
   BACKGROUND
========================================================= */

.legal-stars {
  position: fixed;

  inset: 0;

  z-index: -10;

  opacity: 0.5;

  pointer-events: none;

  background-image:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.65) 1px,
      transparent 1.5px
    ),
    radial-gradient(
      circle,
      rgba(119, 168, 255, 0.55) 1px,
      transparent 1.5px
    );

  background-size:
    150px 150px,
    220px 220px;
}


.legal-nebula {
  position: fixed;

  z-index: -8;

  border-radius: 50%;

  filter:
    blur(80px);

  pointer-events: none;
}


.legal-nebula-one {
  top: 4%;
  left: 16%;

  width: 500px;
  height: 500px;

  background:
    radial-gradient(
      circle,
      rgba(80, 126, 255, 0.11),
      transparent 72%
    );
}


.legal-nebula-two {
  right: -220px;
  bottom: -260px;

  width: 700px;
  height: 700px;

  background:
    radial-gradient(
      circle,
      rgba(163, 138, 255, 0.10),
      transparent 72%
    );
}


/* =========================================================
   HEADER
========================================================= */

.legal-header {
  position: fixed;

  top: 0;
  left: 50%;

  z-index: 100;

  width:
    calc(100% - 52px);

  height: 82px;

  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items: center;

  transform:
    translateX(-50%);

  border-bottom:
    1px solid
    var(--legal-border);

  background:
    rgba(2, 4, 9, 0.70);

  backdrop-filter:
    blur(22px);

  -webkit-backdrop-filter:
    blur(22px);
}


.legal-back {
  justify-self: start;

  display: flex;

  align-items: center;

  gap: 9px;

  color:
    var(--legal-muted);

  font-size:
    0.67rem;
}


.legal-back:hover {
  color:
    #ffffff;
}


.legal-brand {
  justify-self: center;

  display: flex;

  align-items: center;

  gap: 11px;
}


.legal-brand img {
  width: 34px;
  height: 34px;

  object-fit: contain;

  animation:
    legalLogoSpin
    15s
    linear
    infinite;
}


.legal-brand div {
  display: grid;

  gap: 3px;
}


.legal-brand strong {
  font-size:
    0.75rem;

  letter-spacing:
    0.18em;
}


.legal-brand span {
  color:
    var(--legal-faint);

  font-size:
    0.49rem;

  letter-spacing:
    0.18em;
}


.legal-context {
  justify-self: end;

  color:
    var(--legal-faint);

  font-size:
    0.53rem;

  letter-spacing:
    0.2em;
}


/* =========================================================
   HERO
========================================================= */

.legal-hero {
  width:
    min(
      calc(100% - 64px),
      1320px
    );

  margin:
    0 auto;

  padding:
    155px 0 55px;

  border-bottom:
    1px solid
    var(--legal-border);
}


.legal-eyebrow {
  margin:
    0 0 20px;

  color:
    var(--legal-blue);

  font-size:
    0.58rem;

  font-weight:
    800;

  letter-spacing:
    0.27em;
}


.legal-hero h1 {
  margin: 0;

  max-width:
    900px;

  font-size:
    clamp(
      4rem,
      7vw,
      7.2rem
    );

  font-weight:
    470;

  letter-spacing:
    -0.07em;

  line-height:
    0.9;
}


.legal-hero h1 span {
  display: block;

  margin-top:
    8px;

  color:
    rgba(234, 238, 250, 0.42);
}


.legal-intro {
  max-width:
    680px;

  margin:
    29px 0 0;

  color:
    var(--legal-muted);

  font-size:
    0.79rem;

  line-height:
    1.75;
}


/* =========================================================
   NAV
========================================================= */

.legal-nav {
  position: sticky;

  top: 82px;

  z-index: 50;

  width:
    min(
      calc(100% - 64px),
      1320px
    );

  margin:
    0 auto;

  display: flex;

  gap: 8px;

  padding:
    16px 0;

  border-bottom:
    1px solid
    var(--legal-border);

  background:
    rgba(2, 4, 9, 0.88);

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);
}


.legal-nav a {
  min-height: 38px;

  display: inline-flex;

  align-items: center;

  padding:
    0 14px;

  border:
    1px solid
    rgba(255, 255, 255, 0.07);

  border-radius:
    999px;

  color:
    var(--legal-muted);

  font-size:
    0.61rem;

  transition:
    border-color 180ms ease,
    color 180ms ease,
    background 180ms ease;
}


.legal-nav a:hover {
  color:
    #ffffff;

  border-color:
    rgba(119, 168, 255, 0.28);

  background:
    rgba(119, 168, 255, 0.05);
}


/* =========================================================
   CONTENT
========================================================= */

.legal-content {
  width:
    min(
      calc(100% - 64px),
      1320px
    );

  margin:
    0 auto;
}


.legal-section {
  scroll-margin-top:
    155px;

  display: grid;

  grid-template-columns:
    80px minmax(0, 1fr);

  gap:
    35px;

  padding:
    64px 0;

  border-bottom:
    1px solid
    var(--legal-border);
}


.legal-section-number {
  padding-top:
    4px;

  color:
    rgba(119, 168, 255, 0.36);

  font-size:
    0.58rem;

  letter-spacing:
    0.15em;
}


.legal-section-label {
  color:
    var(--legal-blue);

  font-size:
    0.53rem;

  font-weight:
    800;

  letter-spacing:
    0.22em;
}


.legal-section-body h2 {
  margin:
    12px 0 26px;

  font-size:
    clamp(
      2rem,
      4vw,
      4rem
    );

  font-weight:
    470;

  letter-spacing:
    -0.055em;
}


.legal-copy {
  max-width:
    830px;

  display: grid;

  gap:
    17px;
}


.legal-copy p {
  margin: 0;

  color:
    var(--legal-muted);

  font-size:
    0.76rem;

  line-height:
    1.8;
}


/* =========================================================
   FOOTER
========================================================= */

.legal-footer {
  width:
    min(
      calc(100% - 64px),
      1320px
    );

  margin:
    0 auto;

  padding:
    40px 0 48px;

  display: flex;

  justify-content: space-between;

  gap:
    40px;
}


.legal-footer-brand {
  display: flex;

  align-items: center;

  gap: 11px;
}


.legal-footer-brand img {
  width: 34px;
  height: 34px;

  object-fit: contain;
}


.legal-footer-brand div {
  display: grid;

  gap: 3px;
}


.legal-footer-brand strong {
  font-size:
    0.68rem;

  letter-spacing:
    0.17em;
}


.legal-footer-brand span {
  color:
    var(--legal-faint);

  font-size:
    0.47rem;

  letter-spacing:
    0.16em;
}


.legal-footer-copy {
  max-width:
    650px;

  text-align: right;
}


.legal-footer-copy p {
  margin:
    0 0 6px;

  color:
    var(--legal-faint);

  font-size:
    0.59rem;

  line-height:
    1.55;
}


/* =========================================================
   MOBILE
========================================================= */

@media (
  max-width: 760px
) {

  .legal-header {
    width:
      calc(100% - 28px);

    height:
      70px;
  }


  .legal-context {
    display:
      none;
  }


  .legal-back span {
    display:
      none;
  }


  .legal-hero,
  .legal-nav,
  .legal-content,
  .legal-footer {
    width:
      calc(100% - 28px);
  }


  .legal-hero {
    padding:
      120px 0 42px;
  }


  .legal-hero h1 {
    font-size:
      clamp(
        3rem,
        14vw,
        4.8rem
      );
  }


  .legal-nav {
    top:
      70px;

    overflow-x:
      auto;

    scrollbar-width:
      none;
  }


  .legal-nav::-webkit-scrollbar {
    display:
      none;
  }


  .legal-section {
    grid-template-columns:
      1fr;

    gap:
      14px;

    padding:
      45px 0;
  }


  .legal-footer {
    flex-direction:
      column;
  }


  .legal-footer-copy {
    text-align:
      left;
  }

}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes legalLogoSpin {

  from {
    transform:
      rotate(0deg);
  }

  to {
    transform:
      rotate(360deg);
  }

}


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

  *,
  *::before,
  *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }

}