/* ── 首页新设计（2026-10 用户给的 index.html 稿，整段收进 .hz-hero）────────────
   原稿是一整页工作室首页。这里只做两件事：把自定义属性/关键帧改名成 --hz-* / hz*，
   并给每条选择器加上 .hz-hero 前缀 —— 所以它不会影响应用里任何别的界面。
   顶栏（刘海）不在这份里：它是外壳那一份，位置与样式一个字没动。 */
.hz-hero {
  --hz-bg:#08080a;
  --hz-ink:#f4f2ef;
  --hz-muted:#8d8b94;
  --hz-dim:#5c5a63;
  --hz-line:rgba(255,255,255,.10);
  --hz-line-2:rgba(255,255,255,.20);
  --hz-accent:#cfc8ff;
  --hz-chrome:linear-gradient(112deg,#ffffff 0%,#f6f5f7 10%,#c9c7d2 26%,#8c8a97 41%,#f4f3f6 55%,#b4b1be 68%,#ffffff 84%,#e6e4ea 100%);
  --hz-mark: url('/assets/logo-mark-white.png');
  --hz-ease:cubic-bezier(.22,1,.36,1);
  --hz-ease-io:cubic-bezier(.65,.05,.36,1);
  --hz-pad:clamp(20px,4.2vw,64px);
  --hz-max:1360px;
}
.hz-hero *, .hz-hero *::before, .hz-hero *::after {box-sizing:border-box}
.hz-hero {-webkit-text-size-adjust:100%}
.hz-hero {
  margin:0;
  background:var(--hz-bg);
  color:var(--hz-ink);
  font-family:"Inter","Helvetica Neue","HarmonyOS Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.65;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
.hz-hero a {color:inherit;text-decoration:none}
.hz-hero button {font:inherit;color:inherit;background:none;border:0}
.hz-hero ::selection {background:rgba(207,200,255,.28);color:#fff}
.hz-hero .grain {
  position:fixed;inset:-50%;z-index:9000;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:hzGrainShift 6s steps(6) infinite;
}
@keyframes hzGrainShift {
  0%{transform:translate(0,0)}20%{transform:translate(-2%,1%)}40%{transform:translate(1%,-2%)}
  60%{transform:translate(-1%,-1%)}80%{transform:translate(2%,1%)}100%{transform:translate(0,0)}
}
/* 用户 2026-10 换成他自己的透明 JZ 标（assets/logo-mark-white.png，1254×1254 的正方形画布，
   图形只占中间一条横带）。所以这里取一条**宽扁的框**去对那条带，并且让 mask 撑满整框；
   transition 是给"跟着鼠标偏"用的（JS 每帧写 transform，留一点点过渡才不抖）。 */
.hz-hero .mark {
  display:block;width:100%;aspect-ratio:600/340;
  -webkit-mask-image:var(--hz-mark);mask-image:var(--hz-mark);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  background:var(--hz-chrome);
  background-size:240% 240%;
  animation:hzChromeFlow 12s ease-in-out infinite;
  will-change:transform;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.hz-hero .mark-sheen {
  position:absolute;inset:0;pointer-events:none;
  -webkit-mask-image:var(--hz-mark);mask-image:var(--hz-mark);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  background:linear-gradient(78deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%);
  background-size:300% 100%;background-repeat:no-repeat;background-position:180% 0;
  mix-blend-mode:screen;opacity:.55;
  animation:hzSheenSweep 6.5s var(--hz-ease-io) infinite;
}
@keyframes hzChromeFlow {0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes hzSheenSweep {0%{background-position:180% 0}52%,100%{background-position:-90% 0}}
.hz-hero .btn {
  position:relative;display:inline-flex;align-items:center;gap:12px;
  padding:15px 24px;border-radius:999px;
  border:1px solid var(--hz-line-2);
  font-size:13.5px;letter-spacing:.04em;
  overflow:hidden;isolation:isolate;
  transition:border-color .5s var(--hz-ease),color .5s var(--hz-ease),transform .5s var(--hz-ease);
}
.hz-hero .btn span {position:relative;z-index:2}
.hz-hero .btn .arw {position:relative;z-index:2;width:14px;height:14px;flex:none;transition:transform .5s var(--hz-ease)}
.hz-hero .btn::after {
  content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;
  background:var(--hz-ink);transform:translateY(101%);
  transition:transform .62s var(--hz-ease);
}
.hz-hero .btn:hover {border-color:transparent;color:#0a0a0c}
.hz-hero .btn:hover::after {transform:translateY(0)}
.hz-hero .btn:hover .arw {transform:translate(3px,-3px)}
.hz-hero .btn--solid {background:var(--hz-ink);color:#0a0a0c;border-color:transparent}
.hz-hero .btn--solid::after {background:linear-gradient(100deg,#dfdcf7,#ffffff)}
.hz-hero .screen {position:relative;min-height:100svh;display:flex;align-items:center;padding:clamp(56px,7vh,110px) 0 clamp(88px,11vh,150px);overflow:hidden}
.hz-hero .bg {position:absolute;inset:0;pointer-events:none;z-index:0}
.hz-hero .bg .glow {
  position:absolute;left:62%;top:44%;width:min(900px,80vw);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(190,185,255,.13),rgba(120,120,160,.05) 42%,transparent 68%);
  filter:blur(24px);
}
.hz-hero .bg .gridlines {
  position:absolute;inset:0;opacity:.55;
  background-image:linear-gradient(90deg,var(--hz-line) 1px,transparent 1px);
  background-size:calc(100%/6) 100%;
  -webkit-mask-image:radial-gradient(120% 90% at 60% 40%,#000 20%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 60% 40%,#000 20%,transparent 78%);
}
.hz-hero .inner {
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.06fr .94fr;align-items:center;
  gap:clamp(30px,5vw,80px);
  width:min(var(--hz-max),100% - var(--hz-pad)*2);margin-inline:auto;
}
.hz-hero .copy > * {opacity:0;transform:translateY(20px);transition:opacity 1s var(--hz-ease),transform 1s var(--hz-ease)}
.hz-hero .is-ready .copy > * {opacity:1;transform:none}
.hz-hero .is-ready .copy > *:nth-child(1) {transition-delay:.05s}
.hz-hero .is-ready .copy > *:nth-child(2) {transition-delay:.10s}
.hz-hero .is-ready .copy > *:nth-child(3) {transition-delay:.38s}
.hz-hero .is-ready .copy > *:nth-child(4) {transition-delay:.48s}
.hz-hero .is-ready .copy > *:nth-child(5) {transition-delay:.58s}
.hz-hero .eyebrow {
  display:inline-flex;align-items:center;gap:.7em;
  font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--hz-muted);margin:0 0 26px;
}
.hz-hero .eyebrow .dot {width:5px;height:5px;border-radius:50%;background:var(--hz-accent);box-shadow:0 0 0 3px rgba(207,200,255,.14)}
.hz-hero h1.title {margin:0 0 30px;font-size:clamp(38px,5.3vw,74px);line-height:1.07;font-weight:600;letter-spacing:-.03em}
.hz-hero .line {display:block;overflow:hidden;padding-bottom:.07em;margin-bottom:-.05em}
.hz-hero .ch {display:inline-block;overflow:hidden;vertical-align:top}
.hz-hero .ch-i {display:inline-block;transform:translateY(118%);transition:transform 1.15s var(--hz-ease)}
.hz-hero .is-ready .ch-i {transform:translateY(0)}
.hz-hero .split.chrome .ch-i {
  background:var(--hz-chrome);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hzChromeFlow 9s ease-in-out infinite;
}
.hz-hero .desc {color:var(--hz-muted);max-width:42ch;margin:0 0 38px;font-size:15.5px;line-height:1.9}
.hz-hero .actions {display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hz-hero .meta {
  display:flex;flex-wrap:wrap;gap:38px;margin:56px 0 0;padding:22px 0 0;
  border-top:1px solid var(--hz-line);list-style:none;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--hz-dim);
}
.hz-hero .meta li b {display:block;color:var(--hz-ink);font-size:12.5px;letter-spacing:.12em;font-weight:500;margin-bottom:4px}
.hz-hero .stage {
  position:relative;display:grid;place-items:center;perspective:1100px;
  aspect-ratio:1/.92;
  opacity:0;scale:.965;transition:opacity 1.4s var(--hz-ease),scale 1.4s var(--hz-ease);
}
.hz-hero .is-ready .stage {opacity:1;scale:1;transition-delay:.18s}
.hz-hero .stage-halo {position:absolute;width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.10),transparent 62%);filter:blur(18px)}
.hz-hero .stage-ring {position:absolute;width:88%;aspect-ratio:1;border-radius:50%;border:1px solid var(--hz-line)}
.hz-hero .stage-ring i {position:absolute;inset:0;animation:hzSpin 16s linear infinite}
.hz-hero .stage-ring i::before {
  content:"";position:absolute;left:50%;top:0;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
  background:#fff;box-shadow:0 0 12px 2px rgba(255,255,255,.55);
}
@keyframes hzSpin {to{transform:rotate(360deg)}}
.hz-hero .markbox {position:relative;width:min(90%,500px);transform-style:preserve-3d;will-change:transform}
.hz-hero .markbox .mark {width:100%;filter:drop-shadow(0 30px 70px rgba(180,175,220,.16))}
.hz-hero .tag {position:absolute;font-size:9.5px;letter-spacing:.3em;color:var(--hz-dim);text-transform:uppercase;display:flex;align-items:center;gap:8px}
.hz-hero .tag::before {content:"";width:20px;height:1px;background:var(--hz-line-2)}
.hz-hero .t1 {left:2%;top:16%}
.hz-hero .t2 {right:0;bottom:20%;flex-direction:row-reverse}
.hz-hero .t3 {left:50%;bottom:-2%;transform:translateX(-50%)}
@media (max-width:1400px) {
.hz-hero .t1 {top:11%}
.hz-hero .t2 {bottom:12%}
.hz-hero .t3 {bottom:-2%}

}
.hz-hero .cue {
  position:absolute;left:50%;bottom:clamp(20px,3.4vh,34px);transform:translateX(-50%);
  display:grid;justify-items:center;gap:10px;z-index:2;
  font-size:9.5px;letter-spacing:.32em;color:var(--hz-dim);text-transform:uppercase;
}
.hz-hero .cue i {width:1px;height:52px;background:linear-gradient(180deg,var(--hz-line-2),transparent);position:relative;overflow:hidden}
.hz-hero .cue i::after {content:"";position:absolute;inset:0;background:var(--hz-ink);animation:hzCueDrop 2.4s var(--hz-ease-io) infinite}
@keyframes hzCueDrop {0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}
@media (max-width:1080px) {
.hz-hero .screen {padding:clamp(36px,5.4vh,64px) 0 clamp(48px,6.5vh,84px)}
.hz-hero .inner {grid-template-columns:1fr;gap:clamp(22px,3.4vh,40px)}
.hz-hero .stage {order:-1;aspect-ratio:1/.74;width:min(440px,84%);margin-inline:auto}
.hz-hero .t2 {display:none}
.hz-hero .t3 {bottom:-3%}
.hz-hero .cue {display:none}
.hz-hero .meta {gap:26px;margin-top:38px}

}
@media (max-width:620px) {
.hz-hero h1.title {font-size:clamp(30px,8.6vw,42px)}
.hz-hero .desc {font-size:14.5px;margin-bottom:30px}
.hz-hero .meta {gap:20px;font-size:10px}
.hz-hero .meta li b {font-size:11.5px}
.hz-hero .tag.t1, .hz-hero .tag.t2 {display:none}
.hz-hero .tag.t3 {bottom:-4%;font-size:9px;letter-spacing:.24em}
.hz-hero .cue {display:none}
.hz-hero .btn {padding:13px 20px;font-size:12.5px}

}
@media (prefers-reduced-motion:reduce) {
.hz-hero *, .hz-hero *::before, .hz-hero *::after {animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
.hz-hero .copy > *, .hz-hero .stage {opacity:1;transform:none;scale:1}
.hz-hero .ch-i {transform:none}

}



/* 收尾：让这块设计正好铺满 #view（原稿是整页 100svh；这里 #view 已经是滚动容器） */
.hz-hero { position: absolute; inset: 0; height: auto; width: auto; }
.hz-hero .screen { min-height: 100%; height: 100%; }
.hz-hero .btn .arw { width: auto; height: auto; font-size: 13px; font-style: normal; line-height: 1; }
.hz-hero .grain { z-index: 3; }
/* 入口卡收干净（2026-10）：三颗入口做成一样大的胶囊，文字居中，不带箭头。
   「开始对话」那颗**不再用 `btn--solid`**（用户：「开始对话的按钮界面形式跟见筑无限边界一样」）——
   现在三张卡是同一张拟态玻璃皮，只有类名不同（chat / diagnose / boundary）。 */
.hz-hero .btn {
  min-width: 188px; justify-content: center; line-height: 1.2;
  padding: 14px 26px; font-size: 13px;
}
/* 入口从两个变成四个（2026-10 加到：对话 / 自媒体工作平台 / 账号诊断 / 见筑无限边界），
   后来又收成三个（自媒体工作平台撤了、账号诊断改名自媒体运营平台、见筑无限边界在卡上写无限边界）：
   188px 那个宽是按"两个入口"定的，三个一行放不下就会折到第二行 —— 那样"对话"与
   "无限边界"两张卡就不在同一行了（自检 boundary-check ① 正是钉这一条：两张卡同一行居中、
   边界在右边）。所以入口一律收成等宽小胶囊，一排放得下；窄屏照旧自动折行。 */
.hz-hero .actions { gap: 10px; }
.hz-hero .btn {
  min-width: 152px; padding: 13px 18px;
}