* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; background: radial-gradient(120% 80% at 80% -20%, #ffffff 0%, #f3f6f9 45%, #edf1f5 100%); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
::selection { background: var(--blue); color: white; }

.skip-link { position: fixed; z-index: 100; left: 1rem; top: -4rem; padding: .8rem 1rem; background: #0f151d; color: #ffffff; transition: top .2s; }
.skip-link:focus { top: 1rem; }
.noise { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .016; 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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); }
h1 em, h2 em, h3 em, .grad {
  font-style: normal;
  background: var(--grad-heading);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradShift 9s ease-in-out infinite;
}

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.75,.25,1); }
.reveal.visible { opacity: 1; transform: none; }

@keyframes heroDrift { from { transform: scale(1.07); } to { transform: scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes scan { from { transform: translateX(-12px); } to { transform: translateX(34px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { transform: scale(.8); opacity: .2; } 50% { transform: scale(1.2); opacity: .8; } }
@keyframes equalize { 0%,100% { transform: scaleY(.55); } 50% { transform: scaleY(1); } }
@keyframes gradShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes loaderFade { to { opacity: 0; visibility: hidden; } }