/* ==========================================================================
   日照知创未来AI应用创新联盟 · 官网样式
   视觉方向：日出海岸 · 产业协作（设计.md V4.2）
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root {
  /* ---- Sea（深海蓝 · 权威色）---- */
  --color-sea-900: #0A2A3F;   /* Hero，最沉 */
  --color-sea-800: #0B2E44;   /* 页脚 / CTA 区块 */
  --color-sea-700: #0F4C6E;   /* 主色 */
  --color-sea-500: #1D7AA6;
  --color-sea-100: #D6E7EF;
  --color-sea-50:  #EAF3F7;

  /* ---- Sun（日光橙 · 行动色）---- */
  --color-sun-500: #EA580C;    /* 装饰色：禁止承载白字 */
  --color-sun-600: #C2410C;    /* 可承载白字 */
  --color-sun-700: #A3350A;
  --color-sand-100: #F1E9DD;

  /* ---- Pine（海松绿 · 公益/专家身份色）---- */
  --color-pine-700: #1F6F5C;
  --color-pine-500: #2C8873;
  --color-pine-100: #CFE2DC;
  --color-pine-50:  #E6F0ED;

  /* ---- Semantic ---- */
  --color-success-700: #2F6B4F;
  --color-warning-700: #92400E;
  --color-danger-700:  #A3231F;
  --color-danger-600:  #C0392B;
  --color-info-700:    #0F4C6E;
  --color-neutral-700: #5C6B76;

  /* ---- Neutral（暖调 · Stone 系）---- */
  --color-ink:           #1C1917;
  --color-text:          #44403C;
  --color-text-muted:    #57534E;
  --color-text-faint:    #78716C;
  --color-link:          #0B5A85;
  --color-link-hover:    #0B2E44;
  --color-border:        #E7E0D6;   /* 结构性分隔线（表格/规格表/FAQ）*/
  --color-border-strong: #78716C;   /* 控件描边（≥3:1）*/
  --color-surface:       #FFFFFF;
  --color-canvas:        #FCFAF6;   /* 页面底（暖白 · 纸张感）*/
  --color-canvas-alt:    #F5F0E8;   /* 交替底（暖沙）*/

  /* ---- Chart ---- */
  --chart-1: #0F4C6E; --chart-2: #1D7AA6; --chart-3: #C2410C;
  --chart-4: #1F6F5C; --chart-5: #8C6D4F; --chart-muted: #8C8378;

  /* ---- Type ---- */
  --font-sans: "HarmonyOS Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-num: "Inter", "HarmonyOS Sans SC", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);

  /* ---- Icon 光学规格 ---- */
  --icon-size-lg: 20px; --icon-stroke-lg: 1.5;
  --icon-size-md: 18px; --icon-stroke-md: 1.6;
  --icon-size-sm: 16px; --icon-stroke-sm: 1.9;
  --icon-size-xs: 14px; --icon-stroke-xs: 2;

  /* ---- Card density ---- */
  --card-pad-compact: 20px;
  --card-pad: 24px;
  --card-pad-feature: 32px;

  /* ---- Space ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --space-24: 96px; --space-32: 128px;

  /* ---- Radius ---- */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --radius-xl: 16px; --radius-full: 999px;

  /* ---- Shadow（暖近黑 · 近层 + 远层双阴影）---- */
  --shadow-xs: 0 1px 2px rgba(28, 25, 23, .05), 0 1px 1px rgba(28, 25, 23, .03);
  --shadow-sm: 0 2px 4px rgba(28, 25, 23, .05), 0 1px 2px rgba(28, 25, 23, .04);
  --shadow-md: 0 6px 16px rgba(28, 25, 23, .08), 0 2px 6px rgba(28, 25, 23, .05);
  --shadow-lg: 0 16px 40px rgba(28, 25, 23, .12), 0 4px 12px rgba(28, 25, 23, .06);

  /* ---- Layout & Motion ---- */
  --container: 1200px;
  --nav-h: 72px;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
}

/* ---------- 2. 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: .01em;
  color: var(--color-text);
  background: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  color: var(--color-ink);
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.4;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: var(--color-link); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--color-link-hover); }
:focus-visible { outline: 2px solid var(--color-sea-700); outline-offset: 2px; border-radius: var(--radius-sm); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 20px; background: var(--color-surface); color: var(--color-sea-700);
  border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

/* 正文内链接：下划线从左展开 */
.content-block a,
.faq__a a,
.aside-card a,
.compliance a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(11, 90, 133, .32);
  transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}
.content-block a:hover,
.faq__a a:hover,
.aside-card a:hover { text-decoration-color: currentColor; }

/* ---------- 3. 布局 ---------- */
.container { width: 100%; max-width: calc(var(--container) + 128px); margin: 0 auto; padding: 0 64px; }
.section { padding: 72px 0; }
.section--tight { padding: 48px 0; }
.section--canvas { background: var(--color-canvas); }
.section--alt { background: var(--color-canvas-alt); }

.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: 32px; line-height: 44px; margin-bottom: 12px; }
.section-head p { color: var(--color-text-muted); font-size: 17px; line-height: 30px; }
.eyebrow {
  display: block; margin-bottom: 12px;
  font-size: 13px; font-weight: 600; letter-spacing: .12em;
  color: var(--color-sea-700);
}
/* 内页区块标题（无序号锚点时）：eyebrow 前加品牌短横线，与首页编号语言呼应 */
.section-head:not(:has(.section-index)) .eyebrow {
  display: flex; align-items: center; gap: 8px;
}
.section-head:not(:has(.section-index)) .eyebrow::before {
  content: ""; width: 3px; height: 14px; border-radius: 2px;
  background: var(--color-sun-500); flex-shrink: 0;
}

/* 区块编号锚点：短横线 + 序号（替代长横条） */
.section-index {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 600; color: var(--color-sun-600);
}
.section-index::before { content: ""; width: 3px; height: 14px; background: var(--color-sun-500); border-radius: 2px; }
.section-index + .eyebrow { margin-bottom: 10px; }

.text-muted { color: var(--color-text-muted); }

/* ---------- 4. 顶部导航 ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: rgba(252, 250, 246, .94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  transition: height var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.site-header.is-compact { height: 60px; box-shadow: var(--shadow-sm); }
.site-header .container { display: flex; align-items: center; height: 100%; gap: 32px; }

.brand { display: flex; align-items: center; gap: 12px; color: var(--color-ink); flex-shrink: 0; }
.brand:hover { color: var(--color-ink); text-decoration: none; }
.brand__mark {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--radius-md);
  background: url("../logo-mark.png") center / contain no-repeat;
  color: transparent; font-size: 0; letter-spacing: 0;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.25; }
.brand__name { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.brand__sub { font-size: 11px; color: var(--color-text-muted); letter-spacing: .06em; }

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__item { position: relative; }
.nav__link {
  display: block; padding: 8px 14px; border-radius: var(--radius-md);
  font-size: 15px; color: var(--color-text);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav__link:hover { background: var(--color-sea-50); color: var(--color-sea-700); text-decoration: none; }
.nav__link[aria-current="page"] { color: var(--color-sea-700); font-weight: 600; }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px;
  background: var(--color-sea-700); border-radius: 2px;
}

.header__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.menu-toggle {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-surface); cursor: pointer;
}

.mobile-panel {
  position: fixed; inset: 0; z-index: 60; display: none;
  background: var(--color-canvas); padding: 24px 20px 40px; overflow-y: auto;
}
.mobile-panel.is-open { display: block; }
.mobile-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.mobile-panel__close {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-surface); cursor: pointer;
}
.mobile-panel__join { display: grid; gap: 12px; margin-bottom: 24px; }
.mobile-panel__nav a {
  display: block; padding: 14px 4px; font-size: 17px; color: var(--color-ink);
  border-bottom: 1px solid var(--color-border);
}

/* ---------- 5. 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px;
  border: 1px solid transparent; border-radius: var(--radius-md);
  font-size: 16px; font-weight: 500; white-space: nowrap; cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn--lg { height: 56px; padding: 0 32px; }
.btn--sm { height: 40px; padding: 0 16px; font-size: 15px; }
.btn--block { width: 100%; }

/* 箭头微交互 */
.btn svg { transition: transform var(--dur-fast) var(--ease); }
.btn:hover svg { transform: translateX(2px); }
.btn--on-dark:hover svg, .btn--light:hover svg { transform: translateX(2px); }

.btn--accent { background: var(--color-sun-600); color: #fff; }
.btn--accent:hover { background: var(--color-sun-700); color: #fff; }
.btn--primary { background: var(--color-sea-700); color: #fff; }
.btn--primary:hover { background: var(--color-sea-900); color: #fff; }
.btn--secondary { background: var(--color-surface); border-color: var(--color-sea-700); color: var(--color-sea-700); }
.btn--secondary:hover { background: rgba(15, 76, 110, .07); border-color: var(--color-sea-900); color: var(--color-sea-900); }
.btn--ghost { background: transparent; color: var(--color-sea-700); }
.btn--ghost:hover { background: rgba(15, 76, 110, .08); color: var(--color-sea-900); }
.btn--link { height: auto; padding: 0; background: none; color: var(--color-link); }
.btn--link:hover { text-decoration: underline; }
.btn--on-dark { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.btn--on-dark:hover { background: rgba(255, 255, 255, .14); border-color: #fff; color: #fff; }
.btn--light { background: #fff; border-color: #fff; color: var(--color-sea-900); }
.btn--light:hover { background: var(--color-canvas-alt); border-color: var(--color-canvas-alt); color: var(--color-sea-900); }

.btn[disabled], .btn.is-disabled {
  background: #D8D2C9; border-color: transparent; color: #8C8378;
  cursor: not-allowed; transform: none;
}
.btn.is-loading { pointer-events: none; }
.btn.is-loading::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 6. 卡片（细描边平面面板 · 无阴影 · 不抬升） ---------- */
.card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--card-pad);
  transition: border-color 220ms var(--ease), background-color 220ms var(--ease);
}
/* 顶部日光橙强调线：hover 从左展开 */
.card::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--color-sun-500), var(--color-sun-600));
  border-radius: 2px 2px 0 0;
  transform: scaleX(0); transform-origin: left;
  transition: transform 280ms var(--ease);
  z-index: 1;
}
.card--compact { padding: var(--card-pad-compact); }
.card--lg { padding: var(--card-pad-feature); }
.card--hover:hover { border-color: rgba(15, 76, 110, .35); background-color: #FBFBFB; }
.card--hover:hover::before { transform: scaleX(1); }
.card h3 { font-size: 18px; line-height: 28px; margin-bottom: 8px; }
.card p { font-size: 15px; line-height: 26px; color: var(--color-text-muted); }
.card__foot { margin-top: 20px; }

.card--link { position: relative; display: block; color: inherit; }
.card--link:hover { color: inherit; text-decoration: none; }
/* 右下角箭头：hover 淡入（仅 card--link） */
.card--link::after {
  content: ""; position: absolute; bottom: 18px; right: 18px;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F4C6E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 13px;
  opacity: 0; transform: translate(-3px, 3px);
  transition: opacity 200ms var(--ease), transform 280ms var(--ease), border-color 200ms var(--ease);
}
.card--link:hover::after { opacity: 1; transform: translate(0, 0); border-color: var(--color-sea-700); }

/* ---------- 6b. 开放式展示区（编辑排版 · 无框） ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--color-border);
}
.feature-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.feature { padding: 32px 32px 28px 0; color: inherit; }
.feature + .feature { padding-left: 32px; border-left: 1px solid var(--color-border); }
/* 每行第一列去掉左分隔（base 规则只对纯 4 列生效，避免泄漏到 --3/--2） */
.feature-grid:not(.feature-grid--3):not(.feature-grid--2) .feature:nth-child(4n+1) { border-left: 0; padding-left: 0; }
.feature-grid--3 .feature:nth-child(3n+1) { border-left: 0; padding-left: 0; }
.feature-grid--2 .feature:nth-child(2n+1) { border-left: 0; padding-left: 0; }
/* 跨行的顶部横线 */
.feature-grid:not(.feature-grid--3):not(.feature-grid--2) .feature:nth-child(n+5) { border-top: 1px solid var(--color-border); }
.feature-grid--3 .feature:nth-child(n+4) { border-top: 1px solid var(--color-border); }
.feature-grid--2 .feature:nth-child(n+3) { border-top: 1px solid var(--color-border); }

.feature .card__icon { margin-bottom: 20px; }
.feature h3 { font-size: 19px; line-height: 28px; margin-bottom: 10px; color: var(--color-ink); }
.feature p { font-size: 15px; line-height: 26px; color: var(--color-text-muted); }

/* 编号版（业务方向） */
.feature--numbered { padding-top: 28px; }
.feature__index {
  display: block; margin-bottom: 16px;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 600; color: var(--color-sun-600);
}
.feature--link { text-decoration: none; }
.feature--link h3 { transition: color var(--dur-fast) var(--ease); }
.feature--link:hover h3 { color: var(--color-sea-700); }
.feature__arrow {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px; font-size: 14px; font-weight: 500; color: var(--color-link);
}
.feature__arrow svg { width: 15px; height: 15px; stroke-width: 2; transition: transform var(--dur-fast) var(--ease); }
.feature--link:hover .feature__arrow { color: var(--color-link-hover); }
.feature--link:hover .feature__arrow svg { transform: translateX(3px); }

/* 服务列表（services 页） */
.service {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  padding: 40px 0; border-bottom: 1px solid var(--color-border);
}
.service .card__icon { margin-bottom: 0; }
.service h2 { font-size: 24px; line-height: 34px; margin: 20px 0 12px; }
.service__desc { font-size: 15px; line-height: 26px; color: var(--color-text-muted); margin-bottom: 20px; }
.service__items .matrix__label { margin: 0 0 12px; }
.service__items ul { display: grid; gap: 12px; font-size: 15px; line-height: 26px; color: var(--color-text); }
.service .matrix__list { margin-bottom: 8px; }

/* 成员矩阵 / 背书：开放式 */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--color-border);
}
.showcase-grid--2 { grid-template-columns: 3fr 2fr; }
.showcase { padding: 36px 32px 24px 0; }
.showcase + .showcase {
  padding-left: 32px;
  border-left: 1px solid var(--color-border);
}
.showcase__head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.showcase__head .card__icon { margin-bottom: 0; flex-shrink: 0; }
.showcase__title { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--color-ink); margin-bottom: 2px; }
.showcase__role { font-size: 14px; color: var(--color-text-muted); }
.showcase .matrix__list { margin: 18px 0 12px; }
.showcase .matrix__count { margin-bottom: 14px; }

@media (max-width: 1023px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid--2 { grid-template-columns: 1fr; }
  .feature-grid .feature:nth-child(2n+1),
  .feature-grid--3 .feature:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .feature-grid .feature:nth-child(n+3),
  .feature-grid--3 .feature:nth-child(n+3) { border-top: 1px solid var(--color-border); }
  .service { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; }
  .showcase-grid { grid-template-columns: 1fr; }
  .showcase { padding: 28px 0; }
  .showcase + .showcase { padding-left: 0; border-left: 0; border-top: 1px solid var(--color-border); }
}
@media (max-width: 767px) {
  .feature-grid, .feature-grid--3, .feature-grid--2 { grid-template-columns: 1fr; }
  .feature { padding: 26px 0; }
  .feature + .feature { padding-left: 0; border-left: 0; }
  .feature-grid .feature:nth-child(n+2),
  .feature-grid--3 .feature:nth-child(n+2),
  .feature-grid--2 .feature:nth-child(n+2) { border-top: 1px solid var(--color-border); }
}

/* ---------- 7. 图标系统（描边容器 · 光学规格 + 色相/形状编码） ---------- */
.card__icon {
  width: 48px; height: 48px; margin-bottom: 18px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: transparent;
  border: 1px solid rgba(15, 76, 110, .22);
  color: var(--color-sea-700);
  transition: background-color 280ms var(--ease), color 280ms var(--ease), border-color 280ms var(--ease);
}
.card__icon svg { width: 22px; height: 22px; stroke-width: var(--icon-stroke-lg); }

/* 形状编码 */
.card__icon--sq { border-radius: 8px; }
.card__icon--soft { border-radius: 14px; }
.card__icon--circle { border-radius: 50%; }

/* 色相编码 */
.card__icon--sea { color: var(--color-sea-700); border-color: rgba(15, 76, 110, .22); }
.card__icon--cyan { color: var(--color-sea-500); border-color: rgba(29, 122, 166, .26); }
.card__icon--pine { color: var(--color-pine-700); border-color: rgba(31, 111, 92, .26); }
.card__icon--sun { color: var(--color-sun-600); border-color: rgba(194, 65, 12, .26); }

/* hover：描边 → 填充，图标反白 */
.card--hover:hover .card__icon--sea { background: var(--color-sea-700); color: #fff; border-color: transparent; }
.card--hover:hover .card__icon--cyan { background: var(--color-sea-500); color: #fff; border-color: transparent; }
.card--hover:hover .card__icon--pine { background: var(--color-pine-700); color: #fff; border-color: transparent; }
.card--hover:hover .card__icon--sun { background: var(--color-sun-600); color: #fff; border-color: transparent; }

/* L2 中号 */
.card__icon--sm { width: 28px; height: 28px; border-radius: 8px; margin-bottom: 0; border-width: 1px; }
.card__icon--sm svg { width: var(--icon-size-md); height: var(--icon-size-md); stroke-width: var(--icon-stroke-md); }

/* 裸图标色相 */
.icon-sea { color: var(--color-sea-700); }
.icon-cyan { color: var(--color-sea-500); }
.icon-pine { color: var(--color-pine-700); }
.icon-sun { color: var(--color-sun-600); }

/* ---------- 8. 标签与徽章 ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 8px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 500; letter-spacing: .02em; white-space: nowrap;
}
.badge--open { color: var(--color-success-700); background: rgba(47, 107, 79, .10); }
.badge--exclusive { color: var(--color-info-700); background: rgba(15, 76, 110, .10); }
.badge--soon { color: var(--color-warning-700); background: rgba(146, 64, 14, .10); }
.badge--ended { color: var(--color-neutral-700); background: var(--color-canvas-alt); }
.badge--sun { color: var(--color-sun-700); background: rgba(194, 65, 12, .10); }
.badge--pine { color: var(--color-pine-700); background: rgba(31, 111, 92, .10); }

.tag {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
  border-radius: var(--radius-sm); background: var(--color-canvas-alt);
  font-size: 13px; color: var(--color-text);
}

.pill-group { display: flex; flex-wrap: wrap; gap: 12px; }
.pill {
  height: 40px; padding: 0 20px; border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong); background: var(--color-surface);
  color: var(--color-text); font-size: 15px; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.pill:hover { border-color: var(--color-sea-700); color: var(--color-sea-700); }
.pill[aria-selected="true"],
.pill[aria-pressed="true"] { background: var(--color-sea-700); border-color: var(--color-sea-700); color: #fff; }

/* ---------- 9. 首屏 ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: 88px 0 72px;
  background: linear-gradient(180deg, var(--color-sea-900) 0%, var(--color-sea-700) 100%);
  color: #fff;
}
/* 日升半圆：升起 + 淡入（只播一次） */
.hero::before {
  content: ""; position: absolute; z-index: 0;
  width: 560px; height: 560px; border-radius: 50%;
  right: -40px; bottom: -280px;
  background: linear-gradient(180deg, var(--color-sun-500) 0%, var(--color-sun-500) 42%, var(--color-sun-600) 80%, var(--color-sun-700) 100%);
  opacity: 0; transform: translateY(24px);
  animation: sunRise 1200ms cubic-bezier(.16, .84, .3, 1) forwards;
}
@keyframes sunRise { to { opacity: 1; transform: translateY(0); } }

/* 海平线 */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .34) 30%, rgba(255, 255, 255, .34) 70%, transparent 100%);
  opacity: 0; animation: fadeIn 900ms var(--ease) 500ms forwards;
}

.hero > .container { position: relative; z-index: 1; }
.hero__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; }

/* 首屏错峰编排 */
.hero__copy > * { opacity: 0; transform: translateY(14px); animation: heroIn 420ms var(--ease) forwards; }
.hero__copy > *:nth-child(1) { animation-delay: 60ms; }
.hero__copy > *:nth-child(2) { animation-delay: 120ms; }
.hero__copy > *:nth-child(3) { animation-delay: 180ms; }
.hero__copy > *:nth-child(4) { animation-delay: 240ms; }
.hero__copy > *:nth-child(5) { animation-delay: 300ms; }
.hero__copy > *:nth-child(6) { animation-delay: 360ms; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

.hero__side { opacity: 0; animation: fadeIn 700ms var(--ease) 420ms forwards; }
@keyframes fadeIn { to { opacity: 1; } }

.hero h1 { font-size: 48px; line-height: 60px; font-weight: 700; letter-spacing: -.01em; color: #fff; margin-bottom: 20px; }
.hero__sub { font-size: 18px; line-height: 32px; color: rgba(255, 255, 255, .88); max-width: 620px; margin-bottom: 12px; }
.hero__meta { font-size: 14px; color: rgba(255, 255, 255, .72); margin-bottom: 32px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 40px; }

.hero__stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 28px;
}
.hero__stat { position: relative; padding: 24px 32px 0; border-left: 1px solid rgba(255, 255, 255, .14); }
.hero__stat:first-child { padding-left: 0; border-left: 0; }
.hero__stat::before {
  content: ""; position: absolute; top: 0; left: 32px;
  width: 24px; height: 3px; border-radius: 2px;
  background: var(--color-sun-500);
}
.hero__stat:first-child::before { left: 0; }
.hero__stat dd {
  margin: 0; display: flex; align-items: baseline;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 44px; line-height: 1; font-weight: 700; color: #fff; letter-spacing: -.02em;
}
.hero__stat dd [data-count] { font-size: inherit; font-weight: inherit; color: inherit; }
.hero__stat-unit {
  font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .66);
  margin-left: 5px; letter-spacing: 0;
}
.hero__stat dt { margin: 12px 0 0; font-size: 14px; color: rgba(255, 255, 255, .62); }

/* 首屏成员展示：白底卡片 */
.eco-card {
  background: var(--color-surface);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: 0 16px 40px rgba(10, 42, 63, .3);
}
.eco-card__title { font-size: 15px; font-weight: 600; color: var(--color-ink); margin-bottom: 4px; }
.eco-card__desc { font-size: 13px; line-height: 22px; color: var(--color-text-muted); margin-bottom: 20px; }

/* ---------- 10. 占位素材 ---------- */
.logo-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.logo-tile {
  height: 64px; border-radius: var(--radius-md);
  display: grid; place-items: center;
  font-size: 11px; letter-spacing: .05em; color: var(--color-text-faint);
  background: linear-gradient(180deg, #FFFFFF, var(--color-canvas-alt));
  border: 1px solid var(--color-border);
  transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.logo-tile:hover { border-color: rgba(15, 76, 110, .28); color: var(--color-text-muted); }

.avatar-ph {
  width: 56px; height: 56px; border-radius: var(--radius-full);
  display: grid; place-items: center; margin-bottom: 14px;
  background: transparent;
  border: 1px solid rgba(15, 76, 110, .22);
  color: var(--color-sea-700);
  font-size: 12px; font-weight: 600; flex-shrink: 0;
  transition: background-color 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease);
}
.card--hover:hover .avatar-ph { background: var(--color-sea-700); color: #fff; border-color: transparent; }

.stat-row { gap: 24px; }
.stat-card {
  position: relative;
  text-align: left; padding: 28px 28px 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.stat-card::before {
  content: ""; position: absolute; top: -1px; left: 28px; right: auto;
  width: 24px; height: 3px; border-radius: 0 0 2px 2px;
  background: var(--color-sun-500);
  transform: none;
}
.stat-card__num {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 40px; line-height: 1.1; font-weight: 700; color: var(--color-sea-700); letter-spacing: -.02em;
}
.stat-card__num span { font-size: 15px; font-weight: 500; color: var(--color-text-muted); margin-left: 2px; }
.stat-card__num [data-count] { margin-left: 0; font-size: inherit; font-weight: 700; color: inherit; }
.stat-card__label { margin-top: 12px; font-size: 14px; color: var(--color-text-muted); }

/* 成员总览页数据卡：大数字 + 单位 baseline 对齐 */
.stat-card .stat-card__num {
  display: flex; align-items: baseline;
  font-size: 52px; line-height: 1;
}
.stat-card .stat-card__num span { font-size: 16px; margin-left: 4px; }

/* 品牌活动数据（events 等开放式区域内的行内数字）：橙色锚点 */
.feature .stat-card__num { position: relative; padding-top: 14px; }
.feature .stat-card__num::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 20px; height: 3px; border-radius: 2px;
  background: var(--color-sun-500);
}

/* ---------- 11. 成员矩阵 ---------- */
.matrix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.matrix__col { display: flex; flex-direction: column; height: 100%; }
.matrix__head { padding-bottom: 20px; border-bottom: 1px solid var(--color-border); margin-bottom: 20px; }
.matrix__title { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; color: var(--color-ink); margin-bottom: 6px; }
.matrix__title svg { width: 20px; height: 20px; stroke-width: 1.5; flex-shrink: 0; }
.matrix__role { font-size: 14px; color: var(--color-text-muted); }
.matrix__label { font-size: 13px; font-weight: 600; color: var(--color-ink); margin: 20px 0 10px; }
.matrix__list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.matrix__foot { margin-top: auto; padding-top: 4px; }
.matrix__count { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--color-text-muted); }

.member-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.member-card__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.member-card__name { font-size: 17px; font-weight: 600; color: var(--color-ink); line-height: 1.5; }
.member-card__org { font-size: 13px; color: var(--color-text-muted); }
.member-card__desc {
  font-size: 14px; line-height: 24px; color: var(--color-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 48px;
}
.member-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* ---------- 12. 动态与活动 ---------- */
.dynamics { display: grid; grid-template-columns: 8fr 4fr; gap: 24px; align-items: start; }
.news-item { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--color-border); }
.news-item:last-child { border-bottom: 0; padding-bottom: 0; }
.news-item__date { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--color-text-muted); white-space: nowrap; padding-top: 2px; }
.news-item__title { font-size: 16px; font-weight: 500; color: var(--color-ink); }

.event-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.event-card__date { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--color-text-muted); }
.event-card h3 { font-size: 18px; line-height: 28px; margin-bottom: 12px; min-height: 56px; }
.event-card__meta { display: grid; gap: 6px; font-size: 14px; color: var(--color-text-muted); margin-bottom: 20px; }
.event-card__meta span { display: flex; align-items: center; gap: 6px; }
.event-card__meta svg { width: var(--icon-size-sm); height: var(--icon-size-sm); stroke-width: var(--icon-stroke-sm); flex-shrink: 0; }

/* ---------- 13. 区块说明条 ---------- */
.board-strip {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
  padding: 20px 24px; margin-bottom: 24px;
  background: var(--color-sea-50); border: 1px solid var(--color-sea-100); border-radius: var(--radius-lg);
}
.board-strip__title { font-size: 16px; font-weight: 600; color: var(--color-ink); margin-bottom: 4px; }
.board-strip__desc { font-size: 14px; color: var(--color-text); max-width: 760px; }
.board-strip__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.board-strip .tag { background: rgba(255, 255, 255, .8); }

/* ---------- 14. 流程 / 时间线 ---------- */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.step { position: relative; padding: 24px 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.step__no {
  width: 30px; height: 30px; border-radius: var(--radius-full); margin-bottom: 12px;
  display: grid; place-items: center; background: var(--color-sea-100); color: var(--color-sea-700);
  font-family: var(--font-num); font-size: 14px; font-weight: 700;
}
.step__title { font-size: 15px; font-weight: 600; color: var(--color-ink); }
.step__desc { font-size: 13px; color: var(--color-text-muted); line-height: 22px; }

.timeline { position: relative; padding-left: 28px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--color-border); }
.timeline__item { position: relative; padding-bottom: 28px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: ""; position: absolute; left: -28px; top: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--color-surface); border: 2px solid var(--color-border-strong);
}
.timeline__item.is-done::before { background: var(--color-sea-700); border-color: var(--color-sea-700); }
.timeline__phase { font-size: 16px; font-weight: 600; color: var(--color-ink); }
.timeline__desc { font-size: 14px; color: var(--color-text-muted); }

/* ---------- 15. 表格 ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
table.data { width: 100%; border-collapse: collapse; min-width: 640px; }
table.data th, table.data td { padding: 16px 20px; text-align: left; font-size: 15px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
table.data thead th { background: var(--color-canvas-alt); font-weight: 600; color: var(--color-ink); font-size: 14px; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td:first-child { font-weight: 500; color: var(--color-ink); }

.kv { display: grid; grid-template-columns: 180px 1fr; gap: 12px 24px; }
.kv dt { font-weight: 600; color: var(--color-ink); font-size: 15px; }
.kv dd { margin: 0; font-size: 15px; }

/* ---------- 15.1 信息规格表（Spec Sheet，见设计文档 12.5） ---------- */
.idcard {
  display: flex; align-items: center; gap: 20px;
  padding: 28px; margin-bottom: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-sun-500);
  border-radius: var(--radius-lg);
}
.idcard__mark {
  width: 56px; height: 56px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid rgba(15, 76, 110, .22);
  color: var(--color-sea-700);
}
.idcard__mark svg { width: 30px; height: 30px; stroke-width: 1.6; }
.idcard__label {
  display: block; font-size: 13px; color: var(--color-text-muted);
  letter-spacing: .04em; margin-bottom: 4px;
}
.idcard__name {
  font-size: 28px; line-height: 38px; font-weight: 700; color: var(--color-ink);
  letter-spacing: -.01em; margin-bottom: 6px;
}
.idcard__name-en {
  font-family: var(--font-num); font-size: 12px; letter-spacing: .08em;
  color: var(--color-text-muted);
}

.specsheet {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.specsheet__item {
  display: flex; flex-direction: column; gap: 10px;
  padding: 28px 24px;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--dur-base) var(--ease);
}
.specsheet__item:nth-child(2n) { border-right: 0; }
.specsheet__item:nth-last-child(1),
.specsheet__item:nth-last-child(2) { border-bottom: 0; }
.specsheet__item:hover { background: var(--color-canvas); }

.specsheet__icon {
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(15, 76, 110, .22);
  color: var(--color-sea-700);
  margin-bottom: 2px;
}
.specsheet__icon svg { width: 18px; height: 18px; stroke-width: var(--icon-stroke-md); }
.specsheet__icon--sea { color: var(--color-sea-700); border-color: rgba(15, 76, 110, .22); }
.specsheet__icon--cyan { color: var(--color-sea-500); border-color: rgba(29, 122, 166, .26); }
.specsheet__icon--pine { color: var(--color-pine-700); border-color: rgba(31, 111, 92, .26); }
.specsheet__icon--sun { color: var(--color-sun-600); border-color: rgba(194, 65, 12, .26); }
.specsheet__icon--muted { color: var(--color-neutral-700); border-color: rgba(87, 83, 78, .22); }

.specsheet__label {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--color-text-muted); letter-spacing: .02em;
}
.specsheet__value {
  font-size: 16px; line-height: 27px; color: var(--color-ink); font-weight: 500;
}
.specsheet__value em { font-style: normal; color: var(--color-sea-700); }

.specsheet__item--meta .specsheet__value {
  color: var(--color-text-muted); font-weight: 400;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  .idcard { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px 20px; }
  .idcard__name { font-size: 22px; line-height: 30px; }
  .specsheet { grid-template-columns: 1fr; }
  .specsheet__item { padding: 22px 20px; border-right: 0; }
  .specsheet__item:nth-last-child(1),
  .specsheet__item:nth-last-child(2) { border-bottom: 1px solid var(--color-border); }
  .specsheet__item:last-child { border-bottom: 0; }
}

/* ---------- 16. 表单 ---------- */
.form { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; }
.field__label { font-size: 15px; font-weight: 500; color: var(--color-ink); }
.field__label .req { color: var(--color-danger-700); margin-left: 2px; }
.field__help { font-size: 13px; color: var(--color-text-muted); }
.field__error { font-size: 13px; color: var(--color-danger-700); display: none; }
.field.has-error .field__error { display: block; }
.field.has-error .input, .field.has-error select, .field.has-error textarea { border-color: var(--color-danger-600); }

.input, select, textarea {
  width: 100%; padding: 10px 14px; min-height: 44px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text);
  font-family: inherit; font-size: 15px; line-height: 24px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder, textarea::placeholder { color: #8C8378; }
.input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--color-sea-700); box-shadow: 0 0 0 3px rgba(15, 76, 110, .14);
}
textarea { min-height: 128px; resize: vertical; }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--color-text); }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--color-sea-700); flex-shrink: 0; }

.form-note {
  padding: 16px 20px; border-radius: var(--radius-md);
  background: var(--color-canvas-alt); border: 1px solid var(--color-border);
  font-size: 13px; line-height: 22px; color: var(--color-text-muted);
}
.form-note strong { color: var(--color-ink); font-weight: 600; }

.form-steps { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: start; }
.form-card { padding: var(--card-pad-feature); }

.radio-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.radio-card {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 16px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-surface); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.radio-card:hover { border-color: var(--color-sea-700); background: var(--color-sea-50); }
.radio-card.is-checked { border-color: var(--color-sea-700); background: var(--color-sea-50); box-shadow: inset 0 0 0 1px var(--color-sea-700); }
.radio-card input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--color-sea-700); flex-shrink: 0; }
.radio-card__title { display: block; font-size: 15px; font-weight: 600; color: var(--color-ink); }
.radio-card__desc { display: block; font-size: 13px; line-height: 20px; color: var(--color-text-muted); }

.chip-group { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-check { position: relative; }
.chip-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-check span {
  display: inline-flex; align-items: center; height: 40px; padding: 0 16px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-full);
  background: var(--color-surface); font-size: 14px; color: var(--color-text); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.chip-check span:hover { border-color: var(--color-sea-700); color: var(--color-sea-700); }
.chip-check input:checked + span { background: var(--color-sea-700); border-color: var(--color-sea-700); color: #fff; }
.chip-check input:focus-visible + span { outline: 2px solid var(--color-sea-700); outline-offset: 2px; }

.file-input { font-size: 14px; color: var(--color-text-muted); }
.file-input::file-selector-button {
  margin-right: 12px; height: 40px; padding: 0 16px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-ink); font: inherit; cursor: pointer;
}
.file-input::file-selector-button:hover { border-color: var(--color-sea-700); color: var(--color-sea-700); }

.aside-card { padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.aside-card h3 { font-size: 16px; margin-bottom: 12px; }
.aside-card ul { display: grid; gap: 10px; font-size: 14px; line-height: 24px; color: var(--color-text); }
.aside-card li { display: flex; gap: 8px; }
.aside-card li svg { width: var(--icon-size-sm); height: var(--icon-size-sm); stroke-width: 2; flex-shrink: 0; margin-top: 4px; color: var(--color-sun-600); }
.aside-card--sea { background: var(--color-sea-50); box-shadow: none; border: 1px solid var(--color-sea-100); }

@media (max-width: 767px) { .radio-row { grid-template-columns: 1fr; } }

/* ---------- 17. FAQ ---------- */
.faq { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__item:last-child { border-bottom: 0; }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; background: none; border: 0; cursor: pointer;
  font-size: 16px; font-weight: 500; color: var(--color-ink); text-align: left;
}
.faq__q:hover { background: var(--color-canvas); }
.faq__q svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform var(--dur-base) var(--ease); color: var(--color-sun-600); }
.faq__item.is-open .faq__q svg { transform: rotate(180deg); }
.faq__a { display: none; padding: 0 24px 20px; font-size: 15px; line-height: 26px; color: var(--color-text-muted); }
.faq__item.is-open .faq__a { display: block; }

/* ---------- 18. 合规 ---------- */
.compliance {
  padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-canvas-alt);
}
.compliance__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.compliance__head svg { width: 24px; height: 24px; stroke-width: 1.75; color: var(--color-sun-600); flex-shrink: 0; }
.compliance__head h3 { font-size: 20px; line-height: 30px; }
.compliance ol { counter-reset: cp; display: grid; gap: 12px; }
.compliance li {
  position: relative; padding-left: 30px; font-size: 15px; line-height: 26px; color: var(--color-text);
  counter-increment: cp;
}
.compliance li::before {
  content: counter(cp); position: absolute; left: 0; top: 3px;
  width: 20px; height: 20px; border-radius: var(--radius-full);
  display: grid; place-items: center;
  background: var(--color-sea-700); color: #fff; font-family: var(--font-num); font-size: 12px; font-weight: 700;
}

/* ---------- 19. 二级导航 / 长文 ---------- */
.subnav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.subnav a {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-full);
  background: var(--color-surface); color: var(--color-text); font-size: 15px;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.subnav a:hover { border-color: var(--color-sea-700); color: var(--color-sea-700); text-decoration: none; }
.subnav a[aria-current="page"] { background: var(--color-sea-700); border-color: var(--color-sea-700); color: #fff; }

.content-block { max-width: 880px; }
.content-block > p { margin-bottom: 16px; }
.content-block h2 { font-size: 26px; line-height: 38px; margin: 0 0 20px; }
.content-block h3 { font-size: 19px; line-height: 28px; margin: 32px 0 12px; }

/* ---------- 20. 底部 CTA ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--color-sea-800); color: #fff; padding: 72px 0; }
.cta-band::before {
  content: ""; position: absolute; z-index: 0;
  width: 480px; height: 480px; border-radius: 50%;
  right: 4%; bottom: -240px;
  background: linear-gradient(180deg, var(--color-sun-500) 0%, var(--color-sun-500) 42%, var(--color-sun-600) 80%, var(--color-sun-700) 100%);
}
.cta-band::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .28) 30%, rgba(255, 255, 255, .28) 70%, transparent 100%);
}
.cta-band > .container { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; font-size: 30px; line-height: 42px; margin-bottom: 12px; }
.cta-band p { color: rgba(255, 255, 255, .82); margin-bottom: 28px; }
.cta-band__row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* ---------- 21. 页脚 ---------- */
.site-footer { background: var(--color-sea-800); color: #D6DCE0; padding-top: 64px; }
.site-footer a { color: #D6DCE0; }
.site-footer a:hover { color: #fff; text-decoration: none; }
.footer__grid { display: grid; grid-template-columns: 4fr 2fr 3fr 3fr; gap: 32px; padding-bottom: 48px; }
.footer__title { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 16px; }
.footer__list { display: grid; gap: 10px; font-size: 14px; }
.footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.site-footer .brand__mark { background-color: #FFFFFF; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
.footer__brand-name { font-size: 16px; font-weight: 700; color: #fff; }
.footer__desc { font-size: 14px; line-height: 24px; }

.compliance-bar { border-top: 1px solid rgba(255, 255, 255, .14); padding: 24px 0 32px; }
.compliance-bar p { font-size: 12px; line-height: 22px; color: #9FB0BA; }
.compliance-bar p + p { margin-top: 6px; }
.compliance-bar a { color: #C7D3DA; }

/* ---------- 22. 状态：骨架 / 交叉淡入 / 空态 ---------- */
.skeleton {
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, #F5F0E8 25%, #E7E0D6 37%, #F5F0E8 63%);
  background-size: 400% 100%; animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.skeleton-card { height: 200px; border-radius: var(--radius-lg); }
.is-hidden { display: none !important; }

/* 交叉淡入：骨架 160ms 淡出 → 内容延迟 80ms 后 220ms 淡入 */
[data-list-content] { opacity: 0; }
.is-faded-in { animation: contentIn 220ms var(--ease) 80ms forwards; }
@keyframes contentIn { from { opacity: 0; } to { opacity: 1; } }
.skeleton.is-fading { animation: skeletonOut 160ms var(--ease) forwards; }
@keyframes skeletonOut { to { opacity: 0; } }

/* 空态：品牌最小符号 */
.empty {
  text-align: center; padding: 64px 24px;
  border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-canvas);
}
.empty__mark { margin: 0 auto 20px; width: 72px; height: 44px; color: var(--color-sun-500); animation: emptyIn 600ms var(--ease) forwards; }
@keyframes emptyIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.empty__title { font-size: 17px; font-weight: 600; color: var(--color-ink); margin-bottom: 6px; }
.empty__desc { font-size: 14px; color: var(--color-text-muted); margin-bottom: 20px; }

/* ---------- 23. 面包屑 / 页首 ---------- */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--color-text-muted); margin-bottom: 16px; }
.breadcrumb li::after { content: "/"; margin-left: 8px; color: var(--color-border-strong); }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb [aria-current="page"] { color: var(--color-text-muted); }

.page-head { padding: 56px 0 40px; background: var(--color-canvas-alt); border-bottom: 1px solid var(--color-border); }
.page-head h1 { position: relative; padding-top: 18px; font-size: 40px; line-height: 52px; margin-bottom: 12px; }
.page-head h1::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 32px; height: 3px; border-radius: 2px;
  background: var(--color-sun-500);
}
.page-head p { font-size: 17px; color: var(--color-text-muted); max-width: 720px; }

/* ---------- 24. 进场动效三档 ---------- */
/* A 区块：上移 16px */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
/* B 卡片组：上移 12px + 错峰 */
.reveal-card { opacity: 0; transform: translateY(12px); transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
/* C 文字块：仅淡入 */
.reveal-text { opacity: 0; transition: opacity 240ms var(--ease); }

.reveal.is-in,
.reveal-card.is-in,
.reveal-text.is-in { opacity: 1; transform: none; }

/* ---------- 25. 返回顶部 ---------- */
.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 40;
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: var(--radius-full); border: 1px solid var(--color-border-strong);
  background: var(--color-surface); color: var(--color-sea-700);
  box-shadow: var(--shadow-md); cursor: pointer;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease), visibility var(--dur-base) var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top svg { width: 20px; height: 20px; transition: transform var(--dur-fast) var(--ease); }
.to-top:hover svg { transform: translateY(-2px); }

/* ---------- 26. 滑动提示（仅移动端） ---------- */
.scroll-hint { display: none; }
@media (max-width: 767px) {
  .scroll-hint {
    display: flex; align-items: center; gap: 6px;
    margin-top: 16px; font-size: 13px; color: var(--color-text-muted);
  }
  .scroll-hint svg { width: 16px; height: 16px; stroke-width: 1.9; }
  .matrix--scroll, .join-scroll {
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
  }
}

/* ---------- 27. 响应式 ---------- */
@media (max-width: 1023px) {
  .container { max-width: none; padding: 0 32px; }
  .nav, .header__actions .btn { display: none; }
  .menu-toggle { display: inline-flex; }
  .header__actions { margin-left: auto; }

  .section { padding: 56px 0; }
  .hero { padding: 64px 0 56px; }
  .hero::before { width: 420px; height: 420px; right: -60px; bottom: -210px; }
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero h1 { font-size: 34px; line-height: 44px; }
  .hero__actions { flex-direction: column; align-items: stretch; max-width: 480px; }
  .hero__actions .btn { width: 100%; }

  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .matrix, .member-grid { grid-template-columns: 1fr; }
  .dynamics { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subnav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; margin: 24px -32px 0; padding-left: 32px; padding-right: 32px; }
  .subnav a { flex: 0 0 auto; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-steps { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 767px) {
  .container { padding: 0 20px; }
  .section { padding: 48px 0; }
  .section-head { margin-bottom: 28px; }
  .section-head h2 { font-size: 24px; line-height: 34px; }

  .hero { padding: 48px 0 40px; }
  .hero::before { width: 280px; height: 280px; right: -60px; bottom: -140px; }
  .hero h1 { font-size: 28px; line-height: 40px; }
  .hero__sub { font-size: 16px; line-height: 28px; }
  .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .hero__stat { padding: 20px 0 0; border-left: 0; }
  .hero__stat::before { left: 0; }
  .hero__stat dd { font-size: 32px; }
  .eco-card { padding: 20px; }

  .page-head { padding: 40px 0 32px; }
  .page-head h1 { font-size: 28px; line-height: 40px; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .stat-card { padding: 24px 24px 20px; }
  .stat-card::before { left: 24px; }
  .steps { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 24px; }
  .kv { grid-template-columns: 1fr; gap: 4px 0; }
  .kv dt { margin-top: 12px; }

  /* 三栏 → 横向滑动 */
  .matrix--scroll, .join-scroll {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%;
    gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 8px; margin: 0 -20px; padding-left: 20px; padding-right: 20px;
  }
  .matrix--scroll > *, .join-scroll > * { scroll-snap-align: start; }

  .cta-band { padding: 56px 0; }
  .cta-band::before { width: 260px; height: 260px; right: -50px; bottom: -130px; }
  .cta-band h2 { font-size: 24px; line-height: 34px; }
  .cta-band__row { flex-direction: column; align-items: stretch; }
  .cta-band__row .btn { width: 100%; }
}

/* ---------- 28. 减弱动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-card, .reveal-text,
  .hero__copy > *, .hero__side,
  [data-list-content] { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero::before, .hero::after, .cta-band::before { opacity: 1 !important; transform: none !important; animation: none !important; }
  .skeleton { animation: none !important; background: var(--color-canvas-alt); }
}