/* ==========================================================================
   归浦AI 官网 V9 · 浅色主题层（默认浅色 · V8 视觉语言的浅色版）
   --------------------------------------------------------------------------
   定位：加载在 v5 → v6 → page57 → v9 → v7 → v8 之间。
        v9 是「浅色默认」层；v7 + v8 在 html.dark7 下生效，作为「深色模式」覆盖层。
        本文件所有规则用 html:not(.dark7) 限定作用域，特异性 (0,1,1)，
        与 v7/v8 的 html.dark7 (0,1,1) 相同，但本层先加载，
        故 ?theme=dark 时 v7/v8 干净覆盖本层 —— 浅色/深色一键互切、完全可逆。

   设计取向：把 V8「编辑级 · 精密仪表」的语言从深色搬到浅色：
        —— 墨黑文字、白卡片、紫蓝单一强调、收紧字距、强调光带、
           卡片描边 + 顶部受光、按钮等宽、一次性弹簧入场、滚动定格。
        颜色反转逻辑（深色→浅色）：
          暖白文字 → 墨黑文字            深色卡片 → 白卡片
          亮描边     → 深色半透明描边       顶部白高光 → 顶部白内高光（浮起）
          紫蓝强调   → 加深一档保对比度（浅底上 #6D5AE6 ≈ 4.8:1）

   三条不可违反的约束（与 V8 一致）：
   1. 禁止新增任何 infinite 循环动画（除非处于 body.gp-idle 的暂停名单里）
   2. 入场动画一律 animation-fill-mode: backwards + 结束后 animation:none
   3. 禁止 backdrop-filter 与大尺寸 filter:blur()（实测各吃掉 8~12fps）
   ========================================================================== */

/* ==========================================================================
   1. 设计令牌 —— 浅色 · 精密仪表
   ========================================================================== */
html:not(.dark7) {
  /* ---- 表面阶梯（由浅到深，构成"白纸"的厚度与分区）---- */
  --u-page:#F6F7FB;          /* 全站底色：极淡冷白（非纯白，长时间浏览更舒适） */
  --u-surface:#FFFFFF;        /* 卡片面 */
  --u-surface-2:#FBFBFD;      /* 悬浮面 / 次级卡 */

  /* ---- 文字（墨黑，四级）---- */
  --u-ink:#0B0C12;            /* 主标题 */
  --u-ink-2:rgba(11,12,18,.72);
  --u-ink-3:rgba(11,12,18,.52);

  /* ---- 线 ---- */
  --u-line:rgba(11,12,18,.09);
  --u-line-2:rgba(11,12,18,.16);

  /* ---- 强调（浅底上加深一档保对比度）---- */
  --u-accent:#6D5AE6;         /* 紫：主强调（白底 ≈ 4.8:1） */
  --u-accent-2:#2F6FF0;       /* 蓝：第二强调 */
  --u-accent-deep:#5239D8;    /* 紫·深（悬停） */
  --u-accent-soft:rgba(109,94,224,.10);
  --u-mint:#0FAE7C;           /* 绿：正向数据（涨幅/达标/在线） */
  --u-warn:#E0873A;

  /* ---- 渐变（120°，紫→蓝→薄荷，用于强调光带与微光）---- */
  --u-grad:linear-gradient(120deg,#6D5AE6 0%,#2F6FF0 55%,#19C99A 100%);

  /* ---- 缓动：全站只准用这两个 ---- */
  --u-ease:cubic-bezier(.2,.8,.2,1);
  --u-spring:cubic-bezier(.34,1.45,.64,1);

  /* ---- 阴影层级（浅底靠"落影 + 顶部白内高光"塑形）---- */
  --u-shadow-1:0 1px 3px rgba(10,10,10,.05),inset 0 1px 0 rgba(255,255,255,.9);
  --u-shadow-2:0 4px 14px rgba(10,10,10,.06),0 1px 3px rgba(10,10,10,.05);
  --u-shadow-3:0 16px 40px rgba(10,10,10,.10),0 2px 8px rgba(10,10,10,.06);
  --u-shadow-4:0 28px 72px rgba(10,10,10,.12),0 6px 18px rgba(10,10,10,.07);

  /* ---- 圆角三档（提升物件感，覆盖 v5 的 22/16/12）---- */
  --u-r-lg:24px;
  --u-r-md:18px;
  --u-r-sm:12px;
}

/* ==========================================================================
   2. 令牌重指向 —— 一处改，全站跟随（v5 的蓝 #1B6BF5 / v7 的 d-brand）
   --------------------------------------------------------------------------
   把品牌蓝统一收进紫蓝。v5 的 .btn-primary{background:var(--brand)}
   会自动从蓝变紫蓝实底白字；链接 / 当前态 / 小箭头一并跟随。
   ========================================================================== */
html:not(.dark7) {
  --brand:#6D5AE6;
  --brand-deep:#5239D8;
  --d-brand:#6D5AE6;
  --d-brand-lt:#8B7BF0;
  --d-brand-deep:#5239D8;
  --d-brand-soft:rgba(109,94,224,.10);
  --d-glow:rgba(109,94,224,.22);
  --d-glow-sm:0 0 24px rgba(109,94,224,.16);
  --d-glow-md:0 0 64px rgba(109,94,224,.18);
}

/* 圆角 token 提升（覆盖 v5 的 --r-*，全站组件跟随） */
html:not(.dark7) {
  --r-sm:12px;
  --r-md:18px;
  --r-lg:24px;
  --r-xl:28px;
}

/* 辅助文字加深一档：v5 的 --muted:#8A8A8A 在浅底仅 ≈ 3.3:1，不达 AA。
   升到 #6B7280（≈ 5:1），正文注脚、卡片说明都更清晰 */
html:not(.dark7) {
  --muted:#6B7280;
}

html:not(.dark7) body{
  background:var(--u-page);
  color:var(--u-ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ==========================================================================
   2b. 首页 Hero 徽标与分类标签：从蓝色/彩色统一收进紫蓝色阶
   --------------------------------------------------------------------------
   v5 给首页徽标配了硬编码蓝色 #0F56C8 + 蓝色光晕；
   浅色主题下改用紫蓝，保持整站只有一套强调色相。
   ========================================================================== */
html:not(.dark7) body.gp-home .hero-badge{
  background:rgba(255,255,255,.86);
  border:1px solid rgba(109,94,224,.2);
  color:var(--u-accent);
  box-shadow:0 6px 18px rgba(109,94,224,.1);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
html:not(.dark7) body.gp-home .hero-badge i{
  background:var(--u-accent);
  box-shadow:0 0 0 4px rgba(109,94,224,.16);
}

/* 分类标签：v5 用了粉彩五色；浅色下统一为「淡紫底 + 紫蓝字」，
   靠亮度差而不是色相差区分，整屏只有一套色相 */
html:not(.dark7){
  --pk-mint:#F4F2FD;   --pk-mint-t:#6D5AE6;
  --pk-blue:#F4F2FD;   --pk-blue-t:#7B6AEB;
  --pk-violet:#F4F2FD; --pk-violet-t:#6D5AE6;
  --pk-orange:#F4F2FD; --pk-orange-t:#8B7BF0;
  --pk-pink:#F4F2FD;   --pk-pink-t:#9A8CF5;
  --pk-yellow:#F4F2FD; --pk-yellow-t:#A89BFA;
  --pk-cyan:#F4F2FD;   --pk-cyan-t:#7B6AEB;
  --pk-lime:#F4F2FD;   --pk-lime-t:#6D5AE6;
}

/* ==========================================================================
   3. 标题排版：收紧字距 + 拉高字重（与 V8 一致）
   ========================================================================== */
html:not(.dark7) body :is(.section-title,.display,.sec-h2,.page-title),
html:not(.dark7) body .hero h1.display,
html:not(.dark7) body .hero .hero-type{
  font-weight:800;
  letter-spacing:-.038em;
  line-height:1.1;
  color:var(--u-ink);
  text-wrap:balance;
}

html:not(.dark7) body .hero .hero-type .ht-l1{
  font-weight:800;
  letter-spacing:-.04em;
}
html:not(.dark7) body .hero .hero-type .ht-l2{
  font-size:.8em;
  font-weight:400;
  letter-spacing:-.01em;
  color:rgba(11,12,18,.68);
}

html:not(.dark7) body :is(.hero-sub,.section-sub,.sec-sub,.lead){
  color:rgba(11,12,18,.66);
  line-height:1.75;
  text-wrap:pretty;
}

/* 强调词 / 标题里的 <em>：深色文字 + 底部一道渐变光带（同 V8，但文字是墨黑） */
html:not(.dark7) .hl-grad,
html:not(.dark7) .display em,
html:not(.dark7) .page-head h1 em,
html:not(.dark7) .page-title em,
html:not(.dark7) .section-title em,
html:not(.dark7) .sec-h2 em,
html:not(.dark7) .big-cta .display em{
  background:var(--u-grad);
  background-size:100% 2px;
  background-repeat:no-repeat;
  background-position:0 100%;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  color:var(--u-ink);
  -webkit-text-fill-color:currentColor;
  padding-bottom:.08em;
  will-change:auto;
}

/* 首屏轮换词「增长」：浅色描边胶囊 + 紫字（同 V8 思路，浅底用浅紫底） */
html:not(.dark7) .hero-type .bub,
html:not(.dark7) .hero-type .bub.violet,
html:not(.dark7) .hero-type .bub.blue,
html:not(.dark7) .hero-type .bub.green,
html:not(.dark7) .hero-type .bub.pink,
html:not(.dark7) .hero-type .bub.mint,
html:not(.dark7) .hero-type .bub.amber{
  background:var(--u-accent-soft);
  color:var(--u-accent);
  border-radius:.2em;
  padding:.02em .16em;
  margin:0 .03em;
  box-shadow:inset 0 0 0 1px rgba(109,94,224,.4);
  -webkit-text-fill-color:currentColor;
}

/* ==========================================================================
   4. 卡片语言：白底 + 深色描边 + 顶部白内高光（浅色下立体感来源）
   --------------------------------------------------------------------------
   浅色下纯白卡片在浅灰底上易糊，靠「1px 深描边勾边界 + 顶部白内高光 + 落影」
   三者一起，卡片才"立"得起来。
   ========================================================================== */
html:not(.dark7) :is(.card,.metric,.case-card,.price-card,.svc-card,.lab-card,.eco-card){
  background:var(--u-surface);
  border:1px solid var(--u-line);
  border-radius:var(--u-r-md);
  box-shadow:var(--u-shadow-1);
  transition:border-color .3s var(--u-ease),
             background-color .3s var(--u-ease),
             transform .45s var(--u-spring),
             box-shadow .3s var(--u-ease);
}
html:not(.dark7) :is(.card,.metric,.case-card,.price-card,.svc-card,.lab-card,.eco-card){
  position:relative;
}

/* 悬停：只动 border-color 与 transform，两者走合成层，不触发重排 */
@media (hover:hover){
  html:not(.dark7) :is(.card,.metric,.case-card,.price-card,.svc-card,.lab-card,.eco-card):hover{
    border-color:var(--u-line-2);
    background:var(--u-surface-2);
    transform:translateY(-3px);
    box-shadow:var(--u-shadow-3);
  }
}

/* ==========================================================================
   5. 按钮：圆角 + 过渡（颜色靠 --brand 重指向自动变紫蓝实底白字）
   --------------------------------------------------------------------------
   ⚠ hero 双按钮等宽由 v6 的 grid 保证，本层绝不覆盖 .hero-actions 的
     grid-template-columns / width，只补过渡与悬停反馈。
   ========================================================================== */
html:not(.dark7) .btn{
  border-radius:var(--u-r-sm);
  font-weight:600;
  letter-spacing:-.005em;
  transition:background-color .25s var(--u-ease),
             border-color .25s var(--u-ease),
             color .25s var(--u-ease),
             transform .45s var(--u-spring),
             box-shadow .25s var(--u-ease);
}

/* v5 把首页所有 .btn-primary 做成黑色胶囊；浅色主题改回紫蓝实底白字。
   内页 .btn-primary 因 --brand 已指向紫蓝，会自然跟随。 */
html:not(.dark7) body.gp-home .btn-primary:not(.qa-submit),
html:not(.dark7) .btn-primary,
html:not(.dark7) .btn-accent{
  background:var(--u-accent);
  background-image:none;
  border-color:var(--u-accent);
  color:#fff;
  box-shadow:0 8px 22px rgba(109,94,224,.26);
}
html:not(.dark7) body.gp-home .btn-primary:not(.qa-submit):hover,
html:not(.dark7) .btn-primary:hover,
html:not(.dark7) .btn-accent:hover{
  background:var(--u-accent-deep);
  border-color:var(--u-accent-deep);
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(82,57,216,.32);
}

/* hero 双按钮：次按钮保持白底深色描边，与主按钮形成「实↔虚」对照 */
html:not(.dark7) .hero-actions .btn-line{
  background:#fff;
  color:var(--u-ink);
  border:1px solid rgba(11,12,18,.85);
  box-shadow:var(--u-shadow-1);
}
html:not(.dark7) .hero-actions .btn-line:hover{
  background:#fff;
  border-color:var(--u-ink);
  transform:translateY(-2px);
  box-shadow:var(--u-shadow-3);
}

/* hero 主按钮：v6 用 !important 把首页 hero 主按钮锁成黑色胶囊，
   浅色主题必须也用 !important 才能翻成紫蓝实底 */
html:not(.dark7) .hero-actions .btn-primary{
  background:var(--u-accent)!important;
  background-image:none!important;
  border:1px solid var(--u-accent)!important;
  color:#fff!important;
  box-shadow:0 8px 24px rgba(109,94,224,.28),0 1px 3px rgba(10,10,10,.08)!important;
}
html:not(.dark7) .hero-actions .btn-primary:hover{
  background:var(--u-accent-deep)!important;
  border-color:var(--u-accent-deep)!important;
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(82,57,216,.34),0 2px 6px rgba(10,10,10,.1)!important;
}
html:not(.dark7) .hero-actions .btn-primary .ha-txt,
html:not(.dark7) .hero-actions .btn-primary .ha-txt b,
html:not(.dark7) .hero-actions .btn-primary .arw{
  color:#fff!important;
}
html:not(.dark7) .hero-actions .btn-primary:focus-visible{outline:2px solid var(--u-accent);outline-offset:3px}
html:not(.dark7) .hero-actions .btn:active{transform:translateY(0) scale(.985)}

/* ==========================================================================
   5b. hero 浅色背景 —— 聚焦渐变 + 极淡双色晕（静态，不动，不破坏定格）
   --------------------------------------------------------------------------
   浅色下没有 V7 的暗色辉光，改用「顶部一束极淡紫光 + 整体白化渐变」，
   让 hero 区比下方更亮、更聚焦，又不抢内容。
   ========================================================================== */

/* ⚠ 性能（V7 时期实测）：.bg-deco .bl 是 560×520 大色块 + blur(58px)，
   滚动时每帧整块重栅格化，帧率从 60 掉到 27.9。
   它本身就是软边 radial-gradient，去掉模糊视觉上无差别。 */
html:not(.dark7) .bg-deco .bl{filter:none;opacity:.55}

html:not(.dark7) .hero{
  background:
    radial-gradient(120% 78% at 50% -12%, rgba(109,94,224,.10), transparent 62%),
    linear-gradient(180deg,#FFFFFF 0%, #F7F8FC 52%, #EEF1F8 100%);
}
/* hero-bg 的暗色辉光在浅色下透明；这里给它补一团极淡紫蓝晕呼应右侧预览 */
html:not(.dark7) .hero-bg{
  position:absolute;inset:0;overflow:hidden;
}
html:not(.dark7) .hero-bg::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(46% 42% at 16% 14%, rgba(109,94,224,.12), transparent 70%),
    radial-gradient(42% 40% at 88% 20%, rgba(47,111,240,.10), transparent 70%),
    radial-gradient(38% 38% at 52% 104%, rgba(25,201,154,.09), transparent 72%);
  pointer-events:none;
}

/* ==========================================================================
   6. 入场动效 —— 一次性弹簧上浮（与 V8 同形，浅色下同样适用）
   ========================================================================== */
@keyframes uRise{
  from{opacity:0;transform:translate3d(0,28px,0) scale(.975)}
  to  {opacity:1;transform:translate3d(0,0,0)     scale(1)}
}

html:not(.dark7) body.gp-home .reveal.in,
html:not(.dark7) body.gp-page .reveal.in{
  animation:uRise .7s var(--u-spring) backwards;
}

/* 结算标记：入场结束后彻底解除动画 */
html:not(.dark7) body.gp-home .reveal.in.is-settled,
html:not(.dark7) body.gp-page .reveal.in.is-settled,
html:not(.dark7) [data-wave].wv-in .wv-ch.is-settled,
html:not(.dark7) .rv-items.rv-in > *.is-settled{
  animation:none;
  opacity:1;
  transform:none;
}

/* 入场后再卸 will-change，避免合成层堆积（与 V8 同因） */
html:not(.dark7) .reveal.in,
html:not(.dark7) [data-wave].wv-in .wv-ch,
html:not(.dark7) .rv-items.rv-in > *{
  will-change:auto;
}

/* ==========================================================================
   7. 滚动定格保障 —— 通配符兜底（浅色版）
   --------------------------------------------------------------------------
   与 V8 完全一致：停手 / 切后台后全站动画冻结。
   ⚠ 关键：这条规则必须在 v9 内（html:not(.dark7)），否则 ?theme=dark 时
     会和 v8 的 dark7 版本重复但都命中 —— 其实重复无害，但为了语义干净，
     浅色用本条、深色用 v8 的 html.dark7 版，互不干扰。
   ========================================================================== */
html:not(.dark7) body.gp-idle *{animation-play-state:paused!important}
html:not(.dark7) body.gp-hidden *{animation-play-state:paused!important}

/* ==========================================================================
   8. 减少动效偏好：一律降级为瞬现
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html:not(.dark7) body.gp-home .reveal.in,
  html:not(.dark7) body.gp-page .reveal.in{
    animation:none;
    opacity:1;
    transform:none;
  }
  html:not(.dark7) *{
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
}