/* ==========================================================================
   rk.imwsl.com · shared design system (AppSumo-inspired)
   Load AFTER nav.css. Tokens + reusable components for every page.
   ========================================================================== */

/* 跨页面导航过渡（Chrome 126+ 支持 same-origin MPA），其它浏览器无回退成本 */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
::view-transition-old(root) { animation-name: gg-vt-out; }
::view-transition-new(root) { animation-name: gg-vt-in; }
@keyframes gg-vt-out { to { opacity: 0; } }
@keyframes gg-vt-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ==========================================================================
   主题 token —— 亮色 / 暗色两套值，全站唯一定义处
   --------------------------------------------------------------------------
   ⚠️ 改色规则：
   1. 亮色值只写在裸 `:root` 里（不要只定义在 media / [data-theme] 块内，
      否则跟随系统时会缺值）。
   2. 暗色值写两遍：`@media (prefers-color-scheme: dark)` 里带
      `:root:not([data-theme="light"])` 守卫（跟随系统），
      以及 `:root[data-theme="dark"]`（用户手动选深色）。两处必须同步。
   3. 三态：无 data-theme = 跟随系统；data-theme="light" / "dark" = 用户强制。
      切换逻辑与持久化在 assets/nav.js 的 THEME 模块，key `gg-theme`。

   语义分组：
   - ink*     正文/标题文字，暗色下变浅
   - line*    描边、分隔线
   - bg/bg-2  页面底色；surface* 卡片、输入框等「浮起来」的面
   - edge     野兽派硬描边 + 硬投影的颜色（亮色是纯黑，暗色是中灰）
   - invert*  「黑底白字」色块（页脚 / 卖点条 / 深色按钮 / toast）。
              暗色下不是纯黑而是比页面底色亮一档的面，否则会糊成一片。
   - brand    填充用；brand-ink 是「品牌色当文字」用，暗色下必须更亮才够对比度
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- brand --- */
  --brand: #4F46E5;
  --brand-dark: #4338CA;      /* hover 态填充 */
  --brand-ink: #4338CA;       /* 品牌色当文字/图标用 */
  --brand-tint: #EEEDFD;
  --brand-tint-2: #DAD7FB;    /* 渐变的另一端 */
  --on-brand: #FFFFFF;
  --lime: #E5FF74;
  --on-lime: #0A0A0A;

  /* --- 文字 --- */
  --ink: #0A0A0A;
  --ink-2: #333333;
  --ink-3: #6B7280;
  --ink-4: #9CA3AF;

  /* --- 线与面 --- */
  --line: #E5E7EB;
  --line-2: #F1F1F1;
  --bg: #FFFFFF;
  --bg-2: #F7F8F7;
  --surface: #FFFFFF;         /* 卡片 / 输入框底 */
  --surface-2: #FAFAFA;       /* 表格行 hover */
  --edge: #0A0A0A;            /* 野兽派描边 + 硬投影 */

  /* --- 反色色块（页脚 / 深色 band / 深色按钮） --- */
  --invert-bg: #0A0A0A;
  --invert-bg-2: #222222;     /* 反色块上的 hover */
  --invert-fg: #FFFFFF;
  --invert-fg-2: rgba(255, 255, 255, .7);
  --invert-fg-3: rgba(255, 255, 255, .55);
  --invert-fg-4: rgba(255, 255, 255, .5);
  --invert-line: rgba(255, 255, 255, .1);
  --invert-hover: rgba(255, 255, 255, .06);

  /* --- 高对比实心按钮（「黑底白字」按钮那一档） ---
     ⚠️ 和 --invert-* 是两个角色，别混：
     invert 是「大面积深色色块」（页脚 / 卖点条 / 侧边栏），深色主题下它只是比页面亮一档的面板；
     solid 是「按钮」，深色主题下必须反过来变成浅底深字，否则主按钮会糊在背景里。 */
  --solid-bg: #0A0A0A;
  --solid-bg-2: #222222;
  --solid-fg: #FFFFFF;

  /* --- 状态色 --- */
  --danger: #D93737;
  --danger-tint: #FEE7E7;
  --danger-ink: #9B1C1C;
  --danger-line: #F5B5B5;
  --danger-wash: #FFF8F8;

  --warn: #F5A623;
  --warn-tint: #FFF3D9;
  --warn-ink: #7A5C0A;
  --warn-ink-strong: #5C4405;
  --warn-wash: #FFFCF5;

  --ok: #10794A;
  --ok-tint: #E4F7EC;

  --info: #1E40AF;
  --info-tint: #DBEAFE;

  --alipay: #1677FF;
  --alipay-tint: #E3EEFF;
  --on-danger: #FFFFFF;
  --on-warn: #FFFFFF;
  --alipay-ink: #1677FF;

  /* 缺货条幅（琥珀色，比 warn 更暖一点，沿用原值） */
  --stock-tint: #FFF4E5;
  --stock-line: #F0A020;
  --stock-ink: #6B4A05;
  --stock-ink-strong: #5C4405;

  /* 首页 hero 深色卡的渐变 */
  --hero-card-a: #0F1B2C;
  --hero-card-b: #0A0A0A;
  --hero-card-fg: #FFFFFF;

  /* 后台趋势图 */
  --chart-1: #4F46E5;
  --chart-1-fill: rgba(79, 70, 229, .08);
  --chart-2: #FF6B35;
  --chart-2-fill: rgba(255, 107, 53, .05);
  --chart-grid: rgba(0, 0, 0, .04);

  /* --- 阴影 / 遮罩 / 焦点环 --- */
  --shadow-brutal: 4px 4px 0 var(--edge);
  --shadow-brutal-lg: 6px 6px 0 var(--edge);
  --shadow-soft: 0 2px 12px rgba(0, 0, 0, .06);
  --shadow-menu: 0 6px 24px rgba(0, 0, 0, .08);
  --shadow-pop: 0 12px 40px rgba(0, 0, 0, .25);
  --shadow-dialog: 0 10px 40px rgba(0, 0, 0, .15);
  --scrim: rgba(0, 0, 0, .45);
  --focus-ring: rgba(79, 70, 229, .12);
  --focus-ring-strong: rgba(79, 70, 229, .15);
  --brand-glow: rgba(79, 70, 229, .35);
}

/* 暗色值只写这一段，下面两个选择器共用（改色只改这里，别在别处补） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --brand: #5B51DE;
    --brand-dark: #6E64EE;
    --brand-ink: #A79FFB;
    --brand-tint: #23213A;
    --brand-tint-2: #2E2B4C;
    --on-brand: #FFFFFF;
    --lime: #D6F26B;
    --on-lime: #14170A;

    --ink: #F2F2F5;
    --ink-2: #C7C7D1;
    --ink-3: #9A9AA6;
    --ink-4: #75757F;

    --line: #2E2E38;
    --line-2: #26262E;
    /* 深色下的层级：页面 < 内凹色块 < 卡片 < 反色块，四档必须拉开，
       否则卡片和背景糊在一起，只剩描边能看出边界 */
    --bg: #0E0E12;
    --bg-2: #141419;
    --surface: #1A1A22;
    --surface-2: #23232C;
    --edge: #3C3C48;

    --invert-bg: #26262F;
    --invert-bg-2: #32323D;
    --invert-fg: #F2F2F5;
    --invert-fg-2: rgba(255, 255, 255, .68);
    --invert-fg-3: rgba(255, 255, 255, .5);
    --invert-fg-4: rgba(255, 255, 255, .45);
    --invert-line: rgba(255, 255, 255, .09);
    --invert-hover: rgba(255, 255, 255, .07);
    --solid-bg: #ECECF2;
    --solid-bg-2: #FFFFFF;
    --solid-fg: #14141B;

    --danger: #F87171;
    --danger-tint: #3A1B1B;
    --danger-ink: #FCA5A5;
    --danger-line: #7F3535;
    --danger-wash: #241416;

    --warn: #E0A22A;
    --warn-tint: #382C10;
    --warn-ink: #F3CE86;
    --warn-ink-strong: #FBE3B0;
    --warn-wash: #221B0D;

    --ok: #4ADE80;
    --ok-tint: #13301F;

    --info: #93B4FF;
    --info-tint: #1A2547;

    --alipay: #2B6FD6;
    --alipay-tint: #17253C;
    --on-danger: #2A0E0E;
    --on-warn: #2A1E06;
    --alipay-ink: #7FB4FF;

    --stock-tint: #33260F;
    --stock-line: #C58318;
    --stock-ink: #F0CE93;
    --stock-ink-strong: #F8E2BB;

    --hero-card-a: #232F45;
    --hero-card-b: #181822;
    --hero-card-fg: #FFFFFF;

    --chart-1: #8B83F5;
    --chart-1-fill: rgba(139, 131, 245, .12);
    --chart-2: #FF8C5F;
    --chart-2-fill: rgba(255, 140, 95, .08);
    --chart-grid: rgba(255, 255, 255, .07);

    --shadow-soft: 0 2px 12px rgba(0, 0, 0, .5);
    --shadow-menu: 0 6px 24px rgba(0, 0, 0, .55);
    --shadow-pop: 0 12px 40px rgba(0, 0, 0, .6);
    --shadow-dialog: 0 10px 40px rgba(0, 0, 0, .6);
    --scrim: rgba(0, 0, 0, .68);
    --focus-ring: rgba(124, 116, 240, .28);
    --focus-ring-strong: rgba(124, 116, 240, .35);
    --brand-glow: rgba(91, 81, 222, .5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --brand: #5B51DE;
  --brand-dark: #6E64EE;
  --brand-ink: #A79FFB;
  --brand-tint: #23213A;
  --brand-tint-2: #2E2B4C;
  --on-brand: #FFFFFF;
  --lime: #D6F26B;
  --on-lime: #14170A;

  --ink: #F2F2F5;
  --ink-2: #C7C7D1;
  --ink-3: #9A9AA6;
  --ink-4: #75757F;

  --line: #2E2E38;
  --line-2: #26262E;
  /* 深色下的层级：页面 < 内凹色块 < 卡片 < 反色块，四档必须拉开，
     否则卡片和背景糊在一起，只剩描边能看出边界 */
  --bg: #0E0E12;
  --bg-2: #141419;
  --surface: #1A1A22;
  --surface-2: #23232C;
  --edge: #3C3C48;

  --invert-bg: #26262F;
  --invert-bg-2: #32323D;
  --invert-fg: #F2F2F5;
  --invert-fg-2: rgba(255, 255, 255, .68);
  --invert-fg-3: rgba(255, 255, 255, .5);
  --invert-fg-4: rgba(255, 255, 255, .45);
  --invert-line: rgba(255, 255, 255, .09);
  --invert-hover: rgba(255, 255, 255, .07);
  --solid-bg: #ECECF2;
  --solid-bg-2: #FFFFFF;
  --solid-fg: #14141B;

  --danger: #F87171;
  --danger-tint: #3A1B1B;
  --danger-ink: #FCA5A5;
  --danger-line: #7F3535;
  --danger-wash: #241416;

  --warn: #E0A22A;
  --warn-tint: #382C10;
  --warn-ink: #F3CE86;
  --warn-ink-strong: #FBE3B0;
  --warn-wash: #221B0D;

  --ok: #4ADE80;
  --ok-tint: #13301F;

  --info: #93B4FF;
  --info-tint: #1A2547;

  --alipay: #2B6FD6;
  --alipay-tint: #17253C;
  --on-danger: #2A0E0E;
  --on-warn: #2A1E06;
  --alipay-ink: #7FB4FF;

  --stock-tint: #33260F;
  --stock-line: #C58318;
  --stock-ink: #F0CE93;
  --stock-ink-strong: #F8E2BB;

  --hero-card-a: #232F45;
  --hero-card-b: #181822;
  --hero-card-fg: #FFFFFF;

  --chart-1: #8B83F5;
  --chart-1-fill: rgba(139, 131, 245, .12);
  --chart-2: #FF8C5F;
  --chart-2-fill: rgba(255, 140, 95, .08);
  --chart-grid: rgba(255, 255, 255, .07);

  --shadow-soft: 0 2px 12px rgba(0, 0, 0, .5);
  --shadow-menu: 0 6px 24px rgba(0, 0, 0, .55);
  --shadow-pop: 0 12px 40px rgba(0, 0, 0, .6);
  --shadow-dialog: 0 10px 40px rgba(0, 0, 0, .6);
  --scrim: rgba(0, 0, 0, .68);
  --focus-ring: rgba(124, 116, 240, .28);
  --focus-ring-strong: rgba(124, 116, 240, .35);
  --brand-glow: rgba(91, 81, 222, .5);
}

/* 切换主题时给大面积色块一个短过渡，避免生硬闪一下。
   只在 <html data-theme-anim> 存在时生效（nav.js 切换瞬间加上、300ms 后移除），
   页面首次加载不带这个属性，所以不会拖慢首屏。 */
:root[data-theme-anim] body,
:root[data-theme-anim] body * {
  transition: background-color .22s ease, border-color .22s ease, color .22s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme-anim] body,
  :root[data-theme-anim] body * { transition: none !important; }
}

/* ---------- reset & base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }

/* ---------- container ---------- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container-sm { max-width: 780px; margin: 0 auto; padding: 0 24px; }
.container-md { max-width: 960px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) {
  .container, .container-sm, .container-md { padding: 0 16px; }
}

/* ---------- section ---------- */
section.sec { padding: 72px 0; }
section.sec-sm { padding: 48px 0; }
@media (max-width: 640px) {
  section.sec { padding: 48px 0; }
  section.sec-sm { padding: 32px 0; }
}

/* ---------- typography ---------- */
h1, h2, h3, h4 { letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }
h1 { font-size: clamp(36px, 5.5vw, 64px); font-weight: 900; }
h2 { font-size: clamp(28px, 4.5vw, 44px); font-weight: 900; }
h3 { font-size: 20px; font-weight: 800; }
h4 { font-size: 16px; font-weight: 700; }
p.lead { font-size: 18px; color: var(--ink-2); line-height: 1.6; }
p { line-height: 1.7; color: var(--ink-2); }
@media (max-width: 640px) { p.lead { font-size: 16px; } }

.eyebrow { display: inline-block; background: var(--invert-bg); color: var(--invert-fg); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; padding: 6px 12px; border-radius: 6px; text-transform: uppercase; }
.eyebrow.brand { background: var(--brand-tint); color: var(--brand-ink); }
.eyebrow.lime { background: var(--lime); color: var(--on-lime); }
.eyebrow.line { background: transparent; color: var(--ink); border: 2px solid var(--edge); padding: 4px 10px; }

.hl { background: var(--lime); color: var(--on-lime); padding: 0 8px; box-decoration-break: clone; -webkit-box-decoration-break: clone; border-radius: 4px; }
.text-muted { color: var(--ink-3); }
.text-brand { color: var(--brand-ink); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; border-radius: 999px; padding: 14px 26px; cursor: pointer;
  border: 2px solid transparent; transition: transform .1s, background .15s, border-color .15s, color .15s;
  font-size: 15px; white-space: nowrap;
  font-family: inherit;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-dark { background: var(--solid-bg); color: var(--solid-fg); }
.btn-dark:hover { background: var(--solid-bg-2); }
.btn-brand { background: var(--brand); color: var(--on-brand); }
.btn-brand:hover { background: var(--brand-dark); }
.btn-outline { background: var(--surface); color: var(--ink); border-color: var(--edge); }
.btn-outline:hover { background: var(--solid-bg); color: var(--solid-fg); }
.btn-ghost { background: transparent; color: var(--ink); border-color: transparent; padding-left: 12px; padding-right: 12px; }
.btn-ghost:hover { background: var(--bg-2); }
.btn-lg { padding: 16px 32px; font-size: 16px; }
.btn-sm { padding: 10px 18px; font-size: 13px; }
.btn-block { width: 100%; }

/* ---------- section header ---------- */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.section-head .h { flex: 1; min-width: 280px; }
.section-head h2 { margin-bottom: 8px; }
.section-head p { color: var(--ink-3); font-size: 15px; }

/* ---------- hero shell ---------- */
.hero { padding: 64px 0 40px; }

/* ---------- chips ---------- */
.chips { display: flex; gap: 10px; overflow-x: auto; padding: 8px 0 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex-shrink: 0; border: 2px solid var(--edge); border-radius: 999px; padding: 8px 18px; font-size: 14px; font-weight: 700; background: var(--surface); color: var(--ink); cursor: pointer; font-family: inherit; }
.chip.active, .chip:hover { background: var(--solid-bg); color: var(--solid-fg); }
.chip-tint { border-color: var(--line); background: var(--bg-2); color: var(--ink-2); font-weight: 600; }
.chip-tint:hover { background: var(--solid-bg); color: var(--solid-fg); border-color: var(--solid-bg); }

/* ---------- cards ---------- */
.card { background: var(--surface); border: 2px solid var(--edge); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-brutal); }
.card-plain { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.card-tint { background: var(--bg-2); border-radius: 16px; padding: 24px; }
.card-hoverable { transition: transform .15s, box-shadow .15s; }
.card-hoverable:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-brutal-lg); }

/* ---------- deal card (AppSumo product card) ---------- */
.deals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .deals { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .deals { grid-template-columns: 1fr; } }

.deal { background: var(--surface); border: 2px solid var(--edge); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-brutal); transition: transform .15s, box-shadow .15s; }
.deal:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-brutal-lg); }
.deal-media { position: relative; aspect-ratio: 4/3; background: linear-gradient(135deg, var(--brand-tint) 0%, var(--brand-tint-2) 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.deal-media .sim { font-size: 96px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.15)); }
.deal-media img { width: 100%; height: 100%; object-fit: cover; }
.deal-badge { position: absolute; top: 14px; left: 14px; background: var(--invert-bg); color: var(--lime); font-size: 11px; font-weight: 900; padding: 6px 10px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.05em; }
.deal-badge.hot { background: var(--brand); color: var(--on-brand); }
.deal-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.deal-cat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 700; }
.deal-title { font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
.deal-desc { font-size: 13px; color: var(--ink-3); line-height: 1.55; }
.deal-stars { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); }
.deal-stars .stars { color: var(--warn); letter-spacing: 1px; }
.deal-stars b { color: var(--ink); font-weight: 800; }
.deal-price { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--line); }
.deal-price .now { font-size: 28px; font-weight: 900; letter-spacing: -0.02em; }
.deal-price .unit { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.deal-price .msrp { font-size: 14px; color: var(--ink-3); text-decoration: line-through; margin-left: auto; }
.deal-cta { display: block; width: 100%; text-align: center; margin-top: 10px; }

/* ---------- trust bar ---------- */
.trustbar { background: var(--bg-2); padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trustbar-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
@media (max-width: 640px) { .trustbar-inner { grid-template-columns: repeat(2, 1fr); } }
.trustbar .num { font-size: 26px; font-weight: 900; color: var(--ink); letter-spacing: -0.02em; }
.trustbar .lb { font-size: 12px; color: var(--ink-3); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }

/* ---------- features strip (black band) ---------- */
.features-strip { background: var(--invert-bg); color: var(--invert-fg); padding: 48px 0; }
.features-strip .g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 640px) { .features-strip .g { grid-template-columns: 1fr; gap: 24px; } }
.feat { display: flex; gap: 16px; align-items: flex-start; }
.feat .ico { flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; background: var(--brand); color: var(--on-brand); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.feat h3 { font-size: 17px; font-weight: 800; margin-bottom: 4px; color: var(--invert-fg); }
.feat p { font-size: 13px; color: var(--invert-fg-2); line-height: 1.5; }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }
.step { border: 2px solid var(--edge); border-radius: 16px; padding: 22px; background: var(--surface); position: relative; }
.step .n { font-size: 48px; font-weight: 900; line-height: 1; letter-spacing: -0.04em; margin-bottom: 12px; color: var(--brand-ink); }
.step h3 { font-size: 16px; margin-bottom: 6px; }
.step p { font-size: 13px; color: var(--ink-3); line-height: 1.5; }

/* ---------- quotes ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }
.quote { background: var(--bg-2); border-radius: 16px; padding: 24px; }
.quote .qm { font-family: Georgia, serif; font-size: 56px; line-height: 0; color: var(--brand-ink); position: relative; top: 18px; }
.quote p { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin-bottom: 16px; }
.quote .who { display: flex; align-items: center; gap: 12px; }
.quote .who .av { width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.quote .who .name { font-size: 14px; font-weight: 700; }
.quote .who .meta { font-size: 12px; color: var(--ink-3); }

/* ---------- marquee (auto-scrolling testimonials) ---------- */
.marquee {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 60px, #000 calc(100% - 60px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 60px, #000 calc(100% - 60px), transparent);
}
.marquee__track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: gg-marquee 60s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__track .quote {
  flex: 0 0 340px;
  width: 340px;
  margin: 0;
}
@media (max-width: 640px) {
  .marquee__track .quote { flex: 0 0 280px; width: 280px; }
  .marquee__track { animation-duration: 45s; }
}
@keyframes gg-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ---------- CTA band ---------- */
.band { background: var(--brand); color: var(--on-brand); border-radius: 24px; padding: 56px 40px; text-align: center; margin: 32px 0; position: relative; overflow: hidden; }
.band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.15), transparent 40%), radial-gradient(circle at 80% 80%, rgba(0,0,0,.15), transparent 40%); pointer-events: none; }
.band > * { position: relative; }
.band h2 { color: var(--on-brand); margin-bottom: 12px; }
.band p { color: rgba(255,255,255,.9); font-size: 17px; margin-bottom: 24px; }
.band .btn { background: #fff; color: #0A0A0A; }
.band .btn:hover { background: #0A0A0A; color: #fff; }
.band-dark { background: var(--invert-bg); }
.band-dark .btn { background: var(--brand); color: var(--on-brand); }
.band-dark .btn:hover { background: var(--invert-fg); color: var(--invert-bg); }
@media (max-width: 640px) {
  .band { padding: 40px 22px; border-radius: 20px; }
  .band p { font-size: 15px; }
}

/* ---------- form controls ---------- */
.field { display: block; margin-bottom: 16px; }
.field label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; font-weight: 600; }
.field label .opt { color: var(--ink-4); font-weight: 400; margin-left: 4px; }
.input, .textarea, .select {
  width: 100%; border: 2px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 15px;
  color: var(--ink); background: var(--surface); font-family: inherit; -webkit-appearance: none; appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .textarea:focus, .select:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 4px var(--focus-ring); }
.textarea { resize: vertical; min-height: 80px; line-height: 1.6; }
.field-err { color: var(--danger); font-size: 13px; margin-top: 6px; line-height: 1.5; }
.field-hint { color: var(--ink-3); font-size: 12px; margin-top: 6px; line-height: 1.5; }

.qty-row { display: inline-flex; align-items: stretch; }
.qty-row .qty-input { width: 60px; text-align: center; border: 2px solid var(--line); border-left: 0; border-right: 0; font-size: 15px; font-family: inherit; -moz-appearance: textfield; background: var(--surface); color: var(--ink); }
.qty-row .qty-input::-webkit-outer-spin-button, .qty-row .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-row .qty-btn { width: 42px; background: var(--bg-2); border: 2px solid var(--line); font-size: 18px; cursor: pointer; user-select: none; font-family: inherit; color: var(--ink); }
.qty-row .qty-btn:first-child { border-radius: 12px 0 0 12px; }
.qty-row .qty-btn:last-child { border-radius: 0 12px 12px 0; }

/* iOS Safari 对 font-size < 16px 的输入框会在聚焦时自动放大页面且不会复位，
   移动端统一提到 16px。桌面维持 15px 不变。 */
@media (max-width: 640px) {
  .input, .textarea, .select, .qty-row .qty-input { font-size: 16px; }
}

/* radio-like plan tiles */
.plan-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .plan-tiles { grid-template-columns: 1fr; } }
.plan-tile { background: var(--surface); border: 2px solid var(--line); border-radius: 16px; padding: 20px; text-align: left; cursor: pointer; position: relative; transition: border-color .15s, box-shadow .15s; }
.plan-tile:hover { border-color: var(--edge); }
.plan-tile.selected { border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring-strong); }
.plan-tile.selected::after { content: "✓"; position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.plan-tile .badge { display: inline-block; background: var(--invert-bg); color: var(--invert-fg); font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 4px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.plan-tile .badge.brand { background: var(--brand); }
.plan-tile .price { font-size: 28px; font-weight: 900; letter-spacing: -0.02em; margin-bottom: 4px; }
.plan-tile .price .sym { font-size: 16px; color: var(--ink-3); font-weight: 500; margin-right: 2px; }
.plan-tile .title { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.plan-tile .desc { font-size: 12px; color: var(--ink-3); line-height: 1.55; }

/* ---------- tags / badges ---------- */
.tag { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--brand-tint); color: var(--brand-ink); }
.tag.dark { background: var(--invert-bg); color: var(--invert-fg); }
.tag.warn { background: var(--warn-tint); color: var(--warn-ink); }
.tag.danger { background: var(--danger-tint); color: var(--danger-ink); }
.tag.line { background: transparent; border: 1px solid var(--line); color: var(--ink-2); }

/* ---------- 已验证可接码平台卡片 ---------- */
.plat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 12px; }
.plat-card { border: 2px solid var(--edge); border-radius: 12px; padding: 14px 10px; text-align: center; background: var(--surface); box-shadow: var(--shadow-brutal); font-weight: 800; font-size: 15px; color: var(--ink); }
.plat-card .ok { display: block; font-size: 12px; color: var(--brand-ink); font-weight: 700; margin-top: 4px; }

/* ---------- table ---------- */
.table-wrap { border: 2px solid var(--edge); border-radius: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 700; background: var(--bg-2); }
.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: var(--surface-2); }

/* ---------- footer ---------- */
footer.site-foot { background: var(--invert-bg); color: var(--invert-fg-2); padding: 56px 0 32px; }
footer.site-foot .foot-g { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 32px; }
@media (max-width: 640px) { footer.site-foot .foot-g { grid-template-columns: 1fr 1fr; } }
footer.site-foot .foot-brand { font-size: 22px; font-weight: 900; color: var(--invert-fg); margin-bottom: 12px; letter-spacing: -0.02em; }
footer.site-foot .foot-brand .g { color: var(--brand-ink); }
footer.site-foot .foot-desc { font-size: 13px; line-height: 1.6; max-width: 260px; }
footer.site-foot .foot-col h4 { font-size: 12px; font-weight: 800; color: var(--invert-fg); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
footer.site-foot .foot-col a { display: block; font-size: 14px; padding: 4px 0; color: var(--invert-fg-2); }
footer.site-foot .foot-col a:hover { color: var(--invert-fg); }
footer.site-foot .foot-b { border-top: 1px solid var(--invert-line); padding-top: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--invert-fg-4); flex-wrap: wrap; gap: 12px; }
footer.site-foot .foot-b a { color: var(--invert-fg-4); margin-left: 12px; }
footer.site-foot .foot-b a:hover { color: var(--invert-fg); }

/* ---------- toast ---------- */
.toast {
  position: fixed; z-index: 9999; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--invert-bg); color: var(--invert-fg); padding: 12px 20px; border-radius: 12px;
  font-size: 14px; font-weight: 600; box-shadow: var(--shadow-pop); border: 1px solid var(--invert-line);
  animation: toast-in .2s ease;
}
.toast.success { background: var(--brand); color: var(--on-brand); }
.toast.error { background: var(--danger); color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- utils ---------- */
.stack-1 > * + * { margin-top: 8px; }
.stack-2 > * + * { margin-top: 16px; }
.stack-3 > * + * { margin-top: 24px; }
.stack-4 > * + * { margin-top: 32px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.row-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .row-2, .row-3, .row-4 { grid-template-columns: 1fr; } }

.divider { height: 1px; background: var(--line); margin: 24px 0; border: 0; }

/* Print / long-form pages */
.prose { max-width: 780px; margin: 0 auto; }
.prose h1 { font-size: clamp(32px, 4vw, 44px); margin-bottom: 20px; }
.prose h2 { font-size: 24px; margin: 40px 0 12px; }
.prose h3 { font-size: 18px; margin: 24px 0 8px; }
.prose p, .prose li { color: var(--ink-2); line-height: 1.75; margin-bottom: 12px; font-size: 15px; }
.prose ul, .prose ol { padding-left: 22px; margin-bottom: 16px; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.prose blockquote { border-left: 4px solid var(--brand); padding: 6px 16px; margin: 20px 0; background: var(--brand-tint); border-radius: 0 8px 8px 0; }

/* ============ 纯流量卡提醒（全站共用） ============
   「只能上网，不能打电话 / 收发短信」是最容易起纠纷的功能边界，
   必须在下单前的醒目位置反复出现。改文案时 grep `data-only-band` 一次改全站。 */
.data-only-band {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--danger-tint); border: 2px solid var(--danger);
  border-radius: 12px; padding: 12px 16px; margin: 0 0 18px;
  font-size: 14.5px; line-height: 1.65; color: var(--danger-ink); font-weight: 700;
  max-width: 560px;
}
.data-only-band .ico { flex-shrink: 0; font-size: 17px; line-height: 1.5; }
.data-only-band strong { color: var(--danger); font-weight: 900; }
.data-only-band u { text-decoration-thickness: 2px; text-underline-offset: 2px; }
.data-only-band.wide { max-width: none; }
.data-only-band.center { justify-content: center; text-align: left; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) { .data-only-band { font-size: 13.5px; padding: 11px 14px; } }