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

:root {
  --glass-bg: rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.08);
  --glass-hover: rgba(255,255,255,0.07);
  --text-primary: rgba(255,255,255,0.93);
  --text-muted: rgba(255,255,255,0.5);
}

html, body {
  width: 100%; min-height: 100%;
  font-family: 'Onest', sans-serif;
  background: #0d0e12;
}

.bg-video {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.bg-overlay {
  position: fixed; inset: 0; z-index: 1;
  background: rgba(13,14,18,0.45);
  pointer-events: none;
}

.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

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