@font-face{font-family:"Major Mono Display";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/major-mono-display-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/ibm-plex-sans-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.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-latin-400-normal.woff2) format("woff2")}
/* Layout: fixed blueprint stage, Major Mono capitals for the wordmark only; scrolling the first two screens assembles ~200 loose parts into the Z, then services and contact scroll over the finished object */
:root{
  --night:#070a10;
  --ice:#d8ecff;
  --dim:#7d8aa0;
  --amber:#ffb547;
  --line:rgba(216,236,255,.16);
  --veil:rgba(7,10,16,.62);
  --display:"Major Mono Display","IBM Plex Mono",ui-monospace,monospace;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--night);color:var(--ice)}
body{font-family:var(--body);font-size:16px;line-height:1.6;font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
#stage{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.bar{position:fixed;top:0;left:0;right:0;z-index:3;display:flex;justify-content:space-between;align-items:center;
  padding:calc(env(safe-area-inset-top,0px) + 16px) 20px 16px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.bar a{color:var(--ice);text-decoration:none}
.bar a:hover,.bar a:focus-visible{color:var(--amber);outline:none}
.status{position:fixed;left:20px;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);z-index:3;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:10px}
.meter{width:72px;height:2px;background:var(--line);position:relative;overflow:hidden}
.meter i{position:absolute;inset:0;background:var(--amber);transform-origin:left;transform:scaleX(0)}
main{position:relative;z-index:1;padding-inline:20px;max-width:1200px;margin:0 auto}
.hero{min-height:86svh;display:flex;flex-direction:column;justify-content:center;gap:20px;padding-block:96px 40px;touch-action:pan-y}
h1{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,10vw,6.4rem);line-height:.95;letter-spacing:.04em;text-transform:uppercase;margin:0}
h1 span{display:block}
.lede{max-width:32ch;font-size:clamp(1.05rem,2.5vw,1.25rem);margin:0}
.cue{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin:0}
.statement{min-height:70svh;display:flex;align-items:flex-end;padding-block:40px}
.statement p{font-family:var(--body);font-weight:300;font-size:clamp(1.3rem,4.2vw,2.3rem);line-height:1.25;max-width:22ch;margin:0;text-wrap:balance}
.statement em{font-style:normal;color:var(--amber)}
.col{max-width:540px;display:flex;flex-direction:column;gap:14px;padding-block:72px}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:24px 0 0}
.panel{background:var(--veil);border:1px solid var(--line);padding:24px;position:relative;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.panel::before,.panel::after{content:"";position:absolute;width:10px;height:10px;border:1px solid var(--amber)}
.panel::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.panel::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.panel h2{font-family:var(--body);font-weight:400;font-size:1.3rem;margin:0 0 8px;letter-spacing:-.005em}
#contact h2{font-family:var(--display);font-size:1.15rem;margin-bottom:10px;letter-spacing:.06em;text-transform:uppercase}
.panel p{margin:0;color:#b9c7da}
.tags{margin-top:14px;font-family:var(--mono);font-size:11.5px;color:var(--dim);letter-spacing:.04em}
.email{display:block;font-family:var(--mono);font-weight:400;font-size:clamp(1.1rem,4.8vw,1.7rem);color:var(--ice);text-decoration:none;margin:6px 0 18px;word-break:break-all;user-select:all}
.copy{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:var(--amber);color:var(--night);border:0;padding:11px 16px;cursor:pointer}
.copy:hover,.copy:focus-visible{background:var(--ice);outline:none}
footer{position:relative;z-index:1;padding:20px 20px 72px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);max-width:1200px;margin:0 auto}
@media (min-width:900px){
  main,footer{padding-inline:56px}
  .bar{padding-inline:max(56px, calc((100vw - 1200px) / 2 + 56px))}
  .status{left:max(56px, calc((100vw - 1200px) / 2 + 56px))}
}
.skip{position:absolute;left:-9999px}.skip:focus{left:20px;top:12px;z-index:9;background:var(--amber);color:var(--night);padding:8px 12px}
.no-webgl #stage,.no-webgl .status,.no-webgl .cue{display:none}
.still .cue{display:none}