/* 云镜之间 Prismo 官网 · 共享样式
   调性: 证据级克制。排版是主角,质感靠底噪/暗角/发丝边,不靠特效。
   品牌蓝紫只活在 logo 与极少数发丝线——蓝紫渐变是 AI 页面的标配长相,
   在这里必须让位,否则合规官第一眼就不信。 */

:root{
  --bg:#0A0E17;           /* 近黑深蓝, 不用纯黑 */
  --bg-2:#0D121C;
  --surface:#111826;
  --ink:#E9EDF5;          /* 不用纯白 */
  --ink-2:#9AA3B8;
  --ink-3:#616B82;
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.14);
  --blue:#4C6EF5;
  --purple:#9775FA;
  --danger:#F0616D;
  --warn:#E8A33D;
  --ok:#3DBF8B;
  --maxw:1180px;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;
  /* 不加 overflow-x:hidden。它是防御性 hack,而按规范 overflow-x 一旦非 visible,
     overflow-y 就计算成 auto —— body 变成滚动容器,在 iOS Safari 上配 position:sticky
     导航是出了名的滚动失灵来源。实测 4 页 × 7 种宽度零横向溢出,不需要它。
     真溢出了就去修那个元素,而不是拿这行盖住。 */
}

/* 底噪: 杀掉"矢量塑料感"的关键一层 */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;position:relative;z-index:5}

/* ── 导航 ── */
.nav{
  position:sticky;top:0;z-index:20;height:72px;display:flex;align-items:center;
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
.nav.stuck{background:rgba(10,14,23,.82);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;gap:40px;width:100%}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);flex-shrink:0}
.brand img{width:26px;height:auto;display:block}
.brand b{font-size:17px;font-weight:650;letter-spacing:-.02em}
.brand span{font-size:12px;color:var(--ink-3);letter-spacing:.14em;margin-left:2px}
.navlinks{display:flex;gap:30px;margin-left:auto;align-items:center}
.navlinks a{
  color:var(--ink-2);text-decoration:none;font-size:14.5px;letter-spacing:.01em;
  padding:6px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.navlinks a:hover,.navlinks a:focus-visible{color:var(--ink);border-bottom-color:var(--line-2)}
.navlinks a.on{color:var(--ink);border-bottom-color:var(--blue)}
/* 导航 CTA 走安静款: 白底实心会跟 hero 的主按钮抢焦点,一屏只该有一个响亮的 CTA。
   这里用发丝边描边,存在感够、不夺目(2026-07-16 用户反馈)。 */
.navcta{
  border:1px solid var(--line-2)!important;border-radius:7px;padding:8px 16px!important;
  color:var(--ink-2)!important;font-weight:500;transition:color .2s,border-color .2s,background .2s;
}
.navcta:hover,.navcta:focus-visible{
  color:var(--ink)!important;border-color:var(--ink-3)!important;background:rgba(255,255,255,.04);
}

/* ── 排版 ── */
h1,h2,h3{letter-spacing:-.035em;line-height:1.06;font-weight:700}
h1{font-size:clamp(38px,6.2vw,74px);line-height:1.02;letter-spacing:-.045em}
h2{font-size:clamp(27px,3.5vw,44px);letter-spacing:-.038em;line-height:1.12}
h3{font-size:19px;letter-spacing:-.02em;line-height:1.35;font-weight:650}
.lead{font-size:clamp(16px,1.6vw,19px);color:var(--ink-2);line-height:1.82;font-weight:350}
.dim{color:var(--ink-2)}
.faint{color:var(--ink-3)}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em}
.eyebrow{  /* 克制使用: 全站每 3 屏最多 1 个 */
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;color:var(--ink-3);
  text-transform:uppercase;display:block;margin-bottom:20px;
}
section{padding:104px 0;position:relative}
section+section{border-top:1px solid var(--line)}
.sec-lead{max-width:660px}
.sec-lead h2+p{margin-top:22px}

/* ── 按钮 ── */
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:8px;
  font-size:15px;font-weight:600;text-decoration:none;letter-spacing:-.01em;
  transition:transform .18s,opacity .18s,background .18s;min-height:44px;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{opacity:.87}
.btn-ghost{border:1px solid var(--line-2);color:var(--ink)}
.btn-ghost:hover{background:rgba(255,255,255,.045)}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}

/* ── 首页 hero ── */
.hero{padding:86px 0 104px;position:relative;overflow:hidden}
.hero::after{  /* 暗角: 制造光学焦点 */
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(80% 62% at 50% 34%,transparent 40%,rgba(6,9,16,.62) 100%);
}
.hero .wrap{position:relative;z-index:5}
.hero h1{max-width:15em}
.hero .lead{margin-top:26px;max-width:34em}
.hairline{height:1px;background:linear-gradient(90deg,var(--blue),var(--purple),transparent 72%);
  opacity:.55;margin:0 0 42px;max-width:190px}

/* ── hero 证据演示: 一句话如何变成证据 ── */
.eviq{
  margin-top:66px;border:1px solid var(--line);border-radius:13px;background:var(--surface);
  overflow:hidden;max-width:920px;
}
.eviq-top{
  display:flex;align-items:center;gap:9px;padding:12px 18px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11.5px;color:var(--ink-3);letter-spacing:.04em;
}
.eviq-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex-shrink:0}
.eviq-body{padding:30px 28px 26px}
.eviq-said{font-size:clamp(17px,2vw,22px);line-height:1.95;font-weight:350;color:var(--ink);letter-spacing:-.01em}
/* 命中词: 文字**始终可见**,动画只加高亮。绝不能用 opacity 藏文字——
   演示区在首屏之下,JS 或观察器一旦没跑,整句话就残缺了(2026-07-15 实测撞到)。 */
.eviq-said .hit{
  position:relative;color:var(--ink);border-radius:2px;padding:1px 3px;
  background:transparent;box-shadow:inset 0 -1px 0 rgba(240,97,109,.35);
  transition:background .5s ease,box-shadow .5s ease,color .5s ease;
}
.eviq-said .hit.lit{
  color:#fff;background:rgba(240,97,109,.14);box-shadow:inset 0 -1px 0 rgba(240,97,109,.75);
}
/* 无 JS 时直接显示终态(html 上没有 .js 类) */
html:not(.js) .eviq-said .hit{color:#fff;background:rgba(240,97,109,.14);box-shadow:inset 0 -1px 0 rgba(240,97,109,.75)}
html:not(.js) .chip{opacity:1;transform:none}
.eviq-ev{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;padding-top:24px;border-top:1px solid var(--line);
}
.chip{
  font-family:var(--mono);font-size:11.5px;color:var(--ink-2);border:1px solid var(--line);
  border-radius:6px;padding:6px 11px;background:rgba(255,255,255,.02);white-space:nowrap;
  opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease;
}
.chip.lit{opacity:1;transform:none}
.chip b{color:var(--ink);font-weight:600}
.chip.mute b{color:var(--danger)}
.chip.ver b{color:var(--blue)}
.eviq-note{margin-top:20px;font-size:13px;color:var(--ink-3);line-height:1.7}

/* ── 三段(事前/中/后) ── */
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:8px}
.phase{padding:0 34px;border-left:1px solid var(--line)}
.phase:first-child{padding-left:0;border-left:0}
.phase:last-child{padding-right:0}
.phase-k{font-family:var(--mono);font-size:11.5px;color:var(--blue);letter-spacing:.14em;margin-bottom:14px}
.phase h3{margin-bottom:16px}
.phase ul{list-style:none}
.phase li{
  font-size:14.5px;color:var(--ink-2);line-height:1.7;padding:11px 0 11px 16px;
  border-top:1px solid var(--line);position:relative;
}
.phase li:first-child{border-top:0;padding-top:2px}
.phase li::before{content:"";position:absolute;left:0;top:19px;width:5px;height:1px;background:var(--ink-3)}
.phase li:first-child::before{top:10px}

/* ── 证据链: 非对称分栏 ── */
.split{display:grid;grid-template-columns:1fr .92fr;gap:76px;align-items:center}
.proof{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:var(--surface)}
.proof-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px 20px;border-top:1px solid var(--line);font-size:13.5px;
}
.proof-row:first-child{border-top:0}
.proof-row .k{color:var(--ink-3);font-size:12.5px;flex-shrink:0}
.proof-row .v{font-family:var(--mono);font-size:12px;color:var(--ink);text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proof-head{padding:17px 20px;background:rgba(76,110,245,.05);border-bottom:1px solid var(--line)}
.proof-head b{font-size:14px;letter-spacing:-.01em}
.proof-head span{display:block;font-size:12px;color:var(--ink-3);margin-top:3px}
.stamp{color:var(--ok)!important}
.stamp-bad{color:var(--danger)!important}

/* ── 对比(消音克制) ── */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:52px}
.cmp{border:1px solid var(--line);border-radius:12px;padding:28px 26px}
.cmp.no{background:rgba(240,97,109,.035);border-color:rgba(240,97,109,.16)}
.cmp.yes{background:rgba(61,191,139,.035);border-color:rgba(61,191,139,.16)}
.cmp-t{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;margin-bottom:14px}
.cmp.no .cmp-t{color:var(--danger)}
.cmp.yes .cmp-t{color:var(--ok)}
.cmp p{font-size:14.5px;color:var(--ink-2);line-height:1.8}
.cmp p+p{margin-top:12px}

/* ── 同音字演示 ── */
.homo{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:36px}
.homo-c{border:1px solid var(--line);border-radius:10px;padding:18px 24px;background:var(--surface);text-align:center}
.homo-c .w{font-size:23px;font-weight:600;letter-spacing:.04em}
.homo-c .p{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-top:7px;letter-spacing:.06em}
.homo-c.bad .w{color:var(--warn)}
.homo-c.ok .w{color:var(--ok)}
.homo-ar{color:var(--ink-3);font-family:var(--mono);font-size:13px}

/* ── 不做什么 ── */
.nots{margin-top:8px}
.not{padding:30px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:.85fr 1.15fr;gap:44px}
.not:last-child{border-bottom:1px solid var(--line)}
.not h3{font-weight:600}
.not p{font-size:14.5px;color:var(--ink-2);line-height:1.8}

/* ── 能力条目(产品页) ── */
.caps{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:13px;overflow:hidden;margin-top:56px}
.cap{background:var(--bg-2);padding:34px 30px}
.cap h3{margin-bottom:13px}
.cap p{font-size:14.5px;color:var(--ink-2);line-height:1.8}
.cap .mono{color:var(--blue);display:block;margin-bottom:15px;font-size:11.5px;letter-spacing:.12em}

/* ── 产品截图 ── */
/* 真实界面截图,演示数据。不加假浏览器边框那类装饰——发丝边 + 一层深阴影就够,
   让界面自己说话。 */
.shot{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--surface);box-shadow:0 34px 90px rgba(0,0,0,.5);
  margin-top:48px;
}
.shot img{width:100%;height:auto;display:block}
.shot-cap{
  margin-top:14px;font-size:12.5px;color:var(--ink-3);line-height:1.7;
}
.shot-cap b{color:var(--ink-2);font-weight:500}
.shot-wide{max-width:none}

/* ── CTA ── */
.cta{padding:110px 0;text-align:center;position:relative}
.cta h2{max-width:16em;margin:0 auto}
.cta .btns{justify-content:center}
.contact{display:flex;gap:56px;justify-content:center;align-items:flex-start;margin-top:60px;flex-wrap:wrap}
.qr{background:#fff;padding:13px;border-radius:11px;line-height:0}
.qr img{width:148px;height:148px;display:block}
.contact-b{text-align:left;padding-top:6px}
.contact-b .k{font-size:12.5px;color:var(--ink-3);margin-bottom:7px}
.contact-b a{color:var(--ink);text-decoration:none;font-family:var(--mono);font-size:15px;
  border-bottom:1px solid var(--line-2);padding-bottom:2px}
.contact-b a:hover{border-bottom-color:var(--blue)}
.contact-b .sub{font-size:12.5px;color:var(--ink-3);margin-top:22px;line-height:1.7}

/* ── 页脚 ── */
footer{border-top:1px solid var(--line);padding:44px 0;font-size:13px;color:var(--ink-3)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
footer a{color:var(--ink-3);text-decoration:none}
footer a:hover{color:var(--ink-2)}
.foot-links{display:flex;gap:24px}

/* ── 焦点可见(键盘可达) ── */
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

/* ── 汉堡按钮(仅窄屏出现) ── */
.navtoggle{
  display:none;width:44px;height:44px;margin-left:auto;border:0;background:transparent;
  cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;
}
.navtoggle span{
  display:block;width:18px;height:1.5px;background:var(--ink);border-radius:2px;
  transition:transform .26s ease,opacity .2s ease;
}
.navtoggle[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* ── 响应式 ── */
@media(max-width:900px){
  .wrap{padding:0 22px}
  .navtoggle{display:flex}
  /* 手机端菜单: 复用同一份链接,不另写一套 DOM。
     早先版本在这里把链接直接 display:none —— 等于手机用户在四个页面之间无法跳转。 */
  /* 手机端一律不用 backdrop-filter。菜单展开时曾同时存在: 固定底噪层 +
     粘性导航的实时毛玻璃 + 全屏菜单的实时毛玻璃 = 三个合成层、两处每帧重算,
     真机直接卡死(2026-07-16 用户实测)。菜单底色本就 97% 不透明,blur 看不出来,
     纯烧 GPU 零收益 —— 改纯色。 */
  .nav.stuck{background:var(--bg);backdrop-filter:none}
  .navlinks{
    position:fixed;top:72px;left:0;right:0;z-index:19;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:var(--bg);backdrop-filter:none;
    border-bottom:1px solid var(--line);padding:8px 22px 22px;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:transform .2s ease,opacity .2s ease;
  }
  .navlinks.open{transform:none;opacity:1;pointer-events:auto}
  .navlinks a{
    padding:16px 0;border-bottom:1px solid var(--line);font-size:16px;min-height:52px;
    display:flex;align-items:center;
  }
  .navlinks a:hover,.navlinks a:focus-visible{border-bottom-color:var(--line)}
  .navlinks a.on{color:var(--ink)}
  .navlinks a.on::before{content:"";width:3px;height:15px;background:var(--blue);
    border-radius:2px;margin-right:11px;flex-shrink:0}
  /* 菜单里的 CTA 恢复实心: 菜单展开时已盖住 hero,不存在抢焦点,
     且它是这块面板里唯一的动作,该显眼。 */
  .navlinks .navcta{
    margin-top:16px;justify-content:center;border-bottom:0!important;border-radius:8px;
    background:var(--ink);color:var(--bg)!important;border-color:transparent!important;
    font-weight:600;
  }
  .navlinks .navcta:hover{background:var(--ink);color:var(--bg)!important}
  /* 不再用 overflow:hidden 锁滚动: iOS Safari 上它锁不住,却可能把页面卡在不可滚状态,
     一旦 menu-open 类没清掉就是死页。改为"滚动即收起菜单"(见 JS),无锁、无死锁风险。 */

  section{padding:68px 0}
  section+section{border-top:1px solid var(--line)}
  h1{font-size:clamp(31px,8.4vw,44px);letter-spacing:-.04em;line-height:1.14;text-wrap:balance}
  h2{font-size:clamp(24px,5.6vw,32px);line-height:1.2;text-wrap:balance}
  .lead{font-size:15.5px;line-height:1.78}
  .hero{padding:58px 0 72px}
  .hero .lead{margin-top:20px}
  .btns{margin-top:30px;gap:10px}
  .btn{flex:1;justify-content:center;min-width:0}

  .phases{grid-template-columns:1fr;gap:34px}
  .phase{padding:0;border-left:0;border-top:1px solid var(--line);padding-top:26px}
  .phase:first-child{border-top:0;padding-top:0}
  .split{grid-template-columns:1fr;gap:36px}
  .compare,.caps{grid-template-columns:1fr}
  .caps{border-radius:11px}
  .cap{padding:26px 22px}
  .not{grid-template-columns:1fr;gap:10px;padding:24px 0}
  .contact{gap:30px;flex-direction:column;align-items:center;text-align:center}
  .contact-b{text-align:center}
  .contact-b .sub br{display:none}
  .cta{padding:80px 0}
}

@media(max-width:900px){
  /* 手机上把 1600px 宽的界面缩到 340px = 一团糊,等于没放。
     改成"图在自己的框里横向滑动"(页面本身绝不横滚),让人能划着看细节。 */
  .shot{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:32px}
  .shot img{min-width:760px;width:760px}
  .shot-cap::after{content:" 左右滑动可看细节。";color:var(--ink-3)}
}

@media(max-width:560px){
  .eviq{margin-top:44px;border-radius:11px}
  .eviq-body{padding:22px 18px}
  .eviq-said{font-size:16.5px;line-height:1.9}
  .eviq-ev{gap:6px;margin-top:22px;padding-top:20px}
  .chip{font-size:11px;padding:5px 9px}
  .eviq-note{font-size:12.5px;margin-top:16px}
  /* 同音字演示改竖向流: 横排在窄屏会裹成乱七八糟的两列,A→B→C 的逻辑就没了 */
  .homo{flex-direction:column;align-items:stretch;gap:0;margin-top:30px}
  .homo-c{width:100%;padding:16px 20px;display:flex;align-items:baseline;gap:12px;justify-content:center}
  .homo-c .w{font-size:20px}
  .homo-c .p{margin-top:0}
  .homo-ar{
    align-self:center;padding:9px 0;font-size:11.5px;position:relative;
  }
  .homo-ar::after{content:" ↓";color:var(--ink-3)}
  .proof-row{padding:13px 16px;gap:12px}
  .proof-row .k{font-size:12px}
  .proof-row .v{font-size:11.5px;white-space:normal;text-align:right}  /* 窄屏允许折行,别撑破 */
  .qr img{width:132px;height:132px}
  footer .wrap{flex-direction:column;align-items:flex-start;gap:16px}
  .foot-links{gap:18px;flex-wrap:wrap}
}

/* ── 减弱动效: 直接显示终态,不做动画 ── */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .eviq-said .hit,.chip{opacity:1!important;transform:none!important}
}