/* ===== 原站真字体 ===== */
@font-face{font-display:swap;font-family:saans;font-style:normal;font-weight:500;src:url(fonts/SaansMono-Medium.woff2) format("woff2")}
@font-face{font-display:swap;font-family:korolev;font-style:normal;font-weight:700;src:url(fonts/KorolevCondensed-Bold.woff2) format("woff2")}

/* ===== 基础 ===== */
@property --deg{syntax:"<angle>";initial-value:0deg;inherits:false}
*{margin:0;padding:0;box-sizing:border-box}
:root{
  /* 原站调色板(深色主题) */
  --bg:#040404;                       /* --color-bg */
  --fg:#d4e8e8;                        /* --color-main-0 亮 */
  --dim:rgba(212,232,232,.5);          /* --color-main-1 */
  --line:rgba(212,232,232,.3);         /* --color-main-2 轮廓环 */
  --fill:#d4e8e8;                      /* 进度环 亮 */
  --color-lazy:#0c0c0c;                /* 空框/懒加载底色 */

  /* ↓ 抄原站网格系统：圆 = 2列+1间隔，随视口缩放 */
  --col-l:12;
  --margin-x:2.6rem;
  --margin-y:2.6rem;
  --gutter:1.6rem;
  --area:calc(100vw - var(--margin-x)*2);
  --col:calc((var(--area) - var(--gutter)*(var(--col-l) - 1)) / var(--col-l));
  --circle:calc(var(--col)*2 + var(--gutter));
}
/* 亮色主题(参考套件「白色那半边」):整套调色板反相 = 白底黑图 */
body.theme-light{
  --bg:#f4f4ee;                          /* 近白底(对应深色 #040404) */
  --fg:#0b0b0b;                          /* 近黑前景(对应深色 #d4e8e8) */
  --dim:rgba(11,11,11,.5);
  --line:rgba(11,11,11,.3);
  --fill:#0b0b0b;
  --color-lazy:#e4e4dc;                  /* 空框底色随之提亮 */
}
/* 主题切换时颜色平滑过渡(只过渡颜色类属性,不碰 GSAP 的 transform/opacity/clip-path) */
body,.site,.site *{
  transition:background-color .55s ease,color .55s ease,border-color .55s ease,fill .55s ease,stroke .55s ease;
}

/* ===== 珠光膜(仅亮色主题):近白底上一层柔和虹彩膜。OKLCH 高明度(L≈.95)低饱和(C≈.05)是"膜感"关键,平滑无条纹 ===== */
#pearl{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity .6s ease;
  /* CS:GO 奶白珠光膜:白为主,柔粉/淡蓝/淡紫色带在近白面上轻轻扫过(中间穿插白 → 波纹膜感而非满铺) */
  background:linear-gradient(115deg,
    oklch(.985 .01 70), oklch(.935 .05 25), oklch(.98 .012 320),
    oklch(.935 .045 255), oklch(.975 .016 305), oklch(.985 .01 70));
  background-size:260% 100%;
  filter:saturate(1);
  will-change:background-position;
}
body.theme-light #pearl{opacity:.78}
body.theme-light .site{background:transparent}        /* 让正文透出底层珠光膜(深色主题仍是 var(--bg)) */
.pearl-grain{                                          /* satin 微颗粒:让膜面反射度细微不均,绒光质感(非粗噪点) */
  position:absolute;inset:0;mix-blend-mode:soft-light;opacity:.3;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px;
}
@media (prefers-reduced-motion:no-preference){
  #pearl{animation:pearlShift 24s ease-in-out infinite}            /* 时间驱动:膜面虹彩缓慢游移变色 */
  .pearl-grain{animation:pearlFacet 11s ease-in-out infinite alternate}
}
@keyframes pearlShift{   /* 色带平滑横扫 → 珠光随"角度"流转 */
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
@keyframes pearlFacet{   /* 微反射面轻移,反射度更活 */
  from{opacity:.4;transform:translate3d(0,0,0)}
  to{opacity:.6;transform:translate3d(-12px,-8px,0)}
}
/* 原站把 rem 也绑定到视口宽度；1280px 时 1rem ≈ 8.89px。 */
html{font-size:.694444vw}
@media (max-width:768px){:root{--col-l:6;--margin-x:1.6rem}}
@media (max-width:480px){:root{--col-l:4;--margin-x:1.6rem}}
@media (max-width:768px){html{font-size:1.30208vw}}
@media (max-width:480px){html{font-size:2.08333vw}}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:saans,"SF Mono",ui-monospace,Menlo,monospace;
  font-size:1.2rem;
  line-height:1.1;
  letter-spacing:.01em;
  text-transform:uppercase;
  overflow:hidden;
}
/* 文字遮罩：外层裁切，内层 .l 由 gsap 定位(初始藏在下方) */
.l_{display:block;overflow:hidden}
.l{display:block;white-space:nowrap;will-change:transform}
.loader .c_{display:inline-block;overflow:hidden}
.loader .c{display:inline-block;opacity:0;white-space:nowrap}

/* ===== Loader ===== */
/* visibility:hidden 防闪：gsap 摆好初始位再点亮，避免 transform 冲突 */
.loader{
  position:fixed;inset:0;z-index:50;overflow:hidden;visibility:hidden;
  transform-origin:center;will-change:transform,clip-path;
}
.lo-bg{position:absolute;inset:0;background:var(--bg);z-index:-1}

/* 原站白色 Layer。它一直在 Loader 下方，不参与 Loader 的缩放。 */
#layer{
  position:fixed;inset:0;z-index:2;
  background:#fff;color:rgba(0,0,0,.5);
  font-size:1rem;line-height:1.1;letter-spacing:.01em;
  text-transform:uppercase;pointer-events:none;
}
.layer-item>div{display:table}
.layer-slashes{left:var(--margin-x);position:absolute;top:1.3rem;white-space:nowrap}
.layer-logo{
  border:1px dashed rgba(0,0,0,.5);height:3.1rem;width:3.1rem;
  margin-right:auto;position:absolute;
  right:calc(var(--col)*2 + var(--gutter)*2 + var(--margin-x));top:var(--margin-y)
}
.layer-logo img{
  display:block;filter:brightness(0);height:1.9rem;opacity:.5;width:1.9rem;
  left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)
}
.layer-top{display:flex;left:var(--margin-x);position:absolute;right:var(--margin-x);top:var(--margin-y)}
.layer-top>div:first-child{width:calc(var(--col)*3 + var(--gutter)*3)}
.layer-top>div:nth-child(2){width:calc(var(--col)*3 + var(--gutter)*3)}
.layer-top>div:nth-child(3){width:calc(var(--col)*4 + var(--gutter)*4)}
.layer-top>div:nth-child(4){margin-left:auto;text-align:right}
.layer-item-overlap>span{display:table;line-height:.5em;white-space:nowrap;will-change:opacity}
.layer-bottom{align-items:flex-end;bottom:var(--margin-y);display:flex;left:var(--margin-x);position:absolute;right:var(--margin-x)}
.layer-bottom>div:first-child{width:calc(var(--col) + var(--gutter))}
.layer-bottom>div:nth-child(2){position:relative;width:calc(var(--col)*4 + var(--gutter)*4)}
.layer-bottom>div:nth-child(2) div:last-child{color:#d4e8e8;inset:0;position:absolute;transform:translate(15px,-25px)}
.layer-bottom>div:nth-child(2) div:last-child span{display:table;padding-top:2px;white-space:nowrap;will-change:opacity}
.layer-bottom>div:nth-child(3),.layer-bottom>div:nth-child(4),.layer-bottom>div:nth-child(5){width:calc(var(--col)*2 + var(--gutter)*2)}
.layer-bottom>div:nth-child(6){margin-left:auto;text-align:right}
.layer-dots{position:absolute;inset:0;pointer-events:none}
.layer-dots-l,.layer-dots-r{position:absolute;top:50%;transform:translateY(-50%)}
.layer-dots-l{left:var(--margin-x)}
.layer-dots-r{right:var(--margin-x)}
.layer-dots-l>div,.layer-dots-r>div{background:#000;height:3px;width:3px}
.layer-dots-l>div:not(:last-child),.layer-dots-r>div:not(:last-child){margin-bottom:20.6rem}

/* 顶部数字/Ready：左上角，原站定位 */
.lo-top{
  height:2rem;left:var(--margin-x);overflow:hidden;pointer-events:none;
  position:absolute;top:var(--margin-y);width:4rem;
}
.lo-top>div{inset:0;position:absolute}
.lo-nbr{font-size:1.2rem;color:var(--fg)}
.lo-ready{font-size:1.2rem;color:var(--dim)}

/* 中心：圆 + logo + Enter（尺寸随网格） */
.lo-center{
  position:absolute;top:50%;left:50%;
  width:var(--circle);height:var(--circle);
  transform:translate(-50%,-50%);
  pointer-events:none;                 /* ready 后 JS 放行点击 */
}
.lo-center>div{
  left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);
}
.lo-circles{width:100%;height:100%}
.lo-circles svg{
  width:100%;height:100%;
  transform:rotate(-90deg);           /* 起始角，JS 会接管 */
  transform-origin:center;
  overflow:visible;
}
.lo-circles circle{
  fill:none;
  stroke-width:1;
  transform-origin:center;
}
#ring-track{stroke:var(--line)}
#ring-fill{stroke:var(--fill)}

.lo-logo{z-index:2}
.lo-logo img{display:block;height:3.6rem;width:3.6rem}

.lo-cta{
  z-index:2;
  font-size:11px;color:var(--fg);
}
.lo-exit{
  z-index:2;
  font-size:10px;color:var(--dim);
}

.lo-bottom{
  position:absolute;bottom:calc(var(--margin-y) - .2rem);
  left:var(--margin-x);display:flex;
}
.lo-text:first-child{width:calc(var(--col)*2 + var(--gutter)*2)}
.lo-text:nth-child(2){width:calc(var(--col)*9 + var(--gutter)*9)}
.lo-text:nth-child(3){margin-top:auto;text-align:right;width:var(--col)}
.lo-text:nth-child(3)>div{margin-right:-.2rem}
.recs{height:1.1rem;margin-top:.1rem;overflow:hidden;position:relative}

/* ===== 揭幕后的正文：Home / Hero ===== */
.site{
  position:fixed;inset:0;z-index:3;
  background:var(--bg);color:var(--fg);
  clip-path:inset(0 0 0 100%);
  transform:scale(.8) translateZ(0);
  transform-origin:center;
  pointer-events:none;
  overflow-y:auto;overflow-x:hidden;   /* projects 在下方，可滚动 */
  will-change:transform,clip-path;
}

/* hero：左 AAA26(7列) + 右 meta(5列) */
.hero{display:flex;margin:0 var(--margin-x);padding-top:var(--margin-y);text-transform:uppercase}
.hero-logo-w{cursor:pointer;pointer-events:all;position:relative;visibility:hidden;width:calc(var(--col)*7 + var(--gutter)*6)}
.hero-logo{display:table;margin-top:-.8rem;position:relative}
.hero-title{color:var(--fg);display:table;font-family:korolev;font-size:31.7rem;font-weight:700;line-height:.9em;margin-bottom:-2rem;overflow:hidden;padding-right:2rem;perspective:1000px}
.hero-title:before{content:"";display:table;margin-bottom:calc(-.5lh + .38em)}
.hero-title:after{content:"";display:table;margin-bottom:calc(-.5lh + .39em)}
.hero-title>span{float:left;will-change:transform}
.hero-copy{font-family:Helvetica,sans-serif;font-size:3.6rem;line-height:1em;overflow:hidden;padding-left:.5rem;padding-right:.5rem;position:absolute;right:0;top:.18rem}
.hero-copy>span{float:left}

.hero-right{margin-left:var(--gutter);width:calc(var(--col)*5 + var(--gutter)*4)}
.hero-right-1{align-items:flex-start;display:flex;justify-content:space-between}
.hero-desc{width:37.1rem;line-height:1.1em}
.hero-right-1>div{text-align:right}
.hero-rec{height:1.1rem;margin-right:-.2rem;margin-top:.1rem;overflow:hidden;position:relative}
.hero-date{margin-top:.1rem}

.hero-right-2{align-items:flex-end;display:flex;justify-content:space-between;margin-top:2rem}
.hero-right-2-meta{position:relative}
.hero-year-w{display:flex;width:calc(var(--col)*2 + var(--gutter))}
.hero-year{font-family:saans;letter-spacing:.15em}
.hero-circles{flex:1;height:1.9rem;margin-left:1rem;position:relative}
.hero-cir{--deg:0deg;display:inline-block;height:1.9rem;perspective:1000px;position:absolute;top:-.1rem;transform:rotate3d(.5,1,.5,var(--deg));transform-style:preserve-3d;width:1.9rem;will-change:transform,opacity}
.hero-cir:nth-child(2){left:1.3rem}
.hero-cir:nth-child(3){left:2.8rem}
.hero-cir:nth-child(4){left:5rem}
.hero-cir:last-child{left:7.8rem}
.hero-cir:before,.hero-cir:after{content:"";height:.75rem;position:absolute;width:.75rem}
.hero-cir:before{border-left:1px solid var(--fg);border-top:1px solid var(--fg);left:0;top:0}
.hero-cir:after{border-bottom:1px solid var(--fg);border-right:1px solid var(--fg);bottom:0;right:0}
.hero-cir>span{background:var(--fg);height:.55rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:.55rem}
.hero-cir:nth-child(even)>span{background:transparent;border:1px solid var(--fg)}
.hero-info{display:flex;margin-top:1.5rem}
.hero-job{display:flex;margin-top:.4rem}
.hero-info>div:first-child,.hero-job>div:first-child{width:calc(var(--col) + var(--gutter))}
.hero-job>a{margin-top:.3rem}

.hero-right-2-right{display:flex}
.hero-engine{align-items:center;display:flex;flex-direction:column;justify-content:space-between;margin-right:1.6rem}
.hero-engine-icon{height:auto;position:relative;width:7.8rem}
.hero-engine-icon svg{fill:none;width:100%;display:block}
.hero-engine-icon path,.hero-engine-icon rect{stroke:var(--fg);will-change:transform,stroke-dashoffset}
.hero-engine-icon #engine-layer-2{stroke-dasharray:3 2}
.hero-engine-icon #engine-layer-3{stroke-dasharray:2 2}
.hero-engine-text{font-weight:400;letter-spacing:.15em;text-align:center;width:100%}
.hero-logo-icon{height:7.5rem;margin-right:1.6rem;position:relative;width:7.5rem}
.hud-diamond-grid{display:grid;gap:.45rem;grid-template-columns:repeat(3,1fr);height:5.4rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) rotate(45deg);width:5.4rem}
.hud-diamond-grid span{background:var(--fg);display:block;will-change:transform,opacity}
.hud-diamond-grid span:nth-child(2),.hud-diamond-grid span:nth-child(4),.hud-diamond-grid span:nth-child(6),.hud-diamond-grid span:nth-child(8){background:transparent;border:1px solid var(--fg)}
.hero-tools{display:flex;flex-direction:column;justify-content:space-between}
.hero-tool-text{display:flex;font-weight:400;letter-spacing:.15em}
.hero-tool-text>div:first-child{margin-right:.3rem}
.hero-tool-icons{align-items:center;display:flex;justify-content:flex-end}
.tool-slashes{display:flex;height:2.5rem;position:relative;width:3.2rem}
.tool-slashes i{background:var(--fg);height:1px;left:0;position:absolute;transform:rotate(45deg);transform-origin:left center;width:3rem;will-change:transform}
.tool-slashes i:nth-child(1){top:.2rem}.tool-slashes i:nth-child(2){top:.9rem}.tool-slashes i:nth-child(3){top:1.6rem}
.tool-pixels{display:grid;gap:.3rem;grid-template-columns:repeat(3,.7rem);height:2.5rem;margin-left:1rem;position:relative;width:2.7rem}
.tool-pixels i{background:var(--fg);height:.7rem;will-change:transform,opacity;width:.7rem}
.tool-pixels i:nth-child(1){grid-column:1;grid-row:3}.tool-pixels i:nth-child(2){grid-column:2;grid-row:2}.tool-pixels i:nth-child(3){grid-column:3;grid-row:1}.tool-pixels i:nth-child(4){grid-column:2;grid-row:3}.tool-pixels i:nth-child(5){grid-column:3;grid-row:2}

/* base-btn(原站结构) */
.base-btn{align-items:center;color:var(--fg);cursor:pointer;display:flex;padding:.3rem;pointer-events:all;position:relative;text-decoration:none;text-transform:uppercase;width:fit-content}
.base-btn-border{border:1px solid var(--fg);border-radius:.3rem;box-sizing:border-box;pointer-events:none;position:absolute;inset:0}
.base-btn-text{line-height:1em;padding-left:.4rem;padding-right:.7rem;white-space:nowrap}
.base-btn-icon{align-items:center;display:flex;justify-content:center;background-color:var(--fg);border-radius:.1rem;flex-shrink:0;height:1.8rem;width:1.8rem;color:var(--bg)}

/* 配色切换 UI(hero-right-3，仅框架) */
.hero-right-3{align-items:flex-start;display:flex;justify-content:space-between;margin-left:auto;margin-right:auto;margin-top:4rem;width:calc(var(--col)*4 + var(--gutter)*3)}
.hero-scan{height:2.8rem;margin:0 1.2rem;overflow:hidden;position:relative;width:18rem}
.hero-barcode{background:repeating-linear-gradient(90deg,var(--fg) 0 1px,transparent 1px 3px,var(--fg) 3px 5px,transparent 5px 7px);height:1.8rem;width:100%}
.hero-spectrum{background:linear-gradient(90deg,#ff638d,#f5a0cf,#83dfff,#52f1e1,#f3a0d5);bottom:0;height:.35rem;position:absolute;transform-origin:left;width:100%;will-change:transform}
.hero-colors{color:var(--dim);display:flex}
.hero-color-btn{background:none;border:none;font:inherit;color:var(--fg);cursor:pointer;display:flex;opacity:.5;pointer-events:all;text-transform:uppercase;line-height:1.1;transition:opacity .2s cubic-bezier(.25,.46,.45,.94)}
.hero-color-btn:first-child{margin-right:.5rem}
.hero-color-btn.on,.hero-color-btn:hover{opacity:1}

/* projects:4 列错落网格 + 空框 */
.projects{margin:0 var(--margin-x);padding-top:5rem;text-transform:uppercase}
.projects-list{column-gap:var(--gutter);display:grid;grid-template-columns:repeat(4,1fr);list-style:none}
.projects-item{position:relative;will-change:transform}
.projects-item:not(:first-child,:nth-child(2)){padding-top:3rem}
.projects-item:nth-child(2){grid-column:3;grid-row:1}
.projects-item:nth-child(3){grid-column:1;grid-row:2}
.projects-item:nth-child(4){grid-column:2;grid-row:2}
.projects-item:nth-child(5){grid-column:4;grid-row:2}
.projects-item:nth-child(6){grid-column:2;grid-row:3}
.projects-item:nth-child(7){grid-column:1;grid-row:4}
.projects-item:nth-child(8){grid-column:3;grid-row:4}
.projects-item-head{align-items:flex-start;display:flex;min-height:5rem;padding-bottom:1rem;position:relative}
.projects-item-head>p{border:1px solid var(--fg);flex:0 0 auto;font-family:saans;font-size:1rem;font-weight:400;letter-spacing:.12em;line-height:1;margin-top:.4rem;padding:.55rem .45rem;position:relative;white-space:nowrap}
.projects-item-head>p:before,.projects-item-head>p:after{background:var(--bg);content:"";position:absolute}
.projects-item-head>p:before{height:calc(100% - .7rem);left:-2px;top:.35rem;width:calc(100% + 4px)}
.projects-item-head>p:after{height:calc(100% + 4px);left:.35rem;top:-2px;width:calc(100% - .7rem)}
.projects-item-head>p .c_{position:relative;z-index:1}
.projects-item-head>h4{flex:0 1 auto;margin-left:1.2rem;margin-top:.55rem;font-weight:400;letter-spacing:.02em;line-height:1.15;min-width:0}
.projects-item-head>h4 .l_:last-child{color:var(--dim)}
.projects-award{flex:0 0 auto;margin-left:auto;margin-top:.55rem;padding-left:.8rem}
.projects-award a{align-items:center;border:1px solid var(--dim);border-radius:.3rem;color:var(--fg);display:flex;padding:.6rem;text-decoration:none}
.projects-award span{line-height:1;padding-right:.5rem;white-space:nowrap}
.projects-award svg{fill:none;height:1.2rem;stroke:var(--fg);stroke-linecap:round;stroke-linejoin:round;width:1.2rem}
.projects-item-link{display:block;aspect-ratio:16/9;position:relative;width:calc(var(--col)*3 + var(--gutter)*2)}
.projects-item-fig{height:100%;width:100%;overflow:hidden;position:relative;will-change:clip-path}
.projects-item-fig .base-image{background-color:var(--color-lazy,#0c0c0c);display:block;height:100%;object-fit:cover;transform-origin:50% 50%;width:100%;will-change:transform}
.project-corners{inset:0;pointer-events:none;position:absolute;z-index:2}
.project-corner{height:2.2rem;position:absolute;transform-origin:center;width:2.2rem;will-change:transform,opacity}
.project-corner:before,.project-corner:after{background:var(--fg);content:"";position:absolute}
.project-corner:before{height:1px;width:100%}.project-corner:after{height:100%;width:1px}
.project-corner.tl{left:.9rem;top:.9rem}
.project-corner.tr{right:.9rem;top:.9rem;transform:rotate(90deg)}
.project-corner.bl{bottom:.9rem;left:.9rem;transform:rotate(-90deg)}
.project-corner.br{bottom:.9rem;right:.9rem;transform:rotate(180deg)}
.project-head-mark{align-items:center;display:flex;position:absolute;right:0;top:.35rem;will-change:transform,opacity}
.projects-item:nth-child(2) .project-head-mark{bottom:0;top:auto}
.project-head-code{color:var(--dim);font-size:.9rem;letter-spacing:.08em;margin-right:.6rem;white-space:nowrap}
.project-head-grid{display:grid;gap:.22rem;grid-template-columns:repeat(2,.48rem)}
.project-head-grid i{background:var(--fg);height:.48rem;will-change:transform,opacity;width:.48rem}
.project-head-grid i:nth-child(2),.project-head-grid i:nth-child(3){background:transparent;border:1px solid var(--fg)}

/* Footer: original four-column contact/social/logo/catalogue composition. */
.footer{margin-left:var(--margin-x);margin-right:var(--margin-x);padding-top:10rem;position:relative;text-transform:uppercase}
.mo-x{height:1px;overflow:hidden;width:100%}
.mo-x>div{height:100%;width:100%;will-change:transform}
.footer-line>div{background:linear-gradient(90deg,var(--line) 0 72%,#ff638d 78%,#83dfff 89%,#52f1e1 100%)}
.footer-top{display:flex;margin-top:4rem;position:relative}
.footer-contact{width:calc(var(--col)*4 + var(--gutter)*4)}
.footer-title{color:var(--dim);display:table}
.footer-desc{margin-top:2rem;width:28rem}
.footer-contact>a{display:flex;margin-top:1.5rem}
.footer-socials{width:calc(var(--col)*4 + var(--gutter)*4)}
.footer-list{margin-top:2rem}
.footer-list>a{margin-top:.5rem}
.footer-right{display:flex;justify-content:flex-end;width:calc(var(--col)*4 + var(--gutter)*3)}
.footer-target{height:15.2rem;position:relative;width:15.2rem}
.footer-ring{border:1px dashed var(--fg);border-radius:50%;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);will-change:transform}
.footer-ring-a{height:13.8rem;width:13.8rem}.footer-ring-b{border-style:solid;border-width:1px 0;height:9.8rem;width:9.8rem}
.footer-arrow-frame{border:1px solid var(--fg);height:5.5rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:5.5rem}
.footer-arrow-frame:before,.footer-arrow-frame:after{background:var(--bg);content:"";position:absolute}
.footer-arrow-frame:before{height:calc(100% - 1.6rem);left:-2px;top:.8rem;width:calc(100% + 4px)}
.footer-arrow-frame:after{height:calc(100% + 4px);left:.8rem;top:-2px;width:calc(100% - 1.6rem)}
.footer-arrow-frame span{border-left:1.2rem solid transparent;border-right:1.2rem solid transparent;border-top:1.2rem solid var(--fg);left:50%;position:absolute;top:50%;transform:translate(-50%,-25%);z-index:2}
.footer-target-code{bottom:.2rem;color:var(--dim);position:absolute;right:0}
.footer-tech-plate{border-left:1px solid var(--fg);height:15.2rem;margin-left:var(--gutter);padding-left:1.2rem;position:relative;width:calc(var(--col)*2 + var(--gutter))}
.footer-tech-head{align-items:center;display:flex;justify-content:space-between}
.footer-mini-grid{display:grid;gap:.3rem;grid-template-columns:repeat(2,.8rem)}.footer-mini-grid i{background:var(--fg);height:.8rem;width:.8rem}
.footer-tech-bars{background:repeating-linear-gradient(90deg,var(--fg) 0 1px,transparent 1px 3px);height:3.1rem;margin-top:1rem;width:100%}
.footer-tech-copy{font-size:1rem;line-height:1.25;margin-top:1rem}
.footer-tech-spectrum{background:linear-gradient(90deg,#ff638d,#f5a0cf,#83dfff,#52f1e1);height:.45rem;margin-top:1rem;width:100%}
.footer-tech-foot{bottom:0;position:absolute;right:0}
.footer-bottom{display:flex;justify-content:space-between;margin-top:4rem;padding-bottom:var(--margin-y)}
.footer-copyright,.footer-made{display:flex;gap:1rem}
.footer-btn{text-decoration:none}
.footer-list .base-btn{min-width:10rem}
.footer-list .base-btn:after{background:linear-gradient(90deg,#ff638d,#83dfff,#52f1e1);bottom:-.2rem;content:"";height:1px;left:0;position:absolute;transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.16,1,.3,1);width:100%;will-change:transform}
.footer-list .base-btn.is-hover:after{transform:scaleX(1)}
.footer-status{display:grid;gap:.25rem;grid-template-columns:repeat(2,.6rem);position:relative}
.footer-status i{background:var(--fg);height:.6rem;width:.6rem}.footer-status span{font-size:1.8rem;left:-1.8rem;position:absolute;top:-.5rem}

@media (max-width:768px){
  .hero{flex-direction:column}
  .hero-logo-w{width:100%}
  .hero-right{margin-left:0;padding-top:2rem;width:100%}
  .projects-list{grid-template-columns:repeat(2,1fr);row-gap:4rem}
  .projects-item,.projects-item:nth-child(n){grid-column:auto;grid-row:auto;padding-top:0}
  .projects-item-link{width:100%}
  .footer-top{flex-wrap:wrap}
  .footer-contact{width:calc(var(--col)*3 + var(--gutter)*3)}
  .footer-socials{width:calc(var(--col)*2 + var(--gutter))}
  .footer-right{margin-top:8rem;width:100%}
  .footer-list{display:flex;flex-wrap:wrap;gap:.8rem}
  .footer-list>a{margin-top:0}
}

@media (max-width:480px){
  .hero-title{font-size:38.75rem}
  .hero-right-2{align-items:flex-start;gap:4rem}
  .hero-right-2-right{margin-left:auto}
  .projects-list{grid-template-columns:1fr}
  .footer-top{flex-direction:column}
  .footer-contact,.footer-socials{width:100%}
  .footer-socials{margin-top:3.5rem}
  .footer-right{margin-top:8rem}
  .footer-target{height:15.2rem;width:15.2rem}
  .footer-tech-plate{width:calc(var(--col)*2 + var(--gutter))}
  .footer-bottom{margin-top:2rem}
}

/* mo-*：进场揭幕(JS 接管初始态与揭入) */
.mo{will-change:transform,opacity}