/* ═══════════════════════════════════════════════════════════════
   布丁AI 官网 — "会思考的机器的蓝图"
   蜜糖琥珀=人/成长，板岩靛蓝=引擎/结构；等宽字体=工程刻度。
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --paper:    #f4f1ea;   /* 暖粉笔白（非奶油黄） */
  --paper-2:  #fbf9f4;   /* 抬起的卡片 */
  --paper-3:  #ede8dd;   /* 微陷凹槽 */
  --ink:      #1a1c22;   /* 近黑（冷偏） */
  --ink-2:    #4c4a44;   /* 次要文字（暖灰） */
  --ink-3:    #837d72;   /* 弱文字 */
  --line:     #e0dacd;   /* 发丝线 */
  --line-2:   #d3ccbd;
  --honey:    #cf7a24;   /* 蜜糖琥珀 — 唯一的高饱和处 */
  --honey-2:  #eaa24f;   /* 蜜糖亮 */
  --honey-ink:#a5601a;   /* 蜜糖文字（纸上够对比） */
  --slate:    #435775;   /* 板岩靛蓝 — 结构/引擎 */
  --slate-2:  #6d80a0;
  --good:     #2db124;   /* 语义正向（对比表用，独立于强调色） */
  --bad:      #9a9285;   /* 语义弱化 */

  --ink-ground:  #17181d; /* 深色 section 的底 */
  --ink-ground-2:#1e2027;

  --r:   14px;
  --r-lg:22px;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;

  --wrap: 1140px;
  --shadow: 0 1px 2px rgba(26,28,34,.04), 0 10px 30px -12px rgba(26,28,34,.14);
  --shadow-lg: 0 2px 4px rgba(26,28,34,.05), 0 30px 60px -22px rgba(26,28,34,.24);
}

/* 深色主题：给第二套同等用心，不是简单反转 */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:    #14151a;
    --paper-2:  #1b1d24;
    --paper-3:  #101116;
    --ink:      #f0ede5;
    --ink-2:    #b7b2a7;
    --ink-3:    #837e73;
    --line:     #2a2d36;
    --line-2:   #343843;
    --honey:    #eaa24f;
    --honey-2:  #f4bd77;
    --honey-ink:#f0ad5c;
    --slate:    #8ba0c4;
    --slate-2:  #6f83a6;
    --good:     #7fb07a;
    --bad:      #6d675c;
    --ink-ground:  #0e0f13;
    --ink-ground-2:#171920;
    --line: #2a2d36;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 34px -14px rgba(0,0,0,.6);
    --shadow-lg: 0 2px 6px rgba(0,0,0,.35), 0 34px 70px -24px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  --paper:#14151a; --paper-2:#1b1d24; --paper-3:#101116;
  --ink:#f0ede5; --ink-2:#b7b2a7; --ink-3:#837e73;
  --line:#2a2d36; --line-2:#343843;
  --honey:#eaa24f; --honey-2:#f4bd77; --honey-ink:#f0ad5c;
  --slate:#8ba0c4; --slate-2:#6f83a6; --good:#7fb07a; --bad:#6d675c;
  --ink-ground:#0e0f13; --ink-ground-2:#171920;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 34px -14px rgba(0,0,0,.6);
  --shadow-lg:0 2px 6px rgba(0,0,0,.35),0 34px 70px -24px rgba(0,0,0,.7);
}
:root[data-theme="light"] {
  --paper:#f4f1ea; --paper-2:#fbf9f4; --paper-3:#ede8dd;
  --ink:#1a1c22; --ink-2:#4c4a44; --ink-3:#837d72;
  --line:#e0dacd; --line-2:#d3ccbd;
  --honey:#cf7a24; --honey-2:#eaa24f; --honey-ink:#a5601a;
  --slate:#435775; --slate-2:#6d80a0; --good:#4f7d4c; --bad:#9a9285;
  --ink-ground:#17181d; --ink-ground-2:#1e2027;
  --shadow:0 1px 2px rgba(26,28,34,.04),0 10px 30px -12px rgba(26,28,34,.14);
  --shadow-lg:0 2px 4px rgba(26,28,34,.05),0 30px 60px -22px rgba(26,28,34,.24);
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { text-wrap: balance; line-height: 1.12; letter-spacing: -.01em; }
b { font-weight: 650; color: var(--ink); }
em { font-style: normal; color: var(--honey-ink); }

.wrap { width: min(var(--wrap), 100% - 44px); margin-inline: auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 100; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 8px; }
:focus-visible { outline: 2px solid var(--honey); outline-offset: 3px; border-radius: 4px; }

/* ── Shared type ────────────────────────────────────────── */
.eyebrow {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--honey-ink);
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 20px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--honey); }
.eyebrow--on-ink { color: var(--honey-2); }

.tag {
  font-family: var(--mono);
  font-size: .78rem; letter-spacing: .06em;
  padding: 3px 8px; border-radius: 6px;
  background: var(--paper-3); color: var(--ink-2);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.tag--slate { background: color-mix(in srgb, var(--slate) 14%, transparent); color: var(--slate); border-color: color-mix(in srgb, var(--slate) 28%, transparent); }
.tag--honey { background: color-mix(in srgb, var(--honey) 16%, transparent); color: var(--honey-ink); border-color: color-mix(in srgb, var(--honey) 34%, transparent); }
.tag--on-ink { background: rgba(255,255,255,.07); color: #d9d4c8; border-color: rgba(255,255,255,.14); }

.hl { color: var(--honey-ink); }

/* ── Nav ────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.nav.is-stuck { border-color: var(--line); }
.nav__in { display: flex; align-items: center; gap: 24px; height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 750; letter-spacing: -.02em; font-size: 1.18rem; }
.brand__mark { display: grid; place-items: center; width: 30px;border-radius: 8px;}
.brand__ai { color: var(--honey-ink); }
.nav__links { display: flex; gap: 26px; margin-left: 10px; font-size: .93rem; color: var(--ink-2); }
.nav__links a { position: relative; padding: 4px 0; transition: color .2s; }
.nav__links a:hover { color: var(--ink); }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--honey); transition: width .25s; }
.nav__links a:hover::after { width: 100%; }
.nav__right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.theme {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--paper-2);
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.theme__dot { width: 15px; height: 15px; border-radius: 50%; background: var(--honey);
  box-shadow: inset -4px -4px 0 0 var(--paper-2); transition: box-shadow .3s, background .3s; }
:root[data-theme="dark"] .theme__dot { box-shadow: inset 0 0 0 0 transparent; background: var(--honey-2); }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: .96rem;
  padding: 12px 22px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink);
  transition: transform .18s ease, box-shadow .2s, background .2s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--sm { padding: 8px 16px; font-size: .88rem; }
.btn--honey { background: var(--honey); border-color: var(--honey); color: #1a1206; }
.btn--honey:hover { background: var(--honey-2); }

/* ── Sections ───────────────────────────────────────────── */
.sec { padding: clamp(72px, 10vw, 130px) 0; position: relative; }
.sec--tint { background: var(--paper-3); }
.sec--ink { background: var(--ink-ground); color: #e9e4d8; }
.sec--ink .sec__h { color: #f3efe4; }
.sec__h { font-size: clamp(1.7rem, 3.6vw, 2.7rem); font-weight: 720; max-width: 15em; }
.sec__h--wide { max-width: 20em; }

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── Hero ───────────────────────────────────────────────── */
.hero { position: relative; padding: clamp(56px, 9vw, 104px) 0 clamp(60px, 8vw, 96px); overflow: hidden; }
.hero__in { position: relative; z-index: 2; }
.hero__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 82% -10%, color-mix(in srgb, var(--honey) 16%, transparent), transparent 55%),
    radial-gradient(90% 70% at 8% 8%, color-mix(in srgb, var(--slate) 12%, transparent), transparent 52%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
          mask-image: linear-gradient(180deg, #000 55%, transparent);
}
.hero__title {
  font-size: clamp(2.5rem, 6.4vw, 3.5rem);
  font-weight: 760; letter-spacing: -.03em; line-height: 1.06;
  max-width: 21ch;
}
.hero__lede { margin-top: 26px; max-width: 55ch; font-size: clamp(1.05rem, 1.7vw, 1.28rem); color: var(--ink-2); line-height: 1.65; }
.hero__cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ── Cards ──────────────────────────────────────────────── */
.cards { display: grid; gap: 20px; margin-top: 46px; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); margin-top: 22px; }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 30px;
  transition: transform .22s ease, box-shadow .25s, border-color .25s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-2); }
.card h3 { font-size: 1.24rem; margin-bottom: 10px; font-weight: 700; }
.card p { color: var(--ink-2); font-size: .98rem; }
.card__i { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: var(--paper-3); margin-bottom: 20px; }
.card__n {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .04em;
  color: var(--honey-ink); display: inline-block; margin-bottom: 14px;
  padding: 4px 10px; border-radius: 7px; background: color-mix(in srgb, var(--honey) 12%, transparent);
}
.card--pain h3 { font-size: 1.16rem; }

/* featured pillar */
.feat {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 8px;
  margin-top: 48px; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow);
}
.feat__body { padding: clamp(28px, 3.5vw, 48px); }
.feat__h { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 730; margin: 16px 0 14px; }
.feat__body > p { color: var(--ink-2); }
.feat__list { list-style: none; padding: 0; margin: 22px 0; display: flex; flex-direction: column; gap: 12px; }
.feat__list li { position: relative; padding-left: 26px; color: var(--ink-2); font-size: .98rem; }
.feat__list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 12px; border-radius: 4px; background: var(--honey); }
.feat__list b { color: var(--ink); }
.feat__foot { font-size: .95rem; padding-top: 18px; border-top: 1px solid var(--line); }
.feat__aside { background: var(--paper-3); padding: clamp(24px, 3vw, 40px); display: grid; align-items: center; border-left: 1px solid var(--line); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.split__col { display: flex; flex-direction: column; gap: 12px; }
.split__tag { font-family: var(--mono); font-size: .72rem; letter-spacing: .05em; color: var(--ink-3); }
.split__col--us .split__tag { color: var(--honey-ink); }
.split__box { padding: 20px 14px; border-radius: 12px; text-align: center; font-family: var(--mono); font-size: .82rem; background: var(--paper-2); border: 1px dashed var(--line-2); color: var(--ink-2); }
.split__box--blur { filter: blur(.4px); opacity: .7; }
.split__stack { display: flex; flex-direction: column; gap: 8px; }
.split__row { padding: 13px 12px; border-radius: 10px; font-family: var(--mono); font-size: .8rem; text-align: center;
  background: color-mix(in srgb, var(--slate) 12%, var(--paper-2)); border: 1px solid color-mix(in srgb, var(--slate) 24%, transparent); color: var(--slate); }
.split__row--out { background: color-mix(in srgb, var(--honey) 14%, var(--paper-2)); border-color: color-mix(in srgb, var(--honey) 30%, transparent); color: var(--honey-ink); }
.split__col p { font-size: .82rem; color: var(--ink-3); }

/* ── Ladder ─────────────────────────────────────────────── */
.ladder { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(34px, 5vw, 72px); align-items: center; }
.ladder__lede { margin-top: 20px; color: #c8c3b6; font-size: 1.05rem; }
.ladder__note { margin-top: 22px; font-size: .92rem; color: #b8b3a6; display: flex; align-items: center; gap: 10px; }
.sec--ink .eyebrow { color: var(--honey-2); }
.rungs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rung {
  display: grid; grid-template-columns: 52px 92px 1fr; align-items: center; gap: 16px;
  padding: 18px 22px; border-radius: 14px;
  background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  width: calc(72% + var(--i) * 7%);
  transition: transform .25s, background .25s, border-color .25s;
}
.rung:hover { transform: translateX(6px); border-color: color-mix(in srgb, var(--honey) 50%, transparent); }
.rung__lv { font-family: var(--mono); font-weight: 600; color: var(--honey-2); font-size: 1rem; }
.rung__name { font-weight: 680; color: #f3efe4; }
.rung__desc { color: #a9a498; font-size: .9rem; }
.rung:last-child { background: linear-gradient(90deg, color-mix(in srgb, var(--honey) 26%, transparent), color-mix(in srgb, var(--honey) 8%, transparent)); border-color: color-mix(in srgb, var(--honey) 44%, transparent); }

/* ── Compare table ──────────────────────────────────────── */
.tablewrap { margin-top: 44px; overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ctab { width: 100%; border-collapse: collapse; background: var(--paper-2); font-size: .95rem; min-width: 720px; }
.ctab th, .ctab td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.ctab thead th { font-family: var(--mono); font-size: .78rem; letter-spacing: .04em; color: var(--ink-3); font-weight: 500; background: var(--paper-3); border-bottom: 1px solid var(--line-2); text-transform: none; }
.ctab tbody th { font-weight: 600; color: var(--ink); }
.ctab__us { color: var(--honey-ink) !important; position: relative; }
.ctab td.good { color: var(--good); font-weight: 600; }
.ctab td.mid { color: var(--ink-2); }
.ctab td.bad { color: var(--bad); }
.ctab tbody tr:last-child th, .ctab tbody tr:last-child td { border-bottom: none; }
.ctab tbody td:last-child, .ctab thead th:last-child { background: color-mix(in srgb, var(--honey) 8%, var(--paper-2)); }
.ctab tbody tr:hover td, .ctab tbody tr:hover th { background: color-mix(in srgb, var(--slate) 6%, var(--paper-2)); }
.ctab tbody tr:hover td:last-child { background: color-mix(in srgb, var(--honey) 12%, var(--paper-2)); }

/* ── Moat ───────────────────────────────────────────────── */
.moat { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 46px;
  padding: clamp(28px, 3.5vw, 44px); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg); }
.moat__lead { display: flex; align-items: center; gap: 20px; }
.bignum { font-size: clamp(3.4rem, 8vw, 5.6rem); font-weight: 780; line-height: .9; color: var(--honey); font-family: var(--mono); letter-spacing: -.04em; }
.moat__lead h3 { font-size: 1.2rem; }
.moat__lead p { color: var(--ink-2); font-size: .92rem; margin-top: 4px; }
.patents { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.patents li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: .95rem; }
.patents li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; background: var(--slate); border-radius: 2px; transform: rotate(45deg); }
.moat__cards { margin-top: 20px; }
.minicard { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; }
.minicard__k { font-weight: 680; display: block; margin-bottom: 10px; font-size: 1.02rem; }
.minicard__k::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--honey); border-radius: 2px; margin-right: 9px; transform: translateY(-1px); }
.minicard p { color: var(--ink-2); font-size: .9rem; }

/* ── CTA ────────────────────────────────────────────────── */
.cta__in { text-align: center; display: flex; flex-direction: column; align-items: center; }
.flowcompare { display: flex; flex-direction: column; gap: 14px; margin: 8px 0 42px; align-items: center; font-family: var(--mono); }
.flowcompare__them { color: #8f8a7e; font-size: .95rem; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.flowcompare__us { color: #e9e4d8; font-size: clamp(.86rem, 1.5vw, 1.02rem); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; max-width: 60ch; line-height: 2; }
.flowcompare__us em { color: var(--honey-2); }
.cta__h { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 760; color: #f4f0e5; letter-spacing: -.02em; }
.cta__h em { color: var(--honey-2); }
.cta__sub { margin-top: 18px; color: #b8b3a6; font-size: 1.08rem; }
.cta__row { margin-top: 38px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center; }
.cta__status { font-family: var(--mono); font-size: .84rem; color: #c8c3b6; display: inline-flex; align-items: center; gap: 9px; }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--honey-2); position: relative; }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--honey-2); animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pulse::after { animation: none; } }

/* ── Footer ─────────────────────────────────────────────── */
.foot { background: var(--ink-ground-2); color: #b8b3a6; padding: 40px 0; }
.foot__in { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.foot__brand { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.foot__brand .brand__name { color: #f0ede5; font-weight: 720; font-size: 1.1rem; }
.foot__tag { font-size: .86rem; color: #8f8a7e; }
.foot__meta { display: flex; gap: 22px; font-family: var(--mono); font-size: .8rem; color: #8f8a7e; }

/* 深色 section 里的加粗文字：强制亮色（否则浅色主题下 var(--ink) 变暗，贴在暗底看不清）*/
.sec--ink b, .cta b { color: #fff; }

/* ── Hero 前后对比（替代原决策链，家长一眼看懂）── */
.hero__compare { margin-top: clamp(40px, 6vw, 66px); display: flex; flex-direction: column; gap: 14px; max-width: 940px; }
.hcmp { display: flex; align-items: center; gap: 16px; padding: 15px 20px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--paper-2); flex-wrap: wrap; }
.hcmp--good { border-color: color-mix(in srgb, var(--honey) 36%, transparent);
  background: color-mix(in srgb, var(--honey) 7%, var(--paper-2)); box-shadow: var(--shadow); }
.hcmp__label { font-family: var(--mono); font-size: .72rem; letter-spacing: .05em; white-space: nowrap;
  padding: 5px 11px; border-radius: 8px; background: var(--paper-3); color: var(--ink-3); }
.hcmp--good .hcmp__label { background: color-mix(in srgb, var(--honey) 16%, transparent); color: var(--honey-ink); }
.hcmp__flow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: .96rem; font-weight: 560; color: var(--ink-2); }
.hcmp__flow i { flex: none; width: 15px; height: 1px; background: var(--line-2); position: relative; }
.hcmp__flow i::after { content: ""; position: absolute; right: -1px; top: 50%; width: 5px; height: 5px;
  border-top: 1px solid var(--line-2); border-right: 1px solid var(--line-2); transform: translateY(-50%) rotate(45deg); }
.hcmp--bad .hcmp__end { color: var(--ink-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--bad) 90%, transparent); }
.hcmp--good .hcmp__end { color: var(--honey-ink); font-weight: 750; }

/* ── 作业模式家长提示（ladder 内）── */
.ladder__context { margin-top: 26px; padding: 18px 20px; border-radius: 14px;
  background: color-mix(in srgb, var(--honey) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--honey) 30%, transparent); }
.ladder__context .tag { margin-bottom: 10px; display: inline-block; }
.ladder__context p { color: #e6e1d4; font-size: .98rem; line-height: 1.7; }

/* ── 你的孩子会发生什么（按学段的产品承诺）── */
.promise__lede { margin-top: 18px; color: var(--ink-2); max-width: 46ch; font-size: 1.05rem; }
.promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.pcard { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px; display: flex; flex-direction: column; gap: 16px;
  transition: transform .22s ease, box-shadow .25s, border-color .25s; }
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-2); }
.pcard__badge { align-self: flex-start; font-family: var(--mono); font-size: .74rem; letter-spacing: .06em;
  padding: 5px 12px; border-radius: 8px; color: var(--honey-ink);
  background: color-mix(in srgb, var(--honey) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--honey) 28%, transparent); }
.pcard h3 { font-size: 1.2rem; font-weight: 700; }
.pcard__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pcard__list li { position: relative; padding-left: 28px; color: var(--ink-2); font-size: .96rem; line-height: 1.6; }
.pcard__list li::before { content: ""; position: absolute; left: 0; top: .3em; width: 17px; height: 17px;
  border-radius: 6px; background: color-mix(in srgb, var(--honey) 16%, transparent); }
.pcard__list li::after { content: ""; position: absolute; left: 5px; top: .62em; width: 6px; height: 3px;
  border-left: 2px solid var(--honey-ink); border-bottom: 2px solid var(--honey-ink);
  transform: rotate(-45deg); }

.cta__note { margin-top: 16px; font-size: .9rem; color: #a9a498; }

/* ── 认知模型深度卡（带图解）── */
.dcards { margin-top: 44px; }
.dcard { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.dcard__viz { padding: 24px 26px 4px; }
.dcard__viz svg { width: 100%; height: auto; max-height: 128px; }
.dcard__body { padding: 6px 30px 30px; }
.dcard__body h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; }
.dcard__tag { display: inline-block; margin-left: 6px; font-family: var(--mono); font-size: .66rem;
  letter-spacing: .05em; padding: 2px 8px; border-radius: 6px; vertical-align: 2px;
  color: var(--honey-ink); background: color-mix(in srgb, var(--honey) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--honey) 26%, transparent); }

/* ── 场景引述卡 ── */
.scene { max-width: 780px; margin: 44px auto 0; text-align: center; position: relative; }
.scene::before { content: "\201C"; position: absolute; top: -.35em; left: 50%; transform: translateX(-50%);
  font-family: Georgia, "Times New Roman", serif; font-size: 6rem; line-height: 1; color: var(--honey); opacity: .22; }
.scene__q { position: relative; font-size: clamp(1.24rem, 2.7vw, 1.85rem); font-weight: 600; line-height: 1.65;
  color: var(--ink); letter-spacing: -.01em; margin: 0; }
.scene__hl { color: var(--honey-ink); }
.scene__by { margin-top: 26px; font-size: 1rem; color: var(--ink-2); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .nav__links { display: none; }
  .cards--3, .cards--2, .cards--4 { grid-template-columns: 1fr 1fr; }
  .promise { grid-template-columns: 1fr; }
  .feat, .ladder, .moat { grid-template-columns: 1fr; }
  .feat__aside { border-left: none; border-top: 1px solid var(--line); }
  .rung { width: 100% !important; }
  .patents { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .cards--3, .cards--2, .cards--4 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .foot__in { flex-direction: column; align-items: flex-start; }
}

/* 仅在桌面端（宽屏，大于 900px 时生效），以防破坏移动端样式 */
@media (min-width: 901px) {
  /* 定义两行网格，避免右侧两个卡片高度被撑开过多 */
  .cards--3.dcards {
    grid-template-rows: repeat(2, 1fr);
  }
  
  /* 让第一个 dcard 横向跨越 2 列，纵向跨越 2 行 */
  .cards--3.dcards > .dcard:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }

  /* 可选：为了让变大后的第一个卡片的内部插图能够更好地利用纵向空间，垂直居中 */
  .cards--3.dcards > .dcard:first-child .dcard__viz {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}