:root{--bg:#0a0a09;--bg2:#121110;--line:rgba(239,233,223,.1);--fg:#efe9df;--mut:#8d867c;--acc:#ff5b3a;--sand:#d9c3a0;
--disp:"Helvetica Neue","Arial Narrow",-apple-system,"PingFang SC","Noto Sans SC",sans-serif;--mono:ui-monospace,"SF Mono",Menlo,monospace;--ease:cubic-bezier(.2,.7,0,1)}
*{box-sizing:border-box;margin:0}
html{background:var(--bg)}
body{color:var(--fg);font:15px/1.7 -apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--acc);color:#000}
.grain{pointer-events:none;position:fixed;inset:-50%;z-index:100;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:gr 1s steps(4) infinite}
@keyframes gr{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-1%,3%)}}
/* bar */
.bar{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:28px;padding:18px clamp(18px,3.4vw,48px);mix-blend-mode:difference;color:#fff}
.mark{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.22em}.mark span{letter-spacing:.1em;opacity:.6}
.rec{width:8px;height:8px;border-radius:50%;background:var(--acc);animation:rec 1.4s infinite}@keyframes rec{50%{opacity:.2}}
.links{margin-left:auto;display:flex;gap:26px;font-size:13px;letter-spacing:.08em}.links a{opacity:.75;transition:.3s}.links a:hover,.links a.on{opacity:1}
.tc{font:11px var(--mono);letter-spacing:.14em;opacity:.7;min-width:96px;text-align:right}
/* hero */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;display:flex;align-items:flex-end}
.hero video,.hero .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,9,.6) 0%,rgba(10,10,9,.35) 30%,rgba(10,10,9,.72) 62%,var(--bg) 100%),radial-gradient(ellipse at 20% 80%,rgba(10,10,9,.6),transparent 60%)}
.hero .in{position:relative;z-index:2;width:100%;padding:0 clamp(18px,3.4vw,48px) clamp(28px,6vh,64px)}
.kicker{font:12px var(--mono);letter-spacing:.2em;color:var(--sand);display:flex;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.kicker b{color:var(--acc);font-weight:400}
.mega{font-family:var(--disp);font-weight:800;font-size:clamp(56px,13.5vw,220px);line-height:.86;letter-spacing:-.045em;text-transform:uppercase}
.mega .o{-webkit-text-stroke:1.5px var(--fg);color:transparent}
.hero .sub{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:28px;flex-wrap:wrap}
.hero .sub p{max-width:520px;font-size:clamp(15px,1.4vw,18px);color:#d6cfc4}
.hero .sub p em{font-style:normal;color:var(--fg);border-bottom:1px solid var(--acc)}
.cta{display:inline-flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.1em;padding:14px 22px;border:1px solid rgba(239,233,223,.35);border-radius:99px;transition:.4s var(--ease);backdrop-filter:blur(8px)}
.cta:hover{background:var(--fg);color:var(--bg)}
.cta i{width:7px;height:7px;background:var(--acc);border-radius:50%}
/* sections */
.wrap{padding:0 clamp(18px,3.4vw,48px)}
.sec{padding:clamp(80px,12vw,160px) 0 0}
.label{display:flex;align-items:baseline;gap:16px;font:12px var(--mono);letter-spacing:.18em;color:var(--mut);border-top:1px solid var(--line);padding-top:16px;margin-bottom:clamp(28px,4vw,56px)}
.label b{color:var(--acc);font-weight:400}.label span:last-child{margin-left:auto}
.h2{font-family:var(--disp);font-weight:700;font-size:clamp(34px,5.6vw,84px);line-height:1;letter-spacing:-.03em;max-width:15em}
.h2 em{font-style:normal;color:var(--sand)}
/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:clamp(40px,6vw,80px)}
.stat{padding:22px 22px 0 0;border-left:1px solid var(--line);padding-left:22px}.stat:first-child{border:0;padding-left:0}
.stat b{display:block;font-family:var(--disp);font-size:clamp(40px,5.4vw,80px);font-weight:700;letter-spacing:-.04em;line-height:1}
.stat b sup{font-size:.36em;color:var(--acc);vertical-align:top;margin-left:4px;letter-spacing:0}
.stat span{display:block;margin-top:12px;font-size:13px;color:var(--mut);line-height:1.6}
/* reel cards */
.reel{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.4vw,20px)}
.card{position:relative;grid-column:span 3;cursor:pointer;display:block}
.card.big{grid-column:span 6}
.shot{position:relative;overflow:hidden;background:#000;aspect-ratio:9/16;border-radius:4px}
.card.big .shot{aspect-ratio:16/10}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s;filter:saturate(.9) brightness(.92)}
.shot.hz img.fit{object-fit:contain}
.shot .bgb{filter:blur(24px) brightness(.5);transform:scale(1.2)}
.card:hover .shot img:not(.bgb){transform:scale(1.04);filter:none}
.shot:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.65))}
.pl{position:absolute;z-index:2;left:14px;bottom:14px;display:flex;align-items:center;gap:10px;font:11px var(--mono);letter-spacing:.12em}
.pl i{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.5);display:grid;place-items:center;transition:.4s var(--ease)}
.pl i:after{content:"";border-left:9px solid #fff;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;margin-left:2px}
.card:hover .pl i{background:var(--acc);border-color:var(--acc);transform:scale(1.1)}
.meta{display:flex;justify-content:space-between;gap:10px;padding:12px 2px 0}
.meta h3{font-size:14.5px;font-weight:600;line-height:1.45}
.meta small{font:11px var(--mono);color:var(--mut);white-space:nowrap;padding-top:3px}
.tg{font-size:12px;color:var(--mut);margin-top:2px}
.tg b{color:var(--sand);font-weight:400}
/* chapters */
.chap{display:grid;grid-template-columns:80px 1fr auto;align-items:center;gap:24px;padding:clamp(22px,3vw,40px) 0;border-top:1px solid var(--line);position:relative;transition:padding .5s var(--ease)}
.chap:last-child{border-bottom:1px solid var(--line)}
.chap .no{font:12px var(--mono);color:var(--mut)}
.chap h3{font-family:var(--disp);font-size:clamp(30px,5vw,72px);font-weight:700;letter-spacing:-.03em;line-height:1;transition:color .4s,transform .6s var(--ease)}
.chap p{color:var(--mut);font-size:13.5px;margin-top:10px;max-width:620px}
.chap .rt{text-align:right;font:12px var(--mono);color:var(--mut);letter-spacing:.08em}
.chap .rt b{display:block;font-size:clamp(26px,3vw,40px);color:var(--fg);font-family:var(--disp);letter-spacing:-.02em}
.chap .peek{position:absolute;right:18%;top:50%;width:150px;aspect-ratio:9/16;transform:translateY(-50%) rotate(4deg) scale(.8);opacity:0;transition:.6s var(--ease);pointer-events:none;border-radius:4px;overflow:hidden;z-index:3}
.chap .peek img{width:100%;height:100%;object-fit:cover}
.chap:hover h3{color:var(--acc);transform:translateX(12px)}.chap:hover .peek{opacity:1;transform:translateY(-50%) rotate(-3deg) scale(1)}
/* company page */
.cohead{padding:clamp(120px,18vh,200px) 0 0}
.cohead .mega{font-size:clamp(48px,10vw,160px)}
.cohead .lead{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,5vw,80px);margin-top:36px;align-items:end}
.cohead .lead p{color:#cfc7bb;font-size:clamp(15px,1.3vw,17px)}
.facts{display:flex;gap:clamp(20px,3vw,48px);flex-wrap:wrap}
.facts div b{display:block;font-family:var(--disp);font-size:clamp(28px,3.4vw,48px);letter-spacing:-.03em;line-height:1.05}
.facts div span{font-size:12px;color:var(--mut)}
.filters{position:sticky;top:58px;z-index:20;display:flex;gap:8px;flex-wrap:wrap;padding:14px 0;margin:56px 0 28px;background:linear-gradient(var(--bg) 70%,transparent)}
.chip{font-size:13px;padding:8px 16px;border:1px solid var(--line);border-radius:99px;color:var(--mut);transition:.3s}
.chip sup{font:10px var(--mono);margin-left:4px}
.chip:hover{color:var(--fg);border-color:rgba(239,233,223,.3)}.chip.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:clamp(12px,1.6vw,24px) clamp(10px,1.4vw,20px)}
.grid .card{grid-column:auto}
.cotabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-top:28px}
.cotabs a{font-size:12px;letter-spacing:.06em;padding:7px 14px;border:1px solid var(--line);border-radius:99px;color:var(--mut);white-space:nowrap}
.cotabs a.on{border-color:var(--acc);color:var(--acc)}
/* ai */
.pipe{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);counter-reset:s}
.pipe>div{padding:26px 22px 30px 0;border-right:1px solid var(--line);position:relative}
.pipe>div:not(:first-child){padding-left:22px}.pipe>div:last-child{border:0}
.pipe>div:before{counter-increment:s;content:"0" counter(s);font:12px var(--mono);color:var(--acc)}
.pipe h4{font-size:20px;margin:14px 0 8px;letter-spacing:-.01em}
.pipe p{font-size:13.5px;color:var(--mut)}
.pipe .bot{display:inline-block;margin-top:14px;font:11px var(--mono);color:var(--sand);border:1px solid rgba(217,195,160,.3);padding:3px 9px;border-radius:99px}
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:56px}
.case{background:var(--bg);padding:clamp(22px,3vw,40px)}
.case .k{font:11px var(--mono);letter-spacing:.16em;color:var(--acc)}
.case h4{font-size:clamp(20px,2vw,26px);margin:10px 0 10px;letter-spacing:-.01em}
.case p{color:#bdb5a9;font-size:14px}
.case ul{margin:14px 0 0;padding:0;list-style:none;font-size:13px;color:var(--mut)}
.case li{padding:6px 0;border-top:1px dashed var(--line)}
.case li:before{content:"→ ";color:var(--sand)}
.big-num{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;font-family:var(--disp);font-weight:700;letter-spacing:-.04em;font-size:clamp(64px,12vw,190px);line-height:.95}
.big-num s{color:var(--mut);text-decoration-thickness:4px;text-decoration-color:var(--acc)}
.big-num small{font-size:.22em;letter-spacing:0;color:var(--mut);font-weight:400}
.shots{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:12px;margin-top:40px}
.shots img{width:100%;height:100%;object-fit:cover;border-radius:4px;border:1px solid var(--line)}
/* about */
.tl{border-top:1px solid var(--line)}
.tl>div{display:grid;grid-template-columns:200px 1fr 1.4fr;gap:24px;padding:28px 0;border-bottom:1px solid var(--line)}
.tl .t{font:12px var(--mono);color:var(--mut);letter-spacing:.06em}
.tl h4{font-size:22px;letter-spacing:-.01em}.tl h4 small{display:block;font-size:12px;color:var(--sand);font-weight:400;margin-top:4px;letter-spacing:.04em}
.tl p{font-size:14px;color:#bdb5a9}
.tl p b{color:var(--fg);font-weight:600}
.skills{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.skills span{padding:10px 18px;border:1px solid var(--line);border-radius:99px;font-size:14px}
.foot{margin-top:clamp(100px,14vw,180px);padding:clamp(40px,6vw,80px) clamp(18px,3.4vw,48px) 36px;border-top:1px solid var(--line)}
.foot .mega{font-size:clamp(44px,9vw,140px)}
.foot .row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:40px;font-size:13px;color:var(--mut)}
.foot a.mail{color:var(--fg);border-bottom:1px solid var(--acc)}
/* player */
.player{position:fixed;inset:0;z-index:80;background:rgba(6,6,5,.94);backdrop-filter:blur(16px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px 30px;animation:fi .4s var(--ease)}
.player[hidden]{display:none}@keyframes fi{from{opacity:0}}
.player .stage{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.player video{max-width:100%;max-height:100%;border-radius:4px;background:#000;box-shadow:0 30px 120px rgba(0,0,0,.6)}
.player .cap{margin-top:16px;text-align:center;font-size:15px}.player .cap small{display:block;font:11px var(--mono);color:var(--mut);letter-spacing:.1em;margin-top:4px}
.player .x{position:absolute;top:14px;right:18px;font-size:34px;line-height:1;opacity:.7}.player .x:hover{opacity:1;color:var(--acc)}
/* reveal + transitions */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}.rv.in{opacity:1;transform:none}
#app{animation:pg .7s var(--ease)}@keyframes pg{from{opacity:0;transform:translateY(12px)}}
.split span{display:inline-block;transform:translateY(105%);animation:up 1.1s var(--ease) forwards}.split{overflow:hidden;display:block}
@keyframes up{to{transform:none}}
.marq{overflow:hidden;white-space:nowrap;border-block:1px solid var(--line);padding:18px 0;margin-top:clamp(60px,8vw,110px);font-family:var(--disp);font-size:clamp(20px,2.4vw,32px);letter-spacing:-.01em;color:var(--mut)}
.marq div{display:inline-block;animation:mq 40s linear infinite}.marq b{color:var(--fg);font-weight:600}.marq i{color:var(--acc);font-style:normal;margin:0 28px}
@keyframes mq{to{transform:translateX(-50%)}}
@media(max-width:900px){.reel .card{grid-column:span 6}.reel .card.big{grid-column:span 12}.stats{grid-template-columns:1fr 1fr}.stat:nth-child(3){border:0;padding-left:0}.stat{padding-bottom:22px}
.pipe{grid-template-columns:1fr 1fr}.pipe>div:nth-child(2){border:0}.pipe>div:nth-child(3){padding-left:0}.cases{grid-template-columns:1fr}.cohead .lead{grid-template-columns:1fr}
.tl>div{grid-template-columns:1fr;gap:8px}.chap{grid-template-columns:44px 1fr}.chap .rt{grid-column:2;text-align:left}.chap .peek{display:none}.shots{grid-template-columns:1fr}.tc{display:none}}
@media(max-width:560px){.links{gap:16px;font-size:12px}.mark span{display:none}.grid{grid-template-columns:1fr 1fr;gap:16px 10px}.meta{flex-direction:column;gap:2px}.meta h3{font-size:13px}.pipe{grid-template-columns:1fr}.pipe>div{border-right:0!important;padding-left:0!important;border-bottom:1px solid var(--line)}.filters{top:52px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}
.case:last-child:nth-child(odd){grid-column:1/-1}