@charset "utf-8";
/* ============================================================
   趣牛（上海）文化传媒 — Craft Layer 工艺层 v6.1
   ------------------------------------------------------------
   定位：叠加在 style.css / home.css / ia.css 之上的"精度层"。
   职责：排版精度、表面质感、微动效、品牌符号渗透、可达性细节。
   纪律：不改写既有颜色语义、不改结构、不覆盖组件布局；
        只做增强，因此本文件可单独移除而站点依旧完整可用。
   ============================================================ */

/* ---------- 1. 字体：西文与数字用 Inter，中文自动回落系统最优栈 ---------- */
:root{
  --sans:"Inter","PingFang SC","Microsoft YaHei","Hiragino Sans GB",
         "Source Han Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Inter",ui-monospace,"SFMono-Regular","SF Mono",Menlo,Consolas,
         "Liberation Mono",monospace;
  /* 精度层专用的表面高光与 hairline */
  --sheen:inset 0 1px 0 rgba(255,255,255,.9);
  --hair:1px solid rgba(13,13,13,.06);
}
body{font-feature-settings:"kern" 1,"liga" 1; -moz-osx-font-smoothing:grayscale}

/* ---------- 2. 排版精度 ---------- */
/* 大标题换行平衡：避免末行孤字，大厂排版的标准动作 */
h1.display,.pagehead h1,h2.tit,.cta h2,.article h2{text-wrap:balance}
/* 数字与拉丁字母统一等宽对齐，表格/统计不跳动 */
.stat .num,.kpis b,.bignum b,.metrics b,.prog .val,table.data td:first-child{
  font-variant-numeric:tabular-nums;
}
/* 小标签字距：全大写拉丁用微宽字距，维持"工程感" */
.sec-label,.mini-label,.stat .lab,.principle .k{font-feature-settings:"kern" 1}

/* ---------- 3. 锚点 / 焦点 / 选择（可达性与手感） ---------- */
[id]{scroll-margin-top:92px}
::selection{background:var(--brand);color:#0D0D0D}
:focus-visible{outline:2px solid var(--brand-3);outline-offset:3px;border-radius:5px}

/* ---------- 4. 顶栏工艺：滚动态 + 阅读进度 ---------- */
header.bar{transition:box-shadow .3s ease,background .3s ease,border-color .3s ease}
header.bar.scrolled{
  background:rgba(255,255,255,.93);
  border-bottom-color:var(--line-2);
  box-shadow:0 1px 0 rgba(13,13,13,.04), 0 14px 34px -22px rgba(13,13,13,.45);
}
#scrollprog{
  position:fixed;left:0;top:0;height:2px;width:100%;z-index:80;
  transform:scaleX(0);transform-origin:left;pointer-events:none;
  background:var(--grad);
}

/* ---------- 5. 表面质感：hairline 高光 + 悬浮品牌描边 ---------- */
.card,.why,.bignum,.blist,.vs,.ledger,.duo .big,.num-card,.cap-cell{
  position:relative;
  box-shadow:var(--sheen), var(--sh-1);
}
/* 悬浮时顶部生长出一条品牌渐变细线（克制、有识别度） */
.card::before,.why::before,.num-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--grad);
  transform:scaleX(0);transform-origin:left;
  transition:transform .38s cubic-bezier(.2,.7,.2,1);
  border-radius:2px 2px 0 0;
  pointer-events:none;z-index:2;
}
.card:hover::before,.why:hover::before,.num-card:hover::before{transform:scaleX(1)}
/* 深空区内的卡片不要再叠白高光 */
.bottomless .card,.stat-band .card,.principle .card,.cta .card,footer .card{
  box-shadow:none;
}

/* ---------- 6. 按钮：一道掠过的光 ---------- */
.bar-cta,.btn.solid{position:relative;overflow:hidden;isolation:isolate}
.bar-cta::after,.btn.solid::after{
  content:"";position:absolute;inset:-2px;z-index:-1;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.42) 48%,transparent 64%);
  transform:translateX(-130%);
  transition:transform .75s cubic-bezier(.2,.7,.2,1);
}
.bar-cta:hover::after,.btn.solid:hover::after{transform:translateX(130%)}

/* ---------- 7. 导航：下划线由左生长（不动当前页指示条） ---------- */
nav.links a:not(.on){position:relative}
nav.links a:not(.on)::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;
  background:var(--grad-brand);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
nav.links a:not(.on):hover::after{transform:scaleX(1)}

/* ---------- 8. 品牌符号渗透：深空区浮出牛角 O ---------- */
.stat-band,.principle{overflow:hidden}
.stat-band::after{
  content:"";position:absolute;right:-3%;bottom:-42%;
  width:440px;height:440px;max-width:52vw;
  background:url("ox-mark.svg") no-repeat center/contain;
  opacity:.075;pointer-events:none;z-index:0;
}
footer{position:relative;overflow:hidden}
footer::after{
  content:"";position:absolute;left:-4%;top:-30%;
  width:380px;height:380px;max-width:48vw;
  background:url("ox-mark.svg") no-repeat center/contain;
  opacity:.06;pointer-events:none;z-index:0;
}

/* ---------- 9. 滚动条：与米白底同族的暖灰 ---------- */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{
  background:#DCD2B2;border-radius:99px;border:3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover{background:#C9BC94}

/* ---------- 10. 打印：留在线，去掉装饰 ---------- */
@media print{
  header.bar,#scrollprog,.marquee,.cta-deco,.principle-deco{display:none!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* ---------- 11. 尊重系统减弱动效设置 ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  #scrollprog{display:none}
}