/* 零点世界 · 视觉系统 v3 —— 纸绿·生长（与首页 index.html 同一套）
   变量名沿用旧名、值重映射为绿调，各页 var(--xxx) 自动适配。终端(黑底)自包含、不受影响。 */
@font-face{font-family:"NSerifSC";src:url("fonts/nserifsc-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"NSerifSC";src:url("fonts/nserifsc-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  /* 纸面层（对齐首页：--bg/--raise/--sink） */
  --paper:#eef2ea; --paper-raise:#ffffff; --paper-sink:#e4eae0;
  /* 旧名重映射：原"深底"系 → 现"纸面/浅面"；原"浅字"系(bone) → 现"墨字" */
  --ink-950:#eef2ea; --ink-900:#ffffff; --ink-800:#e4eae0; --ink-700:#dbe3d6;
  --bone:#1b241d; --bone-dim:#3d4a40; --bone-mute:#6a7268;          /* 墨绿黑 / 灰绿 / 浅灰绿 */
  --line:rgba(27,36,29,.12); --line-soft:rgba(27,36,29,.06);
  /* 点缀：生长绿（对齐首页 --green 系），原 gold 系统一映射到绿 */
  --gold:#2f7d56; --gold-lite:#3a9066; --gold-deep:#245f42;
  --jade:#3E8A6E; --ember:#c8652a;                                  /* 在线绿 / 暖橘（警示&强调） */
  --maxw:1140px; --ease:cubic-bezier(.22,.61,.36,1);
  --display:"NSerifSC","Songti SC","STSong","Noto Serif SC",Georgia,serif;
  --serif:"NSerifSC","Songti SC","Noto Serif SC",Georgia,serif;
  --sans:"PingFang SC","Microsoft YaHei","Noto Sans SC",-apple-system,system-ui,sans-serif;
  --mono:"SF Mono","JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--paper);color:var(--bone-dim);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* —— 背景：纸面 + 极淡暖晕，安静不抢戏 —— */
.bg{position:fixed;inset:0;z-index:-2;background:radial-gradient(120% 80% at 50% -20%,#f7faf3 0%,var(--paper) 55%)}
.bg::before,.bg::after{content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;will-change:transform;transform:translateZ(0)}
.bg::before{width:55vw;height:55vw;left:-12vw;top:-18vw;background:radial-gradient(circle,rgba(47,125,86,.07),transparent 70%);animation:drift1 30s var(--ease) infinite alternate}
.bg::after{width:48vw;height:48vw;right:-12vw;top:24vh;background:radial-gradient(circle,rgba(224,122,55,.05),transparent 70%);animation:drift2 36s var(--ease) infinite alternate}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.018;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes drift1{to{transform:translate(6vw,5vh)}}
@keyframes drift2{to{transform:translate(-5vw,-4vh)}}

@media (prefers-reduced-motion: reduce){ .bg::before,.bg::after,.core .ring,.seed{animation:none!important} .nav{backdrop-filter:none} }
html.lite .bg::before,html.lite .bg::after{animation:none}
html.lite .bg::after{display:none}
html.lite .nav{backdrop-filter:none;background:rgba(238,242,234,.96)}
html.lite .grain{display:none}
html.lite .core .ring{animation:none;opacity:.25}
html.lite *{transition:none!important}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.kicker{font-family:var(--mono);font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.em{font-family:var(--display);font-style:italic;color:var(--gold)}
.hr-gold{height:1px;background:linear-gradient(90deg,var(--gold),transparent);flex:1;max-width:120px}

/* —— 顶栏 —— */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(8px);background:rgba(238,242,234,.82);border-bottom:1px solid var(--line-soft)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-size:1.3rem;color:var(--bone);font-weight:700;letter-spacing:.02em}
.brand small{font-family:var(--mono);font-size:.54rem;letter-spacing:.34em;color:var(--bone-mute)}
.seed{width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(47,125,86,.16)}
.nav-links{display:flex;align-items:center;gap:28px;font-size:.88rem;color:var(--bone-dim)}
.nav-links a{position:relative;transition:color .3s}
.nav-links a:hover{color:var(--bone)}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--gold);transition:width .35s var(--ease)}
.nav-links a:not(.btn):hover::after{width:100%}

/* —— 按钮 —— */
.btn{font-family:var(--sans);font-weight:600;font-size:.9rem;border:none;cursor:pointer;border-radius:999px;padding:12px 26px;transition:all .3s var(--ease);display:inline-flex;align-items:center;gap:9px;letter-spacing:.01em;text-decoration:none}
.btn-gold{background:var(--gold);color:#fff;box-shadow:0 6px 20px -10px rgba(47,125,86,.6)}
.btn-gold:hover{background:var(--gold-deep);transform:translateY(-1px);box-shadow:0 12px 28px -12px rgba(47,125,86,.7)}
.btn-ghost{background:transparent;color:var(--bone);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* —— HERO —— */
.hero{position:relative;padding:96px 0 76px;text-align:center}
.core{position:relative;width:74px;height:74px;margin:0 auto 26px}
.core .dot{position:absolute;inset:30px;border-radius:50%;background:var(--gold)}
.core .ring{position:absolute;inset:0;border:1px solid var(--gold);border-radius:50%;opacity:0;animation:ripple 3.6s ease-out infinite}
.core .ring:nth-child(2){animation-delay:1.2s}.core .ring:nth-child(3){animation-delay:2.4s}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(2.3rem,6vw,4.4rem);line-height:1.12;color:var(--bone);letter-spacing:.01em;margin:16px 0}
.hero .lede{max-width:640px;margin:20px auto 0;font-size:clamp(1rem,2vw,1.14rem);color:var(--bone-dim)}
.hero .lede b{color:var(--bone);font-weight:600}
.hero-cta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.hero-note{margin-top:20px;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--bone-mute)}
.eyebrow-row{display:inline-flex;align-items:center;gap:16px;justify-content:center}

/* —— 区块通用 —— */
section.band{padding:78px 0;position:relative}
.sec-head{max-width:700px;margin:0 auto 46px;text-align:center}
.sec-head h2{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,4vw,2.5rem);color:var(--bone);line-height:1.2;margin:10px 0}
.sec-head p{color:var(--bone-mute);font-size:1rem}

/* —— 卡片通用底（浅面 + 细线 + 极淡阴影）—— */
.creed{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.creed .item,.step,.promise,.show{background:var(--paper-raise);border:1px solid var(--line-soft);border-radius:16px;box-shadow:0 1px 3px rgba(26,22,20,.03),0 12px 30px -22px rgba(26,22,20,.18)}
.creed .item{padding:26px;transition:border-color .35s,transform .35s,box-shadow .35s}
.creed .item:hover,.step:hover,.promise:hover{border-color:var(--line);transform:translateY(-3px);box-shadow:0 2px 6px rgba(26,22,20,.04),0 20px 40px -24px rgba(26,22,20,.22)}
.creed .item .ic{font-size:1.4rem;margin-bottom:12px;display:block}
.creed .item h3{font-family:var(--serif);font-weight:700;font-size:1.16rem;color:var(--bone);margin-bottom:8px}
.creed .item p{font-size:.92rem;color:var(--bone-dim)}
.creed .item .law{display:block;margin-top:10px;font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;color:var(--gold)}

/* —— 三步 —— */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.step{padding:28px;position:relative;transition:border-color .35s,transform .35s,box-shadow .35s}
.step::before{counter-increment:s;content:"0"counter(s);font-family:var(--display);font-size:2rem;color:var(--gold);opacity:.4}
.step h3{font-family:var(--serif);font-weight:700;color:var(--bone);font-size:1.18rem;margin:8px 0}
.step p{font-size:.9rem;color:var(--bone-dim)}
.step .where{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;color:var(--gold);margin-top:12px;display:block}

/* —— 配方展示卡 —— */
.show{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;padding:32px}
.show .play{position:relative;aspect-ratio:16/11;border-radius:12px;overflow:hidden;border:1px solid var(--line-soft);background:linear-gradient(135deg,var(--paper-sink),#cfdcc8);display:grid;place-items:center}
.show .play .pulse{width:60px;height:60px;border-radius:50%;background:rgba(47,125,86,.12);display:grid;place-items:center}
.show .play .pulse::after{content:"";border-left:17px solid var(--gold);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:5px}
.show .play .rec{position:absolute;top:13px;left:15px;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--bone-dim);display:flex;align-items:center;gap:7px}
.show .play .rec i{width:7px;height:7px;border-radius:50%;background:var(--ember);animation:pulse 1.4s infinite}
.show h3{font-family:var(--display);font-weight:700;font-size:1.45rem;color:var(--bone);margin-bottom:8px}
.show .who{font-size:.86rem;color:var(--bone-mute);margin-bottom:14px}
.show .meta{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.metachip{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;border:1px solid var(--line-soft);border-radius:8px;padding:6px 11px;color:var(--bone-dim);background:var(--paper-sink)}
.metachip b{color:var(--gold);font-weight:600}

/* —— 三个务实承诺 —— */
.promise-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.promise{padding:26px;text-align:center;transition:border-color .35s,transform .35s,box-shadow .35s}
.promise .pic{font-size:1.6rem;display:block;margin-bottom:10px}
.promise h4{font-family:var(--serif);font-weight:700;font-size:1.08rem;color:var(--bone);margin-bottom:7px}
.promise p{font-size:.88rem;color:var(--bone-dim)}

/* —— 安装/命令框 —— */
.cmd{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:13px 16px;background:var(--paper-raise);font-family:var(--mono);font-size:.84rem;color:var(--bone);margin-top:18px;flex-wrap:wrap}
.cmd .copy{margin-left:auto;cursor:pointer;color:#fff;background:var(--gold);border-radius:7px;padding:5px 12px;font-size:.74rem}

/* —— CTA band —— */
.cta-band{text-align:center;padding:88px 0}
.cta-band h2{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,5vw,3.1rem);color:var(--bone);line-height:1.15;margin-bottom:14px}
.cta-band .em{font-style:italic}

/* —— 页脚 —— */
footer{border-top:1px solid var(--line-soft);padding:50px 0 38px;margin-top:36px}
.foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot-tag{max-width:340px;color:var(--bone-mute);font-size:.86rem;margin-top:12px}
.foot-cols{display:flex;gap:56px;flex-wrap:wrap}
.foot-cols h4{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-mute);margin-bottom:14px}
.foot-cols a{display:block;color:var(--bone-dim);font-size:.88rem;margin-bottom:9px;transition:color .3s}
.foot-cols a:hover{color:var(--gold)}
.foot-base{display:flex;align-items:center;justify-content:space-between;color:var(--bone-mute);font-size:.78rem;flex-wrap:wrap;gap:16px}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a{color:var(--bone-dim);transition:color .3s}
.foot-links a:hover{color:var(--gold)}

/* —— 进场动画 —— */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes ripple{0%{opacity:.5;transform:scale(.45)}100%{opacity:0;transform:scale(1.3)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* —— 配方墙 —— */
.feed-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:640px){.feed-grid{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.feed-grid{grid-template-columns:1fr 1fr 1fr}}
.rcard{display:block;border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;background:var(--paper-raise);text-decoration:none;box-shadow:0 1px 3px rgba(26,22,20,.03),0 12px 30px -24px rgba(26,22,20,.2);transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s}
.rcard:hover{border-color:var(--line);transform:translateY(-4px);box-shadow:0 2px 8px rgba(26,22,20,.05),0 22px 44px -26px rgba(26,22,20,.28)}
.rcard .cover{height:120px;position:relative;display:grid;place-items:center}
.rcard .cover .glyph{font-size:2.2rem}
.rcard .cover .cat{position:absolute;top:10px;left:11px;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;color:#fff;background:rgba(26,22,20,.35);border-radius:999px;padding:3px 9px}
.rcard .cover .play{position:absolute;bottom:10px;right:12px;font-family:var(--mono);font-size:.58rem;color:var(--bone-dim);display:flex;align-items:center;gap:5px}
.rcard .cover .play i{width:6px;height:6px;border-radius:50%;background:var(--ember)}
.rcard .bd{padding:15px 16px}
.rcard h3{font-family:var(--serif);font-weight:700;font-size:1.02rem;color:var(--bone);line-height:1.35;margin-bottom:6px}
.rcard p{font-size:.83rem;color:var(--bone-dim);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rcard .ft{display:flex;justify-content:space-between;align-items:center;margin-top:13px;font-size:.72rem;color:var(--bone-mute)}
.rcard .ft b{color:var(--gold);font-weight:700}
.feed-empty{grid-column:1/-1;text-align:center;color:var(--bone-mute);padding:30px;font-size:.9rem}

/* —— 移动端汉堡 —— */
.nav-burger{display:none;background:none;border:0;color:var(--bone);font-size:1.5rem;line-height:1;cursor:pointer;padding:4px 6px}
@media(max-width:780px){
  .creed,.steps3,.show,.promise-row{grid-template-columns:1fr}
  .nav-burger{display:block}
  .nav-links{position:absolute;top:70px;left:14px;right:14px;flex-direction:column;align-items:stretch;gap:4px;
    background:var(--paper-raise);border:1px solid var(--line);border-radius:14px;padding:12px;
    box-shadow:0 24px 50px -24px rgba(26,22,20,.3);transform:scaleY(.55);transform-origin:top;opacity:0;pointer-events:none;transition:.24s var(--ease)}
  .nav.open .nav-links{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{padding:12px 14px;border-radius:9px;font-size:.95rem}
  .nav-links a:not(.btn)::after{display:none}
  .nav-links a:not(.btn):active,.nav-links a:not(.btn):hover{background:var(--jade-soft,rgba(47,125,86,.08));color:var(--gold)}
  .nav-links .btn{justify-content:center;margin-top:6px}
}