:root {
        --bg: #02050b;
        --white: #efefef;
        --muted: #8f969e;
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
      }

      body {
        min-height: 100vh;
        display: grid;
        place-items: center;
        background: radial-gradient(
            1200px 620px at 50% -220px,
            rgba(180, 195, 215, 0.42),
            rgba(28, 35, 49, 0.15) 30%,
            rgba(0, 0, 0, 0) 62%
          ),
          linear-gradient(180deg, #02050b 0%, #01040a 100%);
        overflow: hidden;
        font-family: "Orbitron", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }

      body::before {
        content: "";
        position: fixed;
        inset: 0;
        background: repeating-linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.024) 0,
          rgba(255, 255, 255, 0.024) 1px,
          rgba(255, 255, 255, 0) 1px,
          rgba(255, 255, 255, 0) 42px
        );
        opacity: 0.2;
        pointer-events: none;
      }

      body::after {
        content: "";
        position: fixed;
        left: 50%;
        top: -180px;
        width: min(70vw, 980px);
        height: 420px;
        transform: translateX(-50%);
        background: radial-gradient(
          ellipse at center,
          rgba(235, 242, 252, 0.4) 0%,
          rgba(235, 242, 252, 0.16) 35%,
          rgba(235, 242, 252, 0) 72%
        );
        filter: blur(16px);
        pointer-events: none;
      }

      .hero {
        position: relative;
        width: min(100vw, 1400px);
        height: 100vh;
      }

      .center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: grid;
        justify-items: center;
        gap: 12px;
      }

      .mark {
        width: clamp(260px, 26vw, 440px);
        display: block;
      }

      .wordmark {
        width: clamp(260px, 20vw, 400px);
        display: block;
        margin-top: -8px;
      }

      @media (max-width: 768px) {
        .center {
          gap: 8px;
          top: 49%;
        }

        .wordmark {
          width: clamp(220px, 54vw, 340px);
          margin-top: -6px;
        }
      }