/* ============================================================
   星伴 by7 · 全局基础样式 base.css
   深色星河视觉体系 · 红粉强调 · 金黄星光 · 薄荷认证
   原创 CSS · 适配 PbootCMS 模板体系
   引用路径：{pboot:sitedomain}/skin/css/base.css
   ============================================================ */

/* ============ 字体引入（Google Fonts 远程加载） ============ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700&family=Noto+Serif+SC:wght@400;600;700&display=swap');

/* ============ 设计令牌：CSS 变量（--xb- 前缀） ============ */
:root{
  /* —— 背景层 —— */
  --xb-bg:#0a0a14;              /* 主背景 深空墨蓝 */
  --xb-surface:#12121f;         /* 卡片底色 次深 */
  --xb-surface2:#1a1a2e;        /* 次级卡片 浅一档 */
  --xb-surface3:#16213e;        /* 第三层 蓝黑 */

  /* —— 文字层 —— */
  --xb-text:#e8e8f0;            /* 主文字 近白带蓝 */
  --xb-muted:#8888a8;           /* 次要文字 灰蓝 */
  --xb-dim:#5a5a7a;             /* 暗淡文字 深灰蓝 */

  /* —— 强调色系 —— */
  --xb-accent:#e94560;          /* 红粉 主品牌强调 */
  --xb-accent2:#ff6b8a;         /* 红粉亮色 hover */
  --xb-star:#f4d35e;            /* 金黄星光 数字/评分 */
  --xb-mint:#7fdcb1;            /* 薄荷绿 认证/成功 */
  --xb-violet:#b18cfe;          /* 紫色 气质标签 */

  /* —— 边框与发光 —— */
  --xb-border:rgba(233,69,96,0.18);
  --xb-bd-soft:rgba(255,255,255,0.06);
  --xb-glow:rgba(233,69,96,0.35);
  --xb-glow-soft:rgba(233,69,96,0.12);
  --xb-star-glow:rgba(244,211,94,0.2);

  /* —— 字体族 —— */
  --xb-font-display:'Bricolage Grotesque',sans-serif;
  --xb-font-body:'Noto Serif SC',serif;

  /* —— 尺寸令牌 —— */
  --xb-wrap-w:1240px;           /* 主容器最大宽度 */
  --xb-nav-h:64px;              /* 导航栏高度 */
  --xb-radius:16px;             /* 通用圆角 */
  --xb-radius-lg:24px;          /* 大圆角 */
  --xb-radius-pill:999px;       /* 胶囊圆角 */

  /* —— 动效曲线 —— */
  --xb-ease:cubic-bezier(0.4,0,0.2,1);
  --xb-dur:0.3s;
}

/* ============ CSS Reset 重置 ============ */
*,*::before,*::after{margin:0;padding:0;box-sizing:inherit}
html{
  box-sizing:border-box;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  font-size:16px;
}
body{
  font-family:var(--xb-font-body);
  background:var(--xb-bg);
  color:var(--xb-text);
  line-height:1.7;
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
  padding-top:0;
}
/* 全局氛围光晕：双角径向渐变叠加，营造星河深空感 */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 18% 0%,rgba(233,69,96,0.07),transparent 60%),
    radial-gradient(ellipse 50% 40% at 82% 100%,rgba(244,211,94,0.045),transparent 60%);
}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
img{max-width:100%;display:block;border:0}
button{cursor:pointer;font-family:inherit;background:none;border:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit;outline:none;border:none;background:none}
table{border-collapse:collapse;border-spacing:0}
em,i{font-style:normal}
::selection{background:var(--xb-glow-soft);color:var(--xb-text)}

/* ============ 主容器 .xb-wrap ============ */
.xb-wrap{
  max-width:var(--xb-wrap-w);
  margin:0 auto;
  padding:0 24px;
  position:relative;
  z-index:1;
}

/* ============ 星光粒子背景 .xb-starfield（纯 CSS · box-shadow 多点散布） ============ */
/* 用单个伪元素 + 多层 box-shadow 模拟满天星点，配合 drift 动画做缓慢漂移 */
.xb-starfield{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
/* 第一层星点：白光细碎 */
.xb-starfield::before{
  content:"";
  position:absolute;
  top:0;left:0;
  width:2px;height:2px;
  border-radius:50%;
  background:transparent;
  /* 多点 box-shadow 散布，每颗星位置/颜色不同 */
  box-shadow:
    120px 80px #fff, 340px 200px #fff, 560px 60px rgba(255,255,255,0.6),
    780px 320px #fff, 980px 140px rgba(255,255,255,0.5), 1180px 280px #fff,
    200px 420px #fff, 420px 540px rgba(255,255,255,0.7), 640px 480px #fff,
    860px 600px rgba(255,255,255,0.5), 1060px 520px #fff, 1280px 460px #fff,
    60px 700px #fff, 280px 820px rgba(255,255,255,0.6), 500px 760px #fff,
    720px 900px #fff, 920px 840px rgba(255,255,255,0.5), 1120px 780px #fff,
    160px 1000px #fff, 380px 1080px rgba(255,255,255,0.7), 600px 1020px #fff,
    820px 1140px #fff, 1020px 1060px rgba(255,255,255,0.5), 1220px 980px #fff;
  animation:xb-drift 90s linear infinite;
  opacity:0.7;
}
/* 第二层星点：金黄星光 带辉光 */
.xb-starfield::after{
  content:"";
  position:absolute;
  top:0;left:0;
  width:3px;height:3px;
  border-radius:50%;
  background:transparent;
  box-shadow:
    220px 160px var(--xb-star), 540px 380px var(--xb-star),
    860px 220px var(--xb-star), 1140px 420px var(--xb-star),
    320px 640px var(--xb-star), 680px 720px var(--xb-star),
    960px 860px var(--xb-star), 180px 940px var(--xb-star),
    460px 1040px var(--xb-star), 780px 1100px var(--xb-star),
    1080px 980px var(--xb-star), 1240px 700px var(--xb-star);
  animation:xb-twinkle 5s ease-in-out infinite,xb-drift 120s linear infinite;
}
@keyframes xb-drift{
  from{transform:translateY(0)}
  to{transform:translateY(-40px)}
}
@keyframes xb-twinkle{
  0%,100%{opacity:0.3}
  50%{opacity:1}
}

/* ============ 顶部导航栏 .xb-nav ============ */
.xb-nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  height:var(--xb-nav-h);
  background:rgba(10,10,20,0.82);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid var(--xb-bd-soft);
}
.xb-nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:100%;
  max-width:var(--xb-wrap-w);
  margin:0 auto;
  padding:0 24px;
}
/* 品牌标识 */
.xb-logo{
  font-family:var(--xb-font-display);
  font-weight:700;
  font-size:24px;
  color:var(--xb-text);
  letter-spacing:-0.02em;
  display:flex;
  align-items:center;
  gap:10px;
}
.xb-logo-dot{
  width:10px;height:10px;
  background:var(--xb-accent);
  border-radius:50%;
  box-shadow:0 0 14px var(--xb-accent);
  animation:xb-pulse 2.2s var(--xb-ease) infinite;
}
.xb-logo em{color:var(--xb-accent)}
@keyframes xb-pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.35);opacity:0.65}
}
/* 导航链接 */
.xb-nav-links{
  display:flex;
  gap:30px;
}
.xb-nav-links a{
  color:var(--xb-muted);
  font-size:14px;
  font-family:var(--xb-font-display);
  font-weight:500;
  position:relative;
  transition:color var(--xb-dur) var(--xb-ease);
}
.xb-nav-links a:hover,
.xb-nav-links a.xb-on{
  color:var(--xb-accent);
}
.xb-nav-links a.xb-on::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-9px;
  height:2px;
  background:var(--xb-accent);
  border-radius:2px;
  box-shadow:0 0 8px var(--xb-accent);
}
/* 导航 CTA 按钮 */
.xb-nav-cta{
  padding:8px 22px;
  background:var(--xb-accent);
  color:#fff;
  border-radius:var(--xb-radius-pill);
  font-size:13px;
  font-family:var(--xb-font-display);
  font-weight:600;
  box-shadow:0 4px 16px var(--xb-glow-soft);
  transition:transform var(--xb-dur) var(--xb-ease),box-shadow var(--xb-dur) var(--xb-ease);
}
.xb-nav-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 22px var(--xb-glow);
}

/* ============ 通用标题 .xb-title ============ */
.xb-title{
  font-family:var(--xb-font-display);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.2;
}
.xb-title em{font-style:normal;color:var(--xb-accent)}
.xb-title-xl{font-size:36px}     /* 区块大标题 */
.xb-title-lg{font-size:30px}     /* 次级标题 */
.xb-title-md{font-size:22px}     /* 卡片标题 */
.xb-title-sm{font-size:17px}     /* 小标题 */

/* 区块标题眉标（小标签） */
.xb-eyebrow{
  font-family:var(--xb-font-display);
  font-size:11px;
  color:var(--xb-accent);
  letter-spacing:0.3em;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}
.xb-eyebrow::before{
  content:"";
  width:20px;height:1px;
  background:var(--xb-accent);
}

/* ============ 通用副标题 .xb-sub ============ */
.xb-sub{
  font-size:14px;
  color:var(--xb-muted);
  line-height:1.8;
  max-width:520px;
}

/* ============ 通用标签 .xb-tag ============ */
.xb-tag{
  display:inline-block;
  font-size:10px;
  padding:3px 10px;
  background:var(--xb-surface2);
  border:1px solid var(--xb-bd-soft);
  border-radius:var(--xb-radius-pill);
  color:var(--xb-muted);
  font-family:var(--xb-font-display);
  font-weight:500;
  letter-spacing:0.05em;
}
.xb-tag.xb-tag-accent{
  background:var(--xb-accent);
  border-color:var(--xb-accent);
  color:#fff;
  font-weight:600;
}
.xb-tag.xb-tag-gold{
  background:var(--xb-star);
  border-color:var(--xb-star);
  color:var(--xb-bg);
  font-weight:700;
}
.xb-tag.xb-tag-mint{
  background:rgba(127,220,177,0.12);
  border-color:rgba(127,220,177,0.25);
  color:var(--xb-mint);
}
.xb-tag.xb-tag-violet{
  background:rgba(177,140,254,0.12);
  border-color:rgba(177,140,254,0.25);
  color:var(--xb-violet);
}

/* ============ 通用按钮 .xb-btn ============ */
.xb-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:13px 28px;
  border-radius:var(--xb-radius-pill);
  font-family:var(--xb-font-display);
  font-weight:600;
  font-size:14px;
  transition:transform var(--xb-dur) var(--xb-ease),box-shadow var(--xb-dur) var(--xb-ease),background var(--xb-dur) var(--xb-ease),border-color var(--xb-dur) var(--xb-ease);
  cursor:pointer;
  white-space:nowrap;
}
/* 实心主按钮 */
.xb-btn-primary{
  background:var(--xb-accent);
  color:#fff;
  box-shadow:0 4px 16px var(--xb-glow-soft);
}
.xb-btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px var(--xb-glow);
  background:var(--xb-accent2);
}
/* 幽灵按钮 */
.xb-btn-ghost{
  background:transparent;
  border:1px solid var(--xb-border);
  color:var(--xb-text);
}
.xb-btn-ghost:hover{
  border-color:var(--xb-accent);
  background:var(--xb-glow-soft);
}
/* 小尺寸 */
.xb-btn-sm{padding:7px 16px;font-size:12px}

/* ============ 区块通用 .xb-sec ============ */
.xb-sec{
  padding:72px 0;
  position:relative;
  z-index:1;
}
.xb-sec-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:40px;
}
.xb-sec-head-left{flex:1;min-width:240px}
.xb-sec-more{
  color:var(--xb-muted);
  font-size:13px;
  font-family:var(--xb-font-display);
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:4px;
  transition:color var(--xb-dur) var(--xb-ease);
}
.xb-sec-more:hover{color:var(--xb-accent)}

/* ============ 移动端 CTA .xb-mcta ============ */
.xb-mcta{
  display:none;
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:90;
  background:rgba(10,10,20,0.95);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--xb-border);
  padding:12px 16px;
}
.xb-mcta-row{
  display:flex;
  gap:10px;
}
.xb-mcta-row a{
  flex:1;
  text-align:center;
  padding:12px;
  border-radius:var(--xb-radius-pill);
  font-family:var(--xb-font-display);
  font-size:13px;
  font-weight:600;
}
.xb-mcta-row a.xb-mcta-pri{background:var(--xb-accent);color:#fff}
.xb-mcta-row a.xb-mcta-ghost{border:1px solid var(--xb-border);color:var(--xb-text)}

/* ============ 回到顶部 .xb-totop ============ */
.xb-totop{
  position:fixed;
  bottom:24px;right:24px;
  width:48px;height:48px;
  border-radius:50%;
  background:var(--xb-surface);
  border:1px solid var(--xb-border);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--xb-accent);
  cursor:pointer;
  z-index:95;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--xb-dur) var(--xb-ease),transform var(--xb-dur) var(--xb-ease),border-color var(--xb-dur) var(--xb-ease),box-shadow var(--xb-dur) var(--xb-ease);
  font-size:18px;
}
.xb-totop.xb-show{
  opacity:1;
  pointer-events:auto;
}
.xb-totop:hover{
  transform:translateY(-4px);
  border-color:var(--xb-accent);
  box-shadow:0 4px 16px var(--xb-glow);
}

/* ============ 通用卡片基底 .xb-card ============ */
.xb-card{
  background:var(--xb-surface);
  border:1px solid var(--xb-bd-soft);
  border-radius:var(--xb-radius);
  transition:transform var(--xb-dur) var(--xb-ease),border-color var(--xb-dur) var(--xb-ease),box-shadow var(--xb-dur) var(--xb-ease);
}
/* 卡片悬停：translateY 上浮 + 发光阴影（不用 filter） */
.xb-card:hover{
  transform:translateY(-4px);
  border-color:var(--xb-border);
  box-shadow:0 12px 32px rgba(0,0,0,0.4),0 0 0 1px var(--xb-glow-soft);
}

/* ============ 响应式断点 ============ */
/* —— 平板及以下 980px —— */
@media(max-width:980px){
  .xb-nav-links{display:none}
  .xb-nav-links.open{display:flex;position:fixed;top:60px;left:0;right:0;flex-direction:column;background:#0a0a14;padding:16px 24px;gap:12px;z-index:999;border-bottom:1px solid rgba(255,255,255,.06)}
  .xb-nav-links.open a{padding:10px 0;font-size:16px}
  .xb-title-xl{font-size:28px}
  .xb-title-lg{font-size:24px}
  .xb-sec{padding:56px 0}
  .xb-sec-head{flex-direction:column;align-items:flex-start;gap:14px}
}

/* —— 手机 560px —— */
@media(max-width:560px){
  .xb-wrap{padding:0 16px}
  .xb-title-xl{font-size:26px}
  .xb-title-lg{font-size:22px}
  .xb-mcta{display:block}
  /* 移动端为底部 CTA 留出空间 */
  body{padding-bottom:70px}
  .xb-totop{bottom:84px;right:16px}
  .xb-sec{padding:40px 0}
  .xb-sec-head{margin-bottom:24px}
}