:root{
  --bg:#12100d; --bg2:#1a1612; --card:#201b16; --line:#ffffff1f;
  --sand:#f1e6d2; --mute:#b9ad98; --ember:#ff5a1f; --ember2:#ffb020; --ok:#7bd88f;
  --f-d:'Big Shoulders Display',Impact,sans-serif; --f-b:'Manrope',system-ui,sans-serif; --f-m:'JetBrains Mono',ui-monospace,monospace;
  --pad:clamp(20px,5vw,72px); --r:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--sand);font-family:var(--f-b);line-height:1.55;overflow-x:hidden;font-size:17px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ember2);outline-offset:3px}
.sr{position:absolute;left:-9999px}
.mono{font-family:var(--f-m);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember2)}
h1,h2,h3{font-family:var(--f-d);font-weight:800;line-height:.92;text-transform:uppercase;letter-spacing:.01em}
h2{font-size:clamp(44px,8vw,120px)}
h2 em,h1 em{font-style:normal;color:var(--ember)}
.wrap{padding:0 var(--pad);max-width:1500px;margin:0 auto}
section{position:relative}
.sec{padding:clamp(80px,12vw,170px) 0}
.lead{max-width:56ch;color:var(--mute);font-size:clamp(16px,1.3vw,19px);margin-top:20px}

/* progress + cursor */
#prog{position:fixed;top:0;left:0;height:3px;width:100%;background:linear-gradient(90deg,var(--ember),var(--ember2));transform-origin:0 50%;transform:scaleX(0);z-index:100}
#cur{position:fixed;left:0;top:0;width:34px;height:34px;border:1.5px solid var(--ember2);border-radius:50%;pointer-events:none;z-index:120;transform:translate(-100px,-100px);transition:width .25s,height .25s,background .25s,margin .25s;mix-blend-mode:difference}
#cur.big{width:70px;height:70px;margin:-18px 0 0 -18px;background:#ffb02033}
@media (hover:none){#cur{display:none}}

/* loader */
#loader{position:fixed;inset:0;background:var(--bg);z-index:200;display:grid;place-items:center;transition:transform .9s cubic-bezier(.7,0,.2,1)}
#loader.out{transform:translateY(-100%)}
.gauge{width:min(70vw,340px);text-align:center}
.gauge svg{width:100%;overflow:visible}
.gauge .arc{fill:none;stroke:#ffffff18;stroke-width:10;stroke-linecap:round}
.gauge .fill{fill:none;stroke:url(#gg);stroke-width:10;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:283}
.gauge b{display:block;font-family:var(--f-d);font-size:84px;line-height:1;margin-top:-70px}
.gauge span{display:block;margin-top:18px}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;justify-content:space-between;padding:16px var(--pad);transition:background .3s,backdrop-filter .3s,transform .4s}
nav.solid{background:#12100dcc;backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav.hide{transform:translateY(-100%)}
.logo{font-family:var(--f-d);font-weight:900;font-size:28px;letter-spacing:.04em;display:flex;gap:8px;align-items:center}
.logo i{display:inline-block;width:14px;height:14px;background:var(--ember);transform:skewX(-18deg)}
.menu{display:flex;gap:30px;font-size:14px;font-weight:600}
.menu a{position:relative;padding:4px 0;color:var(--sand)}
.menu a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ember);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s}
.menu a:hover:after{transform:scaleX(1)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:99px;font-weight:700;font-size:15px;background:var(--ember);color:#160a04;transition:transform .2s,box-shadow .3s,background .2s;will-change:transform}
.btn:hover{box-shadow:0 10px 40px -8px var(--ember);background:var(--ember2)}
.btn.ghost{background:transparent;color:var(--sand);border:1.5px solid #ffffff55}
.btn.ghost:hover{background:#ffffff14;box-shadow:none}
.btn.sm{padding:10px 18px;font-size:13px}
.burger{display:none;width:44px;height:44px;border:1.5px solid var(--line);border-radius:50%;place-items:center}
.burger span{display:block;width:18px;height:2px;background:var(--sand);position:relative}
.burger span:before,.burger span:after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--sand);transition:.3s}
.burger span:before{top:-6px}.burger span:after{top:6px}
@media (max-width:860px){
  .burger{display:grid}
  .menu{position:fixed;inset:0;background:var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:26px;font-family:var(--f-d);font-size:52px;font-weight:800;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .35s}
  .menu.open{opacity:1;pointer-events:auto}
  nav .btn.navcta{display:none}
  .burger{position:relative;z-index:2}
}

/* hero */
.hero{min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding-bottom:clamp(40px,7vw,90px)}
.hero .bg{position:absolute;inset:-8% 0 -8% 0;background:url(img/utv-hero.webp) center/cover;will-change:transform;transform:scale(1.08)}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#12100d66 0%,#12100d00 35%,#12100d 98%),radial-gradient(80% 60% at 20% 80%,#12100dcc,transparent)}
#dust{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero h1{font-size:clamp(64px,13.5vw,230px);margin:18px 0 26px}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ch{display:inline-block;transform:translateY(110%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.ready .hero h1 .ch{transform:none}
.hero p{max-width:50ch;font-size:clamp(17px,1.5vw,21px);color:#e8dcc6}
.hero .row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.scrollhint{position:absolute;right:var(--pad);bottom:40px;z-index:2;writing-mode:vertical-rl;display:flex;align-items:center;gap:12px}
.scrollhint:after{content:"";width:1px;height:60px;background:var(--ember2);animation:drip 1.8s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:700px){.scrollhint{display:none}}

/* marquee */
.marq{background:var(--ember);color:#160a04;overflow:hidden;white-space:nowrap;padding:16px 0;transform:rotate(-1.2deg);margin:-12px -2vw 0;position:relative;z-index:3}
.marq div{display:inline-block;animation:mq 28s linear infinite;font-family:var(--f-d);font-weight:800;font-size:clamp(22px,3vw,38px);text-transform:uppercase}
.marq span{margin:0 26px}
.marq span:nth-child(even){opacity:.55}
@keyframes mq{to{transform:translateX(-50%)}}

/* reveal */
.rv{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.nojs .rv{opacity:1;transform:none}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:60px}
.stats div{background:var(--bg);padding:34px 24px}
.stats b{display:block;font-family:var(--f-d);font-size:clamp(48px,6vw,92px);line-height:1;color:var(--sand)}
.stats b small{color:var(--ember);font-size:.6em}
.stats span{color:var(--mute);font-size:14px}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr}.stats div{padding:24px 16px}}