:root{--accent:#F26B21;--tint:#3a3a40}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden;background:#0a0a0b;color:#eee}
body{font-family:Inter,system-ui,sans-serif}
h1,h2{font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;letter-spacing:.02em}
.hdr{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:20px 5vw}
.logo{font-family:'Bebas Neue';font-size:30px;letter-spacing:.06em;color:#fff;text-decoration:none}.logo span{color:var(--accent)}
.menu{display:flex;align-items:center;gap:10px;color:#ddd;font-size:13px;letter-spacing:.12em;background:none;border:0;cursor:pointer}
.menu i{display:grid;grid-template-columns:4px 4px;gap:4px}.menu i b{width:4px;height:4px;background:#ddd;border-radius:50%}
#gl{cursor:inherit}
#hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;
 background:#0B0B0D;cursor:grab}
#hero.dragging{cursor:grabbing}
#hero::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:1;background:radial-gradient(60% 40% at 50% 46%,var(--tint) 0%,rgba(11,11,13,0) 80%)}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.75))}
.chev{position:absolute;top:50%;z-index:6;width:56px;height:56px;margin-top:-28px;border:0;background:none;cursor:pointer;opacity:.85;transition:opacity .2s,transform .2s}
.chev:hover{opacity:1;transform:scale(1.1)}
.chev svg{width:100%;height:100%}
.prev{left:calc(50% - 250px)}.next{right:calc(50% - 250px)}
.name{position:absolute;left:0;right:0;bottom:calc(9vh + 120px);text-align:center;height:1em;white-space:nowrap;overflow:hidden;font-size:clamp(60px,8vw,130px);line-height:.92;pointer-events:none}
.name h2{position:absolute;left:0;right:0;bottom:0;font-size:1em;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.sub{position:absolute;left:0;right:0;bottom:calc(4vh + 40px);text-align:center;z-index:6}
.sub p{color:#bdbdc2;font-size:15px;max-width:40ch;margin:0 auto;min-height:1.4em;transition:opacity .3s}
.btn{display:inline-block;margin-top:14px;background:var(--accent);color:#fff;text-decoration:none;padding:11px 24px;border-radius:999px;font-weight:500;font-size:14px;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.prog{position:absolute;left:50%;bottom:3vh;width:min(480px,82vw);transform:translateX(-50%);height:28px;z-index:6;cursor:pointer;touch-action:none}
.prog .track{position:absolute;left:0;right:0;top:13px;height:2px;display:flex;border-radius:2px;overflow:hidden}
.prog .track i{flex:1}
.prog .knob{position:absolute;top:7px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.6)}
.hint{display:none;position:absolute;bottom:2.6vh;left:0;right:0;text-align:center;font-size:11px;letter-spacing:.2em;color:#777;text-transform:uppercase}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#loader{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;background:#0a0a0b;transition:opacity .6s}
#loader.done{opacity:0;pointer-events:none}
#loader .bar{width:160px;height:2px;background:#222}#loader .bar b{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}
#loader span{font-family:'Bebas Neue';letter-spacing:.12em;font-size:18px;color:#aaa}
#fallback{display:none;position:absolute;inset:0;align-items:center;justify-content:center}
#fallback img{position:absolute;width:min(52vw,320px);border-radius:14px;opacity:0;transform:scale(.85) rotate(-12deg);transition:.5s;box-shadow:0 30px 60px rgba(0,0,0,.6)}
#fallback img.on{opacity:1;transform:rotate(-12deg)}
.nogl #fallback{display:flex}.nogl #gl{display:none}
.content{padding:14vh 5vw;max-width:1100px;margin:0 auto}
.content h2{font-size:clamp(40px,5vw,64px);color:#fff}.content h2 span{color:var(--accent)}.content p{max-width:60ch;line-height:1.6;margin-top:12px;color:#aaa}
footer{border-top:1px solid #222;padding:50px 5vw;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;color:#888}
footer a{color:var(--accent)}
@media (max-width:700px){
 #hero{height:82vh;height:82svh;min-height:600px}
 .hdr{padding:16px 5vw}.logo{font-size:26px}
 .prev{left:6px}.next{right:6px}.chev{width:44px;height:44px}
 .name{bottom:calc(6% + 108px);font-size:min(12.5vw,52px);height:1.85em;white-space:normal;padding:0 8vw}.sub{bottom:calc(6% + 26px)}.sub p{font-size:14px;padding:0 24px}
 .prog{bottom:2%}
}