@font-face{font-family:"Inter";src:url(/fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}

@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

:root{
  --bg:#02040a;
  --fg:#ffffff;
  --fg-2:rgb(181,179,173);
  --fg-3:rgb(124,122,117);
  --card:#05070d;
  --card-line:rgba(255,255,255,.07);
  --focus:rgb(61,99,221);
  --go:#3ddc84;
  --bad:#ff8a96;
  --pad:clamp(16px,4vw,48px);
  --ease:cubic-bezier(.4,0,.2,1);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;overflow:hidden;background:var(--bg);color:var(--fg);font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:rgba(61,99,221,.45);color:#fff}

#silk{position:fixed;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.8s var(--ease)}
#silk.lit{opacity:1}
#silk.now{transition:none}
body.page-contact{overflow:auto}
.no-gl body{background:linear-gradient(160deg,#0a1638 0%,var(--bg) 60%)}

.bar,.hero,.cpage{position:relative;z-index:1}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:calc(var(--pad) * .8 + env(safe-area-inset-top)) calc(var(--pad) + env(safe-area-inset-right)) 0 calc(var(--pad) + env(safe-area-inset-left))}
.mark{display:inline-flex;align-items:center;gap:10px;height:40px;color:var(--fg);text-decoration:none;font-size:15px;font-weight:600;letter-spacing:-.01em}
.mark svg{width:20px;height:20px;flex:none}
.mark:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:6px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;flex-shrink:0;height:40px;padding:0 16px;border-radius:9999px;font:inherit;font-size:15px;line-height:22.5px;font-weight:500;text-decoration:none;cursor:pointer;border:0;outline:none;transition:opacity .15s var(--ease),box-shadow .15s var(--ease);-webkit-tap-highlight-color:transparent}
.btn svg{width:14px;height:14px;flex-shrink:0;pointer-events:none}
.btn-primary{color:#000;background:linear-gradient(in oklab,rgb(238,238,236) 0%,rgb(181,179,173) 100%);border:1px solid #000;box-shadow:inset 0 1px 1px #fff,0 1px 3px rgba(0,0,0,.2),0 1px 2px -1px rgba(0,0,0,.2)}
.btn-primary:hover{opacity:.9}
.btn-primary:focus-visible{box-shadow:inset 0 1px 1px #fff,0 0 0 1px #fff,0 0 0 3px var(--focus),0 1px 3px rgba(0,0,0,.2)}
.btn-secondary{color:rgb(238,238,236);background:linear-gradient(rgba(181,179,173,.15) 0%,rgba(181,179,173,.1) 100%);box-shadow:inset 0 1px 1px rgba(255,255,255,.1),0 0 0 1px rgba(0,0,0,.2),0 1px 3px rgba(0,0,0,.2),0 1px 2px -1px rgba(0,0,0,.2)}
.btn-secondary:hover{opacity:.8}
.btn-secondary:focus-visible{box-shadow:inset 0 1px 1px rgba(255,255,255,.1),0 0 0 1px #fff,0 0 0 3px var(--focus)}
.btn-chev{padding-right:12px}
.btn-chev svg{color:rgb(98,96,91);transition:transform .2s var(--ease)}
.btn-chev:hover svg{transform:translateX(2px)}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn.busy[disabled]{opacity:1;pointer-events:auto;cursor:progress}

.contact{padding-left:14px}

.dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--go);flex:none}
.dot::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--go);animation:pulse 2.4s cubic-bezier(.16,1,.3,1) infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(2.6);opacity:0}}

.hero{align-self:end;padding:0 calc(var(--pad) + env(safe-area-inset-right)) calc(var(--pad) + env(safe-area-inset-bottom)) calc(var(--pad) + env(safe-area-inset-left))}
h1{margin:0}
.hero h1{color:#fff;font-weight:500;letter-spacing:-.035em;line-height:1;text-transform:uppercase;font-size:min(calc((100vw - 2 * var(--pad)) / 6.45),21vh,220px)}
.hero h1 span{display:block}
.hero h1 i{font-style:normal;font-size:.6em}


.cpage{padding:clamp(40px,10vh,120px) calc(var(--pad) + env(safe-area-inset-right)) calc(var(--pad) + env(safe-area-inset-bottom)) calc(var(--pad) + env(safe-area-inset-left));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,580px);gap:64px;align-items:start;align-content:start}
.cintro h1{font-size:56px;font-weight:500;letter-spacing:-.025em;line-height:1.1;color:#fff}
.cintro p{margin:16px 0 0;font-size:20px;color:var(--fg-2)}
.cintro a{color:inherit;text-decoration:none}
.cintro a:hover{text-decoration:underline}

.card{background:var(--card);border:1px solid var(--card-line);border-radius:12px;padding:32px;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);overflow:hidden;transition:height .3s var(--ease)}

form{display:grid;gap:20px}
.f{display:grid;gap:8px}
.f>span{font-size:13px;font-weight:400;letter-spacing:.025em;color:var(--fg-2)}
.f em{font-style:normal;color:var(--fg-3);margin-left:6px}
.f input,.f textarea{width:100%;height:40px;padding:0 12px;border-radius:8px;font:inherit;font-size:14px;color:rgb(238,238,236);background:rgba(0,0,0,.2);border:1px solid #000;box-shadow:0 0 0 1px rgba(251,251,235,.137);outline:none;-webkit-appearance:none;appearance:none;transition:box-shadow .15s}
.f input::placeholder,.f textarea::placeholder{color:rgba(181,179,173,.45)}
.f textarea{height:auto;min-height:120px;padding:10px 12px;resize:vertical;line-height:1.5}
.f input:focus,.f textarea:focus{box-shadow:0 0 0 1px var(--focus),0 0 0 3px rgba(61,99,221,.35)}
.f.bad input,.f.bad textarea{box-shadow:0 0 0 1px var(--bad)}
.f.bad>span{color:var(--bad)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ts:empty{display:none}
.err{margin:0;font-size:13.5px;line-height:1.45;color:var(--bad)}
.err a{color:inherit}
#send{justify-self:start}

#done{padding:8px 0}
#done h2{margin:0 0 8px;font-size:24px;font-weight:500;letter-spacing:-.02em}
#done h2:focus{outline:none}
#done p{margin:0 0 24px;color:var(--fg-2)}
#done b{color:#fff;font-weight:500;word-break:break-all}

.lost{display:flex;flex-direction:column;align-items:flex-start;gap:32px}
.lost h1{font-size:min(calc((100vw - 2 * var(--pad)) / 13),10.5vh,110px)}

@media (max-width:899px){
  .cpage{grid-template-columns:minmax(0,1fr);gap:32px}
  .cintro h1{font-size:40px}
  .card{padding:20px}
}
@media (max-width:767px){
  .f input,.f textarea{font-size:16px}
}
@media (forced-colors:active){
  .f input:focus,.f textarea:focus,.btn:focus-visible,.mark:focus-visible{outline:2px solid Highlight;outline-offset:2px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .dot::before{display:none}
}
