/* =========================================================
   中小学 AI 素养与创新实践平台 · 官网样式
   面向教育决策者的稳重版式：细线、留白、克制的色彩
   ========================================================= */

:root {
  /* 墨色层级 */
  --ink:        #16211d;
  --ink-2:      #3c4a45;
  --ink-3:      #6d7c76;
  --ink-4:      #97a39e;

  /* 纸面 */
  --paper:      #fbfaf7;
  --paper-2:    #f3f5f2;
  --paper-3:    #eceee9;
  --white:      #ffffff;

  /* 线 */
  --line:       #e2e7e3;
  --line-2:     #d2d9d4;

  /* 主色：教育绿（与平台产品端一致） */
  --brand:      #1f7d5f;
  --brand-deep: #14513e;
  --brand-soft: #e9f3ef;
  --brand-line: #bcdccf;

  /* 辅色：暖琥珀（提示 / 数据高亮） */
  --amber:      #b4701a;
  --amber-soft: #fbf1e2;
  --amber-line: #ecd7b3;

  /* 深色区 */
  --deep:       #10201b;
  --deep-2:     #17302a;
  --deep-line:  #2b463f;
  --deep-text:  #cfdcd7;

  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
          "Noto Sans CJK SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif CJK SC", Georgia, "Times New Roman", serif;
  --mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --radius:     14px;
  --radius-sm:  9px;
  --shell:      1180px;
  --gutter:     28px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--brand-soft); color: var(--brand-deep); }

/* ---------- 布局基元 ---------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: 104px 0; position: relative; }
.section--tight { padding: 80px 0; }
.section--paper2 { background: var(--paper-2); }
.section--white { background: var(--white); }
.section + .section.section--white,
.section--white + .section { border-top: 1px solid var(--line); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--brand);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--brand);
  opacity: .55;
}
.eyebrow--amber { color: var(--amber); }
.eyebrow--amber::before { background: var(--amber); }
.eyebrow--light { color: #8fc9b0; }
.eyebrow--light::before { background: #8fc9b0; }

.h2 {
  font-size: clamp(27px, 3.1vw, 38px);
  line-height: 1.42;
  max-width: 20em;
}
.h3 { font-size: 19px; line-height: 1.55; }

.lede {
  margin-top: 18px;
  max-width: 60ch;
  color: var(--ink-2);
  font-size: 16.5px;
  line-height: 1.95;
}

.section-head { margin-bottom: 52px; }
.section-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .9fr);
  gap: 48px;
  align-items: end;
}
.section-head--split .lede { margin-top: 0; padding-bottom: 4px; }

.note {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-3);
}

/* ---------- 按钮 ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-deep); }

.btn--ghost { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink-3); background: var(--white); }

.btn--quiet { color: var(--brand); padding-left: 4px; padding-right: 4px; }
.btn--quiet:hover { color: var(--brand-deep); }

.btn--onDark { background: #fff; color: var(--deep); }
.btn--onDark:hover { background: #e8f3ee; }
.btn--onDarkGhost { border-color: var(--deep-line); color: #e4ede9; }
.btn--onDarkGhost:hover { border-color: #6a8f83; background: rgba(255,255,255,.05); }

.btn--sm { padding: 9px 18px; font-size: 14px; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--brand);
}
.arrow-link svg { transition: transform .18s ease; }
.arrow-link:hover svg { transform: translateX(3px); }

/* ---------- 顶栏 ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(251, 250, 247, .88);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
.topbar.is-stuck { border-bottom-color: var(--line); }

.topbar__inner {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
/* 顶栏的品牌字标。写死宽高避免加载前后顶栏跳一下；contain 是为了以后换成
   非正方形的图时留白而不是把字裁掉。字标是透明底的手写字，不加圆角和阴影——
   那两样是给纯色方块用的，套在字上会切掉笔画边缘、并投出一圈灰边。 */
.brand__logo { width: 36px; height: 36px; flex-shrink: 0; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1.25; }
.brand__name { font-size: 15.5px; font-weight: 800; letter-spacing: .01em; }
.brand__sub { font-size: 11px; color: var(--ink-3); letter-spacing: .1em; font-weight: 600; }

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
  padding: 8px 13px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
  transition: color .16s ease, background .16s ease;
}
.nav a:hover { color: var(--ink); background: var(--paper-3); }
.nav a.is-active { color: var(--brand-deep); background: var(--brand-soft); }

.topbar__cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 42px; height: 42px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 17px; height: 1.6px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before { transform: translateY(-5.5px); }
.nav-toggle span::after  { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1px); }

/* ---------- 首屏 ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 84px 0 92px;
  background:
    radial-gradient(1100px 460px at 88% -8%, rgba(31,125,95,.09), transparent 62%),
    radial-gradient(760px 380px at 4% 108%, rgba(180,112,26,.07), transparent 66%),
    var(--paper);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .88fr);
  gap: 64px;
  align-items: center;
}

.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 8px;
  border: 1px solid var(--brand-line);
  background: var(--brand-soft);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-deep);
  margin-bottom: 26px;
}
.hero__tag b {
  background: var(--brand);
  color: #fff;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11.5px;
  letter-spacing: .06em;
}

.hero h1 {
  position: relative;
  z-index: 0;
  font-size: clamp(36px, 5.1vw, 60px);
  line-height: 1.28;
  letter-spacing: -.025em;
  font-weight: 800;
}
.hero h1 em {
  font-style: normal;
  color: var(--brand);
  position: relative;
  white-space: nowrap;
}
.hero h1 em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .1em;
  height: .26em;
  background: rgba(31,125,95,.14);
  border-radius: 2px;
  z-index: -1;
}

.hero__lede {
  margin-top: 26px;
  max-width: 34em;
  font-size: 17px;
  line-height: 2;
  color: var(--ink-2);
}
.hero__lede strong { color: var(--ink); font-weight: 700; }

.hero__actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.hero__meta {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: 13.5px;
  color: var(--ink-3);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero__meta span::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brand);
  opacity: .6;
}

/* 首屏右侧：算力用量示意卡 */
.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(22,33,29,.09), 0 2px 6px rgba(22,33,29,.04);
  overflow: hidden;
}
.panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--deep);
  color: #dfeae5;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}
.panel__dots { display: flex; gap: 6px; }
.panel__dots i { width: 7px; height: 7px; border-radius: 50%; background: #3d5b52; display: block; }
.panel__badge {
  font-size: 11px;
  font-weight: 700;
  color: #9ec9b8;
  border: 1px solid #33524a;
  border-radius: 999px;
  padding: 2px 9px;
  letter-spacing: .08em;
}
.panel__body { padding: 22px 20px 20px; }

.panel__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  font-size: 13.5px;
  border-bottom: 1px dashed var(--line);
}
.panel__row:last-of-type { border-bottom: 0; }
.panel__row dt { color: var(--ink-3); }
.panel__row dd { margin: 0; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

.panel__live { display: inline-flex; align-items: center; gap: 7px; color: var(--brand); }
.panel__live::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(31,125,95,.16);
}

.panel__total {
  margin-top: 16px;
  padding: 16px 18px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-sm);
}
.panel__total small { display: block; font-size: 12px; color: var(--brand-deep); font-weight: 700; letter-spacing: .06em; }
.panel__total b {
  display: block;
  margin-top: 4px;
  font-size: 34px;
  line-height: 1.2;
  color: var(--brand-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.panel__formula {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: #3f7a64;
  letter-spacing: -.01em;
}

.panel__foot {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip-xs {
  font-size: 11.5px;
  color: var(--ink-3);
  border: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: 6px;
  padding: 3px 8px;
  font-variant-numeric: tabular-nums;
}

.panel__caption {
  margin-top: 12px;
  font-size: 12px;
  color: var(--ink-4);
  text-align: right;
}

.policy-panel__claim {
  padding: 18px 18px 20px;
  border: 1px solid var(--brand-line);
  background: var(--brand-soft);
  border-radius: var(--radius-sm);
}
.policy-panel__claim small {
  display: block;
  font-size: 12px;
  color: var(--brand-deep);
  font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: 8px;
}
.policy-panel__claim b {
  display: block;
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: -.01em;
}
.policy-panel__map {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.policy-panel__map div {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  padding: 12px 13px;
}
.policy-panel__map span {
  display: block;
  font-size: 12px;
  color: var(--ink-4);
  margin-bottom: 4px;
}
.policy-panel__map b {
  display: block;
  font-size: 14px;
  color: var(--ink);
}

/* ---------- 事实条 ---------- */

.factbar {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.factbar__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.factbar__item {
  padding: 30px 26px;
  border-right: 1px solid var(--line);
}
.factbar__item:first-child { padding-left: 0; }
.factbar__item:last-child { padding-right: 0; }
.factbar__item:last-child { border-right: 0; }
.factbar__item b {
  display: block;
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.25;
  color: var(--brand-deep);
  letter-spacing: -.01em;
}
.factbar__item span {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.7;
}

/* ---------- 政策响应 / 卖点卡片 ---------- */

.policy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.policy-card {
  background: var(--paper);
  padding: 30px 26px 28px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
}
.policy-card__label {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--brand);
  letter-spacing: .08em;
  margin-bottom: 16px;
  font-weight: 700;
}
.policy-card h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.policy-card p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-2);
}
.policy-card b {
  display: block;
  margin-top: auto;
  padding-top: 18px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--brand-deep);
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.card {
  background: var(--white);
  padding: 34px 30px 32px;
  display: flex;
  flex-direction: column;
  min-height: 268px;
  transition: background .2s ease;
}
.card:hover { background: #fcfdfc; }
.card__no {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink-4);
  letter-spacing: .1em;
  margin-bottom: 16px;
}
.card__icon { color: var(--brand); margin-bottom: 14px; }
.card h3 { font-size: 18.5px; margin-bottom: 12px; }
.card p { font-size: 14.5px; line-height: 1.9; color: var(--ink-2); }
.card__foot {
  margin-top: auto;
  padding-top: 18px;
  font-size: 12.5px;
  color: var(--ink-3);
  letter-spacing: .02em;
}

/* ---------- 课程成长路径 ---------- */

.path { position: relative; }
.stage {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 40px;
  padding: 34px 0;
  border-top: 1px solid var(--line);
}
.stage:last-child { border-bottom: 1px solid var(--line); }

.stage__label { position: sticky; top: 96px; align-self: start; }
.stage__name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.stage__range {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-4);
  letter-spacing: .04em;
}
.stage__bar {
  margin-top: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--paper-3);
  overflow: hidden;
}
.stage__bar i {
  display: block;
  height: 100%;
  background: var(--brand);
  border-radius: 2px;
}

.grades { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grade {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px 20px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.grade:hover {
  border-color: var(--brand-line);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(22,33,29,.07);
}
.grade__top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.grade__num {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  color: var(--brand);
  letter-spacing: -.02em;
  flex-shrink: 0;
}
.grade__gname { font-size: 12.5px; color: var(--ink-4); letter-spacing: .1em; }
.grade h4 { font-size: 17px; margin-bottom: 8px; }
.grade p { font-size: 14px; line-height: 1.85; color: var(--ink-2); }
.grade__flag {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--amber);
  background: var(--amber-soft);
  border: 1px solid var(--amber-line);
  border-radius: 6px;
  padding: 3px 9px;
}

/* 资源包八件套 */
.kit {
  margin-top: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  padding: 32px 32px 28px;
}
.kit__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}
.kit__head h3 { font-size: 19px; }
.kit__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.kit__list li {
  background: var(--paper);
  padding: 15px 16px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.kit__list b {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--brand);
  letter-spacing: .04em;
}
.kit__list span { font-size: 14px; color: var(--ink-2); }
.kit__foot {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
}
.kit__foot .note { max-width: 58ch; }

/* ---------- 深色区（算力） ---------- */

.dark {
  background: var(--deep);
  color: #e6efeb;
  padding: 104px 0;
  position: relative;
  overflow: hidden;
}
.dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 420px at 82% 0%, rgba(47,158,126,.14), transparent 60%);
  pointer-events: none;
}
.dark .shell { position: relative; z-index: 1; }
.dark .h2 { color: #fff; }
.dark .lede { color: var(--deep-text); }
.dark .note { color: #90a49d; }

.compute {
  margin-top: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 48px;
  align-items: start;
}

.steps4 { display: grid; gap: 1px; background: var(--deep-line); border: 1px solid var(--deep-line); border-radius: var(--radius); overflow: hidden; }
.steps4 li {
  background: var(--deep-2);
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.steps4 b {
  font-family: var(--mono);
  font-size: 12px;
  color: #7fc0a6;
  padding-top: 3px;
  letter-spacing: .04em;
}
.steps4 h4 { font-size: 16px; color: #fff; margin-bottom: 5px; }
.steps4 p { font-size: 14px; color: var(--deep-text); line-height: 1.85; }

.meter {
  border: 1px solid var(--deep-line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #17322b, #132723);
  padding: 28px 26px 24px;
}
.meter__label {
  font-size: 12.5px;
  letter-spacing: .14em;
  color: #7fc0a6;
  font-weight: 700;
  margin-bottom: 14px;
}
.meter__formula {
  font-family: var(--mono);
  font-size: 14px;
  color: #cfe6dc;
  line-height: 2;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--deep-line);
}
.meter__formula em { font-style: normal; color: #ffd08a; }
.meter__eg { margin-top: 16px; }
.meter__eg span { font-size: 13px; color: #93a9a2; display: block; margin-bottom: 6px; }
.meter__eg b {
  font-size: 30px;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.meter__eg b i { font-style: normal; font-size: 15px; color: #7fc0a6; margin-left: 6px; letter-spacing: 0; }

.audit {
  margin-top: 22px;
  border: 1px solid var(--deep-line);
  border-radius: var(--radius);
  padding: 22px 24px;
  background: rgba(255,255,255,.02);
}
.audit h4 { font-size: 15px; color: #fff; margin-bottom: 14px; }
.audit ul { display: flex; flex-wrap: wrap; gap: 7px; }
.audit li {
  font-size: 12.5px;
  color: #b9cdc6;
  border: 1px solid var(--deep-line);
  border-radius: 6px;
  padding: 4px 10px;
  background: rgba(255,255,255,.02);
}
.audit p { margin-top: 14px; font-size: 13px; color: #90a49d; line-height: 1.85; }

.dark__close {
  margin-top: 48px;
  padding-top: 30px;
  border-top: 1px solid var(--deep-line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.dark__close div h4 { font-size: 15.5px; color: #fff; margin-bottom: 7px; }
.dark__close div p { font-size: 14px; color: var(--deep-text); line-height: 1.85; }

/* ---------- 双栏说明区（数据 / 治理 / 无设备） ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 60px;
  align-items: start;
}
.split--reverse { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }

.checklist { display: grid; gap: 14px; }
.checklist li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.checklist svg { color: var(--brand); margin-top: 4px; }
.checklist b { display: block; font-size: 15px; margin-bottom: 4px; }
.checklist p { font-size: 14px; color: var(--ink-2); line-height: 1.85; }

.callout {
  margin-top: 26px;
  padding: 20px 22px;
  border-left: 3px solid var(--brand);
  background: var(--brand-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.callout b { display: block; font-size: 14.5px; color: var(--brand-deep); margin-bottom: 6px; }
.callout p { font-size: 14px; color: #2d5f4d; line-height: 1.9; }

.callout--amber { border-left-color: var(--amber); background: var(--amber-soft); }
.callout--amber b { color: var(--amber); }
.callout--amber p { color: #7a5220; }

/* 授权层级图 */
.orgchart { display: grid; gap: 10px; }
.orgchart__node {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.orgchart__node[data-depth="1"] { margin-left: 0; }
.orgchart__node[data-depth="2"] { margin-left: 26px; }
.orgchart__node[data-depth="3"] { margin-left: 52px; }
.orgchart__node[data-depth="4"] { margin-left: 78px; }
.orgchart__node b { font-size: 14.5px; }
.orgchart__node span { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.orgchart__node::before {
  content: "";
  position: absolute;
  left: -14px; top: 50%;
  width: 10px; height: 1px;
  background: var(--line-2);
}
.orgchart__node[data-depth="1"]::before { display: none; }

.orgchart__revoke {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--amber);
  font-weight: 700;
  padding: 12px 16px;
  border: 1px dashed var(--amber-line);
  background: var(--amber-soft);
  border-radius: var(--radius-sm);
}

/* ---------- 工具网格 ---------- */

.tools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.tool {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 24px 22px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.tool:hover {
  border-color: var(--brand-line);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(22,33,29,.07);
}
.tool__icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.tool h4 { font-size: 16.5px; margin-bottom: 8px; }
.tool p { font-size: 14px; line-height: 1.85; color: var(--ink-2); }

/* ---------- 能力矩阵 ---------- */

.matrix {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.matrix__col { background: var(--white); display: flex; flex-direction: column; }
.matrix__head {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.matrix__head b { display: block; font-size: 15.5px; }
.matrix__head span { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-3); letter-spacing: .06em; }
.matrix__body { padding: 14px 20px 22px; display: grid; gap: 9px; }
.matrix__body li {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.7;
  padding-left: 15px;
  position: relative;
}
.matrix__body li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brand-line);
}

/* ---------- 课堂流程 ---------- */

.flow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}
.flow__step {
  padding: 26px 18px 24px;
  border-right: 1px solid var(--line);
  position: relative;
}
.flow__step:last-child { border-right: 0; }
.flow__step b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-family: var(--mono);
  font-size: 11.5px;
  margin-bottom: 12px;
}
.flow__step h4 { font-size: 15px; margin-bottom: 7px; }
.flow__step p { font-size: 12.8px; line-height: 1.75; color: var(--ink-3); }
.flow__step--last { background: var(--brand-soft); }
.flow__step--last b { background: var(--brand); color: #fff; }
.flow__step--last p { color: #3d6d5c; }

/* ---------- 安全合规 ---------- */

.security { background: var(--white); }
.security__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 8px;
}
.security__item { background: var(--white); padding: 28px 26px; }
.security__item h4 {
  font-size: 16.5px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.security__item h4 svg { color: var(--brand); flex-shrink: 0; }
.security__item ul { display: grid; gap: 8px; }
.security__item li {
  font-size: 13.8px;
  line-height: 1.8;
  color: var(--ink-2);
  padding-left: 16px;
  position: relative;
}
.security__item li::before {
  content: "";
  position: absolute;
  left: 0; top: .78em;
  width: 6px; height: 1.5px;
  background: var(--line-2);
}

.security__bar {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
}

/* ---------- 实施与服务 ---------- */

.service { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.service__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
}
.service__item b {
  display: block;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--brand);
  margin-bottom: 12px;
  font-weight: 700;
}
.service__item h4 { font-size: 16px; margin-bottom: 8px; }
.service__item p { font-size: 13.5px; line-height: 1.8; color: var(--ink-2); }

.deploy {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  padding: 30px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: center;
}
.deploy h3 { font-size: 20px; margin-bottom: 10px; }
.deploy p { font-size: 14.5px; color: var(--ink-2); line-height: 1.9; }
.deploy__caps { display: flex; flex-wrap: wrap; gap: 8px; }
.deploy__caps span {
  font-size: 13px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--ink-2);
  background: var(--paper);
}

/* ---------- 新闻 ---------- */

.news__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}
.news__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.news__filters button {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  transition: all .16s ease;
}
.news__filters button:hover { border-color: var(--line-2); }
.news__filters button.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.news-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.news-card:hover {
  border-color: var(--brand-line);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(22,33,29,.08);
}
.news-card--pinned { border-color: var(--brand-line); }

.news-card__cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--paper-2);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.news-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.news-card__cover--gen {
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(31,125,95,.10), rgba(31,125,95,.02)),
    repeating-linear-gradient(45deg, rgba(22,33,29,.035) 0 1px, transparent 1px 11px),
    var(--paper-2);
}
.news-card__cover--gen span {
  font-family: var(--serif);
  font-size: 19px;
  color: #4a7d6b;
  letter-spacing: .22em;
  text-indent: .22em;
}
.news-card__pin {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--brand);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 3px 10px;
  border-radius: 999px;
}

.news-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.news-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 12.5px;
}
.news-card__cat {
  color: var(--brand-deep);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  border-radius: 5px;
  padding: 2px 8px;
  font-weight: 700;
}
.news-card__date { color: var(--ink-4); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.news-card h3 {
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card__more {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tag-placeholder {
  font-size: 11px;
  color: var(--amber);
  background: var(--amber-soft);
  border: 1px solid var(--amber-line);
  border-radius: 5px;
  padding: 2px 7px;
  font-weight: 700;
  letter-spacing: .04em;
}

.news__state {
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  padding: 40px 28px;
  text-align: center;
  color: var(--ink-3);
  font-size: 14.5px;
  background: var(--white);
}
.news__state code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
  color: var(--ink-2);
}
.news__skeleton { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sk {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}
.sk__cover { aspect-ratio: 16/9; background: var(--paper-2); }
.sk__line { height: 11px; border-radius: 4px; background: var(--paper-3); margin: 14px 22px; }
.sk__line:nth-child(3) { width: 62%; }
.sk__line:last-child { margin-bottom: 26px; width: 40%; }
@media (prefers-reduced-motion: no-preference) {
  .sk__cover, .sk__line { animation: pulse 1.5s ease-in-out infinite; }
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

.news__all { margin: 22px 0 0; text-align: center; }
.news__all .arrow-link { font-size: 15px; font-weight: 700; }

.news__source {
  margin-top: 22px;
  font-size: 12.5px;
  color: var(--ink-4);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
}
.news__source code { font-family: var(--mono); font-size: 12px; }

/* ---------- 案例占位 ---------- */

.cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.case-slot {
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(135deg, rgba(22,33,29,.018) 0 1px, transparent 1px 12px),
    var(--white);
  padding: 30px 26px;
  min-height: 210px;
  display: flex;
  flex-direction: column;
}
.case-slot__mark {
  width: 36px; height: 36px;
  border-radius: 9px;
  border: 1px dashed var(--line-2);
  display: grid;
  place-items: center;
  color: var(--ink-4);
  margin-bottom: 16px;
}
.case-slot h4 { font-size: 16.5px; margin-bottom: 9px; color: var(--ink-2); }
.case-slot p { font-size: 13.8px; line-height: 1.85; color: var(--ink-3); }
.case-slot__tag {
  margin-top: auto;
  padding-top: 18px;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--ink-4);
}

/* ---------- 转化区 ---------- */

.cta-zone { background: var(--paper-2); border-top: 1px solid var(--line); }
.cta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 44px;
}
.cta-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.cta-card:hover {
  border-color: var(--brand-line);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(22,33,29,.08);
}
.cta-card__no {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink-4);
  letter-spacing: .12em;
  margin-bottom: 14px;
}
.cta-card h3 { font-size: 19px; margin-bottom: 10px; }
.cta-card p { font-size: 14px; line-height: 1.85; color: var(--ink-2); }
.cta-card ul { margin-top: 14px; display: grid; gap: 6px; }
.cta-card ul li {
  font-size: 13px;
  color: var(--ink-3);
  padding-left: 14px;
  position: relative;
}
.cta-card ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brand-line);
}
.cta-card .btn { margin-top: 22px; align-self: flex-start; }

/* ---------- 微信联系区 ---------- */

/* 说明在上，两位联系人并排在下。原来是「一张码 + 一段说明」的两栏，
   加第二个人时没法把两张码塞进 260px 的那一栏，也不该让说明文字重复两遍——
   那段说明对两个人都成立。 */
.wechat {
  margin-top: 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 36px;
  scroll-margin-top: 96px;
}

.wechat__people {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* 1px 的 gap 加同色底：两张卡之间是一条分隔线，不是两个各带边框的盒子——
     和 .wechat__meta 用的是同一手法，页面上这两块紧挨着，画法不一致会很明显。 */
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.contact {
  background: var(--paper);
  padding: 26px 22px 22px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 12px;
  text-align: center;
}
.contact__scope {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-2);
  max-width: 32ch;
}
.contact__id { display: flex; align-items: center; gap: 10px; }

/* 二维码占位框；换成正式图片后用 .qr-img */
.qr-slot,
.qr-img {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border-radius: var(--radius-sm);
}
/* 二维码要留「静默区」：四周至少 4 个模块宽的白边，扫码器才稳。
   我们这张图自己只留了不到一个模块，所以在这里用 padding 补出来——
   改 CSS 比改图省事，换二维码时也不用记得先留白。
   尺寸从 200 提到 220：这张码比较密（三十多个模块），太小了隔着屏幕扫容易失败。 */
.qr-img {
  display: block;
  width: 220px;
  height: 220px;
  padding: 10px;
  border: 1px solid var(--line);
  object-fit: contain;
  background: var(--white);
}

.qr-slot {
  position: relative;
  display: grid;
  place-content: center;
  gap: 12px;
  border: 1px dashed var(--line-2);
  background:
    repeating-linear-gradient(45deg, rgba(22,33,29,.02) 0 1px, transparent 1px 10px),
    var(--paper-2);
  color: var(--ink-4);
}
.qr-slot svg { width: 38px; height: 38px; margin: 0 auto; }
.qr-slot b { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; }

.qr-slot__corner {
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid var(--brand-line);
}
.qr-slot__corner--tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0; }
.qr-slot__corner--tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; border-radius: 0 4px 0 0; }
.qr-slot__corner--bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; border-radius: 0 0 0 4px; }
.qr-slot__corner--br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; border-radius: 0 0 4px 0; }

.wechat__scan {
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.wechat__scan::before {
  content: "";
  width: 14px; height: 14px;
  flex-shrink: 0;
  background: currentColor;
  opacity: .55;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.2 3C5.2 3 2 5.8 2 9.2c0 1.9 1 3.6 2.7 4.8L4 16.4l2.7-1.4c.5.1 1 .2 1.6.3-.1-.4-.2-.9-.2-1.3 0-3.2 3-5.8 6.8-5.8h.6C15 5.4 12.4 3 9.2 3Zm-2.3 3a.9.9 0 1 1 0 1.8.9.9 0 0 1 0-1.8Zm4.6 0a.9.9 0 1 1 0 1.8.9.9 0 0 1 0-1.8Z'/%3E%3Cpath fill='%23000' d='M22 14c0-2.9-2.8-5.2-6.2-5.2S9.6 11.1 9.6 14s2.8 5.2 6.2 5.2c.7 0 1.4-.1 2-.3l2.2 1.2-.6-2c1.6-1 2.6-2.4 2.6-4.1Zm-8.3-1.5a.8.8 0 1 1 0 1.6.8.8 0 0 1 0-1.6Zm4.1 0a.8.8 0 1 1 0 1.6.8.8 0 0 1 0-1.6Z'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.2 3C5.2 3 2 5.8 2 9.2c0 1.9 1 3.6 2.7 4.8L4 16.4l2.7-1.4c.5.1 1 .2 1.6.3-.1-.4-.2-.9-.2-1.3 0-3.2 3-5.8 6.8-5.8h.6C15 5.4 12.4 3 9.2 3Zm-2.3 3a.9.9 0 1 1 0 1.8.9.9 0 0 1 0-1.8Zm4.6 0a.9.9 0 1 1 0 1.8.9.9 0 0 1 0-1.8Z'/%3E%3Cpath fill='%23000' d='M22 14c0-2.9-2.8-5.2-6.2-5.2S9.6 11.1 9.6 14s2.8 5.2 6.2 5.2c.7 0 1.4-.1 2-.3l2.2 1.2-.6-2c1.6-1 2.6-2.4 2.6-4.1Zm-8.3-1.5a.8.8 0 1 1 0 1.6.8.8 0 0 1 0-1.6Zm4.1 0a.8.8 0 1 1 0 1.6.8.8 0 0 1 0-1.6Z'/%3E%3C/svg%3E");
}

/* 角色名复用 .wechat__scan 的微信图标，但字重和颜色要盖过它——它排在本行之前，
   同是单个类选择器，写在这里才生效。角色名是卡片里最该先被看见的东西，
   压在说明文字之下的话，两张卡看上去就是两段说明，分不清是两个人。 */
.contact__role { font-size: 15px; font-weight: 700; color: var(--ink); }

.wechat__info .eyebrow { margin-bottom: 12px; }
.wechat__info h3 { font-size: 21px; margin-bottom: 12px; }
.wechat__info > p { font-size: 14.5px; line-height: 1.95; color: var(--ink-2); max-width: 56ch; }

.wechat__meta {
  margin: 22px 0 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.wechat__meta > div {
  background: var(--paper);
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 16px;
  padding: 12px 18px;
  align-items: baseline;
}
.wechat__meta dt { font-size: 13px; color: var(--ink-3); }
.wechat__meta dd {
  margin: 0;
  font-size: 14px;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.wechat-id { font-family: var(--mono); font-weight: 700; letter-spacing: .02em; }

.wechat__todo { margin-top: 18px; }
.wechat__todo code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
}

/* ---------- 页脚 ---------- */

.footer {
  background: var(--deep);
  color: #b7c8c2;
  padding: 64px 0 34px;
  font-size: 14px;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--deep-line);
}
.footer .brand__name { color: #fff; }
.footer .brand__sub { color: #7f958e; }
.footer__about { margin-top: 18px; max-width: 34ch; line-height: 1.9; color: #98aca6; font-size: 13.5px; }
/* 走错门的读者的出口：这个站写给教育部门和学校，家长要看的是另一个站。
   放在页脚而不是顶栏，是因为它不该和页面自己的转化入口抢注意力——它服务的是
   少数走错的人，不是主路径。链接色和下划线写在类选择器上：全局 reset 里
   `a { color: inherit; text-decoration: none }` 会让它看着和普通文字一样。 */
.footer__cross { margin-top: 12px; font-size: 13.5px; color: #98aca6; }
.footer__cross a { color: #cfe0d9; text-decoration: underline; text-underline-offset: 3px; }
.footer__cross a:hover { color: #fff; }
.footer__col b { display: block; color: #fff; font-size: 14px; margin-bottom: 14px; }
.footer__col li { margin-bottom: 9px; }
.footer__col a { color: #a9bcb6; font-size: 13.5px; transition: color .16s ease; }
.footer__col a:hover { color: #fff; }
.footer__bottom {
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  font-size: 12.5px;
  color: #7f958e;
}

/* ---------- 进场动画 ---------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* 禁用 JS 时的兜底见 index.html 中的 <noscript>：强制 .reveal 可见 */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- 响应式 ---------- */

@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .policy-grid { grid-template-columns: repeat(2, 1fr); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .matrix { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: repeat(4, 1fr); }
  .flow__step:nth-child(4) { border-right: 0; }
  .service { grid-template-columns: repeat(3, 1fr); }
  .factbar__grid { grid-template-columns: repeat(3, 1fr); }
  .factbar__item:nth-child(3) { border-right: 0; }
  .compute { grid-template-columns: 1fr; gap: 32px; }
  .split, .split--reverse { grid-template-columns: 1fr; gap: 34px; }
  .security__grid { grid-template-columns: repeat(2, 1fr); }
  .kit__list { grid-template-columns: repeat(2, 1fr); }
  .deploy { grid-template-columns: 1fr; gap: 26px; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .wechat { padding: 30px 24px; }
  .wechat__info > p { max-width: none; }
  .wechat__people { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .nav, .topbar__cta { display: none; }
  .nav-toggle { display: flex; }

  .topbar.is-open .nav {
    display: flex;
    position: absolute;
    top: 72px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 14px var(--gutter) 20px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 40px rgba(22,33,29,.08);
  }
  .topbar.is-open .nav a { padding: 12px 14px; font-size: 15.5px; }
  .topbar.is-open .topbar__cta {
    display: flex;
    position: absolute;
    top: calc(72px + 100%);
  }

  .stage { grid-template-columns: 1fr; gap: 20px; }
  .stage__label { position: static; }
  .stage__bar { max-width: 180px; }
  .section-head--split { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .news__grid, .news__skeleton { grid-template-columns: repeat(2, 1fr); }
  .dark__close { grid-template-columns: 1fr; gap: 22px; }
  .tools { grid-template-columns: repeat(2, 1fr); }
  .cases { grid-template-columns: repeat(2, 1fr); }
  .cta-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  :root { --gutter: 20px; }
  .section, .dark { padding: 68px 0; }
  .hero { padding: 56px 0 64px; }
  .cards, .policy-grid, .tools, .service, .security__grid, .grades,
  .news__grid, .news__skeleton, .cases, .kit__list,
  .matrix, .factbar__grid { grid-template-columns: 1fr; }
  .policy-panel__map { grid-template-columns: 1fr; }
  .factbar__item { border-right: 0; border-bottom: 1px solid var(--line); padding: 22px 0; }
  .factbar__item:last-child { border-bottom: 0; }
  .flow { grid-template-columns: 1fr; }
  .flow__step { border-right: 0; border-bottom: 1px solid var(--line); }
  .flow__step:last-child { border-bottom: 0; }
  .matrix__col { border-bottom: 1px solid var(--line); }
  .kit { padding: 24px 20px; }
  .deploy { padding: 24px 20px; }
  .hero__actions .btn { flex: 1 1 auto; }
  .orgchart__node { flex-wrap: wrap; gap: 4px; }
  .orgchart__node[data-depth="2"] { margin-left: 12px; }
  .orgchart__node[data-depth="3"] { margin-left: 24px; }
  .orgchart__node[data-depth="4"] { margin-left: 36px; }
  .security__bar { flex-direction: column; align-items: flex-start; }
  .wechat__meta > div { grid-template-columns: 1fr; gap: 4px; }
  .footer__grid { grid-template-columns: 1fr; }
}

/* ---------- 打印：仅输出「安全与合规」一屏，供学校信息中心审阅 ---------- */

@media print {
  body { background: #fff; font-size: 11.5pt; line-height: 1.7; }
  .topbar, .nav-toggle, .footer, .news__filters, .news__source { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .section, .dark, .hero { padding: 14pt 0; }
  .shell { max-width: none; padding: 0; }
  .btn { display: none !important; }
  .security__grid, .security__item, .checklist li, .card, .grade { break-inside: avoid; page-break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
}

/* 「打印本屏」：只输出安全与合规部分 */
@media print {
  body.printing-security main > section:not(#security) { display: none !important; }
  body.printing-security #security { padding-top: 0; }
  body.printing-security #security .security__bar { display: none !important; }
}

/* =========================================================
   配图系统与分节节奏（2026-09 改版）
   ---------------------------------------------------------
   原来的问题不在文案，在**节奏**：16 个分节几乎都是
   「eyebrow + 标题 + 卡片网格」，只靠背景色深浅换气，读到第五屏就没有落点了。

   这一版引入三件事：
     1. .figure —— 配图容器。图片没到位时显示占位框，站点照常能看；
        图片一到位由 site.js 换成真正的 <img>，版式不变。
     2. .band —— 通栏图片带，图片顶到容器边缘，用来在长页面里断句。
     3. 分节交替：图文分栏 / 密集网格 / 通栏带 / 深色块，四种轮着来。
   ========================================================= */

/* ---------- 配图容器 ---------- */

.figure {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  /* 未填图时的表面：细斜纹 + 一点主色晕。
     配图是分批画的，这个占位状态会在线上存在好几周——它必须自己就像"有意留的版位"，
     而不是一块忘了填的白板。斜纹用 repeating-linear-gradient，不引入任何图片文件。 */
  background:
    radial-gradient(circle at 78% 16%, rgba(31,125,95,.10), transparent 17rem),
    repeating-linear-gradient(135deg,
      rgba(31,125,95,.045) 0 1px,
      transparent 1px 11px),
    linear-gradient(160deg, var(--white), var(--paper-2));
  /* 阴影带主色的色相，而不是纯黑压一层灰——纯黑阴影在米色纸面上会发脏 */
  box-shadow: 0 1px 2px rgba(22,33,29,.03), 0 22px 48px -34px rgba(20,81,62,.42);
  aspect-ratio: 3 / 2;
}
/* 占位时再套一圈虚线内框，读者一眼看出"这里将来是一张图" */
.figure:not(.is-filled)::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed var(--brand-line);
  border-radius: calc(var(--radius) - 6px);
  pointer-events: none;
}
.figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.figure--tall { aspect-ratio: 4 / 5; }
.figure--wide { aspect-ratio: 21 / 9; }

/* 占位内容：图片到位后由 .is-filled 隐藏 */
.figure__hint {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 24px;
  text-align: center;
  color: var(--ink-4);
}
.figure__hint b {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-3);
}
.figure__hint span {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
  opacity: .7;
}
.figure__hint small { font-size: 12px; line-height: 1.6; max-width: 24ch; }
.figure.is-filled { border-color: transparent; background: var(--paper-2); }
.figure.is-filled .figure__hint { display: none; }

/* 通栏带里的文字压在图上要有底衬；但**图还没到位时**那层深色渐变压在浅色占位上
   会糊成一团灰。所以未填图时换成实底色块，接在占位框下面而不是压在它上面。 */
.band:not(.is-filled) .band__over {
  position: static;
  background: var(--deep);
  color: var(--deep-text);
}
.band:not(.is-filled) .band__over b { color: #f2f7f4; }

/* 深色区里的配图：边框和阴影都要换一套，浅色那套压在深绿上是一圈灰边 */
.dark .figure {
  border-color: var(--deep-line);
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 26px 60px -38px rgba(0,0,0,.8);
}
.dark .figure__hint { color: rgba(207,220,215,.5); }
.dark .figure__hint b { color: rgba(207,220,215,.75); }
.dark .figure__hint span { color: #7fc0a6; }

/* ---------- 图文分栏 ---------- */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
}
.feature--reverse > .figure { order: -1; }
.feature__body > * + * { margin-top: 18px; }
/* 分栏里的标题比通栏标题小一档：两栏宽度只有一半，沿用大标题会一行放不下三个词 */
.feature__body .h2 { font-size: clamp(24px, 2.3vw, 31px); max-width: 16em; }

/* ---------- 通栏图片带 ---------- */

.band {
  position: relative;
  margin-top: 56px;
  border-radius: var(--radius);
  overflow: hidden;
}
.band .figure {
  border-radius: 0;
  border: none;
  box-shadow: none;
  aspect-ratio: 24 / 7;
}
.band__over {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 56px 30px 28px;
  /* 文字压在图上必须自带底衬。第一版是 .82 → .34 的渐变，配图到位之后才发现不够：
     hero.png 是一张明亮的教室图，而标题正好落在渐隐到 .34 的那一段，白字几乎读不出来。
     比例和裁切都没问题，**只有把图真的贴上去看才发现**。
     现在整段都压得住：底部 .92，到标题上沿仍有 .72，再往上才化开。
     配图以后还会换，遮罩要对"任意一张浅色图"都成立，不能按当前这张调到刚好。 */
  background: linear-gradient(to top,
    rgba(16,32,27,.92) 0%,
    rgba(16,32,27,.72) 55%,
    rgba(16,32,27,.22) 88%,
    transparent 100%);
  color: #f2f7f4;
}
.band__over b {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
.band__over p {
  margin-top: 4px;
  font-size: 14px;
  color: rgba(242,247,244,.88);
  max-width: 52ch;
  text-shadow: 0 1px 10px rgba(0,0,0,.4);
}

/* ---------- 分节节奏 ---------- */

/* 上下留白不对称：视觉上「上紧下松」才不会觉得每一节都黏着下一节 */
.section { padding: 96px 0 112px; }
.section--tight { padding: 72px 0 84px; }

/* 标题的字重与字距：中文大标题收一点字距才立得住 */
.h2 { text-wrap: balance; }
.lede { text-wrap: pretty; }

/* 数字用等宽数位，成排的编号和额度才对得齐 */
.card__no, .stage__range, .grade__num, .steps4 b, .flow__step b, .service__item b,
.meter__eg b, .factbar__item b {
  font-variant-numeric: tabular-nums;
}

/* ---------- 交互状态 ---------- */

.card, .policy-card, .tool, .grade, .service__item, .security__item {
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card:hover, .policy-card:hover, .tool:hover, .grade:hover, .service__item:hover {
  border-color: var(--brand-line);
  box-shadow: 0 1px 2px rgba(22,33,29,.03), 0 18px 40px -32px rgba(20,81,62,.5);
  transform: translateY(-2px);
}
.btn { transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease; }
.btn:active { transform: translateY(1px); }
/* 键盘焦点必须看得见——这是可访问性要求，不是可选项 */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .card:hover, .policy-card:hover, .tool:hover, .grade:hover, .service__item:hover,
  .btn:active { transform: none; }
}

/* ---------- 响应式 ---------- */

@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; gap: 30px; }
  .feature--reverse > .figure { order: 0; }
  .band { margin-top: 36px; }
  .band .figure { aspect-ratio: 16 / 9; }
  .band__over { position: static; background: var(--deep); }
  .section { padding: 64px 0 76px; }
}

/* 打印安全与合规那一屏时，配图一律不打——省墨，且信息中心要的是条款不是插图 */
@media print {
  .figure, .band { display: none !important; }
}

/* 工具网格里的图块跨两列：9 个一模一样的卡片排成 3×3，中间插一块图才有落点 */
.tools__figure { grid-column: span 2; aspect-ratio: auto; min-height: 220px; }
@media (max-width: 900px) { .tools__figure { grid-column: span 1; aspect-ratio: 3 / 2; } }

/* 分栏里的小标题：.h3 是 19px，用在图文分栏上压不住旁边的图 */
.feature__body .h3 { font-size: clamp(21px, 2vw, 26px); line-height: 1.4; }
.feature__body .callout { margin: 0; }

/* ---------- 分节底色的对比度 ---------- */
/* 原来三档纸面是 #ffffff / #fbfaf7 / #f3f5f2，相邻两档差不到 3%，
   缩略图上完全分不出来——等于"交替底色"这个换气手段一直没生效。
   把中间那档压深一点点、并给它一条上下细线，band 才真的读得出来。
   仍然是很克制的差异：读者是校长，不是要花花绿绿。 */
.section--paper2 {
  background: #edf0ea;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}

/* 纸面纹理：纯平的米色大面积会显得空。一层极淡的噪点用 SVG data URI 生成，
   不引入任何图片文件，也不影响任何交互（pointer-events: none）。 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
/* 内容要压在噪点之上，否则整页看起来像蒙了一层灰 */
body > * { position: relative; z-index: 1; }
@media print { body::before { display: none; } }

/* ---------- 首屏 ---------- */
/* 首屏原来上下各留了一大片空，视线要走很久才到第一块内容。收一点，
   并让政策面板略微压住下面那条事实条，制造一点层次——两块东西挨着但不重叠时，
   页面读起来是"一段一段"的；轻微交叠才读得出"上下是一件事"。 */
.hero { padding-top: 76px; padding-bottom: 40px; }
.hero__visual { position: relative; z-index: 2; }
.factbar { position: relative; }

@media (max-width: 900px) {
  .hero { padding-top: 48px; padding-bottom: 24px; }
}