/* ==========================================================================
   site.css — 第 4 套：鲸彩体育（白底 + 科技蓝 / 卡片化 / 理性克制）
   仅做两件事：① 赋值 :root 设计变量 ② 写本套独有皮肤（统一前缀 .s4-）
   base.css 与 main.js 为共用文件，不在此重复定义。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 主题变量（浅色模式：沿用 base.css 的浅色默认值，只覆盖品牌与深色）
   -------------------------------------------------------------------------- */
:root {
  --brand: #1e5eff;
  --brand-2: #00c2ff;
  --brand-rgb: 30, 94, 255;

  /* 深色区块（安全体系 / 页脚） */
  --dark: #0b1a3a;
  --dark-2: #132a5c;

  /* 皮肤微调：更小的圆角、更轻的阴影，强调理性与秩序感 */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 3px rgba(11, 26, 58, .06);
  --shadow: 0 8px 24px rgba(11, 26, 58, .07);
  --shadow-lg: 0 18px 48px rgba(11, 26, 58, .12);
}

/* --------------------------------------------------------------------------
   2. 首屏：浅色科技风（覆盖 base.css 的深色 .hero）
   -------------------------------------------------------------------------- */
.s4-hero {
  background: linear-gradient(180deg, #f4f7ff 0%, #ffffff 100%);
  color: var(--ink);
}
.s4-hero::before {
  background: radial-gradient(46% 46% at 88% 12%, rgba(var(--brand-rgb), .14), transparent 68%);
}
.s4-hero h1,
.s4-hero h2 { color: var(--ink); }
.s4-hero .lead,
.s4-hero p { color: var(--ink-soft); }
.s4-hero .hero-media {
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.s4-hero .btn-ghost {
  --bs-btn-color: var(--ink);
  --bs-btn-border-color: var(--line);
  --bs-btn-hover-bg: var(--page-alt);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-hover-color: var(--brand);
}
.s4-hero .store-btn {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
.s4-hero .store-btn small { color: var(--ink-soft); }
.s4-hero .store-btn i { color: var(--brand); }
.s4-hero .rating-badge {
  background: rgba(var(--brand-rgb), .08);
  border-color: rgba(var(--brand-rgb), .22);
  color: var(--brand);
}
.s4-hero .rating-badge i { color: var(--brand); }

/* --------------------------------------------------------------------------
   3. 等宽数字与数据卡片（数据感来自对齐，而不是大色块）
   -------------------------------------------------------------------------- */
.s4-mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.01em;
}
.s4-meta-num { font-variant-numeric: tabular-nums; }

.s4-statgrid .stat-tile {
  border-top: 3px solid var(--brand);
  text-align: left;
  padding: 1.5rem 1.5rem 1.35rem;
}
.s4-statgrid .stat-label { margin-top: .2rem; }

.s4-num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: rgba(var(--brand-rgb), .1);
  color: var(--brand);
  font-weight: 800;
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   4. 内容板块：统一栅格与悬停反馈
   -------------------------------------------------------------------------- */
.s4-dept {
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.s4-dept:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(var(--brand-rgb), .4);
}
.s4-dept .dept-card-body h3 { display: flex; align-items: center; gap: .6rem; }

/* 优势卡：图片区固定比例，避免行高跳动 */
.s4-why .media-4x3 { margin-bottom: 1.1rem; background: var(--page-alt); }

/* --------------------------------------------------------------------------
   5. 轮播（用户评价 / App 截图）
   -------------------------------------------------------------------------- */
.s4-swiper { padding-bottom: 3.2rem; }
.s4-swiper .swiper-slide { height: auto; }
.s4-swiper .swiper-pagination { bottom: 0; }
.s4-swiper .swiper-pagination-bullet-active { background: var(--brand); }
.s4-swiper .swiper-button-next,
.s4-swiper .swiper-button-prev {
  width: 40px;
  height: 40px;
  margin-top: -1.6rem;
  border-radius: 50%;
  color: var(--brand);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.s4-swiper .swiper-button-next::after,
.s4-swiper .swiper-button-prev::after { font-size: .95rem; font-weight: 700; }
.s4-swiper .swiper-button-next:hover,
.s4-swiper .swiper-button-prev:hover { background: rgba(var(--brand-rgb), .08); }

.s4-shot {
  padding: .8rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
}
.s4-shot img { border-radius: var(--radius-sm); }

/* --------------------------------------------------------------------------
   6. 下载区与法务页补充
   -------------------------------------------------------------------------- */
.s4-download { padding: 2.6rem; }
@media (max-width: 767.98px) { .s4-download { padding: 1.6rem; } }

.s4-legal-toc { position: sticky; top: calc(var(--header-h) + 1.5rem); }
@media (max-width: 991.98px) { .s4-legal-toc { position: static; } }

.s4-sec-link { font-weight: 600; }
.s4-sec-link i { transition: transform .22s var(--ease); }
.s4-sec-link:hover i { transform: translateX(4px); }

/* 页脚：科技蓝细分隔线，弱化装饰 */
.site-footer .ft-title { border-left: 3px solid var(--brand-2); padding-left: .6rem; }