@font-face{font-family:"Bricolage Grotesque";src:url(fonts/BricolageGrotesque.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(fonts/AtkinsonHyperlegible-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#F2F4F8;color:#15213B;font:400 1.0625rem/1.6 "Atkinson Hyperlegible",system-ui,sans-serif;display:grid;place-items:center;overflow:hidden}
::selection{background:#0B84E3;color:#fff}
main{position:relative;width:min(100% - 32px,46rem);padding:48px 0}
.logo{height:34px;width:auto;margin-bottom:48px}
h1{font-family:"Bricolage Grotesque",sans-serif;font-weight:760;font-stretch:86%;font-size:clamp(2.4rem,7vw,5rem);line-height:.95;letter-spacing:-.035em;margin:0 0 .45em;text-wrap:balance}
h1 span{color:#0B84E3}
p{margin:0;max-width:32rem;color:#2E3A55;font-size:clamp(1.05rem,1.4vw,1.2rem)}
.pieces{position:fixed;inset:0;pointer-events:none;z-index:-1}
.pieces i{position:absolute;height:22px;width:120px;border-radius:999px;background:#15213B;opacity:.9}
.pieces i.d{width:22px;background:#0B84E3}
.pieces i:nth-child(1){right:8%;top:14%;transform:rotate(-18deg)}
.pieces i:nth-child(2){right:22%;top:24%}
.pieces i:nth-child(3){right:4%;bottom:18%;width:170px;background:#B7C0CE;transform:rotate(12deg)}
.pieces i:nth-child(4){left:6%;bottom:12%}
.pieces i:nth-child(5){left:-30px;top:10%;width:140px;transform:rotate(30deg)}
.pieces i:nth-child(6){right:30%;bottom:8%;width:80px;transform:rotate(-40deg)}
@media (prefers-reduced-motion:no-preference){
  .pieces i{animation:drift 9s ease-in-out infinite alternate}
  .pieces i:nth-child(2n){animation-duration:7s;animation-delay:-2s}
  .pieces i:nth-child(3n){animation-duration:11s;animation-delay:-4s}
}
@keyframes drift{to{translate:14px -18px}}
@media (max-width:600px){.pieces i:nth-child(1),.pieces i:nth-child(3){opacity:.35}}