/* ============================================================
   拉片宝官网 · 设计 token
   数值来源：apple.com.cn 实站提取（2026-07）+ 库内苹果设计体系研究
   ============================================================ */

:root {
  /* ---- 颜色：唯一强调蓝 + 墨黑 + 瓷白 + 近黑卡阶 ---- */
  --c-blue:        #0066cc;   /* Action Blue：全站唯一交互色 */
  --c-blue-focus:  #0071e3;   /* 键盘焦点环 */
  --c-blue-ondark: #2997ff;   /* 深底链接蓝 */
  --c-ink:         #1d1d1f;   /* 墨黑正文 */
  --c-ink-soft:    #333333;
  --c-muted:       #6e6e73;   /* 眉题灰 */
  --c-muted-2:     #86868b;   /* 次级灰 */
  --c-hairline:    #e0e0e0;
  --c-white:       #ffffff;
  --c-parchment:   #f5f5f7;   /* 瓷白 */
  --c-pearl:       #fafafc;
  --c-dark-1:      #1a1a1c;   /* 深色区段主底（近黑微暖） */
  --c-dark-2:      #2a2a2c;
  --c-black:       #000000;
  --c-board:       #ececec;   /* 总结页画板底 */
  --c-board-canvas:#f6f6f7;

  /* ---- 图标渐变（取自拉片宝图标色带） ---- */
  --g-icon: linear-gradient(96deg, #f7d94c 0%, #7fd88a 26%, #4aa7e8 55%, #6f6ae0 82%, #9a5fd8 100%);
  --g-download: linear-gradient(135deg, #4aa7e8, #6f6ae0);
  --g-music: linear-gradient(135deg, #ff6180, #f2063d);

  /* ---- 唯一产品阴影（只给产品图，不给卡片/按钮/文字） ---- */
  --shadow-product: 3px 5px 30px rgba(0, 0, 0, .22);

  /* ---- 圆角语法 ---- */
  --r-sm:   8px;
  --r-md:   11px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-pill: 980px;

  /* ---- 间距与容器 ---- */
  --sp-section: 110px;        /* 区段纵向呼吸 */
  --sp-section-tight: 72px;
  --w-text:  700px;           /* 正文列宽 */
  --w-wide:  1240px;          /* 媒体/网格容器 */
  --w-max:   1440px;

  /* ---- 导航 ---- */
  --nav-h: 48px;
  --nav-blur: saturate(180%) blur(20px);
  --nav-bg-stuck: rgba(250, 250, 252, .8);

  /* ---- 动效 token（apple.com 源码提取值） ---- */
  --ease-system:  cubic-bezier(.4, 0, .6, 1);      /* 体系默认，全站 122 处 */
  --ease-out:     cubic-bezier(.28, .11, .32, 1);  /* 入场/贴附 */
  --ease-major:   cubic-bezier(.66, 0, .1, 1);     /* 大幅位移 */
  --ease-move:    cubic-bezier(0, 0, .5, 1);       /* transform 专用 */
  --ease-inout-quad: cubic-bezier(.455, .03, .515, .955); /* easeInOutQuad 近似 */
  --t-fast:   100ms;
  --t-ctrl:   200ms;
  --t-nav:    240ms;
  --t-tab:    320ms;
  --t-fade:   400ms;
  /* StaggeredFadeIn：位移 0.7s / 透明 0.9s / 级差 0.15s / 位移量 28px */
  --stagger-y: 28px;
  --stagger-y-ms: 700ms;
  --stagger-o-ms: 900ms;
  --stagger-gap-ms: 150ms;

  /* ---- 字体栈：受众为 Mac 用户，系统栈即正牌 SF Pro + 苹方 ---- */
  --font-stack: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                "PingFang SC", "Helvetica Neue", "Noto Sans SC", sans-serif;
}

/* ============ 基础重置 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; /* 苹果做法：关掉原生平滑，由 JS 驱动锚点 */ }
body {
  font-family: var(--font-stack);
  color: var(--c-ink);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--c-blue); text-decoration: none; }
button { font-family: inherit; border: 0; background: none; cursor: pointer; }

/* ============ 排版角色（官网 300+ 样本统计值） ============ */

/* 眉题：21/600 灰 */
.t-eyebrow {
  font-size: 21px; font-weight: 600; line-height: 1.19;
  letter-spacing: .011em; color: var(--c-muted);
}
/* 首屏大标题：48→80，600，行高 1.05，中文不用负字距 */
.t-hero {
  font-size: clamp(46px, 7.2vw, 84px);
  font-weight: 600; line-height: 1.05; letter-spacing: 0;
}
/* 区段大标题：32→56，600 */
.t-headline {
  font-size: clamp(30px, 4.2vw, 54px);
  font-weight: 600; line-height: 1.09; letter-spacing: 0;
}
/* 强调副题：21/600/29 */
.t-lead {
  font-size: 21px; font-weight: 600; line-height: 1.38; letter-spacing: .011em;
}
/* 正文：17/400/1.47（是 17px，不是 16px） */
.t-body {
  font-size: 17px; font-weight: 400; line-height: 1.47; letter-spacing: 0;
}
/* 卡片标题：28/600/35 */
.t-card {
  font-size: 28px; font-weight: 600; line-height: 1.25; letter-spacing: .007em;
}
/* 说明小字：14/400 */
.t-caption {
  font-size: 14px; font-weight: 400; line-height: 1.43; color: var(--c-muted-2);
}
/* 参数大数值 */
.t-stat {
  font-size: clamp(28px, 3vw, 40px); font-weight: 600; line-height: 1.1;
}
.t-fineprint { font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--c-muted-2); }

/* ============ 按钮（pill 语法 + 按压 scale .95） ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 17px; font-weight: 400; line-height: 1;
  padding: 13px 26px; border-radius: var(--r-pill);
  transition: background-color var(--t-fast) linear, color var(--t-fast) linear,
              transform var(--t-ctrl) var(--ease-move), opacity var(--t-fast) linear;
  will-change: transform;
}
.btn:active { transform: scale(.95); }
.btn:focus-visible { outline: 2px solid var(--c-blue-focus); outline-offset: 3px; }
.btn-primary { background: var(--c-blue); color: #fff; }
.btn-primary:hover { background: #0a70d6; }
.btn-secondary {
  color: var(--c-blue); background: transparent;
  box-shadow: inset 0 0 0 1px var(--c-blue);
}
.btn-secondary:hover { background: rgba(0, 102, 204, .06); }
.btn-lg { font-size: 19px; padding: 16px 32px; }
.btn-sm { font-size: 14px; padding: 9px 18px; }
.btn.is-disabled { opacity: .45; pointer-events: none; }

/* 深色区段的次级钮换深底描边 */
.section--dark .btn-secondary {
  color: var(--c-blue-ondark);
  box-shadow: inset 0 0 0 1px var(--c-blue-ondark);
}

/* ============ 区段主题 ============ */
.section { padding: var(--sp-section) 0; }
.section--white     { background: var(--c-white);     color: var(--c-ink); }
.section--parchment { background: var(--c-parchment); color: var(--c-ink); }
.section--dark      { background: var(--c-dark-1);    color: var(--c-parchment); }
.section--black     { background: var(--c-black);     color: var(--c-parchment); }
.section--board     { background: var(--c-board-canvas); color: var(--c-ink); }
.section--dark .t-eyebrow, .section--black .t-eyebrow { color: var(--c-muted-2); }
.section--dark .t-body,    .section--black .t-body    { color: rgba(245, 245, 247, .82); }
.section--dark .t-caption, .section--black .t-caption { color: var(--c-muted-2); }
.section--dark a:not(.btn), .section--black a:not(.btn) { color: var(--c-blue-ondark); }

/* ============ 容器 ============ */
.container       { max-width: var(--w-wide); margin: 0 auto; padding: 0 22px; }
.container-text  { max-width: var(--w-text); margin: 0 auto; padding: 0 22px; }

/* ============ 入场初始态（StaggeredFadeIn .pre-animation 等价物） ============ */
[data-stagger] > * { visibility: hidden; opacity: 0; }
[data-stagger].stagger-ready > * { visibility: visible; }
.no-js [data-stagger] > * { visibility: visible; opacity: 1; }

/* ============ 减弱动效：直接呈现终态（苹果纪律） ============ */
@media (prefers-reduced-motion: reduce) {
  [data-stagger] > * { visibility: visible !important; opacity: 1 !important; transform: none !important; }
  .btn, .btn:active { transition: none; transform: none; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}