:root{
  /* 取自 logo 的玫红/紫，给按钮用 */
  --brand-pink:  #ff4d8f;
  --brand-violet:#b36cff;
  --btn-text:#fff;
  --content-max: 1100px;

  /* 按钮+文案相对屏幕中线的下移距离（可微调） */
--cta-offset: clamp(100px, 18vh, 150px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:#000;color:#fff;
  -webkit-font-smoothing:antialiased;
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,
               "PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",sans-serif;
}

.page-box{position:relative;min-height:100vh;overflow:hidden}

/* PC：大横图 */
.desktop-hero{display:none;position:absolute;inset:0}
.desktop-hero img{width:100%;height:100%;object-fit:cover;object-position:center}

/* Mobile：自动左右滑动背景（纯 CSS 动画） */
.mobile-hero{
  display:flex;
  position:absolute;
  inset:0;
  overflow:hidden;
}
.mobile-hero .bg{
  position:absolute;
  inset:0;
  background-image:url('../images/bg.js');
  background-size:auto 100%;          /* 高度贴满屏幕，不裁上下 */
  background-repeat:no-repeat;
  background-position:50% center;     /* 居中，左右可平移 */
  animation:panX 9s linear infinite alternate;
  will-change:background-position;
}
@keyframes panX{
  from{background-position:0% center}
  to  {background-position:100% center}
}


.top-right-badge{
  position:absolute;
  top:16px;
  right:16px;
  z-index:9999;
  pointer-events:auto;
  padding:8px 14px;
  border-radius:999px;
  font-size:14px;       /* ← 原来是 12px，调大即可 */
  font-weight:600;      /* 可选，让字更粗一点 */
  line-height:1;
  color:#fff;
  text-decoration:none;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(8px);
  transition:transform .2s ease, background-color .2s ease;
}
.top-right-badge:hover{
  transform:translateY(-1px);
  background:rgba(0,0,0,.35);
}

/* 中心层（含浅遮罩） */
.center-overlay{
  position:absolute;inset:0;z-index:5;
}
.center-overlay::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,.22) 70%),
    linear-gradient(var(--overlay), var(--overlay));
}

/* —— 正中央：Logo + 名称 —— */
.hero-core{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-70%);
  text-align:center;width:min(92vw,var(--content-max));
}
.logo{
  width:min(21vw,95px);   /* 或者 18vw,80px  根据效果再调 */
  height:auto;
  border-radius:22%;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.title{
  margin:12px 0 0;
  font-size:clamp(18px,4.5vw,32px);  /* 这里改小字号 */
  line-height:1.2;
  text-shadow:0 2px 14px rgba(0,0,0,.28);
  letter-spacing:.3px;
}

/* —— 中央略下：按钮 + 文案 —— */
.cta-wrap{
  position:absolute;left:50%;
  top:calc(50% + var(--cta-offset));
  transform:translateX(-50%);
  text-align:center;width:min(92vw,var(--content-max));
}
.cta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 26px;border:none;border-radius:16px;
  color:var(--btn-text);font-size:18px;font-weight:800;cursor:pointer;
  background-image:linear-gradient(135deg, var(--brand-pink), var(--brand-violet));
  box-shadow:0 12px 34px rgba(215,76,156,.45);
  animation:bounceY 1.4s ease-in-out infinite;
  -webkit-tap-highlight-color:transparent;
}
.cta:active{filter:saturate(1.05) brightness(.98)}
@keyframes bounceY{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.subtext{margin:12px 0 0;font-size:14px;opacity:.95;text-shadow:0 1px 8px rgba(0,0,0,.3)}

/* 响应式：≥768px 视为 PC */
@media (min-width:768px){
  .mobile-hero{display:none}
  .desktop-hero{display:block}
  :root{ --cta-offset: 100px; } /* PC 上略小一点 */
  .top-right-badge{top:20px;right:24px}
}