body {
  margin: 0;
  padding: 0;
  background-color: #000;
  overflow: hidden;
}

/* Full-screen canvas for Matrix rain */
canvas#canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  filter: brightness(20%);
  z-index: 0;
}

.title-wrapper {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.title-inner {
  display: inline-flex;
}

.title-chzl {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  text-align: center;
  /* Responsive size: scales with viewport but clamped */
  font-size: clamp(14vh, 14vw, 30vh);
  letter-spacing: 0.2em;
  opacity: 0.7;
  color: white;
  white-space: nowrap;
}

.subtitle-tailored {
  margin: 0.4em 0 0;
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: clamp(4.5vh, 5vw, 7vh);
  letter-spacing: 0.35em;
  opacity: 0.7;
  color: #808080;
  width: 100%;
  text-align: center;
}

@media (max-width: 576px) {
  canvas#canvas {
    filter: brightness(40%);
  }

  .title-chzl {
    font-size: 10vh;
    letter-spacing: 0.18em;
    transform: scaleX(0.7);
  }

  .subtitle-tailored {
    font-size: 3.2vh;
    letter-spacing: 0.35em;
  }
}


@media (min-width: 577px) and (max-width: 767px) {

  .title-chzl {
    font-size: 10vh;
  }

  .subtitle-tailored {
    font-size: 5vh;
    letter-spacing: 0.30em;
  }
}

@media (min-width: 768px) and (max-width: 991px) {

  .title-chzl {
    font-size: 10vh;
  }

  .subtitle-tailored {
    font-size: 5vh;
    letter-spacing: 0.30em;
  }
}

@media (min-width: 992px) {

  .title-chzl {
    font-size: 10vh;
  }

  .subtitle-tailored {
    font-size: 5vh;
    letter-spacing: 0.30em;
  }
}