*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none;background:var(--sys-bg);color:var(--sys-ink);font-family:var(--ref-font-zh);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
.mono{font-family:var(--ref-font-mono);font-size:var(--comp-eyebrow-size);letter-spacing:var(--comp-eyebrow-track);text-transform:uppercase;font-weight:500}
.px{font-family:var(--ref-font-pixel);font-weight:400;letter-spacing:0}
.display{font-family:var(--ref-font-display);font-weight:400;letter-spacing:-.01em;line-height:1.08;text-transform:uppercase}
em{font-style:normal;color:var(--sys-accent)}

/* background (behind character) */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.glow{position:absolute;left:50%;bottom:-20vh;width:120vh;height:80vh;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,74,28,.30),rgba(255,74,28,.08) 55%,transparent 100%);transition:opacity 800ms var(--ref-ease-out)}
#heat{position:absolute;left:0;right:0;bottom:0;width:100%;height:46vh;opacity:.9;transition:opacity 800ms var(--ref-ease-out)}
.giant{position:absolute;left:0;right:0;top:calc(var(--comp-nav-h) + 4vh);text-align:center;font-family:var(--ref-font-display);font-size:min(31vw,56vh);line-height:.9;letter-spacing:-.02em;color:var(--sys-ink);white-space:nowrap}
.giant span{display:inline-block;transition:transform 900ms var(--ref-ease-out),opacity 600ms var(--ref-ease-out),color 600ms}
.giant.outline span{color:transparent;-webkit-text-stroke:1px rgba(233,230,224,.16);font-size:.62em}
.giant.swap span{transform:translateY(12%);opacity:0}

/* stage */
.stage{position:fixed;inset:0;overflow:hidden;z-index:1;transition:none}
.rig{position:absolute;left:50%;top:50%;transform-origin:0 0;will-change:transform}
#cv{position:absolute;inset:0;width:100%;height:100%}
.decoders{position:fixed;left:0;top:0;width:2px;height:2px;overflow:hidden;opacity:.01;pointer-events:none;z-index:-1}
.decoders video{width:2px;height:2px}
.ring{position:fixed;inset:0;width:100%;height:100%;z-index:3;opacity:0;pointer-events:none}
.fader{position:fixed;inset:0;background:var(--sys-bg);z-index:15;opacity:0;pointer-events:none;transition:opacity 250ms}
.fader.on{opacity:1}

/* HUD */
.hud{position:fixed;inset:var(--comp-hud-inset);z-index:6;pointer-events:none}
.x{position:absolute;width:12px;height:12px}
.x::before,.x::after{content:"";position:absolute;background:var(--sys-accent)}
.x::before{left:5px;top:0;width:1px;height:12px}.x::after{top:5px;left:0;height:1px;width:12px}
.tl{left:-6px;top:-6px}.tr{right:-6px;top:-6px}.bl{left:-6px;bottom:-6px}.br{right:-6px;bottom:-6px}
.hud-l,.hud-r{position:absolute;top:calc(var(--comp-nav-h) + 8px);display:grid;gap:6px;color:var(--sys-ink-dim)}
.hud-l{left:var(--sys-gutter)}.hud-r{right:var(--sys-gutter);text-align:right}
.hud-b{position:absolute;left:50%;bottom:calc(16px + var(--lift,0px));transition:bottom 400ms;transform:translateX(-50%);color:var(--sys-ink-dim)}
.hint{transition:opacity 500ms}.hint b{color:var(--sys-accent);display:inline-block;animation:bob 1600ms ease-in-out infinite}
@keyframes bob{50%{transform:translateY(4px)}}
.heat-meter{transition:opacity 400ms;position:absolute;right:var(--sys-gutter);bottom:calc(16px + var(--lift,0px));transition:bottom 400ms;display:flex;align-items:center;gap:12px;color:var(--sys-ink-dim)}
.cells{display:flex;gap:2px}.cells i{width:6px;height:10px;background:rgba(233,230,224,.12)}.cells i.on{background:var(--sys-accent)}
#heatPct{color:var(--sys-ink);min-width:40px;text-align:right}
body.contact .hud-l,body.contact .hud-r,body.contact .heat-meter,body.contact .x{opacity:0}
body.hero .hud{--lift:40px}
.hud-l,.hud-r{transition:opacity 400ms}

/* nav */
.nav{position:fixed;left:0;right:0;top:0;height:var(--comp-nav-h);z-index:30;display:flex;align-items:center;justify-content:space-between;padding:0 var(--sys-gutter);padding-top:env(safe-area-inset-top,0px)}
.wm{display:flex;align-items:baseline;gap:10px}
.wm b{font-family:var(--ref-font-display);font-weight:400;font-size:20px;letter-spacing:.06em}
.wm span{font-family:var(--ref-font-pixel);font-size:16px;color:var(--sys-accent)}
.wm small{font-size:12px;color:var(--sys-ink-dim);letter-spacing:.2em}
nav{display:flex;gap:32px}
nav a{color:var(--sys-ink-dim);transition:color 200ms;position:relative}
nav a:hover,nav a.on{color:var(--sys-ink)}
nav a.on::before{content:"";position:absolute;left:-12px;top:50%;width:5px;height:5px;margin-top:-3px;background:var(--sys-accent)}
.cta{border:1px solid var(--sys-accent);color:var(--sys-ink);padding:10px 16px;transition:background 200ms,color 200ms}
.cta b{color:var(--sys-accent)}.cta:hover{background:var(--sys-accent);color:var(--sys-bg)}.cta:hover b{color:var(--sys-bg)}

/* section index */
.index{position:fixed;left:var(--sys-gutter);top:50%;transform:translateY(-50%);z-index:30;display:grid;gap:14px}
.index li{display:flex;gap:10px;align-items:center;cursor:pointer;color:var(--sys-ink-faint);transition:color 200ms}
.index li b{font-weight:500}
.index li span{opacity:0;transform:translateX(-4px);transition:opacity 300ms,transform 300ms}
.index li.on{color:var(--sys-ink)}.index li.on b{color:var(--sys-accent)}
.index li.on span,.index li:hover span{opacity:1;transform:none}
body.contact .index li{color:#7A7A80}body.contact .index li.on{color:var(--sys-light-ink)}

/* copy blocks + scroll-tied reveal */
.copy{position:fixed;z-index:10;--rv:0;--w-ink:var(--sys-ink);--w-ghost:#3A3A40;visibility:hidden;pointer-events:none}
.copy.on{visibility:visible;pointer-events:auto}
.copy .eyebrow,.copy .body,.copy .lead,.copy .stat,.copy .count,.copy .work,.copy .logos li,.copy .contact li,.copy .svc li,.copy>span{opacity:var(--rv);transform:translateY(calc((1 - var(--rv)) * 16px))}
.w{display:inline-block;--t:clamp(0, calc(var(--rv) * (var(--n) + 3) - var(--i)), 1);--t2:clamp(0, calc(var(--rv) * (var(--n) + 3) - var(--i) - 1.5), 1);opacity:var(--t);transform:translateY(calc((1 - var(--t)) * 40%));color:color-mix(in srgb, var(--w-ink) calc(var(--t2) * 100%), var(--w-ghost))}
em .w,.w em{color:color-mix(in srgb, var(--sys-accent) calc(var(--t2) * 100%), var(--w-ghost))}
.eyebrow{color:var(--sys-ink-dim);margin-bottom:20px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.eyebrow .tag{background:var(--sys-accent);color:var(--sys-bg);padding:4px 8px}
.eyebrow .dim{color:var(--sys-ink-faint)}
.h1{font-size:var(--comp-h1-size)}.h2{font-size:var(--comp-h2-size)}
.body{font-size:var(--comp-body-size);line-height:var(--comp-body-lh);color:#C9C6C0;margin-top:20px;max-width:30em}

#c0{left:calc(var(--sys-gutter) + 120px);bottom:104px;width:420px}
#c0r{right:calc(var(--sys-gutter) + 8px);bottom:104px;display:grid;gap:24px;text-align:right}
.stat b{display:block;font-size:var(--comp-pixel-l);line-height:1;color:var(--sys-accent)}
.stat span{display:block;color:var(--sys-ink-dim);margin-top:8px;line-height:1.5}
.marquee{position:fixed;left:0;right:0;bottom:0;height:40px;z-index:5;background:var(--sys-accent);color:var(--sys-bg);overflow:hidden;display:flex;align-items:center;transform:translateY(calc((1 - var(--mq, 1)) * 140%));opacity:var(--mq,1)}
.marquee .track{display:flex;white-space:nowrap;font-size:24px;animation:mq 28s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}

#c1{left:calc(var(--sys-gutter) + 120px);top:calc(var(--comp-nav-h) + 72px);width:min(44vw,600px)}
.svc{margin-top:28px;border-top:1px solid var(--sys-line)}
.svc li{display:grid;grid-template-columns:48px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--sys-line);transition:background 300ms}
.svc li:hover{background:linear-gradient(90deg,rgba(255,74,28,.10),transparent 70%)}
.svc b{font-size:var(--comp-pixel-s);color:var(--sys-accent);padding-top:2px}
.svc h3{font-size:14px;letter-spacing:.04em;color:var(--sys-ink-dim);float:right;margin-left:12px}
.svc strong{display:block;font-size:18px;font-weight:700;color:var(--sys-ink)}
.svc p{font-size:14px;line-height:1.8;color:#A9A6A0;margin-top:4px}

#c2{left:calc(var(--sys-gutter) + 104px);bottom:56px;width:420px;padding:24px;background:rgba(13,13,15,.62);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border:1px solid rgba(255,106,58,.28);border-radius:4px}
.count{font-size:var(--comp-pixel-l);line-height:1;color:var(--sys-ink)}
.count i{font-style:normal;color:var(--sys-ink-faint);margin:0 8px}
.count span{color:var(--sys-accent)}
.work{margin-top:20px;transition:opacity 300ms}
.work.swap{opacity:0 !important}
.work h3{font-size:24px}
.meta{display:grid;grid-template-columns:2fr .7fr 1.1fr;border-top:1px solid var(--sys-line);border-bottom:1px solid var(--sys-line);margin-top:16px}
.meta div{padding:12px 12px 12px 0}.meta div+div{padding-left:12px;border-left:1px solid var(--sys-line)}
.meta dt{color:var(--sys-ink-faint);font-size:10px}.meta dd{font-size:13px;margin-top:6px;white-space:nowrap}
.work .body{font-size:14px;margin-top:16px;line-height:1.85}
.link{display:inline-flex;gap:8px;margin-top:16px;color:var(--sys-ink);border-bottom:1px solid var(--sys-accent);padding-bottom:4px}
.link b{color:var(--sys-accent)}
#c2r{right:calc(var(--sys-gutter) + 8px);bottom:96px;display:grid;gap:12px;justify-items:end;color:var(--sys-ink-dim)}
.dots{font-size:16px;color:var(--sys-accent);letter-spacing:4px}

#c3{left:calc(var(--sys-gutter) + 120px);top:calc(var(--comp-nav-h) + 96px);width:340px}
#c3 .h2{font-size:36px}
#c3r{right:calc(var(--sys-gutter) + 8px);top:calc(var(--comp-nav-h) + 96px);width:400px}
.logos{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--sys-line);border-left:1px solid var(--sys-line)}
.logos li{height:88px;border-right:1px solid var(--sys-line);border-bottom:1px solid var(--sys-line);display:grid;place-items:center;position:relative;transition:background 300ms}
.logos li:hover{background:rgba(255,74,28,.08)}
.logos li i{display:block;height:28px;background:var(--sys-ink);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;opacity:.86;transition:background 300ms,opacity 300ms}
.logos li:hover i{background:var(--sys-accent);opacity:1}
.logos li small{position:absolute;left:8px;top:6px;font-family:var(--ref-font-mono);font-size:9px;color:var(--sys-ink-faint);letter-spacing:.1em}
.logos li.next{color:var(--sys-accent);font-family:var(--ref-font-mono);font-size:11px;letter-spacing:.14em}

/* contact — light outro panel */
.stage.panel{transition:none}
.light{color:var(--sys-light-ink);--w-ink:var(--sys-light-ink);--w-ghost:#A8A8AE}
.light .eyebrow{color:var(--sys-light-dim)}
.light .body{color:#3A3A3F}
#c4{right:calc(var(--sys-gutter) + 40px);top:calc(var(--comp-nav-h) + 72px);width:420px}
.contact{margin-top:28px;border-top:1px solid rgba(20,20,22,.2)}
.contact li{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;border-bottom:1px solid rgba(20,20,22,.2);font-size:16px}
.contact li span{color:var(--sys-light-dim)}
.contact a{transition:color 200ms}.contact a:hover{color:var(--sys-accent)}.contact a b{color:var(--sys-accent)}
.foot{left:calc(var(--comp-hud-inset) + 24px);right:calc(var(--comp-hud-inset) + 24px);bottom:calc(var(--comp-hud-inset) + 20px);display:flex;justify-content:space-between;opacity:var(--rv);color:var(--sys-light-dim)}
body.contact .nav{color:var(--sys-ink)}

/* loading */
.loading{position:fixed;inset:0;z-index:50;background:var(--sys-bg);display:grid;place-items:center;transition:opacity 600ms}
.ld{display:grid;gap:12px;justify-items:center;color:var(--sys-ink-dim)}
.ld-n{font-size:64px;color:var(--sys-accent);line-height:1}
.ld-bar{width:240px;height:8px;background:repeating-linear-gradient(90deg,rgba(233,230,224,.12) 0 6px,transparent 6px 8px)}
.ld-bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--sys-accent) 0 6px,transparent 6px 8px);transition:width 200ms}

/* tablet */
@media (max-width:1199px){
  #c0,#c1,#c2,#c3{left:calc(var(--sys-gutter) + 72px)}
  #c1{width:min(50vw,520px)}
  #c3,#c3r{width:320px}
  .index li span{display:none}
}
/* mobile: simplified camera + decoration */
@media (max-width:899px){
  .index,.hud-l,.hud-r,.heat-meter,.x,#c2r,#c0r,nav{display:none !important}
  .cta{padding:8px 12px;font-size:10px}
  .wm small{display:none}
  body.contact .stage{background:var(--sys-light-bg)}
  .giant{top:calc(var(--comp-nav-h) + 8vh);font-size:34vw}
  #heat{height:34vh}
  .copy{left:var(--sys-gutter) !important;right:var(--sys-gutter) !important;width:auto !important}
  #c0{bottom:40px;top:auto;padding:24px 16px 16px;margin:0 -16px;background:linear-gradient(180deg,transparent,rgba(13,13,15,.86) 22%)}
  #c0 .body{font-size:14px;margin-top:12px}
  .marquee{bottom:20px;height:32px}.marquee .track{font-size:16px}
  #c1{top:auto;bottom:16px;padding:20px 16px 12px;background:linear-gradient(180deg,rgba(13,13,15,.0),rgba(13,13,15,.82) 18%,rgba(13,13,15,.92));margin:0 -16px}
  #c1 .h2{font-size:24px}#c1 .lead{display:none}
  .svc li{grid-template-columns:32px 1fr;padding:10px 0;gap:8px}.svc p{display:none}.svc h3{font-size:10px}.svc strong{font-size:15px}
  #c2{bottom:16px;padding:20px 16px 12px;margin:0 -16px;background:linear-gradient(180deg,transparent,rgba(13,13,15,.86) 20%)}
  .count{font-size:32px}.work h3{font-size:18px}.work .body{display:none}
  #c3{top:var(--comp-nav-h);padding:12px 16px 32px;margin:0 -16px;background:linear-gradient(180deg,rgba(13,13,15,.9) 70%,transparent)}
  #c3 .h2{font-size:24px}#c3 .body{font-size:13px;margin-top:8px;line-height:1.7}
  #c3r{top:auto;bottom:16px;padding:12px;margin:0 -8px;background:rgba(13,13,15,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .logos{grid-template-columns:repeat(4,1fr)}
  .logos li{height:48px;padding:0 6px}.logos li i{height:16px;max-width:100%}.logos li small{display:none}.logos li.next{font-size:8px;text-align:center}
  #c4{top:calc(var(--comp-nav-h) + 20px)}
  #c4 .body{font-size:14px;margin-top:12px}
  .contact li{font-size:14px;padding:12px 0}
  .foot{font-size:9px;bottom:calc(var(--comp-hud-inset) + 12px)}
  .foot span:nth-child(3){display:none}
}

/* ?static: document flow, no motion */
body.static{overflow:auto;height:auto}
body.static .stage,body.static .ring,body.static .hud,body.static .index,body.static .loading,body.static .fader,body.static .bg{display:none}
body.static .copy{position:absolute;--rv:1;visibility:visible;pointer-events:auto}
body.static .w{--t:1;--t2:1}
.st-sec{position:relative;height:100vh;min-height:720px;overflow:hidden;border-bottom:1px solid var(--sys-line);background:radial-gradient(60% 50% at 50% 100%,rgba(255,74,28,.2),transparent) var(--sys-bg)}
.st-sec img.still{position:absolute;left:50%;bottom:0;height:100%;transform:translateX(-50%)}
.st-sec.light{background:var(--sys-light-bg)}
.st-cards{position:absolute;left:50%;top:96px;transform:translateX(-50%);display:flex;gap:24px}
.st-cards a{width:280px;padding:12px;border:1px solid rgba(255,140,90,.5);background:rgba(28,28,33,.55);backdrop-filter:blur(12px);border-radius:16px}
.st-cards img{width:100%;border-radius:10px;display:block}
.st-cards b{display:block;font-family:var(--ref-font-display);font-weight:400;font-size:14px;margin-top:10px}
.st-cards span{font-size:12px;color:var(--sys-ink-dim)}
@media (prefers-reduced-motion:reduce){.marquee .track,.hint b{animation:none}}