/* EDA Foundation: "The Rotunda". Tokens first, then base, header, scenes (one block each), modal, responsive. */

@font-face{font-family:"Marcellus";src:url("../fonts/marcellus-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-latin.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}

@property --angle{syntax:"<angle>";inherits:false;initial-value:0deg}

:root{
  /* concrete ground */
  --night:#0a141e;
  --slate:#101c29;
  --stone:#16222f;
  --concrete:#8e9aa4;
  /* light */
  --silver:#dfe7ed;
  --sky:#b9dcf4;
  --sky-dim:#7fa6c2;
  --warm:#f0c98a;
  /* text */
  --ink:#e8eef3;
  --ink-2:#b4c2ce;
  --ink-3:#a2b0bd;
  --line:rgba(185,220,244,.18);
  --line-strong:rgba(185,220,244,.34);

  --display:"Marcellus","Songti SC","Noto Serif SC","STSong",Georgia,serif;
  --text:"Manrope","PingFang SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;

  --gutter:clamp(20px,5vw,72px);
  --max:1240px;
  --ease:cubic-bezier(.16,1,.3,1);
  --header-h:76px;
  --hold:.8;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc((var(--header-h) + 12px)*var(--z,1));-webkit-text-size-adjust:100%}
html:not(.lenis){scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
:lang(zh) body,body:lang(zh){line-height:1.8}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

::selection{background:var(--sky);color:var(--night)}
:focus-visible{outline:2px solid var(--sky);outline-offset:4px;border-radius:2px}
html{scrollbar-color:#3a4c5c var(--night);scrollbar-width:thin}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--night)}
::-webkit-scrollbar-thumb{background:#3a4c5c;border:2px solid var(--night);border-radius:8px}
.num{font-variant-numeric:tabular-nums lining-nums}

.skip{position:absolute;left:var(--gutter);top:-60px;z-index:200;background:var(--sky);color:var(--night);padding:10px 16px;font-weight:600}
.skip:focus{top:12px}

.wrap{width:min(var(--max),100% - var(--gutter)*2);margin-inline:auto}

/* ---------- type ---------- */
.display{font-family:var(--display);font-weight:400;letter-spacing:.005em;line-height:1.08;text-wrap:balance}
h2.display{font-size:clamp(1.9rem,min(3.9vw,6.4vh),3.4rem)}
h3{font-family:var(--display);font-weight:400;font-size:clamp(1.25rem,1.8vw,1.55rem);line-height:1.2;letter-spacing:.005em}
.lede{font-size:clamp(1rem,min(1.3vw,2.3vh),1.18rem);color:var(--ink-2);max-width:60ch;text-wrap:pretty}
.small{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
:lang(zh) .small{letter-spacing:.08em;text-transform:none}
.note{font-size:.88rem;color:var(--ink-3);max-width:62ch}

/* ---------- header ---------- */
.header{position:fixed;inset:0 0 auto 0;height:96px;z-index:100;display:flex;align-items:center;transition:background .5s var(--ease),height .5s var(--ease),color .5s}
.header::before{content:"";position:absolute;inset:0 0 -36px 0;z-index:-1;pointer-events:none;background:linear-gradient(rgba(10,20,30,.42),rgba(10,20,30,0));transition:opacity .5s}
.header.scrolled::before{opacity:0}
.header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);opacity:0;transition:opacity .5s}
.header.scrolled{background:rgba(10,20,30,.82);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);height:64px}
.header.scrolled::after{opacity:1}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;width:min(1560px,100% - var(--gutter)*2)}
.brand{display:flex;align-items:center;gap:16px;flex:none}
.brand img{height:32px;width:auto}
.logo-b{display:none}
.brand-t{display:flex;flex-direction:column;gap:7px;padding-left:16px;border-left:1px solid var(--line-strong)}
.brand-n{font-family:var(--display);font-size:1.12rem;line-height:1;letter-spacing:.32em;text-transform:uppercase}
.brand-c{display:flex;align-items:center;gap:8px;font-size:.54rem;line-height:1;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.brand-c::before,.brand-c::after{content:"";height:1px;width:14px;background:var(--line-strong)}
:lang(zh) .brand-n{letter-spacing:.5em}
:lang(zh) .brand-c{letter-spacing:.2em;font-size:.62rem}
.nav{display:flex;align-items:center;margin-left:auto;margin-right:12px;gap:clamp(12px,1.7vw,34px);font-size:.88rem;letter-spacing:.04em;white-space:nowrap}
.nav a{position:relative;padding:8px 0;color:var(--ink);transition:color .3s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--sky);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.tools{display:flex;align-items:center;gap:14px}
.ext svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.ext:hover svg{transform:translate(3px,-3px)}
.ext{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;color:var(--sky);padding:6px 0;white-space:nowrap}

/* language selector: a registry-driven listbox, so more languages can be added without touching the markup */

.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;margin-right:-10px}
.menu-btn span,.menu-btn span::before{display:block;width:22px;height:1px;background:currentColor;position:relative;transition:transform .4s var(--ease),background .3s}
.menu-btn span::before{content:"";position:absolute;top:7px;left:0}
.menu-btn[aria-expanded="true"] span{transform:translateY(3px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span::before{transform:translateY(-7px) rotate(-90deg)}


.floor-line{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;transform-origin:left;transform:scaleX(var(--prog,0));background:linear-gradient(90deg,transparent,var(--warm) 30%,#fff3dc);pointer-events:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:54px;padding:0 24px;font-size:.92rem;font-weight:600;letter-spacing:.03em;border:1px solid var(--line-strong);transition:background .5s var(--ease),color .4s,border-color .4s,transform .5s var(--ease)}
.btn svg{width:18px;height:18px;transition:transform .5s var(--ease)}
.btn:hover svg{transform:translateX(5px)}
.btn-primary{background:linear-gradient(116deg,#3a79a8,#22496f);color:#fff;border-color:#82bedf;box-shadow:inset 0 1px 0 rgba(255,255,255,.19)}
.btn-primary:hover{background:linear-gradient(110deg,#4a8bba,#2d5c86);transform:translateY(-2px)}
.btn-ghost:hover{background:rgba(185,220,244,.1);border-color:var(--sky)}
.btn:active{transform:translateY(0) scale(.99)}

/* ---------- scene shell ---------- */
.scene{position:relative}
.scene.slate{background:var(--slate)}
.pin{position:relative;isolation:isolate;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--header-h) + 36px) 0 64px;overflow:hidden}
.pinned .scene{height:calc((var(--h,3) + 1 + var(--hold))*100vh);overflow-x:clip}
/* The next scene does not scroll in below the previous one: it is pulled up over the previous scene's last screen
   and revealed in place while that scene stays pinned (see enterFx in site.js). So every stage needs its own opaque ground. */
.pinned .scene[data-enter]{margin-top:-100vh}
.pinned .scene.vision{height:calc(var(--h,3)*100vh)}
.pinned .scene.slate{background:none}
.pinned .slate .pin{background:var(--slate)}
.pinned .pin{background:var(--night);position:sticky;top:0;height:100vh;min-height:0;padding:calc((var(--header-h) + 24px)*var(--z,1)) 0 calc(40px*var(--z,1))}
.bgplate{position:absolute;inset:0;z-index:-2;opacity:.7;overflow:hidden}
img.bgplate,video.bgplate,.bgplate img{display:block;width:100%;height:100%;object-fit:cover}
/* every scene with a picture: a full-bleed plate under a veil that keeps the copy readable
   veil-l: copy on the left, picture shows on the right; veil-u: copy on both sides, even veil */
.hasbg::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.veil-l::after{background:linear-gradient(90deg,rgba(10,20,30,.9) 0,rgba(10,20,30,.62) 46%,rgba(10,20,30,.2) 100%)}
.veil-c::after{background:radial-gradient(ellipse 85% 95% at 50% 52%,rgba(10,20,30,.82),rgba(10,20,30,.58))}
.veil-t::after{background:linear-gradient(90deg,rgba(10,20,30,.93) 0,rgba(10,20,30,.76) 30%,rgba(10,20,30,.12) 45%,rgba(10,20,30,.12) 55%,rgba(10,20,30,.78) 70%,rgba(10,20,30,.92) 100%)}
.veil-t .bgplate{opacity:.95}
.veil-u::after{background:radial-gradient(ellipse 80% 90% at 50% 52%,rgba(10,20,30,.66),rgba(10,20,30,.42))}
.head{max-width:780px}
.head .lede{margin-top:16px}

/* ---------- 1 · hero ---------- */
.hero .pin{justify-content:center;background:var(--night)}
.hero-bg{position:absolute;inset:-1.5%;z-index:-3;container-type:size;overflow:hidden;transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.02);transition:transform .9s var(--ease)}
/* One cover-sized box holds the render and every light effect, so traced paths stay on the picture at any viewport. */
.hero-art{--aw:max(100cqw,177.68cqh);--ax:.62;position:absolute;width:var(--aw);aspect-ratio:1672/941;left:calc((100cqw - var(--aw))*var(--ax));top:calc((100cqh - var(--aw)*.5628)*.55);transform-origin:64.3% 62.2%}
.hero-art img,.hero-art video{position:absolute;inset:0;width:100%;height:100%;display:block}
.flow{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.beams{mix-blend-mode:screen;opacity:.6;animation:breathe 9s ease-in-out infinite}
.hero-art.vid .beams{display:none}
/* Breathing light: soft screen-blended glows over each light source of the footage (positions in the picture's own frame), each on its own slow period and phase */
.breath{position:absolute;inset:0;display:none;pointer-events:none;mix-blend-mode:screen;overflow:hidden}
.hero-art.vid .breath{display:block}
.breath i{position:absolute;left:calc(var(--x) - var(--w)/2);top:calc(var(--y) - var(--h)/2);width:var(--w);height:var(--h);transform:rotate(var(--r,0deg));opacity:var(--lo);background:radial-gradient(ellipse closest-side,var(--c) 0,transparent 100%);animation:lightBreath var(--t) ease-in-out var(--d,0s) infinite;will-change:opacity}
@keyframes lightBreath{0%,100%{opacity:var(--lo)}50%{opacity:var(--hi)}}
.b-shaft{--x:57%;--y:36%;--w:46%;--h:78%;--r:-24deg;--c:rgba(255,243,220,.6);--lo:.04;--hi:.75;--t:7s}
.b-sculpt{--x:64%;--y:64%;--w:26%;--h:38%;--c:rgba(205,232,255,.55);--lo:.0;--hi:.55;--t:9s;--d:-3.5s}
.b-led{--x:64%;--y:85%;--w:42%;--h:16%;--c:rgba(255,200,130,1);--lo:0;--hi:1;--t:4.8s;--d:0s}
.b-wall{--x:33%;--y:78%;--w:42%;--h:14%;--c:rgba(255,214,160,.5);--lo:.08;--hi:.85;--t:6.5s;--d:-2.4s}
.b-pool{--x:52%;--y:85%;--w:34%;--h:13%;--c:rgba(240,246,255,.45);--lo:.0;--hi:.6;--t:8s;--d:-5s}
.b-stair{--x:3.5%;--y:66%;--w:11%;--h:32%;--c:rgba(255,208,150,.55);--lo:.08;--hi:.85;--t:6s;--d:-0.8s}
body.paused .breath i{animation-play-state:paused}
/* reduced motion (html.rm: the system setting is on and the visitor has not chosen "Play motion") */
html.rm .breath i{animation:none}
@keyframes breathe{50%{opacity:.25}}
.hud circle{fill:none}
.hud-base{stroke:url(#gRing);stroke-width:1.6;opacity:.9;stroke-dasharray:1000;animation:ringIn 2.6s .3s var(--ease) both}
@keyframes ringIn{from{stroke-dashoffset:1000}}
.hud-run{stroke:#d4f1ff;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:210 790;transform-origin:1170px 470px;animation:spin 20s linear infinite}
.hud-in{stroke:#a1dbff;stroke-width:.8;opacity:.35}
.hud-ticks{stroke:#ddf4ff;stroke-width:5;stroke-dasharray:1.2 8.8;opacity:.6;transform-origin:1170px 470px;animation:spin 46s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.run{fill:none;stroke:url(#gWarm);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:90 910;mix-blend-mode:screen;animation:run 8s linear infinite}
.run-rim{animation-duration:6s;animation-delay:-2s}
.run-led{stroke-dasharray:140 860;animation-duration:5.5s}
.run-stair{animation-duration:4s;animation-delay:-1s}
@keyframes run{from{stroke-dashoffset:0}to{stroke-dashoffset:-1000}}
.glint{mix-blend-mode:screen;opacity:.6;animation:glint 7.5s ease-in-out infinite}
@keyframes glint{0%{transform:skewX(-18deg) translateX(0)}60%,100%{transform:skewX(-18deg) translateX(900px)}}
.hero .pin::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,15,27,.65) 0,rgba(7,21,35,.33) 48%,rgba(8,19,31,.07) 100%)}
.hero .pin::after{content:"";position:absolute;inset:auto 0 0 0;height:200px;z-index:-1;background:linear-gradient(to bottom,transparent,var(--night))}
#dust{position:absolute;inset:0;z-index:-2;width:100%;height:100%;pointer-events:none}
.hero-wrap{width:min(1560px,100% - var(--gutter)*2)}
.hero-copy{max-width:780px}
.hero h1{font-size:clamp(2.3rem,min(3.8vw,7vh),3.8rem);line-height:1.1;text-shadow:0 2px 28px rgba(0,0,0,.25)}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.hero h1 .ln>span{display:block;animation:lineUp 1.3s var(--ease) both}
.hero h1 .ln:nth-child(2)>span{animation-delay:.14s}
@keyframes lineUp{from{transform:translateY(110%)}}
.hero-rule{width:94px;height:2px;margin:30px 0 24px;background:linear-gradient(90deg,#b8e9ff,#79bced 48%,transparent);transform-origin:left;animation:ruleIn 1.1s .5s var(--ease) both}
@keyframes ruleIn{from{transform:scaleX(0)}}
.hero .lede{max-width:50ch;text-wrap:balance;color:var(--ink);animation:heroIn 1.2s .65s var(--ease) both}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px;animation:heroIn 1.2s .8s var(--ease) both}
@keyframes heroIn{from{opacity:0;transform:translateY(24px)}}
.pause{position:absolute;right:var(--gutter);bottom:30px;z-index:3;font-size:.84rem;letter-spacing:.1em;color:var(--ink-2);padding:12px 0;min-height:44px;transition:color .3s}
.pause:hover{color:var(--ink)}
.hero.off *{animation-play-state:paused!important}
body.paused .flow *,body.paused .hero h1 .ln>span,body.paused .ring-dots *{animation-play-state:paused}

/* ---------- 2 · ecosystem ---------- */
.eco-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center}
.eco-copy .lede{margin-top:16px}
.eco-swap{margin-top:clamp(22px,4vh,44px);position:relative}
.layers{display:grid;gap:0}
.lay{padding:18px 0;border-top:1px solid var(--line)}
.lay:last-child{border-bottom:1px solid var(--line)}
.lay h3{color:var(--silver);margin-bottom:4px}
.lay p{color:var(--ink-2)}
.octant{margin-top:30px;padding-top:24px;border-top:1px solid var(--line-strong)}
.octant h3{margin-bottom:10px;color:var(--silver)}
.octant p{color:var(--ink-2);max-width:56ch}
.eco-stage{display:grid;place-items:center;perspective:1500px;height:min(64vh,580px)}
.stack{position:relative;width:min(34vw,440px);aspect-ratio:1;transform-style:preserve-3d;transform:rotateX(62deg) rotateZ(-38deg)}
.slab{position:absolute;inset:0;transform:translateZ(calc(var(--i)*54px - 108px));display:flex;flex-direction:column;justify-content:flex-end;padding:6% 7%;border:1px solid rgba(185,220,244,.42);background:repeating-linear-gradient(0deg,rgba(185,220,244,.09) 0 1px,transparent 1px 44px),repeating-linear-gradient(90deg,rgba(185,220,244,.09) 0 1px,transparent 1px 44px),linear-gradient(135deg,rgba(185,220,244,.22),rgba(185,220,244,.05) 70%);transition:border-color .6s,background .6s}
.slab>*{position:relative}
.slab::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,16,26,.62),rgba(8,16,26,.18) 55%,transparent);pointer-events:none}
.sl-n{font-size:.86rem;font-weight:600;letter-spacing:.16em;color:var(--ink);text-shadow:0 1px 8px rgba(8,16,26,.9);font-variant-numeric:tabular-nums}
.sl-t{font-family:var(--display);font-weight:400;font-size:clamp(1.15rem,1.9vw,1.7rem);line-height:1.1;color:var(--silver);margin-top:2px}
.sl-d{max-width:23ch;margin-top:4px;font-size:.92rem;line-height:1.35;color:var(--ink);text-shadow:0 1px 8px rgba(8,16,26,.9)}
.slab:not(.on) :is(.sl-t,.sl-d,.sl-n){opacity:.92}
.slab:not(.on) .sl-d{display:none}
.slab.on{border-color:var(--sky);background:repeating-linear-gradient(0deg,rgba(185,220,244,.14) 0 1px,transparent 1px 44px),repeating-linear-gradient(90deg,rgba(185,220,244,.14) 0 1px,transparent 1px 44px),linear-gradient(135deg,rgba(185,220,244,.4),rgba(185,220,244,.12) 70%)}
.slab.on .sl-t{color:#fff}
.slab.on::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--warm),transparent)}
.pinned .layers{height:150px}
.pinned .lay{position:absolute;inset:0 0 auto 0;opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .6s var(--ease),transform .8s var(--ease),visibility 0s .6s;border-bottom:1px solid var(--line)}
.pinned .lay.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.pinned .octant{position:absolute;inset:0 0 auto 0;margin:0;opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .6s var(--ease),transform .8s var(--ease),visibility 0s .6s}
.pinned .octant.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.pinned .eco-swap{height:236px}
.pinned .layers{position:absolute;inset:0}

/* ---------- 3 · about ---------- */
.about-grid{display:block}
.about-head{max-width:min(540px,100%)}
.about-head .lede{margin-top:18px}


/* ---------- icons and image cards (kit used by every scene) ---------- */
.ic{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;vertical-align:-.25em;transition:stroke-dashoffset 1.2s var(--ease)}
.pinned .ic{stroke-dashoffset:1}
.pinned :is(.in,.on,.lit,.vis) .ic,.pinned .ic.in{stroke-dashoffset:0}
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);height:clamp(380px,64vh,600px)}
.bento .c-tall{grid-column:1;grid-row:1/3}
.bento .c-wide{grid-column:2/4;grid-row:1}
.bento .c-s1{grid-column:2;grid-row:2}
.bento .c-s2{grid-column:3;grid-row:2}
.card{--pad:clamp(14px,1.5vw,22px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:0;overflow:hidden;isolation:isolate;padding:var(--pad);background:var(--stone);border:1px solid rgba(185,220,244,.28);transition:border-color .5s var(--ease)}
.card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(10,20,30,.94) 0,rgba(10,20,30,.62) 42%,rgba(10,20,30,.04) 100%)}
.card-media{position:absolute;inset:0;z-index:-2;transform:translate3d(var(--mx,0px),var(--my,0px),0) scale(var(--zs,1));transition:transform .8s var(--ease)}
.card-media img,.card-media video{position:absolute;inset:-5%;width:110%;height:110%;max-width:none;object-fit:cover}
.card .sweep{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(215,235,250,.14) 50%,transparent 60%);transform:translate3d(-130%,0,0)}
.card .idx{position:absolute;left:var(--pad);top:calc(var(--pad) - 4px);font-family:var(--text);font-variant-numeric:tabular-nums;font-size:.78rem;font-weight:500;letter-spacing:.14em;color:var(--ink-2)}
.card>.ic{position:absolute;right:var(--pad);top:calc(var(--pad) - 6px);width:28px;height:28px;color:var(--sky)}
.card h3{margin-bottom:6px;font-size:clamp(1.05rem,1.45vw,1.35rem);color:var(--silver)}
.card p{max-width:38ch;font-size:.9rem;line-height:1.5;color:var(--ink-2)}
.card:hover{border-color:rgba(185,220,244,.4)}
.card:hover .card-media{--zs:1.05}
.card.live .card-media img{animation:drift var(--dur,26s) ease-in-out infinite alternate}
.card.live .sweep{animation:sweep 2.6s var(--ease) .5s 1 both}
.card.live:hover .sweep{animation:sweep2 1.5s var(--ease) 1 both}
.bento .c-s1 .card-media,.bento .c-s2 .card-media{bottom:38%}
.c-wide .card-media img{--dir:-1}
.c-s1 .card-media img{--dur:30s}
.c-s2 .card-media img{--dur:22s;--dir:-1}
@keyframes drift{from{transform:scale(1.02) translate3d(calc(var(--dir,1)*-1.6%),.8%,0)}to{transform:scale(1.1) translate3d(calc(var(--dir,1)*1.6%),-1%,0)}}
@keyframes sweep{from{transform:translate3d(-130%,0,0)}to{transform:translate3d(130%,0,0)}}
@keyframes sweep2{from{transform:translate3d(-130%,0,0)}to{transform:translate3d(130%,0,0)}}
body.paused .card *,body.paused .oct-img img,body.paused .pane-img img{animation-play-state:paused}
/* row, split and tagged cards, picture panels */
.c-row,.c-split{justify-content:center;min-height:clamp(112px,16.5vh,150px)}
.c-row::before{background:linear-gradient(90deg,rgba(10,20,30,.95) 0,rgba(10,20,30,.82) 40%,rgba(10,20,30,.1) 100%)}
.c-row strong{display:block;margin-bottom:4px;font-family:var(--display);font-weight:400;font-size:clamp(1.25rem,1.7vw,1.55rem);letter-spacing:.02em;color:var(--silver)}
.c-row p{max-width:44%}
.c-split{padding-left:calc(42% + var(--pad))}
.c-split .card-media{right:auto;width:42%;overflow:hidden}
.c-split::before{background:linear-gradient(90deg,transparent 30%,rgba(10,20,30,.9) 42%)}
.c-split .idx{color:var(--silver)}
.c-split p{font-size:.88rem}
.card .tag{display:block;margin:-2px 0 6px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
:lang(zh) .card .tag{text-transform:none;letter-spacing:.04em}
.bento-row{grid-template-columns:1fr 1.5fr 1fr 1fr;grid-template-rows:1fr;height:clamp(160px,22vh,230px)}
.bento-row .c-b .card-media img{--dir:-1}
.lay h3,.octant h3,.fin-list h3{display:flex;align-items:center;gap:.55em}
.lay h3 .ic,.octant h3 .ic,.fin-list h3 .ic{width:1.05em;height:1.05em;color:var(--sky)}
.oct-img{margin:0;position:relative;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10}
.oct-img img{position:absolute;inset:-6%;width:112%;height:112%;max-width:none;object-fit:cover}
.octant{display:grid;grid-template-columns:minmax(0,1fr) clamp(130px,15vw,210px);column-gap:22px;align-items:start}
.octant h3,.octant p{grid-column:1}
.octant .oct-img{grid-column:2;grid-row:1/3}
.octant p{font-size:.92rem}
.pinned .octant.on .oct-img img,.pinned .pane.on .pane-img img{animation:drift 24s ease-in-out infinite alternate}
.pane-img{position:relative;height:clamp(110px,21vh,190px);margin-bottom:18px;overflow:hidden;border:1px solid var(--line)}
.pane-img img{position:absolute;inset:-5%;width:110%;height:110%;max-width:none;object-fit:cover}
.pane-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,20,30,.55),transparent 55%)}
.path li .ic{display:block;width:26px;height:26px;margin-bottom:10px;color:var(--sky)}
.node .ic{display:block;margin:0 auto 10px;width:30px;height:30px;color:var(--sky);transition:color .5s}
.node.core .ic{color:var(--warm)}
.pinned .node:not(.core) .ic{color:var(--ink-3)}
.pinned .node.lit:not(.core) .ic{color:var(--sky)}
.lk{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center}
.lk .ic{width:30px;height:30px;color:var(--sky);grid-row:1/3}
.lk small{grid-column:2;max-width:32ch}
.principles span{display:inline-flex;align-items:center;gap:.6em}
.principles .ic{color:var(--sky)}


/* ---------- 4 · nvda ---------- */
.nvda-plate{opacity:1;overflow:hidden;-webkit-mask-image:none;mask-image:none}
.nvda-plate img{opacity:.42;filter:saturate(.9)}
.nvda-plate::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,20,30,.93) 0,rgba(10,20,30,.76) 30%,rgba(10,20,30,.12) 45%,rgba(10,20,30,.12) 55%,rgba(10,20,30,.8) 72%,rgba(10,20,30,.92) 100%)}
.beam{position:absolute;top:-10%;bottom:-10%;left:-30%;width:30%;z-index:1;pointer-events:none;mix-blend-mode:screen;transform:skewX(-14deg);background:linear-gradient(100deg,transparent,rgba(235,244,252,.22) 42%,rgba(255,243,220,.42) 52%,transparent)}
.nvda-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,96px);align-items:center}
.nvda-copy .lede{margin-top:18px}
.caveat{margin-top:26px;padding:18px 22px;background:rgba(185,220,244,.07);border:1px solid var(--line);color:var(--ink-2);font-size:.93rem;max-width:60ch}
.chain{display:grid;gap:12px}

/* ---------- 5 · token ---------- */
.token-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,96px);align-items:center}
.token-head .big{font-family:var(--display);font-size:clamp(4rem,min(11vw,19vh),9rem);line-height:.9;color:var(--silver);letter-spacing:-.01em;margin-bottom:clamp(14px,3vh,32px)}
.token-head h2{font-size:clamp(1.5rem,min(2.6vw,4.4vh),2.3rem);max-width:22em}
.token-head .lede{margin-top:14px}
.token-head .note{margin-top:12px}
.deck{display:grid;gap:14px;perspective:1100px}

/* ---------- 6 · strategy ---------- */
.str-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,80px);align-items:center}
.str-head .lede{margin-top:16px}
.tabs{display:none}
.pinned .tabs{display:flex;border-bottom:1px solid var(--line-strong);margin-bottom:26px}
.tab{position:relative;padding:14px 22px 16px 0;margin-right:22px;color:var(--ink-3);font-family:var(--display);font-size:1.15rem;transition:color .4s}
.tab:hover,.tab[aria-selected="true"]{color:var(--silver)}
.tab-bar{position:absolute;left:0;right:22px;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--sky),var(--warm));transform-origin:left;transform:scaleX(0)}
.panes{display:grid;gap:34px}
.pane h3{margin-bottom:6px;color:var(--silver);font-size:clamp(1.4rem,2.2vw,1.9rem)}
.pane .sub{color:var(--ink-3);margin-bottom:18px}
.pane ul{display:grid;gap:12px;color:var(--ink-2)}
.pane li{padding-left:18px;position:relative}
.pane li::before{content:"";position:absolute;left:0;top:.85em;width:8px;height:1px;background:var(--sky)}
.path h3{margin-bottom:26px;color:var(--silver)}
.path ol{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.path ol::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:var(--line-strong)}
.path ol::after{content:"";position:absolute;left:0;top:7px;height:1px;width:calc(var(--pp,1)*100%);background:linear-gradient(90deg,var(--sky),var(--warm))}
.path li{padding:28px 14px 0 0;position:relative;color:var(--ink-2);font-size:.96rem}
.path li::before{content:"";position:absolute;left:0;top:0;width:15px;height:15px;border-radius:50%;border:1px solid var(--sky);background:var(--sky);transition:background .6s,border-color .6s}
.path li b{display:block;font-family:var(--display);font-weight:400;font-size:1.1rem;color:var(--silver)}
/* the panels are one horizontal track: they slide in from the right edge of the screen and leave under the copy column */
.pinned .str-stage{clip-path:inset(-100vh -100vw -100vh 0)}
.pinned .panes{display:flex;gap:14vw;will-change:transform}
.pinned .pane,.pinned .path{flex:0 0 100%;min-width:0;opacity:.5;transition:opacity .7s var(--ease)}
.pinned .pane.on,.pinned .path.on{opacity:1}
.pinned .path li::before{background:var(--night);border-color:var(--sky)}
.pinned .path li.lit::before{background:var(--sky);border-color:var(--warm)}

/* ---------- 7 · fintech ---------- */
.fin-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,5vw,80px);align-items:center}
.fin-left .lede{margin-top:16px}
.years{display:flex;flex-wrap:wrap;gap:0;margin-top:clamp(18px,3.4vh,32px);border-bottom:1px solid var(--line-strong)}
.yr{position:relative;padding:12px 18px 14px 0;margin-right:18px;color:var(--ink-3);font-family:var(--display);font-size:1.1rem;transition:color .4s}
.yr small{display:block;font-family:var(--text);font-size:.78rem;letter-spacing:.08em;color:var(--ink-3);margin-top:-2px}
.yr:hover,.yr[aria-selected="true"]{color:var(--silver)}
.yr .tab-bar{right:18px}
.fin-list{margin-top:clamp(14px,2.6vh,26px)}
.fin-list>.acc{border-bottom:1px solid var(--line)}
.fin-list h3{font-size:1.3rem;margin:0}
.fin-list p{color:var(--ink-2);font-size:.92rem}
.chart-wrap{background:var(--stone);border:1px solid var(--line);padding:clamp(16px,2.2vw,28px)}
.chart-wrap h3{font-size:1.3rem;margin-bottom:2px}
.readout{display:grid;grid-template-columns:1fr 1fr auto;gap:18px;align-items:end;margin:14px 0 6px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.readout b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(2rem,min(3.6vw,6vh),3.2rem);line-height:1;color:var(--silver)}
.readout>div:first-child b{color:var(--sky)}
.rk{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px;font-weight:600}
:lang(zh) .rk{letter-spacing:.04em;text-transform:none}
.ry{font-size:.84rem;color:var(--ink-2);padding-bottom:4px}
#chart{width:100%;height:auto;max-height:36vh}
#chart .bar{transform-box:fill-box;transition:opacity .5s}
#chart .pos{transform-origin:bottom}
#chart .neg{transform-origin:top}
#chart text{font-family:var(--text);fill:var(--ink-2);font-size:13px;transition:fill .4s}
#chart .val{font-size:13px;fill:var(--ink-2)}
#chart g.yg.dim .bar{opacity:.25}
#chart g.yg.dim .val{opacity:.35}
#chart g.yg.sel text{fill:var(--ink)}
.rh-note{margin-top:20px;color:var(--ink-2);max-width:60ch;font-size:.94rem}
.rh-note b{color:var(--silver);font-weight:600}

/* ---------- 8 · convergence ---------- */
.conv-wrap{display:grid;justify-items:center;gap:clamp(8px,2vh,20px)}
.conv .head{max-width:760px;text-align:center}
.conv .head .lede{margin-inline:auto}
.ring-stage{position:relative;aspect-ratio:2/1;width:min(100%,calc((100svh - 480px)*2));min-width:min(100%,560px)}
.ring-stage>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ring-draw{stroke-dasharray:1}
.node{position:absolute;width:max-content;max-width:230px;translate:-50% -50%;text-align:center;background:var(--slate);padding:10px 14px 12px}
.node .small{display:block;margin-top:4px;font-size:.78rem}
.node b{display:block;font-family:var(--display);font-weight:400;font-size:1.3rem;color:var(--silver);line-height:1.15}
.node p{font-size:.92rem;color:var(--ink-2);margin-top:6px;line-height:1.5;text-wrap:balance}
.n1{left:13.5%;top:29%}.n2{left:50%;top:50%}.n3{left:86.5%;top:29%}.n4{left:50%;top:85%}
.conv-end{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,4vw,64px);align-items:start;width:100%}
.conv-end p{color:var(--ink-2);max-width:58ch;font-size:.96rem}
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tags li{padding:7px 14px;border:1px solid var(--line-strong);border-radius:999px;font-size:.84rem;color:var(--ink-2)}
.pinned .node{opacity:0;transition:opacity .7s var(--ease)}
.pinned .node.vis{opacity:.55}
.pinned .node.lit{opacity:1}

/* ---------- 9 · collaboration ---------- */
.col-wrap{display:grid;gap:clamp(18px,3.6vh,34px)}
.col-wrap .lede{margin-top:12px}
.col-wrap h2{font-size:clamp(1.8rem,min(3.4vw,5.6vh),3rem)}
@media (max-height:780px) and (min-width:861px){.col-wrap{gap:12px}.col-wrap .lede{font-size:.92rem}.bento-row{height:168px}.bento-row .tag{display:none}.bento-row .card p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.lk{font-size:1.35rem}.lk .ic{width:26px;height:26px}}
.lockup{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
.lk{font-family:var(--display);font-size:clamp(1.4rem,2.6vw,2.1rem);color:var(--silver)}
.lk small{display:block;font-family:var(--text);font-size:.8rem;color:var(--ink-3);letter-spacing:.02em;margin-top:2px}
.lockup .plus{width:26px;height:26px;position:relative;flex:none;color:var(--warm)}
.lockup .plus::before,.lockup .plus::after{content:"";position:absolute;background:currentColor;left:50%;top:50%}
.lockup .plus::before{width:18px;height:1px;margin:-.5px 0 0 -9px}.lockup .plus::after{width:1px;height:18px;margin:-9px 0 0 -.5px}
.collab-end{display:flex;flex-wrap:wrap;gap:20px 48px;align-items:center;justify-content:space-between}
.collab-end p{max-width:64ch;color:var(--ink-2);font-size:.96rem}

/* ---------- 11 · vision ---------- */
.vision .pin{justify-content:center}
.vis-art{position:absolute;inset:0;z-index:-2;overflow:hidden}
.vis-art img{width:100%;height:100%;object-fit:cover;object-position:64% 50%;transform-origin:64% 62%}
.vision .pin::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,20,30,.9) 0,rgba(10,20,30,.7) 42%,rgba(10,20,30,.15) 100%),linear-gradient(to bottom,var(--slate),transparent 18%,transparent 80%,var(--night))}
.vision-copy{max-width:700px}
.vision h2{font-size:clamp(2.1rem,min(4.6vw,8vh),4rem)}
.vision .lines{margin-top:26px;display:grid;gap:8px;color:var(--ink-2);font-size:1.08rem}
.principles{display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:34px;padding-top:22px;border-top:1px solid var(--line-strong);font-family:var(--display);font-size:1.15rem;color:var(--silver)}

/* ---------- footer ---------- */
.footer{background:var(--night);border-top:1px solid var(--line);padding:56px 0 40px;position:relative;z-index:1}
.foot-top{display:flex;flex-wrap:wrap;gap:30px 60px;justify-content:space-between;align-items:flex-start}
.footer img{height:30px;width:auto}
.foot-nav{display:flex;flex-wrap:wrap;gap:10px 28px;font-size:.88rem;color:var(--ink-2)}
.foot-nav a:hover{color:var(--ink)}
.disclaimer{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);color:var(--ink-3);font-size:.84rem;max-width:90ch}
.copy{margin-top:14px;color:var(--ink-3);font-size:.82rem}

/* ---------- modal ---------- */
dialog{padding:0;border:0;background:var(--night);color:var(--ink);width:min(1080px,calc(100% - 24px));height:min(88vh,900px);max-width:none;max-height:none;margin:auto;overflow:hidden}
dialog[open]{display:flex;flex-direction:column;animation:dlg .5s var(--ease)}
dialog::backdrop{background:rgba(4,9,14,.82);backdrop-filter:blur(6px)}
@keyframes dlg{from{opacity:0;transform:translateY(18px)}}
.dlg-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 20px;border-bottom:1px solid var(--line)}
.dlg-bar h3{font-size:1.2rem}
.dlg-bar div{display:flex;align-items:center;gap:20px;font-size:.88rem}
.dlg-bar a{color:var(--sky);border-bottom:1px solid var(--line-strong)}
.dlg-bar button{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:50%;transition:background .3s}
.dlg-bar button:hover{background:rgba(185,220,244,.12)}
dialog iframe{flex:1;width:100%;border:0;background:#fff}

/* short desktop windows: nodes keep their name and tag, the one-line description goes */
@media (min-width:861px) and (max-height:800px){
  .node p{display:none}
}
.pinned .hero-art{will-change:transform}

/* ---------- headings: words rise out of a mask ---------- */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.w>span{display:inline-block}

/* ---------- responsive ---------- */
/* water-drop rings (made by JS for data-enter="drop") */
.ripple{position:absolute;left:50%;top:58%;width:0;height:0;z-index:0;pointer-events:none}
.ripple b{position:absolute;left:0;top:0;width:90vmax;height:90vmax;margin:-45vmax 0 0 -45vmax;border:1px solid rgba(185,220,244,.5);border-radius:50%;transform:scale(0)}

/* big outlined word behind the content (parallax with the scroll) */
.bigword{position:absolute;left:-.04em;bottom:-.13em;z-index:0;pointer-events:none;white-space:nowrap;font-family:var(--display);font-size:clamp(6rem,15vw,15rem);line-height:.9;letter-spacing:-.01em;color:transparent;-webkit-text-stroke:1.5px rgba(185,220,244,.5);-webkit-mask-image:linear-gradient(to bottom,#000 35%,transparent 95%);mask-image:linear-gradient(to bottom,#000 35%,transparent 95%)}
:lang(zh) .bigword{letter-spacing:.08em;font-size:clamp(6rem,16vw,16rem)}
#about .bigword{left:auto;right:-.03em}
.cf-ctl{position:relative;z-index:2}
.veil-w::after{background:linear-gradient(to top,rgba(10,20,30,.72),transparent 38%),linear-gradient(90deg,rgba(10,20,30,.8) 0,rgba(10,20,30,.56) 40%,rgba(10,20,30,.06) 70%,rgba(10,20,30,.18) 100%)}
.veil-w .bgplate{opacity:.95}

/* coverflow carousel: centre card in front, neighbours tilted and dimmed */
.cf{width:min(100%,620px);margin-top:clamp(18px,4.5vh,44px)}
.cf-stage{position:relative;height:clamp(200px,29vh,270px);perspective:1100px;outline-offset:6px}
.cf-item{--w:min(56%,300px);position:absolute;left:50%;top:0;width:var(--w);height:100%;margin-left:calc(var(--w)/-2);cursor:pointer;opacity:calc(1 - var(--dd,0)*.4);transform:translate3d(calc(var(--d,0)*58%),0,calc(var(--dd,0)*-90px)) rotateY(calc(var(--d,0)*-30deg));z-index:calc(5 - var(--dd,0));transition:transform .9s var(--ease),opacity .7s var(--ease)}
.cf-item.far{opacity:0;pointer-events:none}
.cf-item .card{height:100%}
.cf-item:not(.is-on) .card :is(h3,p,.idx,.tag){opacity:0}
.cf-item .card :is(h3,p,.idx,.tag){transition:opacity .5s var(--ease)}
.cf-item:not(.is-on) .card::before{background:rgba(10,20,30,.45)}
.cf-ctl{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:16px}
.cf-b{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-strong);border-radius:50%;color:var(--silver);transition:background .3s,border-color .3s}
.cf-b:hover{background:rgba(185,220,244,.12);border-color:var(--sky)}
.cf-b svg{width:16px;height:16px}
.cf-dots{display:flex;gap:8px}
.cf-dots i{width:6px;height:6px;border-radius:50%;background:var(--line-strong);transition:background .4s,transform .4s}
.cf-dots i.on{background:var(--sky);transform:scale(1.35)}

/* expandable strips (single open) */
.acc-h{display:flex;align-items:center;gap:.55em;width:100%;padding:13px 0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.acc-h:hover .acc-pm,.acc.open .acc-pm{color:var(--sky)}
.acc-pm{position:relative;flex:none;width:14px;height:14px;margin-left:auto;color:var(--ink-3);transition:color .4s}
.acc-pm::before,.acc-pm::after{content:"";position:absolute;left:0;top:50%;width:14px;height:1px;margin-top:-.5px;background:currentColor;transition:transform .45s var(--ease)}
.acc-pm::after{transform:rotate(90deg)}
.acc.open .acc-pm::after{transform:rotate(0)}
.acc-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.acc.open .acc-b{grid-template-rows:1fr}
.acc-b>div{overflow:hidden}
.acc-b p{padding:0 0 14px calc(1.05em + .55em)}
/* gradient fill: cool sky light rises into the stage as it is revealed (scroll driven, made by JS) */
.fillglow{position:absolute;inset:auto 0 0 0;height:78%;z-index:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse 80% 100% at 50% 100%,rgba(185,220,244,.26),rgba(185,220,244,.08) 46%,transparent 72%)}
.pinned .hasbg>.wrap{position:relative;z-index:1}

/* ---------- 3b/3c/9b · operations, leadership, compliance (added 2026-11-06 from the client's V11 page) ---------- */
.ext svg{width:14px;height:14px;flex:none}
.nvda-copy>.ext,.fin-right>.ext{margin-top:16px}
.btn-s{min-height:44px;padding:0 16px;gap:14px;font-size:.84rem}
.vis-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

.ops-cards .c-row .ext{margin-top:6px;font-size:.84rem;padding:2px 0}

/* leadership: a row of portrait panels. One is wide (photo window + text), the others are strips with a vertical name.
   The panel width is the only layout animation; the photo keeps its size and the panel is a window onto it. */
.team-wrap{display:grid;gap:clamp(14px,2.6vh,26px)}
.team-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,4vw,64px);align-items:end}
.team-head h2{font-size:clamp(1.7rem,min(3vw,5.2vh),2.7rem)}
.team-head .lede{margin:0}
.tm-row{--gap:10px;--sw:76px;--pw:clamp(220px,24cqw,330px);--tw:calc(100cqw - 4*(var(--sw) + var(--gap)) - var(--pw));container-type:inline-size;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px;align-items:start}
.tm-panel{position:relative;overflow:hidden;min-width:0;border:1px solid var(--line-strong);background:#0c1822}
.tm-tab{position:relative;display:block;width:100%;height:clamp(210px,34vh,300px);padding:0;overflow:hidden;text-align:left;color:var(--ink)}
.tm-tab img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 20%);filter:saturate(.9)}
.tm-tab::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(10,20,30,.9) 0,rgba(10,20,30,.5) 38%,transparent 74%)}
.tm-tab:focus-visible{outline-offset:-4px}
.tm-cap{position:absolute;z-index:1;left:clamp(14px,1.6vw,22px);right:clamp(14px,1.6vw,22px);bottom:clamp(14px,2.4vh,24px);display:grid;gap:2px}
.tm-cap b{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.3vw,2.1rem);line-height:1.1;color:var(--silver)}
.tm-ttl{color:var(--sky);font-size:.92rem;line-height:1.35}
.tm-cap small{font-size:.82rem;color:var(--ink-2)}
.tm-text{padding:18px clamp(16px,2vw,24px) 22px}
.tm-idx,.tm-vname{display:none}
/* the three bio blocks: Role is the lead line (display face), Background is the reading text, EDA responsibilities is a ruled plaque at the foot */
.tm-rows{display:flex;flex-direction:column;gap:clamp(10px,2vh,26px)}
.tm-rows dt{margin-bottom:7px;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--sky-dim)}
.tm-rows dd{margin:0;font-size:clamp(.8rem,1.75vh,1rem);line-height:1.55;color:rgba(232,238,243,.88)}
.tm-rows>div:nth-child(1){position:relative;padding-bottom:clamp(12px,2vh,20px)}
.tm-rows>div:nth-child(1)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line-strong);transform-origin:left}
.tm-rows>div:nth-child(1) dd{font-family:var(--display);font-size:clamp(1.2rem,2.6vh,1.65rem);line-height:1.25;letter-spacing:.01em;color:var(--silver);text-wrap:balance}
.tm-rows>div:nth-child(2) dd{max-width:64ch;text-wrap:pretty}
.tm-rows>div:nth-child(3){position:relative;isolation:isolate;padding:clamp(8px,1.5vh,16px) clamp(14px,1.6vw,20px)}
.tm-rows>div:nth-child(3)::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--sky);transform-origin:50% 100%}
.tm-rows>div:nth-child(3)::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(185,220,244,.07)}
.tm-rows>div:nth-child(3) dd{color:var(--ink);text-wrap:pretty}
.pinned .team-wrap{height:100%;grid-template-rows:auto minmax(0,1fr);align-content:center}
.pinned .tm-row{display:flex;gap:var(--gap);align-items:stretch;max-height:700px}
.pinned .tm-panel{flex:0 0 var(--sw);transition:flex .45s cubic-bezier(.16,1,.3,1)}
.pinned .tm-panel.cur{flex:1 1 0px}
.pinned .tm-tab{position:absolute;top:0;bottom:0;left:calc((var(--sw) - var(--pw))/2);width:var(--pw);height:auto;cursor:pointer;transition:left .45s cubic-bezier(.16,1,.3,1)}
.pinned .tm-panel.cur .tm-tab{left:0}
.pinned .tm-tab img{transition:filter .4s}
.pinned .tm-panel:not(.cur) .tm-tab img{filter:saturate(.8) brightness(.72)}
.pinned .tm-panel:not(.cur):hover .tm-tab img{filter:saturate(.9) brightness(.95)}
.pinned .tm-cap{opacity:0;transform:translateY(8px);transition:opacity .15s,transform .15s}
.pinned .tm-panel.cur .tm-cap{opacity:1;transform:none;transition:opacity .35s .12s,transform .45s .12s}
.pinned .tm-text{position:absolute;top:0;bottom:0;left:var(--pw);width:var(--tw);display:flex;flex-direction:column;padding:clamp(32px,5vh,64px) clamp(22px,2.6vw,40px) clamp(14px,2.4vh,24px);opacity:0;visibility:hidden;transform:translateX(14px);transition:opacity .15s,transform .15s,visibility 0s .15s}
.pinned .tm-rows{flex:1;min-height:0}
.pinned .tm-rows>div:nth-child(3){margin-top:auto}
.pinned .tm-panel.cur .tm-text{opacity:1;visibility:visible;transform:none;transition:visibility 0s}
/* text entrance: once the panel is open, the three blocks build in one after another (--d is each block's start); words rise out of a mask, rules draw */
.rw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.rw>span{display:inline-block}
.pinned .tm-rows>div:nth-child(1){--d:.26s}
.pinned .tm-rows>div:nth-child(2){--d:.52s}
.pinned .tm-rows>div:nth-child(3){--d:.84s}
.pinned .tm-rows dt,.pinned .rw>span{opacity:0;transition:opacity .15s,transform .15s}
.pinned .tm-rows dt{transform:translateX(-8px)}
.pinned .rw>span{transform:translateY(115%)}
.pinned .tm-rows>div:nth-child(1)::after{transform:scaleX(0);transition:transform .15s}
.pinned .tm-rows>div:nth-child(3)::before{transform:scaleY(0);transition:transform .15s}
.pinned .tm-rows>div:nth-child(3)::after{opacity:0;transition:opacity .15s}
.pinned .tm-panel.cur .tm-rows dt{opacity:1;transform:none;transition:opacity .5s var(--d),transform .6s var(--ease) var(--d)}
.pinned .tm-panel.cur .rw>span{opacity:1;transform:none;transition:opacity .45s calc(var(--d) + .1s + min(var(--i)*10ms,.7s)),transform .8s cubic-bezier(.16,1,.3,1) calc(var(--d) + .1s + min(var(--i)*10ms,.7s))}
.pinned .tm-panel.cur .tm-rows>div:nth-child(1)::after{transform:none;transition:transform .8s cubic-bezier(.16,1,.3,1) calc(var(--d) + .2s)}
.pinned .tm-panel.cur .tm-rows>div:nth-child(3)::before{transform:none;transition:transform .7s cubic-bezier(.16,1,.3,1) var(--d)}
.pinned .tm-panel.cur .tm-rows>div:nth-child(3)::after{opacity:1;transition:opacity .6s var(--d)}
.pinned .tm-idx{display:block;position:absolute;z-index:2;left:calc(var(--sw)/2);top:14px;transform:translateX(-50%);font-size:.78rem;letter-spacing:.14em;color:var(--ink-2);pointer-events:none}
.pinned .tm-vname{display:block;position:absolute;z-index:2;left:calc(var(--sw)/2);bottom:14px;padding:12px 7px;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;white-space:nowrap;font-family:var(--display);font-size:1.05rem;letter-spacing:.04em;color:var(--silver);background:rgba(10,20,30,.78);pointer-events:none;transition:opacity .2s .1s}
.pinned .tm-panel.cur .tm-vname{opacity:0;transition:opacity .15s}
body.paused .tm-panel,body.paused .tm-tab,body.paused .tm-cap,body.paused .tm-text,body.paused .tm-vname,body.paused .tm-text *,body.paused .tm-text *::before,body.paused .tm-text *::after{transition-duration:0s!important;transition-delay:0s!important}

.cmp-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,80px);align-items:center}
.cmp-copy .lede{margin-top:16px}
.cmp-steps{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.4vh,26px) clamp(20px,3vw,44px);margin-top:clamp(16px,3.2vh,32px)}
.cmp-step{position:relative;padding-top:16px;font-size:.9rem;line-height:1.5;color:var(--ink-2)}
.cmp-step::before,.cmp-step::after{content:"";position:absolute;left:0;top:0;height:1px;width:100%;background:var(--line-strong)}
.cmp-step::after{height:2px;background:linear-gradient(90deg,var(--sky),var(--warm));transform-origin:left;transition:transform .9s var(--ease)}
.pinned .cmp-step::after{transform:scaleX(0)}
.pinned .cmp-step.lit::after{transform:scaleX(1)}
.pinned .cmp-step{opacity:.42;transition:opacity .6s var(--ease)}
.pinned .cmp-step.lit{opacity:1}
.cmp-step .ic{display:block;width:24px;height:24px;margin-bottom:6px;color:var(--sky)}
.cmp-step .idx{position:absolute;right:0;top:16px;font-size:.78rem;letter-spacing:.14em;font-variant-numeric:tabular-nums;color:var(--ink-3)}
.cmp-step h3{margin-bottom:4px;font-family:var(--display);font-weight:400;font-size:1.12rem;line-height:1.2;color:var(--silver)}
.msb-card{position:relative;padding:clamp(18px,2.2vw,30px);border:1px solid var(--line-strong);background:rgba(10,20,30,.8)}
.msb-card::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:linear-gradient(90deg,var(--warm),transparent);opacity:0;transition:opacity .7s var(--ease)}
.msb-card.on::before{opacity:1}
.msb-card h3{font-family:var(--display);font-weight:400;font-size:1.3rem;color:var(--silver)}
.msb-no{margin:10px 0 2px;font-family:var(--display);font-size:clamp(1.6rem,2.5vw,2.3rem);letter-spacing:.04em;line-height:1.1;color:var(--silver);overflow-wrap:anywhere}
.msb-src{font-size:.84rem;color:var(--ink-3)}
.msb-rows{display:grid;gap:8px;margin:clamp(12px,2vh,20px) 0 0}
.msb-rows>div{display:grid;grid-template-columns:8rem 1fr;gap:12px;padding-top:8px;border-top:1px solid var(--line);font-size:.9rem}
.msb-rows dt{padding-top:2px;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.msb-rows dd{margin:0;color:var(--ink)}
.msb-act{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(14px,2.4vh,22px) 0 12px}
.msb-card .note{font-size:.82rem}

/* triptych on wide screens: copy column, an open window for the plate's subject, card column */
@media (min-width:1081px){
  .nvda-grid{grid-template-columns:38% 34%;justify-content:space-between}
  .token-grid{grid-template-columns:40% 38%;justify-content:space-between}
  .str-grid{grid-template-columns:33% 42%;justify-content:space-between}
}
@media (max-width:1080px){
  .team-head{grid-template-columns:1fr}
    .eco-grid,.about-grid,.nvda-grid,.token-grid,.str-grid,.fin-grid,.team-grid,.cmp-grid{grid-template-columns:1fr}
  .bento{height:clamp(300px,40vh,420px)}
  .conv-end{grid-template-columns:1fr}
}
@media (max-width:860px){
  .cmp-steps{grid-template-columns:1fr}
  .tm-rows>div,.msb-rows>div{grid-template-columns:1fr;gap:4px}
  .bento{height:auto;grid-template-columns:1fr 1fr;grid-template-rows:none;gap:12px}
  .bento .card{grid-column:auto!important;grid-row:auto!important;min-height:230px}
  .bento .c-tall,.bento .c-wide{grid-column:1/3!important;min-height:300px}
  :root{--header-h:64px}
  .menu-btn{display:flex}
  .nav{display:none}
  .nav.open{display:flex;position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;padding:12px var(--gutter) 28px;background:var(--night);border-bottom:1px solid var(--line);font-size:1.05rem;color:var(--ink)}
  .nav.open a{display:block;width:100%;padding:16px 0;border-bottom:1px solid var(--line);color:var(--ink)}
  .pin{padding:calc(var(--header-h) + 44px) 0 72px}
  .hero .pin{align-items:stretch;justify-content:flex-end;min-height:max(100svh,720px)}
  .hero-art{--ax:.66;margin-top:-14cqh}
  .hero-bg{inset:0}
  .hero .pin::before{background:linear-gradient(to bottom,rgba(10,20,30,.2) 0,rgba(10,20,30,.1) 26%,rgba(10,20,30,.88) 60%,var(--night) 100%)}
  .hero h1{font-size:clamp(1.9rem,8.6vw,3rem)}
  .pause{bottom:22px}
  .bgplate{opacity:.5}
  .veil-l::after,.veil-c::after{background:radial-gradient(ellipse 85% 95% at 50% 52%,rgba(10,20,30,.82),rgba(10,20,30,.58))}
.veil-u::after{background:rgba(10,20,30,.64)}
  .eco-stage{display:none}
  .lay{padding:16px 0}
  .octant{margin-top:24px}
  .nvda-plate::after{background:rgba(10,20,30,.78)}
  .beam{display:none}
  .c-row p{max-width:62%}
  .panes{gap:30px}
  .path ol{grid-template-columns:1fr;row-gap:22px}
  .path ol::before,.path ol::after{display:none}
  .years{margin-top:22px}
  .fin-left,.fin-right{display:grid;gap:0}
  .readout{grid-template-columns:1fr 1fr}
  .ry{grid-column:1/-1}
  #chart{max-height:none}
  .ring-stage{aspect-ratio:auto;display:grid;gap:26px;padding-top:min(50vw,260px);width:100%;min-width:0}
  .ring-stage>svg{height:min(50vw,260px);bottom:auto}
  .node{position:static;translate:none;width:auto;max-width:none;background:none;padding:0;text-align:left;display:grid;grid-template-columns:22px 1fr;column-gap:12px}
  .node .ic{margin:2px 0 0;grid-column:1;grid-row:1/4;width:22px;height:22px}
  .node>*{grid-column:2}
  .conv .head{text-align:left}
  .lockup .plus{width:20px}
  .vision .pin::before{background:linear-gradient(to bottom,rgba(10,20,30,.7),rgba(10,20,30,.82))}
}
@media (max-width:520px){
  .c-split{padding:calc(150px + var(--pad)) var(--pad) var(--pad)}
  .c-split .card-media{right:0;width:auto;bottom:auto;height:150px}
  .c-split::before{background:linear-gradient(to bottom,transparent 90px,rgba(10,20,30,.9) 150px)}
  .c-row p{max-width:100%}
  .bento{grid-template-columns:1fr}
  .bento .card,.bento .c-tall,.bento .c-wide{grid-column:1!important}
  body{font-size:16px}
  .hero-actions .btn{width:100%}
  .brand-c{display:none}
  .brand{gap:10px}
  .brand img{height:26px}
  .brand-t{gap:0;padding-left:10px}
  .brand-n{font-size:.8rem;letter-spacing:.2em}
  :lang(zh) .brand-n{letter-spacing:.3em}
  .tools{gap:6px}
  .yr{padding-right:8px;margin-right:10px}
  .dlg-bar{padding:10px 14px}
  .dlg-bar h3{font-size:1rem}
}

@media (max-width:860px),(pointer:coarse){
  .bigword{display:none}
  .foot-nav a,.nav a,.brand{display:inline-flex;align-items:center;min-height:44px}
}
/* reduced motion (html.rm: the system setting is on and the visitor has not chosen "Play motion") */
html.rm .cf-item, html.rm .cf-item .card :is(h3,p,.idx){transition:none}
html.rm .acc-b, html.rm .acc-pm::before, html.rm .acc-pm::after{transition:none}
html.rm .card *, html.rm .card::before{animation:none!important}
html.rm{scroll-behavior:auto}
html.rm *, html.rm *::before, html.rm *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
html.rm .hero h1 .ln>span, html.rm .hero-rule, html.rm .hero .lede, html.rm .hero-actions, html.rm .hero-top, html.rm .hero-feats, html.rm .hero-tiny, html.rm .hud-base{animation:none!important}

/* Demo: architectural light, deliberate chapter controls and chronological evolution. */
.nav{gap:clamp(9px,1.15vw,26px)}
.hero h1{font-size:clamp(2.8rem,5.1vw,5.4rem);max-width:850px;line-height:1.07}
.hero-copy{max-width:860px}
.hero .pin::before{background:linear-gradient(90deg,rgba(4,15,27,.45),rgba(7,21,35,.12) 55%,transparent)}
.beams,.runs,.glint{display:none}
.hud-run,.hud-ticks{animation-duration:60s;opacity:.3}
.hero-art video{object-fit:cover}
.eco-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.eco-tabs button{padding:9px 14px;border:1px solid var(--line);font-size:.84rem;color:var(--ink-2);transition:background .3s,color .3s}
.eco-tabs button[aria-pressed="true"],.eco-tabs button:hover{background:var(--silver);color:var(--night)}
.eco-tabs button:focus-visible{outline-offset:3px}
.evolution{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;width:100%;min-width:0;aspect-ratio:auto;min-height:210px;align-items:start;padding-top:30px}
.evolution .node{position:relative;left:auto;top:auto;translate:none;width:auto;max-width:none;text-align:left;background:transparent;padding:28px 20px 10px 0;border-top:1px solid var(--line-strong);cursor:pointer;transition:opacity .6s,transform .8s var(--ease)}
.evolution .node::before{content:"";position:absolute;width:9px;height:9px;background:var(--sky);border-radius:50%;top:-5px;left:0}
.evolution .node .ic{margin:0 0 18px}
.evolution .node p{display:block!important;max-width:23ch}
.evolution .node .small{margin-top:10px}
.pinned .evolution .node{transform:translateY(36px)}
.pinned .evolution .node.vis{opacity:1;transform:none}
.pinned .evolution .node.lit::before{background:var(--warm)}
.selected-bar{transition:y .65s,height .65s}
@media(min-width:1081px){.hero-copy{width:62%}.hero h1{font-size:clamp(3rem,4.6vw,5.2rem)}}
@media(max-width:1080px){
 .nav{display:none}.menu-btn{display:flex}.nav.open{display:flex;position:fixed;inset:64px 0 auto;flex-direction:column;background:var(--night);padding:18px var(--gutter);gap:10px;align-items:stretch}
 .eco-stage{display:none}.eco-tabs{display:none}
 .evolution{padding-top:10px;grid-template-columns:1fr;gap:0}
 .evolution .node{padding:20px 0 20px 30px;border-top:0;border-left:1px solid var(--line-strong);display:block}
 .evolution .node::before{top:26px;left:-5px}
 .evolution .node .ic{float:left;margin:0 14px 0 0}
 .evolution .node p{max-width:60ch}
}
@media(max-width:520px){.hero h1{font-size:2.4rem}.hero-copy{width:100%}.hero .pin{min-height:100svh}.hero-actions{margin-top:24px}}

@media(max-width:1080px){.hero .pin::before{background:linear-gradient(to bottom,rgba(10,20,30,.12),rgba(10,20,30,.16) 28%,rgba(10,20,30,.78) 58%,var(--night) 100%)}}

html:not(.pinned) .eco-tabs{display:none}


/* ---- scene change: the old stage dims (JS-made .dim) and shrinks, the new one comes into focus; slides push like iOS ---- */
.dim{position:absolute;inset:0;z-index:40;background:#05090f;opacity:0;pointer-events:none}
.pinned .scene[data-enter="slideR"] .pin{box-shadow:-1px 0 0 var(--line),-60px 0 90px rgba(3,7,11,.5)}
.pinned .scene[data-enter="slideL"] .pin{box-shadow:1px 0 0 var(--line),60px 0 90px rgba(3,7,11,.5)}

/* ---- hover: every menu answers the pointer (hover previews, click commits) ---- */
.slab{cursor:pointer}
.eco-tabs button{transition:background .3s,color .3s,transform .4s var(--ease)}
.eco-tabs button:hover{transform:translateY(-3px)}
.acc-h>span{transition:transform .5s var(--ease)}
.acc-h:hover>span{transform:translateX(10px)}
.yr{transition:color .3s,transform .4s var(--ease)}
.yr:hover{transform:translateY(-3px)}
.tab{transition:color .3s,transform .4s var(--ease)}
.tab:hover{transform:translateY(-2px)}
.node{cursor:pointer}
@media (hover:hover){
  .pinned .tcard,.pinned .chain li,.pinned .lk,.pinned .bento .card,.pinned .bento-row .card{transition:translate .6s var(--ease),border-color .4s}
  .pinned .tcard:hover,.pinned .chain li:hover,.pinned .lk:hover,.pinned .bento .card:hover,.pinned .bento-row .card:hover{translate:0 -8px}
  .pinned .chain li:hover .ic,.pinned .lk:hover .ic{color:var(--silver)}
  .cf-item:not(.is-on):hover{translate:calc(var(--d,0)*-14px) -6px}
  .cf-item{transition:transform .9s var(--ease),opacity .7s var(--ease),translate .5s var(--ease)}
}
body.paused .dim{transition:none}
/* reduced motion (html.rm: the system setting is on and the visitor has not chosen "Play motion") */
html.rm .acc-h>span, html.rm .yr, html.rm .tab, html.rm .eco-tabs button{transition:none}
html.rm .acc-h:hover>span, html.rm .yr:hover, html.rm .tab:hover, html.rm .eco-tabs button:hover{transform:none}

/* ---- loop videos on the plates (mounted by site.js once the scene is near; the still stays underneath until the video plays) ---- */
.plate-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vis-art .plate-vid{object-position:64% 50%;transform-origin:64% 62%}
.nvda-plate video{opacity:.42;filter:saturate(.9)}
.pv-off{visibility:hidden}

/* ---- the central light ring breathes like a standby LED: a luminous halo, the ring line and the inner ring swell and fade together (one 4.2s breath) ---- */
.breath .b-halo{--x:70%;--y:50%;--w:55%;--h:98%;--c:rgba(0,0,0,0);--lo:.0;--hi:1;--t:4.2s;--d:0s;background:radial-gradient(closest-side,transparent 76%,rgba(150,215,255,.5) 90%,rgba(190,235,255,.75) 94%,transparent 100%);animation-name:ringBreath}
@keyframes ringBreath{0%,100%{opacity:var(--lo);transform:scale(.985)}50%{opacity:var(--hi);transform:scale(1.02)}}
.hud-base{animation:ringIn 2.6s .3s var(--ease) both,ringGlow 4.2s 3s ease-in-out infinite;filter:drop-shadow(0 0 0 rgba(150,215,255,0))}
.hud-in{animation:ringGlow2 4.2s ease-in-out infinite}
@keyframes ringGlow{0%,100%{opacity:.35;stroke-width:1.2;filter:drop-shadow(0 0 0 rgba(150,215,255,0))}50%{opacity:1;stroke-width:5;filter:drop-shadow(0 0 16px rgba(170,225,255,1)) drop-shadow(0 0 5px rgba(220,245,255,.9))}}
@keyframes ringGlow2{0%,100%{opacity:.1}50%{opacity:1}}
body.paused .b-halo{animation-play-state:paused}

/* ---- the LED band under the pedestal breathes (4.8s): a warm glow along the rim swells and fades, with a thin bright core ---- */
.led-breath path{fill:none;stroke-linecap:round;mix-blend-mode:screen}
.led-soft{stroke:#ffc77f;stroke-width:15;opacity:0;animation:ledSoft 4.8s ease-in-out infinite}
.led-core{stroke:#fff0d2;stroke-width:3;opacity:0;animation:ledCore 4.8s ease-in-out infinite}
@keyframes ledSoft{0%,100%{opacity:0;stroke-width:6}50%{opacity:1;stroke-width:30}}
@keyframes ledCore{0%,100%{opacity:0}50%{opacity:1}}
/* reduced motion (html.rm: the system setting is on and the visitor has not chosen "Play motion") */
html.rm .led-soft, html.rm .led-core{animation:none}

/* Strategy: the background plate turns with the tabs (angle and zoom come from --sr / --sr set in site.js; individual properties compose with the entry tween's transform) */
/* Strategy turntable. .floor3d is the plate's own 1536x1024 pixel space, scaled like object-fit:cover (--fs from site.js).
   .fl-plane is the floor, 100px = one disc radius, disc centre at (900,900) of an 1800x1350 box (9 radii back and to each side,
   4.5 toward the camera so every painted point stays in front of it), mapped onto the photo by a homography (matrix3d) fitted
   to the plate's camera: horizon y=76, f=1400, f*h=3037, disc at depth 6.28 -> (768,560). site.js shortens a strip while it
   points toward the camera (fitStrips) for the same reason.
   .fl-rotor turns the three textured strips about the disc; .fl-disc is the disc cut from the plate, laid over the strips' inner ends. */
.floor-plate>img{display:block;width:100%;height:100%;object-fit:cover}
.floor3d{position:absolute;left:50%;top:50%;width:1536px;height:1024px;transform:translate(-50%,-50%) scale(var(--fs,1));pointer-events:none}
.floor3d .fl-plane{position:absolute;left:0;top:0;width:1800px;height:1350px;transform-origin:0 0;
  transform:matrix3d(14,0,0,0, -7.68,-.76,0,-.01, 0,0,1,0, -864.96,4198.28,0,15.28)}
.floor3d .fl-rotor{position:absolute;inset:0}
.floor3d .fl-strip{position:absolute;left:900px;top:900px;width:840px;height:var(--w);margin-top:calc(var(--w) / -2);transform-origin:0 50%;
  transform:rotate(var(--a)) translateX(60px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 620px,transparent 840px);mask-image:linear-gradient(90deg,#000 0,#000 620px,transparent 840px)}
.floor3d .fl-tex{display:flex;height:100%;width:max-content}
.floor3d .fl-tex img{display:block;height:100%;width:auto;max-width:none}
.floor3d .fl-tex .fl-flip{transform:scaleX(-1)}
.floor3d .fl-strip::after{content:"";position:absolute;inset:0;mix-blend-mode:screen;opacity:0;
  background:linear-gradient(90deg,transparent 0,var(--fl,rgba(200,235,255,.9)) 50px,transparent 100px) no-repeat;background-size:100px 100%;width:840px}
.floor3d .fl-led{--fl:rgba(255,205,140,.95)}
.floor3d .fl-marble{--fl:rgba(255,255,255,.55)}
.floor3d .fl-disc{position:absolute;left:534px;top:476px;width:470px;height:176px;clip-path:ellipse(226px 81px at 235px 88px)}
.pinned .floor3d .fl-strip::after{opacity:1;animation:flFlow 4.5s cubic-bezier(.4,0,.6,1) infinite}
.pinned .floor3d .fl-led::after{animation-delay:-1.5s}
.pinned .floor3d .fl-glass::after{animation-delay:-3s}
@keyframes flFlow{0%{transform:translateX(-100px)}100%{transform:translateX(640px)}}
body.paused .floor3d .fl-strip::after{animation-play-state:paused}
/* reduced motion (html.rm: the system setting is on and the visitor has not chosen "Play motion") */
html.rm .floor3d .fl-strip::after{animation:none;opacity:0}

/* eight nav links no longer fit beside the wordmark up to 1260px: the menu button takes over there (added with the V11 pages) */
@media(min-width:861px) and (max-width:1260px){
  .menu-btn{display:flex}
  .nav{display:none}
  .nav.open{display:flex;position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;padding:12px var(--gutter) 28px;background:var(--night);border-bottom:1px solid var(--line);font-size:1.05rem;color:var(--ink)}
  .nav.open a{display:block;width:100%;padding:16px 0;border-bottom:1px solid var(--line);color:var(--ink)}
}
@media(min-width:1261px) and (max-width:1400px){.nav{font-size:.84rem}}

/* V11 additions to existing scenes (2026-11-06) */
.about-tags{margin-top:28px;max-width:640px}
.flow-line{display:flex;flex-wrap:wrap;align-items:center;margin-top:16px;padding:0;list-style:none;font-family:var(--display);font-size:1.05rem;line-height:1.3;color:var(--silver)}
.flow-line li{display:flex;align-items:center}
.flow-line li+li::before{content:"";flex:none;width:clamp(18px,2.4vw,30px);height:1px;margin:0 12px;background:linear-gradient(90deg,var(--sky),var(--warm))}
.nvda-view{margin-top:20px;max-width:60ch}
.nvda-view h3{font-family:var(--display);font-weight:400;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.25;color:var(--silver)}
.nvda-view p{margin-top:4px;font-size:.93rem;color:var(--ink-2)}
.nvda-view+.nvda-view{margin-top:18px}
.nvda-view+.caveat{margin-top:8px}

/* ==========================================================================
   V11 alignment, pass 2 (2026-11-06): global page rail, the V11 menu, heading
   accents, and reworked Operations, NVDA, token, Strategy, Robinhood,
   Convergence, Collaboration and Vision layouts.
   ========================================================================== */

/* the second clause of a scene heading carries the light (V11 sets it in its accent colour) */
.hl{color:var(--sky)}

/* small uppercase labels (V11's card eyebrows) */
.tag{display:block;font-size:.72rem;font-weight:600;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--sky)}
.card .tag{margin:0 0 6px;font-size:.72rem;letter-spacing:.16em;color:var(--sky)}

/* menu: Collaboration is the call to action, as in V11 */
.nav .nav-cta{padding:9px 16px;margin-left:4px;border:1px solid var(--line-strong);color:var(--silver);transition:background .3s,border-color .3s,color .3s}
.nav .nav-cta::after{display:none}
.nav .nav-cta:hover,.nav .nav-cta.active{background:rgba(185,220,244,.12);border-color:var(--sky);color:#fff}
.nav.open .nav-cta{width:auto;margin:16px 0 0;padding:14px 18px;border:1px solid var(--line-strong)}

/* global page rail: one mark per scene; the current one is long and lit, the label shows on hover / focus */
.rail{display:none;position:fixed;right:clamp(8px,1vw,18px);top:50%;z-index:90;transform:translateY(-50%);padding:12px 7px 10px;background:rgba(10,20,30,.74);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (min-width:861px){.rail{display:block}}
.rail ol{display:flex;flex-direction:column;align-items:flex-end}
.rail a{position:relative;display:flex;align-items:center;justify-content:center;width:22px;height:17px}
.rail a::after{content:"";width:2px;height:10px;background:rgba(223,231,237,.42);transition:height .5s var(--ease),background .4s}
.rail a:hover::after{background:var(--silver)}
.rail a.on{height:40px}
.rail a.on::after{height:30px;background:var(--sky)}
.rail .rl{display:none}
.rail .rn{position:absolute;right:30px;top:50%;padding:5px 10px;white-space:nowrap;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:rgba(10,20,30,.9);border:1px solid var(--line);opacity:0;transform:translate(8px,-50%);transition:opacity .3s,transform .4s var(--ease);pointer-events:none}
.rail a:hover .rn,.rail a:focus-visible .rn{opacity:1;transform:translate(0,-50%)}
.rail-count{display:grid;justify-items:center;gap:1px;margin-top:10px;padding-top:8px;border-top:1px solid var(--line);font-family:var(--display);font-size:.72rem;line-height:1.15;letter-spacing:.04em;color:var(--ink-3);white-space:nowrap}
.rail-count b{font-weight:400;color:var(--silver)}
.rail-count span{display:none}
.rail-count b{font-size:.92rem}

/* hero: V11's top line, three focus chips and the closing line */
.hero-top{display:grid;gap:8px;margin-bottom:22px;font-size:.76rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--sky);animation:heroIn 1.2s .15s var(--ease) both}
.hero-top>span:first-child{display:flex;align-items:center;gap:12px}
.hero-top>span:first-child::before{content:"";flex:none;width:28px;height:1px;background:var(--sky)}
.hero-en{font-weight:500;letter-spacing:.42em;color:var(--silver)}
.hero h1 .hl{color:var(--sky)}
.hero-rule{margin:24px 0 20px}
.hero-actions{margin-top:30px}
.hero-feats{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;animation:heroIn 1.2s .95s var(--ease) both}
.hero-feats li{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border:1px solid var(--line-strong);background:rgba(10,20,30,.4);font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.hero-feats i{width:4px;height:4px;border-radius:50%;background:var(--sky)}
.hero-tiny{margin-top:16px;font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-2);text-shadow:0 1px 10px rgba(4,10,16,.8);animation:heroIn 1.2s 1.05s var(--ease) both}
@media (max-height:760px) and (min-width:861px){.hero-top{margin-bottom:14px}.hero-feats{margin-top:20px}.hero-actions{margin-top:22px}.hero-rule{margin:18px 0 14px}}

/* about: V11's line above the four themes */
.about-mark{margin-top:24px}
.about-sig{margin-bottom:12px;font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--sky)}
.about-tags{margin-top:0}

/* operations: heading row, the two entities joined by a bridge, the four services, two cards */
.ops-wrap{display:grid;gap:clamp(12px,2.4vh,24px)}
.ops-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,4vw,64px);align-items:end}
.ops-head h2{font-size:clamp(1.8rem,min(3.3vw,5.6vh),3rem)}
.ops-head .lede{margin:0}
.ops-bridge{display:grid;grid-template-columns:minmax(0,1fr) clamp(80px,11vw,170px) minmax(0,1fr);align-items:stretch}
.ops-node{position:relative;display:grid;align-content:start;gap:8px;padding:clamp(14px,2.4vh,24px) clamp(18px,2vw,28px);border:1px solid var(--line-strong);background:rgba(10,20,30,.72)}
.ops-node::before{content:"";position:absolute;left:-1px;top:-1px;width:42%;height:2px;background:linear-gradient(90deg,var(--sky),transparent)}
.ops-node .ic{position:absolute;right:clamp(16px,2vw,26px);top:clamp(14px,2.4vh,22px);width:28px;height:28px;color:var(--sky)}
.ops-node b{padding-right:40px;font-family:var(--display);font-weight:400;font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.2;color:var(--silver)}
.ops-sub{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:.86rem;line-height:1.45;color:var(--ink-2)}
.ops-sub i{flex:none;width:3px;height:3px;border-radius:50%;background:var(--sky)}
.ops-link{display:flex;align-items:center;gap:10px;padding:0 6px}
.ops-line{flex:1;display:block;height:1px;background:linear-gradient(90deg,var(--sky),var(--warm));transform-origin:left}
.ops-line:last-child{background:linear-gradient(90deg,var(--warm),var(--sky));transform-origin:right}
.ops-x{font-family:var(--display);font-size:clamp(1.8rem,2.6vw,2.6rem);line-height:1;color:var(--silver)}
.ops-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px}
.ops-chips li{padding:8px 16px;border:1px solid var(--line-strong);border-radius:999px;background:rgba(10,20,30,.5);font-size:.84rem;color:var(--ink)}
.ops-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ops-cards .c-row{justify-content:flex-end;min-height:clamp(146px,22vh,206px);padding-top:calc(var(--pad) + 18px)}
.ops-cards .c-row strong{max-width:72%;font-size:clamp(1.1rem,1.5vw,1.4rem);line-height:1.2}
.ops-cards .c-row p{max-width:60%}
.ops-cards .c-row .ext{margin-top:6px;font-size:.84rem;padding:2px 0}
.ops-note{font-size:.8rem}
.veil-o::after{background:linear-gradient(to bottom,rgba(10,20,30,.84),rgba(10,20,30,.56) 45%,rgba(10,20,30,.8))}
.veil-o .bgplate{opacity:.85}
@media (max-width:860px){
  .ops-head{grid-template-columns:1fr;gap:14px}
  .ops-bridge{grid-template-columns:1fr}
  .ops-link{flex-direction:column;height:64px;padding:6px 0}
  .ops-line{width:1px;height:auto;background:linear-gradient(var(--sky),var(--warm))}
  .ops-line:last-child{background:linear-gradient(var(--warm),var(--sky))}
  .ops-x{font-size:1.6rem}
  .ops-chips{justify-content:flex-start}
  .ops-cards{grid-template-columns:1fr}
  .ops-cards .c-row p{max-width:100%}
}

/* nvda: an engraved GPU package in the open window, its cores light with the scroll, it leans toward the pointer */
@media (min-width:1081px){.nvda-grid{grid-template-columns:34% minmax(0,1fr) 30%;justify-content:normal;gap:clamp(20px,2.6vw,44px)}}
.nvda-chip{position:relative;display:grid;justify-items:center;gap:18px;align-self:center}
.chip-tilt{--tx:0deg;--ty:0deg;width:min(100%,clamp(220px,40vh,380px));transform:perspective(1000px) rotateX(calc(14deg + var(--ty))) rotateY(calc(-16deg + var(--tx)));transition:transform 1s var(--ease)}
.chip{display:block;width:100%;height:auto;overflow:visible}
.chip .pins line{stroke:rgba(185,220,244,.55);stroke-width:2.4}
.chip .caps rect{fill:rgba(223,231,237,.5)}
.chip .core{fill:var(--sky);fill-opacity:.55}
.chip .core.hot{animation:coreBlink 4.2s ease-in-out var(--d,0s) infinite}
@keyframes coreBlink{0%,100%{fill-opacity:.3}50%{fill-opacity:1}}
body.paused .chip .core{animation-play-state:paused}
.chip-n{font-family:var(--display);font-size:40px;letter-spacing:.08em;fill:var(--silver)}
.chip-k{font-family:var(--text);font-size:9px;font-weight:600;letter-spacing:.46em;fill:var(--sky)}
.chip .sheen{mix-blend-mode:screen;transform:translateX(-60%);transition:transform 1.6s var(--ease)}
.nvda-chip.in .chip .sheen{transform:translateX(60%)}
.chip-eco{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.chip-eco span{display:inline-flex;align-items:center;gap:8px}
.chip-eco span+span::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--sky)}
.nvda-view .tag{margin-bottom:4px}
@media (min-width:1081px){#nvda h2{font-size:clamp(1.8rem,min(2.9vw,5vh),2.7rem)}}
.nvda-cav{padding:14px 18px;background:rgba(185,220,244,.07);border:1px solid var(--line)}
.nvda-cav p{color:var(--ink-2)}
.nvda-view+.nvda-cav{margin-top:16px}
@media (max-width:1080px){.nvda-chip{justify-self:center;width:min(100%,320px)}.chip-tilt{width:min(100%,260px)}}

/* token: the cited figure is the scene's centre of weight */
.token-head h2{font-size:clamp(1.8rem,min(3.2vw,5.4vh),2.9rem);max-width:none}
.tok-fig{--fl:1;position:relative;margin-top:clamp(16px,3.4vh,34px);padding-top:clamp(12px,2.2vh,20px)}
.tok-fig::before{content:"";position:absolute;left:0;top:0;height:1px;width:calc(var(--fl)*100%);background:linear-gradient(90deg,var(--warm),var(--sky) 35%,transparent)}
.tok-fig .big{display:flex;align-items:flex-start;margin:6px 0 8px;font-family:var(--display);font-weight:400;font-size:clamp(5rem,min(11.5vw,19vh),10.5rem);line-height:.86;letter-spacing:-.02em;color:var(--silver)}
.tok-fig .cy{margin:.1em .04em 0 0;font-size:.48em;color:var(--sky)}
.tok-fig .unit{align-self:flex-end;margin:0 0 .08em .06em;font-size:.42em;color:var(--sky)}
.tok-fig .note{max-width:50ch;font-size:.8rem}
.tok-fig .flow-line{margin-top:12px}

/* strategy: two systems meet in the heading, rows read as label + statement */
h2.str-h{display:grid;justify-items:start;font-size:clamp(1.6rem,min(2.5vw,4.4vh),2.4rem);line-height:1.12}
.str-h .sys{display:block}
.str-h .sys-k{display:block;font-size:2.1em;line-height:.98;letter-spacing:.02em}
.str-h .sys-x{display:flex;align-items:center;gap:.4em;margin:.22em 0 .18em 1.2em;font-size:1.3em;line-height:1;color:var(--silver)}
.str-h .sys-x::before,.str-h .sys-x::after{content:"";flex:none;width:2.2em;height:1px;background:linear-gradient(90deg,transparent,var(--sky))}
.str-h .sys-x::after{background:linear-gradient(90deg,var(--sky),transparent)}
.str-h .sys-b{padding-left:1.6em}
.pane-k{display:flex;align-items:baseline;gap:12px;margin-bottom:4px}
.pane-n{font-family:var(--display);font-size:clamp(1.5rem,2.2vw,2.1rem);line-height:1;color:var(--silver)}
.pane .sub{padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line);font-size:.9rem;color:var(--ink-2)}
.pane ul{gap:10px}
.pane li{display:grid;grid-template-columns:11.5em minmax(0,1fr);gap:2px 16px;font-size:.95rem;line-height:1.45}
.pane li b{font-weight:600;color:var(--silver)}
@media (max-width:860px){.pane li{grid-template-columns:1fr}.str-h .sys-b{padding-left:.9em}}

/* robinhood: three themes always open, EDA's angle, and every year in one table */
.fin-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:clamp(14px,2.8vh,26px)}
.fin-list>li{position:relative;padding:14px 14px 16px;border:1px solid var(--line);background:rgba(10,20,30,.55)}
.fin-list>li::before{content:"";position:absolute;left:-1px;top:-1px;width:40%;height:2px;background:linear-gradient(90deg,var(--sky),transparent)}
.fin-list>li .ic{display:none}
.fin-list h3{display:block;margin:6px 0 4px;font-size:clamp(1rem,1.25vw,1.16rem);line-height:1.25}
.fin-list p{font-size:.84rem;line-height:1.45;color:var(--ink-2)}
.rh-note{position:relative;max-width:none;margin-top:12px;padding:16px 18px;border:1px solid var(--line-strong);background:rgba(10,20,30,.62);font-size:inherit}
.rh-note h3{margin:6px 0;font-size:clamp(1.15rem,1.6vw,1.4rem);color:var(--silver)}
.rh-note p{max-width:62ch;font-size:.9rem;color:var(--ink-2)}
.rh-note .ext{margin-top:8px}
.fin-snap{margin:0;padding:clamp(16px,2.2vw,28px);border:1px solid var(--line-strong);background:rgba(16,28,41,.9)}
.fin-snap h3{margin-top:6px;font-size:clamp(1.3rem,1.9vw,1.7rem);color:var(--silver)}
.fin-snap h3 small{margin-left:8px;font-family:var(--text);font-size:.8rem;letter-spacing:.02em;color:var(--ink-3)}
.fin-table{width:100%;margin-top:clamp(8px,1.8vh,16px);border-collapse:collapse}
.fin-table th,.fin-table td{padding:clamp(8px,1.5vh,13px) 10px;text-align:left;border-bottom:1px solid var(--line)}
.fin-table th:first-child,.fin-table td:first-child{padding-left:0}
.fin-table thead th{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);border-bottom-color:var(--line-strong)}
.fin-table tbody th{font-family:var(--display);font-weight:400;font-size:1.15rem;color:var(--ink);white-space:nowrap}
.fin-table tbody th small{font-family:var(--text);font-size:.72rem;letter-spacing:.06em;color:var(--ink-3)}
.fin-table td.num{font-family:var(--display);font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.1;color:var(--silver);white-space:nowrap}
.fin-table .v-rev{color:var(--sky)}
.fin-table td.neg{color:#e3aaa2}
.fin-table tbody tr{cursor:pointer;transition:background .4s,opacity .4s}
.fin-table tbody tr:focus-visible{outline-offset:-2px}
.pinned .fin-table tbody tr{opacity:.55}
.pinned .fin-table tbody tr.sel,.pinned .fin-table tbody tr:hover{opacity:1}
.fin-table tbody tr.sel{background:rgba(185,220,244,.08)}
.fb-h{width:36%}
.fb-key{display:flex;align-items:center;gap:6px;font-weight:500;letter-spacing:.06em;text-transform:none}
.fb-key i{flex:none;width:12px;height:4px}
.k-rev{background:var(--sky)}
.k-ni{margin-left:8px;background:var(--silver)}
.fb-track{position:relative;display:block;height:16px}
.fb-zero{position:absolute;top:-5px;bottom:-5px;width:1px;background:var(--line-strong)}
.fb{position:absolute;height:5px;transform-origin:left;transition:transform .9s var(--ease)}
.fb.n{transform-origin:right}
.fb.rev{top:2px;background:var(--sky)}
.fb.ni{top:9px;background:var(--silver)}
.pinned .fin-snap:not(.in) .fb{transform:scaleX(0)}
.fin-table tbody tr:nth-child(2) .fb{transition-delay:.08s}.fin-table tbody tr:nth-child(3) .fb{transition-delay:.16s}.fin-table tbody tr:nth-child(4) .fb{transition-delay:.24s}.fin-table tbody tr:nth-child(5) .fb{transition-delay:.32s}
.fin-snap .note{margin-top:12px;font-size:.8rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:860px){.fin-list{grid-template-columns:1fr}.fb-h,.fb-cell{display:none}}
@media (max-height:780px) and (min-width:861px){.fin-list p{font-size:.8rem}.fin-list>li{padding:12px 12px 13px}.rh-note{padding:13px 16px}}

/* convergence: four nodes read left to right, then the summary and the four themes joined by × */
.evolution{min-height:0;padding-top:clamp(14px,3vh,30px)}
.evolution .node{padding:24px clamp(14px,2vw,30px) 6px 0}
.evolution .node .small{display:block;margin:0 0 8px;font-size:.72rem;letter-spacing:.16em;color:var(--sky)}
.evolution .node b{font-size:clamp(1.4rem,2.2vw,2rem)}
.evolution .node p{max-width:24ch;margin-top:8px;font-size:.95rem}
.evolution .node .ic{position:absolute;right:clamp(14px,2vw,30px);top:22px;margin:0;width:24px;height:24px}
.evolution .node:not(:last-child)::after{content:"";position:absolute;right:2px;top:-4px;width:7px;height:7px;border-top:1px solid var(--sky);border-right:1px solid var(--sky);transform:rotate(45deg)}
.conv-end{grid-template-columns:1fr;gap:16px}
.conv-sum{position:relative;display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr);gap:clamp(16px,3vw,48px);align-items:center;padding:clamp(14px,2.4vh,24px) clamp(18px,2.4vw,32px);border:1px solid var(--line-strong);background:rgba(10,20,30,.62)}
.conv-sum::before,.collab-end::before{content:"";position:absolute;left:-1px;top:-1px;width:30%;height:2px;background:linear-gradient(90deg,var(--sky),var(--warm) 60%,transparent)}
.conv-sum h3{font-size:clamp(1.2rem,1.8vw,1.6rem);color:var(--silver)}
.conv-sum p{max-width:none;font-size:.95rem;color:var(--ink-2)}
.x-tags{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 30px}
.x-tags li{position:relative;padding:7px 14px;border:1px solid var(--line-strong);border-radius:999px;font-size:.84rem;color:var(--ink-2)}
.x-tags li+li::before{content:"×";position:absolute;left:-21px;top:50%;transform:translateY(-52%);font-family:var(--display);font-size:1.05rem;color:var(--sky)}
@media (max-width:1080px){.evolution .node:not(:last-child)::after{display:none}.evolution .node .ic{position:static;float:left;margin:0 14px 0 0}.conv-sum{grid-template-columns:1fr;gap:8px}.x-tags{justify-content:flex-start}}

/* collaboration */
.lk{grid-template-columns:auto 1fr}
.lk .ic{grid-row:1/4}
.lk>span,.lk .tag{grid-column:2}
.lk .tag{font-style:normal;font-family:var(--text);margin-bottom:2px}
.bento-row .card h3{font-size:clamp(1.05rem,1.45vw,1.35rem)}
.bento-row .card p{font-size:.86rem}
.collab-end{position:relative;display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1.58fr);gap:clamp(16px,3vw,48px);align-items:center;padding:clamp(12px,2.2vh,22px) clamp(18px,2.4vw,32px);border:1px solid var(--line-strong);background:rgba(10,20,30,.62)}
.collab-end h3{font-size:clamp(1.15rem,1.7vw,1.5rem);color:var(--silver)}
.collab-end p{max-width:none;font-size:.95rem;color:var(--ink-2)}
.col-wrap .head{max-width:1000px}
.collab-end{background:rgba(10,20,30,.82)}
@media (max-width:860px){.collab-end{grid-template-columns:1fr;gap:8px}}

/* compliance: the V11 label sits on the icon's line */
.cmp-step .tag{position:absolute;left:34px;top:20px}

/* vision: centred, as in V11; the mark, two lines, the three principles and the signature */
.vision .pin::before{background:radial-gradient(ellipse 62% 72% at 50% 52%,rgba(10,20,30,.84),rgba(10,20,30,.56) 72%,rgba(10,20,30,.4)),linear-gradient(to bottom,var(--slate),transparent 18%,transparent 80%,var(--night))}
.vision-copy{display:grid;justify-items:center;max-width:880px;margin-inline:auto;text-align:center}
.vis-mark{display:grid;place-items:center;width:clamp(84px,12vh,116px);aspect-ratio:1;margin-bottom:clamp(14px,2.8vh,26px);border:1px solid var(--line-strong);border-radius:50%;background:radial-gradient(circle,rgba(185,220,244,.1),rgba(10,20,30,.5) 72%)}
.vis-mark img{width:56%;height:auto}
.vision h2{font-size:clamp(2.1rem,min(4.4vw,7.2vh),3.9rem)}
.vision .lines{justify-items:center;margin-top:22px}
.vis-actions{justify-content:center;margin-top:26px}
.principles{justify-content:center;gap:10px;margin-top:24px;padding-top:0;border-top:0;font-family:var(--text);font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.principles li{display:inline-flex;align-items:center;gap:.6em;padding:8px 14px;border:1px solid var(--line-strong);border-radius:999px}
.vis-sig{margin-top:clamp(16px,3vh,28px);font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-3)}

/* short desktop windows (1280x720 and similar): the V11 additions must still fit one screen */
@media (max-height:780px) and (min-width:861px){
  #about h2{font-size:clamp(1.7rem,4.9vh,2.4rem)}
  .about-head .lede{margin-top:12px}
  .about-mark{margin-top:14px}
  .about-sig{margin-bottom:8px}
  .cf{margin-top:12px}
  .ops-wrap{gap:10px}
  .ops-head h2{font-size:clamp(1.6rem,5vh,2.4rem)}
  .ops-node{padding:12px 18px;gap:6px}
  .ops-cards .c-row{min-height:132px}
  .ops-chips li{padding:6px 14px}
}

/* ecosystem · Octant step: copy on the left (label, name, sub-line, text, three steps), the picture takes the right-hand stage */
.octant{display:block}
.octant .tag{margin-bottom:6px}
.octant h3{margin-bottom:2px;font-size:clamp(1.5rem,2.3vw,2rem)}
.oct-sub{font-size:.95rem;color:var(--silver)}
.octant .oct-p{max-width:52ch;margin-top:10px;font-size:.92rem;line-height:1.55;color:var(--ink-2)}
.oct-flow{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px;padding:0;list-style:none}
.oct-flow::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,var(--sky),var(--warm) 55%,var(--line-strong))}
.oct-flow li{position:relative;padding:14px 12px 0 0}
.oct-flow li::before{content:"";position:absolute;left:0;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--night);border:1px solid var(--sky)}
.oct-flow li:last-child::before{border-color:var(--warm)}
.oct-flow b{display:block;font-weight:500;font-size:.72rem;letter-spacing:.14em;color:var(--ink-3)}
.oct-flow span{display:block;margin-top:2px;font-family:var(--display);font-size:1.05rem;line-height:1.25;color:var(--silver)}
.octant .oct-img{margin-top:18px;aspect-ratio:16/9}
.pinned .octant .oct-img{display:none}
.pinned .eco-swap{height:270px}
.eco-stage{position:relative}
.stack{transition:opacity .7s var(--ease)}
.oct-stage{position:absolute;left:50%;top:50%;z-index:2;width:min(100%,clamp(340px,40vw,600px));aspect-ratio:4/3;margin:0;overflow:hidden;border:1px solid var(--line-strong);background:var(--stone);opacity:0;visibility:hidden;transform:translate(-50%,-46%) scale(.94);transition:opacity .7s var(--ease),transform 1s var(--ease),visibility 0s .7s}
.oct-stage img{position:absolute;inset:-4%;width:108%;height:108%;max-width:none;object-fit:cover}
.oct-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,20,30,.88),rgba(10,20,30,.1) 45%,transparent)}
.oct-stage figcaption{position:absolute;left:clamp(16px,2vw,28px);right:clamp(16px,2vw,28px);bottom:clamp(14px,2vh,24px);z-index:1;display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.oct-stage figcaption b{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,2.6vw,2.4rem);color:var(--silver)}
.oct-stage figcaption span{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.eco-stage.oct-on .stack{opacity:0}
.eco-stage.oct-on .oct-stage{opacity:1;visibility:visible;transform:translate(-50%,-50%);transition-delay:.15s,.15s,0s}
.eco-stage.oct-on .oct-stage img{animation:drift 24s ease-in-out infinite alternate}
body.paused .oct-stage img{animation-play-state:paused}

/* about: the plate is a cover-sized box (picture + its light), placed like the old 118%-wide image so window and sculpture both show */
#aboutPlate{container-type:size}
.ab-art{--aw:max(118cqw,150cqh);position:absolute;width:var(--aw);aspect-ratio:1536/1024;left:calc(-18cqw + (118cqw - var(--aw))/2);top:calc((100cqh - var(--aw)/1.5)/2);transform-origin:67.5% 60%}
.ab-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ab-fx,.ab-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ab-fx{overflow:visible}
.ab-halo{mix-blend-mode:screen;transform-box:fill-box;transform-origin:center;animation:abHalo 7s ease-in-out infinite}
@keyframes abHalo{0%,100%{opacity:.35;transform:scale(.94)}50%{opacity:.95;transform:scale(1.04)}}
.ab-rings{mix-blend-mode:screen}
.ab-ring{fill:none;stroke:#ffc98a;stroke-width:9;opacity:0;animation:abRing 4.8s ease-in-out infinite}
.ab-core{fill:none;stroke:#fff0d6;stroke-width:1.6;opacity:0;animation:abCore 4.8s ease-in-out infinite}
.ab-ring.r2,.ab-core.r2{animation-delay:-2.4s}
@keyframes abRing{0%,100%{opacity:0}50%{opacity:.7}}
@keyframes abCore{0%,100%{opacity:.15}50%{opacity:.95}}
.ab-ripples ellipse{fill:none;stroke:rgba(214,236,252,.75);stroke-width:1.2;vector-effect:non-scaling-stroke;transform-box:view-box;transform-origin:1034px 745px;opacity:0;animation:abRipple 7.5s cubic-bezier(.2,.6,.35,1) infinite}
.ab-ripples ellipse:nth-child(2){animation-delay:2.5s}
.ab-ripples ellipse:nth-child(3){animation-delay:5s}
@keyframes abRipple{0%{opacity:0;transform:scale(1)}12%{opacity:.85}100%{opacity:0;transform:scale(2.5)}}
.ab-dust{mix-blend-mode:screen}
body.paused .ab-fx *{animation-play-state:paused}
/* reduced motion (html.rm: the system setting is on and the visitor has not chosen "Play motion") */
html.rm .ab-fx *{animation:none!important}
html.rm .ab-halo{opacity:.5}
html.rm .ab-core{opacity:.5}
html.rm .ab-dust{display:none}

/* about: the four themes, all visible in a 2x2 grid; the scroll lights one at a time, hover or focus previews, click jumps */
.about-head{max-width:min(640px,100%)}
@media (min-width:861px){#about h2{font-size:clamp(1.8rem,min(2.9vw,5vh),2.7rem)}}
.ab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(100%,640px);margin-top:clamp(16px,3vh,28px)}
.ab-grid .card{min-height:clamp(120px,17vh,170px);justify-content:flex-end;padding-top:calc(var(--pad) + 18px);cursor:pointer}
.ab-grid .card h3{font-size:clamp(1.02rem,1.35vw,1.25rem);margin-bottom:4px}
.ab-grid .card p{max-width:none;font-size:.84rem;line-height:1.45}
.ab-grid .card::after{content:"";position:absolute;left:-1px;top:-1px;height:2px;width:55%;background:linear-gradient(90deg,var(--sky),var(--warm) 60%,transparent);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.ab-grid .card-media{transition:transform .8s var(--ease),filter .6s var(--ease)}
.pinned .ab-grid .card{transition:border-color .5s var(--ease),translate .6s var(--ease)}
.pinned .ab-grid .card:not(.on) .card-media{filter:saturate(.75) brightness(.66)}
.pinned .ab-grid .card:not(.on) :is(h3,p,.tag){opacity:.78}
.pinned .ab-grid .card.on{border-color:var(--sky)}
.pinned .ab-grid .card.on::after{transform:scaleX(1)}
.pinned .ab-grid .card.on .card-media{--zs:1.06}
.ab-grid .card :is(h3,p,.tag){transition:opacity .5s var(--ease)}
@media (hover:hover){.pinned .ab-grid .card:hover{translate:0 -4px}}
@media (max-width:860px){.ab-grid{grid-template-columns:1fr}.ab-grid .card{min-height:170px}}
@media (max-height:780px) and (min-width:861px){.ab-grid{margin-top:12px;gap:8px}.ab-grid .card{min-height:116px}.ab-grid .card p{font-size:.8rem}}

.c-ab::before{background:linear-gradient(to top,rgba(10,20,30,.96) 0,rgba(10,20,30,.8) 52%,rgba(10,20,30,.46) 100%)}
.pinned .ab-grid .card.on .card-media{filter:saturate(.9) brightness(.92)}

/* doorway (data-enter="gate", Token -> Strategy): one camera layer; the walls part, the sky grows, the floor comes forward. Made by site.js */
.gate-cam{position:absolute;inset:0;z-index:30;overflow:hidden;will-change:transform;pointer-events:none}
.gate-cam>*{position:absolute;inset:0}
.pinned .scene .gate-cam .pin.gate-leaf{position:absolute;inset:0;height:auto;will-change:transform}
.pinned .scene .gate-cam .pin.gate-txt{background:none}
.gate-open>.wrap{visibility:hidden!important}   /* the scene entry leaves an inline visibility on it */
.gate-sky{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}   /* only loads the picture */
.gate-skyc{position:absolute;left:0;right:0;top:0;z-index:-2;overflow:hidden;opacity:.95}
.gate-skyc img{width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.gate-cam .gate-leaf::after{opacity:var(--veil,1)}
.gate-bloom{opacity:0;background:radial-gradient(ellipse 34% 60% at 50% var(--fy,67%),rgba(255,250,240,.55),rgba(220,236,250,.18) 45%,transparent 72%);mix-blend-mode:screen}
.gate-edge{position:absolute;top:0;z-index:5;width:46px;pointer-events:none}
.ge-l{background:linear-gradient(90deg,transparent,rgba(255,243,220,.12) 70%,rgba(255,243,220,.6) 98%,#fff3dc)}
.ge-r{background:linear-gradient(90deg,#fff3dc,rgba(255,243,220,.6) 2%,rgba(255,243,220,.12) 30%,transparent)}

/* leadership: the floor ring. On each change of person (.run restarted by sTeam) a point of light with a short tail runs once round it
   (1.7s; it starts and ends at the back of the ring, behind the portrait row, so it comes out from behind the people and goes back), drawing the ring lit behind it; then the ring flashes and keeps breathing. Above the veil, below the content */
.pin>.ld-fx{opacity:1;z-index:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;display:none}
.pinned .pin>.ld-fx{display:block}
.ld-fx path{fill:none;stroke-linecap:round}
.ld-glow{stroke:#ffb468;stroke-width:12;opacity:.12}
.ld-line{stroke:#ffe2b8;stroke-width:1.4;opacity:.25}
.ld-draw{stroke:#ffc47e;stroke-width:7;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0}
.ld-tail{stroke:#ffd9a6;stroke-width:6;stroke-dasharray:.07 .93;stroke-dashoffset:.07;opacity:0}
.ld-head{stroke:#fff6e6;stroke-width:16;stroke-dasharray:.0001 .9999;opacity:0}
.ld-core{stroke:#fffaf0;stroke-width:5;stroke-dasharray:.0001 .9999;opacity:0}
.ld-fx.run .ld-draw{animation:ldDraw 1.7s cubic-bezier(.45,0,.3,1) forwards,ldBreath 4.2s ease-in-out 2.3s infinite}
.ld-fx.run :is(.ld-tail,.ld-head,.ld-core){animation:ldRun 1.7s cubic-bezier(.45,0,.3,1) forwards}
.ld-fx.run .ld-tail{animation-name:ldTail}
.ld-fx.run .ld-glow{animation:ldFlash .6s ease-out 1.7s both,ldGlow 4.2s ease-in-out 2.3s infinite}
.ld-fx.run .ld-line{animation:ldLine .6s ease-out 1.7s both,ldLineB 4.2s ease-in-out 2.3s infinite}
@keyframes ldDraw{0%{stroke-dashoffset:1;opacity:.75}100%{stroke-dashoffset:0;opacity:.75}}
@keyframes ldRun{0%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-1;opacity:1}}
@keyframes ldTail{0%{stroke-dashoffset:.07;opacity:.9}100%{stroke-dashoffset:-.93;opacity:.9}}
@keyframes ldFlash{0%{opacity:.12}35%{opacity:.85}100%{opacity:.45}}
@keyframes ldGlow{0%,100%{opacity:.45}50%{opacity:.18}}
@keyframes ldLine{0%{opacity:.25}35%{opacity:1}100%{opacity:.7}}
@keyframes ldLineB{0%,100%{opacity:.7}50%{opacity:.35}}
@keyframes ldBreath{0%,100%{opacity:.75}50%{opacity:.3}}
body.paused .ld-fx *{animation-play-state:paused}

/* large screens: site.js sets --z = max(1, min(vw/1920, vh/1080)); the content layer is zoomed so 4K shows the 1920x1080 composition, larger.
   Backgrounds, plates and the effects drawn in picture space are full-bleed already and are not zoomed. */
.wrap,.header,.rail,.pause{zoom:var(--z,1)}
.header .wrap{zoom:1}