*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: #0B0C0E; }
html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes dp-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dp-up     { animation: dp-up 500ms cubic-bezier(0.2,0.7,0.2,1) both; }
.dp-up--2  { animation-delay: 90ms; }
.dp-up--3  { animation-delay: 180ms; }

/* Graphic animations */
@keyframes dp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes dp-float-a {
  0%, 100% { transform: translate(0, 0); }
  30%       { transform: translate(2px, -3px); }
  70%       { transform: translate(-1px, 2px); }
}
@keyframes dp-float-b {
  0%, 100% { transform: translate(0, 0); }
  40%       { transform: translate(-3px, 1px); }
  80%       { transform: translate(2px, -2px); }
}
@keyframes dp-float-c {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(3px, 2px); }
}
@keyframes dp-pulse-ring {
  0%, 100% { opacity: 0.11; }
  50%       { opacity: 0.30; }
}
@keyframes dp-scan {
  0%         { top: 8%; opacity: 0.8; }
  80%        { top: 88%; opacity: 0.8; }
  100%       { top: 88%; opacity: 0; }
}
@keyframes dp-arrow-pulse {
  0%, 100% { opacity: 0.4; transform: translateY(0); }
  50%       { opacity: 0.9; transform: translateY(2px); }
}
.dp-float-a     { animation: dp-float-a 9s  ease-in-out infinite; }
.dp-float-b     { animation: dp-float-b 12s ease-in-out infinite; }
.dp-float-c     { animation: dp-float-c 10s ease-in-out infinite; }
.dp-pulse-ring  { animation: dp-pulse-ring 2.8s ease-in-out infinite; }
.dp-arrow-pulse { animation: dp-arrow-pulse 2s ease-in-out infinite; }

.ns-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px;
  color: #E6DCCB;
  font-family: 'IBM Plex Sans', sans-serif;
}

.ns-wrap h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 1rem;
}

.ns-wrap p {
  color: #8A8A86;
  line-height: 1.75;
  margin: 0 0 1rem;
}

.ns-wrap a {
  color: #59A3B3;
  text-decoration: none;
}