:root {
  --paper: #f8fafc;
  --silver-0: #ffffff;
  --silver-1: #d9dee6;
  --silver-2: #9ba4b0;
  --silver-3: #5e6672;
  --jersey-navy: #526071;
  --jersey-edge: #f8fafc;
  --bg: #05070a;
  --ink: #e9edf4;
  --muted: #8d96a3;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 50% 40%, rgba(148, 163, 184, 0.22), transparent 33rem),
    radial-gradient(circle at 50% 115%, rgba(255, 255, 255, 0.1), transparent 22rem),
    linear-gradient(180deg, #11151c 0%, var(--bg) 60%, #020305 100%);
  -webkit-font-smoothing: antialiased;
}

.stage {
  position: relative;
  display: grid;
  min-height: 100%;
  place-items: center;
  isolation: isolate;
}

.stage::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: "";
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at center, black, transparent 72%);
}

.glow {
  position: absolute;
  width: min(56rem, 84vw);
  aspect-ratio: 1;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(226, 232, 240, 0.26), transparent 64%);
  filter: blur(18px);
}

.hero {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(0.4rem, 1.4vw, 1.2rem);
  max-width: 94vw;
  transform: translateY(-1rem);
}

.number-wrap {
  position: relative;
  display: grid;
  place-items: center;
}

.number {
  font-family: "Graduate", "Inter", system-ui, sans-serif;
  font-size: clamp(14rem, 50vw, 33rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.02em;
  background:
    linear-gradient(105deg, transparent 0 40%, rgba(255, 255, 255, 0.72) 47%, transparent 56% 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, var(--silver-0) 0%, #f1f4f8 26%, #aeb7c3 52%, #d9dfe8 77%, var(--silver-0) 100%);
  background-size: 230% 100%, 100% 100%, 100% 100%;
  background-position: -90% 0, 0 0, 0 0;
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.65))
    drop-shadow(0 4px 0 rgba(82, 96, 113, 0.55))
    drop-shadow(0 24px 28px rgba(0, 0, 0, 0.48))
    drop-shadow(0 0 28px rgba(226, 232, 240, 0.18));
  animation: shine 4.8s ease-in-out infinite;
}

.number {
  position: relative;
  display: block;
  isolation: isolate;
}

.number::before,
.number::after {
  position: absolute;
  inset: 0;
  content: "3";
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.number::before {
  z-index: -2;
  -webkit-text-stroke: clamp(13px, 2.1vw, 23px) var(--jersey-navy);
}

.number::after {
  z-index: -1;
  -webkit-text-stroke: clamp(6px, 0.95vw, 11px) var(--jersey-edge);
}

.number-wrap::after {
  position: absolute;
  inset: 9% 8% 16%;
  z-index: -1;
  content: "";
  border-radius: 2rem;
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(255, 255, 255, 0.12) 49% 51%, transparent 52% 100%),
    repeating-linear-gradient(0deg, transparent 0 12px, rgba(255, 255, 255, 0.08) 12px 13px);
  opacity: 0.45;
  mask-image: linear-gradient(90deg, transparent, black 20% 80%, transparent);
  pointer-events: none;
}

.dev-mark {
  position: relative;
  z-index: 2;
  font-family: "Graduate", "Inter", system-ui, sans-serif;
  font-size: clamp(2rem, 6.5vw, 4.6rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #dfe5ee;
  -webkit-text-stroke: clamp(2px, 0.36vw, 4px) var(--jersey-navy);
  filter:
    drop-shadow(0 3px 0 rgba(82, 96, 113, 0.36))
    drop-shadow(0 10px 14px rgba(0, 0, 0, 0.34));
}

@keyframes shine {
  0%,
  32% {
    background-position: -90% 0, 0 0, 0 0;
  }

  72%,
  100% {
    background-position: 130% 0, 0 0, 0 0;
  }
}

@media (max-width: 560px) {
  .hero {
    transform: translateY(-0.4rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .number {
    animation: none;
  }
}