*{box-sizing:border-box}
:root{--ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.16,1,.3,1);--acc:#B8552A;--acc-soft:rgba(184,85,42,.10);--acc-line:rgba(184,85,42,.35)}
body{margin:0;background:#F8F7F4;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums slashed-zero}
a{color:inherit;text-decoration:none;transition:opacity 200ms var(--ease)}
a:hover{opacity:.75}
button{cursor:pointer}
figure{margin:0}
.lang-zh .body-text{line-height:1.75}
.lang-en .body-text{line-height:1.6}
.lang-zh .lead-text{line-height:1.75}
.lang-en .lead-text{line-height:1.6}
.btn-primary{position:relative;overflow:hidden;transition:opacity 200ms var(--ease),transform 300ms var(--spring)}
.btn-primary:hover{opacity:.92;transform:translateY(-1px)}
.btn-primary::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:btnShine 4.8s var(--ease) infinite}
@keyframes btnShine{0%,62%{left:-60%}88%,100%{left:130%}}
.btn-secondary{transition:background-color 200ms var(--ease),transform 300ms var(--spring)}
.btn-secondary:hover{background:#F2EFE8;transform:translateY(-1px)}
.btn-ghost{transition:background-color 200ms var(--ease)}
.btn-ghost:hover{background:#F2EFE8}

/* nav */
.prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--acc);transform-origin:0 50%;transform:scaleX(0)}
@supports (animation-timeline: scroll()){.prog{animation:progGrow linear both;animation-timeline:scroll(root)}}
@keyframes progGrow{to{transform:scaleX(1)}}
.nl{background-image:linear-gradient(var(--acc),var(--acc));background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;padding-bottom:3px;transition:background-size 320ms var(--ease)}
.nl:hover{background-size:100% 1px;opacity:1}

/* scroll reveal */
.rv .ri{opacity:0;transform:translateY(28px);transition:opacity 800ms var(--ease),transform 1000ms var(--spring)}
.rv .ri-l{opacity:0;transform:translateX(-40px);transition:opacity 800ms var(--ease),transform 1100ms var(--spring)}
.rv .ri-r{opacity:0;transform:translateX(40px);transition:opacity 800ms var(--ease),transform 1100ms var(--spring)}
.rv.in .ri,.rv.in .ri-l,.rv.in .ri-r{opacity:1;transform:none}

/* hero */
.hero-wrap{position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-image:radial-gradient(rgba(27,26,23,.11) 1px,transparent 1.3px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 72% 45%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse 60% 70% at 72% 45%,#000 15%,transparent 72%);animation:drift 50s linear infinite;pointer-events:none}
@keyframes drift{to{background-position:220px 110px}}
.hw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.lang-en .hw{margin-right:.24em}
.hw-i{display:inline-block;transform:translateY(110%);transition:transform 1100ms var(--spring)}
.rv.in .hw-i{transform:none}
.hero-stage{position:relative;perspective:1800px;--px:0;--py:0}
.hero-in{transition:opacity 1000ms var(--ease),transform 1500ms var(--spring)}
.rv .hero-in{opacity:0;transform:rotateX(22deg) rotateY(-14deg) translateY(70px) scale(.92)}
.rv.in .hero-in{opacity:1;transform:none}
.hero-tilt{transform-style:preserve-3d;transform:rotateY(calc(var(--px) * 7deg - 5deg)) rotateX(calc(4deg - var(--py) * 6deg));transition:transform 600ms var(--ease)}
.float{position:absolute;z-index:3;transition:transform 600ms var(--ease)}
.fl-a{animation:bob 6s ease-in-out infinite}
.fl-b{animation:bob 7s ease-in-out -2s infinite}
.fl-c{animation:bob 5.5s ease-in-out -4s infinite}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
.rv .fl-in{opacity:0;transform:translateY(24px) scale(.9);transition:opacity 700ms var(--ease),transform 1000ms var(--spring)}
.rv.in .fl-in{opacity:1;transform:none}
.pcard{position:relative;width:236px;height:148px;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#1B1A17 0%,#4A4A40 100%);color:#FFFFFF;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 60px -30px rgba(20,21,15,.55)}
.pcard::before{content:'';position:absolute;inset:0;opacity:.07;background-image:repeating-linear-gradient(45deg,#FFFFFF 0,#FFFFFF 1px,transparent 0,transparent 50%);background-size:8px 8px}
.pcard::after{content:'';position:absolute;top:0;bottom:0;left:-80%;width:50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-18deg);animation:cardShine 5s var(--ease) infinite}
@keyframes cardShine{0%,55%{left:-80%}85%,100%{left:140%}}
.chipgold{width:26px;height:20px;border-radius:4px;background:#D4A843;border:1px solid #B8912E}
.bubble{background:#FFFFFF;border:1px solid #E8E4DC;border-radius:12px;padding:12px 14px;box-shadow:0 24px 48px -28px rgba(20,21,15,.28);width:270px}
.typing{display:inline-block;white-space:nowrap;overflow:hidden;vertical-align:bottom;max-width:0;animation:typeIn 9s steps(40,end) infinite}
@keyframes typeIn{0%,6%{max-width:0}40%,88%{max-width:260px}96%,100%{max-width:0}}
.caret{display:inline-block;width:1.5px;height:13px;background:#1B1A17;margin-left:2px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.livedot{position:relative;display:inline-block;width:7px;height:7px;border-radius:50%;background:#0E6839}
.livedot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid #0E6839;animation:ping 1.8s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.6);opacity:0}}

/* cards in marketing sections */
.spot{position:relative;overflow:hidden;transition:translate 400ms var(--spring),border-color 300ms var(--ease)}
.spot>*{position:relative;z-index:1}
.spot::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(184,85,42,.10),transparent 65%);opacity:0;transition:opacity 300ms var(--ease)}
.spot:hover{translate:0 -4px;border-color:var(--acc-line)}
.spot:hover::after{opacity:1}
.spot svg{transition:transform 500ms var(--spring)}
.spot:hover svg{transform:scale(1.12) rotate(-4deg)}
.pl{position:relative;padding:20px 0 0}
.pl::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:#1B1A17;transform:scaleX(0);transform-origin:0 50%;transition:transform 1100ms var(--spring)}
.rv.in .pl::before{transform:scaleX(1)}
.bigidx{font-family:'Newsreader',serif;font-weight:300;font-size:14px;color:#6B665C;margin-bottom:10px}

/* product shot frame */
.shot{position:relative;width:100%;border:1px solid #E8E4DC;border-radius:12px;background:#F8F7F4;overflow:hidden;--s:.56;box-shadow:0 40px 80px -48px rgba(20,21,15,.35)}
.r43{aspect-ratio:4/3}
.r1610{aspect-ratio:16/10}
.shot::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.6) 50%,transparent 62%);transform:translateX(-120%)}
.rv.in .shot::after{animation:sheen 1.8s .6s var(--ease) both}
@keyframes sheen{to{transform:translateX(120%)}}
.shot-in{transition:opacity 900ms var(--ease),transform 1300ms var(--spring)}
.rv .shot-in{opacity:0;transform:perspective(1600px) rotateX(16deg) translateY(56px) scale(.95)}
.rv.in .shot-in{opacity:1;transform:none}
.shot-hover{transition:translate 500ms var(--spring)}
.shot-hover:hover{translate:0 -6px}
.cv{position:absolute;left:0;top:0;transform:scale(var(--s));transform-origin:0 0;background:#F8F7F4;color:#1B1A17;overflow:hidden;font-family:'Inter','PingFang SC','Hiragino Sans GB',system-ui,sans-serif;font-size:13px;line-height:1.5;text-align:left}
.bbar{height:30px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#EDEAE2;border-bottom:1px solid #E8E4DC}
.bd{width:9px;height:9px;border-radius:50%;background:#CBC6BC}
.burl{margin:0 auto;display:flex;align-items:center;gap:6px;height:18px;padding:0 12px;border-radius:6px;background:#F8F7F4;font-size:10px;color:#6B665C}
.app{display:flex;height:calc(100% - 30px)}
.side{width:220px;flex-shrink:0;background:#EDEAE2;border-right:1px solid #E8E4DC;display:flex;flex-direction:column;padding-bottom:12px}
.rail{width:48px;flex-shrink:0;background:#EDEAE2;border-right:1px solid #E8E4DC;display:flex;flex-direction:column;align-items:center;padding-top:12px;gap:6px}
.rli{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;color:rgba(27,26,23,.7)}
.rli.on{background:rgba(27,26,23,.08);color:#1B1A17}
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ico-s{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.logo24{width:24px;height:24px;border-radius:6px;background:#1B1A17;display:grid;place-items:center;flex-shrink:0}
.nvi{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:rgba(27,26,23,.7);font-size:14px;font-weight:500;margin-bottom:6px}
.nvi.on{background:rgba(27,26,23,.08);color:#1B1A17}
.nvi .lbl{flex:1;white-space:nowrap}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.hdr{height:44px;flex-shrink:0;display:flex;align-items:center;gap:16px;padding:0 16px;background:#FFFFFF;border-bottom:1px solid #E8E4DC}
.crumb{display:flex;align-items:center;gap:6px;min-width:140px;font-size:13px;white-space:nowrap}
.srch{flex:1;max-width:420px;margin:0 auto;height:28px;display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid #E8E4DC;border-radius:8px;background:#F8F7F4;color:#6B665C;font-size:12px}
.avatar{width:26px;height:26px;border-radius:50%;background:#1B1A17;color:#FFFFFF;display:grid;place-items:center;font-size:10px;font-weight:600}
.body{flex:1;min-height:0;overflow:hidden;padding:20px}
.agent{width:44px;flex-shrink:0;border-left:1px solid #E8E4DC;background:#FFFFFF;display:flex;flex-direction:column;align-items:center;padding-top:12px;gap:12px}
.agent-v{writing-mode:vertical-rl;font-size:10px;font-weight:500;color:#6B665C;letter-spacing:.15em}
.mc{border:1px solid #E8E4DC;border-radius:12px;background:#FFFFFF;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.caps{font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:#6B665C}
.mchip{display:inline-flex;align-items:center;gap:5px;border:1px solid;border-radius:4px;padding:1px 6px;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;text-transform:uppercase;white-space:nowrap}
.mbtn{display:inline-flex;align-items:center;gap:6px;border-radius:8px;padding:6px 12px;font-size:13px;font-weight:600;white-space:nowrap;color:#1B1A17}
.mbtn.sec{border:1px solid #E8E4DC;background:#FFFFFF;font-weight:500}
.mbtn.pri{background:#1B1A17;color:#FFFFFF}
.seg{display:flex;overflow:hidden;border-radius:6px;border:1px solid #E8E4DC;background:#F2EFE8}
.seg span{padding:2px 8px;font-size:11px;font-weight:600;color:#6B665C}
.seg span.on{background:#1B1A17;color:#FFFFFF}
.sel{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid #E8E4DC;border-radius:8px;background:#FFFFFF;font-size:13px;white-space:nowrap}
.sel .k{color:#6B665C}
.inp{display:flex;align-items:center;gap:8px;height:30px;padding:0 10px;border:1px solid #E8E4DC;border-radius:8px;background:#FFFFFF;color:rgba(107,102,92,.6);font-size:13px}

/* group card (dashboard) */
.gc{position:relative;padding:18px 20px;display:flex;flex-direction:column}
.gc-h{font-size:14px;font-weight:600;color:#6B665C;margin-bottom:10px;padding-left:14px}
.gc-pin{position:absolute;right:12px;top:18px;color:rgba(107,102,92,.45)}
.gc-pin.on{color:#1B1A17}
.gc-grip{position:absolute;left:10px;top:21px;color:rgba(107,102,92,.35)}
.gc-k{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-right:22px;margin-bottom:12px}
.gc-v{font-weight:700;font-size:26px;line-height:1.15;letter-spacing:-.02em;color:#1B1A17}
.gc-s{margin-top:4px;font-size:12px;color:#6B665C}
.tabs{display:flex;border-top:1px solid rgba(232,228,220,.6);border-bottom:1px solid rgba(232,228,220,.4)}
.tab{position:relative;padding:9px 12px;font-size:12px;font-weight:600;color:#6B665C;white-space:nowrap;transition:color 300ms var(--ease)}
.tab::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:#1B1A17;transform:scaleX(0);transition:transform 450ms var(--spring)}
.tab.on{color:#1B1A17}
.tab.on::after{transform:scaleX(1)}
.dn{display:flex;align-items:center;gap:14px;padding:12px 0 4px}
.dn svg circle{transition:stroke-dasharray 900ms var(--spring),stroke-dashoffset 900ms var(--spring),stroke 600ms var(--ease)}
.lg{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.lgr{display:flex;align-items:center;gap:6px;font-size:12px}
.lgr .d{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.lgr .n{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#6B665C}
.lgr .v{font-weight:500;color:#1B1A17}
.lgr .p{width:34px;text-align:right;font-size:11px;color:#6B665C}
.pa{animation-name:fadeA}
.pb{animation-name:fadeB}
.lg.pa,.lg.pb{animation-duration:600ms;animation-timing-function:var(--ease);animation-fill-mode:both}
@keyframes fadeA{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes fadeB{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.spk .ln{stroke-dasharray:420;stroke-dashoffset:420}
.rv.in .spk .ln{animation:draw 1400ms .4s var(--ease) forwards}
.spk .ar{opacity:0;transition:opacity 900ms 1s var(--ease)}
.rv.in .spk .ar{opacity:1}
@keyframes draw{to{stroke-dashoffset:0}}
.eq .ln{stroke-dasharray:900;stroke-dashoffset:900}
.rv.in .eq .ln{animation:draw 1800ms .5s var(--ease) forwards}
.eq .ar{opacity:0;transition:opacity 900ms 1.2s var(--ease)}
.rv.in .eq .ar{opacity:1}
.hb{display:flex;align-items:center;gap:8px;font-size:11px;color:#7A7570;margin-bottom:10px}
.hb .nm{width:72px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb .tr{flex:1;height:14px}
.hb .bar{height:14px;border-radius:0 3px 3px 0;transition:width 1200ms var(--spring)}
.hb .vl{width:92px;flex-shrink:0;font-size:10px;color:#7A7570}
.pinned{border-radius:12px;background:rgba(242,239,232,.7);padding:10px;margin-bottom:12px}
.cur{position:absolute;right:4px;top:26px;z-index:6;width:20px;height:20px;animation:curMove 6.5s var(--ease) infinite;pointer-events:none}
@keyframes curMove{0%{transform:translate(-260px,170px);opacity:0}10%{opacity:1}42%,52%{transform:translate(0,0)}47%{transform:translate(0,0) scale(.8)}82%{transform:translate(-90px,110px);opacity:1}100%{transform:translate(-90px,110px);opacity:0}}
.ring{position:absolute;right:6px;top:18px;width:26px;height:26px;border-radius:50%;border:2px solid #1B1A17;opacity:0;z-index:5;animation:ringP 6.5s var(--ease) infinite;pointer-events:none}
@keyframes ringP{0%,45%{transform:scale(.2);opacity:0}48%{opacity:.6}62%,100%{transform:scale(1.8);opacity:0}}
.pin-anim{animation:pinOn 6.5s steps(1) infinite}
@keyframes pinOn{0%,46%{color:rgba(107,102,92,.45)}47%,100%{color:#1B1A17}}

/* treasury */
.sum{border:1px solid #E8E4DC;border-radius:12px;background:#FFFFFF;padding:14px 16px}
.cat{display:flex;flex-direction:column;gap:10px;padding:2px 12px}
.ccyl{display:flex;align-items:center;gap:8px;font-size:12px;white-space:nowrap}
.fct{display:flex;align-items:baseline;gap:12px}
.fo{border-bottom:1px solid transparent;padding-bottom:2px;font-size:12px;color:#6B665C;transition:color 300ms var(--ease),border-color 300ms var(--ease)}
.fo.on{border-color:#1B1A17;font-weight:600;color:#1B1A17}
.th5{display:grid;grid-template-columns:2fr 1.4fr 1fr 96px 130px;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid #1B1A17;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.13em;white-space:nowrap}
.trw{display:grid;grid-template-columns:2fr 1.4fr 1fr 96px 130px;align-items:center;gap:12px;padding:0 16px;max-height:66px;height:66px;border-bottom:1px solid #E8E4DC;overflow:hidden;transition:max-height 700ms var(--spring),opacity 500ms var(--ease),padding 700ms var(--spring);position:relative}
.trw.hide{max-height:0;opacity:0;border-bottom-color:transparent}
.bav{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;font-size:11px;font-weight:700;color:#FFFFFF;flex-shrink:0}
.ecode{display:inline-grid;place-items:center;min-width:24px;height:18px;padding:0 4px;border-radius:4px;border:1px solid #E8E4DC;font-family:'IBM Plex Mono',monospace;font-size:10px;color:#6B665C}
.flash.pa{animation:flashA 1.6s var(--ease)}
.flash.pb{animation:flashB 1.6s var(--ease)}
@keyframes flashA{0%{background:rgba(14,104,57,0)}20%{background:rgba(14,104,57,.07)}100%{background:rgba(14,104,57,0)}}
@keyframes flashB{0%{background:rgba(14,104,57,0)}20%{background:rgba(14,104,57,.07)}100%{background:rgba(14,104,57,0)}}
.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* cards */
.ctile{border:1px solid #E8E4DC;border-radius:12px;background:#FFFFFF;padding:12px;display:flex;flex-direction:column;gap:10px}
.ctile.frz{border-color:rgba(154,80,0,.3);background:rgba(154,80,0,.02)}
.ctile.dim{opacity:.7}
.ubar{height:4px;border-radius:9px;background:rgba(27,26,23,.07);overflow:hidden}
.ubar div{height:100%;border-radius:9px;transition:width 1000ms var(--spring)}
.cbtn{flex:1;height:28px;border-radius:8px;border:1px solid;display:grid;place-items:center;font-size:12px;font-weight:600}
.toast{position:absolute;left:50%;bottom:20px;z-index:4;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;background:#1B1A17;color:#FFFFFF;font-size:14px;font-weight:500;white-space:nowrap;box-shadow:0 24px 48px -28px rgba(20,21,15,.5);opacity:0;transform:translate(-50%,16px)}
.toast.pa{animation:toastA 2.5s var(--ease) both}
.toast.pb{animation:toastB 2.5s var(--ease) both}
@keyframes toastA{0%{opacity:0;transform:translate(-50%,16px)}14%,78%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,8px)}}
@keyframes toastB{0%{opacity:0;transform:translate(-50%,16px)}14%,78%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,8px)}}
.bump.pa{animation:bumpA 700ms var(--spring)}
.bump.pb{animation:bumpB 700ms var(--spring)}
@keyframes bumpA{30%{transform:scale(1.06);color:#0E6839}}
@keyframes bumpB{30%{transform:scale(1.06);color:#0E6839}}
.float-card{position:absolute;right:-22px;bottom:-26px;z-index:4;transform:rotate(-9deg);animation:bob 6s ease-in-out infinite}
.card3d{perspective:900px}
.card3d .pcard{animation:turn 9s ease-in-out infinite}
@keyframes turn{0%,100%{transform:rotateY(-14deg) rotateX(6deg)}50%{transform:rotateY(14deg) rotateX(-4deg)}}

/* ledger */
.lt{width:100%;border-collapse:collapse;font-size:12px}
.lt th{padding:9px 10px;text-align:left;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;border-bottom:1px solid #1B1A17;white-space:nowrap}
.lt td{padding:0 10px;height:40px;border-bottom:1px solid #E8E4DC;white-space:nowrap}
.lt .r{text-align:right}
.lrow.new.pa{animation:newA 900ms var(--spring)}
.lrow.new.pb{animation:newB 900ms var(--spring)}
@keyframes newA{0%{transform:translateY(-40px);opacity:0;background:rgba(27,26,23,.06)}60%{opacity:1;background:rgba(27,26,23,.06)}100%{transform:none;background:rgba(27,26,23,0)}}
@keyframes newB{0%{transform:translateY(-40px);opacity:0;background:rgba(27,26,23,.06)}60%{opacity:1;background:rgba(27,26,23,.06)}100%{transform:none;background:rgba(27,26,23,0)}}
.lrow.push.pa{animation:pushA 700ms var(--spring)}
.lrow.push.pb{animation:pushB 700ms var(--spring)}
@keyframes pushA{from{transform:translateY(-40px)}to{transform:none}}
@keyframes pushB{from{transform:translateY(-40px)}to{transform:none}}
.shim{background:linear-gradient(90deg,#6B665C 0%,#1B1A17 45%,#6B665C 90%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shim 1.6s linear infinite}
@keyframes shim{to{background-position:-200% 0}}
.lfoot{display:grid;grid-template-columns:1fr auto auto auto;gap:16px;align-items:center;padding:10px 16px;border-top:1px solid #E8E4DC;background:#F2EFE8;font-size:13px}

/* roles */
.rl{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:8px;border-left:2px solid transparent;transition:background-color 400ms var(--ease),border-color 400ms var(--ease)}
.rl.on{background:rgba(27,26,23,.07);border-left-color:rgba(27,26,23,.5)}
.tg{position:relative;width:36px;height:20px;border-radius:999px;background:#E8E4DC;flex-shrink:0;transition:background-color 400ms var(--ease)}
.tg.on{background:#0E6839}
.tg.mid{background:rgba(154,80,0,.7)}
.kn{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#FFFFFF;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left 500ms var(--spring)}
.tg.on .kn{left:18px}
.tg.mid .kn{left:10px}
.prow{display:flex;align-items:center;gap:12px;padding:0 16px;height:48px;border-top:1px solid rgba(232,228,220,.5)}
.cnt{flex-shrink:0;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px}

/* agentx hub */
.hub .orbit{transform-box:fill-box;transform-origin:center;animation:rot 40s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.hub .core{transform-box:fill-box;transform-origin:center;animation:core 3s var(--ease) infinite}
@keyframes core{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.hub .halo{transform-box:fill-box;transform-origin:center;animation:halo 3s var(--ease) infinite}
@keyframes halo{0%{transform:scale(1);opacity:.35}100%{transform:scale(2.2);opacity:0}}
.hub .pk{stroke-dasharray:10 400;stroke-dashoffset:10;opacity:0;animation:packet 15s var(--ease) infinite}
@keyframes packet{0%{stroke-dashoffset:10;opacity:0}1%{opacity:1}11%{stroke-dashoffset:-112;opacity:1}13%,100%{stroke-dashoffset:-112;opacity:0}}
.hub .nd{transform-box:fill-box;transform-origin:center;animation:node 15s var(--ease) infinite}
@keyframes node{0%,9%{transform:scale(1);opacity:.7}12%{transform:scale(1.8);opacity:1}17%,100%{transform:scale(1);opacity:.7}}
.xchip{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:#4A4A40;border:1px solid rgba(27,26,23,.35);border-radius:4px;padding:6px 10px;animation:xchip 15s var(--ease) infinite}
@keyframes xchip{0%,10%{background:transparent;color:#4A4A40;border-color:rgba(27,26,23,.35)}12%,22%{background:#B8552A;color:#FFFFFF;border-color:#B8552A}27%,100%{background:transparent;color:#4A4A40;border-color:rgba(27,26,23,.35)}}

/* cta */
.cta-wrap{position:relative;overflow:hidden}
.cta-rings{position:absolute;left:50%;top:50%;width:1200px;height:1200px;margin:-600px 0 0 -600px;pointer-events:none}
.cta-rings circle{transform-box:fill-box;transform-origin:center;animation:ringOut 8s linear infinite}
@keyframes ringOut{0%{transform:scale(.15);opacity:0}15%{opacity:.5}100%{transform:scale(1);opacity:0}}
.cta-btn{background:var(--acc);color:#FFFFFF}
.cta-btn::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent)}

/* hero abstract schematic */
.sk-ic{width:30px;height:30px;border-radius:8px;background:rgba(27,26,23,.07)}
.sk-ic.on{background:rgba(27,26,23,.16);box-shadow:inset 0 0 0 1px rgba(27,26,23,.2)}
.skb{display:block;height:8px;border-radius:4px;background:rgba(27,26,23,.10);transition:width 1400ms var(--spring)}
.shimmer{background:linear-gradient(90deg,rgba(27,26,23,.08) 0%,rgba(27,26,23,.18) 40%,rgba(27,26,23,.08) 80%);background-size:200% 100%;animation:shim 1.8s linear infinite}
.hc .ln{stroke-dasharray:1400;stroke-dashoffset:1400}
.rv.in .hc .ln{animation:draw 2000ms .5s var(--ease) forwards}
.hc .ar{opacity:0;transition:opacity 1000ms 1.4s var(--ease)}
.rv.in .hc .ar{opacity:1}
.scan{position:absolute;top:24px;bottom:24px;left:24px;width:1px;background:rgba(27,26,23,.35);opacity:0}
.rv.in .scan{animation:scan 7s 2.6s var(--ease) infinite}
@keyframes scan{0%{transform:translateX(120px);opacity:0}8%{opacity:1}80%{transform:translateX(820px);opacity:1}92%,100%{transform:translateX(820px);opacity:0}}
.scan-tag{position:absolute;top:-4px;left:8px;white-space:nowrap;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;color:#FFFFFF;background:#1B1A17;border-radius:4px;padding:2px 8px}
.stack{position:relative;width:236px;height:148px;scale:.86;transform-origin:0 100%}
.stack .pcard{position:absolute;left:0;top:0;transition:transform 700ms var(--spring)}
.stack .sc1{transform:rotate(-17deg) translate(-26px,20px)}
.stack .sc2{transform:rotate(-9deg) translate(-12px,9px)}
.stack .sc3{transform:rotate(-2deg)}
.stack:hover .sc1{transform:rotate(-26deg) translate(-70px,30px)}
.stack:hover .sc2{transform:rotate(-13deg) translate(-36px,12px)}
.stack:hover .sc3{transform:rotate(0deg) translate(6px,-6px)}
.stack{animation:fan 7s ease-in-out infinite}
@keyframes fan{0%,100%{rotate:0deg}50%{rotate:3deg}}
.pc-b{background:linear-gradient(135deg,#3A3832 0%,#6B665C 100%)}
.pc-c{background:linear-gradient(135deg,#E8E4DC 0%,#CBC6BC 100%);color:#1B1A17;border-color:rgba(27,26,23,.08)}
.pc-c::before{opacity:.05;background-image:repeating-linear-gradient(45deg,#1B1A17 0,#1B1A17 1px,transparent 0,transparent 50%)}
.sbox{width:250px;background:#FFFFFF;border:1px solid #E8E4DC;border-radius:12px;padding:12px 14px;box-shadow:0 24px 48px -28px rgba(20,21,15,.32)}
.srow{display:flex;align-items:center;gap:10px;padding:6px 0}
.tok{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#FFFFFF;font-size:13px;font-weight:700;flex-shrink:0}
.coin{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#FFFFFF;font-size:19px;font-weight:700;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),inset 0 0 0 3px rgba(255,255,255,.25),0 14px 28px -14px rgba(20,21,15,.5);animation:coin 6s ease-in-out infinite}
@keyframes coin{0%{transform:translateY(0) rotateY(0deg)}50%{transform:translateY(-12px) rotateY(180deg)}100%{transform:translateY(0) rotateY(360deg)}}

/* brand logo */
.brand:hover{opacity:1}
.lgm .lg-a,.lgm .lg-b{transition:transform 600ms var(--spring)}
.lgm .lg-a{animation:lgA 1100ms .3s var(--spring) both}
.lgm .lg-b{animation:lgB 1100ms .45s var(--spring) both}
@keyframes lgA{from{transform:translate(90px,-90px);opacity:0}to{transform:none;opacity:1}}
@keyframes lgB{from{transform:translate(-90px,90px);opacity:0}to{transform:none;opacity:1}}
.brand:hover .lg-a{transform:translate(18px,-18px)}
.brand:hover .lg-b{transform:translate(-18px,18px)}

/* ledger grid (no table: custom elements can't live inside <tbody>) */
.lt{font-size:12px}
.lt-g{display:grid;grid-template-columns:52px 86px minmax(0,1fr) 96px 96px 104px 78px 92px;align-items:center;column-gap:10px;padding:0 10px}
.lt-h{height:36px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;border-bottom:1px solid #1B1A17;white-space:nowrap}
.lang-zh .lt-h{letter-spacing:0}
.lrow{height:40px;border-bottom:1px solid #E8E4DC;white-space:nowrap}
.lt .r{text-align:right}
/* zh typography */
.lang-zh .h1{font-size:48px!important;line-height:1.3!important;letter-spacing:.01em!important}
.lang-zh .hw{white-space:nowrap}
.lang-zh .hw{padding:.06em 0 .14em;margin:-.06em 0 -.14em}
h2,h3{text-wrap:balance}
.lang-zh h2,.lang-zh h3{letter-spacing:0!important;line-height:1.25!important}
.lang-zh .caps,.lang-zh .xchip,.lang-zh .cchip{letter-spacing:.04em}
/* cta brand mark */
.cta-mark{display:block;margin:0 auto 6px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}
.cta-mark .cm-a{animation:cmA 6s var(--ease) infinite}
.cta-mark .cm-b{animation:cmB 6s var(--ease) infinite}
@keyframes cmA{0%,70%,100%{transform:none}80%{transform:translate(40px,-40px)}90%{transform:none}}
@keyframes cmB{0%,72%,100%{transform:none}82%{transform:translate(-40px,40px)}92%{transform:none}}

/* hero mini panels + AgentX brand block */
.mini{width:238px;background:#FFFFFF;border:1px solid #E8E4DC;border-radius:12px;padding:12px 14px;box-shadow:0 22px 44px -28px rgba(20,21,15,.32)}
.mini-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.mini-r{display:flex;align-items:center;gap:9px;padding:5px 0}
.mini-sq{width:26px;height:18px;border-radius:4px;background:linear-gradient(135deg,#1B1A17,#4A4A40);flex-shrink:0;position:relative;overflow:hidden}
.mini-sq::after{content:'';position:absolute;left:3px;top:6px;width:7px;height:5px;border-radius:1px;background:#D4A843}
.mini-bar{height:3px;border-radius:3px;background:rgba(27,26,23,.08);margin-top:4px;overflow:hidden}
.mini-bar span{display:block;height:100%;border-radius:3px;background:#1B1A17}
.agx{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.agx-word{font-family:'Newsreader',serif;font-weight:400;font-size:64px;line-height:1;letter-spacing:-.02em;color:var(--acc)}
.lang-zh .agx-word{font-size:58px}
.agx-spark{animation:agxS 4s var(--ease) infinite;transform-origin:center}
@keyframes agxS{0%,70%,100%{transform:rotate(0) scale(1);opacity:.85}80%{transform:rotate(90deg) scale(1.18);opacity:1}}
.agx-rule{height:1px;background:linear-gradient(90deg,var(--acc),rgba(184,85,42,0));margin:14px 0 16px}

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px){
  .sec{padding-left:24px!important;padding-right:24px!important}
  .grid-hero{grid-template-columns:1fr!important;gap:40px!important}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .mod{flex-direction:column!important;gap:28px!important;padding:40px 0!important}
  .mod > *{flex:1 1 auto!important;width:100%}
  .grid-agx{grid-template-columns:1fr!important;gap:32px!important}
  .rv .ri-l,.rv .ri-r{transform:translateY(28px)}
}
@media (max-width: 860px){
  .float{display:none!important}
  .float-card{display:none!important}
  .hero-stage{margin-top:8px}
}
@media (max-width: 430px){
  .brand .brand-word{display:none}
}
@media (max-width: 720px){
  .navlinks{display:none!important}
  .navbar-in{padding:12px 16px!important;gap:10px!important}
  .brand .brand-word{font-size:19px!important}
  .navbar-in .btn-primary{padding:8px 12px!important;font-size:12px!important}
  .navbar-in .btn-ghost{padding:6px 8px!important;font-size:12px!important}
  .sec{padding-top:56px!important;padding-bottom:56px!important;padding-left:20px!important;padding-right:20px!important}
  h1{font-size:38px!important;line-height:1.12!important}
  .lang-zh .h1{font-size:30px!important;line-height:1.32!important}
  h2{font-size:28px!important;line-height:1.18!important}
  h3{font-size:22px!important}
  .lead-text{font-size:15px!important}
  .grid-3,.grid-4{grid-template-columns:1fr!important;gap:14px!important}
  .agx-word{font-size:44px!important}
  .lang-zh .agx-word{font-size:40px!important}
  .cta-in{padding:64px 20px!important}
  .foot-in{padding:24px 20px!important;gap:12px!important}
  .hero-bg{display:none}
}

@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}