/* =========================================================
   base.css —— 设计令牌 / 全局重置 / 背景装饰 / 页头 / 页脚 / 进场动画
   取自 hoarfall.com（zibll 主题），保持风格统一
   主色 #f04494（粉） / 辅助 紫 #d448f5 蓝 #2997f7 青 #08c4c1
   ========================================================= */
:root{
  --theme:#f04494;            /* 站点主色：亮粉品红 */
  --theme-2:#d448f5;          /* 紫 */
  --theme-3:#2997f7;          /* 蓝 */
  --theme-cyan:#08c4c1;       /* 青 */
  --theme-soft:rgba(253,83,161,.4);
  --bg:#f5f6f7;               /* 站点浅灰背景 */
  --card:#ffffff;
  --text:#4e5358;             /* 主文字色 */
  --muted:#777;
  --muted-2:#999;
  --muted-3:#b1b1b1;
  --border:rgba(50,50,50,.06);
  --shadow:0 4px 10px rgba(116,116,116,.08);
  --shadow-lg:0 16px 40px rgba(240,68,148,.18);
  --radius:8px;               /* 站点主圆角 */
  --radius-lg:18px;
  --grad:linear-gradient(120deg,#f04494,#d448f5 55%,#2997f7);
  --font-disp:"ZCOOL KuaiLe","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-num:"Baloo 2","Noto Sans SC",sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.wrap{width:min(1180px,92vw);margin:0 auto}

/* ============ 全局装饰：渐变网格 + 浮动星光 ============ */
.bg-deco{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--bg)}
.bg-deco::before,.bg-deco::after{
  content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.45;
}
.bg-deco::before{width:520px;height:520px;background:var(--theme);top:-160px;left:-120px;animation:float1 14s ease-in-out infinite}
.bg-deco::after{width:480px;height:480px;background:var(--theme-3);bottom:-160px;right:-120px;animation:float2 16s ease-in-out infinite}
.blob-purple{position:fixed;width:420px;height:420px;border-radius:50%;background:var(--theme-2);filter:blur(80px);opacity:.35;top:40%;left:60%;z-index:-2;animation:float1 18s ease-in-out infinite}
@keyframes float1{50%{transform:translate(40px,30px) scale(1.08)}}
@keyframes float2{50%{transform:translate(-40px,-30px) scale(1.08)}}
.sparkle{position:fixed;z-index:-1;color:#fff;font-size:18px;opacity:.7;pointer-events:none;
  text-shadow:0 0 10px var(--theme-soft);animation:tw 4s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:.9;transform:scale(1.15)}}
/* 流光（按钮共用） */
@keyframes shine{0%{left:-120%}60%,100%{left:140%}}

/* ============ 毛玻璃页头（贴合站点 header 质感） ============ */
.header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  backdrop-filter:saturate(5) blur(20px);-webkit-backdrop-filter:saturate(5) blur(20px);
  background:rgba(255,255,255,.72);
  box-shadow:0 4px 10px var(--border);
  transition:.15s;
}
.header.hide{transform:translateY(-105%)}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-disp);font-size:21px;color:var(--text)}
/* 预留：站点 mascot / logo 图片区 */
.brand .logo{
  width:42px;height:42px;border-radius:14px;flex:none;overflow:hidden;
  background:var(--grad);display:grid;place-items:center;color:#fff;font-size:22px;
  box-shadow:0 4px 12px var(--theme-soft);
}
.brand .logo img,.foot-brand .logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.brand span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(52vw,220px)}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{padding:8px 14px;border-radius:100px;font-weight:500;color:var(--text);transition:.2s}
.nav-links a:hover{color:var(--theme);background:rgba(240,68,148,.08)}
.nav-links a.active{color:var(--theme)}
.nav-cta{
  padding:9px 20px;border-radius:100px;color:#fff;font-weight:700;
  background:var(--grad);box-shadow:0 6px 16px var(--theme-soft);transition:.2s;
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 22px var(--theme-soft)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:24px;height:3px;border-radius:3px;background:var(--text);transition:.3s}
.burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.mobile-menu{display:none;flex-direction:column;background:rgba(255,255,255,.96);
  backdrop-filter:blur(20px);padding:10px 16px 18px;border-top:1px solid var(--border)}
.mobile-menu a{padding:12px 8px;border-radius:10px;font-weight:500}
.mobile-menu a:hover{background:rgba(240,68,148,.08);color:var(--theme)}
.mobile-menu.show{display:flex}

/* ============ 通用区块标题 ============ */
section{padding:74px 0;position:relative}
.sec-head{text-align:center;margin-bottom:46px}
.sec-tag{
  display:inline-block;font-family:var(--font-num);font-weight:800;letter-spacing:2px;
  font-size:13px;color:var(--theme);background:rgba(240,68,148,.1);
  padding:5px 16px;border-radius:100px;margin-bottom:14px;
}
.sec-head h2{font-family:var(--font-disp);font-size:clamp(26px,4vw,40px);color:var(--text);line-height:1.3}
.sec-head p{color:var(--muted);margin-top:10px;font-size:15px}

/* ============ 页脚（贴合站点简洁页脚） ============ */
.footer{background:#fff;border-top:1px solid var(--border);padding:40px 0 30px;margin-top:20px}
.foot-grid{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:flex-start}
.foot-brand{font-family:var(--font-disp);font-size:20px;display:flex;align-items:center;gap:10px}
.foot-brand .logo{width:38px;height:38px;border-radius:12px;overflow:hidden;background:var(--grad);display:grid;place-items:center;color:#fff}
.foot-links{display:flex;gap:26px;flex-wrap:wrap}
.foot-links a{color:var(--muted);font-size:14px;transition:.2s}
.foot-links a:hover{color:var(--theme)}
.foot-copy{text-align:center;color:var(--muted-3);font-size:13px;margin-top:28px;padding-top:20px;border-top:1px solid var(--border)}

/* ============ 进场动画 ============ */
.reveal{opacity:0;transform:translateY(28px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}