/*
   首页体验整理：保留暖纸、衬线标题和印章感，减少视觉竞争；
   同时补上移动端布局、触控目标与键盘焦点。
*/

:root {
  --focus-ring: #9e4b2e;
}

/*
   首页的主调收为「安静的编辑版面」：内容是主角，装饰只负责划分节奏。
   原有的暖纸、衬线标题和暖橙锚点保留，但取消会让初学者分心的光晕与
   仪表盘式角标。
*/
body {
  line-height: 1.9;
}

a:hover {
  text-shadow: none;
}

.hero {
  min-height: min(780px, 82vh);
  background: none;
}

.hero-content {
  max-width: 590px;
}

.hero-content::before,
.hero-content::after,
.hero-corner {
  display: none;
}

.hero-subtitle {
  font-style: normal;
  letter-spacing: .08em;
}

.hero h1 {
  letter-spacing: -.04em;
  line-height: 1.05;
}

.hero h1 span {
  text-shadow: none;
}

.hero h1 span::before {
  display: none;
}

.hero h1 span::after {
  height: .16em;
  opacity: .18;
}

.hero-desc {
  max-width: 470px;
  line-height: 1.85;
}

.hero-stats {
  gap: clamp(24px, 4vw, 42px);
  margin-top: 36px;
}

.hero-visual {
  border-radius: 28px;
  box-shadow: 0 20px 55px rgba(70, 45, 30, .12);
}

.hero-visual::after {
  display: none;
}

.hero-visual__mark {
  text-shadow: none;
}

.hero-seal {
  right: 292px;
  bottom: 102px;
  width: 66px;
  height: 66px;
  border-width: 1.5px;
  font-size: 21px;
  box-shadow: none;
}

.section-title {
  line-height: 1.12;
}

.section-desc {
  line-height: 1.9;
}

.section--dark .section-title {
  letter-spacing: -.035em;
}

.chapter-divider {
  opacity: .72;
}

.concept-card,
.audience-card,
.ticker-item {
  transition: transform .32s var(--ease), background .32s var(--ease), box-shadow .32s var(--ease);
}

.concept-card:hover,
.audience-card:hover,
.ticker-item:hover {
  transform: translateY(-3px);
}

.myth-reveal {
  margin-top: 88px;
}

.compare {
  border-radius: 24px;
  box-shadow: 0 18px 42px rgba(70, 45, 30, .09);
}

.compare__handle {
  box-shadow: none;
}

.compare__grip {
  box-shadow: 0 8px 20px rgba(164, 81, 52, .20);
}

html {
  scroll-padding-top: 84px;
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 16px;
  z-index: 300;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--text);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform .2s var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
}

.nav-menu-toggle {
  display: none;
  min-height: 40px;
  padding: 0 12px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.nav-menu-toggle__icon,
.nav-menu-toggle__icon::before,
.nav-menu-toggle__icon::after {
  display: block;
  width: 16px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}

.nav-menu-toggle__icon {
  position: relative;
}

.nav-menu-toggle__icon::before,
.nav-menu-toggle__icon::after {
  position: absolute;
  content: '';
  left: 0;
}

.nav-menu-toggle__icon::before { top: -5px; }
.nav-menu-toggle__icon::after { top: 5px; }

.nav-right.is-open .nav-menu-toggle__icon { background: transparent; }
.nav-right.is-open .nav-menu-toggle__icon::before { transform: translateY(5px) rotate(45deg); }
.nav-right.is-open .nav-menu-toggle__icon::after { transform: translateY(-5px) rotate(-45deg); }

.hero-path-link {
  display: inline-block;
  margin-left: 20px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
}

/* 卡片只保留清晰的边界与轻微反馈；学习内容不需要一整页都在发光。 */
.concept-card,
.audience-card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.concept-card:hover,
.audience-card:hover {
  background: var(--panel);
  box-shadow: var(--shadow-card-hover);
}

.concept-card:hover::before,
.audience-card:hover::before,
.ladder-step:hover::before,
.hud-panel:hover::before {
  opacity: 0;
  animation: none;
}

.hud-panel,
.hud-panel:hover {
  box-shadow: 0 18px 44px rgba(70, 45, 30, .12);
}

.hud-panel:hover::after { opacity: 0; }

/* ===== 金句锦囊：三列竖向流动 · 线感编辑风 =====
   借鉴：Awwwards「Pastel / Minimal / Grid」趋势 + 编辑设计发丝线传统
   （Klim 类型系统 / Pentagram 编辑排版）—— 弃卡片边框与填充，
   改以暖橙发丝线分隔、衬线大字、等宽小标签，留白撑场。 */
.quote-ticker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 52px;
  max-width: 1080px;
  margin: 0 auto;
}

.quote-ticker-col {
  height: 504px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.quote-ticker-track {
  animation: ticker-up var(--ticker-speed, 18s) linear infinite;
  will-change: transform;
}

.quote-ticker:hover .quote-ticker-track {
  animation-play-state: paused;
}

@keyframes ticker-up {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* 线感：无填充、无边框，仅一条暖橙发丝线分隔 */
.ticker-item {
  min-height: 132px;
  padding: 30px 2px 28px;
  border-bottom: 1px solid rgba(164, 81, 52, 0.16);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: border-color var(--transition);
}

/* 折叠相邻发丝线 → 循环无缝（误差 < 1px，肉眼不可见） */
.ticker-item + .ticker-item { margin-top: -1px; }
.ticker-item:last-child { border-bottom-width: 1px; }

.ticker-item:hover { background: transparent; border-color: rgba(164, 81, 52, 0.45); }

/* 等宽小标签：弃药丸底，纯暖橙文字 + 宽字距（编辑式 eyebrow） */
.ticker-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--accent-warm);
  background: none;
  padding: 0;
  border-radius: 0;
  margin-bottom: 14px;
}

/* 衬线大字金句 */
.ticker-text {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.72;
  color: var(--text);
  margin-bottom: 12px;
  transition: color var(--transition);
}
.ticker-text .hl { color: var(--accent-warm); font-weight: 600; }

.ticker-author {
  font-size: 12.5px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.ticker-item:hover .ticker-text { color: var(--accent-warm); }

/* 无障碍：减少动效偏好下暂停流动 */
@media (prefers-reduced-motion: reduce) {
  .quote-ticker-track { animation: none; }
}

.progress-item[role="button"] {
  width: 100%;
  text-align: left;
}

.progress-item[role="button"]:focus-visible {
  position: relative;
  z-index: 2;
  outline-offset: -2px;
}





/* ===== Phase 0：协作心法引导区入口卡（路线包课程化） =====
   复用站点既有令牌（--panel / --border-light / --accent-warm / --surface-hover /
   --shadow-card-hover / --radius-lg / --font-mono / --label-track），仅作克制呈现：
   暖橙左边线 + 悬停轻浮，无常驻辉光、无移动端断点。 */
.mindset-feature {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 28px;
  margin-top: 44px;
  padding: 30px 34px;
  background: var(--panel);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--accent-warm);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.mindset-feature:hover {
  background: var(--surface-hover);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}
.mindset-feature__icon {
  width: 52px; height: 52px;
  color: var(--accent-warm);
  stroke: currentColor; stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.mindset-feature__body h4 {
  font-family: var(--font-serif);
  font-size: 20px; font-weight: 600;
  letter-spacing: -0.01em; margin-bottom: 6px;
}
.mindset-feature__body p {
  font-size: 14px; color: var(--text-muted);
  line-height: 1.82; max-width: 640px;
}
.mindset-feature__go {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: var(--label-track); text-transform: uppercase;
  color: var(--accent-warm-ink);
  white-space: nowrap;
}
.mindset-feature__go .arrow { transition: transform var(--transition); }
.mindset-feature:hover .mindset-feature__go .arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}