/* ==========================================================================
   归浦AI 官网 V10 · 全局设计系统（Global System）
   --------------------------------------------------------------------------
   参考锚点：dropship.io —— 纯白画布 + 墨黑标题 + 单一品牌蓝 + 圆形软阴影卡片
                        + 大面积柔性蓝色波浪/拱形 + 3D 质感图标 + 弹性缓动

   视觉基因（五条，所有页面必须服从）：
     1. 画布纯白 #FFFFFF，分区靠 #F7F9FF 极淡蓝与大片留白，不靠描边分隔
     2. 文字墨黑 #0A0E1A，标题字重 700、字距 -0.03em；正文 -0.01em
     3. 唯一强调色品牌蓝 #2B5BE8（渐变 #4E82FF → #1F49D6），其余色彩只出现在图标
     4. 卡片 = 纯白 + 24px 圆角 +「1px #EDF1F8 描边 + 双层大扩散软阴影」，无左侧强调条
     5. 动效：cubic-bezier(.34,1.56,.64,1) 弹性挤压，位移 4~8px，时长 .4~.7s

   命名空间：本文件所有新增类以 gp- 前缀开头，避免与 v5 旧样式冲突。
   旧层（v5/v6/v7/v8/v9/page57）保留在包里作为回滚路径；
   本文件排在最后加载，用同特异性或更高特异性覆盖。
   ========================================================================== */

/* ---------- 0. 字体 ---------- */
:root{
  --gp-font: "Plus Jakarta Sans", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --gp-font-cn: "Inter", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --gp-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- 1. 令牌 ---------- */
:root, html:not(.dark7){
  /* 表面 */
  --gp-white:#FFFFFF;
  --gp-canvas:#FFFFFF;
  --gp-soft:#F7F9FF;          /* 分区底 */
  --gp-soft-2:#EFF4FF;        /* 更实一点的分区底 / 表头 */
  --gp-tint:#EAF1FF;          /* 淡蓝底（徽章 / 选中） */

  /* 文字 */
  --gp-ink:#0A0E1A;
  --gp-ink-2:#2B3244;
  --gp-ink-3:#5B6478;
  --gp-ink-4:#8A93A6;

  /* 线 */
  --gp-line:#E9EEF7;
  --gp-line-2:#DCE4F2;
  --gp-line-strong:#C9D4E8;

  /* 品牌 */
  --gp-brand:#2B5BE8;
  --gp-brand-hi:#4E82FF;
  --gp-brand-deep:#1F49D6;
  --gp-brand-soft:#EAF1FF;
  --gp-brand-line:#C6D8FF;
  --gp-brand-grad:linear-gradient(135deg,#4E82FF 0%,#2B5BE8 52%,#1F49D6 100%);

  /* 语义 */
  --gp-mint:#12B886;
  --gp-mint-soft:#E6F8F2;
  --gp-amber:#F08C2E;
  --gp-amber-soft:#FFF3E6;
  --gp-red:#E5484D;
  --gp-red-soft:#FDECEC;
  --gp-violet:#7B5CFA;

  /* 阴影：参考站是「大扩散 + 极低透明」的柔光，不是硬投影 */
  --gp-sh-xs:0 1px 2px rgba(16,24,40,.04);
  --gp-sh-sm:0 2px 6px rgba(16,24,40,.04), 0 1px 2px rgba(16,24,40,.03);
  --gp-sh-md:0 10px 30px -12px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.03);
  --gp-sh-lg:0 24px 60px -24px rgba(16,24,40,.18), 0 6px 16px -8px rgba(16,24,40,.06);
  --gp-sh-xl:0 40px 90px -30px rgba(23,43,99,.22), 0 10px 24px -12px rgba(23,43,99,.08);
  --gp-sh-brand:0 14px 30px -12px rgba(43,91,232,.45);

  /* 圆角 */
  --gp-r-xs:8px;
  --gp-r-sm:12px;
  --gp-r-md:18px;
  --gp-r-lg:24px;
  --gp-r-xl:32px;
  --gp-r-2xl:44px;
  --gp-r-pill:999px;

  /* 缓动 */
  --gp-ease:cubic-bezier(.22,.61,.36,1);
  --gp-spring:cubic-bezier(.34,1.56,.64,1);

  /* ---------- 兼容层：把 v9 的紫色强调变量重指向品牌蓝 ----------
     v9.css 用 --u-accent / --u-accent-2 / --u-accent-deep 驱动内页按钮、
     链接、标签与价格卡，紫色 (#6D5AE6) 与新顶栏蓝不一致。
     这里直接重定义变量（而非逐条覆盖），是最小侵入的换色方式。 */
  --u-accent:#2B5BE8;
  --u-accent-2:#4E82FF;
  --u-accent-deep:#1F49D6;
  --u-accent-soft:rgba(43,91,232,.10);
  --brand:#2B5BE8;
  --brand-2:#4E82FF;

  /* 兼容层：page56/page57 的「极欧」令牌同样是紫色，一并重指向品牌蓝 */
  --j56-brand:#2B5BE8;
  --j56-brand-deep:#1F49D6;
  --j56-cyan:#4E82FF;
  --j56-soft:#EAF1FF;
  --j56-wash:linear-gradient(140deg,#F4F8FF 0%,#FFFFFF 100%);
  --j56-glow:linear-gradient(135deg,rgba(43,91,232,.10),rgba(78,130,255,.16));
  --j56-grad:linear-gradient(120deg,#2B5BE8 0%,#4E82FF 100%);
  --j56-sh:0 14px 36px rgba(23,43,99,.10);

  /* 兼容层：v5 的 --brand / --brand-2 已在上面重指向；这里补 v6/v7 的别名 */
  --u-brand:#2B5BE8;

  /* 版心 */
  --gp-max:1200px;
  --gp-gutter:24px;
}

/* ---------- 2. 基础 ---------- */
html:not(.dark7) html{background:#fff}
html:not(.dark7) body{
  background:var(--gp-canvas);
  color:var(--gp-ink);
  font-family:var(--gp-font);
  font-size:16px;
  line-height:1.65;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
html:not(.dark7) body *{box-sizing:border-box}
html:not(.dark7) ::selection{background:var(--gp-tint);color:var(--gp-brand-deep)}
html:not(.dark7) main{display:block}

/* 版心 */
.gp-wrap{width:100%;max-width:var(--gp-max);margin:0 auto;padding:0 var(--gp-gutter)}
.gp-wrap--narrow{max-width:900px}

/* ---------- 3. 排版 ---------- */
.gp-h1,.gp-h2,.gp-h3,.gp-h4{
  margin:0;
  font-family:var(--gp-font);
  color:var(--gp-ink);
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1.1;
  text-wrap:balance;
}
.gp-h1{font-size:clamp(38px,5.4vw,68px);line-height:1.05}
.gp-h2{font-size:clamp(28px,3.5vw,46px);line-height:1.12}
.gp-h3{font-size:clamp(20px,2vw,26px);line-height:1.25;letter-spacing:-.025em}
.gp-h4{font-size:18px;line-height:1.35;letter-spacing:-.018em}

/* 标题里的高亮词：参考站用纯蓝色字，不加下划线、不加渐变文字 */
.gp-h1 em,.gp-h2 em,.gp-h3 em{
  font-style:normal;
  color:var(--gp-brand);
}
/* 强调词下的手绘短横线（仅 h2 可用 .gp-underline） */
.gp-underline{position:relative;display:inline-block}
.gp-underline::after{
  content:"";position:absolute;left:0;right:0;bottom:-.06em;height:.14em;
  background:var(--gp-brand);opacity:.18;border-radius:99px;
}

.gp-lead{
  margin:0;color:var(--gp-ink-3);
  font-size:clamp(16px,1.35vw,19px);
  line-height:1.7;letter-spacing:-.005em;
  text-wrap:pretty;
}
.gp-body{color:var(--gp-ink-3);font-size:16px;line-height:1.75;text-wrap:pretty}
.gp-small{font-size:14px;line-height:1.65;color:var(--gp-ink-3)}
.gp-tiny{font-size:12.5px;line-height:1.6;color:var(--gp-ink-4);letter-spacing:0}

/* 眉标：小写字母 + 宽字距，参考站的 section eyebrow */
.gp-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gp-brand);
}
.gp-eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;
}

/* 行内链接 */
.gp-link{
  color:var(--gp-brand);font-weight:600;text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;
  transition:gap .3s var(--gp-spring), color .2s;
}
.gp-link:hover{gap:10px;color:var(--gp-brand-deep)}
.gp-link svg{flex:none;transition:transform .3s var(--gp-spring)}
.gp-link:hover svg{transform:translateX(2px)}

/* ---------- 4. 按钮 ---------- */
.gp-btn{
  --h:48px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:var(--h);padding:0 22px;
  border-radius:var(--gp-r-pill);
  border:1px solid transparent;
  font-family:inherit;font-size:15px;font-weight:600;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .45s var(--gp-spring), background-color .25s, border-color .25s, box-shadow .3s, color .2s;
  -webkit-tap-highlight-color:transparent;
}
.gp-btn svg{flex:none;transition:transform .45s var(--gp-spring)}
.gp-btn:hover svg.gp-arw{transform:translateX(3px)}
.gp-btn:active{transform:scale(.97)}
.gp-btn:focus-visible{outline:2px solid var(--gp-brand);outline-offset:3px}

/* 主按钮：品牌蓝实底 + 同色投影（参考站 Start Free Trial） */
.gp-btn--primary,
html:not(.dark7) .gp-btn--primary{
  background:var(--gp-brand);
  background-image:none;
  border-color:var(--gp-brand);
  color:#fff;
  box-shadow:var(--gp-sh-brand);
}
.gp-btn--primary:hover,
html:not(.dark7) .gp-btn--primary:hover{
  background:var(--gp-brand-deep);
  border-color:var(--gp-brand-deep);
  transform:translateY(-2px);
  box-shadow:0 18px 36px -14px rgba(31,73,214,.5);
}

/* 次按钮：白底细描边（参考站 Install Extension） */
.gp-btn--line,
html:not(.dark7) .gp-btn--line{
  background:#fff;
  border-color:var(--gp-line-2);
  color:var(--gp-ink);
  box-shadow:var(--gp-sh-sm);
}
.gp-btn--line:hover,
html:not(.dark7) .gp-btn--line:hover{
  border-color:var(--gp-line-strong);
  background:#fff;
  transform:translateY(-2px);
  box-shadow:var(--gp-sh-md);
}

/* 深色按钮（用于浅蓝分区上的强对比） */
.gp-btn--dark{background:var(--gp-ink);border-color:var(--gp-ink);color:#fff}
.gp-btn--dark:hover{background:#1b2233;border-color:#1b2233;transform:translateY(-2px)}

/* 白底反色按钮（用于蓝色区块） */
.gp-btn--white{background:#fff;border-color:#fff;color:var(--gp-brand-deep);box-shadow:0 14px 30px -12px rgba(9,26,74,.5)}
.gp-btn--white:hover{transform:translateY(-2px);box-shadow:0 20px 40px -16px rgba(9,26,74,.55)}

/* 幽灵按钮 */
.gp-btn--ghost{background:transparent;border-color:transparent;color:var(--gp-ink-2)}
.gp-btn--ghost:hover{background:var(--gp-soft)}

.gp-btn--sm{--h:40px;padding:0 16px;font-size:14px}
.gp-btn--lg{--h:56px;padding:0 30px;font-size:16px}
.gp-btn--block{width:100%}

/* 按钮组：手机端并列等宽 */
.gp-btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- 5. 卡片 ---------- */
.gp-card{
  position:relative;
  background:#fff;
  border:1px solid var(--gp-line);
  border-radius:var(--gp-r-lg);
  box-shadow:var(--gp-sh-sm);
  transition:transform .5s var(--gp-spring), box-shadow .35s var(--gp-ease), border-color .3s;
}
@media (hover:hover){
  .gp-card:hover{transform:translateY(-4px);box-shadow:var(--gp-sh-lg);border-color:var(--gp-line-2)}
}
.gp-card--flush{padding:0;overflow:hidden}
.gp-card--pad{padding:28px}
.gp-card--soft{background:var(--gp-soft);border-color:transparent;box-shadow:none}
.gp-card--brand{background:var(--gp-brand-grad);border-color:transparent;color:#fff;box-shadow:var(--gp-sh-lg)}

/* 图标：3D 质感拟物块的简化版（渐变底 + 内高光 + 落影），不用 emoji */
.gp-ico{
  --s:56px;
  width:var(--s);height:var(--s);flex:none;
  display:grid;place-items:center;
  border-radius:18px;
  color:#fff;
  background:var(--gp-brand-grad);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 6px rgba(9,26,74,.18), 0 10px 20px -10px rgba(43,91,232,.55);
}
.gp-ico svg{width:52%;height:52%}
.gp-ico--sm{--s:40px;border-radius:13px}
.gp-ico--lg{--s:72px;border-radius:22px}
.gp-ico--white{background:#fff;color:var(--gp-brand);box-shadow:inset 0 1px 0 #fff, 0 10px 22px -10px rgba(23,43,99,.35)}
.gp-ico--soft{background:var(--gp-brand-soft);color:var(--gp-brand);box-shadow:none}
.gp-ico--mint{background:linear-gradient(140deg,#3ED9A4,#12B886);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 20px -10px rgba(18,184,134,.5)}
.gp-ico--amber{background:linear-gradient(140deg,#FFC46B,#F08C2E);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 20px -10px rgba(240,140,46,.5)}
.gp-ico--violet{background:linear-gradient(140deg,#A78BFA,#7B5CFA);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 20px -10px rgba(123,92,250,.5)}
.gp-ico--ink{background:#0A0E1A;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 20px -10px rgba(10,14,26,.6)}

/* 徽标 / 胶囊标签 */
.gp-chip{
  display:inline-flex;align-items:center;gap:7px;
  height:32px;padding:0 14px;border-radius:var(--gp-r-pill);
  background:#fff;border:1px solid var(--gp-line-2);
  font-size:13.5px;font-weight:600;color:var(--gp-ink-2);letter-spacing:-.005em;
  box-shadow:var(--gp-sh-xs);
  white-space:nowrap;
}
.gp-chip--soft{background:var(--gp-brand-soft);border-color:var(--gp-brand-line);color:var(--gp-brand-deep)}
.gp-chip--live{background:#fff;border-color:var(--gp-line-2);color:var(--gp-ink-2)}
.gp-chip--live i{
  width:7px;height:7px;border-radius:50%;background:var(--gp-mint);flex:none;
  box-shadow:0 0 0 3px rgba(18,184,134,.16);
}
.gp-chip b{font-weight:700;color:var(--gp-brand)}
.gp-chip--xs{height:24px;padding:0 10px;font-size:11.5px;font-weight:600}

/* 分区 */
.gp-sec{padding:clamp(64px,7vw,112px) 0;position:relative}
.gp-sec--tight{padding:clamp(44px,4.5vw,72px) 0}
.gp-sec--soft{background:var(--gp-soft)}
.gp-sec--head{text-align:center;max-width:820px;margin:0 auto}
.gp-sec--head .gp-lead{margin:16px auto 0;max-width:660px}

/* ---------- 6. 入场动效 ---------- */
/* 只用 opacity + translate3d，全部走合成层：60fps 下不掉帧，
   避免 height/width/top 这类会触发重排的属性参与动画。 */
@keyframes gpRise{
  from{opacity:0;transform:translate3d(0,20px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes gpFade{
  from{opacity:0}
  to{opacity:1}
}
@keyframes gpZoom{
  from{opacity:0;transform:scale(.965)}
  to{opacity:1;transform:scale(1)}
}
.gp-rv{opacity:0;will-change:opacity,transform}
.gp-rv.gp-in{
  animation:gpRise .62s cubic-bezier(.22,.68,.28,1) forwards;
  will-change:auto;
}
/* 首屏元素：进场更快一点，避免「等动画」的观感 */
.hero .gp-rv.gp-in{animation-duration:.72s}
.gp-rv[data-d="60"]{animation-delay:.06s}
.gp-rv[data-d="120"]{animation-delay:.12s}
.gp-rv[data-d="180"]{animation-delay:.18s}
.gp-rv[data-d="240"]{animation-delay:.24s}
.gp-rv[data-d="300"]{animation-delay:.3s}
.gp-rv[data-d="360"]{animation-delay:.36s}
/* 卡片类：从轻微放大进入，比纯位移更有「落位感」 */
.gp-rv--zoom.gp-in{animation-name:gpZoom;animation-timing-function:var(--gp-spring)}

/* 无 JS 兜底：3 秒后无论如何显示，避免内容永久隐藏 */
.gp-rv{z-index:0}

@keyframes gpFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
@keyframes gpPulse{
  0%,100%{opacity:.55;transform:scale(1)}
  50%{opacity:.9;transform:scale(1.06)}
}
@keyframes gpSpin{to{transform:rotate(360deg)}}
@keyframes gpShimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}

/* 滚动定格：停手 / 切后台全站冻结（延续 V8/V9 的硬约束） */
body.gp-idle *,body.gp-hidden *{animation-play-state:paused!important}

@media (prefers-reduced-motion:reduce){
  html:not(.dark7) *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .gp-rv{opacity:1!important;transform:none!important}
}

/* ---------- 7. 通用工具 ---------- */
.gp-stack{display:grid}
.gp-row{display:flex;align-items:center}
.gp-gap-8{gap:8px}.gp-gap-12{gap:12px}.gp-gap-16{gap:16px}.gp-gap-24{gap:24px}
.gp-mt-8{margin-top:8px}.gp-mt-12{margin-top:12px}.gp-mt-16{margin-top:16px}
.gp-mt-24{margin-top:24px}.gp-mt-32{margin-top:32px}.gp-mt-40{margin-top:40px}
.gp-center{text-align:center}
.gp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html:not(.dark7) .gp-muted{color:var(--gp-ink-3)}

/* 细分割线 */
.gp-hr{height:1px;background:var(--gp-line);border:0;margin:0}

/* 蓝色柔光背景（区块级别，参考站的拱形光） */
.gp-glow{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.gp-glow::before{
  content:"";position:absolute;left:50%;top:-30%;width:140%;aspect-ratio:2/1;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(78,130,255,.16), transparent 70%);
}