*, *::before, *::after { box-sizing: border-box; }

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

body {
  background: #07070a;
  color: #c9c6cf;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Brick wall with neon spill */
.wall {
  --brick-h: 46px;
  --brick-w: 96px;
  --mortar: 3px;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 48px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 56px;
  overflow: hidden;
  background-color: #0b0a0d;
  background-image:
    radial-gradient(ellipse 60% 45% at 50% 46%, rgba(255, 60, 200, 0.10), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(40, 200, 255, 0.07), transparent 75%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.85) 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0 var(--mortar), transparent var(--mortar) var(--brick-h)),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0 var(--mortar), transparent var(--mortar) var(--brick-w)),
    repeating-linear-gradient(90deg, transparent 0 calc(var(--brick-w) / 2), rgba(0, 0, 0, 0.5) calc(var(--brick-w) / 2) calc(var(--brick-w) / 2 + var(--mortar)), transparent calc(var(--brick-w) / 2 + var(--mortar)) var(--brick-w));
  background-size: auto, auto, auto, auto, auto, var(--brick-w) calc(var(--brick-h) * 2);
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 var(--brick-h);
}

/* Acrylic backplate */
.plate {
  position: relative;
  border-radius: 28px;
  padding: clamp(24px, 4vw, 56px) clamp(32px, 6vw, 88px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015) 40%, rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 80px rgba(0, 0, 0, 0.6);
}

.screw {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d8d8de, #55545c 70%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
.screw.tl { top: 18px; left: 18px; }
.screw.tr { top: 18px; right: 18px; }
.screw.bl { bottom: 18px; left: 18px; }
.screw.br { bottom: 18px; right: 18px; }

/* Neon tubes */
.sign {
  margin: 0;
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 28px);
  font-weight: 400;
  animation: hum 3.2s ease-in-out infinite;
}

.digit {
  font-family: "Tilt Neon", system-ui, sans-serif;
  font-size: clamp(150px, 30vw, 380px);
  line-height: 0.9;
  color: #fff7fd;
  -webkit-text-stroke: 2px var(--c);
  text-shadow:
    0 0 2px #fff,
    0 0 6px var(--c),
    0 0 12px var(--c),
    0 0 24px var(--c),
    0 0 48px var(--c),
    0 0 90px var(--c),
    0 0 160px var(--c);
}

.flicker { animation: flicker 7s infinite steps(1); }

@keyframes flicker {
  0%, 100% { opacity: 1; }
  41% { opacity: 1; }
  42% { opacity: 0.25; }
  43% { opacity: 1; }
  44% { opacity: 0.35; }
  45.5% { opacity: 1; }
  78% { opacity: 1; }
  78.6% { opacity: 0.5; }
  79.2% { opacity: 1; }
}

@keyframes hum {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}

/* Caption */
.caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.caption p { margin: 0; }
.domain {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #e9e6ee;
}
.tagline { font-size: 16px; color: #a7a3ae; }

/* Phones */
@media (max-width: 600px) {
  .wall { --brick-h: 30px; --brick-w: 64px; --mortar: 2px; gap: 44px; padding: 40px 16px; }
  .plate { border-radius: 22px; padding: 28px 36px; }
  .screw { width: 10px; height: 10px; }
  .screw.tl { top: 12px; left: 12px; }
  .screw.tr { top: 12px; right: 12px; }
  .screw.bl { bottom: 12px; left: 12px; }
  .screw.br { bottom: 12px; right: 12px; }
  .sign { gap: 10px; }
  .digit {
    font-size: 168px;
    -webkit-text-stroke-width: 1.5px;
    text-shadow:
      0 0 2px #fff,
      0 0 5px var(--c),
      0 0 10px var(--c),
      0 0 20px var(--c),
      0 0 40px var(--c),
      0 0 70px var(--c),
      0 0 120px var(--c);
  }
  .domain { font-size: 13px; letter-spacing: 0.28em; }
  .tagline { font-size: 15px; }
}

@media (max-width: 360px) {
  .digit { font-size: 140px; }
}

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