@layer base {
  * {
    box-sizing: border-box;
  }

  html, body {
    margin: 0;
    padding: 0;
  }

  body {
    font-family: -apple-system, BlinkMacSystemFont, "Inter",
                 "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #0f172a;
    background: #0f172a;
  }

  .page-gradient {
  min-height: 100vh;

  background-image:
    linear-gradient(
      rgba(10, 15, 30, 0.30),
      rgba(10, 15, 30, 0.45)
    ),
    url("/assets/backgrounds/5072612.jpg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* keep fixed only if you really want the parallax effect */
  background-attachment: fixed;

  position: relative;
  overflow: hidden;
}

/* subtle light bloom for depth */
.page-gradient::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      1000px 500px at 50% 8%,
      rgba(255, 255, 255, 0.14),
      transparent 65%
    );

  pointer-events: none;
}

}