@property --p{syntax:'<percentage>';inherits:true;initial-value:0%}
@property --r{syntax:'<length>';inherits:true;initial-value:0px}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#050505;color:#fff;font-family:'Inter',system-ui,sans-serif;overflow:hidden}
body.done{overflow:auto}
.page{position:fixed;inset:0;overflow:auto;background:#050505}
.page::before{content:"";position:fixed;inset:0;background:linear-gradient(rgba(5,5,5,.12),rgba(5,5,5,.38)),url(bg.jpg) center/cover no-repeat;z-index:0}
.nav{position:relative;z-index:2;display:flex;align-items:center;gap:2rem;padding:1.1rem 2rem;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(5,5,5,.5);backdrop-filter:blur(10px)}
.nav img{height:34px;display:block}
.nav .links{display:flex;gap:1.8rem;margin:0 auto;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#cfcfcf}
.nav .btn{padding:.75rem 1.3rem;border-radius:999px;background:#fff;color:#050505;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.hero{position:relative;z-index:2;max-width:1100px;margin:0 auto;padding:7rem 2rem 4rem}
.hero .eyebrow{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:#bdbdbd;display:flex;align-items:center;gap:.8rem}
.hero .eyebrow::before{content:"";width:34px;height:1px;background:#bdbdbd}
.hero h1{font:800 clamp(3rem,8vw,6.6rem)/.98 'Inter',sans-serif;letter-spacing:-.035em;margin:1.2rem 0 1.6rem}
.hero h1 i{font-family:'Urbanist','Inter',sans-serif;font-weight:800;text-shadow:3px 3px 0 rgba(255,255,255,.35)}
.hero p{max-width:560px;color:#c9c9c9;font-size:1.15rem;line-height:1.65}
.hero .actions{display:flex;gap:.9rem;margin-top:2rem;flex-wrap:wrap}
.hero .actions a{padding:1rem 1.8rem;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border:1px solid rgba(255,255,255,.4);color:#fff;text-decoration:none}
.hero .actions a.p{background:#fff;color:#050505;border-color:#fff}
#intro{position:fixed;inset:0;z-index:100;background:#000;overflow:hidden}
#intro.gone{display:none}
.ctl{position:fixed;left:1.2rem;bottom:1.1rem;z-index:200;display:flex;gap:.6rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.ctl a,.ctl button{all:unset;cursor:pointer;color:#fff;padding:.55rem .95rem;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);font:600 .68rem 'Inter',sans-serif;letter-spacing:.14em;text-transform:uppercase}
.ctl a:hover,.ctl button:hover{background:#fff;color:#000}
.stage{position:absolute;inset:0;display:grid;place-items:center}
.logo-main{width:min(46vw,400px);display:block}

body.done #skip{display:none}

#navLogo{opacity:0}
.lw{position:relative;width:min(46vw,400px);aspect-ratio:373/170}
.lw img{width:100%;display:block}

.sheen{position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,1) 50%,transparent 60%) no-repeat;background-size:300% 100%;filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 26px rgba(255,255,255,.85)) drop-shadow(0 0 60px rgba(255,255,255,.5));mix-blend-mode:screen;background-position:150% 0;opacity:0;-webkit-mask-image:url(jsi-logo-mark.png);mask-image:url(jsi-logo-mark.png);-webkit-mask-size:100% 100%;mask-size:100% 100%;pointer-events:none}