@import url("../assets/board.css");

:root{
  --bg:#05070d;
  --panel:#0b101c;
  --text:#f2f5fa;
  --muted:rgba(242,245,250,.6);
  --faint:rgba(242,245,250,.36);
  --line:rgba(255,255,255,.1);
  --cyan:#38e8ff;
  --lime:#c8ff4d;
  --coral:#ff6b5a;
  --violet:#a78bfa;
  --gold:#e8c27a;
  --cobalt:#3d5bff;
  --paper:#f2efe7;
  --ink:#0a0d14;
  --ease:cubic-bezier(.2,.8,.2,1);
}

html{scroll-padding-top:110px}
body{background:var(--bg);color:var(--text)}

/* ---------- ambient ---------- */
.site-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:
  radial-gradient(120% 90% at 76% -12%,rgba(61,91,255,.2),transparent 62%),
  radial-gradient(80% 60% at -4% 42%,rgba(56,232,255,.07),transparent 60%),var(--bg)}
.site-bg__aurora{position:absolute;inset:-12% -6%;width:112%;height:124%;object-fit:cover;opacity:.3;filter:saturate(1.2) contrast(1.05);mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 92%)}
.site-bg__grid{position:absolute;inset:0;background-image:linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);background-size:clamp(64px,7vw,104px) clamp(64px,7vw,104px);mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 74%)}
.site-bg__blob{position:absolute;border-radius:50%;filter:blur(96px);opacity:.42;animation:drift 24s ease-in-out infinite}
.site-bg__blob--a{width:44vw;height:44vw;left:-12vw;top:-8vw;background:radial-gradient(circle,rgba(56,232,255,.3),transparent 66%)}
.site-bg__blob--b{width:38vw;height:38vw;right:-8vw;top:34vh;background:radial-gradient(circle,rgba(167,139,250,.22),transparent 66%);animation-delay:-9s}
.site-bg__blob--c{width:30vw;height:30vw;left:38vw;bottom:-10vh;background:radial-gradient(circle,rgba(200,255,77,.12),transparent 68%);animation-delay:-16s}
@keyframes drift{50%{transform:translate3d(3vw,-2vh,0) scale(1.08)}}

/* ---------- laser ---------- */
#laser{position:fixed;inset:0;z-index:71;pointer-events:none;mix-blend-mode:screen}
.laser-dot{position:fixed;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;z-index:72;pointer-events:none;background:radial-gradient(circle,#fff 0%,#c8ff4d 38%,rgba(200,255,77,0) 72%);box-shadow:0 0 18px 4px rgba(200,255,77,.55);opacity:0;transition:opacity .35s}
body.laser-on .laser-dot{opacity:1}

/* ---------- nav ---------- */
.site-nav{position:fixed;left:0;right:0;top:0;z-index:80;transition:background .4s,border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
.site-nav.is-scrolled{background:rgba(5,7,13,.78);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border-bottom-color:rgba(255,255,255,.08)}
.nav-in{height:78px;display:flex;align-items:center;gap:clamp(18px,2.4vw,40px)}
.nav-brand{display:flex;align-items:center;gap:11px;flex:none}
.nav-brand img{width:32px;height:32px;filter:drop-shadow(0 0 14px rgba(56,232,255,.26))}
.nav-brand b{display:block;font-size:13.5px;font-weight:600;letter-spacing:.06em;line-height:1.1}
.nav-brand i{display:block;font-style:normal;font-family:"Space Grotesk",sans-serif;font-size:7px;letter-spacing:.22em;color:rgba(255,255,255,.42);margin-top:3px}
.nav-menu{display:flex;align-items:center;justify-content:flex-end;gap:clamp(12px,1.6vw,26px);margin-left:auto;min-width:0}
.nav-menu a{position:relative;white-space:nowrap;font-size:12.5px;color:rgba(255,255,255,.62);padding:7px 0;transition:color .25s}
.nav-menu a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-menu a:hover,.nav-menu a[aria-current="page"]{color:#fff}
.nav-menu a:hover::after,.nav-menu a[aria-current="page"]::after{transform:scaleX(1)}
.nav-right{display:flex;align-items:center;gap:14px;flex:none;margin-left:18px}
.nav-back{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:rgba(255,255,255,.82);font-size:12.5px;letter-spacing:.04em;white-space:nowrap;transition:border-color .3s,background .3s,color .3s,transform .3s}
.nav-back span{font-size:14px;line-height:1;transition:transform .3s var(--ease)}
.nav-back:hover{border-color:rgba(200,255,77,.5);background:rgba(200,255,77,.1);color:#fff}
.nav-back:hover span{transform:translateX(-3px)}
.nav-status{display:flex;align-items:center;gap:7px;font-family:"Space Grotesk",sans-serif;font-size:8.5px;letter-spacing:.16em;color:rgba(255,255,255,.4)}
.nav-status i{width:5px;height:5px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime);animation:pulse 2.4s infinite}
.nav-burger{display:none;width:40px;height:40px;border:1px solid rgba(255,255,255,.16);border-radius:12px;place-items:center}
.nav-burger span{display:block;width:16px;height:1.5px;background:#fff;margin:3px auto;transition:transform .3s,opacity .3s}
.nav-burger.is-open span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.nav-burger.is-open span:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)}
.nav-drawer{position:fixed;inset:78px 0 0;z-index:79;background:rgba(5,7,13,.97);backdrop-filter:blur(20px);padding:28px clamp(20px,5vw,40px) 40px;display:none;flex-direction:column;gap:4px}
.nav-drawer.is-open{display:flex}
.nav-drawer a{padding:15px 0;font-size:19px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:center;color:rgba(255,255,255,.86)}
.nav-drawer a small{font-family:"Space Grotesk",sans-serif;font-size:9px;letter-spacing:.18em;color:rgba(255,255,255,.34)}

/* ---------- masthead ---------- */
.mast{position:relative;padding:clamp(140px,16vh,200px) 0 clamp(56px,7vw,96px)}
.mast-in{position:relative;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.45fr);gap:clamp(30px,5vw,80px);align-items:end}
.mast-in>div{min-width:0}
.mast-kicker{display:inline-flex;align-items:center;gap:12px;font-family:"Space Grotesk",sans-serif;font-size:10.5px;letter-spacing:.26em;color:rgba(255,255,255,.5);text-transform:uppercase}
.mast-kicker i{width:26px;height:1px;background:var(--lime);display:block}
.mast h1{margin-top:22px;font-size:clamp(42px,7vw,100px);line-height:1.03;letter-spacing:-.045em;font-weight:700;max-width:100%}
.mast--compact h1{font-size:clamp(38px,6.1vw,90px)}
.mast h1 .ln{display:block}
.mast-sub{margin-top:26px;max-width:640px;font-size:15px;line-height:1.9;color:var(--muted)}
.mast-aside{align-self:end;padding-bottom:8px;min-width:0}
.mast-legend{display:grid;gap:14px;border-left:1px solid rgba(255,255,255,.14);padding-left:22px}
.mast-legend div{display:flex;justify-content:space-between;gap:18px;font-size:12px;color:var(--faint)}
.mast-legend b{font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.82);font-weight:500;text-align:right}
.mast-index{position:absolute;right:clamp(12px,3vw,40px);top:clamp(120px,15vh,180px);font-family:"Space Grotesk",sans-serif;font-size:clamp(80px,13vw,190px);font-weight:700;line-height:.8;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.12);pointer-events:none;user-select:none}

/* shaped words */
.shaped{position:relative;display:inline-block;padding:.015em .2em .07em;margin:0 .03em;z-index:0;isolation:isolate;color:var(--ink)}
.shaped::before{content:"";position:absolute;inset:4% -5% 0;z-index:-1;background:linear-gradient(102deg,var(--lime) 0%,#9ef6d2 58%,var(--cyan) 100%);clip-path:polygon(0 12%,100% 0,96% 88%,4% 100%);transform:rotate(-1.1deg);border-radius:2px}
.shaped--violet::before{background:linear-gradient(102deg,var(--violet),#6f8dff 60%,var(--cyan))}
.shaped--gold::before{background:linear-gradient(102deg,var(--gold),#f0d8a4 60%,var(--lime))}
.outline{color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.5)}
.serif-em{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--lime)}

/* ---------- sections ---------- */
.sec{position:relative;padding:clamp(70px,9vw,126px) 0;border-top:1px solid rgba(255,255,255,.08)}
.sec--flush{padding-top:0;border-top:0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(24px,4vw,60px);margin-bottom:clamp(34px,4vw,58px)}
.sec-head h2{font-size:clamp(30px,4.4vw,62px);line-height:1.02;letter-spacing:-.045em;font-weight:700;max-width:760px}
.sec-head p{max-width:390px;font-size:13.5px;line-height:1.9;color:var(--muted)}
.sec-idx{font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.24em;color:var(--faint);margin-bottom:14px;display:block}

/* heading shapes: each section differs */
.h-tab{position:relative;display:inline-block;padding-left:26px}
.h-tab::before{content:"";position:absolute;left:0;top:.1em;bottom:.08em;width:7px;background:var(--lime);border-radius:2px;transform:skewY(-9deg)}
.h-bracket{position:relative;display:inline-block;padding:6px 22px}
.h-bracket::before,.h-bracket::after{content:"";position:absolute;width:18px;height:18px;border:1px solid var(--cyan);opacity:.8}
.h-bracket::before{left:0;top:0;border-right:0;border-bottom:0}
.h-bracket::after{right:0;bottom:0;border-left:0;border-top:0}
.h-underline{position:relative;display:inline-block}
.h-underline::after{content:"";position:absolute;left:0;right:8%;bottom:-10px;height:3px;background:linear-gradient(90deg,var(--gold),transparent);border-radius:2px;transform:skewX(-18deg)}
.h-chip{display:inline-flex;align-items:center;gap:16px}
.h-chip em{font-style:normal;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--lime);color:var(--ink);font-family:"Space Grotesk",sans-serif;font-size:15px;font-weight:700;flex:none;box-shadow:0 0 0 1px rgba(200,255,77,.5),0 14px 34px -14px rgba(200,255,77,.7)}

/* ---------- animation variants ---------- */
[data-anim]{opacity:0;transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease),clip-path 1s var(--ease);transition-delay:var(--d,0s)}
[data-anim="rise"]{transform:translateY(34px)}
[data-anim="slide"]{transform:translateX(-42px)}
[data-anim="slide-r"]{transform:translateX(42px)}
[data-anim="zoom"]{transform:scale(.94)}
[data-anim="blur"]{filter:blur(14px)}
[data-anim="clip"]{clip-path:inset(0 0 100% 0)}
[data-anim].is-in{opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0)}
html.capture [data-anim]{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;transition:none!important}

/* ---------- materials ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.filters button{height:38px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.14);font-size:12.5px;color:rgba(255,255,255,.66);transition:all .3s var(--ease)}
.filters button:hover{border-color:rgba(255,255,255,.4);color:#fff}
.filters button.is-on{background:var(--lime);border-color:var(--lime);color:var(--ink);font-weight:600}
.mgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.mcard{position:relative;border:1px solid rgba(255,255,255,.1);border-radius:20px;overflow:hidden;background:rgba(255,255,255,.028);transition:transform .5s var(--ease),border-color .4s,box-shadow .5s;display:flex;flex-direction:column}
.mcard:hover{transform:translateY(-8px);border-color:rgba(200,255,77,.38);box-shadow:0 30px 60px -34px rgba(0,0,0,.9)}
.mcard[hidden]{display:none}
.mthumb{position:relative;aspect-ratio:4/5;overflow:hidden;background:#0d111b;container-type:inline-size;isolation:isolate}
.mthumb::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.07),transparent 42%);pointer-events:none;z-index:5}
.mthumb .sku{position:absolute;left:14px;top:13px;font-family:"Space Grotesk",sans-serif;font-size:9px;letter-spacing:.2em;color:rgba(255,255,255,.62);z-index:6}
.mthumb .accent{position:absolute;width:62%;aspect-ratio:1;border-radius:50%;filter:blur(30px);opacity:.55;z-index:0}
.mthumb .grid{position:absolute;inset:0;background-image:linear-gradient(to right,rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.055) 1px,transparent 1px);background-size:26px 26px;z-index:0}

/* mini mock layouts — 版式示意，不是最终印刷稿 */
.mock{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;padding:9cqw 7cqw 7cqw;font-family:"Space Grotesk","Noto Sans SC Subset","Microsoft YaHei",sans-serif;color:#0a0d14;overflow:hidden}
.mock img{width:7cqw;height:7cqw;display:block}
.mock small{font-size:2.6cqw;letter-spacing:.12em;font-weight:500;opacity:.62}
.mock .m-top{display:flex;align-items:center;justify-content:space-between;gap:3cqw}
.mock .m-title{font-size:12.5cqw;font-weight:700;line-height:1.02;letter-spacing:-.05em;margin-top:auto}
.mock .m-title em{font-style:normal;display:inline-block;padding:0 .18em;background:#0a0d14;color:#c8ff4d;transform:rotate(-1.2deg)}
.mock .m-sub{margin-top:3.5cqw;font-size:3cqw;line-height:1.6;letter-spacing:.02em;opacity:.7}
.mock .m-foot{margin-top:auto;padding-top:3.5cqw;border-top:1px solid rgba(10,13,20,.22);display:flex;justify-content:space-between;align-items:center;gap:2cqw;font-size:2.5cqw;letter-spacing:.08em}
.mock .m-tag{display:inline-flex;align-items:center;gap:1.4cqw;font-size:2.6cqw;font-weight:600;letter-spacing:.04em}
.mock .m-tag::before{content:"";width:1.8cqw;height:1.8cqw;border-radius:50%;background:currentColor}
.mock .m-rule{height:1px;background:currentColor;opacity:.2;margin:4cqw 0}
.mock .m-code{display:grid;grid-template-columns:repeat(5,1fr);gap:1.2cqw;width:16cqw;height:16cqw;margin-top:4cqw}
.mock .m-code i{background:currentColor;opacity:.85}
.mock .m-code i:nth-child(2n){opacity:.2}

.mthumb--poster{background:linear-gradient(150deg,#f4f1e9,#dcd5c4)}
.mthumb--poster .accent{right:-16%;top:-10%;background:var(--lime)}
.mthumb--poster .grid{opacity:.25;filter:invert(1)}
.mthumb--poster .m-title{font-size:12cqw}
.mthumb--poster .m-title u{text-decoration:none;box-shadow:inset 0 -.18em 0 #c8ff4d}
.mthumb--poster .m-foot{border-top-color:rgba(10,13,20,.18)}

.mthumb--book{background:linear-gradient(160deg,#111827,#0a0e18)}
.mthumb--book .accent{left:-16%;top:-12%;background:var(--cyan)}
.mthumb--book .mock{color:#f2efe7;padding-top:7cqw}
.mthumb--book .m-title{font-size:11.5cqw;margin-top:4cqw}
.mthumb--book .m-title em{background:var(--lime);color:#0a0d14}
.mthumb--book .m-foot{border-top-color:rgba(255,255,255,.2)}
.mthumb--book .m-side{position:absolute;right:0;top:0;bottom:0;width:13cqw;background:linear-gradient(180deg,var(--lime),#7af3c0);opacity:.9}
.mthumb--book .m-side span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(90deg);font-size:2.4cqw;letter-spacing:.3em;color:#0a0d14;white-space:nowrap}

.mthumb--flag{background:linear-gradient(160deg,#0a0d14,#101826)}
.mthumb--flag .accent{left:-12%;bottom:-16%;background:var(--gold)}
.mthumb--flag .mock{color:#0a0d14;padding:0}
.mthumb--flag .m-flag{position:absolute;inset:10cqw 14cqw 9cqw;background:linear-gradient(170deg,#c8ff4d,#9ef6d2 68%,#38e8ff);border-radius:2px;padding:7cqw 6cqw;display:flex;flex-direction:column;box-shadow:0 18px 40px -20px #000;clip-path:polygon(0 0,100% 0,100% 92%,88% 100%,12% 100%,0 92%)}
.mthumb--flag .m-title{font-size:10.5cqw;margin-top:6cqw}
.mthumb--flag .m-foot{border-top-color:rgba(10,13,20,.25)}

.mthumb--story{background:linear-gradient(200deg,#2a1030,#0b0e1a 62%)}
.mthumb--story .accent{right:-18%;bottom:-16%;background:var(--coral)}
.mthumb--story .mock{color:#f7f2ec}
.mthumb--story .m-title{font-size:11cqw;margin-top:3cqw}
.mthumb--story .m-title em{background:var(--gold);color:#0a0d14}
.mthumb--story .m-foot{border-top-color:rgba(255,255,255,.22)}
.mthumb--story .m-code{position:absolute;right:7cqw;bottom:18cqw;background:#f2efe7;padding:2cqw;border-radius:1.5cqw;color:#0a0d14}

.mthumb--banner{background:linear-gradient(150deg,#0c1430,#0a2a44)}
.mthumb--banner .accent{right:-12%;top:-14%;background:var(--cyan)}
.mthumb--banner .mock{color:#f2f5fa;padding-right:6cqw}
.mthumb--banner .m-title{font-size:9.5cqw;margin-top:auto}
.mthumb--banner .m-title em{background:linear-gradient(90deg,var(--cyan),var(--lime));color:#0a0d14}
.mthumb--banner .m-foot{border-top-color:rgba(255,255,255,.22)}
.mthumb--banner .m-arrow{position:absolute;right:6cqw;bottom:18cqw;width:12cqw;height:12cqw;border:1px solid rgba(255,255,255,.4);border-radius:50%;display:grid;place-items:center;font-size:4.5cqw;color:#c8ff4d}

.mthumb--card{background:linear-gradient(160deg,#101826,#070a12)}
.mthumb--card .accent{left:-14%;top:-10%;background:var(--violet)}
.mthumb--card .m-card{color:#0a0d14;position:absolute;left:11cqw;right:11cqw;top:16cqw;height:24cqw;border-radius:2cqw;background:linear-gradient(120deg,#f2efe7,#ded8c8);padding:4.5cqw;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 18px 34px -16px #000;transform:rotate(-4deg)}
.mthumb--card .m-card--back{color:#f2efe7;top:34cqw;transform:rotate(3deg);background:linear-gradient(120deg,#101a2c,#1d2a44);color:#f2efe7}
.mthumb--card .m-card b{font-size:4.2cqw;letter-spacing:.02em}
.mthumb--card .m-card span{font-size:2.3cqw;letter-spacing:.14em;opacity:.6}
.mthumb--card .m-card img{width:6cqw;height:6cqw}
.mthumb--card .m-foot{margin-top:auto}

.mthumb--standee{background:linear-gradient(160deg,#081018,#111a2a)}
.mthumb--standee .accent{right:-14%;top:-12%;background:var(--lime)}
.mthumb--standee .m-standee{color:#0a0d14;position:absolute;inset:8cqw 20cqw 6cqw;background:linear-gradient(170deg,#f4f1e9,#ded8c8);border-radius:1.6cqw;padding:7cqw 5cqw;display:flex;flex-direction:column;box-shadow:0 24px 44px -18px #000}
.mthumb--standee .m-standee::after{content:"";position:absolute;left:8%;right:8%;bottom:-4cqw;height:4cqw;background:linear-gradient(180deg,#2a3346,#101620);border-radius:0 0 2cqw 2cqw}
.mthumb--standee .m-top{display:flex;align-items:center;justify-content:space-between;gap:3cqw}
.mthumb--standee img{width:7cqw;height:7cqw}
.mthumb--standee small{font-size:2.6cqw;letter-spacing:.12em;opacity:.62}
.mthumb--standee .m-sub{margin-top:3.5cqw;font-size:3cqw;line-height:1.6;opacity:.7}
.mthumb--standee .m-title{font-size:9.5cqw;margin-top:8cqw}
.mthumb--standee .m-title em{background:#0a0d14;color:#c8ff4d}
.mthumb--standee .m-foot{border-top-color:rgba(10,13,20,.2)}
.mbody{padding:16px 16px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.mbody h3{font-size:14.5px;font-weight:650;letter-spacing:.01em}
.mbody p{font-size:11.5px;line-height:1.7;color:var(--faint)}
.mspec{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);font-family:"Space Grotesk",sans-serif;font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.44)}
.mspec>span:first-child{white-space:nowrap}
.mstatus{display:inline-flex;align-items:center;gap:5px;margin-left:auto;color:var(--lime);white-space:nowrap}
.mstatus i{flex:none;width:5px;height:5px;border-radius:50%;background:currentColor}
.mstatus--wait{color:var(--gold)}
.mstatus--todo{color:rgba(255,255,255,.4)}

.spec-table{margin-top:clamp(40px,5vw,70px);border-top:1px solid rgba(255,255,255,.12)}
.spec-row{display:grid;grid-template-columns:52px 1.2fr 1fr .8fr .9fr;gap:18px;align-items:center;padding:18px 4px;border-bottom:1px solid rgba(255,255,255,.07);font-size:12.5px;color:rgba(255,255,255,.66);transition:background .3s,padding .3s}
.spec-row:hover{background:rgba(255,255,255,.025);padding-left:14px}
.spec-row b{font-family:"Space Grotesk",sans-serif;color:rgba(255,255,255,.34);font-weight:500;font-size:11px;letter-spacing:.08em}
.spec-row strong{color:#fff;font-weight:600;font-size:13.5px}
.spec-row span{font-size:11.5px}

.mini-matrix{margin-top:clamp(34px,4vw,56px);border:1px solid rgba(255,255,255,.1);border-radius:20px;background:rgba(255,255,255,.02);padding:clamp(20px,2.4vw,30px)}
.mini-matrix__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.mini-matrix__head h3{font-size:13px;font-weight:650;letter-spacing:.14em;color:rgba(255,255,255,.86)}
.mini-matrix__head span{max-width:460px;font-size:11.5px;line-height:1.8;color:var(--faint)}
.mini-matrix .spec-table{margin-top:18px;border-top:0}
.mini-matrix .spec-row{padding:14px 4px;font-size:11.5px}
.mini-matrix .spec-row:first-child{border-bottom-color:rgba(255,255,255,.14);font-family:"Space Grotesk",sans-serif;font-size:10px;letter-spacing:.12em;color:var(--faint)}
.mini-state{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.06em;white-space:nowrap}
.mini-state::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.mini-state.is-build{color:var(--lime)}
.mini-state.is-ok{color:var(--cyan)}
.mini-state.is-plan{color:var(--gold)}

/* ---------- company ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:20px;overflow:hidden}
.stat{background:#080c15;padding:clamp(22px,2.6vw,34px)}
.stat b{display:block;font-family:"Space Grotesk",sans-serif;font-size:clamp(30px,3.6vw,52px);line-height:1;letter-spacing:-.04em;font-weight:600}
.stat>span{display:block;margin-top:10px;font-size:11.5px;color:var(--faint);letter-spacing:.04em}
.zone-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.zone{position:relative;border:1px solid rgba(255,255,255,.1);border-radius:22px;overflow:hidden;background:#080c15;min-height:330px;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;transition:transform .5s var(--ease),border-color .4s}
.zone:hover{transform:translateY(-6px);border-color:rgba(56,232,255,.35)}
.zone__art{position:absolute;inset:0;overflow:hidden}
.zone__art .glow{position:absolute;width:62%;aspect-ratio:1;border-radius:50%;filter:blur(50px);opacity:.55}
.zone--a .glow{background:var(--cyan);left:-12%;top:-18%}
.zone--b .glow{background:var(--violet);right:-14%;top:-10%}
.zone--c .glow{background:var(--lime);left:20%;bottom:-24%}
.zone--d .glow{background:var(--gold);right:-10%;bottom:-20%}
.zone__art .lines{position:absolute;inset:0;background-image:linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(70% 70% at 62% 26%,#000,transparent)}
.zone__icon{position:absolute;right:clamp(10px,2vw,26px);top:clamp(14px,2vw,26px);width:min(46%,260px);color:var(--cyan);opacity:.62;transition:opacity .4s,transform .6s var(--ease);filter:drop-shadow(0 0 18px rgba(56,232,255,.18))}
.zone:hover .zone__icon{opacity:.9;transform:translateY(-4px)}
.zone--b .zone__icon{color:var(--violet);filter:drop-shadow(0 0 18px rgba(167,139,250,.2))}
.zone--c .zone__icon{color:var(--lime);filter:drop-shadow(0 0 18px rgba(200,255,77,.16))}
.zone--d .zone__icon{color:var(--gold);filter:drop-shadow(0 0 18px rgba(232,194,122,.18))}
.zone__art .desk{position:absolute;border-radius:6px;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.14)}
.zone__art .desk--1{left:12%;top:38%;width:34%;height:9%}
.zone__art .desk--2{right:14%;top:30%;width:26%;height:7%}
.zone__body{position:relative;z-index:1;margin-top:auto}
.zone__body h3{font-size:20px;font-weight:650}
.zone__body p{margin-top:8px;font-size:12.5px;line-height:1.8;color:var(--muted);max-width:420px}
.zone__note{display:inline-flex;margin-top:14px;height:26px;align-items:center;padding:0 10px;border-radius:999px;border:1px solid rgba(232,194,122,.35);color:var(--gold);font-size:10.5px;letter-spacing:.06em;background:rgba(232,194,122,.06)}

.people{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.person{border:1px solid rgba(255,255,255,.1);border-radius:20px;overflow:hidden;background:#080c15;transition:transform .5s var(--ease),border-color .4s}
.person:hover{transform:translateY(-6px);border-color:rgba(200,255,77,.32)}
.person__face{aspect-ratio:1/1;position:relative;display:grid;place-items:center;overflow:hidden;background:
  radial-gradient(circle at 50% 34%,rgba(255,255,255,.14),transparent 42%),
  linear-gradient(160deg,#141b2b,#0a0e18)}
.person__face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.03);transition:transform .9s var(--ease)}
.person:hover .person__face img{transform:scale(1.05)}
.person__face::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(5,8,14,.78),rgba(5,8,14,.04) 48%,rgba(5,8,14,.3))}
.person__face svg{width:58%;height:auto;opacity:.85}
.person__face span{position:absolute;top:12px;left:14px;z-index:2;font-family:"Space Grotesk",sans-serif;font-size:13px;letter-spacing:.08em;color:rgba(255,255,255,.72);text-shadow:0 1px 10px rgba(0,0,0,.7);-webkit-text-stroke:0}
.person__face::after{content:"工作场景示意";position:absolute;bottom:11px;left:12px;z-index:2;padding:3px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(5,8,14,.6);font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.76)}
.person__body{padding:16px}
.person__body h3{font-size:14.5px;font-weight:650}
.person__body p{margin-top:5px;font-size:11.5px;color:var(--faint)}

.video-panel{position:relative;border:1px solid rgba(255,255,255,.12);border-radius:24px;overflow:hidden;min-height:420px;display:grid;place-items:center;background:
  radial-gradient(90% 90% at 50% 0%,rgba(61,91,255,.28),transparent 60%),
  linear-gradient(160deg,#080d18,#05080f)}
.video-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,7,13,.88),rgba(5,7,13,.12) 38%,transparent 62%);pointer-events:none;z-index:1}
.video-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34}
.video-panel .play{position:relative;z-index:2;width:86px;height:86px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(10px);transition:transform .4s var(--ease),background .3s}
.video-panel .play:hover{transform:scale(1.07);background:rgba(200,255,77,.16)}
.video-panel .play::before{content:"";width:0;height:0;border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.video-panel .vcap{position:absolute;left:24px;bottom:22px;right:24px;display:flex;justify-content:space-between;align-items:end;gap:20px;font-size:12px;color:var(--muted);z-index:2}
.video-panel .vcap b{display:block;font-size:17px;color:#fff;margin-bottom:4px}
.vcap .badge-note{color:var(--gold);font-size:10.5px;letter-spacing:.06em;border:1px solid rgba(232,194,122,.35);padding:5px 9px;border-radius:999px;white-space:nowrap}

.film-list{margin-top:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.film-item{display:flex;align-items:flex-start;gap:14px;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:18px;background:rgba(255,255,255,.02);transition:border-color .3s,transform .4s var(--ease),background .3s}
a.film-item:hover{border-color:rgba(200,255,77,.35);background:rgba(200,255,77,.03);transform:translateY(-3px)}
.film-item>b{font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.14em;color:var(--lime);flex:none;padding-top:2px}
.film-item div{min-width:0;flex:1}
.film-item h4{font-size:14px;font-weight:650}
.film-item p{margin-top:5px;font-size:11.5px;line-height:1.7;color:var(--faint)}
.film-item .chip{flex:none;align-self:center}

/* ---------- news ---------- */
.news-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(28px,4vw,64px);align-items:start}
.timeline{position:relative;padding-left:30px}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:1px;background:linear-gradient(180deg,var(--lime),rgba(56,232,255,.4),transparent)}
.tl-item{position:relative;padding:0 0 34px}
.tl-item::before{content:"";position:absolute;left:-28px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:1.5px solid var(--lime);box-shadow:0 0 12px rgba(200,255,77,.6)}
.tl-item time{font-family:"Space Grotesk",sans-serif;font-size:10.5px;letter-spacing:.16em;color:var(--faint)}
.tl-item h3{margin-top:9px;font-size:19px;font-weight:650;letter-spacing:-.01em}
.tl-item p{margin-top:8px;font-size:12.5px;line-height:1.85;color:var(--muted);max-width:640px}
.tl-item .chiprow{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.chip{height:24px;display:inline-flex;align-items:center;padding:0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);font-size:10.5px;color:rgba(255,255,255,.55)}
.chip--lime{color:var(--lime);border-color:rgba(200,255,77,.34);background:rgba(200,255,77,.06)}
.news-side{position:sticky;top:110px;display:grid;gap:16px}
.side-card{border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:22px;background:rgba(255,255,255,.03)}
.side-card h4{font-size:13px;font-weight:650;letter-spacing:.02em}
.side-card p{margin-top:8px;font-size:11.5px;line-height:1.8;color:var(--faint)}
.side-card a{display:inline-flex;margin-top:14px;font-size:12px;color:var(--lime)}
.empty-note{margin-top:18px;border:1px dashed rgba(255,255,255,.2);border-radius:14px;padding:22px;text-align:center;font-size:12px;color:var(--faint);line-height:1.8}

/* ---------- projects ---------- */
.project{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(26px,4vw,64px);align-items:center;padding:clamp(34px,5vw,64px) 0;border-top:1px solid rgba(255,255,255,.08)}
.project:first-of-type{border-top:0}
.project--flip .project__media{order:2}
.project__media{position:relative;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#080c15;box-shadow:0 40px 80px -50px #000}
.project__media img{width:100%;height:auto;display:block;transition:transform 1.1s var(--ease)}
.project:hover .project__media img{transform:scale(1.035)}
.project__media::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);pointer-events:none}
.floorplan{background:radial-gradient(120% 100% at 30% 0%,rgba(56,232,255,.08),transparent 60%),#05080f}
.floorplan svg{width:100%;height:auto;display:block}
.floorplan__note{position:absolute;left:16px;bottom:14px;z-index:2;display:inline-flex;height:26px;align-items:center;padding:0 10px;border-radius:999px;border:1px solid rgba(232,194,122,.35);background:rgba(5,7,13,.7);backdrop-filter:blur(8px);color:var(--gold);font-size:10.5px;letter-spacing:.06em}
.project__body h3{font-size:clamp(24px,3vw,40px);line-height:1.1;letter-spacing:-.03em;font-weight:700;display:inline-block}
.project__body p{margin-top:16px;font-size:13.5px;line-height:1.9;color:var(--muted);max-width:520px}
.project__list{margin-top:20px;display:grid;gap:9px}
.project__list li{position:relative;padding-left:18px;font-size:12.5px;color:rgba(255,255,255,.7)}
.project__list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--lime)}
.project__meta{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px}

/* distinct project titles */
.pt--hex{position:relative;padding:6px 26px;color:var(--ink);z-index:0}
.pt--hex::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,var(--lime),#9ef6d2);clip-path:polygon(8% 0,100% 0,92% 100%,0 100%)}
.pt--ribbon{position:relative;padding:6px 22px;background:rgba(167,139,250,.14);border-left:3px solid var(--violet);border-right:3px solid var(--violet)}
.pt--bracket{position:relative;display:inline-block;padding:4px 0}
.pt--bracket::before{content:"[ ";color:var(--cyan);font-family:"Space Grotesk",sans-serif;font-weight:400}
.pt--bracket::after{content:" ]";color:var(--cyan);font-family:"Space Grotesk",sans-serif;font-weight:400}
.pt--circle{position:relative;padding-left:64px}
.pt--circle em{position:absolute;left:0;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;font-family:"Space Grotesk",sans-serif;font-style:normal;font-size:13px;color:var(--gold)}

/* ---------- CTA + footer ---------- */
.cta-band{position:relative;border-top:1px solid rgba(255,255,255,.1);padding:clamp(60px,8vw,110px) 0}
.cta-in{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-in h2{font-size:clamp(30px,4.4vw,62px);line-height:1.03;letter-spacing:-.045em;font-weight:700;max-width:720px}
.site-foot{position:relative;border-top:1px solid rgba(255,255,255,.1);padding:44px 0 30px;font-size:12px;color:rgba(255,255,255,.46)}
.foot-in{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:flex-start}
.foot-brand{display:flex;gap:12px;align-items:center}
.foot-brand img{width:34px;height:34px}
.foot-brand b{display:block;color:rgba(255,255,255,.9);font-size:13px;font-weight:600}
.foot-brand span{font-family:"Space Grotesk",sans-serif;font-size:8px;letter-spacing:.2em;color:rgba(255,255,255,.32)}
.foot-cols{display:flex;gap:clamp(24px,4vw,60px);flex-wrap:wrap}
.foot-col{display:grid;gap:7px}
.foot-col b{color:rgba(255,255,255,.72);font-size:11.5px;font-weight:600;margin-bottom:3px}
.foot-col a:hover{color:var(--lime)}
.foot-bottom{margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.07);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:11px;color:rgba(255,255,255,.34)}

/* ---------- responsive ---------- */
.totop{position:fixed;right:24px;bottom:24px;z-index:70;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(5,7,13,.72);backdrop-filter:blur(14px);display:grid;place-items:center;font-size:13px;color:rgba(255,255,255,.8);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .35s,transform .35s,background .3s,color .3s}
.totop.is-on{opacity:1;pointer-events:auto;transform:none}
.totop:hover{background:var(--lime,#c8ff4d);color:#0a0e18}

@media (max-width:1100px){
  .mgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .people{grid-template-columns:repeat(2,minmax(0,1fr))}
  .news-wrap{grid-template-columns:1fr}
  .news-side{position:static;grid-template-columns:repeat(2,1fr)}
  .film-list{grid-template-columns:1fr}
  .film-item{align-items:center}
}
@media (max-width:960px){
  .nav-menu,.nav-status{display:none}
  .nav-burger{display:grid}
  .mast-in{grid-template-columns:1fr}
  .mast-aside{display:none}
  .mast-index{display:none}
  .project,.project--flip{grid-template-columns:1fr}
  .project--flip .project__media{order:0}
  .stats{grid-template-columns:repeat(2,1fr)}
  .zone-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .nav-right{gap:10px;margin-left:10px}
  .nav-right .btn{display:none}
  .nav-back{height:34px;padding:0 11px;font-size:12px}
  .totop{right:16px;bottom:16px;width:38px;height:38px}
  .mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .people{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spec-row{grid-template-columns:40px 1fr;row-gap:6px}
  .spec-row span:nth-child(4),.spec-row span:nth-child(5){display:none}
  .news-side{grid-template-columns:1fr}
  .sec-head{flex-direction:column;align-items:flex-start;gap:18px}
  .mast h1{font-size:clamp(36px,10vw,64px)}
}
@media (prefers-reduced-motion:reduce){
  [data-anim]{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
  .site-bg__blob{animation:none}
}

/* ---------- 物料中心：三维筛选 + 实图缩略 + 大图弹层 ---------- */
.mfilter{display:flex;flex-wrap:wrap;gap:10px}
.mfilter button{height:36px;padding:0 15px;border-radius:999px;border:1px solid rgba(255,255,255,.14);font-size:12.5px;color:rgba(255,255,255,.66);transition:all .3s var(--ease);background:transparent;cursor:pointer}
.mfilter button:hover{border-color:rgba(255,255,255,.4);color:#fff}
.mfilter button.is-on{background:var(--lime);border-color:var(--lime);color:var(--ink);font-weight:600}
.mfilter button i{font-style:normal;opacity:.6;margin-left:6px;font-family:"Space Grotesk",sans-serif;font-size:11px}
.mdim{display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:start;padding:11px 0;border-bottom:1px dashed var(--line)}
.mdim:last-child{border-bottom:0}
.mdim > span{font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.4);padding-top:9px}
.mcount{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin:26px 0 16px;font-size:13px;color:rgba(255,255,255,.55)}
.mcount b{font-family:"Space Grotesk",sans-serif;font-size:26px;color:var(--lime);letter-spacing:.02em}
.mcount button{margin-left:auto;height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:rgba(255,255,255,.7);font-size:12px;cursor:pointer;transition:all .3s var(--ease)}
.mcount button:hover{border-color:var(--lime);color:var(--lime)}
.mthumb--photo{aspect-ratio:4/5;background:#080b14;display:flex;align-items:center;justify-content:center}
.mthumb--photo .sku{background:rgba(5,7,13,.82);border:1px solid var(--line);border-radius:999px;padding:4px 10px;letter-spacing:.14em}
.mthumb--photo img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.mthumb--photo .msys{position:absolute;right:12px;top:12px;z-index:6;font-size:10.5px;letter-spacing:.1em;padding:4px 9px;border-radius:999px;color:var(--c);border:1px solid color-mix(in srgb,var(--c) 50%,transparent);background:rgba(5,7,13,.72)}
.mthumb--photo .mtag{position:absolute;right:12px;bottom:12px;z-index:6;font-size:10.5px;letter-spacing:.06em;color:rgba(255,255,255,.78);background:rgba(5,7,13,.82);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.mbody h3{font-size:15.5px;line-height:1.4}
.mbody h3 small{display:block;font-family:"Space Grotesk",sans-serif;font-size:10.5px;letter-spacing:.16em;color:rgba(255,255,255,.38);font-weight:400;margin-bottom:7px}
.macts{display:flex;gap:8px;margin-top:14px}
.macts a,.macts button{flex:1;height:34px;border-radius:9px;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;cursor:pointer;transition:all .3s var(--ease);border:1px solid var(--line);background:transparent;color:rgba(255,255,255,.78)}
.macts a:hover,.macts button:hover{border-color:rgba(255,255,255,.42);color:#fff}
.macts .is-main{background:var(--lime);border-color:var(--lime);color:var(--ink);font-weight:600}
.macts .is-main:hover{background:#d9ff7a;border-color:#d9ff7a;color:var(--ink)}
.mempty{padding:54px 24px;text-align:center;border:1px dashed var(--line);border-radius:18px;color:rgba(255,255,255,.5);font-size:13.5px}
.mempty button{margin-top:16px;height:34px;padding:0 18px;border-radius:999px;border:1px solid var(--lime);background:transparent;color:var(--lime);font-size:12.5px;cursor:pointer}
.mlight{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:4vh 5vw;background:rgba(3,5,10,.86);backdrop-filter:blur(8px)}
.mlight.is-open{display:flex}
.mlight-in{max-width:min(1180px,92vw);display:flex;flex-direction:column;gap:14px}
.mlight-in img{width:100%;max-height:70vh;object-fit:contain;border-radius:14px;border:1px solid var(--line);background:#080b14}
.mlight-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:12.5px;color:rgba(255,255,255,.62)}
.mlight-bar b{color:#fff;font-size:14px}
.mlight-bar a,.mlight-bar button{height:34px;padding:0 15px;border-radius:9px;border:1px solid var(--line);background:transparent;color:rgba(255,255,255,.8);font-size:12px;text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;transition:all .3s var(--ease)}
.mlight-bar a:hover,.mlight-bar button:hover{border-color:var(--lime);color:var(--lime)}
.mlight-bar .is-main{background:var(--lime);border-color:var(--lime);color:var(--ink);font-weight:600}
.mlight-bar .ml-close{margin-left:auto}
@media (max-width:900px){
  .mdim{grid-template-columns:1fr;gap:6px}
  .mdim > span{padding-top:0}
  .mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mlight-in img{max-height:52vh}
}
@media (max-width:560px){.mgrid{grid-template-columns:1fr}}