/* ============================================================
   众泰云 · 世界级设计语言层 v2
   ------------------------------------------------------------
   v1 的问题：卡片面与描边写死了白色半透明，在**亮色模式**下等于不可见
              （实测：亮色下 .kk-card 看起来是纯白平面）。
   v2 的修法：全部改用 theme-contract.css 的契约 token，深浅两态自动适配。
              只有"品牌金色"与"噪点"是刻意固定的。

   定位：只加层，不改结构；全部目标选择器都用站内既有类名。
   注意：本文件注释里不得出现任何闭合标签。
   ============================================================ */

/* ---------- ① 材质层 ---------- */
/* 全局噪点：SVG feTurbulence 生成，零图片依赖。这一层是世界级与"塑料感"的分水岭 */
html body::after{
  content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none;
  opacity:.028;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 首屏背光与网格：用 currentColor 无关的透明层，深浅两态都成立 */
html body .hero{position:relative;isolation:isolate}
html body .hero::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(58% 44% at 50% 8%, var(--c-gold-tint, rgba(232,163,61,.08)) 0%, transparent 68%),
    radial-gradient(52% 44% at 12% 4%, rgba(96,128,226,.07) 0%, transparent 62%),
    radial-gradient(46% 38% at 88% 12%, var(--c-gold-tint, rgba(232,163,61,.05)) 0%, transparent 60%);
}
html body .hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--c-border, rgba(128,128,128,.10)) 1px, transparent 1px),
                   linear-gradient(90deg, var(--c-border, rgba(128,128,128,.10)) 1px, transparent 1px);
  background-size:62px 62px;
  -webkit-mask-image:radial-gradient(76% 62% at 50% 38%,#000 0%,transparent 76%);
  mask-image:radial-gradient(76% 62% at 50% 38%,#000 0%,transparent 76%);
}
html body .hero .wc-spot{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(420px 420px at var(--mx,50%) var(--my,30%), var(--c-gold-tint, rgba(232,163,61,.09)), transparent 70%);
  transition:background .18s linear;
}

/* ---------- ② 结构层：Bento ---------- */
html body .kk-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(118px,auto);gap:14px;
}
html body .kk-grid > .kk-card:nth-child(1){grid-column:span 2;grid-row:span 2}
html body .kk-grid > .kk-card:nth-child(2){grid-column:span 2}
html body .kk-grid > .kk-card:nth-child(3),
html body .kk-grid > .kk-card:nth-child(4){grid-column:span 1}
html body .kk-grid > .kk-card:nth-child(n+5){grid-column:span 2}

html body .kk-grid > .kk-card:nth-child(1){padding:24px}
html body .kk-grid > .kk-card:nth-child(1) .kk-name{font-size:19px}
html body .kk-grid > .kk-card:nth-child(1) .kk-blurb{font-size:14.5px;margin-top:9px}

/* 卡片材质：用契约 token —— --c-card 是卡片面，--c-border 是描边，深浅两态自动切换 */
html body .kk-card{
  position:relative;overflow:hidden;
  background:var(--c-card, rgba(127,127,127,.05));
  border:1px solid var(--c-border, rgba(127,127,127,.14));
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 4px 14px -8px rgba(0,0,0,.10);
  transition:transform .38s cubic-bezier(.22,1,.36,1),border-color .38s,box-shadow .38s;
}
html body .kk-card::before{
  content:"";position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .38s;
  background:radial-gradient(340px 340px at var(--mx,50%) var(--my,50%), var(--c-gold-soft, rgba(232,163,61,.14)), transparent 62%);
}
html body .kk-card:hover{
  transform:translateY(-4px);
  border-color:var(--c-gold-line, rgba(232,163,61,.38));
  box-shadow:0 18px 40px -18px rgba(0,0,0,.34), 0 0 0 1px var(--c-gold-tint, rgba(232,163,61,.14));
}
html body .kk-card:hover::before{opacity:1}

/* 徽标：品牌色淡底，强化"这一格是什么" */
html body .kk-badge{
  background:var(--c-gold-tint, rgba(232,163,61,.12));
  border:1px solid var(--c-gold-line, rgba(232,163,61,.24));
  color:var(--c-gold-d, #A96712);
}
:root[data-theme="dark"] html body .kk-badge,
html[data-theme="dark"] body .kk-badge{color:var(--c-gold-2, #F0C583)}

/* ---------- ③ 运动层 ---------- */
@media (prefers-reduced-motion: no-preference){
  html body .reveal{opacity:0;transform:translateY(24px);
    transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1)}
  html body .reveal.wc-in{opacity:1;transform:none}
}
html body .hero h1{letter-spacing:-.021em;line-height:1.14}
html body .sec-head h2{letter-spacing:-.015em}
html body .sec-head h2 em{font-style:normal;color:var(--c-gold-d,#A96712)}
:root[data-theme="dark"] html body .sec-head h2 em,
html[data-theme="dark"] body .sec-head h2 em{color:var(--c-gold,#E8A33D)}

html body .btn{transition:transform .22s cubic-bezier(.34,1.45,.64,1),box-shadow .22s}
html body .btn:hover{transform:translateY(-2px)}
html body .btn-gold:hover,html body .btn--gold:hover,html body .btn-primary:hover{
  box-shadow:0 14px 34px var(--c-gold-shadow, rgba(232,163,61,.40));
}
html body [data-count]{font-variant-numeric:tabular-nums}

/* 导航滚动态（zt-motion.js 加类） */
html body .nav.wc-scrolled,html body header.nav.wc-scrolled{
  border-bottom-color:var(--c-border, rgba(127,127,127,.16));
}

/* ---------- 窄屏 ---------- */
@media (max-width:900px){
  html body .kk-grid{grid-template-columns:repeat(2,1fr)}
  html body .kk-grid > .kk-card:nth-child(n){grid-column:span 1;grid-row:auto}
  html body .kk-grid > .kk-card:nth-child(1){grid-column:span 2}
}
@media (max-width:560px){
  html body .kk-grid{grid-template-columns:1fr}
  html body .kk-grid > .kk-card:nth-child(n){grid-column:span 1}
}

/* ============================================================
   首屏产品界面（第四十六批）
   ------------------------------------------------------------
   把首屏的视觉锚点从"抽象渐变"换成**我们自己的天策工作台界面**。
   做法：保留 .hero-in 内的文案结构，把重复的 .hero-trust 换成 .hero-shot。
   说明：.hero-trust 的三项与紧随其后的 .stats 区块**完全重复**
        （204 智能体 / 即将上线插件 / 中英双语），此处去重，内容仍在 .stats 中。
   ============================================================ */
html body .hero-shot{
  position:relative;width:100%;max-width:1060px;
  margin:clamp(26px,4vh,46px) auto 0;
  perspective:2200px;
}
html body .hero-shot::before{
  content:"";position:absolute;left:50%;top:8%;transform:translateX(-50%);
  width:86%;height:70%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side, var(--c-gold-soft, rgba(232,163,61,.16)), transparent 72%);
  filter:blur(44px);
}
html body .hero-shot img{
  position:relative;z-index:1;display:block;width:100%;height:auto;
  border-radius:14px 14px 0 0;
  border:1px solid var(--c-border, rgba(127,127,127,.18));
  border-bottom:0;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.08),
             0 30px 80px -22px rgba(0,0,0,.62);
  transform:rotateX(6deg);transform-origin:50% 100%;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion: no-preference){
  html body .hero-shot:hover img{transform:rotateX(2deg) translateY(-4px)}
}
@media (prefers-reduced-motion: reduce){
  html body .hero-shot img{transform:none}
}
/* 首屏下沿与下一区块的衔接：渐隐，避免"被切断" */
html body .hero-shot::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%, var(--c-bg, #06060A) 96%);
}
@media (max-width:760px){
  html body .hero-shot{max-width:100%}
}