:root{
  --blue:#1334ff; --blue2:#0c24c9; --blue3:#0a1ca0; --white:#f6f7ff; --yellow:#ffe500; --line:rgba(246,247,255,.38); --line2:rgba(246,247,255,.16);
  --pad:clamp(18px,3.6vw,60px);
  --f-mono:'Martian Mono',ui-monospace,monospace; --f:'Instrument Sans',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--blue)}
body{background:var(--blue);color:var(--white);font-family:var(--f);font-size:17px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--line2) 1px,transparent 1px),linear-gradient(90deg,var(--line2) 1px,transparent 1px);background-size:56px 56px;background-position:-1px -1px}
a{color:inherit}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{padding-inline:var(--pad);max-width:1640px;margin-inline:auto}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
::selection{background:var(--yellow);color:#000}
.fig{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;display:flex;gap:1em;align-items:center;flex-wrap:wrap}
.fig::before{content:"";width:34px;height:1px;background:currentColor}
.fig--dark{color:var(--blue)}
.draft{font-size:10px;border:1px solid currentColor;padding:2px 7px;letter-spacing:.1em}
.h2{margin-top:.7em;font-family:var(--f-mono);font-weight:700;text-transform:uppercase;font-variation-settings:"wdth" 82;font-size:clamp(30px,5.2vw,86px);line-height:.98;letter-spacing:-.04em;text-wrap:balance}
.h2 .y{color:var(--yellow)}
.head{margin-bottom:clamp(36px,6vw,90px)}

/* registration marks */
.regs{position:fixed;inset:10px;pointer-events:none;z-index:45;mix-blend-mode:difference}
.regs i{position:absolute;width:20px;height:20px}
.regs i::before,.regs i::after{content:"";position:absolute;background:var(--white);opacity:.8}
.regs i::before{left:9px;top:0;width:1px;height:100%}
.regs i::after{top:9px;left:0;height:1px;width:100%}
.regs i:nth-child(1){left:0;top:0}.regs i:nth-child(2){right:0;top:0}.regs i:nth-child(3){left:0;bottom:0}.regs i:nth-child(4){right:0;bottom:0}

/* bar */
.bar{position:fixed;inset:0 0 auto 0;z-index:40;mix-blend-mode:difference;color:#fff;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px calc(var(--pad) + 10px);font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.bar a{text-decoration:none}
.bar__brand{font-weight:800;font-size:13px}
.bar__sheet{opacity:.85}
.bar__sheet b{font-weight:800}
.bar__nav{justify-self:end;display:flex;gap:2em}
.bar__nav a{opacity:.8;transition:opacity .2s,color .2s}
.bar__nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.coords{mix-blend-mode:difference;color:#fff;position:fixed;left:calc(var(--pad) + 10px);bottom:20px;z-index:40;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;opacity:.7;font-variant-numeric:tabular-nums}

.sheet{position:relative;padding-block:clamp(90px,12vw,190px)}
.js .sheet .wrap>*,.js .node{transition:opacity .7s,transform .8s cubic-bezier(.2,.7,.1,1)}

/* hero */
.hero{min-height:100svh;padding-block:0;display:flex;align-items:flex-end;overflow:hidden}
#swarm{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.hero__text{position:relative;z-index:2;padding:0 calc(var(--pad) + 10px) clamp(36px,5vw,70px);width:100%;pointer-events:none;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(18px,4vw,80px);align-items:end}
.hero__text>*{pointer-events:auto}
.claim{font-family:var(--f-mono);font-weight:600;text-transform:uppercase;font-variation-settings:"wdth" 85;font-size:clamp(20px,3vw,50px);line-height:1.06;letter-spacing:-.05em;text-wrap:balance}
.claim mark{background:var(--yellow);color:var(--blue);padding:0 .12em}
.hero__intro{font-size:clamp(15px,1.15vw,18px);max-width:46ch;color:#e6e8ff}
.hero__hint{grid-column:1/-1;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.hint-touch{display:none}
@media (hover:none){.hint-fine{display:none}.hint-touch{display:inline}}

/* services flow */
.flow{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,28px);row-gap:clamp(70px,9vw,130px);padding-bottom:20px}
.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.wires path{fill:none;stroke:var(--white);stroke-width:1.5;stroke-dasharray:5 6}
.wires path.on{stroke:var(--yellow);stroke-dasharray:none;stroke-width:2;opacity:.9}
.wires circle{fill:var(--yellow)}
.node{position:relative;z-index:1;background:var(--blue2);border:1.5px solid var(--white);box-shadow:8px 8px 0 var(--blue3)}
.node__bar{display:flex;justify-content:space-between;gap:10px;padding:9px 14px;border-bottom:1.5px solid var(--white);font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;background:var(--blue3)}
.node__bar span:first-child{color:var(--yellow)}
.node__body{padding:clamp(18px,2.2vw,34px)}
.node h3{font-family:var(--f-mono);font-weight:700;text-transform:uppercase;font-variation-settings:"wdth" 80;font-size:clamp(20px,2.5vw,42px);line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
.node p{margin-top:1em;color:#e2e5ff;max-width:44ch}
.node--1{grid-column:1/8;grid-row:1}
.node--2{grid-column:4/11;grid-row:2}
.node--3{grid-column:6/13;grid-row:3}
.node--targets{grid-column:9/13;grid-row:1;align-self:start;margin-top:clamp(0px,2vw,30px)}
.node--targets ul{list-style:none;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.node--targets li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.node--targets li:last-child{border-bottom:0}
.node--targets li::before{content:"";width:9px;height:9px;border-radius:50%;border:1.5px solid var(--yellow);flex:none}
.port{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--yellow);border:2px solid var(--blue3);z-index:3}
.port--in{left:24px;top:-8px}
.port--out{right:24px;bottom:-8px}
.node:hover{box-shadow:12px 12px 0 var(--blue3);transform:translate(-2px,-2px)}
.node{transition:box-shadow .25s,transform .25s}

/* process (white sheet) */
.proc{background:var(--white);color:var(--blue);background-image:linear-gradient(rgba(19,52,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(19,52,255,.12) 1px,transparent 1px);background-size:56px 56px;background-position:-1px -1px}
.dims{list-style:none;margin-top:clamp(40px,7vw,110px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,56px)}
.dims li{position:relative;padding-top:54px}
.dims li::before{content:"";position:absolute;left:0;right:0;top:20px;height:1.5px;background:var(--blue)}
.dims li::after{content:"";position:absolute;left:0;top:10px;width:1.5px;height:22px;background:var(--blue)}
.dims li i{position:absolute;right:0;top:10px;width:1.5px;height:22px;background:var(--blue)}
.dims b{display:block;font-family:var(--f-mono);font-weight:800;text-transform:uppercase;font-variation-settings:"wdth" 80;font-size:clamp(40px,7vw,120px);line-height:.9;letter-spacing:-.06em}
.dims em{display:block;margin-top:.9em;font-style:normal;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em}
.dims span{display:block;margin-top:.6em;max-width:30ch;font-size:17px;color:#10206f}

/* samples */
.filters{position:sticky;top:48px;z-index:30;margin-bottom:clamp(20px,3vw,40px);background:linear-gradient(var(--blue) 70%,rgba(19,52,255,0));padding:14px 0 18px}
.filters__in{display:flex;gap:8px;overflow-x:auto;padding-inline:calc(var(--pad) + 10px);scrollbar-width:none;max-width:1640px;margin-inline:auto}
.filters__in::-webkit-scrollbar{display:none}
.chip{flex:none;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid var(--white);padding:10px 14px;min-height:44px;min-width:44px;transition:background .15s,color .15s}
.chip:hover{background:rgba(246,247,255,.15)}
.chip.is-on{background:var(--yellow);color:var(--blue);border-color:var(--yellow)}
.grp{margin-top:clamp(30px,5vw,70px)}
.grp[hidden]{display:none}
.grp__h{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px clamp(14px,2vw,30px);align-items:baseline;padding-bottom:12px;border-bottom:1.5px solid var(--white);margin-bottom:12px}
.grp__n{font-family:var(--f-mono);font-size:12px;color:var(--yellow);letter-spacing:.1em}
.grp__t{font-family:var(--f-mono);font-weight:700;text-transform:uppercase;font-variation-settings:"wdth" 80;font-size:clamp(18px,2.2vw,34px);letter-spacing:-.04em;line-height:1.05}
.grp__k{grid-column:2;font-size:14px;color:#d5d9ff}
.cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(150px,18vw,260px),1fr));gap:8px}
.cell{position:relative;aspect-ratio:16/10;overflow:hidden;border:1.5px solid var(--white);background:var(--blue3);padding:0;display:block;min-height:44px}
.cell img,.cell video{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.1,1),filter .3s}
.cell:hover img,.cell:hover video{transform:scale(1.06)}
.cell__n{position:absolute;left:0;top:0;background:var(--blue);font-family:var(--f-mono);font-size:10px;padding:3px 7px;letter-spacing:.08em;border-right:1.5px solid var(--white);border-bottom:1.5px solid var(--white)}
.cell__k{position:absolute;right:6px;bottom:6px;width:26px;height:26px;border-radius:50%;background:var(--yellow);color:var(--blue);font-size:10px;display:grid;place-items:center;padding-left:2px}
.cell:focus-visible{outline-offset:-4px}

/* lightbox */
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--blue3);color:var(--white);overflow:hidden}
.lb[open]{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px)}
.lb::backdrop{background:rgba(5,10,60,.8)}
.lb__stage{display:grid;place-items:center;padding:clamp(16px,3vw,48px);min-height:0;background:var(--blue3);border-right:1.5px solid var(--white)}
.lb__media{width:100%;height:100%;display:grid;place-items:center;min-height:0}
.lb__media video,.lb__media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border:1.5px solid var(--white);background:#000}
.lb__side{display:flex;flex-direction:column;gap:14px;padding:clamp(18px,2.4vw,36px);overflow-y:auto;background:var(--blue)}
.lb__top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--yellow)}
.lb__x{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:1.5px solid var(--white);padding:10px 14px;min-height:44px;color:var(--white)}
.lb__x:hover{background:var(--yellow);color:var(--blue);border-color:var(--yellow)}
.lb h3{font-family:var(--f-mono);font-weight:700;text-transform:uppercase;font-variation-settings:"wdth" 80;font-size:clamp(22px,2.4vw,36px);line-height:1.02;letter-spacing:-.045em;margin-top:.4em}
.lb__kick{font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;color:#cfd4ff}
.lb__body{display:grid;gap:.8em;font-size:15.5px;color:#e6e8ff}
.lb__tools{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.lb__tools li{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);padding:4px 8px}
.lb__nav{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:12px}
.lb__nav button{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid var(--white);padding:14px;min-height:48px}
.lb__nav button:hover{background:var(--yellow);color:var(--blue);border-color:var(--yellow)}

/* end (yellow sheet) */
.end{background:var(--yellow);color:var(--blue);background-image:linear-gradient(rgba(19,52,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(19,52,255,.14) 1px,transparent 1px);background-size:56px 56px;background-position:-1px -1px;padding-bottom:36px}
.end__title{margin-top:.5em;font-family:var(--f-mono);font-weight:800;text-transform:uppercase;font-variation-settings:"wdth" 75;font-size:clamp(34px,9.6vw,170px);line-height:.92;letter-spacing:-.07em;text-wrap:balance}
.end__btn{margin-top:clamp(30px,5vw,70px);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(12px,2vw,30px);border:2px solid var(--blue);background:var(--blue);color:var(--yellow);padding:clamp(16px,2vw,28px) clamp(16px,2.4vw,36px);text-decoration:none;font-family:var(--f-mono);box-shadow:8px 8px 0 rgba(19,52,255,.35);transition:transform .2s,box-shadow .2s}
.end__btn span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--white)}
.end__btn b{font-size:clamp(13px,2.2vw,34px);font-weight:600;letter-spacing:-.03em;word-break:break-all}
.end__btn i{font-style:normal;font-size:clamp(22px,3vw,44px);transition:transform .25s}
.end__btn:hover{transform:translate(-3px,-3px);box-shadow:12px 12px 0 rgba(19,52,255,.35)}
.end__btn:hover i{transform:translateX(8px)}
.end__foot{margin-top:clamp(60px,10vw,150px);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1.5px solid var(--blue);padding-top:14px;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.end__foot a{text-decoration:none}

@media (max-width:900px){
  .bar{grid-template-columns:1fr auto;padding-inline:calc(var(--pad) + 6px)}
  .bar__sheet{display:none}
  .bar__nav{gap:1.2em}
  .bar__nav a:nth-child(1){display:none}
  .coords{display:none}
  .hero__text{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr;row-gap:76px}
  .node--1,.node--2,.node--3,.node--targets{grid-column:1;grid-row:auto}
  .node--targets{order:-1}
  .dims{grid-template-columns:1fr}
  .lb[open]{grid-template-columns:1fr;grid-template-rows:minmax(0,46%) minmax(0,1fr)}
  .lb__nav{position:sticky;bottom:0;background:var(--blue);padding-bottom:8px}
  .lb__stage{border-right:0;border-bottom:1.5px solid var(--white);padding:12px}
  .end__btn{grid-template-columns:1fr auto}
  .end__btn span{grid-column:1/-1}
}
@media (max-width:520px){
  .filters{top:44px}
  .cells{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cell img,.cell video{transition:none}
}