/* ==========================================================================
   水坦克官网 · 设计系统（P1）
   单文件统一入口：各页以 <link rel="stylesheet" href="/assets/css/stk.css"> 引用，
   取代此前每页内联的同一份副本（28 份，改一次要动 28 个文件、必然漂移）。

   ⚠️ Tailwind 主题配置不能抽离：浏览器版 Tailwind 只处理内联的
      <style type="text/tailwindcss"> 块，因此 @theme inline 仍留在各页 head 内。

   P1 关键改动
     · 主色      #1f4a80 -> #123a5e（更深、更稳）
     · 强调色    土金 #c8913e -> 青绿 #0b8574 -> 宝蓝 #1d4ed8 -> 蓝绿渐变 #1d4ed8→#0f766e（2026-09-12 改，按钮渐变、单色 #0b7285）
     · 底色      暖米 #f7f5f2 -> 冷白 #f7f9fb
     · 圆角      md 6->10px、lg 8->14px，卡片去 1px 描边改双层柔和阴影
     · 标题尺度  h1 行高 1.22->1.08、字距 -0.02->-0.03em（出气势不靠放大字号）
   ========================================================================== */

/* 水坦克官网品牌变量与排版系统 — 工业重设计版 */

/* 字体：改用系统字体栈（见 --stk-font-primary），不再请求境外 Web Font */

:root {
  /* 主色（深海军蓝）：标题、图标、页头页脚、结构性色块 */
  --stk-primary-50: #eef4f9;
  --stk-primary-100: #d6e4ef;
  --stk-primary-200: #afc8df;
  --stk-primary-300: #83a7c8;
  --stk-primary-400: #5585af;
  --stk-primary-500: #2e5f8c;
  --stk-primary-600: #123a5e;
  --stk-primary-700: #0e2f4c;
  --stk-primary-800: #0a2339;
  --stk-primary-900: #061726;

  /* 强调色（蓝绿渐变方案，2026-09-12 用户拍板）：按钮做蓝→绿渐变，
     其余单色场景（眉标、标签、光晕、链接）用渐变中点色 600 号 #0b7285（白字 5.64:1）。
     前因：宝蓝 #1d4ed8 偏紫、有「已访问链接」感，改走蓝绿方向消除紫调。 */
  --stk-accent-50: #ecf7f7;
  --stk-accent-100: #d1ebec;
  --stk-accent-200: #a8d9db;
  --stk-accent-300: #74c2c6;
  --stk-accent-400: #3fa3a9;
  --stk-accent-500: #1b8790;
  --stk-accent-600: #0b7285;
  --stk-accent-700: #0c5d6e;
  --stk-accent-800: #0b4a58;
  --stk-accent-900: #093844;

  --stk-neutral-0: #ffffff;
  --stk-neutral-50: #f6f7f8;
  --stk-neutral-100: #ebedf0;
  --stk-neutral-200: #d5d9df;
  --stk-neutral-300: #b0b8c4;
  --stk-neutral-400: #7d8a9c;
  --stk-neutral-500: #5a687a;
  --stk-neutral-600: #3e4b5c;
  --stk-neutral-700: #2a3543;
  --stk-neutral-800: #1a2330;
  --stk-neutral-900: #0f1720;

  --stk-background: #f7f9fb;
  --stk-foreground: #0f1720;
  --stk-card: #ffffff;
  --stk-card-foreground: #0f1720;
  --stk-popover: #ffffff;
  --stk-popover-foreground: #0f1720;
  --stk-primary: #123a5e;
  --stk-primary-foreground: #ffffff;
  --stk-secondary: #0b7285;
  --stk-secondary-foreground: #ffffff;
  --stk-muted: #eef2f7;
  --stk-muted-foreground: #5a687a;
  --stk-border: #d5d9df;
  --stk-input: #dce3eb;
  --stk-ring: #123a5e;

  --stk-state-success: #15803d;
  --stk-state-warning: #c2410c;
  --stk-state-error: #b91c1c;
  --stk-state-info: #123a5e;

  --stk-radius-sm: 6px;
  --stk-radius-md: 10px;
  --stk-radius-lg: 14px;
  --stk-radius-full: 9999px;

  --stk-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
  --stk-shadow-md: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 28px -8px rgba(16, 24, 40, 0.12);
  --stk-shadow-lg: 0 4px 10px -2px rgba(16, 24, 40, 0.06), 0 18px 40px -12px rgba(16, 24, 40, 0.14);
  --stk-shadow-xl: 0 8px 18px -6px rgba(16, 24, 40, 0.08), 0 28px 56px -18px rgba(16, 24, 40, 0.20);

  /* 系统字体栈：拉丁字形优先命中系统 UI 字体，中文按平台回退，零网络请求、零 FOUT */
  --stk-font-primary: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
                      'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei',
                      'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei',
                      sans-serif;
  --stk-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;

  --stk-text-xs: 0.75rem;
  --stk-text-sm: 0.875rem;
  --stk-text-base: 1rem;
  --stk-text-lg: 1.125rem;
  --stk-text-xl: 1.25rem;
  --stk-text-2xl: 1.5rem;
  --stk-text-3xl: 2rem;
  --stk-text-4xl: 2.5rem;
  --stk-text-5xl: 3.25rem;
  --stk-text-6xl: 4rem;
  --stk-text-7xl: 5rem;

  --stk-leading-tight: 1.15;
  --stk-leading-snug: 1.3;
  --stk-leading-normal: 1.5;
  --stk-leading-relaxed: 1.65;

  --stk-spacing-1: 0.25rem;
  --stk-spacing-2: 0.5rem;
  --stk-spacing-3: 0.75rem;
  --stk-spacing-4: 1rem;
  --stk-spacing-5: 1.25rem;
  --stk-spacing-6: 1.5rem;
  --stk-spacing-8: 2rem;
  --stk-spacing-10: 2.5rem;
  --stk-spacing-12: 3rem;
  --stk-spacing-16: 4rem;
  --stk-spacing-20: 5rem;
  --stk-spacing-24: 6rem;
  --stk-spacing-28: 7rem;
  --stk-spacing-32: 8rem;
  --stk-spacing-40: 10rem;
}

.dark {
  --stk-background: #0f1720;
  --stk-foreground: #ebedf0;
  --stk-card: #1a2330;
  --stk-card-foreground: #ebedf0;
  --stk-popover: #1a2330;
  --stk-popover-foreground: #ebedf0;
  --stk-primary: #5585af;
  --stk-primary-foreground: #061726;
  --stk-muted: #1a2330;
  --stk-muted-foreground: #7d8a9c;
  --stk-border: #2a3543;
  --stk-input: #2a3543;
}

/* 2026-09-24 缩小顶层页 hero 标题：上限 4.25rem(68px)→3.25rem(52px)，
   并同步收窄中间段的 vw 系数，让 768~1280px 各档都等比变小（用户反馈"每页标题太大"）。
   仅影响 5 个顶层页（首页/产品/案例/应用/联系）；内页标题走 .stk-pagehead-title，另有 40px 上限，不受影响。 */
.stk-h1 { font-family: var(--stk-font-primary); font-size: clamp(1.95rem, 1.1rem + 3vw, 3.25rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
.stk-h2 { font-family: var(--stk-font-primary); font-size: clamp(1.6rem, 1.05rem + 1.9vw, 2.375rem); font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; text-wrap: balance; }
.stk-h3 { font-family: var(--stk-font-primary); font-size: clamp(1.35rem, 2.3vw, 2rem); font-weight: 700; line-height: 1.32; text-wrap: balance; }
.stk-h4 { font-family: var(--stk-font-primary); font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-weight: 700; line-height: 1.4; text-wrap: balance; }
.stk-body { font-family: var(--stk-font-primary); font-size: var(--stk-text-base); font-weight: 400; line-height: var(--stk-leading-relaxed); color: var(--stk-neutral-600); text-wrap: pretty; }
.stk-body-lg { font-family: var(--stk-font-primary); font-size: var(--stk-text-lg); font-weight: 400; line-height: var(--stk-leading-relaxed); color: var(--stk-neutral-600); text-wrap: pretty; }
.stk-body-sm { font-family: var(--stk-font-primary); font-size: var(--stk-text-sm); font-weight: 400; line-height: var(--stk-leading-normal); color: var(--stk-neutral-500); }
.stk-label { font-family: var(--stk-font-primary); font-size: var(--stk-text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stk-secondary); }

.stk-section { width: 100%; padding: clamp(3.5rem, 8vw, 7rem) var(--stk-spacing-6); }
.stk-section-sm { width: 100%; padding: clamp(2.5rem, 6vw, 5rem) var(--stk-spacing-6); }
.stk-container { width: 100%; max-width: 1320px; margin-left: auto; margin-right: auto; padding-left: clamp(1.25rem, 4vw, 2rem); padding-right: clamp(1.25rem, 4vw, 2rem); }
.stk-container-narrow { width: 100%; max-width: 960px; margin-left: auto; margin-right: auto; padding-left: clamp(1.25rem, 4vw, 2rem); padding-right: clamp(1.25rem, 4vw, 2rem); }

.stk-card { background-color: var(--stk-card); color: var(--stk-card-foreground); border: 0; border-radius: var(--stk-radius-lg); box-shadow: var(--stk-shadow-md); }
.stk-card-hover { transition: box-shadow 0.3s ease, transform 0.3s ease; }
.stk-card-hover:hover { box-shadow: var(--stk-shadow-xl); transform: translateY(-2px); }

.stk-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--stk-spacing-2); padding: var(--stk-spacing-3) var(--stk-spacing-6); font-family: var(--stk-font-primary); font-size: var(--stk-text-base); font-weight: 600; line-height: var(--stk-leading-normal); border-radius: var(--stk-radius-md); transition: all 0.25s ease; cursor: pointer; text-decoration: none; letter-spacing: 0.01em; }
.stk-btn-lg { padding: var(--stk-spacing-4) var(--stk-spacing-8); font-size: var(--stk-text-lg); font-weight: 700; }
.stk-btn-primary { background-color: var(--stk-primary); color: var(--stk-primary-foreground); border: 1px solid var(--stk-primary); }
.stk-btn-primary:hover { background-color: var(--stk-primary-700); border-color: var(--stk-primary-700); box-shadow: 0 4px 16px rgba(18, 58, 94, 0.32); }
.stk-btn-secondary { background-image: linear-gradient(135deg, #1d4ed8 0%, #0f766e 100%); color: #ffffff; border: none; }
.stk-btn-secondary:hover { background-image: linear-gradient(135deg, #1e40af 0%, #0d5f58 100%); box-shadow: 0 4px 16px rgba(11, 114, 133, 0.35); }
.stk-btn-outline { background-color: transparent; color: var(--stk-primary); border: 1px solid var(--stk-primary); }
.stk-btn-outline:hover { background-color: var(--stk-primary-50); border-color: var(--stk-primary-600); }
.stk-btn-ghost { background-color: transparent; color: var(--stk-foreground); border: 1px solid transparent; }
.stk-btn-ghost:hover { background-color: var(--stk-muted); }

.stk-btn:focus-visible, .stk-input:focus-visible, .stk-textarea:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--stk-background), 0 0 0 4px var(--stk-ring); }

.stk-divider { width: 60px; height: 3px; background: var(--stk-secondary); border-radius: 2px; }

.stk-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.stk-reveal.visible { opacity: 1; transform: translateY(0); }
.stk-reveal-delay-1 { transition-delay: 0.1s; }
.stk-reveal-delay-2 { transition-delay: 0.2s; }
.stk-reveal-delay-3 { transition-delay: 0.3s; }
.stk-reveal-delay-4 { transition-delay: 0.4s; }

.stk-stat-number { font-family: var(--stk-font-primary); font-size: clamp(1.375rem, 3.4vw, 2.5rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--stk-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stk-stat-label { font-family: var(--stk-font-primary); font-size: var(--stk-text-sm); font-weight: 500; color: var(--stk-neutral-500); text-transform: uppercase; letter-spacing: 0.06em; margin-top: var(--stk-spacing-2); }

.stk-top-accent { position: relative; }
.stk-top-accent::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--stk-primary) 0%, var(--stk-secondary) 100%); }

.stk-bg-texture { background-image: radial-gradient(circle at 25% 25%, rgba(18, 58, 94, 0.03) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(11, 114, 133, 0.03) 0%, transparent 50%); }
    

      .bg-background { background-color: var(--stk-background); }
      .text-background { color: var(--stk-background); }
      .border-background { border-color: var(--stk-background); }
      .ring-background { --tw-ring-color: var(--stk-background); }
      .bg-foreground { background-color: var(--stk-foreground); }
      .text-foreground { color: var(--stk-foreground); }
      .border-foreground { border-color: var(--stk-foreground); }
      .ring-foreground { --tw-ring-color: var(--stk-foreground); }
      .bg-card { background-color: var(--stk-card); }
      .text-card { color: var(--stk-card); }
      .border-card { border-color: var(--stk-card); }
      .ring-card { --tw-ring-color: var(--stk-card); }
      .bg-card-foreground { background-color: var(--stk-card-foreground); }
      .text-card-foreground { color: var(--stk-card-foreground); }
      .border-card-foreground { border-color: var(--stk-card-foreground); }
      .ring-card-foreground { --tw-ring-color: var(--stk-card-foreground); }
      .bg-popover { background-color: var(--stk-popover); }
      .text-popover { color: var(--stk-popover); }
      .border-popover { border-color: var(--stk-popover); }
      .ring-popover { --tw-ring-color: var(--stk-popover); }
      .bg-popover-foreground { background-color: var(--stk-popover-foreground); }
      .text-popover-foreground { color: var(--stk-popover-foreground); }
      .border-popover-foreground { border-color: var(--stk-popover-foreground); }
      .ring-popover-foreground { --tw-ring-color: var(--stk-popover-foreground); }
      .bg-primary { background-color: var(--stk-primary); }
      .text-primary { color: var(--stk-primary); }
      .border-primary { border-color: var(--stk-primary); }
      .ring-primary { --tw-ring-color: var(--stk-primary); }
      .bg-primary-foreground { background-color: var(--stk-primary-foreground); }
      .text-primary-foreground { color: var(--stk-primary-foreground); }
      .border-primary-foreground { border-color: var(--stk-primary-foreground); }
      .ring-primary-foreground { --tw-ring-color: var(--stk-primary-foreground); }
      .bg-secondary { background-color: var(--stk-secondary); }
      .text-secondary { color: var(--stk-secondary); }
      .border-secondary { border-color: var(--stk-secondary); }
      .ring-secondary { --tw-ring-color: var(--stk-secondary); }
      .bg-secondary-foreground { background-color: var(--stk-secondary-foreground); }
      .text-secondary-foreground { color: var(--stk-secondary-foreground); }
      .border-secondary-foreground { border-color: var(--stk-secondary-foreground); }
      .ring-secondary-foreground { --tw-ring-color: var(--stk-secondary-foreground); }
      .bg-muted { background-color: var(--stk-muted); }
      .text-muted { color: var(--stk-muted); }
      .border-muted { border-color: var(--stk-muted); }
      .ring-muted { --tw-ring-color: var(--stk-muted); }
      .bg-muted-foreground { background-color: var(--stk-muted-foreground); }
      .text-muted-foreground { color: var(--stk-muted-foreground); }
      .border-muted-foreground { border-color: var(--stk-muted-foreground); }
      .ring-muted-foreground { --tw-ring-color: var(--stk-muted-foreground); }
      .bg-border { background-color: var(--stk-border); }
      .text-border { color: var(--stk-border); }
      .border-border { border-color: var(--stk-border); }
      .ring-border { --tw-ring-color: var(--stk-border); }
      .bg-input { background-color: var(--stk-input); }
      .text-input { color: var(--stk-input); }
      .border-input { border-color: var(--stk-input); }
      .ring-input { --tw-ring-color: var(--stk-input); }
      .bg-ring { background-color: var(--stk-ring); }
      .text-ring { color: var(--stk-ring); }
      .border-ring { border-color: var(--stk-ring); }
      .ring-ring { --tw-ring-color: var(--stk-ring); }
    

      .no-scrollbar::-webkit-scrollbar { display: none; }
      .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
      [data-icon] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        background-color: currentColor;
      }
    

#stk-call-modal{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
#stk-call-modal.stk-open{display:flex}
.stk-call-modal-card{width:min(92vw,390px);max-height:90vh;overflow:auto;background:#fff;border-radius:16px;padding:22px 22px 16px;box-shadow:0 20px 50px rgba(0,0,0,.25);font-family:system-ui,-apple-system,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif}
.stk-call-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.stk-call-modal-title{font-size:19px;font-weight:700;color:#111827}
.stk-call-close{border:0;background:#f3f4f6;color:#6b7280;width:30px;height:30px;border-radius:50%;font-size:14px;line-height:1;cursor:pointer;flex:none}
.stk-call-close:hover{background:#e5e7eb;color:#111827}
.stk-call-modal-sub{font-size:13px;color:#6b7280;margin:0 0 14px}
.stk-call-row{display:flex;align-items:center;gap:10px;border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px;margin-bottom:10px;background:#fafafa}
.stk-call-main{flex:1;text-decoration:none;display:flex;flex-direction:column;gap:2px;min-width:0}
.stk-call-label{font-size:12px;color:#6b7280}
.stk-call-num{font-size:21px;font-weight:700;color:#111827;letter-spacing:.2px;white-space:nowrap}
.stk-call-copy{flex:none;border:1px solid #d1d5db;background:#fff;color:#374151;font-size:12px;padding:5px 12px;border-radius:8px;cursor:pointer}
.stk-call-copy:hover{border-color:#9ca3af;color:#111827}
.stk-call-copy.stk-copied{color:#059669;border-color:#059669}
/* 固话只作「公司有固话/有办公地址」的存在性展示：不用大号字、不做成链接、不可点按拨打。
   12px 静音灰、无边框、无按钮，视觉权重刻意压到最低；padding-left 对齐手机号行的内文。 */
.stk-call-tel{margin:-2px 0 12px;padding-left:13px;font-size:12px;line-height:1.5;color:#9ca3af;letter-spacing:.2px}
.stk-call-wx{border-top:1px solid #f1f3f5;margin-top:4px;padding:12px 0 6px;text-align:center}
.stk-call-wx-img{width:112px;height:112px;background:#fff;padding:6px;border:1px solid #e5e7eb;border-radius:10px;box-sizing:border-box}
.stk-call-wx-tip{margin:8px 0 0;font-size:13px;color:#6b7280}
@media (max-width:480px){.stk-call-modal-card{padding:18px 16px 12px}.stk-call-num{font-size:19px}}

/* P1 新增：统计条在 1280px 以上显示竖向分隔线 */
.stk-stat-item { position: relative; }
@media (min-width: 1280px) {
  .stk-stat-item + .stk-stat-item::before {
    content: '';
    position: absolute;
    left: -0.75rem;
    top: 12%;
    height: 76%;
    width: 1px;
    background: #e8edf3;
  }
}

/* ══════════ P1-C 统一页头带（内容页共用） ══════════
   用于 price / compare / cases 详情等内容型页面，替换原来「眉标 + 大标题 + 一句话」
   直接裸露在浅灰底上的做法。层级说明：本文件不在 @layer 内，优先级高于
   Tailwind utilities，所以这里的 color 会赢过页面上残留的 text-* 类 —— 这是刻意的。 */
.stk-pagehead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(34px, 4.6vw, 58px);
  padding-bottom: clamp(26px, 3.2vw, 38px);
  /* 深色页头带（2026-09-22 改造）：与站头连成一体。
     ⚠️ 起点必须是 --stk-primary-900 —— 站头 (header) 的底色就是它 (#061726)。
     最初把起点写成 --stk-primary (#123a5e)，结果站头到页头出现一道浅一档的横向接缝。
     现改为由站头色单调渐亮到 #15507d：顶部无缝，向下逐级变亮后与白色内容区分界。
     原来那条极细竖网格会读成噪点，已整体移除（见下方 ::after 说明）。 */
  background: linear-gradient(180deg, var(--stk-primary-900) 0%, var(--stk-primary) 72%, #15507d 100%);
}
/* 右上角蓝绿光晕（用百分比定位，随页头高度自适应） */
.stk-pagehead::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: -52%;
  right: -6%;
  width: clamp(360px, 42vw, 620px);
  height: clamp(360px, 42vw, 620px);
  border-radius: 9999px;
  background: radial-gradient(circle at 50% 50%, rgba(11, 114, 133, .20) 0%, rgba(11, 114, 133, .07) 44%, rgba(11, 114, 133, 0) 70%);
}
/* 原「极细竖网格」(.stk-pagehead::after) 已于 2026-09-22 移除。
   在深色页头带上 1px 竖线会读成噪点，且与站头下方的深→浅过渡叠加后显得发脏；
   现由整幅渐变 + 单层蓝绿光晕承担质感，不再叠加任何装饰性纹理。 */
.stk-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-bottom: clamp(14px, 1.9vw, 20px);
  font-family: var(--stk-font-primary);
  font-size: 13px;
  line-height: 1.5;
  color: var(--stk-neutral-500);
}
.stk-crumbs a { color: inherit; text-decoration: none; transition: color .15s ease; }
.stk-crumbs a:hover { color: var(--stk-primary); text-decoration: underline; }
.stk-crumbs .sep { color: var(--stk-neutral-300); user-select: none; }
.stk-crumbs [aria-current] { color: var(--stk-foreground); font-weight: 600; }
/* 眉标做成胶囊。深色页头带上改为半透明白胶囊 + 白字（原蓝绿浅胶囊在深底上会糊掉）。
   作用域限定在 .stk-pagehead 内 —— stk-label 全站另有 140 处页外使用，不能污染。
   nowrap 是必需的：inline-flex 里的文本项在窄视口会被压到 min-content 以下，
   出现「工业蓄水 · 河 / 南」这种胶囊内折行。 */
.stk-pagehead .stk-label {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 5px 12px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .14);
  color: #ffffff;
  margin-bottom: 14px;
}
/* 内页页头标题。实测（nowrap 探针）：这 22 个标题在 896px 列宽下，48px 只有 2 个能单行
   放下，44px 有 14 个，40px 有 21 个。放不下时 text-wrap:balance 会把标题劈成两行近乎等长
   的空行（例如「…蓄水 / 池规格参数…」），比直接换行更难看 —— 所以取 40px 上限。 */
.stk-pagehead-title {
  color: var(--stk-foreground);
  font-size: clamp(1.6rem, 1.05rem + 2.35vw, 2.5rem);
  line-height: 1.18;
  margin-bottom: clamp(12px, 1.6vw, 18px);
}
.stk-pagehead-lead { max-width: 68ch; color: var(--stk-muted-foreground); }

/* ── 深色页头带内的文字色覆盖（2026-09-22）─────────────────────────
   全部限定在 .stk-pagehead 作用域内：
   · stk-pagehead-title 在 technology.html 的浅底 hero 里另有 1 处页外使用，
     若不加作用域会把它一起变白 → 白字压浅底，直接不可读。
   · stk-crumbs / stk-pagehead-lead 目前 100% 只在页头内，但仍加作用域以防后续复用。 */
.stk-pagehead .stk-crumbs { color: rgba(255, 255, 255, .66); }
.stk-pagehead .stk-crumbs a:hover { color: #ffffff; }
.stk-pagehead .stk-crumbs .sep { color: rgba(255, 255, 255, .34); }
.stk-pagehead .stk-crumbs [aria-current] { color: #ffffff; }
.stk-pagehead .stk-pagehead-title { color: #ffffff; }
.stk-pagehead .stk-pagehead-lead { color: rgba(255, 255, 255, .84); }

/* 页头带之后的首个分节补顶部间距。
   这批内容页的首节原本都只有 Tailwind 的 pb-12（无 pt-*），导致卡片/统计格紧贴页头
   下沿（实测间隙 0~7px），读起来非常局促。用相邻兄弟选择器一处修全站，不再逐页加类。
   ⚠️ 必须排除 .stk-section / .stk-section-sm —— 它们自带 clamp(3.5rem,8vw,7rem) 的顶部
   内距（1400px 下实测 112px），若不排除会被本规则压到 44px，反而更挤。
   注意：页面上的 pt-0 是 @layer utilities 里的类，本就压不过未分层的 .stk-section，
   所以「stk-section + pt-0」实际仍是 112px —— 这是既有事实，不是本次引入的。 */
.stk-pagehead + section:not(.stk-section):not(.stk-section-sm) { padding-top: clamp(28px, 3.4vw, 44px); }

/* ══════════ 站头导航：当前栏目高亮 ══════════
   背景：全站每页都在对应的导航项上标了 aria-current="page"，且子页面标的是「所属栏目」
   而非本页（如 /insights/highlights.html 标的是 nav-insights）。但 CSS 里从来没有对应规则，
   属性等于白标 —— 实测 7 个导航项全是 font-weight:500 / 90% 白，完全一样，
   访客点进内容页后就分不出自己在哪个栏目。

   本文件不在 @layer 内，优先级高于 Tailwind utilities，因此这里的 color / font-weight
   会赢过页面上的 text-white/90 与 font-medium —— 这是刻意的。
   ⚠️ 只作用于 header 内带 aria-current 的 <a>：桌面 7 个文字项 + 移动菜单的对应项。
   指向 /contact.html 的 CTA 是 .stk-btn 且不带该属性，不会被误伤。
   字重用 700 —— 系统中文字体无 800/900，全站禁用。 */
header a[aria-current="page"] {
  color: #ffffff;
  font-weight: 700;
}
/* 桌面项的白色下划线指示条。移动菜单是纵向列表，不加线。
   bottom 取 -7px：链接高约 20px、header 高 64px，下划线仍在 header 内部，不会溢出。 */
header nav a[aria-current="page"] { position: relative; }
header nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .9);
}

/* 深色页头带上的面包屑：链接色从 .66 提到 .74，末级由 600 提到 700。
   作用域限定在 .stk-pagehead 内，避免影响其它场景的 .stk-crumbs（若有）。 */
.stk-pagehead .stk-crumbs { color: rgba(255, 255, 255, .74); }
.stk-pagehead .stk-crumbs [aria-current] { font-weight: 700; }