/* ═══════════════════════════════════════════════════════
   铭嘉企管 官网 · 暗夜工坊
   Design tokens → oklch 色彩 / 流体间距 / 指数缓动
   ═══════════════════════════════════════════════════════ */

@layer tokens, base, layout, components, motion, responsive;

/* ─────────── TOKENS ─────────── */
@layer tokens {
:root{
  /* 墨色阶——冷调深空，避免纯黑 */
  --ink-950: oklch(0.128 0.013 252);
  --ink-900: oklch(0.163 0.014 252);
  --ink-850: oklch(0.196 0.015 252);
  --ink-800: oklch(0.232 0.016 252);
  --ink-700: oklch(0.294 0.017 252);
  --ink-600: oklch(0.378 0.016 252);
  --ink-500: oklch(0.492 0.014 252);
  --ink-400: oklch(0.612 0.012 250);
  --ink-300: oklch(0.735 0.009 250);
  --ink-200: oklch(0.845 0.006 250);
  --ink-100: oklch(0.938 0.004 250);

  /* 品牌——琥珀 / 青铜 / 冷青（刻意避开紫蓝渐变） */
  --amber:      oklch(0.795 0.148 72);
  --amber-hi:   oklch(0.872 0.132 82);
  --amber-dim:  oklch(0.665 0.128 66);
  --bronze:     oklch(0.556 0.089 56);
  --teal:       oklch(0.742 0.086 196);

  /* 语义 */
  --bg:        var(--ink-950);
  --bg-soft:   var(--ink-900);
  --surface:   color-mix(in oklab, var(--ink-850) 78%, transparent);
  --line:      color-mix(in oklab, var(--ink-100) 9%, transparent);
  --line-soft: color-mix(in oklab, var(--ink-100) 5.5%, transparent);
  --line-hot:  color-mix(in oklab, var(--amber) 42%, transparent);
  --fg:        var(--ink-100);
  --fg-mid:    var(--ink-200);
  --fg-dim:    var(--ink-300);
  --fg-faint:  var(--ink-500);

  /* 字体 */
  --sans: "PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Noto Sans SC",
          "Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono: ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code","Roboto Mono",Menlo,Consolas,monospace;

  /* 流体字号 */
  --fs-xs:   clamp(.688rem, .66rem + .12vw, .75rem);
  --fs-sm:   clamp(.813rem, .78rem + .16vw, .875rem);
  --fs-base: clamp(.938rem, .9rem + .19vw, 1.031rem);
  --fs-lg:   clamp(1.063rem, 1rem + .3vw, 1.188rem);
  --fs-xl:   clamp(1.25rem, 1.13rem + .58vw, 1.563rem);
  --fs-2xl:  clamp(1.625rem, 1.36rem + 1.28vw, 2.5rem);
  --fs-3xl:  clamp(2.125rem, 1.55rem + 2.72vw, 4rem);
  --fs-4xl:  clamp(2.75rem, 1.6rem + 5.3vw, 6.5rem);

  /* 流体间距 */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-sec: clamp(4.5rem, 3rem + 7vw, 9.5rem);
  --gut:    clamp(1.25rem, .6rem + 2.8vw, 4.5rem);
  --maxw:   80rem;

  /* 缓动——指数系，无回弹 */
  --e-out:  cubic-bezier(.16,1,.3,1);
  --e-io:   cubic-bezier(.65,0,.35,1);
  --t-fast: .22s var(--e-out);
  --t-mid:  .45s var(--e-out);
  --t-slow: .9s  var(--e-out);

  --r-sm: 4px; --r-md: 8px; --r-lg: 14px;
}
}

/* ─────────── BASE ─────────── */
@layer base {
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5.5rem;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:var(--fs-base);
  line-height:1.75;
  letter-spacing:.012em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{ margin:0; font-weight:700; line-height:1.16; letter-spacing:-.018em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
img,svg,canvas{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:color-mix(in oklab,var(--amber) 32%,transparent); color:var(--ink-100); }

:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:2px;
}

.mono{
  font-family:var(--mono);
  font-size:var(--fs-xs);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
}

/* 全局噪点 + 极淡网格，营造工坊质地 */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

/* 滚动进度条 */
.scroll-rail{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:60;
  background:var(--line-soft);
}
.scroll-rail span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--bronze),var(--amber) 65%,var(--amber-hi));
  box-shadow:0 0 12px color-mix(in oklab,var(--amber) 55%,transparent);
}
}

/* ─────────── LAYOUT ─────────── */
@layer layout {
.sec{
  position:relative; z-index:2;
  padding:var(--sp-sec) var(--gut);
  max-width:var(--maxw);
  margin-inline:auto;
}
.sec--alt{
  max-width:none;
  background:
    linear-gradient(180deg,transparent,color-mix(in oklab,var(--ink-900) 70%,transparent) 12% 88%,transparent);
  border-block:1px solid var(--line-soft);
}
.sec--alt > *{ max-width:var(--maxw); margin-inline:auto; }

.sec__hd{ max-width:52rem; margin-bottom:clamp(2.5rem,1.6rem+3.4vw,4.5rem); }
.sec__title{
  font-size:var(--fs-3xl);
  margin:.55rem 0 1rem;
  letter-spacing:-.028em;
}
.sec__title em{
  font-style:normal;
  color:var(--amber);
  position:relative;
}
.sec__title em::after{
  content:""; position:absolute; left:0; right:0; bottom:.08em; height:.22em;
  background:color-mix(in oklab,var(--amber) 28%,transparent);
  z-index:-1;
  transform:scaleX(0); transform-origin:left;
  animation:swipe .8s var(--e-out) forwards;
  animation-timeline:view();
  animation-range:entry 25% cover 42%;
}
@keyframes swipe{ to{ transform:scaleX(1);} }

.sec__desc{
  color:var(--fg-dim);
  font-size:var(--fs-lg);
  max-width:44rem;
  line-height:1.85;
}

.eyebrow{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--mono); font-size:var(--fs-xs);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--amber);
}
.eyebrow .mono{ color:var(--fg-faint); letter-spacing:.2em; }
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 0 4px color-mix(in oklab,var(--amber) 16%,transparent);
}
}

/* ─────────── COMPONENTS ─────────── */
@layer components {

/* ── 导航 ── */
.nav{
  position:fixed; inset:0 0 auto; z-index:50;
  display:flex; align-items:center; gap:var(--sp-5);
  padding:1.1rem var(--gut);
  transition:background var(--t-mid), border-color var(--t-mid),
             padding var(--t-mid), backdrop-filter var(--t-mid);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  padding-block:.72rem;
  background:color-mix(in oklab,var(--ink-950) 92%,transparent);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom-color:var(--line-soft);
}

.brand{ display:flex; align-items:center; gap:.7rem; margin-right:auto; }
.brand__mark{ color:var(--amber); display:grid; place-items:center; }
.brand__text{ display:flex; flex-direction:column; line-height:1.1; }
.brand__text b{ font-size:1.031rem; letter-spacing:.06em; font-weight:700; }
.brand__text i{
  font-style:normal; font-family:var(--mono);
  font-size:.563rem; letter-spacing:.24em; color:var(--fg-faint);
}

.nav__links{ display:flex; gap:2rem; }
.nav__links a{
  position:relative; font-size:var(--fs-sm); color:var(--fg-mid);
  padding-block:.3rem; transition:color var(--t-fast);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--amber); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--e-out);
}
.nav__links a:hover{ color:var(--fg); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ── 按钮 ── */
.btn{
  --pad:.72rem 1.35rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:var(--pad);
  font-size:var(--fs-sm); font-weight:600; letter-spacing:.02em;
  border-radius:var(--r-md); border:1px solid transparent;
  position:relative; overflow:hidden; white-space:nowrap;
  transition:color var(--t-fast), border-color var(--t-fast),
             background var(--t-fast), transform var(--t-fast);
}
.btn svg{ transition:transform .35s var(--e-out); }
.btn:hover svg{ transform:translateX(3px); }

.btn--solid{
  background:var(--amber); color:var(--ink-950); font-weight:700;
  box-shadow:0 1px 0 color-mix(in oklab,var(--amber-hi) 60%,transparent) inset,
             0 10px 30px -12px color-mix(in oklab,var(--amber) 65%,transparent);
}
.btn--solid:hover{ background:var(--amber-hi); }

.btn--line{
  border-color:var(--line); color:var(--fg-mid);
  background:color-mix(in oklab,var(--ink-100) 2.5%,transparent);
}
.btn--line:hover{ border-color:var(--line-hot); color:var(--fg); }

.btn--ghost{
  border-color:var(--line); color:var(--fg);
  font-size:var(--fs-xs); padding:.55rem 1rem;
}
.btn--ghost:hover{ border-color:var(--line-hot); background:color-mix(in oklab,var(--amber) 8%,transparent); }

.nav__burger{
  display:none; width:38px; height:34px; border:1px solid var(--line);
  border-radius:var(--r-sm); place-items:center; gap:5px; flex-direction:column;
}
.nav__burger i{
  display:block; width:16px; height:1.5px; background:var(--fg);
  transition:transform var(--t-fast), opacity var(--t-fast);
}
.nav.is-open .nav__burger i:first-child{ transform:translateY(3.2px) rotate(45deg); }
.nav.is-open .nav__burger i:last-child{ transform:translateY(-3.2px) rotate(-45deg); }

/* ── HERO ── */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:8rem var(--gut) 5rem;
  overflow:hidden;
  isolation:isolate;
}
.hero__canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:-3; opacity:0; transition:opacity 1.6s var(--e-out);
}
.hero__canvas.is-live{ opacity:1; }

/* WebGL 不可用时的静态降级——依然好看 */
.hero__veil{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(85% 60% at 18% 22%, color-mix(in oklab,var(--bronze) 22%,transparent), transparent 62%),
    radial-gradient(70% 55% at 82% 78%, color-mix(in oklab,var(--teal) 12%,transparent), transparent 60%),
    linear-gradient(178deg, transparent 42%, var(--bg) 96%);
}
.hero__grid{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size:clamp(56px,7vw,96px) clamp(56px,7vw,96px);
  mask-image:radial-gradient(115% 85% at 50% 32%, #000 12%, transparent 76%);
  -webkit-mask-image:radial-gradient(115% 85% at 50% 32%, #000 12%, transparent 76%);
}

.hero__inner{
  position:relative; z-index:2;
  width:100%; max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,1.42fr) minmax(0,.78fr);
  gap:clamp(2rem,1rem+4vw,5rem); align-items:center;
}

.hero__title{
  font-size:var(--fs-4xl);
  letter-spacing:-.042em;
  line-height:1.02;
  margin:1.1rem 0 1.6rem;
}
.hero__title .line{ display:block; }
.hero__title em{
  font-style:normal;
  background:linear-gradient(96deg,var(--amber-hi),var(--amber) 42%,var(--bronze));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__sub{
  font-size:var(--fs-lg); color:var(--fg-dim);
  max-width:34rem; line-height:1.86;
}
.hero__sub b{ color:var(--fg); font-weight:600; }
.hero__act{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.2rem; }

.hero__scroll{
  position:absolute; left:var(--gut); bottom:2rem; z-index:2;
  display:flex; align-items:center; gap:.8rem;
  color:var(--fg-faint); font-family:var(--mono); font-size:var(--fs-xs);
  letter-spacing:.22em; transition:color var(--t-fast);
}
.hero__scroll:hover{ color:var(--amber); }
.hero__scrollLine{
  width:56px; height:1px; background:var(--line); position:relative; overflow:hidden;
}
.hero__scrollLine::after{
  content:""; position:absolute; inset:0; width:40%;
  background:var(--amber);
  animation:trail 2.4s var(--e-io) infinite;
}
@keyframes trail{ 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(280%)} }

/* ── 仪表盘 ── */
.panel{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:color-mix(in oklab,var(--ink-900) 62%,transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  overflow:hidden;
}
.panel__hd{
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1.1rem;
  border-bottom:1px solid var(--line-soft);
  color:var(--fg-faint);
  background:color-mix(in oklab,var(--ink-850) 45%,transparent);
}
.pulse{
  width:7px; height:7px; border-radius:50%; background:var(--teal);
  box-shadow:0 0 0 0 color-mix(in oklab,var(--teal) 60%,transparent);
  animation:pulse 2.6s var(--e-io) infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 color-mix(in oklab,var(--teal) 55%,transparent); }
  70%{ box-shadow:0 0 0 9px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}
.panel__list li{
  display:grid; grid-template-columns:auto 1fr; gap:.15rem .85rem;
  align-items:baseline;
  padding:.85rem 1.1rem;
  border-bottom:1px solid var(--line-soft);
  transition:background var(--t-fast), padding-left var(--t-fast);
}
.panel__list li:hover{
  background:color-mix(in oklab,var(--amber) 6%,transparent);
  padding-left:1.5rem;
}
.panel__list .mono{ color:var(--amber-dim); grid-row:span 2; }
.panel__list b{ font-size:var(--fs-sm); font-weight:600; }
.panel__list i{ font-style:normal; font-size:var(--fs-xs); color:var(--fg-faint); grid-column:2; }

.panel__ft{
  display:grid; grid-template-columns:repeat(3,1fr);
  padding:1rem .6rem; gap:.4rem; text-align:center;
}
.panel__ft div{ display:flex; flex-direction:column; gap:.1rem; }
.panel__ft b{
  font-family:var(--mono); font-size:var(--fs-xl); font-weight:600;
  color:var(--amber); letter-spacing:-.01em; font-variant-numeric:tabular-nums;
}
.panel__ft i{ font-style:normal; font-size:var(--fs-xs); color:var(--fg-faint); }

/* ── 能力矩阵 ── */
.cap{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));
  background:var(--line-soft);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.cap__item{
  position:relative;
  padding:clamp(2.4rem,1.8rem+2vw,3.4rem) clamp(2.8rem,2rem+2.5vw,4.2rem);
  background:var(--bg);
  transition:background var(--t-mid);
  overflow:hidden;
}
.cap__item::before{
  content:""; position:absolute; inset:auto 0 0 0; height:2px;
  background:linear-gradient(90deg,var(--amber),transparent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--e-out);
}
.cap__item:hover{ background:color-mix(in oklab,var(--ink-900) 85%,transparent); }
.cap__item:hover::before{ transform:scaleX(1); }
.cap__no{
  position:absolute; top:1.4rem; right:1.5rem;
  color:var(--ink-700); font-size:1.5rem; letter-spacing:0; font-weight:600;
  transition:color var(--t-mid);
}
.cap__item:hover .cap__no{ color:color-mix(in oklab,var(--amber) 42%,transparent); }
.cap__ico{
  width:44px; height:44px; color:var(--amber); margin-bottom:1.5rem;
  transition:transform .55s var(--e-out);
}
.cap__item:hover .cap__ico{ transform:translateY(-3px) scale(1.04); }
.cap__item h3{ font-size:var(--fs-xl); margin-bottom:.85rem; letter-spacing:-.02em; color:var(--fg); font-weight:700; }
.cap__item p{ color:var(--fg-dim); font-size:var(--fs-sm); line-height:1.82; padding-right:.6rem; }

.tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.2rem; }
.tags li{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.1em;
  padding:.24rem .58rem; border-radius:99px;
  border:1px solid var(--line);
  color:var(--fg-faint);
}

/* ── 案例 ── */
.work{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
}
.work__card{
  position:relative; display:flex; flex-direction:column;
  padding:clamp(1.5rem,1.1rem+1.2vw,2.2rem);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  background:
    linear-gradient(160deg, color-mix(in oklab,var(--ink-850) 78%,transparent), color-mix(in oklab,var(--ink-900) 42%,transparent) 62%);
  overflow:hidden;
  transition:border-color var(--t-mid), transform var(--t-mid), background var(--t-mid);
}
.work__card::after{
  content:""; position:absolute; width:22rem; height:22rem; border-radius:50%;
  left:var(--mx,50%); top:var(--my,50%); translate:-50% -50%;
  background:radial-gradient(circle,color-mix(in oklab,var(--amber) 11%,transparent),transparent 66%);
  opacity:0; transition:opacity var(--t-mid); pointer-events:none;
}
.work__card:hover{
  border-color:color-mix(in oklab,var(--amber) 30%,transparent);
  transform:translateY(-4px);
}
.work__card:hover::after{ opacity:1; }
.work__card--wide{ grid-column:span 2; }
.work__card--accent{
  border-color:color-mix(in oklab,var(--amber) 22%,transparent);
  background:linear-gradient(160deg,color-mix(in oklab,var(--amber) 9%,transparent),transparent 58%);
}
.work__meta{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-bottom:1.5rem; color:var(--amber-dim);
}
.work__year{ color:var(--fg-faint); }
.work__year::before{
  content:""; display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--teal); margin-right:.45rem; vertical-align:middle;
}
.work__card h3{ font-size:var(--fs-xl); margin-bottom:.6rem; letter-spacing:-.02em; color:var(--fg); }
.work__card > p{ color:var(--fg-dim); font-size:var(--fs-sm); line-height:1.82; }
.work__go{
  margin-top:auto; padding-top:1.4rem;
  font-size:var(--fs-xs); font-weight:600; color:var(--amber);
  opacity:0; transform:translateX(-6px);
  transition:opacity var(--t-mid), transform var(--t-mid);
}
.work__card:hover .work__go{ opacity:1; transform:none; }

/* ── 流程 ── */
.proc{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  background:var(--line-soft);
  border-block:1px solid var(--line-soft);
}
.proc__step{
  position:relative;
  padding:clamp(2.1rem,1.5rem+1.7vw,3rem) clamp(2rem,1.4rem+1.8vw,3.2rem);
  background:var(--bg);
  transition:background var(--t-mid);
}
.proc__step:hover{ background:color-mix(in oklab,var(--ink-900) 80%,transparent); }
.proc__no{
  display:inline-grid; place-items:center;
  width:2.4rem; height:2.4rem; border-radius:50%;
  border:1px solid var(--line);
  color:var(--amber); font-size:.688rem; letter-spacing:.06em;
  margin-bottom:1.1rem;
  transition:border-color var(--t-mid), background var(--t-mid);
}
.proc__step:hover .proc__no{
  border-color:var(--line-hot);
  background:color-mix(in oklab,var(--amber) 10%,transparent);
}
.proc__step h3{ font-size:var(--fs-lg); margin-bottom:.65rem; }
.proc__step p{ color:var(--fg-dim); font-size:var(--fs-sm); line-height:1.85; }
.proc__out{
  display:block; margin-top:1.25rem; padding-top:1rem;
  border-top:1px dashed var(--line);
  font-family:var(--mono); font-size:.625rem; letter-spacing:.08em;
  color:var(--fg-faint);
}

/* ── 技术栈 ── */
.stack{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem,1rem+4vw,5rem); align-items:center;
  padding:var(--sp-sec) var(--gut);
}
.stack__pts{ margin-top:2rem; display:grid; gap:.9rem; }
.stack__pts li{
  display:grid; grid-template-columns:auto 1fr; gap:.9rem;
  align-items:baseline;
  font-size:var(--fs-sm); color:var(--fg-dim);
  padding-left:1.1rem; position:relative;
}
.stack__pts li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:5px; background:var(--amber); rotate:45deg;
}
.stack__pts b{ color:var(--fg); font-weight:600; white-space:nowrap; }

.stack__chips{ display:flex; flex-wrap:wrap; gap:.55rem; }
.stack__chips span{
  padding:.55rem 1rem; border-radius:99px;
  border:1px solid var(--line-soft);
  background:color-mix(in oklab,var(--ink-850) 40%,transparent);
  font-size:var(--fs-sm); color:var(--fg-mid);
  transition:border-color var(--t-fast), color var(--t-fast),
             transform var(--t-fast), background var(--t-fast);
}
.stack__chips span:hover{
  border-color:var(--line-hot); color:var(--fg);
  background:color-mix(in oklab,var(--amber) 10%,transparent);
  transform:translateY(-2px);
}

/* ── CTA ── */
.cta{
  position:relative; z-index:2; overflow:hidden;
  padding:var(--sp-sec) var(--gut);
  border-top:1px solid var(--line-soft);
}
.cta__glow{
  position:absolute; inset:auto 0 -55% 0; height:110%;
  background:radial-gradient(58% 52% at 50% 100%,
    color-mix(in oklab,var(--amber) 17%,transparent), transparent 68%);
  pointer-events:none;
}
.cta__inner{ position:relative; max-width:var(--maxw); margin-inline:auto; }
.cta__title{ font-size:var(--fs-3xl); margin:.6rem 0 1rem; letter-spacing:-.03em; }
.cta__title em{ font-style:normal; color:var(--amber); }
.cta__sub{ color:var(--fg-dim); font-size:var(--fs-lg); max-width:40rem; line-height:1.85; }

.cta__ways{
  display:grid; gap:1rem; margin-top:2.8rem;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
}
.way{
  display:flex; flex-direction:column; gap:.3rem;
  padding:1.4rem 1.5rem;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:color-mix(in oklab,var(--ink-900) 55%,transparent);
  transition:border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
a.way:hover{
  border-color:var(--line-hot);
  background:color-mix(in oklab,var(--amber) 8%,transparent);
  transform:translateY(-3px);
}
.way .mono{ color:var(--fg-faint); }
.way b{ font-size:var(--fs-lg); font-weight:600; letter-spacing:-.01em; }
.way i{ font-style:normal; font-size:var(--fs-xs); color:var(--fg-faint); }

/* ── 页脚 ── */
.foot{
  position:relative; z-index:2;
  border-top:1px solid var(--line-soft);
  background:var(--ink-900);
  padding:var(--sp-7) var(--gut) 1.5rem;
}
.foot__top{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:2.5rem; padding-bottom:2.5rem;
}
.foot__brand b{ font-size:var(--fs-lg); letter-spacing:.04em; }
.foot__brand p{ margin-top:.6rem; color:var(--fg-faint); font-size:var(--fs-sm); line-height:1.9; }
.foot__nav{ display:flex; gap:clamp(2rem,1rem+4vw,5rem); }
.foot__nav div{ display:flex; flex-direction:column; gap:.55rem; }
.foot__nav h4{
  font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-faint); margin-bottom:.35rem; font-weight:500;
}
.foot__nav a{ font-size:var(--fs-sm); color:var(--fg-mid); transition:color var(--t-fast); }
.foot__nav a:hover{ color:var(--amber); }
.foot__bar{
  max-width:var(--maxw); margin-inline:auto;
  border-top:1px solid var(--line-soft);
  padding-top:1.4rem;
  display:flex; flex-wrap:wrap; gap:.8rem; justify-content:space-between;
  font-size:var(--fs-xs); color:var(--fg-faint);
}
.foot__icp a{ color:inherit; transition:color var(--t-fast); }
.foot__icp a:hover{ color:var(--amber); }
}

/* ─────────── MOTION ─────────── */
@layer motion {
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .85s var(--e-out) var(--d,0s),
             transform .85s var(--e-out) var(--d,0s);
  will-change:opacity, transform;
}
.reveal.is-in{ opacity:1; transform:none; }

.magnet{ transition:transform .2s var(--e-out), background var(--t-fast),
                      border-color var(--t-fast), color var(--t-fast); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .hero__canvas{ display:none; }
}
}

/* ─────────── RESPONSIVE ─────────── */
@layer responsive {
@media (max-width:1040px){
  .hero__inner{ grid-template-columns:1fr; gap:2.8rem; }
  .panel{ max-width:32rem; }
  .stack{ grid-template-columns:1fr; }
  .work__card--wide{ grid-column:span 1; }
}

@media (max-width:820px){
  .nav__links{
    position:fixed; inset:0 0 auto; top:100%;
    flex-direction:column; gap:0;
    background:color-mix(in oklab,var(--ink-950) 97%,transparent);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
    padding:.5rem var(--gut) 1.2rem;
    clip-path:inset(0 0 100% 0);
    transition:clip-path .5s var(--e-out);
  }
  .nav.is-open .nav__links{ clip-path:inset(0 0 0 0); }
  .nav__links a{ padding:.95rem 0; border-bottom:1px solid var(--line-soft); font-size:var(--fs-base); }
  .nav__links a::after{ display:none; }
  .nav__cta{ display:none; }
  .nav__burger{ display:grid; }
  .hero{ min-height:auto; padding-top:7rem; }
  .foot__top{ grid-template-columns:1fr; }
}

@media (max-width:520px){
  .hero__act{ flex-direction:column; align-items:stretch; }
  .hero__act .btn{ width:100%; }
  .panel__ft{ grid-template-columns:repeat(3,1fr); padding-inline:.3rem; }
  .foot__nav{ gap:2.2rem; }
}

@media print{
  .hero__canvas,.grain,.scroll-rail,.nav{ display:none; }
  body{ background:#fff; color:#000; }
}
}