:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #061a24;
  color: white;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; background: #061a24; }
button { font: inherit; }

.site-shell {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 100%;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.video-stack,
.bg-video,
.shade,
.grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.video-stack { z-index: -1; overflow: hidden; background: #061a24; }

.bg-video {
  object-fit: cover;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 1.5s ease;
}

.bg-video.active { opacity: 1; }

.shade {
  background:
    radial-gradient(circle at 50% 45%, transparent 0 20%, rgba(0, 10, 18, .12) 55%, rgba(0, 7, 12, .46) 100%),
    linear-gradient(to bottom, rgba(2, 13, 20, .16), rgba(2, 13, 20, .34));
}

.grain {
  opacity: .06;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.hero {
  text-align: center;
  padding: 24px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .38);
  animation: arrive .9s cubic-bezier(.2,.8,.2,1) both;
}

h1 {
  margin: 0;
  font-size: clamp(4rem, 14vw, 11rem);
  line-height: .82;
  letter-spacing: -.075em;
  font-weight: 760;
}

.counter-wrap { margin-top: clamp(28px, 5vh, 50px); }
.total, .you { margin: 0; }

.total {
  font-size: clamp(1rem, 2vw, 1.32rem);
  font-weight: 600;
  letter-spacing: .015em;
}

.you {
  margin-top: 8px;
  font-size: clamp(.82rem, 1.6vw, .98rem);
  color: rgba(255,255,255,.7);
  letter-spacing: .02em;
}



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

@media (max-width: 640px) {
  h1 { font-size: clamp(4.2rem, 25vw, 7rem); }
  
}

@media (prefers-reduced-motion: reduce) {
  .hero { animation: none; }
  .bg-video { transition: none; }
}