* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  overflow: hidden;
  color: #f7f8fb;
  background:
    radial-gradient(circle at var(--x, 50%) var(--y, 55%), rgba(0, 73, 205, 0.24), transparent 34%),
    radial-gradient(circle at 50% -12%, rgba(255, 255, 255, 0.05), transparent 24%),
    linear-gradient(135deg, #030407, #090909 46%, #020205);
  font-family: "Avenir Next", Inter, Arial, Helvetica, sans-serif;
}

main {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

section {
  position: relative;
  isolation: isolate;
  text-align: center;
}

section::before {
  content: "219";
  position: absolute;
  z-index: -1;
  inset: 50% auto auto 50%;
  color: rgba(0, 91, 255, 0.18);
  font-size: clamp(12rem, 34vw, 34rem);
  font-weight: 900;
  letter-spacing: -0.12em;
  line-height: 0.7;
  transform: translate(-52%, -50%);
  text-shadow: 0 0 80px rgba(0, 91, 255, 0.18);
}

h1 {
  font-size: clamp(3.5rem, 12vw, 10rem);
  font-weight: 800;
  letter-spacing: -0.08em;
  text-transform: lowercase;
  animation: aparecer 1.2s ease-out both;
}

h1 span {
  color: #126cff;
  text-shadow: 0 0 32px rgba(18, 108, 255, 0.3);
}

p {
  margin-top: 1rem;
  color: #aeb4c0;
  font-size: clamp(0.8rem, 1.3vw, 1.05rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  animation: aparecer 1.2s 0.25s ease-out both;
}

@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}