@font-face{font-family:'Montserrat'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/montserrat-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/montserrat-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/montserrat-latin-800-normal.woff2') format('woff2')}
/* ======================= INTRO: logo landing ======================= */
html.intro{overflow:hidden}
.splash{position:fixed; inset:0; z-index:200; pointer-events:auto}
.splash-bg{position:absolute; inset:0; background:radial-gradient(60% 55% at 50% 40%, #ffffff 0, #f3f6ff 55%, #e6edfa 100%); transition:clip-path 1s cubic-bezier(.7,0,.2,1)}
.splash-bg::before{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(12,26,79,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(12,26,79,.05) 1px, transparent 1px); background-size:48px 48px; -webkit-mask-image:radial-gradient(60% 60% at 50% 45%, #000 30%, transparent 80%); mask-image:radial-gradient(60% 60% at 50% 45%, #000 30%, transparent 80%)}
.splash-bg{clip-path:inset(0 0 0 0)}
.splash.leave .splash-bg{clip-path:inset(0 0 100% 0)}
.splash-logo{position:absolute; left:50%; top:50%; width:min(980px, 92vw); transform:translate(-50%,-50%); transform-origin:0 0; transition:transform 1s cubic-bezier(.7,0,.2,1), opacity .6s .45s}
.splash.leave .splash-logo{opacity:0; transition:transform 1s cubic-bezier(.7,0,.2,1), opacity .25s .85s}
.splash.leave .s-word{opacity:0; transition:opacity .3s}
/* header logo mark, just before the name */
.site-header .wordmark{display:inline-flex; align-items:center; gap:12px}
.brand-mark{width:50px; height:50px; display:block; flex:none; margin:-8px 0 -8px -6px; transition:opacity .5s}
.brand-fallback{display:none; width:34px; height:28px; flex:none}
.no-mark .brand-mark{display:none} .no-mark .brand-fallback{display:block}
html.intro .brand-mark, .mark-wait .brand-mark{opacity:0}
@media (max-width:900px){ .brand-mark{width:42px; height:42px; margin:-6px 0 -6px -4px} .site-header .wordmark{gap:9px} }
@media (max-width:520px){ .brand-mark{width:36px; height:36px; margin:-6px 0 -6px -4px} .site-header .wordmark{gap:7px} }
.splash canvas{display:block; width:100%; height:min(46vh, 430px); margin:0 auto}
.s-word{text-align:center; font-family:'Montserrat','Space Grotesk',system-ui,sans-serif; color:#0c1a4f; margin-top:-1vh}
.s-word .name{display:block; font-weight:800; font-size:clamp(36px, 7vw, 92px); line-height:1; letter-spacing:-.01em}
.s-word .name i{display:inline-block; font-style:normal; transform:translateY(60%) rotateX(-70deg); opacity:0; transform-origin:50% 100%; transition:transform .9s cubic-bezier(.2,.8,.2,1), opacity .6s}
.s-word .sub{display:flex; align-items:center; justify-content:center; gap:clamp(10px,2vw,22px); margin-top:clamp(4px,.8vw,10px)}
.s-word .sub .ln{height:3px; width:clamp(40px, 14vw, 200px); background:linear-gradient(90deg, transparent, #1d6ff0); transform:scaleX(0); transform-origin:right; transition:transform 1s .6s cubic-bezier(.2,.8,.2,1)}
.s-word .sub .ln.r{background:linear-gradient(90deg, #1d6ff0, transparent); transform-origin:left}
.s-word .sub b{font-weight:700; font-size:clamp(24px, 4.8vw, 62px); line-height:1.05; white-space:nowrap; opacity:0; transform:translateY(30%); transition:transform .9s .45s cubic-bezier(.2,.8,.2,1), opacity .7s .45s}
.s-word .sub b span{color:#1d6ff0}
.s-word .tag{display:flex; justify-content:center; align-items:center; gap:clamp(8px,1.2vw,16px); margin-top:clamp(6px,1vw,12px); font-weight:500; font-size:clamp(13px, 2vw, 28px); letter-spacing:.08em}
.s-word .tag span{opacity:0; filter:blur(6px); transition:opacity .7s, filter .7s}
.s-word .tag .dot{width:.28em; height:.28em; border-radius:50%; background:#1d6ff0; display:inline-block}
.s-word svg{display:block; margin:clamp(4px,1vw,12px) auto 0; width:clamp(160px, 44vw, 560px); height:auto; overflow:visible}
.s-word svg path{stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.4s 1.2s cubic-bezier(.2,.8,.2,1)}
.splash.text-in .s-word .name i{transform:none; opacity:1}
.splash.text-in .s-word .sub .ln{transform:scaleX(1)}
.splash.text-in .s-word .sub b{transform:none; opacity:1}
.splash.text-in .s-word .tag span{opacity:1; filter:none}
.splash.text-in .s-word svg path{stroke-dashoffset:0}
.s-bar{position:absolute; left:0; bottom:0; height:3px; width:100%; background:#1d6ff0; transform-origin:left; transform:scaleX(0)}
.s-skip{position:absolute; right:22px; bottom:20px; z-index:2; font:500 12px 'IBM Plex Mono',monospace; letter-spacing:.18em; text-transform:uppercase; padding:10px 14px; border:1px solid rgba(12,26,79,.35); background:rgba(255,255,255,.6); color:#0c1a4f; cursor:pointer}
.s-skip:hover{border-color:#0c1a4f}
.splash.leave .s-skip, .splash.leave .s-bar{opacity:0; transition:opacity .3s}
.splash .s-fallback{display:none; width:28%; margin:0 auto}
.splash.no-gl canvas{display:none} .splash.no-gl .s-fallback{display:block}
@media (max-width:640px){ .splash canvas{height:40vh} }
.brand-mark-wrap{position:relative; display:block; flex:none; width:50px; height:50px; margin:-8px 0 -8px -6px; transition:opacity .5s}
.brand-mark-wrap .brand-mark{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; transition:opacity .4s}
.brand-mark-wrap .brand-static{position:absolute; inset:0; width:100%; height:100%; display:block; transition:opacity .4s}
.brand-mark-wrap.mark-on .brand-mark{opacity:1} .brand-mark-wrap.mark-on .brand-static{opacity:0}
html.intro .brand-mark-wrap, .mark-wait .brand-mark-wrap{opacity:0}
@media (max-width:900px){ .brand-mark-wrap{width:42px; height:42px; margin:-6px 0 -6px -4px} }
@media (max-width:520px){ .brand-mark-wrap{width:36px; height:36px; margin:-6px 0 -6px -4px} }