/* 改完啦官网样式。数值一律抄 网页/_参考/ai-design-skills 那两份 SKILL.md 的表，
   不自己发明：字号落 Tailwind 刻度（B1）、间距只用那 13 档（B2）、圆角只用 Tailwind
   那几档（B3）、底色只用 B4 白名单、缓动只用 B7 那条曲线。
   一个境外 CDN 都不引：字体是本目录 font/ 下自托管的 Geist，图标是内联 sprite。 */

@font-face{font-family:"Geist";src:url("/site/font/Geist-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("/site/font/Geist-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("/site/font/Geist-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* B4 深色底白名单 + §11.4 那块暖黑 */
  --bg:#181818; --bg-alt:#1F1F1F; --bg-raise:#272727; --line:#313131; --warm-bg:#131209;
  --text:#F5F5F5; --muted:#A3A3A3; --faint:#737373;
  /* §16.3：主强调 = 客户端那支浅蓝，第二强调 = 薄荷绿；暖色全站只有品牌口号那一道线 */
  --blue:#A8D8EA; --mint:#BFE8D9; --warm:#F6C24B; --on-accent:#131209;
  /* B2 间距，只有这 13 档 */
  --s0:0px; --s25:2px; --s50:4px; --s75:8px; --s100:12px; --s200:16px; --s300:24px;
  --s400:32px; --s500:40px; --s600:48px; --s700:64px; --s800:80px; --s900:96px;
  /* B1 字号刻度（size / line-height 成对取，不许自己配行高） */
  --t-xs:12px;  --lh-xs:16px;
  --t-sm:14px;  --lh-sm:20px;
  --t-base:16px;--lh-base:24px;
  --t-lg:18px;  --lh-lg:28px;
  --t-xl:20px;  --lh-xl:28px;
  --t-2xl:24px; --lh-2xl:32px;
  --t-3xl:30px; --lh-3xl:36px;
  --t-4xl:36px; --lh-4xl:40px;
  --t-5xl:48px; --lh-5xl:48px;
  --t-6xl:60px; --lh-6xl:60px;
  /* B3 圆角，只有 Tailwind 这几档 */
  --r-sm:2px; --r:4px; --r-md:6px; --r-lg:8px; --r-xl:12px; --r-2xl:16px; --r-3xl:24px; --r-full:9999px;
  /* B7 缓动：全站只有这三条曲线，浏览器默认的 ease/linear 一个不用 */
  --e:cubic-bezier(0.22,1,0.36,1);      /* 基础曲线，位移与布局 */
  --e2:cubic-bezier(0.16,1,0.3,1);      /* 进场，更长的尾 */
  --io:cubic-bezier(0.65,0,0.35,1);     /* 往返循环（呼吸、story） */
  --font:"Geist",system-ui,"Microsoft YaHei UI","PingFang SC","Noto Sans SC",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--s800)}
body{
  margin:0;background:var(--bg);color:var(--text);font-family:var(--font);
  font-size:var(--t-base);line-height:var(--lh-base);font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,figure,table{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
b,strong{font-weight:600}
h1,h2,h3{text-wrap:balance;font-weight:700;letter-spacing:-0.01em}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--blue);outline-offset:var(--s25);border-radius:var(--r-sm)}
::selection{background:var(--blue);color:var(--on-accent)}

.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--s500)}
.wrap.narrow{max-width:800px}
.block{padding:var(--s900) 0}
.block.alt{background:var(--bg-alt)}
.block.warm{background:var(--warm-bg)}
.ic{width:var(--s300);height:var(--s300);flex:none;fill:currentColor}

.skip{position:fixed;top:var(--s200);left:50%;transform:translate(-50%,-160%);z-index:200;
  background:var(--blue);color:var(--on-accent);padding:var(--s75) var(--s200);
  border-radius:var(--r-full);font-size:var(--t-sm);font-weight:600;transition:transform 300ms var(--e)}
.skip:focus{transform:translate(-50%,0)}

/* ---------- 导航（B7：浮起来、离开顶边、胶囊、半透明 + 背景模糊） ---------- */
.navbar{position:fixed;top:var(--s200);left:0;right:0;z-index:100;pointer-events:none}
.nav{pointer-events:auto;width:auto;max-width:max-content;margin:0 auto;display:flex;align-items:center;
  gap:var(--s300);padding:var(--s75) var(--s100) var(--s75) var(--s200);
  background:rgba(24,24,24,.72);backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.09);border-radius:var(--r-full)}
.brand{display:flex;align-items:center}
.brand img{height:28px;width:auto}
.brand-mark{display:none}
.navlinks{display:flex;gap:var(--s50);align-items:center}
.navlinks a{display:block;padding:var(--s75) var(--s100);border-radius:var(--r-full);
  font-size:var(--t-sm);line-height:var(--lh-sm);font-weight:600;color:var(--muted);
  transition:color 300ms var(--e),background-color 300ms var(--e)}
.navlinks a:hover{color:var(--text);background:rgba(255,255,255,.06)}
.navlinks a:active{transform:scale(.98)}
.navlinks a[aria-current="true"]{color:var(--text);background:rgba(255,255,255,.08)}
.navtoggle{display:none;width:var(--s400);height:var(--s400);position:relative;border-radius:var(--r-full)}
.navtoggle span{position:absolute;left:9px;right:9px;height:2px;background:var(--text);border-radius:var(--r-full);
  transition:transform 500ms var(--e),opacity 300ms var(--e)}
.navtoggle span:nth-child(1){top:14px}
.navtoggle span:nth-child(2){bottom:14px}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){transform:translateY(-5px) rotate(-45deg)}

.navpanel{position:fixed;inset:0;z-index:99;background:rgba(19,18,9,.86);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity 300ms var(--e),visibility 0s linear 300ms}
/* 作者 display 会盖掉 [hidden] 的 UA display:none，必须显式补回来 */
.navpanel[hidden]{display:none}
.navpanel.open{opacity:1;visibility:visible;transition:opacity 300ms var(--e)}
.navpanel ul{display:flex;flex-direction:column;gap:var(--s300);text-align:center}
.navpanel a{font-size:var(--t-3xl);line-height:var(--lh-3xl);font-weight:600;opacity:0;
  transform:translateY(var(--s300));transition:opacity 400ms var(--e),transform 400ms var(--e)}
.navpanel.open a{opacity:1;transform:translateY(0)}
.navpanel li:nth-child(1) a{transition-delay:0ms}
.navpanel li:nth-child(2) a{transition-delay:60ms}
.navpanel li:nth-child(3) a{transition-delay:120ms}
.navpanel li:nth-child(4) a{transition-delay:180ms}
.navpanel li:nth-child(5) a{transition-delay:240ms}

/* ---------- 按钮（B2：主按钮 8px 竖 / 12px 横；B9：六态齐） ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s75);
  padding:var(--s75) var(--s100);border-radius:var(--r-lg);font-size:var(--t-base);
  line-height:var(--lh-base);font-weight:600;border:1px solid transparent;
  transition:background-color 300ms var(--e),color 300ms var(--e),transform 300ms var(--e),border-color 300ms var(--e)}
.btn .ic{width:var(--s200);height:var(--s200)}
.btn.primary{background:var(--blue);color:var(--on-accent)}
.btn.primary:hover{background:var(--mint);transform:translateY(-1px)}
.btn.primary:active{transform:scale(.98)}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--bg-raise);color:var(--faint);
  cursor:not-allowed;transform:none;border-color:var(--line)}
.btn[disabled]:hover,.btn[aria-disabled="true"]:hover{background:var(--bg-raise);transform:none}

/* ---------- 1 · Hero ---------- */
.hero{padding-top:var(--s900);padding-bottom:var(--s700);min-height:min(100svh,760px);
  display:flex;align-items:center}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:var(--s600);align-items:center}
.badge{display:inline-flex;align-items:center;gap:var(--s75);padding:var(--s50) var(--s100);
  border:1px solid var(--line);border-radius:var(--r-full);background:var(--bg-alt);
  font-size:var(--t-xs);line-height:var(--lh-xs);font-weight:600;color:var(--muted);width:max-content}
.badge .dot{width:6px;height:6px;border-radius:var(--r-full);background:var(--mint);position:relative}
.badge .dot::after{content:"";position:absolute;inset:0;border-radius:var(--r-full);background:var(--mint);
  animation:ring 2s var(--io) infinite}
/* B5：深色主题标题用 白 → #9B9B9B 的横向渐变，全站唯一一处渐变，只在文字上 */
.hero h1{margin-top:var(--s300);font-size:var(--t-5xl);line-height:var(--lh-5xl);max-width:680px;
  background:linear-gradient(90deg,#FFFFFF 0%,#9B9B9B 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{margin-top:var(--s300);max-width:680px;color:var(--muted);font-size:var(--t-base);line-height:var(--lh-base)}
.hero .btn{margin-top:var(--s400)}
.hero .proof{margin-top:var(--s200);font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--faint)}
.hero .proof b{color:var(--blue);font-weight:600;font-variant-numeric:tabular-nums}

.hero-shot{position:relative;margin:0}
.hero-shot img{width:100%;height:auto;border-radius:var(--r-2xl);border:1px solid var(--line);
  background:var(--bg-alt);position:relative;z-index:1}
.shot-skel{position:absolute;inset:0;border-radius:var(--r-2xl);background:var(--bg-alt);overflow:hidden}
.shot-skel::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:60%;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.05) 50%,rgba(255,255,255,0) 100%);
  animation:sweep 1.6s var(--io) infinite}
.hero-shot.loaded .shot-skel{opacity:0;transition:opacity 400ms var(--e)}

/* hero appear：上浮 6px + 2px 模糊转清晰，60ms 一档，1.2 秒内演完，只播一次 */
[data-hero]{opacity:0;transform:translateY(6px);filter:blur(2px);
  transition:opacity 600ms var(--e2),transform 600ms var(--e2),filter 600ms var(--e2);
  transition-delay:calc(var(--d,0) * 60ms)}
.hero.in [data-hero]{opacity:1;transform:none;filter:blur(0)}

/* ---------- 2 · 数据条 ---------- */
.stats{background:var(--bg-alt);padding:var(--s600) 0}
/* 经营数（累计份数、老师数）2026-10-28 起不对外，这一条只剩版号一格；
   auto-fit 让一格时自动居中，将来加回来两格还是三等分 */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s300);text-align:center}
.stat b{display:block;font-size:var(--t-5xl);line-height:var(--lh-5xl);font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-0.02em}
.stat span{display:block;margin-top:var(--s75);font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--muted)}
.stat-err{margin-top:var(--s300);text-align:center;font-size:var(--t-sm);color:var(--faint)}

/* ---------- 3 · 功能 bento ---------- */
h2{font-size:var(--t-4xl);line-height:var(--lh-4xl)}
h2 .ic-h{display:inline-block;vertical-align:-4px;margin-right:var(--s100);color:var(--warm)}
.lead{margin-top:var(--s200);color:var(--muted);font-size:var(--t-lg);line-height:var(--lh-lg);max-width:680px}
.bento{margin-top:var(--s600);display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s200)}
.card{grid-column:span 4;background:var(--bg-alt);border:1px solid var(--line);
  border-radius:var(--r-2xl);padding:var(--s300);display:flex;flex-direction:column;gap:var(--s200);
  transition:background-color 300ms var(--e),border-color 300ms var(--e),transform 300ms var(--e)}
.card:hover{background:var(--bg-raise);border-color:#3d3d3d;transform:translateY(-2px)}
.card.c5{grid-column:span 5}
.card.c7{grid-column:span 7}
.card.c12{grid-column:span 12;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--s400)}
.card.c12 .card-main{flex:none;max-width:340px;display:flex;flex-direction:column;gap:var(--s200)}
.card.c12 .story{flex:1;margin-top:0}
.card-h{display:flex;align-items:center;gap:var(--s100);color:var(--blue)}
.card-h h3{font-size:var(--t-xl);line-height:var(--lh-xl);color:var(--text);font-weight:600}
.card p{color:var(--muted);font-size:var(--t-sm);line-height:var(--lh-sm)}

/* story loop：每卡一条，3-8 秒一轮，各卡错开；离屏暂停（省电，也防后台偷跑） */
.story{margin-top:auto;height:96px;position:relative;border-radius:var(--r-lg);
  background:var(--bg);border:1px solid var(--line);overflow:hidden;padding:var(--s100)}
.card:not(.in-view) .story *{animation-play-state:paused}
.card:nth-of-type(2) .story *{animation-delay:.9s}
.card:nth-of-type(3) .story *{animation-delay:1.7s}
.card:nth-of-type(4) .story *{animation-delay:2.6s}
.card:nth-of-type(5) .story *{animation-delay:3.4s}
.card:nth-of-type(6) .story *{animation-delay:4.2s}

/* 卡 1：虚线框从左上拖到右下，右下角报出捕获尺寸 */
.st-frame{position:absolute;inset:var(--s100);border:1px dashed #3a3a3a;border-radius:var(--r-md)}
.st-box{position:absolute;inset:var(--s100);border:1px solid var(--blue);border-radius:var(--r-md);
  background:rgba(168,216,234,.09);transform-origin:top left;transform:scale(.04);opacity:0;
  animation:dragbox 5.5s var(--io) infinite}
.st-tag{position:absolute;right:var(--s200);bottom:var(--s200);font-size:var(--t-xs);line-height:var(--lh-xs);
  font-weight:600;color:var(--on-accent);background:var(--blue);padding:var(--s25) var(--s75);
  border-radius:var(--r);opacity:0;animation:tagin 5.5s var(--e) infinite;font-variant-numeric:tabular-nums}
@keyframes dragbox{0%{transform:scale(.04);opacity:0}10%{opacity:1}55%{transform:scale(1);opacity:1}
  90%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}
@keyframes tagin{0%,56%{opacity:0;transform:translateY(4px) scale(.94)}62%{opacity:1;transform:none}
  90%{opacity:1;transform:none}100%{opacity:0;transform:none}}

/* 卡 2：0-6 那排键位依次 pop，右侧分数往上跳 */
.st-keys{display:flex;gap:var(--s75);align-items:center;height:100%}
.st-keys i{width:var(--s400);height:var(--s400);border-radius:var(--r-md);border:1px solid var(--line);
  background:var(--bg-alt);font-style:normal;display:grid;place-items:center;font-size:var(--t-sm);
  color:var(--muted);opacity:.35;transform:translateY(4px);animation:keypop 4s var(--e) infinite}
.st-keys i:nth-child(1){animation-delay:0s}.st-keys i:nth-child(2){animation-delay:.12s}
.st-keys i:nth-child(3){animation-delay:.24s}.st-keys i:nth-child(4){animation-delay:.36s}
.st-keys i:nth-child(5){animation-delay:.48s}.st-keys i:nth-child(6){animation-delay:.6s}
.st-keys i:nth-child(7){animation-delay:.72s}
@keyframes keypop{0%{opacity:.35;transform:translateY(4px)}12%{opacity:1;transform:translateY(0);
  background:var(--blue);color:var(--on-accent);border-color:var(--blue)}
  40%{opacity:1;transform:translateY(0)}70%,100%{opacity:.35;transform:translateY(0)}}
.st-score{position:absolute;right:var(--s200);top:50%;transform:translateY(-50%);
  width:var(--s600);height:var(--s400);overflow:hidden}
.st-score b{position:absolute;inset:0;display:grid;place-items:center;font-size:var(--t-2xl);
  line-height:var(--lh-2xl);font-weight:700;color:var(--mint);opacity:0;font-variant-numeric:tabular-nums}
.st-score b:nth-child(1){animation:slot 4s var(--e) infinite}
.st-score b:nth-child(2){animation:slot 4s var(--e) 1.33s infinite}
.st-score b:nth-child(3){animation:slot 4s var(--e) 2.66s infinite}
@keyframes slot{0%{opacity:0;transform:translateY(10px)}6%{opacity:1;transform:translateY(0)}
  28%{opacity:1;transform:translateY(0)}34%,100%{opacity:0;transform:translateY(-10px)}}

/* 卡 3：两条分数条错开出现 → 差值高亮 → 第三条从上方落进来 */
.st-bars{display:flex;flex-direction:column;gap:var(--s75);height:100%;justify-content:center}
.st-bars i{display:block;height:var(--s75);border-radius:var(--r-full);background:var(--bg-raise);position:relative;overflow:hidden}
.st-bars i::after{content:"";position:absolute;inset:0;border-radius:var(--r-full);background:var(--blue);
  transform-origin:left;transform:scaleX(0);animation:bar 6s var(--e) infinite}
.st-bars i:nth-child(2)::after{background:var(--mint);animation-delay:.5s}
.st-bars i.third::after{background:var(--warm);animation-name:barthird;animation-delay:1.6s}
@keyframes bar{0%{transform:scaleX(0)}22%{transform:scaleX(var(--sx))}88%{transform:scaleX(var(--sx))}100%{transform:scaleX(0)}}
@keyframes barthird{0%,20%{transform:scaleX(0) translateY(-140%)}34%{transform:scaleX(var(--sx)) translateY(0)}
  88%{transform:scaleX(var(--sx)) translateY(0)}100%{transform:scaleX(0) translateY(0)}}
.st-delta{position:absolute;right:var(--s100);bottom:var(--s75);font-size:var(--t-xs);line-height:var(--lh-xs);
  color:var(--warm);font-weight:600;opacity:0;animation:fadein 6s var(--e) 1.9s infinite}
@keyframes fadein{0%{opacity:0}10%{opacity:1}88%{opacity:1}100%{opacity:0}}

/* 卡 4：折线被 clip-path 扫出来，末端那个点亮起，均分数字往上走 */
.st-chart{width:100%;height:100%}
.st-chart polyline{fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  clip-path:inset(0 100% 0 0);animation:wipe 6s var(--e) infinite}
.st-dot{fill:var(--mint);opacity:0;transform:translate(118px,15px);animation:dotin 6s var(--e) infinite}
@keyframes wipe{0%{clip-path:inset(0 100% 0 0)}45%{clip-path:inset(0 0 0 0)}90%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes dotin{0%,40%{opacity:0}50%{opacity:1}90%{opacity:1}100%{opacity:0}}
.st-num{position:absolute;left:var(--s100);top:var(--s75);width:var(--s600);height:var(--s200);overflow:hidden}
.st-num i{position:absolute;inset:0;font-style:normal;font-size:var(--t-sm);line-height:var(--lh-sm);
  font-weight:600;color:var(--muted);opacity:0;font-variant-numeric:tabular-nums}
.st-num i:nth-child(1){animation:slot 6s var(--e) infinite}
.st-num i:nth-child(2){animation:slot 6s var(--e) 2s infinite}
.st-num i:nth-child(3){animation:slot 6s var(--e) 4s infinite}

/* 卡 5：状态点 pulse ring（1.8-2.2s，scale 1→2.6，opacity .55→0），旁边一行字淡入 */
.st-lamp{display:grid;place-items:center;height:100%}
.st-lamp i{width:var(--s100);height:var(--s100);border-radius:var(--r-full);background:var(--warm);position:relative}
.st-lamp i::after{content:"";position:absolute;inset:0;border-radius:var(--r-full);background:var(--warm);
  animation:ring 2s var(--io) infinite}
@keyframes ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.6);opacity:0}}
.st-note{position:absolute;left:0;right:0;bottom:var(--s100);text-align:center;font-size:var(--t-xs);
  line-height:var(--lh-xs);color:var(--muted);font-weight:400;opacity:0;animation:fadein 5s var(--e) .6s infinite}

/* 卡 6：五枚 chip 依次点亮，最后一枚落定整排轻微 pop */
.st-chips{display:flex;gap:var(--s75);align-items:center;height:100%;flex-wrap:wrap;animation:chiprow 6s var(--e) infinite}
.st-chips i{font-style:normal;font-size:var(--t-xs);line-height:var(--lh-xs);padding:var(--s50) var(--s100);
  border-radius:var(--r-full);border:1px solid var(--line);color:var(--faint);opacity:.4;
  animation:chip 6s var(--e) infinite}
.st-chips i:nth-child(1){animation-delay:0s}.st-chips i:nth-child(2){animation-delay:.22s}
.st-chips i:nth-child(3){animation-delay:.44s}.st-chips i:nth-child(4){animation-delay:.66s}
.st-chips i:nth-child(5){animation-delay:.88s}
@keyframes chip{0%{opacity:.4;color:var(--faint);border-color:var(--line);background:none}
  10%{opacity:1;color:var(--on-accent);border-color:var(--blue);background:var(--blue)}
  70%{opacity:1;color:var(--on-accent);border-color:var(--blue);background:var(--blue)}
  86%,100%{opacity:.4;color:var(--faint);border-color:var(--line);background:none}}
@keyframes chiprow{0%,72%{transform:scale(1)}80%{transform:scale(1.02)}92%,100%{transform:scale(1)}}
@keyframes sweep{0%{transform:translateX(0)}100%{transform:translateX(266%)}}

/* ---------- 4 · 教育的意义（整屏大图，字浮在图上） ----------
   2026-10-28 他推翻 §15.7 的 sticky 双栏：这一段要的是「人站进那幅画里」，
   所以图铺满一屏、字压在图上，草与落叶各动各的。全站仍然只有这一幅插画。 */
.meaning{position:relative;min-height:100svh;display:flex;align-items:center;
  background:var(--warm-bg);overflow:clip}
.meaning-fig{position:absolute;inset:0;margin:0;overflow:hidden;
  opacity:0;filter:blur(8px);transition:opacity 900ms var(--e),filter 900ms var(--e)}
.meaning-fig.in{opacity:1;filter:blur(0)}
.meaning-img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;will-change:transform;
  transform:scale(1.06)}
.meaning-fig.in .meaning-img{animation:imgin 900ms var(--e) both,kb 26s var(--io) 900ms infinite alternate}
.meaning-fig.off .meaning-img{animation-play-state:paused}
@keyframes imgin{from{transform:scale(1.06)}to{transform:scale(1)}}
/* 呼吸之外再叠一层极小的摆：整幅画像被风吹得轻轻晃，而不是在推镜头 */
@keyframes kb{from{transform:scale(1) translate3d(0,0,0) rotate(.2deg)}
  to{transform:scale(1.045) translate3d(-.8%,-.4%,0) rotate(-.25deg)}}
/* 压在图上两层：一层保字的对比，一层当树缝里那束会挪的光。
   B4 禁的是「版块底色做成渐变」，这两层是图像化处理，底色仍是纯平 #131209。 */
.meaning-mask{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(19,18,9,.60) 0%,rgba(19,18,9,.14) 34%,
    rgba(19,18,9,.26) 58%,rgba(19,18,9,.76) 100%)}
.meaning-glow{position:absolute;inset:0;pointer-events:none;opacity:.06;
  background:radial-gradient(60% 50% at 30% 25%,#FFF3C4 0%,rgba(255,243,196,0) 70%);
  animation:glow 30s var(--io) infinite}
@keyframes glow{0%{opacity:.06;transform:translate(0,0)}50%{opacity:.14;transform:translate(8%,6%)}100%{opacity:.06;transform:translate(0,0)}}
/* 落叶：装饰件，不算界面图标（B6 的 Phosphor 只管图标）；只动 transform/opacity */
.leaf{position:absolute;top:-8%;left:var(--x,20%);width:var(--sz,14px);height:var(--sz,14px);
  color:var(--mint);opacity:0;pointer-events:none;will-change:transform,opacity;
  animation:drift var(--du,12s) var(--io) var(--dl,0s) infinite}
.leaf.warm{color:var(--warm)}
@keyframes drift{
  0%{transform:translate3d(0,-6vh,0) rotate(-10deg);opacity:0}
  10%{opacity:.8}
  40%{transform:translate3d(5vw,38vh,0) rotate(130deg)}
  70%{opacity:.5;transform:translate3d(-1vw,64vh,0) rotate(230deg)}
  100%{transform:translate3d(3vw,96vh,0) rotate(330deg);opacity:0}}
/* 前景那排草：钉在根上摆，每片自己的节拍；不用 blur——本机是软件合成，
   滤镜套在每帧都在动的元素上会一路掉帧 */
.meaning-grass{position:absolute;left:-2%;bottom:-2%;width:104%;height:18vh;
  color:#1F3A20;opacity:.26;pointer-events:none}
.blade{transform-box:fill-box;transform-origin:50% 100%;
  animation:sway var(--du,6s) var(--io) var(--dl,0s) infinite alternate}
@keyframes sway{from{transform:rotate(-3deg)}to{transform:rotate(3.4deg)}}

.meaning-text{position:relative;z-index:3;display:flex;flex-direction:column;gap:var(--s600);
  /* 只写 padding-block：padding 简写会把 .wrap 的左右内边距清零，手机上字直接顶出屏幕左沿 */
  padding-block:var(--s800)}
.tagline{font-size:var(--t-4xl);line-height:var(--lh-5xl);font-weight:700;letter-spacing:-0.01em;
  max-width:680px;text-shadow:0 1px 20px rgba(19,18,9,.55)}
.tagline.turn{font-size:var(--t-2xl);line-height:var(--lh-2xl);font-weight:600;color:var(--text)}
/* 逐词点亮只改颜色，不改位移：inline-block 一旦带 translateY，
   中英混排的基线差会让四行看起来行距不一致（他点出来的那处） */
.tagline .w{color:rgba(245,245,245,.34);display:inline-block;
  transition:color 600ms var(--e);transition-delay:calc(var(--i,0) * 45ms)}
.tagline .w.lit{color:var(--text)}
.tagline.turn .w{color:rgba(245,245,245,.34)}
.tagline.turn .w.lit{color:var(--mint)}
.meaning-text .terms{margin-top:var(--s400)}

/* ---------- 5 · 节日与关怀 ---------- */
/* 七枚排两行：前四枚不看年龄，后三枚看。后三枚摊成一排三枚，两行的边才对得齐 */
.chips{margin-top:var(--s600);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s200)}
.chip{grid-column:span 3;background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r-2xl);
  padding:var(--s300);display:flex;flex-direction:column;gap:var(--s75);
  opacity:0;transform:translateY(var(--s300)) scale(.985);
  transition:opacity 600ms var(--e),transform 600ms var(--e),border-color 300ms var(--e),background-color 300ms var(--e)}
.chip.pop{opacity:1;transform:none}
.chip:nth-child(n+5){grid-column:span 4}
.chip:nth-child(1){transition-delay:0ms}.chip:nth-child(2){transition-delay:90ms}
.chip:nth-child(3){transition-delay:180ms}.chip:nth-child(4){transition-delay:270ms}
.chip:nth-child(5){transition-delay:360ms}.chip:nth-child(6){transition-delay:450ms}
.chip:nth-child(7){transition-delay:540ms}
.chip:hover{background:var(--bg-raise);border-color:#3d3d3d}
.chip b{font-size:var(--t-xl);line-height:var(--lh-xl);font-weight:600;color:var(--warm)}
.chip span{font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--muted)}
.chip .who{color:var(--mint)}
.chip-skel{height:128px;border-radius:var(--r-2xl);background:var(--bg-alt);border:1px solid var(--line)}
.fine{margin-top:var(--s300);font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--faint);max-width:680px}
.fine b{color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- 6 · 价格 ---------- */
.price-grid{margin-top:var(--s600);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:var(--s300);align-items:start}
.ptable,.ttable{width:100%;border-collapse:collapse;background:var(--bg-alt);
  border:1px solid var(--line);border-radius:var(--r-2xl);overflow:hidden;font-size:var(--t-sm)}
.ptable caption{text-align:left;font-size:var(--t-xs);line-height:var(--lh-xs);color:var(--faint);
  padding-bottom:var(--s100);font-weight:600}
.ptable th,.ptable td,.ttable th,.ttable td{padding:var(--s100) var(--s200);text-align:left;
  line-height:var(--lh-sm);vertical-align:middle}
.ptable thead th,.ttable thead th{font-size:var(--t-xs);line-height:var(--lh-xs);color:var(--muted);
  font-weight:600;background:var(--bg-raise)}
.ptable tbody tr,.ttable tbody tr{border-top:1px solid var(--line);transition:background-color 300ms var(--e)}
.ptable tbody tr:hover,.ttable tbody tr:hover{background:var(--bg-raise)}
.ptable tbody th[scope="row"]{font-weight:400;color:var(--muted)}
.ptable td,.ttable td{font-variant-numeric:tabular-nums}
.ptable td b,.ttable td b,.ptable th b{font-weight:600;color:var(--text)}
.ptable .same{text-align:center}
.ptable .yes{color:var(--mint);text-align:center;font-weight:600}
.ptable .no{color:var(--faint);text-align:center}
.ptable .none{color:var(--faint);text-align:center}
.ptable .tbd{color:var(--faint);text-align:center;font-size:var(--t-xs);line-height:var(--lh-xs)}
/* 「办不办卡」那句是建议不是条款，所以做成一条独立标注。
   B4 不许卡片只有一边有边框，所以整圈描薄荷色，不靠单边竖线挑出来。 */
.rec{margin-top:var(--s400);background:var(--bg-alt);border:1px solid var(--mint);
  border-radius:var(--r-xl);padding:var(--s300) var(--s400);
  font-size:var(--t-base);line-height:var(--lh-base);color:var(--muted);max-width:820px}
.rec b{color:var(--text);font-weight:600}
.tiers{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r-2xl);padding:var(--s300)}
.tiers h3{font-size:var(--t-base);line-height:var(--lh-base);font-weight:600;color:var(--muted)}
.tiers .ttable{margin-top:var(--s200);background:var(--bg);border-color:var(--line)}
.ttable td:last-child,.ttable th:last-child{text-align:right}
.ttable td:nth-child(2){color:var(--muted)}
.ttable td:last-child{font-weight:600;color:var(--text)}
.tiers .btn{width:100%;margin-top:var(--s200)}
.tiers .fine{margin-top:var(--s200)}
.tiers .validity{border-top:1px solid var(--line);padding-top:var(--s200);margin-top:var(--s200);max-width:none}
details.terms{margin-top:var(--s200)}
details.terms summary{cursor:pointer;font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--muted);
  list-style:none;display:flex;align-items:center;gap:var(--s75);transition:color 300ms var(--e)}
details.terms summary::-webkit-details-marker{display:none}
details.terms summary:hover{color:var(--text)}
details.terms summary .caret{width:var(--s200);height:var(--s200);transition:transform 300ms var(--e)}
details.terms[open] summary .caret{transform:rotate(180deg)}
details.terms p{margin-top:var(--s100);font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--faint);white-space:pre-line}

/* ---------- 7 · 三步 ---------- */
.steps{margin-top:var(--s600);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s300);counter-reset:s}
.steps li{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r-2xl);padding:var(--s300)}
.steps b{font-size:var(--t-sm);line-height:var(--lh-sm);font-weight:600;color:var(--blue);
  font-variant-numeric:tabular-nums}
.steps h3{margin-top:var(--s100);font-size:var(--t-2xl);line-height:var(--lh-2xl);font-weight:600}
.steps p{margin-top:var(--s75);font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--muted)}

/* ---------- 8 · 下载 ---------- */
.dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s600);align-items:start}
.dl-meta{margin-top:var(--s300);display:flex;flex-direction:column;gap:var(--s100)}
.dl-meta li{display:flex;align-items:center;gap:var(--s100);font-size:var(--t-sm);
  line-height:var(--lh-sm);color:var(--muted)}
.dl-meta .ic{width:var(--s200);height:var(--s200);color:var(--blue)}
.dl-meta b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.dl .btn{margin-top:var(--s400)}
.dl-notes{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-2xl);padding:var(--s300)}
.dl-notes h3{font-size:var(--t-sm);line-height:var(--lh-sm);font-weight:600;color:var(--muted)}
.dl-notes p{margin-top:var(--s100);font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--faint);white-space:pre-line}

/* ---------- 9 · 四条底线 ---------- */
.lines{margin-top:var(--s600);display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s200)}
.lines li{background:rgba(255,255,255,.03);border:1px solid #2a2819;border-radius:var(--r-2xl);
  padding:var(--s300);display:flex;flex-direction:column;gap:var(--s75)}
.lines .ic{color:var(--warm);margin-bottom:var(--s100)}
.lines h3{font-size:var(--t-xl);line-height:var(--lh-xl);font-weight:600}
.lines p{font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--muted)}
.lines b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- 10 · FAQ ---------- */
.faq{margin-top:var(--s600);display:flex;flex-direction:column;gap:var(--s100)}
.faq details{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r-xl);
  transition:background-color 300ms var(--e),border-color 300ms var(--e)}
.faq details:hover{border-color:#3d3d3d}
.faq details[open]{background:var(--bg-raise)}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s200);padding:var(--s200) var(--s300);font-size:var(--t-base);line-height:var(--lh-base);font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary .caret{width:var(--s200);height:var(--s200);color:var(--faint);flex:none;
  transition:transform 400ms var(--e),color 300ms var(--e)}
.faq details[open] summary .caret{transform:rotate(180deg);color:var(--blue)}
.faq-a{padding:0 var(--s300) var(--s200);opacity:0;transform:translateY(var(--s75));
  animation:faqin 400ms var(--e) forwards}
.faq-a p{font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--muted)}
.faq-a b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
@keyframes faqin{to{opacity:1;transform:none}}

/* ---------- 10.5 · 用户协议 ----------
   条款是给人读第二遍的东西，不是 FAQ 的一句话：正文升到 base 字号，
   展开的那一条整圈描蓝（B4 不许单边边框），知道读到哪儿。 */
.doc details[open]{border-color:var(--blue)}
.doc .faq-a{padding-bottom:var(--s300)}
.doc .faq-a p{font-size:var(--t-base);line-height:var(--lh-base)}
.doc .faq-a p+p{margin-top:var(--s100)}
/* 全站 reset 把 ul,ol 的 list-style 清零了，条款里的「这三步」要重新点名，否则读不出顺序 */
.doc .faq-a ol{margin-top:var(--s100);padding-left:var(--s400);list-style:decimal}
.doc .faq-a ol+p{margin-top:var(--s100)}
.doc .faq-a li{font-size:var(--t-base);line-height:var(--lh-base);color:var(--muted)}
.doc .faq-a li+li{margin-top:var(--s75)}
.doc .faq-a li::marker{color:var(--mint);font-variant-numeric:tabular-nums}

/* ---------- 10.6 · 法务单页（/privacy） ----------
   条款是给人从头读到尾、还要 Ctrl+F 的，所以这一页不做折叠、不上进场动效：
   整页静态，顶栏一条链回首页。字号比营销页升一档、行宽钉死，读长文不累。
   颜色与间距仍然只用上面那几档 token，不在这页另起一套。 */
.docbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s200);
  padding:var(--s400) 0 var(--s100)}
.docbar .back{display:inline-flex;align-items:center;gap:var(--s75);font-size:var(--t-sm);
  line-height:var(--lh-sm);font-weight:600;color:var(--muted);transition:color 300ms var(--e)}
.docbar .back:hover{color:var(--text)}
.law h1{font-size:var(--t-5xl);line-height:var(--lh-5xl);max-width:68ch}
.law h2{margin-top:var(--s700);font-size:var(--t-2xl);line-height:var(--lh-2xl)}
.law p,.law li{color:var(--muted);font-size:var(--t-base);line-height:var(--lh-base);max-width:68ch}
.law p{margin-top:var(--s200)}
.law p b,.law li b{color:var(--text);font-weight:600}
.law ul{margin-top:var(--s200);padding-left:var(--s300);list-style:disc}
.law li+li{margin-top:var(--s100)}
.law li::marker{color:var(--mint)}
.law table{margin-top:var(--s300)}
.law a{color:var(--blue);text-decoration:underline;text-underline-offset:var(--s25)}
.law code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.92em;color:var(--mint);
  background:var(--bg-raise);border:1px solid var(--line);border-radius:var(--r);padding:0 var(--s50)}
/* .law p 的权重比 .lead / .fine 高，不补这两条就会被基础字号吞掉 */
.law p.lead{margin-top:var(--s300);font-size:var(--t-lg);line-height:var(--lh-lg)}
.law p.fine{margin-top:var(--s600);font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--faint)}

/* ---------- 11 · Final CTA + 页脚 ---------- */
.cta{background:var(--bg-alt)}
.center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--s300)}
.center .lead{margin-top:0}
.slogan{position:relative;padding-bottom:var(--s200);font-size:var(--t-lg);line-height:var(--lh-lg);
  color:var(--muted);margin-top:var(--s200)}
/* 全站唯一一处暖色：品牌口号下面那道 2px 线，黄取 logo 星星那一颗（§16.3） */
.slogan::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:var(--s600);height:var(--s25);background:var(--warm);border-radius:var(--r-full)}

.foot{background:var(--warm-bg);padding:var(--s800) 0 var(--s400)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:var(--s400)}
.foot-brand img{height:28px;width:auto}
.foot-brand p{margin-top:var(--s200);font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--muted);max-width:280px}
.foot-col h3{font-size:var(--t-xs);line-height:var(--lh-xs);font-weight:600;color:var(--faint);
  text-transform:none;margin-bottom:var(--s100)}
.foot-col p{font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--muted);margin-top:var(--s75)}
.foot-col a,.linklike{color:var(--muted);font-size:var(--t-sm);line-height:var(--lh-sm);
  transition:color 300ms var(--e)}
.foot-col a:hover,.linklike:hover{color:var(--blue)}
.foot-col b{color:var(--text);font-weight:600}
.nolink{color:var(--faint);cursor:not-allowed;border-bottom:1px dotted #3a3a3a}
.admin-msg{margin-left:var(--s75);font-size:var(--t-xs);line-height:var(--lh-xs);color:var(--warm)}
.foot-legal{margin-top:var(--s600);padding-top:var(--s300);border-top:1px solid #2a2819}
.foot-legal p{font-size:var(--t-xs);line-height:var(--lh-xs);color:var(--faint)}
/* 备案号要能点，但不能长得像广告：沿用本行字色，只留一条虚线表示可点 */
.foot-legal a{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.foot-legal a:hover{color:var(--blue)}

/* ---------- 滚动进场（B7：上浮 32px、淡入、600-800ms、只播一次） ---------- */
.reveal{opacity:0;transform:translateY(var(--s400));
  transition:opacity 700ms var(--e),transform 700ms var(--e)}
.reveal.in{opacity:1;transform:none}

@media (max-width:1023px){
  .wrap{padding:0 var(--s300)}
  .hero{padding-top:var(--s800);min-height:0}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:var(--s500)}
  .hero h1{font-size:var(--t-4xl);line-height:var(--lh-4xl)}
  .hero-shot{max-width:640px}
  .card.c5,.card.c7{grid-column:span 6}
  .card.c4{grid-column:span 6}
  .card.c12{grid-column:span 12;flex-direction:column;align-items:stretch}
  .card.c12 .card-main{max-width:none}
  .price-grid,.dl{grid-template-columns:minmax(0,1fr)}
  .meaning-text{gap:var(--s500);padding-block:var(--s700)}
  .tagline{font-size:var(--t-3xl);line-height:var(--lh-5xl)}
  .chip,.chip:nth-child(n+5){grid-column:span 6}
}
@media (max-width:720px){
  .block{padding:var(--s700) 0}
  .navlinks{display:none}
  .navtoggle{display:block}
  .nav{gap:var(--s200);padding:var(--s75) var(--s100)}
  h2{font-size:var(--t-3xl);line-height:var(--lh-3xl)}
  .lead{font-size:var(--t-base);line-height:var(--lh-base)}
  .stats-row{grid-template-columns:minmax(0,1fr);gap:var(--s400)}
  .stat b{font-size:var(--t-4xl);line-height:var(--lh-4xl)}
  .card.c5,.card.c7,.card.c4{grid-column:span 12}
  /* 单列时跨度必须清掉：1 列的网格上写 span 6 会凭空撑出隐式列，chip 会横着溢出 */
  .chips{grid-template-columns:minmax(0,1fr);gap:var(--s100)}
  .chip,.chip:nth-child(n+5){grid-column:auto}
  .steps,.lines{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s300)}
  /* 手机上字压在下三分之一：让出树冠，字落在草地上 */
  .meaning{align-items:flex-end}
  .meaning-img{object-position:50% 42%}
  .meaning-text{gap:var(--s400);padding-block:var(--s600) var(--s700)}
  /* 字在下半屏（约 61%–92%），压暗带只在字那一段提前起效：
     上半屏保持原图的亮度，否则树和草地会一起发灰 */
  .meaning-mask{background:linear-gradient(180deg,rgba(19,18,9,.52) 0%,rgba(19,18,9,.10) 30%,
    rgba(19,18,9,.22) 50%,rgba(19,18,9,.58) 62%,rgba(19,18,9,.86) 100%)}
  .tagline{font-size:var(--t-2xl);line-height:var(--lh-2xl)}
  .tagline.turn{font-size:var(--t-lg);line-height:var(--lh-lg)}
  /* 三列的「收集什么」表在 390px 上会被挤成一列一个字，读不下去。
     改成一条一条竖着排，列名挪到格子前面当小标签；表头不显示但保留给读屏软件。 */
  .law table.stack,.law table.stack caption,.law table.stack tbody,.law table.stack tr,
  .law table.stack th,.law table.stack td{display:block;width:auto}
  .law table.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .law table.stack tbody th[scope="row"]{padding:var(--s200) var(--s200) var(--s25);
    color:var(--text);font-weight:600;font-size:var(--t-sm);line-height:var(--lh-sm)}
  .law table.stack td{padding:var(--s25) var(--s200)}
  .law table.stack td[data-col]::before{content:attr(data-col) " · ";color:var(--faint);font-weight:600}
  .law table.stack tr:last-child td:last-child{padding-bottom:var(--s200)}
}
@media (max-width:480px){
  /* §16.2：≤480px 导航只留图形，字藏起来 */
  .brand-full{display:none}
  .brand-mark{display:block}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition-duration:1ms !important}
  [data-hero],.reveal,.chip,.tagline .w,.faq-a{opacity:1 !important;transform:none !important;filter:none !important}
  .meaning-fig{opacity:1;filter:none}
  .meaning-img{transform:none}
  .shot-skel{display:none}
  /* 静止版：落叶靠动画才有落点，直接收掉；草停在摆过一点的位置，字全亮 */
  .leaf{display:none}
  .blade{transform:rotate(.5deg)}
}