/* ==========================================================================
   师道知识 | 响应式单页样式
   架构：设计令牌 → 基础重置 → 布局组件 → 区块 → 响应式增强 → 可访问性
   原则：移动优先（min-width 自下而上），流体排版用 clamp() 无断点跳变
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root {
  /* 品牌色：深蓝（权威、专业）+ 橙（活力、行动） */
  --brand-navy-900: #2a1610;
  --brand-navy-800: #351c12;
  --brand-navy-700: #452517;
  --brand-navy-600: #63381e;
  --brand-navy-500: #85502c;
  --brand-blue-400: #c97b3c;
  --brand-orange-700: #a8420d;
  --brand-orange-600: #c4551a;
  --brand-orange-500: #f37021;
  --brand-orange-400: #ff8c42;
  --brand-orange-300: #ffb27a;

  /* 中性色 */
  --ink-900: #23150e;
  --ink-800: #3a2718;
  --ink-700: #5a3e2b;
  --ink-600: #7a5b42;
  --ink-500: #9a7b63;
  --ink-400: #b9a08b;
  --line: #eadfd3;
  --line-soft: #f5eee6;
  --bg: #ffffff;
  --bg-soft: #faf6f0;
  --bg-tint: #f5ede3;

  /* 语义色 */
  --success: #16794c;
  --success-bg: #e7f5ee;
  --danger: #c02626;
  --danger-bg: #fdecec;
  --warning: #b26a00;

  /* 字体：优先系统中文字体，零加载阻塞 */
  --font-sans: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
    sans-serif;
  --font-serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", Georgia, serif;

  /* 流体字号：clamp(最小值, 视口比例 + 基准, 最大值) */
  --fs-display: clamp(2.5rem, 1.4rem + 5vw, 4.5rem);
  --fs-h2: clamp(1.6rem, 1.15rem + 2.2vw, 2.6rem);
  --fs-h3: clamp(1.15rem, 1.02rem + 0.6vw, 1.4rem);
  --fs-lead: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
  --fs-body: 1rem;
  --fs-sm: 0.9rem;
  --fs-xs: 0.8rem;

  /* 间距 */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --section-py: clamp(3.5rem, 2rem + 7vw, 7rem);

  /* 圆角与阴影 */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(35, 21, 14, 0.06), 0 2px 8px rgba(35, 21, 14, 0.04);
  --shadow-md: 0 4px 12px rgba(35, 21, 14, 0.08), 0 12px 32px rgba(35, 21, 14, 0.06);
  --shadow-lg: 0 8px 24px rgba(35, 21, 14, 0.1), 0 24px 60px rgba(35, 21, 14, 0.1);

  /* 布局 */
  --container: 1200px;
  --container-narrow: 820px;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --header-h: 68px;

  /* 动效 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.3s;
}

/* ---------- 2. 基础重置 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 锚点定位时为吸顶导航预留空间 */
  scroll-padding-top: calc(var(--header-h) + 16px);
  /* 抽屉式菜单用 translateX 移出视口时会撑大可滚动区域（fixed 元素不受 body 的
     横向裁剪约束），需要在根元素上裁掉，否则平板宽度会出现横向滚动条。

     必须用 clip 而不能用 hidden：overflow-x:hidden 会让 html 成为滚动容器，
     而 position:sticky 只在「最近的那个滚动祖先」内吸附 —— 一旦 html 成了滚动容器，
     吸顶导航就会跟着页面一起滚走（实测滚到 1500px 时 header.top = −1414px，完全失效）。
     overflow-x:clip 只裁剪溢出、不建立滚动容器，sticky 得以正常工作。
     clip 是 2022 起全浏览器支持的老语法，配合下面 overflow-x:hidden 的降级更稳妥。 */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink-800);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 同上：用 clip 避免破坏 sticky（body 也会成为 html 的滚动容器） */
  overflow-x: hidden;
  overflow-x: clip;
  /* 移动端底部固定条防遮挡（仅在启用时用 body.has-mobile-cta 覆盖） */
  padding-bottom: env(safe-area-inset-bottom);
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

a {
  color: var(--brand-navy-600);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

a:hover {
  color: var(--brand-orange-600);
}

/* ---------- 3. 可访问性 ---------- */
:focus-visible {
  outline: 3px solid var(--brand-orange-500);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 999;
  padding: var(--sp-3) var(--sp-5);
  background: var(--brand-navy-700);
  color: #fff;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: 700;
  transition: top var(--dur) var(--ease);
}

.skip-link:focus {
  top: 0;
  color: #fff;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 4. 布局 ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-py);
}

.section-head {
  max-width: 720px;
  margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--brand-orange-600);
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
  padding-left: 28px;
  position: relative;
}

.eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: var(--brand-orange-500);
}

.section-title {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.28;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}

.section-lead {
  margin-top: var(--sp-4);
  font-size: var(--fs-lead);
  color: var(--ink-600);
  line-height: 1.8;
}

/* 心力教育系统：导语有两段、字数约为其它版块的两倍，
   单独放宽到 860px 并收紧行距，避免在 720px 限宽里排成 6 行、显得头重脚轻。 */
.curriculum-section .section-head {
  max-width: 860px;
}

.curriculum-section .section-lead {
  line-height: 1.75;
}

/* ---------- 5. 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.85em 1.8em;
  border-radius: var(--r-full);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  position: relative;
  overflow: hidden;
}

.btn:active {
  transform: translateY(1px) scale(0.99);
}

.btn-primary {
  background: linear-gradient(135deg, var(--brand-orange-500), var(--brand-orange-600));
  color: #1a1206;
  box-shadow: 0 4px 14px rgba(243, 112, 33, 0.32);
}

.btn-primary:hover {
  color: #1a1206;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(243, 112, 33, 0.42);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(6px);
}

.btn-ghost:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}

.btn-sm {
  padding: 0.6em 1.3em;
  font-size: var(--fs-sm);
}

.btn-lg {
  padding: 1.05em 2.2em;
  font-size: 1.05rem;
}

.btn-block {
  width: 100%;
}

/* 提交中的加载态 */
.btn-loading {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(26, 18, 6, 0.3);
  border-top-color: #1a1206;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.btn.is-loading .btn-loading {
  display: block;
}

.btn.is-loading {
  pointer-events: none;
  opacity: 0.85;
}

/* ---------- 6. 头部导航 ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow var(--dur) var(--ease);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}

.brand:hover {
  color: inherit;
}

/* 品牌 logo 有两套，按底色选：深色底（页脚）用白字版 .footer-logo，
   浅色底（页头）用黑字版 .brand-logo。用 height 控制尺寸、width:auto 保持原始宽高比，
   避免与 img 的 width/height 属性冲突导致的拉伸。 */
.brand-logo {
  display: block;
  height: 42px;
  width: auto;
}

@media (max-width: 640px) {
  .brand-logo {
    height: 36px;
  }
}

/* 页脚品牌 logo（白字版，透明底 WebP）。*/
.footer-logo {
  display: block;
  height: 32px;
  width: auto;
  flex-shrink: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--brand-orange-500), var(--brand-orange-600));
  color: #ffffff;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 900;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-text strong {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: 0.02em;
}

.brand-text small {
  font-size: 0.68rem;
  color: var(--ink-500);
  letter-spacing: 0.16em;
}

/* 桌面端导航容器：必须显式 flex，否则 .nav-cta 与 .nav-list 会 block 堆叠成两行。
   HTML 里 CTA 已排在 nav-list 之前，因此 flex 顺序 =「免费咨询 | 公司介绍 | …」。 */
.nav {
  display: flex;
  align-items: center;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 0.2rem + 1.2vw, 1.6rem);
}

.nav-list a {
  position: relative;
  padding: var(--sp-2) 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-700);
  white-space: nowrap;
}

.nav-list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--brand-orange-500);
  transition: width var(--dur) var(--ease-out);
}

.nav-list a:hover,
.nav-list a.is-active {
  color: var(--brand-navy-700);
}

.nav-list a:hover::after,
.nav-list a.is-active::after {
  width: 100%;
}

/* CTA 在最左，故用 margin-right 与导航列表拉开距离（移动端在媒体查询里重置为 0） */
.nav-cta {
  margin-right: clamp(0.75rem, 0.3rem + 1.4vw, 1.75rem);
  flex-shrink: 0;
}

/* 汉堡按钮：仅移动端显示 */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}

.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink-800);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.scroll-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--brand-orange-500), var(--brand-orange-300));
  transition: width 0.1s linear;
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(42, 22, 16, 0.5);
  backdrop-filter: blur(2px);
  z-index: 98;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.nav-backdrop.is-visible {
  opacity: 1;
}

/* ---------- 7. 首屏 ---------- */
.hero {
  position: relative;
  background: radial-gradient(
      ellipse 80% 60% at 70% 0%,
      var(--brand-navy-600) 0%,
      transparent 60%
    ),
    linear-gradient(160deg, var(--brand-navy-900) 0%, var(--brand-navy-700) 55%, var(--brand-navy-800) 100%);
  color: #fff;
  overflow: hidden;
  /* 移动端用 dvh 避免浏览器地址栏导致的视口跳动 */
  min-height: min(92vh, 92dvh);
  display: flex;
  align-items: center;
  padding-block: clamp(3rem, 2rem + 6vw, 6rem);
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* 背景图：默认 JPEG 兜底，支持的浏览器优先用 WebP（含 2x 高清屏版本） */
  background-image: url("../img/hero-bg.jpg");
  background-image: image-set(
    url("../img/hero-bg.webp") type("image/webp") 1x,
    url("../img/hero-bg@2x.webp") type("image/webp") 2x
  );
  background-size: cover;
  /* 居中取景：新背景是抽象光弧，视觉重心（金橙光带）在画面中偏右，
     居中能把光弧完整留在画面里，窄屏也不会只切到一侧 */
  background-position: center center;
  background-repeat: no-repeat;
}

/* 图上叠中性深藏青遮罩（不是为了改色调，而是压暗以保白字对比）。
   之所以不用暖棕：暖棕叠在蓝金图上会发浑、发灰，中性深色才能保住图本身的通透感。
   横向：左侧压深（文案区）→ 右侧只轻压（保住金橙光带，也压住右上最亮的白区）；
   纵向：压顶（衔接页头）→ 压底（数据带所在的整条底部）。
   用 ::before 是为了排在 .hero-glow / .hero-grid 之下，光晕与网格仍能叠在图上 */
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      90deg,
      rgba(8, 11, 24, 0.76) 0%,
      rgba(8, 11, 24, 0.6) 30%,
      rgba(8, 11, 24, 0.36) 56%,
      rgba(8, 11, 24, 0.26) 80%,
      rgba(8, 11, 24, 0.34) 100%
    ),
    linear-gradient(
      180deg,
      rgba(8, 11, 24, 0.38) 0%,
      rgba(8, 11, 24, 0.06) 28%,
      rgba(8, 11, 24, 0.2) 70%,
      rgba(8, 11, 24, 0.62) 100%
    );
}

.hero-glow {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  max-width: 800px;
  max-height: 800px;
  background: radial-gradient(circle, rgba(243, 112, 33, 0.18) 0%, transparent 65%);
  border-radius: 50%;
  animation: float 12s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-4%, 5%);
  }
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 100%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.5em 1.2em;
  margin-bottom: var(--sp-5);
  border: 1px solid rgba(243, 112, 33, 0.4);
  border-radius: var(--r-full);
  background: rgba(243, 112, 33, 0.1);
  color: var(--brand-orange-300);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
}

.hero-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-orange-500);
  box-shadow: 0 0 0 0 rgba(243, 112, 33, 0.7);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 8px rgba(243, 112, 33, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(243, 112, 33, 0);
  }
}

.hero-title {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-5);
}

.hero-title-line {
  color: #fff;
}

.hero-title-line.accent {
  background: linear-gradient(135deg, var(--brand-orange-300), var(--brand-orange-500));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 窄屏（含 iPad 竖屏 768/820px）：H1 改为整段换行。
   标题文案较长时（如「教会一个人 = 带出一支队伍」），inline 布局会在
   词中间断开（如「带出 / 一支队伍」），语义被割裂。实测 900px 以上能单行
   放得下，899px 以下会拆词，故断点取 899px。 */
@media (max-width: 899px) {
  .hero-title-line {
    display: block;
  }
}

/* 极窄屏（实测：415px 必然折为两行、420px 仍可单行）把断行点固定在语义处，
   避免浏览器贪心填充断成「…亮起 / 来」，末行只剩一个孤字 */
@media (max-width: 419px) {
  .hero-title-tail {
    display: block;
  }
}

/* ============ 首屏「言志区」 ============
   大气感靠「分幕 + 留白 + 字号对比」做出来，而不是堆元素：
   ① 与主标题之间用一道橙色渐隐细线拉开，形成「标题」/「言志」两幕结构；
   ② 三字诀放大成全块唯一的暖色重音（衬 3 行小字全是灰白）；
   ③ 心法句降为铭文语气（小、灰、行距大），使命句加重提亮作收束。 */
.hero-desc {
  position: relative;
  max-width: 640px;
  margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  padding-top: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
  font-size: var(--fs-lead);
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.64);
  margin-bottom: var(--sp-6);
}

.hero-desc::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: min(100%, 460px);
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(243, 112, 33, 0.85),
    rgba(243, 112, 33, 0.25) 55%,
    rgba(255, 255, 255, 0)
  );
}

/* 三字诀「正心 正念 正行」：放大 + 宽字距，字间用细竖线分隔
   （细线比圆点更庄重，且避免与顶部徽章的小圆点重复） */
.hero-desc-virtues {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1em;
  margin-bottom: clamp(0.85rem, 0.6rem + 0.7vw, 1.25rem);
  font-size: clamp(1.3rem, 1.05rem + 0.95vw, 1.75rem);
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--brand-orange-300);
}

.hero-desc-virtues span {
  position: relative;
}

.hero-desc-virtues span + span::before {
  content: "";
  position: absolute;
  left: -0.65em;
  top: 50%;
  width: 1px;
  height: 0.88em;
  background: currentColor;
  opacity: 0.42;
  transform: translateY(-50%);
}

/* 心法句：铭文语气——收窄行宽、放开行距，与三字诀形成主次 */
.hero-desc-line {
  max-width: 26em;
  line-height: 2.05;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.6);
}

/* 使命句「教导激活心力 企业持续盈利」：加重提亮 + 宽字距作收束 */
.hero-desc-mission {
  margin-top: clamp(0.75rem, 0.5rem + 0.6vw, 1.1rem);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.94);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.stat dt {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--sp-1);
}

.stat dd {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem);
  font-weight: 700;
  color: var(--brand-orange-400);
  line-height: 1.2;
}

.stat .unit {
  font-size: 0.55em;
  margin-left: 2px;
  color: rgba(255, 255, 255, 0.7);
}

/* 901~1180px：这一档 hero 比图片可视区更「方」，cover 会横向裁切到画面中段的
   金色光带，而文案块又几乎横跨到 68% 处 —— 横向遮罩到中段已衰减不够用，
   故整段加重一档，让大字始终落在深底上 */
@media (min-width: 901px) and (max-width: 1180px) {
  .hero-bg::before {
    background: linear-gradient(
        90deg,
        rgba(8, 11, 24, 0.78) 0%,
        rgba(8, 11, 24, 0.68) 34%,
        rgba(8, 11, 24, 0.58) 62%,
        rgba(8, 11, 24, 0.5) 100%
      ),
      linear-gradient(
        180deg,
        rgba(8, 11, 24, 0.38) 0%,
        rgba(8, 11, 24, 0.1) 28%,
        rgba(8, 11, 24, 0.22) 70%,
        rgba(8, 11, 24, 0.62) 100%
      );
  }
}

/* 窄屏：文案几乎占满整宽，横向遮罩不够用 → 改为整体均匀压暗，保证可读性 */
@media (max-width: 900px) {
  .hero-bg {
    background-position: center 42%;
  }

  .hero-bg::before {
    background: linear-gradient(
        180deg,
        rgba(8, 11, 24, 0.52) 0%,
        rgba(8, 11, 24, 0.36) 26%,
        rgba(8, 11, 24, 0.46) 68%,
        rgba(8, 11, 24, 0.66) 100%
      ),
      linear-gradient(90deg, rgba(8, 11, 24, 0.32) 0%, rgba(8, 11, 24, 0.24) 100%);
  }
}

/* ---------- 7.5 关于我们 ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  align-items: start;
}

/* 小节标题：橙色竖线 + 衬线字（「创始人」「经营理念」各用一次） */
.about-subtitle {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  line-height: 1.4;
  color: var(--ink-900);
  padding-left: 0.9rem;
  border-left: 4px solid var(--brand-orange-500);
  margin-bottom: var(--sp-4);
}

.about-intro {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.85;
  color: var(--ink-700);
}

.about-intro p + p {
  margin-top: var(--sp-4);
}

.about-intro strong {
  color: var(--ink-900);
  font-weight: 600;
}

.about-intro .lead-strong {
  color: var(--ink-900);
  font-weight: 700;
}

/* 规模数据：2×2 卡片，橙色衬线数字 */
.about-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

.about-stat {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
}

.about-stat strong {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  line-height: 1.15;
  color: var(--brand-orange-600);
}

.about-stat strong em {
  font-style: normal;
  font-size: 0.55em;
  margin-left: 2px;
  color: var(--brand-orange-400);
}

.about-stat span {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-600);
}

/* 影响力：浅底整段，左侧橙色引导线 */
.about-reach {
  margin-top: var(--sp-6);
  /* 实测：这段文字单行需 1067px（18.4px 字号）。字号降到 1.05rem + 内边距收到
     1.5rem 后，≥1200px 可整行排满，不会把「万人。」甩成孤字行。 */
  padding: var(--sp-5) clamp(1rem, 2.2vw, 1.5rem);
  background: var(--bg-soft);
  border-left: 4px solid var(--brand-orange-400);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--ink-700);
  /* 1024px 及以下必然换行，交给 pretty 避免末行只剩一两个字 */
  text-wrap: pretty;
}

/* 经营理念：8 条固定排成 4+4 / 2+2+2+2 / 1×8。
   不用 auto-fit —— 若让浏览器自选列数，1200px 容器会塞进 5 列变成「5+3」，
   末行残缺很难看。固定列数才能保证每行等分。 */
.about-philosophy {
  margin-top: var(--sp-7);
}

.philosophy-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* 各行等高：文案长的卡（如「事业」两行）不会让相邻行显得忽高忽低 */
  grid-auto-rows: 1fr;
  gap: var(--sp-4);
}

.philosophy-grid .mv-card {
  padding: var(--sp-4) var(--sp-5);
}

.philosophy-grid .mv-card h3 {
  font-size: 1.05rem;
  margin-bottom: var(--sp-1);
}

.philosophy-grid .mv-card p {
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.about-mv {
  display: grid;
  gap: var(--sp-4);
}

.mv-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-orange-500);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  box-shadow: 0 6px 24px rgba(35, 21, 14, 0.05);
}

.mv-card h3 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--brand-orange-600);
  margin-bottom: var(--sp-2);
}

.mv-card p {
  color: var(--ink-700);
  line-height: 1.7;
}

/* 宣言：全宽橙色渐变条，作为整段的收束 */
.about-declaration {
  margin-top: var(--sp-7);
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3rem) clamp(1rem, 4vw, 3rem);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--brand-orange-500), var(--brand-orange-600));
  color: #fff;
  text-align: center;
  box-shadow: 0 12px 32px rgba(196, 85, 26, 0.22);
}

.about-declaration-label {
  display: block;
  font-size: var(--fs-sm);
  letter-spacing: 0.3em;
  /* 末字后也会多出一个字距，用等量负缩进抵消，保证视觉居中 */
  text-indent: 0.3em;
  opacity: 0.86;
  margin-bottom: var(--sp-2);
}

.about-declaration strong {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-indent: 0.06em;
}

@media (max-width: 860px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 899px) {
  /* 8 = 2×4，末行不留残 */
  .philosophy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .philosophy-grid {
    grid-template-columns: 1fr;
  }

  /* 极窄屏收紧数据卡内边距，避免「10000+ 家行业标杆及区域龙头」把卡片挤变形 */
  .about-stat {
    padding: var(--sp-3) var(--sp-4);
  }

  .about-declaration strong {
    font-size: 1.4rem;
  }
}

/* ---------- 8. 教导型组织 · 四大板块卡片 ---------- */
.pain-section {
  background: var(--bg-soft);
}

.pain-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

.pain-card {
  padding: var(--sp-5);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.pain-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(243, 112, 33, 0.4);
}

.pain-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--bg-tint);
  color: var(--brand-navy-600);
}

.pain-icon svg {
  width: 24px;
  height: 24px;
}

.pain-card h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: var(--sp-2);
}

/* 板块名下方的小标签：家庭化 / 铸就组织凝聚力 */
.pain-card h3 .pain-tag {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--brand-orange-600);
}

.pain-card p {
  color: var(--ink-600);
  font-size: 0.95rem;
}

/* ---------- 9. 心力教育系统 ---------- */
.curriculum-section {
  background: var(--bg);
}

.system-layout {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
}

.system-wheel {
  display: flex;
  justify-content: center;
}

.wheel-svg {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
}

/* 连线：仅宽屏三栏版式启用（移动/平板隐藏），八条等距水平细线 */
.wheel-leaders {
  display: none;
}

.wheel-leaders line {
  stroke: var(--brand-orange-700);
  stroke-opacity: 0.45;
  /* 宽屏下本 svg 与容器严格 1:1（460×528），故此值即实际像素厚度 */
  stroke-width: 3;
  stroke-linecap: round;
}

/* 环上弧形文字：沿圆弧排布，字头随弧线转向（不再是水平直排）
   字号层级：中心 > 内环（两大主线）> 外环（四大板块），
   环带越外侧字越小，避免外环文字挤到分隔线上。 */
.wheel-arc-text {
  fill: #fff;
  font-family: var(--font-sans);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 2px;
}

/* 内环两大主线：层级最高，字最大 */
.wheel-arc-text--inner {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 2.5px;
}

/* 外环四大板块：环带最宽但字最小，与内环拉开层级 */
.wheel-arc-text--outer {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 2px;
}

/* 中心文字：全图最大字号，衬线体与环上黑体形成主次对比。
   圆盘直径 208px（r=104），故用两行排布：上行 34px、下行 24px。 */
.wheel-core-main {
  fill: #fff;
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 4px;
  text-anchor: middle;
  dominant-baseline: central;
}

.wheel-core-sub {
  fill: #fff;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 3px;
  text-anchor: middle;
  dominant-baseline: central;
}

/* 分隔线：用页面底色直接「开槽」，视觉上就是环带被整齐切断 */
.wheel-sep line {
  stroke: var(--bg);
  stroke-width: 5;
}

/* 八条课程产品线 */
.system-list {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.system-item {
  position: relative;
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.system-item:hover {
  border-color: var(--brand-orange-300);
  box-shadow: var(--shadow-md);
}

.system-item__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: 5px;
  font-family: var(--font-sans);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink-900);
}

.system-item__tag {
  padding: 2px 9px;
  border-radius: var(--r-full);
  background: rgba(243, 112, 33, 0.1);
  color: var(--brand-orange-700);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.7;
}

.system-item__desc {
  color: var(--ink-600);
  font-size: 0.9rem;
}

/* ---------- 10. 教导摆渡人（米白底，照片卡更突出） ---------- */
.ferry-section {
  background: var(--bg-soft);
  /* 防止满屏出血的轨道（width:100vw）在带滚动条时出现横向滚动条 */
  overflow-x: clip;
}

/* 「摆渡人风采」标题栏：原先上方有两张定义卡（.ferry-defs，已按需求删除），
   现在它直接接在 section-head 之后，需要自己补上区块间距 */
.ferry-people__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: clamp(2rem, 1rem + 3vw, 3rem);
  margin-bottom: var(--sp-4);
}

/* ---------- 人物轮播（居中放大 + 两侧缩小 + 底部分段进度条） ---------- */
/* ---------- 人物轮播（居中放大 + 两侧缩小 + 底部分段进度条） ---------- */
/* 舞台：固定行宽（比版心宽、但不满屏），整行始终只显示 5 张卡（左右各 2 + 居中 1）。
   卡宽 = 行宽反推 → 「放大」只体现在这 5 张卡变大，不会在两旁多冒出卡片。 */

.ferry-people__title {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem);
  font-weight: 900;
  color: var(--ink-900);
}

/* 箭头：垂直居中、贴在卡片列**外侧**（与参考图一致）。
   宽屏时外侧有真实空间（视口比版心宽出的部分），箭头悬在版心之外；
   窄屏外侧放不下 40px 圆钮 → 由下方 @media 切回半透明内叠，保证不越界。 */
.ferry-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

/* 箭头：默认贴在「卡片行」左右外侧（与参考图一致）。
   行宽比版心宽，外侧可用空间 = (视口 − 行宽)/2，扣掉按钮 40px + 8px 安全距即净间距；
   窄屏外侧放不下圆钮 → 由下方 @media 切回半透明内叠。 */
.ferry-nav[data-side="prev"] {
  right: calc(100% + var(--ferry-arrow-gap));
  left: auto;
}

.ferry-nav[data-side="next"] {
  left: calc(100% + var(--ferry-arrow-gap));
  right: auto;
}

/* 舞台 = 放大的「固定行宽」卡片行（非满屏出血）：
   行宽 = min(1680px, 视口 − 两侧留白)。整行正好 5 张卡，卡宽由行宽反推（见 .ferry-track），
   于是「放大」只体现为这 5 张卡变大，两旁不会再多露卡片。
   left:50% + margin-left:−行宽/2 把这一行从嵌套容器里居中拉宽（不依赖 transform）。 */
.ferry-stage {
  --ferry-row: min(1680px, calc(100vw - 2 * clamp(12px, 4vw, 72px)));
  --ferry-arrow-gap: clamp(0px, calc((100vw - var(--ferry-row)) / 2 - 48px), 56px);
  position: relative;
  width: var(--ferry-row);
  left: 50%;
  margin-left: calc(var(--ferry-row) / -2);
}

.ferry-nav__btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--r-full);
  /* 浅灰圆底 + 白色 chevron，与参考图一致 */
  background: rgba(38, 38, 40, 0.42);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(2px);
  box-shadow: 0 4px 14px rgba(42, 22, 16, 0.16);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease-out),
    opacity var(--dur) var(--ease);
}

.ferry-nav__btn svg {
  width: 18px;
  height: 18px;
}

.ferry-nav__btn:hover:not(:disabled) {
  background: var(--brand-orange-500);
  transform: scale(1.08);
}

.ferry-nav__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 焦点可见：键盘用户必须能看到当前焦点 */
.ferry-nav__btn:focus-visible {
  outline: 2px solid var(--brand-orange-500);
  outline-offset: 3px;
}

/* 轨道：居中卡通过 scale 放大，所以上下要留出放大余量，
   否则放大的卡片会被 overflow 裁掉上边和下边。
   卡宽按「一屏露 5 张（左右各 2 + 居中 1）」反推：
   5×卡宽 + 4×gap ≤ 版心内容宽(1120) → 卡宽 ≈ (1120 − 4×16)/5 = 211px。
   实测 232px 时只能完整看到 4 张（居中卡 scale 放大会挤掉边缘卡的完整边界），故收窄到 208px。 */
/* 轨道：居中卡 scale(1.28) 放大后视觉高度 339px（布局高 265px），
   上下各多出约 37px → padding 必须给到 44px，否则放大的卡片会被 overflow 裁掉上下边。
   44 = (339 − 265)/2 + 13 余量，正好卡住裁切（实测 overTop/overBottom = 0）。 */
.ferry-track {
  /* 卡宽直接由「行宽」反推：整行正好 5 张（行变宽 → 这 5 张同比变大，
     不会在两旁多露出第 6、第 7 张）。max 176px 兜底：窄屏改回「少而大」的卡。
     用 flex + 固定 flex-basis（grid 子项的大 margin 会被网格区吸收把卡片压成 0 宽，故不用 grid）。 */
  --ferry-card: max(176px, calc((var(--ferry-row) - 4 * var(--sp-4)) / 5));
  display: flex;
  gap: var(--sp-4);
  margin: 0;
  /* 上下：为居中卡 scale(1.28) 的视觉溢出留余量，防被裁掉上下边 */
  padding: clamp(48px, 5vw, 72px) 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

/* 首尾留白（用真实 flex 空档，而非 padding —— Chromium 不计 inline-end padding 的
   可滚动区，末卡会滚不到正中）。宽 = 2 卡 + 1 间距，左右对称：
   让第 1 张 / 最后 1 张也能滚到轨道正中（点选任意侧卡都能居中）。
   空档只在两端、初始位置在屏幕外，不会多露卡片 —— 整排恒为 5 张。 */
.ferry-track::before,
.ferry-track::after {
  content: "";
  flex: 0 0 calc(2 * var(--ferry-card) + var(--sp-4));
}

.ferry-track::-webkit-scrollbar {
  display: none;
}

/* 卡片：默认略缩小（保持层次），[data-active] 的那张放大凸显。
   侧卡**不再变淡模糊**（原 opacity:.5 会让文字发灰看不清）——放大/缩小的层次
   改由「尺寸 + 居中卡的橙边/投影」表达，侧卡本身始终不透明、清晰可读。
   整张卡可点选（cursor:pointer），点谁就把谁居中（JS 里绑 click → goTo）。
   放大比例 1.28（侧卡 0.86 悬停 / 0.8 常态）：一屏 5 张时左右各仍完整可见 2 张。 */
.ferry-card {
  scroll-snap-align: center;
  /* 固定卡宽（不伸缩），由「行宽」反推，保证整行正好 5 张 */
  flex: 0 0 var(--ferry-card);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  opacity: 1;
  transform: scale(0.8);
  transform-origin: center center;
  transition: transform var(--dur-c, 380ms) var(--ease-out),
    opacity var(--dur-c, 380ms) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.ferry-card[data-active] {
  opacity: 1;
  /* 居中卡 1.28（侧卡 0.8）→ 视觉比例 1.6×；
     因为底卡更宽，居中卡的绝对尺寸同步变大 */
  transform: scale(1.28);
  border-color: var(--brand-orange-300);
  box-shadow: var(--shadow-md);
  z-index: 2;
}

/* 鼠标悬停：侧卡微微放大给出「可点」反馈；居中卡保持自身放大比例，不被覆盖 */
.ferry-card:hover {
  transform: scale(0.86);
}

.ferry-card[data-active]:hover {
  transform: scale(1.28);
}

.ferry-card__media {
  margin: 0;
  /* 16:9 横图，与参考图一致 */
  aspect-ratio: 16 / 9;
  background: var(--bg-soft);
  overflow: hidden;
}

.ferry-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-c, 380ms) var(--ease-out);
}

.ferry-card[data-active] .ferry-card__media img {
  transform: scale(1.05);
}

.ferry-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
  padding: var(--sp-4);
}

.ferry-card__name {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink-900);
}

.ferry-card__role {
  color: var(--brand-orange-700);
  font-size: 0.9rem;
  font-weight: 700;
}

.ferry-card__desc {
  margin-top: var(--sp-2);
  color: var(--ink-600);
  font-size: 0.95rem;
  line-height: 1.7;
  /* 名单里的完整事迹往往上百字，卡片只露出前 4 行（保持每张卡等高、整行不被一张卡撑高），
     「查看完整介绍」按钮 → 弹窗看全文。 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  /* 与下方按钮保持视觉间距（按钮用 margin-top:auto 吸底） */
  margin-bottom: var(--sp-3);
}

/* 「查看完整介绍」：推到底部对齐（margin-top:auto），保证一行里 5 个按钮在同一条水平线上 */
.ferry-card__more {
  margin-top: auto;
  align-self: flex-start;
  padding: 6px 12px;
  border: 1px solid var(--brand-orange-300);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--brand-orange-700);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.ferry-card__more:hover,
.ferry-card__more:focus-visible {
  background: var(--brand-orange-500);
  border-color: var(--brand-orange-500);
  color: #fff;
}

.ferry-card__more:focus-visible {
  outline: 2px solid var(--brand-orange-500);
  outline-offset: 2px;
}

.ferry-card[data-active] .ferry-card__more {
  background: var(--brand-orange-500);
  border-color: var(--brand-orange-500);
  color: #fff;
}

/* 底部分段进度条：一排短横线，当前项加深加长（对齐参考图）
   35 位摆渡人 → 条数多，窄屏放不下：允许横向滚动（隐藏滚动条），
   且必须用 safe center（纯 center 在溢出时会把左侧几条顶到不可滚到的区域）。 */
.ferry-dots {
  display: flex;
  justify-content: center;
  justify-content: safe center;
  gap: 6px;
  margin-top: var(--sp-4);
  padding: 2px 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.ferry-dots::-webkit-scrollbar {
  display: none;
}

.ferry-dots__item {
  width: 16px;
  height: 4px;
  padding: 0;
  border: none;
  border-radius: var(--r-full);
  background: #dcd7d2;
  cursor: pointer;
  flex: 0 0 auto;
  transition: width var(--dur-c, 380ms) var(--ease-out), background-color var(--dur-c, 380ms) var(--ease);
}

.ferry-dots__item[aria-current="true"] {
  width: 32px;
  background: var(--brand-orange-500);
}

.ferry-dots__item:focus-visible {
  outline: 2px solid var(--brand-orange-500);
  outline-offset: 3px;
}

/* 「摆渡人风采」标题右侧的序号（35 位，进度条条数太多、光靠横线看不出第几位） */
.ferry-people__count {
  flex: 0 0 auto;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.ferry-people__count b {
  color: var(--brand-orange-600);
  font-size: 1.05rem;
}

/* ---------- 摆渡人详情弹窗 ---------- */
.ferry-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 40px);
}

.ferry-modal[hidden] {
  display: none;
}

.ferry-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(35, 21, 14, 0.62);
  opacity: 0;
  transition: opacity 0.28s var(--ease);
}

.ferry-modal.is-open .ferry-modal__backdrop {
  opacity: 1;
}

.ferry-modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(880px, 100%);
  max-height: min(88vh, 820px);
  overflow: hidden;
  background: var(--bg);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 0.28s var(--ease), transform 0.32s var(--ease-out);
}

.ferry-modal.is-open .ferry-modal__panel {
  opacity: 1;
  transform: none;
}

.ferry-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: var(--r-full);
  background: rgba(35, 21, 14, 0.5);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.ferry-modal__close svg {
  width: 18px;
  height: 18px;
}

.ferry-modal__close:hover {
  background: var(--brand-orange-500);
  transform: scale(1.06);
}

.ferry-modal__close:focus-visible {
  outline: 2px solid var(--brand-orange-500);
  outline-offset: 2px;
}

.ferry-modal__media {
  flex: 0 0 auto;
  margin: 0;
  aspect-ratio: 16 / 9;
  background: var(--bg-soft);
  overflow: hidden;
}

.ferry-modal__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ferry-modal__body {
  padding: clamp(18px, 2.4vw, 28px);
  overflow-y: auto;
}

.ferry-modal__name {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  font-weight: 900;
  color: var(--ink-900);
}

.ferry-modal__role {
  margin-top: 4px;
  color: var(--brand-orange-700);
  font-size: 0.92rem;
  font-weight: 700;
}

.ferry-modal__desc {
  margin-top: var(--sp-4);
  color: var(--ink-700);
  font-size: 1rem;
  line-height: 1.9;
}

.ferry-modal__desc p + p {
  margin-top: 0.7em;
}

/* 弹窗打开时锁页面滚动（避免背景跟着滑） */
body.ferry-modal-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .ferry-modal__backdrop,
  .ferry-modal__panel {
    transition: none;
  }
}

/* ---------- 12. FAQ ---------- */
.faq-section {
  background: var(--bg);
}

.faq-container {
  max-width: var(--container-narrow);
}

.faq-item {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-3);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.faq-item[open] {
  box-shadow: var(--shadow-sm);
  border-color: rgba(243, 112, 33, 0.45);
}

.faq-item summary {
  position: relative;
  padding: var(--sp-4) var(--sp-6) var(--sp-4) var(--sp-5);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink-900);
  cursor: pointer;
  list-style: none;
  padding-right: 52px;
  transition: color var(--dur) var(--ease);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  color: var(--brand-navy-600);
}

/* 加号/减号图标 */
.faq-icon {
  position: absolute;
  right: var(--sp-5);
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  pointer-events: none;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 2px;
  background: var(--brand-orange-600);
  transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[open] .faq-icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

.faq-item p {
  padding: 0 var(--sp-5) var(--sp-5);
  font-size: 0.94rem;
  color: var(--ink-600);
  line-height: 1.8;
}

/* ---------- 13. 留资表单 ---------- */
.enroll-section {
  background: linear-gradient(165deg, var(--brand-navy-800) 0%, var(--brand-navy-900) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.enroll-section::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -10%;
  width: 55vw;
  height: 55vw;
  background: radial-gradient(circle, rgba(243, 112, 33, 0.12) 0%, transparent 68%);
  border-radius: 50%;
  pointer-events: none;
}

.enroll-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  align-items: start;
}

.enroll-copy .section-title {
  color: #fff;
}

.enroll-copy .section-lead {
  color: rgba(255, 255, 255, 0.72);
}

.enroll-contact {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.6);
}

.enroll-contact a {
  color: var(--brand-orange-400);
  font-weight: 700;
  font-size: 1.15rem;
  font-family: var(--font-serif);
}

.enroll-form-wrap {
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background: rgba(255, 255, 255, 0.97);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}

.enroll-form {
  display: grid;
  gap: var(--sp-4);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

.form-field {
  display: grid;
  gap: var(--sp-2);
}

.form-field label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink-800);
}

.req {
  color: var(--danger);
  margin-left: 2px;
}

.form-field input[type="text"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.82em 0.95em;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  font-size: 0.95rem;
  color: var(--ink-900);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  /* iOS Safari 聚焦时自动放大，16px 以下会缩放页面 */
}

.form-field textarea {
  resize: vertical;
  min-height: 84px;
}

.form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239a7b63' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95em center;
  padding-right: 2.4em;
  cursor: pointer;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--brand-navy-500);
  box-shadow: 0 0 0 3px rgba(133, 80, 44, 0.12);
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: var(--danger);
  background: var(--danger-bg);
}

.field-err {
  font-size: 0.8rem;
  color: var(--danger);
  min-height: 0;
}

.field-err:empty {
  display: none;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.checkbox-item input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkbox-item span {
  display: inline-block;
  padding: 0.5em 1em;
  border: 1.5px solid var(--line);
  border-radius: var(--r-full);
  font-size: 0.88rem;
  color: var(--ink-600);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  user-select: none;
}

.checkbox-item span:hover {
  border-color: var(--brand-navy-500);
  color: var(--brand-navy-600);
}

.checkbox-item input:checked + span {
  background: var(--brand-navy-700);
  border-color: var(--brand-navy-700);
  color: #fff;
  font-weight: 700;
}

.checkbox-item input:focus-visible + span {
  outline: 3px solid var(--brand-orange-500);
  outline-offset: 2px;
}

/* 蜜罐字段：绝不能被看到或聚焦 */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-privacy {
  font-size: 0.78rem;
  color: var(--ink-500);
  line-height: 1.6;
  text-align: center;
}

.form-status {
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  border-radius: var(--r-md);
  padding: 0;
  transition: all var(--dur) var(--ease);
}

.form-status:not(:empty) {
  padding: var(--sp-3) var(--sp-4);
}

.form-status.is-success {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid rgba(22, 121, 76, 0.3);
}

.form-status.is-error {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid rgba(192, 38, 38, 0.3);
}

/* ---------- 14. 页脚 ---------- */
.site-footer {
  background: var(--brand-navy-900);
  color: rgba(255, 255, 255, 0.66);
  padding-block: var(--sp-7) var(--sp-6);
  font-size: 0.9rem;
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-slogan {
  margin-top: var(--sp-4);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--brand-orange-400);
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-5);
}

.footer-col h4 {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--sp-3);
}

.footer-col ul {
  display: grid;
  gap: var(--sp-2);
}

.footer-col a,
.footer-col li {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.86rem;
}

.footer-col a:hover {
  color: var(--brand-orange-400);
}

.footer-bottom {
  padding-top: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
}

.footer-note {
  opacity: 0.7;
}

/* 备案号：按工信部要求展示，可点击跳转 beian.miit.gov.cn */
.footer-icp {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.footer-icp:hover {
  color: var(--brand-orange-400);
}

/* ---------- 15. 移动端底部固定条 ---------- */
.mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--gutter);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(35, 21, 14, 0.08);
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease-out);
}

.mobile-cta.is-visible {
  transform: translateY(0);
}

.mobile-cta-btn {
  display: grid;
  place-items: center;
  padding: 0.85em 1em;
  border-radius: var(--r-full);
  border: 1.5px solid var(--brand-navy-600);
  color: var(--brand-navy-700);
  font-weight: 700;
  font-size: 0.92rem;
}

.mobile-cta-btn-primary {
  background: linear-gradient(135deg, var(--brand-orange-500), var(--brand-orange-600));
  border-color: transparent;
  color: #1a1206;
}

/* 启用底部条时给 body 加内边距，避免遮住页脚内容 */
body.has-mobile-cta {
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

/* ---------- 16. 进场动画 ----------
   渐进增强：只有 JS 成功接管时才给 <html> 加 .js，
   否则 .reveal 保持 opacity:1 —— JS 挂掉时内容依然可见（而非白屏）。 */
.reveal {
  opacity: 1;
}

.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   18. 响应式增强（自下而上：min-width）
   ========================================================================== */

/* 移动端：隐藏桌面导航，显示汉堡按钮 */
@media (max-width: 899px) {
  .nav {
    position: fixed;
    /* 必须显式给 height:100%，否则 height:auto 的 flex 容器会按内容高度收缩
       （实测只撑到 116px，导致 CTA 按钮溢出到可视区外点不到） */
    top: 0;
    right: 0;
    height: 100%;
    height: 100dvh;
    z-index: 99;
    width: min(320px, 82vw);
    padding: calc(var(--header-h) + 1.5rem) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom));
    background: var(--bg);
    box-shadow: -8px 0 32px rgba(35, 21, 14, 0.16);
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease-out), visibility var(--dur);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    /* 关闭时完全退出布局与可访问性树，避免残留焦点 */
    visibility: hidden;
  }

  .nav.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-list li {
    border-bottom: 1px solid var(--line-soft);
  }

  .nav-list a {
    display: block;
    padding: var(--sp-4) 0;
    font-size: 1.02rem;
  }

  .nav-cta {
    /* 桌面端 CTA 排在导航首位（HTML 顺序），移动端用 order 送回抽屉底部，
       配合 margin-top:auto 让它始终贴底，不被长列表顶掉 */
    order: 1;
    margin: auto 0 0;
    padding-top: var(--sp-5);
  }

  .nav-cta .btn {
    width: 100%;
    padding-block: 0.85em;
  }

  .nav-toggle {
    display: flex;
  }

  /* 移动端锁定页面滚动，防止抽屉穿透 */
  body.nav-open {
    overflow: hidden;
  }
}

/* 平板 */
@media (min-width: 600px) {
  .pain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 桌面 */
@media (min-width: 900px) {
  .hero-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .pain-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .enroll-inner {
    grid-template-columns: 1fr 1fr;
  }

  /* 桌面端隐藏底部固定条 */
  .mobile-cta {
    display: none;
  }
}

/* 平板：轮盘居中在上，八张课程卡两列铺开 */
@media (min-width: 720px) and (max-width: 1199.98px) {
  .system-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 卡宽由基础规则 max(176px, (行宽−4间距)/5) 统一处理，无需按断点覆盖。 */

/* 中等及以下宽度（<1200px）：行宽已经贴近视口，外侧放不下 40px 圆钮
   → 箭头切回半透明内叠，保证不越界、不被视口裁掉。 */
@media (max-width: 1199.98px) {
  .ferry-nav[data-side="prev"] {
    right: auto;
    left: 6px;
  }

  .ferry-nav[data-side="next"] {
    left: auto;
    right: 6px;
  }
}

/* 手机：箭头隐藏（触摸直接滑，箭头反而碍事），卡片保持大尺寸、进度条缩短 */
@media (max-width: 639px) {
  .ferry-nav {
    display: none;
  }

  /* 一屏以一张大卡为主，左右各露出半张，冲击力更强 */
  .ferry-track {
    --ferry-card: min(76vw, 240px);
  }

  /* 窄屏一行字少，多给一行，避免刚开头就被截断 */
  .ferry-card__desc {
    -webkit-line-clamp: 5;
    line-clamp: 5;
  }

  .ferry-dots {
    /* 35 条短横线在窄屏一定放不下 → 横向滚动，靠 JS 把当前项滚到中间 */
    gap: 5px;
  }

  .ferry-dots__item {
    width: 14px;
  }

  .ferry-dots__item[aria-current="true"] {
    width: 24px;
  }
}

/* 触摸设备：去掉 hover 位移，避免「粘滞 hover」（保持与各自默认态一致，不要覆盖凸显态） */
@media (hover: none) {
  .ferry-card:hover {
    transform: scale(0.8);
  }

  .ferry-card[data-active]:hover {
    transform: scale(1.28);
  }
}

/* 宽屏（≥1200px）：中央轮盘 + 左右各四条课程卡 + 八条水平连线
   宽度与其它版块保持一致（沿用 --container: 1200px，不再单独放宽）；
   连线画在 .wheel-leaders 里（viewBox 460×528），与 .system-wheel 盒子严格 1:1；
   轮盘渲染 440px、圆心 (230,264)、最外沿半径 202.7px，四行卡中心 y = 66/198/330/462，
   水平线终点恰好落在轮盘最外沿上，故坐标可写死。 */
@media (min-width: 1200px) {
  .system-layout {
    grid-template-columns: minmax(0, 1fr) 460px minmax(0, 1fr);
    grid-template-rows: repeat(4, 132px);
    column-gap: 0;
    row-gap: 0;
    align-items: center;
  }

  .system-wheel {
    grid-column: 2;
    grid-row: 1 / -1;
    position: relative;
    display: block;
    align-self: stretch;
  }

  /* 轮盘背后一团极淡的暖光，把圆心托成视觉焦点 */
  .system-wheel::before {
    content: "";
    position: absolute;
    inset: 7%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(
      circle at 50% 50%,
      rgba(243, 112, 33, 0.11),
      rgba(243, 112, 33, 0) 68%
    );
    pointer-events: none;
  }

  .wheel-leaders {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
  }

  .wheel-svg {
    position: relative;
    z-index: 2;
    display: block;
    width: 440px;
    height: 440px;
    max-width: none;
    margin: 44px auto 0;
  }

  /* 列表展开成网格项：八张卡片按轮盘四块的方位分列两翼。
     左翼 = 教导家庭（1–3 张，上下两行）+ 教导基础课（第 4 张，单独一行居中）；
     右翼 = 教导企业（第 5–6 张）+ 教导领导力（第 7–8 张）。
     行高不等，让「教导家庭」占满上半区，与轮盘左上扇区呼应。 */
  .system-list {
    display: contents;
  }

  .system-item {
    align-self: center;
    /* 同排卡片统一高度，两翼读起来是齐整的色块而非参差 */
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px 20px;
  }

  /* 圆点要落在卡片「朝向轮盘」的那条竖边上，正好与水平连线端头接力。
     左翼卡片贴住轮盘左边缘（.system-wheel 盒子 x=0），故点在其右缘；
     右翼卡片贴住轮盘右边缘（x=460），故点在其左缘。
     用负 margin 让点的一半探出卡片边缘，与连线端头视觉重合。 */
  .system-item::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: var(--brand-orange-500);
  }

  .system-item:nth-child(-n + 4)::after {
    right: -3.5px;
  }

  .system-item:nth-child(n + 5)::after {
    left: -3.5px;
  }

  /* 左翼 01–03：教导家庭（对应轮盘左上扇区，占 rows 1–2） */
  .system-item:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .system-item:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }

  .system-item:nth-child(3) {
    grid-column: 1;
    grid-row: 3;
  }

  /* 左翼 04：教导基础课（对应轮盘左下扇区，占 row 4） */
  .system-item:nth-child(4) {
    grid-column: 1;
    grid-row: 4;
  }

  /* 右翼 05–06：教导企业（对应轮盘右上扇区，占 rows 1–2） */
  .system-item:nth-child(5) {
    grid-column: 3;
    grid-row: 1;
  }

  .system-item:nth-child(6) {
    grid-column: 3;
    grid-row: 2;
  }

  /* 右翼 07–08：教导领导力（对应轮盘右下扇区，占 rows 3–4） */
  .system-item:nth-child(7) {
    grid-column: 3;
    grid-row: 3;
  }

  .system-item:nth-child(8) {
    grid-column: 3;
    grid-row: 4;
  }

  /* 两翼底色微差：右翼偏暖橙、左翼偏暖砂，呼应轮盘上下两块 */
  .system-item:nth-child(-n + 3) {
    background: #faf7f2;
    border-color: #efe6db;
  }

  .system-item:nth-child(n + 4) {
    background: #fdf3e9;
    border-color: #f6e2cf;
  }

  .system-item__desc {
    font-size: 0.88rem;
    line-height: 1.55;
  }
}

/* 触摸设备：去掉 hover 位移，避免「粘滞 hover」 */
@media (hover: none) {
  .btn-primary:hover,
  .btn-ghost:hover,
  .pain-card:hover,
  .system-item:hover {
    transform: none;
  }
}

/* 尊重系统的「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* 高对比度模式 */
@media (prefers-contrast: more) {
  :root {
    --ink-600: #4a3223;
    --ink-500: #5a3e2b;
    --line: #c9b49e;
  }
}

/* 打印样式 */
@media print {
  .site-header,
  .mobile-cta,
  .nav-backdrop,
  .btn {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  .section {
    padding-block: 1.5rem;
    break-inside: avoid;
  }
}