@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-cyrillic-ext.woff2") format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-cyrillic.woff2") format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-vietnamese.woff2") format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin-ext.woff2") format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin.woff2") format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-cyrillic-ext.woff2") format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-cyrillic.woff2") format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-vietnamese.woff2") format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin-ext.woff2") format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin.woff2") format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/space-grotesk-var-vietnamese.woff2") format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/space-grotesk-var-latin-ext.woff2") format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/space-grotesk-var-latin.woff2") format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/space-grotesk-var-vietnamese.woff2") format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/space-grotesk-var-latin-ext.woff2") format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/space-grotesk-var-latin.woff2") format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/space-grotesk-var-vietnamese.woff2") format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/space-grotesk-var-latin-ext.woff2") format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/space-grotesk-var-latin.woff2") format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-var-vietnamese.woff2") format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-var-latin-ext.woff2") format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-var-latin.woff2") format('woff2');
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background:#06090F; }
::selection { background: rgba(46,155,255,0.3); color:#fff; }

/* scroll reveal */
.reveal { opacity:0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.16,.84,.34,1), transform .9s cubic-bezier(.16,.84,.34,1); }
.reveal.in { opacity:1; transform: none; }

/* hero mark fold-in (plays once) */
.facet { transform-box: fill-box; transform-origin:60px 60px; opacity:0; animation: foldIn 1.4s cubic-bezier(.16,.84,.34,1) forwards; }
.f1{animation-delay:.15s}.f2{animation-delay:.4s}.f3{animation-delay:.65s}.f4{animation-delay:.9s}
@keyframes foldIn { 0%{opacity:0;transform:scale(.04) rotate(-55deg)} 20%{opacity:1} 100%{opacity:1;transform:scale(1) rotate(0)} }
.h-outline{ stroke-dasharray:300; stroke-dashoffset:300; animation: drawO 1.6s ease 1s forwards; }
@keyframes drawO { to{ stroke-dashoffset:0 } }
.h-trace{ stroke-dasharray:70; stroke-dashoffset:70; opacity:0; animation: drawT 1.4s ease 1.1s forwards; }
@keyframes drawT { to{ stroke-dashoffset:0; opacity:.5 } }
.h-node{ opacity:0; transform-box:fill-box; transform-origin:center; animation: popN .6s ease forwards; }
.hn1{animation-delay:1.3s}.hn2{animation-delay:1.4s}.hn3{animation-delay:1.5s}.hn4{animation-delay:1.6s}.hn5{animation-delay:1.7s}
@keyframes popN { 0%{opacity:0;transform:scale(0)} 60%{opacity:1;transform:scale(1.5)} 100%{opacity:1;transform:scale(1)} }
.h-tilt{ animation: tilt 2s cubic-bezier(.16,.84,.34,1) forwards; }
@keyframes tilt { 0%{transform:perspective(700px) rotateX(24deg) rotateY(-18deg)} 100%{transform:perspective(700px) rotateX(0) rotateY(0)} }

.glow-pulse { animation: gp 6s ease-in-out infinite; }
@keyframes gp { 0%,100%{opacity:.55} 50%{opacity:1} }

.ticker-track { animation: scrollX 34s linear infinite; }
@keyframes scrollX { to { transform: translateX(-50%); } }

/* hover states (converted from design tool's style-hover attributes) */
.hov-nav, .hov-primary, .hov-outline, .hov-link {
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.hov-nav:hover { color:#F4F7FB; }
.hov-primary:hover { background:#6FC0FF; }
.hov-outline:hover { border-color:#2E9BFF; color:#2E9BFF; }
.hov-link:hover { border-color:#2E9BFF; }