:root{
  /* 青绿水墨 · 桃花源 配色：青绿为主 + 暖桃点缀（更深青绿 / 更淡暖桃） */
  --paper:#D6E5DC;        /* 青绿宣纸底（加深） */
  --paper2:#C7D9CE;       /* 略深青绿纸 */
  --ink:#1E3A32;          /* 墨绿主文字（加深） */
  --ink-soft:#6B857B;     /* 淡墨绿辅助 */
  --ink-faint:#A9C3B9;    /* 极淡青绿（桃花源潜底） */
  --warm:#F0B28E;         /* 暖桃点缀·品牌暖橙（淡化） */
  --rose:#DD8FA8;         /* 暖桃点缀·品牌玫瑰（淡化） */
  --peach:#CFE3D8;        /* 晨曦青碧（主色光） */
  --line:#C2D6CC;
  --shadow:0 10px 40px rgba(60,120,90,.16);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html,body{background:var(--paper);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,"WenQuanYi Micro Hei",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* 展示字体：全部本地化，彻底脱离外网依赖。封面临摹手卷，统一毛笔楷书（YanTi=Ma Shan Zheng，已本地化）。
   如需宋体衬线层次，可自托管思源宋体子集为 /fonts/serif.woff2 并恢复 @font-face{font-family:'SerifSC'}。 */
@font-face{
  font-family:'YanTi';
  src:url('/fonts/yan.subset.woff2') format('woff2');
  font-weight:400 900;
  font-display:swap;
}
.serif{font-family:'YanTi',"Songti SC","STSong",serif}
.yanti{font-family:'YanTi',"Songti SC","STSong",serif}

/* 页脚：隐私政策入口（合规可达，古风淡墨） */
.site-foot{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);
  text-align:center;font-size:12px;color:var(--ink-soft);letter-spacing:.04em;line-height:1.9}
.site-foot a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px}
.site-foot a:hover{color:var(--green,#2E6B54)}

/* ===== 首屏 Hero ===== */
.hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:48px 24px;
  background:
    radial-gradient(130% 90% at 50% -15%, var(--peach) 0%, rgba(207,227,216,0) 46%),
    radial-gradient(80% 60% at 85% 8%, rgba(47,125,94,.12) 0%, rgba(47,125,94,0) 55%),
    linear-gradient(180deg, #F4F8F1 0%, var(--paper) 55%, var(--paper2) 100%);
}
/* 纸纹微质感（≤5% 透明度，不干扰内容） */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* 桃花源潜底：极淡远山 + 溪流 + 小舟，仅近观可辨，增强蕴意 */
.taohua{position:absolute;left:0;right:0;bottom:0;width:100%;height:46vh;
  opacity:.09;pointer-events:none;color:var(--ink-faint)}
.taohua svg{width:100%;height:100%;display:block}
/* 一角桃枝（淡） */
.branch{position:absolute;top:0;right:0;width:min(38vw,260px);height:auto;
  opacity:.16;pointer-events:none}
/* 屏幕底部：少许潜色古民居（桃花源烟火，比远山略显色） */
.folk{position:absolute;left:0;right:0;bottom:0;width:100%;height:30vh;
  opacity:.42;pointer-events:none}
.folk svg{width:100%;height:100%;display:block}

/* 飘落桃花瓣（轻量 CSS 动效，添生气不喧宾） */
.petals{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.petal{position:absolute;top:-8%;width:14px;height:14px;
  background:radial-gradient(circle at 35% 30%, #FBD3DE 0%, #F2A9C0 70%, #E98AB0 100%);
  border-radius:14px 1px 14px 1px;opacity:.55;
  animation:fall linear infinite}
@keyframes fall{
  0%{transform:translateY(-10vh) translateX(0) rotate(0)}
  100%{transform:translateY(112vh) translateX(40px) rotate(280deg)}
}

/* 标题区：大竖排「有善」真正居中，古句化为绝对定位左下题跋 */
.hero-inner{position:relative;z-index:2;
  display:flex;justify-content:center;align-items:center;
  width:100%;max-width:96vw;min-height:48vh;
  animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* 居中主标题「有善」：纵向两字 + 朱印；相对定位以承载重合题跋 */
.col-title{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}
.brand{position:relative;z-index:2;writing-mode:vertical-rl;text-orientation:upright;
  font-size:clamp(78px,27vw,172px);font-weight:700;color:var(--ink);
  letter-spacing:.05em;line-height:1.02}
/* 品牌大字「有善」：有善皆墨绿同源（水墨），落款红印由独立 .seal 承担 */
.brand .seal-char{color:var(--ink)}
/* 朱印（横向方印，置于标题之下） */
.seal{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;
  width:1.2em;height:1.2em;background:#E53935;color:#fff;
  border-radius:8px;font-size:.34em;font-weight:700;line-height:1;
  box-shadow:0 3px 9px rgba(229,57,53,.42)}
/* 古句题跋：绝对定位于首屏左下角，与居中主字形成中堂落款式；强制单列窄竖行 */
.col-quote{position:absolute;left:clamp(28px,15vw,150px);bottom:clamp(88px,13vh,140px);top:auto;transform:none;
  writing-mode:vertical-rl;text-orientation:upright;
  font-family:'YanTi',"Songti SC","STSong",serif;
  font-size:clamp(13px,2.6vw,16px);color:var(--ink);
  letter-spacing:.16em;line-height:1.5;text-align:justify;
  max-height:68vh;max-width:3em;overflow:hidden;
  z-index:1;pointer-events:none}
/* 大字右侧落款：2026 丙午年 白文小印（红底白字，落于大字右下，平衡左侧题跋） */
.seal-year{position:absolute;left:calc(100% + clamp(12px,4vw,40px));bottom:4%;
  display:flex;align-items:center;justify-content:center;
  width:1.8em;height:1.8em;
  writing-mode:vertical-rl;text-orientation:upright;
  font-size:clamp(11px,2.6vw,14px);font-weight:700;color:#fff;
  border:2px solid #E53935;border-radius:6px;
  background:#E53935;
  box-shadow:0 2px 8px rgba(212,83,126,.28);
  line-height:1.04;letter-spacing:.01em;z-index:2}
.col-quote .src-end{color:var(--ink);font-weight:700;letter-spacing:.1em}

/* CTA（引流：主按钮 + 低门槛次链接） */
.cta{margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:16px;
  animation:rise 1.1s .15s cubic-bezier(.2,.7,.2,1) both}
.btn-enter{display:inline-flex;align-items:center;justify-content:center;
  padding:13px 34px;border:0;cursor:pointer;font-family:inherit;
  border-radius:999px;font-size:15px;font-weight:700;color:#fff;
  background:linear-gradient(95deg,var(--warm),var(--rose));
  box-shadow:0 12px 30px rgba(212,83,126,.28);text-decoration:none;
  transition:transform .25s,box-shadow .25s}
.btn-enter:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(212,83,126,.36)}
.btn-enter:active{transform:translateY(0)}
.btn-enter:focus-visible{outline:3px solid #fff;outline-offset:3px;
  box-shadow:0 0 0 6px rgba(240,178,142,.35),0 12px 30px rgba(212,83,126,.28)}
.link-peek:focus-visible{outline:3px solid var(--warm);outline-offset:3px;border-radius:4px}
.cta-bang{position:relative;display:inline-flex;align-items:center;justify-content:center}
.link-peek{font-size:14px;color:var(--ink-soft);text-decoration:none;
  letter-spacing:.04em;transition:color .2s}
.link-peek:hover{color:var(--warm)}
/* 信任锚点：真实数据，紧贴 CTA 之下，降低跳出 */
.trust{margin:8px 0 0;font-size:13px;color:var(--ink-soft);letter-spacing:.04em;
  animation:rise 1.2s .3s cubic-bezier(.2,.7,.2,1) both}
.trust .trust-num{color:var(--warm);font-weight:700;font-size:15px;
  font-family:'YanTi',"Songti SC",serif;margin:0 1px}
.scroll-hint{position:absolute;bottom:calc(22px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  z-index:2;color:var(--ink-faint);font-size:12px;letter-spacing:.2em;
  animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* ===== 第二屏：三则心意（轻透纸卡，承接引流） ===== */
.pillars{position:relative;z-index:2;background:var(--paper);
  padding:72px 24px 88px;max-width:980px;margin:0 auto}
/* 第二屏头部：左标题 + 右上二维码（与左上文字协调：墨绿描边 + 朱印角标） */
.pillars-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:36px}
.pillars-head h2{text-align:left;font-size:clamp(22px,5vw,30px);font-weight:700;
  color:var(--ink);letter-spacing:.08em;margin-bottom:0;flex:1;min-width:0}
.join-qr{flex:none;text-align:center}
.qr-card{position:relative;width:116px;height:116px;padding:8px;background:#fff;
  border:2px solid var(--ink);border-radius:14px;box-shadow:var(--shadow)}
.qr-img{width:100%;height:100%;display:block;border-radius:8px}
.qr-seal{position:absolute;right:-9px;bottom:-9px;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  background:#E53935;color:#fff;border-radius:7px;font-size:15px;font-weight:700;
  box-shadow:0 2px 7px rgba(229,57,53,.42)}
.qr-cap{margin:10px 0 6px;font-size:13px;color:var(--ink);letter-spacing:.06em}
.qr-forward{padding:7px 14px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);
  border-radius:999px;font-size:12.5px;cursor:pointer;font-family:inherit;transition:background .2s,color .2s,transform .1s}
.qr-forward:hover{background:var(--ink);color:#fff}
.qr-forward:active{transform:translateY(1px)}
.pillars .sub{text-align:center;color:var(--ink-soft);font-size:14px;
  letter-spacing:.1em;margin-bottom:44px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:rgba(255,255,255,.7);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:20px;padding:28px 22px;text-align:center;
  transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .ic{font-size:34px;line-height:1}
.card h3{margin:14px 0 8px;font-size:19px;font-weight:700;color:var(--ink);text-align:center}
.card p{font-size:14px;color:var(--ink-soft);line-height:1.7;text-align:left;text-indent:2em}
.pillars .cta2{margin-top:48px;text-align:center}
.pillars .icp{margin-top:30px;text-align:center;font-size:12px;color:var(--ink-soft);letter-spacing:.04em}
.pillars .icp a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px}
.pillars .cta2 a{display:inline-flex;align-items:center;gap:8px;
  padding:14px 34px;border-radius:999px;font-weight:700;font-size:16px;color:#fff;
  background:linear-gradient(95deg,#3BB89A,#1E6E54);text-decoration:none;
  box-shadow:0 12px 30px rgba(30,110,84,.26)}

/* ===== 移动端适配 ===== */
@media(max-width:760px){
  .grid{grid-template-columns:1fr;gap:16px}
  .hero{padding:40px 20px}
  .pillars{padding:56px 20px 72px}
  .pillars-head{flex-direction:row;flex-wrap:wrap;gap:14px}
  .qr-card{width:98px;height:98px}
  .join-qr{margin-left:auto}
  .branch{width:34vw}
}
@media(prefers-reduced-motion:reduce){
  .petal,.scroll-hint,.hero-inner,.cta,.trust{animation:none}
}

/* 隐藏页面时暂停花瓣（降耗电） */
.pause-anim .petal{animation-play-state:paused!important}

/* ===== 揭榜：点中积善榜，整页如被揭下般卷起，露出有善社区 ===== */
html.peeled{overflow:hidden;perspective:1400px}
html.peeled body{animation:peelUp .8s cubic-bezier(.7,0,.25,1) forwards;transform-origin:top center}
@keyframes peelUp{
  0%{transform:translateY(0) rotateX(0);opacity:1}
  100%{transform:translateY(-100vh) rotateX(-7deg);opacity:.08}
}